estandares de la web o la internet

7/26/2019 EstanDares de la Web o la internet

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


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 corchetes El navegador por aquel entonces era el Lynx

En 1993 se crea un navegador con interfaz grfica de

usuario, el Mosaic

En el NCSA (National Center for Supercomputing

Applications, Universidad de Illinois)

En 1994 se funda Netscape y crean el primer

navegador comercial, el Netscape Navigator En 1995, Microsoft lanza su Internet Explorer (IE)


5/96



Introduccin a HTML

Consiste en un conjunto bastante

reducido de etiquetas que permitendefinir la estructura de un documento

Qu es un ttulo, qu un prrafo, qu un

enlace

Nunca fue pensado para definir la

presentacin! No haba etiquetas para especificar fuentes,

colores


6/96


7/96



Presentacin de los documentos

Pronto, el sentido original del HTML comenz a

desvirtuarse con la aparicin de elementos depresentacin

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


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

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 Web HTML, CSS, XML, XHTML, DOM

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

1989 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 Asturias Concretamente, albergada en las instalaciones de la

Fundacin CTIC, en el Parque Cientfico Tecnolgico de

Gijn

Sus representantes:

Jos Manuel Alonso

Responsable de la oficina

Adems de buen amigo :-)

Jess Garca

Coordinador

Experto en accesibilidad

Acto de presentacin de 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


13/96



Problemas de no usar los estndares:

el ancho de banda y los usuarios

El usuario sufre un mayor tiempo de

descarga

O se cansa de esperar y abandona el sitio

antes siquiera de haberlo visto por vezprimera

O hay quien, tras el tiempo de espera,

descubre que no es accesible para l


14/96


15/96



Problemas de no usar los estndares:

los costes de desarrollo

Tambin hay que pagar a los

programadores por hacer lo mismo deseis formas distintas

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

Incluso cuando surjan otros nuevos

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

Especialmente, para aqullos que tienen

necesidades especiales

En resumen:

Ms visitantes por menos dinero, mejor

imagen, etctera


18/96

Obsolescencia de los sitios

Web


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

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

generan

Ejemplos:

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

(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

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: Incluso estando constantemente actualizndolo

(algo que no todos los sitios se pueden permitir)

ese cdigo normalmente falla

Por ejemplo, Opera para Windows se identifica a s

mismo como Explorer

Para evitar ser bloqueado por muchos sitios que exigen

Explorer Naturalmente, ste no interpretar bien el cdigo

especfico del Explorer


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

Algunos sitios crean una versin ms

Otros, muestran algn mensaje que promete

admitir ese dispositivo prximamente


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

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)

Realmente, es un milagro que tales sitios lleguen a verse

en algn navegador

Hasta las versiones 4 y 5 de NN e IE, no es que

tolerasen el uso de marcado no estndar y cdigo

dependiente del navegador, sino que lo promovan

En su particular y absurda guerra de los navegadores


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

Tablas anidadas, pxeles transparentes y otros

trucos con imgenes, as como etiquetas y

atributos especficos de cada navegador


28/96


29/96



Cdi f t d l i d


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

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

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

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

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

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

o IE2, que s lo hacen

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

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

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


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

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 errores Etiquetas o atributos desconocidos, etiquetas

sin cerrar, errores de JavaScript, enlaces

rotos Ejemplo:

Joinnow! ont>

Joinnow!

ont>



38/96




navegadores

Eso llev a una serie de malos hbitos

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


40/96



El remedio Las tecnologas como CSS, XHTML, ECMAScript y DOM

permiten hoy da a los diseadores:

Lograr un control ms preciso sobre la maquetacin,

posicionamiento y tipografa de las pginas en los

navegadores grficos, a la vez que permiten a los

usuarios adaptar la presentacin a sus necesidades

Desarrollar sofisticados comportamientos que funcionan

en mltiples navegadores y plataformas

Cumplir con las leyes y guas de accesibilidad sin sacrificar

la apariencia esttica Redisear en horas en vez de das o semanas, con la

consiguiente reduccin de costes


41/96



El remedio Que los sitios funcionen en varios navegadores sin

tener que crear distintas versiones

Lo mismo en el caso de dispositivos no tradicionales

(PDA, telfonos mviles, lectores Braille, lectores de

pantalla)

Ofrecer versiones impresas de las pginas muchoms sofisticadas

De nuevo, sin tener que crear una versin printer-

friendly Separar el estilo de la estructura y el

comportamiento


42/96



El remedio Iniciar la transicin del antiguo HTML a lo que ser

el marcado basado en XML del futuro

Garantizar que los sitios as diseados y construidos

funcionarn correctamente en todos los

navegadores actuales que cumplen con los

estndares y se vern razonablemente bien en losviejos

Y que seguirn funcionando en los futuros

navegadores y dispositivos

Incluyendo los que an ni nos imaginamos

(compatibilidad hacia delante)

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

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




