creación de sitios webmediante estándares
TRANSCRIPT
-
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
http://www.cfacebal.com/http://www.cfacebal.com/ -
7/28/2019 Creacin de sitios Webmediante estndares
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
-
7/28/2019 Creacin de sitios Webmediante estndares
3/96
3Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
Clientes Web
{ Cualquier ordenador conectado a Internet con un
programa capaz de realizar peticiones HTTP 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
-
7/28/2019 Creacin de sitios Webmediante estndares
4/96
4Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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)
-
7/28/2019 Creacin de sitios Webmediante estndares
5/96
5Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
6/96
6Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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/28/2019 Creacin de sitios Webmediante estndares
7/96
7Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
8/96
8Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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)
-
7/28/2019 Creacin de sitios Webmediante estndares
9/96
9Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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/ -
7/28/2019 Creacin de sitios Webmediante estndares
10/96
10Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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)
-
7/28/2019 Creacin de sitios Webmediante estndares
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.
-
7/28/2019 Creacin de sitios Webmediante estndares
12/96
12Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
13/96
13Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
14/96
14Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
Problemas de no usar los estndares:
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?
-
7/28/2019 Creacin de sitios Webmediante estndares
15/96
15Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
Problemas de no usar los estndares:
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
-
7/28/2019 Creacin de sitios Webmediante estndares
16/96
16Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
17/96
17Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
18/96
Obsolescencia de los sitiosWeb
-
7/28/2019 Creacin de sitios Webmediante estndares
19/96
19Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
20/96
20Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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)
-
7/28/2019 Creacin de sitios Webmediante estndares
21/96
21Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
22/96
22Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
23/96
23Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
24/96
24Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
25/96
25Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
26/96
26Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
27/96
27Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
28/96
28Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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/ -
7/28/2019 Creacin de sitios Webmediante estndares
29/96
29Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
Cdigo fuente de la pgina de
-
7/28/2019 Creacin de sitios Webmediante estndares
30/96
30Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
31/96
31Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
32/96
32Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
33/96
33Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
34/96
34Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
35/96
35Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
La Web naci como un medio
-
7/28/2019 Creacin de sitios Webmediante estndares
36/96
36Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
37/96
37Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
Problema: laxitud de los
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!
Problema: laxitud de los
-
7/28/2019 Creacin de sitios Webmediante estndares
38/96
38Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
Problema: laxitud de los
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!
-
7/28/2019 Creacin de sitios Webmediante estndares
39/96
39Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
40/96
40Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
41/96
41Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
42/96
42Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
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.
-
7/28/2019 Creacin de sitios Webmediante estndares
44/96
44Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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/ -
7/28/2019 Creacin de sitios Webmediante estndares
45/96
45Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
Un inciso: ejemplo de diseo
-
7/28/2019 Creacin de sitios Webmediante estndares
46/96
46Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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 -
7/28/2019 Creacin de sitios Webmediante estndares
47/96
47Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
http://moonsdesigns.com/tutorials/frames/glow.html -
7/28/2019 Creacin de sitios Webmediante estndares
48/96
48Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
49/96
49Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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.
-
7/28/2019 Creacin de sitios Webmediante estndares
50/96
50Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
51/96
51Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
52/96
52Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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/ -
7/28/2019 Creacin de sitios Webmediante estndares
53/96
53Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
-
7/28/2019 Creacin de sitios Webmediante estndares
54/96
54Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
55/96
55Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
Ejemplo{ Aadmosle una hoja de estilo para darle
bordes y mrgenes a las tablas y ver ascmo est construida
Exclusin de numerosos visitantes
-
7/28/2019 Creacin de sitios Webmediante estndares
56/96
56Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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 -
7/28/2019 Creacin de sitios Webmediante estndares
57/96
57Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
La pgina en Lynx
-
7/28/2019 Creacin de sitios Webmediante estndares
58/96
58Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
Significa esto que los grficos
-
7/28/2019 Creacin de sitios Webmediante estndares
59/96
59Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
60/96
60Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
61/96
61Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
62/96
Diseo con estndares
Veamos ahora cmo los estndares Webayudan a resolver los problemas
planteados.
Los tres componentes de unapgina Web
-
7/28/2019 Creacin de sitios Webmediante estndares
63/96
63Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
pgina Web
EstructuraEstructura PresentacinPresentacin
Comportamiento
Comportamiento
CSS1CSS2
HTMLXHTMLXML
Los tres componentesde una pgina Web:
estructura,presentacin ycomportamiento
ECMAScript
DOM
Estructura: XHTML
-
7/28/2019 Creacin de sitios Webmediante estndares
64/96
64Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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/ -
7/28/2019 Creacin de sitios Webmediante estndares
65/96
65Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
66/96
66Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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/ -
7/28/2019 Creacin de sitios Webmediante estndares
67/96
67Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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/ -
7/28/2019 Creacin de sitios Webmediante estndares
68/96
68Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
69/96
69Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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 -
7/28/2019 Creacin de sitios Webmediante estndares
70/96
70Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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/ -
7/28/2019 Creacin de sitios Webmediante estndares
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
-
7/28/2019 Creacin de sitios Webmediante estndares
72/96
72Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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 -
7/28/2019 Creacin de sitios Webmediante estndares
73/96
73Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
Objetivos comunes
http://irl.rahal.com/main.php -
7/28/2019 Creacin de sitios Webmediante estndares
74/96
74Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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?
-
7/28/2019 Creacin de sitios Webmediante estndares
75/96
75Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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
-
7/28/2019 Creacin de sitios Webmediante estndares
76/96
76Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
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/ -
7/28/2019 Creacin de sitios Webmediante estndares
77/96
77Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
-
7/28/2019 Creacin de sitios Webmediante estndares
78/96
78Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
Otras razones
-
7/28/2019 Creacin de sitios Webmediante estndares
79/96
79Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
{ 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
-
7/28/2019 Creacin de sitios Webmediante estndares
80/96
80Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
{ 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?
-
7/28/2019 Creacin de sitios Webmediante estndares
81/96
81Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
{ 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
-
7/28/2019 Creacin de sitios Webmediante estndares
82/96
82Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
{ 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 -
7/28/2019 Creacin de sitios Webmediante estndares
83/96
83Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
{ 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
-
7/28/2019 Creacin de sitios Webmediante estndares
84/96
84Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
{ 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
-
7/28/2019 Creacin de sitios Webmediante estndares
85/96
85Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
{ 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
-
7/28/2019 Creacin de sitios Webmediante estndares
86/96
86Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
{ 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
-
7/28/2019 Creacin de sitios Webmediante estndares
87/96
87Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
{ 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/ -
7/28/2019 Creacin de sitios Webmediante estndares
88/96
88Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
{ 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/ -
7/28/2019 Creacin de sitios Webmediante estndares
89/96
89Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
El estilo de redaccin del W3C
http://www.w3.org/TR/REC-CSS2/ -
7/28/2019 Creacin de sitios Webmediante estndares
90/96
90Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
{ 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
-
7/28/2019 Creacin de sitios Webmediante estndares
91/96
91Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
{ 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
-
7/28/2019 Creacin de sitios Webmediante estndares
92/96
92Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
{ 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
-
7/28/2019 Creacin de sitios Webmediante estndares
93/96
93Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
{ 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
-
7/28/2019 Creacin de sitios Webmediante estndares
94/96
94Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
{ 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 -
7/28/2019 Creacin de sitios Webmediante estndares
95/96
95Creacin de sitios web mediante estndares
Csar F. Acebal. Gira 2004 del W3C (Oviedo)
{ 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 (?)
-
7/28/2019 Creacin de sitios Webmediante estndares
96/96