Acebal EstandaresWebcv

Creacin de sitios Web mediante estndares
Gira 2004 del W3C. Parada en la EUITIO

Csar Fernndez Acebal
www.cfacebal.com acebal@uniovi.es
Nacimiento de la Web
Aunque Internet comienza a desarrollarse en los aos 60, la Web no se invent hasta 1989
Su creador fue Tim-Berners Lee, en el Laboratorio Europeo de Fsica de Partculas (CERN) HTML, HTTP, un servidor Web y un navegador Los cuatro componentes esenciales de la Web
Berners-Lee cre las versiones iniciales de:

Creacin de sitios web mediante estndares Csar F. Acebal. Gira 2004 del W3C (Oviedo)
Clientes Web
Cualquier ordenador conectado a Internet con un programa capaz de realizar peticiones HTTP y mostrar las pginas HTML devueltas Hasta hace bien poco, solan ser un PC con algn navegador instalado (Internet Explorer, Netscape, Opera) Ahora, hay toda una plyade de dispositivos capaces de actuar como clientes Web
Asistentes Personales Digitales (PDA), telfonos mviles, electrodomsticos, automviles
Del texto a los grficos

Al principio, las pginas Web no eran ms que texto en blanco y negro con los enlaces entre corchetes
El navegador por aquel entonces era el Lynx
En 1993 se crea un navegador con interfaz grfica de usuario, el Mosaic

En el NCSA (National Center for Supercomputing Applications, Universidad de Illinois)
En 1994 se funda Netscape y crean el primer navegador comercial, el Netscape Navigator

En 1995, Microsoft lanza su Internet Explorer (IE)
Introduccin a HTML
Consiste en un conjunto bastante reducido de etiquetas que permiten definir la estructura de un documento
Qu es un ttulo, qu un prrafo, qu un enlace
Nunca fue pensado para definir la presentacin!

No haba etiquetas para especificar fuentes, colores
Ejemplo de documento HTML

<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Introduccin a HTML</title> </head> <body> <h1>Mi primera pgina Web</h1> ste es el equivalente al tpico Hola, mundo! pero en HTML (cuya <a href="http://www.w3.org/MarkUp/" title="Especificacin de las distintas versiones de HTML y XHTML en el W3C">especificacin</a> puede encontrarse en el sitio Web del <acronym title="World Wide Web Consortium">W3C</acronym>). </body> </html>
Presentacin de los documentos

Pronto, el sentido original del HTML comenz a desvirtuarse con la aparicin de elementos de presentacin
Por un lado, los navegadores introducan etiquetas propietarias para proporcionar diversos efectos estilsticos
Fuentes, colores
Por otro, los diseadores grficos hacan uso de trucos pensando slo en la presentacin, no en el sentido original de los elementos de HTML
Uso de tablas para maquetacin, de listas para conseguir sangrados, etctera
Separacin entre presentacin y contenido

Para tratar de reconducir la situacin creada, en 1998 el W3C public la especificacin 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 estndares de la Web

HTML, CSS, XML, XHTML, DOM http://www.w3.org
Objetivo: promover la evolucin de la Web garantizando que las distintas tecnologas funcionen bien conjuntamente Dirigido por Tim Berners-Lee, el inventor de la Web, en 1989
Premio Prncipe de Asturias de Investigacin Cientfica y Tcnica 2002

Tim Berners-Lee
La Oficina Espaola del W3C

En octubre de 2003 se present la Oficina Espaola del W3C, sita en Asturias

Concretamente, albergada en las instalaciones de la Fundacin CTIC, en el Parque Cientfico Tecnolgico de Gijn Sus representantes:
Jos Manuel Alonso

Responsable de la oficina
Adems de buen amigo :-)
Jess Garca
Coordinador
Experto en accesibilidad
Acto de presentacin de la Oficina Espaola, en el Hotel de la Reconquista (Oviedo)
10
Introduccin
Al igual que no hace mucho no era raro ver a la gente vaciar el cenicero del coche en la va pblica, cuando hoy es algo que nadie hace (todo el mundo tiene claro que es un acto incvico), el mismo cambio de actitud est empezando a producirse en la comunidad de diseadores Web con respecto a los estndares.
Problemas de no usar los estndares: el ancho de banda necesario

El cdigo espagueti, la maquetacin con montones de tablas anidadas, las etiquetas y otras redundancias doblan y hasta triplican el ancho de banda necesario en muchos sitios Web
12
Problemas de no usar los estndares: 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
13
Problemas de no usar los estndares: el ancho de banda y el servidor

Aparte, la compaa de hospedaje Web cobrar en funcin de ese ancho de banda consumido
O, si es un servidor propio, habr que invertir en lneas de ms capacidad
Por qu utilizar 60 KB por pgina si lo mismo puede hacerse con 20?
14
Problemas de no usar los estndares: los costes de desarrollo

