Estandares Web

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
Los cuatro componentes esenciales de la Web
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
z
En 1993 se crea un navegador con interfaz grfica de

usuario, el Mosaic
z
El navegador por aquel entonces era el Lynx
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
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
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

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

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

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?

14

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

15
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

16
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

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

21

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

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
z
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
z
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
z
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
z
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
Quin puede oponerse a tal argumento?
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

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

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
z
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
z
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
class="header">Join
now!</ont></td>
now!</ont></td>

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

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

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

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

52

53
Dificultad de mantenimiento
{
Qu ocurre si hay que aadir alguna opcin a la

pgina principal?
z
z
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
z
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:
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

56
La pgina en Lynx

57

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

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

60
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
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
CSS1
CSS2
HTML
XHTML
XML
Comportamiento
Comportamiento
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
z
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
z
www.w3.org/TR/2004/REC-xml-20040204/
XHTML
z
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
z
z
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:
z
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
z
www.w3.org/DOM/DOMTR
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:

69
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!

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
z
z
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:
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
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
z
(Es lo que ocurre, por ejemplo, con la accesibilidad)
Por otro lado, quienes crean los estndares no se

dedican a venderlos
z
z
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
z
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

z
Cumpla con XHTML, ECMAScript, casi toda la

especificacin CSS1, parte de CSS2 y casi todo
DOM
Otras caractersticas:
z
DOCTYPE switching
Text Zoom

80
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

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
z
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
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
<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
z
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:
z
Netscape 4 JavaScript
{
No lo estandarizaban, como haban prometido

z
IE4 ActiveX
{
Para complicar las cosas, Microsoft cre su propia

versin de JavaScript, JScript
z
Ventaja competitiva, pensaban
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

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

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
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
No debemos pretender utilizarlas como guas de
aprendizaje

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

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
z
(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
z
Hoy da ya son una realidad

z
Como s ocurra en la era de los navegadores

4.0
A la que no podemos obviar
Hay que usar la tecnologa para el bien

z
No caer en el lado oscuro de la Fuerza

96

Estandares Web

Cargado por

Información del documento

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

Estandares Web

Cargado por

Copyright:

Formatos disponibles

Creacin de sitios Web mediante estndares

Gira 2004 del W3C. Parada en la EUITIO

Aunque Internet comienza a desarrollarse en los

Su creador fue Tim-Berners Lee, en el Laboratorio

Berners-Lee cre las versiones iniciales de:

HTML, HTTP, un servidor Web y un navegador

Los cuatro componentes esenciales de la Web

Creacin de sitios web mediante estndares

Cualquier ordenador conectado a Internet con un

Asistentes Personales Digitales (PDA), telfonos

Creacin de sitios web mediante estndares

Del texto a los grficos

Al principio, las pginas Web no eran ms que texto en

En 1993 se crea un navegador con interfaz grfica de

El navegador por aquel entonces era el Lynx

En el NCSA (National Center for Supercomputing

En 1994 se funda Netscape y crean el primer

En 1995, Microsoft lanza su Internet Explorer (IE)

Creacin de sitios web mediante estndares

Consiste en un conjunto bastante

Nunca fue pensado para definir la

No haba etiquetas para especificar fuentes,

Creacin de sitios web mediante estndares

Ejemplo de documento HTML

Presentacin de los documentos

Pronto, el sentido original del HTML comenz a

Por un lado, los navegadores introducan etiquetas

Por otro, los diseadores grficos hacan uso de trucos

Uso de tablas para maquetacin, de listas para conseguir

Creacin de sitios web mediante estndares

Separacin entre presentacin y

Para tratar de reconducir la situacin

Cascading Style Sheets (CSS)

Creacin de sitios web mediante estndares

El World Wide Web Consortium

Consorcio formado por cerca de 500 organizaciones

HTML, CSS, XML, XHTML, DOM

Objetivo: promover la evolucin de la Web

Premio Prncipe de Asturias de

Creacin de sitios web mediante estndares

La Oficina Espaola del W3C

En octubre de 2003 se present la Oficina Espaola del

Concretamente, albergada en las instalaciones de la

Jos Manuel Alonso

Adems de buen amigo :-)

Creacin de sitios web mediante estndares

Problemas de no usar los estndares:

El cdigo espagueti, la maquetacin con

Creacin de sitios web mediante estndares

Problemas de no usar los estndares:

El usuario sufre un mayor tiempo de

O se cansa de esperar y abandona el sitio

O hay quien, tras el tiempo de espera,

Creacin de sitios web mediante estndares

Problemas de no usar los estndares:

Aparte, la compaa de hospedaje Web

O, si es un servidor propio, habr que invertir

Por qu utilizar 60 KB por pgina si lo

Creacin de sitios web mediante estndares

Problemas de no usar los estndares:

Tambin hay que pagar a los

Junto con el cdigo necesario para enviar a

Creacin de sitios web mediante estndares

Compatibilidad hacia delante