diseño con estándares...
TRANSCRIPT
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
Diseño con Estándares Web
B. Cristina Pelayo García-Bustelo
Creación de Sitios Web con XHTML, CSS y JavaScriptAgaete 2007
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
1 Un poco de historia
2 ¾Por qué estándares?
3 Componentes de un sitio Web
4 Accesibilidad
5 Diagrama de Navegabilidad
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
Nacimiento de la Web
Aunque Internet comienza a desarrollarse en los años 60, laWeb no se inventó hasta 1989
Su creador fue Tim-Berners Lee, en el Laboratorio Europeo deFísica de Partículas (CERN)
Berners-Lee creólas versiones iniciales de:
HTML, HTTP, un servidor Web y un navegadorLos cuatro componentes esenciales de la Web
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
Clientes Web
Cualquier ordenador conectado a Internet con un programacapaz de realizar peticiones HTTP y mostrar las páginasHTML devueltas
Hasta hace bien poco, solían ser un PC con algún navegadorinstalado (Internet Explorer, Netscape, Opera. . . )
Ahora, hay toda una pléyade de dispositivos capaces de actuarcomo clientes Web (PDAs, teléfonos móviles,electrodomésticos, automóviles,. . . )
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
Del texto a los grá�cos
Al principio, las páginas Web no eran más que texto en blancoy negro con los enlaces entre corchetes (navegador Lynx)
En 1993 se crea un navegador con interfaz grá�ca de usuario,el Mosaic, en el NCSA (National Center for SupercomputingApplications, Universidad de Illinois)
En 1994 se funda Netscapey crean el primer navegadorcomercial, el Netscape Navigator
En 1995, Microsoft lanza su Internet Explorer(IE)
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
Inicios: HTML
Consiste en un conjunto bastante reducido de etiquetas quepermiten de�nir la estructura de un documento
Qué es un título, qué es un párrafo, qué es un enlace
½Nunca fue pensado para de�nir la presentación!
No había etiquetas para especi�car fuentes, colores. . .
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
Inicios: Presentación de documentos
Pronto, el sentido original del HTML comenzó a desvirtuarsecon la aparición de elementos de presentación
los navegadores introducían etiquetas propietarias paraproporcionar diversos efectos estilísticos (Fuentes, colores,. . . )los diseñadores grá�cos hacían uso de trucos pensando sólo enla presentación, no en el sentido original de los elementos deHTML (tablas para maquetación, listas para sangrados, . . . )
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
Inicios: Separación entre presentación y contenidos
Para tratar de reconducir la situación creada, en 1998 el W3Cpublicó la especi�cación de las hojas de estilo
Cascading Style Sheets (CSS)
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
El World Wide Web Consortium(W3C)
Consorcio formado por cerca de 500 organizaciones que dictalos estándares de la Web
HTML, CSS, XML, XHTML, DOMhttp://www.w3.org
Objetivo: promover la evolución de la Web garantizando quelas distintas tecnologías funcionen bien conjuntamente
Dirigido por TimBerners-Lee, el inventor de la Web, en 1989
Premio Príncipe de Asturias de Investigación Cientí�ca yTécnica 2002
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
Problemas de no usar estándaresVentajas de usar estándaresNavegadores modernos y los estándares
1 Un poco de historia
2 ¾Por qué estándares?Problemas de no usar estándaresVentajas de usar estándaresNavegadores modernos y los estándares
3 Componentes de un sitio Web
4 Accesibilidad
5 Diagrama de Navegabilidad
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
Problemas de no usar estándaresVentajas de usar estándaresNavegadores modernos y los estándares
El ancho de banda necesario
El código espagueti, la maquetación con montones de tablasanidadas, las etiquetas <font> y otras redundancias doblan yhasta triplican el ancho de banda necesario en muchos sitiosWeb
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
Problemas de no usar estándaresVentajas de usar estándaresNavegadores modernos y los estándares
El ancho de banda y los usuarios
El usuario sufre un mayor tiempo de descarga
O se cansa de esperar y abandona el sitio antes siquiera dehaberlo visto por vez primera
O hay quien, tras el tiempo de espera, descubre que no esaccesible para él
Aparte, la compañía de hospedaje Web cobraráen función deese ancho de banda consumido
¾Por qué utilizar 60 KB por página si lo mismo puede hacersecon 20?
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
Problemas de no usar estándaresVentajas de usar estándaresNavegadores modernos y los estándares
Los costes de desarrollo
Hay que pagar a los programadores por hacer lo mismo de seisformas distintas
Junto con el código necesario para enviar a cada usuario laversión adecuada a su navegador
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
Problemas de no usar estándaresVentajas de usar estándaresNavegadores modernos y los estándares
Compatibilidad �hacia adelante�
Diseñando de la forma correcta, nuestras páginas Webfuncionarán en los distintos navegadores, plataformas ydispositivos
Incluso cuando surjan otros nuevos
¾Cómo? Usando los estándares
Lenguajes estructurales como XHTML y XML, lenguajes depresentación como CSS, modelos de objetos como DOM ylenguajes de �script�como ECMAScript
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
Problemas de no usar estándaresVentajas de usar estándaresNavegadores modernos y los estándares
Otras ventajas
Menores costes de producción y mantenimiento
Sitios más accesibles para todo el mundo
Especialmente, para aquéllos que tienen necesidades especiales
En resumen: Más visitantes por menos dinero, mejor imagen,etcétera
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
Problemas de no usar estándaresVentajas de usar estándaresNavegadores modernos y los estándares
Navegadores modernos
Aquéllos que entienden HTML y XHTML, hojas de estilo(CSS), ECMAScript y el Modelo de Objetos de Documento(DOM) del W3C
Usados conjuntamente, estos estándares nos permitirán ir másallá del marcado de presentación y los lenguajes de 'script'incompatibles y de la obsolescencia perpetua que generan
Ejemplos:
Firefox, Internet Explorer (IE), OperaSi bien no hay ninguno que cumpla perfectamente con losestándares
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
EstructuraPresentaciónComportamiento
1 Un poco de historia
2 ¾Por qué estándares?
3 Componentes de un sitio WebEstructuraPresentaciónComportamiento
4 Accesibilidad
5 Diagrama de Navegabilidad
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
EstructuraPresentaciónComportamiento
La �trinidad� de los estándares Web
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
EstructuraPresentaciónComportamiento
Estructura
Contiene datos supeditados a susigni�cado estructural:
TítuloTítulo SecundarioPárrafoLista enumerada, de de�nicióny ordenadaEstructuras adicionalesEtc.
Se utiliza lenguaje de marcado:XHTML, XML
Si se crea correctamente esTOTALMENTE portable
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
EstructuraPresentaciónComportamiento
Presentación
Se aplica forma a una páginaWeb:
TipografíaColorDisposiciónEtc.
Se utiliza lenguaje depresentación: CSS
Se puede modi�car lapresentación sin afectar a laestructura
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
EstructuraPresentaciónComportamiento
Comportamiento
Establecer el comportamiento yefectos que funcionen endiferente navegadores yplataformas
ECMAScript y DOM
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
De�niciónWAINiveles de Accesibilidad
1 Un poco de historia
2 ¾Por qué estándares?
3 Componentes de un sitio Web
4 AccesibilidadDe�niciónWAINiveles de Accesibilidad
5 Diagrama de Navegabilidad
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
De�niciónWAINiveles de Accesibilidad
Necesidad de Accesibilidad
Los seres humanos son diferentes entre si y todas los sitiosweb deberían acomodarse a esas diferencias de forma quecualquier persona sea capaz de utilizarlas sin problemas.
Usabilidad universal, para que nadie se vea limitado en el usode algo por causa de esas diferencias
Hay que evitar diseñar atendiendo a características de gruposde población especí�cos, imponiendo barreras innecesarias quepodrían ser evitadas prestando más atención a las limitacionesde éstos.
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
De�niciónWAINiveles de Accesibilidad
WAI
WAI es la iniciativa de accesibilidad web promovida por W3C.Las áreas de trabajo que cubre son:
Asegurar que las tecnologías web permiten la accesibilidadDesarrollar guías para la accesibilidadDesarrollar herramientas para evaluar y facilitar la aaccesibilidadDifusión y educaciónCoordinación entre investigación y desarrollo
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
De�niciónWAINiveles de Accesibilidad
WAI
Existen guías para ayudar al programador a crear páginas webadecuadas: http://www.w3.org/WAI/guid-tech.html
Existen navegadores alternativos para personas condiscapacidades permanentes o temporales:http://www.w3.org/WAI/References/Browsing
Existen páginas web que realizan test de evaluación deaccesibilidad: http://www.w3.org/WAI/ER/tools/
En algunos países existe legislación especí�ca sobre este tema:http://www.w3.org/WAI/Policy/.
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
De�niciónWAINiveles de Accesibilidad
Niveles de Accesibilidad
Nivel �A� de Conformidad: Se han satisfecho todos los puntosde veri�cación de Prioridad 1;
Nivel �Doble-A� de Conformidad: Se han satisfecho todos lospuntos de veri�cación de Prioridad 1 y 2;
Nivel �Triple-A� de Conformidad: Se han satisfecho todos lospuntos de veri�cación de Prioridad 1, 2, y 3.
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
De�niciónSímbolosEjemplo
1 Un poco de historia
2 ¾Por qué estándares?
3 Componentes de un sitio Web
4 Accesibilidad
5 Diagrama de NavegabilidadDe�niciónSímbolosEjemplo
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
De�niciónSímbolosEjemplo
Diagrama de Navegabilidad
Diagrama de UML 2.0
Permite establecer los elementos del diseño
Se puede dibujar con herramientas como Enterprise Architect.
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web
Un poco de historia¾Por qué estándares?
Componentes de un sitio WebAccesibilidad
Diagrama de Navegabilidad
De�niciónSímbolosEjemplo
Símbolos
B. Cristina Pelayo García-Bustelo Diseño con Estándares Web