Tambin hay que pagar a los programadores por hacer lo mismo de seis formas distintas
Junto con el cdigo necesario para enviar a cada usuario la versin adecuada a su navegador
15
Compatibilidad hacia delante

Diseando de la forma correcta, nuestras pginas Web funcionarn en los distintos navegadores, plataformas y dispositivos
Incluso cuando surjan otros nuevos
Cmo?
Usando los estndares

Lenguajes estructurales como XHTML y XML, lenguajes de presentacin como CSS, modelos de objetos como DOM y lenguajes de script como ECMAScript
16
Otras ventajas del uso de los estndares

Menores costes de produccin y mantenimiento Sitios ms accesibles para todo el mundo

Especialmente, para aqullos que tienen necesidades especiales Ms visitantes por menos dinero, mejor imagen, etctera
En resumen:
17
Obsolescencia de los sitios Web
El 99,9% de los sitios Web estn obsoletos

En los navegadores minoritarios, lectores de pantalla y en nuevos dispositivos como los PDA o los telfonos mviles de ltima generacin, la mayora de los sitios se ven muy mal o no lo hacen en absoluto
19
Los navegadores modernos y los estndares

Navegadores modernos
Aqullos que entienden HTML y XHTML, hojas de estilo (CSS), ECMAScript y el Modelo de Objetos de Documento (DOM) del W3C Usados conjuntamente, estos estndares nos permitirn ir ms all del marcado de presentacin y los lenguajes de script incompatibles y de la obsolescencia perpetua que generan Ejemplos:
Firefox 1.0, Navigator 6, Internet Explorer (IE) 6 para Windows, IE 5 para Macintosh y Opera 7
(Si bien no hay ninguno que cumpla perfectamente con los estndares)
20
El problema de las versiones

La creacin de mltiples versiones de marcado y cdigo no estndar, cada una ajustada a las particularidades de tal o cual navegador, es la fuente la obsolescencia perpetua que sufren la mayora de los sitios Web actuales (y sus propietarios) A pesar de su futilidad y de ser costosa e inmantenible, esta prctica persiste hoy da incluso cuando no es necesario
Muchos desarrolladores tratan a un navegador que cumple con los estndares como si no lo hiciera
Ejemplo: scripts para distinguir entre IE6 y las ltimas versiones del Netscape, aunque los dos admiten ECMAScript y DOM estndar, as como CSS
21

Es ms, la deteccin de navegadores y dispositivos es peor an que innecesaria:

Incluso estando constantemente actualizndolo (algo que no todos los sitios se pueden permitir) ese cdigo normalmente falla
Por ejemplo, Opera para Windows se identifica a s mismo como Explorer

Para evitar ser bloqueado por muchos sitios que exigen Explorer Naturalmente, ste no interpretar bien el cdigo especfico del Explorer
22

Adems de los scripts propietarios, los diseadores escriben marcado de presentacin que dobla el ancho de banda necesario para servir la pgina, a la vez que la hace menos accesible a los motores de bsqueda y a navegadores o dispositivos distintos de los tradicionales En resumen, estas estrategias a menudo provocan el mismo problema que estn tratando de evitar: una visualizacin inconsistente entre un navegador y otro
23
El problema de las versiones. Nuevos dispositivos

Este problema cada vez se hace ms acuciante, ante la proliferacin de nuevos dispositivos inalmbricos

Algunos sitios crean una versin ms Otros, muestran algn mensaje que promete admitir ese dispositivo prximamente
24
El problema de las versiones. XHTML y CSS

Incluso aunque utilicen XHTML y CSS, muchos diseadores de la vieja escuela, siguen haciendo mltiples versiones de sus hojas de estilo
En vez de utilizar los estndares para crear una nica versin que funcione en todos
25
Una mirada al pasado

La mayora de sitios Web adolecan de un marcado no estndar, de ActiveX y JavaScript propietarios y de un uso aberrante de las hojas de estilo (si es que llegaban a usarlas)
Realmente, es un milagro que tales sitios lleguen a verse en algn navegador
Hasta las versiones 4 y 5 de NN e IE, no es que tolerasen el uso de marcado no estndar y cdigo dependiente del navegador, sino que lo promovan
En su particular y absurda guerra de los navegadores
26
Cmo llegaban a funcionar?

