Diseño de interfaces Web

Diseño de interfaces Web : 

Diseño de interfaces Web Sesión 2 Miquel Adell Vasava miquel@vasava.es

Contenidos : 

2 Contenidos

Contenidos : 

3 Contenidos

1. HTML : 

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.

1. HTML : 

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.

1.1. Fundamentos 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.

1.1. Fundamentos de HTML : 

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.

1.2. Separación entre diseño y contenido : 

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

1.2. Separación entre diseño y contenido : 

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.

1.2. Separación entre diseño y contenido : 

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.

Por pantalla: Gmail : 

11 Por pantalla: Gmail

Impresora: Gmail : 

12 Impresora: Gmail

Dispositivo móvil: Gmail : 

13 Dispositivo móvil: Gmail

Por pantalla: Facebook : 

14 Por pantalla: Facebook

Impresora: Facebook : 

15 Impresora: Facebook

Dispositivo Móvil: Facebook : 

16 Dispositivo Móvil: Facebook

1.3. Un ejemplo, diferencia entre diseño con tablas y diseño con CSS : 

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.

1.3. Un ejemplo, diferencia entre diseño con tablas y diseño con CSS : 

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/

1.3. Un ejemplo, diferencia entre diseño con tablas y diseño con CSS : 

19 1.3. Un ejemplo, diferencia entre diseño con tablas y diseño con CSS Comparación: ¡Vemos sin embargo que las tablas siguen sirviendo para hacer tablas!

Contenidos : 

20 Contenidos

2. Mejoras sobre las webs estáticas con HTML : 

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.

2.1. Superando las limitaciones del HTML : 

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.

2. Mejoras sobre las webs estáticas con HTML : 

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

2. Mejoras sobre las webs estáticas con HTML : 

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.

2. Mejoras sobre las webs estáticas con HTML : 

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

2. Mejoras sobre las webs estáticas con HTML : 

26 2. Mejoras sobre las webs estáticas con HTML Un ejemplo de animación en javascript. Un ejemplo de animación en flash.

2. Mejoras sobre las webs estáticas con HTML : 

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.

Contenidos : 

28 Contenidos

3. Problemas de acceso a paginas HTML : 

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.

3.1. Problemas visuales : 

30 3.1. Problemas visuales La Web de las mariposas con daltonismo dicromático

3.2. Lectores de pantalla : 

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.

Contenidos : 

34 Contenidos

4. Soluciones accesibles : 

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í)

4. Soluciones accesibles : 

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.

4.1. Progressive Enhancement : 

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).

4.1. Progressive Enhancement : 

38 4.1. Progressive Enhancement Un ejemplo: Con Flash. Sin Flash.

4.1. Progressive Enhancement : 

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.

4.1. Progressive Enhancement : 

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

Contenidos : 

41 Contenidos

5. Motores de búsqueda : 

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.

5.1. ¿Qué son los motores de búsqueda? : 

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í)

5.2. ¿Como mejorar la posición de nuestra web en los buscadores? : 

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í.

Slide 45: 

45 ¿Preguntas? Para cualquier otra duda podéis escribir un email a miquel@vasava.es

Recursos y enlaces : 

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/