Post on 26-Dec-2014
description
Diseño de interfaces Web
Sesión 2
Miquel Adell
Vasava
miquel@vasava.es
2
Contenidos
1. HTML
1.1. Fundamentos (lenguaje interpretado con etiquetas)
1.2. Separación entre diseño y contenido
1.3. Un ejemplo, diferencia entre tablas y CSS
2. Mejoras sobre las webs estáticas con HTML
3. Problemas de acceso a paginas HTML
3.1. Problemas visuales
3.2. Lectores de pantalla
4. Soluciones accesibles
4.1. Progressive Enhancement
5. Motores de búsqueda
5.1. ¿Qué son los motores de búsqueda?
5.2. ¿Como mejorar la posición de nuestra web en los buscadores?
3
Contenidos
1. HTML
1.1. Fundamentos (lenguaje interpretado con etiquetas)
1.2. Separación entre diseño y contenido
1.3. Un ejemplo, diferencia entre tablas y CSS
2. Mejoras sobre las webs estáticas con HTML
3. Problemas de acceso a paginas HTML
3.1. Problemas visuales
3.2. Lectores de pantalla
4. Soluciones accesibles
4.1. Progressive Enhancement
5. Motores de búsqueda
5.1. ¿Qué son los motores de búsqueda?
5.2. ¿Como mejorar la posición de nuestra web en los buscadores?
4
1. HTML
Hyper Text Markup Language (Lenguaje de Marcas de Hipertexto) Empezó como una manera de presentar texto en la web.Por lo tanto es un lenguaje sin estado. Un usuario accede a una URL y ve siempre el mismo contenido.
5
1. HTML
Esto es solo un muy breve inicio. Hay muchas guías de HTML.
– La guía de Dave Raggett, miembro del W3C (inglés).
– Curso de introducción en formato Wikilibro.
– Extenso manual de HTML.
6
1.1. Fundamentos de HTML
Sobre un texto se aplican marcadores que modifican su significado o su presentación.
Veamos un ejemplo antes de seguir.
Si hay tiempo podemos hacer otro.
7
1.1. Fundamentos de HTML
Al principio tanto significado como presentación se aplicaban directamente al HTML.
Con la aparición de CSS (hojas de estilos en cascada) se diferenció contenido de forma.
Las hojas de estilo proporcionan un lenguaje pensado específicamente para definir como se ve un documento.
Y eso fue bueno.
8
1.2. Separación entre diseño y contenido
¿Por qué?
– Distintos tipos de medios
• Pantallas, móviles, impresoras, lectores de pantalla y muchos más que pueden venir en el futuro.
• Facilidad de cambiar el diseño
• Facilidad de cambiar el contenido
• Mejor mantenimiento
9
1.2. Separación entre diseño y contenido
Un ejemplo de la facilidad de mantenimiento seria poder aplicar estilos distintos con un solo clic.
Es una mejora porque esos diseños no dependen del contenido sino de la forma.
Veamos como aplicar estilos a nuestra página ya acabada.
10
1.2. Separación entre diseño y contenido
Los cambios pueden tener más efectos aparte de una mejor estética.
– Facilitar la impresión.
– Cada vez es más importante que las webs se vean correctamente en dispositivos móviles.
11
Por pantalla: Gmail
12
Impresora: Gmail
13
Dispositivo móvil: Gmail
14
Por pantalla: Facebook
15
Impresora: Facebook
16
Dispositivo Móvil: Facebook
17
1.3. Un ejemplo, diferencia entre diseño con tablas y diseño con CSS
Las tablas para organizar contenido.
¿Por qué?
– Antes de la creación de los CSS se necesitaba un modo de centrar contenidos, hacer diseños con columnas etc.
18
1.3. Un ejemplo, diferencia entre diseño con tablas y diseño con CSS
Veamos un diseño ejecutado con tablas.
Lo mismo, viendo los bordes de las tablas.
Veamos el mismo diseño hecho con CSS
Fuente:
http://www.sitepoint.com/article/tables-vs-css/
19
1.3. Un ejemplo, diferencia entre diseño con tablas y diseño con CSS
Característica Tablas CSS
Legibilidad del código Mayor complejidad del código.
Código más limpio.
Mantenimiento Necesidad de replicar los cambios en cada página.
Posibilidad de aplicar
Cambios a todas las páginas cambiando un solo archivo.
Distintos dispositivos Las tablas intentan mostrarse igual en distintos dispositivos.
Se pueden crear reglas CSS distintas para distintos dispositivos.
Comparación:
¡Vemos sin embargo que las tablas siguen sirviendo para hacer tablas!
20
Contenidos
1. HTML
1.1. Fundamentos (lenguaje interpretado con etiquetas)
1.2. Separación entre diseño y contenido
1.3. Un ejemplo, diferencia entre tablas y CSS
2. Mejoras sobre las webs estáticas con HTML
3. Problemas de acceso a paginas HTML
3.1. Problemas visuales
3.2. Lectores de pantalla
4. Soluciones accesibles
4.1. Progressive Enhancement
5. Motores de búsqueda
5.1. ¿Qué son los motores de búsqueda?
5.2. ¿Como mejorar la posición de nuestra web en los buscadores?
21
2. Mejoras sobre las webs estáticas con HTML
Como ya hemos dicho HTML fue pensado como una manera de presentar texto en la Web. Es por eso que había mucho espacio para crecer.
Lo que empezó con el nivel de interactividad de un tablón de anuncios se ha convertido en toda una red social.
22
2.1. Superando las limitaciones del HTML
Nuevas funcionalidades
– Permitir escritura además de lectura.
– Guardar datos del usuario.
– Mostrar un contenido u otro según acciones pasadas del usuario.
– Generar paginas según contenidos guardados en, por ejemplo, bases de datos.
23
2. Mejoras sobre las webs estáticas con HTML
Se consiguió gracias a:
– Cookies
– Lenguajes de scripting:
• ASP
• CGI
• Perl
• PHP
• Python
• Ruby
– Bases de datos
• Microsoft SQL Server
• MySQL
• Oracle
24
2. Mejoras sobre las webs estáticas con HTML
Sin duda fue necesario añadir muchas funcionalidades.
– Webs con animaciones.
– Añadir video y audio además de imágenes.
25
2. Mejoras sobre las webs estáticas con HTML
Se consiguió gracias a:
– Applets
• Flash
• Silverlight
• Java Virtual Machine
– Lenguajes ejecutados en el navegador:
• JavaScript
26
2. Mejoras sobre las webs estáticas con HTML
Un ejemplo de animación en javascript.
Un ejemplo de animación en flash.
27
2. Mejoras sobre las webs estáticas con HTML
Como un ejemplo de combinación de contenido dinámico y presentación dinámica tenemos AJAX.
– Ajax permite ejecutar, código en el servidor mientras un usuario visita una Web.
– Permite, por ejemplo, que una Web responda sin recargar la página a la entrada de teclado del usuario (recuperar datos de base de datos).
– O bien puntuar una película sin salir de la pagina (guardar datos en una base de datos).
– Con AJAX se puede hacer esto y muchísimas otras cosas.
28
Contenidos
1. HTML
1.1. Fundamentos (lenguaje interpretado con etiquetas)
1.2. Separación entre diseño y contenido
1.3. Un ejemplo, diferencia entre tablas y CSS
2. Mejoras sobre las webs estáticas con HTML
3. Problemas de acceso a paginas HTML
3.1. Problemas visuales
3.2. Lectores de pantalla
4. Soluciones accesibles
4.1. Progressive Enhancement
5. Motores de búsqueda
5.1. ¿Qué son los motores de búsqueda?
5.2. ¿Como mejorar la posición de nuestra web en los buscadores?
29
3. Problemas de acceso a paginas HTML
Los problemas de acceso a la Web pueden ser de muchos tipos incluyendo problemas visuales, auditivos, físicos, cognitivos, neurológicos y del habla.
30
3.1. Problemas visuales
La Web de las mariposas con daltonismo dicromático
31
3.2. Lectores de pantalla
¿Que son?
– Un ejemplo de lectura.
¿Por qué es importante tenerlos en cuenta?
– Google, nuestro visitante ciego más habitual.
32
3.2. Lectores de pantalla
La Web de las mariposas (CSS) como la vería un lector de pantalla, o como la vería Google.
33
3.2. Lectores de pantalla
La Web de las mariposas (tablas) como la vería un lector de pantalla, o como la vería Google.
34
Contenidos
1. HTML
1.1. Fundamentos (lenguaje interpretado con etiquetas)
1.2. Separación entre diseño y contenido
1.3. Un ejemplo, diferencia entre tablas y CSS
2. Mejoras sobre las webs estáticas con HTML
3. Problemas de acceso a paginas HTML
3.1. Problemas visuales
3.2. Lectores de pantalla
4. Soluciones accesibles
4.1. Progressive Enhancement
5. Motores de búsqueda
5.1. ¿Qué son los motores de búsqueda?
5.2. ¿Como mejorar la posición de nuestra web en los buscadores?
35
4. Soluciones accesibles
Accesibilidad según el W3C:– Hablar de Accesibilidad Web es hablar del acceso de todos a la Web,
independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios.
(mucha más información aquí)
36
4. Soluciones accesibles
Para un diseñador o un programador la accesibilidad siempre supone buscar un punto de equilibrio.
– Una solución accesible no significa que todos los usuarios vean la Web del mismo modo sino que todos puedan acceder al contenido con igualdad de oportunidades, igualdad de contenido.
37
4.1. Progressive Enhancement
La mejora progresiva es una estrategia de diseño Web que prioriza la accesibilidad construyendo una la Web partiendo de sus elementos más sencillos y extendidos y añadiendo capas de mayor complejidad.
Los contenidos de esa Web deben poder accederse sea cual sea el paso en que los vea el usuario.
La presentación en la que apareció por primera vez el concepto puede encontrarse aquí (en inglés).
38
4.1. Progressive Enhancement
Un ejemplo:
– Con Flash.
– Sin Flash.
39
4.1. Progressive Enhancement
Herramientas y ayudas:
FAUST
– Cualquier elemento de Flash debe tener su correspondiente en HTML, por ejemplo:
• Un video en flash debe tener una captura en imagen del video, una descripción de texto y un enlace al archivo del video.
• Una presentación en flash debe tener una lista ordenada de enlaces a las imágenes y mostrar previsualizaciones.
40
4.1. Progressive Enhancement
Herramientas y ayudas:
sIFR– Reemplaza textos en HTML por
textos en flash.– Si el usuario no tiene Flash o
Javascript no nota nada.– Se pueden usar fuentes que no
son de sistema.
Listados de fuentes por defecto:– Comparativa con distintos Sistemas
operativos y sus fuentes. – Porcentaje de adopción de distintas
fuentes en distintos sistemas operativos.
Sin sIFR
Con sIFR
41
Contenidos
1. HTML
1.1. Fundamentos (lenguaje interpretado con etiquetas)
1.2. Separación entre diseño y contenido
1.3. Un ejemplo, diferencia entre tablas y CSS
2. Mejoras sobre las webs estáticas con HTML
3. Problemas de acceso a paginas HTML
3.1. Problemas visuales
3.2. Lectores de pantalla
4. Soluciones accesibles
4.1. Progressive Enhancement
5. Motores de búsqueda
5.1. ¿Qué son los motores de búsqueda?
5.2. ¿Como mejorar la posición de nuestra web en los buscadores?
42
5. Motores de búsqueda
Un efecto colateral positivo de tener en cuenta los principios de la accesibilidad en nuestras webs es que conseguiremos mejorar la manera en que los motores de búsqueda nos indexan.
43
5.1. ¿Qué son los motores de búsqueda?
Los motores de búsqueda son la herramienta que proporciona los resultados de un buscador.
Se alimentan, principalmente, técnicas de rastreo para encontrar nuevas páginas.
Un buscador utilizando técnicas de rastreo se comporta de manera muy parecida a un usuario usando un lector de pantalla.
– Es decir, no suele ver javascript, flash, ni imágenes.
(mucha más información aquí)
44
5.2. ¿Como mejorar la posición de nuestra web en los buscadores?
Mejorando la accesibilidad.
– Proporcionando una versión HTML de todo el contenido que, de otra manera, no seria accedido por los robots de los buscadores.
Mejorando la calidad del contenido.
Nunca intentando únicamente mejorar la posición en los buscadores.
Algunos consejos útiles aquí y aquí.
45
¿Preguntas?
Para cualquier otra duda podéis escribir un email a miquel@vasava.es
46
Recursos y enlaces
– Firefox, navegador:• http://www.mozilla-europe.org/es/firefox/
– Firebug, edición de CSS, javascript y herramientas para Firefox:• https://addons.mozilla.org/es-ES/firefox/addon/1843
– Complemento lector de pantalla para firefox:• http://firevox.clcworld.net/
– Lynx, navegador en modo texto• http://pachome1.pacific.net.sg/~kennethkwok/lynx/
– W3C • http://www.w3c.es/
– Ejemplos de CSS• http://www.csszengarden.com
– Blog sobre accesibilidad y CSS• http://www.alistapart.com
– Progresive enhancement• http://www.alistapart.com/articles/understandingprogressiveenhancement• http://www.adobe.com/devnet/flashplayer/articles/alternative_content.html• http://wiki.novemberborn.net/sifr3/