Invirtiendo en costosas herramientas de publicacin que soslayaban las diferencias entre navegadores generando mltiples versiones (no estndar) ajustadas a los diferentes navegadores y plataformas
Tablas anidadas, pxeles transparentes y otros trucos con imgenes, as como etiquetas y atributos especficos de cada navegador
27
Ancho de banda
Las mltiples versiones, junto con todos esos trucos y un cdigo y marcado innecesariamente complejos incrementaba enormemente el ancho de banda necesario Si un sitio reduce el peso de sus pginas un 35%, otro tanto suceder con el ancho de banda consumido
Y, por tanto, con lo que nos cobre la empresa de hospedaje Ejemplo: La pgina principal de Yahoo! recibe varios millones de visitas cada da, lo que implica varios Gigabytes de trfico facturado
(Que simplemente eliminando sus etiquetas se reduciran considerablemente)
28
29
Cdigo fuente de la pgina de inicio de Yahoo!

<a href=r/bu>Business & Economy</a> <a href=r/bb>B2B</a>, <a href=r/fi>Finance</a>, <a href=r/bs>Shopping</a>, <a href=r/jo>Jobs</a>... <a href=r/ci>Computers & Internet</a> <a href=r/in>Internet</a>, <a href=r/ww>WWW</a>, <a href=r/sf>Software</a>, <a href=r/ga>Games</a>... <a href=r/nm>News & Media</a> <a href=r/nw>Newspapers</a>, <a href=r/tv>TV</a>, <a href=r/mg>Radio</a>... <a href=r/en>Entertainment</a> <a href=r/mo>Movies</a>, <a href=r/hu>Humor</a>, <a href=r/mu>Music</a>... <a href=r/rs>Recreation & Sports</a> <a href=r/sp>Sports</a>, <a href=r/tr>Travel</a>, <a href=r/au>Autos</a>, <a href=r/od>Outdoors</a>... <a href=r/he>Health</a> <a href=r/ds>Diseases</a>, <a href=r/dg>Drugs</a>,
30
Entonces, por qu lo siguen haciendo as?

La nica explicacin es que la compaa quiere que su sitio se vea exactamente igual en todos los navegadores
Igual en las versiones de 1995, que no saban de CSS, que en los modernos navegadores que cumplen el estndar Lo irnico es que el xito de Yahoo! se debe a su contenido, no a su diseo grfico (que prcticamente brilla por su ausencia) Nos da una idea de la estrechez de miras de muchos directivos y desarrolladores que quieren mantener a toda costa la compatibilidad hacia atrs, por encima del sentido comn, de la usabilidad y de sus propios beneficios
31
Qu es eso de la compatibilidad hacia atrs?

Los desarrolladores nos dirn que significa dar cabida a todos los usuarios
Quin puede oponerse a tal argumento?
En la prctica, significa el uso de cdigo y marcado no estndar (por propietario o desfasado) para garantizar que cada usuario vea exactamente lo mismo
Independientemente de que tenga IE2 o Netscape 7
Aunque parece el Santo Grial del desarrollo Web, tiene un coste demasiado alto (y encima no funciona)
32
No existe autntica compatibilidad hacia atrs

Siempre hay un punto de corte

Por ejemplo, ni Mosaic ni Netscape 1.0 entienden tablas, a diferencia de Netscape 1.1 o IE2, que s lo hacen Siempre hay que definir un navegador bsico como aqul ms antiguo que contemplar el sitio Web
Y se plagan las pginas de trucos y etiquetas propietarias que aaden peso a cada pgina
As como el cdigo necesario para detectar el navegador
33
Dejar fuera a clientes potenciales: disear para un navegador concreto

Pero si es malo tratar de que nuestro sitio se muestre hasta en los navegadores ms antiguos igual que en los modernos, peor es disearlo para un nico navegador
Por ejemplo, Internet Explorer para Windows

Trata de reducir costes, dejando fuera a entre un 15 y un 25% de los clientes potenciales Pero no hay ninguna garanta de que vaya a continuar siendo el navegador dominante
Ni siquiera que lo sean los navegadores de escritorio, como tales, frente a otros dispositivos
34
35
La Web naci como un medio independiente de plataforma

Con nuestros esfuerzos por que los sitios se vean exactamente igual en distintos navegadores hemos perdido de vista el verdadero potencial de la Web
No podemos entenderla como si fuera un medio impreso, o como si estuvisemos desarrollando aplicaciones nativas, pretendiendo controlar cada pxel de la pantalla
36
Problema: laxitud de los navegadores

Los navegadores tratan de mostrar las pginas aunque stas tengan errores
Etiquetas o atributos desconocidos, etiquetas sin cerrar, errores de JavaScript, enlaces rotos Ejemplo:
<td <td width="100%"><ont width="100%"><ont face="verdana,helvetica,arial" face="verdana,helvetica,arial" size="+1" size="+1" color="#CCCC66">Join color="#CCCC66">Join now!</ont></td> now!</ont></td>
37
Problema: laxitud de los navegadores

