creación de sitios webmediante estándares

7/28/2019 Creacin de sitios Webmediante estndares

1/96

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

Csar Fernndez Acebal

www.cfacebal.com

[email protected]
http://www.cfacebal.com/http://www.cfacebal.com/


2/96

2Creacin de sitios web mediante estndares

Csar F. Acebal. Gira 2004 del W3C (Oviedo)

Nacimiento de la Web

{ Aunque Internet comienza a desarrollarse en los

aos 60, la Web no se invent hasta 1989z 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


3/96



Clientes Web

{ Cualquier ordenador conectado a Internet con un

programa capaz de realizar peticiones HTTP ymostrar 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


4/96



Del texto a los grficos{ Al principio, las pginas Web no eran ms que texto en

blanco y negro con los enlaces entre corchetesz 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 Navigatorz En 1995, Microsoft lanza su Internet Explorer (IE)


5/96



Introduccin a HTML

{ Consiste en un conjunto bastante

reducido de etiquetas que permitendefinir 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


6/96



Ejemplo de documento HTML

Introduccin a HTML

Mi primera pgina Web

ste es el equivalente al tpico Hola, mundo!pero en HTML (cuya especificacin puede encontrarseen el sitio Web delW3C).


7/96



Presentacin de los documentos{ Pronto, el sentido original del HTML comenz a

desvirtuarse con la aparicin de elementos depresentacin

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


8/96



Separacin entre presentacin y

contenido{ Para tratar de reconducir la situacin

creada, en 1998 el W3C public laespecificacin de las hojas de estilo

z Cascading Style Sheets (CSS)


9/96



El World Wide Web Consortium

(W3C){ Consorcio formado por cerca de 500 organizaciones

que dicta los estndares de la Webz HTML, CSS, XML, XHTML, DOM

z http://www.w3.org

{

Objetivo: promover la evolucin de la Webgarantizando que las distintas tecnologas funcionen

bien conjuntamente

{ Dirigido por Tim Berners-Lee, el inventor de la Web, en

1989z Premio Prncipe de Asturias de

Investigacin Cientfica y

Tcnica 2002

Tim Berners-Lee
http://www.w3.org/http://www.w3.org/People/Berners-Lee/http://www.w3.org/People/Berners-Lee/http://www.w3.org/


10/96



La Oficina Espaola del W3C{ En octubre de 2003 se present la Oficina Espaola del

W3C, sita en Asturiasz 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 laOficina Espaola, en el Hotelde la Reconquista (Oviedo)


11/96

Introduccin

Al igual que no hace mucho no era raro ver a lagente 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 mismocambio de actitud est empezando a producirse en

la comunidad de diseadores Web con respecto a

los estndares.


12/96



Problemas de no usar los estndares:

el ancho de banda necesario

{ El cdigo espagueti, la maquetacin con

montones de tablas anidadas, lasetiquetas y otras redundancias

doblan y hasta triplican el ancho de banda

necesario en muchos sitios Web


13/96




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 vezprimera

{ O hay quien, tras el tiempo de espera,

descubre que no es accesible para l


14/96




el ancho de banda y el servidor

{ Aparte, la compaa de hospedaje Web

cobrar en funcin de ese ancho de bandaconsumido

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?


15/96




los costes de desarrollo

{ Tambin hay que pagar a los

programadores por hacer lo mismo deseis formas distintas

z Junto con el cdigo necesario para enviar a

cada usuario la versin adecuada a su

navegador


16/96



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 deobjetos como DOM y lenguajes de script como

ECMAScript


17/96



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


18/96

Obsolescencia de los sitiosWeb


19/96



El 99,9% de los sitios Web estn

obsoletos{ En los navegadores minoritarios, lectores de

pantalla y en nuevos dispositivos como los PDA olos telfonos mviles de ltima generacin, la

mayora de los sitios se ven muy mal o no lo

hacen en absoluto


20/96



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 descript incompatibles y de la obsolescencia perpetua que

generan

z Ejemplos:

{ Firefox 1.0, Navigator 6, Internet Explorer (IE) 6 paraWindows, IE 5 para Macintosh y Opera 7

z (Si bien no hay ninguno que cumpla perfectamente con

los estndares)


21/96



El problema de las versiones{ La creacin de mltiples versiones de marcado y cdigo

no estndar, cada una ajustada a las particularidadesde 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


22/96



El problema de las versiones{ 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

Explorerz Naturalmente, ste no interpretar bien el cdigo

especfico del Explorer


23/96



El problema de las versiones{ Adems de los scripts propietarios, los

diseadores escriben marcado de presentacinque 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


24/96



El problema de las versiones.

Nuevos dispositivos

{ Este problema cada vez se hace ms

acuciante, ante la proliferacin de nuevosdispositivos inalmbricos

z Algunos sitios crean una versin ms

z Otros, muestran algn mensaje que promete

admitir ese dispositivo prximamente

El bl d l i


25/96



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


26/96



Una mirada al pasado{ La mayora de sitios Web adolecan de un marcado no

estndar, de ActiveX y JavaScript propietarios y de unuso 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


27/96



Cmo llegaban a funcionar?{ Invirtiendo en costosas herramientas de

publicacin que soslayaban las diferenciasentre 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


28/96



Ancho de banda{ Las mltiples versiones, junto con todos esos trucos y

un cdigo y marcado innecesariamente complejosincrementaba 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 consumidoz 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)
http://www.yahoo.es/http://www.yahoo.es/


29/96



Cdigo fuente de la pgina de


30/96



Cdigo fuente de la pgina de

inicio de Yahoo!Busi ness &Economy
B2B, Fi nance, Shoppi ng, J obs. . .

Comput ers &I nt er net
I nt er net , WWW, Sof t ware, Games. . .

News & Medi a
Newspaper s, TV, Radi o. . .

Ent er t ai nment
Movi es, Humor , Musi c. . .

Recr eat i on &Spor t s
Spor t s, Travel , Aut os, Out door s. . .

Heal t h
Di seases, Dr ugs,

Entonces por qu lo siguen


31/96



Entonces, por qu lo siguen

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

sitio se vea exactamente igual en todos losnavegadores

z Igual en las versiones de 1995, que no saban de CSS,que en los modernos navegadores que cumplen elestndar

z Lo irnico es que el xito de Yahoo! se debe a sucontenido, no a su diseo grfico (que prcticamentebrilla por su ausencia)

z Nos da una idea de la estrechez de miras de muchos

directivos y desarrolladores que quieren mantener a todacosta la compatibilidad hacia atrs, por encima delsentido comn, de la usabilidad y de sus propiosbeneficios

Qu es eso de la compatibilidad


32/96



Qu es eso de la compatibilidad

hacia atrs?{ Los desarrolladores nos dirn que significa dar

cabida a todos los usuariosz Quin puede oponerse a tal argumento?

{ En la prctica, significa el uso de cdigo y

marcado no estndar (por propietario odesfasado) 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


33/96



No existe autntica compatibilidad

hacia atrs{ Siempre hay un punto de corte

z Por ejemplo, ni Mosaic ni Netscape 1.0entienden tablas, a diferencia de Netscape 1.1

o IE2, que s lo hacen

z Siempre hay que definir un navegador bsicocomo aqul ms antiguo que contemplar el

sitio Web

{ Y se plagan las pginas de trucos y etiquetaspropietarias que aaden peso a cada pgina

z As como el cdigo necesario para detectar el

navegador

D j f li t t i l


34/96



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 antiguosigual 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 dominantez Ni siquiera que lo sean los navegadores de escritorio,

como tales, frente a otros dispositivos


35/96



La Web naci como un medio


36/96



La Web naci como un medio

independiente de plataforma{ Con nuestros esfuerzos por que los sitios

se vean exactamente igual en distintosnavegadores 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 lapantalla

Problema: laxitud de los


37/96




navegadores{ Los navegadores tratan de mostrar las

pginas aunque stas tengan erroresz Etiquetas o atributos desconocidos, etiquetas

sin cerrar, errores de JavaScript, enlaces

rotosz Ejemplo:

Joinnow!

Joinnow!



38/96




navegadores{ Eso llev a una serie de malos hbitos

z De hecho, muchos desarrolladores ni siquieraconocen los estndares (todo se lo fan al

DreamWeaver y al IE)

{ Por cierto, el ejemplo de la pginaanterior, con estndares, quedara as:

Join now!Join now!


39/96



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

dispositivosz 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


40/96



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 estticaz Redisear en horas en vez de das o semanas, con la

consiguiente reduccin de costes


41/96



El remedioz 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 muchoms sofisticadas

{ De nuevo, sin tener que crear una versin printer-

friendlyz Separar el estilo de la estructura y el

comportamiento


42/96



El remedioz 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 losviejos

z Y que seguirn funcionando en los futuros

navegadores y dispositivos

{ Incluyendo los que an ni nos imaginamos

(compatibilidad hacia delante)

z Etctera


43/96

Disear sin y con estndares

Antes de ver cmo los estndares nospermiten 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.


44/96



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 debienvenida, 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)
http://moonsdesigns.com/tutorials/http://moonsdesigns.com/tutorials/


45/96



Un inciso: ejemplo de diseo


46/96



j p

anticuado{ El siguiente ejemplo muestra los diseos tpicos

de aquella poca: letras churriguerescas, abusode la etiqueta 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 yotra a la pgina que la contiene

z El problema es que dicha pgina es de 2002!
http://moonsdesigns.com/tutorials/frames/glow.htmlhttp://moonsdesigns.com/tutorials/frames/glow.htmlhttp://moonsdesigns.com/tutorials/frames/glow.html


47/96


http://moonsdesigns.com/tutorials/frames/glow.html


48/96



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

herramientas de diseo HTMLz 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


49/96



Suck.com{ Los creadores del sitio escribieron un scripten

Perl que contara los caracteres del texto y fuerainsertando etiquetas

(de prrafo)

One of the strange-but-truisms of

minor peddling is that using the

computer and other Fetish

fodder

somehow empowers children - plug

in, log on, attend a good

college on full scholarship, and

get the hell out of the house.


50/96



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


51/96



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


52/96



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

trucos en los 90, sino que siganemplendose 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
http://www.thegilmore.com/http://www.thegilmore.com/


53/96




54/96



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

{ Incluso los cambios ms nimios incurren en costes

significativos

z Cuando una tarea tan simple como aadir un enlacerequiere horas de trabajo hay que replantearse nuestros

mtodos de desarrollo


55/96



Ejemplo{ Aadmosle una hoja de estilo para darle

bordes y mrgenes a las tablas y ver ascmo est construida

Exclusin de numerosos visitantes


56/96



potenciales{ Es el otro gran problema de esta pgina

{ Tal y como est implementada, el sitio estotalmente 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
http://www.delorie.com/web/lynxview.htmlhttp://www.delorie.com/web/lynxview.html


57/96



La pgina en Lynx


58/96



Significa esto que los grficos


59/96



sean perniciosos?{ En absoluto

z Las imgenes y la belleza esttica son muyimportantes 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


60/96



seguir los estndares{ Resumiendo, los sitios Web as creados

suelen verse bien en los navegadores mspopulares y en las condiciones normales

z De tamao de pantalla, resolucin, tamao de

la ventana del navegador, preferenciasnormales

{ Cuando no se dan todas esas condiciones,

el sitio se degradaz Incluso llega a ser totalmente inaccesible

R d i


61/96



Recomendacin

{ Disear nuestras pginas pensando en

cmo se vern stas en un navegador detexto

z Grandes posibilidades de que la pgina sea

tambin accesible en otros dispositivosz Nos ayudar a pensar en el marcado

estructural, en vez de en el incorrecto de

presentacin


62/96

Diseo con estndares

Veamos ahora cmo los estndares Webayudan a resolver los problemas

planteados.

Los tres componentes de unapgina Web


63/96



pgina Web

EstructuraEstructura PresentacinPresentacin

Comportamiento

Comportamiento

CSS1CSS2

HTMLXHTMLXML

Los tres componentesde una pgina Web:

estructura,presentacin ycomportamiento

ECMAScript

DOM

Estructura: XHTML


64/96



Estructura: XHTML

Estructura

Un lenguaje demarcado, como XHTML, contiene texto

formateado de acuerdocon su significado

estructural: ttulos,

subttulos, prrafos,

listas, etctera

{ Un lenguaje de

marcado, como

XHTML, contiene texto

formateado de

acuerdo con su

significadoestructural: ttulos,

subttulos, prrafos,

listas, etcteraz www.w3.org/TR/xhtml1/

Estructura: XHTML
http://www.w3.org/TR/xhtml1/http://www.w3.org/TR/xhtml1/


65/96



Estructura: XHTML

{ El marcado puede contener tambin

alguna indicacin que ser til para queluego el diseador grfico le aplique el

formato adecuado

[Aqu ira el men]

[Aqu el contenido en s de la pgina]

Estructura: XML


66/96



Estructura: XML

{ XML ofrece mucha ms flexibilidad y

semntica a los documentosz 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 deXML)

Presentacin
http://www.w3.org/TR/2004/REC-xml-20040204/http://www.w3.org/TR/2004/REC-xml-20040204/


67/96



Presentacin

{ Las hojas de estilo (Cascading Style Sheeto 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:

Separacin de presentacin ycontenido
http://www.w3.org/Style/CSS/http://www.w3.org/Style/CSS/


68/96



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


69/96



Comportamiento

{ Un modelo de objetos (W3C DOM) estndar

funciona conjuntamente con CSS, XHTML y

ECMAScript para crear lo que se conoce como

HTML dinmicoz 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 barrade estado del navegador:

Ejemplos
http://www.w3.org/DOM/DOMTRhttp://www.ecma-international.org/publications/standards/Ecma-262.htmhttp://www.ecma-international.org/publications/standards/Ecma-262.htmhttp://www.w3.org/DOM/DOMTR


70/96



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!
http://www.happycog.com/http://www.webstandards.org/http://www.zeldman.com/daily/pilot.htmlhttp://www.alistapart.org/http://www.alistapart.org/http://www.zeldman.com/daily/pilot.htmlhttp://www.webstandards.org/http://www.happycog.com/


71/96

Algunos problemas con losestndares

Si decimos que los estndares Web son la clavepara 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 mecentrar en mostrar cmo podemos venderlos

estndares a nuestros colegas, a nuestros clientes o

a nuestros jefes.

Maravillosos a la vista, cdigorepulsivo


72/96



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!
http://irl.rahal.com/main.php


73/96



Objetivos comunes
http://irl.rahal.com/main.php


74/96



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

codificarcada vez que aparece un nuevo navegador o dispositivo

Entonces?


75/96



Entonces?

{ Los estndares son la clave para lograr

esos objetivos{ Entonces

por qu la comunidad dedesarrolladores Web no se ha

lanzado de cabeza a ellos?

Percepciones errneas


76/96



Percepciones errneas

{ En primer lugar, muchos desarrolladores siguen

manteniendo la creencia (errnea) de que los

estndares Web son incompatibles con un buen diseogrfico

z (Es lo que ocurre, por ejemplo, con la accesibilidad)

{ Por otro lado, quienes crean los estndares no sededican 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
http://www.w3.org/Style/CSS/http://www.cfacebal.com/http://www.cfacebal.com/http://www.w3.org/Style/CSS/


77/96




78/96



Otras razones


79/96



{ 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 estndaresz 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 navegadorescambiaron de era


80/96



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


81/96



{ El problema es que, para aquel entonces, muchos

desarrolladores ya haban decidido prescindir de los

estndaresz Despus de muchos aos viendo cmo los navegadores

los obviaban

{

La especificacin de CSS1 tuvo lugar en las Navidadesde 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


82/96



{ 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 amalas prcticas
http://www.ddj.com/webreview/style/css1/leaderboard.shtmlhttp://www.ddj.com/webreview/style/css1/leaderboard.shtml


83/96



{ CSS permite cambiar el modo en que el navegador muestra

los elementos HTML

z No en Netscape 4, que aada su estilo predeterminado aldefinido por la hoja de estilo

{ Algunos diseadores abandonaron CSS

{ Otros, abandonaron el marcado estructural

z en vez de

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


84/96



{ Otro problema de Netscape 4 era la casi

total falta de herencia{ Con CSS podemos aplicar un estilo al que heredar cualquier elemento

hijo (,

)

{ En Netscape 4 haca falta escribir reglas

redundantes:

body, td, h1, p { font-family: Verdana,

Arial, Helvetica, sans-serif; }

Aadir comportamiento


85/96



{ An peor era el soporte para aadir

comportamiento dinmico a las pginaspor medio de scripts

{ Cada navegador tena su propio modelo

de objetosz Netscape 4 document.layers

z IE4 document.all

{ Solucin: codificar dos veces lo mismo

Aadir comportamiento


86/96



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


87/96



{ 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
http://www.renaultf1.com/es/public/flash/http://www.renaultf1.com/es/public/flash/


88/96



{ CSS2 es un potente lenguaje de

presentacin que facilita las necesidadesde 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 unatarde de aburrimiento
http://www.w3.org/TR/REC-CSS2/http://www.w3.org/TR/REC-CSS2/http://www.w3.org/TR/REC-CSS2/


89/96



El estilo de redaccin del W3C
http://www.w3.org/TR/REC-CSS2/


90/96



{ Dejando aparte la apariencia de las pginas, lo cierto

es que las especificaciones del W3C son bastante duras

de leerz 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 implementarla tecnologa, no a quienes la

tienen que usarz No debemos pretender utilizarlas como guas de

aprendizaje

Visin academicista frente a laempresarial


91/96



{ 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 ylos propietarios de sitios Web s les importa el aspecto

y la facilidad de uso

z

Es difcil persuadirlos de que los textos del W3C seencuentra la clave de su xito

z Qu hacen en vez de eso?

{ Buscan las llamativas presentaciones de los gigantes de la

industriaz Macromedia Flash, Macromedia Dreamweaver, Adobe GoLive

Conocimiento de productos, no delos estndares


92/96



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


93/96



{ Todo empez con unplug-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


94/96



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

{ No obstante, Flash 4 adoleca de numerosos problemas de

usabilidad y accesibilidad

z

Entre los ms crticos estaba Jakob Nielsenz 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
http://www.one9ine.com/flash.htmlhttp://www.juxtinteractive.com/http://www.useit.com/http://www.useit.com/http://www.juxtinteractive.com/http://www.one9ine.com/flash.html


95/96



{ 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 hanolvidado cmo usar los estndares

z (Si es que alguna vez lo supieron, claro est)

z Nos encontramos presentaciones en Flash en sitiosque exigen un determinado navegador (?)


96/96

creación de sitios webmediante estándares

Documents