Diseño con Estándares Web

(1)

Un poco de historia ¾Por qué estándares? Componentes de un sitio Web Accesibilidad Diagrama de Navegabilidad

Diseño con Estándares Web

B. Cristina Pelayo García-Bustelo

Creación de Sitios Web con XHTML, CSS y JavaScript Agaete 2007

(2)

1 Un poco de historia 2 ¾Por qué estándares?

3 Componentes de un sitio Web 4 Accesibilidad

(3)

Nacimiento de la Web

Aunque Internet comienza a desarrollarse en los años 60, la Web no se inventó hasta 1989

Su creador fue Tim-Berners Lee, en el Laboratorio Europeo de Física de Partículas (CERN)

Berners-Lee creólas versiones iniciales de:

HTML, HTTP, un servidor Web y un navegador Los cuatro componentes esenciales de la Web

(4)

Clientes Web

Cualquier ordenador conectado a Internet con un programa capaz de realizar peticiones HTTP y mostrar las páginas HTML devueltas

Hasta hace bien poco, solían ser un PC con algún navegador instalado (Internet Explorer, Netscape, Opera. . . )

Ahora, hay toda una pléyade de dispositivos capaces de actuar como clientes Web (PDAs, teléfonos móviles,

(5)

Del texto a los grácos

Al principio, las páginas Web no eran más que texto en blanco y 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 Supercomputing Applications, Universidad de Illinois)

En 1994 se funda Netscapey crean el primer navegador comercial, el Netscape Navigator

(6)

Inicios: HTML

Consiste en un conjunto bastante reducido de etiquetas que permiten denir la estructura de un documento

Qué es un título, qué es un párrafo, qué es un enlace

½Nunca fue pensado para denir la presentación! No había etiquetas para especicar fuentes, colores. . .

(7)

Inicios: Presentación de documentos

Pronto, el sentido original del HTML comenzó a desvirtuarse con la aparición de elementos de presentación

los navegadores introducían etiquetas propietarias para proporcionar diversos efectos estilísticos (Fuentes, colores,. . . ) los diseñadores grácos hacían uso de trucos pensando sólo en la presentación, no en el sentido original de los elementos de HTML (tablas para maquetación, listas para sangrados, . . . )

(8)

Inicios: Separación entre presentación y contenidos

Para tratar de reconducir la situación creada, en 1998 el W3C publicó la especicación de las hojas de estilo

(9)

El World Wide Web Consortium(W3C)

Consorcio formado por cerca de 500 organizaciones que dicta los estándares de la Web

HTML, CSS, XML, XHTML, DOM http://www.w3.org

Objetivo: promover la evolución de la Web garantizando que las 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 y Técnica 2002

(10)

Problemas de no usar estándares Ventajas de usar estándares

Navegadores modernos y los estándares

1 Un poco de historia

2 ¾Por qué estándares?

(11)

El ancho de banda necesario

El código espagueti, la maquetación con montones de tablas anidadas, las etiquetas <font> y otras redundancias doblan y hasta triplican el ancho de banda necesario en muchos sitios Web

(12)

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 de haberlo visto por vez primera

O hay quien, tras el tiempo de espera, descubre que no es accesible para él

Aparte, la compañía de hospedaje Web cobraráen función de ese ancho de banda consumido

¾Por qué utilizar 60 KB por página si lo mismo puede hacerse con 20?

(13)

Los costes de desarrollo

Hay que pagar a los programadores por hacer lo mismo de seis formas distintas

Junto con el código necesario para enviar a cada usuario la versión adecuada a su navegador

(14)

Compatibilidad hacia adelante

Diseñando de la forma correcta, nuestras páginas Web funcionarán en los distintos navegadores, plataformas y dispositivos

Incluso cuando surjan otros nuevos

¾Cómo? Usando los estándares

Lenguajes estructurales como XHTML y XML, lenguajes de presentación como CSS, modelos de objetos como DOM y lenguajes de scriptcomo ECMAScript

(15)

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