Eso llev a una serie de malos hbitos

De hecho, muchos desarrolladores ni siquiera conocen los estndares (todo se lo fan al DreamWeaver y al IE)
Por cierto, el ejemplo de la pgina anterior, con estndares, quedara as:

<h3>Join <h3>Join now!</h3> now!</h3>
38
El remedio
Los nuevos navegadores cada vez son ms intolerantes con los errores de cdigo y marcado Podemos disear sitios Web que funcionen en numerosos navegadores, plataformas y dispositivos
Solucionando los problemas de la obsolescencia y el bloqueo de usuarios logrando una Web ms potente, accesible y racionalmente construida La cura a dicha enfermedad de la obsolescencia ha de venir de la mano de los estndares Web
Compatibilidad hacia delante 39
El remedio
Las tecnologas como CSS, XHTML, ECMAScript y DOM permiten hoy da a los diseadores:
Lograr un control ms preciso sobre la maquetacin, posicionamiento y tipografa de las pginas en los navegadores grficos, a la vez que permiten a los usuarios adaptar la presentacin a sus necesidades Desarrollar sofisticados comportamientos que funcionan en mltiples navegadores y plataformas Cumplir con las leyes y guas de accesibilidad sin sacrificar la apariencia esttica Redisear en horas en vez de das o semanas, con la consiguiente reduccin de costes
40
El remedio
Que los sitios funcionen en varios navegadores sin tener que crear distintas versiones Lo mismo en el caso de dispositivos no tradicionales (PDA, telfonos mviles, lectores Braille, lectores de pantalla) Ofrecer versiones impresas de las pginas mucho ms sofisticadas
De nuevo, sin tener que crear una versin printerfriendly
Separar el estilo de la estructura y el comportamiento
41
El remedio
Iniciar la transicin del antiguo HTML a lo que ser el marcado basado en XML del futuro Garantizar que los sitios as diseados y construidos funcionarn correctamente en todos los navegadores actuales que cumplen con los estndares y se vern razonablemente bien en los viejos Y que seguirn funcionando en los futuros navegadores y dispositivos
Incluyendo los que an ni nos imaginamos (compatibilidad hacia delante)
Etctera
42
Disear sin y con estndares

Antes de ver cmo los estndares nos permiten alcanzar dichos objetivos, echemos un vistazo a los mtodos de la vieja escuela a los que pretenden sustituir, para entender mejor cmo esas tcnicas desfasadas vienen a perpetuar el ciclo de obsolescencia.
Suck.com
Una de las primeras columnas de opinin de la Web La columna del da apareca en la pgina inicial
Entonces mediados de los 90, esto era toda una innovacin, sin las molestas pantallas de bienvenida, pginas de ndice, etctera
Adems, fue pionero en ofrecer un diseo minimalista, elegante (frente a los abigarrados diseos de entonces, cuando todo el mundo jugaba a ser diseador grfico)
44
45
Un inciso: ejemplo de diseo anticuado

El siguiente ejemplo muestra los diseos tpicos de aquella poca: letras churriguerescas, abuso de la etiqueta <center> introducida por Netscape 1.1, los mosaicos como imgenes de fondo, gifs animados

http://moonsdesigns.com/tutorials/frames/glow.html El contenido est centrado en una tabla HTML que tambin est, a su vez, centrada Se aplica una imagen de fondo que se repite a la tabla y otra a la pgina que la contiene El problema es que dicha pgina es de 2002!
46
47
Volvamos al caso de Suck

Por aquel entonces, no haba herramientas de diseo HTML

Todava se le consideraba un lenguaje de marcado estructural, derivado de SGML, no de diseo, como PostScript de Adobe o CSS Con mucho ingenio, creatividad y paciencia
Cmo controlaban la presentacin?

48
Suck.com
Los creadores del sitio escribieron un script en Perl que contara los caracteres del texto y fuera insertando etiquetas (de prrafo)
One of the strange-but-truisms of minor peddling is that using the computer and other <a href="http://www.hotwired.com/fetish/">Fetish</a> fodder somehow empowers children - plug in, log on, attend a good college on full scholarship, and get the hell out of the house.
49
Trucos
Este tipo de trucos de HTML era el nico modo de lograr efectos visuales en 1995 Comenzaron a surgir por doquier trucos similares, igualmente creativos
Ante la desesperacin de los creadores de HTML Pero los diseadores se vean obligados a ello por los clientes, que cada vez demandaban sitios ms atractivos visualmente
50
Si funciona, cul es el problema?

Cmo leera el sitio de Suck un lector de pantalla?

One of the strange-but-truisms of... minor peddling is that using the... computer and other Fetish fodder... somehow empowers children plug... [...] [pausa] [pausa] [pausa] [pausa]
Adems de la dificultad de actualizacin de las pginas
51
Nuevos sitios, viejas formas