46/96
http://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 HTML 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?

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

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


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

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?

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

Incluso los cambios ms nimios incurren en costes

significativos

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:

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

Las imgenes y la belleza esttica son muyimportantes para el xito de un sitio Web

El mismo diseo puede lograrse de manera

que sea accesible a todo el mundo

Lo malo es que este sitio no es una

excepcin

Al contrario, las tcnicas empleadas son bien

conocidas

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

De tamao de pantalla, resolucin, tamao de

la ventana del navegador, preferenciasnormales

Cuando no se dan todas esas condiciones,

el sitio se degrada 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

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


62/96

Diseo con estndares

Veamos ahora cmo los estndares Webayudan a resolver los problemas

planteados.

Los tres componentes de una

pgina 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, etctera 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 documentos www.w3.org/TR/2004/REC-xml-20040204/

XHTML

El nico lenguaje de marcado que, hoy por

hoy, entienden todos los navegadores

(No es ms que una reformulacin de HTML

para que cumpla las normas sintcticas 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

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:

Separacin de presentacin y

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

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 dinmico www.w3.org/DOM/DOMTR

www.ecma-international.org/publications/standards/Ecma-262.htm

Cmo sabemos si una pgina est hecha con

HTML dinmico?

Fijndonos en la parte inferior izquierda de la 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

Probarlo en Lynx

www.webstandards.org

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

repulsivo


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

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

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

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

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

Por otro lado, quienes crean los estndares no sededican a venderlos

Vanse algunos sitios del W3C (o el mo propio :-) )

No hay nada mejor para vencer esa falsa percepcin que

un sitio con un buen diseo que use estndares
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 estndares Macromedia Dreamweaver, Adobe GoLive

Aptas slo para diseadores expertos

Tal vez la ms importante: hasta hace bien poco, los

principales navegadores no cumplan con los

estndares

2000: el ao que los navegadores

cambiaron de era


80/96



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?


81/96



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


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

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)

Malos navegadores conducen a

malas 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

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

Algunos diseadores abandonaron CSS

Otros, abandonaron el marcado estructural

en vez de

Qu significa eso para un lector de pantalla?

Aunque ya no es necesario, hay quien sigue empleando esos

hbitos

Incluyendo herramientas de publicacin y editores Web visuales

Malos navegadores conducen a

malas 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 objetos Netscape 4 document.layers

IE4 document.all

Solucin: codificar dos veces lo mismo

Aadir comportamiento


86/96



Ni siquiera se ponan de acuerdo en el lenguaje a

emplear:

Netscape 4 JavaScript

No lo estandarizaban, como haban prometido

Ventaja competitiva, pensaban

IE4 ActiveX

Para complicar las cosas, Microsoft cre su propia

versin de JavaScript, JScript

Mediante ingeniera inversa

JavaScript, JScript, ActiveX, diferentes modelos

de objetos una pesadilla!

Al fin, la estandarizacin del HTML

dinmico


87/96



ECMA estandariz JavaScript: ECMAScript

W3C estandariz un DOM Netscape e IE soportan ambos

Pero tras muchos aos de incompatibilidades que

han hecho que surjan expertos en unas u otras

tecnologas propietarias

Sitios slo IE, por ejemplo

O bien que se decanten directamente por soluciones

como Flash

Ejemplo: www.renaultf1.com/es/public/flash/

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

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

Las especificaciones van dirigidas a los programadores

que habrn de implementarla tecnologa, no a quienes la

tienen que usar No debemos pretender utilizarlas como guas de

aprendizaje

Visin academicista frente a la

empresarial


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

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

Qu hacen en vez de eso?

Buscan las llamativas presentaciones de los gigantes de la

industria Macromedia Flash, Macromedia Dreamweaver, Adobe GoLive

Conocimiento de productos, no de

los estndares


92/96



Es lo que ocurri con muchos desarrolladores Web

(especialmente, en el caso de los diseadores)

Por cada uno que consultaba las especificaciones

del W3C haba que acudan a los sitios de Netscape,

Microsoft, Macromedia, Adobe y otros

Estos sitios tienden a estar bien diseados 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: 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

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

Muy difciles de imitar empleando marcado estndar, CSS, SVG yDOM

No obstante, Flash 4 adoleca de numerosos problemas de

usabilidad y accesibilidad

Entre los ms crticos estaba Jakob Nielsen En 2002, Macromedia mejor notablemente estas caractersticas

en Flash MX y contrat a Nielsen como consultor

Quien cambi de opinin con respecto al producto :-)

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

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

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

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

Para terminar


96/96



Los estndares no coartan la creatividad

ni la apariencia esttica Como s ocurra en la era de los navegadores

4.0

Hoy da ya son una realidad A la que no podemos obviar

Hay que usar la tecnologa para el bien

No caer en el lado oscuro de la Fuerza

estandares de la web o la internet

Documents