Diseño Interactivo

Dispositivos móviles: el concepto de mobile first
Lec 1 MOD 1
Uno de los campos con más auge en el mundo del diseño interactivo es el diseño de
webs y apps para dispositivos móviles. Obviamente, esto está basado en las
estadísticas que el mismo Google proporciona: a nivel mundial, ya son más las
búsquedas desde dispositivos móviles que desde dispositivos de escritorio.
LECCIÓN 1 de 4
Introducción
En países como Suecia, las estadísticas indican que uno de cada dos niños de 2 años de edad está
utilizando una tablet, y si subimos la edad hasta 8 años, prácticamente, cada niño tiene una tablet. Esto
nos muestra una clara tendencia a futuro.
Nuestro país no está exento de esta tendencia. A continuación, veremos unas gráficas de tráfico de
Google Analytics (servicio gratuito de métrica web de Google) del sitio web de una pyme argentina. Allí
veremos el tráfico recibido en su sitio en el año 2019, momento en el que los dispositivos móviles casi
empataban con los de escritorio, y en el año 2020, ya hay un claro ganador.
Figura 1: Tráfico del sitio web de una pyme argentina en el año 2019
Fuente: elaboración propia.
Figura 1. Tráfico del sitio web de una pyme argentina en el año 2019. Vemos casi un empate
entre la cantidad de usuarios que visitan el sitio desde Android (dispositivos móviles), 49,65 %, y
Windows (dispositivos de escritorio), 43,59 %.
Figura 2: Tráfico del sitio web de una pyme argentina en el año 2020

Figura 2. Tráfico del sitio web de una pyme argentina en el año 2020. Solo un año después, las visitas
desde dispositivos móviles Android se dispararon al 61,78 %.
Tradicionalmente, los sitios webs se diseñaban para el entorno de escritorio y luego se adaptaban a los
dispositivos móviles. Ahora bien, basándonos en las estadísticas mencionadas anteriormente, ¿no sería
más sensato hacerlo al revés? Eso es “mobile first”.
La filosofía mobile first consiste en diseñar los sitios webs y