El problema no es que se usasen dichos trucos en los 90, sino que sigan emplendose hoy da
Ejemplo: el Festival de Piano de Gilmore

www.thegilmore.com Un diseo elegante conseguido a base de tablas e imgenes en vez de texto
52
53
Dificultad de mantenimiento
Qu ocurre si hay que aadir alguna opcin a la pgina principal?

Lo normal sera aadir un nuevo enlace de texto Hay que redisear el grfico, volver a partirlo en varios trozos y optimizarlo, y escribir de nuevo el cdigo HTML de las tablas, as como el mapa de imgenes y el cdigo JavaScript asociado
Incluso los cambios ms nimios incurren en costes significativos

Cuando una tarea tan simple como aadir un enlace requiere horas de trabajo hay que replantearse nuestros mtodos de desarrollo
54
Ejemplo
Aadmosle una hoja de estilo para darle bordes y mrgenes a las tablas y ver as cmo est construida
55
Exclusin de numerosos visitantes potenciales

Es el otro gran problema de esta pgina Tal y como est implementada, el sitio es totalmente inaccesible a los usuarios de:
Lectores de pantalla, navegadores de texto, PDA, telfonos mviles, navegadores Braille o incluso navegadores convencionales con las imgenes desactivadas
Ejercicio: probar a visualizar la pgina con un navegador de texto, como Lynx

Emulador: www.delorie.com/web/lynxview.html
56
La pgina en Lynx
57
58
Significa esto que los grficos sean perniciosos?

En absoluto
Las imgenes y la belleza esttica son muy importantes para el xito de un sitio Web El mismo diseo puede lograrse de manera que sea accesible a todo el mundo
Lo malo es que este sitio no es una excepcin

Al contrario, las tcnicas empleadas son bien conocidas
59
Los problemas de desarrollar sin seguir los estndares

Resumiendo, los sitios Web as creados suelen verse bien en los navegadores ms populares y en las condiciones normales
De tamao de pantalla, resolucin, tamao de la ventana del navegador, preferencias normales
Cuando no se dan todas esas condiciones, el sitio se degrada

Incluso llega a ser totalmente inaccesible
60
Recomendacin
Disear nuestras pginas pensando en cmo se vern stas en un navegador de texto

Grandes posibilidades de que la pgina sea tambin accesible en otros dispositivos Nos ayudar a pensar en el marcado estructural, en vez de en el incorrecto de presentacin
61
Diseo con estndares

Veamos ahora cmo los estndares Web ayudan a resolver los problemas planteados.
Los tres componentes de una pgina Web
Estructura Estructura
Presentacin Presentacin
HTML XHTML XML Comportamiento Comportamiento
CSS1 CSS2
Los tres componentes de una pgina Web: estructura, presentacin y comportamiento
ECMAScript DOM
63
Estructura: XHTML
Un lenguaje de marcado, como XHTML, contiene texto formateado de acuerdo con su significado estructural: ttulos, subttulos, prrafos, listas, etctera
www.w3.org/TR/xhtml1/
<h2>Estructura</h2> <ul> <li>Un lenguaje de marcado, como <a href=http://www.w3.org/ TR/xhtml1 title=XHTML 1.0><acronym title=Extensible hypertext markup language>XHTML</acronym ></a>, contiene texto formateado de acuerdo con su significado estructural: ttulos, subttulos, prrafos, listas, etctera</li> </ul>
64
Estructura: XHTML
El marcado puede contener tambin alguna indicacin que ser til para que luego el diseador grfico le aplique el formato adecuado
<div id="menu">[Aqu ira el men]</div> <div id="contenido"> [Aqu el contenido en s de la pgina] </div>
65
Estructura: XML
XML ofrece mucha ms flexibilidad y semntica a los documentos

www.w3.org/TR/2004/REC-xml-20040204/
XHTML
El nico lenguaje de marcado que, hoy por hoy, entienden todos los navegadores (No es ms que una reformulacin de HTML para que cumpla las normas sintcticas de XML)
66
Presentacin
Las hojas de estilo (Cascading Style Sheet o CSS) son un lenguaje de presentacin que permiten formatear la pgina Web

www.w3.org/Style/CSS/ Controlan la tipografa, posicionamiento, colores, etctera En muchos casos, eliminan la necesidad de usar tablas para maquetar; y, siempre, el uso de etiquetas y cosas como stas:
<td bgcolor="#FFCC00" align="left" valign="top"> </td>
67
Separacin de presentacin y contenido

Las hojas de estilo permiten separar la presentacin del contenido:

