diseño de interfaces web
DESCRIPTION
TRANSCRIPT
![Page 2: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/2.jpg)
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?
![Page 3: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/3.jpg)
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?
![Page 4: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/4.jpg)
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.
![Page 5: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/5.jpg)
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.
![Page 6: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/6.jpg)
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.
![Page 7: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/7.jpg)
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.
![Page 8: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/8.jpg)
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
![Page 9: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/9.jpg)
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.
![Page 10: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/10.jpg)
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.
![Page 11: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/11.jpg)
11
Por pantalla: Gmail
![Page 12: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/12.jpg)
12
Impresora: Gmail
![Page 13: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/13.jpg)
13
Dispositivo móvil: Gmail
![Page 14: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/14.jpg)
14
Por pantalla: Facebook
![Page 15: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/15.jpg)
15
Impresora: Facebook
![Page 16: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/16.jpg)
16
Dispositivo Móvil: Facebook
![Page 17: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/17.jpg)
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.
![Page 18: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/18.jpg)
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/
![Page 19: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/19.jpg)
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!
![Page 20: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/20.jpg)
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?
![Page 21: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/21.jpg)
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.
![Page 22: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/22.jpg)
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.
![Page 23: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/23.jpg)
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
![Page 24: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/24.jpg)
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.
![Page 25: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/25.jpg)
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
![Page 26: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/26.jpg)
26
2. Mejoras sobre las webs estáticas con HTML
Un ejemplo de animación en javascript.
Un ejemplo de animación en flash.
![Page 27: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/27.jpg)
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.
![Page 28: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/28.jpg)
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?
![Page 29: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/29.jpg)
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.
![Page 30: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/30.jpg)
30
3.1. Problemas visuales
La Web de las mariposas con daltonismo dicromático
![Page 31: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/31.jpg)
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.
![Page 32: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/32.jpg)
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.
![Page 33: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/33.jpg)
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.
![Page 34: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/34.jpg)
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?
![Page 35: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/35.jpg)
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í)
![Page 36: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/36.jpg)
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.
![Page 37: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/37.jpg)
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).
![Page 38: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/38.jpg)
38
4.1. Progressive Enhancement
Un ejemplo:
– Con Flash.
– Sin Flash.
![Page 39: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/39.jpg)
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.
![Page 40: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/40.jpg)
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
![Page 41: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/41.jpg)
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?
![Page 42: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/42.jpg)
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.
![Page 43: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/43.jpg)
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í)
![Page 44: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/44.jpg)
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í.
![Page 46: Diseño De Interfaces Web](https://reader033.vdocuments.site/reader033/viewer/2022061215/549eca86b479597e208b4823/html5/thumbnails/46.jpg)
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/