2. 1
Unidad ll
HTML – El lenguaje de Internet
La propuesta original de Tim Berners-Lee incluía 22 elementos, de los cuales 13 aún existen en
la implementación actual. Los borradores originales del concepto expiraron en 1994, por lo cual
posteriormente se completó la especificación HTML 2.0 en 1995, la cual se volvió el estándar sobre
el cual se basaron las futuras implementaciones. Desde 1996 las especificaciones de HTML son
actualizadas y mantenidas por la W3C, en contacto con las compañías de información.
Hoy en día no solamente se usa HTML para formar las páginas web como las conocemos
– el HTML básico es de contenido estático – o sea que cada vez que cargamos una página de
HTML básico, veremos exactamente lo mismo. Lo conocido como HTML dinámico se compone de
diversas tecnologías combinadas para obtener sitios web dinámicos que se adaptan al contexto,
las cuales son por ejemplo la definición de presentación CSS, el lenguaje de scripting de cliente
JavaScript, y el DOM (Document Object Model).
El HTML básico podemos escribirlo en cualquier editor de texto plano como el Bloc de Notas,
pero es preferible utilizar un editor específicamente diseñado para trabajar con sitios web si esta-
mos trabajando en un sitio dinámico.
CSS
Mientras el HTML define el contenido de la página (la información que veremos), el CSS o
Cascading Style Sheets (Hojas de estilo en cascada) se encarga de definir su aspecto. Al hablar de
aspecto nos referimos a tamaños, colores, posicionamiento, y efectos como sombras, por ejemplo.
Originalmente, HTML se usaba para definir ciertos aspectos como colores o texto subrayado,
pero resulta impráctico porque cada cambio que hagamos debe repetirse si es un elemento recu-
rrente en el sitio. CSS se encarga de simplificar esto, por medio de identificadores que modificamos
una sola vez para cambiar el aspecto de cualquier elemento que pertenezca a dicho identificador
que modificamos (sea texto o no).
Hoy en día ya no es parte del estándar hacer uso de los controles de aspecto en HTML – por
lo tanto si deseamos poner colores o textos en negrita, debemos hacerlo vía CSS para que nuestro
sitio cumpla con los estándares de la W3C.
Programación de
Aplicaciónes
Aspectos de Diseño
3. Unidad ll
2
JavaScript
El JavaScript es un lenguaje interpretado que se utiliza para agregar interactividad a un sitio web.
Opera del lado del cliente, pero existe una variante que se ejecuta en el servidor (SSJS, Server-Si-
de JavaScript).
La operación del lado del cliente significa que es el equipo de quien visita el sitio web el cual
ejecuta el código especificado por el JavaScript. Un ejemplo sencillo de JS en el cliente es el código
que opera un sitio que nos pide escribir una contraseña dos veces para confirmar que esté bien
escrita – el código que compara ambas contraseñas opera del lado del cliente por cuestiones de
seguridad, ya que si operara del lado del servidor, esto implicaría enviar las contraseñas en texto
plano, lo que es inseguro, y además impráctico.
En cambio, la operación del lado del servidor implica que el código está siendo ejecutado por
el servidor web al que accedemos. De esta forma, no se usan recursos del sistema del visitante.
Las funciones de búsqueda son del lado del servidor – nuestro cliente envía una palabra a buscar,
y es el servidor que ejecuta la función para buscar – ya que en esa máquina están almacenados
los datos. Una vez encontrados los resultados, el servidor “entrega” dicha información al cliente.
Distintos lenguajes utilizados en programación en servidores son por ejemplo el anteriormente
mencionado SSJS, el PHP, Ruby on Rails, Python, ASP, entre otros.
Usar JavaScript en un sitio implica trabajar con programación, pero existen modelos básicos
que se pueden utilizar para funciones comunes en sitios web.
Rendimiento
Las conexiones de Internet, incluso las inalámbricas, hoy en día alcanzan velocidades conside-
rablemente superiores a las que se utilizaban en los inicios de Internet, pero nunca deja de ser
importante la optimización de carga de los recursos de una página.
Si un sitio tarda en cargar, el usuario se frustrará y decidirá buscar una alternativa. Si alguien
accede a nuestro sitio usando un plan de datos, debemos asegurarnos de no sobre-cargarnos de
conexiones innecesarias, para no gastar en vano el limitado tráfico del visitante.
Los dos aspectos principales que debemos optimizar son los tamaños de archivo y el núme-
ro de pedidos (conexiones) al servidor.
Para optimizar los tamaños de archivo, podemos optimizar las imágenes que usamos, re-
ducir HTML y CSS redundante, utilizar la menor cantidad posible de scripts externos y si tenemos
scripts para tareas no generales, cargarlos solamente si el usuario necesita la función de dichas
tareas.
Conceptos de diseño
Para hacer una página web efectiva, no basta con saber HTML y el funcionamiento de nuestro ser-
vidor. También es necesario saber hacer un diseño efectivo.
Un diseño efectivo logra que nuestra página sea simple de navegar, accesible, rápida en
cargar y encima de todo, eficiente – nuestro visitante debe poder lograr su objetivo.
Debemos considerar los siguientes principios a la hora de diseñar:
Balance: Una sensación de equilibrio y/o estabilidad. Nuestro diseño debe proveer el mismo
nivel de atención y consistencia en cada área, no solamente centrarse en una particular.
Contraste: Diferencia de tamaños, formas, colores y posicionamiento, que provean una sen-
sación de destaque y jerarquía de los elementos más y menos importantes.
Dirección: La posición en orden natural de lectura y visión de los elementos. En el caso de la
mayoría de los idiomas, los cuales se leen de izquierda a derecha, seguiremos un posicionamiento
que también se vea de izquierda a derecha.
Énfasis: La distinción particular de elementos específicos – los cuales tienden a ser los más
importantes o más usados.
4. Unidad ll
3
Armonía: El uso de formas, líneas, tamaños y tonos de color que combinan de forma placen-
tera para la vista.
Líneas: Se usan para delinear formas o expresar dirección, movimiento o incluso énfasis.
Perspectiva: Aproximación de la posición relativa de los elementos en torno a la vista del
espectador. Puede presentarse en forma de iluminación o intensidad de colores al igual que orien-
taciones de texto, por ejemplo. Buen uso de perspectiva puede tornar el ambiente bidimensional de
la pantalla en uno pseudo-tridimensional.
Proporción: Combinación de formas y tamaños que se relacionan de forma efectiva y nota-
ble.
Ritmo: No se refiere al término sonoro, sino al uso de patrones y repeticiones efectivos.
Textura: La sensación visual del diseño. Las interfaces modernas tienden a ser más planas
y de textura singular.
Tono: El rango de valores de luz y oscuridad en los colores utilizados.
Unidad: La sensación de que todos los elementos del diseño en general tienen una identidad
particular, que combinados demuestran una relación entre los elementos utilizados.
Cuando hacemos un diseño debemos probarlo para demostrar si es efectivo (si es posible, pode-
mos hacer que otros usuarios prueben también). A la hora de probar, es importante confirmar los
siguientes aspectos:
• Consistencia del diseño: Probar navegando por varios enlaces, asegurándonos de que al
cambiar de página no se pierda la identidad de la misma (por ejemplo, el logo o nombre de la em-
presa debería estar en el encabezado en todo momento).
• Estabilidad de carga: Algunas páginas tendrán más contenido (imágenes, videos, sonidos)
que otras, pero debemos probar que dichas páginas no sean tan grandes como para ralentizar de-
masiado la carga. Si una página es muy “pesada”, debemos considerar distribuir su contenido en
múltiples páginas.
• Desplazamiento: El estándar de desplazamiento en una página web es vertical. Si usamos
desplazamiento horizontal estamos saliendo de una norma, y no se considera “cómodo”. Sin em-
bargo, hay diseños que pueden hacer uso eficiente del desplazamiento horizontal, como por ejem-
plo en una línea de tiempo interactiva, o los mapas (los cuales inevitablemente desplazamos en
ambos ejes).
• Accesibilidad: ¿Es el sitio apto para personas que podrían tener deficiencias motoras o vi-
suales? Este es un aspecto casi imposible de perfeccionar, pero con el avance de las tecnologías
de accesibilidad hoy en día es posible mejorar mucho la experiencia accesible de un sitio. Analiza-
remos esto en detalle más adelante.
5. 4
Unidad ll
Antes de la adaptación masiva de los smartphones, bastaba con confirmar que el sitio fun-
cione bien en los navegadores disponibles, pero hoy en día debemos considerar también si el sitio
es usable en una pantalla táctil de un teléfono.
Aproximadamente hasta el año 2007, podíamos estar seguros de que los usuarios de un
sitio web utilizaban una computadora de escritorio o laptop para ver un sitio web en particular, con
una resolución horizontal de al menos 800 píxeles, siendo 1024 la más común. Una vez listo un
sitio web, simplemente era necesario probarlo en diferentes navegadores, y el concepto de “límite
de tráfico de datos” solamente se aplicaba a los que aún utilizaban conexiones antiguas como el
dial-up con módem.
La popularización de los smartphones, combinada con la mayor tasa de transferencia de
datos en redes inalámbricas por medio de la conocida en ese momento como “3G”, causó una
variación notable en los hábitos de uso de Internet para muchos usuarios. El desafío del diseño no
solamente se limita a tener diferentes tamaños de pantalla o resolución, sino también aspectos de
la conexión utilizada en el momento (EDGE, HSDPA, LTE, etc.).
La definición de “web móvil” no es realmente apropiada – la Web es la Web. Podríamos
considerar el ahora obsoleto protocolo WAP como “web móvil”, pero los servicios y sitios que acce-
demos con un smartphone hacen uso de exactamente la misma tecnología y protocolos de comu-
nicación que una PC. Por lo tanto, la web es simplemente eso: “La web”.
Las dos estrategias principales que tenemos como opciones para lidiar con esta situación son las
siguientes:
• Desarrollo independiente: Consiste en diseñar sitios web específicos para cada plataforma
particular. La base de datos puede compartirse entre cada sitio, pero cada uno se presenta de una
forma totalmente diferente a la otra. Conviene en el aspecto de que permite aprovechar al máximo
las características de cada plataforma, pero complica de forma considerable el desarrollo – cual-
quier tipo de mejora o cambio debe repetirse por cada variante.
• Desarrollo adaptable: Se diseña un solo sitio, pero de una forma que se adapte a cualquier
tipo de plataforma. Inevitablemente implica sacrificar ciertos aspectos en el diseño o funcionalidad,
pero facilita la implementación ya que solamente hay un sitio web que mantener. La principal técni-
ca utilizada hoy en día se define como responsive design. (Diseño responsivo).
Compatibilidad entre plataformas y “web móvil”
Responsive Design
La mayoría de los navegadores móviles adaptan un sitio web grande mostrando una vista general,
sobre la cual se puede hacer zoom para moverse por la misma. Aunque es técnicamente funcional,
no es conveniente para el usuario.
La estrategia del diseño responsivo provee diseños distintos que se adaptan al tamaño de la
ventana del navegador web. Consiste en usar la misma página HTML en general, pero adaptándola
con diferentes tipos de CSS según la plataforma. Un ejemplo simple es hacer que al usar un teléfo-
no, el sitio aparezca en una sola columna, y con enlaces más grandes para que sea fácil tocarlos.
Si usamos una PC, el diseño se adapta a la pantalla grande y con enlaces de tamaño normal, ya
que se clickean con el mouse.
Sin embargo, no es una solución 100% efectiva. Dependiendo de la función del sitio web que
6. 5
Unidad ll
hagamos, a veces es más conveniente un sitio completamente diferente para dispositivos móviles,
de modo de poder usar mejor sus funciones específicas al hardware (pantalla táctil, acelerómetro,
sensores, etc).
Accesibilidad
Hasta este punto solamente hemos considerado aspectos de diseño en torno a un navegador que
se utiliza con un mouse o con el dedo en una pantalla táctil. Pero un punto crítico a considerar es
que existen usuarios que utilizan diferentes herramientas para interactuar con sitios web, como
lectores de texto, salidas en braille, joysticks, pedales, entre otras.
Las tres categorías principales en el aspecto de accesibilidad de sitios web son:
Impedimento visual: Implica el uso de herramientas como el lector de texto, salida en braille,
o magnificación (zoom) del sistema operativo para poder interpretar contenido.
Impedimento motriz: La limitación o imposibilidad de uso de las manos puede requerir el uso
de dispositivos de entrada alternativos, como joysticks o pedales para poder utilizar el navegador.
Impedimento auditivo: La capacidad de escucha limitada requiere una forma alternativa de
poder interpretar contenido multimedia, en forma de subtítulos o descripciones textuales adiciona-
les.
Recomendaciones a considerar en un diseño accesible
• Utilizar el texto alternativo (alt) para las imágenes. Dicho texto se muestra si una imagen
no se carga, pero también los programas de lectura a voz alta pueden leerlos a sus usuarios para
hacerse una idea de lo que tiene una imagen.
• No poner textos importantes de nuestro contenido en forma de imágenes (el software de
lectura a voz alta no podrá interpretarlas).
• Proveer subtítulos o transcripciones de material audiovisual.
• Utilizar colores bien contrastados para marcar enlaces o elementos seleccionables.
