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
Su creador fue Tim-Berners Lee, en el Laboratorio
Europeo de Fsica de Partculas (CERN)
Berners-Lee cre las versiones iniciales de:

HTML, HTTP, un servidor Web y un navegador
Los cuatro
componentes esenciales de la Web
Clientes Web
{
Cualquier ordenador conectado a Internet con un

programa capaz de realizar peticiones HTTP y
mostrar las 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
3
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
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
{
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
5
Ejemplo de documento HTML

< ?xm lversion= "1.0" encoding= "ISO -8859-1"?>
< !D O C TYPE htm lPU BLIC "-//W 3C//D TD XH TM L 1.0 Strict//EN "
"http://w w w .w 3.org/TR/xhtm l1/D TD /xhtm l1-strict.dtd">
< htm lxm lns= "http://w w w .w 3.org/1999/xhtm l">
< head>
< title> Introduccin a H TM L< /title>
< /head>
< body>
< h1> M iprim era pgina W eb< /h1>

ste es elequivalente altpico H ola, m undo!
pero en H TM L (cuya < a href= "http://w w w .w 3.org/M arkU p/"
title= "Especifi
cacin de las distintas versiones de
H TM L y XH TM L en elW 3C"> especifi
cacin< /a> puede encontrarse
en elsitio W eb del
< acronym title= "W orld W ide W eb C onsortium "> W 3C< /acronym > ).

< /body>
< /htm l>
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
z
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
z
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

1989
inventor de la Web, en
Premio Prncipe de Asturias de

Investigacin Cientfica y
Tcnica 2002
z
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

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)
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
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)
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
z
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:
Incluso estando constantemente actualizndolo
(algo que no todos los sitios se pueden permitir)
ese cdigo normalmente falla
z
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
z

{
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
zz
Algunos
sitios crean
unamensaje
versin que
mspromete
Otros,
muestran
algn
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)
Realmente, es un milagro que tales sitios lleguen a verse