Aplicar un estilo a todas las pginas del sitio Cambiar el XHTML sin afectar a la presentacin Cambiar el estilo sin tocar las pginas Se necesita una nueva versin para imprimir?
Basta con hacer una nueva hoja de estilo, sin afectar a cmo se muestre la pgina en pantalla
Etctera
68
Comportamiento
Un modelo de objetos (W3C DOM) estndar funciona conjuntamente con CSS, XHTML y ECMAScript para crear lo que se conoce como HTML dinmico

www.w3.org/DOM/DOMTR www.ecma-international.org/publications/standards/Ecma-262.htm
Cmo sabemos si una pgina est hecha con HTML dinmico?

Fijndonos en la parte inferior izquierda de la barra de estado del navegador:
69
Ejemplos
www.happycog.com
Probarlo en Lynx Netscape 4, Lynx, Palm Pilot, Pocket PC
www.webstandards.org

www.alistapart.org Y todo con un solo documento!
70
Algunos problemas con los estndares

Si decimos que los estndares Web son la clave para lograr sitios accesibles y menos costosos de desarrollar, por qu no estn plenamente incorporados a la prctica comn de las empresas de creacin de sitios Web? A continuacin me centrar en mostrar cmo podemos vender los estndares a nuestros colegas, a nuestros clientes o a nuestros jefes.
Maravillosos a la vista, cdigo repulsivo

De los miles de sitios Web examinados en la octava edicin de los premios Communication Arts Interactive (2002), ninguno estaba escrito en HTML vlido, estructural
Jeffrey Zeldman

Ms de la mitad estaban enteramente en Flash La mayora de los otros slo funcionaban o bien en navegadores 4.0, o slo en IE4 o en Netscape 4 Es uno de los concursos de diseo que cuentan con ms prestigio en la industria!
72
73
Objetivos comunes
Todos los sitios Web enviados a concurso comparten (o deberan compartir), en el fondo, los mismos fines:
Atraer a su pblico objetivo, animar a la participacin del usuario, ser fciles de usar y, en definitiva, ofrecer una buena imagen de la organizacin, producto o servicio que estn representando Obtener los mayores beneficios posibles para nuestra inversin
Sitios que funcionen para tantas personas y en tantas plataformas como sea posible Evitar incompatibilidades entre navegadores y plataformas
Crear un sitio que siga funcionando en un futuro sin necesidad de estar cambindolo constantemente
Hay que invertir el siempre escaso tiempo en actualizar el contenido y aadir nuevos servicios, y no malgastarlo en volver a codificar cada vez que aparece un nuevo navegador o dispositivo
74
Entonces?
Los estndares son la clave para lograr esos objetivos Entonces
por qu la comunidad de desarrolladores Web no se ha lanzado de cabeza a ellos?
75
Percepciones errneas
En primer lugar, muchos desarrolladores siguen manteniendo la creencia (errnea) de que los estndares Web son incompatibles con un buen diseo grfico
(Es lo que ocurre, por ejemplo, con la accesibilidad)
Por otro lado, quienes crean los estndares no se dedican a venderlos

Vanse algunos sitios del W3C (o el mo propio :-) ) No hay nada mejor para vencer esa falsa percepcin que un sitio con un buen diseo que use estndares
76
77
78
Otras razones
Quienes programan en el lado del servidor (back-end), con JSP, ASP, .NET, etc. no suelen prestar demasiada atencin a la capa de presentacin (front-end) Las herramientas de autor (los editores WYSIWYG What you see is what you get) no se adaptan bien a los estndares

Macromedia Dreamweaver, Adobe GoLive Aptas slo para diseadores expertos
Tal vez la ms importante: hasta hace bien poco, los principales navegadores no cumplan con los estndares
79
2000: el ao que los navegadores cambiaron de era

En marzo de 2000 sale IE5 para Macintosh

Cumpla con XHTML, ECMAScript, casi toda la especificacin CSS1, parte de CSS2 y casi todo DOM DOCTYPE switching Text Zoom
Otras caractersticas:

80
Demasiado tarde?
El problema es que, para aquel entonces, muchos desarrolladores ya haban decidido prescindir de los estndares
Despus de muchos aos viendo cmo los navegadores los obviaban
La especificacin de CSS1 tuvo lugar en las Navidades de 1996 Unos meses ms tarde, IE3 le daba un soporte rudimentario
Fue uno de los primeros pasos que dio Microsoft para comenzar a afianzarse como alternativa al entonces omnipresente Netscape
81
La era de los navegadores 4.0

Aunque todava lleno de fallos, IE4 mejoraba notablemente el soporte de CSS de IE3 Netscape 4 ofreca por primera vez una implementacin de CSS hecha en el ltimo minuto
Plagada de errores (aunque mejor que IE3)