aplicaciones, primeramente, para las pantallas pequeñas, y luego
agregarles contenido y hacerles ajustes para los entornos de
escritorio. Es una forma de pensar y diseñar completamente contraria
a como se hizo durante muchos años.
El concepto de mobile first fue creado por Luke Wroblewski (director de producto de Google) en el año
2011, y lo desarrolla en su libro Mobile First.
En su sitio web, Luke Wroblewski dice:
Durante años, la mayoría de los equipos webs han diseñado productos e información
para la PC de escritorio/portátil. Para estos equipos, el móvil (si es que sucedió) era
solo una versión básica de la de escritorio.
Lamentablemente, este enfoque realmente tuvo sentido por un tiempo. Navegar por la
Web en teléfonos móviles era doloroso; los operadores controlaban el acceso a la Web
en sus dispositivos, y las velocidades de la red móvil a menudo hacían que todo se
detuviera. Pocas personas usaban la Web en móviles y aquellos que lo hacían, con
frecuencia, se enfrentaban a una experiencia desagradable.
Pero las cosas han cambiado tan dramáticamente en los últimos años que comenzar
con el escritorio puede ser una forma cada vez más retrasada de pensar en un producto
web. Diseñar para dispositivos móviles primero no solo te prepara para el crecimiento
explosivo y las oportunidades en este espacio, sino que te obliga a concentrarte y te
permite innovar.
(Wroblewski, octubre de 2011, https://www.lukew.com/resources/mobile_first.asp).
Para comprender lo que implica pasar de un enfoque tradicional a un enfoque mobile first, conoceremos
el caso de Zalando, una empresa online europea de venta de ropa que ha atravesado esta transición de
forma muy exitosa.
LECCIÓN 2 de 4
Zalando: un caso de éxito de mobile first
Zalando es una tienda alemana de moda online que se especializa en la venta de zapatos y ropa para
mujeres, hombres y niños. Fue creada en el año 2008 y su sede se encuentra en Berlín, Alemania. Sin
embargo, está presente en varios países de Europa: Austria, Bélgica, España, Finlandia, Francia,
Inglaterra, Italia, Luxemburgo, Noruega, Países Bajos, Suecia y Suiza.
En España, desde hace años, Zalando forma parte del top ten de empresas online que más facturan, con
alrededor de 3 000 millones de euros.
Figura 3: Sitio web de Zalando
Fuente: Captura de pantalla del sitio web de Zalando (https://www.zalando.es/).
Figura 3. Sitio web de Zalando. Versión española del sitio web de la empresa de moda online, Zalando.
Según estadísticas de la propia empresa, 6 de cada 10 usuarios que llegan a su página web lo hacen a
través del teléfono móvil o la tablet. Su adaptación al entorno mobile ha sido ejemplo de buenas
prácticas para muchas otras compañías. Dentro de las funciones de su app, los usuarios pueden
descubrir las tendencias de moda, comprar online el catálogo completo, sincronizar la cesta de compras
y la lista de favoritos entre distintos dispositivos, y algunas funciones innovadoras, como la posibilidad
de hacer búsquedas por foto y escaneo de códigos de barra. En particular, la búsqueda por fotos es, tal
vez, la función que más llama la atención: el usuario puede tomar una foto de la indumentaria de una
persona y subirla a la aplicación, la cual le mostrará productos de la tienda que coincidan en
estampados, corte, estilo, etc.
El secreto del éxito de Zalando consiste en brindar una experiencia de usuario continua y
cuidando hasta el último detalle la usabilidad de cada dispositivo (contenidos adaptados,
formularios más cortos, ofertas especiales, etc.). También la localización y la adaptación a las
necesidades de cada zona geográfica han sido fundamentales para ofrecerle al usuario lo que
necesita.
Figura 4: La app de Zalando
Fuente: Captura de pantalla de app de Zalando (https://www.zalando.es/zalando-apps/).

Zalando comenzó a notar el crecimiento de su tráfico desde dispositivos móviles desde el año 2012, y
en 2014, se produce el quiebre de la barrera del 50 % y los dispositivos móviles superan y dejan atrás al
entorno de escritorio. En Zalando, tienen muy claro que los usuarios no interactúan de la misma manera
con una computadora que con un dispositivo móvil. Por esta razón, cuando diseñan y producen
contenidos para móvil lo hacen teniendo en cuenta detalles de usabilidad, tales como disminuir la
cantidad de clics, incluir menos imágenes o imágenes más pequeñas para que la página se cargue más
rápido, y con un enfoque más hacia lo social, que es lo que la plataforma móvil propicia.
Zalando ha tenido también que aprender a adaptarse al mercado de cada país en el que opera. Por
ejemplo, los métodos de pago varían de país en país según las preferencias de los usuarios y lo que
ellos quieren y buscan. La madurez en e-commerce es también muy variable en cada país. Por ejemplo,
haciendo una comparación entre Italia y Alemania, el primero es un mercado con mucho potencial, pero
poca madurez. Debido a esto, Zalando le da un tono un poco más “educativo” a los contenidos dirigidos
a dicho país. Una notable campaña de marketing realizada en este país consistió en abrir puestos de
compra a la tienda en hogares italianos, invitando a los vecinos a realizar compras desde allí para
transmitir el mensaje de la comodidad de comprar desde casa, generar confianza y lograr un
acercamiento con los usuarios.
Para lograr una transición exitosa hacia la filosofía mobile first, Zalando implementó los “embajadores
móviles”. Se trata de una serie de personas que comparten su pasión por el mundo móvil y cada una de
ellas se convierte en la persona de referencia en su canal o departamento para resolver inquietudes,
dudas y controlar los componentes mobile de los proyectos, que las campañas estén optimizadas para
mobile, etc.
También se realizan iniciativas y eventos para difundir la filosofía mobile first. Para probar los proyectos,
Zalando utilizaba, primeramente, emuladores (simuladores virtuales de dispositivos reales, como, por
ejemplo, http://mobiletest.me/). Sin embargo, los desarrolladores de Zalando notaban que les faltaba
la experiencia táctil para poder experimentar los desarrollos de forma realista. En consecuencia, se
crearon estaciones de dispositivos móviles con todo tipo de dispositivos: modernos, antiguos, con
diferentes navegadores, sistemas operativos, etc., que les permiten probar mucho mejor los desarrollos.
A partir del caso presentado, podemos comprender los retos de seguir la filosofía mobile first. No son
solo retos técnicos o tecnológicos, sino también culturales. Hemos visto los esfuerzos que realiza
Zalando para difundir el mobile entre sus empleados, dentro de una empresa que de por sí es
tecnológica. Imaginemos cuánto más difícil será lograrlo en empresas cuya base no es tecnológica.
Desde el punto de vista técnico, Zalando ha tenido que adaptar sus contenidos multimedia teniendo en
cuenta la interfaz táctil y las velocidades de descarga de los dispositivos móviles.
Se trata de un gran esfuerzo y un gran desafío que debemos asumir si queremos ser competitivos en el
mundo web de hoy y del futuro.
¿Qué significa el concepto de mobile first?
Diseñar los productos webs, primero, para pantallas pequeñas de

dispositivos móviles, y luego adaptarlos a las pantallas más
grandes de los dispositivos de escritorio.
Diseñar los productos webs, primero, para las pantallas más grandes de
los dispositivos de escritorio, y luego adaptarlos a las pantallas pequeñas
de dispositivos móviles quitando elementos.
Optimizar las imágenes, videos y demás archivos multimedia para

conexiones de baja velocidad.
Crear los productos webs para que se adapten a todo tipo de pantallas,
principalmente las de los dispositivos móviles.
SUBMIT
La filosofía mobile first requiere la adaptación de los archivos multimedia.
Verdadero.
Falso.
SUBMIT
Restricciones y posibilidades del diseño para
pantalla Lec 2 MOD 1
En nuestros días, los usuarios de productos interactivos acceden a ellos desde
Le
infinidad de dispositivos: PC de escritorio, smartphone, tablet, notebook,
netbook, cloudbook y hasta smart TV. Cada dispositivo posee pantallas con
diferentes características y eso impone una serie de desafíos a los diseñadores
interactivos. Además, dentro de cada categoría de dispositivos hay también
diferencias en sus pantallas. Por ejemplo, no todos los smartphones tienen
pantallas con las mismas características. Esto crea una cantidad increíble de
tamaños, orientaciones y resoluciones de pantalla.
LECCIÓN 1 de 4
Introducción
Para abordar el problema de las restricciones y posibilidades del diseño para pantalla, tomaremos
como ejemplo el diseño de páginas webs. Es un gran ejemplo, puesto que es un tipo de producto
interactivo especialmente destinado a visualizarse en cualquier tipo de dispositivo.
Las personas que se enfrentan a este gran problema generalmente son los llamados
“maquetadores webs”. Aunque normalmente ellos reciben los problemas de maquetación editorial
ya resueltos, tienen que lidiar con los distintos tamaños, resoluciones, orientaciones y
características técnicas de los dispositivos con los que el usuario podría ver la página web.
La variable más complicada es la resolución de pantalla. Esta variable hace referencia a la cantidad
de píxeles que tiene una pantalla. Siempre se menciona primero la cantidad de píxeles de ancho y
luego la cantidad de píxeles de alto.
Así, por ejemplo, la resolución que conocemos como “Full HD” es aquella que presenta 1920 píxeles
de ancho por 1080 píxeles de alto. Muchas PC de escritorio y smart TVs tienen esta resolución.
Solo por poner algunos ejemplos más, el Apple Iphone 5 mini tiene una resolución 640x1136
píxeles. Un smartphone de gama media, como el Samsung J5, tiene 720x1280 píxeles, y la tablet
Apple Ipad tiene 1024x769 píxeles. Nos encontramos así con cientos de resoluciones diferentes,
llegando hasta lo que conocemos como “Ultra HD” con resoluciones de 3840x2160 píxeles.
Esta variedad de pantallas plantea una gran pregunta para los maquetadores webs: ¿de qué
tamaño hay que hacer una página web? Si la página se hace de gran tamaño, por ejemplo, Full HD
(1920x1080 px) los usuarios que la visiten desde un smartphone verán una versión a escala muy
pequeña de la página y tendrán que estar permanentemente realizando zoom para poder leer los
contenidos, lo que dará una pésima experiencia de usuario. Si, por lo contrario, la página se crea
para el tamaño de un smartphone, los usuarios que la visiten con una PC de escritorio o smart TV
Full HD verán enormes áreas sin contenido.
En esta lectura, abordaremos distintas técnicas para solucionar este problema y comprender su
evolución.
Para comprender concretamente los problemas y soluciones del diseño para pantallas, a
continuación, presentaremos el caso de un sitio web de una pyme cordobesa. Conoceremos una
versión antigua del sitio y sus problemas con las distintas pantallas y veremos cómo están
resueltos en la versión actual.
LECCIÓN 2 de 4
Record Diesel Spare Parts: análisis de su sitio web
La empresa en cuestión es Record Diesel Spare Parts. Fue fundada en 1954 por un carpintero, Don
Primo Morellato que, dejándose llevar por su pasión, cambia de rubro y se convierte en un bombista
especialista en bombas inyectoras Diesel. De allí nace el ADN diésel de esta empresa familiar. Don
Primo Morellato fue pionero en el rubro; luego toman la continuidad sus hijos y nietos, y el negocio
sigue creciendo. A los 23 años, uno de los hijos, Ricardo Morellato, se recibe de ingeniero mecánico
electricista y funda una fábrica de bombas inyectoras donde, además, se reconstruían cabezales
y autopartes para estas. La empresa crece y se transforma en una empresa familiar, con 58 años
de historia y reconocida tanto a nivel nacional como internacional.
La empresa luego suma la importación de productos, principalmente desde Italia, marcando una
diferencia en el rubro autopartista.
Hoy en día, bajo la dirección de uno de sus nietos, Juan Pablo Morellato, la empresa es líder en la
tecnología Common Rail (sistema electrónico de inyección de combustible).
Record Diesel Spare Parts: los inconvenientes de una versión antigua de

su sitio web por no tener en cuenta los diferentes tipos de pantalla
Antes de adentrarnos en las técnicas para lidiar con los distintos tipos de pantalla, veremos qué
pasaría si no aplicamos ninguna, es decir, si creamos la página web para un tamaño dado. Esto le
sucedía en el pasado a la empresa de nuestro caso, Record Diesel Spare Parts. Habían diseñado
su sitio web para PC de escritorio sin tener en cuenta el resto de resoluciones existentes. En
consecuencia, su sitio no se visualizaba correctamente prácticamente en ninguna pantalla y más
teniendo en cuenta que había sido realizada hacía varios años y las PC de escritorio habían
aumentado considerablemente su resolución. Concretamente, la página tenía un tamaño de 1024
píxeles de ancho. A continuación, veremos esta versión antigua del sitio web de Record Diesel
Spare Parts, desde una PC de escritorio Full HD (1920x1080 px) y desde un smartphone:
Figura 1: El sitio web de Record Diesel Spare Parts desde una pantalla
Full
HD
Figura 1. Sitio web antiguo de Record Diesel Spare Parts desde una pantalla Full HD. Como la
página estaba diseñada para una resolución de 1024 píxeles de ancho, al ser vista desde una
pantalla de 1920 píxeles quedaba una gran cantidad de espacio sobrante.
Figura 2: Sitio web antiguo de Record Diesel Spare Parts desde un
smartphone
Figura 2. Sitio web antiguo de Record Diesel Spare Parts desde un smartphone. En la pantalla de
un smartphone, el texto se hacía tan pequeño que era imposible leerlo.
Estas son las típicas clases de problemas que tienen los sitios webs cuando se crean de un tamaño
fijo sin tener en cuenta la enorme variedad de resoluciones que puede tener el usuario final en su
dispositivo.
Veamos ahora la versión actual del sitio web de Record, con técnicas aplicadas para adaptarse a
distintas pantallas:
Figura 3: Sitio web actual de la empresa Record Diesel Spare Parts desde
una pantalla Full HD
Fuente: Captura de pantalla del sitio web de Record Diesel Spare Parts desde una pantalla
Full HD (https://recordparts.com.ar/).
Figura 3. Sitio web actual de la empresa Record Diesel Spare Parts. La versión actual del sitio web
ocupa el 100 % de la pantalla Full HD.
Figura 4: Sitio web actual de la empresa Record Diesel Spare Parts
desde un smartphone
Fuente: Captura de pantalla del sitio web de Record Diesel Spare Parts desde smartphone
(https://recordparts.com.ar/).
Figura 4. Sitio web actual de la empresa Record Diesel Spare Parts desde un smartphone. Versión
actual del sitio web con todos sus textos perfectamente legibles desde la pantalla de un
smartphone.
LECCIÓN 3 de 4
Técnicas para solucionar el problema de las
distintas resoluciones de pantalla en las páginas
webs
Versión móvil
Una técnica que se empleó —y aún hoy se sigue empleando— es, sencillamente, producir una
versión para cada tipo de pantalla. O, al menos, una versión para pantallas “grandes” y otra para
pantallas “pequeñas”. Esta técnica produce muy buenos resultados en cuanto a experiencia de
usuario, puesto que la página está específicamente diseñada para la pantalla del dispositivo.
Mediante programación es posible detectar el tamaño de pantalla del usuario y redirigirlo a la
versión correcta de la página. Esta técnica tiene, además, gran aplicación cuando sabemos
exactamente en qué dispositivos será visitada la página. Por ejemplo, una página web de una
empresa que será utilizada por los vendedores desde sus tablets cuando están fuera de la oficina
y desde sus PC de escritorio cuando están en la oficina. En este ejemplo, tenemos muy claros los
dispositivos objetivo y podemos crear una versión de la página optimizada para cada uno de ellos,
logrando una excelente experiencia de usuario en ambos tipos de pantalla.
La red social Facebook emplea esta técnica. Si observamos su

página web desde una PC de escritorio, veremos que no estamos
exactamente en la misma URL que si la visitamos desde un
smartphone (el sistema nos redirige a la versión móvil del sitio).
Ver figura 5.
Figura 5: El sitio web de Facebook desde una PC de escritorio y desde un
smartphone
Figura 5. El sitio web de Facebook desde una PC de escritorio y desde un smartphone. Observa la
URL (dirección de la página). No es la misma si se visita el sitio desde una PC de escritorio que si
se visita desde un smartphone. El sistema nos redirige a la versión móvil, de allí la “m” en
“m.facebook.com”.
Las desventajas de esta técnica son, primero, que no podremos cubrir todos los tipos de pantalla,
podremos cubrir algunos, los más importantes, pero no todos; y segundo, que supone enormes
costos de desarrollo, ya que el trabajo se duplica o triplica según los tipos de pantalla que
queramos cubrir. Típicamente, se desarrollan dos versiones: una para pantallas grandes (PC de
escritorio, notebook, netbook, cloudbook) y otra para dispositivos móviles (smartphone, tablet).
Pues allí ya tenemos duplicado el costo de desarrollo del sitio web y, además, no hemos tenido en
cuenta las variaciones dentro de cada categoría. Por ejemplo, no todos los smartphones tienen la
misma resolución. Es una técnica válida en casos especiales y cuando se cuenta con grandes
recursos económicos para el desarrollo.
Diseño líquido
Una segunda solución (que al día de hoy prácticamente no se utiliza) fue el diseño líquido, que
consistía en utilizar porcentajes en lugar de píxeles. A los elementos se les daba el tamaño en
porcentajes, por ejemplo, a una tabla le podíamos decir: “ocupa el 50 % de la pantalla” en lugar de
decirle “tienes un ancho de 500 píxeles”. Con esto conseguíamos que la tabla (o el elemento que
fuere) ocupe la mitad de la pantalla, en cualquier pantalla.
Fue una solución a medias, ya que, si bien la mayoría de los elementos HTML (como tablas,
formularios, etc.) funcionaban bien, el punto débil eran las imágenes. En la Web se utilizan
mayormente los formatos .jpg, .gif y .png por su buena relación peso/calidad. Estos formatos se
conocen como mapas de bits y recrean la imagen simplemente almacenando el color de cada píxel
de la imagen. El problema de estos formatos es que si la imagen se achica o se agranda, los puntos
se ven deformados. El defecto es muy notorio, sobre todo cuando a la imagen se le aumenta su
tamaño. Los puntos de color se agrandan y el ojo empieza a poder distinguirlos y las imágenes se
ven, como comúnmente las llamamos, “pixeladas”.
En la época en que esta técnica estaba en auge (en el año 2011, aproximadamente) era común ver
páginas con sus imágenes bastante pixeladas.
Diseño responsivo
Esta técnica, que es la más utilizada en nuestros días, se le atribuye al diseñador gráfico Ethan
Marcotte, quien la difundió en su libro Responsive Web Design (2011). Sin embargo, la idea ya venía
siendo discutida por el World Wide Web Consortium (consorcio internacional que genera
recomendaciones y estándares que aseguran el crecimiento de la World Wide Web a largo plazo)
desde 2008.
La técnica plantea la creación de una sola versión del sitio

web que se vea perfectamente en cualquier pantalla. Esto
produce enormes ventajas de productividad y baja de costos.
La técnica comenzó a ser posible a partir de la versión 3 del lenguaje CSS (lenguaje utilizado para
crear formato y diseño en las páginas webs). Es que en esta versión de CSS se introducen las
“media queries”, que son una serie de órdenes que se incluyen en el código CSS y que le indican al
documento HTML cómo debe comportarse en diferentes resoluciones de pantalla. Así, mediante
estas media queries se van realizando los ajustes necesarios para que la página se visualice
correctamente en cualquier pantalla.
Como ejemplo, veamos algunas media queries aplicadas en el sitio web actual de Record Diesel
Spare Parts:
Figura 6: Media queries aplicadas al sitio web actual de Record Diesel

Spare Parts
Figura 6. Media queries aplicadas al sitio web actual de Record Diesel Spare Parts. Mediante media
queries, se van realizando ajustes para que el sitio se vea correctamente en todas las resoluciones. Por
ejemplo, en la primera instrucción, para pantallas con un ancho máximo de 992 píxeles se les quita el
margen inferior a los logotipos de las marcas que distribuye la empresa.
Grid systems
Como puede notarse en la figura 6, hacer los ajustes necesarios para que una página web se visualice
correctamente en todas las resoluciones puede requerir una gran cantidad de código. Es por esta razón
que han ido surgiendo herramientas que facilitan esta tarea, y una de ellas son los grid systems. Estos
sistemas nos proporcionan funcionalidades de diseño responsivo ya realizadas que el maquetador web
puede utilizar, sin necesidad de escribir media queries.
La mayoría de estos sistemas se basan en dividir la pantalla en una cantidad dada de columnas. Vamos
a tomar como ejemplo BootStrap, el grid system utilizado en el sitio de Record Diesel Spare Parts. Este
sistema divide la pantalla en 12 columnas. A partir de ese momento, el ancho real de la pantalla (en
píxeles) le dejó de interesar al maquetador web. Él puede abstraerse de la pantalla.
Si se desea crear un elemento que ocupe la mitad de la pantalla, le diremos que ocupe 6 columnas. Si
queremos que ocupe el 100 % de la pantalla, le diremos que ocupe 12 columnas. Las medidas dejan de
ser en píxeles y porcentajes y pasan a ser en columnas.
De esta manera, se pueden establecer reglas para cualquier elemento HTML, como la siguiente:
“Si la pantalla es pequeña, ocupa toda la pantalla (12 columnas)”.
“Si la pantalla es grande, ocupa la mitad de la pantalla (6 columnas)”. (Como la pantalla es grande,
dejamos espacio para colocar otro elemento).
Tabla 1. Una pantalla divida en dos columnas
1 1 1
1 2 3 4 5 6 7 8 9
0 1 2
Tabla 1. Una pantalla divida en dos columnas. El primer elemento ocupa toda la pantalla (12 columnas),
mientras que el segundo ocupa solo la mitad (6 columnas). En las 6 columnas sobrantes podríamos
colocar otro elemento.
Veamos el grid system aplicado en el sitio de Record Diesel Spare Parts:
Figura 7: Grid system aplicado al sitio de Record Diesel Spare Parts
Figura 7. Grid system aplicado al sitio de Record Diesel Spare Parts. En pantallas grandes, utiliza tres
columnas para cada uno de sus cuatro botones. 3x4=12 columnas.
Figura 8: Grid system aplicado al sitio de Record Diesel Spare Parts en un
smartphone
Figura 8. Grid system aplicado al sitio de Record Diesel Spare Parts. En pantallas pequeñas, utiliza 12
columnas (100 % de la pantalla) para cada uno de sus cuatro botones. Como no entran uno al lado de
otro, se distribuyen una abajo del otro.
Si bien los grid systems dan la posibilidad de crear sitios webs responsivos sin necesidad de escribir
código, la realidad es que los maquetadores webs siempre añaden alguna media querie para hacer
ajustes finos, pero aprovechan el grid system para minimizar la cantidad de código que escriben. Es con
esta combinación de herramientas, media queries y grid systems, que los maquetadores webs trabajan
actualmente y logran los mejores resultados.
Con respecto a las imágenes, los frameworks para diseño responsivo, como BootStrap, permiten
agrandar las imágenes para ajustarlas a las pantallas, pero nunca más allá de su real tamaño físico,
con lo que se evita que las imágenes se vean “pixeladas”. Por tanto, tenemos dos posibles soluciones:
Utilizar imágenes grandes (Full HD, por ejemplo) y que el sistema se encargue de achicarlas lo que
haga falta. La desventaja es que la página se puede volver más lenta, sobre todo en
dispositivos móviles. Mostrar una imagen Full HD en la pantalla de un smartphone es un
verdadero desperdicio.
Utilizar diferentes versiones de la misma imagen. Mediante media queries, podemos indicar qué
versión de la imagen utilizar para cada resolución.
¿Cuál de las siguientes variables es la que más influye en el diseño para
pantallas?
La resolución en píxeles.
El tamaño en pulgadas.
La marca de la pantalla.
La orientación de la pantalla (vertical u horizontal).
SUBMIT
¿Qué pasaría si una página web con su ancho establecido de manera fija en
1920 píxeles se visualiza en un smartphone?
Se vería una versión a escala, obligando al usuario a hacer zoom.
No se vería nada en absoluto.
Se vería una página gigantesca, obligando al usuario a hacer scroll.
Se vería bien, pero tardaría demasiado en descargarse.
SUBMIT
Multimedia, características y lenguajes: el camino
del desarrollador web Lec 3 MOD 1
Uno de los rubros con mayor demanda dentro del mercado multimedia e interactivo
es, sin dudas, el desarrollo de aplicaciones y sitios webs. En esta lectura
recorreremos las herramientas y el camino que debería seguir cualquier persona
para convertirse en un desarrollador web profesional. Conoceremos el estado del
arte y clasificaremos los lenguajes y las herramientas a la vez que iremos analizando
cómo son utilizadas en un caso real.
El desarrollo web es una disciplina apasionante que requiere conocimientos de
diversas áreas que se conjugan para lograr un producto final de calidad.
LECCIÓN 1 de 2
¿Qué hay que saber para ser desarrollador web?
Como dijimos anteriormente, el desarrollo de un sitio web requiere conocimientos de diversas áreas:
El diseño gráfico juega un papel muy importante, ya que un sitio web no deja de ser una pieza de
comunicación visual.
Un sitio web tiene un componente técnico que, a su vez, debe ser subdivido en dos partes:
Front-end: es lo que el usuario final ve, con lo que interactúa; o
1
Back-end: es la parte trasera, lo que el usuario final no ve, pero es esencial para el
2
funcionamiento del sitio.
El contenido del sitio es, por supuesto, fundamental para su éxito y requiere conocimientos
de expertos en marketing, publicistas, redactores y hasta psicólogos.
Esta lista no pretende ser exhaustiva, pero da un panorama de las áreas de conocimiento que se
requieren para desarrollar un sitio web. Normalmente, se conforma un equipo con los profesionales
necesarios para cubrir todas estas áreas y algunas otras según el proyecto.
En esta lectura nos centraremos en el componente técnico que, como ya dijimos, se puede dividir en
dos partes. Hay desarrolladores webs que se especializan en front-end, otros que se especializan en
back-end y unos más que trabajan de ambos lados (se los llama desarrolladores full-stack). Cada
aspecto requiere unos conocimientos y herramientas específicos para trabajar.
Comencemos con el desarrollo front-end; este es el camino que normalmente siguen los
desarrolladores para convertirse en profesionales de esta área:
Por lo general, el desarrollador web recibe el diseño del sitio (realizado por un diseñador gráfico) en
CorelDRAW, Illustrator o más típicamente en Photoshop. Por supuesto, existen otras herramientas, pero
estas son las más conocidas. Aquí comienza el trabajo del desarrollador web: su primera tarea es
“traducir” el diseño gráfico a un código que pueda ser interpretado por los navegadores webs (Chrome,
Edge, Firefox, Opera, Safari, etc.). Este código se escribe en dos lenguajes: HTML (Lenguaje de Marcado
de Hipertexto) y CSS (hojas de estilo en cascada). No deben entenderse como lenguajes de
programación porque más precisamente son lenguajes de “marcado”. Simplemente, marcan cómo debe
verse el sitio web, pero no tienen capacidad de realizar ningún procesamiento como sí pueden hacerlo
los lenguajes de programación.
HTML es el lenguaje que se utiliza para crear el contenido del sitio,
entendiendo por contenido los títulos, subtítulos, párrafos, tablas,
imágenes, videos, animaciones, formularios, etc., mientras que CSS se
utiliza para crear el formato del sitio: el tipo de letra, color, tamaño,
alineado y el diseño en general dependen de él.
En los sitios modernos es muy importante separar el contenido del diseño y es prácticamente una
exigencia de los motores de búsqueda (por ejemplo, Google). Es por esto que el código HTML del
contenido se escribe en un archivo y el código CSS del diseño en otro totalmente separado. Esta
separación permite optimizar el trabajo de los motores de búsqueda.
Con el conocimiento de estos dos lenguajes de marcado, comienza la carrera del desarrollador web. A
los profesionales que se especializan en traducir sitios webs desde su diseño gráfico hasta su código
HTML y CSS se los llama “maquetadores webs” y las empresas los contratan y les pagan un sueldo por
realizar esta tarea.
Figura 1: El código HTML y CSS de un sitio web
Figura 1. El código HTML y CSS de un sitio web. A la izquierda de la imagen puede observarse un
fragmento de código HTML (contenido) y a la derecha, uno de CSS (formato).
Retomaremos el caso de la lectura 2, el sitio web de la empresa Record Diesel Spare Parts, a fin de que
podamos ver concretamente en qué parte de un sitio web real se aplican las herramientas que vamos
mencionando.
Figura 2: Sitio web de la empresa cordobesa Record Diesel Spare Parts
Fuente: captura de pantalla del sitio web de Record Diesel Spare Parts
Figura 2. Sitio web de la empresa cordobesa Record Diesel Spare Parts. Empresa familiar autopartista
con 58 años de trayectoria.
El sitio web de Record Diesel Spare Parts es relativamente sencillo. Tiene secciones institucionales y
otras donde se presentan sus productos y servicios. Hay catálogos de miles de productos que se
actualizan frecuentemente sobre productos, herramientas, bancos de prueba y un apartado especial
para la marca Lucas Diesel, de la cual Record es representante oficial. (Lucas Diesel es la marca en el
mundo autopartista que ha comercializado productos del rubro por más tiempo en la historia: 140
años).
Cuenta, además, con una sección de tienda online donde comercializa sus productos a través de un
carrito de compras. Ver figura 3.
Figura 3: Tienda online de Record Diesel Spare Parts
Fuente: captura de pantalla de tienda online de Record Diesel Spare Parts

(https://recordparts.com.ar/catalogo.php).
Figura 3. Tienda online de Record Diesel Spare Parts. Desde esta sección de su sitio web, Record Diesel
Spare Parts vende sus productos por Internet.
En el sitio web de Record Diesel Spare Parts podemos ver los lenguajes HTML y CSS aplicados en todas
partes. El logo, los links (Home, Empresa, Catálogos, Cursos, Contacto, Comprar, Cerrar sesión, Abrir
cuenta), la imagen del banner principal, los botones (Productos, Equipamientos, Lucas Cursos) son
todos elementos generados con lenguaje HTML. Todos estos elementos tienen definidas sus
propiedades estéticas (tamaño, color, posición, tipo de letra, etc.) por el lenguaje CSS. Los códigos que
pueden verse en la figura 1 son código real perteneciente a este sitio web.
El siguiente escalón en el camino de un desarrollador web front-end es el lenguaje JavaScript y este sí

que es un lenguaje de programación con todas las de la ley.
Este lenguaje está especializado en la parte interactiva. Con él se pueden crear interfaces de usuario
más profesionales y ricas. Animaciones, menús desplegables, solapas, acordeones, carruseles, barras
de navegación, galerías de imágenes interactivas y miles de elementos de interfaz pueden ser
desarrollados con JavaScript.
En el sitio web de Record, JavaScript es utilizado en varias partes; solo por poner algunos ejemplos, en
el banner animado del inicio, en el menú desplegable de los catálogos y en la ventana modal que se
abre al hacer clic sobre un producto de la tienda.
Figura 4: Código JavaScript que hace funcionar el menú desplegable de Record

Figura 4. Código JavaScript que hace funcionar el menú desplegable de Record. Fragmento del código
JavaScript necesario para hacer funcionar el menú que se despliega bajo el botón Catálogos del sitio
de Record Diesel Spare Parts.
Como puede apreciarse en la figura 4, la cantidad de código JavaScript para hacer funcionar elementos
interactivos suele ser bastante. Es por esto que han aparecido infinidad de “librerías JavaScript”. Las
librerías son funciones (subprogramas) ya desarrolladas que el programador puede reutilizar en sus
proyectos simplemente llamando a la librería.
Estas librerías traen menús, botones y todos los elementos interactivos típicos que ya hemos
mencionado ya programados. El programador puede personalizarlos y adaptarlos escribiendo unas
pocas líneas más de código JavaScript. Una de las más famosas librerías JavaScript es Jquery
(https://jquery.com/) que con su slogan “Write less, do more” [“Escriba menos, haga más”] ya nos deja
claro su objetivo.
Aprender este tipo de librerías suele ser el siguiente paso en la carrera de un desarrollador web que ya
domina HTML, CSS y JavaScript, ya que esto le permite ser más productivo.
Todos los elementos interactivos del sitio web de Record están desarrollados con la librería Jquery y no
con JavaScript puro. En la figura 5 podemos observar la línea de código que llama a esta librería.
Figura 5: Llamada a la librería Jquery y fragmento de código Jquery en el sitio

web de Record

Figura 5. Llamada a la librería Jquery y fragmento de código Jquery en el sitio web de Record. El sitio
web de Record Diesel Spare Parts hace uso de una librería JavaScript para acortar el código.
Así como existen librerías JavaScript, existen librerías CSS con el mismo objetivo de acortar el código,
y luego encontramos otras herramientas, más avanzadas, conocidas como frameworks que combinan
librerías JavaScript y CSS creando verdaderos sistemas de diseño web. Un escalón más en la carrera
de un desarrollador web front-end es comenzar a trabajar con frameworks, siempre con el objetivo de
ser más productivo. Uno de los frameworks más utilizados es BootStrap (https://getbootstrap.com/),
un sistema de diseño (basado en la librería Jquery) que permite construir rápidamente sitios
responsivos (que se adaptan a cualquier pantalla).
El sitio web que estamos analizando hace uso del framework BootStrap para lograr una correcta
visualización en, por ejemplo, los smartphones.
Figura 6: Llamada al framework BootStrap en el sitio web de Record Diesel

Spare Parts

Figura 6. Llamada al framework BootStrap en el sitio web de Record Diesel Spare Parts. El sitio web de
Record Diesel Spare Parts hace uso de BootStrap para lograr una correcta visualización en, por ejemplo,
los smartphones, de una manera sencilla.
Sin ser en lo más mínimo una lista completa ni exhaustiva, este es un panorama del recorrido que debe
hacer una persona para convertirse en un profesional del desarrollo web front-end.
Pasemos ahora al back-end. La principal diferencia entre el desarrollo front-end y el back-end es dónde
se ejecuta el código que escribimos. En el caso del front-end, el código se ejecuta del lado del cliente
(el usuario): es su navegador web el que interpreta y ejecuta el código. En cambio, en el back-end es el
servidor web quien realiza estas tareas y envía los resultados ya procesados al cliente. (Eso se conoce
como “arquitectura cliente-servidor”).
Esta separación entre front-end y back-end es necesaria por varias razones; una de ellas es la
seguridad. El código del lado del cliente es visible por cualquier persona (por ejemplo, en Chrome, prueba
hacer clic derecho sobre cualquier página web y luego en “Ver código fuente”. Podrás visualizar todo el
código frontend). Los procesos que deben ser seguros, por ejemplo, determinar si una contraseña es
correcta o no, deben hacerse del lado del servidor.
Para convertirse en un desarrollador web back-end se requieren conocimientos un poco más profundos
sobre programación. Hay que aprender algún lenguaje de back-end y sobre bases de datos, entre otras
cosas.
Normalmente, el back-end se encarga de recibir datos desde el front-end, procesarlos, almacenarlos en

bases de datos y entregar resultados nuevamente al front-end.
Hay sitios webs con back-ends muy pequeños, por ejemplo, un sitio de un abogado que se limite a
mostrar textos e imágenes sobre sus especialidades, servicios y casos que ha atendido; y otros que
tienen backends gigantescos, como Mercado Libre o Facebook.
En cuanto a lenguajes y herramientas, será fundamental aprender un lenguaje de programación back-

end. Uno de las más utilizados en el mundo es PHP (preprocesador de hipertexto)
(https://www.php.net/). Este lenguaje puede recibir información desde el front-end (típicamente desde
un formulario), interactuar con bases de datos (realizando operaciones de carga, modificación,
eliminación y consulta de datos), procesar los datos (haciendo operaciones matemáticas y lógicas, por
ejemplo) y entregar resultados en un lenguaje entendible para el front-end (HTML).
El desarrollador web back-end debe saber, además, trabajar con bases de datos; esto implica el
aprendizaje de otro lenguaje: SQL (Structured Query Language). Los lenguajes de programación no
pueden “hablar” directamente con los software de gestión de bases de datos; estos utilizan un lenguaje
propio: el mencionado SQL. Es este lenguaje el que puede ordenarle al motor de base de datos guardar,
modificar, borrar o consultar datos.
En el sitio web que estamos analizando, donde mayor uso se hace de las tecnologías back-end es en
su tienda online. Por ejemplo, cuando el usuario selecciona un producto, ingresa su cantidad y pulsa el
botón para agregarlo al carrito, el back-end recibe la información del código del producto y la cantidad.
Se debe generar, en la base de datos, una nueva venta registrando datos como la fecha y hora, el usuario
que inició la operación, y deben quedar guardados tanto el código del producto comprado como la
cantidad ingresada por el usuario. El back-end entregará, como resultado, una actualización del carrito
de compras, mostrando los productos agregados hasta el momento y el total a pagar en caso de cerrar
la operación allí.
Figura 7: El carrito de compras actualizado entregado por PHP en el sitio web

de Record Diesel Spare Parts
Fuente: captura de pantalla de carrito de compras en tienda online de Record Diesel Spare Parts.
Figura 7: El carrito de compras actualizado entregado por PHP en el sitio web de Record Diesel Spare
Parts. El sitio web de Record Diesel Spare Parts hace uso de PHP y SQL para hacer funcionar su tienda
online.
Figura 8: Código PHP y SQL del back-end del sitio web de Record Diesel Spare
Parts
Figura 8: Código PHP y SQL del back-end del sitio web de Record Diesel Spare Parts. Código PHP y SQL
que procesa la función de agregar productos al carrito de compras.
Para el back-end también existen librerías y frameworks que acortan el código (por ejemplo, Laravel es
un framework de PHP). El desarrollador back-end sigue más o menos los mismos pasos que se
explicaron en el front-end: primero se aprenden los lenguajes puros, y luego se comienzan a utilizar
librerías y frameworks.
Hemos recorrido así las herramientas de uso típico tanto para desarrollo web front-end como back-
end. Algunas de estas herramientas son de uso obligatorio, como HTML, CSS y JavaScript, mientras
que otras se usan por cuestiones de productividad, como Jquery y BootStrap. Estas herramientas tienen
competidores, otras librerías y frameworks que persiguen los mismos objetivos con sus ventajas y
desventajas. Del lado del back-end pasa lo mismo: mientras que SQL es de uso casi obligatorio, para
PHP hay alternativas y muchos frameworks que compiten.
Hemos podido observar en qué partes y funciones de un sitio web real se aplican todas estas
herramientas, analizando dónde fueron usadas en el sitio web de la empresa Record Diesel Spare Parts.
HTML es un lenguaje que se usa para:
Generar el contenido de un sitio web.
Generar el diseño de un sitio web.
Generar una interfaz interactiva para un sitio web.
Generar operaciones en la base de datos de un sitio web.
SUBMIT
El back-end se ejecuta en el equipo del usuario.
Falso.
Verdadero.
SUBMIT
Multimedia, características y lenguajes: nuevas
tendencias Lec 4 MOD 1
LECCIÓN 1 de 5
Introducción
Dentro de la multimedia, una de las tecnologías más disruptivas de los últimos años es la realidad
aumentada. Se trata de una tecnología que es capaz de añadir capas de información visual a un
entorno real. No debemos confundirla con la realidad virtual, ya que esta crea una realidad totalmente
diferente, mientras que la realidad aumentada combina elementos reales con elementos virtuales.
La realidad aumentada es interactiva en tiempo real: un cambio, una acción, una

respuesta que realice el usuario, tiene una repercusión inmediata en la escena
recreada con realidad aumentada.
La realidad aumentada interactúa, por lo tanto, con nosotros en tiempo real,

proporcionándonos una experiencia más realista.
La información se muestra siempre con perspectiva, dando la sensación de que

adquiere la capacidad física de su entorno. (“Realidad aumentada”, s. f.,
https://www.neosentec.com/realidad-aumentada/).
Figura 1: Ejemplo de aplicación de realidad aumentada
Fuente: https://www.neosentec.com/realidad-aumentada/
Figura 1. Ejemplo de aplicación realidad aumentada. El usuario toma una imagen de
este lugar turístico con su celular y la tecnología de realidad aumentada añade información
sobre los comercios cercanos, como una heladería, un restaurante, una escuela de surf y un
centro de información turística La realidad aumentada tiene un gran potencial. Algunos
ejemplos de aplicación son:
Poder colocar información sobre un producto. Por ejemplo, cuando el usuario apunta con la
cámara de su teléfono móvil a un producto alimenticio, podríamos mostrarle la
información nutricional de este.
Mapas en tres dimensiones: dado que la realidad aumentada es capaz de reconocer lugares y
sus paredes, techos y pisos, puede usarse para generar rutas o guiados dentro de
fábricas, museos y grandes espacios.
Turismo: tal como muestra la figura 1, teniendo las coordenadas geográficas de un

punto turístico, el usuario puede apuntar con su cámara y obtener información
adicional del entorno. Estas aplicaciones hacen uso del GPS y la brújula digital de los
dispositivos móviles.
En la educación, puede usarse para aumentar el interés de los estudiantes por los contenidos.
Por ejemplo, al apuntar con la cámara a las páginas de un libro tradicional, podríamos
complementarlo con información visual en tres dimensiones, estimulando así a este
tipo de usuarios acostumbrados a la virtualidad. Ver la figura 2.
En la industria del entretenimiento, la realidad aumentada ha causado una revolución.

Por ejemplo, el juego Pokémon Go (que hizo visible la realidad aumentada al gran
público) hizo que las acciones de Nintendo, la empresa creadora de este, aumenten en
un 60 %.
Figura 2: La realidad aumentada en la educación
Fuente: captura de pantalla de imagen de video
(https://weeblebooks.com/es/recursos_educativos/usos-de-la-realidad-aumentada-en-
laeducacion/).
Figura 2. La realidad virtual en la educación.
El estudiante apunta con la cámara a las páginas de un libro tradicional y la realidad aumentada
añade imágenes en tres dimensiones.
A continuación, conoceremos de cerca una aplicación de realidad aumentada que se considera un
rotundo éxito por la gran utilidad que supone para el usuario:
LECCIÓN 2 de 5
IKEA Place, una aplicación de realidad

aumentada realmente útil
IKEA es una corporación multinacional con sede en Suecia dedicada a la fabricación y venta
minorista de muebles, objetos para el hogar y otros objetos de diseño contemporáneo. Fue fundada
en 1943 y cuenta aproximadamente con 328 tiendas en 28 países y emplea alrededor de 155 000
personas.
Las siglas IKEA provienen del nombre de su fundador, Ingvar Kamprad (la fundó a sus 17 años), más
la primera letra de Elmtaryd y Agunnaryd, que son la granja y la aldea donde creció, respectivamente.
IKEA tiene unos ingresos anuales de aproximadamente 32 600 millones de euros, con unos
beneficios de 14 400 millones de euros anuales.
IKEA diseña sus propios muebles, los cuales son fabricados por más de 1500 proveedores en 50
países. La mayoría de los muebles que vende son desarmables, pueden almacenarse y transportarse
en embalajes planos y uniformes, lo que abarata los costos y los precios.
Las franquicias le han permitido crecer a bajo costo. Sus mayores mercados son Alemania,
Inglaterra, Estados Unidos, Francia y Suecia. También realizan ventas por correo (así fueron sus
inicios) y por Internet.
Figura 3: Sitio web de IKEA
Fuente: captura de pantalla del sitio web de IKEA (https://about.ikea.com/en/contact/how-tobuy-
ikea-products-from-a-different-country).
Figura 3. Sitio web de IKEA.
Empresa sueca dedicada al diseño y venta minorista de muebles para el hogar.
IKEA siempre se ha caracterizado por ser una empresa fuertemente innovadora y con gran presencia
en Internet. Sus estrategias de posicionamiento y los rediseños de su sitio web le han dado fama en
el mundo de la World Wide Web.
IKEA volvió a sorprender a sus clientes, de la mano de la realidad aumentada, con una aplicación que
facilita la vida de sus usuarios, ya que estos no tendrán que comprar los muebles para ver cómo
quedan en sus casas. Se trata de una app móvil que les permite a los usuarios probar cómo
quedarían los muebles de IKEA en las habitaciones de sus casas.
El siguiente video deja claro cuán útil puede resultar esta aplicación y la realidad aumentada en
general:
Como puede apreciarse en el video, la aplicación les permite a los usuarios “colocar” los productos
de IKEA en los espacios de sus casas. La aplicación incluye modelos 3D a escala real de todo, desde
sofás y sillones hasta taburetes y mesas. Otorga una impresión realista del tamaño, diseño y
funcionalidad de los muebles. Es una simulación realista de cómo quedarían los objetos en los
espacios antes de adquirirlos.
Como funcionalidades extra, la aplicación permite capturar las creaciones como imágenes fijas o
videos y compartirlas por las redes sociales; las habitaciones pueden guardarse para volver a
visitarlas luego; se pueden crear listas de favoritos y comprar los muebles a través de un enlace al
sitio web de IKEA a la aplicación IKEA Store; brinda noticias e ideas para la vida en el hogar.
La realidad aumentada ha causado impacto en el público masivo casi de inmediato,

a diferencia de la realidad virtual. Esto se debe, entre
otras cosas, a que la realidad aumentada es simple para el usuario
final, no requiere grandes equipamientos: Como vimos en el caso de
IKEA, al usuario le basta con descargar una simple aplicación en su smartphone
para aprovechar al máximo las posibilidades de esta tecnología, a diferencia de
la realidad virtual que requiere cascos
especiales y equipos informáticos de alto poder de procesamiento.
Sin embargo, y a pesar de la comparación, la realidad aumentada y la realidad virtual no son

tecnologías que compitan entre sí, ya que cada una apunta a objetivos diferentes. La realidad virtual
crea un entorno totalmente diferente al real. Tiene grandes aplicaciones en aquellas actividades que
suponen altos costos o grandes riesgos, por ejemplo, en el entrenamiento de pilotos de avión.
Reemplazar el escenario (el aire), que supone un gran riesgo, y el aparato (el avión), que supone un
gran costo, por un escenario y aparato virtuales permite realizar mucha más cantidad de
entrenamientos.
Por su lado, la realidad aumentada combina elementos del entorno real con elementos virtuales, lo
cual permite tener un mejor entendimiento del entorno que nos rodea. Como puede verse en el video
de la app de IKEA, esta tecnología le permite al usuario, por ejemplo, evitar comprar un mueble que
no entra en el lugar donde quería colocarlo. El potencial de esta tecnología es enorme. Si
reemplazamos muebles por maquinaria industrial, podríamos simular el layout de una fábrica antes
de comprar ningún equipo. Se podría saber de antemano si un brazo robótico entra en el lugar de la
fábrica que queremos colocarlo, si al moverse no choca con alguna columna de la estructura, etc.
En las ventas de objetos de gran tamaño, la realidad aumentada también es muy útil. Las empresas
que comercializan camiones o maquinaria pesada tienen problemas para mostrar estos productos
a sus clientes. Normalmente, se requiere que el cliente viaje hasta la planta para conocerlos con su
consecuente costo en tiempo y dinero. Muchos clientes son reacios a viajar y las ventas se demoran
o pierden. Pero, ¿si pudiéramos llevar modelos 3D a escala real de estos productos y mostrárselos
sobre una mesa al cliente? Ver figura 4.
Figura 4: Mostrando un producto de gran tamaño a través de realidad

aumentada
Figura 4. Mostrando un producto de gran tamaño a través de realidad aumentada.
Una impresionante aplicación de la realidad aumentada es la posibilidad de mostrar a clientes

productos de gran tamaño, como vehículos, maquinaria pesada, etc.
Con el ejemplo concreto de la aplicación de IKEA, plenamente funcional y prestando un gran servicio
a sus usuarios, y el panorama de posibles aplicaciones de la realidad aumentada que hemos
recorrido, queda claro que debemos tener muy presente esta tecnología en el campo del diseño
multimedia.
La realidad aumentada crea un entorno virtual totalmente diferente al real.
Falso.
Verdadero.
SUBMIT
La realidad aumentada ha dejado obsoleta a la realidad virtual.
Falso.
Verdadero.
La Web 2.0 Lec 1 MOD 2
Hasta aproximadamente el año 2000, la mayoría de los sitios webs eran bastante estáticos.
Creados más que nada con el lenguaje HTML, se limitaban a mostrar textos e imágenes y el
usuario tenía un papel mayormente pasivo.
Un sitio estático se refiere a un sitio que no recibe demasiada actualización y que, en general,
se muestra siempre igual. Normalmente, para actualizar este tipo de sitios se necesita un
diseñador web con conocimientos técnicos. Con la denominada “Web 2.0” las cosas
comenzaron a cambiar.
A pesar de que estamos acostumbrados a que los números de las versiones se refieren a
mejoras técnicas, a la evolución de algún software o a la suma de funciones a un programa, en
este caso, el concepto de Web 2.0 no se refiere a eso.
Si bien para que la Web 2.0 fuera posible se requirieron algunos avances técnicos, el concepto
se refiere a un fenómeno social más que técnico.
El término fue utilizado por primera vez en 1999 por la consultora en diseño y columnista Darcy
DiNucci. En su artículo “Fragmented Future”, la autora afirma que Internet dejará de consistir
en pantallas estáticas, como hasta ese momento y ofrecerá posibilidades de interacción, la
base del concepto (Bejerano, 12 de abril de 2013). Sin embargo, no fue hasta 2004 que el
término acuñado por la autora se popularizó, cuando el editor, escritor, informático teórico,
ingeniero y empresario Tim O’Reilly lo utilizó en una conferencia.
El concepto de Web 2.0 se refiere a un cambio de uso, donde los usuarios pasan de un papel
pasivo a uno mucho más activo como generadores de contenido.
Los blogs fueron pioneros en este cambio de paradigma, donde los usuarios comenzaron a
aportar contenido para los sitios webs. La Web 2.0 promueve la participación y la interacción
entre los usuarios. Más que una tecnología, es un cambio de actitud de los usuarios, que
adoptan un doble papel, de productores y consumidores de información.
Resumidamente, un sitio Web 2.0 es aquel que permite la participación —como productores de
información— y la interacción de los usuarios.
Técnicamente, los sitios Web 2.0 se programan como un esqueleto vacío, sin información y sus
espacios se llenan con contenido proveniente de una base de datos, que es alimentada por los
mismos usuarios del sitio.
Veremos, a continuación, la historia de un sitio web que explota al máximo las posibilidades de
la Web 2.0, logrando un éxito sin precedentes:
LECCIÓN 1 de 3
La increíble historia de un sitio web 2.0
Esta historia comienza en el año 2003, con un sitio web que permitía a los estudiantes de una
universidad subir fotos de ellos mismos, juzgar el atractivo y armar rankings. Web 2.0 en su máximo
esplendor. Por problemas legales, el sitio duró solo días en línea; sin embargo, había alcanzado 22 000
visualizaciones de imágenes y el concepto de los usuarios como productores de contenido había
demostrado su potencial (Naveira, 10 de agosto de 2020).
Sobre la base del sitio descripto, un año más tarde, en 2004, exactamente el año en que el término Web
2.0 se populariza, se crea una plataforma disponible solo para personas con una dirección de correo
electrónico de una prestigiosa universidad. Se podía crear un perfil, conectarse con otras personas e
incluir información personal, como horarios de clases y los clubes a los que pertenecían. Generación de
contenido e interacción: relucían las características de Web 2.0 (Naveira, 10 de agosto de 2020).
En un mes, el 50 % de los estudiantes estaban inscriptos en la plataforma y a finales del mismo año, la
plataforma se había expandido a otras universidades y contaba con un millón de usuarios. Se abría el
camino hacia la nueva era de la Web, un fenómeno social sin precedentes se estaba dando. Es difícil
pensar que alguien se pudiera imaginar, ni siquiera los creadores de esta plataforma, lo que ocurriría
después; la influencia que esta plataforma tendría y que sería parte de la historia mundial. ¡Al fin y al
cabo, había nacido como una página web para subir fotos y poner puntaje al atractivo de las personas!
(Naveira, 10 de agosto de 2020).
Luego de conseguir socios e inversionistas, en el año 2005, la plataforma se abre al mundo, y al final de
ese año, ya contaba con 6 millones de usuarios (Naveira, 10 de agosto de 2020).
En 2006, la plataforma se globaliza definitivamente, permitiendo el acceso a cualquier persona mayor
de 13 años con un correo electrónico.
En 2007, la plataforma continúa sumando funcionalidades Web 2.0: una beta más comercial que permite
subir artículos y concretar ventas, y un servicio que permite a los desarrolladores crear aplicaciones
integradas a la plataforma (Naveira, 10 de agosto de 2020).
En 2008, se transforma en la plataforma más visitada del mundo y su importancia es tal que empieza a
tener influencia política: en las elecciones presidenciales de Estados Unidos de 2008, se formaron más
de 1000 grupos dentro de la plataforma apoyando a los candidatos Barack Obama y John McCain
(Naveira, 10 de agosto de 2020).
En 2009, se activa, dentro de la plataforma, un botón que se transformaría en un ícono de la Web 2.0. Un
botón que simplemente permitía marcar “Me gusta” a los contenidos subidos por otros usuarios. Su
éxito fue tal que ese año la plataforma pasa a la historia como la más popular del mundo con 350
millones de usuarios (Naveira, 10 de agosto de 2020).
En 2010, la plataforma es valorada en 37 000 millones de euros y se transforma en la tercera empresa

web más grande del mundo, solo detrás de Google y Amazon (Naveira, 10 de agosto de 2020).
En la actualidad, la plataforma cuenta con 2000 millones de usuarios y genera 4 petabytes (millones de
gigabytes) por día. El tamaño de su base de datos se calcula en aproximadamente 300 petabytes.
Como ya habrás adivinado, esta plataforma se trata, nada más y nada menos,
que de la famosa red social Facebook, un ícono, un símbolo de la Web 2.0. Sus
números son impresionantes, la cantidad de información que sus usuarios
generan es gigantesca y la interacción que promueve también lo es: cada 60
segundos, se publican 510 000 comentarios, se actualizan 293 000 estados, se
dan 4 000 millones de “me gusta” y se suben 136 000 fotos.
Figura 1: El sitio web de Facebook en el año 2004
Figura 1. Sitio web de Facebook en el año 2004.
En esa época, la plataforma se llamaba “thefacebook”.
Facebook ilustra el fenómeno social de la Web 2.0, con una participación colosal de sus usuarios y un
nivel de interacción impresionante. Se puede considerar este sitio web como un nuevo medio de
comunicación y, tal vez, como la materialización de la “aldea global” de la que hablaba Marshalll
McLuhan, pero también representa las preocupaciones de los pensadores de esa época, en cuanto a la
relevancia de la información que circula en estas redes. Facebook no escapa a las controversias, como
la acusación de manipular la información para torcer resultados de elecciones y los escándalos de las
fake news (noticias falsas). Es que pasar la responsabilidad de la generación de la información a los
propios usuarios supone varios retos, sobre todo, en cuanto a protección de los datos, privacidad y
veracidad de la información. Estos son los retos de la Web 2.0.
Figura 2: El sitio web de Facebook en la actualidad
Fuente: captura de pantalla del sitio web actual de Facebook (https://www.facebook.com/).
Figura 2. El sitio web de Facebook en la actualidad.
Aún hoy continúa siendo la red social más utilizada del mundo.
Te invito a responder las siguientes preguntas de repaso:
¿Qué implica la Web 2.0?

El paso de los usuarios de consumidores a generadores
de información.
Una versión más actualizada de la Web.
El avance de la tecnología utilizada para la Web.
La evolución de la Web que permite velocidades de

descarga mayores.
SUBMIT
Una red social es un buen ejemplo de un sitio Web 2.0.
Verdadero.
Falso.
SUBMIT
La Web 3.0 Lec 2 MOD 2
LECCIÓN 1 de 4
Introducción
En la lectura 1 de este módulo, hablamos de la Web 2.0, una evolución de la Web que consiste,
mayormente, en el cambio de rol de los usuarios, que pasan de simples consumidores a generadores
de contenido. Entonces, ¿existe una Web 3.0? ¿Hay alguna otra evolución de la Web?
Pues sí, el concepto de Web 3.0 existe; sin embargo, no está tan claro qué es exactamente. En la
actualidad, existe un gran debate sobre qué es y cuál es la definición más adecuada. La bibliografía
sobre el tema no se pone de acuerdo. Algunos autores la asocian con la “Web semántica”, otros dicen
que, en realidad, la Web semántica es solo una parte de la Web 3.0 y otros más dicen que son cosas
distintas.
En general, el concepto de Web 3.0 siempre se refiere a una

Web con más significado, más interpretable por las máquinas.
La
idea es que las máquinas puedan interpretar el significado de
los contenidos webs, tal como hacemos los humanos (o lo
más similar posible, al menos).
Siempre que se habla de Web 3.0 aparece en escena la
inteligencia artificial, que sería lo que permitiría simular en
las máquinas la interpretación humana del contenido.
Para comprender las ventajas de la Web semántica o 3.0, retomaremos el análisis del sitio web de la
empresa Record Diesel Spare Parts correspondiente a las lecturas 2 y 3 del módulo 1. Veremos si
implementa algo referido a la Web semántica y cómo podría beneficiarse de ella.
Figura 1: Tienda online de Record Diesel Spare Parts
Figura 1. Tienda online de Record Diesel Spare PartsDesde esta sección de su sitio web, Record
Diesel Spare Parts vende sus productos por Internet.
Figura 2: Código HTML del sitio web de Record Diesel Spare Parts
Figura 2. Código HTML del sitio web de Record Diesel Spare Parts.
Analizaremos si alguna parte de su código implementa tecnologías compatibles con la Web semántica.
LECCIÓN 2 de 4
La Web semántica
Un propulsor de esta Web semántica es el mismísimo Timothy John Berners-Lee, conocido como “el
padre de la Web”.
En 1990, Tim Berners-Lee y Robert Cailliau presentaron el proyecto World Wide Web (WWW) en la
Organización Europea para Investigación Nuclear (CERN) en Ginebra, Suiza. Consistía en un programa
(el navegador) capaz de interpretar un lenguaje de etiquetas (HTML), un protocolo de transferencia de
hipertexto (HTTP) y el identificador uniforme de recursos digitales (URI). En definitiva, inventaron la Web
tal como la conocemos hoy. Basada en hipertexto, su objetivo era facilitar el compartir información
científica entre los investigadores.
En 2001, el propio Tim Berners–Lee presenta un proyecto de Web semántica, una mejora de su invento
inicial. Debemos mencionar que, para Tim Berners–Lee, la Web semántica es solo una parte de la Web
3.0.
A decir verdad, Berners–Lee intentó, desde un principio, dotar de significado a la Web. Eso se nota en el
lenguaje HTML (Lenguaje de Marcado de Hipertexto). En este lenguaje, por ejemplo, existen etiquetas
para marcar un texto como título, subtítulo o párrafo:
Un título en HTML:
<h1>Este es un título de una página web</h1>
Un subtítulo HTML:
<h2>Este es un subtítulo de una página web</h2>
Un párrafo en HTML:
<p>Este es un párrafo en HTML</p>
Como podemos ver, las etiquetas <h1>, <h2> y <p> le dan algo de significado al contenido, rudimentario,
pero deja ver las intenciones de los creadores de la Web. Como dijimos, la idea de la Web semántica es
lograr que las máquinas interpreten el contenido, y estas básicas etiquetas algo logran: los motores de
búsqueda, como Google, al día de hoy, pueden interpretar “este texto es un título, este es un subtítulo y
este otro es un párrafo”. Por supuesto, esto está muy lejos de la compleja interpretación de contenidos
que hacemos los humanos, pero es un inicio. La Web 3.0 busca profundizar esta idea, dotando de más
información (metadatos) a la Web para que las máquinas y programas puedan interpretar cada vez
mejor la información y hacer algo más parecido a lo que los humanos hacemos.
En el sitio web de Record, estas etiquetas están utilizadas en todas partes. Por ejemplo:
Figura 3: La sección “Empresa” del sitio web de Record Diesel Spare Parts
Fuente: captura de pantalla de la sección “Empresa” del sitio web de Record Diesel Spare Parts,
s. f., https://recordparts.com.ar/recordparts-repuestos-diesel.php
Figura 3. La sección “Empresa” del sitio web de Record Diesel Spare Parts.
El título EMPRESA emplea la etiqueta <h1> y el resto del texto, la etiqueta <p> de HTML.
Figura 4: Utilización de etiquetas HTML en el sitio web de Record Diesel
Spare Parts
Figura 4. Utilización de etiquetas HTML en el sitio web de Record Diesel Spare Parts.
En este ejemplo, vemos implementadas las etiquetas <h1> y <p> de HTML.
La falta de significado y contexto hace que sea muy fácil que Google y demás buscadores cometan
errores. A pesar de su sofisticación y complejos algoritmos, no “razonan” como humanos, ni por lejos.
Veamos una simple búsqueda:
“es bueno el celular Samsung Galaxy J5
Prime”
Con esta búsqueda, el usuario desea encontrar análisis objetivos y, a lo sumo, opiniones de otros
usuarios sobre este equipo (que no serán tan objetivas, pero al menos se supone que no tendrían
ninguna intencionalidad). Pero este significado y contexto lo entendemos los humanos, las máquinas
no:
Esto es lo que Google nos presenta como resultados:
Figura 5: Resultados presentados por el buscador Google
Algunos están “fuera de contexto”.
Como vemos en la Figura 5, los dos primeros resultados son aceptables, ya que son opiniones de otros
usuarios del equipo; el tercero es, quizás, el más relevante, ya que es un análisis del equipo por parte de
un sitio especializado en tecnología; pero el cuarto está totalmente fuera de contexto, ya que es un sitio
en el que alguien publicita la venta del equipo por el que el usuario está preguntando. Difícilmente vamos
a obtener un análisis objetivo del equipo de un anuncio sobre su venta. ¿Por qué trae Google este
resultado? Porque muchas de las palabras clave que escribió el usuario están en el texto de la
publicidad, pero totalmente fuera de contexto, y Google no percibe esto. Esto es lo que intenta solucionar
la Web 3.0; es un gran objetivo que aún no está logrado, pero hay avances.
El W3C (World Wide Web Consortium) (un consorcio internacional que genera recomendaciones y
estándares que aseguran el crecimiento de la World Wide Web), dirigido por Tim Berners-Lee, se plantea
la creación de una Web semántica desde finales de los 90. Estos son algunos de sus logros:
RDF (Resource Description Framework): es un método para la descripción general o modelado de
la información. Descompone el conocimiento en piezas pequeñas, con algunas reglas

acerca de la semántica o significado de esas piezas. Es tan simple que permite describir
cualquier hecho, y a la vez, tan estructurado que permite ser procesado por máquinas.
Ejemplo de RDF:
@prefix :
:john a :Person .
:john :hasMother :susan .
:john :hasFather :richard .
:richard :hasBrother :luke .
El ejemplo afirma que John es una persona con una madre llamada Susan, un padre llamado Richard y
un hermano llamado Luke.
OWL (Web Ontology Language): es un lenguaje utilizado para representar de forma explícita el
significado de términos pertenecientes a un vocabulario y definir las relaciones que existen

entre ellos. Puede describir relaciones, por ejemplo, de cardinalidad (como "únicamente
uno"), igualdad, caracterización de propiedades (por ejemplo, simetría), etc.
SPARQL (Protocol and RDF Query Language): es un lenguaje que permite recuperar información
clasificada por RDF. Por ejemplo, si queremos obtener un listado de nombres de libros,
podemos ejecutar la siguiente consulta:
PREFIX dc: <http://purl.org/dc/elements/1.1/>
SELECT ?title
WHERE { <http://ejemplo.org/libros> dc:title ?title }
No es necesario a esta altura comprender exactamente qué significan estos códigos, sino solo saber
que estos lenguajes existen y que los códigos que se han mostrado como ejemplo se incorporarían al
código de las páginas webs tradicionales para convertirlas en páginas webs semánticas. Pero
incorporar estos códigos a las páginas webs actuales supone un enorme esfuerzo por parte de los
desarrolladores webs. De hecho, por ejemplo, el lenguaje OWL existe desde el 2004; sin embargo, la gran
mayoría de las páginas webs actuales no lo utilizan. Esto, en parte, se debe a que falta una tecnológica
que permita traducir los textos tradicionales de las páginas webs a código OWL de forma automática.
Por el momento, los desarrolladores webs se ven obligados a hacer esta “traducción” de forma manual.
En el sitio web de Record, en particular en la sección de tienda online, se podría agregar información,
por ejemplo, en lenguaje RDF para describir mucho mejor sus productos:
Figura 6: Un producto de la tienda de Record Diesel Spare Parts
Fuente: captura de pantalla de producto de la tienda online de Record Diesel Spare Parts, s. f.,
https://recordparts.com.ar/catalogo.php?id_cat=INYCRAIL
Figura 6. Un producto de la tienda de Record Diesel Spare Parts.
A los datos aquí presentados se les agregan metadatos para describirlos mejor.
De esta forma, se deja en claro que el producto es un “inyector

diésel” y que el número mostrado es el “precio de venta al público”.
Así,
clasificamos la información y los buscadores tendrían una mejor
compresión del significado de los datos.
Hablando un poco más del presente, un acercamiento a la Web semántica también lo proporciona la
versión 5 de HTML. En esta versión del lenguaje, el W3C introdujo una serie de nuevas etiquetas con
significado semántico. Por supuesto, esto está lejos, lejísimos, de los ambiciosos objetivos de los
estándares nombrados anteriormente (RDF, OWL y SPARQL). Pero HTML5 está siendo ampliamente
utilizado por las páginas webs actuales. Las etiquetas más importantes que introdujo son:
Article –
Define un artículo dentro de la página web. Se entiende por artículo a un texto secundario,
independiente del contenido principal.
Header, footer –
Definen dos elementos importantísimos de las páginas webs, el encabezado y el pie de página.
Nav –
Define la barra de navegación del sitio.
Section –
Permite definir varias secciones dentro de un sitio web.
Audio y video
–
Definen contenido multimedia dentro del sitio web.
Embed –
Con esta etiqueta se puede marcar la presencia de un contenido interactivo o aplicación externa,
por ejemplo, una caja de comentarios de Facebook insertado en un sitio web.
Canvas –
Permite introducir un “lienzo” dentro de un documento para dibujar gráficos por vectores; será
necesario el uso de JavaScript.
Estas no son todas las etiquetas agregadas en HTML5, pero son de las más importantes e ilustran
claramente su objetivo semántico. Al utilizarlas, Google podrá comprender cuál es el encabezado y pie
de nuestro sitio web, cuál es la barra de navegación, etc.
Figura 7: Etiquetas HTML5 en el sitio web de Record Diesel Spare Parts
Figura 7. Etiquetas HTML5 en el sitio web de Record Diesel Spare Parts.
El sitio web de Record utiliza etiquetas HTML5 para describir su encabezado y barra de navegación.
En la figura 7, podemos observar cómo el sitio web de Record Diesel Spare Parts utiliza etiquetas de
HTML5 para marcar su encabezado y barra de navegación. Con estas etiquetas, Google y demás
buscadores comprenden mucho mejor la información.
Este ha sido un breve recorrido por los avances hacia el gran objetivo de una Web semántica, donde los
buscadores producirán resultados más relevantes y válidos para los usuarios.
Falta mucho camino por recorrer, pero se va en la dirección correcta.
Y si te estás preguntando si existe una Web 4.0…

¡Sí existe! Se la menciona como una Web semántica más profunda y activa, basada en
inteligencia artificial, que funcionará como un asistente virtual.
Y aunque no lo creas, ya se habla de una Web 5.0, donde se incorporarían

emociones, los dispositivos podrían detectar las reacciones que produce un video
o un texto…
Te invito a responder las siguientes preguntas de repaso:
¿A qué se refiere la Web semántica?
Una Web más comprensible para las máquinas.
El paso de los usuarios de consumidores a generadores de información.
Una Web más comprensible para los seres humanos.
La evolución de la Web que permite velocidades de descarga mayores.
SUBMIT
En una Web semántica, los metadatos serían leídos por:
Los motores de búsqueda.
Los usuarios.
Los navegadores webs.
Los dispositivos del usuario final.
SUBMIT
Complejidad de los elementos en el diseño web
Lec 3 MOD 2
Por naturaleza, las páginas webs son un tipo de producto interactivo destinado a visualizarse
en una gran variedad de dispositivos. Pocos productos digitales se enfrentan a tal cantidad de
plataformas de hardware y sistemas operativos. Los usuarios las visualizan desde
computadoras, teléfonos y hasta televisores; desde sistemas operativos tan diversos, como
Windows de Microsoft, IOS de Apple, Android de Google, Linux, etc.; distintos navegadores
webs, como Chrome de Google, Edge de Microsoft, Firefox de Mozilla, Safari de Apple, Opera,
etc.; desde pantallas de todos los tamaños (hablamos en la lectura 2 del módulo 1 de la
complejidad que esto supone).
¡Y las páginas webs deben verse perfectamente en todos ellos!
Los estándares dictados por el W3C (World Wide Web Consortium) ayudan bastante a
normalizar este caos. Por suerte, todos los navegadores interpretan HTML y CSS, por ejemplo.
No es tan lejana una época, cuando los navegadores webs no se habían ajustado al estándar
CSS completamente, que las páginas se veían distintas según con qué navegador se las
visitara. Esto causaba mucho sufrimiento a los desarrolladores webs que tenían que hacer todo
tipo de ajustes y parches para que el sitio se viera decentemente en todos ellos. Por suerte,
esos días han pasado y ahora está todo bastante más estandarizado.
Sin embargo, sigue habiendo complejidades derivadas de todas estas plataformas tan
diferentes; con un procesador muy potente o básico, las páginas webs deben descargarse en
tiempos aceptables, adaptarse a distintas velocidades de conexión a Internet, pantallas y
sistemas operativos.
En esta lectura, estudiaremos puntualmente las complejidades que se derivan del texto, las
imágenes y el color en las páginas webs. Todas ellas surgen de las distintas plataformas de
hardware y software que acabamos de mencionar. Retomaremos el caso del sitio web de
Record Diesel Spare Parts y analizaremos cómo supera este todas estas complejidades.
LECCIÓN 1 de 5
Complejidad del texto en las páginas webs
Una de las primeras sorpresas que se llevan los diseñadores gráficos (y cualquier persona) cuando se
adentran en el mundo del diseño web es lo que ven cuando despliegan el cuadro de fuentes en los
programas de desarrollo web. Este cuadro es muy diferente del que están acostumbrados a ver en
programas como Adobe Illustrator o Adobe Photoshop:
Figura 1: El cuadro de fuentes de Adobe Dreamweaver
Fuente: captura de pantalla del software Adobe Dreamweaver (Adobe Inc., 2007).
Figura 1. El cuadro de fuentes de Adobe Dreamweaver. La cantidad de fuentes no es la habitual y no se

puede elegir una sola fuente, sino varias.
Como vemos en la figura 1, la cantidad de fuentes parece bastante limitada, y otra cosa que llama la
atención es que no podemos elegir una fuente individual, sino que elegimos varias. Por ejemplo, en la
primera opción del cuadro elegimos las fuentes Cambria, Hoefler Text, Liberation Serif, Times, Times
New Roman y serif.
El problema es que si en una página web se utiliza una fuente que, por ejemplo, el diseñador tiene en su
computadora y luego es visitada por un usuario que no tiene esa fuente instalada en su dispositivo, esta
no se verá. Lo que sucederá es que la fuente será automáticamente reemplazada por alguna fuente
preinstalada en el sistema operativo del usuario y el resultado se volverá impredecible: si el reemplazo
se hace por una fuente medianamente similar, no habrá mayores consecuencias; pero si, por el
contrario, el reemplazo se produce con una fuente muy diferente, el diseño podría romperse.
Es por esto que los programas de desarrollo web, como el que vemos en la figura 1 (Adobe
Dreamweaver), en principio, solo nos dejan optar por las fuentes estándar, las que están preinstaladas
en la mayoría de los sistemas operativos. Esta también es la razón por la que no elegimos una fuente,
sino una familia de fuentes. De esta manera, ya estamos previendo qué debe suceder si el usuario no
tiene instalada en su sistema la primera de las fuentes seleccionadas: se reemplazará por la segunda y
así sucesivamente. Por ejemplo, si optamos por la primera opción del cuadro de la figura 1, la fuente
será Cambria. Pero si el usuario no la llegara a tener instalada en su sistema, será reemplazada por
Hoefler Text, y si esta tampoco estuviera, por Liberation Serif, y así sucesivamente.
Estas fuentes se llaman “fuentes seguras”. Son aquellas que vienen preinstaladas en la mayoría de los
sistemas operativos.
¿Es imposible utilizar una fuente que no sea segura en una página web?
Esta limitación en las fuentes es frustrante para las personas de las áreas del arte y el diseño y, a decir
verdad, en algunos casos es un verdadero problema si tuviéramos que diseñar una página web para una
empresa cuya identidad esté muy ligada a una determinada fuente, como, por ejemplo, Coca-Cola.
Muchos diseñadores webs novatos se sienten tentados a superar esta limitación escribiendo el texto
en algún programa de diseño gráfico, como Adobe Illustrator o Adobe Photoshop, con la fuente que
desean y luego insertar el texto como una imagen dentro de la página web.
Si bien el texto se verá con la misma fuente en cualquier dispositivo, más allá de que el usuario final
tenga o no tenga la fuente en cuestión, esta técnica es un gran error, por dos motivos:
1
Primero, se está añadiendo peso y, por lo tanto, lentificando la descarga de la página web
innecesariamente. Si además de las imágenes que por naturaleza la página web debe
llevar, le agregamos otras tantas más, que en realidad son textos tratados como imagen,
el peso se incrementará considerablemente.
2
Segundo y más importante, los motores de búsqueda (como Google) no podrán leer estos textos
(simplemente porque no son textos), con lo cual estaremos perjudicando el
posicionamiento de la página web. Si justamente es el nombre de la empresa, como en el
caso de Coca-Cola, lo que estamos tratando de esta manera, los buscadores no lo
reconocerán, lo cual es un error garrafal
La manera correcta de incluir fuentes no seguras en una página web es a través de CSS. En su versión
3, incluye una forma de llamar una fuente desde el servidor. La fuente es descargada y utilizada en la
página. El diseñador necesitará subir el archivo de la fuente al servidor e incluir un código en su página
web que haga la llamada. Veamos cómo lo hace el sitio web de Record Diesel Spare Parts:
Figura 2: El sitio web de Record llama la fuente Calibri desde el servidor
Figura 2: El sitio web de Record llama la fuente Calibri desde el servidor. El archivo de la fuente se
descarga desde el servidor y puede ser utilizado en el resto del código con el nombre “mifuente”.
Como vemos en la figura 2, la declaración CSS que permite llamar una fuente es @font-face. Se le asigna
un alias (un nombre), que en este caso es “mifuente”, y se indica la ruta al archivo de la fuente en el
servidor: url(../fuentes/calibri.ttf). Por supuesto, el archivo calibri.ttf tiene que haber sido subido
previamente. Por último, se indica el formato de la fuente, que en este caso es True Type.
Aunque esta técnica es correcta, no debemos dejar de observar sus desventajas. Por supuesto, habrá
una demora al descargar el archivo de la fuente. El defecto se hace visible sobre todo en conexiones a
Internet lentas. Es muy típico ingresar a la página, que se vea con una fuente determinada y a los pocos
segundos observamos que es reemplazada por la definitiva. Si la página tiene como destino usuarios
en áreas con mala conexión a Internet o a dispositivos móviles, lo más aconsejable es utilizar fuentes
seguras, a menos, como ya se dijo, que la fuente realmente tenga que ver con la identidad de la empresa.
Una buena recomendación para el sitio de Record que estamos analizando sería reemplazar la fuente
Calibri por una fuente estándar para mejorar el tiempo de descarga.
LECCIÓN 2 de 5
Complejidad de las imágenes en las páginas web
A grandes rasgos, existen dos tipos de imágenes digitales:
Las imágenes vectoriales, que están formadas por objetos geométricos dependientes (segmentos,
polígonos, arcos, muros, etc.) definidos por atributos matemáticos de forma, posición, etc.
Es posible ampliar el tamaño de este tipo de imágenes sin sufrir pérdida de calidad. Es el tipo de
imágenes que habitualmente podemos ver en los videojuegos.
Por otro lado, tenemos los mapas de bits, que representan las imágenes como una malla de puntos de
color (píxeles). Se las define por su altura y grosor (en píxeles), y por su profundidad de color (bits por
píxel), que determina el número de colores distintos que se puede almacenar en cada punto y, por lo
tanto, de esto depende la calidad de la imagen.
El tamaño de los mapas de bits no se puede variar sin que sea notoria la pérdida de calidad, aunque es
mucho más grave si la imagen se agranda respecto de su tamaño original que si se achica.
Las imágenes vectoriales presentan un peso (en kilobytes) mucho mayor que los mapas de bits y es por
esta razón que no son utilizados en las páginas webs. En la Web, se utilizan imágenes de mapas de bits
como .gif, .jpg o .png por su excelente relación peso/calidad.
Los navegadores webs muestran 72 píxeles por pulgada, por tanto, no tendría sentido incluir una imagen
de mayor calidad en una página web, ya que sería un desperdicio de recursos, lentificando el tiempo de
descarga innecesariamente.
El hecho de que los mapas de bits no puedan ampliarse representa un gran obstáculo para las páginas
webs, sobre todo teniendo en cuenta, como ya mencionamos, que son productos interactivos
destinados a visualizarse en pantallas tan disímiles como la de un smartphone hasta un televisor 4K.
La pérdida de calidad de los mapas de bits al ampliarlos, en general, es inaceptable para cualquier
página web y, por lo tanto, existen estrategias para superar este obstáculo.
En los sitios webs modernos, la técnica que más se está utilizando es incluir imágenes de gran tamaño,
por ejemplo, Full HD, y achicarlas para ajustarlas a las pantallas más pequeñas, ya que, como dijimos,
la pérdida de calidad de los mapas de bits es mucho menor al achicarlos que al agrandarlos.
Por supuesto, esta técnica tiene una desventaja y es que puede producir tiempos de descarga
demasiado elevados, sobre todo en los dispositivos móviles. Esto puede superarse gracias a la versión
3 de CSS y sus media queries, que permiten hacer diseño responsivo. Con estas herramientas es posible
mostrar distintas versiones de una imagen, según la pantalla con la que el sitio web esté siendo
visualizado. Es esta combinación de técnicas lo que se está utilizando actualmente.
Una configuración muy típica es, por ejemplo, utilizar una imagen de 1920 píxeles de ancho (Full HD)
para pantallas con un ancho de hasta 768 píxeles. La imagen se va achicando para adaptarse a las
distintas pantallas. Pero si la pantalla tiene un ancho menor a 768 píxeles, mediante una media query,
directamente se usa otra versión de la imagen mucho más chica para no provocar un tiempo de
descarga elevado en un dispositivo con una pantalla tan pequeña, donde sería un desperdicio bajar una
imagen Full HD.
Los frameworks para diseño responsivo, como BootStrap, incluyen una clase de CSS que soluciona el
problema de achicar la imagen según la pantalla haciendo esta tarea muy sencilla para los diseñadores
webs. Esta es la técnica aplicada en el sitio web de nuestro análisis:
Figura 3: Tratamiento de imágenes del sitio web de Record Diesel Spare Parts
Figura 3. Tratamiento de imágenes del sitio web de Record Diesel Spare Parts. Se les aplica la clase de
BootStrap “img-responsive” a las imágenes del carrusel.
Figura 4: La imagen principal del sitio de Record desde una pantalla Full HD
Fuente: captura de pantalla del sitio web de Record Diesel Spare Parts desde una pantalla Full
HD (https://recordparts.com.ar/).
Figura 4. La imagen principal del sitio de Record desde una pantalla Full HD. Se utiliza una imagen de
1920 píxeles de ancho capaz de cubrir una pantalla Full HD sin necesidad de agrandarla.
Figura 5: La imagen principal del sitio de Record desde un smartphone
Fuente: captura de pantalla del sitio web de Record Diesel Spare Parts visto desde un
smartphone (https://recordparts.com.ar/).
Figura 5: La imagen principal del sitio de Record desde un smartphone. El framework BootStrap achica
la imagen para adaptarla a la pequeña pantalla del teléfono.
Podemos observar que el sitio web de Record utiliza la misma imagen en todas las pantallas y la achica
mediante la clase “img-responsive” de BootStrap para adaptarla. Este diseño es susceptible de mejora
aplicando una media query que llame a una versión más pequeña de la imagen en los dispositivos
móviles, evitando así el desperdicio de recursos.
LECCIÓN 3 de 5
Complejidad de los colores en las páginas webs
Los monitores, pantallas y televisores utilizan un modelo llamado RGB (Red, Green, Blue) para generar
los colores. Básicamente, hacen mezclas de los colores rojo, verde y azul, los que podríamos denominar
“colores primarios digitales”, para generar todas las tonalidades. Para especificar un color utilizamos
una notación hexadecimal (un sistema numérico compuesto de 16 dígitos: del 0 al 9 y de la A a la F).
Para crear un color, le asignamos dos dígitos hexadecimales a cada color RGB. El valor resultante se
denomina el código hexadecimal del color y siempre empieza con el símbolo numeral (#). Así, por
ejemplo, el color negro se logra asignando un valor de 0 a los tres colores primarios:
#000000 (Código hexadecimal del color negro).
El color blanco se logra asignando un valor FF a los tres colores primarios:
#FFFFFF (Código hexadecimal del color blanco).
#660000 sería un rojo oscuro o #FF0000 un rojo brillante.
El ojo humano puede distinguir un máximo de 16 millones de colores. Para almacenar esa cantidad de
colores en una imagen digital, hay que utilizar 24 bits de información por cada píxel, generando lo que
conocemos como una imagen “true color” (color verdadero). El archivo resultante será bastante grande,
de ahí que existan métodos de compresión, como JPEG. Esta tecnología se basa en el hecho de que la
sensibilidad de los ojos humanos al color azul es una veinteava parte de la sensibilidad a los otros dos
colores. Así, el sistema “pierde” conscientemente más información de este color porque los ojos
humanos no lo percibirán.
En el pasado, existía una lista de “colores seguros para la Web” debido a que había monitores con una
capacidad limitada para mostrar colores. Por ejemplo, había pantallas que solo podían mostrar 256
colores. En este caso, si en una página web se utilizaba un color no disponible, el navegador creaba una
aproximación mezclando colores y creando un tramado, lo cual resultaba en una imagen bastante
antiestética. Por ello, era más recomendable utilizar “colores seguros”, colores que se verían bien en
cualquier pantalla, incluso las más limitadas. Para crear colores seguros, se utilizan tres dígitos
hexadecimales en lugar de seis: #000 equivale a #000000
#ABC equivale a #AABBCC
Con las combinaciones posibles se obtenía la siguiente paleta de “colores seguros”:
Tabla 1: Paleta de colores seguros
Fuente: Alvarez, 30 de septiembre de 2016,

https://desarrolloweb.com/articulos/coloreshtml.html
Con los años, el uso de los colores seguros ha ido decayendo debido a que las pantallas, inclusive las
de los teléfonos, pueden mostrar paletas true color. De todas formas, es conveniente conocer esta lista
de colores por si en algún contexto nos topamos con pantallas con limitaciones.
Dado que los colores forman parte del diseño o formato de las páginas webs, estos se definen en el
código CSS de estas. Veamos cómo la página bajo análisis define el color de fondo de su encabezado:
Figura 6: Definición del color de fondo del encabezado del sitio web de Record
Diesel Spare Parts
Figura 6. Definición del color de fondo del encabezado del sitio web de Record Diesel Spare Parts. Se
utiliza un estilo CSS para definir el color de fondo (background-color) del encabezado del sitio.
Vemos en la figura 6 cómo el sitio de Record Diesel Spare Parts establece como color de fondo para su
encabezado el color #ED1C24 (un tono de rojo).
Ahora bien, armar colores haciendo mezclas RGB en formato hexadecimal no resulta demasiado
amigable. Si bien es posible aprender técnicas para hacer las mezclas, en la práctica, casi ningún
desarrollador web lo hace así. Los programas para edición y desarrollo web siempre ofrecen alguna
herramienta que ayude a armar colores: los conocidos “color pickers” facilitan esta tarea. Veamos, por
ejemplo, cómo lo hace el software de edición web Adobe Dreamweaver:
Figura 7: El color picker de Adobe Dreamweaver
Figura 7. El color picker de Adobe Dreamweaver. Al escribir una propiedad de color (por ejemplo,
background-color), Adobe Dreamweaver muestra un color picker.
Al hacer clic sobre el color deseado, nos aparece automáticamente su código hexadecimal.
Si en una página web se necesita usar una fuente no segura:
Conviene subirla al servidor y llamarla con CSS.
Conviene escribir el texto en Photoshop e insertarlo como imagen.
Conviene instalar la fuente en la computadora del diseñador y

utilizarla sin mayor problema.
Conviene descartarla y utilizar una fuente segura.
SUBMIT
Las estadísticas de tráfico de un sitio web demuestran que los usuarios
móviles no permanecen en el sitio más de un minuto. Al analizarlo, se
descubre que la imagen del banner principal tarda casi dos minutos en
descargar. ¿Qué recomendación harías?
Utilizar una versión más pequeña de la imagen en los dispositivos

móviles.
Eliminar el banner en los dispositivos móviles.
Utilizar una imagen más pequeña para el banner que se estire en las
pantallas más grandes.
Utilizar una imagen vectorial para el banner.
SUBMIT
LECCIÓN 4 de 5
Publicar un sitio web en Internet Lec 4 MOD 2
Una vez que un sitio web está completo en cuanto a su diseño, código HTML, CSS, etc.,
llega la hora de publicarlo en Internet para hacerlo accesible a los usuarios. En esta
lectura, recorreremos los pasos necesarios para lograr este objetivo.
Para estudiarlos de una manera práctica, retomaremos el sitio web de la empresa Record
Diesel Spare Parts que venimos analizando en lecturas anteriores. Le aplicaremos los
pasos que iremos estudiando, tal como si estuviéramos subiendo este sitio.
LECCIÓN 1 de 8
Registro del dominio de un sitio web
Todo proyecto web debería comenzar con la verificación de la disponibilidad del dominio
deseado. El comitente podría decepcionarse si el proyecto comienza y luego resulta que el
dominio que deseaba para su proyecto no está disponible.
Las páginas en Internet constan de una dirección desde la cual son accesibles. Técnicamente,
a esta dirección se le denomina la URL (Uniform Resource Locator o Localizador Uniforme de
Recursos). El dominio de un sitio web forma parte de la URL. Veamos, en el caso del sitio bajo
análisis, cuáles son las partes de su dirección o URL:
Figura 1: URL del sitio web de Record Diesel Spare Parts
Figura 1. URL del sitio web de Record Diesel Spare Parts. En este caso, el dominio es
recordparts.com.ar
El protocolo HTTP (Hypertext Transfer Protocol o Protocolo de Transferencia de Hipertextos) es

el lenguaje que permite la comunicación en la World Wide Web. Cabe mencionar aquí que el
protocolo HTTP está cayendo en desuso a favor del protocolo HTTPS (Hypertext Transfer
Protocol Secure o Protocolo seguro de transferencia de hipertextos), que es similar, pero más
seguro, ya que la información que viaja entre el equipo del usuario y el servidor es encriptada.
De hecho, Google está favoreciendo el posicionamiento de los sitios que trabajen bajo el
protocolo HTTPS.
Las tres “w” simplemente indican el servicio de Internet al que queremos acceder, en este caso,
a la World Wide Web.
Los dominios deben registrarse ante el Network Information Center (NIC). Cada dominio de nivel
superior cuenta con una autoridad que administra los dominios bajo su jurisdicción. En el caso
de nuestro análisis, el dominio de nivel superior es .com.ar y, por tanto, es administrado por NIC
Argentina (https://nic.ar/). En este caso, la entidad es una dependencia gubernamental, pero no
necesariamente debe ser así. Muchos países en el mundo tienen NIC que son operados por
universidades o empresas privadas. Una vez que un dominio es registrado, nadie más puede
registrarlo ni utilizarlo. Por lo tanto, cuando se va a abordar un proyecto de diseño web, es muy
importante verificar que el dominio deseado esté disponible. Los sitios webs de los distintos
NIC cuentan con un buscador que nos permite saber si el dominio que nos interesa está
disponible o no. Veamos, por ejemplo, el buscador en el sitio web de NIC Argentina:
Figura 2: El buscador de dominios de NIC Argentina
Fuente: adaptación propia de captura de pantalla de buscador de NIC Argentina

(https://nic.ar//).
Figura 2. El buscador de dominios de NIC Argentina. Desde este buscador se puede verificar si
un dominio está o no disponible para su registro.
Existen varios tipos de dominios de nivel superior. Los más conocidos son:
Tabla 1: Los dominios de nivel superior más conocidos.
Dominio Uso
.com Comercial (cualquier persona u organización puede obtenerlo)
.org Organizaciones sin fines de lucro
.net Entidades relacionadas a Internet

.gob Organizaciones gubernamentales
.mil Organizaciones militares
.edu Instituciones educativas oficiales
Los dominios .com son los más sencillos de obtener, mientras que los otros pueden requerir
trámites adicionales. Por ejemplo, para obtener un dominio .edu, se debe enviar documentación
que demuestre que la organización es un centro educativo oficial.
Estos son los posibles resultados que nos puede devolver el buscador de NIC Argentina: Figura
3: Posibles resultados al buscar un dominio en NIC Argentina
Figura 3. Posibles resultados al buscar un dominio en NIC Argentina. NIC Argentina informa si
el dominio buscado está disponible para su registro.
Como puede verse en la figura 3, en caso de que el dominio no esté disponible, existe la
posibilidad de disputarlo si pensamos que tenemos derechos sobre él (por ejemplo, si tenemos
una marca registrada igual al dominio).
En cuanto a los dominios de nivel superior, son dos los tipos que podemos registrar:
Dominios locales: son los que están asociados a un país, tal como el de Record:
recordparts.com.ar. La terminación .ar se refiere a Argentina.
Dominios globales: son aquellos que no están asociados a ningún país en particular, como
todos aquellos terminados en .com.

Desde un punto de vista técnico, no hay diferencia entre estos tipos de dominio. Ambos son
accesibles desde cualquier parte del mundo. La elección de uno u otro dependerá del objetivo
del sitio web. Si, por ejemplo, el sitio está orientado a la venta de productos dentro de la
Argentina, como el de Record, lo mejor será registrar un dominio local, ya que para los usuarios
será más fácil localizarlo en las versiones locales de Google y demás buscadores. Por lo
contrario, si la empresa es global y apunta a clientes de todo el mundo, será mejor opción
registrar un dominio sin asociación a ningún país en particular.
Muchas empresas optan también por registrar varios dominios. Las empresas que operan en
muchos países registran el dominio global y todos los de los países donde tienen negocios. Es
posible redirigir varios dominios a un mismo sitio web, o en un caso ideal, a versiones locales
del sitio. Veamos, por ejemplo, el caso de Google: tiene registrado el dominio google.com, pero
también google.com.ar, google.es, google.fr para sus sitios en Argentina, España, Francia, etc.
Los dominios globales deberán registrarse ante NIC (https://nic.com/), donde encontraremos
un buscador muy similar al que vimos en NIC Argentina.
Si el dominio buscado está disponible, podremos proceder a su registro, en el caso de NIC

Argentina, por ejemplo, haciendo clic en el botón “QUIERO REGISTRARLO” de la figura 3.
Deberemos completar una serie de datos personales y de la organización registrante y pagar

un arancel anual. Cuando el dominio esté próximo a vencer, NIC Argentina nos lo recordará vía
e-mail y deberemos renovar el registro.
Los dominios .ar pueden tener caracteres acentuados, la letra “ñ” y hasta 50 caracteres de
longitud. No se permite el guion '-' ni al principio ni al final del nombre del dominio. No se
permiten dos guiones '-' seguidos en la 3.a y 4.a posición.
LECCIÓN 2 de 8
Elección del hosting

Para que un sitio web sea accesible para los usuarios, necesitamos un servidor donde alojarlo.
Un servidor es una computadora, generalmente con cierto poder de procesamiento, y un
software “servidor web”. Dos de los más conocidos software de servidor web son Apache
(gratuito y de código abierto), que corre sobre cualquier sistema operativo, e Internet
Information Services (de Microsoft) que corre sobre Windows.
Aunque es técnicamente posible montar nuestro propio servidor web, por lo general, a nivel
económico no conviene. El servicio de Internet, las licencias de software y el mantenimiento del
hardware hacen que no se justifique el gasto. Deberemos mantener operativo el equipo las 24
horas del día, los 365 días del año a pesar de cortes de energía, problemas de conectividad, etc.,
lo cual requiere una infraestructura importante. Solo grandes empresas con importantes
centros de cómputo montados utilizan esta opción y es una tendencia en declive.
La gran mayoría de los sitios webs “alquilan” un servidor. Una empresa realiza las inversiones
antes mencionadas y reparte los costos entre varios clientes, es decir que alojan varios sitios
webs en un mismo servidor. Este servicio es lo que denominamos “hosting”.
Por lo general, el servicio de alquiler de servidores webs es bastante económico y permite

escalar según haga falta. Se puede comenzar con un servicio básico e ir ampliando el servicio
a medida que el tráfico al sitio va creciendo.
La posibilidad de escalar es cada día más flexible debido a las tecnologías de computación en
la nube y virtualización. Estas tecnologías permiten, sobre un mismo hardware, crear varias
“máquinas virtuales”. Esto permite agregar, modificar y quitar servidores por software sin
necesidad de realizar ningún movimiento físico de hardware.
Las empresas líderes en el mundo de este tipo de servicios, como Amazon, están llegando
incluso a vender hosting a demanda, donde se paga exactamente por los recursos que se
consumen. Así, si nuestro sitio sufre un pico de tráfico, el sistema le asigna más recursos
automáticamente y cuando el pico pasa, el sistema desafecta recursos, disminuyendo los
costos de hosting.
Los recursos de los que hablamos son poder de procesamiento, memoria RAM, espacio en
disco, ancho de banda, etc.
Veamos, por ejemplo, los planes de hosting que ofrece una empresa líder en la Argentina:
Figura 4: Planes de hosting ofrecidos por una empresa de hosting

argentina
Fuente: captura de pantalla de planes de hosting de DonWeb, s. f., https://donweb.com/esar/web-

hosting
Figura 4. Planes de hosting ofrecidos por una empresa de hosting argentina. El costo de los
planes varía según los recursos que ofrecen, como espacio de almacenamiento y ancho de
banda.
Existen numerosas empresas que ofrecen servicios de hosting, nacionales e internacionales.

La elección del servicio de hosting es primordial para el éxito de un sitio web. Un hosting lento
o con frecuentes caídas nos predestina al fracaso.
Los planes en la figura 4 nos muestran algunas variables que son importantes, como el espacio
en disco (la cantidad de gigabytes que tenemos disponibles para los archivos de nuestro sitio,
su base de datos, etc.), el ancho de banda (que permite la visita simultánea de usuarios sin que
el servidor se vea saturado), cuántas bases de datos podremos crear, la cantidad de dominios
que podremos “parkear” (esto es, cuántos dominios podrán apuntar a nuestro sitio), etc. Pero
hay dos variables muy importantes que no están especificadas en estos listados:
El “uptime”: es el porcentaje de disponibilidad de un servidor web funcionando correctamente

(online), en contraposición con el tiempo de caída (offline o downtime).
Las empresas de hosting expresan esta variable como un porcentaje. Por ejemplo, la empresa
GoDaddy, líder mundial en servicios de hosting, dice que tiene un uptime de 99,9 %. Para
comprender qué significa esto, veamos la siguiente tabla:
Tabla 2: Tiempo de caída máximo que garantiza cada porcentaje de
disponibilidad indicado
Fuente: Gonzo, 10 de agosto de

2011,http://gonzo.teoriza.com/12126 * Calculado con meses
de 31 días y años de 365 días.
El tiempo de respuesta: un tiempo de respuesta elevado hace que los usuarios tengan que
esperar más para descargar la página. Existen servicios (gratuitos y pagos) que permiten medir
los tiempos de respuesta. Dos de los más conocidos son StatusCake y Pingdom.com. Estos
servicios pueden medir los tiempos de respuesta del hosting cada 5 minutos, avisar si el sitio
deja de estar disponible, etc..
Figura 5: El sitio web de la empresa de hosting GoDaddy
Fuente: adaptación propia de captura de pantalla del sitio web de GoDaddy, s.

f.,https://ar.godaddy.com/hosting/web-hosting
Figura 5. El sitio web de la empresa de hosting GoDaddy. Asegura tener un uptime de 99.9 %.
El sitio web bajo análisis (empresa Record Diesel Spare Parts) se aloja en un servidor del
proveedor de hosting argentino DonWeb (https://donweb.com/es-ar/), con un espacio de
alojamiento de 5 GB de disco sólido y ancho de banda ilimitado. Si bien las prestaciones del
hosting son suficientes para sus niveles de tráfico, debería pedirse a DonWeb su porcentaje de
uptime, ya que en su sitio no lo informa y debería medirse el tiempo de respuesta para asegurar
que el servicio se esté prestando con suficiente calidad.
Existen también una serie de servicios de hosting gratuitos, como por ejemplo, Wix
(https://es.wix.com/) y Hostinger (https://www.hostinger.com.ar/). Suelen ser servicios con
tiempos de repuesta elevados y con limitaciones importantes. Algunos no permiten utilizar
nuestro dominio tal como lo registramos, sino que agregan alguna palabra sobre su marca;
otros incluyen publicidades en los sitios que alojemos en sus servidores, y algunos más no
permiten los métodos tradicionales de subida de archivos, reemplazándolos por métodos más
rudimentarios. Este tipo de servicios solo son recomendables para prototipos de sitios webs,
pero nunca para sitios en producción.
Una vez elegido y contratado un servicio de hosting, este nos proporcionará un usuario y
contraseña con los cuales conectarnos al servidor web y las direcciones de sus servidores DNS
(Domain Name System o Sistema de Nombres de Dominio).
Con el nombre de usuario y contraseña proporcionados podremos ingresar a una plataforma y

asociar el dominio, previamente registrado en NIC, con el servicio de hosting.
Veamos, por ejemplo, el proceso de alta que se hizo para el sitio de Record Diesel Spare Parts
en los servidores de DonWeb:
Figura 6: Alta del sitio web de Record Diesel Spare Parts en el proveedor
de hosting
Fuente: captura de pantalla de alta del sitio web de Record Diesel Spare Parts en DonWeb.
Figura 6. Alta del sitio web de Record Diesel Spare Parts en el proveedor de hosting. Debe
cargarse el dominio registrado en NIC en el panel de la empresa de hosting para asociarlos.
Aún falta un paso adicional para que el sitio quede completamente funcional y es cargar las
direcciones de los servidores DNS proporcionados por el proveedor de hosting en NIC. Este
proceso se conoce como “delegación del dominio”.
Veamos en la figura 7 la delegación realizada para el sitio web de Record Diesel Spare Parts:
Figura 7: Delegación del dominio recordparts.com.ar
Fuente: https://tramitesadistancia.gob.ar/tramitesadistancia/delegaciones-nic
Figura 7. Delegación del dominio recordparts.com.ar. Deben cargarse las direcciones de los
servidores DNS del proveedor de hosting en NIC.
Debe tenerse en cuenta que, una vez realizada la delegación, el sitio puede tardar hasta 24 horas
en estar disponible. Este es el tiempo que tarda en dispersarse la nueva asociación dominio –
servidores DNS por toda la Internet.
Por último, cabe aclarar que algunas empresas de hosting ofrecen paquetes que incluyen
hosting y dominio. La empresa también se encarga de registrar el dominio por nosotros
evitándonos los trámites directos con NIC. Es por esto que en los sitios webs de las empresas
de hosting suele haber un buscador de dominio, al igual que en los sitios de NIC. Si el dominio
está disponible, se lo podemos comprar a la empresa de hosting. Esto suele ser práctico, pero
más costoso y también debe prestarse atención a nombre de quién queda registrado el dominio.
Lo correcto es que este quede registrado a nombre del comitente, no de la empresa de hosting
ni del diseñador web, ya que luego esto puede traer problemas de tipo legal.
A medida que el tráfico de un sitio web va creciendo, podemos escalar entre los siguientes tipos
de hosting:
Servicio tradicional de hosting: un servidor web físico compartido por varios sitios webs.
Este tipo de servicio está cayendo en desuso a favor del siguiente.
Cloud hosting: un servidor virtual exclusivo para nuestro sitio web. Como ya mencionamos,
esto es posible gracias a las tecnologías en la nube y la virtualización. El hardware

es compartido, pero por software se crean varios servidores sobre él. Este tipo de
hosting proporciona ventajas en cuanto a potencia, seguridad y una gran
flexibilidad para escalar.
Servidores dedicados: un servidor físico exclusivo para nuestro sitio web. Suele ser un
servicio bastante más costoso, pero ofrece lo máximo en performance y control.
Subida del sitio
Con el registro del dominio y la contratación de un servicio de hosting lograremos que cuando
el usuario escriba la dirección del sitio en su navegador, por ejemplo, www.recordparts.com.ar,
aparezca algo. Normalmente, los servicios de hosting incluyen una página de bienvenida de
forma predeterminada. El próximo paso, por tanto, es subir los archivos de nuestro sitio al
servidor web: las páginas html, archivos CSS, las imágenes, sonidos, videos y todos los archivos
que formen parte del sitio. La forma tradicional de subir archivos es a través del protocolo FTP
(File Transfer Protocol o Protocolo de Transferencia de Archivos). Este protocolo permite
realizar operaciones básicas de archivo en un equipo remoto, como, por ejemplo, crear carpetas,
copiar, mover, eliminar, renombrar archivos, etc.
Para poder conectarnos por FTP, necesitaremos un software para este fin. Uno muy conocido
es FileZilla de Mozilla. Los software para desarrollo web, como Adobe Dreamweaver, suelen
también tener un programa FTP incorporado. Para poder realizar la conexión, necesitaremos el
nombre del dominio y el usuario y contraseña proporcionados por el hosting.
Figura 8: Configuración FTP del sitio web de Record en Adobe

Dreamweaver
Figura 8: Configuración FTP del sitio web de Record en Adobe Dreamweaver. Con el nombre del
dominio y el nombre de usuario y contraseña es suficiente para hacer una conexión FTP.
Una vez realizada la configuración, las interfaces de los programas FTP suelen dividir la
pantalla, mostrando de un lado los archivos del servidor web (remoto) y del otro, los archivos
locales. Las carpetas y archivos pueden ser arrastrados de un lado a otro, y en cualquiera de
los dos se pueden crear carpetas, copiar, mover, renombrar y eliminar archivos, entre otras
operaciones.
Figura 9: Subida de los archivos del sitio web de Record por FTP
Fuente: elaboración del propia.
Figura 9: Subida de los archivos del sitio web de Record por FTP. La operación consiste,
simplemente, en arrastrar los archivos locales del sitio hacia el equipo remoto (servidor web)..
CONTINUE
LECCIÓN 4 de 8
Promoción del sitio
Realizados todos los pasos anteriores, el usuario podrá escribir en su navegador

www.recordparts.com.ar y visualizar el sitio desde cualquier parte del mundo. Pero esto para
nada significa que el sitio será localizable desde los motores de búsqueda, como Google.
Aquí comienza un proceso que se conoce como “indexación”. La indexación es la incorporación

del nuevo sitio a la base de datos de Google (u otros buscadores).
Este es un proceso automático realizado por el algoritmo de Google. Simplemente, debemos

esperar un tiempo (muy variable, normalmente entre 1 y 30 días) y nuestro sitio será indexado
automática y gratuitamente. Pero esto no garantiza en qué posición seremos indexados. Todos
los sitios webs pretenden, como mínimo, estar en la primera página de los resultados de Google,
pero esto no es tarea fácil. Hay rubros que son extremadamente competitivos como, por
ejemplo, el turismo o el software, con millones de sitios sobre el tema que compiten por estar
en la primera página de Google. El posicionamiento de sitios en Google es toda una disciplina,
con profesionales y empresas dedicados al tema.
A grandes rasgos, hay dos cosas que podemos hacer para posicionar un sitio web en Google:
SEO (Search Engine Optimization u Optimización para Motores de
Búsqueda) –
Consiste en armar los contenidos de los sitios webs estratégicamente, teniendo en
cuenta las palabras clave y cómo y dónde utilizarlas para favorecer el
posicionamiento. El etiquetado HTML influye en esta área. Por ejemplo, los textos
marcados con la etiqueta <h1> se consideran y comparan con las palabras clave
ingresadas por los usuarios en los buscadores. También los títulos de las páginas,
marcados con la etiqueta <title> de HTML importan mucho. El posicionamiento que
se logra con este tipo de técnicas se
denomina “posicionamiento orgánico” y es algo así como un posicionamiento
“merecido” por la relevancia de los contenidos respecto de la búsqueda del usuario.
EM (Search Engine Marketing o Marketing en Motores de Búsqueda) –

Básicamente, consiste en contratar distintos servicios de publicidad a los motores de
búsqueda y convertirse en un “anunciante”.
Cuando Google presenta sus resultados, divide claramente los sitios que están allí porque han
pagado (son anunciantes) de los que están allí por posicionamiento orgánico. Y la mayoría de
los usuarios también distinguen muy bien esta diferencia. Ambos tipos de posicionamiento son
importantes, pero el orgánico es fundamental.
Veamos, a continuación, los resultados de Google ante la búsqueda “repuestos Diesel en

Córdoba”:
Figura 10: Resultados de Google ante la búsqueda “repuestos Diesel en
Córdoba”
Figura 10. Resultados de Google ante la búsqueda “repuestos Diesel en Córdoba”. El buscador
divide los resultados entre anunciantes y posicionamiento orgánico.
Como vemos en la figura 10, el primer sitio web está marcado como “Anuncio”, lo que significa
que está allí porque ha contratado (y pagado) servicios publicitarios de Google.
El sitio web de nuestro análisis aparece en tercer puesto dentro de los que han logrado
posicionarse orgánicamente. Tercer puesto dentro de la primera página de Google es un muy
buen resultado, lo que significa que Record Diesel Spare Parts está haciendo un buen trabajo
de SEO. Solo le quedaría realizar algunas acciones de SEM y su posicionamiento sería excelente,
seguramente.
Además del posicionamiento en Google, los profesionales del marketing digital utilizan otros
canales para promocionar sitios webs, como las redes sociales. Estas plataformas ofrecen
servicios de publicidad que pueden contratarse enviando anuncios a sus usuarios de forma
segmentada por edad, sexo, zona geográfica, intereses y otras tantas variables. Esta también
es una forma muy importante de promocionar un sitio web. Record Diesel Spare Parts cuenta
con páginas en Facebook e Instagram con casi 5000 seguidores en total, por lo que bien podría
explotar estas formas de promoción.
Figura 11: Página de Facebook de Record Diesel Spare Parts
Fuente: captura de pantalla de página de Facebook de Record Diesel Spare Parts

(https://www.facebook.com/record.parts).
Figura 11. Página de Facebook de Record Diesel Spare Parts. La empresa cuenta con una página
en Facebook con más de 4400 seguidores.
Figura 12: Instagram de Record Diesel Spare Parts
Fuente: captura de pantalla de Instagram de Record Diesel Spare Parts

(https://www.instagram.com/record.parts/?hl=es-la).
Figura 12. Instagram de Record Diesel Spare Parts. El Instagram de la empresa cuenta con casi
600 seguidores.
Por último, los medios tradicionales, como la televisión, radio, diarios, etc., por supuesto,
también pueden ser utilizados para promocionar un sitio web. Estos medios suelen ser
privativos para las empresas pequeñas debido a sus altos costos, pero deben ser tenidos en
cuenta. Se podría preparar un proyecto de marketingen este tipo de medios para Record Diesel
Spare Parts y estudiar su viabilidad económica. Grandes sitios hacen uso de estos medios, por
ejemplo, hemos visto fuertes campañas en medios tradicionales de Mercado Libre
(https://www.mercadolibre.com.ar/) y han tenido un enorme éxito.
Preguntas de repaso
Si alguien ha registrado un dominio con el nombre de mi empresa, el cual es
una marca registrada, lo más conveniente sería:
Iniciar una disputa desde NIC.
Iniciar un proceso legal.
Buscar otro dominio lo más parecido posible.
Registrarlo de todos modos, ya que un dominio puede tener más de un

titular.
SUBMIT
Un sitio web invierte considerables sumas en SEM para Google. Figura en el
puesto 1 como anunciante; sin embargo, la cantidad de visitas recibidas no
parece justificar el gasto. ¿Qué recomendación le daría a este sitio web?
Realizar una estrategia de SEO.
Incrementar aún más el presupuesto para SEM.
Realizar anuncios en otros canales, como redes sociales.
Realizar anuncios en medios tradicionales, como la televisión.
SUBMIT
El arquitecto de información Lec 1 MOD 3
LECCIÓN 1 de 4
Introducción
La arquitectura de la información es una disciplina relativamente nueva encargada del estudio,

análisis, organización, disposición y estructuración de la información en espacios de información, y
de la selección y presentación de los datos en los sistemas de información interactivos (y no
interactivos). Decimos relativamente nueva, puesto que la empresa IBM utiliza este término desde
aproximadamente el año 1959, pero la verdad es que la expansión de esta disciplina es mucho más
reciente.
El arquitecto de información tiene grandes responsabilidades en los proyectos de diseño interactivo

en general, y en los proyectos de diseño web en particular.
En esta lectura, estudiaremos las tareas propias de un arquitecto de información desde el punto de
vista de un sitio web. Retomaremos el análisis del sitio web de la empresa cordobesa de autopartes
Record Diesel
Spare Parts, que comenzamos en lecturas anteriores
Figura 1: Sitio web de la empresa Record Diesel SpareParts
Figura 1. Sitio web de la empresa Record Diesel Spare Parts. Analizaremos las tareas propias de un
arquitecto de información desde el punto de vista de este sitio web como ejemplo.
LECCIÓN 2 de 4
¿Qué hace un arquitecto de información?
El arquitecto de información tiene un rol muy importante, sobre todo al comienzo de los proyectos
de diseño web, aunque su trabajo continúa aun cuando el sitio web ya está publicado, evaluando su
efectividad y realizando correcciones en caso de ser necesario.
Comencemos diciendo que la arquitectura de la información influye en la usabilidad de un sitio web.
La usabilidad es una característica de calidad que define la facilidad con la que se puede utilizar una
interfaz o un sitio web. Un sitio web que nadie puede usar fracasará, puesto que no cumple sus
objetivos más básicos.
Un arquitecto de información deberá trabajar en equipos multidisciplinarios, interactuando con

diseñadores gráficos, publicistas, periodistas, programadores, maquetadores, etc.
Deberá visualizar la forma en que los futuros usuarios buscarán la información, los procesos y las
interacciones, y traducirlos en acciones concretas.
Realizará tareas de organización, clasificación y ordenación de información, entendiendo los

objetivos del sitio web y de la empresa en general. También tiene la función de realizar evaluaciones
de métricas y tomar acciones correctivas.
Entre las funciones de un arquitecto de información se pueden destacar las siguientes:
Benchmarking
Es una comparativa con otros sitios webs con funcionalidades u objetivos similares. Básicamente,
consiste en adentrarse en el rubro de la empresa, estudiar los sitios webs de la competencia directa
e indirecta y entender lo que se está haciendo a nivel mundial en el área de negocios. Se obtienen
fortalezas y debilidades de los sitios webs analizados que guiarán el diseño del propio.
Por ejemplo, en el caso de la empresa Record Diesel Spare Parts que estamos analizando, se hizo
una comparativa con el sitio web de la empresa Lucas Diesel, una multinacional de origen inglés,
ícono de este sector de negocios, con 140 años de trayectoria en el mercado, fundada en 1860 por
Joseph Lucas en la ciudad de Birmingham, Reino Unido.
Muchas de sus fortalezas se tomaron como guía para la arquitectura de información del sitio de
Record Diesel Spare Parts.
Figura 2: Sitio web de Lucas Diesel
Fuente: captura de pantalla del sitio web de Lucas Diesel (https://lucasdiesel.com/?lang=es).
Figura 2. Sitio web de Lucas Diesel. Formó parte del benchmarking para el diseño del sitio web de
Record Diesel Spare Parts.
Mapas de contenido
Los mapas de contenido son esquemas gráficos que representan la organización de los contenidos
de un producto digital. Para llegar a este mapa, el arquitecto de información debe realizar un proceso
de análisis, selección, simplificación y organización de los contenidos, para finalmente llegar a una
estructura tipo árbol en la que los contenidos se ordenan en función de su jerarquía.
Veamos, a continuación, el mapa de contenido creado para el sitio web de Record Diesel Spare Parts
que estamos analizando:
Figura 3: Mapa de contenido del sitio web Record Diesel Spare Parts
Figura 3. Mapa de contenido del sitio web Record Diesel Spare Parts. Se realizó un mapa de
contenidos para organizar la información eficientemente.
Cardsorting (ordenación de tarjetas)

Esta actividad, que normalmente es dirigida por un arquitecto de información, consiste en realizar
un inventario de los contenidos de un sitio web e identificar las etiquetas que estructuran su
navegación. Estas etiquetas se colocan en tarjetas (típicamente, en las hojitas autoadhesivas tipo
Post-It). La actividad comienza agrupando a personas seleccionadas, acorde al público objetivo y/o
usuarios internos del sitio web, para luego pedirles que organicen las tarjetas de contenidos. De esta
forma, se toman en cuenta distintos tipos de usuarios y puntos de vista. También se deja abierta la
posibilidad de que los mismos participantes creen tarjetas que no existían al inicio. El resultado final
será un mapa de navegación.
Figura 4: Actividad de cardsorting
Figura 4. Actividad de cardsorting. Personas representativas de los futuros usuarios de un sitio web
organizan los contenidos según sus diferentes puntos de vista.
Diseño de mapas de navegación
Es un esquema que muestra los escenarios de comportamiento de los usuarios y cómo se moverán
entre los distintos contenidos y secciones.
Veamos el mapa de navegación que se elaboró para el sitio web bajo nuestro análisis:
Figura 5: Mapa de navegación del sitio web de Record Diesel Spare Parts
Figura 5. Mapa de navegación del sitio web de Record Diesel Spare Parts. El resultado del
cardsorting hecho previamente para este sitio.
El público objetivo de Record Diesel Spare Parts, mayormente propietarios de talleres mecánicos, no
está muy familiarizado con la Web y mucho menos con las compras online. Por lo tanto, se ha
buscado un esquema de navegación sin mucha profundidad. Todas las opciones necesarias para
realizar una compra están a la vista en la primera pantalla (Comprar, Abrir cuenta y Cerrar sesión).
Se necesitaba una navegación simple para atraer a estos usuarios a comprar a través de la página
web.
Diseñar los wireframes

Los wireframes son diagramas que buscan jerarquizar la estructura visual de las páginas webs.
Definen el orden de los contenidos, los sistemas de navegación y los puntos que determinarán las
interacciones. Solo muestran el esqueleto, es decir que no hay estilos tipográficos, colores o
imágenes. El objetivo es exponer la funcionalidad, comportamiento y jerarquía de los contenidos, no
el diseño ni los contenidos finales de la página. Es una gran herramienta para comunicar en un
idioma común a todos los miembros del equipo lo que se hará y lo que se dejará fuera del alcance
del proyecto. Incluso los clientes podrán comprender las ideas y sugerir cambios.
Veamos, a continuación, el wireframe generado para la página inicial del sitio web de Record Diesel
Spare Parts:
Figura 6: Wireframedel sitio web de Record Diesel Spare Parts
Figura 6. Wireframedel sitio web de Record Diesel Spare Parts. El esquema visual de la página de
inicio del sitio. Este esquema permitió, en lenguaje sencillo, comunicar las ideas tanto al equipo de
desarrollo del sitio web de Record como a la gerencia de la empresa.
Los elementos que podemos distinguir en el diagrama son:

imágenes;
1
botones (links);
2
textos;.
3
caja de texto para el ingreso de datos por parte de

4
usuario.
Sin pretender ser una lista exhaustiva, estas son, a grandes rasgos, las tareas habituales de un
arquitecto de información. Según la agencia de diseño, los pasos pueden variar en más o en menos,
ya que cada una implementa una metodología propia, pero, seguramente, estas tareas, de una u otra
manera, estarán presentes. El arquitecto de información articula luego su trabajo con el consultor
de usabilidad. Estos dos profesionales unen su trabajo teniendo siempre en cuenta los objetivos del
proyecto.
La interfaz gráfica de usuario (GUI) Lec 2 MOD 3
LECCIÓN 1 de 4
Introducción
En el pasado, las personas interactuaban con las máquinas a través de órdenes de texto. Se necesitaban
verdaderas proezas de memoria y mecanografía para poder realizar las tareas.
Por ejemplo, en el sistema operativo DOS (Disk Operating System o "Sistema Operativo de Disco") de
Microsoft, para copiar un archivo debíamos escribir el siguiente comando:
Copy c:\clientes\readme.txt d:\clientes
Esta orden permitiría, por ejemplo, copiar un archivo del disco duro a un pendrive. Esto en contraposición
al simple “copiar y pegar” que hacemos hoy a través del mouse.
Incluso podemos encontrar órdenes más complejas. Por ejemplo, en el sistema operativo Unix, para
eliminar líneas en blanco de un archivo, debíamos escribir:
Grep –v ^$ archivo.a > archivo.b
Los usuarios debían recordar de memoria estas notaciones e iniciar las acciones.
Figura 1: El sistema operativo DOS de Microsoft
Figura 1: El sistema operativo DOS de Microsoft. El usuario debía teclear este comando para copiar un
archivo.
Aunque hoy en día podemos decir que el desarrollo de este tipo de interfaces se ha frenado
espectacularmente, aún podemos encontrar ejemplos cotidianos de interacción de esta clase. Las
direcciones de las páginas webs son un buen ejemplo de comando de texto. Si bien en la mayoría de
los casos accedemos a los sitios webs a través de un link, muchas otras veces tecleamos sus
direcciones: https://www.recordparts.com.ar
Esta dirección no deja de ser un comando de texto con una notación bastante compleja que debemos
recordar. El protocolo, los puntos, las barras, generan una sintaxis lo suficientemente complicada.
Las interfaces gráficas de usuario (GUI, por “Graphical User Interface”) han ido reemplazando a las
interfaces de órdenes de texto.
La primera interfaz gráfica de usuario se le atribuye a la empresa Xerox. La estación de trabajo Xerox
Star, introducida en 1981, fue el primer sistema comercial en incluir una interfaz gráfica de usuario
basada en ventanas, íconos, carpetas y mouse. Este sistema fue el precursor de los posteriores
sistemas operativos de Apple y Microsoft.
En 1983, se lanza el Apple Lisa y en 1984, con una versión mejorada del entorno gráfico, el Apple
Macintosh. En 1985, Microsoft saca al mercado el Windows 1.0, un entorno gráfico para computadoras
PC IBM y compatibles, que se convertiría en el sistema operativo más utilizado del mundo.
La interfaz gráfica de usuario reemplaza los lenguajes de órdenes de texto. La compleja sintaxis da paso
a una manipulación directa, relativamente sencilla, de representaciones visuales de objetos y acciones.
Por ejemplo, los archivos podrían estar representados por íconos de una hojita de papel, y las carpetas,
por un ícono de una carpeta abierta. El proceso de copiar un archivo de una carpeta a otra se podría
llevar a cabo arrastrando el ícono del archivo de una carpeta a otra con el mouse.
Por supuesto, no deja de haber aspectos sintácticos en esta manipulación directa, tales como saber si
arrastrar el archivo a la carpeta, o la carpeta al archivo, pero la cantidad de sintaxis es pequeña en
comparación con los sistemas de órdenes de texto. Incluso formas sintácticas, como el doble clic,
presionar un botón del mouse o arrastrar objetos, parecen simples al lado de memorizar páginas de
comandos de texto.
El diseño de una interfaz gráfica de usuario implica una comprensión de la tarea que realizará el usuario.
Esto incluye el universo de objetos del mundo real con los que el usuario interactúa y las acciones que
realiza sobre ellos para llevar a cabo su trabajo.
Una vez que los diseñadores tienen conocimiento sobre los objetos y acciones que los usuarios realizan
en el mundo real, pueden crear las representaciones metafóricas de los objetos y las acciones en la
interfaz. Esta última debe hacer visible a los usuarios las acciones, de forma que estos puedan
descomponerlas en una serie de acciones intermedias, como abrir un menú, buscar una opción, abrir
un cuadro de diálogo, a través de una serie de pulsaciones de teclas y clics detallados. De esta manera,
puesto que los detalles sintácticos de la interfaz son mínimos, los usuarios que conocen los objetos y
acciones del mundo real para realizar la tarea pueden aprender a usar la interfaz de forma relativamente
sencilla y mucho más rápida que memorizar conjuntos de comandos de texto.
Figura 2: El sistema operativo Windows 10 de Microsoft
Fuente: captura de pantalla de sistema operativo Windows 10 de Microsoft (Gates y Allen, 1975).
Figura 2: El sistema operativo Windows 10 de Microsoft. El proceso de copiar un archivo se puede

realizar arrastrando el ícono de este de una carpeta a otra con el mouse.
En la figura 2, vemos la evolución del sistema operativo de Microsoft. Mediante su interfaz gráfica de
usuario, se puede realizar una copia de un archivo, arrastrando su ícono de una carpeta a otra, en
contraposición con el comando que había que escribir en el DOS que vemos en la figura 1.
Los videojuegos son, tal vez, el ejemplo por excelencia de una interfaz gráfica de usuario exitosa. Con
una gran ingeniería por detrás y un éxito comercial enorme, provocan una fuerte atracción a sus
usuarios, en contraposición a la ansiedad y resistencia que han mostrado muchos usuarios en otro tipo
de aplicaciones.
Los juegos ofrecen una interfaz que es visual y atractiva. Las acciones físicas, como presionar un botón
o mover el joystick, generan rápidas respuestas en la pantalla y la posibilidad de revertirlas de forma
intuitiva y sencilla.
Estos principios de los videojuegos deberían aplicarse a la interfaz de otros tipos de productos
interactivos.
A pesar del profundo reemplazo que las interfaces gráficas de usuario han hecho sobre las interfaces
de texto, estas no han muerto. Ya mencionamos el ejemplo de las direcciones de las páginas webs, pero
hay otras aplicaciones para ese tipo de interfaces aun en nuestros días.
Es que para usuarios expertos, las interfaces de texto pueden resultar más rápidas que las gráficas. Los
usuarios con habilidades para mecanografiar no ven con mucho agrado sacar las manos del teclado
para tener que hacer clic con el mouse o arrastrar elementos. Como ejemplos, podemos mencionar a
los profesionales de las tecnologías de la información, que conocen a la perfección la sintaxis de los
comandos de los sistemas operativos y prefieren escribirlos y obtener resultados inmediatos que tener
que hacer muchos clics en íconos, rellenar datos en cuadros de diálogo y navegar por menús y
pantallas.
Otro ejemplo interesante es el sistema Amadeus, creado en 1987 por una alianza estratégica entre las
aerolíneas Air France, Lufthansa, Iberia LAE y Scandinavian Airlines System para crear un suministrador
a nivel mundial de servicios de información. Se trata de un GDS (Global Distribution System o Sistema
de Distribución Global). Es ampliamente utilizado por las agencias de viajes, mediante el cual se
reservan y venden pasajes de avión, alquileres de autos y habitaciones de hoteles. El sistema hace de
intermediario entre las agencias de viajes y los proveedores de los servicios, que son las líneas aéreas,
las empresas de alquiler de autos y los hoteles.
Según la propia Amadeus, su interfaz basada en comandos de texto (que quienes se dedican a la
industria del turismo conocen a la perfección), ahorra entre un 50 y un 80 % de tiempo en el esfuerzo de
reservar hoteles, coches y vuelos. Estrictamente hablando, Amadeus hace una combinación de interfaz
gráfica de usuario e interfaz de comandos. Esta combinación ha resultado ser todo un éxito: Amadeus
ostenta el 40 % del mercado mundial de reservas y el 28 % de la industria del mercado mundial de
soluciones tecnológicas para la industria del viaje.
Figura 3: Pantalla de reservas del sistema Amadeus
Figura 3. Pantalla de reservas del sistema Amadeus. Mediante comandos de texto, las agencias de
viajes obtienen disponibilidades y realizan reservas de pasajes, autos y hoteles de manera muy
dinámica.
Figura 4: Extracto de una página del manual de uso del sistema Amadeus
Fuente: https://www.hosteltur.com/lat/134000_montevideo-curso-operador-
sabreamadeus.html
Figura 4. Extracto de una página del manual de uso del sistema Amadeus. En esta página del manual,
se enseña a los usuarios los comandos de texto para obtener disponibilidades y horarios de recursos
turísticos.
Record Diesel Spare Parts: análisis de su interfaz
gráfica de usuario
Retomemos el sitio web de la empresa autopartista cordobesa Record Diesel Spare Parts. En esta
lectura, analizaremos los elementos de su interfaz gráfica.
Más allá de sus direcciones en formato de texto, podríamos decir que la interfaz de las páginas webs es
enteramente gráfica.
En el caso del sitio web bajo nuestro análisis, se han seleccionado íconos muy explícitos, tomados del
mundo real de los usuarios objetivo. Recordemos que este sitio web apunta a usuarios relacionados al
mundo automotor, en general, con poca experiencia en tecnología informática y con poca cultura de
compras en Internet. Atraerlos y convencerlos de realizar pedidos y compras a través de la Web no es
tarea fácil, por lo que se ha buscado, en el diseño de la interfaz, que encuentren elementos que les sean
familiares en su mundo real. La interfaz es explícita, muy “honesta”, no esconde nada. Todos los
elementos están a la mano y muy visibles. Para realizar las acciones, no hay que desplegar extensos
menús ni buscar demasiado.
Figura 5: La interfaz gráfica de usuario del sitio web de Record Diesel Spare
Parts
(https://recordparts.com.ar/index.php).
Figura 5. La interfaz gráfica de usuario del sitio web de Record Diesel Spare Parts. Se utilizan íconos
que resultan familiares para el público objetivo.
Como puede observarse en la figura 5, se utilizaron íconos de piezas de motor y equipos muy explícitos
que a las personas objetivo de este sitio web les resultan absolutamente familiares.
En el botón “Comprar” de la barra de navegación principal, se optó por incluir un ícono de carrito de
compras que, al día de hoy, ya podríamos afirmar que se ha convertido en el símbolo universal de las
compras por Internet.
Figura 6: La sección “Catálogos” del sitio web de Record Diesel Spare Parts
Fuente: captura de pantalla de la sección “Catálogos” del sitio web de Record Diesel Spare
Parts (https://recordparts.com.ar/recordparts-inyectores-common-rail-bombas-diesel.php).
Figura 6: La sección “Catálogos” del sitio web de Record Diesel Spare Parts. Se utilizaron íconos que
asemejan catálogos físicos de productos.
En la figura 6, podemos observar la sección “Catálogos” del sitio web de Record. Se utilizaron aquí, para
acceder a los catálogos digitales de productos, íconos que se asemejan a los catálogos físicos que los
usuarios han estado acostumbrados a recibir durante años. De esta manera, los identifican
inmediatamente, ya que incluso se han respetado los diseños de las tapas reales.
Figura 7: Sección de pago del sitio web de Record Diesel Spare Parts
Fuente: captura de pantalla de la sección de pago del sitio web de Record Diesel Spare Parts
(https://recordparts.com.ar/procesa_finalizar_pedido.php).
Figura 7. Sección de pago del sitio web de Record Diesel Spare Parts. Se utiliza una serie de íconos,
buscando inspirar confianza en la transacción monetaria.
En la figura 7, vemos el proceso final de una compra a través del sitio web de Record Diesel Spare Parts.
El ícono del candado, que implica seguridad en la transacción y el logo de una plataforma de pagos muy
conocida (Mercado Pago), que incluye las manos tomándose, buscan indicarle al usuario que el pago
que está por realizar no implica ningún riesgo de seguridad. Todo esto se decide teniendo en cuenta
que los usuarios objetivo de este sitio web, en general, son algo reticentes a realizar compras por
Internet y no están acostumbrados a comprar así los insumos para sus talleres mecánicos.
Las interfaces basadas en comandos de texto son obsoletas.
Verdadero
Falso
SUBMIT
¿Qué característica de las GUI es la que hace que este tipo de interfaz sea más
sencilla de aprender que las basadas en texto?
La minimización de sintaxis.
La utilización de la memoria visual.
Es más atractiva para los usuarios.
Permite realizar las acciones con un mouse.
SUBMIT
LECCIÓN 3 de 4
Usabilidad Lec 3 MOD 3
LECCIÓN 1 de 3
Introducción
Jakob Nielsen es un ingeniero dinamarqués, cuya trayectoria se inició en 1997, cuando escribió dos
artículos sobre cómo escribir para la Web. Los dos artículos fueron: “¡Sea breve! (escribir para la Web)”
y “Cómo leen los usuarios en la Web”.
Este ingeniero es considerado el padre de la “usabilidad”. Él la define como un atributo de calidad que
mide lo fáciles de usar que son las interfaces.
Según Nielsen, un sitio web debería cumplir las siguientes características:
entendible;
novedoso;
comprensible;
inteligente; atractivo.
El objetivo de la usabilidad es lograr que el usuario encuentre lo que busca en el menor tiempo posible.
El concepto de usabilidad proviene del diseño centrado en el usuario. Un error muy común de los
diseñadores es querer imponer sus propios criterios sin pensar en los usuarios.
La usabilidad es un concepto que va más allá de la noción imprecisa y subjetiva de “agradable para el
usuario”. Se basa en un conocimiento profundo de las diversas comunidades de usuarios y de las tareas
que estos realizan. La usabilidad se basa en servir a los usuarios. Una buena interfaz es aquella que se
vuelve transparente para el usuario, permitiéndole concentrarse en sus tareas. Minimizar el esfuerzo de
los usuarios implica un enorme trabajo para los diseñadores. El estándar US Military Standard for
Human Engineering Design Criteria de 1999 establece estos propósitos para la usabilidad:
lograr el rendimiento exigido por el personal de operación, control y mantenimiento;
minimizar los requisitos de conocimientos y habilidades y de personal, y el tiempo
de formación; lograr la fiabilidad exigida en las combinaciones personal-
equipamiento/software; fomentar la estandarización del diseño dentro del sistema y
entre diferentes sistemas.
El punto de partida de la usabilidad es determinar las necesidades del usuario y las tareas que debe
realizar. Las tareas que los usuarios realizan habitualmente serán fáciles de determinar, pero las
ocasionales y excepcionales serán más difíciles de identificar.
El objetivo de este análisis es proporcionar una cantidad adecuada de funcionalidades. Un error muy
común de los diseñadores es proporcionar una excesiva cantidad de funciones, lo cual abruma y
confunde a los usuarios.
Otro objetivo de la usabilidad es asegurar la fiabilidad. Una experiencia negativa por parte de los
usuarios, con datos erróneos o resultados inesperados, acabará con la buena voluntad de ellos para
utilizar el sistema.
La seguridad, privacidad e integridad de los datos son otro punto a atender. Debe proporcionarse
protección contra accesos no autorizados a los datos, la eliminación por error y la manipulación
maliciosa de estos.
Un tercer conjunto de objetivos es considerar el contexto y estimular la estandarización, integración,
consistencia y portabilidad apropiadas.
La estandarización se refiere a mantener una serie de características comunes entre la interfaz de varias
aplicaciones, lo cual les permite a los usuarios reutilizar sus conocimientos sobre una aplicación en
otras, mejorando así la curva de aprendizaje.
La consistencia se refiere a secuencias de acciones, colores, tipografías y demás elementos de diseño

que componen una interfaz. Un diseño inconsistente frustra al usuario. Imaginemos una aplicación en
la que para guardar hay que hacer clic en un ícono de un diskette ubicado en el vértice superior izquierdo
de la pantalla, y luego, en otra parte de la aplicación, para guardar hay que hacer clic en un botón con el
texto “Guardar” ubicado en la parte inferior derecha de la pantalla. El usuario se sentirá perdido por esta
falta de consistencia.
La portabilidad es un concepto que implica la posibilidad de compartir interfaces en múltiples entornos,

un objetivo fundamental en el caso de las páginas webs.
La ISO (International Organization for Standarization u Organización Internacional para la

Estandarización) ha publicado docenas de estándares sobre usabilidad, incluyendo la ISO 9241:
“Requisitos ergonómicos para trabajos de oficina con pantallas de visualización de datos”, el cual se
centra en objetivos como eficacia, eficiencia y satisfacción. Esto nos da algunas pautas sobre cómo
medir la usabilidad:
Tiempo de aprendizaje: ¿cuánto tiempo les lleva a los usuarios aprender a hacer las tareas
relevantes dentro de la interfaz?
Velocidad de realización de tareas: ¿cuánto tiempo tardan los usuarios en realizar cada tarea?
Porcentaje de errores de los usuarios: ¿cuántos y qué clase de errores cometen los usuarios?
Retención con el paso del tiempo: una vez que los usuarios han aprendido a utilizar la interfaz, ¿por
cuánto tiempo retienen esos conocimientos?
Satisfacción subjetiva: ¿les gustó a los usuarios utilizar la interfaz?
Los objetivos del proyecto pueden hacer que una medida de usabilidad cobre más importancia que
otras. En un sitio web de comercio online (como Amazon, por ejemplo), la satisfacción subjetiva puede
ser primordial, mientras que en un sistema de facturación la velocidad de las tareas puede ser lo más
importante.
La usabilidad es una característica deseable en todo tipo de productos interactivos, como sistemas
industriales y comerciales, aplicaciones de entretenimiento, domésticas y de oficina, etc.
Un problema con la usabilidad es la infinita cantidad de diferentes habilidades, motivaciones,

personalidades, culturas, estilos de trabajo y capacidades humanas. Conocer las diferencias físicas,
intelectuales y de personalidad de los distintos usuarios es vital para lograr una interfaz aceptable para
todos ellos.
Hablando de un sitio web, normalmente, este recibirá visitas de todo tipo de usuarios, incluyendo
personas con discapacidades, personas mayores y jóvenes. Usuarios principiantes, ocasionales y
expertos. Esta enorme diversidad nos recuerda lo equivocado que puede estar el concepto de “usuario
medio”.
La usabilidad debería atender la variación en capacidades físicas y lugares de trabajo, diversidad de

capacidades cognitivas y perceptivas, diferencias de personalidad, diversidad cultural e internacional,
discapacidades, edad, etc.
Análisis de la usabilidad del sitio web de Record
Diesel Spare Parts
En esta lectura, analizaremos la usabilidad del sitio web de la autopartista cordobesa Record Diesel
Spare Parts que hemos trabajado a lo largo de las anteriores lecturas.
Por supuesto, para evaluar correctamente la usabilidad se deberían realizar pruebas con comunidades
de usuarios, cosa que en la realidad nunca se hizo. Pero al menos analizaremos este sitio web desde
las medidas de usabilidad mencionadas anteriormente.
Record Diesel Spare Parts es una empresa que vende autopartes para motores diésel, herramientas y
equipos para la reparación de estos. Sus clientes son mayormente talleres mecánicos que necesitan
estos insumos para realizar sus trabajos. En palabras de los propios dueños de Record, es una industria
tradicionalista y no muy afín a las tecnologías digitales. La compra de productos por Internet está lejos
de ser una costumbre.
Record desea comenzar a cambiar esta historia con su sitio web publicando sus catálogos de productos
en forma digital en lugar de impresa, como lo hizo durante años, y permitiendo la compra de los
productos de forma online a través del sitio web. Atraer este tipo de usuarios al sitio no es sencillo y
mucho menos convencerlos de realizar sus compras en él.
Por lo tanto, el diseño ha prestado mucha atención a la usabilidad (aunque esta aún no ha sido
rigurosamente medida). Ante la menor dificultad, duda o inconveniente, es muy probable que estos
usuarios huyan de la plataforma, por lo que se ha buscado un diseño muy simple con todo a la vista y
a la mano. Estos usuarios no gastarán tiempo en buscar, investigar ni aprender cómo se hacen las
tareas. Lo digital no es lo suyo, y si sienten que la herramienta no les hace ganar tiempo, la desecharán
sin piedad.
Figura 1: La tienda online del sitio de Record Diesel Spare Parts

Figura 1. La tienda online del sitio de Record Diesel Spare Parts. Desde aquí los usuarios pueden realizar
pedidos de autopartes, herramientas y equipos para la reparación de motores diésel.
La interacción más compleja en este sitio se da en su sección “Comprar”. Para minimizar la sintaxis, se
ha creado un proceso basado en el funcionamiento de una gran mayoría de sitios webs. Si el usuario
alguna vez compró zapatos, un producto electrónico, un libro o lo que sea por Internet, podrá extrapolar
esa experiencia a la compra de repuestos en la tienda de Record. Se ha buscado que el proceso de
compra sea directo y rápido. Los productos se pueden filtrar por categoría (cabezales, herramientas,
inyectores, etc.) y por marca. Además, se pueden hacer búsquedas por palabra clave.
Existe un selector de cantidad y un botón “Agregar” (se utiliza la metáfora del carrito de compras, típica
del ecommerce). Al intentar agregar el primer producto, si el usuario no se ha logueado en el sistema,
se le presenta el formulario de login, donde con su e-mail y su contraseña puede ingresar al sistema. El
caso más complejo es el usuario que compra por primera vez, ya que no posee cuenta de usuario. En
ese mismo formulario, está el link para crear una cuenta de usuario y para recuperar la contraseña en
caso de olvido.
Además, hay un botón en la barra de navegación principal para crear la cuenta de usuario. Todo debe
estar a la mano para este tipo de usuario, que abandonará el sitio ante la menor dificultad.
Figura 2: Formulario de login del sitio web de Record Diesel Spare Parts
Fuente: captura de pantalla de formulario de login del sitio web de Record Diesel Spare Parts
(https://recordparts.com.ar/login.php).
Figura 2. Formulario de login del sitio web de Record Diesel Spare Parts. Si el usuario no tiene cuenta,
puede generarla desde un link allí mismo. También puede recuperar su contraseña en caso de haberla
olvidado.
Una vez dentro del sistema, se le presenta al usuario su carrito de compras con los productos agregados
hasta el momento, el total a pagar y un ícono de papelera para quitar algún producto en caso de ser
necesario. Allí mismo encuentra botones para continuar agregando más productos, enviar el pedido a
Record y obtener una copia impresa de este (estos usuarios aún valoran el papel más que cualquier otra
cosa).
Figura 3: Carrito de compras del sitio web de Record Diesel Spare Parts
Fuente: captura de pantalla de carrito de compras del sitio web de Record Diesel Spare Parts
Figura 3. Carrito de compras del sitio web de Record Diesel Spare Parts. Desde esta sección, el usuario
puede ver los productos que lleva seleccionados hasta el momento y el total a pagar.
Al hacer clic en el botón “Enviar pedido”, aparece un formulario para ingresar los datos de envío. El
formulario ya está rellenado (los datos fueron solicitados al momento de crear la cuenta de usuario),
pero le da la posibilidad al usuario de solicitar el envío a un domicilio diferente en esta ocasión. Se
confirman estos datos mediante un clic y el pedido es inmediatamente enviado a Record para que
comience su procesamiento. Paralelamente, se le muestra al usuario un botón para que realice el pago
a través de una conocida plataforma que asegura la seguridad y confidencialidad de la transacción.
Record no almacena información financiera de sus usuarios, cumpliendo así con los requisitos de
seguridad exigidos por los criterios de usabilidad.
Dos elementos son fundamentales para los usuarios del sitio web de Record: precio (Record es muy
competitivo) y rapidez en el envío, ya que el procedimiento de trabajo de los clientes de Record,
normalmente, consiste en recibir un vehículo, diagnosticar la falla y generar una lista de los repuestos
necesarios para realizar la reparación. El trabajo queda parado hasta que los repuestos llegan al taller.
Es por esto que el pedido es remitido de inmediato a Record y se reciben alertas en las cuentas de e-
mail de todos los responsables de procesar el pedido.
Resumiendo, este diseño intenta cumplir los requisitos de usabilidad de las siguientes maneras:
Facilidad de aprendizaje: al usar un procedimiento de compra ampliamente utilizado en Internet, se
busca aprovechar cualquier mínimo conocimiento que los usuarios posean de antemano.
De todas maneras, el proceso es limpio y sencillo.
Velocidad de realización de tareas: con cinco clics (literalmente), el usuario puede seleccionar y
pagar un producto, el cual será enviado a su taller por Record. No hay distracciones, como
“productos sugeridos”, ofertas ni nada que desvíe la atención del usuario del proceso de
compra propiamente dicho.
Porcentaje de errores de los usuarios: se busca minimizar la posibilidad de cometer errores,

presentando pocas opciones en cada pantalla. El diseño es consistente en cuanto a
colores y posición de los elementos, y guía al usuario en un proceso de pocos pasos.
Retención con el paso del tiempo: puesto que el proceso de compra se ha inspirado en el proceso
realizado por una gran cantidad de sitios (del rubro y de otros), será difícil que los usuarios
olviden cómo realizar una compra, ya que es un procedimiento totalmente estandarizado
y difundido.
Satisfacción subjetiva: se intentó crear un diseño atractivo con el uso de mucho color y fotografías
de alta calidad de piezas, equipos y herramientas del rubro. Las opciones no están
escondidas, están todas a la vista y los procesos son sencillos de realizar.
La usabilidad implica:
Un diseño centrado en el usuario.
Un diseño impuesto por su diseñador.
Un diseño centrado en los objetivos comerciales.
Un diseño basado en interfaz gráfica de usuario.
SUBMIT
Desde el punto de vista de la usabilidad, lo más conveniente sería:
Presentarle al usuario la cantidad justa de funcionalidades.
Presentarle al usuario una gran cantidad de funcionalidades.
Presentarle al usuario pocas funcionalidades.
SUBMIT
La experiencia de usuario (UX) Lec 4 MOD 3
LECCIÓN 1 de 5
Introducción
El prestigioso estudio de diseño UX Torresburriel de Zaragoza, España, expone en su sitio web el trabajo
realizado para Besepa Technologies SL: “Besepa contrató a Torresburriel Estudio para establecer una
mejor experiencia de usuario para su sitio web de servicios financieros” (“Mejorar el
diseño como elemento de innovación en fintech”, s. f.,
https://www.torresburriel.com/casos-de-exito/diseno-ux/).
Besepa es una startup de fintech (se denomina fintech a las empresas de la industria financiera que
aplican nuevas tecnologías a actividades financieras y de inversión).
Conectada con los mayores bancos españoles, los servicios de Besepa incluyen gestión de mandatos,
presentación directa a bancos, recurrencia, soporte para SEPA1, notificaciones de errores e integración
basada en la nube. La plataforma de Besepa ayuda a reducir el tiempo dedicado a la generación y
gestión de remesas, especialmente en el seguimiento de rechazos y devoluciones.
Veamos el proceso seguido por el estudio Torresburriel para lograr la mejora en la experiencia de
usuario de Besepa Technologies SL:
Los consumidores se han acostumbrado a plataformas con elevada usabilidad en

todos los aspectos de [sus] vidas, y esperan que el sector financiero, una industria
inherentemente compleja, haga lo mismo. Algunos de los desafíos que nuestros
expertos abordaron:
Promover una sensación de seguridad y comodidad, sabiendo que sus operaciones
financieras son seguras. La transparencia fomenta un sentido de confianza entre la
plataforma y el usuario.
Investigar formas de mejorar el proceso de registro

(incorporación), acelerando los tiempos de uso de la plataforma.
Hacer que el sitio web sea más atractivo visualmente, en todos los dispositivos.
El atractivo esencial de aplicaciones fintech como Besepa es que los usuarios puedan
realizar sus operaciones financieras con facilidad, pero es prudente recordar que las
transacciones monetarias suponen decisiones de mucho calado. Por ese motivo, un
objetivo principal era fortalecer la confianza del usuario final en la plataforma Besepa
y API.
Se trata, además, de un dominio muy intensivo en conocimiento, por lo que Besepa

requería de un enfoque más conceptual que una agencia tradicional de diseño.
Trabajamos con Besepa para comprender los objetivos de negocio y las motivaciones
y necesidades de usuarios del sitio. Durante esta fase, llevamos a cabo un card sorting
para lograr una mejor comprensión y agrupación de las opciones de navegación.
Al mismo tiempo, desarrollamos prototipos de papel para echar a andar. Estos

prototipos en papel los transformamos en wireframes de baja fidelidad, que
evolucionaron rápidamente en diseños de pantalla de alta fidelidad, para dispositivos
móviles y de escritorio.
Con este trabajo completado, abordamos el diseño visual. Para ayudar a simplificar el
proceso de comunicación, agregamos ilustraciones a todas las características de la
plataforma. Esto hizo que las diferentes opciones del producto sean más fáciles de
entender. El uso de gráficos y colores vibrantes mejora la experiencia, haciendo que un
tema árido, como la gestión de remesas, sea menos aburrido. Con imágenes atractivas,
contenidos más cuidados, testimonios y soporte en línea, ofrecemos una experiencia
más ajustada a las expectativas del usuario.
Nuestro trabajo condujo a la creación de una forma nueva de explicar procesos
financieros complejos. Como resultado, trasladamos la complejidad del servicio a un
segundo plano, proporcionando una interfaz intuitiva y sencilla para brindar una mejor
experiencia de usuario.
Resultados:
1. Hacer que el sitio web de Besepa fuera más atractivo visualmente. Esto es
especialmente desafiante para una plataforma de fintech, no solo porque los
contenidos deben ser claros y fáciles de entender, sino también atractivos para facilitar
la adopción de la plataforma.
2. Reestructurar el diseño del sitio web como un impulsor de la innovación. El

minimalismo ayuda a estructurar la información y reducir la carga cognitiva necesaria
para comprender las funcionalidades que Besepa ofrece.
3. Mejorar el proceso de registro, consiguiendo acelerar significativamente el uso de la

plataforma y la generación de ingresos. Al aprender algo nuevo, un exceso de
información puede ser abrumador, lo que hace que la mayoría de los usuarios
abandonen antes de comenzar. (“Mejorar el diseño como elemento de innovación en
fintech”, s. f., https://www.torresburriel.com/casos-de-exito/diseno-ux/).
Figura 1: El sitio web de la fintech Besepa Technologies SL diseñado por Torresburriel Estudio
Figura 1. El sitio web de la fintech Besepa Technologies SL diseñado por Torresburriel Estudio. El estudio
español de diseño UX Torresburriel lo presenta en su sitio web como un caso de éxito.
1 SEPA: Single Euro Payments Area es una zona en la que consumidores y empresas pueden realizar cobros y
pagos, dentro y fuera de las fronteras nacionales, en las mismas condiciones básicas y con los mismos derechos
y obligaciones, independientemente del lugar en que se encuentren. Componen la SEPA los 27 Estados miembros
de la Unión Europea, junto con Islandia, Liechtenstein, Noruega, Suiza y Mónaco.
LECCIÓN 2 de 5
¿Qué es exactamente la UX?
La UX (User Experience o Experiencia de Usuario) es un término que se ha comenzado a utilizar mucho

en el mundo del diseño web. Sin embargo, no es un concepto tan nuevo. Ya en el año 1940, la empresa
automotriz Toyota aplicaba sus conceptos.
Es que la experiencia de usuario puede aplicarse por fuera de los productos digitales, esto es, a
productos físicos o a servicios.
La experiencia de usuario podría definirse como el grado de satisfacción que siente un usuario al
interactuar con un producto, servicio o dispositivo. Podría aplicarse a un producto digital, como el sitio
web de Besepa, a uno físico, como el control remoto de un televisor y hasta al servicio que recibe un
turista en un hotel.
Es un concepto muy amplio que abarca todos los temas que hemos tratado en las tres lecturas
anteriores: la arquitectura de la información, el diseño de la interfaz gráfica de usuario y la usabilidad,
contribuyen a una buena experiencia de usuario.
Lograr una buena experiencia de usuario no es tarea fácil, puesto que incluso influyen cuestiones
subjetivas. Una experiencia depende totalmente de la persona que la viva. Tal vez para un adolescente
sea una gran experiencia ingresar a un sitio web para comprar un par de zapatillas deportivas y que,
mientras realiza la compra, suene de fondo música electrónica y su proceso sea interrumpido por videos
de deportistas haciendo proezas, y puede ser que para otra persona esto sea totalmente insoportable.
Además, el diseño UX no debería verse como una tarea con un principio y un final; más bien, debería
verse como una tarea cíclica, que evoluciona junto con el producto y produce una mejora continua. La
experiencia de usuario busca la máxima satisfacción del consumidor.
El concepto es tan amplio que se usa la “metáfora del paraguas de UX” para comprender todo lo que
abarca:
Figura 2: El denominado “paraguas UX”

Figura 2. El denominado “paraguas UX”. Se usa para resumir todo lo que el concepto de experiencia de
usuario abarca.
Visual design (diseño visual): hemos hablado, en la lectura 2 de este módulo, del diseño de la
interfaz gráfica de usuario. Por supuesto, no se puede esperar una buena experiencia de
usuario sin una buena interfaz. Asimismo, el aspecto visual de un sitio web puede influir
en su
éxito o fracaso, por lo que es un elemento crucial. Vemos cómo el estudio Torresburriel
hizo que el sitio web de Besepa sea más atractivo visualmente en todos los dispositivos
para contribuir a una mejor experiencia de usuario.
Information architecture (arquitectura de la información): de igual modo, nunca obtendremos una
experiencia de usuario positiva sin un estudio, análisis, organización, disposición y

estructuración de la información, tal como estudiamos en la lectura 1 de este módulo. En
el caso presentado, Torresburriel aplicó técnicas clásicas de arquitectura de la
información, como card sorting y la elaboración de wireframes para lograr una mejor
comprensión y agrupación de las opciones de navegación del sitio de Besepa.
Interaction design (diseño de la interacción): investiga, propone y evalúa el desempeño de los
productos en relación a sus usuarios. Para que el producto sea útil y usable, se debe
diseñar desde el punto de vista del usuario, no desde el punto de vista técnico ni artístico.
Este fue un punto complejo en el caso de Besepa debido a que su industria es naturalmente
compleja, al punto de que el estudio Torresburriel tuvo que trabajar junto con Besepa para
comprender objetivos de negocio y las necesidades de los usuarios del sitio.
Usability (usabilidad): como estudiamos en la lectura 3 de este módulo, la usabilidad busca
minimizar el esfuerzo del usuario para conseguir sus objetivos con el producto. Rápido
aprendizaje y velocidad en la realización de tareas serán importantes aportes para lograr
una buena experiencia de usuario. Un sitio fintech, como el de Besepa, se beneficia mucho
de los conceptos de la usabilidad, ya que permite simplificar procesos que por naturaleza
son complejos. Torresburriel utilizó un diseño minimalista para ayudar a estructurar la
información y reducir la carga cognitiva necesaria para comprender las funcionalidades.
User research (investigación de usuario): es fundamental realizar un diseño centrado en el usuario.
Para esto, deberemos conocer en profundidad todos los posibles tipos de usuarios de
nuestro producto. Esto puede lograrse mediante estudios de usabilidad, entrevistas,
encuestas, mapas de empatía, etc. En el caso de Besepa, se trabajó para conocer las
motivaciones y necesidades de los usuarios del sitio como una parte central del proceso
de diseño.
Content strategy (estrategia de contenidos): recopilar, planificar, desarrollar y organizar los
contenidos estratégicamente será otro pilar para lograr una buena experiencia de usuario,
presentando contenidos que satisfagan las necesidades de nuestros usuarios. Vemos en
el caso presentado cómo Torresburriel añadió contenidos más cuidados, claros, fáciles de
entender y más ajustados a las expectativas de los usuarios.
Queda claro que la UX es un trabajo de equipo y de mucho consenso. La empatía parece ser la palabra
clave:
Se trata de ver el producto desde el punto de vista del usuario.
La experiencia de usuario (UX) es…
El grado de satisfacción que siente un usuario al interactuar con un producto.
El grado de facilidad de uso y rapidez de aprendizaje de un producto.
La organización, disposición y estructuración de la información de un

producto.
El correcto diseño de la interfaz gráfica de usuario de un producto.
El grado de atractivo visual de un producto.
SUBMIT
La experiencia de usuario con respecto a la usabilidad:
La experiencia de usuario comprende a la usabilidad.
La experiencia de usuario y la usabilidad explican lo mismo.
La experiencia de usuario y la usabilidad son absolutamente

antagónicos.
La usabilidad comprende a la experiencia de usuario.
SUBMIT
Área de la industria del diseño interactivo: Casos de
éxito Lec 1 MOD 4
Siempre que aparece una tecnología disruptiva, se generan grandes oportunidades de negocio. El
diseño interactivo y para nuevos medios, no es la excepción, y varios de los que supieron verlo desde el
principio están hoy entre las personas más millonarias del mundo.
Repasaremos a continuación, emprendimientos que desde las distintas áreas de esta industria lograron
un éxito formidable.
LECCIÓN 1 de 3
Distintas áreas
Desde el área del diseño Web, son muchas las historias de éxito, una de las más increíbles es, tal vez,
la del gigante del comercio electrónico: Amazon.com
Jeff Preston Bezos, nacido como Jeffrey Preston Jorgensen (Bezos es el apellido de su padre adoptivo),
es el hombre más millonario del planeta desde 2017. Su fortuna supera los 100 mil millones de dólares.
Bezos creó la compañía en 1994, primero con el nombre de “Cadabra”, luego de “Relentless” y
finalmente, en 1995, de “Amazon”. La historia dice que todo comenzó cuando Bezos, consultó un sitio
de Internet que aseguraba que internet estaba creciendo un 2.300% anual. Desde ese preciso instante
se dedicó a investigar qué podía venderse por Internet. Investigó las empresas de venta por catálogo,
buscando un área donde Internet pudiera aportar algún valor agregado, ya que esto era imprescindible
para convencer a los clientes de que abandonen sus hábitos de compra y adquieran unos nuevos:
precios más bajos, una selección de productos más amplia o una compra más cómoda, algo debía
aportar la venta online. Finalmente, se decidió por los libros, que no se vendían bien por catálogo, puesto
que para presentar una buena oferta se requerían miles y hasta millones de títulos, haciendo
inmanejable el tamaño de los catálogos. Era, por tanto, un producto ideal para vender por Internet.
Bezos, se tomó dos días para decidir si continuar en su trabajo (bien pagado), o arriesgarse en el mundo
de la Web. A la hora de decidirse empleó lo que luego llamaría "marco de minimización del
arrepentimiento": se imaginó con 80 años dando un repaso a su vida, y se dio cuenta de que nunca se
arrepentiría de haber renunciado a un buen salario o de haber fracasado; al contrario, como buen
emprendedor, se sentiría orgulloso de haberlo intentado. Su padre, Miguel Bezos, fue su primer inversor
y, aunque no tenía idea de qué era Internet, le entregó a Jeff los 300.000 dólares que tenía ahorrados
para su jubilación. Así, en 1994, en Seattle, Jeff montó la empresa, como toda buena historia de éxito
de la Web, en un garaje. Jeff Bezos le apostó a este nuevo medio. ¿El resultado? La empresa más valiosa
del mundo (2020), con un valor de más de 400 mil millones de dólares, vende 10.000 dólares por
segundo y en su balance del primer trimestre de 2020, registra ingresos por 73.000 millones de dólares.
Hoy Amazon vende, además de libros, discos, películas, videojuegos, electrónica, ropa, instrumentos
musicales, accesorios de cocina, juguetes, joyería, relojes, suministros industriales y científicos,
herramientas y básicamente todo lo que se pueda imaginar.
En 2020 es considerada la empresa más valiosa del mundo.
Desde el área de los videojuegos, repasaremos la increíble historia de Trip Hawkins, el visionario de los
videojuegos. De niño amaba los juegos de mesa, y se fascinaba por los deportivos: había cartas con
los nombres de los jugadores y se los iba moviendo por el tablero. Sin embargo, le costaba trabajo
encontrar amigos para jugar, ya que sólo armar el tablero requería esfuerzo. Cuando vio por primera vez
una computadora, tuvo la visión de que esta sería la solución al problema. Pero también tuvo otra visión:
que las imágenes de esas pantallas podrían ser tan realistas como las de la televisión.
En 1975, siendo muy joven, estimó que se necesitarían unos siete años para que las computadoras
lleguen masivamente a los hogares, haciendo viable el diseño de videojuegos como profesión. En los
70 solo los gobiernos, el ejército y las grandes corporaciones usaban computadoras. Para 1982 (su
fecha clave), trabajaba como director de marketing para Apple, y renunció para fundar su propia
empresa de videojuegos: Electronic Arts. Comenzó desarrollando juegos de estrategia y militares y a
principio de los 90 comenzó con los simuladores deportivos. En 1993 sacó el “FIFA International
Soccer”, el primer simulador deportivo con nombres reales de los jugadores y de indumentarias de
equipo, lo que le dio mucha popularidad, que prácticamente acabó con todos sus competidores.
Aunque dejó su propia empresa en 1994, sembró las bases para su éxito y es considerado una de las
personas más influyentes en la historia de los videojuegos, un visionario y un pionero de esta industria.
En la actualidad, Electronic Arts está considerada entre las ocho empresas desarrolladoras de
videojuegos más importantes del mundo. FIFA 20, la última versión (2020) del videojuego de simulación
de fútbol de Electronic Arts, cuenta con un nivel de realismo asombroso, apoyado, además de por su
tecnología, por licencias con los clubes reales de fútbol, que le permite utilizar los nombres reales de
los jugadores, su figura y colores de las camisetas. También, la utilización de las voces reales de
comentaristas famosos del deporte de cada país.
Esta versión ha generado 1500 millones de dólares de ingresos y ha terminado de consagrar a FIFA
como el videojuego más jugado de la historia. Es considerado un visionario y pionero de la industria de
los videojuegos.
Desde el área de la ilustración, no podemos dejar de mencionar a Michael Kutsche. Este alemán,
radicado en Los Ángeles, está considerado como uno de los mejores ilustradores del mundo. Su trabajo
se puede describir como una representación sorprendentemente realista de realidades paralelas,
poblado de personajes extraños que recuerdan a películas y cómics.
Su enfoque único de creación de personajes imaginarios lo ha llevado a convertirse en el diseñador de

personajes de películas tan taquilleras como la "Alicia en el país de las maravillas" de Tim Burton, "John
Carter of Mars", dirigida por Andrew Stanton, "The Jungle Book", dirigida por Jon Favreau, "Oz the Great
and Powerful ", dirigida por Sam Raimi y" Thor", dirigida por Kenneth Branagh, entre otras.
Dado que su trabajo de diseño de personajes juega un papel crucial en el éxito de estas películas, se ha
convertido en uno de los artistas más solicitados en la industria cinematográfica actual. (Fuente:
https://enkaustikos.blogspot.com/2019/06/michael-kutsche-diseno-depersonajes.html)
Figura 3: Algunos personajes creados por el talentoso ilustrador Michael Kutsche
Su trabajo ha sido crucial para el éxito de varias películas taquilleras de Hollywood.

LECCIÓN 2 de 3
El diseño interactivo como negocio: Áreas de la

industria
El diseño interactivo, se presenta como un negocio desde diversas áreas, todas relacionadas al diseño
para nuevos medios. La masificación de las computadoras personales y la introducción generalizada
de conexiones de Internet de alta velocidad han revolucionado las profesiones relacionadas al diseño,
y en especial al diseño gráfico. Los nuevos medios han generado nuevos negocios en carreras como
diseño Web, cine, televisión, video, videojuegos, animación y diseño de exhibiciones y eventos. Los
sectores que más utilizan el diseño gráfico para nuevos medios pueden agruparse en tres categorías
principales: Imagen en movimiento, Web e Internet y diseño de impresión.
Las capacidades y habilidades necesarias para entrar en esta profesión, se pueden resumir en las
siguientes:
Elegancia visual, para captar la atención de la gente.
Ser detallista.
Habilidad para pensar tanto lateral como analíticamente.

Ser observador.
Técnicas de investigación.
Conocer el proceso creativo.
Habilidades de comunicación.
Conocimientos de informática.
Capacidad para los negocios y conocimientos administrativos.
Estrategias empresariales.
Tolerancia a la presión.
Disposición para trabajar muchas horas y en horarios poco habituales.
Capacidad para trabajar en equipo.
Capacidad para cumplir plazos de entrega.
Algunas cualidades personales también son deseables:
Ambición.
Curiosidad.
Carisma.
Confidencialidad.
Determinación.
Discreción y diplomacia.
Energía.
Entusiasmo.
Imaginación.
Iniciativa.
Talento.
Ingenio y humor.
Una de las áreas más importantes del diseño interactivo en la actualidad, es el diseño Web.
En pleno auge, hay una demanda mundial enorme de parte de todo tipo de organizaciones para el
desarrollo de sitios y aplicaciones Web. Contar con un sitio Web es hoy en día básico para cualquier
negocio o empresa. Es una forma, bastante económica, de aparecer en el motor de búsqueda más
importante del mundo: Google. Aparecer en este índice es imprescindible para las empresas de hoy. Es
que no aparecer en Google es prácticamente como no existir. Google (y los demás motores de
búsqueda), se está transformando en la manera en que los clientes se informan sobre los productos y
servicios que desean adquirir.
La demanda de diseñadores Web supera la oferta, y la verdad es que, teniendo mínimos conocimientos
sobre HTML y CSS ya se puede conseguir un trabajo formal. A su vez, es una profesión que se presta
perfectamente para desarrollarse de forma freelance, y no es difícil conseguir clientes de distintas
partes del mundo. Es una de las profesiones del momento.
El comercio electrónico, que se desarrolla principalmente a través de páginas Web, ha explotado a nivel
mundial, generando ventas e ingresos millonarios. Según todos los analistas, la industria brilla por
donde se la mire y el futuro es muy prometedor. De hecho, como mencionamos al inicio, la empresa
más valiosa del mundo en la actualidad (2020) es Amazon, un gigante del comercio electrónico.
A lo largo de los módulos anteriores, hemos estudiado las habilidades requeridas para dedicarse al
diseño Web: El diseño de interfaces, la usabilidad, la accesibilidad, la arquitectura de la información, la
evaluación de la utilidad son todas áreas en las que deberemos formarnos si queremos formar parte de
un equipo de diseño Web. Estudiamos también, la importancia del código en las páginas Web y la
necesidad de tener nociones mínimas sobre él para cualquier profesional, sea del área que sea, que
quiera participar de esta área de la industria.
Figura 5: Ofertas de empleo relacionadas al desarrollo Web
La demanda de diseñadores y desarrolladores Web, es muy amplia a nivel mundial en la actualidad.
Otra área de la industria del diseño interactivo que destaca por sus enormes ventas, es la de los
videojuegos. Esta área ya genera ingresos semejantes al cine. El diseño interactivo tiene un enorme
potencial en la industria del entretenimiento en general.
El rol de un diseñador de videojuegos no está del todo claro, y aunque algunas instituciones la dictan
como carrera formal, es notable como algunas lo hacen desde un punto de vista artístico y otras desde
un punto de vista técnico. Es que el rol del diseñador de videojuegos aún es confuso. De todas maneras,
está claro que esta industria requiere habilidades en disciplinas tan diversas como dibujo, consciencia
del espacio, animación 2D y 3D, modelado, inteligencia artificial, técnicas de narración, escritura y video
digital.
Las plataformas sobre las que se pueden crear videojuegos, son diversas, pasando por las
computadoras de escritorio, las consolas (como PlayStation o Xbox) y últimamente los aparatos
portátiles y con conexión permanente a Internet como teléfonos inteligentes y tabletas. Estos últimos,
han dado pie para la creación de una nueva generación de juegos donde la calidad gráfica no es lo
central si no la interacción social a través de ellos.
Hay todo tipo de empresas de videojuegos, desde pequeñas con unos pocos empleados hasta
gigantescas, como la que estudiamos en el caso del inicio:
Electronic Arts cuenta con una plantilla de más de 5.000 empleados y sus ingresos superan los mil
millones de dólares.
Las posibilidades de trabajo para los ilustradores y animadores han crecido como nunca gracias a la
masiva penetración de Internet. Estos profesionales pueden ahora conseguir clientes de todas partes
del mundo, y aplicar sus conocimientos a nuevos medios como la Web y los videojuegos. La animación
es un mundo complejo e implica una gran cantidad de trabajo para lograr composiciones verosímiles.
Los profesionales de esta área pueden trabajar en documentales, videos educativos, publicidades
televisivas y hasta las películas de Hollywood, como Michael Kutsche, el ilustrador presentado al
comienzo de esta lectura, que ha creado personajes para películas tan famosas y económicamente
exitosas como “Alicia en el país de las maravillas” de Tim Burton.
Las habilidades que se requieren para trabajar en esta área de la industria, en general son dibujo de
seres vivos, personajes, modelado, dibujo técnico y artístico, narración, guión y storyboarding.
Otra área de negocios interesante del diseño interactivo son los gráficos en movimiento, como
cabeceras de películas, trailers, aperturas de canales de televisión, secuencias para páginas Web, etc.
Las computadoras y los programas de autoría multimedia han facilitado enormemente esta tarea, que
antes requería complicadas técnicas para lograr resultados de calidad. Las habilidades que
comúnmente se necesitan para trabajar en esta área son: dibujo, conocimiento de los medios basados
en el tiempo, lenguaje y narrativa cinematográficos.
Por último, mencionaremos al diseño de eventos y exhibiciones o diseño de experiencias, como otra
área con gran potencial de negocios para los diseñadores interactivos.
Este tipo de diseño pretende crear experiencias más allá de los simples productos y servicios y conectar
emocionalmente con el cliente o el usuario, provocando reacciones físicas y emocionales. En esta
disciplina, se debe tener en cuenta por dónde se moverá el usuario, a dónde va a mirar y qué es lo que
va a hacer a medida que se mueva por la exposición o tienda. Los elementos expuestos suelen
reaccionar a los movimientos, los gestos o la voz de los usuarios, brindando una experiencia
completamente interactiva. Los gráficos, combinados con el sonido y otros elementos provocan una
experiencia inmersiva.
El diseño de experiencias es muy amplio, veamos a continuación un video de las exposiciones digitales
del Museo de Tokio, un universo sin fronteras, con piezas de arte que se mueven por sí mismas, para
terminar de comprender el concepto:
El museo tokiota del colectivo japonés teamLab, conocido por sus espectaculares exposiciones de arte
digital, se prepara para abrir sus puertas y ofrecer a sus visitantes numerosas experiencias interactivas
cargadas de arte y tecnología sin fronteras.
¿Qué área del diseño interactivo está en pleno auge y ha permitido el
desarrollo de una de las empresas más valiosas del mundo?
El diseño Web.
La ilustración y la animación.
Los gráficos en movimiento.
SUBMIT
¿Cuál de las siguientes habilidades es muy importante en el área del
diseño
Web?
El dibujo de personajes vivos.
Animación 3D.
La arquitectura de información.
Conocimiento de los medios basados en el tiempo.
SUBMIT
La prestación de servicios profesionales
independientes en Diseño Interactivo Lec 2 MOD 4
LECCIÓN 1 de 3
Introducción
¿Hasta dónde se puede llegar trabajando de forma independiente? La verdad es que se puede llegar
muy lejos al punto de tener clientes como Apple, Adidas y Coca-Cola.
Conozcamos el caso de Alex Trochut:
Alex es nieto del famoso tipógrafo Joan Trochut Blanchard, considerado figura clave de las artes
gráficas de España del siglo XX. Alex nació en 1981 en Barcelona, es diseñador gráfico, ilustrador y
tipógrafo. Se graduó en diseño gráfico en la Escuela Universitaria de Diseño e Ingeniería de
Barcelona. Su vida profesional comenzó en Berlín, trabajando para los estudios Moniteurs y Xplicit.
De regreso en Barcelona, trabajó en el estudio de diseño Toormix, y más tarde en el de Vasava. Desde
2007 trabaja de forma independiente, y no le ha ido mal: ha realizado proyectos para Apple, Arctic
Monkeys, Nike, The Rolling Stones, Adidas, Coca-Cola, British Airways, Pepsi, Starbucks y The
Guardian.
En el portfolio de su sitio Web (https://alextrochut.com/), Alex muestra trabajos de 3D, fotografía,

animación, letras 3D, ilustración, editorial, publicidad, portadas y pósteres para discos y eventos
musicales y tipografía. Su obra se caracteriza por la importancia que otorga a la tipografía,
convirtiéndola en un elemento de expresión gráfica, así como la variedad y cambios de técnica en
cada proyecto, manteniendo en todos ellos como rasgos comunes la fusión entre geometría y formas
fluidas. Alex ha recibido múltiples premios y reconocimientos por su trabajo, como por ejemplo la
58a nominación a los premios Grammy Mejor empaque, entre muchos otros.
Multipremiado diseñador freelance español.
LECCIÓN 2 de 3
Trabajar de forma freelance como diseñador para

nuevos medios
El diseño para nuevos medios, es una de esas profesiones que se prestan muy bien para el trabajo
de forma independiente o freelance. Trabajar de forma independiente, tiene sus ventajas y
desventajas, y para decidir trabajar de esta manera, hay que asegurarse de contar o, al menos
desarrollar, ciertas cualidades y capacidades. La comunicación con la gente es muy importante para
un trabajador freelance. Deben mantener una red de contactos con compañeros de la universidad
(una de las ventajas de estudiar un curso de grado en diseño), compañeros de trabajo y la gente con
la que han trabajado, ya que de esta red suelen provenir contratos de trabajo. Deben tener sus
propios sitios Web y actualizarlos al igual que sus redes sociales, para asegurar que su trabajo se
visibilice. Una buena forma de crear un primer sitio Web, es ver sitios de otros diseñadores, para
adaptar ideas. Estos sitios Web deberían tener archivos de tamaño reducido, a nadie le gustan las
páginas cargadas con enormes imágenes o videos que tardan eternidades en descargarse. Los
“libros de contactos” de los directorios artísticos, los portfolios online y los sitios Web de recursos
de diseño, son ideales también para publicar los trabajos de los diseñadores de nuevos medios. Es
importante que los portfolios online sean pequeños y manejables, y no deberían incluir tipos de
trabajos que en realidad no le gustan hacer al diseñador. Lo que sí deberían incluir, son las
habilidades de manejo de software con que cuenta el diseñador. Otro elemento fundamental es el
currículum, porque lo representará como profesional. En el currículum, se deberían incluir cosas
como todos los detalles de su formación académica y laboral, premios, condecoraciones y
exposiciones, conocimientos y habilidades en informática y lenguas, cargos de responsabilidad que
ha ocupado y la URL de su Web personal. Otras pautas aconsejables para el currículum es hacerlo
adaptado al estudio o empresa a la que se apunte, escribirlo en la computadora y redactarlo de forma
clara, concisa y legible.
En cuanto a habilidades informáticas, lo más conveniente es que el diseñador sepa desempeñarse

tanto en plataforma PC como MAC, ya que será muy probable encontrarse con ambas durante la vida
laboral.
Se debe tener en cuenta que la actividad de promocionar y conseguir contratos de trabajo, restará
tiempo al trabajo de diseño. Por supuesto, existe la alternativa de trabajar con un representante, el
cual se quedará con parte de nuestros honorarios, pero a la vez, los representantes suelen conseguir
mejores contratos de trabajo que el propio diseñador. Las agencias de contratación también son
útiles para conseguir trabajos en empresas, durante breves periodos de tiempo.
Otra opción son las bolsas de trabajo en línea, en las que los diseñadores freelance pueden postular
para distintos proyectos que estén publicados en dicha plataforma. Las empresas publican
proyectos, con un presupuesto y los freelancers pueden ofertar. Si ambas partes se ponen de
acuerdo, se concreta el trabajo. Un ejemplo de este tipo de plataformas es
https://www.freelancer.es/
Figura 2: www.freelancer.es
Es una bolsa de trabajo online.

Un punto a tener en cuenta es que, los clientes, suelen presuponer que el tiempo y los costos del
diseño para nuevos medios, será muy inferior al del diseño tradicional para medios impresos, pero
la realidad es que, por ejemplo, el diseño de un sitio Web o de una exposición pueden tomar meses
de trabajo de equipos enteros.
Los conocimientos de los diseñadores de nuevos medios son portátiles y transferibles, lo que les
permite trabajar con otros profesionales, formar parte de un equipo y trabajar para un proyecto en el
que sus contribuciones son una pequeña parte de un todo mucho más amplio.
Asociarse con ex compañeros de estudio es también una gran opción, sobre todo si tienen
especialidades diversas, ya que, de esta manera, pueden prestar una gama de servicios más amplia
que si trabajaran individualmente. Para trabajar de esta manera es imprescindible crear un plan de
negocios y firmar un contrato de sociedad, de esta manera, si las cosas no salen bien o hay una
disputa todos estarán protegidos legalmente.
Como casi cualquier emprendimiento, se debe tener claro que al comienzo será un proceso lento, se
deberá estar dispuesto a trabajar por un tiempo inclusive a pérdida. La paciencia es una
característica de los trabajadores freelance. Otras características deseables en los trabajadores
freelance es la constancia, la disciplina, la capacidad para atenerse a plazos de entrega, la capacidad
de multitarea para trabajar en varios proyectos a la vez y para hacer multiplicidad de tareas que
pueden incluso no tener que ver con el diseño propiamente dicho. Se deberá estar dispuesto a
trabajar muchas horas (más que un empleado tradicional). Se debe tener en cuenta que el flujo de
trabajo, en diseño, es rápido y complejo, los plazos son acotados y muchas veces se deben realizar
ajustes y modificaciones, a pedido de los clientes, de último momento lo cual suele implicar noches
sin dormir. La velocidad es especialmente importante cuando se trata de anuncios, por ejemplo.
Como freelancer, se tiene más incertidumbre económica, ya que no todos los meses se gana lo
mismo. Habrá meses con mucha demanda y otros con poca, el dinero deberá administrarse
correctamente para cubrir esos baches. No se tendrán las mismas prestaciones de desempleo y
seguridad social que los trabajadores en relación de dependencia.
Sin embargo, esta forma de trabajo presenta muchas ventajas y la verdad es que, en general, ellas
son muy apreciadas por los profesionales del diseño. Trabajando de forma freelance, es más fácil
conciliar la vida laboral con la familiar o personal o con los estudios, debido a que los horarios son
más flexibles. Otra ventaja, es que se puede seleccionar con quién trabajar y con quién no. Las
ventajas más importantes son, tal vez, que en esta forma de trabajar hay más libertad, lo cual suele
favorecer la creatividad y se puede trabajar en lo que realmente nos gusta. La inestabilidad
económica, suele compensarse con ingresos totales más altos, comparados con un trabajador en
relación de dependencia.
Hay enormes y talentosísimos diseñadores freelance, tal es el caso de Alex Trochut, que
presentamos al inicio de esta lectura y los hay que obtienen ingresos más que interesantes. Es más
que posible si se cuenta con las cualidades requeridas y el talento.
Algo interesante que podemos aprender del caso de Alex, es que en sus inicios trabajó como
empleado dentro de estudios de diseño prestigiosos, tanto en Berlín como en Barcelona para luego
establecerse como diseñador independiente. Esta es una buena opción, para ganar experiencia y
comprender el negocio, de esta manera, luego el proceso como trabajador independiente no será tan
cuesta arriba.
Mencionemos, por último, que las estadísticas muestran un número cada vez mayor de trabajadores
que ejercen sus profesiones de manera freelance en la Argentina. Las condiciones económicas de
nuestro país (sobre todo con respecto al valor del dólar), hacen muy conveniente trabajar para
clientes de otros países. Las estadísticas muestran también interesantes incrementos en los
ingresos promedio de estos trabajadores.
Veamos, por ejemplo, estos datos estadísticos, facilitados por dos de las bolsas de trabajo online
más importantes: Freelance y Workana (datos de 2019) y publicados por el sitio especializado en
economía digital https://www.iproup.com/
Figura 3: Estadísticas de trabajo freelance en la Argentina
Hay una tendencia creciente tanto en cantidad de trabajadores como en el promedio de ingresos.
¿Qué clase de portfolio online es aconsejable preparar para el diseñador
de nuevos medios?
Uno exhaustivo mostrando la totalidad de los trabajos

realizados por el diseñador, aún aquellos que no le gustan
o no le interesaría volver a realizar.
Uno pequeño y manejable con el tipo de trabajos que le

interesan o gustan al diseñador.
Uno completo y con archivos de alta calidad para que se

puedan apreciar correctamente los trabajos realizados.
SUBMIT
¿Cómo diseñador de nuevos medios independiente, qué nivel de ingresos
se pueden esperar?
Se puede esperar un nivel de ingresos por debajo del de un

trabajador en relación de dependencia.
Se puede esperar un nivel de ingresos muy superior al de un

trabajador en relación de dependencia.
Se puede esperar un nivel de ingresos muy variable, desde

inferior a un trabajador en relación de dependencia, hasta
muy por encima.
SUBMIT
E-valuados: Nacido en la Siglo 21 Lec 3 MOD 4
LECCIÓN 1 de 3
Introducción
Estudiantes millennials y centennials desafían a los docentes a incorporar tecnología, especialmente

los celulares, de manera dinámica en el aula. En este contexto nació E-valuados.
María Agustina Ibañez (22) y Alejandro Parise (33) desarrollaron E-valuados movilizados por una
inquietud: los emprendedores se dieron cuenta de que los estudiantes no siempre son sinceros cuando
un docente realiza la típica pregunta “¿entendieron?”. La respuesta unánime suele ser que sí, pero los
exámenes terminan indicando lo contrario, y el problema es que en ese momento ya es tarde.
E-valuados aparece, entonces, como una solución a esa problemática, que incorpora al celular en las
aulas como un aliado estratégico del docente. Brinda un análisis en tiempo real de los contenidos que
son trabajados por los estudiantes en cada clase, detectando cuáles no fueron incorporados de la
manera deseada para poder ser reforzados en ese mismo momento. María Agustina es estudiante de
las Licenciaturas de Diseño Gráfico y Publicidad, mientras que Alejandro estudia Ingeniería en Software,
ambos en la Universidad Siglo 21. Se conocieron en la edición de Startup Weekend 2015 en la ciudad
de Córdoba y, a partir de allí, comenzaron a trabajar juntos en E-valuados. Luego, se sumaron al equipo
Henrry Vallenilla (37), Ingeniero en Sistemas; y Emilio Correa (22), Ingeniero Industrial.
La startup está siendo fondeada por ANR como Empresa Madrina, Fonsoft Empresa Joven y
Emprendium. Además, están trabajando para la Universidad Siglo 21 en el desarrollo de Aplicados 21,
una aplicación que parte de E-valuados y pretende alcanzar a toda su población estudiantil, presencial
y a distancia.
“Contar con clientes como la Universidad Siglo 21 y otras instituciones educativas de nivel secundario,
grado y posgrado es muy importante para nosotros en esta etapa de escalabilidad”.
Es una startup creada por alumnos de la Siglo 21.
Figura 2: Ejemplo del tipo de información que brinda E-valuados a los docentes
Permite detectar problemas y tomar medidas correctivas antes de los exámenes.
Fuente: https://e-valuados.com/e-track/
LECCIÓN 2 de 3
La generación de emprendimientos en Diseño

Interactivo
Tal como vemos en el caso de E-valuados, muchos emprendimientos surgen de compañeros

universitarios, que son amigos y que comparten intereses comunes ¡hasta Google nació así!
La combinación de disciplinas, la juventud y la libertad de crear algo nuevo, promueve la creatividad.

Este tipo de empresas retan continuamente lo establecido, generan nuevas ideas e innovaciones.
Estudiantes de distintas carreras pueden combinar sus conocimientos para generar nuevos productos
o servicios, como en E-valuados, que se combinaron estudiantes de sistemas, ingeniería industrial y
diseño gráfico y dieron como resultado una interesante aplicación. Además, al asociarse con
compañeros, se podrá prestar una mayor variedad de servicios que si se trabaja en soledad. En el ámbito
del diseño de nuevos medios, la colaboración es esencial. La colaboración se basa en la confianza que
se tienen los integrantes del equipo, de manera que el diseñador tiene la sensación de que se está
opinando sobre sus ideas, pero sin sentirse criticado. El éxito de muchos proyectos, depende
justamente de una buena y estrecha colaboración entre los miembros del equipo, hace que las ideas
avancen más rápidamente.
Asociarse con compañeros de estudio, puede hacer más fácil establecerse en esta profesión.
Sin embargo, debemos ser conscientes de que, en algunos ámbitos, casi que la única opción es trabajar
en una empresa mediana o grande. Por ejemplo, en la posproducción de películas o videos, la inversión
necesaria para adquirir el equipamiento, normalmente sobrepasará lo posible para una empresa nueva
o muy pequeña. No todas las áreas de esta industria se prestan para realizarlas desde pequeñas
empresas, pero muchas otras sí, como el diseño Web o de videojuegos, por ejemplo. En general, las
empresas pequeñas tienen como principal ventaja el poder ofrecer servicios más creativos e
innovadores.
Tal como dijimos en el caso del trabajo independiente, también puede resultar muy útil antes de
emprender una empresa propia, trabajar para una empresa grande y establecida. De esta manera, se
podrán conocer los cargos necesarios para que una empresa funcione, se conocerán detalles acerca
del negocio y luego todo será más sencillo a la hora de generar el emprendimiento propio.
Emprender, no es tarea fácil, pero a la vez es muy gratificante cuando se logran resultados.
Los pasos para generar una nueva empresa, varían según el tipo de empresa, el mercado, el punto de
vista de los emprendedores, sus personalidad, cultura, etc. Pero a grandes rasgos podemos resumirlos
en los siguientes:
Tener y desarrollar una idea
Este es el primer y más esencial paso, crear algo que satisfaga alguna necesidad, aun cuando los
potenciales clientes ni siquiera sean conscientes de esta necesidad. Se trata de detectar una
necesidad y generar un producto o servicio que la cubra. El caso de E-valuados, es un típico ejemplo
de esto. Los estudiantes creadores de esta startup detectaron una necesidad tanto de sus
compañeros como de sus docentes. Tal vez ellos ni siquiera eran conscientes de esta necesidad,
pero aun así ellos supieron verla y crear una aplicación que la satisfaga. Básicamente cubrieron un
problema de comunicación entre alumnos y docentes. Detectaron que por vergüenza o por lo que
sea, los alumnos no eran totalmente sinceros con los docentes. Manifestando entender temas a un
nivel muy por encima del real, luego esto se veía en los exámenes cuando ya era tarde. Mediante
esta aplicación los docentes pueden tener mejor información sobre el verdadero desempeño de sus
alumnos y tomar medidas más efectivas y más a tiempo y además convirtieron a los teléfonos
móviles dentro del aula de “enemigos” a “amigos”. Por supuesto, además de tener una idea, luego
hay que desarrollarla. Son muchas las personas que ven un producto o servicio y piensan ¡eso lo
inventé yo! Pero el problema es que nunca desarrollaron la idea y ven pasar la oportunidad a manos
de otras personas.
Formar un equipo
Buscar profesionales con los que uno se sienta a gusto, es fundamental y,

tal como venimos desarrollando en esta lectura, los compañeros de la
universidad son una gran fuente de contactos. Como la historia de E-
valuados hay cientos, muchas empresas e innovaciones han surgido de la
colaboración entre compañeros o ex compañeros de universidad. Como
mencionamos al principio, inclusive el gigantesco Google nació en la
Universidad de Stanford. Larry Page se estaba planteando estudiar en
Stanford y Sergey Brin, que ya estudiaba allí, fue el encargado de
mostrarle el campus…
Definir el modelo de negocio
Establece el propósito, proceso de negocio, mercado objetivo, las ofertas,

estrategias, infraestructura, estructuras organizacionales, prácticas de
comercio, procesos operacionales y las políticas. Identificar los
potenciales clientes es parte esencial de esta etapa.
Buscar financiación
En el caso de E-valuados, vemos varias de las posibilidades para encontrar financiamiento que hay
en nuestro país:
ANR: Aportes No Reembolsables. Es un programa del gobierno para soluciones innovadoras

de la economía del conocimiento como como software y servicios informáticos y digitales,
producción y postproducción audiovisual, biotecnología, nanotecnología, industria
aeroespacial y satelital e ingeniería. Los fondos pueden destinarse a:
Activos fijos: maquinarias, equipos y mobiliario.
Activos intangibles: Patentes, licencias y marcas.
Capital de trabajo: insumos, materia prima y mano de obra tercerizada, servicios
profesionales de asesoramiento técnico. Gastos de certificaciones y habilitaciones.
Emprendium: Se trata de una de las iniciativas de la línea emprendedorismo del programa

“jóvenes del centenario”, un programa del gobierno de la provincia de Córdoba, que en
articulación con el Ministerio de Industria, Trabajo y Minería se otorga subsidios a la creación
de emprendimientos y empresas de base tecnológica. La iniciativa está orientada a
estudiantes de los últimos años de las universidades públicas y privadas de toda la Provincia,
que tengan entre 18 y 35 años y que acrediten regularidad en la matrícula y analítico con el
70% por ciento de la currícula aprobada. Se entregan subsidios, de carácter no reembolsable.
FONSOFT: Fondo Fiduciario de Promoción de la Industria del Software. Es un fondo destinado

a la promoción del fortalecimiento de las actividades de desarrollo de software. Brinda apoyo
para la finalización de carreras de grado, la generación de nuevos emprendimientos y el
fortalecimiento de PyMES, productoras de bienes y servicios pertenecientes al sector de
Tecnología de la Información y las Telecomunicaciones.
¿Qué elemento puede considerarse fundamental, entre los miembros de
un equipo, al generar un emprendimiento de diseño interactivo?
La amistad entre ellos.
Que sean de la misma carrera.
La colaboración entre ellos.
Que tengan la misma especialidad.
SUBMIT
¿Cuál de las siguientes opciones elegiría para obtener financiación para
una startup de base tecnológica?
El aporte de todos los miembros del equipo que forma la startup.
Un crédito bancario en una entidad privada.
Un programa gubernamental de fondos no

reembolsables.
SUBMIT
El desarrollo web, en alza como nunca antes
Lec 4 MOD 4
LECCIÓN 1 de 5
Introducción
Hace algunas semanas, Stack Overflow ha hecho pública su encuesta anual 2016 con programadores
y expertos en desarrollo web, donde han participado 50 mil desarrolladores de 170 países, dejándonos
obtener una visión bastante aproximada del momento actual de la industria del desarrollo de software
a nivel mundial.
Esta semana, KeepCoding, centro de excelencia educativa especializado en formación de

desarrolladores de élite, ha compartido los datos de su encuesta anual de tendencias del mercado
laboral para programadores en España. ¿Y qué datos relevantes se pueden sacar de ambos estudios?
El año pasado Telefónica y Google lamentaban no encontrar talento capacitado para incorporarse a su
equipo. Del otro lado del océano, la empresa de Recursos Humanos Glassdoor reporta que las
tecnologías de desarrollo se ubican entre los empleos mejor remunerados de EEUU, junto al sector
financiero y salud. Una tendencia que se ha mantenido ya 3 años.
En resumidas cuentas, el escenario mundial ahora mismo implica que casi un millón de puestos de
trabajo en tecnología se quedan vacíos. La demanda es brutal, el recurso deseado es finito, y para
aquellos que manejen con soltura las tecnologías más demandadas, NO falta trabajo.
En el estudio hecho por KeepCoding han participado más de 500 desarrolladores de habla hispana, y
entre los resultados más destacados (e inspiradores) encontramos que sólo el 10% está desempleado
en este momento. Entre los que han manifestado haber estado en paro en los últimos 12 meses, más
del 60% ha encontrado un nuevo trabajo entre 3 y 6 meses, lo que hace evidente la celeridad del mercado
a la hora de recolocar sus profesionales. También relevante, hablamos de profesionales que en
promedio tienen alrededor de 30 años y 3 años de experiencia en desarrollo de productos de software.
También en la encuesta de KeepCoding, casi el 70% de los participantes manifiestan trabajar

actualmente en aplicaciones web. En esta misma línea son los datos del estudio de Stack Overflow,
donde el lenguaje de programación más popular ha sido JavaScript, y el conjunto de tecnologías más
utilizado y mejor pagado lo forman: MongoDB, Express, Angular y Node.
A este conjunto de tecnologías o stack se le llama MEAN, todas utilizan JavaScript como lenguaje, y con
ellas es posible desarrollar todos los componentes de aplicaciones web potentes y mantenibles:
Frontend, Backend y Base de Datos.
LECCIÓN 2 de 5
Posibilidades, promesas y realidades de negocio en

torno al Diseño Interactivo
Sin rodeos, el diseño interactivo es un gran negocio. La interacción vuelve más interesante cualquier
producto: una película, un cuento para niños, etc. Está probado que el involucrar al usuario es muy
efectivo para su satisfacción. Como prueba, basta observar que cuando se comenzó a comercializar la
nueva consola de videojuegos PlayStation 5 de Sony, el producto se agotó en todas las tiendas de
Argentina en cuatro horas. Dentro del diseño interactivo, hay áreas que sobresalen más, por ejemplo, el
diseño de videojuegos, la industria del entretenimiento en general y, el tema que nos compete en esta
lectura: el diseño Web.
La nota anterior, es del año 2016 y, como vimos, hablaba de un alza en la industria del diseño Web. Si en
ese texto, reemplazáramos 2016 por el año actual, todo seguiría siendo cierto. El crecimiento de esta
industria se ha mantenido ininterrumpidamente y el futuro es muy prometedor. La Web, lo virtual y el
comercio electrónico han explotado. La demanda de páginas y aplicaciones Web es impresionante, y
las vacantes siguen sin poder cubrirse a nivel mundial. Desde los pequeños negocios, los
emprendimientos unipersonales, los profesionales hasta las grandes corporaciones necesitan un sitio
Web para tener presencia en Internet. En algún momento, se pensó que las redes sociales podrían
reemplazar a los sitios Web, cosa que no ha sucedido y ambos canales se complementan. Son
diferentes, de naturaleza diferente, y se usan para comunicar distintas cosas. En general, podríamos
decir que las redes sociales se utilizan para una comunicación más informal con los clientes, mientras
que los sitios Web, toman el papel de comunicar de forma más formal, lo oficial. Las redes sociales
tienden a ser caóticas, mientras que los sitios Web son organizados y estructurados. Además, brindan
una sensación de seguridad, que las redes sociales difícilmente podrán brindar. Por todo esto, la
demanda de sitios Web se ha mantenido a lo largo de los años.
El diseño Web, y en general, el diseño para nuevos medios, se basa en conocimientos técnicos, sin
embargo, los diseñadores más exitosos son aquellos que consiguen definir un estilo propio. Para
diseñar páginas Web, se requerirán mínimamente tres profesionales: un diseñador gráfico que cree la
interfaz y el aspecto visual en general, un maquetador Web, que mediante HTML y CSS convierta el
diseño gráfico en una página Web, y un programador, que le otorgue funcionalidades a esa página Web.
Estos conocimientos técnicos podrían incluso estar reunidos en una misma persona. Por supuesto,
como ya hemos estudiado a lo largo de todos los módulos, en un proyecto de envergadura, se requerirán
muchos más profesionales, como arquitectos de información, consultores en usabilidad y experiencia
de usuario, publicistas, redactores, etc. Un diseñador gráfico con conocimientos de diseño de interfaces
y usabilidad ya podrá incorporarse a esta prometedora industria, al igual que cualquier persona que
cuente al menos con conocimientos en HTML y CSS. No se requiere demasiado tiempo ni capacidades
intelectuales de otro mundo para entrar a esta industria. Por supuesto, el éxito dependerá de las
capacidades técnicas y, como se dijo anteriormente, de conseguir un estilo propio, algo que nos
destaque del resto. El diseño Web, es una actividad muy relacionada a la tecnología, pero no debemos
perder de vista que esta tecnología, no debe ser un fin en sí misma, sino un medio para lograr un objetivo
de diseño, de comunicación. Es el cumplimiento de ese objetivo, lo que realmente nos llevará al éxito en
esta industria.
Dentro del diseño Web, también hay sub-áreas. Además del clásico diseño de páginas Web, también hay
muchísima demanda de, por ejemplo, WordPress. Se trata de un sistema de gestión de contenidos (CMS,
por Content Management System). Tal como su nombre lo indica, su especialidad es gestionar
contenidos sobre bases de datos y, sobre esta infraestructura, se monta una plantilla, que le da el
aspecto de página Web. Hay una enorme demanda de diseñadores Web para diseñar y crear plantillas
para WordPress, modificar o adaptar existentes, etc. Se estima que el 33% de todas las Webs del mundo,
utilizan WordPress.
Otra jugosa área de negocios, es el desarrollo de aplicaciones para Android (de Google) y para IOS (de
Apple). Es posible desarrollar un tipo de aplicación para estos sistemas operativos, llamadas “híbridas”,
en las cuales tanto su parte visual, como su lógica están desarrolladas en HTML, CSS y JavaScript,
lenguajes normalmente dominados por los diseñadores Web.
También, es posible desarrollar aplicaciones de escritorio con HTML, CSS y JavaScript, para sistemas
operativos como Windows (de Microsoft), MAC OS (de Apple) y Linux. Gracias a una plataforma llamada
Electron.js es posible utilizar estos lenguajes Web para el desarrollo de aplicaciones de escritorio. Como
vemos, existen muchas posibilidades laborales y de negocio en torno a la Web y al diseño interactivo en
general. De hecho, ya hemos mencionado en lecturas anteriores, que varias empresas basadas en la
Web se han convertido en algunas de las más valiosas del mundo, como Amazon. En Argentina, tenemos
el ejemplo de Mercado Libre, que ya es la empresa más valiosa del país y una de las cuatro que valen
más de mil millones de dólares. Estas compañías emplean a cientos o miles de diseñadores Web, ya
que permanentemente crean y diseñan nuevas páginas y aplicaciones Web. Tanto Amazon, como
Mercado Libre, pertenecen a un rubro que, como ya hemos mencionado, ha sufrido un crecimiento
exponencial. El comercio electrónico, es visto como una de las industrias más prometedoras a corto,
mediano y largo plazo.
Figura 1: El éxito de Mercado Libre ha llamado la atención de la prensa
Esta empresa basada en la Web y que emplea a cientos de diseñadores interactivos, se ha convertido
en la más valiosa de Argentina.
Figura 2: Evolución del valor de las acciones de Mercado Libre
El increíble crecimiento del valor de sus acciones entre 2017 y 2020.

Como podemos observar, muchas empresas basadas en la Web, y que hacen un uso intensivo de
productos interactivos, están en pleno auge. La industria del diseño interactivo, es prometedora, brilla
por donde se la mire, y en particular, el diseño Web, es un área con gran demanda y muchas posibilidades
laborales.
Los diseñadores Web sólo pueden dedicarse a la creación de páginas

Web.
Verdadero.
Falso.
SUBMIT
La industria del diseño Web:
Está en pleno descenso.
Está en pleno crecimiento.
Ha quedado obsoleta frente a las redes sociales.
SUBMIT

Diseño Interactivo

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diseño Interactivo

Cargado por

Copyright:

Formatos disponibles

Dispositivos móviles: el concepto de mobile first

Fuente: elaboración propia.

Fuente: elaboración propia.

La filosofía mobile first consiste en diseñar los sitios webs y

En su sitio web, Luke Wroblewski dice:

Zalando: un caso de éxito de mobile first

Figura 3: Sitio web de Zalando

Fuente: Captura de pantalla del sitio web de Zalando (https://www.zalando.es/).

Figura 4: La app de Zalando

Fuente: Captura de pantalla de app de Zalando (https://www.zalando.es/zalando-apps/).

¿Qué significa el concepto de mobile first?

Diseñar los productos webs, primero, para pantallas pequeñas de

Optimizar las imágenes, videos y demás archivos multimedia para

Record Diesel Spare Parts: análisis de su sitio web

Record Diesel Spare Parts: los inconvenientes de una versión antigua de

Fuente: elaboración propia.

Fuente: elaboración propia.

La red social Facebook emplea esta técnica. Si observamos su

Fuente: elaboración propia.

La técnica plantea la creación de una sola versión del sitio

Figura 6: Media queries aplicadas al sitio web actual de Record Diesel

“Si la pantalla es pequeña, ocupa toda la pantalla (12 columnas)”.

Tabla 1. Una pantalla divida en dos columnas

Veamos el grid system aplicado en el sitio de Record Diesel Spare Parts:

Figura 7: Grid system aplicado al sitio de Record Diesel Spare Parts

Fuente: elaboración propia.

Fuente: elaboración propia.

La orientación de la pantalla (vertical u horizontal).

Se vería una versión a escala, obligando al usuario a hacer zoom.

No se vería nada en absoluto.

Se vería una página gigantesca, obligando al usuario a hacer scroll.

Se vería bien, pero tardaría demasiado en descargarse.

¿Qué hay que saber para ser desarrollador web?

Fuente: elaboración propia.

Fuente: captura de pantalla de tienda online de Record Diesel Spare Parts

El siguiente escalón en el camino de un desarrollador web front-end es el lenguaje JavaScript y este sí

Figura 4: Código JavaScript que hace funcionar el menú desplegable de Record

Fuente: elaboración propia.

Figura 5: Llamada a la librería Jquery y fragmento de código Jquery en el sitio

Fuente: elaboración propia.

Figura 6: Llamada al framework BootStrap en el sitio web de Record Diesel

Fuente: elaboración propia.

Normalmente, el back-end se encarga de recibir datos desde el front-end, procesarlos, almacenarlos en

En cuanto a lenguajes y herramientas, será fundamental aprender un lenguaje de programación back-

Figura 7: El carrito de compras actualizado entregado por PHP en el sitio web

Fuente: elaboración propia.

HTML es un lenguaje que se usa para:

Generar el contenido de un sitio web.

Generar el diseño de un sitio web.

Generar una interfaz interactiva para un sitio web.

Generar operaciones en la base de datos de un sitio web.

La realidad aumentada es interactiva en tiempo real: un cambio, una acción, una

La realidad aumentada interactúa, por lo tanto, con nosotros en tiempo real,

La información se muestra siempre con perspectiva, dando la sensación de que

Figura 1. Ejemplo de aplicación realidad aumentada. El usuario toma una imagen de

centro de información turística La realidad aumentada tiene un gran potencial. Algunos

ejemplos de aplicación son:

Turismo: tal como muestra la figura 1, teniendo las coordenadas geográficas de un

En la industria del entretenimiento, la realidad aumentada ha causado una revolución.

Figura 2: La realidad aumentada en la educación

Fuente: captura de pantalla de imagen de video

Figura 2. La realidad virtual en la educación.

IKEA Place, una aplicación de realidad

Fuente: captura de pantalla del sitio web de IKEA (https://about.ikea.com/en/contact/how-tobuy-