Acebal EstandaresWeb

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
z Su creador fue Tim-Berners Lee, en el Laboratorio
Europeo de Fsica de Partculas (CERN)
{ Berners-Lee cre las versiones iniciales de:
z HTML, HTTP, un servidor Web y un navegador
z Los cuatro componentes esenciales de la Web
Creacin de sitios web mediante estndares

Csar F. Acebal. Gira 2004 del W3C (Oviedo) 2
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
z El navegador por aquel entonces era el Lynx
{ En 1993 se crea un navegador con interfaz grfica de
usuario, el Mosaic
z 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
z 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
z Qu es un ttulo, qu un prrafo, qu un
enlace
{ Nunca fue pensado para definir la
presentacin!
z 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
z Por un lado, los navegadores introducan etiquetas
propietarias para proporcionar diversos efectos estilsticos
{ Fuentes, colores
z 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
z Cascading Style Sheets (CSS)

El World Wide Web Consortium
(W3C)
{ Consorcio formado por cerca de 500 organizaciones
que dicta los estndares de la Web
z HTML, CSS, XML, XHTML, DOM
z 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
z Premio Prncipe de Asturias de
Investigacin Cientfica y
Tcnica 2002
Creacin de sitios web mediante estndares Tim Berners-Lee

La Oficina Espaola del W3C
{ En octubre de 2003 se present la Oficina Espaola del
W3C, sita en Asturias
z Concretamente, albergada en las instalaciones de la
Fundacin CTIC, en el Parque Cientfico Tecnolgico de
Gijn
z Sus representantes:
{ Jos Manuel Alonso
z Responsable de la oficina
{ Adems de buen amigo :-)
{ Jess Garca
z Coordinador
{ Experto en accesibilidad
Acto de presentacin de la
Oficina Espaola, en el Hotel
Creacin de sitios web mediante estndares de la Reconquista (Oviedo)
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

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

el ancho de banda y el servidor
{ Aparte, la compaa de hospedaje Web

cobrar en funcin de ese ancho de banda
consumido
z 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?

los costes de desarrollo
{ Tambin hay que pagar a los

programadores por hacer lo mismo de
seis formas distintas
z Junto con el cdigo necesario para enviar a
cada usuario la versin adecuada a su
navegador

Compatibilidad hacia delante
{ Diseando de la forma correcta, nuestras pginas
Web funcionarn en los distintos navegadores,
plataformas y dispositivos
z Incluso cuando surjan otros nuevos
{ Cmo?
z 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

Otras ventajas del uso de los
estndares
{ Menores costes de produccin y
mantenimiento
{ Sitios ms accesibles para todo el mundo
z Especialmente, para aqullos que tienen
necesidades especiales
{ En resumen:
z Ms visitantes por menos dinero, mejor
imagen, etctera

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

Los navegadores modernos y los
estndares
{ Navegadores modernos
z Aqullos que entienden HTML y XHTML, hojas de estilo
(CSS), ECMAScript y el Modelo de Objetos de Documento
(DOM) del W3C
z 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
z Ejemplos:
{ Firefox 1.0, Navigator 6, Internet Explorer (IE) 6 para
Windows, IE 5 para Macintosh y Opera 7
z (Si bien no hay ninguno que cumpla perfectamente con
los estndares)

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

{ Es ms, la deteccin de navegadores y
dispositivos es peor an que innecesaria:
z 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
z Para evitar ser bloqueado por muchos sitios que exigen
Explorer
z Naturalmente, ste no interpretar bien el cdigo
especfico del Explorer

{ 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

El problema de las versiones.
Nuevos dispositivos
{ Este problema cada vez se hace ms

acuciante, ante la proliferacin de nuevos
dispositivos inalmbricos
z Algunos sitios crean una versin ms
z Otros, muestran algn mensaje que promete
admitir ese dispositivo prximamente

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
z En vez de utilizar los estndares para crear
una nica versin que funcione en todos

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)
z 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
z En su particular y absurda guerra de los navegadores

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
z Tablas anidadas, pxeles transparentes y otros
trucos con imgenes, as como etiquetas y
atributos especficos de cada navegador

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
z Y, por tanto, con lo que nos cobre la empresa de
hospedaje
z 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)

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

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
z Igual en las versiones de 1995, que no saban de CSS,
que en los modernos navegadores que cumplen el
estndar
z Lo irnico es que el xito de Yahoo! se debe a su
contenido, no a su diseo grfico (que prcticamente
brilla por su ausencia)
z 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

Qu es eso de la compatibilidad
hacia atrs?
{ Los desarrolladores nos dirn que significa dar
cabida a todos los usuarios
z 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
z 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)
No existe autntica compatibilidad
hacia atrs
{ Siempre hay un punto de corte

z Por ejemplo, ni Mosaic ni Netscape 1.0
entienden tablas, a diferencia de Netscape 1.1
o IE2, que s lo hacen
z 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
z As como el cdigo necesario para detectar el
navegador

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
z 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
z Ni siquiera que lo sean los navegadores de escritorio,
como tales, frente a otros dispositivos

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
z No podemos entenderla como si fuera un
medio impreso, o como si estuvisemos
desarrollando aplicaciones nativas,
pretendiendo controlar cada pxel de la
pantalla

Problema: laxitud de los
navegadores
{ Los navegadores tratan de mostrar las

pginas aunque stas tengan errores
z Etiquetas o atributos desconocidos, etiquetas
sin cerrar, errores de JavaScript, enlaces
rotos
z Ejemplo:
<td
<td width="100%"><ont
width="100%"><ont
face="verdana,helvetica,arial"
face="verdana,helvetica,arial" size="+1"
size="+1"
color="#CCCC66">Join
class="header">Join
now!</ont></td>
now!</ont></td>

Problema: laxitud de los
navegadores
{ Eso llev a una serie de malos hbitos

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

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
z Solucionando los problemas de la obsolescencia y el
bloqueo de usuarios logrando una Web ms
potente, accesible y racionalmente construida
z La cura a dicha enfermedad de la obsolescencia ha
de venir de la mano de los estndares Web
{ Compatibilidad hacia delante

El remedio
{ Las tecnologas como CSS, XHTML, ECMAScript y DOM
permiten hoy da a los diseadores:
z 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
z Desarrollar sofisticados comportamientos que funcionan
en mltiples navegadores y plataformas
z Cumplir con las leyes y guas de accesibilidad sin sacrificar
la apariencia esttica
z Redisear en horas en vez de das o semanas, con la
consiguiente reduccin de costes

El remedio
z Que los sitios funcionen en varios navegadores sin
tener que crear distintas versiones
z Lo mismo en el caso de dispositivos no tradicionales
(PDA, telfonos mviles, lectores Braille, lectores de
pantalla)
z Ofrecer versiones impresas de las pginas mucho
ms sofisticadas
{ De nuevo, sin tener que crear una versin printer-
friendly
z Separar el estilo de la estructura y el
comportamiento

El remedio
z Iniciar la transicin del antiguo HTML a lo que ser
el marcado basado en XML del futuro
z 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
z Y que seguirn funcionando en los futuros
navegadores y dispositivos
{ Incluyendo los que an ni nos imaginamos
(compatibilidad hacia delante)
z Etctera

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
z 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)

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
z http://moonsdesigns.com/tutorials/frames/glow.html
z El contenido est centrado en una tabla HTML que
tambin est, a su vez, centrada
z Se aplica una imagen de fondo que se repite a la tabla y
otra a la pgina que la contiene
z El problema es que dicha pgina es de 2002!

Volvamos al caso de Suck
{ Por aquel entonces, no haba

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

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.

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
z Ante la desesperacin de los creadores de
HTML
z Pero los diseadores se vean obligados a ello
por los clientes, que cada vez demandaban
sitios ms atractivos visualmente

Si funciona, cul es el problema?
{ Cmo leera el sitio de Suck un lector de

pantalla?
One of the strange-but-truisms of... [pausa]
minor peddling is that using the... [pausa]
computer and other Fetish fodder... [pausa]
somehow empowers children plug... [pausa]
[...]
{ Adems de la dificultad de actualizacin

de las pginas

Nuevos sitios, viejas formas
{ El problema no es que se usasen dichos

trucos en los 90, sino que sigan
emplendose hoy da
z Ejemplo: el Festival de Piano de Gilmore
{ www.thegilmore.com
{ Un diseo elegante conseguido a base de
tablas e imgenes en vez de texto

Dificultad de mantenimiento
{ Qu ocurre si hay que aadir alguna opcin a la
pgina principal?
z Lo normal sera aadir un nuevo enlace de texto
z 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
z Cuando una tarea tan simple como aadir un enlace
requiere horas de trabajo hay que replantearse nuestros
mtodos de desarrollo

Ejemplo
{ Aadmosle una hoja de estilo para darle

bordes y mrgenes a las tablas y ver as
cmo est construida

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:
z 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

La pgina en Lynx

Significa esto que los grficos
sean perniciosos?
{ En absoluto
z Las imgenes y la belleza esttica son muy
importantes para el xito de un sitio Web
z El mismo diseo puede lograrse de manera
que sea accesible a todo el mundo
{ Lo malo es que este sitio no es una
excepcin
z Al contrario, las tcnicas empleadas son bien
conocidas

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
z De tamao de pantalla, resolucin, tamao de
la ventana del navegador, preferencias
normales
{ Cuando no se dan todas esas condiciones,
el sitio se degrada
z Incluso llega a ser totalmente inaccesible

Recomendacin
{ Disear nuestras pginas pensando en

cmo se vern stas en un navegador de
texto
z Grandes posibilidades de que la pgina sea
tambin accesible en otros dispositivos
z Nos ayudar a pensar en el marcado
estructural, en vez de en el incorrecto de
presentacin

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 CSS1
XHTML CSS2
XML
Los tres componentes
Comportamiento de una pgina Web:
Comportamiento estructura,
presentacin y
comportamiento
ECMAScript
DOM
Estructura: XHTML
{ Un lenguaje de <h2>Estructura</h2>
<ul>
marcado, como <li>Un lenguaje de
XHTML, contiene texto marcado, como <a
formateado de href=http://www.w3.org/
TR/xhtml1 title=XHTML
acuerdo con su 1.0><acronym
significado title=Extensible
estructural: ttulos, hypertext markup
language>XHTML</acronym
subttulos, prrafos, ></a>, contiene texto
listas, etctera formateado de acuerdo
z www.w3.org/TR/xhtml1/ con su significado
estructural: ttulos,
subttulos, prrafos,
listas, etctera</li>
</ul>
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>

Estructura: XML
{ XML ofrece mucha ms flexibilidad y

semntica a los documentos
z www.w3.org/TR/2004/REC-xml-20040204/
{ XHTML
z El nico lenguaje de marcado que, hoy por
hoy, entienden todos los navegadores
z (No es ms que una reformulacin de HTML
para que cumpla las normas sintcticas de
XML)

Presentacin
{ Las hojas de estilo (Cascading Style Sheet o CSS)
son un lenguaje de presentacin que permiten
formatear la pgina Web
z www.w3.org/Style/CSS/
z Controlan la tipografa, posicionamiento, colores,
etctera
z 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>

Separacin de presentacin y
contenido
{ Las hojas de estilo permiten separar la

presentacin del contenido:
z Aplicar un estilo a todas las pginas del sitio
z Cambiar el XHTML sin afectar a la presentacin
z Cambiar el estilo sin tocar las pginas
z 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
z Etctera
Comportamiento
{ Un modelo de objetos (W3C DOM) estndar
funciona conjuntamente con CSS, XHTML y
ECMAScript para crear lo que se conoce como
HTML dinmico
z www.w3.org/DOM/DOMTR
z www.ecma-international.org/publications/standards/Ecma-262.htm
{ Cmo sabemos si una pgina est hecha con

HTML dinmico?
z Fijndonos en la parte inferior izquierda de la barra
de estado del navegador:

Ejemplos
{ www.happycog.com
z Probarlo en Lynx
{ www.webstandards.org
z Netscape 4, Lynx, Palm Pilot, Pocket PC
{ www.alistapart.org
{ Y todo con un solo documento!

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
z Ms de la mitad estaban enteramente en Flash
z La mayora de los otros slo funcionaban o bien en
navegadores 4.0, o slo en IE4 o en Netscape 4
z Es uno de los concursos de diseo que cuentan con
ms prestigio en la industria!

Objetivos comunes
{ Todos los sitios Web enviados a concurso comparten (o
deberan compartir), en el fondo, los mismos fines:
z 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
z 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
z 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

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?

Percepciones errneas
{ En primer lugar, muchos desarrolladores siguen
manteniendo la creencia (errnea) de que los
estndares Web son incompatibles con un buen diseo
grfico
z (Es lo que ocurre, por ejemplo, con la accesibilidad)
{ Por otro lado, quienes crean los estndares no se
dedican a venderlos
z Vanse algunos sitios del W3C (o el mo propio :-) )
z No hay nada mejor para vencer esa falsa percepcin que
un sitio con un buen diseo que use estndares

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
z Macromedia Dreamweaver, Adobe GoLive
z Aptas slo para diseadores expertos
{ Tal vez la ms importante: hasta hace bien poco, los
principales navegadores no cumplan con los
estndares

2000: el ao que los navegadores
cambiaron de era
{ En marzo de 2000 sale IE5 para Macintosh
z Cumpla con XHTML, ECMAScript, casi toda la
especificacin CSS1, parte de CSS2 y casi todo
DOM
{ Otras caractersticas:
z DOCTYPE switching
z Text Zoom

Demasiado tarde?
{ El problema es que, para aquel entonces, muchos
desarrolladores ya haban decidido prescindir de los
estndares
z 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
z Fue uno de los primeros pasos que dio Microsoft para
comenzar a afianzarse como alternativa al entonces
omnipresente Netscape

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
z Plagada de errores (aunque mejor que IE3)
{ www.ddj.com/webreview/style/css1/leaderboard.shtml
z 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)

Malos navegadores conducen a
malas prcticas
{ CSS permite cambiar el modo en que el navegador muestra
los elementos HTML
z 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
z <div class="titulo1"> en vez de <h1>
z Qu significa eso para un lector de pantalla?
{ Aunque ya no es necesario, hay quien sigue empleando esos
hbitos
z Incluyendo herramientas de publicacin y editores Web visuales

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; }

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
z Netscape 4 document.layers
z IE4 document.all
{ Solucin: codificar dos veces lo mismo

Aadir comportamiento
{ Ni siquiera se ponan de acuerdo en el lenguaje a
emplear:
z Netscape 4 JavaScript
{ No lo estandarizaban, como haban prometido
z Ventaja competitiva, pensaban
z IE4 ActiveX
{ Para complicar las cosas, Microsoft cre su propia
versin de JavaScript, JScript
z Mediante ingeniera inversa
{ JavaScript, JScript, ActiveX, diferentes modelos

de objetos una pesadilla!

Al fin, la estandarizacin del HTML
dinmico
{ ECMA estandariz JavaScript: ECMAScript
{ W3C estandariz un DOM
{ Netscape e IE soportan ambos
z Pero tras muchos aos de incompatibilidades que
han hecho que surjan expertos en unas u otras
tecnologas propietarias
{ Sitios slo IE, por ejemplo
z O bien que se decanten directamente por soluciones
como Flash
{ Ejemplo: www.renaultf1.com/es/public/flash/

Las pginas del W3C
{ CSS2 es un potente lenguaje de

presentacin que facilita las necesidades
de los diseadores
z 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

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
z Tras veinte minutos de lectura, lo que apetece es ir
corriendo a una tienda a comprar Macromedia Flash
Jeffrey Zeldman
{ W3C est pensado para ingenieros, no para el pblico
z Las especificaciones van dirigidas a los programadores
que habrn de implementar la tecnologa, no a quienes la
tienen que usar
z No debemos pretender utilizarlas como guas de
aprendizaje

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
z Es difcil persuadirlos de que los textos del W3C se
encuentra la clave de su xito
z Qu hacen en vez de eso?
{ Buscan las llamativas presentaciones de los gigantes de la
industria
z Macromedia Flash, Macromedia Dreamweaver, Adobe GoLive

Conocimiento de productos, no de
los estndares
{ Es lo que ocurri con muchos desarrolladores Web
(especialmente, en el caso de los diseadores)
z Por cada uno que consultaba las especificaciones
del W3C haba que acudan a los sitios de Netscape,
Microsoft, Macromedia, Adobe y otros
z 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

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:
z Funcionaba igualmente bien en Netscape, IE y Opera, as
como en Mac OS, Linux, Unix y Windows
z Algunos diseadores dijeron adis al HTML, CSS y todas
sus incompatibilidades y se apuntaron a la fiebre del Flash

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
z Muy difciles de imitar empleando marcado estndar, CSS, SVG y
DOM
{ No obstante, Flash 4 adoleca de numerosos problemas de
usabilidad y accesibilidad
z Entre los ms crticos estaba Jakob Nielsen
z En 2002, Macromedia mejor notablemente estas caractersticas
en Flash MX y contrat a Nielsen como consultor
{ Quien cambi de opinin con respecto al producto :-)

Problemas de Flash
{ Slo es apropiado para determinados proyectos
z 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
z (Si es que alguna vez lo supieron, claro est)
z Nos encontramos presentaciones en Flash en sitios
que exigen un determinado navegador (?)

Para terminar
{ Los estndares no coartan la creatividad

ni la apariencia esttica
z Como s ocurra en la era de los navegadores
4.0
{ Hoy da ya son una realidad
z A la que no podemos obviar
{ Hay que usar la tecnologa para el bien
z No caer en el lado oscuro de la Fuerza

Acebal EstandaresWeb

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 EstandaresWeb

Cargado por

Copyright:

Formatos disponibles

Creacin de sitios Web mediante estndares

Gira 2004 del W3C. Parada en la EUITIO

Csar Fernndez Acebal

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

{ Consiste en un conjunto bastante

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares Tim Berners-Lee

Al igual que no hace mucho no era raro ver a la

{ El cdigo espagueti, la maquetacin con

Creacin de sitios web mediante estndares

{ El usuario sufre un mayor tiempo de

Creacin de sitios web mediante estndares

{ Aparte, la compaa de hospedaje Web

Creacin de sitios web mediante estndares

{ Tambin hay que pagar a los

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

{ Este problema cada vez se hace ms

Creacin de sitios web mediante estndares

{ Incluso aunque utilicen XHTML y CSS,

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

{ Invirtiendo en costosas herramientas de

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

{ Siempre hay un punto de corte

Creacin de sitios web mediante estndares

{ Pero si es malo tratar de que nuestro sitio se

Creacin de sitios web mediante estndares

{ Con nuestros esfuerzos por que los sitios

Creacin de sitios web mediante estndares

{ Los navegadores tratan de mostrar las

Creacin de sitios web mediante estndares

{ Eso llev a una serie de malos hbitos

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

Antes de ver cmo los estndares nos

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

{ Por aquel entonces, no haba

Creacin de sitios web mediante estndares

Creacin de sitios web mediante estndares

{ Este tipo de trucos de HTML era el nico

Creacin de sitios web mediante estndares

{ Cmo leera el sitio de Suck un lector de

{ Adems de la dificultad de actualizacin

Creacin de sitios web mediante estndares