diseño con estándares...

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




1 Un poco de historia

2 ¾Por qué estándares?

3 Componentes de un sitio Web

4 Accesibilidad

5 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





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





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)





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





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





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)





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





Problemas de no usar estándaresVentajas de usar estándaresNavegadores modernos y los estándares


2 ¾Por qué estándares?Problemas de no usar estándaresVentajas de usar estándaresNavegadores modernos y los estándares


4 Accesibilidad







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






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?






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






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






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






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





EstructuraPresentaciónComportamiento



3 Componentes de un sitio WebEstructuraPresentaciónComportamiento

4 Accesibilidad







La �trinidad� de los estándares Web






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






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






Comportamiento

Establecer el comportamiento yefectos que funcionen endiferente navegadores yplataformas

ECMAScript y DOM





De�niciónWAINiveles de Accesibilidad




4 AccesibilidadDe�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.






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






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






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.





De�niciónSímbolosEjemplo




4 Accesibilidad

5 Diagrama de NavegabilidadDe�niciónSímbolosEjemplo







Diagrama de UML 2.0

Permite establecer los elementos del diseño

Se puede dibujar con herramientas como Enterprise Architect.






Símbolos


diseño con estándares...

Documents