www.ddj.com/webreview/style/css1/leaderboard.shtml
El problema era que IE3 no lo usaba nadie, y hasta hace bien poco Netscape 4 segua teniendo millones de usuarios
Muchos sitios Web deban dar soporte a Netscape 4 (confundiendo dar soporte con que se vea igual pxel a pxel y con idntico comportamiento)
82
Malos navegadores conducen a malas prcticas

CSS permite cambiar el modo en que el navegador muestra los elementos HTML
No en Netscape 4, que aada su estilo predeterminado al definido por la hoja de estilo

Algunos diseadores abandonaron CSS Otros, abandonaron el marcado estructural

<div class="titulo1"> en vez de <h1> Qu significa eso para un lector de pantalla?
Aunque ya no es necesario, hay quien sigue empleando esos hbitos

Incluyendo herramientas de publicacin y editores Web visuales
83
Malos navegadores conducen a malas prcticas

Otro problema de Netscape 4 era la casi total falta de herencia Con CSS podemos aplicar un estilo al <body> que heredar cualquier elemento hijo (<h1>, ) En Netscape 4 haca falta escribir reglas redundantes:
body, td, h1, p { font-family: Verdana, Arial, Helvetica, sans-serif; }
84
Aadir comportamiento
An peor era el soporte para aadir comportamiento dinmico a las pginas por medio de scripts Cada navegador tena su propio modelo de objetos

Netscape 4 document.layers IE4 document.all
Solucin: codificar dos veces lo mismo
85
Aadir comportamiento
Ni siquiera se ponan de acuerdo en el lenguaje a emplear:

Netscape 4 JavaScript
No lo estandarizaban, como haban prometido

Ventaja competitiva, pensaban
IE4 ActiveX
Para complicar las cosas, Microsoft cre su propia versin de JavaScript, JScript
Mediante ingeniera inversa
JavaScript, JScript, ActiveX, diferentes modelos de objetos una pesadilla!

86
Al fin, la estandarizacin del HTML dinmico

ECMA estandariz JavaScript: ECMAScript W3C estandariz un DOM Netscape e IE soportan ambos
Pero tras muchos aos de incompatibilidades que han hecho que surjan expertos en unas u otras tecnologas propietarias
Sitios slo IE, por ejemplo
O bien que se decanten directamente por soluciones como Flash

Ejemplo: www.renaultf1.com/es/public/flash/
87
Las pginas del W3C

CSS2 es un potente lenguaje de presentacin que facilita las necesidades de los diseadores
Pero cuesta darse cuenta de ello a la vista del sitio Web de la especificacin:
http://www.w3.org/TR/REC-CSS2/
Parece la tpica pgina personal diseada por nuestro vecino con Microsoft FrontPage en una tarde de aburrimiento
88
89
El estilo de redaccin del W3C

Dejando aparte la apariencia de las pginas, lo cierto es que las especificaciones del W3C son bastante duras de leer
Tras veinte minutos de lectura, lo que apetece es ir corriendo a una tienda a comprar Macromedia Flash Jeffrey Zeldman Las especificaciones van dirigidas a los programadores que habrn de implementar la tecnologa, no a quienes la tienen que usar No debemos pretender utilizarlas como guas de aprendizaje
W3C est pensado para ingenieros, no para el pblico

90
Visin academicista frente a la empresarial

W3C vive en un mundo contemplativo que le permite concentrarse en el potencial de la Web sin presiones El problema es que a los diseadores, desarrolladores y los propietarios de sitios Web s les importa el aspecto y la facilidad de uso
Es difcil persuadirlos de que los textos del W3C se encuentra la clave de su xito Qu hacen en vez de eso?
Buscan las llamativas presentaciones de los gigantes de la industria

Macromedia Flash, Macromedia Dreamweaver, Adobe GoLive
91
Conocimiento de productos, no de los estndares

Es lo que ocurri con muchos desarrolladores Web (especialmente, en el caso de los diseadores)
Por cada uno que consultaba las especificaciones del W3C haba que acudan a los sitios de Netscape, Microsoft, Macromedia, Adobe y otros Estos sitios tienden a estar bien diseados y centrados en las necesidades de sus clientes
Manuales escritos para su fcil comprensin por parte una audiencia profesional
Mencin especial merece el caso de Flash
92
Flash
Todo empez con un plug-in que permita a los diseadores insertar grficos vectoriales y animaciones en las pginas Macromedia lo convirti en una herramienta de autor y un lenguaje de programacin, ActionScript Clave de su xito:
Funcionaba igualmente bien en Netscape, IE y Opera, as como en Mac OS, Linux, Unix y Windows Algunos diseadores dijeron adis al HTML, CSS y todas sus incompatibilidades y se apuntaron a la fiebre del Flash
93
Flash
Al principio, un montn de logotipos, pantallas con el texto Cargando y desesperantes intros hicieron que adquiriera muy mala fama Tras este abuso de la tecnologa, vinieron sitios como One9ine o Juxt Interactive, que proporcionaban sofisticadas experiencias de usuario
Muy difciles de imitar empleando marcado estndar, CSS, SVG y DOM
No obstante, Flash 4 adoleca de numerosos problemas de usabilidad y accesibilidad