(16)

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ás allá del marcado de presentación y los lenguajes de 'script' incompatibles y de la obsolescencia perpetua que generan Ejemplos:

Firefox, Internet Explorer (IE), Opera

Si bien no hay ninguno que cumpla perfectamente con los estándares

(17)

Un poco de historia ¾Por qué estándares? Componentes de un sitio Web Accesibilidad Diagrama de Navegabilidad Estructura Presentación Comportamiento 1 Un poco de historia 2 ¾Por qué estándares?

3 Componentes de un sitio Web Estructura

Presentación Comportamiento

4 Accesibilidad

(18)

Estructura Presentación Comportamiento

(19)

Un poco de historia ¾Por qué estándares? Componentes de un sitio Web Accesibilidad Diagrama de Navegabilidad Estructura Presentación Comportamiento

Estructura

Contiene datos supeditados a su signicado estructural:

Título

Título Secundario Párrafo

Lista enumerada, de denición y ordenada

Estructuras adicionales Etc.

Se utiliza lenguaje de marcado: XHTML, XML

(20)

Presentación

Se aplica forma a una página Web: Tipografía Color Disposición Etc. Se utiliza lenguaje de presentación: CSS Se puede modicar la presentación sin afectar a la estructura

(21)

Comportamiento

Establecer el comportamiento y efectos que funcionen en diferente navegadores y plataformas

(22)

Un poco de historia ¾Por qué estándares? Componentes de un sitio Web Accesibilidad Diagrama de Navegabilidad Denición WAI Niveles de Accesibilidad 1 Un poco de historia 2 ¾Por qué estándares?

3 Componentes de un sitio Web

4 Accesibilidad Denición WAI

Niveles de Accesibilidad

(23)

Un poco de historia ¾Por qué estándares? Componentes de un sitio Web Accesibilidad Diagrama de Navegabilidad Denición WAI Niveles de Accesibilidad

Necesidad de Accesibilidad

Los seres humanos son diferentes entre si y todas los sitios web deberían acomodarse a esas diferencias de forma que cualquier persona sea capaz de utilizarlas sin problemas. Usabilidad universal, para que nadie se vea limitado en el uso de algo por causa de esas diferencias

Hay que evitar diseñar atendiendo a características de grupos de población especícos, imponiendo barreras innecesarias que podrían ser evitadas prestando más atención a las limitaciones de éstos.

(24)

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 accesibilidad Desarrollar guías para la accesibilidad

Desarrollar herramientas para evaluar y facilitar la a accesibilidad

Difusión y educación

(25)

WAI

Existen guías para ayudar al programador a crear páginas web adecuadas: http://www.w3.org/WAI/guid-tech.html

Existen navegadores alternativos para personas con discapacidades permanentes o temporales:

http://www.w3.org/WAI/References/Browsing

Existen páginas web que realizan test de evaluación de accesibilidad: 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/.

(26)

Niveles de Accesibilidad

Nivel A de Conformidad: Se han satisfecho todos los puntos de vericación de Prioridad 1;

Nivel Doble-A de Conformidad: Se han satisfecho todos los puntos de vericación de Prioridad 1 y 2;

Nivel Triple-A de Conformidad: Se han satisfecho todos los puntos de vericación de Prioridad 1, 2, y 3.

(27)

Un poco de historia ¾Por qué estándares? Componentes de un sitio Web Accesibilidad Diagrama de Navegabilidad Denición Símbolos Ejemplo 1 Un poco de historia 2 ¾Por qué estándares?

5 Diagrama de Navegabilidad Denición

Símbolos Ejemplo

(28)

Un poco de historia ¾Por qué estándares? Componentes de un sitio Web Accesibilidad Diagrama de Navegabilidad Denición Símbolos Ejemplo

Diagrama de Navegabilidad

Diagrama de UML 2.0

Permite establecer los elementos del diseño

(29)

Un poco de historia ¾Por qué estándares? Componentes de un sitio Web Accesibilidad Diagrama de Navegabilidad Denición Símbolos Ejemplo

Símbolos

(30)

Denición Símbolos Ejemplo

Diseño con Estándares Web