en algn navegador
z
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
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
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)
111
IQJ
Yahoo! Espaa - Microsoft Internet Explorer
Archivo
Edici
n
Ver
Favoritos
Herramientas
Ayuda
Favoritos
Multimedia
Direccin
mrr
))
Norton AntiVirus
Vnculo
s
?Ayuda[
100MB
-::;
.JCorre o
Mi Yahoo !
O Yahoo.
Motor Coches nuevos Conurnrntivas

Imgenes
Web
Directorio
Los servidos de Yahool

Agencia
Astrologa
Barra Y.
Boletines
Chat
Cine
Coches
Compaeros
Compras
Corazn
Correo
Deportes
Direcciones
Dominios
_/
Finanza
s
Messeng
Noticias
Buscar I
en castellano
cl
Consejos Senuros de coches
Buscar en la Web:
en todos los idiomas
en Espaa
Avanzada
P refe re n ci
as
Todos los servicios
Empleo
Finanzas
Fotos
Geocities
Gua Telef
Grupos
Inmobiliari
a
Juegos
Maletn
Messenger
Mi Yahoo!
Mviles
Msica
Noticias
Yahoo! como tu pgina
de inicio
ltimos xitos: Dynomite,

Book Wonn, Diamond Mine
Nuestl'os clsicos: Billar, Domin,
Mah-jong Solitario, Ajedrez
Los mejores juegos descargables
r.J
Lo
ltimos ideojueqos en
Ocio
Postales
Sorteos
Tiempo
Traductor
Viajes
Actualidad
La Polica localiza otro coche usado por

autores 11-M - diario
Consejo ele SCH aprobar
previsiblemente oferta por Abbey -prensa
Secuestro ele diplomtico egipcio
radicaliza
situacin en lrak
Internet
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> 
Entonces, por qu lo siguen

haciendo as?
{
La nica explicacin es que la compaa quiere

sitio se vea exactamente igual en todos los
navegadores
que su
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
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)
3
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
z
Siempre hay que definir un navegador bsico

como aqul ms antiguo que contemplar el
sitio Web
z
{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
z
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
{
Ni siquiera que lo sean los navegadores de escritorio,

como tales, frente a otros dispositivos
z
'\J Treelogic
[3
Archivo
>>>
Revolucin Digital - Opera
Editar
Ver
Navegacin
Marcadores
Ventanas
Ayuda
Correo
CJ
Opera
[Q]
[RJ
1) Opera
Community
1) OperaMail
f:tj
Buscar
f:tj Buscar Amazon.com
Super
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
z
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
z
Ejemplo:
<<tt
ddwwidt
h=
idt
h="100%
"100%">
"><<ont
ont
face=
dana,
hel
vet
ica,
ari
al
""si
ze=
face="ver
"ver
dana,
hel
vet
ica,
ari
al
si
ze="+
"+1"
1"
col
or=
ass=
nn
col
or="#
"#CCCC66">
CCCC66"><
"header"><
b>Joi
Joi
now
<
>><</t
d>
now!!
/b><
/span><</ont
/ont
/t
d>
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)
z
Por cierto, el ejemplo de la pgina

anterior, con estndares, quedara as:
<<h3>
nnnow
<</h3>
h3>Joi
Joi
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
{
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
z
Compatibilidad hacia delante

3
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
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)
z
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
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
z
Y que seguirn funcionando en los futuros

navegadores y dispositivos
Incluyendo los que an ni nos
imaginamos
(compatibilidad hacia delante)
{
Etctera
4
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)
,'ll Suck - Microsoft Internet Explorer

Archivo
Edicin
Ver
Favoritos
Herramientas
Ayuda
Favoritos
Direccin
RJ
Multimedia
v Grr
[QJI
Vnculos Norton AntiVirus ...
One of the strange-hut-truisms of

minnr perldling is that using the
cumputer ami other Fetish fudder
somehow ampowers children - plug
in, log on, attend a goud

college on full scholarship, ami
get tha hell out of tha house,
Internet
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
El contenido est centrado en una tabla HTML que

tambin
est,
su vez, de
centrada
z Se aplica
unaa imagen
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!
Favoritos
Multimedi
a
v IJrr
Vnculo Norton AntiVirus

s
@ ..
-
ULEAD GLOW FRAME
Crea'led March 23, 2002 Copyright Meon's Designs

Property ofMoon's Designs
. eamn,. any sbnilarity
11ds is my cr
@'.)
Listo
. . al.
other tumrials on the lil'lernet is uht'len mn
Internet
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
{
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
Si funciona, cul es el problema?

Cmo leera el sitio de Suck un lector
pantalla?
One of the strange-but-truisms of...
[pausa]
minor peddling is that using the...
[pausa]
computer and other Fetish fodder...

somehow empowers children plug...
[...]
[pausa]
de
[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
Multimedia
Irving S. Gilmore International Keyboard Festival

The Epic Center 359 S. Kalamaz:oo Mali Suite 101
Kalamaz:oo, MI
Privacy Statement
Copyright 2003
49007-4843
Internet
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
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
z
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
z
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:
{
Lectores de pantalla, navegadores de

texto, PDA,
telfonos mviles, navegadores Braille o
incluso
navegadores convencionales con las
imgenes
desactivadas
z
Ejercicio: probar a visualizar la pgina con un

navegador de texto, como Lynx
{
Emulador: www.delorie.com/web/lynxview.html
La pgina en Lynx
Archivo
Edicin
Ver
Favoritos
Herramientas
LynxView:
http://www.thegilmore.com/
- MicrosoftAyuda
Internet
11
Atrs
Direccin
..
.
[Q]
Explorer
Multimedia
Favoritos
http://www. delorle, com/web/lynxview. cgi?url=http%3A %2F%2Fwww. thegilmore. com' v
Art of Attad< in Chess

Vladimir Vuko'fic:
[RJ
Vnculos
Norton AntiVirus
@ ...
...
PlayWinning Chess
Yasser Seirawan
Ir
Services provided by Delorie Soflware and iis ;,,pomor;,, (the ad above)

http:/;www.thegilmore.com/
Thi: ;,,ervice i;,, intended to be used only by content developer;,,, on their ownpage;,,.
Lynx Viewer:
[ 1gif. gif]
[ tag l ine. gif]
[ 1gif. gif]
[USEMAP:mid left2.jpg]
[ 1gif. gif]
Invite a Fr iend I
Contact Us
The Epic Center

359 S. Kalamazoo Mall
Suite 101
Irving S. Gilmore International Keyboard Festival
MI 49007-4843 Privacy Statement
Copyright 2003
Kalamazoo,
Internet
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
z
El mismo diseo puede lograrse de manera

que sea accesible a todo el mundo
z
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
De tamao de pantalla, resolucin, tamao de
la ventana del navegador, preferencias
normales
z
Cuando no se dan todas esas condiciones,

el sitio se degrada
{
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
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
EEsstrtruucctuturra
PPrreesseenntatac
ciinn
CSS1
HTML
XHTM
L XML
CSS2
CCoommppoorrtatammi
eienntoto
Los tres componentes

de una pgina Web:
estructura,
presentacin y
comportamiento
ECMAScript
DOM
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>
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">
en s de la pgina]
[Aqu
el
contenido
</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
(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
www.w3.org/Style/CSS/
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
como stas:
cosas
<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
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
z
Etctera
6
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/pub
lications/standards/Ecma-262.htm
z
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
www.webstandards.org
z
{
{
Probarlo en Lynx
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

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!
Creacin de sitios web mediante estndares
Vnculos
Norton AntiVirus
e) http://irl.rahal.com/drivers/brackfindex.php
C
Take Ear1:hTrends
with you!
Our CDs pecvide
portable access to a
wealth of vis u.al and
statistical data.
New This Month
e About EarthTrends
e
VI atersheds
Dat.a
EarthTrtnds is sponsortd by
THE WORLD
BANIC
UNEP
AFFAIRS
2004 World Resources lnstitute
411 Select a
THE NETHERLAHDS MINISTRY OF FOREIGN

SIDA
Questions?
List of Data Prcvlders
UND
P
Related Links
THE RASMUSSEN
FOUNOATJON
Updated Monthly
Internet
theme
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
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
Crear un sitio que siga funcionando en un futuro sin necesidad de

estar cambindolo constantemente
z
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
(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
No hay nada mejor para vencer esa falsa percepcin
un sitio con un buen diseo que use estndares
que
Favoritos
Multimedia
Direccin
=Ir
Vnculos
Norton AntiVirus ...
Activities
Tech. reports
Site index
Translations Software Search
Nearby: f[.e.
css
Validator
CASCADING STYLE SHEETS

HOME PAGE
Cascadi ng Style Sheets (CSS) is a simple mechani sm for
addi ng
style (e.g. fonts, colors, spacing) to Web documents.
Tutorials,
books, mailing li sts for users, etc. can be found on the
"learni(archived)
nq
the
www-style@w3.org mailing list and on
CSS"
page.
For
background
information
on style sheets, see
comp .i nfosvstems .www.authori
nq
the
.stvlesheets.
Web style sheets page. Discussions about CSS are carried out
on
WHAT'S NEW?
Internet
Multimedia
.....................................................................................................
......... :
B.ackissue sel
K.aliber Frontp.age - A yummy gr.abb.ag o' design goodies
.. . .. .
.. ... ..... . ..... ...
. . ... . ....
..
. ... . .... . .
.. . .. . ....
. . . . .... ...
...... . ..
..
... . ..
...
.. ... . . .. . . .
GLOBAL EYEtlT LOCFITOR
Ll$TlG
+1;1um1;1M
yleg has all the el

greatness.
Upcoming Events
Jul 25 - Jul 26
KHB - T.ag der offene ...
Freedom of
Expression ...
11
by Adriana de
KFILIBER MFITCHMFIKER
Wir l.aden Sie und Ihre

Freunde...heralic
....................
.......... ......
During three intensive
Aug 11 Aug 13
dav s in August ...
..
To kvo St','le in Gothe ...

.
E ven if
','OU
don't
f line, the line art

is swoon ov ar.
Shithot - Jul. 25, 20
e,,
ISSUE DESCRIPTIOtl
Hav e you ev er thought about the
concept: Man y
have freedom of
once they create
piece, they don't
co pv it?
artists today want to

expression, but
their own art
want others to
A Pictu..-e 's Wotth
11
MSCHMIDT I K10k l
\,,J
GEtlERIC MEDUTFlltlMEtlT
TRFIILERPFIRK
MOODSTFITSSTFIT
S
Dese: Sh.are the storv behind .a

z pee i.a I ph otog r .a ph ...
O 1
Needed: Peo ple who would like to

tr',' something new (or t ...
02
The Burial Society
03
The Termin.al
De-Lovely
For those of you "'

front of a compub
night, I've got a z
William Shatner d
Pulp's Common P
Marvellous.
============================================================='
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
Adobe Dreamweaver, Adobe GoLive, PHPStorm
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
Cumpla con XHTML, ECMAScript, casi toda la
especificacin CSS1, parte de CSS2 y casi todo
DOM
Otras caractersticas:
DOCTYPE switching
Text Zoom
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
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
z
(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
No en Netscape 4, que aada su estilo predeterminado al
definido por la hoja de estilo
z
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
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
{
Arial, Helvetica,
font-family:
Verdana,
sans-serif; }
8
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
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!
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
z
Sitios slo IE, por ejemplo
O bien que se decanten directamente por soluciones

como Flash
z
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
Pero cuesta darse cuenta de ello a la vista del
sitio Web de la especificacin:
z
http://www.w3.org/TR/REC-CSS2/
{ Parece
la tpica pgina personal diseada por

nuestro vecino con Microsoft FrontPage en una
tarde de aburrimiento
---------------------------------
O Cascadlng Style Sheets, Level 2 - Mozilla Firefox

Eile
!;_di
t
<)
..
.
.o
!2_ookmarks
iew
..
.
Iools
GJ[QJ
t:!el
p
http: r/www' w3' org/TR/REC -(552/
vJII
O Firefox Help O Firefox 5upport O Plug-in
FAQ
next contents QroQerties index

REC-CSS2-19980512
W5
C
Cascading Style Sheets, level

CSS2 Specification
W3C Recommendation 12-May-1998

Thi s versi on:
httQ:!
/www.w3.org!TR/1998/REC-CSS2-19980512
Latest versi on:
httQ://www .w3. o rg!TR/R E C-CS S2
Previ ous versi on:
httQ:!/www.w3.org!TR/1998/PR-CSS2-19980324
--dito.t:c-
Done
v;
L
..8
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
z
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
z
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
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
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:
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
z
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

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

Aqullos que se basan ms en el diseo que en el
contenido o la interactividad con el usuario
z
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)

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

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

Aunque Internet comienza a desarrollarse en los

Berners-Lee cre las versiones iniciales de:

componentes esenciales de la Web

Cualquier ordenador conectado a Internet con un

Hasta hace bien poco, solan ser un PC con

Ahora, hay toda una plyade de dispositivos

Asistentes Personales Digitales (PDA), telfonos

Del texto a los grficos

El navegador por aquel entonces era el Lynx

En 1993 se crea un navegador con interfaz grfica de

En el NCSA (National Center for Supercomputing

En 1994 se funda Netscape y crean el primer

En 1995, Microsoft lanza su Internet Explorer (IE)

Consiste en un conjunto bastante

Nunca fue pensado para definir la

No haba etiquetas para especificar fuentes,

Ejemplo de documento HTML

Presentacin de los documentos

Pronto, el sentido original del HTML comenz a

Por otro, los diseadores grficos hacan uso de trucos

Uso de tablas para maquetacin, de listas para conseguir

Separacin entre presentacin y

Para tratar de reconducir la situacin

Cascading Style Sheets (CSS)

El World Wide Web Consortium

Consorcio formado por cerca de 500 organizaciones

HTML, CSS, XML, XHTML, DOM

Objetivo: promover la evolucin de la Web

Dirigido por Tim Berners-Lee, el

Premio Prncipe de Asturias de

La Oficina Espaola del W3C

En octubre de 2003 se present la Oficina Espaola del

Jos Manuel Alonso

Adems de buen amigo :-)

Problemas de no usar los estndares:

El cdigo espagueti, la maquetacin con

Problemas de no usar los estndares:

El usuario sufre un mayor tiempo de

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

Problemas de no usar los estndares:

Tambin hay que pagar a los

Junto con el cdigo necesario para enviar a

Compatibilidad hacia delante

Diseando de la forma correcta, nuestras pginas

Incluso cuando surjan otros nuevos

Usando los estndares

Lenguajes estructurales como XHTML y XML,

Otras ventajas del uso de los

Menores costes de produccin y

Sitios ms accesibles para todo el mundo

Especialmente, para aqullos que tienen

Ms visitantes por menos dinero, mejor

Obsolescencia de los sitios

El 99,9% de los sitios Web estn

En los navegadores minoritarios, lectores de

Los navegadores modernos y los

Aqullos que entienden HTML y XHTML, hojas de estilo

Usados conjuntamente, estos estndares nos permitirn ir