Entre los ms crticos estaba Jakob Nielsen En 2002, Macromedia mejor notablemente estas caractersticas en Flash MX y contrat a Nielsen como consultor
Quien cambi de opinin con respecto al producto :-)
94
Problemas de Flash
Slo es apropiado para determinados proyectos

Aqullos que se basan ms en el diseo que en el contenido o la interactividad con el usuario

Amazon no est hecho con Flash (ni Google, ni Yahoo!...)
El otro problema es que muchos diseadores han olvidado cmo usar los estndares

(Si es que alguna vez lo supieron, claro est) Nos encontramos presentaciones en Flash en sitios que exigen un determinado navegador (?)
95
Para terminar
Los estndares no coartan la creatividad ni la apariencia esttica

Como s ocurra en la era de los navegadores 4.0 A la que no podemos obviar No caer en el lado oscuro de la Fuerza
Hoy da ya son una realidad

Hay que usar la tecnologa para el bien

96

Acebal EstandaresWebcv

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Acebal EstandaresWebcv

Cargado por

Copyright:

Formatos disponibles

Creacin de sitios Web mediante estndares

Gira 2004 del W3C. Parada en la EUITIO

Berners-Lee cre las versiones iniciales de:

Asistentes Personales Digitales (PDA), telfonos mviles, electrodomsticos, automviles

Del texto a los grficos

El navegador por aquel entonces era el Lynx

En 1993 se crea un navegador con interfaz grfica de usuario, el Mosaic

En el NCSA (National Center for Supercomputing Applications, Universidad de Illinois)

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

En 1995, Microsoft lanza su Internet Explorer (IE)

Qu es un ttulo, qu un prrafo, qu un enlace

Nunca fue pensado para definir la presentacin!

No haba etiquetas para especificar fuentes, colores

Ejemplo de documento HTML

Presentacin de los documentos

Uso de tablas para maquetacin, de listas para conseguir sangrados, etctera

Separacin entre presentacin y contenido

Cascading Style Sheets (CSS)

El World Wide Web Consortium (W3C)

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

Premio Prncipe de Asturias de Investigacin Cientfica y Tcnica 2002

La Oficina Espaola del W3C

En octubre de 2003 se present la Oficina Espaola del W3C, sita en Asturias

Jos Manuel Alonso

Adems de buen amigo :-)

Problemas de no usar los estndares: el ancho de banda necesario

Problemas de no usar los estndares: el ancho de banda y los usuarios

Problemas de no usar los estndares: el ancho de banda y el servidor

O, si es un servidor propio, habr que invertir en lneas de ms capacidad

Por qu utilizar 60 KB por pgina si lo mismo puede hacerse con 20?

Problemas de no usar los estndares: los costes de desarrollo

Compatibilidad hacia delante

Incluso cuando surjan otros nuevos

Usando los estndares

Otras ventajas del uso de los estndares

Menores costes de produccin y mantenimiento Sitios ms accesibles para todo el mundo

Obsolescencia de los sitios Web

El 99,9% de los sitios Web estn obsoletos

Los navegadores modernos y los estndares

El problema de las versiones

El problema de las versiones

Es ms, la deteccin de navegadores y dispositivos es peor an que innecesaria:

Por ejemplo, Opera para Windows se identifica a s mismo como Explorer

El problema de las versiones

El problema de las versiones. Nuevos dispositivos

El problema de las versiones. XHTML y CSS

Una mirada al pasado

Realmente, es un milagro que tales sitios lleguen a verse en algn navegador

En su particular y absurda guerra de los navegadores

Cmo llegaban a funcionar?

(Que simplemente eliminando sus etiquetas <font> se reduciran considerablemente)

Cdigo fuente de la pgina de inicio de Yahoo!

Entonces, por qu lo siguen haciendo as?

Qu es eso de la compatibilidad hacia atrs?

Quin puede oponerse a tal argumento?

Independientemente de que tenga IE2 o Netscape 7

No existe autntica compatibilidad hacia atrs

Siempre hay un punto de corte

As como el cdigo necesario para detectar el navegador

Dejar fuera a clientes potenciales: disear para un navegador concreto

Por ejemplo, Internet Explorer para Windows

La Web naci como un medio independiente de plataforma

Problema: laxitud de los navegadores