Diseño con Estándares Web B. Cristina Pelayo García-Bustelo Creación de Sitios Web con XHTML, CSS y JavaScript Agaete 2007
1 Un poco de historia 2 3 4 5
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
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, electrodomésticos, automóviles,... )
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 En 1995, Microsoft lanza su Internet Explorer(IE)
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...
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,... )
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 Cascading Style Sheets (CSS)
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
Problemas de no usar estándares Ventajas de usar estándares Navegadores modernos y los estándares 1 Un poco de historia 2 Problemas de no usar estándares Ventajas de usar estándares Navegadores modernos y los estándares 3 4 5
El ancho de banda necesario Problemas de no usar estándares Ventajas de usar estándares Navegadores modernos y los estándares 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
Problemas de no usar estándares Ventajas de usar estándares Navegadores 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 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?
Problemas de no usar estándares Ventajas de usar estándares Navegadores modernos y los estándares 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
Compatibilidad hacia adelante Problemas de no usar estándares Ventajas de usar estándares Navegadores modernos y los estándares 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
Problemas de no usar estándares Ventajas de usar estándares Navegadores 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
Problemas de no usar estándares Ventajas de usar estándares Navegadores 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á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
Estructura Presentación Comportamiento 1 Un poco de historia 2 3 Estructura Presentación Comportamiento 4 5
La trinidad de los estándares Web Estructura Presentación Comportamiento
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 Si se crea correctamente es TOTALMENTE portable
Estructura Presentación Comportamiento 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
Estructura Presentación Comportamiento Comportamiento Establecer el comportamiento y efectos que funcionen en diferente navegadores y plataformas ECMAScript y DOM
Denición WAI Niveles de 1 Un poco de historia 2 3 4 Denición WAI Niveles de 5
Denición WAI Niveles de Necesidad de 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.
WAI Un poco de historia Denición WAI Niveles de 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 Coordinación entre investigación y desarrollo
Denición WAI Niveles de 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/.
Denición WAI Niveles de Niveles de 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.
Denición Símbolos Ejemplo 1 Un poco de historia 2 3 4 5 Denición Símbolos Ejemplo
Denición Símbolos Ejemplo Diagrama de UML 2.0 Permite establecer los elementos del diseño Se puede dibujar con herramientas como Enterprise Architect.
Símbolos Un poco de historia Denición Símbolos Ejemplo
Denición Símbolos Ejemplo