Post on 28-Jun-2020
transcript
Introduccioacuten al mundo de los estaacutendares webMark Norman FrancisJonathan Lane
PID_00150463
CC-BY-NC-ND bull PID_00150463 2 Introduccioacuten al mundo de los estaacutendares web
CC-BY-NC-ND bull PID_00150463 Introduccioacuten al mundo de los estaacutendares web
Iacutendice
1 La historia de Internet y la web y la evolucioacuten de los estaacutendares web 511 Los oriacutegenes de Internet 5
12 La creacioacuten de la web mundial 6
121 Las ldquoguerras de los navegadoresrdquo 7
13 La aparicioacuten de los estaacutendares web 8
131 La formacioacuten del W3C 8
132 El proyecto de estaacutendares web 9
133 El auge de los estaacutendares web 9
Resumen 10
Preguntas de repaso 11
Lecturas complementarias 11
2 iquestCoacutemo funciona Internet 1221 iquestCoacutemo se comunican los ordenadores a traveacutes de Internet 12
211 Diseccioacuten de un ciclo de solicitud-respuesta 13
22 Tipos de contenido 15
221 Texto normal 15
222 Estaacutendares web 15
223 Paacuteginas web dinaacutemicas 16
224 Formatos que requieren otras aplicaciones o conectores 16
23 Paacuteginas web estaacuteticas o dinaacutemicas 17
Resumen 18
Preguntas de repaso 18
Lecturas complementarias 18
3 El modelo de estaacutendares web HTML CSS y JavaScript 1931 iquestPor queacute separar 19
32 Etiquetado la base de cada paacutegina 20
321 iquestQueacute es el XHTML 21
322 Validacioacuten iquestqueacute es eso 22
33 CSS antildeadimos un poco de estilo 22
34 JavaScript adicioacuten de comportamiento a las paacuteginas web 24
35 Una paacutegina de ejemplo 24
351 indexhtml 24
352 stylescss 25
Resumen 27
Preguntas de repaso 28
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidad 2941 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web 29
CC-BY-NC-ND bull PID_00150463 Introduccioacuten al mundo de los estaacutendares web
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente 30
421 Amazon iquestcomprar con estaacutendares 31
422 CNN iquestnoticias estandarizadas 31
423 Apple el maacuteximo de elegancia en disentildeo
iquesty en validacioacuten 32
424 Un pequentildeo sondeo de compatibilidad de estaacutendares 33
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares 33
431 Educacioacuten 34
432 Motivos empresariales 34
Resumen 35
Preguntas de repaso 36
Lecturas complementarias 36
CC-BY-NC-ND bull PID_00150463 5 Introduccioacuten al mundo de los estaacutendares web
1 La historia de Internet y la web y la evolucioacuten de los estaacutendares webMark Norman Francis
ldquoiquestPor doacutende debo empezar Majestad
Empieza por el principio ndashdijo el rey solemnementendash y continuacutea hasta llegar al final En-tonces detenterdquo
Alicia en el Paiacutes de las Maravillas Lewis Caroll
Todo debe empezar por alguacuten sitio de manera que nuestro viaje empezaraacute con
una leccioacuten centrada en la historia A continuacioacuten realizaremos un breve re-
paso de la creacioacuten de Internet la web mundial (World Wide Web) y de los
estaacutendares web en los que se centra toda esta serie Creo que es uacutetil e intere-
sante entender coacutemo hemos llegado hasta donde estamos pero seremos lo
bastante breves como para no agobiaros y poder entrar en detalle de manera
raacutepida y agradable Si no estaacuteis familiarizados con alguacuten teacutermino no os pre-
ocupeacuteis si son importantes para aprender sobre el desarrollo web se definiraacuten
en los uacuteltimos apartados que ampliacutean cada tema y siempre podeacuteis hacer una
busca en Google Si ya estaacuteis familiarizados con la historia de Internet o de la
web mundial os podeacuteis saltar este apartado sobre los estaacutendares web
11 Los oriacutegenes de Internet
El cuatro de octubre de 1957 sucedioacute un acontecimiento que cambiariacutea el
mundo La Unioacuten Sovieacutetica lanzoacute con eacutexito el primer sateacutelite a la oacuterbita de la
Tierra Se llamaba Sputnik 1 y sorprendioacute al mundo especialmente a Estados
Unidos que teniacutea en curso su propio programa de lanzamientos de sateacutelites
pero todaviacutea no habiacutean lanzado ninguno
Este acontecimiento condujo directamente a la creacioacuten de la ARPA (Advan-
ced Research Projects Agency la Agencia de Proyectos de Investigacioacuten Avan-
zada) del Departamento de Defensa de Estados Unidos a causa de la necesidad
reconocida de una organizacioacuten que pudiera investigar y desarrollar ideas
avanzadas y tecnologiacutea maacutes allaacute de las necesidades identificadas actualmente
Quizaacute su proyecto maacutes famoso (sin duda el maacutes ampliamente utilizado) fue la
creacioacuten de Internet
En 1960 el psicoacutelogo y cientiacutefico informaacutetico Joseph Licklider publicoacute un docu-
mento titulado Simbiosis Hombre-Ordenador que articuloacute la idea de ordenadores
en red que proporcionaban un almacenaje y una recuperacioacuten avanzada de los
datos En 1962 mientras trabajaba para la ARPA como jefe de la oficina de proce-
samiento de informacioacuten formoacute un grupo para continuar con la investigacioacuten in-
formaacutetica pero lo abandonoacute antes de que se trabajara en aquella idea
CC-BY-NC-ND bull PID_00150463 6 Introduccioacuten al mundo de los estaacutendares web
El plan para esta red de ordenadores (que se denominariacutea ARPANET) se presentoacute
en octubre de 1967 y en diciembre de 1969 la primera red de cuatro ordenadores
ya estaba conectada y en funcionamiento El principal problema de la creacioacuten
de una red era coacutemo conectar redes fiacutesicamente separadas sin colapsar los recur-
sos de la red a causa de las conexiones constantes La teacutecnica que resolvioacute este
problema se conoce como conmutacioacuten de paquetes e implica que las solicitu-
des de datos se dividen en pequentildeos trozos (paquetes) que se pueden procesar
raacutepidamente sin bloquear la comunicacioacuten de los otros Este principio todaviacutea
se utiliza en la actualidad para el funcionamiento de Internet
Este concepto se adoptoacute ampliamente con el nacimiento de otras redes que
utilizaban la misma teacutecnica de conmutacioacuten de paquetes Por ejemplo la X25
(desarrollada por la Unioacuten Internacional de Telecomunicaciones) formoacute la
base de la primera red universitaria del Reino Unido JANET (que permitiacutea a
las universidades del Reino Unido enviar y recibir ficheros) y la red puacuteblica
norteamericana CompuServe (una empresa comercial que permitiacutea a peque-
ntildeas empresas y personas acceder a los recursos informaacuteticos con tiempo com-
partido y posteriormente el acceso a Internet) Estas redes a pesar de tener
muchas conexiones eran maacutes privadas que la Internet actual
Esta proliferacioacuten de diferentes protocolos de red no tardoacute mucho en convertirse
en un problema cuando se intentaba que todas las redes independientes se comu-
nicaran Sin embargo habiacutea una solucioacuten a la vista Robert Kahn mientras traba-
jaba en un proyecto de red de paquetes por sateacutelite para ARPA empezoacute a definir
algunas reglas para una arquitectura de red maacutes abierta que sustituyera el proto-
colo actual que se utilizaba en ARPANET Maacutes adelante Vinton Cerf ndashde la Uni-
versidad de Stanfordndash se incorporoacute al proyecto y ambos crearon un sistema que
enmascaraba las diferencias entre protocolos de red utilizando un nuevo estaacuten-
dar La publicacioacuten del borrador de la especificacioacuten en diciembre de 1974 se de-
nominoacute Programa de Control de Transmisioacuten de Internet
Esta especificacioacuten reduciacutea las funciones de la red y trasladaba la tarea de man-
tener la integridad de la transmisioacuten al ordenador principal El resultado final
fue que era posible unir faacutecilmente casi todas las redes entre ellas ARPA asu-
mioacute el coste del desarrollo del software y en 1977 se llevoacute a cabo una demos-
tracioacuten de comunicacioacuten entre tres redes diferentes En 1981 la especificacioacuten
se completoacute publicoacute y adoptoacute y en 1982 las conexiones de ARPANET fuera de
Estados Unidos se convirtieron para utilizar el nuevo protocolo TCPIP Habiacutea
llegado Internet tal como la conocemos
12 La creacioacuten de la web mundial
Gopher era un sistema de recuperacioacuten de informacioacuten que se utilizaba a
principios de los antildeos noventa y que proporcionaba un meacutetodo de entrega de
menuacutes de enlaces a archivos recursos informaacuteticos y otros menuacutes Estos me-
nuacutes podiacutean cruzar los liacutemites del ordenador y utilizar Internet para ir a buscar
httpenwikipediaorgwikiGopher_(protocol)
CC-BY-NC-ND bull PID_00150463 7 Introduccioacuten al mundo de los estaacutendares web
menuacutes de otros sistemas Era muy popular en las universidades que queriacutean
proporcionar informacioacuten para todo el campus y organizaciones grandes que
queriacutean centralizar el almacenaje y la gestioacuten de documentos
Gopher fue creado por la Universidad de Minnesota En febrero de 1993 esta
universidad anuncioacute que cobrariacutea licencias por el uso de la implementacioacuten
de referencia del servidor Gopher En consecuencia muchas organizaciones
empezaron a buscar alternativas a Gopher
El Consejo Europeo de Investigacioacuten Nuclear (CERN) en Suiza teniacutea esta al-
ternativa Tim Berners-Lee habiacutea estado trabajando en un sistema de gestioacuten
de informacioacuten en el que el texto pudiera contener enlaces y referencias a
otros trabajos de manera que permitiera al lector saltar raacutepidamente de un do-
cumento a otro Habiacutea creado un servidor para publicar este estilo de docu-
mento (denominado hipertexto) y tambieacuten un programa para leerlo al que
habiacutea denominado World Wide Web Este software se publicoacute por primera vez
en 1991 pero dos acontecimientos provocaron una explosioacuten de popularidad
y finalmente la sustitucioacuten de Gopher
El 30 de abril de 1993 el CERN cedioacute el coacutedigo fuente del World Wide Web al
dominio puacuteblico de manera que cualquiera pudiera utilizar o construir sobre
el software sin ninguacuten coste
Asiacute maacutes tarde en el mismo antildeo el NCSA (National Center for Supercom-
puting Applications Centro Nacional para Aplicaciones de Supercomputa-
cioacuten) publicoacute un programa que era una combinacioacuten de navegador web y
cliente Gopher denominado Mosaic Originalmente soacutelo estaba disponible
para equipos Unix y en forma de coacutedigo fuente pero en diciembre de 1993
Mosaic ya disponiacutea de una nueva versioacuten con instaladores tanto para Apple
Macintosh como para Microsoft Windows Mosaic aumentoacute en popularidad
raacutepidamente y en consecuencia tambieacuten la web
El nuacutemero de navegadores web disponibles aumentoacute muchiacutesimo muchos de
ellos creados para proyectos de investigacioacuten en universidades y corporacio-
nes como Telenor (una compantildeiacutea noruega de comunicaciones) que creoacute la
primera versioacuten del navegador Opera en 1994
121 Las ldquoguerras de los navegadoresrdquo
La popularizacioacuten de la web atrajo intereses comerciales Marc Andreessen
abandonoacute el NCSA y junto con Jim Clark fundoacute Mosaic Communications
que maacutes adelante cambioacute su nombre por Netscape Communications Cor-
poration y empezaron a trabajar en lo que acabariacutea convirtieacutendose en el
navegador Netscape La versioacuten 10 del software se publicoacute en diciembre de
1994
CC-BY-NC-ND bull PID_00150463 8 Introduccioacuten al mundo de los estaacutendares web
Spyglass Inc (la rama comercial del NCSA) autorizoacute la comercializacioacuten de su
tecnologiacutea Mosaic a Microsoft para formar la base de Internet Explorer La ver-
sioacuten 10 se publicoacute en agosto de 1995
Una raacutepida escalada siguioacute a continuacioacuten en la que Netscape y Microsoft inten-
taban cada uno obtener una ventaja competitiva en cuanto a las funciones que
admitiacutean con el fin de atraer desarrolladores Desde entonces esta competicioacuten se
ha conocido como ldquolas guerras de los navegadoresrdquo Opera mantuvo una presen-
cia modesta pero continuada a lo largo de este periacuteodo e intentoacute innovar y ser
compatible con los estaacutendares web lo mejor posible en aquellos tiempos
13 La aparicioacuten de los estaacutendares web
Durante las guerras de los navegadores Microsoft y Netscape se centraron en
la implementacioacuten de nuevas funciones en lugar de resolver los problemas de
las funciones con las que ya eran compatibles y tambieacuten en antildeadir funciones
propias y crear funciones que fueran competencia directa de las existentes en
el otro navegador pero implementadas de manera incompatible
En aquellos momentos los desarrolladores se veiacutean forzados a tratar con nive-
les de confusioacuten cada vez mayores cuando se intentaban construir las paacuteginas
web a veces hasta el punto de haber de construir dos paacuteginas diferentes pero
duplicadas en la praacutectica para cada uno de los dos principales navegadores y
otras simplemente optando por ser compatibles soacutelo con un navegador de
manera que los usuarios que utilizaran el otro no pudieran utilizar sus paacuteginas
Eacutesta era una manera muy mala de trabajar y la inevitable reaccioacuten negativa de
los desarrolladores no tardoacute en producirse
131 La formacioacuten del W3C
En 1994 Tim Berners-Lee fundoacute el World Wide Web Consortium (W3C) en el
Massachusetts Institute of Technology con el apoyo del CERN DARPA (como
se habiacutea bautizado la ARPA) y la Comisioacuten Europea La misioacuten del W3C era
estandarizar los protocolos y las tecnologiacuteas utilizadas para construir la web
de manera que el contenido estuviera disponible para la mayor parte posible
de la poblacioacuten del mundo
Durante los antildeos siguientes el W3C publicoacute varias especificaciones (denomina-
das recomendaciones) incluyendo HTML 40 el formato para imaacutegenes PNG y las
versiones 1 y 2 de CSS (cascading style sheets u hojas de estilo en cascada)
No obstante el W3C no impone sus recomendaciones Los fabricantes soacutelo
deben ajustarse a la documentacioacuten del W3C si quieren etiquetar su producto
como cumplidor del W3C En la praacutectica esto no es un argumento de venta
CC-BY-NC-ND bull PID_00150463 9 Introduccioacuten al mundo de los estaacutendares web
valioso porque casi todos los usuarios de la web desconocen y probablemente
no les importa quieacuten es el W3C En consecuencia las guerras de los navega-
dores continuaron sin trabas
132 El proyecto de estaacutendares web
En 1998 el mercado de los navegadores estaba dominado por Internet Explo-
rer 4 y Netscape Navigator 4 Se habiacutea lanzado una versioacuten beta de Internet
Explorer 5 que implementaba un nuevo HTML dinaacutemico de marca registrada
Ello significaba que los desarrolladores web profesionales debiacutean conocer cin-
co maneras diferentes de escribir JavaScript
En consecuencia un grupo de desarrolladores y disentildeadores web se asociaron
entre ellos Este grupo se denominaba WaSP (Web Standards Project Proyecto
de estaacutendares web) La idea era que si los documentos del W3C se llamaban
estaacutendares en vez de recomendaciones podriacutean convencer a Microsoft y Netsca-
pe de que les dieran su apoyo
El antiguo meacutetodo de realizar un llamamiento a la accioacuten se llevoacute a cabo me-
diante una teacutecnica publicitaria tradicional denominada barricada donde una
empresa lanza un anuncio en todos los canales de emisioacuten al mismo tiempo
de manera que aunque el espectador cambie de canal obtendraacute exactamente
el mismo mensaje WaSP publicoacute un artiacuteculo simultaacuteneamente en varias paacutegi-
nas centradas en el desarrollo web como buildercom Wired online y algunas
listas de correo muy populares
Otra teacutecnica que utilizaron fue ridiculizar a las empresas que se uniacutean al W3C
(y a otros organismos de estaacutendares) pero que despueacutes se centraban maacutes en
crear nuevas funciones que en hacer que los conceptos baacutesicos para los que se
habiacutean comprometido fueran correctos para empezar
Todo esto suena un poco negativo pero los de WaSP no se conformaban con
criticar a la gente tambieacuten la ayudaban Siete miembros formaron CSS Samu-
rai que identificoacute los diez problemas principales de compatibilidad CSS en
Opera e Internet Explorer (Opera resolvioacute sus problemas y Microsoft no)
133 El auge de los estaacutendares web
En el 2000 Microsoft lanzoacute Internet Explorer 5 Macintosh Edition Fue un
hito muy importante ya que se trataba del navegador que se instalaba enton-
ces de manera predeterminada con el Mac OS y tambieacuten teniacutea un nivel decen-
te de compatibilidad con las recomendaciones del W3C Junto con el nivel
decente de compatibilidad con CSS y HTML Opera contribuyoacute a un movi-
miento positivo general con el que los desarrolladores y disentildeadores web se
CC-BY-NC-ND bull PID_00150463 10 Introduccioacuten al mundo de los estaacutendares web
sentiacutean coacutemodos disentildeando paacuteginas mediante estaacutendares web por primera
vez
WaSP persuadioacute a Netscape de retrasar el lanzamiento de la versioacuten 50 de
Netscape Navigator hasta que fuera mucho maacutes compatible (este trabajo for-
moacute la base de lo que ahora es Firefox un navegador muy popular) WaSP tam-
bieacuten creoacute un grupo de trabajo para Dreamweaver con el fin de animar a
Macromedia a cambiar su popular herramienta de autoriacutea web y dar soporte a
la creacioacuten de paacuteginas web compatibles
La popular paacutegina de desarrollo web A List Apart se redisentildeoacute a principios del 2001 y enun artiacuteculo que explicaba coacutemo y por queacute declaraba
ldquoEn seis meses un antildeo o dos antildeos como mucho todas las paacuteginas se disentildearaacuten con estosestaacutendares [] Podemos contemplar coacutemo nuestras capacidades se quedan obsoletas opodemos empezar a aprender ahora teacutecnicas basadas en estaacutendaresrdquo
Esto era un poco optimista no todas las paacuteginas ni siquiera en el antildeo 2009
estaacuten hechas con estaacutendares web Pero muchos les hicieron caso Los navega-
dores antiguos redujeron su cuota de mercado y dos paacuteginas web maacutes de perfil
muy alto se redisentildearon utilizando estaacutendares web la revista Wired en el 2002
y ESPN en el 2003 se convirtieron en liacutederes del sector en el soporte a los es-
taacutendares web y las nuevas teacutecnicas
Tambieacuten en el 2003 Dave Shea creoacute una paacutegina web denominada CSS Zen
Garden Debiacutea tener maacutes impacto sobre los profesionales web que cual-
quier otra cosa e ilustraba verdaderamente que todo el disentildeo podiacutea cam-
biar soacutelo modificando el estilo de la paacutegina el contenido podiacutea seguir
siendo ideacutentico
Desde entonces en la comunidad de desarrollo web profesional los estaacutenda-
res web se han convertido en un elemento de rigor En esta serie os daremos
unos excelentes fundamentos en estas teacutecnicas para que podaacuteis crear paacuteginas
web tan limpias semaacutenticas accesibles y conformes con los estaacutendares como
las de las grandes empresas
Resumen
En este apartado hemos hablado de coacutemo se creoacute la Internet moderna como
resultado de la carrera espacial de coacutemo Tim Berners-Lee definioacute el hipertexto
para una generacioacuten y de coacutemo los intereses comerciales de dos compantildeiacuteas
provocaron una de las reacciones maacutes notables de los desarrolladores como
nunca se habiacutea visto El teacutermino estaacutendares web se utiliza ahora maacutes amplia-
mente entre los profesionales web que cualquier otro teacutermino aplicado por el
W3C (de hecho el W3C ha empezado a utilizar el teacutermino en sus propias paacute-
ginas) de manera que por este motivo os ensentildearemos el modo de construir
paacuteginas web siguiendo los estaacutendares
CC-BY-NC-ND bull PID_00150463 11 Introduccioacuten al mundo de los estaacutendares web
Preguntas de repaso
Podriacuteais intentar investigar maacutes respondiendo estas preguntas
1 iquestQueacute navegadores estaacuten disponibles actualmente en Internet para los usu-
arios de Windows Mac OS X y Linux
2 iquestQueacute porcentaje de usuarios de la web utiliza cada navegador
3 iquestQueacute navegadores utilizan los dispositivos moacuteviles para acceder a las paacutegi-
nas web
4 iquestCuaacutentos estaacutendares web ha publicado el W3C y cuaacuteles son ampliamente
seguidos por los fabricantes de navegadores actualmente
Lecturas complementarias
Si quereacuteis saber maacutes es posible que queraacuteis visitar algunas de las paacuteginas sigui-
entes
The history of the Internet (wikipedia)
httpenwikipediaorgwikiHistory_of_the_Internet
The history of the World Wide Web (wikipedia)
httpenwikipediaorgwikiHistory_of_the_World_Wide_Web
The history of the W3C
httpwwww3orgConsortiumhistory
El Web Standards Project y su historia
httpwebstandardsorg
httpwwwwebstandardsorgabouthistory
A List Apart
httpwwwalistapartcom
CSS Zen Garden
httpwwwcsszengardencom
CC-BY-NC-ND bull PID_00150463 12 Introduccioacuten al mundo de los estaacutendares web
2 iquestCoacutemo funciona InternetJonathan Lane
Muy de vez en cuando es posible conseguir ver los engranajes y las correas que
actuacutean entre bastidores Hoy es vuestro diacutea de suerte Os llevareacute a dar una vuel-
ta tras los telares de una de las tecnologiacuteas maacutes interesantes que posiblemen-
te ya conoceacuteis bien la web
Este apartado trata sobre la tecnologiacutea subyacente que hace funcionar la web
bull Lenguaje de etiquetado de hipertexto (HTML)
bull Protocolo de transferencia de hipertexto (HTTP)
bull Sistema de nombres de dominio (DNS)
bull Servidores web y navegadores web
bull Contenido estaacutetico y dinaacutemico
Son materias bastante baacutesicas y aunque la mayor parte de lo que aquiacute se ex-
plica no os ayudaraacute a construir una paacutegina web mejor siacute que os proporcionaraacute
el lenguaje adecuado para hablar con clientes y otras personas sobre Internet
Es como lo que una institutriz muy inteligente dijo una vez en Sonrisas y
laacutegrimas ldquoCuando leemos empezamos por ABC Cuando cantamos empeza-
mos por Do Re Mirdquo En este apartado describiremos brevemente coacutemo los or-
denadores se comunican realmente utilizando HTTP y TCPIP y despueacutes nos
fijaremos en los diferentes lenguajes que se combinan para crear las paacuteginas
web que conforman Internet
21 iquestCoacutemo se comunican los ordenadores a traveacutes de Internet
Por suerte hemos mantenido las cosas simples para los ordenadores Cuando
se trata de la web la mayoriacutea de las paacuteginas estaacuten escritas utilizando el mismo
lenguaje el HTML que pasa de un sitio a otro utilizando un protocolo comuacuten
HTTP (hypertext transfer protocol o protocolo de transferencia de hipertexto) El
HTTP es el dialecto (especificacioacuten) comuacuten de Internet que permite por ejem-
plo que un equipo con Windows cante en armoniacutea con un ordenador que eje-
cute la versioacuten maacutes reciente y maacutes fantaacutestica de Linux (iexclDo Re Mi) Mediante
el uso de un navegador web ndashun software especial que interpreta el HTTP y en-
trega el HTML en una manera legible para los humanosndash las paacuteginas web crea-
das con HTML y con cualquier tipo de ordenador se pueden leer en cualquier
medio incluyendo teleacutefonos PDA e incluso en los sistemas de videojuegos
maacutes populares
Aunque hablen el mismo lenguaje los diferentes dispositivos que acceden
a la web han de tener algunas normas establecidas para poder hablar entre
CC-BY-NC-ND bull PID_00150463 13 Introduccioacuten al mundo de los estaacutendares web
ellos es como aprender a alzar la mano para preguntar en clase El HTTP
establece estas normas baacutesicas para Internet Gracias al HTTP un equipo
cliente (como vuestro ordenador) sabe que debe ser eacutel quien inicie una pe-
ticioacuten de una paacutegina web desde un servidor Un servidor es un ordenador
donde residen las paacuteginas web cuando escribiacutes una direccioacuten web en vues-
tro navegador un servidor recibe la peticioacuten encuentra la paacutegina web que
deseaacuteis y la enviacutea a vuestro ordenador para que se vea en vuestro navega-
dor
211 Diseccioacuten de un ciclo de solicitud-respuesta
Ahora que hemos visto todas las partes que permiten a los ordenadores comu-
nicarse a traveacutes de Internet trataremos con maacutes detalle el ciclo de solicitud-
respuesta de HTTP A continuacioacuten se presentan una serie de pasos numera-
dos para que podaacuteis trabajar siguieacutendolos y asiacute os podremos demostrar algu-
nos conceptos de manera maacutes eficaz
1) Todas las solicitudes-respuestas empiezan cuando se escribe un URL
(universal resource locator localizador universal de recursos) en la barra de di-
recciones del navegador web como httpdevoperacom Abrid un navega-
dor para hacerlo ahora mismo
Algo que quizaacute no sabeacuteis es que los navegadores realmente no utilizan los URL
para solicitar paacuteginas web en los servidores utilizan el Protocolo de Internet
o direcciones IP (que son casi como nuacutemeros de teleacutefono o direcciones pos-
tales que identifican los servidores) Por ejemplo la direccioacuten IP de http
devoperacom es 21323620898
2) Abrid una nueva pestantildea o ventana del navegador escribid http
wwwapplecom y pulsad intro a continuacioacuten escribid http1714916010
y pulsad intro llegareacuteis al mismo sitio Escribid http21323620898 en la ba-
rra de direcciones y pulsad intro ireacuteis a parar al mismo sitio que en el paso 1
pero obtendreacuteis un error 403 ldquoAcceso Denegadordquo esto es porque no teneacuteis per-
miso para acceder a la raiacutez real de este servidor
httpwwwapplecom actuacutea baacutesicamente como un alias para http
1714916010 pero iquestpor queacute iquestY coacutemo Ello se debe a que a las personas les
resulta maacutes faacutecil recordar palabras que largas cadenas de nuacutemeros El sistema
que realiza este trabajo se denomina Domain name system (DNS) o Sistema de
nombres de dominio que es esencialmente un directorio automaacutetico comple-
to de todos los ordenadores conectados a Internet Cuando escribiacutes http
devoperacom en la barra de direcciones y apretaacuteis intro esta direccioacuten se en-
viacutea a un servidor de nombres que intenta asociarla a vuestra direccioacuten IP Hay
muchos ordenadores conectados a Internet y no todos los servidores DNS tie-
CC-BY-NC-ND bull PID_00150463 14 Introduccioacuten al mundo de los estaacutendares web
nen un listado de cada ordenador que hay conectado de manera que hay un
sistema creado donde se puede dirigir la solicitud al servidor correcto para
atenderla
Asiacute pues el sistema DNS busca la paacutegina web wwwoperacom averigua que se
encuentra en 1714916010 y devuelve la direccioacuten IP al navegador
El ordenador enviacutea una solicitud al ordenador de la direccioacuten IP especificada
y espera obtener una respuesta Si todo va bien el ordenador del servidor en-
viacutea un breve mensaje de retorno al cliente que dice que todo es correcto (po-
deacuteis ver la figura 1) seguido de la propia paacutegina web Este tipo de mensaje estaacute
incluido en un encabezamiento HTTP
Figura 1
En este caso todo es correcto y el servidor devuelve la paacutegina web correcta
Si algo va mal por ejemplo si se escribe incorrectamente el URL en su lugar
se obtendraacute un error HTTP el famoso error 404 ldquono se encuentra la paacuteginardquo
es el ejemplo maacutes comuacuten que se puede encontrar
3) Escribid httpdevoperacomjoniscoolhtml la paacutegina no existe o sea
que obtendreacuteis un error 404 Probadlo con algunas paacuteginas en diferentes paacute-
ginas web que no existan y os devolveraacuten paacuteginas diferentes Esto se debe al
hecho de que algunos desarrolladores web han dejado que el servidor web soacutelo
emita la paacutegina de error predeterminada y otros han codificado paacuteginas de
error personalizadas para que aparezcan cuando se devuelve una paacutegina no
existente Se trata de una teacutecnica avanzada que no trataremos en esta asigna-
tura pero que afortunadamente se veraacute pronto en un artiacuteculo aparte en
devoperacom
Por uacuteltimo una nota sobre los URL generalmente el primer URL al que se ac-
cede en una paacutegina web no tiene un nombre de archivo real al final (por ejem-
plo httpwwwmysitecom) y a continuacioacuten las paacuteginas subsiguientes a
veces tienen y a veces no Siempre se accede a archivos reales pero en ocasio-
nes el desarrollador web ha configurado el servidor web para que no muestre
CC-BY-NC-ND bull PID_00150463 15 Introduccioacuten al mundo de los estaacutendares web
los nombres de archivo en el URL esto a menudo permite conseguir URL maacutes
limpios y faacuteciles de recordar que conducen a una mejor experiencia para el
usuario de vuestra paacutegina web
22 Tipos de contenido
Ahora que ya os hemos ensentildeado una solicitud-respuesta HTTP queremos
que os fijeacuteis en los diferentes tipos de contenido que pueden encontrarse
en Internet Los hemos agrupado en 4 tipos texto normal estaacutendares web
paacuteginas web dinaacutemicas y formatos que requieren otras aplicaciones o co-
nectores
221 Texto normal
Durante los primeros diacuteas de Internet antes de que apareciera cualquier estaacuten-
dar web o conector Internet era principalmente imaacutegenes y texto normal ar-
chivos con una extensioacuten txt o similar Cuando se encuentra un texto normal
en Internet el navegador lo muestra tal como es sin ninguacuten tipo de proceso
Todaviacutea pueden encontrarse ficheros de texto normal en paacuteginas web univer-
sitarias
222 Estaacutendares web
Las herramientas de construccioacuten baacutesicas de la web son los tres principales es-
taacutendares web HTML (o XHTML aquiacute utilizaremos ambos indistintamente
para nuestras finalidades) CSS y JavaScript
a) Lenguaje de marcado de hipertexto (HTML) es un nombre realmente
bueno con respecto a la definicioacuten de su objetivo El HTML se utiliza para di-
vidir un documento especificar sus contenidos y su estructura y definir el sig-
nificado de cada parte (es lo que incluye todo el texto etc que se ve en las
paacuteginas web) Utiliza elementos para identificar los diferentes componentes
de una paacutegina
b) Las hojas de estilo en cascada (CSS) dan un control total sobre coacutemo se
visualiza un elemento
Existen muchas ventajas para separar la estructura del formato y lo vere-
mos con maacutes detalle en el siguiente apartado Para demostrar la potencia
de HTML y CSS utilizados de manera combinada la figura 2 muestra a la
izquierda HTML normal sin ninguacuten formato antildeadido mientras que a la
derecha puede verse exactamente el mismo HTML con algunos estilos de
CSS aplicados
Cambios de formato
Utilizando declaraciones de es-tilo es muy sencillo cambiar todos los paacuterrafos para que queden a doble espacio
line-height 2em
O hacer que todos los encabe-zamientos de segundo nivel sean verdes
color green
CC-BY-NC-ND bull PID_00150463 16 Introduccioacuten al mundo de los estaacutendares web
Figura 2
HTML normal a la izquierda HTML con CSS aplicado a la derecha
c) Por uacuteltimo el lenguaje JavaScript aporta funciones dinaacutemicas a las paacuteginas
web Se pueden escribir pequentildeos programas en JavaScript que se ejecutaraacuten en el
ordenador cliente y que no requieren que haya ninguacuten software especial instala-
do en el servidor JavaScript permite antildeadir algunas funciones baacutesicas e interacti-
vidad a las paacuteginas web pero tiene sus limitaciones lo que nos lleva a hablar de
lenguajes de programacioacuten del lado del servidor y a paacuteginas web dinaacutemicas
223 Paacuteginas web dinaacutemicas
En ocasiones cuando navegueacuteis por Internet os encontrareacuteis paacuteginas web que
no tienen una extensioacuten html es posible que tengan una extensioacuten php asp
aspx jsp u otras extensiones extrantildeas Todos son ejemplos de tecnologiacuteas
web dinaacutemicas que se pueden utilizar para crear paacuteginas web que tengan sec-
ciones dinaacutemicas coacutedigo que muestra diferentes resultados seguacuten los valores
que reciba por ejemplo de una base de datos de un formulario o de otra fuen-
te de datos Trataremos estos tipos de paacuteginas web en el subapartado ldquoPaacuteginas
web estaacuteticas o dinaacutemicasrdquo a continuacioacuten
224 Formatos que requieren otras aplicaciones o conectores
Como los navegadores web soacutelo estaacuten equipados para interpretar y mostrar de-
terminadas tecnologiacuteas como estaacutendares web si solicitaacuteis un URL que apunta
a un formato de archivo complejo o a una paacutegina web que contiene una tec-
nologiacutea que requiere conectores (plugins) se descargaraacute en vuestro ordenador
o se abriraacute utilizando el conector necesario si el navegador lo tiene instalado
Ejemplos de conectores
Si os encontraacuteis un documento de Word de Excel PDF un fichero comprimido (porejemplo ZIP o SIT) un fichero de imaacutegenes complejas como Photoshop PSD u otrofichero complejo que el navegador no comprende generalmente el navegador os pre-guntaraacute si deseaacuteis descargar o abrir el fichero Ambas acciones normalmente tienen resul-tados similares excepto que la uacuteltima haraacute que el fichero se descargue y a continuacioacutense abra con una aplicacioacuten que lo comprende si estaacute instalada
CC-BY-NC-ND bull PID_00150463 17 Introduccioacuten al mundo de los estaacutendares web
Si os encontraacuteis una paacutegina que contenga una peliacutecula Flash MP3 u otro formato de muacutesicaMPEG u otro formato de viacutedeo el navegador lo reproduciraacute utilizando un conector si hayuno instalado En caso contrario se proporcionaraacute un enlace para instalar el conector nece-sario o el archivo se descargaraacute y buscaraacute una aplicacioacuten de escritorio para ejecutarlo
Naturalmente hay algunas aacutereas grises por ejemplo SVG (scalable vector grap-
hics graacuteficos vectoriales escalables) es un estaacutendar web que se ejecuta de manera
nativa en algunos navegadores como Opera pero no en otros como Internet
Explorer El IE necesita un conector para comprender los SVG Hay una serie de
navegadores que incluyen algunos conectores previamente instalados de modo
que es posible que no seaacuteis conscientes de que el contenido se estaacute visualizando
mediante un conector y de manera no nativa en el navegador
23 Paacuteginas web estaacuteticas o dinaacutemicas
Asiacute pues iquestqueacute son las paacuteginas web estaacuteticas y dinaacutemicas y cuaacutel es la diferencia
entre ambas Como en una caja de bombones todo se basa en el relleno
Otra cosa que cabe tener en cuenta es que se debe instalar un software especial
en el servidor para crear una paacutegina web dinaacutemica Mientras que los ficheros
HTML estaacuteticos normales se guardan con una extensioacuten de fichero html es-
tos ficheros contienen coacutedigo dinaacutemico especial ademaacutes del HTML y se guar-
dan con extensiones de archivo especiales para indicarle al servidor web que
necesitan un procesado adicional antes de enviarlos al cliente (como por
ejemplo que se inserten los datos desde la base de datos) los archivos PHP
por ejemplo generalmente tienen una extensioacuten de archivo php
Hay muchos lenguajes dinaacutemicos que se pueden elegir el PHP que hemos
mencionado antes y otros como Python Ruby on Rails ASPNET y Coldfu-
sion En definitiva todos estos lenguajes tienen maacutes o menos las mismas ca-
pacidades como hablar con bases de datos validar la informacioacuten introducida
en los formularios etc pero hacen las cosas de manera ligeramente diferente
y tienen algunas ventajas e inconvenientes Todo se reduce a la forma maacutes
sencilla que mejor se adapte
Paacutegina web dinaacutemica
Podeacuteis ver un ejemplo de paacutegi-na web dinaacutemica id a Ama-zon con vuestro navegador web y buscad cinco productos diferentes Amazon no os ha enviado cinco paacuteginas diferen-tes os ha enviado la misma paacutegina cinco veces pero con diferente informacioacuten dinaacutemi-ca completada cada vez Esta informacioacuten diferente se guar-da en una base de datos que entrega la informacioacuten corres-pondiente cuando se solicita y la enviacutea al servidor web para in-sertarla en la paacutegina dinaacutemica wwwamazoncom
Una paacutegina web estaacutetica es una paacutegina web donde el contenido el
HTML y los graacuteficos son siempre estaacuteticos ndashse sirve a cualquier visitante
de la misma manera a no ser que la persona que ha creado la web deci-
da cambiar manualmente su copia en el servidorndash exactamente lo que
hemos estado repasando en la mayor parte de este apartado
Por el contrario en una paacutegina web dinaacutemica el contenido del servi-
dor es el mismo pero en vez de ser soacutelo HTML tambieacuten contiene coacutedi-
go dinaacutemico que puede mostrar datos diferentes seguacuten la informacioacuten
que suministre a la paacutegina web
CC-BY-NC-ND bull PID_00150463 18 Introduccioacuten al mundo de los estaacutendares web
Resumen
Hasta aquiacute el recorrido por la sala de maacutequinas de Internet Este apartado real-
mente soacutelo trata de pasada muchos de los temas que incluye pero resulta uacutetil por-
que los pone en perspectiva entre ellos y muestra coacutemo se relacionan y funcionan
entre siacute Todaviacutea queda mucho por aprender sobre la sintaxis real del lenguaje que
conforma el HTML el CSS y JavaScript y esto es lo que haremos a continuacioacuten
el apartado siguiente se centra en el modelo de estaacutendares web HTML CSS y Ja-
vaScript de desarrollo web y da un vistazo al coacutedigo de la paacutegina web
Preguntas de repaso
1 Realizad una breve descripcioacuten de HTML y HTTP y explicad la diferencia en-
tre los dos
2 Explicad la funcioacuten de un navegador web
3 Navegad por Internet durante 5-10 minutos e intentad encontrar algunos
tipos diferentes de contenidos texto normal imaacutegenes HTML paacuteginas dinaacute-
micas como paacuteginas PHP y NET (aspx) PDF documentos de Word peliacuteculas
Flash etc Acceded a algunos de estos contenidos y pensad coacutemo os los mues-
tra el ordenador
4 iquestCuaacutel es la diferencia entre una paacutegina estaacutetica y una paacutegina dinaacutemica
5 Encontrad una lista de coacutedigos de error HTTP enumerad cinco y explicad
queacute significa cada uno de ellos
Lecturas complementarias
En esta asignatura ya no volveremos a hablar de los lenguajes dinaacutemicos pero
hemos creado una lista de recursos en caso de que queraacuteis leeacuteroslos
Rails Fernandez Obie (2007) The Rails Way Addison-Wesley Professional Ruby
Series
Railss screencasts
httpwwwrubyonrailsorgscreencasts
PHP Powers David (2006) PHP Solutions Dynamic web development made easy
friends of ED
Documentacioacuten en liacutenea de PHP
httpwwwphpnetdocsphp
ASPNET Lorenz Patrick (2003) ASPNET 20 Revealed Apress
ASPNET documentacioacuten y guiacuteas en liacutenea de ASPNET
httpaspnet
CC-BY-NC-ND bull PID_00150463 19 Introduccioacuten al mundo de los estaacutendares web
3 El modelo de estaacutendares web HTML CSS y JavaScriptJonathan Lane
En el uacuteltimo apartado hemos visto brevemente las herramientas de construc-
cioacuten baacutesicas de la web HTML (o XHTML) CSS y JavaScript Ahora es el mo-
mento de ampliar un poco maacutes y observarlos individualmente queacute hacen y
coacutemo interaccionan entre ellos para crear una paacutegina web
31 iquestPor queacute separar
Eacutesta es generalmente la primera pregunta que se formula sobre los estaacutendares
web Se puede crear el contenido el estilo y el formato soacutelo utilizando HTML
elementos de tipo de letra para el estilo y tablas HTML para el formato de ma-
nera que iquestpor queacute preocuparse de este asunto de XHTMLCSS El uso de ta-
blas para el formato etc es como se soliacutea hacer en los malos tiempos del
disentildeo web y mucha gente todaviacutea lo hace de esta manera (aunque no se de-
beriacutea de hacer) y de hecho es uno de los motivos por los que hemos creado
esta asignatura Aquiacute no trataremos estos meacutetodos Eacutestas son las razones maacutes
importantes para utilizar CSS y HTML en vez de meacutetodos obsoletos
1) Eficiencia del coacutedigo cuanto mayores sean los archivos maacutes tardaraacuten en
descargarse y maacutes dinero le costaraacute a algunas personas (algunas personas toda-
viacutea pagan por megabyte descargado) Por lo tanto no se debe malgastar el an-
cho de banda con paacuteginas grandes abarrotadas de informacioacuten de estilo y de
formato en cada archivo HTML Una alternativa mucho mejor es que los ar-
chivos HTML esteacuten desglosados y limpios e incluir la informacioacuten de estilo y
de formato soacutelo una vez en un archivo CSS independiente o en varios
2) Facilidad de mantenimiento en relacioacuten con el uacuteltimo punto si la infor-
macioacuten de estilo y formato soacutelo se especifica en un sitio quiere decir que soacutelo
habraacute que hacer actualizaciones en un lugar si se quiere cambiar el aspecto de
la paacutegina web iquestPrefeririacuteais tener que actualizar esta informacioacuten en cada paacute-
gina de vuestra web No lo creo
3) Accesibilidad los usuarios de la web con problemas visuales pueden
utilizar una tipo de software conocido como ldquolector de pantallardquo para ac-
ceder a la informacioacuten mediante el sonido en vez de la vista literalmente
les lee la paacutegina Ademaacutes el software de introduccioacuten de datos mediante la
voz que utilizan las personas con problemas de movilidad tambieacuten se be-
neficia de las paacuteginas web con una semaacutentica bien construida De manera
muy parecida al lector de pantalla que utiliza las instrucciones del teclado
para navegar por los encabezamientos enlaces y formularios un usuario
Eficiencia del coacutedigo
Para ver un caso real de este hecho en accioacuten podeacuteis ver el artiacuteculo sobre la reescritura de Slashdot en A List Apart don-de el autor tomoacute una paacutegina web muy popular y la reescri-bioacute en XHTMLCSS httpwwwalistapartcomarticlesslashdot
CC-BY-NC-ND bull PID_00150463 20 Introduccioacuten al mundo de los estaacutendares web
que interaccione mediante voz utilizaraacute instrucciones con su voz Los do-
cumentos web marcados semaacutenticamente en vez de presentacionalmente
pueden resultar maacutes faacuteciles de navegar y la informacioacuten que contienen es
maacutes faacutecil de encontrar por parte del usuario En otras palabras cuanto maacutes
raacutepidamente ldquoentre en materiardquo (el contenido) mejor Los lectores de pan-
talla no pueden acceder al texto dentro de imaacutegenes y encuentran confusos
algunos usos de JavaScript Aseguraos de que el contenido maacutes importante
estaacute disponible para todo el mundo
4) Compatibilidad de dispositivos ya que vuestra paacutegina XHTML es simple-
mente etiquetado normal sin informacioacuten de estilo se puede reformatear
para diferentes dispositivos con atributos ampliamente variados (por ejemplo
el tamantildeo de pantalla) simplemente aplicando una hoja de estilos alternativa
podeacuteis hacerlo de varias maneras Podeacuteis ver los artiacuteculos de devoperacom
para obtener recursos al respecto CSS tambieacuten permite especificar hojas de es-
tilo diferentes a nivel nativo para distintos meacutetodos de presentacioacuten o tipos de
soporte (por ejemplo visualizacioacuten en pantalla impresioacuten visualizacioacuten en
un dispositivo moacutevil etc)
5) Motores de buacutesqueda en la web probablemente os interesaraacute que vues-
tras paacuteginas web sean faacuteciles de encontrar al buscar en Google o en otros mo-
tores de busca Un motor de buacutesqueda utiliza un crawler o arantildea web que es
una pieza de software especializada para leer vuestras paacuteginas Si esta arantildea tu-
viera problemas para encontrar el contenido de vuestras paacuteginas o interpretara
mal lo que es importante porque no habeacuteis definido los encabezamientos
como encabezamientos etc entonces seguro que vuestra posicioacuten en los re-
sultados de busca se veraacute afectada
6) Es simplemente una buena praacutectica se trata de un motivo un poco del
tipo ldquoporque lo digo yordquo pero hablad con cualquier desarrollador o disentildeador
web profesional consciente de los estaacutendares y seguro que os dice que separar
el contenido el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacioacuten
32 Etiquetado la base de cada paacutegina
httpdevoperacomarticlesmobile
HTML y XHTML son lenguajes de etiquetado formados por elemen-
tos que contienen atributos (algunos opcionales y otros obligatori-
os) Estos elementos se utilizan para etiquetar los diferentes tipos de
contenidos en los documentos especificando que cada trozo de con-
tenido se debe entregar supuestamente como en los navegadores web
(por ejemplo encabezamientos paacuterrafos tablas listas con vintildeetas
etc)
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 2 Introduccioacuten al mundo de los estaacutendares web
CC-BY-NC-ND bull PID_00150463 Introduccioacuten al mundo de los estaacutendares web
Iacutendice
1 La historia de Internet y la web y la evolucioacuten de los estaacutendares web 511 Los oriacutegenes de Internet 5
12 La creacioacuten de la web mundial 6
121 Las ldquoguerras de los navegadoresrdquo 7
13 La aparicioacuten de los estaacutendares web 8
131 La formacioacuten del W3C 8
132 El proyecto de estaacutendares web 9
133 El auge de los estaacutendares web 9
Resumen 10
Preguntas de repaso 11
Lecturas complementarias 11
2 iquestCoacutemo funciona Internet 1221 iquestCoacutemo se comunican los ordenadores a traveacutes de Internet 12
211 Diseccioacuten de un ciclo de solicitud-respuesta 13
22 Tipos de contenido 15
221 Texto normal 15
222 Estaacutendares web 15
223 Paacuteginas web dinaacutemicas 16
224 Formatos que requieren otras aplicaciones o conectores 16
23 Paacuteginas web estaacuteticas o dinaacutemicas 17
Resumen 18
Preguntas de repaso 18
Lecturas complementarias 18
3 El modelo de estaacutendares web HTML CSS y JavaScript 1931 iquestPor queacute separar 19
32 Etiquetado la base de cada paacutegina 20
321 iquestQueacute es el XHTML 21
322 Validacioacuten iquestqueacute es eso 22
33 CSS antildeadimos un poco de estilo 22
34 JavaScript adicioacuten de comportamiento a las paacuteginas web 24
35 Una paacutegina de ejemplo 24
351 indexhtml 24
352 stylescss 25
Resumen 27
Preguntas de repaso 28
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidad 2941 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web 29
CC-BY-NC-ND bull PID_00150463 Introduccioacuten al mundo de los estaacutendares web
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente 30
421 Amazon iquestcomprar con estaacutendares 31
422 CNN iquestnoticias estandarizadas 31
423 Apple el maacuteximo de elegancia en disentildeo
iquesty en validacioacuten 32
424 Un pequentildeo sondeo de compatibilidad de estaacutendares 33
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares 33
431 Educacioacuten 34
432 Motivos empresariales 34
Resumen 35
Preguntas de repaso 36
Lecturas complementarias 36
CC-BY-NC-ND bull PID_00150463 5 Introduccioacuten al mundo de los estaacutendares web
1 La historia de Internet y la web y la evolucioacuten de los estaacutendares webMark Norman Francis
ldquoiquestPor doacutende debo empezar Majestad
Empieza por el principio ndashdijo el rey solemnementendash y continuacutea hasta llegar al final En-tonces detenterdquo
Alicia en el Paiacutes de las Maravillas Lewis Caroll
Todo debe empezar por alguacuten sitio de manera que nuestro viaje empezaraacute con
una leccioacuten centrada en la historia A continuacioacuten realizaremos un breve re-
paso de la creacioacuten de Internet la web mundial (World Wide Web) y de los
estaacutendares web en los que se centra toda esta serie Creo que es uacutetil e intere-
sante entender coacutemo hemos llegado hasta donde estamos pero seremos lo
bastante breves como para no agobiaros y poder entrar en detalle de manera
raacutepida y agradable Si no estaacuteis familiarizados con alguacuten teacutermino no os pre-
ocupeacuteis si son importantes para aprender sobre el desarrollo web se definiraacuten
en los uacuteltimos apartados que ampliacutean cada tema y siempre podeacuteis hacer una
busca en Google Si ya estaacuteis familiarizados con la historia de Internet o de la
web mundial os podeacuteis saltar este apartado sobre los estaacutendares web
11 Los oriacutegenes de Internet
El cuatro de octubre de 1957 sucedioacute un acontecimiento que cambiariacutea el
mundo La Unioacuten Sovieacutetica lanzoacute con eacutexito el primer sateacutelite a la oacuterbita de la
Tierra Se llamaba Sputnik 1 y sorprendioacute al mundo especialmente a Estados
Unidos que teniacutea en curso su propio programa de lanzamientos de sateacutelites
pero todaviacutea no habiacutean lanzado ninguno
Este acontecimiento condujo directamente a la creacioacuten de la ARPA (Advan-
ced Research Projects Agency la Agencia de Proyectos de Investigacioacuten Avan-
zada) del Departamento de Defensa de Estados Unidos a causa de la necesidad
reconocida de una organizacioacuten que pudiera investigar y desarrollar ideas
avanzadas y tecnologiacutea maacutes allaacute de las necesidades identificadas actualmente
Quizaacute su proyecto maacutes famoso (sin duda el maacutes ampliamente utilizado) fue la
creacioacuten de Internet
En 1960 el psicoacutelogo y cientiacutefico informaacutetico Joseph Licklider publicoacute un docu-
mento titulado Simbiosis Hombre-Ordenador que articuloacute la idea de ordenadores
en red que proporcionaban un almacenaje y una recuperacioacuten avanzada de los
datos En 1962 mientras trabajaba para la ARPA como jefe de la oficina de proce-
samiento de informacioacuten formoacute un grupo para continuar con la investigacioacuten in-
formaacutetica pero lo abandonoacute antes de que se trabajara en aquella idea
CC-BY-NC-ND bull PID_00150463 6 Introduccioacuten al mundo de los estaacutendares web
El plan para esta red de ordenadores (que se denominariacutea ARPANET) se presentoacute
en octubre de 1967 y en diciembre de 1969 la primera red de cuatro ordenadores
ya estaba conectada y en funcionamiento El principal problema de la creacioacuten
de una red era coacutemo conectar redes fiacutesicamente separadas sin colapsar los recur-
sos de la red a causa de las conexiones constantes La teacutecnica que resolvioacute este
problema se conoce como conmutacioacuten de paquetes e implica que las solicitu-
des de datos se dividen en pequentildeos trozos (paquetes) que se pueden procesar
raacutepidamente sin bloquear la comunicacioacuten de los otros Este principio todaviacutea
se utiliza en la actualidad para el funcionamiento de Internet
Este concepto se adoptoacute ampliamente con el nacimiento de otras redes que
utilizaban la misma teacutecnica de conmutacioacuten de paquetes Por ejemplo la X25
(desarrollada por la Unioacuten Internacional de Telecomunicaciones) formoacute la
base de la primera red universitaria del Reino Unido JANET (que permitiacutea a
las universidades del Reino Unido enviar y recibir ficheros) y la red puacuteblica
norteamericana CompuServe (una empresa comercial que permitiacutea a peque-
ntildeas empresas y personas acceder a los recursos informaacuteticos con tiempo com-
partido y posteriormente el acceso a Internet) Estas redes a pesar de tener
muchas conexiones eran maacutes privadas que la Internet actual
Esta proliferacioacuten de diferentes protocolos de red no tardoacute mucho en convertirse
en un problema cuando se intentaba que todas las redes independientes se comu-
nicaran Sin embargo habiacutea una solucioacuten a la vista Robert Kahn mientras traba-
jaba en un proyecto de red de paquetes por sateacutelite para ARPA empezoacute a definir
algunas reglas para una arquitectura de red maacutes abierta que sustituyera el proto-
colo actual que se utilizaba en ARPANET Maacutes adelante Vinton Cerf ndashde la Uni-
versidad de Stanfordndash se incorporoacute al proyecto y ambos crearon un sistema que
enmascaraba las diferencias entre protocolos de red utilizando un nuevo estaacuten-
dar La publicacioacuten del borrador de la especificacioacuten en diciembre de 1974 se de-
nominoacute Programa de Control de Transmisioacuten de Internet
Esta especificacioacuten reduciacutea las funciones de la red y trasladaba la tarea de man-
tener la integridad de la transmisioacuten al ordenador principal El resultado final
fue que era posible unir faacutecilmente casi todas las redes entre ellas ARPA asu-
mioacute el coste del desarrollo del software y en 1977 se llevoacute a cabo una demos-
tracioacuten de comunicacioacuten entre tres redes diferentes En 1981 la especificacioacuten
se completoacute publicoacute y adoptoacute y en 1982 las conexiones de ARPANET fuera de
Estados Unidos se convirtieron para utilizar el nuevo protocolo TCPIP Habiacutea
llegado Internet tal como la conocemos
12 La creacioacuten de la web mundial
Gopher era un sistema de recuperacioacuten de informacioacuten que se utilizaba a
principios de los antildeos noventa y que proporcionaba un meacutetodo de entrega de
menuacutes de enlaces a archivos recursos informaacuteticos y otros menuacutes Estos me-
nuacutes podiacutean cruzar los liacutemites del ordenador y utilizar Internet para ir a buscar
httpenwikipediaorgwikiGopher_(protocol)
CC-BY-NC-ND bull PID_00150463 7 Introduccioacuten al mundo de los estaacutendares web
menuacutes de otros sistemas Era muy popular en las universidades que queriacutean
proporcionar informacioacuten para todo el campus y organizaciones grandes que
queriacutean centralizar el almacenaje y la gestioacuten de documentos
Gopher fue creado por la Universidad de Minnesota En febrero de 1993 esta
universidad anuncioacute que cobrariacutea licencias por el uso de la implementacioacuten
de referencia del servidor Gopher En consecuencia muchas organizaciones
empezaron a buscar alternativas a Gopher
El Consejo Europeo de Investigacioacuten Nuclear (CERN) en Suiza teniacutea esta al-
ternativa Tim Berners-Lee habiacutea estado trabajando en un sistema de gestioacuten
de informacioacuten en el que el texto pudiera contener enlaces y referencias a
otros trabajos de manera que permitiera al lector saltar raacutepidamente de un do-
cumento a otro Habiacutea creado un servidor para publicar este estilo de docu-
mento (denominado hipertexto) y tambieacuten un programa para leerlo al que
habiacutea denominado World Wide Web Este software se publicoacute por primera vez
en 1991 pero dos acontecimientos provocaron una explosioacuten de popularidad
y finalmente la sustitucioacuten de Gopher
El 30 de abril de 1993 el CERN cedioacute el coacutedigo fuente del World Wide Web al
dominio puacuteblico de manera que cualquiera pudiera utilizar o construir sobre
el software sin ninguacuten coste
Asiacute maacutes tarde en el mismo antildeo el NCSA (National Center for Supercom-
puting Applications Centro Nacional para Aplicaciones de Supercomputa-
cioacuten) publicoacute un programa que era una combinacioacuten de navegador web y
cliente Gopher denominado Mosaic Originalmente soacutelo estaba disponible
para equipos Unix y en forma de coacutedigo fuente pero en diciembre de 1993
Mosaic ya disponiacutea de una nueva versioacuten con instaladores tanto para Apple
Macintosh como para Microsoft Windows Mosaic aumentoacute en popularidad
raacutepidamente y en consecuencia tambieacuten la web
El nuacutemero de navegadores web disponibles aumentoacute muchiacutesimo muchos de
ellos creados para proyectos de investigacioacuten en universidades y corporacio-
nes como Telenor (una compantildeiacutea noruega de comunicaciones) que creoacute la
primera versioacuten del navegador Opera en 1994
121 Las ldquoguerras de los navegadoresrdquo
La popularizacioacuten de la web atrajo intereses comerciales Marc Andreessen
abandonoacute el NCSA y junto con Jim Clark fundoacute Mosaic Communications
que maacutes adelante cambioacute su nombre por Netscape Communications Cor-
poration y empezaron a trabajar en lo que acabariacutea convirtieacutendose en el
navegador Netscape La versioacuten 10 del software se publicoacute en diciembre de
1994
CC-BY-NC-ND bull PID_00150463 8 Introduccioacuten al mundo de los estaacutendares web
Spyglass Inc (la rama comercial del NCSA) autorizoacute la comercializacioacuten de su
tecnologiacutea Mosaic a Microsoft para formar la base de Internet Explorer La ver-
sioacuten 10 se publicoacute en agosto de 1995
Una raacutepida escalada siguioacute a continuacioacuten en la que Netscape y Microsoft inten-
taban cada uno obtener una ventaja competitiva en cuanto a las funciones que
admitiacutean con el fin de atraer desarrolladores Desde entonces esta competicioacuten se
ha conocido como ldquolas guerras de los navegadoresrdquo Opera mantuvo una presen-
cia modesta pero continuada a lo largo de este periacuteodo e intentoacute innovar y ser
compatible con los estaacutendares web lo mejor posible en aquellos tiempos
13 La aparicioacuten de los estaacutendares web
Durante las guerras de los navegadores Microsoft y Netscape se centraron en
la implementacioacuten de nuevas funciones en lugar de resolver los problemas de
las funciones con las que ya eran compatibles y tambieacuten en antildeadir funciones
propias y crear funciones que fueran competencia directa de las existentes en
el otro navegador pero implementadas de manera incompatible
En aquellos momentos los desarrolladores se veiacutean forzados a tratar con nive-
les de confusioacuten cada vez mayores cuando se intentaban construir las paacuteginas
web a veces hasta el punto de haber de construir dos paacuteginas diferentes pero
duplicadas en la praacutectica para cada uno de los dos principales navegadores y
otras simplemente optando por ser compatibles soacutelo con un navegador de
manera que los usuarios que utilizaran el otro no pudieran utilizar sus paacuteginas
Eacutesta era una manera muy mala de trabajar y la inevitable reaccioacuten negativa de
los desarrolladores no tardoacute en producirse
131 La formacioacuten del W3C
En 1994 Tim Berners-Lee fundoacute el World Wide Web Consortium (W3C) en el
Massachusetts Institute of Technology con el apoyo del CERN DARPA (como
se habiacutea bautizado la ARPA) y la Comisioacuten Europea La misioacuten del W3C era
estandarizar los protocolos y las tecnologiacuteas utilizadas para construir la web
de manera que el contenido estuviera disponible para la mayor parte posible
de la poblacioacuten del mundo
Durante los antildeos siguientes el W3C publicoacute varias especificaciones (denomina-
das recomendaciones) incluyendo HTML 40 el formato para imaacutegenes PNG y las
versiones 1 y 2 de CSS (cascading style sheets u hojas de estilo en cascada)
No obstante el W3C no impone sus recomendaciones Los fabricantes soacutelo
deben ajustarse a la documentacioacuten del W3C si quieren etiquetar su producto
como cumplidor del W3C En la praacutectica esto no es un argumento de venta
CC-BY-NC-ND bull PID_00150463 9 Introduccioacuten al mundo de los estaacutendares web
valioso porque casi todos los usuarios de la web desconocen y probablemente
no les importa quieacuten es el W3C En consecuencia las guerras de los navega-
dores continuaron sin trabas
132 El proyecto de estaacutendares web
En 1998 el mercado de los navegadores estaba dominado por Internet Explo-
rer 4 y Netscape Navigator 4 Se habiacutea lanzado una versioacuten beta de Internet
Explorer 5 que implementaba un nuevo HTML dinaacutemico de marca registrada
Ello significaba que los desarrolladores web profesionales debiacutean conocer cin-
co maneras diferentes de escribir JavaScript
En consecuencia un grupo de desarrolladores y disentildeadores web se asociaron
entre ellos Este grupo se denominaba WaSP (Web Standards Project Proyecto
de estaacutendares web) La idea era que si los documentos del W3C se llamaban
estaacutendares en vez de recomendaciones podriacutean convencer a Microsoft y Netsca-
pe de que les dieran su apoyo
El antiguo meacutetodo de realizar un llamamiento a la accioacuten se llevoacute a cabo me-
diante una teacutecnica publicitaria tradicional denominada barricada donde una
empresa lanza un anuncio en todos los canales de emisioacuten al mismo tiempo
de manera que aunque el espectador cambie de canal obtendraacute exactamente
el mismo mensaje WaSP publicoacute un artiacuteculo simultaacuteneamente en varias paacutegi-
nas centradas en el desarrollo web como buildercom Wired online y algunas
listas de correo muy populares
Otra teacutecnica que utilizaron fue ridiculizar a las empresas que se uniacutean al W3C
(y a otros organismos de estaacutendares) pero que despueacutes se centraban maacutes en
crear nuevas funciones que en hacer que los conceptos baacutesicos para los que se
habiacutean comprometido fueran correctos para empezar
Todo esto suena un poco negativo pero los de WaSP no se conformaban con
criticar a la gente tambieacuten la ayudaban Siete miembros formaron CSS Samu-
rai que identificoacute los diez problemas principales de compatibilidad CSS en
Opera e Internet Explorer (Opera resolvioacute sus problemas y Microsoft no)
133 El auge de los estaacutendares web
En el 2000 Microsoft lanzoacute Internet Explorer 5 Macintosh Edition Fue un
hito muy importante ya que se trataba del navegador que se instalaba enton-
ces de manera predeterminada con el Mac OS y tambieacuten teniacutea un nivel decen-
te de compatibilidad con las recomendaciones del W3C Junto con el nivel
decente de compatibilidad con CSS y HTML Opera contribuyoacute a un movi-
miento positivo general con el que los desarrolladores y disentildeadores web se
CC-BY-NC-ND bull PID_00150463 10 Introduccioacuten al mundo de los estaacutendares web
sentiacutean coacutemodos disentildeando paacuteginas mediante estaacutendares web por primera
vez
WaSP persuadioacute a Netscape de retrasar el lanzamiento de la versioacuten 50 de
Netscape Navigator hasta que fuera mucho maacutes compatible (este trabajo for-
moacute la base de lo que ahora es Firefox un navegador muy popular) WaSP tam-
bieacuten creoacute un grupo de trabajo para Dreamweaver con el fin de animar a
Macromedia a cambiar su popular herramienta de autoriacutea web y dar soporte a
la creacioacuten de paacuteginas web compatibles
La popular paacutegina de desarrollo web A List Apart se redisentildeoacute a principios del 2001 y enun artiacuteculo que explicaba coacutemo y por queacute declaraba
ldquoEn seis meses un antildeo o dos antildeos como mucho todas las paacuteginas se disentildearaacuten con estosestaacutendares [] Podemos contemplar coacutemo nuestras capacidades se quedan obsoletas opodemos empezar a aprender ahora teacutecnicas basadas en estaacutendaresrdquo
Esto era un poco optimista no todas las paacuteginas ni siquiera en el antildeo 2009
estaacuten hechas con estaacutendares web Pero muchos les hicieron caso Los navega-
dores antiguos redujeron su cuota de mercado y dos paacuteginas web maacutes de perfil
muy alto se redisentildearon utilizando estaacutendares web la revista Wired en el 2002
y ESPN en el 2003 se convirtieron en liacutederes del sector en el soporte a los es-
taacutendares web y las nuevas teacutecnicas
Tambieacuten en el 2003 Dave Shea creoacute una paacutegina web denominada CSS Zen
Garden Debiacutea tener maacutes impacto sobre los profesionales web que cual-
quier otra cosa e ilustraba verdaderamente que todo el disentildeo podiacutea cam-
biar soacutelo modificando el estilo de la paacutegina el contenido podiacutea seguir
siendo ideacutentico
Desde entonces en la comunidad de desarrollo web profesional los estaacutenda-
res web se han convertido en un elemento de rigor En esta serie os daremos
unos excelentes fundamentos en estas teacutecnicas para que podaacuteis crear paacuteginas
web tan limpias semaacutenticas accesibles y conformes con los estaacutendares como
las de las grandes empresas
Resumen
En este apartado hemos hablado de coacutemo se creoacute la Internet moderna como
resultado de la carrera espacial de coacutemo Tim Berners-Lee definioacute el hipertexto
para una generacioacuten y de coacutemo los intereses comerciales de dos compantildeiacuteas
provocaron una de las reacciones maacutes notables de los desarrolladores como
nunca se habiacutea visto El teacutermino estaacutendares web se utiliza ahora maacutes amplia-
mente entre los profesionales web que cualquier otro teacutermino aplicado por el
W3C (de hecho el W3C ha empezado a utilizar el teacutermino en sus propias paacute-
ginas) de manera que por este motivo os ensentildearemos el modo de construir
paacuteginas web siguiendo los estaacutendares
CC-BY-NC-ND bull PID_00150463 11 Introduccioacuten al mundo de los estaacutendares web
Preguntas de repaso
Podriacuteais intentar investigar maacutes respondiendo estas preguntas
1 iquestQueacute navegadores estaacuten disponibles actualmente en Internet para los usu-
arios de Windows Mac OS X y Linux
2 iquestQueacute porcentaje de usuarios de la web utiliza cada navegador
3 iquestQueacute navegadores utilizan los dispositivos moacuteviles para acceder a las paacutegi-
nas web
4 iquestCuaacutentos estaacutendares web ha publicado el W3C y cuaacuteles son ampliamente
seguidos por los fabricantes de navegadores actualmente
Lecturas complementarias
Si quereacuteis saber maacutes es posible que queraacuteis visitar algunas de las paacuteginas sigui-
entes
The history of the Internet (wikipedia)
httpenwikipediaorgwikiHistory_of_the_Internet
The history of the World Wide Web (wikipedia)
httpenwikipediaorgwikiHistory_of_the_World_Wide_Web
The history of the W3C
httpwwww3orgConsortiumhistory
El Web Standards Project y su historia
httpwebstandardsorg
httpwwwwebstandardsorgabouthistory
A List Apart
httpwwwalistapartcom
CSS Zen Garden
httpwwwcsszengardencom
CC-BY-NC-ND bull PID_00150463 12 Introduccioacuten al mundo de los estaacutendares web
2 iquestCoacutemo funciona InternetJonathan Lane
Muy de vez en cuando es posible conseguir ver los engranajes y las correas que
actuacutean entre bastidores Hoy es vuestro diacutea de suerte Os llevareacute a dar una vuel-
ta tras los telares de una de las tecnologiacuteas maacutes interesantes que posiblemen-
te ya conoceacuteis bien la web
Este apartado trata sobre la tecnologiacutea subyacente que hace funcionar la web
bull Lenguaje de etiquetado de hipertexto (HTML)
bull Protocolo de transferencia de hipertexto (HTTP)
bull Sistema de nombres de dominio (DNS)
bull Servidores web y navegadores web
bull Contenido estaacutetico y dinaacutemico
Son materias bastante baacutesicas y aunque la mayor parte de lo que aquiacute se ex-
plica no os ayudaraacute a construir una paacutegina web mejor siacute que os proporcionaraacute
el lenguaje adecuado para hablar con clientes y otras personas sobre Internet
Es como lo que una institutriz muy inteligente dijo una vez en Sonrisas y
laacutegrimas ldquoCuando leemos empezamos por ABC Cuando cantamos empeza-
mos por Do Re Mirdquo En este apartado describiremos brevemente coacutemo los or-
denadores se comunican realmente utilizando HTTP y TCPIP y despueacutes nos
fijaremos en los diferentes lenguajes que se combinan para crear las paacuteginas
web que conforman Internet
21 iquestCoacutemo se comunican los ordenadores a traveacutes de Internet
Por suerte hemos mantenido las cosas simples para los ordenadores Cuando
se trata de la web la mayoriacutea de las paacuteginas estaacuten escritas utilizando el mismo
lenguaje el HTML que pasa de un sitio a otro utilizando un protocolo comuacuten
HTTP (hypertext transfer protocol o protocolo de transferencia de hipertexto) El
HTTP es el dialecto (especificacioacuten) comuacuten de Internet que permite por ejem-
plo que un equipo con Windows cante en armoniacutea con un ordenador que eje-
cute la versioacuten maacutes reciente y maacutes fantaacutestica de Linux (iexclDo Re Mi) Mediante
el uso de un navegador web ndashun software especial que interpreta el HTTP y en-
trega el HTML en una manera legible para los humanosndash las paacuteginas web crea-
das con HTML y con cualquier tipo de ordenador se pueden leer en cualquier
medio incluyendo teleacutefonos PDA e incluso en los sistemas de videojuegos
maacutes populares
Aunque hablen el mismo lenguaje los diferentes dispositivos que acceden
a la web han de tener algunas normas establecidas para poder hablar entre
CC-BY-NC-ND bull PID_00150463 13 Introduccioacuten al mundo de los estaacutendares web
ellos es como aprender a alzar la mano para preguntar en clase El HTTP
establece estas normas baacutesicas para Internet Gracias al HTTP un equipo
cliente (como vuestro ordenador) sabe que debe ser eacutel quien inicie una pe-
ticioacuten de una paacutegina web desde un servidor Un servidor es un ordenador
donde residen las paacuteginas web cuando escribiacutes una direccioacuten web en vues-
tro navegador un servidor recibe la peticioacuten encuentra la paacutegina web que
deseaacuteis y la enviacutea a vuestro ordenador para que se vea en vuestro navega-
dor
211 Diseccioacuten de un ciclo de solicitud-respuesta
Ahora que hemos visto todas las partes que permiten a los ordenadores comu-
nicarse a traveacutes de Internet trataremos con maacutes detalle el ciclo de solicitud-
respuesta de HTTP A continuacioacuten se presentan una serie de pasos numera-
dos para que podaacuteis trabajar siguieacutendolos y asiacute os podremos demostrar algu-
nos conceptos de manera maacutes eficaz
1) Todas las solicitudes-respuestas empiezan cuando se escribe un URL
(universal resource locator localizador universal de recursos) en la barra de di-
recciones del navegador web como httpdevoperacom Abrid un navega-
dor para hacerlo ahora mismo
Algo que quizaacute no sabeacuteis es que los navegadores realmente no utilizan los URL
para solicitar paacuteginas web en los servidores utilizan el Protocolo de Internet
o direcciones IP (que son casi como nuacutemeros de teleacutefono o direcciones pos-
tales que identifican los servidores) Por ejemplo la direccioacuten IP de http
devoperacom es 21323620898
2) Abrid una nueva pestantildea o ventana del navegador escribid http
wwwapplecom y pulsad intro a continuacioacuten escribid http1714916010
y pulsad intro llegareacuteis al mismo sitio Escribid http21323620898 en la ba-
rra de direcciones y pulsad intro ireacuteis a parar al mismo sitio que en el paso 1
pero obtendreacuteis un error 403 ldquoAcceso Denegadordquo esto es porque no teneacuteis per-
miso para acceder a la raiacutez real de este servidor
httpwwwapplecom actuacutea baacutesicamente como un alias para http
1714916010 pero iquestpor queacute iquestY coacutemo Ello se debe a que a las personas les
resulta maacutes faacutecil recordar palabras que largas cadenas de nuacutemeros El sistema
que realiza este trabajo se denomina Domain name system (DNS) o Sistema de
nombres de dominio que es esencialmente un directorio automaacutetico comple-
to de todos los ordenadores conectados a Internet Cuando escribiacutes http
devoperacom en la barra de direcciones y apretaacuteis intro esta direccioacuten se en-
viacutea a un servidor de nombres que intenta asociarla a vuestra direccioacuten IP Hay
muchos ordenadores conectados a Internet y no todos los servidores DNS tie-
CC-BY-NC-ND bull PID_00150463 14 Introduccioacuten al mundo de los estaacutendares web
nen un listado de cada ordenador que hay conectado de manera que hay un
sistema creado donde se puede dirigir la solicitud al servidor correcto para
atenderla
Asiacute pues el sistema DNS busca la paacutegina web wwwoperacom averigua que se
encuentra en 1714916010 y devuelve la direccioacuten IP al navegador
El ordenador enviacutea una solicitud al ordenador de la direccioacuten IP especificada
y espera obtener una respuesta Si todo va bien el ordenador del servidor en-
viacutea un breve mensaje de retorno al cliente que dice que todo es correcto (po-
deacuteis ver la figura 1) seguido de la propia paacutegina web Este tipo de mensaje estaacute
incluido en un encabezamiento HTTP
Figura 1
En este caso todo es correcto y el servidor devuelve la paacutegina web correcta
Si algo va mal por ejemplo si se escribe incorrectamente el URL en su lugar
se obtendraacute un error HTTP el famoso error 404 ldquono se encuentra la paacuteginardquo
es el ejemplo maacutes comuacuten que se puede encontrar
3) Escribid httpdevoperacomjoniscoolhtml la paacutegina no existe o sea
que obtendreacuteis un error 404 Probadlo con algunas paacuteginas en diferentes paacute-
ginas web que no existan y os devolveraacuten paacuteginas diferentes Esto se debe al
hecho de que algunos desarrolladores web han dejado que el servidor web soacutelo
emita la paacutegina de error predeterminada y otros han codificado paacuteginas de
error personalizadas para que aparezcan cuando se devuelve una paacutegina no
existente Se trata de una teacutecnica avanzada que no trataremos en esta asigna-
tura pero que afortunadamente se veraacute pronto en un artiacuteculo aparte en
devoperacom
Por uacuteltimo una nota sobre los URL generalmente el primer URL al que se ac-
cede en una paacutegina web no tiene un nombre de archivo real al final (por ejem-
plo httpwwwmysitecom) y a continuacioacuten las paacuteginas subsiguientes a
veces tienen y a veces no Siempre se accede a archivos reales pero en ocasio-
nes el desarrollador web ha configurado el servidor web para que no muestre
CC-BY-NC-ND bull PID_00150463 15 Introduccioacuten al mundo de los estaacutendares web
los nombres de archivo en el URL esto a menudo permite conseguir URL maacutes
limpios y faacuteciles de recordar que conducen a una mejor experiencia para el
usuario de vuestra paacutegina web
22 Tipos de contenido
Ahora que ya os hemos ensentildeado una solicitud-respuesta HTTP queremos
que os fijeacuteis en los diferentes tipos de contenido que pueden encontrarse
en Internet Los hemos agrupado en 4 tipos texto normal estaacutendares web
paacuteginas web dinaacutemicas y formatos que requieren otras aplicaciones o co-
nectores
221 Texto normal
Durante los primeros diacuteas de Internet antes de que apareciera cualquier estaacuten-
dar web o conector Internet era principalmente imaacutegenes y texto normal ar-
chivos con una extensioacuten txt o similar Cuando se encuentra un texto normal
en Internet el navegador lo muestra tal como es sin ninguacuten tipo de proceso
Todaviacutea pueden encontrarse ficheros de texto normal en paacuteginas web univer-
sitarias
222 Estaacutendares web
Las herramientas de construccioacuten baacutesicas de la web son los tres principales es-
taacutendares web HTML (o XHTML aquiacute utilizaremos ambos indistintamente
para nuestras finalidades) CSS y JavaScript
a) Lenguaje de marcado de hipertexto (HTML) es un nombre realmente
bueno con respecto a la definicioacuten de su objetivo El HTML se utiliza para di-
vidir un documento especificar sus contenidos y su estructura y definir el sig-
nificado de cada parte (es lo que incluye todo el texto etc que se ve en las
paacuteginas web) Utiliza elementos para identificar los diferentes componentes
de una paacutegina
b) Las hojas de estilo en cascada (CSS) dan un control total sobre coacutemo se
visualiza un elemento
Existen muchas ventajas para separar la estructura del formato y lo vere-
mos con maacutes detalle en el siguiente apartado Para demostrar la potencia
de HTML y CSS utilizados de manera combinada la figura 2 muestra a la
izquierda HTML normal sin ninguacuten formato antildeadido mientras que a la
derecha puede verse exactamente el mismo HTML con algunos estilos de
CSS aplicados
Cambios de formato
Utilizando declaraciones de es-tilo es muy sencillo cambiar todos los paacuterrafos para que queden a doble espacio
line-height 2em
O hacer que todos los encabe-zamientos de segundo nivel sean verdes
color green
CC-BY-NC-ND bull PID_00150463 16 Introduccioacuten al mundo de los estaacutendares web
Figura 2
HTML normal a la izquierda HTML con CSS aplicado a la derecha
c) Por uacuteltimo el lenguaje JavaScript aporta funciones dinaacutemicas a las paacuteginas
web Se pueden escribir pequentildeos programas en JavaScript que se ejecutaraacuten en el
ordenador cliente y que no requieren que haya ninguacuten software especial instala-
do en el servidor JavaScript permite antildeadir algunas funciones baacutesicas e interacti-
vidad a las paacuteginas web pero tiene sus limitaciones lo que nos lleva a hablar de
lenguajes de programacioacuten del lado del servidor y a paacuteginas web dinaacutemicas
223 Paacuteginas web dinaacutemicas
En ocasiones cuando navegueacuteis por Internet os encontrareacuteis paacuteginas web que
no tienen una extensioacuten html es posible que tengan una extensioacuten php asp
aspx jsp u otras extensiones extrantildeas Todos son ejemplos de tecnologiacuteas
web dinaacutemicas que se pueden utilizar para crear paacuteginas web que tengan sec-
ciones dinaacutemicas coacutedigo que muestra diferentes resultados seguacuten los valores
que reciba por ejemplo de una base de datos de un formulario o de otra fuen-
te de datos Trataremos estos tipos de paacuteginas web en el subapartado ldquoPaacuteginas
web estaacuteticas o dinaacutemicasrdquo a continuacioacuten
224 Formatos que requieren otras aplicaciones o conectores
Como los navegadores web soacutelo estaacuten equipados para interpretar y mostrar de-
terminadas tecnologiacuteas como estaacutendares web si solicitaacuteis un URL que apunta
a un formato de archivo complejo o a una paacutegina web que contiene una tec-
nologiacutea que requiere conectores (plugins) se descargaraacute en vuestro ordenador
o se abriraacute utilizando el conector necesario si el navegador lo tiene instalado
Ejemplos de conectores
Si os encontraacuteis un documento de Word de Excel PDF un fichero comprimido (porejemplo ZIP o SIT) un fichero de imaacutegenes complejas como Photoshop PSD u otrofichero complejo que el navegador no comprende generalmente el navegador os pre-guntaraacute si deseaacuteis descargar o abrir el fichero Ambas acciones normalmente tienen resul-tados similares excepto que la uacuteltima haraacute que el fichero se descargue y a continuacioacutense abra con una aplicacioacuten que lo comprende si estaacute instalada
CC-BY-NC-ND bull PID_00150463 17 Introduccioacuten al mundo de los estaacutendares web
Si os encontraacuteis una paacutegina que contenga una peliacutecula Flash MP3 u otro formato de muacutesicaMPEG u otro formato de viacutedeo el navegador lo reproduciraacute utilizando un conector si hayuno instalado En caso contrario se proporcionaraacute un enlace para instalar el conector nece-sario o el archivo se descargaraacute y buscaraacute una aplicacioacuten de escritorio para ejecutarlo
Naturalmente hay algunas aacutereas grises por ejemplo SVG (scalable vector grap-
hics graacuteficos vectoriales escalables) es un estaacutendar web que se ejecuta de manera
nativa en algunos navegadores como Opera pero no en otros como Internet
Explorer El IE necesita un conector para comprender los SVG Hay una serie de
navegadores que incluyen algunos conectores previamente instalados de modo
que es posible que no seaacuteis conscientes de que el contenido se estaacute visualizando
mediante un conector y de manera no nativa en el navegador
23 Paacuteginas web estaacuteticas o dinaacutemicas
Asiacute pues iquestqueacute son las paacuteginas web estaacuteticas y dinaacutemicas y cuaacutel es la diferencia
entre ambas Como en una caja de bombones todo se basa en el relleno
Otra cosa que cabe tener en cuenta es que se debe instalar un software especial
en el servidor para crear una paacutegina web dinaacutemica Mientras que los ficheros
HTML estaacuteticos normales se guardan con una extensioacuten de fichero html es-
tos ficheros contienen coacutedigo dinaacutemico especial ademaacutes del HTML y se guar-
dan con extensiones de archivo especiales para indicarle al servidor web que
necesitan un procesado adicional antes de enviarlos al cliente (como por
ejemplo que se inserten los datos desde la base de datos) los archivos PHP
por ejemplo generalmente tienen una extensioacuten de archivo php
Hay muchos lenguajes dinaacutemicos que se pueden elegir el PHP que hemos
mencionado antes y otros como Python Ruby on Rails ASPNET y Coldfu-
sion En definitiva todos estos lenguajes tienen maacutes o menos las mismas ca-
pacidades como hablar con bases de datos validar la informacioacuten introducida
en los formularios etc pero hacen las cosas de manera ligeramente diferente
y tienen algunas ventajas e inconvenientes Todo se reduce a la forma maacutes
sencilla que mejor se adapte
Paacutegina web dinaacutemica
Podeacuteis ver un ejemplo de paacutegi-na web dinaacutemica id a Ama-zon con vuestro navegador web y buscad cinco productos diferentes Amazon no os ha enviado cinco paacuteginas diferen-tes os ha enviado la misma paacutegina cinco veces pero con diferente informacioacuten dinaacutemi-ca completada cada vez Esta informacioacuten diferente se guar-da en una base de datos que entrega la informacioacuten corres-pondiente cuando se solicita y la enviacutea al servidor web para in-sertarla en la paacutegina dinaacutemica wwwamazoncom
Una paacutegina web estaacutetica es una paacutegina web donde el contenido el
HTML y los graacuteficos son siempre estaacuteticos ndashse sirve a cualquier visitante
de la misma manera a no ser que la persona que ha creado la web deci-
da cambiar manualmente su copia en el servidorndash exactamente lo que
hemos estado repasando en la mayor parte de este apartado
Por el contrario en una paacutegina web dinaacutemica el contenido del servi-
dor es el mismo pero en vez de ser soacutelo HTML tambieacuten contiene coacutedi-
go dinaacutemico que puede mostrar datos diferentes seguacuten la informacioacuten
que suministre a la paacutegina web
CC-BY-NC-ND bull PID_00150463 18 Introduccioacuten al mundo de los estaacutendares web
Resumen
Hasta aquiacute el recorrido por la sala de maacutequinas de Internet Este apartado real-
mente soacutelo trata de pasada muchos de los temas que incluye pero resulta uacutetil por-
que los pone en perspectiva entre ellos y muestra coacutemo se relacionan y funcionan
entre siacute Todaviacutea queda mucho por aprender sobre la sintaxis real del lenguaje que
conforma el HTML el CSS y JavaScript y esto es lo que haremos a continuacioacuten
el apartado siguiente se centra en el modelo de estaacutendares web HTML CSS y Ja-
vaScript de desarrollo web y da un vistazo al coacutedigo de la paacutegina web
Preguntas de repaso
1 Realizad una breve descripcioacuten de HTML y HTTP y explicad la diferencia en-
tre los dos
2 Explicad la funcioacuten de un navegador web
3 Navegad por Internet durante 5-10 minutos e intentad encontrar algunos
tipos diferentes de contenidos texto normal imaacutegenes HTML paacuteginas dinaacute-
micas como paacuteginas PHP y NET (aspx) PDF documentos de Word peliacuteculas
Flash etc Acceded a algunos de estos contenidos y pensad coacutemo os los mues-
tra el ordenador
4 iquestCuaacutel es la diferencia entre una paacutegina estaacutetica y una paacutegina dinaacutemica
5 Encontrad una lista de coacutedigos de error HTTP enumerad cinco y explicad
queacute significa cada uno de ellos
Lecturas complementarias
En esta asignatura ya no volveremos a hablar de los lenguajes dinaacutemicos pero
hemos creado una lista de recursos en caso de que queraacuteis leeacuteroslos
Rails Fernandez Obie (2007) The Rails Way Addison-Wesley Professional Ruby
Series
Railss screencasts
httpwwwrubyonrailsorgscreencasts
PHP Powers David (2006) PHP Solutions Dynamic web development made easy
friends of ED
Documentacioacuten en liacutenea de PHP
httpwwwphpnetdocsphp
ASPNET Lorenz Patrick (2003) ASPNET 20 Revealed Apress
ASPNET documentacioacuten y guiacuteas en liacutenea de ASPNET
httpaspnet
CC-BY-NC-ND bull PID_00150463 19 Introduccioacuten al mundo de los estaacutendares web
3 El modelo de estaacutendares web HTML CSS y JavaScriptJonathan Lane
En el uacuteltimo apartado hemos visto brevemente las herramientas de construc-
cioacuten baacutesicas de la web HTML (o XHTML) CSS y JavaScript Ahora es el mo-
mento de ampliar un poco maacutes y observarlos individualmente queacute hacen y
coacutemo interaccionan entre ellos para crear una paacutegina web
31 iquestPor queacute separar
Eacutesta es generalmente la primera pregunta que se formula sobre los estaacutendares
web Se puede crear el contenido el estilo y el formato soacutelo utilizando HTML
elementos de tipo de letra para el estilo y tablas HTML para el formato de ma-
nera que iquestpor queacute preocuparse de este asunto de XHTMLCSS El uso de ta-
blas para el formato etc es como se soliacutea hacer en los malos tiempos del
disentildeo web y mucha gente todaviacutea lo hace de esta manera (aunque no se de-
beriacutea de hacer) y de hecho es uno de los motivos por los que hemos creado
esta asignatura Aquiacute no trataremos estos meacutetodos Eacutestas son las razones maacutes
importantes para utilizar CSS y HTML en vez de meacutetodos obsoletos
1) Eficiencia del coacutedigo cuanto mayores sean los archivos maacutes tardaraacuten en
descargarse y maacutes dinero le costaraacute a algunas personas (algunas personas toda-
viacutea pagan por megabyte descargado) Por lo tanto no se debe malgastar el an-
cho de banda con paacuteginas grandes abarrotadas de informacioacuten de estilo y de
formato en cada archivo HTML Una alternativa mucho mejor es que los ar-
chivos HTML esteacuten desglosados y limpios e incluir la informacioacuten de estilo y
de formato soacutelo una vez en un archivo CSS independiente o en varios
2) Facilidad de mantenimiento en relacioacuten con el uacuteltimo punto si la infor-
macioacuten de estilo y formato soacutelo se especifica en un sitio quiere decir que soacutelo
habraacute que hacer actualizaciones en un lugar si se quiere cambiar el aspecto de
la paacutegina web iquestPrefeririacuteais tener que actualizar esta informacioacuten en cada paacute-
gina de vuestra web No lo creo
3) Accesibilidad los usuarios de la web con problemas visuales pueden
utilizar una tipo de software conocido como ldquolector de pantallardquo para ac-
ceder a la informacioacuten mediante el sonido en vez de la vista literalmente
les lee la paacutegina Ademaacutes el software de introduccioacuten de datos mediante la
voz que utilizan las personas con problemas de movilidad tambieacuten se be-
neficia de las paacuteginas web con una semaacutentica bien construida De manera
muy parecida al lector de pantalla que utiliza las instrucciones del teclado
para navegar por los encabezamientos enlaces y formularios un usuario
Eficiencia del coacutedigo
Para ver un caso real de este hecho en accioacuten podeacuteis ver el artiacuteculo sobre la reescritura de Slashdot en A List Apart don-de el autor tomoacute una paacutegina web muy popular y la reescri-bioacute en XHTMLCSS httpwwwalistapartcomarticlesslashdot
CC-BY-NC-ND bull PID_00150463 20 Introduccioacuten al mundo de los estaacutendares web
que interaccione mediante voz utilizaraacute instrucciones con su voz Los do-
cumentos web marcados semaacutenticamente en vez de presentacionalmente
pueden resultar maacutes faacuteciles de navegar y la informacioacuten que contienen es
maacutes faacutecil de encontrar por parte del usuario En otras palabras cuanto maacutes
raacutepidamente ldquoentre en materiardquo (el contenido) mejor Los lectores de pan-
talla no pueden acceder al texto dentro de imaacutegenes y encuentran confusos
algunos usos de JavaScript Aseguraos de que el contenido maacutes importante
estaacute disponible para todo el mundo
4) Compatibilidad de dispositivos ya que vuestra paacutegina XHTML es simple-
mente etiquetado normal sin informacioacuten de estilo se puede reformatear
para diferentes dispositivos con atributos ampliamente variados (por ejemplo
el tamantildeo de pantalla) simplemente aplicando una hoja de estilos alternativa
podeacuteis hacerlo de varias maneras Podeacuteis ver los artiacuteculos de devoperacom
para obtener recursos al respecto CSS tambieacuten permite especificar hojas de es-
tilo diferentes a nivel nativo para distintos meacutetodos de presentacioacuten o tipos de
soporte (por ejemplo visualizacioacuten en pantalla impresioacuten visualizacioacuten en
un dispositivo moacutevil etc)
5) Motores de buacutesqueda en la web probablemente os interesaraacute que vues-
tras paacuteginas web sean faacuteciles de encontrar al buscar en Google o en otros mo-
tores de busca Un motor de buacutesqueda utiliza un crawler o arantildea web que es
una pieza de software especializada para leer vuestras paacuteginas Si esta arantildea tu-
viera problemas para encontrar el contenido de vuestras paacuteginas o interpretara
mal lo que es importante porque no habeacuteis definido los encabezamientos
como encabezamientos etc entonces seguro que vuestra posicioacuten en los re-
sultados de busca se veraacute afectada
6) Es simplemente una buena praacutectica se trata de un motivo un poco del
tipo ldquoporque lo digo yordquo pero hablad con cualquier desarrollador o disentildeador
web profesional consciente de los estaacutendares y seguro que os dice que separar
el contenido el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacioacuten
32 Etiquetado la base de cada paacutegina
httpdevoperacomarticlesmobile
HTML y XHTML son lenguajes de etiquetado formados por elemen-
tos que contienen atributos (algunos opcionales y otros obligatori-
os) Estos elementos se utilizan para etiquetar los diferentes tipos de
contenidos en los documentos especificando que cada trozo de con-
tenido se debe entregar supuestamente como en los navegadores web
(por ejemplo encabezamientos paacuterrafos tablas listas con vintildeetas
etc)
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 Introduccioacuten al mundo de los estaacutendares web
Iacutendice
1 La historia de Internet y la web y la evolucioacuten de los estaacutendares web 511 Los oriacutegenes de Internet 5
12 La creacioacuten de la web mundial 6
121 Las ldquoguerras de los navegadoresrdquo 7
13 La aparicioacuten de los estaacutendares web 8
131 La formacioacuten del W3C 8
132 El proyecto de estaacutendares web 9
133 El auge de los estaacutendares web 9
Resumen 10
Preguntas de repaso 11
Lecturas complementarias 11
2 iquestCoacutemo funciona Internet 1221 iquestCoacutemo se comunican los ordenadores a traveacutes de Internet 12
211 Diseccioacuten de un ciclo de solicitud-respuesta 13
22 Tipos de contenido 15
221 Texto normal 15
222 Estaacutendares web 15
223 Paacuteginas web dinaacutemicas 16
224 Formatos que requieren otras aplicaciones o conectores 16
23 Paacuteginas web estaacuteticas o dinaacutemicas 17
Resumen 18
Preguntas de repaso 18
Lecturas complementarias 18
3 El modelo de estaacutendares web HTML CSS y JavaScript 1931 iquestPor queacute separar 19
32 Etiquetado la base de cada paacutegina 20
321 iquestQueacute es el XHTML 21
322 Validacioacuten iquestqueacute es eso 22
33 CSS antildeadimos un poco de estilo 22
34 JavaScript adicioacuten de comportamiento a las paacuteginas web 24
35 Una paacutegina de ejemplo 24
351 indexhtml 24
352 stylescss 25
Resumen 27
Preguntas de repaso 28
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidad 2941 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web 29
CC-BY-NC-ND bull PID_00150463 Introduccioacuten al mundo de los estaacutendares web
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente 30
421 Amazon iquestcomprar con estaacutendares 31
422 CNN iquestnoticias estandarizadas 31
423 Apple el maacuteximo de elegancia en disentildeo
iquesty en validacioacuten 32
424 Un pequentildeo sondeo de compatibilidad de estaacutendares 33
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares 33
431 Educacioacuten 34
432 Motivos empresariales 34
Resumen 35
Preguntas de repaso 36
Lecturas complementarias 36
CC-BY-NC-ND bull PID_00150463 5 Introduccioacuten al mundo de los estaacutendares web
1 La historia de Internet y la web y la evolucioacuten de los estaacutendares webMark Norman Francis
ldquoiquestPor doacutende debo empezar Majestad
Empieza por el principio ndashdijo el rey solemnementendash y continuacutea hasta llegar al final En-tonces detenterdquo
Alicia en el Paiacutes de las Maravillas Lewis Caroll
Todo debe empezar por alguacuten sitio de manera que nuestro viaje empezaraacute con
una leccioacuten centrada en la historia A continuacioacuten realizaremos un breve re-
paso de la creacioacuten de Internet la web mundial (World Wide Web) y de los
estaacutendares web en los que se centra toda esta serie Creo que es uacutetil e intere-
sante entender coacutemo hemos llegado hasta donde estamos pero seremos lo
bastante breves como para no agobiaros y poder entrar en detalle de manera
raacutepida y agradable Si no estaacuteis familiarizados con alguacuten teacutermino no os pre-
ocupeacuteis si son importantes para aprender sobre el desarrollo web se definiraacuten
en los uacuteltimos apartados que ampliacutean cada tema y siempre podeacuteis hacer una
busca en Google Si ya estaacuteis familiarizados con la historia de Internet o de la
web mundial os podeacuteis saltar este apartado sobre los estaacutendares web
11 Los oriacutegenes de Internet
El cuatro de octubre de 1957 sucedioacute un acontecimiento que cambiariacutea el
mundo La Unioacuten Sovieacutetica lanzoacute con eacutexito el primer sateacutelite a la oacuterbita de la
Tierra Se llamaba Sputnik 1 y sorprendioacute al mundo especialmente a Estados
Unidos que teniacutea en curso su propio programa de lanzamientos de sateacutelites
pero todaviacutea no habiacutean lanzado ninguno
Este acontecimiento condujo directamente a la creacioacuten de la ARPA (Advan-
ced Research Projects Agency la Agencia de Proyectos de Investigacioacuten Avan-
zada) del Departamento de Defensa de Estados Unidos a causa de la necesidad
reconocida de una organizacioacuten que pudiera investigar y desarrollar ideas
avanzadas y tecnologiacutea maacutes allaacute de las necesidades identificadas actualmente
Quizaacute su proyecto maacutes famoso (sin duda el maacutes ampliamente utilizado) fue la
creacioacuten de Internet
En 1960 el psicoacutelogo y cientiacutefico informaacutetico Joseph Licklider publicoacute un docu-
mento titulado Simbiosis Hombre-Ordenador que articuloacute la idea de ordenadores
en red que proporcionaban un almacenaje y una recuperacioacuten avanzada de los
datos En 1962 mientras trabajaba para la ARPA como jefe de la oficina de proce-
samiento de informacioacuten formoacute un grupo para continuar con la investigacioacuten in-
formaacutetica pero lo abandonoacute antes de que se trabajara en aquella idea
CC-BY-NC-ND bull PID_00150463 6 Introduccioacuten al mundo de los estaacutendares web
El plan para esta red de ordenadores (que se denominariacutea ARPANET) se presentoacute
en octubre de 1967 y en diciembre de 1969 la primera red de cuatro ordenadores
ya estaba conectada y en funcionamiento El principal problema de la creacioacuten
de una red era coacutemo conectar redes fiacutesicamente separadas sin colapsar los recur-
sos de la red a causa de las conexiones constantes La teacutecnica que resolvioacute este
problema se conoce como conmutacioacuten de paquetes e implica que las solicitu-
des de datos se dividen en pequentildeos trozos (paquetes) que se pueden procesar
raacutepidamente sin bloquear la comunicacioacuten de los otros Este principio todaviacutea
se utiliza en la actualidad para el funcionamiento de Internet
Este concepto se adoptoacute ampliamente con el nacimiento de otras redes que
utilizaban la misma teacutecnica de conmutacioacuten de paquetes Por ejemplo la X25
(desarrollada por la Unioacuten Internacional de Telecomunicaciones) formoacute la
base de la primera red universitaria del Reino Unido JANET (que permitiacutea a
las universidades del Reino Unido enviar y recibir ficheros) y la red puacuteblica
norteamericana CompuServe (una empresa comercial que permitiacutea a peque-
ntildeas empresas y personas acceder a los recursos informaacuteticos con tiempo com-
partido y posteriormente el acceso a Internet) Estas redes a pesar de tener
muchas conexiones eran maacutes privadas que la Internet actual
Esta proliferacioacuten de diferentes protocolos de red no tardoacute mucho en convertirse
en un problema cuando se intentaba que todas las redes independientes se comu-
nicaran Sin embargo habiacutea una solucioacuten a la vista Robert Kahn mientras traba-
jaba en un proyecto de red de paquetes por sateacutelite para ARPA empezoacute a definir
algunas reglas para una arquitectura de red maacutes abierta que sustituyera el proto-
colo actual que se utilizaba en ARPANET Maacutes adelante Vinton Cerf ndashde la Uni-
versidad de Stanfordndash se incorporoacute al proyecto y ambos crearon un sistema que
enmascaraba las diferencias entre protocolos de red utilizando un nuevo estaacuten-
dar La publicacioacuten del borrador de la especificacioacuten en diciembre de 1974 se de-
nominoacute Programa de Control de Transmisioacuten de Internet
Esta especificacioacuten reduciacutea las funciones de la red y trasladaba la tarea de man-
tener la integridad de la transmisioacuten al ordenador principal El resultado final
fue que era posible unir faacutecilmente casi todas las redes entre ellas ARPA asu-
mioacute el coste del desarrollo del software y en 1977 se llevoacute a cabo una demos-
tracioacuten de comunicacioacuten entre tres redes diferentes En 1981 la especificacioacuten
se completoacute publicoacute y adoptoacute y en 1982 las conexiones de ARPANET fuera de
Estados Unidos se convirtieron para utilizar el nuevo protocolo TCPIP Habiacutea
llegado Internet tal como la conocemos
12 La creacioacuten de la web mundial
Gopher era un sistema de recuperacioacuten de informacioacuten que se utilizaba a
principios de los antildeos noventa y que proporcionaba un meacutetodo de entrega de
menuacutes de enlaces a archivos recursos informaacuteticos y otros menuacutes Estos me-
nuacutes podiacutean cruzar los liacutemites del ordenador y utilizar Internet para ir a buscar
httpenwikipediaorgwikiGopher_(protocol)
CC-BY-NC-ND bull PID_00150463 7 Introduccioacuten al mundo de los estaacutendares web
menuacutes de otros sistemas Era muy popular en las universidades que queriacutean
proporcionar informacioacuten para todo el campus y organizaciones grandes que
queriacutean centralizar el almacenaje y la gestioacuten de documentos
Gopher fue creado por la Universidad de Minnesota En febrero de 1993 esta
universidad anuncioacute que cobrariacutea licencias por el uso de la implementacioacuten
de referencia del servidor Gopher En consecuencia muchas organizaciones
empezaron a buscar alternativas a Gopher
El Consejo Europeo de Investigacioacuten Nuclear (CERN) en Suiza teniacutea esta al-
ternativa Tim Berners-Lee habiacutea estado trabajando en un sistema de gestioacuten
de informacioacuten en el que el texto pudiera contener enlaces y referencias a
otros trabajos de manera que permitiera al lector saltar raacutepidamente de un do-
cumento a otro Habiacutea creado un servidor para publicar este estilo de docu-
mento (denominado hipertexto) y tambieacuten un programa para leerlo al que
habiacutea denominado World Wide Web Este software se publicoacute por primera vez
en 1991 pero dos acontecimientos provocaron una explosioacuten de popularidad
y finalmente la sustitucioacuten de Gopher
El 30 de abril de 1993 el CERN cedioacute el coacutedigo fuente del World Wide Web al
dominio puacuteblico de manera que cualquiera pudiera utilizar o construir sobre
el software sin ninguacuten coste
Asiacute maacutes tarde en el mismo antildeo el NCSA (National Center for Supercom-
puting Applications Centro Nacional para Aplicaciones de Supercomputa-
cioacuten) publicoacute un programa que era una combinacioacuten de navegador web y
cliente Gopher denominado Mosaic Originalmente soacutelo estaba disponible
para equipos Unix y en forma de coacutedigo fuente pero en diciembre de 1993
Mosaic ya disponiacutea de una nueva versioacuten con instaladores tanto para Apple
Macintosh como para Microsoft Windows Mosaic aumentoacute en popularidad
raacutepidamente y en consecuencia tambieacuten la web
El nuacutemero de navegadores web disponibles aumentoacute muchiacutesimo muchos de
ellos creados para proyectos de investigacioacuten en universidades y corporacio-
nes como Telenor (una compantildeiacutea noruega de comunicaciones) que creoacute la
primera versioacuten del navegador Opera en 1994
121 Las ldquoguerras de los navegadoresrdquo
La popularizacioacuten de la web atrajo intereses comerciales Marc Andreessen
abandonoacute el NCSA y junto con Jim Clark fundoacute Mosaic Communications
que maacutes adelante cambioacute su nombre por Netscape Communications Cor-
poration y empezaron a trabajar en lo que acabariacutea convirtieacutendose en el
navegador Netscape La versioacuten 10 del software se publicoacute en diciembre de
1994
CC-BY-NC-ND bull PID_00150463 8 Introduccioacuten al mundo de los estaacutendares web
Spyglass Inc (la rama comercial del NCSA) autorizoacute la comercializacioacuten de su
tecnologiacutea Mosaic a Microsoft para formar la base de Internet Explorer La ver-
sioacuten 10 se publicoacute en agosto de 1995
Una raacutepida escalada siguioacute a continuacioacuten en la que Netscape y Microsoft inten-
taban cada uno obtener una ventaja competitiva en cuanto a las funciones que
admitiacutean con el fin de atraer desarrolladores Desde entonces esta competicioacuten se
ha conocido como ldquolas guerras de los navegadoresrdquo Opera mantuvo una presen-
cia modesta pero continuada a lo largo de este periacuteodo e intentoacute innovar y ser
compatible con los estaacutendares web lo mejor posible en aquellos tiempos
13 La aparicioacuten de los estaacutendares web
Durante las guerras de los navegadores Microsoft y Netscape se centraron en
la implementacioacuten de nuevas funciones en lugar de resolver los problemas de
las funciones con las que ya eran compatibles y tambieacuten en antildeadir funciones
propias y crear funciones que fueran competencia directa de las existentes en
el otro navegador pero implementadas de manera incompatible
En aquellos momentos los desarrolladores se veiacutean forzados a tratar con nive-
les de confusioacuten cada vez mayores cuando se intentaban construir las paacuteginas
web a veces hasta el punto de haber de construir dos paacuteginas diferentes pero
duplicadas en la praacutectica para cada uno de los dos principales navegadores y
otras simplemente optando por ser compatibles soacutelo con un navegador de
manera que los usuarios que utilizaran el otro no pudieran utilizar sus paacuteginas
Eacutesta era una manera muy mala de trabajar y la inevitable reaccioacuten negativa de
los desarrolladores no tardoacute en producirse
131 La formacioacuten del W3C
En 1994 Tim Berners-Lee fundoacute el World Wide Web Consortium (W3C) en el
Massachusetts Institute of Technology con el apoyo del CERN DARPA (como
se habiacutea bautizado la ARPA) y la Comisioacuten Europea La misioacuten del W3C era
estandarizar los protocolos y las tecnologiacuteas utilizadas para construir la web
de manera que el contenido estuviera disponible para la mayor parte posible
de la poblacioacuten del mundo
Durante los antildeos siguientes el W3C publicoacute varias especificaciones (denomina-
das recomendaciones) incluyendo HTML 40 el formato para imaacutegenes PNG y las
versiones 1 y 2 de CSS (cascading style sheets u hojas de estilo en cascada)
No obstante el W3C no impone sus recomendaciones Los fabricantes soacutelo
deben ajustarse a la documentacioacuten del W3C si quieren etiquetar su producto
como cumplidor del W3C En la praacutectica esto no es un argumento de venta
CC-BY-NC-ND bull PID_00150463 9 Introduccioacuten al mundo de los estaacutendares web
valioso porque casi todos los usuarios de la web desconocen y probablemente
no les importa quieacuten es el W3C En consecuencia las guerras de los navega-
dores continuaron sin trabas
132 El proyecto de estaacutendares web
En 1998 el mercado de los navegadores estaba dominado por Internet Explo-
rer 4 y Netscape Navigator 4 Se habiacutea lanzado una versioacuten beta de Internet
Explorer 5 que implementaba un nuevo HTML dinaacutemico de marca registrada
Ello significaba que los desarrolladores web profesionales debiacutean conocer cin-
co maneras diferentes de escribir JavaScript
En consecuencia un grupo de desarrolladores y disentildeadores web se asociaron
entre ellos Este grupo se denominaba WaSP (Web Standards Project Proyecto
de estaacutendares web) La idea era que si los documentos del W3C se llamaban
estaacutendares en vez de recomendaciones podriacutean convencer a Microsoft y Netsca-
pe de que les dieran su apoyo
El antiguo meacutetodo de realizar un llamamiento a la accioacuten se llevoacute a cabo me-
diante una teacutecnica publicitaria tradicional denominada barricada donde una
empresa lanza un anuncio en todos los canales de emisioacuten al mismo tiempo
de manera que aunque el espectador cambie de canal obtendraacute exactamente
el mismo mensaje WaSP publicoacute un artiacuteculo simultaacuteneamente en varias paacutegi-
nas centradas en el desarrollo web como buildercom Wired online y algunas
listas de correo muy populares
Otra teacutecnica que utilizaron fue ridiculizar a las empresas que se uniacutean al W3C
(y a otros organismos de estaacutendares) pero que despueacutes se centraban maacutes en
crear nuevas funciones que en hacer que los conceptos baacutesicos para los que se
habiacutean comprometido fueran correctos para empezar
Todo esto suena un poco negativo pero los de WaSP no se conformaban con
criticar a la gente tambieacuten la ayudaban Siete miembros formaron CSS Samu-
rai que identificoacute los diez problemas principales de compatibilidad CSS en
Opera e Internet Explorer (Opera resolvioacute sus problemas y Microsoft no)
133 El auge de los estaacutendares web
En el 2000 Microsoft lanzoacute Internet Explorer 5 Macintosh Edition Fue un
hito muy importante ya que se trataba del navegador que se instalaba enton-
ces de manera predeterminada con el Mac OS y tambieacuten teniacutea un nivel decen-
te de compatibilidad con las recomendaciones del W3C Junto con el nivel
decente de compatibilidad con CSS y HTML Opera contribuyoacute a un movi-
miento positivo general con el que los desarrolladores y disentildeadores web se
CC-BY-NC-ND bull PID_00150463 10 Introduccioacuten al mundo de los estaacutendares web
sentiacutean coacutemodos disentildeando paacuteginas mediante estaacutendares web por primera
vez
WaSP persuadioacute a Netscape de retrasar el lanzamiento de la versioacuten 50 de
Netscape Navigator hasta que fuera mucho maacutes compatible (este trabajo for-
moacute la base de lo que ahora es Firefox un navegador muy popular) WaSP tam-
bieacuten creoacute un grupo de trabajo para Dreamweaver con el fin de animar a
Macromedia a cambiar su popular herramienta de autoriacutea web y dar soporte a
la creacioacuten de paacuteginas web compatibles
La popular paacutegina de desarrollo web A List Apart se redisentildeoacute a principios del 2001 y enun artiacuteculo que explicaba coacutemo y por queacute declaraba
ldquoEn seis meses un antildeo o dos antildeos como mucho todas las paacuteginas se disentildearaacuten con estosestaacutendares [] Podemos contemplar coacutemo nuestras capacidades se quedan obsoletas opodemos empezar a aprender ahora teacutecnicas basadas en estaacutendaresrdquo
Esto era un poco optimista no todas las paacuteginas ni siquiera en el antildeo 2009
estaacuten hechas con estaacutendares web Pero muchos les hicieron caso Los navega-
dores antiguos redujeron su cuota de mercado y dos paacuteginas web maacutes de perfil
muy alto se redisentildearon utilizando estaacutendares web la revista Wired en el 2002
y ESPN en el 2003 se convirtieron en liacutederes del sector en el soporte a los es-
taacutendares web y las nuevas teacutecnicas
Tambieacuten en el 2003 Dave Shea creoacute una paacutegina web denominada CSS Zen
Garden Debiacutea tener maacutes impacto sobre los profesionales web que cual-
quier otra cosa e ilustraba verdaderamente que todo el disentildeo podiacutea cam-
biar soacutelo modificando el estilo de la paacutegina el contenido podiacutea seguir
siendo ideacutentico
Desde entonces en la comunidad de desarrollo web profesional los estaacutenda-
res web se han convertido en un elemento de rigor En esta serie os daremos
unos excelentes fundamentos en estas teacutecnicas para que podaacuteis crear paacuteginas
web tan limpias semaacutenticas accesibles y conformes con los estaacutendares como
las de las grandes empresas
Resumen
En este apartado hemos hablado de coacutemo se creoacute la Internet moderna como
resultado de la carrera espacial de coacutemo Tim Berners-Lee definioacute el hipertexto
para una generacioacuten y de coacutemo los intereses comerciales de dos compantildeiacuteas
provocaron una de las reacciones maacutes notables de los desarrolladores como
nunca se habiacutea visto El teacutermino estaacutendares web se utiliza ahora maacutes amplia-
mente entre los profesionales web que cualquier otro teacutermino aplicado por el
W3C (de hecho el W3C ha empezado a utilizar el teacutermino en sus propias paacute-
ginas) de manera que por este motivo os ensentildearemos el modo de construir
paacuteginas web siguiendo los estaacutendares
CC-BY-NC-ND bull PID_00150463 11 Introduccioacuten al mundo de los estaacutendares web
Preguntas de repaso
Podriacuteais intentar investigar maacutes respondiendo estas preguntas
1 iquestQueacute navegadores estaacuten disponibles actualmente en Internet para los usu-
arios de Windows Mac OS X y Linux
2 iquestQueacute porcentaje de usuarios de la web utiliza cada navegador
3 iquestQueacute navegadores utilizan los dispositivos moacuteviles para acceder a las paacutegi-
nas web
4 iquestCuaacutentos estaacutendares web ha publicado el W3C y cuaacuteles son ampliamente
seguidos por los fabricantes de navegadores actualmente
Lecturas complementarias
Si quereacuteis saber maacutes es posible que queraacuteis visitar algunas de las paacuteginas sigui-
entes
The history of the Internet (wikipedia)
httpenwikipediaorgwikiHistory_of_the_Internet
The history of the World Wide Web (wikipedia)
httpenwikipediaorgwikiHistory_of_the_World_Wide_Web
The history of the W3C
httpwwww3orgConsortiumhistory
El Web Standards Project y su historia
httpwebstandardsorg
httpwwwwebstandardsorgabouthistory
A List Apart
httpwwwalistapartcom
CSS Zen Garden
httpwwwcsszengardencom
CC-BY-NC-ND bull PID_00150463 12 Introduccioacuten al mundo de los estaacutendares web
2 iquestCoacutemo funciona InternetJonathan Lane
Muy de vez en cuando es posible conseguir ver los engranajes y las correas que
actuacutean entre bastidores Hoy es vuestro diacutea de suerte Os llevareacute a dar una vuel-
ta tras los telares de una de las tecnologiacuteas maacutes interesantes que posiblemen-
te ya conoceacuteis bien la web
Este apartado trata sobre la tecnologiacutea subyacente que hace funcionar la web
bull Lenguaje de etiquetado de hipertexto (HTML)
bull Protocolo de transferencia de hipertexto (HTTP)
bull Sistema de nombres de dominio (DNS)
bull Servidores web y navegadores web
bull Contenido estaacutetico y dinaacutemico
Son materias bastante baacutesicas y aunque la mayor parte de lo que aquiacute se ex-
plica no os ayudaraacute a construir una paacutegina web mejor siacute que os proporcionaraacute
el lenguaje adecuado para hablar con clientes y otras personas sobre Internet
Es como lo que una institutriz muy inteligente dijo una vez en Sonrisas y
laacutegrimas ldquoCuando leemos empezamos por ABC Cuando cantamos empeza-
mos por Do Re Mirdquo En este apartado describiremos brevemente coacutemo los or-
denadores se comunican realmente utilizando HTTP y TCPIP y despueacutes nos
fijaremos en los diferentes lenguajes que se combinan para crear las paacuteginas
web que conforman Internet
21 iquestCoacutemo se comunican los ordenadores a traveacutes de Internet
Por suerte hemos mantenido las cosas simples para los ordenadores Cuando
se trata de la web la mayoriacutea de las paacuteginas estaacuten escritas utilizando el mismo
lenguaje el HTML que pasa de un sitio a otro utilizando un protocolo comuacuten
HTTP (hypertext transfer protocol o protocolo de transferencia de hipertexto) El
HTTP es el dialecto (especificacioacuten) comuacuten de Internet que permite por ejem-
plo que un equipo con Windows cante en armoniacutea con un ordenador que eje-
cute la versioacuten maacutes reciente y maacutes fantaacutestica de Linux (iexclDo Re Mi) Mediante
el uso de un navegador web ndashun software especial que interpreta el HTTP y en-
trega el HTML en una manera legible para los humanosndash las paacuteginas web crea-
das con HTML y con cualquier tipo de ordenador se pueden leer en cualquier
medio incluyendo teleacutefonos PDA e incluso en los sistemas de videojuegos
maacutes populares
Aunque hablen el mismo lenguaje los diferentes dispositivos que acceden
a la web han de tener algunas normas establecidas para poder hablar entre
CC-BY-NC-ND bull PID_00150463 13 Introduccioacuten al mundo de los estaacutendares web
ellos es como aprender a alzar la mano para preguntar en clase El HTTP
establece estas normas baacutesicas para Internet Gracias al HTTP un equipo
cliente (como vuestro ordenador) sabe que debe ser eacutel quien inicie una pe-
ticioacuten de una paacutegina web desde un servidor Un servidor es un ordenador
donde residen las paacuteginas web cuando escribiacutes una direccioacuten web en vues-
tro navegador un servidor recibe la peticioacuten encuentra la paacutegina web que
deseaacuteis y la enviacutea a vuestro ordenador para que se vea en vuestro navega-
dor
211 Diseccioacuten de un ciclo de solicitud-respuesta
Ahora que hemos visto todas las partes que permiten a los ordenadores comu-
nicarse a traveacutes de Internet trataremos con maacutes detalle el ciclo de solicitud-
respuesta de HTTP A continuacioacuten se presentan una serie de pasos numera-
dos para que podaacuteis trabajar siguieacutendolos y asiacute os podremos demostrar algu-
nos conceptos de manera maacutes eficaz
1) Todas las solicitudes-respuestas empiezan cuando se escribe un URL
(universal resource locator localizador universal de recursos) en la barra de di-
recciones del navegador web como httpdevoperacom Abrid un navega-
dor para hacerlo ahora mismo
Algo que quizaacute no sabeacuteis es que los navegadores realmente no utilizan los URL
para solicitar paacuteginas web en los servidores utilizan el Protocolo de Internet
o direcciones IP (que son casi como nuacutemeros de teleacutefono o direcciones pos-
tales que identifican los servidores) Por ejemplo la direccioacuten IP de http
devoperacom es 21323620898
2) Abrid una nueva pestantildea o ventana del navegador escribid http
wwwapplecom y pulsad intro a continuacioacuten escribid http1714916010
y pulsad intro llegareacuteis al mismo sitio Escribid http21323620898 en la ba-
rra de direcciones y pulsad intro ireacuteis a parar al mismo sitio que en el paso 1
pero obtendreacuteis un error 403 ldquoAcceso Denegadordquo esto es porque no teneacuteis per-
miso para acceder a la raiacutez real de este servidor
httpwwwapplecom actuacutea baacutesicamente como un alias para http
1714916010 pero iquestpor queacute iquestY coacutemo Ello se debe a que a las personas les
resulta maacutes faacutecil recordar palabras que largas cadenas de nuacutemeros El sistema
que realiza este trabajo se denomina Domain name system (DNS) o Sistema de
nombres de dominio que es esencialmente un directorio automaacutetico comple-
to de todos los ordenadores conectados a Internet Cuando escribiacutes http
devoperacom en la barra de direcciones y apretaacuteis intro esta direccioacuten se en-
viacutea a un servidor de nombres que intenta asociarla a vuestra direccioacuten IP Hay
muchos ordenadores conectados a Internet y no todos los servidores DNS tie-
CC-BY-NC-ND bull PID_00150463 14 Introduccioacuten al mundo de los estaacutendares web
nen un listado de cada ordenador que hay conectado de manera que hay un
sistema creado donde se puede dirigir la solicitud al servidor correcto para
atenderla
Asiacute pues el sistema DNS busca la paacutegina web wwwoperacom averigua que se
encuentra en 1714916010 y devuelve la direccioacuten IP al navegador
El ordenador enviacutea una solicitud al ordenador de la direccioacuten IP especificada
y espera obtener una respuesta Si todo va bien el ordenador del servidor en-
viacutea un breve mensaje de retorno al cliente que dice que todo es correcto (po-
deacuteis ver la figura 1) seguido de la propia paacutegina web Este tipo de mensaje estaacute
incluido en un encabezamiento HTTP
Figura 1
En este caso todo es correcto y el servidor devuelve la paacutegina web correcta
Si algo va mal por ejemplo si se escribe incorrectamente el URL en su lugar
se obtendraacute un error HTTP el famoso error 404 ldquono se encuentra la paacuteginardquo
es el ejemplo maacutes comuacuten que se puede encontrar
3) Escribid httpdevoperacomjoniscoolhtml la paacutegina no existe o sea
que obtendreacuteis un error 404 Probadlo con algunas paacuteginas en diferentes paacute-
ginas web que no existan y os devolveraacuten paacuteginas diferentes Esto se debe al
hecho de que algunos desarrolladores web han dejado que el servidor web soacutelo
emita la paacutegina de error predeterminada y otros han codificado paacuteginas de
error personalizadas para que aparezcan cuando se devuelve una paacutegina no
existente Se trata de una teacutecnica avanzada que no trataremos en esta asigna-
tura pero que afortunadamente se veraacute pronto en un artiacuteculo aparte en
devoperacom
Por uacuteltimo una nota sobre los URL generalmente el primer URL al que se ac-
cede en una paacutegina web no tiene un nombre de archivo real al final (por ejem-
plo httpwwwmysitecom) y a continuacioacuten las paacuteginas subsiguientes a
veces tienen y a veces no Siempre se accede a archivos reales pero en ocasio-
nes el desarrollador web ha configurado el servidor web para que no muestre
CC-BY-NC-ND bull PID_00150463 15 Introduccioacuten al mundo de los estaacutendares web
los nombres de archivo en el URL esto a menudo permite conseguir URL maacutes
limpios y faacuteciles de recordar que conducen a una mejor experiencia para el
usuario de vuestra paacutegina web
22 Tipos de contenido
Ahora que ya os hemos ensentildeado una solicitud-respuesta HTTP queremos
que os fijeacuteis en los diferentes tipos de contenido que pueden encontrarse
en Internet Los hemos agrupado en 4 tipos texto normal estaacutendares web
paacuteginas web dinaacutemicas y formatos que requieren otras aplicaciones o co-
nectores
221 Texto normal
Durante los primeros diacuteas de Internet antes de que apareciera cualquier estaacuten-
dar web o conector Internet era principalmente imaacutegenes y texto normal ar-
chivos con una extensioacuten txt o similar Cuando se encuentra un texto normal
en Internet el navegador lo muestra tal como es sin ninguacuten tipo de proceso
Todaviacutea pueden encontrarse ficheros de texto normal en paacuteginas web univer-
sitarias
222 Estaacutendares web
Las herramientas de construccioacuten baacutesicas de la web son los tres principales es-
taacutendares web HTML (o XHTML aquiacute utilizaremos ambos indistintamente
para nuestras finalidades) CSS y JavaScript
a) Lenguaje de marcado de hipertexto (HTML) es un nombre realmente
bueno con respecto a la definicioacuten de su objetivo El HTML se utiliza para di-
vidir un documento especificar sus contenidos y su estructura y definir el sig-
nificado de cada parte (es lo que incluye todo el texto etc que se ve en las
paacuteginas web) Utiliza elementos para identificar los diferentes componentes
de una paacutegina
b) Las hojas de estilo en cascada (CSS) dan un control total sobre coacutemo se
visualiza un elemento
Existen muchas ventajas para separar la estructura del formato y lo vere-
mos con maacutes detalle en el siguiente apartado Para demostrar la potencia
de HTML y CSS utilizados de manera combinada la figura 2 muestra a la
izquierda HTML normal sin ninguacuten formato antildeadido mientras que a la
derecha puede verse exactamente el mismo HTML con algunos estilos de
CSS aplicados
Cambios de formato
Utilizando declaraciones de es-tilo es muy sencillo cambiar todos los paacuterrafos para que queden a doble espacio
line-height 2em
O hacer que todos los encabe-zamientos de segundo nivel sean verdes
color green
CC-BY-NC-ND bull PID_00150463 16 Introduccioacuten al mundo de los estaacutendares web
Figura 2
HTML normal a la izquierda HTML con CSS aplicado a la derecha
c) Por uacuteltimo el lenguaje JavaScript aporta funciones dinaacutemicas a las paacuteginas
web Se pueden escribir pequentildeos programas en JavaScript que se ejecutaraacuten en el
ordenador cliente y que no requieren que haya ninguacuten software especial instala-
do en el servidor JavaScript permite antildeadir algunas funciones baacutesicas e interacti-
vidad a las paacuteginas web pero tiene sus limitaciones lo que nos lleva a hablar de
lenguajes de programacioacuten del lado del servidor y a paacuteginas web dinaacutemicas
223 Paacuteginas web dinaacutemicas
En ocasiones cuando navegueacuteis por Internet os encontrareacuteis paacuteginas web que
no tienen una extensioacuten html es posible que tengan una extensioacuten php asp
aspx jsp u otras extensiones extrantildeas Todos son ejemplos de tecnologiacuteas
web dinaacutemicas que se pueden utilizar para crear paacuteginas web que tengan sec-
ciones dinaacutemicas coacutedigo que muestra diferentes resultados seguacuten los valores
que reciba por ejemplo de una base de datos de un formulario o de otra fuen-
te de datos Trataremos estos tipos de paacuteginas web en el subapartado ldquoPaacuteginas
web estaacuteticas o dinaacutemicasrdquo a continuacioacuten
224 Formatos que requieren otras aplicaciones o conectores
Como los navegadores web soacutelo estaacuten equipados para interpretar y mostrar de-
terminadas tecnologiacuteas como estaacutendares web si solicitaacuteis un URL que apunta
a un formato de archivo complejo o a una paacutegina web que contiene una tec-
nologiacutea que requiere conectores (plugins) se descargaraacute en vuestro ordenador
o se abriraacute utilizando el conector necesario si el navegador lo tiene instalado
Ejemplos de conectores
Si os encontraacuteis un documento de Word de Excel PDF un fichero comprimido (porejemplo ZIP o SIT) un fichero de imaacutegenes complejas como Photoshop PSD u otrofichero complejo que el navegador no comprende generalmente el navegador os pre-guntaraacute si deseaacuteis descargar o abrir el fichero Ambas acciones normalmente tienen resul-tados similares excepto que la uacuteltima haraacute que el fichero se descargue y a continuacioacutense abra con una aplicacioacuten que lo comprende si estaacute instalada
CC-BY-NC-ND bull PID_00150463 17 Introduccioacuten al mundo de los estaacutendares web
Si os encontraacuteis una paacutegina que contenga una peliacutecula Flash MP3 u otro formato de muacutesicaMPEG u otro formato de viacutedeo el navegador lo reproduciraacute utilizando un conector si hayuno instalado En caso contrario se proporcionaraacute un enlace para instalar el conector nece-sario o el archivo se descargaraacute y buscaraacute una aplicacioacuten de escritorio para ejecutarlo
Naturalmente hay algunas aacutereas grises por ejemplo SVG (scalable vector grap-
hics graacuteficos vectoriales escalables) es un estaacutendar web que se ejecuta de manera
nativa en algunos navegadores como Opera pero no en otros como Internet
Explorer El IE necesita un conector para comprender los SVG Hay una serie de
navegadores que incluyen algunos conectores previamente instalados de modo
que es posible que no seaacuteis conscientes de que el contenido se estaacute visualizando
mediante un conector y de manera no nativa en el navegador
23 Paacuteginas web estaacuteticas o dinaacutemicas
Asiacute pues iquestqueacute son las paacuteginas web estaacuteticas y dinaacutemicas y cuaacutel es la diferencia
entre ambas Como en una caja de bombones todo se basa en el relleno
Otra cosa que cabe tener en cuenta es que se debe instalar un software especial
en el servidor para crear una paacutegina web dinaacutemica Mientras que los ficheros
HTML estaacuteticos normales se guardan con una extensioacuten de fichero html es-
tos ficheros contienen coacutedigo dinaacutemico especial ademaacutes del HTML y se guar-
dan con extensiones de archivo especiales para indicarle al servidor web que
necesitan un procesado adicional antes de enviarlos al cliente (como por
ejemplo que se inserten los datos desde la base de datos) los archivos PHP
por ejemplo generalmente tienen una extensioacuten de archivo php
Hay muchos lenguajes dinaacutemicos que se pueden elegir el PHP que hemos
mencionado antes y otros como Python Ruby on Rails ASPNET y Coldfu-
sion En definitiva todos estos lenguajes tienen maacutes o menos las mismas ca-
pacidades como hablar con bases de datos validar la informacioacuten introducida
en los formularios etc pero hacen las cosas de manera ligeramente diferente
y tienen algunas ventajas e inconvenientes Todo se reduce a la forma maacutes
sencilla que mejor se adapte
Paacutegina web dinaacutemica
Podeacuteis ver un ejemplo de paacutegi-na web dinaacutemica id a Ama-zon con vuestro navegador web y buscad cinco productos diferentes Amazon no os ha enviado cinco paacuteginas diferen-tes os ha enviado la misma paacutegina cinco veces pero con diferente informacioacuten dinaacutemi-ca completada cada vez Esta informacioacuten diferente se guar-da en una base de datos que entrega la informacioacuten corres-pondiente cuando se solicita y la enviacutea al servidor web para in-sertarla en la paacutegina dinaacutemica wwwamazoncom
Una paacutegina web estaacutetica es una paacutegina web donde el contenido el
HTML y los graacuteficos son siempre estaacuteticos ndashse sirve a cualquier visitante
de la misma manera a no ser que la persona que ha creado la web deci-
da cambiar manualmente su copia en el servidorndash exactamente lo que
hemos estado repasando en la mayor parte de este apartado
Por el contrario en una paacutegina web dinaacutemica el contenido del servi-
dor es el mismo pero en vez de ser soacutelo HTML tambieacuten contiene coacutedi-
go dinaacutemico que puede mostrar datos diferentes seguacuten la informacioacuten
que suministre a la paacutegina web
CC-BY-NC-ND bull PID_00150463 18 Introduccioacuten al mundo de los estaacutendares web
Resumen
Hasta aquiacute el recorrido por la sala de maacutequinas de Internet Este apartado real-
mente soacutelo trata de pasada muchos de los temas que incluye pero resulta uacutetil por-
que los pone en perspectiva entre ellos y muestra coacutemo se relacionan y funcionan
entre siacute Todaviacutea queda mucho por aprender sobre la sintaxis real del lenguaje que
conforma el HTML el CSS y JavaScript y esto es lo que haremos a continuacioacuten
el apartado siguiente se centra en el modelo de estaacutendares web HTML CSS y Ja-
vaScript de desarrollo web y da un vistazo al coacutedigo de la paacutegina web
Preguntas de repaso
1 Realizad una breve descripcioacuten de HTML y HTTP y explicad la diferencia en-
tre los dos
2 Explicad la funcioacuten de un navegador web
3 Navegad por Internet durante 5-10 minutos e intentad encontrar algunos
tipos diferentes de contenidos texto normal imaacutegenes HTML paacuteginas dinaacute-
micas como paacuteginas PHP y NET (aspx) PDF documentos de Word peliacuteculas
Flash etc Acceded a algunos de estos contenidos y pensad coacutemo os los mues-
tra el ordenador
4 iquestCuaacutel es la diferencia entre una paacutegina estaacutetica y una paacutegina dinaacutemica
5 Encontrad una lista de coacutedigos de error HTTP enumerad cinco y explicad
queacute significa cada uno de ellos
Lecturas complementarias
En esta asignatura ya no volveremos a hablar de los lenguajes dinaacutemicos pero
hemos creado una lista de recursos en caso de que queraacuteis leeacuteroslos
Rails Fernandez Obie (2007) The Rails Way Addison-Wesley Professional Ruby
Series
Railss screencasts
httpwwwrubyonrailsorgscreencasts
PHP Powers David (2006) PHP Solutions Dynamic web development made easy
friends of ED
Documentacioacuten en liacutenea de PHP
httpwwwphpnetdocsphp
ASPNET Lorenz Patrick (2003) ASPNET 20 Revealed Apress
ASPNET documentacioacuten y guiacuteas en liacutenea de ASPNET
httpaspnet
CC-BY-NC-ND bull PID_00150463 19 Introduccioacuten al mundo de los estaacutendares web
3 El modelo de estaacutendares web HTML CSS y JavaScriptJonathan Lane
En el uacuteltimo apartado hemos visto brevemente las herramientas de construc-
cioacuten baacutesicas de la web HTML (o XHTML) CSS y JavaScript Ahora es el mo-
mento de ampliar un poco maacutes y observarlos individualmente queacute hacen y
coacutemo interaccionan entre ellos para crear una paacutegina web
31 iquestPor queacute separar
Eacutesta es generalmente la primera pregunta que se formula sobre los estaacutendares
web Se puede crear el contenido el estilo y el formato soacutelo utilizando HTML
elementos de tipo de letra para el estilo y tablas HTML para el formato de ma-
nera que iquestpor queacute preocuparse de este asunto de XHTMLCSS El uso de ta-
blas para el formato etc es como se soliacutea hacer en los malos tiempos del
disentildeo web y mucha gente todaviacutea lo hace de esta manera (aunque no se de-
beriacutea de hacer) y de hecho es uno de los motivos por los que hemos creado
esta asignatura Aquiacute no trataremos estos meacutetodos Eacutestas son las razones maacutes
importantes para utilizar CSS y HTML en vez de meacutetodos obsoletos
1) Eficiencia del coacutedigo cuanto mayores sean los archivos maacutes tardaraacuten en
descargarse y maacutes dinero le costaraacute a algunas personas (algunas personas toda-
viacutea pagan por megabyte descargado) Por lo tanto no se debe malgastar el an-
cho de banda con paacuteginas grandes abarrotadas de informacioacuten de estilo y de
formato en cada archivo HTML Una alternativa mucho mejor es que los ar-
chivos HTML esteacuten desglosados y limpios e incluir la informacioacuten de estilo y
de formato soacutelo una vez en un archivo CSS independiente o en varios
2) Facilidad de mantenimiento en relacioacuten con el uacuteltimo punto si la infor-
macioacuten de estilo y formato soacutelo se especifica en un sitio quiere decir que soacutelo
habraacute que hacer actualizaciones en un lugar si se quiere cambiar el aspecto de
la paacutegina web iquestPrefeririacuteais tener que actualizar esta informacioacuten en cada paacute-
gina de vuestra web No lo creo
3) Accesibilidad los usuarios de la web con problemas visuales pueden
utilizar una tipo de software conocido como ldquolector de pantallardquo para ac-
ceder a la informacioacuten mediante el sonido en vez de la vista literalmente
les lee la paacutegina Ademaacutes el software de introduccioacuten de datos mediante la
voz que utilizan las personas con problemas de movilidad tambieacuten se be-
neficia de las paacuteginas web con una semaacutentica bien construida De manera
muy parecida al lector de pantalla que utiliza las instrucciones del teclado
para navegar por los encabezamientos enlaces y formularios un usuario
Eficiencia del coacutedigo
Para ver un caso real de este hecho en accioacuten podeacuteis ver el artiacuteculo sobre la reescritura de Slashdot en A List Apart don-de el autor tomoacute una paacutegina web muy popular y la reescri-bioacute en XHTMLCSS httpwwwalistapartcomarticlesslashdot
CC-BY-NC-ND bull PID_00150463 20 Introduccioacuten al mundo de los estaacutendares web
que interaccione mediante voz utilizaraacute instrucciones con su voz Los do-
cumentos web marcados semaacutenticamente en vez de presentacionalmente
pueden resultar maacutes faacuteciles de navegar y la informacioacuten que contienen es
maacutes faacutecil de encontrar por parte del usuario En otras palabras cuanto maacutes
raacutepidamente ldquoentre en materiardquo (el contenido) mejor Los lectores de pan-
talla no pueden acceder al texto dentro de imaacutegenes y encuentran confusos
algunos usos de JavaScript Aseguraos de que el contenido maacutes importante
estaacute disponible para todo el mundo
4) Compatibilidad de dispositivos ya que vuestra paacutegina XHTML es simple-
mente etiquetado normal sin informacioacuten de estilo se puede reformatear
para diferentes dispositivos con atributos ampliamente variados (por ejemplo
el tamantildeo de pantalla) simplemente aplicando una hoja de estilos alternativa
podeacuteis hacerlo de varias maneras Podeacuteis ver los artiacuteculos de devoperacom
para obtener recursos al respecto CSS tambieacuten permite especificar hojas de es-
tilo diferentes a nivel nativo para distintos meacutetodos de presentacioacuten o tipos de
soporte (por ejemplo visualizacioacuten en pantalla impresioacuten visualizacioacuten en
un dispositivo moacutevil etc)
5) Motores de buacutesqueda en la web probablemente os interesaraacute que vues-
tras paacuteginas web sean faacuteciles de encontrar al buscar en Google o en otros mo-
tores de busca Un motor de buacutesqueda utiliza un crawler o arantildea web que es
una pieza de software especializada para leer vuestras paacuteginas Si esta arantildea tu-
viera problemas para encontrar el contenido de vuestras paacuteginas o interpretara
mal lo que es importante porque no habeacuteis definido los encabezamientos
como encabezamientos etc entonces seguro que vuestra posicioacuten en los re-
sultados de busca se veraacute afectada
6) Es simplemente una buena praacutectica se trata de un motivo un poco del
tipo ldquoporque lo digo yordquo pero hablad con cualquier desarrollador o disentildeador
web profesional consciente de los estaacutendares y seguro que os dice que separar
el contenido el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacioacuten
32 Etiquetado la base de cada paacutegina
httpdevoperacomarticlesmobile
HTML y XHTML son lenguajes de etiquetado formados por elemen-
tos que contienen atributos (algunos opcionales y otros obligatori-
os) Estos elementos se utilizan para etiquetar los diferentes tipos de
contenidos en los documentos especificando que cada trozo de con-
tenido se debe entregar supuestamente como en los navegadores web
(por ejemplo encabezamientos paacuterrafos tablas listas con vintildeetas
etc)
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 Introduccioacuten al mundo de los estaacutendares web
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente 30
421 Amazon iquestcomprar con estaacutendares 31
422 CNN iquestnoticias estandarizadas 31
423 Apple el maacuteximo de elegancia en disentildeo
iquesty en validacioacuten 32
424 Un pequentildeo sondeo de compatibilidad de estaacutendares 33
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares 33
431 Educacioacuten 34
432 Motivos empresariales 34
Resumen 35
Preguntas de repaso 36
Lecturas complementarias 36
CC-BY-NC-ND bull PID_00150463 5 Introduccioacuten al mundo de los estaacutendares web
1 La historia de Internet y la web y la evolucioacuten de los estaacutendares webMark Norman Francis
ldquoiquestPor doacutende debo empezar Majestad
Empieza por el principio ndashdijo el rey solemnementendash y continuacutea hasta llegar al final En-tonces detenterdquo
Alicia en el Paiacutes de las Maravillas Lewis Caroll
Todo debe empezar por alguacuten sitio de manera que nuestro viaje empezaraacute con
una leccioacuten centrada en la historia A continuacioacuten realizaremos un breve re-
paso de la creacioacuten de Internet la web mundial (World Wide Web) y de los
estaacutendares web en los que se centra toda esta serie Creo que es uacutetil e intere-
sante entender coacutemo hemos llegado hasta donde estamos pero seremos lo
bastante breves como para no agobiaros y poder entrar en detalle de manera
raacutepida y agradable Si no estaacuteis familiarizados con alguacuten teacutermino no os pre-
ocupeacuteis si son importantes para aprender sobre el desarrollo web se definiraacuten
en los uacuteltimos apartados que ampliacutean cada tema y siempre podeacuteis hacer una
busca en Google Si ya estaacuteis familiarizados con la historia de Internet o de la
web mundial os podeacuteis saltar este apartado sobre los estaacutendares web
11 Los oriacutegenes de Internet
El cuatro de octubre de 1957 sucedioacute un acontecimiento que cambiariacutea el
mundo La Unioacuten Sovieacutetica lanzoacute con eacutexito el primer sateacutelite a la oacuterbita de la
Tierra Se llamaba Sputnik 1 y sorprendioacute al mundo especialmente a Estados
Unidos que teniacutea en curso su propio programa de lanzamientos de sateacutelites
pero todaviacutea no habiacutean lanzado ninguno
Este acontecimiento condujo directamente a la creacioacuten de la ARPA (Advan-
ced Research Projects Agency la Agencia de Proyectos de Investigacioacuten Avan-
zada) del Departamento de Defensa de Estados Unidos a causa de la necesidad
reconocida de una organizacioacuten que pudiera investigar y desarrollar ideas
avanzadas y tecnologiacutea maacutes allaacute de las necesidades identificadas actualmente
Quizaacute su proyecto maacutes famoso (sin duda el maacutes ampliamente utilizado) fue la
creacioacuten de Internet
En 1960 el psicoacutelogo y cientiacutefico informaacutetico Joseph Licklider publicoacute un docu-
mento titulado Simbiosis Hombre-Ordenador que articuloacute la idea de ordenadores
en red que proporcionaban un almacenaje y una recuperacioacuten avanzada de los
datos En 1962 mientras trabajaba para la ARPA como jefe de la oficina de proce-
samiento de informacioacuten formoacute un grupo para continuar con la investigacioacuten in-
formaacutetica pero lo abandonoacute antes de que se trabajara en aquella idea
CC-BY-NC-ND bull PID_00150463 6 Introduccioacuten al mundo de los estaacutendares web
El plan para esta red de ordenadores (que se denominariacutea ARPANET) se presentoacute
en octubre de 1967 y en diciembre de 1969 la primera red de cuatro ordenadores
ya estaba conectada y en funcionamiento El principal problema de la creacioacuten
de una red era coacutemo conectar redes fiacutesicamente separadas sin colapsar los recur-
sos de la red a causa de las conexiones constantes La teacutecnica que resolvioacute este
problema se conoce como conmutacioacuten de paquetes e implica que las solicitu-
des de datos se dividen en pequentildeos trozos (paquetes) que se pueden procesar
raacutepidamente sin bloquear la comunicacioacuten de los otros Este principio todaviacutea
se utiliza en la actualidad para el funcionamiento de Internet
Este concepto se adoptoacute ampliamente con el nacimiento de otras redes que
utilizaban la misma teacutecnica de conmutacioacuten de paquetes Por ejemplo la X25
(desarrollada por la Unioacuten Internacional de Telecomunicaciones) formoacute la
base de la primera red universitaria del Reino Unido JANET (que permitiacutea a
las universidades del Reino Unido enviar y recibir ficheros) y la red puacuteblica
norteamericana CompuServe (una empresa comercial que permitiacutea a peque-
ntildeas empresas y personas acceder a los recursos informaacuteticos con tiempo com-
partido y posteriormente el acceso a Internet) Estas redes a pesar de tener
muchas conexiones eran maacutes privadas que la Internet actual
Esta proliferacioacuten de diferentes protocolos de red no tardoacute mucho en convertirse
en un problema cuando se intentaba que todas las redes independientes se comu-
nicaran Sin embargo habiacutea una solucioacuten a la vista Robert Kahn mientras traba-
jaba en un proyecto de red de paquetes por sateacutelite para ARPA empezoacute a definir
algunas reglas para una arquitectura de red maacutes abierta que sustituyera el proto-
colo actual que se utilizaba en ARPANET Maacutes adelante Vinton Cerf ndashde la Uni-
versidad de Stanfordndash se incorporoacute al proyecto y ambos crearon un sistema que
enmascaraba las diferencias entre protocolos de red utilizando un nuevo estaacuten-
dar La publicacioacuten del borrador de la especificacioacuten en diciembre de 1974 se de-
nominoacute Programa de Control de Transmisioacuten de Internet
Esta especificacioacuten reduciacutea las funciones de la red y trasladaba la tarea de man-
tener la integridad de la transmisioacuten al ordenador principal El resultado final
fue que era posible unir faacutecilmente casi todas las redes entre ellas ARPA asu-
mioacute el coste del desarrollo del software y en 1977 se llevoacute a cabo una demos-
tracioacuten de comunicacioacuten entre tres redes diferentes En 1981 la especificacioacuten
se completoacute publicoacute y adoptoacute y en 1982 las conexiones de ARPANET fuera de
Estados Unidos se convirtieron para utilizar el nuevo protocolo TCPIP Habiacutea
llegado Internet tal como la conocemos
12 La creacioacuten de la web mundial
Gopher era un sistema de recuperacioacuten de informacioacuten que se utilizaba a
principios de los antildeos noventa y que proporcionaba un meacutetodo de entrega de
menuacutes de enlaces a archivos recursos informaacuteticos y otros menuacutes Estos me-
nuacutes podiacutean cruzar los liacutemites del ordenador y utilizar Internet para ir a buscar
httpenwikipediaorgwikiGopher_(protocol)
CC-BY-NC-ND bull PID_00150463 7 Introduccioacuten al mundo de los estaacutendares web
menuacutes de otros sistemas Era muy popular en las universidades que queriacutean
proporcionar informacioacuten para todo el campus y organizaciones grandes que
queriacutean centralizar el almacenaje y la gestioacuten de documentos
Gopher fue creado por la Universidad de Minnesota En febrero de 1993 esta
universidad anuncioacute que cobrariacutea licencias por el uso de la implementacioacuten
de referencia del servidor Gopher En consecuencia muchas organizaciones
empezaron a buscar alternativas a Gopher
El Consejo Europeo de Investigacioacuten Nuclear (CERN) en Suiza teniacutea esta al-
ternativa Tim Berners-Lee habiacutea estado trabajando en un sistema de gestioacuten
de informacioacuten en el que el texto pudiera contener enlaces y referencias a
otros trabajos de manera que permitiera al lector saltar raacutepidamente de un do-
cumento a otro Habiacutea creado un servidor para publicar este estilo de docu-
mento (denominado hipertexto) y tambieacuten un programa para leerlo al que
habiacutea denominado World Wide Web Este software se publicoacute por primera vez
en 1991 pero dos acontecimientos provocaron una explosioacuten de popularidad
y finalmente la sustitucioacuten de Gopher
El 30 de abril de 1993 el CERN cedioacute el coacutedigo fuente del World Wide Web al
dominio puacuteblico de manera que cualquiera pudiera utilizar o construir sobre
el software sin ninguacuten coste
Asiacute maacutes tarde en el mismo antildeo el NCSA (National Center for Supercom-
puting Applications Centro Nacional para Aplicaciones de Supercomputa-
cioacuten) publicoacute un programa que era una combinacioacuten de navegador web y
cliente Gopher denominado Mosaic Originalmente soacutelo estaba disponible
para equipos Unix y en forma de coacutedigo fuente pero en diciembre de 1993
Mosaic ya disponiacutea de una nueva versioacuten con instaladores tanto para Apple
Macintosh como para Microsoft Windows Mosaic aumentoacute en popularidad
raacutepidamente y en consecuencia tambieacuten la web
El nuacutemero de navegadores web disponibles aumentoacute muchiacutesimo muchos de
ellos creados para proyectos de investigacioacuten en universidades y corporacio-
nes como Telenor (una compantildeiacutea noruega de comunicaciones) que creoacute la
primera versioacuten del navegador Opera en 1994
121 Las ldquoguerras de los navegadoresrdquo
La popularizacioacuten de la web atrajo intereses comerciales Marc Andreessen
abandonoacute el NCSA y junto con Jim Clark fundoacute Mosaic Communications
que maacutes adelante cambioacute su nombre por Netscape Communications Cor-
poration y empezaron a trabajar en lo que acabariacutea convirtieacutendose en el
navegador Netscape La versioacuten 10 del software se publicoacute en diciembre de
1994
CC-BY-NC-ND bull PID_00150463 8 Introduccioacuten al mundo de los estaacutendares web
Spyglass Inc (la rama comercial del NCSA) autorizoacute la comercializacioacuten de su
tecnologiacutea Mosaic a Microsoft para formar la base de Internet Explorer La ver-
sioacuten 10 se publicoacute en agosto de 1995
Una raacutepida escalada siguioacute a continuacioacuten en la que Netscape y Microsoft inten-
taban cada uno obtener una ventaja competitiva en cuanto a las funciones que
admitiacutean con el fin de atraer desarrolladores Desde entonces esta competicioacuten se
ha conocido como ldquolas guerras de los navegadoresrdquo Opera mantuvo una presen-
cia modesta pero continuada a lo largo de este periacuteodo e intentoacute innovar y ser
compatible con los estaacutendares web lo mejor posible en aquellos tiempos
13 La aparicioacuten de los estaacutendares web
Durante las guerras de los navegadores Microsoft y Netscape se centraron en
la implementacioacuten de nuevas funciones en lugar de resolver los problemas de
las funciones con las que ya eran compatibles y tambieacuten en antildeadir funciones
propias y crear funciones que fueran competencia directa de las existentes en
el otro navegador pero implementadas de manera incompatible
En aquellos momentos los desarrolladores se veiacutean forzados a tratar con nive-
les de confusioacuten cada vez mayores cuando se intentaban construir las paacuteginas
web a veces hasta el punto de haber de construir dos paacuteginas diferentes pero
duplicadas en la praacutectica para cada uno de los dos principales navegadores y
otras simplemente optando por ser compatibles soacutelo con un navegador de
manera que los usuarios que utilizaran el otro no pudieran utilizar sus paacuteginas
Eacutesta era una manera muy mala de trabajar y la inevitable reaccioacuten negativa de
los desarrolladores no tardoacute en producirse
131 La formacioacuten del W3C
En 1994 Tim Berners-Lee fundoacute el World Wide Web Consortium (W3C) en el
Massachusetts Institute of Technology con el apoyo del CERN DARPA (como
se habiacutea bautizado la ARPA) y la Comisioacuten Europea La misioacuten del W3C era
estandarizar los protocolos y las tecnologiacuteas utilizadas para construir la web
de manera que el contenido estuviera disponible para la mayor parte posible
de la poblacioacuten del mundo
Durante los antildeos siguientes el W3C publicoacute varias especificaciones (denomina-
das recomendaciones) incluyendo HTML 40 el formato para imaacutegenes PNG y las
versiones 1 y 2 de CSS (cascading style sheets u hojas de estilo en cascada)
No obstante el W3C no impone sus recomendaciones Los fabricantes soacutelo
deben ajustarse a la documentacioacuten del W3C si quieren etiquetar su producto
como cumplidor del W3C En la praacutectica esto no es un argumento de venta
CC-BY-NC-ND bull PID_00150463 9 Introduccioacuten al mundo de los estaacutendares web
valioso porque casi todos los usuarios de la web desconocen y probablemente
no les importa quieacuten es el W3C En consecuencia las guerras de los navega-
dores continuaron sin trabas
132 El proyecto de estaacutendares web
En 1998 el mercado de los navegadores estaba dominado por Internet Explo-
rer 4 y Netscape Navigator 4 Se habiacutea lanzado una versioacuten beta de Internet
Explorer 5 que implementaba un nuevo HTML dinaacutemico de marca registrada
Ello significaba que los desarrolladores web profesionales debiacutean conocer cin-
co maneras diferentes de escribir JavaScript
En consecuencia un grupo de desarrolladores y disentildeadores web se asociaron
entre ellos Este grupo se denominaba WaSP (Web Standards Project Proyecto
de estaacutendares web) La idea era que si los documentos del W3C se llamaban
estaacutendares en vez de recomendaciones podriacutean convencer a Microsoft y Netsca-
pe de que les dieran su apoyo
El antiguo meacutetodo de realizar un llamamiento a la accioacuten se llevoacute a cabo me-
diante una teacutecnica publicitaria tradicional denominada barricada donde una
empresa lanza un anuncio en todos los canales de emisioacuten al mismo tiempo
de manera que aunque el espectador cambie de canal obtendraacute exactamente
el mismo mensaje WaSP publicoacute un artiacuteculo simultaacuteneamente en varias paacutegi-
nas centradas en el desarrollo web como buildercom Wired online y algunas
listas de correo muy populares
Otra teacutecnica que utilizaron fue ridiculizar a las empresas que se uniacutean al W3C
(y a otros organismos de estaacutendares) pero que despueacutes se centraban maacutes en
crear nuevas funciones que en hacer que los conceptos baacutesicos para los que se
habiacutean comprometido fueran correctos para empezar
Todo esto suena un poco negativo pero los de WaSP no se conformaban con
criticar a la gente tambieacuten la ayudaban Siete miembros formaron CSS Samu-
rai que identificoacute los diez problemas principales de compatibilidad CSS en
Opera e Internet Explorer (Opera resolvioacute sus problemas y Microsoft no)
133 El auge de los estaacutendares web
En el 2000 Microsoft lanzoacute Internet Explorer 5 Macintosh Edition Fue un
hito muy importante ya que se trataba del navegador que se instalaba enton-
ces de manera predeterminada con el Mac OS y tambieacuten teniacutea un nivel decen-
te de compatibilidad con las recomendaciones del W3C Junto con el nivel
decente de compatibilidad con CSS y HTML Opera contribuyoacute a un movi-
miento positivo general con el que los desarrolladores y disentildeadores web se
CC-BY-NC-ND bull PID_00150463 10 Introduccioacuten al mundo de los estaacutendares web
sentiacutean coacutemodos disentildeando paacuteginas mediante estaacutendares web por primera
vez
WaSP persuadioacute a Netscape de retrasar el lanzamiento de la versioacuten 50 de
Netscape Navigator hasta que fuera mucho maacutes compatible (este trabajo for-
moacute la base de lo que ahora es Firefox un navegador muy popular) WaSP tam-
bieacuten creoacute un grupo de trabajo para Dreamweaver con el fin de animar a
Macromedia a cambiar su popular herramienta de autoriacutea web y dar soporte a
la creacioacuten de paacuteginas web compatibles
La popular paacutegina de desarrollo web A List Apart se redisentildeoacute a principios del 2001 y enun artiacuteculo que explicaba coacutemo y por queacute declaraba
ldquoEn seis meses un antildeo o dos antildeos como mucho todas las paacuteginas se disentildearaacuten con estosestaacutendares [] Podemos contemplar coacutemo nuestras capacidades se quedan obsoletas opodemos empezar a aprender ahora teacutecnicas basadas en estaacutendaresrdquo
Esto era un poco optimista no todas las paacuteginas ni siquiera en el antildeo 2009
estaacuten hechas con estaacutendares web Pero muchos les hicieron caso Los navega-
dores antiguos redujeron su cuota de mercado y dos paacuteginas web maacutes de perfil
muy alto se redisentildearon utilizando estaacutendares web la revista Wired en el 2002
y ESPN en el 2003 se convirtieron en liacutederes del sector en el soporte a los es-
taacutendares web y las nuevas teacutecnicas
Tambieacuten en el 2003 Dave Shea creoacute una paacutegina web denominada CSS Zen
Garden Debiacutea tener maacutes impacto sobre los profesionales web que cual-
quier otra cosa e ilustraba verdaderamente que todo el disentildeo podiacutea cam-
biar soacutelo modificando el estilo de la paacutegina el contenido podiacutea seguir
siendo ideacutentico
Desde entonces en la comunidad de desarrollo web profesional los estaacutenda-
res web se han convertido en un elemento de rigor En esta serie os daremos
unos excelentes fundamentos en estas teacutecnicas para que podaacuteis crear paacuteginas
web tan limpias semaacutenticas accesibles y conformes con los estaacutendares como
las de las grandes empresas
Resumen
En este apartado hemos hablado de coacutemo se creoacute la Internet moderna como
resultado de la carrera espacial de coacutemo Tim Berners-Lee definioacute el hipertexto
para una generacioacuten y de coacutemo los intereses comerciales de dos compantildeiacuteas
provocaron una de las reacciones maacutes notables de los desarrolladores como
nunca se habiacutea visto El teacutermino estaacutendares web se utiliza ahora maacutes amplia-
mente entre los profesionales web que cualquier otro teacutermino aplicado por el
W3C (de hecho el W3C ha empezado a utilizar el teacutermino en sus propias paacute-
ginas) de manera que por este motivo os ensentildearemos el modo de construir
paacuteginas web siguiendo los estaacutendares
CC-BY-NC-ND bull PID_00150463 11 Introduccioacuten al mundo de los estaacutendares web
Preguntas de repaso
Podriacuteais intentar investigar maacutes respondiendo estas preguntas
1 iquestQueacute navegadores estaacuten disponibles actualmente en Internet para los usu-
arios de Windows Mac OS X y Linux
2 iquestQueacute porcentaje de usuarios de la web utiliza cada navegador
3 iquestQueacute navegadores utilizan los dispositivos moacuteviles para acceder a las paacutegi-
nas web
4 iquestCuaacutentos estaacutendares web ha publicado el W3C y cuaacuteles son ampliamente
seguidos por los fabricantes de navegadores actualmente
Lecturas complementarias
Si quereacuteis saber maacutes es posible que queraacuteis visitar algunas de las paacuteginas sigui-
entes
The history of the Internet (wikipedia)
httpenwikipediaorgwikiHistory_of_the_Internet
The history of the World Wide Web (wikipedia)
httpenwikipediaorgwikiHistory_of_the_World_Wide_Web
The history of the W3C
httpwwww3orgConsortiumhistory
El Web Standards Project y su historia
httpwebstandardsorg
httpwwwwebstandardsorgabouthistory
A List Apart
httpwwwalistapartcom
CSS Zen Garden
httpwwwcsszengardencom
CC-BY-NC-ND bull PID_00150463 12 Introduccioacuten al mundo de los estaacutendares web
2 iquestCoacutemo funciona InternetJonathan Lane
Muy de vez en cuando es posible conseguir ver los engranajes y las correas que
actuacutean entre bastidores Hoy es vuestro diacutea de suerte Os llevareacute a dar una vuel-
ta tras los telares de una de las tecnologiacuteas maacutes interesantes que posiblemen-
te ya conoceacuteis bien la web
Este apartado trata sobre la tecnologiacutea subyacente que hace funcionar la web
bull Lenguaje de etiquetado de hipertexto (HTML)
bull Protocolo de transferencia de hipertexto (HTTP)
bull Sistema de nombres de dominio (DNS)
bull Servidores web y navegadores web
bull Contenido estaacutetico y dinaacutemico
Son materias bastante baacutesicas y aunque la mayor parte de lo que aquiacute se ex-
plica no os ayudaraacute a construir una paacutegina web mejor siacute que os proporcionaraacute
el lenguaje adecuado para hablar con clientes y otras personas sobre Internet
Es como lo que una institutriz muy inteligente dijo una vez en Sonrisas y
laacutegrimas ldquoCuando leemos empezamos por ABC Cuando cantamos empeza-
mos por Do Re Mirdquo En este apartado describiremos brevemente coacutemo los or-
denadores se comunican realmente utilizando HTTP y TCPIP y despueacutes nos
fijaremos en los diferentes lenguajes que se combinan para crear las paacuteginas
web que conforman Internet
21 iquestCoacutemo se comunican los ordenadores a traveacutes de Internet
Por suerte hemos mantenido las cosas simples para los ordenadores Cuando
se trata de la web la mayoriacutea de las paacuteginas estaacuten escritas utilizando el mismo
lenguaje el HTML que pasa de un sitio a otro utilizando un protocolo comuacuten
HTTP (hypertext transfer protocol o protocolo de transferencia de hipertexto) El
HTTP es el dialecto (especificacioacuten) comuacuten de Internet que permite por ejem-
plo que un equipo con Windows cante en armoniacutea con un ordenador que eje-
cute la versioacuten maacutes reciente y maacutes fantaacutestica de Linux (iexclDo Re Mi) Mediante
el uso de un navegador web ndashun software especial que interpreta el HTTP y en-
trega el HTML en una manera legible para los humanosndash las paacuteginas web crea-
das con HTML y con cualquier tipo de ordenador se pueden leer en cualquier
medio incluyendo teleacutefonos PDA e incluso en los sistemas de videojuegos
maacutes populares
Aunque hablen el mismo lenguaje los diferentes dispositivos que acceden
a la web han de tener algunas normas establecidas para poder hablar entre
CC-BY-NC-ND bull PID_00150463 13 Introduccioacuten al mundo de los estaacutendares web
ellos es como aprender a alzar la mano para preguntar en clase El HTTP
establece estas normas baacutesicas para Internet Gracias al HTTP un equipo
cliente (como vuestro ordenador) sabe que debe ser eacutel quien inicie una pe-
ticioacuten de una paacutegina web desde un servidor Un servidor es un ordenador
donde residen las paacuteginas web cuando escribiacutes una direccioacuten web en vues-
tro navegador un servidor recibe la peticioacuten encuentra la paacutegina web que
deseaacuteis y la enviacutea a vuestro ordenador para que se vea en vuestro navega-
dor
211 Diseccioacuten de un ciclo de solicitud-respuesta
Ahora que hemos visto todas las partes que permiten a los ordenadores comu-
nicarse a traveacutes de Internet trataremos con maacutes detalle el ciclo de solicitud-
respuesta de HTTP A continuacioacuten se presentan una serie de pasos numera-
dos para que podaacuteis trabajar siguieacutendolos y asiacute os podremos demostrar algu-
nos conceptos de manera maacutes eficaz
1) Todas las solicitudes-respuestas empiezan cuando se escribe un URL
(universal resource locator localizador universal de recursos) en la barra de di-
recciones del navegador web como httpdevoperacom Abrid un navega-
dor para hacerlo ahora mismo
Algo que quizaacute no sabeacuteis es que los navegadores realmente no utilizan los URL
para solicitar paacuteginas web en los servidores utilizan el Protocolo de Internet
o direcciones IP (que son casi como nuacutemeros de teleacutefono o direcciones pos-
tales que identifican los servidores) Por ejemplo la direccioacuten IP de http
devoperacom es 21323620898
2) Abrid una nueva pestantildea o ventana del navegador escribid http
wwwapplecom y pulsad intro a continuacioacuten escribid http1714916010
y pulsad intro llegareacuteis al mismo sitio Escribid http21323620898 en la ba-
rra de direcciones y pulsad intro ireacuteis a parar al mismo sitio que en el paso 1
pero obtendreacuteis un error 403 ldquoAcceso Denegadordquo esto es porque no teneacuteis per-
miso para acceder a la raiacutez real de este servidor
httpwwwapplecom actuacutea baacutesicamente como un alias para http
1714916010 pero iquestpor queacute iquestY coacutemo Ello se debe a que a las personas les
resulta maacutes faacutecil recordar palabras que largas cadenas de nuacutemeros El sistema
que realiza este trabajo se denomina Domain name system (DNS) o Sistema de
nombres de dominio que es esencialmente un directorio automaacutetico comple-
to de todos los ordenadores conectados a Internet Cuando escribiacutes http
devoperacom en la barra de direcciones y apretaacuteis intro esta direccioacuten se en-
viacutea a un servidor de nombres que intenta asociarla a vuestra direccioacuten IP Hay
muchos ordenadores conectados a Internet y no todos los servidores DNS tie-
CC-BY-NC-ND bull PID_00150463 14 Introduccioacuten al mundo de los estaacutendares web
nen un listado de cada ordenador que hay conectado de manera que hay un
sistema creado donde se puede dirigir la solicitud al servidor correcto para
atenderla
Asiacute pues el sistema DNS busca la paacutegina web wwwoperacom averigua que se
encuentra en 1714916010 y devuelve la direccioacuten IP al navegador
El ordenador enviacutea una solicitud al ordenador de la direccioacuten IP especificada
y espera obtener una respuesta Si todo va bien el ordenador del servidor en-
viacutea un breve mensaje de retorno al cliente que dice que todo es correcto (po-
deacuteis ver la figura 1) seguido de la propia paacutegina web Este tipo de mensaje estaacute
incluido en un encabezamiento HTTP
Figura 1
En este caso todo es correcto y el servidor devuelve la paacutegina web correcta
Si algo va mal por ejemplo si se escribe incorrectamente el URL en su lugar
se obtendraacute un error HTTP el famoso error 404 ldquono se encuentra la paacuteginardquo
es el ejemplo maacutes comuacuten que se puede encontrar
3) Escribid httpdevoperacomjoniscoolhtml la paacutegina no existe o sea
que obtendreacuteis un error 404 Probadlo con algunas paacuteginas en diferentes paacute-
ginas web que no existan y os devolveraacuten paacuteginas diferentes Esto se debe al
hecho de que algunos desarrolladores web han dejado que el servidor web soacutelo
emita la paacutegina de error predeterminada y otros han codificado paacuteginas de
error personalizadas para que aparezcan cuando se devuelve una paacutegina no
existente Se trata de una teacutecnica avanzada que no trataremos en esta asigna-
tura pero que afortunadamente se veraacute pronto en un artiacuteculo aparte en
devoperacom
Por uacuteltimo una nota sobre los URL generalmente el primer URL al que se ac-
cede en una paacutegina web no tiene un nombre de archivo real al final (por ejem-
plo httpwwwmysitecom) y a continuacioacuten las paacuteginas subsiguientes a
veces tienen y a veces no Siempre se accede a archivos reales pero en ocasio-
nes el desarrollador web ha configurado el servidor web para que no muestre
CC-BY-NC-ND bull PID_00150463 15 Introduccioacuten al mundo de los estaacutendares web
los nombres de archivo en el URL esto a menudo permite conseguir URL maacutes
limpios y faacuteciles de recordar que conducen a una mejor experiencia para el
usuario de vuestra paacutegina web
22 Tipos de contenido
Ahora que ya os hemos ensentildeado una solicitud-respuesta HTTP queremos
que os fijeacuteis en los diferentes tipos de contenido que pueden encontrarse
en Internet Los hemos agrupado en 4 tipos texto normal estaacutendares web
paacuteginas web dinaacutemicas y formatos que requieren otras aplicaciones o co-
nectores
221 Texto normal
Durante los primeros diacuteas de Internet antes de que apareciera cualquier estaacuten-
dar web o conector Internet era principalmente imaacutegenes y texto normal ar-
chivos con una extensioacuten txt o similar Cuando se encuentra un texto normal
en Internet el navegador lo muestra tal como es sin ninguacuten tipo de proceso
Todaviacutea pueden encontrarse ficheros de texto normal en paacuteginas web univer-
sitarias
222 Estaacutendares web
Las herramientas de construccioacuten baacutesicas de la web son los tres principales es-
taacutendares web HTML (o XHTML aquiacute utilizaremos ambos indistintamente
para nuestras finalidades) CSS y JavaScript
a) Lenguaje de marcado de hipertexto (HTML) es un nombre realmente
bueno con respecto a la definicioacuten de su objetivo El HTML se utiliza para di-
vidir un documento especificar sus contenidos y su estructura y definir el sig-
nificado de cada parte (es lo que incluye todo el texto etc que se ve en las
paacuteginas web) Utiliza elementos para identificar los diferentes componentes
de una paacutegina
b) Las hojas de estilo en cascada (CSS) dan un control total sobre coacutemo se
visualiza un elemento
Existen muchas ventajas para separar la estructura del formato y lo vere-
mos con maacutes detalle en el siguiente apartado Para demostrar la potencia
de HTML y CSS utilizados de manera combinada la figura 2 muestra a la
izquierda HTML normal sin ninguacuten formato antildeadido mientras que a la
derecha puede verse exactamente el mismo HTML con algunos estilos de
CSS aplicados
Cambios de formato
Utilizando declaraciones de es-tilo es muy sencillo cambiar todos los paacuterrafos para que queden a doble espacio
line-height 2em
O hacer que todos los encabe-zamientos de segundo nivel sean verdes
color green
CC-BY-NC-ND bull PID_00150463 16 Introduccioacuten al mundo de los estaacutendares web
Figura 2
HTML normal a la izquierda HTML con CSS aplicado a la derecha
c) Por uacuteltimo el lenguaje JavaScript aporta funciones dinaacutemicas a las paacuteginas
web Se pueden escribir pequentildeos programas en JavaScript que se ejecutaraacuten en el
ordenador cliente y que no requieren que haya ninguacuten software especial instala-
do en el servidor JavaScript permite antildeadir algunas funciones baacutesicas e interacti-
vidad a las paacuteginas web pero tiene sus limitaciones lo que nos lleva a hablar de
lenguajes de programacioacuten del lado del servidor y a paacuteginas web dinaacutemicas
223 Paacuteginas web dinaacutemicas
En ocasiones cuando navegueacuteis por Internet os encontrareacuteis paacuteginas web que
no tienen una extensioacuten html es posible que tengan una extensioacuten php asp
aspx jsp u otras extensiones extrantildeas Todos son ejemplos de tecnologiacuteas
web dinaacutemicas que se pueden utilizar para crear paacuteginas web que tengan sec-
ciones dinaacutemicas coacutedigo que muestra diferentes resultados seguacuten los valores
que reciba por ejemplo de una base de datos de un formulario o de otra fuen-
te de datos Trataremos estos tipos de paacuteginas web en el subapartado ldquoPaacuteginas
web estaacuteticas o dinaacutemicasrdquo a continuacioacuten
224 Formatos que requieren otras aplicaciones o conectores
Como los navegadores web soacutelo estaacuten equipados para interpretar y mostrar de-
terminadas tecnologiacuteas como estaacutendares web si solicitaacuteis un URL que apunta
a un formato de archivo complejo o a una paacutegina web que contiene una tec-
nologiacutea que requiere conectores (plugins) se descargaraacute en vuestro ordenador
o se abriraacute utilizando el conector necesario si el navegador lo tiene instalado
Ejemplos de conectores
Si os encontraacuteis un documento de Word de Excel PDF un fichero comprimido (porejemplo ZIP o SIT) un fichero de imaacutegenes complejas como Photoshop PSD u otrofichero complejo que el navegador no comprende generalmente el navegador os pre-guntaraacute si deseaacuteis descargar o abrir el fichero Ambas acciones normalmente tienen resul-tados similares excepto que la uacuteltima haraacute que el fichero se descargue y a continuacioacutense abra con una aplicacioacuten que lo comprende si estaacute instalada
CC-BY-NC-ND bull PID_00150463 17 Introduccioacuten al mundo de los estaacutendares web
Si os encontraacuteis una paacutegina que contenga una peliacutecula Flash MP3 u otro formato de muacutesicaMPEG u otro formato de viacutedeo el navegador lo reproduciraacute utilizando un conector si hayuno instalado En caso contrario se proporcionaraacute un enlace para instalar el conector nece-sario o el archivo se descargaraacute y buscaraacute una aplicacioacuten de escritorio para ejecutarlo
Naturalmente hay algunas aacutereas grises por ejemplo SVG (scalable vector grap-
hics graacuteficos vectoriales escalables) es un estaacutendar web que se ejecuta de manera
nativa en algunos navegadores como Opera pero no en otros como Internet
Explorer El IE necesita un conector para comprender los SVG Hay una serie de
navegadores que incluyen algunos conectores previamente instalados de modo
que es posible que no seaacuteis conscientes de que el contenido se estaacute visualizando
mediante un conector y de manera no nativa en el navegador
23 Paacuteginas web estaacuteticas o dinaacutemicas
Asiacute pues iquestqueacute son las paacuteginas web estaacuteticas y dinaacutemicas y cuaacutel es la diferencia
entre ambas Como en una caja de bombones todo se basa en el relleno
Otra cosa que cabe tener en cuenta es que se debe instalar un software especial
en el servidor para crear una paacutegina web dinaacutemica Mientras que los ficheros
HTML estaacuteticos normales se guardan con una extensioacuten de fichero html es-
tos ficheros contienen coacutedigo dinaacutemico especial ademaacutes del HTML y se guar-
dan con extensiones de archivo especiales para indicarle al servidor web que
necesitan un procesado adicional antes de enviarlos al cliente (como por
ejemplo que se inserten los datos desde la base de datos) los archivos PHP
por ejemplo generalmente tienen una extensioacuten de archivo php
Hay muchos lenguajes dinaacutemicos que se pueden elegir el PHP que hemos
mencionado antes y otros como Python Ruby on Rails ASPNET y Coldfu-
sion En definitiva todos estos lenguajes tienen maacutes o menos las mismas ca-
pacidades como hablar con bases de datos validar la informacioacuten introducida
en los formularios etc pero hacen las cosas de manera ligeramente diferente
y tienen algunas ventajas e inconvenientes Todo se reduce a la forma maacutes
sencilla que mejor se adapte
Paacutegina web dinaacutemica
Podeacuteis ver un ejemplo de paacutegi-na web dinaacutemica id a Ama-zon con vuestro navegador web y buscad cinco productos diferentes Amazon no os ha enviado cinco paacuteginas diferen-tes os ha enviado la misma paacutegina cinco veces pero con diferente informacioacuten dinaacutemi-ca completada cada vez Esta informacioacuten diferente se guar-da en una base de datos que entrega la informacioacuten corres-pondiente cuando se solicita y la enviacutea al servidor web para in-sertarla en la paacutegina dinaacutemica wwwamazoncom
Una paacutegina web estaacutetica es una paacutegina web donde el contenido el
HTML y los graacuteficos son siempre estaacuteticos ndashse sirve a cualquier visitante
de la misma manera a no ser que la persona que ha creado la web deci-
da cambiar manualmente su copia en el servidorndash exactamente lo que
hemos estado repasando en la mayor parte de este apartado
Por el contrario en una paacutegina web dinaacutemica el contenido del servi-
dor es el mismo pero en vez de ser soacutelo HTML tambieacuten contiene coacutedi-
go dinaacutemico que puede mostrar datos diferentes seguacuten la informacioacuten
que suministre a la paacutegina web
CC-BY-NC-ND bull PID_00150463 18 Introduccioacuten al mundo de los estaacutendares web
Resumen
Hasta aquiacute el recorrido por la sala de maacutequinas de Internet Este apartado real-
mente soacutelo trata de pasada muchos de los temas que incluye pero resulta uacutetil por-
que los pone en perspectiva entre ellos y muestra coacutemo se relacionan y funcionan
entre siacute Todaviacutea queda mucho por aprender sobre la sintaxis real del lenguaje que
conforma el HTML el CSS y JavaScript y esto es lo que haremos a continuacioacuten
el apartado siguiente se centra en el modelo de estaacutendares web HTML CSS y Ja-
vaScript de desarrollo web y da un vistazo al coacutedigo de la paacutegina web
Preguntas de repaso
1 Realizad una breve descripcioacuten de HTML y HTTP y explicad la diferencia en-
tre los dos
2 Explicad la funcioacuten de un navegador web
3 Navegad por Internet durante 5-10 minutos e intentad encontrar algunos
tipos diferentes de contenidos texto normal imaacutegenes HTML paacuteginas dinaacute-
micas como paacuteginas PHP y NET (aspx) PDF documentos de Word peliacuteculas
Flash etc Acceded a algunos de estos contenidos y pensad coacutemo os los mues-
tra el ordenador
4 iquestCuaacutel es la diferencia entre una paacutegina estaacutetica y una paacutegina dinaacutemica
5 Encontrad una lista de coacutedigos de error HTTP enumerad cinco y explicad
queacute significa cada uno de ellos
Lecturas complementarias
En esta asignatura ya no volveremos a hablar de los lenguajes dinaacutemicos pero
hemos creado una lista de recursos en caso de que queraacuteis leeacuteroslos
Rails Fernandez Obie (2007) The Rails Way Addison-Wesley Professional Ruby
Series
Railss screencasts
httpwwwrubyonrailsorgscreencasts
PHP Powers David (2006) PHP Solutions Dynamic web development made easy
friends of ED
Documentacioacuten en liacutenea de PHP
httpwwwphpnetdocsphp
ASPNET Lorenz Patrick (2003) ASPNET 20 Revealed Apress
ASPNET documentacioacuten y guiacuteas en liacutenea de ASPNET
httpaspnet
CC-BY-NC-ND bull PID_00150463 19 Introduccioacuten al mundo de los estaacutendares web
3 El modelo de estaacutendares web HTML CSS y JavaScriptJonathan Lane
En el uacuteltimo apartado hemos visto brevemente las herramientas de construc-
cioacuten baacutesicas de la web HTML (o XHTML) CSS y JavaScript Ahora es el mo-
mento de ampliar un poco maacutes y observarlos individualmente queacute hacen y
coacutemo interaccionan entre ellos para crear una paacutegina web
31 iquestPor queacute separar
Eacutesta es generalmente la primera pregunta que se formula sobre los estaacutendares
web Se puede crear el contenido el estilo y el formato soacutelo utilizando HTML
elementos de tipo de letra para el estilo y tablas HTML para el formato de ma-
nera que iquestpor queacute preocuparse de este asunto de XHTMLCSS El uso de ta-
blas para el formato etc es como se soliacutea hacer en los malos tiempos del
disentildeo web y mucha gente todaviacutea lo hace de esta manera (aunque no se de-
beriacutea de hacer) y de hecho es uno de los motivos por los que hemos creado
esta asignatura Aquiacute no trataremos estos meacutetodos Eacutestas son las razones maacutes
importantes para utilizar CSS y HTML en vez de meacutetodos obsoletos
1) Eficiencia del coacutedigo cuanto mayores sean los archivos maacutes tardaraacuten en
descargarse y maacutes dinero le costaraacute a algunas personas (algunas personas toda-
viacutea pagan por megabyte descargado) Por lo tanto no se debe malgastar el an-
cho de banda con paacuteginas grandes abarrotadas de informacioacuten de estilo y de
formato en cada archivo HTML Una alternativa mucho mejor es que los ar-
chivos HTML esteacuten desglosados y limpios e incluir la informacioacuten de estilo y
de formato soacutelo una vez en un archivo CSS independiente o en varios
2) Facilidad de mantenimiento en relacioacuten con el uacuteltimo punto si la infor-
macioacuten de estilo y formato soacutelo se especifica en un sitio quiere decir que soacutelo
habraacute que hacer actualizaciones en un lugar si se quiere cambiar el aspecto de
la paacutegina web iquestPrefeririacuteais tener que actualizar esta informacioacuten en cada paacute-
gina de vuestra web No lo creo
3) Accesibilidad los usuarios de la web con problemas visuales pueden
utilizar una tipo de software conocido como ldquolector de pantallardquo para ac-
ceder a la informacioacuten mediante el sonido en vez de la vista literalmente
les lee la paacutegina Ademaacutes el software de introduccioacuten de datos mediante la
voz que utilizan las personas con problemas de movilidad tambieacuten se be-
neficia de las paacuteginas web con una semaacutentica bien construida De manera
muy parecida al lector de pantalla que utiliza las instrucciones del teclado
para navegar por los encabezamientos enlaces y formularios un usuario
Eficiencia del coacutedigo
Para ver un caso real de este hecho en accioacuten podeacuteis ver el artiacuteculo sobre la reescritura de Slashdot en A List Apart don-de el autor tomoacute una paacutegina web muy popular y la reescri-bioacute en XHTMLCSS httpwwwalistapartcomarticlesslashdot
CC-BY-NC-ND bull PID_00150463 20 Introduccioacuten al mundo de los estaacutendares web
que interaccione mediante voz utilizaraacute instrucciones con su voz Los do-
cumentos web marcados semaacutenticamente en vez de presentacionalmente
pueden resultar maacutes faacuteciles de navegar y la informacioacuten que contienen es
maacutes faacutecil de encontrar por parte del usuario En otras palabras cuanto maacutes
raacutepidamente ldquoentre en materiardquo (el contenido) mejor Los lectores de pan-
talla no pueden acceder al texto dentro de imaacutegenes y encuentran confusos
algunos usos de JavaScript Aseguraos de que el contenido maacutes importante
estaacute disponible para todo el mundo
4) Compatibilidad de dispositivos ya que vuestra paacutegina XHTML es simple-
mente etiquetado normal sin informacioacuten de estilo se puede reformatear
para diferentes dispositivos con atributos ampliamente variados (por ejemplo
el tamantildeo de pantalla) simplemente aplicando una hoja de estilos alternativa
podeacuteis hacerlo de varias maneras Podeacuteis ver los artiacuteculos de devoperacom
para obtener recursos al respecto CSS tambieacuten permite especificar hojas de es-
tilo diferentes a nivel nativo para distintos meacutetodos de presentacioacuten o tipos de
soporte (por ejemplo visualizacioacuten en pantalla impresioacuten visualizacioacuten en
un dispositivo moacutevil etc)
5) Motores de buacutesqueda en la web probablemente os interesaraacute que vues-
tras paacuteginas web sean faacuteciles de encontrar al buscar en Google o en otros mo-
tores de busca Un motor de buacutesqueda utiliza un crawler o arantildea web que es
una pieza de software especializada para leer vuestras paacuteginas Si esta arantildea tu-
viera problemas para encontrar el contenido de vuestras paacuteginas o interpretara
mal lo que es importante porque no habeacuteis definido los encabezamientos
como encabezamientos etc entonces seguro que vuestra posicioacuten en los re-
sultados de busca se veraacute afectada
6) Es simplemente una buena praacutectica se trata de un motivo un poco del
tipo ldquoporque lo digo yordquo pero hablad con cualquier desarrollador o disentildeador
web profesional consciente de los estaacutendares y seguro que os dice que separar
el contenido el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacioacuten
32 Etiquetado la base de cada paacutegina
httpdevoperacomarticlesmobile
HTML y XHTML son lenguajes de etiquetado formados por elemen-
tos que contienen atributos (algunos opcionales y otros obligatori-
os) Estos elementos se utilizan para etiquetar los diferentes tipos de
contenidos en los documentos especificando que cada trozo de con-
tenido se debe entregar supuestamente como en los navegadores web
(por ejemplo encabezamientos paacuterrafos tablas listas con vintildeetas
etc)
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 5 Introduccioacuten al mundo de los estaacutendares web
1 La historia de Internet y la web y la evolucioacuten de los estaacutendares webMark Norman Francis
ldquoiquestPor doacutende debo empezar Majestad
Empieza por el principio ndashdijo el rey solemnementendash y continuacutea hasta llegar al final En-tonces detenterdquo
Alicia en el Paiacutes de las Maravillas Lewis Caroll
Todo debe empezar por alguacuten sitio de manera que nuestro viaje empezaraacute con
una leccioacuten centrada en la historia A continuacioacuten realizaremos un breve re-
paso de la creacioacuten de Internet la web mundial (World Wide Web) y de los
estaacutendares web en los que se centra toda esta serie Creo que es uacutetil e intere-
sante entender coacutemo hemos llegado hasta donde estamos pero seremos lo
bastante breves como para no agobiaros y poder entrar en detalle de manera
raacutepida y agradable Si no estaacuteis familiarizados con alguacuten teacutermino no os pre-
ocupeacuteis si son importantes para aprender sobre el desarrollo web se definiraacuten
en los uacuteltimos apartados que ampliacutean cada tema y siempre podeacuteis hacer una
busca en Google Si ya estaacuteis familiarizados con la historia de Internet o de la
web mundial os podeacuteis saltar este apartado sobre los estaacutendares web
11 Los oriacutegenes de Internet
El cuatro de octubre de 1957 sucedioacute un acontecimiento que cambiariacutea el
mundo La Unioacuten Sovieacutetica lanzoacute con eacutexito el primer sateacutelite a la oacuterbita de la
Tierra Se llamaba Sputnik 1 y sorprendioacute al mundo especialmente a Estados
Unidos que teniacutea en curso su propio programa de lanzamientos de sateacutelites
pero todaviacutea no habiacutean lanzado ninguno
Este acontecimiento condujo directamente a la creacioacuten de la ARPA (Advan-
ced Research Projects Agency la Agencia de Proyectos de Investigacioacuten Avan-
zada) del Departamento de Defensa de Estados Unidos a causa de la necesidad
reconocida de una organizacioacuten que pudiera investigar y desarrollar ideas
avanzadas y tecnologiacutea maacutes allaacute de las necesidades identificadas actualmente
Quizaacute su proyecto maacutes famoso (sin duda el maacutes ampliamente utilizado) fue la
creacioacuten de Internet
En 1960 el psicoacutelogo y cientiacutefico informaacutetico Joseph Licklider publicoacute un docu-
mento titulado Simbiosis Hombre-Ordenador que articuloacute la idea de ordenadores
en red que proporcionaban un almacenaje y una recuperacioacuten avanzada de los
datos En 1962 mientras trabajaba para la ARPA como jefe de la oficina de proce-
samiento de informacioacuten formoacute un grupo para continuar con la investigacioacuten in-
formaacutetica pero lo abandonoacute antes de que se trabajara en aquella idea
CC-BY-NC-ND bull PID_00150463 6 Introduccioacuten al mundo de los estaacutendares web
El plan para esta red de ordenadores (que se denominariacutea ARPANET) se presentoacute
en octubre de 1967 y en diciembre de 1969 la primera red de cuatro ordenadores
ya estaba conectada y en funcionamiento El principal problema de la creacioacuten
de una red era coacutemo conectar redes fiacutesicamente separadas sin colapsar los recur-
sos de la red a causa de las conexiones constantes La teacutecnica que resolvioacute este
problema se conoce como conmutacioacuten de paquetes e implica que las solicitu-
des de datos se dividen en pequentildeos trozos (paquetes) que se pueden procesar
raacutepidamente sin bloquear la comunicacioacuten de los otros Este principio todaviacutea
se utiliza en la actualidad para el funcionamiento de Internet
Este concepto se adoptoacute ampliamente con el nacimiento de otras redes que
utilizaban la misma teacutecnica de conmutacioacuten de paquetes Por ejemplo la X25
(desarrollada por la Unioacuten Internacional de Telecomunicaciones) formoacute la
base de la primera red universitaria del Reino Unido JANET (que permitiacutea a
las universidades del Reino Unido enviar y recibir ficheros) y la red puacuteblica
norteamericana CompuServe (una empresa comercial que permitiacutea a peque-
ntildeas empresas y personas acceder a los recursos informaacuteticos con tiempo com-
partido y posteriormente el acceso a Internet) Estas redes a pesar de tener
muchas conexiones eran maacutes privadas que la Internet actual
Esta proliferacioacuten de diferentes protocolos de red no tardoacute mucho en convertirse
en un problema cuando se intentaba que todas las redes independientes se comu-
nicaran Sin embargo habiacutea una solucioacuten a la vista Robert Kahn mientras traba-
jaba en un proyecto de red de paquetes por sateacutelite para ARPA empezoacute a definir
algunas reglas para una arquitectura de red maacutes abierta que sustituyera el proto-
colo actual que se utilizaba en ARPANET Maacutes adelante Vinton Cerf ndashde la Uni-
versidad de Stanfordndash se incorporoacute al proyecto y ambos crearon un sistema que
enmascaraba las diferencias entre protocolos de red utilizando un nuevo estaacuten-
dar La publicacioacuten del borrador de la especificacioacuten en diciembre de 1974 se de-
nominoacute Programa de Control de Transmisioacuten de Internet
Esta especificacioacuten reduciacutea las funciones de la red y trasladaba la tarea de man-
tener la integridad de la transmisioacuten al ordenador principal El resultado final
fue que era posible unir faacutecilmente casi todas las redes entre ellas ARPA asu-
mioacute el coste del desarrollo del software y en 1977 se llevoacute a cabo una demos-
tracioacuten de comunicacioacuten entre tres redes diferentes En 1981 la especificacioacuten
se completoacute publicoacute y adoptoacute y en 1982 las conexiones de ARPANET fuera de
Estados Unidos se convirtieron para utilizar el nuevo protocolo TCPIP Habiacutea
llegado Internet tal como la conocemos
12 La creacioacuten de la web mundial
Gopher era un sistema de recuperacioacuten de informacioacuten que se utilizaba a
principios de los antildeos noventa y que proporcionaba un meacutetodo de entrega de
menuacutes de enlaces a archivos recursos informaacuteticos y otros menuacutes Estos me-
nuacutes podiacutean cruzar los liacutemites del ordenador y utilizar Internet para ir a buscar
httpenwikipediaorgwikiGopher_(protocol)
CC-BY-NC-ND bull PID_00150463 7 Introduccioacuten al mundo de los estaacutendares web
menuacutes de otros sistemas Era muy popular en las universidades que queriacutean
proporcionar informacioacuten para todo el campus y organizaciones grandes que
queriacutean centralizar el almacenaje y la gestioacuten de documentos
Gopher fue creado por la Universidad de Minnesota En febrero de 1993 esta
universidad anuncioacute que cobrariacutea licencias por el uso de la implementacioacuten
de referencia del servidor Gopher En consecuencia muchas organizaciones
empezaron a buscar alternativas a Gopher
El Consejo Europeo de Investigacioacuten Nuclear (CERN) en Suiza teniacutea esta al-
ternativa Tim Berners-Lee habiacutea estado trabajando en un sistema de gestioacuten
de informacioacuten en el que el texto pudiera contener enlaces y referencias a
otros trabajos de manera que permitiera al lector saltar raacutepidamente de un do-
cumento a otro Habiacutea creado un servidor para publicar este estilo de docu-
mento (denominado hipertexto) y tambieacuten un programa para leerlo al que
habiacutea denominado World Wide Web Este software se publicoacute por primera vez
en 1991 pero dos acontecimientos provocaron una explosioacuten de popularidad
y finalmente la sustitucioacuten de Gopher
El 30 de abril de 1993 el CERN cedioacute el coacutedigo fuente del World Wide Web al
dominio puacuteblico de manera que cualquiera pudiera utilizar o construir sobre
el software sin ninguacuten coste
Asiacute maacutes tarde en el mismo antildeo el NCSA (National Center for Supercom-
puting Applications Centro Nacional para Aplicaciones de Supercomputa-
cioacuten) publicoacute un programa que era una combinacioacuten de navegador web y
cliente Gopher denominado Mosaic Originalmente soacutelo estaba disponible
para equipos Unix y en forma de coacutedigo fuente pero en diciembre de 1993
Mosaic ya disponiacutea de una nueva versioacuten con instaladores tanto para Apple
Macintosh como para Microsoft Windows Mosaic aumentoacute en popularidad
raacutepidamente y en consecuencia tambieacuten la web
El nuacutemero de navegadores web disponibles aumentoacute muchiacutesimo muchos de
ellos creados para proyectos de investigacioacuten en universidades y corporacio-
nes como Telenor (una compantildeiacutea noruega de comunicaciones) que creoacute la
primera versioacuten del navegador Opera en 1994
121 Las ldquoguerras de los navegadoresrdquo
La popularizacioacuten de la web atrajo intereses comerciales Marc Andreessen
abandonoacute el NCSA y junto con Jim Clark fundoacute Mosaic Communications
que maacutes adelante cambioacute su nombre por Netscape Communications Cor-
poration y empezaron a trabajar en lo que acabariacutea convirtieacutendose en el
navegador Netscape La versioacuten 10 del software se publicoacute en diciembre de
1994
CC-BY-NC-ND bull PID_00150463 8 Introduccioacuten al mundo de los estaacutendares web
Spyglass Inc (la rama comercial del NCSA) autorizoacute la comercializacioacuten de su
tecnologiacutea Mosaic a Microsoft para formar la base de Internet Explorer La ver-
sioacuten 10 se publicoacute en agosto de 1995
Una raacutepida escalada siguioacute a continuacioacuten en la que Netscape y Microsoft inten-
taban cada uno obtener una ventaja competitiva en cuanto a las funciones que
admitiacutean con el fin de atraer desarrolladores Desde entonces esta competicioacuten se
ha conocido como ldquolas guerras de los navegadoresrdquo Opera mantuvo una presen-
cia modesta pero continuada a lo largo de este periacuteodo e intentoacute innovar y ser
compatible con los estaacutendares web lo mejor posible en aquellos tiempos
13 La aparicioacuten de los estaacutendares web
Durante las guerras de los navegadores Microsoft y Netscape se centraron en
la implementacioacuten de nuevas funciones en lugar de resolver los problemas de
las funciones con las que ya eran compatibles y tambieacuten en antildeadir funciones
propias y crear funciones que fueran competencia directa de las existentes en
el otro navegador pero implementadas de manera incompatible
En aquellos momentos los desarrolladores se veiacutean forzados a tratar con nive-
les de confusioacuten cada vez mayores cuando se intentaban construir las paacuteginas
web a veces hasta el punto de haber de construir dos paacuteginas diferentes pero
duplicadas en la praacutectica para cada uno de los dos principales navegadores y
otras simplemente optando por ser compatibles soacutelo con un navegador de
manera que los usuarios que utilizaran el otro no pudieran utilizar sus paacuteginas
Eacutesta era una manera muy mala de trabajar y la inevitable reaccioacuten negativa de
los desarrolladores no tardoacute en producirse
131 La formacioacuten del W3C
En 1994 Tim Berners-Lee fundoacute el World Wide Web Consortium (W3C) en el
Massachusetts Institute of Technology con el apoyo del CERN DARPA (como
se habiacutea bautizado la ARPA) y la Comisioacuten Europea La misioacuten del W3C era
estandarizar los protocolos y las tecnologiacuteas utilizadas para construir la web
de manera que el contenido estuviera disponible para la mayor parte posible
de la poblacioacuten del mundo
Durante los antildeos siguientes el W3C publicoacute varias especificaciones (denomina-
das recomendaciones) incluyendo HTML 40 el formato para imaacutegenes PNG y las
versiones 1 y 2 de CSS (cascading style sheets u hojas de estilo en cascada)
No obstante el W3C no impone sus recomendaciones Los fabricantes soacutelo
deben ajustarse a la documentacioacuten del W3C si quieren etiquetar su producto
como cumplidor del W3C En la praacutectica esto no es un argumento de venta
CC-BY-NC-ND bull PID_00150463 9 Introduccioacuten al mundo de los estaacutendares web
valioso porque casi todos los usuarios de la web desconocen y probablemente
no les importa quieacuten es el W3C En consecuencia las guerras de los navega-
dores continuaron sin trabas
132 El proyecto de estaacutendares web
En 1998 el mercado de los navegadores estaba dominado por Internet Explo-
rer 4 y Netscape Navigator 4 Se habiacutea lanzado una versioacuten beta de Internet
Explorer 5 que implementaba un nuevo HTML dinaacutemico de marca registrada
Ello significaba que los desarrolladores web profesionales debiacutean conocer cin-
co maneras diferentes de escribir JavaScript
En consecuencia un grupo de desarrolladores y disentildeadores web se asociaron
entre ellos Este grupo se denominaba WaSP (Web Standards Project Proyecto
de estaacutendares web) La idea era que si los documentos del W3C se llamaban
estaacutendares en vez de recomendaciones podriacutean convencer a Microsoft y Netsca-
pe de que les dieran su apoyo
El antiguo meacutetodo de realizar un llamamiento a la accioacuten se llevoacute a cabo me-
diante una teacutecnica publicitaria tradicional denominada barricada donde una
empresa lanza un anuncio en todos los canales de emisioacuten al mismo tiempo
de manera que aunque el espectador cambie de canal obtendraacute exactamente
el mismo mensaje WaSP publicoacute un artiacuteculo simultaacuteneamente en varias paacutegi-
nas centradas en el desarrollo web como buildercom Wired online y algunas
listas de correo muy populares
Otra teacutecnica que utilizaron fue ridiculizar a las empresas que se uniacutean al W3C
(y a otros organismos de estaacutendares) pero que despueacutes se centraban maacutes en
crear nuevas funciones que en hacer que los conceptos baacutesicos para los que se
habiacutean comprometido fueran correctos para empezar
Todo esto suena un poco negativo pero los de WaSP no se conformaban con
criticar a la gente tambieacuten la ayudaban Siete miembros formaron CSS Samu-
rai que identificoacute los diez problemas principales de compatibilidad CSS en
Opera e Internet Explorer (Opera resolvioacute sus problemas y Microsoft no)
133 El auge de los estaacutendares web
En el 2000 Microsoft lanzoacute Internet Explorer 5 Macintosh Edition Fue un
hito muy importante ya que se trataba del navegador que se instalaba enton-
ces de manera predeterminada con el Mac OS y tambieacuten teniacutea un nivel decen-
te de compatibilidad con las recomendaciones del W3C Junto con el nivel
decente de compatibilidad con CSS y HTML Opera contribuyoacute a un movi-
miento positivo general con el que los desarrolladores y disentildeadores web se
CC-BY-NC-ND bull PID_00150463 10 Introduccioacuten al mundo de los estaacutendares web
sentiacutean coacutemodos disentildeando paacuteginas mediante estaacutendares web por primera
vez
WaSP persuadioacute a Netscape de retrasar el lanzamiento de la versioacuten 50 de
Netscape Navigator hasta que fuera mucho maacutes compatible (este trabajo for-
moacute la base de lo que ahora es Firefox un navegador muy popular) WaSP tam-
bieacuten creoacute un grupo de trabajo para Dreamweaver con el fin de animar a
Macromedia a cambiar su popular herramienta de autoriacutea web y dar soporte a
la creacioacuten de paacuteginas web compatibles
La popular paacutegina de desarrollo web A List Apart se redisentildeoacute a principios del 2001 y enun artiacuteculo que explicaba coacutemo y por queacute declaraba
ldquoEn seis meses un antildeo o dos antildeos como mucho todas las paacuteginas se disentildearaacuten con estosestaacutendares [] Podemos contemplar coacutemo nuestras capacidades se quedan obsoletas opodemos empezar a aprender ahora teacutecnicas basadas en estaacutendaresrdquo
Esto era un poco optimista no todas las paacuteginas ni siquiera en el antildeo 2009
estaacuten hechas con estaacutendares web Pero muchos les hicieron caso Los navega-
dores antiguos redujeron su cuota de mercado y dos paacuteginas web maacutes de perfil
muy alto se redisentildearon utilizando estaacutendares web la revista Wired en el 2002
y ESPN en el 2003 se convirtieron en liacutederes del sector en el soporte a los es-
taacutendares web y las nuevas teacutecnicas
Tambieacuten en el 2003 Dave Shea creoacute una paacutegina web denominada CSS Zen
Garden Debiacutea tener maacutes impacto sobre los profesionales web que cual-
quier otra cosa e ilustraba verdaderamente que todo el disentildeo podiacutea cam-
biar soacutelo modificando el estilo de la paacutegina el contenido podiacutea seguir
siendo ideacutentico
Desde entonces en la comunidad de desarrollo web profesional los estaacutenda-
res web se han convertido en un elemento de rigor En esta serie os daremos
unos excelentes fundamentos en estas teacutecnicas para que podaacuteis crear paacuteginas
web tan limpias semaacutenticas accesibles y conformes con los estaacutendares como
las de las grandes empresas
Resumen
En este apartado hemos hablado de coacutemo se creoacute la Internet moderna como
resultado de la carrera espacial de coacutemo Tim Berners-Lee definioacute el hipertexto
para una generacioacuten y de coacutemo los intereses comerciales de dos compantildeiacuteas
provocaron una de las reacciones maacutes notables de los desarrolladores como
nunca se habiacutea visto El teacutermino estaacutendares web se utiliza ahora maacutes amplia-
mente entre los profesionales web que cualquier otro teacutermino aplicado por el
W3C (de hecho el W3C ha empezado a utilizar el teacutermino en sus propias paacute-
ginas) de manera que por este motivo os ensentildearemos el modo de construir
paacuteginas web siguiendo los estaacutendares
CC-BY-NC-ND bull PID_00150463 11 Introduccioacuten al mundo de los estaacutendares web
Preguntas de repaso
Podriacuteais intentar investigar maacutes respondiendo estas preguntas
1 iquestQueacute navegadores estaacuten disponibles actualmente en Internet para los usu-
arios de Windows Mac OS X y Linux
2 iquestQueacute porcentaje de usuarios de la web utiliza cada navegador
3 iquestQueacute navegadores utilizan los dispositivos moacuteviles para acceder a las paacutegi-
nas web
4 iquestCuaacutentos estaacutendares web ha publicado el W3C y cuaacuteles son ampliamente
seguidos por los fabricantes de navegadores actualmente
Lecturas complementarias
Si quereacuteis saber maacutes es posible que queraacuteis visitar algunas de las paacuteginas sigui-
entes
The history of the Internet (wikipedia)
httpenwikipediaorgwikiHistory_of_the_Internet
The history of the World Wide Web (wikipedia)
httpenwikipediaorgwikiHistory_of_the_World_Wide_Web
The history of the W3C
httpwwww3orgConsortiumhistory
El Web Standards Project y su historia
httpwebstandardsorg
httpwwwwebstandardsorgabouthistory
A List Apart
httpwwwalistapartcom
CSS Zen Garden
httpwwwcsszengardencom
CC-BY-NC-ND bull PID_00150463 12 Introduccioacuten al mundo de los estaacutendares web
2 iquestCoacutemo funciona InternetJonathan Lane
Muy de vez en cuando es posible conseguir ver los engranajes y las correas que
actuacutean entre bastidores Hoy es vuestro diacutea de suerte Os llevareacute a dar una vuel-
ta tras los telares de una de las tecnologiacuteas maacutes interesantes que posiblemen-
te ya conoceacuteis bien la web
Este apartado trata sobre la tecnologiacutea subyacente que hace funcionar la web
bull Lenguaje de etiquetado de hipertexto (HTML)
bull Protocolo de transferencia de hipertexto (HTTP)
bull Sistema de nombres de dominio (DNS)
bull Servidores web y navegadores web
bull Contenido estaacutetico y dinaacutemico
Son materias bastante baacutesicas y aunque la mayor parte de lo que aquiacute se ex-
plica no os ayudaraacute a construir una paacutegina web mejor siacute que os proporcionaraacute
el lenguaje adecuado para hablar con clientes y otras personas sobre Internet
Es como lo que una institutriz muy inteligente dijo una vez en Sonrisas y
laacutegrimas ldquoCuando leemos empezamos por ABC Cuando cantamos empeza-
mos por Do Re Mirdquo En este apartado describiremos brevemente coacutemo los or-
denadores se comunican realmente utilizando HTTP y TCPIP y despueacutes nos
fijaremos en los diferentes lenguajes que se combinan para crear las paacuteginas
web que conforman Internet
21 iquestCoacutemo se comunican los ordenadores a traveacutes de Internet
Por suerte hemos mantenido las cosas simples para los ordenadores Cuando
se trata de la web la mayoriacutea de las paacuteginas estaacuten escritas utilizando el mismo
lenguaje el HTML que pasa de un sitio a otro utilizando un protocolo comuacuten
HTTP (hypertext transfer protocol o protocolo de transferencia de hipertexto) El
HTTP es el dialecto (especificacioacuten) comuacuten de Internet que permite por ejem-
plo que un equipo con Windows cante en armoniacutea con un ordenador que eje-
cute la versioacuten maacutes reciente y maacutes fantaacutestica de Linux (iexclDo Re Mi) Mediante
el uso de un navegador web ndashun software especial que interpreta el HTTP y en-
trega el HTML en una manera legible para los humanosndash las paacuteginas web crea-
das con HTML y con cualquier tipo de ordenador se pueden leer en cualquier
medio incluyendo teleacutefonos PDA e incluso en los sistemas de videojuegos
maacutes populares
Aunque hablen el mismo lenguaje los diferentes dispositivos que acceden
a la web han de tener algunas normas establecidas para poder hablar entre
CC-BY-NC-ND bull PID_00150463 13 Introduccioacuten al mundo de los estaacutendares web
ellos es como aprender a alzar la mano para preguntar en clase El HTTP
establece estas normas baacutesicas para Internet Gracias al HTTP un equipo
cliente (como vuestro ordenador) sabe que debe ser eacutel quien inicie una pe-
ticioacuten de una paacutegina web desde un servidor Un servidor es un ordenador
donde residen las paacuteginas web cuando escribiacutes una direccioacuten web en vues-
tro navegador un servidor recibe la peticioacuten encuentra la paacutegina web que
deseaacuteis y la enviacutea a vuestro ordenador para que se vea en vuestro navega-
dor
211 Diseccioacuten de un ciclo de solicitud-respuesta
Ahora que hemos visto todas las partes que permiten a los ordenadores comu-
nicarse a traveacutes de Internet trataremos con maacutes detalle el ciclo de solicitud-
respuesta de HTTP A continuacioacuten se presentan una serie de pasos numera-
dos para que podaacuteis trabajar siguieacutendolos y asiacute os podremos demostrar algu-
nos conceptos de manera maacutes eficaz
1) Todas las solicitudes-respuestas empiezan cuando se escribe un URL
(universal resource locator localizador universal de recursos) en la barra de di-
recciones del navegador web como httpdevoperacom Abrid un navega-
dor para hacerlo ahora mismo
Algo que quizaacute no sabeacuteis es que los navegadores realmente no utilizan los URL
para solicitar paacuteginas web en los servidores utilizan el Protocolo de Internet
o direcciones IP (que son casi como nuacutemeros de teleacutefono o direcciones pos-
tales que identifican los servidores) Por ejemplo la direccioacuten IP de http
devoperacom es 21323620898
2) Abrid una nueva pestantildea o ventana del navegador escribid http
wwwapplecom y pulsad intro a continuacioacuten escribid http1714916010
y pulsad intro llegareacuteis al mismo sitio Escribid http21323620898 en la ba-
rra de direcciones y pulsad intro ireacuteis a parar al mismo sitio que en el paso 1
pero obtendreacuteis un error 403 ldquoAcceso Denegadordquo esto es porque no teneacuteis per-
miso para acceder a la raiacutez real de este servidor
httpwwwapplecom actuacutea baacutesicamente como un alias para http
1714916010 pero iquestpor queacute iquestY coacutemo Ello se debe a que a las personas les
resulta maacutes faacutecil recordar palabras que largas cadenas de nuacutemeros El sistema
que realiza este trabajo se denomina Domain name system (DNS) o Sistema de
nombres de dominio que es esencialmente un directorio automaacutetico comple-
to de todos los ordenadores conectados a Internet Cuando escribiacutes http
devoperacom en la barra de direcciones y apretaacuteis intro esta direccioacuten se en-
viacutea a un servidor de nombres que intenta asociarla a vuestra direccioacuten IP Hay
muchos ordenadores conectados a Internet y no todos los servidores DNS tie-
CC-BY-NC-ND bull PID_00150463 14 Introduccioacuten al mundo de los estaacutendares web
nen un listado de cada ordenador que hay conectado de manera que hay un
sistema creado donde se puede dirigir la solicitud al servidor correcto para
atenderla
Asiacute pues el sistema DNS busca la paacutegina web wwwoperacom averigua que se
encuentra en 1714916010 y devuelve la direccioacuten IP al navegador
El ordenador enviacutea una solicitud al ordenador de la direccioacuten IP especificada
y espera obtener una respuesta Si todo va bien el ordenador del servidor en-
viacutea un breve mensaje de retorno al cliente que dice que todo es correcto (po-
deacuteis ver la figura 1) seguido de la propia paacutegina web Este tipo de mensaje estaacute
incluido en un encabezamiento HTTP
Figura 1
En este caso todo es correcto y el servidor devuelve la paacutegina web correcta
Si algo va mal por ejemplo si se escribe incorrectamente el URL en su lugar
se obtendraacute un error HTTP el famoso error 404 ldquono se encuentra la paacuteginardquo
es el ejemplo maacutes comuacuten que se puede encontrar
3) Escribid httpdevoperacomjoniscoolhtml la paacutegina no existe o sea
que obtendreacuteis un error 404 Probadlo con algunas paacuteginas en diferentes paacute-
ginas web que no existan y os devolveraacuten paacuteginas diferentes Esto se debe al
hecho de que algunos desarrolladores web han dejado que el servidor web soacutelo
emita la paacutegina de error predeterminada y otros han codificado paacuteginas de
error personalizadas para que aparezcan cuando se devuelve una paacutegina no
existente Se trata de una teacutecnica avanzada que no trataremos en esta asigna-
tura pero que afortunadamente se veraacute pronto en un artiacuteculo aparte en
devoperacom
Por uacuteltimo una nota sobre los URL generalmente el primer URL al que se ac-
cede en una paacutegina web no tiene un nombre de archivo real al final (por ejem-
plo httpwwwmysitecom) y a continuacioacuten las paacuteginas subsiguientes a
veces tienen y a veces no Siempre se accede a archivos reales pero en ocasio-
nes el desarrollador web ha configurado el servidor web para que no muestre
CC-BY-NC-ND bull PID_00150463 15 Introduccioacuten al mundo de los estaacutendares web
los nombres de archivo en el URL esto a menudo permite conseguir URL maacutes
limpios y faacuteciles de recordar que conducen a una mejor experiencia para el
usuario de vuestra paacutegina web
22 Tipos de contenido
Ahora que ya os hemos ensentildeado una solicitud-respuesta HTTP queremos
que os fijeacuteis en los diferentes tipos de contenido que pueden encontrarse
en Internet Los hemos agrupado en 4 tipos texto normal estaacutendares web
paacuteginas web dinaacutemicas y formatos que requieren otras aplicaciones o co-
nectores
221 Texto normal
Durante los primeros diacuteas de Internet antes de que apareciera cualquier estaacuten-
dar web o conector Internet era principalmente imaacutegenes y texto normal ar-
chivos con una extensioacuten txt o similar Cuando se encuentra un texto normal
en Internet el navegador lo muestra tal como es sin ninguacuten tipo de proceso
Todaviacutea pueden encontrarse ficheros de texto normal en paacuteginas web univer-
sitarias
222 Estaacutendares web
Las herramientas de construccioacuten baacutesicas de la web son los tres principales es-
taacutendares web HTML (o XHTML aquiacute utilizaremos ambos indistintamente
para nuestras finalidades) CSS y JavaScript
a) Lenguaje de marcado de hipertexto (HTML) es un nombre realmente
bueno con respecto a la definicioacuten de su objetivo El HTML se utiliza para di-
vidir un documento especificar sus contenidos y su estructura y definir el sig-
nificado de cada parte (es lo que incluye todo el texto etc que se ve en las
paacuteginas web) Utiliza elementos para identificar los diferentes componentes
de una paacutegina
b) Las hojas de estilo en cascada (CSS) dan un control total sobre coacutemo se
visualiza un elemento
Existen muchas ventajas para separar la estructura del formato y lo vere-
mos con maacutes detalle en el siguiente apartado Para demostrar la potencia
de HTML y CSS utilizados de manera combinada la figura 2 muestra a la
izquierda HTML normal sin ninguacuten formato antildeadido mientras que a la
derecha puede verse exactamente el mismo HTML con algunos estilos de
CSS aplicados
Cambios de formato
Utilizando declaraciones de es-tilo es muy sencillo cambiar todos los paacuterrafos para que queden a doble espacio
line-height 2em
O hacer que todos los encabe-zamientos de segundo nivel sean verdes
color green
CC-BY-NC-ND bull PID_00150463 16 Introduccioacuten al mundo de los estaacutendares web
Figura 2
HTML normal a la izquierda HTML con CSS aplicado a la derecha
c) Por uacuteltimo el lenguaje JavaScript aporta funciones dinaacutemicas a las paacuteginas
web Se pueden escribir pequentildeos programas en JavaScript que se ejecutaraacuten en el
ordenador cliente y que no requieren que haya ninguacuten software especial instala-
do en el servidor JavaScript permite antildeadir algunas funciones baacutesicas e interacti-
vidad a las paacuteginas web pero tiene sus limitaciones lo que nos lleva a hablar de
lenguajes de programacioacuten del lado del servidor y a paacuteginas web dinaacutemicas
223 Paacuteginas web dinaacutemicas
En ocasiones cuando navegueacuteis por Internet os encontrareacuteis paacuteginas web que
no tienen una extensioacuten html es posible que tengan una extensioacuten php asp
aspx jsp u otras extensiones extrantildeas Todos son ejemplos de tecnologiacuteas
web dinaacutemicas que se pueden utilizar para crear paacuteginas web que tengan sec-
ciones dinaacutemicas coacutedigo que muestra diferentes resultados seguacuten los valores
que reciba por ejemplo de una base de datos de un formulario o de otra fuen-
te de datos Trataremos estos tipos de paacuteginas web en el subapartado ldquoPaacuteginas
web estaacuteticas o dinaacutemicasrdquo a continuacioacuten
224 Formatos que requieren otras aplicaciones o conectores
Como los navegadores web soacutelo estaacuten equipados para interpretar y mostrar de-
terminadas tecnologiacuteas como estaacutendares web si solicitaacuteis un URL que apunta
a un formato de archivo complejo o a una paacutegina web que contiene una tec-
nologiacutea que requiere conectores (plugins) se descargaraacute en vuestro ordenador
o se abriraacute utilizando el conector necesario si el navegador lo tiene instalado
Ejemplos de conectores
Si os encontraacuteis un documento de Word de Excel PDF un fichero comprimido (porejemplo ZIP o SIT) un fichero de imaacutegenes complejas como Photoshop PSD u otrofichero complejo que el navegador no comprende generalmente el navegador os pre-guntaraacute si deseaacuteis descargar o abrir el fichero Ambas acciones normalmente tienen resul-tados similares excepto que la uacuteltima haraacute que el fichero se descargue y a continuacioacutense abra con una aplicacioacuten que lo comprende si estaacute instalada
CC-BY-NC-ND bull PID_00150463 17 Introduccioacuten al mundo de los estaacutendares web
Si os encontraacuteis una paacutegina que contenga una peliacutecula Flash MP3 u otro formato de muacutesicaMPEG u otro formato de viacutedeo el navegador lo reproduciraacute utilizando un conector si hayuno instalado En caso contrario se proporcionaraacute un enlace para instalar el conector nece-sario o el archivo se descargaraacute y buscaraacute una aplicacioacuten de escritorio para ejecutarlo
Naturalmente hay algunas aacutereas grises por ejemplo SVG (scalable vector grap-
hics graacuteficos vectoriales escalables) es un estaacutendar web que se ejecuta de manera
nativa en algunos navegadores como Opera pero no en otros como Internet
Explorer El IE necesita un conector para comprender los SVG Hay una serie de
navegadores que incluyen algunos conectores previamente instalados de modo
que es posible que no seaacuteis conscientes de que el contenido se estaacute visualizando
mediante un conector y de manera no nativa en el navegador
23 Paacuteginas web estaacuteticas o dinaacutemicas
Asiacute pues iquestqueacute son las paacuteginas web estaacuteticas y dinaacutemicas y cuaacutel es la diferencia
entre ambas Como en una caja de bombones todo se basa en el relleno
Otra cosa que cabe tener en cuenta es que se debe instalar un software especial
en el servidor para crear una paacutegina web dinaacutemica Mientras que los ficheros
HTML estaacuteticos normales se guardan con una extensioacuten de fichero html es-
tos ficheros contienen coacutedigo dinaacutemico especial ademaacutes del HTML y se guar-
dan con extensiones de archivo especiales para indicarle al servidor web que
necesitan un procesado adicional antes de enviarlos al cliente (como por
ejemplo que se inserten los datos desde la base de datos) los archivos PHP
por ejemplo generalmente tienen una extensioacuten de archivo php
Hay muchos lenguajes dinaacutemicos que se pueden elegir el PHP que hemos
mencionado antes y otros como Python Ruby on Rails ASPNET y Coldfu-
sion En definitiva todos estos lenguajes tienen maacutes o menos las mismas ca-
pacidades como hablar con bases de datos validar la informacioacuten introducida
en los formularios etc pero hacen las cosas de manera ligeramente diferente
y tienen algunas ventajas e inconvenientes Todo se reduce a la forma maacutes
sencilla que mejor se adapte
Paacutegina web dinaacutemica
Podeacuteis ver un ejemplo de paacutegi-na web dinaacutemica id a Ama-zon con vuestro navegador web y buscad cinco productos diferentes Amazon no os ha enviado cinco paacuteginas diferen-tes os ha enviado la misma paacutegina cinco veces pero con diferente informacioacuten dinaacutemi-ca completada cada vez Esta informacioacuten diferente se guar-da en una base de datos que entrega la informacioacuten corres-pondiente cuando se solicita y la enviacutea al servidor web para in-sertarla en la paacutegina dinaacutemica wwwamazoncom
Una paacutegina web estaacutetica es una paacutegina web donde el contenido el
HTML y los graacuteficos son siempre estaacuteticos ndashse sirve a cualquier visitante
de la misma manera a no ser que la persona que ha creado la web deci-
da cambiar manualmente su copia en el servidorndash exactamente lo que
hemos estado repasando en la mayor parte de este apartado
Por el contrario en una paacutegina web dinaacutemica el contenido del servi-
dor es el mismo pero en vez de ser soacutelo HTML tambieacuten contiene coacutedi-
go dinaacutemico que puede mostrar datos diferentes seguacuten la informacioacuten
que suministre a la paacutegina web
CC-BY-NC-ND bull PID_00150463 18 Introduccioacuten al mundo de los estaacutendares web
Resumen
Hasta aquiacute el recorrido por la sala de maacutequinas de Internet Este apartado real-
mente soacutelo trata de pasada muchos de los temas que incluye pero resulta uacutetil por-
que los pone en perspectiva entre ellos y muestra coacutemo se relacionan y funcionan
entre siacute Todaviacutea queda mucho por aprender sobre la sintaxis real del lenguaje que
conforma el HTML el CSS y JavaScript y esto es lo que haremos a continuacioacuten
el apartado siguiente se centra en el modelo de estaacutendares web HTML CSS y Ja-
vaScript de desarrollo web y da un vistazo al coacutedigo de la paacutegina web
Preguntas de repaso
1 Realizad una breve descripcioacuten de HTML y HTTP y explicad la diferencia en-
tre los dos
2 Explicad la funcioacuten de un navegador web
3 Navegad por Internet durante 5-10 minutos e intentad encontrar algunos
tipos diferentes de contenidos texto normal imaacutegenes HTML paacuteginas dinaacute-
micas como paacuteginas PHP y NET (aspx) PDF documentos de Word peliacuteculas
Flash etc Acceded a algunos de estos contenidos y pensad coacutemo os los mues-
tra el ordenador
4 iquestCuaacutel es la diferencia entre una paacutegina estaacutetica y una paacutegina dinaacutemica
5 Encontrad una lista de coacutedigos de error HTTP enumerad cinco y explicad
queacute significa cada uno de ellos
Lecturas complementarias
En esta asignatura ya no volveremos a hablar de los lenguajes dinaacutemicos pero
hemos creado una lista de recursos en caso de que queraacuteis leeacuteroslos
Rails Fernandez Obie (2007) The Rails Way Addison-Wesley Professional Ruby
Series
Railss screencasts
httpwwwrubyonrailsorgscreencasts
PHP Powers David (2006) PHP Solutions Dynamic web development made easy
friends of ED
Documentacioacuten en liacutenea de PHP
httpwwwphpnetdocsphp
ASPNET Lorenz Patrick (2003) ASPNET 20 Revealed Apress
ASPNET documentacioacuten y guiacuteas en liacutenea de ASPNET
httpaspnet
CC-BY-NC-ND bull PID_00150463 19 Introduccioacuten al mundo de los estaacutendares web
3 El modelo de estaacutendares web HTML CSS y JavaScriptJonathan Lane
En el uacuteltimo apartado hemos visto brevemente las herramientas de construc-
cioacuten baacutesicas de la web HTML (o XHTML) CSS y JavaScript Ahora es el mo-
mento de ampliar un poco maacutes y observarlos individualmente queacute hacen y
coacutemo interaccionan entre ellos para crear una paacutegina web
31 iquestPor queacute separar
Eacutesta es generalmente la primera pregunta que se formula sobre los estaacutendares
web Se puede crear el contenido el estilo y el formato soacutelo utilizando HTML
elementos de tipo de letra para el estilo y tablas HTML para el formato de ma-
nera que iquestpor queacute preocuparse de este asunto de XHTMLCSS El uso de ta-
blas para el formato etc es como se soliacutea hacer en los malos tiempos del
disentildeo web y mucha gente todaviacutea lo hace de esta manera (aunque no se de-
beriacutea de hacer) y de hecho es uno de los motivos por los que hemos creado
esta asignatura Aquiacute no trataremos estos meacutetodos Eacutestas son las razones maacutes
importantes para utilizar CSS y HTML en vez de meacutetodos obsoletos
1) Eficiencia del coacutedigo cuanto mayores sean los archivos maacutes tardaraacuten en
descargarse y maacutes dinero le costaraacute a algunas personas (algunas personas toda-
viacutea pagan por megabyte descargado) Por lo tanto no se debe malgastar el an-
cho de banda con paacuteginas grandes abarrotadas de informacioacuten de estilo y de
formato en cada archivo HTML Una alternativa mucho mejor es que los ar-
chivos HTML esteacuten desglosados y limpios e incluir la informacioacuten de estilo y
de formato soacutelo una vez en un archivo CSS independiente o en varios
2) Facilidad de mantenimiento en relacioacuten con el uacuteltimo punto si la infor-
macioacuten de estilo y formato soacutelo se especifica en un sitio quiere decir que soacutelo
habraacute que hacer actualizaciones en un lugar si se quiere cambiar el aspecto de
la paacutegina web iquestPrefeririacuteais tener que actualizar esta informacioacuten en cada paacute-
gina de vuestra web No lo creo
3) Accesibilidad los usuarios de la web con problemas visuales pueden
utilizar una tipo de software conocido como ldquolector de pantallardquo para ac-
ceder a la informacioacuten mediante el sonido en vez de la vista literalmente
les lee la paacutegina Ademaacutes el software de introduccioacuten de datos mediante la
voz que utilizan las personas con problemas de movilidad tambieacuten se be-
neficia de las paacuteginas web con una semaacutentica bien construida De manera
muy parecida al lector de pantalla que utiliza las instrucciones del teclado
para navegar por los encabezamientos enlaces y formularios un usuario
Eficiencia del coacutedigo
Para ver un caso real de este hecho en accioacuten podeacuteis ver el artiacuteculo sobre la reescritura de Slashdot en A List Apart don-de el autor tomoacute una paacutegina web muy popular y la reescri-bioacute en XHTMLCSS httpwwwalistapartcomarticlesslashdot
CC-BY-NC-ND bull PID_00150463 20 Introduccioacuten al mundo de los estaacutendares web
que interaccione mediante voz utilizaraacute instrucciones con su voz Los do-
cumentos web marcados semaacutenticamente en vez de presentacionalmente
pueden resultar maacutes faacuteciles de navegar y la informacioacuten que contienen es
maacutes faacutecil de encontrar por parte del usuario En otras palabras cuanto maacutes
raacutepidamente ldquoentre en materiardquo (el contenido) mejor Los lectores de pan-
talla no pueden acceder al texto dentro de imaacutegenes y encuentran confusos
algunos usos de JavaScript Aseguraos de que el contenido maacutes importante
estaacute disponible para todo el mundo
4) Compatibilidad de dispositivos ya que vuestra paacutegina XHTML es simple-
mente etiquetado normal sin informacioacuten de estilo se puede reformatear
para diferentes dispositivos con atributos ampliamente variados (por ejemplo
el tamantildeo de pantalla) simplemente aplicando una hoja de estilos alternativa
podeacuteis hacerlo de varias maneras Podeacuteis ver los artiacuteculos de devoperacom
para obtener recursos al respecto CSS tambieacuten permite especificar hojas de es-
tilo diferentes a nivel nativo para distintos meacutetodos de presentacioacuten o tipos de
soporte (por ejemplo visualizacioacuten en pantalla impresioacuten visualizacioacuten en
un dispositivo moacutevil etc)
5) Motores de buacutesqueda en la web probablemente os interesaraacute que vues-
tras paacuteginas web sean faacuteciles de encontrar al buscar en Google o en otros mo-
tores de busca Un motor de buacutesqueda utiliza un crawler o arantildea web que es
una pieza de software especializada para leer vuestras paacuteginas Si esta arantildea tu-
viera problemas para encontrar el contenido de vuestras paacuteginas o interpretara
mal lo que es importante porque no habeacuteis definido los encabezamientos
como encabezamientos etc entonces seguro que vuestra posicioacuten en los re-
sultados de busca se veraacute afectada
6) Es simplemente una buena praacutectica se trata de un motivo un poco del
tipo ldquoporque lo digo yordquo pero hablad con cualquier desarrollador o disentildeador
web profesional consciente de los estaacutendares y seguro que os dice que separar
el contenido el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacioacuten
32 Etiquetado la base de cada paacutegina
httpdevoperacomarticlesmobile
HTML y XHTML son lenguajes de etiquetado formados por elemen-
tos que contienen atributos (algunos opcionales y otros obligatori-
os) Estos elementos se utilizan para etiquetar los diferentes tipos de
contenidos en los documentos especificando que cada trozo de con-
tenido se debe entregar supuestamente como en los navegadores web
(por ejemplo encabezamientos paacuterrafos tablas listas con vintildeetas
etc)
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 6 Introduccioacuten al mundo de los estaacutendares web
El plan para esta red de ordenadores (que se denominariacutea ARPANET) se presentoacute
en octubre de 1967 y en diciembre de 1969 la primera red de cuatro ordenadores
ya estaba conectada y en funcionamiento El principal problema de la creacioacuten
de una red era coacutemo conectar redes fiacutesicamente separadas sin colapsar los recur-
sos de la red a causa de las conexiones constantes La teacutecnica que resolvioacute este
problema se conoce como conmutacioacuten de paquetes e implica que las solicitu-
des de datos se dividen en pequentildeos trozos (paquetes) que se pueden procesar
raacutepidamente sin bloquear la comunicacioacuten de los otros Este principio todaviacutea
se utiliza en la actualidad para el funcionamiento de Internet
Este concepto se adoptoacute ampliamente con el nacimiento de otras redes que
utilizaban la misma teacutecnica de conmutacioacuten de paquetes Por ejemplo la X25
(desarrollada por la Unioacuten Internacional de Telecomunicaciones) formoacute la
base de la primera red universitaria del Reino Unido JANET (que permitiacutea a
las universidades del Reino Unido enviar y recibir ficheros) y la red puacuteblica
norteamericana CompuServe (una empresa comercial que permitiacutea a peque-
ntildeas empresas y personas acceder a los recursos informaacuteticos con tiempo com-
partido y posteriormente el acceso a Internet) Estas redes a pesar de tener
muchas conexiones eran maacutes privadas que la Internet actual
Esta proliferacioacuten de diferentes protocolos de red no tardoacute mucho en convertirse
en un problema cuando se intentaba que todas las redes independientes se comu-
nicaran Sin embargo habiacutea una solucioacuten a la vista Robert Kahn mientras traba-
jaba en un proyecto de red de paquetes por sateacutelite para ARPA empezoacute a definir
algunas reglas para una arquitectura de red maacutes abierta que sustituyera el proto-
colo actual que se utilizaba en ARPANET Maacutes adelante Vinton Cerf ndashde la Uni-
versidad de Stanfordndash se incorporoacute al proyecto y ambos crearon un sistema que
enmascaraba las diferencias entre protocolos de red utilizando un nuevo estaacuten-
dar La publicacioacuten del borrador de la especificacioacuten en diciembre de 1974 se de-
nominoacute Programa de Control de Transmisioacuten de Internet
Esta especificacioacuten reduciacutea las funciones de la red y trasladaba la tarea de man-
tener la integridad de la transmisioacuten al ordenador principal El resultado final
fue que era posible unir faacutecilmente casi todas las redes entre ellas ARPA asu-
mioacute el coste del desarrollo del software y en 1977 se llevoacute a cabo una demos-
tracioacuten de comunicacioacuten entre tres redes diferentes En 1981 la especificacioacuten
se completoacute publicoacute y adoptoacute y en 1982 las conexiones de ARPANET fuera de
Estados Unidos se convirtieron para utilizar el nuevo protocolo TCPIP Habiacutea
llegado Internet tal como la conocemos
12 La creacioacuten de la web mundial
Gopher era un sistema de recuperacioacuten de informacioacuten que se utilizaba a
principios de los antildeos noventa y que proporcionaba un meacutetodo de entrega de
menuacutes de enlaces a archivos recursos informaacuteticos y otros menuacutes Estos me-
nuacutes podiacutean cruzar los liacutemites del ordenador y utilizar Internet para ir a buscar
httpenwikipediaorgwikiGopher_(protocol)
CC-BY-NC-ND bull PID_00150463 7 Introduccioacuten al mundo de los estaacutendares web
menuacutes de otros sistemas Era muy popular en las universidades que queriacutean
proporcionar informacioacuten para todo el campus y organizaciones grandes que
queriacutean centralizar el almacenaje y la gestioacuten de documentos
Gopher fue creado por la Universidad de Minnesota En febrero de 1993 esta
universidad anuncioacute que cobrariacutea licencias por el uso de la implementacioacuten
de referencia del servidor Gopher En consecuencia muchas organizaciones
empezaron a buscar alternativas a Gopher
El Consejo Europeo de Investigacioacuten Nuclear (CERN) en Suiza teniacutea esta al-
ternativa Tim Berners-Lee habiacutea estado trabajando en un sistema de gestioacuten
de informacioacuten en el que el texto pudiera contener enlaces y referencias a
otros trabajos de manera que permitiera al lector saltar raacutepidamente de un do-
cumento a otro Habiacutea creado un servidor para publicar este estilo de docu-
mento (denominado hipertexto) y tambieacuten un programa para leerlo al que
habiacutea denominado World Wide Web Este software se publicoacute por primera vez
en 1991 pero dos acontecimientos provocaron una explosioacuten de popularidad
y finalmente la sustitucioacuten de Gopher
El 30 de abril de 1993 el CERN cedioacute el coacutedigo fuente del World Wide Web al
dominio puacuteblico de manera que cualquiera pudiera utilizar o construir sobre
el software sin ninguacuten coste
Asiacute maacutes tarde en el mismo antildeo el NCSA (National Center for Supercom-
puting Applications Centro Nacional para Aplicaciones de Supercomputa-
cioacuten) publicoacute un programa que era una combinacioacuten de navegador web y
cliente Gopher denominado Mosaic Originalmente soacutelo estaba disponible
para equipos Unix y en forma de coacutedigo fuente pero en diciembre de 1993
Mosaic ya disponiacutea de una nueva versioacuten con instaladores tanto para Apple
Macintosh como para Microsoft Windows Mosaic aumentoacute en popularidad
raacutepidamente y en consecuencia tambieacuten la web
El nuacutemero de navegadores web disponibles aumentoacute muchiacutesimo muchos de
ellos creados para proyectos de investigacioacuten en universidades y corporacio-
nes como Telenor (una compantildeiacutea noruega de comunicaciones) que creoacute la
primera versioacuten del navegador Opera en 1994
121 Las ldquoguerras de los navegadoresrdquo
La popularizacioacuten de la web atrajo intereses comerciales Marc Andreessen
abandonoacute el NCSA y junto con Jim Clark fundoacute Mosaic Communications
que maacutes adelante cambioacute su nombre por Netscape Communications Cor-
poration y empezaron a trabajar en lo que acabariacutea convirtieacutendose en el
navegador Netscape La versioacuten 10 del software se publicoacute en diciembre de
1994
CC-BY-NC-ND bull PID_00150463 8 Introduccioacuten al mundo de los estaacutendares web
Spyglass Inc (la rama comercial del NCSA) autorizoacute la comercializacioacuten de su
tecnologiacutea Mosaic a Microsoft para formar la base de Internet Explorer La ver-
sioacuten 10 se publicoacute en agosto de 1995
Una raacutepida escalada siguioacute a continuacioacuten en la que Netscape y Microsoft inten-
taban cada uno obtener una ventaja competitiva en cuanto a las funciones que
admitiacutean con el fin de atraer desarrolladores Desde entonces esta competicioacuten se
ha conocido como ldquolas guerras de los navegadoresrdquo Opera mantuvo una presen-
cia modesta pero continuada a lo largo de este periacuteodo e intentoacute innovar y ser
compatible con los estaacutendares web lo mejor posible en aquellos tiempos
13 La aparicioacuten de los estaacutendares web
Durante las guerras de los navegadores Microsoft y Netscape se centraron en
la implementacioacuten de nuevas funciones en lugar de resolver los problemas de
las funciones con las que ya eran compatibles y tambieacuten en antildeadir funciones
propias y crear funciones que fueran competencia directa de las existentes en
el otro navegador pero implementadas de manera incompatible
En aquellos momentos los desarrolladores se veiacutean forzados a tratar con nive-
les de confusioacuten cada vez mayores cuando se intentaban construir las paacuteginas
web a veces hasta el punto de haber de construir dos paacuteginas diferentes pero
duplicadas en la praacutectica para cada uno de los dos principales navegadores y
otras simplemente optando por ser compatibles soacutelo con un navegador de
manera que los usuarios que utilizaran el otro no pudieran utilizar sus paacuteginas
Eacutesta era una manera muy mala de trabajar y la inevitable reaccioacuten negativa de
los desarrolladores no tardoacute en producirse
131 La formacioacuten del W3C
En 1994 Tim Berners-Lee fundoacute el World Wide Web Consortium (W3C) en el
Massachusetts Institute of Technology con el apoyo del CERN DARPA (como
se habiacutea bautizado la ARPA) y la Comisioacuten Europea La misioacuten del W3C era
estandarizar los protocolos y las tecnologiacuteas utilizadas para construir la web
de manera que el contenido estuviera disponible para la mayor parte posible
de la poblacioacuten del mundo
Durante los antildeos siguientes el W3C publicoacute varias especificaciones (denomina-
das recomendaciones) incluyendo HTML 40 el formato para imaacutegenes PNG y las
versiones 1 y 2 de CSS (cascading style sheets u hojas de estilo en cascada)
No obstante el W3C no impone sus recomendaciones Los fabricantes soacutelo
deben ajustarse a la documentacioacuten del W3C si quieren etiquetar su producto
como cumplidor del W3C En la praacutectica esto no es un argumento de venta
CC-BY-NC-ND bull PID_00150463 9 Introduccioacuten al mundo de los estaacutendares web
valioso porque casi todos los usuarios de la web desconocen y probablemente
no les importa quieacuten es el W3C En consecuencia las guerras de los navega-
dores continuaron sin trabas
132 El proyecto de estaacutendares web
En 1998 el mercado de los navegadores estaba dominado por Internet Explo-
rer 4 y Netscape Navigator 4 Se habiacutea lanzado una versioacuten beta de Internet
Explorer 5 que implementaba un nuevo HTML dinaacutemico de marca registrada
Ello significaba que los desarrolladores web profesionales debiacutean conocer cin-
co maneras diferentes de escribir JavaScript
En consecuencia un grupo de desarrolladores y disentildeadores web se asociaron
entre ellos Este grupo se denominaba WaSP (Web Standards Project Proyecto
de estaacutendares web) La idea era que si los documentos del W3C se llamaban
estaacutendares en vez de recomendaciones podriacutean convencer a Microsoft y Netsca-
pe de que les dieran su apoyo
El antiguo meacutetodo de realizar un llamamiento a la accioacuten se llevoacute a cabo me-
diante una teacutecnica publicitaria tradicional denominada barricada donde una
empresa lanza un anuncio en todos los canales de emisioacuten al mismo tiempo
de manera que aunque el espectador cambie de canal obtendraacute exactamente
el mismo mensaje WaSP publicoacute un artiacuteculo simultaacuteneamente en varias paacutegi-
nas centradas en el desarrollo web como buildercom Wired online y algunas
listas de correo muy populares
Otra teacutecnica que utilizaron fue ridiculizar a las empresas que se uniacutean al W3C
(y a otros organismos de estaacutendares) pero que despueacutes se centraban maacutes en
crear nuevas funciones que en hacer que los conceptos baacutesicos para los que se
habiacutean comprometido fueran correctos para empezar
Todo esto suena un poco negativo pero los de WaSP no se conformaban con
criticar a la gente tambieacuten la ayudaban Siete miembros formaron CSS Samu-
rai que identificoacute los diez problemas principales de compatibilidad CSS en
Opera e Internet Explorer (Opera resolvioacute sus problemas y Microsoft no)
133 El auge de los estaacutendares web
En el 2000 Microsoft lanzoacute Internet Explorer 5 Macintosh Edition Fue un
hito muy importante ya que se trataba del navegador que se instalaba enton-
ces de manera predeterminada con el Mac OS y tambieacuten teniacutea un nivel decen-
te de compatibilidad con las recomendaciones del W3C Junto con el nivel
decente de compatibilidad con CSS y HTML Opera contribuyoacute a un movi-
miento positivo general con el que los desarrolladores y disentildeadores web se
CC-BY-NC-ND bull PID_00150463 10 Introduccioacuten al mundo de los estaacutendares web
sentiacutean coacutemodos disentildeando paacuteginas mediante estaacutendares web por primera
vez
WaSP persuadioacute a Netscape de retrasar el lanzamiento de la versioacuten 50 de
Netscape Navigator hasta que fuera mucho maacutes compatible (este trabajo for-
moacute la base de lo que ahora es Firefox un navegador muy popular) WaSP tam-
bieacuten creoacute un grupo de trabajo para Dreamweaver con el fin de animar a
Macromedia a cambiar su popular herramienta de autoriacutea web y dar soporte a
la creacioacuten de paacuteginas web compatibles
La popular paacutegina de desarrollo web A List Apart se redisentildeoacute a principios del 2001 y enun artiacuteculo que explicaba coacutemo y por queacute declaraba
ldquoEn seis meses un antildeo o dos antildeos como mucho todas las paacuteginas se disentildearaacuten con estosestaacutendares [] Podemos contemplar coacutemo nuestras capacidades se quedan obsoletas opodemos empezar a aprender ahora teacutecnicas basadas en estaacutendaresrdquo
Esto era un poco optimista no todas las paacuteginas ni siquiera en el antildeo 2009
estaacuten hechas con estaacutendares web Pero muchos les hicieron caso Los navega-
dores antiguos redujeron su cuota de mercado y dos paacuteginas web maacutes de perfil
muy alto se redisentildearon utilizando estaacutendares web la revista Wired en el 2002
y ESPN en el 2003 se convirtieron en liacutederes del sector en el soporte a los es-
taacutendares web y las nuevas teacutecnicas
Tambieacuten en el 2003 Dave Shea creoacute una paacutegina web denominada CSS Zen
Garden Debiacutea tener maacutes impacto sobre los profesionales web que cual-
quier otra cosa e ilustraba verdaderamente que todo el disentildeo podiacutea cam-
biar soacutelo modificando el estilo de la paacutegina el contenido podiacutea seguir
siendo ideacutentico
Desde entonces en la comunidad de desarrollo web profesional los estaacutenda-
res web se han convertido en un elemento de rigor En esta serie os daremos
unos excelentes fundamentos en estas teacutecnicas para que podaacuteis crear paacuteginas
web tan limpias semaacutenticas accesibles y conformes con los estaacutendares como
las de las grandes empresas
Resumen
En este apartado hemos hablado de coacutemo se creoacute la Internet moderna como
resultado de la carrera espacial de coacutemo Tim Berners-Lee definioacute el hipertexto
para una generacioacuten y de coacutemo los intereses comerciales de dos compantildeiacuteas
provocaron una de las reacciones maacutes notables de los desarrolladores como
nunca se habiacutea visto El teacutermino estaacutendares web se utiliza ahora maacutes amplia-
mente entre los profesionales web que cualquier otro teacutermino aplicado por el
W3C (de hecho el W3C ha empezado a utilizar el teacutermino en sus propias paacute-
ginas) de manera que por este motivo os ensentildearemos el modo de construir
paacuteginas web siguiendo los estaacutendares
CC-BY-NC-ND bull PID_00150463 11 Introduccioacuten al mundo de los estaacutendares web
Preguntas de repaso
Podriacuteais intentar investigar maacutes respondiendo estas preguntas
1 iquestQueacute navegadores estaacuten disponibles actualmente en Internet para los usu-
arios de Windows Mac OS X y Linux
2 iquestQueacute porcentaje de usuarios de la web utiliza cada navegador
3 iquestQueacute navegadores utilizan los dispositivos moacuteviles para acceder a las paacutegi-
nas web
4 iquestCuaacutentos estaacutendares web ha publicado el W3C y cuaacuteles son ampliamente
seguidos por los fabricantes de navegadores actualmente
Lecturas complementarias
Si quereacuteis saber maacutes es posible que queraacuteis visitar algunas de las paacuteginas sigui-
entes
The history of the Internet (wikipedia)
httpenwikipediaorgwikiHistory_of_the_Internet
The history of the World Wide Web (wikipedia)
httpenwikipediaorgwikiHistory_of_the_World_Wide_Web
The history of the W3C
httpwwww3orgConsortiumhistory
El Web Standards Project y su historia
httpwebstandardsorg
httpwwwwebstandardsorgabouthistory
A List Apart
httpwwwalistapartcom
CSS Zen Garden
httpwwwcsszengardencom
CC-BY-NC-ND bull PID_00150463 12 Introduccioacuten al mundo de los estaacutendares web
2 iquestCoacutemo funciona InternetJonathan Lane
Muy de vez en cuando es posible conseguir ver los engranajes y las correas que
actuacutean entre bastidores Hoy es vuestro diacutea de suerte Os llevareacute a dar una vuel-
ta tras los telares de una de las tecnologiacuteas maacutes interesantes que posiblemen-
te ya conoceacuteis bien la web
Este apartado trata sobre la tecnologiacutea subyacente que hace funcionar la web
bull Lenguaje de etiquetado de hipertexto (HTML)
bull Protocolo de transferencia de hipertexto (HTTP)
bull Sistema de nombres de dominio (DNS)
bull Servidores web y navegadores web
bull Contenido estaacutetico y dinaacutemico
Son materias bastante baacutesicas y aunque la mayor parte de lo que aquiacute se ex-
plica no os ayudaraacute a construir una paacutegina web mejor siacute que os proporcionaraacute
el lenguaje adecuado para hablar con clientes y otras personas sobre Internet
Es como lo que una institutriz muy inteligente dijo una vez en Sonrisas y
laacutegrimas ldquoCuando leemos empezamos por ABC Cuando cantamos empeza-
mos por Do Re Mirdquo En este apartado describiremos brevemente coacutemo los or-
denadores se comunican realmente utilizando HTTP y TCPIP y despueacutes nos
fijaremos en los diferentes lenguajes que se combinan para crear las paacuteginas
web que conforman Internet
21 iquestCoacutemo se comunican los ordenadores a traveacutes de Internet
Por suerte hemos mantenido las cosas simples para los ordenadores Cuando
se trata de la web la mayoriacutea de las paacuteginas estaacuten escritas utilizando el mismo
lenguaje el HTML que pasa de un sitio a otro utilizando un protocolo comuacuten
HTTP (hypertext transfer protocol o protocolo de transferencia de hipertexto) El
HTTP es el dialecto (especificacioacuten) comuacuten de Internet que permite por ejem-
plo que un equipo con Windows cante en armoniacutea con un ordenador que eje-
cute la versioacuten maacutes reciente y maacutes fantaacutestica de Linux (iexclDo Re Mi) Mediante
el uso de un navegador web ndashun software especial que interpreta el HTTP y en-
trega el HTML en una manera legible para los humanosndash las paacuteginas web crea-
das con HTML y con cualquier tipo de ordenador se pueden leer en cualquier
medio incluyendo teleacutefonos PDA e incluso en los sistemas de videojuegos
maacutes populares
Aunque hablen el mismo lenguaje los diferentes dispositivos que acceden
a la web han de tener algunas normas establecidas para poder hablar entre
CC-BY-NC-ND bull PID_00150463 13 Introduccioacuten al mundo de los estaacutendares web
ellos es como aprender a alzar la mano para preguntar en clase El HTTP
establece estas normas baacutesicas para Internet Gracias al HTTP un equipo
cliente (como vuestro ordenador) sabe que debe ser eacutel quien inicie una pe-
ticioacuten de una paacutegina web desde un servidor Un servidor es un ordenador
donde residen las paacuteginas web cuando escribiacutes una direccioacuten web en vues-
tro navegador un servidor recibe la peticioacuten encuentra la paacutegina web que
deseaacuteis y la enviacutea a vuestro ordenador para que se vea en vuestro navega-
dor
211 Diseccioacuten de un ciclo de solicitud-respuesta
Ahora que hemos visto todas las partes que permiten a los ordenadores comu-
nicarse a traveacutes de Internet trataremos con maacutes detalle el ciclo de solicitud-
respuesta de HTTP A continuacioacuten se presentan una serie de pasos numera-
dos para que podaacuteis trabajar siguieacutendolos y asiacute os podremos demostrar algu-
nos conceptos de manera maacutes eficaz
1) Todas las solicitudes-respuestas empiezan cuando se escribe un URL
(universal resource locator localizador universal de recursos) en la barra de di-
recciones del navegador web como httpdevoperacom Abrid un navega-
dor para hacerlo ahora mismo
Algo que quizaacute no sabeacuteis es que los navegadores realmente no utilizan los URL
para solicitar paacuteginas web en los servidores utilizan el Protocolo de Internet
o direcciones IP (que son casi como nuacutemeros de teleacutefono o direcciones pos-
tales que identifican los servidores) Por ejemplo la direccioacuten IP de http
devoperacom es 21323620898
2) Abrid una nueva pestantildea o ventana del navegador escribid http
wwwapplecom y pulsad intro a continuacioacuten escribid http1714916010
y pulsad intro llegareacuteis al mismo sitio Escribid http21323620898 en la ba-
rra de direcciones y pulsad intro ireacuteis a parar al mismo sitio que en el paso 1
pero obtendreacuteis un error 403 ldquoAcceso Denegadordquo esto es porque no teneacuteis per-
miso para acceder a la raiacutez real de este servidor
httpwwwapplecom actuacutea baacutesicamente como un alias para http
1714916010 pero iquestpor queacute iquestY coacutemo Ello se debe a que a las personas les
resulta maacutes faacutecil recordar palabras que largas cadenas de nuacutemeros El sistema
que realiza este trabajo se denomina Domain name system (DNS) o Sistema de
nombres de dominio que es esencialmente un directorio automaacutetico comple-
to de todos los ordenadores conectados a Internet Cuando escribiacutes http
devoperacom en la barra de direcciones y apretaacuteis intro esta direccioacuten se en-
viacutea a un servidor de nombres que intenta asociarla a vuestra direccioacuten IP Hay
muchos ordenadores conectados a Internet y no todos los servidores DNS tie-
CC-BY-NC-ND bull PID_00150463 14 Introduccioacuten al mundo de los estaacutendares web
nen un listado de cada ordenador que hay conectado de manera que hay un
sistema creado donde se puede dirigir la solicitud al servidor correcto para
atenderla
Asiacute pues el sistema DNS busca la paacutegina web wwwoperacom averigua que se
encuentra en 1714916010 y devuelve la direccioacuten IP al navegador
El ordenador enviacutea una solicitud al ordenador de la direccioacuten IP especificada
y espera obtener una respuesta Si todo va bien el ordenador del servidor en-
viacutea un breve mensaje de retorno al cliente que dice que todo es correcto (po-
deacuteis ver la figura 1) seguido de la propia paacutegina web Este tipo de mensaje estaacute
incluido en un encabezamiento HTTP
Figura 1
En este caso todo es correcto y el servidor devuelve la paacutegina web correcta
Si algo va mal por ejemplo si se escribe incorrectamente el URL en su lugar
se obtendraacute un error HTTP el famoso error 404 ldquono se encuentra la paacuteginardquo
es el ejemplo maacutes comuacuten que se puede encontrar
3) Escribid httpdevoperacomjoniscoolhtml la paacutegina no existe o sea
que obtendreacuteis un error 404 Probadlo con algunas paacuteginas en diferentes paacute-
ginas web que no existan y os devolveraacuten paacuteginas diferentes Esto se debe al
hecho de que algunos desarrolladores web han dejado que el servidor web soacutelo
emita la paacutegina de error predeterminada y otros han codificado paacuteginas de
error personalizadas para que aparezcan cuando se devuelve una paacutegina no
existente Se trata de una teacutecnica avanzada que no trataremos en esta asigna-
tura pero que afortunadamente se veraacute pronto en un artiacuteculo aparte en
devoperacom
Por uacuteltimo una nota sobre los URL generalmente el primer URL al que se ac-
cede en una paacutegina web no tiene un nombre de archivo real al final (por ejem-
plo httpwwwmysitecom) y a continuacioacuten las paacuteginas subsiguientes a
veces tienen y a veces no Siempre se accede a archivos reales pero en ocasio-
nes el desarrollador web ha configurado el servidor web para que no muestre
CC-BY-NC-ND bull PID_00150463 15 Introduccioacuten al mundo de los estaacutendares web
los nombres de archivo en el URL esto a menudo permite conseguir URL maacutes
limpios y faacuteciles de recordar que conducen a una mejor experiencia para el
usuario de vuestra paacutegina web
22 Tipos de contenido
Ahora que ya os hemos ensentildeado una solicitud-respuesta HTTP queremos
que os fijeacuteis en los diferentes tipos de contenido que pueden encontrarse
en Internet Los hemos agrupado en 4 tipos texto normal estaacutendares web
paacuteginas web dinaacutemicas y formatos que requieren otras aplicaciones o co-
nectores
221 Texto normal
Durante los primeros diacuteas de Internet antes de que apareciera cualquier estaacuten-
dar web o conector Internet era principalmente imaacutegenes y texto normal ar-
chivos con una extensioacuten txt o similar Cuando se encuentra un texto normal
en Internet el navegador lo muestra tal como es sin ninguacuten tipo de proceso
Todaviacutea pueden encontrarse ficheros de texto normal en paacuteginas web univer-
sitarias
222 Estaacutendares web
Las herramientas de construccioacuten baacutesicas de la web son los tres principales es-
taacutendares web HTML (o XHTML aquiacute utilizaremos ambos indistintamente
para nuestras finalidades) CSS y JavaScript
a) Lenguaje de marcado de hipertexto (HTML) es un nombre realmente
bueno con respecto a la definicioacuten de su objetivo El HTML se utiliza para di-
vidir un documento especificar sus contenidos y su estructura y definir el sig-
nificado de cada parte (es lo que incluye todo el texto etc que se ve en las
paacuteginas web) Utiliza elementos para identificar los diferentes componentes
de una paacutegina
b) Las hojas de estilo en cascada (CSS) dan un control total sobre coacutemo se
visualiza un elemento
Existen muchas ventajas para separar la estructura del formato y lo vere-
mos con maacutes detalle en el siguiente apartado Para demostrar la potencia
de HTML y CSS utilizados de manera combinada la figura 2 muestra a la
izquierda HTML normal sin ninguacuten formato antildeadido mientras que a la
derecha puede verse exactamente el mismo HTML con algunos estilos de
CSS aplicados
Cambios de formato
Utilizando declaraciones de es-tilo es muy sencillo cambiar todos los paacuterrafos para que queden a doble espacio
line-height 2em
O hacer que todos los encabe-zamientos de segundo nivel sean verdes
color green
CC-BY-NC-ND bull PID_00150463 16 Introduccioacuten al mundo de los estaacutendares web
Figura 2
HTML normal a la izquierda HTML con CSS aplicado a la derecha
c) Por uacuteltimo el lenguaje JavaScript aporta funciones dinaacutemicas a las paacuteginas
web Se pueden escribir pequentildeos programas en JavaScript que se ejecutaraacuten en el
ordenador cliente y que no requieren que haya ninguacuten software especial instala-
do en el servidor JavaScript permite antildeadir algunas funciones baacutesicas e interacti-
vidad a las paacuteginas web pero tiene sus limitaciones lo que nos lleva a hablar de
lenguajes de programacioacuten del lado del servidor y a paacuteginas web dinaacutemicas
223 Paacuteginas web dinaacutemicas
En ocasiones cuando navegueacuteis por Internet os encontrareacuteis paacuteginas web que
no tienen una extensioacuten html es posible que tengan una extensioacuten php asp
aspx jsp u otras extensiones extrantildeas Todos son ejemplos de tecnologiacuteas
web dinaacutemicas que se pueden utilizar para crear paacuteginas web que tengan sec-
ciones dinaacutemicas coacutedigo que muestra diferentes resultados seguacuten los valores
que reciba por ejemplo de una base de datos de un formulario o de otra fuen-
te de datos Trataremos estos tipos de paacuteginas web en el subapartado ldquoPaacuteginas
web estaacuteticas o dinaacutemicasrdquo a continuacioacuten
224 Formatos que requieren otras aplicaciones o conectores
Como los navegadores web soacutelo estaacuten equipados para interpretar y mostrar de-
terminadas tecnologiacuteas como estaacutendares web si solicitaacuteis un URL que apunta
a un formato de archivo complejo o a una paacutegina web que contiene una tec-
nologiacutea que requiere conectores (plugins) se descargaraacute en vuestro ordenador
o se abriraacute utilizando el conector necesario si el navegador lo tiene instalado
Ejemplos de conectores
Si os encontraacuteis un documento de Word de Excel PDF un fichero comprimido (porejemplo ZIP o SIT) un fichero de imaacutegenes complejas como Photoshop PSD u otrofichero complejo que el navegador no comprende generalmente el navegador os pre-guntaraacute si deseaacuteis descargar o abrir el fichero Ambas acciones normalmente tienen resul-tados similares excepto que la uacuteltima haraacute que el fichero se descargue y a continuacioacutense abra con una aplicacioacuten que lo comprende si estaacute instalada
CC-BY-NC-ND bull PID_00150463 17 Introduccioacuten al mundo de los estaacutendares web
Si os encontraacuteis una paacutegina que contenga una peliacutecula Flash MP3 u otro formato de muacutesicaMPEG u otro formato de viacutedeo el navegador lo reproduciraacute utilizando un conector si hayuno instalado En caso contrario se proporcionaraacute un enlace para instalar el conector nece-sario o el archivo se descargaraacute y buscaraacute una aplicacioacuten de escritorio para ejecutarlo
Naturalmente hay algunas aacutereas grises por ejemplo SVG (scalable vector grap-
hics graacuteficos vectoriales escalables) es un estaacutendar web que se ejecuta de manera
nativa en algunos navegadores como Opera pero no en otros como Internet
Explorer El IE necesita un conector para comprender los SVG Hay una serie de
navegadores que incluyen algunos conectores previamente instalados de modo
que es posible que no seaacuteis conscientes de que el contenido se estaacute visualizando
mediante un conector y de manera no nativa en el navegador
23 Paacuteginas web estaacuteticas o dinaacutemicas
Asiacute pues iquestqueacute son las paacuteginas web estaacuteticas y dinaacutemicas y cuaacutel es la diferencia
entre ambas Como en una caja de bombones todo se basa en el relleno
Otra cosa que cabe tener en cuenta es que se debe instalar un software especial
en el servidor para crear una paacutegina web dinaacutemica Mientras que los ficheros
HTML estaacuteticos normales se guardan con una extensioacuten de fichero html es-
tos ficheros contienen coacutedigo dinaacutemico especial ademaacutes del HTML y se guar-
dan con extensiones de archivo especiales para indicarle al servidor web que
necesitan un procesado adicional antes de enviarlos al cliente (como por
ejemplo que se inserten los datos desde la base de datos) los archivos PHP
por ejemplo generalmente tienen una extensioacuten de archivo php
Hay muchos lenguajes dinaacutemicos que se pueden elegir el PHP que hemos
mencionado antes y otros como Python Ruby on Rails ASPNET y Coldfu-
sion En definitiva todos estos lenguajes tienen maacutes o menos las mismas ca-
pacidades como hablar con bases de datos validar la informacioacuten introducida
en los formularios etc pero hacen las cosas de manera ligeramente diferente
y tienen algunas ventajas e inconvenientes Todo se reduce a la forma maacutes
sencilla que mejor se adapte
Paacutegina web dinaacutemica
Podeacuteis ver un ejemplo de paacutegi-na web dinaacutemica id a Ama-zon con vuestro navegador web y buscad cinco productos diferentes Amazon no os ha enviado cinco paacuteginas diferen-tes os ha enviado la misma paacutegina cinco veces pero con diferente informacioacuten dinaacutemi-ca completada cada vez Esta informacioacuten diferente se guar-da en una base de datos que entrega la informacioacuten corres-pondiente cuando se solicita y la enviacutea al servidor web para in-sertarla en la paacutegina dinaacutemica wwwamazoncom
Una paacutegina web estaacutetica es una paacutegina web donde el contenido el
HTML y los graacuteficos son siempre estaacuteticos ndashse sirve a cualquier visitante
de la misma manera a no ser que la persona que ha creado la web deci-
da cambiar manualmente su copia en el servidorndash exactamente lo que
hemos estado repasando en la mayor parte de este apartado
Por el contrario en una paacutegina web dinaacutemica el contenido del servi-
dor es el mismo pero en vez de ser soacutelo HTML tambieacuten contiene coacutedi-
go dinaacutemico que puede mostrar datos diferentes seguacuten la informacioacuten
que suministre a la paacutegina web
CC-BY-NC-ND bull PID_00150463 18 Introduccioacuten al mundo de los estaacutendares web
Resumen
Hasta aquiacute el recorrido por la sala de maacutequinas de Internet Este apartado real-
mente soacutelo trata de pasada muchos de los temas que incluye pero resulta uacutetil por-
que los pone en perspectiva entre ellos y muestra coacutemo se relacionan y funcionan
entre siacute Todaviacutea queda mucho por aprender sobre la sintaxis real del lenguaje que
conforma el HTML el CSS y JavaScript y esto es lo que haremos a continuacioacuten
el apartado siguiente se centra en el modelo de estaacutendares web HTML CSS y Ja-
vaScript de desarrollo web y da un vistazo al coacutedigo de la paacutegina web
Preguntas de repaso
1 Realizad una breve descripcioacuten de HTML y HTTP y explicad la diferencia en-
tre los dos
2 Explicad la funcioacuten de un navegador web
3 Navegad por Internet durante 5-10 minutos e intentad encontrar algunos
tipos diferentes de contenidos texto normal imaacutegenes HTML paacuteginas dinaacute-
micas como paacuteginas PHP y NET (aspx) PDF documentos de Word peliacuteculas
Flash etc Acceded a algunos de estos contenidos y pensad coacutemo os los mues-
tra el ordenador
4 iquestCuaacutel es la diferencia entre una paacutegina estaacutetica y una paacutegina dinaacutemica
5 Encontrad una lista de coacutedigos de error HTTP enumerad cinco y explicad
queacute significa cada uno de ellos
Lecturas complementarias
En esta asignatura ya no volveremos a hablar de los lenguajes dinaacutemicos pero
hemos creado una lista de recursos en caso de que queraacuteis leeacuteroslos
Rails Fernandez Obie (2007) The Rails Way Addison-Wesley Professional Ruby
Series
Railss screencasts
httpwwwrubyonrailsorgscreencasts
PHP Powers David (2006) PHP Solutions Dynamic web development made easy
friends of ED
Documentacioacuten en liacutenea de PHP
httpwwwphpnetdocsphp
ASPNET Lorenz Patrick (2003) ASPNET 20 Revealed Apress
ASPNET documentacioacuten y guiacuteas en liacutenea de ASPNET
httpaspnet
CC-BY-NC-ND bull PID_00150463 19 Introduccioacuten al mundo de los estaacutendares web
3 El modelo de estaacutendares web HTML CSS y JavaScriptJonathan Lane
En el uacuteltimo apartado hemos visto brevemente las herramientas de construc-
cioacuten baacutesicas de la web HTML (o XHTML) CSS y JavaScript Ahora es el mo-
mento de ampliar un poco maacutes y observarlos individualmente queacute hacen y
coacutemo interaccionan entre ellos para crear una paacutegina web
31 iquestPor queacute separar
Eacutesta es generalmente la primera pregunta que se formula sobre los estaacutendares
web Se puede crear el contenido el estilo y el formato soacutelo utilizando HTML
elementos de tipo de letra para el estilo y tablas HTML para el formato de ma-
nera que iquestpor queacute preocuparse de este asunto de XHTMLCSS El uso de ta-
blas para el formato etc es como se soliacutea hacer en los malos tiempos del
disentildeo web y mucha gente todaviacutea lo hace de esta manera (aunque no se de-
beriacutea de hacer) y de hecho es uno de los motivos por los que hemos creado
esta asignatura Aquiacute no trataremos estos meacutetodos Eacutestas son las razones maacutes
importantes para utilizar CSS y HTML en vez de meacutetodos obsoletos
1) Eficiencia del coacutedigo cuanto mayores sean los archivos maacutes tardaraacuten en
descargarse y maacutes dinero le costaraacute a algunas personas (algunas personas toda-
viacutea pagan por megabyte descargado) Por lo tanto no se debe malgastar el an-
cho de banda con paacuteginas grandes abarrotadas de informacioacuten de estilo y de
formato en cada archivo HTML Una alternativa mucho mejor es que los ar-
chivos HTML esteacuten desglosados y limpios e incluir la informacioacuten de estilo y
de formato soacutelo una vez en un archivo CSS independiente o en varios
2) Facilidad de mantenimiento en relacioacuten con el uacuteltimo punto si la infor-
macioacuten de estilo y formato soacutelo se especifica en un sitio quiere decir que soacutelo
habraacute que hacer actualizaciones en un lugar si se quiere cambiar el aspecto de
la paacutegina web iquestPrefeririacuteais tener que actualizar esta informacioacuten en cada paacute-
gina de vuestra web No lo creo
3) Accesibilidad los usuarios de la web con problemas visuales pueden
utilizar una tipo de software conocido como ldquolector de pantallardquo para ac-
ceder a la informacioacuten mediante el sonido en vez de la vista literalmente
les lee la paacutegina Ademaacutes el software de introduccioacuten de datos mediante la
voz que utilizan las personas con problemas de movilidad tambieacuten se be-
neficia de las paacuteginas web con una semaacutentica bien construida De manera
muy parecida al lector de pantalla que utiliza las instrucciones del teclado
para navegar por los encabezamientos enlaces y formularios un usuario
Eficiencia del coacutedigo
Para ver un caso real de este hecho en accioacuten podeacuteis ver el artiacuteculo sobre la reescritura de Slashdot en A List Apart don-de el autor tomoacute una paacutegina web muy popular y la reescri-bioacute en XHTMLCSS httpwwwalistapartcomarticlesslashdot
CC-BY-NC-ND bull PID_00150463 20 Introduccioacuten al mundo de los estaacutendares web
que interaccione mediante voz utilizaraacute instrucciones con su voz Los do-
cumentos web marcados semaacutenticamente en vez de presentacionalmente
pueden resultar maacutes faacuteciles de navegar y la informacioacuten que contienen es
maacutes faacutecil de encontrar por parte del usuario En otras palabras cuanto maacutes
raacutepidamente ldquoentre en materiardquo (el contenido) mejor Los lectores de pan-
talla no pueden acceder al texto dentro de imaacutegenes y encuentran confusos
algunos usos de JavaScript Aseguraos de que el contenido maacutes importante
estaacute disponible para todo el mundo
4) Compatibilidad de dispositivos ya que vuestra paacutegina XHTML es simple-
mente etiquetado normal sin informacioacuten de estilo se puede reformatear
para diferentes dispositivos con atributos ampliamente variados (por ejemplo
el tamantildeo de pantalla) simplemente aplicando una hoja de estilos alternativa
podeacuteis hacerlo de varias maneras Podeacuteis ver los artiacuteculos de devoperacom
para obtener recursos al respecto CSS tambieacuten permite especificar hojas de es-
tilo diferentes a nivel nativo para distintos meacutetodos de presentacioacuten o tipos de
soporte (por ejemplo visualizacioacuten en pantalla impresioacuten visualizacioacuten en
un dispositivo moacutevil etc)
5) Motores de buacutesqueda en la web probablemente os interesaraacute que vues-
tras paacuteginas web sean faacuteciles de encontrar al buscar en Google o en otros mo-
tores de busca Un motor de buacutesqueda utiliza un crawler o arantildea web que es
una pieza de software especializada para leer vuestras paacuteginas Si esta arantildea tu-
viera problemas para encontrar el contenido de vuestras paacuteginas o interpretara
mal lo que es importante porque no habeacuteis definido los encabezamientos
como encabezamientos etc entonces seguro que vuestra posicioacuten en los re-
sultados de busca se veraacute afectada
6) Es simplemente una buena praacutectica se trata de un motivo un poco del
tipo ldquoporque lo digo yordquo pero hablad con cualquier desarrollador o disentildeador
web profesional consciente de los estaacutendares y seguro que os dice que separar
el contenido el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacioacuten
32 Etiquetado la base de cada paacutegina
httpdevoperacomarticlesmobile
HTML y XHTML son lenguajes de etiquetado formados por elemen-
tos que contienen atributos (algunos opcionales y otros obligatori-
os) Estos elementos se utilizan para etiquetar los diferentes tipos de
contenidos en los documentos especificando que cada trozo de con-
tenido se debe entregar supuestamente como en los navegadores web
(por ejemplo encabezamientos paacuterrafos tablas listas con vintildeetas
etc)
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 7 Introduccioacuten al mundo de los estaacutendares web
menuacutes de otros sistemas Era muy popular en las universidades que queriacutean
proporcionar informacioacuten para todo el campus y organizaciones grandes que
queriacutean centralizar el almacenaje y la gestioacuten de documentos
Gopher fue creado por la Universidad de Minnesota En febrero de 1993 esta
universidad anuncioacute que cobrariacutea licencias por el uso de la implementacioacuten
de referencia del servidor Gopher En consecuencia muchas organizaciones
empezaron a buscar alternativas a Gopher
El Consejo Europeo de Investigacioacuten Nuclear (CERN) en Suiza teniacutea esta al-
ternativa Tim Berners-Lee habiacutea estado trabajando en un sistema de gestioacuten
de informacioacuten en el que el texto pudiera contener enlaces y referencias a
otros trabajos de manera que permitiera al lector saltar raacutepidamente de un do-
cumento a otro Habiacutea creado un servidor para publicar este estilo de docu-
mento (denominado hipertexto) y tambieacuten un programa para leerlo al que
habiacutea denominado World Wide Web Este software se publicoacute por primera vez
en 1991 pero dos acontecimientos provocaron una explosioacuten de popularidad
y finalmente la sustitucioacuten de Gopher
El 30 de abril de 1993 el CERN cedioacute el coacutedigo fuente del World Wide Web al
dominio puacuteblico de manera que cualquiera pudiera utilizar o construir sobre
el software sin ninguacuten coste
Asiacute maacutes tarde en el mismo antildeo el NCSA (National Center for Supercom-
puting Applications Centro Nacional para Aplicaciones de Supercomputa-
cioacuten) publicoacute un programa que era una combinacioacuten de navegador web y
cliente Gopher denominado Mosaic Originalmente soacutelo estaba disponible
para equipos Unix y en forma de coacutedigo fuente pero en diciembre de 1993
Mosaic ya disponiacutea de una nueva versioacuten con instaladores tanto para Apple
Macintosh como para Microsoft Windows Mosaic aumentoacute en popularidad
raacutepidamente y en consecuencia tambieacuten la web
El nuacutemero de navegadores web disponibles aumentoacute muchiacutesimo muchos de
ellos creados para proyectos de investigacioacuten en universidades y corporacio-
nes como Telenor (una compantildeiacutea noruega de comunicaciones) que creoacute la
primera versioacuten del navegador Opera en 1994
121 Las ldquoguerras de los navegadoresrdquo
La popularizacioacuten de la web atrajo intereses comerciales Marc Andreessen
abandonoacute el NCSA y junto con Jim Clark fundoacute Mosaic Communications
que maacutes adelante cambioacute su nombre por Netscape Communications Cor-
poration y empezaron a trabajar en lo que acabariacutea convirtieacutendose en el
navegador Netscape La versioacuten 10 del software se publicoacute en diciembre de
1994
CC-BY-NC-ND bull PID_00150463 8 Introduccioacuten al mundo de los estaacutendares web
Spyglass Inc (la rama comercial del NCSA) autorizoacute la comercializacioacuten de su
tecnologiacutea Mosaic a Microsoft para formar la base de Internet Explorer La ver-
sioacuten 10 se publicoacute en agosto de 1995
Una raacutepida escalada siguioacute a continuacioacuten en la que Netscape y Microsoft inten-
taban cada uno obtener una ventaja competitiva en cuanto a las funciones que
admitiacutean con el fin de atraer desarrolladores Desde entonces esta competicioacuten se
ha conocido como ldquolas guerras de los navegadoresrdquo Opera mantuvo una presen-
cia modesta pero continuada a lo largo de este periacuteodo e intentoacute innovar y ser
compatible con los estaacutendares web lo mejor posible en aquellos tiempos
13 La aparicioacuten de los estaacutendares web
Durante las guerras de los navegadores Microsoft y Netscape se centraron en
la implementacioacuten de nuevas funciones en lugar de resolver los problemas de
las funciones con las que ya eran compatibles y tambieacuten en antildeadir funciones
propias y crear funciones que fueran competencia directa de las existentes en
el otro navegador pero implementadas de manera incompatible
En aquellos momentos los desarrolladores se veiacutean forzados a tratar con nive-
les de confusioacuten cada vez mayores cuando se intentaban construir las paacuteginas
web a veces hasta el punto de haber de construir dos paacuteginas diferentes pero
duplicadas en la praacutectica para cada uno de los dos principales navegadores y
otras simplemente optando por ser compatibles soacutelo con un navegador de
manera que los usuarios que utilizaran el otro no pudieran utilizar sus paacuteginas
Eacutesta era una manera muy mala de trabajar y la inevitable reaccioacuten negativa de
los desarrolladores no tardoacute en producirse
131 La formacioacuten del W3C
En 1994 Tim Berners-Lee fundoacute el World Wide Web Consortium (W3C) en el
Massachusetts Institute of Technology con el apoyo del CERN DARPA (como
se habiacutea bautizado la ARPA) y la Comisioacuten Europea La misioacuten del W3C era
estandarizar los protocolos y las tecnologiacuteas utilizadas para construir la web
de manera que el contenido estuviera disponible para la mayor parte posible
de la poblacioacuten del mundo
Durante los antildeos siguientes el W3C publicoacute varias especificaciones (denomina-
das recomendaciones) incluyendo HTML 40 el formato para imaacutegenes PNG y las
versiones 1 y 2 de CSS (cascading style sheets u hojas de estilo en cascada)
No obstante el W3C no impone sus recomendaciones Los fabricantes soacutelo
deben ajustarse a la documentacioacuten del W3C si quieren etiquetar su producto
como cumplidor del W3C En la praacutectica esto no es un argumento de venta
CC-BY-NC-ND bull PID_00150463 9 Introduccioacuten al mundo de los estaacutendares web
valioso porque casi todos los usuarios de la web desconocen y probablemente
no les importa quieacuten es el W3C En consecuencia las guerras de los navega-
dores continuaron sin trabas
132 El proyecto de estaacutendares web
En 1998 el mercado de los navegadores estaba dominado por Internet Explo-
rer 4 y Netscape Navigator 4 Se habiacutea lanzado una versioacuten beta de Internet
Explorer 5 que implementaba un nuevo HTML dinaacutemico de marca registrada
Ello significaba que los desarrolladores web profesionales debiacutean conocer cin-
co maneras diferentes de escribir JavaScript
En consecuencia un grupo de desarrolladores y disentildeadores web se asociaron
entre ellos Este grupo se denominaba WaSP (Web Standards Project Proyecto
de estaacutendares web) La idea era que si los documentos del W3C se llamaban
estaacutendares en vez de recomendaciones podriacutean convencer a Microsoft y Netsca-
pe de que les dieran su apoyo
El antiguo meacutetodo de realizar un llamamiento a la accioacuten se llevoacute a cabo me-
diante una teacutecnica publicitaria tradicional denominada barricada donde una
empresa lanza un anuncio en todos los canales de emisioacuten al mismo tiempo
de manera que aunque el espectador cambie de canal obtendraacute exactamente
el mismo mensaje WaSP publicoacute un artiacuteculo simultaacuteneamente en varias paacutegi-
nas centradas en el desarrollo web como buildercom Wired online y algunas
listas de correo muy populares
Otra teacutecnica que utilizaron fue ridiculizar a las empresas que se uniacutean al W3C
(y a otros organismos de estaacutendares) pero que despueacutes se centraban maacutes en
crear nuevas funciones que en hacer que los conceptos baacutesicos para los que se
habiacutean comprometido fueran correctos para empezar
Todo esto suena un poco negativo pero los de WaSP no se conformaban con
criticar a la gente tambieacuten la ayudaban Siete miembros formaron CSS Samu-
rai que identificoacute los diez problemas principales de compatibilidad CSS en
Opera e Internet Explorer (Opera resolvioacute sus problemas y Microsoft no)
133 El auge de los estaacutendares web
En el 2000 Microsoft lanzoacute Internet Explorer 5 Macintosh Edition Fue un
hito muy importante ya que se trataba del navegador que se instalaba enton-
ces de manera predeterminada con el Mac OS y tambieacuten teniacutea un nivel decen-
te de compatibilidad con las recomendaciones del W3C Junto con el nivel
decente de compatibilidad con CSS y HTML Opera contribuyoacute a un movi-
miento positivo general con el que los desarrolladores y disentildeadores web se
CC-BY-NC-ND bull PID_00150463 10 Introduccioacuten al mundo de los estaacutendares web
sentiacutean coacutemodos disentildeando paacuteginas mediante estaacutendares web por primera
vez
WaSP persuadioacute a Netscape de retrasar el lanzamiento de la versioacuten 50 de
Netscape Navigator hasta que fuera mucho maacutes compatible (este trabajo for-
moacute la base de lo que ahora es Firefox un navegador muy popular) WaSP tam-
bieacuten creoacute un grupo de trabajo para Dreamweaver con el fin de animar a
Macromedia a cambiar su popular herramienta de autoriacutea web y dar soporte a
la creacioacuten de paacuteginas web compatibles
La popular paacutegina de desarrollo web A List Apart se redisentildeoacute a principios del 2001 y enun artiacuteculo que explicaba coacutemo y por queacute declaraba
ldquoEn seis meses un antildeo o dos antildeos como mucho todas las paacuteginas se disentildearaacuten con estosestaacutendares [] Podemos contemplar coacutemo nuestras capacidades se quedan obsoletas opodemos empezar a aprender ahora teacutecnicas basadas en estaacutendaresrdquo
Esto era un poco optimista no todas las paacuteginas ni siquiera en el antildeo 2009
estaacuten hechas con estaacutendares web Pero muchos les hicieron caso Los navega-
dores antiguos redujeron su cuota de mercado y dos paacuteginas web maacutes de perfil
muy alto se redisentildearon utilizando estaacutendares web la revista Wired en el 2002
y ESPN en el 2003 se convirtieron en liacutederes del sector en el soporte a los es-
taacutendares web y las nuevas teacutecnicas
Tambieacuten en el 2003 Dave Shea creoacute una paacutegina web denominada CSS Zen
Garden Debiacutea tener maacutes impacto sobre los profesionales web que cual-
quier otra cosa e ilustraba verdaderamente que todo el disentildeo podiacutea cam-
biar soacutelo modificando el estilo de la paacutegina el contenido podiacutea seguir
siendo ideacutentico
Desde entonces en la comunidad de desarrollo web profesional los estaacutenda-
res web se han convertido en un elemento de rigor En esta serie os daremos
unos excelentes fundamentos en estas teacutecnicas para que podaacuteis crear paacuteginas
web tan limpias semaacutenticas accesibles y conformes con los estaacutendares como
las de las grandes empresas
Resumen
En este apartado hemos hablado de coacutemo se creoacute la Internet moderna como
resultado de la carrera espacial de coacutemo Tim Berners-Lee definioacute el hipertexto
para una generacioacuten y de coacutemo los intereses comerciales de dos compantildeiacuteas
provocaron una de las reacciones maacutes notables de los desarrolladores como
nunca se habiacutea visto El teacutermino estaacutendares web se utiliza ahora maacutes amplia-
mente entre los profesionales web que cualquier otro teacutermino aplicado por el
W3C (de hecho el W3C ha empezado a utilizar el teacutermino en sus propias paacute-
ginas) de manera que por este motivo os ensentildearemos el modo de construir
paacuteginas web siguiendo los estaacutendares
CC-BY-NC-ND bull PID_00150463 11 Introduccioacuten al mundo de los estaacutendares web
Preguntas de repaso
Podriacuteais intentar investigar maacutes respondiendo estas preguntas
1 iquestQueacute navegadores estaacuten disponibles actualmente en Internet para los usu-
arios de Windows Mac OS X y Linux
2 iquestQueacute porcentaje de usuarios de la web utiliza cada navegador
3 iquestQueacute navegadores utilizan los dispositivos moacuteviles para acceder a las paacutegi-
nas web
4 iquestCuaacutentos estaacutendares web ha publicado el W3C y cuaacuteles son ampliamente
seguidos por los fabricantes de navegadores actualmente
Lecturas complementarias
Si quereacuteis saber maacutes es posible que queraacuteis visitar algunas de las paacuteginas sigui-
entes
The history of the Internet (wikipedia)
httpenwikipediaorgwikiHistory_of_the_Internet
The history of the World Wide Web (wikipedia)
httpenwikipediaorgwikiHistory_of_the_World_Wide_Web
The history of the W3C
httpwwww3orgConsortiumhistory
El Web Standards Project y su historia
httpwebstandardsorg
httpwwwwebstandardsorgabouthistory
A List Apart
httpwwwalistapartcom
CSS Zen Garden
httpwwwcsszengardencom
CC-BY-NC-ND bull PID_00150463 12 Introduccioacuten al mundo de los estaacutendares web
2 iquestCoacutemo funciona InternetJonathan Lane
Muy de vez en cuando es posible conseguir ver los engranajes y las correas que
actuacutean entre bastidores Hoy es vuestro diacutea de suerte Os llevareacute a dar una vuel-
ta tras los telares de una de las tecnologiacuteas maacutes interesantes que posiblemen-
te ya conoceacuteis bien la web
Este apartado trata sobre la tecnologiacutea subyacente que hace funcionar la web
bull Lenguaje de etiquetado de hipertexto (HTML)
bull Protocolo de transferencia de hipertexto (HTTP)
bull Sistema de nombres de dominio (DNS)
bull Servidores web y navegadores web
bull Contenido estaacutetico y dinaacutemico
Son materias bastante baacutesicas y aunque la mayor parte de lo que aquiacute se ex-
plica no os ayudaraacute a construir una paacutegina web mejor siacute que os proporcionaraacute
el lenguaje adecuado para hablar con clientes y otras personas sobre Internet
Es como lo que una institutriz muy inteligente dijo una vez en Sonrisas y
laacutegrimas ldquoCuando leemos empezamos por ABC Cuando cantamos empeza-
mos por Do Re Mirdquo En este apartado describiremos brevemente coacutemo los or-
denadores se comunican realmente utilizando HTTP y TCPIP y despueacutes nos
fijaremos en los diferentes lenguajes que se combinan para crear las paacuteginas
web que conforman Internet
21 iquestCoacutemo se comunican los ordenadores a traveacutes de Internet
Por suerte hemos mantenido las cosas simples para los ordenadores Cuando
se trata de la web la mayoriacutea de las paacuteginas estaacuten escritas utilizando el mismo
lenguaje el HTML que pasa de un sitio a otro utilizando un protocolo comuacuten
HTTP (hypertext transfer protocol o protocolo de transferencia de hipertexto) El
HTTP es el dialecto (especificacioacuten) comuacuten de Internet que permite por ejem-
plo que un equipo con Windows cante en armoniacutea con un ordenador que eje-
cute la versioacuten maacutes reciente y maacutes fantaacutestica de Linux (iexclDo Re Mi) Mediante
el uso de un navegador web ndashun software especial que interpreta el HTTP y en-
trega el HTML en una manera legible para los humanosndash las paacuteginas web crea-
das con HTML y con cualquier tipo de ordenador se pueden leer en cualquier
medio incluyendo teleacutefonos PDA e incluso en los sistemas de videojuegos
maacutes populares
Aunque hablen el mismo lenguaje los diferentes dispositivos que acceden
a la web han de tener algunas normas establecidas para poder hablar entre
CC-BY-NC-ND bull PID_00150463 13 Introduccioacuten al mundo de los estaacutendares web
ellos es como aprender a alzar la mano para preguntar en clase El HTTP
establece estas normas baacutesicas para Internet Gracias al HTTP un equipo
cliente (como vuestro ordenador) sabe que debe ser eacutel quien inicie una pe-
ticioacuten de una paacutegina web desde un servidor Un servidor es un ordenador
donde residen las paacuteginas web cuando escribiacutes una direccioacuten web en vues-
tro navegador un servidor recibe la peticioacuten encuentra la paacutegina web que
deseaacuteis y la enviacutea a vuestro ordenador para que se vea en vuestro navega-
dor
211 Diseccioacuten de un ciclo de solicitud-respuesta
Ahora que hemos visto todas las partes que permiten a los ordenadores comu-
nicarse a traveacutes de Internet trataremos con maacutes detalle el ciclo de solicitud-
respuesta de HTTP A continuacioacuten se presentan una serie de pasos numera-
dos para que podaacuteis trabajar siguieacutendolos y asiacute os podremos demostrar algu-
nos conceptos de manera maacutes eficaz
1) Todas las solicitudes-respuestas empiezan cuando se escribe un URL
(universal resource locator localizador universal de recursos) en la barra de di-
recciones del navegador web como httpdevoperacom Abrid un navega-
dor para hacerlo ahora mismo
Algo que quizaacute no sabeacuteis es que los navegadores realmente no utilizan los URL
para solicitar paacuteginas web en los servidores utilizan el Protocolo de Internet
o direcciones IP (que son casi como nuacutemeros de teleacutefono o direcciones pos-
tales que identifican los servidores) Por ejemplo la direccioacuten IP de http
devoperacom es 21323620898
2) Abrid una nueva pestantildea o ventana del navegador escribid http
wwwapplecom y pulsad intro a continuacioacuten escribid http1714916010
y pulsad intro llegareacuteis al mismo sitio Escribid http21323620898 en la ba-
rra de direcciones y pulsad intro ireacuteis a parar al mismo sitio que en el paso 1
pero obtendreacuteis un error 403 ldquoAcceso Denegadordquo esto es porque no teneacuteis per-
miso para acceder a la raiacutez real de este servidor
httpwwwapplecom actuacutea baacutesicamente como un alias para http
1714916010 pero iquestpor queacute iquestY coacutemo Ello se debe a que a las personas les
resulta maacutes faacutecil recordar palabras que largas cadenas de nuacutemeros El sistema
que realiza este trabajo se denomina Domain name system (DNS) o Sistema de
nombres de dominio que es esencialmente un directorio automaacutetico comple-
to de todos los ordenadores conectados a Internet Cuando escribiacutes http
devoperacom en la barra de direcciones y apretaacuteis intro esta direccioacuten se en-
viacutea a un servidor de nombres que intenta asociarla a vuestra direccioacuten IP Hay
muchos ordenadores conectados a Internet y no todos los servidores DNS tie-
CC-BY-NC-ND bull PID_00150463 14 Introduccioacuten al mundo de los estaacutendares web
nen un listado de cada ordenador que hay conectado de manera que hay un
sistema creado donde se puede dirigir la solicitud al servidor correcto para
atenderla
Asiacute pues el sistema DNS busca la paacutegina web wwwoperacom averigua que se
encuentra en 1714916010 y devuelve la direccioacuten IP al navegador
El ordenador enviacutea una solicitud al ordenador de la direccioacuten IP especificada
y espera obtener una respuesta Si todo va bien el ordenador del servidor en-
viacutea un breve mensaje de retorno al cliente que dice que todo es correcto (po-
deacuteis ver la figura 1) seguido de la propia paacutegina web Este tipo de mensaje estaacute
incluido en un encabezamiento HTTP
Figura 1
En este caso todo es correcto y el servidor devuelve la paacutegina web correcta
Si algo va mal por ejemplo si se escribe incorrectamente el URL en su lugar
se obtendraacute un error HTTP el famoso error 404 ldquono se encuentra la paacuteginardquo
es el ejemplo maacutes comuacuten que se puede encontrar
3) Escribid httpdevoperacomjoniscoolhtml la paacutegina no existe o sea
que obtendreacuteis un error 404 Probadlo con algunas paacuteginas en diferentes paacute-
ginas web que no existan y os devolveraacuten paacuteginas diferentes Esto se debe al
hecho de que algunos desarrolladores web han dejado que el servidor web soacutelo
emita la paacutegina de error predeterminada y otros han codificado paacuteginas de
error personalizadas para que aparezcan cuando se devuelve una paacutegina no
existente Se trata de una teacutecnica avanzada que no trataremos en esta asigna-
tura pero que afortunadamente se veraacute pronto en un artiacuteculo aparte en
devoperacom
Por uacuteltimo una nota sobre los URL generalmente el primer URL al que se ac-
cede en una paacutegina web no tiene un nombre de archivo real al final (por ejem-
plo httpwwwmysitecom) y a continuacioacuten las paacuteginas subsiguientes a
veces tienen y a veces no Siempre se accede a archivos reales pero en ocasio-
nes el desarrollador web ha configurado el servidor web para que no muestre
CC-BY-NC-ND bull PID_00150463 15 Introduccioacuten al mundo de los estaacutendares web
los nombres de archivo en el URL esto a menudo permite conseguir URL maacutes
limpios y faacuteciles de recordar que conducen a una mejor experiencia para el
usuario de vuestra paacutegina web
22 Tipos de contenido
Ahora que ya os hemos ensentildeado una solicitud-respuesta HTTP queremos
que os fijeacuteis en los diferentes tipos de contenido que pueden encontrarse
en Internet Los hemos agrupado en 4 tipos texto normal estaacutendares web
paacuteginas web dinaacutemicas y formatos que requieren otras aplicaciones o co-
nectores
221 Texto normal
Durante los primeros diacuteas de Internet antes de que apareciera cualquier estaacuten-
dar web o conector Internet era principalmente imaacutegenes y texto normal ar-
chivos con una extensioacuten txt o similar Cuando se encuentra un texto normal
en Internet el navegador lo muestra tal como es sin ninguacuten tipo de proceso
Todaviacutea pueden encontrarse ficheros de texto normal en paacuteginas web univer-
sitarias
222 Estaacutendares web
Las herramientas de construccioacuten baacutesicas de la web son los tres principales es-
taacutendares web HTML (o XHTML aquiacute utilizaremos ambos indistintamente
para nuestras finalidades) CSS y JavaScript
a) Lenguaje de marcado de hipertexto (HTML) es un nombre realmente
bueno con respecto a la definicioacuten de su objetivo El HTML se utiliza para di-
vidir un documento especificar sus contenidos y su estructura y definir el sig-
nificado de cada parte (es lo que incluye todo el texto etc que se ve en las
paacuteginas web) Utiliza elementos para identificar los diferentes componentes
de una paacutegina
b) Las hojas de estilo en cascada (CSS) dan un control total sobre coacutemo se
visualiza un elemento
Existen muchas ventajas para separar la estructura del formato y lo vere-
mos con maacutes detalle en el siguiente apartado Para demostrar la potencia
de HTML y CSS utilizados de manera combinada la figura 2 muestra a la
izquierda HTML normal sin ninguacuten formato antildeadido mientras que a la
derecha puede verse exactamente el mismo HTML con algunos estilos de
CSS aplicados
Cambios de formato
Utilizando declaraciones de es-tilo es muy sencillo cambiar todos los paacuterrafos para que queden a doble espacio
line-height 2em
O hacer que todos los encabe-zamientos de segundo nivel sean verdes
color green
CC-BY-NC-ND bull PID_00150463 16 Introduccioacuten al mundo de los estaacutendares web
Figura 2
HTML normal a la izquierda HTML con CSS aplicado a la derecha
c) Por uacuteltimo el lenguaje JavaScript aporta funciones dinaacutemicas a las paacuteginas
web Se pueden escribir pequentildeos programas en JavaScript que se ejecutaraacuten en el
ordenador cliente y que no requieren que haya ninguacuten software especial instala-
do en el servidor JavaScript permite antildeadir algunas funciones baacutesicas e interacti-
vidad a las paacuteginas web pero tiene sus limitaciones lo que nos lleva a hablar de
lenguajes de programacioacuten del lado del servidor y a paacuteginas web dinaacutemicas
223 Paacuteginas web dinaacutemicas
En ocasiones cuando navegueacuteis por Internet os encontrareacuteis paacuteginas web que
no tienen una extensioacuten html es posible que tengan una extensioacuten php asp
aspx jsp u otras extensiones extrantildeas Todos son ejemplos de tecnologiacuteas
web dinaacutemicas que se pueden utilizar para crear paacuteginas web que tengan sec-
ciones dinaacutemicas coacutedigo que muestra diferentes resultados seguacuten los valores
que reciba por ejemplo de una base de datos de un formulario o de otra fuen-
te de datos Trataremos estos tipos de paacuteginas web en el subapartado ldquoPaacuteginas
web estaacuteticas o dinaacutemicasrdquo a continuacioacuten
224 Formatos que requieren otras aplicaciones o conectores
Como los navegadores web soacutelo estaacuten equipados para interpretar y mostrar de-
terminadas tecnologiacuteas como estaacutendares web si solicitaacuteis un URL que apunta
a un formato de archivo complejo o a una paacutegina web que contiene una tec-
nologiacutea que requiere conectores (plugins) se descargaraacute en vuestro ordenador
o se abriraacute utilizando el conector necesario si el navegador lo tiene instalado
Ejemplos de conectores
Si os encontraacuteis un documento de Word de Excel PDF un fichero comprimido (porejemplo ZIP o SIT) un fichero de imaacutegenes complejas como Photoshop PSD u otrofichero complejo que el navegador no comprende generalmente el navegador os pre-guntaraacute si deseaacuteis descargar o abrir el fichero Ambas acciones normalmente tienen resul-tados similares excepto que la uacuteltima haraacute que el fichero se descargue y a continuacioacutense abra con una aplicacioacuten que lo comprende si estaacute instalada
CC-BY-NC-ND bull PID_00150463 17 Introduccioacuten al mundo de los estaacutendares web
Si os encontraacuteis una paacutegina que contenga una peliacutecula Flash MP3 u otro formato de muacutesicaMPEG u otro formato de viacutedeo el navegador lo reproduciraacute utilizando un conector si hayuno instalado En caso contrario se proporcionaraacute un enlace para instalar el conector nece-sario o el archivo se descargaraacute y buscaraacute una aplicacioacuten de escritorio para ejecutarlo
Naturalmente hay algunas aacutereas grises por ejemplo SVG (scalable vector grap-
hics graacuteficos vectoriales escalables) es un estaacutendar web que se ejecuta de manera
nativa en algunos navegadores como Opera pero no en otros como Internet
Explorer El IE necesita un conector para comprender los SVG Hay una serie de
navegadores que incluyen algunos conectores previamente instalados de modo
que es posible que no seaacuteis conscientes de que el contenido se estaacute visualizando
mediante un conector y de manera no nativa en el navegador
23 Paacuteginas web estaacuteticas o dinaacutemicas
Asiacute pues iquestqueacute son las paacuteginas web estaacuteticas y dinaacutemicas y cuaacutel es la diferencia
entre ambas Como en una caja de bombones todo se basa en el relleno
Otra cosa que cabe tener en cuenta es que se debe instalar un software especial
en el servidor para crear una paacutegina web dinaacutemica Mientras que los ficheros
HTML estaacuteticos normales se guardan con una extensioacuten de fichero html es-
tos ficheros contienen coacutedigo dinaacutemico especial ademaacutes del HTML y se guar-
dan con extensiones de archivo especiales para indicarle al servidor web que
necesitan un procesado adicional antes de enviarlos al cliente (como por
ejemplo que se inserten los datos desde la base de datos) los archivos PHP
por ejemplo generalmente tienen una extensioacuten de archivo php
Hay muchos lenguajes dinaacutemicos que se pueden elegir el PHP que hemos
mencionado antes y otros como Python Ruby on Rails ASPNET y Coldfu-
sion En definitiva todos estos lenguajes tienen maacutes o menos las mismas ca-
pacidades como hablar con bases de datos validar la informacioacuten introducida
en los formularios etc pero hacen las cosas de manera ligeramente diferente
y tienen algunas ventajas e inconvenientes Todo se reduce a la forma maacutes
sencilla que mejor se adapte
Paacutegina web dinaacutemica
Podeacuteis ver un ejemplo de paacutegi-na web dinaacutemica id a Ama-zon con vuestro navegador web y buscad cinco productos diferentes Amazon no os ha enviado cinco paacuteginas diferen-tes os ha enviado la misma paacutegina cinco veces pero con diferente informacioacuten dinaacutemi-ca completada cada vez Esta informacioacuten diferente se guar-da en una base de datos que entrega la informacioacuten corres-pondiente cuando se solicita y la enviacutea al servidor web para in-sertarla en la paacutegina dinaacutemica wwwamazoncom
Una paacutegina web estaacutetica es una paacutegina web donde el contenido el
HTML y los graacuteficos son siempre estaacuteticos ndashse sirve a cualquier visitante
de la misma manera a no ser que la persona que ha creado la web deci-
da cambiar manualmente su copia en el servidorndash exactamente lo que
hemos estado repasando en la mayor parte de este apartado
Por el contrario en una paacutegina web dinaacutemica el contenido del servi-
dor es el mismo pero en vez de ser soacutelo HTML tambieacuten contiene coacutedi-
go dinaacutemico que puede mostrar datos diferentes seguacuten la informacioacuten
que suministre a la paacutegina web
CC-BY-NC-ND bull PID_00150463 18 Introduccioacuten al mundo de los estaacutendares web
Resumen
Hasta aquiacute el recorrido por la sala de maacutequinas de Internet Este apartado real-
mente soacutelo trata de pasada muchos de los temas que incluye pero resulta uacutetil por-
que los pone en perspectiva entre ellos y muestra coacutemo se relacionan y funcionan
entre siacute Todaviacutea queda mucho por aprender sobre la sintaxis real del lenguaje que
conforma el HTML el CSS y JavaScript y esto es lo que haremos a continuacioacuten
el apartado siguiente se centra en el modelo de estaacutendares web HTML CSS y Ja-
vaScript de desarrollo web y da un vistazo al coacutedigo de la paacutegina web
Preguntas de repaso
1 Realizad una breve descripcioacuten de HTML y HTTP y explicad la diferencia en-
tre los dos
2 Explicad la funcioacuten de un navegador web
3 Navegad por Internet durante 5-10 minutos e intentad encontrar algunos
tipos diferentes de contenidos texto normal imaacutegenes HTML paacuteginas dinaacute-
micas como paacuteginas PHP y NET (aspx) PDF documentos de Word peliacuteculas
Flash etc Acceded a algunos de estos contenidos y pensad coacutemo os los mues-
tra el ordenador
4 iquestCuaacutel es la diferencia entre una paacutegina estaacutetica y una paacutegina dinaacutemica
5 Encontrad una lista de coacutedigos de error HTTP enumerad cinco y explicad
queacute significa cada uno de ellos
Lecturas complementarias
En esta asignatura ya no volveremos a hablar de los lenguajes dinaacutemicos pero
hemos creado una lista de recursos en caso de que queraacuteis leeacuteroslos
Rails Fernandez Obie (2007) The Rails Way Addison-Wesley Professional Ruby
Series
Railss screencasts
httpwwwrubyonrailsorgscreencasts
PHP Powers David (2006) PHP Solutions Dynamic web development made easy
friends of ED
Documentacioacuten en liacutenea de PHP
httpwwwphpnetdocsphp
ASPNET Lorenz Patrick (2003) ASPNET 20 Revealed Apress
ASPNET documentacioacuten y guiacuteas en liacutenea de ASPNET
httpaspnet
CC-BY-NC-ND bull PID_00150463 19 Introduccioacuten al mundo de los estaacutendares web
3 El modelo de estaacutendares web HTML CSS y JavaScriptJonathan Lane
En el uacuteltimo apartado hemos visto brevemente las herramientas de construc-
cioacuten baacutesicas de la web HTML (o XHTML) CSS y JavaScript Ahora es el mo-
mento de ampliar un poco maacutes y observarlos individualmente queacute hacen y
coacutemo interaccionan entre ellos para crear una paacutegina web
31 iquestPor queacute separar
Eacutesta es generalmente la primera pregunta que se formula sobre los estaacutendares
web Se puede crear el contenido el estilo y el formato soacutelo utilizando HTML
elementos de tipo de letra para el estilo y tablas HTML para el formato de ma-
nera que iquestpor queacute preocuparse de este asunto de XHTMLCSS El uso de ta-
blas para el formato etc es como se soliacutea hacer en los malos tiempos del
disentildeo web y mucha gente todaviacutea lo hace de esta manera (aunque no se de-
beriacutea de hacer) y de hecho es uno de los motivos por los que hemos creado
esta asignatura Aquiacute no trataremos estos meacutetodos Eacutestas son las razones maacutes
importantes para utilizar CSS y HTML en vez de meacutetodos obsoletos
1) Eficiencia del coacutedigo cuanto mayores sean los archivos maacutes tardaraacuten en
descargarse y maacutes dinero le costaraacute a algunas personas (algunas personas toda-
viacutea pagan por megabyte descargado) Por lo tanto no se debe malgastar el an-
cho de banda con paacuteginas grandes abarrotadas de informacioacuten de estilo y de
formato en cada archivo HTML Una alternativa mucho mejor es que los ar-
chivos HTML esteacuten desglosados y limpios e incluir la informacioacuten de estilo y
de formato soacutelo una vez en un archivo CSS independiente o en varios
2) Facilidad de mantenimiento en relacioacuten con el uacuteltimo punto si la infor-
macioacuten de estilo y formato soacutelo se especifica en un sitio quiere decir que soacutelo
habraacute que hacer actualizaciones en un lugar si se quiere cambiar el aspecto de
la paacutegina web iquestPrefeririacuteais tener que actualizar esta informacioacuten en cada paacute-
gina de vuestra web No lo creo
3) Accesibilidad los usuarios de la web con problemas visuales pueden
utilizar una tipo de software conocido como ldquolector de pantallardquo para ac-
ceder a la informacioacuten mediante el sonido en vez de la vista literalmente
les lee la paacutegina Ademaacutes el software de introduccioacuten de datos mediante la
voz que utilizan las personas con problemas de movilidad tambieacuten se be-
neficia de las paacuteginas web con una semaacutentica bien construida De manera
muy parecida al lector de pantalla que utiliza las instrucciones del teclado
para navegar por los encabezamientos enlaces y formularios un usuario
Eficiencia del coacutedigo
Para ver un caso real de este hecho en accioacuten podeacuteis ver el artiacuteculo sobre la reescritura de Slashdot en A List Apart don-de el autor tomoacute una paacutegina web muy popular y la reescri-bioacute en XHTMLCSS httpwwwalistapartcomarticlesslashdot
CC-BY-NC-ND bull PID_00150463 20 Introduccioacuten al mundo de los estaacutendares web
que interaccione mediante voz utilizaraacute instrucciones con su voz Los do-
cumentos web marcados semaacutenticamente en vez de presentacionalmente
pueden resultar maacutes faacuteciles de navegar y la informacioacuten que contienen es
maacutes faacutecil de encontrar por parte del usuario En otras palabras cuanto maacutes
raacutepidamente ldquoentre en materiardquo (el contenido) mejor Los lectores de pan-
talla no pueden acceder al texto dentro de imaacutegenes y encuentran confusos
algunos usos de JavaScript Aseguraos de que el contenido maacutes importante
estaacute disponible para todo el mundo
4) Compatibilidad de dispositivos ya que vuestra paacutegina XHTML es simple-
mente etiquetado normal sin informacioacuten de estilo se puede reformatear
para diferentes dispositivos con atributos ampliamente variados (por ejemplo
el tamantildeo de pantalla) simplemente aplicando una hoja de estilos alternativa
podeacuteis hacerlo de varias maneras Podeacuteis ver los artiacuteculos de devoperacom
para obtener recursos al respecto CSS tambieacuten permite especificar hojas de es-
tilo diferentes a nivel nativo para distintos meacutetodos de presentacioacuten o tipos de
soporte (por ejemplo visualizacioacuten en pantalla impresioacuten visualizacioacuten en
un dispositivo moacutevil etc)
5) Motores de buacutesqueda en la web probablemente os interesaraacute que vues-
tras paacuteginas web sean faacuteciles de encontrar al buscar en Google o en otros mo-
tores de busca Un motor de buacutesqueda utiliza un crawler o arantildea web que es
una pieza de software especializada para leer vuestras paacuteginas Si esta arantildea tu-
viera problemas para encontrar el contenido de vuestras paacuteginas o interpretara
mal lo que es importante porque no habeacuteis definido los encabezamientos
como encabezamientos etc entonces seguro que vuestra posicioacuten en los re-
sultados de busca se veraacute afectada
6) Es simplemente una buena praacutectica se trata de un motivo un poco del
tipo ldquoporque lo digo yordquo pero hablad con cualquier desarrollador o disentildeador
web profesional consciente de los estaacutendares y seguro que os dice que separar
el contenido el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacioacuten
32 Etiquetado la base de cada paacutegina
httpdevoperacomarticlesmobile
HTML y XHTML son lenguajes de etiquetado formados por elemen-
tos que contienen atributos (algunos opcionales y otros obligatori-
os) Estos elementos se utilizan para etiquetar los diferentes tipos de
contenidos en los documentos especificando que cada trozo de con-
tenido se debe entregar supuestamente como en los navegadores web
(por ejemplo encabezamientos paacuterrafos tablas listas con vintildeetas
etc)
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 8 Introduccioacuten al mundo de los estaacutendares web
Spyglass Inc (la rama comercial del NCSA) autorizoacute la comercializacioacuten de su
tecnologiacutea Mosaic a Microsoft para formar la base de Internet Explorer La ver-
sioacuten 10 se publicoacute en agosto de 1995
Una raacutepida escalada siguioacute a continuacioacuten en la que Netscape y Microsoft inten-
taban cada uno obtener una ventaja competitiva en cuanto a las funciones que
admitiacutean con el fin de atraer desarrolladores Desde entonces esta competicioacuten se
ha conocido como ldquolas guerras de los navegadoresrdquo Opera mantuvo una presen-
cia modesta pero continuada a lo largo de este periacuteodo e intentoacute innovar y ser
compatible con los estaacutendares web lo mejor posible en aquellos tiempos
13 La aparicioacuten de los estaacutendares web
Durante las guerras de los navegadores Microsoft y Netscape se centraron en
la implementacioacuten de nuevas funciones en lugar de resolver los problemas de
las funciones con las que ya eran compatibles y tambieacuten en antildeadir funciones
propias y crear funciones que fueran competencia directa de las existentes en
el otro navegador pero implementadas de manera incompatible
En aquellos momentos los desarrolladores se veiacutean forzados a tratar con nive-
les de confusioacuten cada vez mayores cuando se intentaban construir las paacuteginas
web a veces hasta el punto de haber de construir dos paacuteginas diferentes pero
duplicadas en la praacutectica para cada uno de los dos principales navegadores y
otras simplemente optando por ser compatibles soacutelo con un navegador de
manera que los usuarios que utilizaran el otro no pudieran utilizar sus paacuteginas
Eacutesta era una manera muy mala de trabajar y la inevitable reaccioacuten negativa de
los desarrolladores no tardoacute en producirse
131 La formacioacuten del W3C
En 1994 Tim Berners-Lee fundoacute el World Wide Web Consortium (W3C) en el
Massachusetts Institute of Technology con el apoyo del CERN DARPA (como
se habiacutea bautizado la ARPA) y la Comisioacuten Europea La misioacuten del W3C era
estandarizar los protocolos y las tecnologiacuteas utilizadas para construir la web
de manera que el contenido estuviera disponible para la mayor parte posible
de la poblacioacuten del mundo
Durante los antildeos siguientes el W3C publicoacute varias especificaciones (denomina-
das recomendaciones) incluyendo HTML 40 el formato para imaacutegenes PNG y las
versiones 1 y 2 de CSS (cascading style sheets u hojas de estilo en cascada)
No obstante el W3C no impone sus recomendaciones Los fabricantes soacutelo
deben ajustarse a la documentacioacuten del W3C si quieren etiquetar su producto
como cumplidor del W3C En la praacutectica esto no es un argumento de venta
CC-BY-NC-ND bull PID_00150463 9 Introduccioacuten al mundo de los estaacutendares web
valioso porque casi todos los usuarios de la web desconocen y probablemente
no les importa quieacuten es el W3C En consecuencia las guerras de los navega-
dores continuaron sin trabas
132 El proyecto de estaacutendares web
En 1998 el mercado de los navegadores estaba dominado por Internet Explo-
rer 4 y Netscape Navigator 4 Se habiacutea lanzado una versioacuten beta de Internet
Explorer 5 que implementaba un nuevo HTML dinaacutemico de marca registrada
Ello significaba que los desarrolladores web profesionales debiacutean conocer cin-
co maneras diferentes de escribir JavaScript
En consecuencia un grupo de desarrolladores y disentildeadores web se asociaron
entre ellos Este grupo se denominaba WaSP (Web Standards Project Proyecto
de estaacutendares web) La idea era que si los documentos del W3C se llamaban
estaacutendares en vez de recomendaciones podriacutean convencer a Microsoft y Netsca-
pe de que les dieran su apoyo
El antiguo meacutetodo de realizar un llamamiento a la accioacuten se llevoacute a cabo me-
diante una teacutecnica publicitaria tradicional denominada barricada donde una
empresa lanza un anuncio en todos los canales de emisioacuten al mismo tiempo
de manera que aunque el espectador cambie de canal obtendraacute exactamente
el mismo mensaje WaSP publicoacute un artiacuteculo simultaacuteneamente en varias paacutegi-
nas centradas en el desarrollo web como buildercom Wired online y algunas
listas de correo muy populares
Otra teacutecnica que utilizaron fue ridiculizar a las empresas que se uniacutean al W3C
(y a otros organismos de estaacutendares) pero que despueacutes se centraban maacutes en
crear nuevas funciones que en hacer que los conceptos baacutesicos para los que se
habiacutean comprometido fueran correctos para empezar
Todo esto suena un poco negativo pero los de WaSP no se conformaban con
criticar a la gente tambieacuten la ayudaban Siete miembros formaron CSS Samu-
rai que identificoacute los diez problemas principales de compatibilidad CSS en
Opera e Internet Explorer (Opera resolvioacute sus problemas y Microsoft no)
133 El auge de los estaacutendares web
En el 2000 Microsoft lanzoacute Internet Explorer 5 Macintosh Edition Fue un
hito muy importante ya que se trataba del navegador que se instalaba enton-
ces de manera predeterminada con el Mac OS y tambieacuten teniacutea un nivel decen-
te de compatibilidad con las recomendaciones del W3C Junto con el nivel
decente de compatibilidad con CSS y HTML Opera contribuyoacute a un movi-
miento positivo general con el que los desarrolladores y disentildeadores web se
CC-BY-NC-ND bull PID_00150463 10 Introduccioacuten al mundo de los estaacutendares web
sentiacutean coacutemodos disentildeando paacuteginas mediante estaacutendares web por primera
vez
WaSP persuadioacute a Netscape de retrasar el lanzamiento de la versioacuten 50 de
Netscape Navigator hasta que fuera mucho maacutes compatible (este trabajo for-
moacute la base de lo que ahora es Firefox un navegador muy popular) WaSP tam-
bieacuten creoacute un grupo de trabajo para Dreamweaver con el fin de animar a
Macromedia a cambiar su popular herramienta de autoriacutea web y dar soporte a
la creacioacuten de paacuteginas web compatibles
La popular paacutegina de desarrollo web A List Apart se redisentildeoacute a principios del 2001 y enun artiacuteculo que explicaba coacutemo y por queacute declaraba
ldquoEn seis meses un antildeo o dos antildeos como mucho todas las paacuteginas se disentildearaacuten con estosestaacutendares [] Podemos contemplar coacutemo nuestras capacidades se quedan obsoletas opodemos empezar a aprender ahora teacutecnicas basadas en estaacutendaresrdquo
Esto era un poco optimista no todas las paacuteginas ni siquiera en el antildeo 2009
estaacuten hechas con estaacutendares web Pero muchos les hicieron caso Los navega-
dores antiguos redujeron su cuota de mercado y dos paacuteginas web maacutes de perfil
muy alto se redisentildearon utilizando estaacutendares web la revista Wired en el 2002
y ESPN en el 2003 se convirtieron en liacutederes del sector en el soporte a los es-
taacutendares web y las nuevas teacutecnicas
Tambieacuten en el 2003 Dave Shea creoacute una paacutegina web denominada CSS Zen
Garden Debiacutea tener maacutes impacto sobre los profesionales web que cual-
quier otra cosa e ilustraba verdaderamente que todo el disentildeo podiacutea cam-
biar soacutelo modificando el estilo de la paacutegina el contenido podiacutea seguir
siendo ideacutentico
Desde entonces en la comunidad de desarrollo web profesional los estaacutenda-
res web se han convertido en un elemento de rigor En esta serie os daremos
unos excelentes fundamentos en estas teacutecnicas para que podaacuteis crear paacuteginas
web tan limpias semaacutenticas accesibles y conformes con los estaacutendares como
las de las grandes empresas
Resumen
En este apartado hemos hablado de coacutemo se creoacute la Internet moderna como
resultado de la carrera espacial de coacutemo Tim Berners-Lee definioacute el hipertexto
para una generacioacuten y de coacutemo los intereses comerciales de dos compantildeiacuteas
provocaron una de las reacciones maacutes notables de los desarrolladores como
nunca se habiacutea visto El teacutermino estaacutendares web se utiliza ahora maacutes amplia-
mente entre los profesionales web que cualquier otro teacutermino aplicado por el
W3C (de hecho el W3C ha empezado a utilizar el teacutermino en sus propias paacute-
ginas) de manera que por este motivo os ensentildearemos el modo de construir
paacuteginas web siguiendo los estaacutendares
CC-BY-NC-ND bull PID_00150463 11 Introduccioacuten al mundo de los estaacutendares web
Preguntas de repaso
Podriacuteais intentar investigar maacutes respondiendo estas preguntas
1 iquestQueacute navegadores estaacuten disponibles actualmente en Internet para los usu-
arios de Windows Mac OS X y Linux
2 iquestQueacute porcentaje de usuarios de la web utiliza cada navegador
3 iquestQueacute navegadores utilizan los dispositivos moacuteviles para acceder a las paacutegi-
nas web
4 iquestCuaacutentos estaacutendares web ha publicado el W3C y cuaacuteles son ampliamente
seguidos por los fabricantes de navegadores actualmente
Lecturas complementarias
Si quereacuteis saber maacutes es posible que queraacuteis visitar algunas de las paacuteginas sigui-
entes
The history of the Internet (wikipedia)
httpenwikipediaorgwikiHistory_of_the_Internet
The history of the World Wide Web (wikipedia)
httpenwikipediaorgwikiHistory_of_the_World_Wide_Web
The history of the W3C
httpwwww3orgConsortiumhistory
El Web Standards Project y su historia
httpwebstandardsorg
httpwwwwebstandardsorgabouthistory
A List Apart
httpwwwalistapartcom
CSS Zen Garden
httpwwwcsszengardencom
CC-BY-NC-ND bull PID_00150463 12 Introduccioacuten al mundo de los estaacutendares web
2 iquestCoacutemo funciona InternetJonathan Lane
Muy de vez en cuando es posible conseguir ver los engranajes y las correas que
actuacutean entre bastidores Hoy es vuestro diacutea de suerte Os llevareacute a dar una vuel-
ta tras los telares de una de las tecnologiacuteas maacutes interesantes que posiblemen-
te ya conoceacuteis bien la web
Este apartado trata sobre la tecnologiacutea subyacente que hace funcionar la web
bull Lenguaje de etiquetado de hipertexto (HTML)
bull Protocolo de transferencia de hipertexto (HTTP)
bull Sistema de nombres de dominio (DNS)
bull Servidores web y navegadores web
bull Contenido estaacutetico y dinaacutemico
Son materias bastante baacutesicas y aunque la mayor parte de lo que aquiacute se ex-
plica no os ayudaraacute a construir una paacutegina web mejor siacute que os proporcionaraacute
el lenguaje adecuado para hablar con clientes y otras personas sobre Internet
Es como lo que una institutriz muy inteligente dijo una vez en Sonrisas y
laacutegrimas ldquoCuando leemos empezamos por ABC Cuando cantamos empeza-
mos por Do Re Mirdquo En este apartado describiremos brevemente coacutemo los or-
denadores se comunican realmente utilizando HTTP y TCPIP y despueacutes nos
fijaremos en los diferentes lenguajes que se combinan para crear las paacuteginas
web que conforman Internet
21 iquestCoacutemo se comunican los ordenadores a traveacutes de Internet
Por suerte hemos mantenido las cosas simples para los ordenadores Cuando
se trata de la web la mayoriacutea de las paacuteginas estaacuten escritas utilizando el mismo
lenguaje el HTML que pasa de un sitio a otro utilizando un protocolo comuacuten
HTTP (hypertext transfer protocol o protocolo de transferencia de hipertexto) El
HTTP es el dialecto (especificacioacuten) comuacuten de Internet que permite por ejem-
plo que un equipo con Windows cante en armoniacutea con un ordenador que eje-
cute la versioacuten maacutes reciente y maacutes fantaacutestica de Linux (iexclDo Re Mi) Mediante
el uso de un navegador web ndashun software especial que interpreta el HTTP y en-
trega el HTML en una manera legible para los humanosndash las paacuteginas web crea-
das con HTML y con cualquier tipo de ordenador se pueden leer en cualquier
medio incluyendo teleacutefonos PDA e incluso en los sistemas de videojuegos
maacutes populares
Aunque hablen el mismo lenguaje los diferentes dispositivos que acceden
a la web han de tener algunas normas establecidas para poder hablar entre
CC-BY-NC-ND bull PID_00150463 13 Introduccioacuten al mundo de los estaacutendares web
ellos es como aprender a alzar la mano para preguntar en clase El HTTP
establece estas normas baacutesicas para Internet Gracias al HTTP un equipo
cliente (como vuestro ordenador) sabe que debe ser eacutel quien inicie una pe-
ticioacuten de una paacutegina web desde un servidor Un servidor es un ordenador
donde residen las paacuteginas web cuando escribiacutes una direccioacuten web en vues-
tro navegador un servidor recibe la peticioacuten encuentra la paacutegina web que
deseaacuteis y la enviacutea a vuestro ordenador para que se vea en vuestro navega-
dor
211 Diseccioacuten de un ciclo de solicitud-respuesta
Ahora que hemos visto todas las partes que permiten a los ordenadores comu-
nicarse a traveacutes de Internet trataremos con maacutes detalle el ciclo de solicitud-
respuesta de HTTP A continuacioacuten se presentan una serie de pasos numera-
dos para que podaacuteis trabajar siguieacutendolos y asiacute os podremos demostrar algu-
nos conceptos de manera maacutes eficaz
1) Todas las solicitudes-respuestas empiezan cuando se escribe un URL
(universal resource locator localizador universal de recursos) en la barra de di-
recciones del navegador web como httpdevoperacom Abrid un navega-
dor para hacerlo ahora mismo
Algo que quizaacute no sabeacuteis es que los navegadores realmente no utilizan los URL
para solicitar paacuteginas web en los servidores utilizan el Protocolo de Internet
o direcciones IP (que son casi como nuacutemeros de teleacutefono o direcciones pos-
tales que identifican los servidores) Por ejemplo la direccioacuten IP de http
devoperacom es 21323620898
2) Abrid una nueva pestantildea o ventana del navegador escribid http
wwwapplecom y pulsad intro a continuacioacuten escribid http1714916010
y pulsad intro llegareacuteis al mismo sitio Escribid http21323620898 en la ba-
rra de direcciones y pulsad intro ireacuteis a parar al mismo sitio que en el paso 1
pero obtendreacuteis un error 403 ldquoAcceso Denegadordquo esto es porque no teneacuteis per-
miso para acceder a la raiacutez real de este servidor
httpwwwapplecom actuacutea baacutesicamente como un alias para http
1714916010 pero iquestpor queacute iquestY coacutemo Ello se debe a que a las personas les
resulta maacutes faacutecil recordar palabras que largas cadenas de nuacutemeros El sistema
que realiza este trabajo se denomina Domain name system (DNS) o Sistema de
nombres de dominio que es esencialmente un directorio automaacutetico comple-
to de todos los ordenadores conectados a Internet Cuando escribiacutes http
devoperacom en la barra de direcciones y apretaacuteis intro esta direccioacuten se en-
viacutea a un servidor de nombres que intenta asociarla a vuestra direccioacuten IP Hay
muchos ordenadores conectados a Internet y no todos los servidores DNS tie-
CC-BY-NC-ND bull PID_00150463 14 Introduccioacuten al mundo de los estaacutendares web
nen un listado de cada ordenador que hay conectado de manera que hay un
sistema creado donde se puede dirigir la solicitud al servidor correcto para
atenderla
Asiacute pues el sistema DNS busca la paacutegina web wwwoperacom averigua que se
encuentra en 1714916010 y devuelve la direccioacuten IP al navegador
El ordenador enviacutea una solicitud al ordenador de la direccioacuten IP especificada
y espera obtener una respuesta Si todo va bien el ordenador del servidor en-
viacutea un breve mensaje de retorno al cliente que dice que todo es correcto (po-
deacuteis ver la figura 1) seguido de la propia paacutegina web Este tipo de mensaje estaacute
incluido en un encabezamiento HTTP
Figura 1
En este caso todo es correcto y el servidor devuelve la paacutegina web correcta
Si algo va mal por ejemplo si se escribe incorrectamente el URL en su lugar
se obtendraacute un error HTTP el famoso error 404 ldquono se encuentra la paacuteginardquo
es el ejemplo maacutes comuacuten que se puede encontrar
3) Escribid httpdevoperacomjoniscoolhtml la paacutegina no existe o sea
que obtendreacuteis un error 404 Probadlo con algunas paacuteginas en diferentes paacute-
ginas web que no existan y os devolveraacuten paacuteginas diferentes Esto se debe al
hecho de que algunos desarrolladores web han dejado que el servidor web soacutelo
emita la paacutegina de error predeterminada y otros han codificado paacuteginas de
error personalizadas para que aparezcan cuando se devuelve una paacutegina no
existente Se trata de una teacutecnica avanzada que no trataremos en esta asigna-
tura pero que afortunadamente se veraacute pronto en un artiacuteculo aparte en
devoperacom
Por uacuteltimo una nota sobre los URL generalmente el primer URL al que se ac-
cede en una paacutegina web no tiene un nombre de archivo real al final (por ejem-
plo httpwwwmysitecom) y a continuacioacuten las paacuteginas subsiguientes a
veces tienen y a veces no Siempre se accede a archivos reales pero en ocasio-
nes el desarrollador web ha configurado el servidor web para que no muestre
CC-BY-NC-ND bull PID_00150463 15 Introduccioacuten al mundo de los estaacutendares web
los nombres de archivo en el URL esto a menudo permite conseguir URL maacutes
limpios y faacuteciles de recordar que conducen a una mejor experiencia para el
usuario de vuestra paacutegina web
22 Tipos de contenido
Ahora que ya os hemos ensentildeado una solicitud-respuesta HTTP queremos
que os fijeacuteis en los diferentes tipos de contenido que pueden encontrarse
en Internet Los hemos agrupado en 4 tipos texto normal estaacutendares web
paacuteginas web dinaacutemicas y formatos que requieren otras aplicaciones o co-
nectores
221 Texto normal
Durante los primeros diacuteas de Internet antes de que apareciera cualquier estaacuten-
dar web o conector Internet era principalmente imaacutegenes y texto normal ar-
chivos con una extensioacuten txt o similar Cuando se encuentra un texto normal
en Internet el navegador lo muestra tal como es sin ninguacuten tipo de proceso
Todaviacutea pueden encontrarse ficheros de texto normal en paacuteginas web univer-
sitarias
222 Estaacutendares web
Las herramientas de construccioacuten baacutesicas de la web son los tres principales es-
taacutendares web HTML (o XHTML aquiacute utilizaremos ambos indistintamente
para nuestras finalidades) CSS y JavaScript
a) Lenguaje de marcado de hipertexto (HTML) es un nombre realmente
bueno con respecto a la definicioacuten de su objetivo El HTML se utiliza para di-
vidir un documento especificar sus contenidos y su estructura y definir el sig-
nificado de cada parte (es lo que incluye todo el texto etc que se ve en las
paacuteginas web) Utiliza elementos para identificar los diferentes componentes
de una paacutegina
b) Las hojas de estilo en cascada (CSS) dan un control total sobre coacutemo se
visualiza un elemento
Existen muchas ventajas para separar la estructura del formato y lo vere-
mos con maacutes detalle en el siguiente apartado Para demostrar la potencia
de HTML y CSS utilizados de manera combinada la figura 2 muestra a la
izquierda HTML normal sin ninguacuten formato antildeadido mientras que a la
derecha puede verse exactamente el mismo HTML con algunos estilos de
CSS aplicados
Cambios de formato
Utilizando declaraciones de es-tilo es muy sencillo cambiar todos los paacuterrafos para que queden a doble espacio
line-height 2em
O hacer que todos los encabe-zamientos de segundo nivel sean verdes
color green
CC-BY-NC-ND bull PID_00150463 16 Introduccioacuten al mundo de los estaacutendares web
Figura 2
HTML normal a la izquierda HTML con CSS aplicado a la derecha
c) Por uacuteltimo el lenguaje JavaScript aporta funciones dinaacutemicas a las paacuteginas
web Se pueden escribir pequentildeos programas en JavaScript que se ejecutaraacuten en el
ordenador cliente y que no requieren que haya ninguacuten software especial instala-
do en el servidor JavaScript permite antildeadir algunas funciones baacutesicas e interacti-
vidad a las paacuteginas web pero tiene sus limitaciones lo que nos lleva a hablar de
lenguajes de programacioacuten del lado del servidor y a paacuteginas web dinaacutemicas
223 Paacuteginas web dinaacutemicas
En ocasiones cuando navegueacuteis por Internet os encontrareacuteis paacuteginas web que
no tienen una extensioacuten html es posible que tengan una extensioacuten php asp
aspx jsp u otras extensiones extrantildeas Todos son ejemplos de tecnologiacuteas
web dinaacutemicas que se pueden utilizar para crear paacuteginas web que tengan sec-
ciones dinaacutemicas coacutedigo que muestra diferentes resultados seguacuten los valores
que reciba por ejemplo de una base de datos de un formulario o de otra fuen-
te de datos Trataremos estos tipos de paacuteginas web en el subapartado ldquoPaacuteginas
web estaacuteticas o dinaacutemicasrdquo a continuacioacuten
224 Formatos que requieren otras aplicaciones o conectores
Como los navegadores web soacutelo estaacuten equipados para interpretar y mostrar de-
terminadas tecnologiacuteas como estaacutendares web si solicitaacuteis un URL que apunta
a un formato de archivo complejo o a una paacutegina web que contiene una tec-
nologiacutea que requiere conectores (plugins) se descargaraacute en vuestro ordenador
o se abriraacute utilizando el conector necesario si el navegador lo tiene instalado
Ejemplos de conectores
Si os encontraacuteis un documento de Word de Excel PDF un fichero comprimido (porejemplo ZIP o SIT) un fichero de imaacutegenes complejas como Photoshop PSD u otrofichero complejo que el navegador no comprende generalmente el navegador os pre-guntaraacute si deseaacuteis descargar o abrir el fichero Ambas acciones normalmente tienen resul-tados similares excepto que la uacuteltima haraacute que el fichero se descargue y a continuacioacutense abra con una aplicacioacuten que lo comprende si estaacute instalada
CC-BY-NC-ND bull PID_00150463 17 Introduccioacuten al mundo de los estaacutendares web
Si os encontraacuteis una paacutegina que contenga una peliacutecula Flash MP3 u otro formato de muacutesicaMPEG u otro formato de viacutedeo el navegador lo reproduciraacute utilizando un conector si hayuno instalado En caso contrario se proporcionaraacute un enlace para instalar el conector nece-sario o el archivo se descargaraacute y buscaraacute una aplicacioacuten de escritorio para ejecutarlo
Naturalmente hay algunas aacutereas grises por ejemplo SVG (scalable vector grap-
hics graacuteficos vectoriales escalables) es un estaacutendar web que se ejecuta de manera
nativa en algunos navegadores como Opera pero no en otros como Internet
Explorer El IE necesita un conector para comprender los SVG Hay una serie de
navegadores que incluyen algunos conectores previamente instalados de modo
que es posible que no seaacuteis conscientes de que el contenido se estaacute visualizando
mediante un conector y de manera no nativa en el navegador
23 Paacuteginas web estaacuteticas o dinaacutemicas
Asiacute pues iquestqueacute son las paacuteginas web estaacuteticas y dinaacutemicas y cuaacutel es la diferencia
entre ambas Como en una caja de bombones todo se basa en el relleno
Otra cosa que cabe tener en cuenta es que se debe instalar un software especial
en el servidor para crear una paacutegina web dinaacutemica Mientras que los ficheros
HTML estaacuteticos normales se guardan con una extensioacuten de fichero html es-
tos ficheros contienen coacutedigo dinaacutemico especial ademaacutes del HTML y se guar-
dan con extensiones de archivo especiales para indicarle al servidor web que
necesitan un procesado adicional antes de enviarlos al cliente (como por
ejemplo que se inserten los datos desde la base de datos) los archivos PHP
por ejemplo generalmente tienen una extensioacuten de archivo php
Hay muchos lenguajes dinaacutemicos que se pueden elegir el PHP que hemos
mencionado antes y otros como Python Ruby on Rails ASPNET y Coldfu-
sion En definitiva todos estos lenguajes tienen maacutes o menos las mismas ca-
pacidades como hablar con bases de datos validar la informacioacuten introducida
en los formularios etc pero hacen las cosas de manera ligeramente diferente
y tienen algunas ventajas e inconvenientes Todo se reduce a la forma maacutes
sencilla que mejor se adapte
Paacutegina web dinaacutemica
Podeacuteis ver un ejemplo de paacutegi-na web dinaacutemica id a Ama-zon con vuestro navegador web y buscad cinco productos diferentes Amazon no os ha enviado cinco paacuteginas diferen-tes os ha enviado la misma paacutegina cinco veces pero con diferente informacioacuten dinaacutemi-ca completada cada vez Esta informacioacuten diferente se guar-da en una base de datos que entrega la informacioacuten corres-pondiente cuando se solicita y la enviacutea al servidor web para in-sertarla en la paacutegina dinaacutemica wwwamazoncom
Una paacutegina web estaacutetica es una paacutegina web donde el contenido el
HTML y los graacuteficos son siempre estaacuteticos ndashse sirve a cualquier visitante
de la misma manera a no ser que la persona que ha creado la web deci-
da cambiar manualmente su copia en el servidorndash exactamente lo que
hemos estado repasando en la mayor parte de este apartado
Por el contrario en una paacutegina web dinaacutemica el contenido del servi-
dor es el mismo pero en vez de ser soacutelo HTML tambieacuten contiene coacutedi-
go dinaacutemico que puede mostrar datos diferentes seguacuten la informacioacuten
que suministre a la paacutegina web
CC-BY-NC-ND bull PID_00150463 18 Introduccioacuten al mundo de los estaacutendares web
Resumen
Hasta aquiacute el recorrido por la sala de maacutequinas de Internet Este apartado real-
mente soacutelo trata de pasada muchos de los temas que incluye pero resulta uacutetil por-
que los pone en perspectiva entre ellos y muestra coacutemo se relacionan y funcionan
entre siacute Todaviacutea queda mucho por aprender sobre la sintaxis real del lenguaje que
conforma el HTML el CSS y JavaScript y esto es lo que haremos a continuacioacuten
el apartado siguiente se centra en el modelo de estaacutendares web HTML CSS y Ja-
vaScript de desarrollo web y da un vistazo al coacutedigo de la paacutegina web
Preguntas de repaso
1 Realizad una breve descripcioacuten de HTML y HTTP y explicad la diferencia en-
tre los dos
2 Explicad la funcioacuten de un navegador web
3 Navegad por Internet durante 5-10 minutos e intentad encontrar algunos
tipos diferentes de contenidos texto normal imaacutegenes HTML paacuteginas dinaacute-
micas como paacuteginas PHP y NET (aspx) PDF documentos de Word peliacuteculas
Flash etc Acceded a algunos de estos contenidos y pensad coacutemo os los mues-
tra el ordenador
4 iquestCuaacutel es la diferencia entre una paacutegina estaacutetica y una paacutegina dinaacutemica
5 Encontrad una lista de coacutedigos de error HTTP enumerad cinco y explicad
queacute significa cada uno de ellos
Lecturas complementarias
En esta asignatura ya no volveremos a hablar de los lenguajes dinaacutemicos pero
hemos creado una lista de recursos en caso de que queraacuteis leeacuteroslos
Rails Fernandez Obie (2007) The Rails Way Addison-Wesley Professional Ruby
Series
Railss screencasts
httpwwwrubyonrailsorgscreencasts
PHP Powers David (2006) PHP Solutions Dynamic web development made easy
friends of ED
Documentacioacuten en liacutenea de PHP
httpwwwphpnetdocsphp
ASPNET Lorenz Patrick (2003) ASPNET 20 Revealed Apress
ASPNET documentacioacuten y guiacuteas en liacutenea de ASPNET
httpaspnet
CC-BY-NC-ND bull PID_00150463 19 Introduccioacuten al mundo de los estaacutendares web
3 El modelo de estaacutendares web HTML CSS y JavaScriptJonathan Lane
En el uacuteltimo apartado hemos visto brevemente las herramientas de construc-
cioacuten baacutesicas de la web HTML (o XHTML) CSS y JavaScript Ahora es el mo-
mento de ampliar un poco maacutes y observarlos individualmente queacute hacen y
coacutemo interaccionan entre ellos para crear una paacutegina web
31 iquestPor queacute separar
Eacutesta es generalmente la primera pregunta que se formula sobre los estaacutendares
web Se puede crear el contenido el estilo y el formato soacutelo utilizando HTML
elementos de tipo de letra para el estilo y tablas HTML para el formato de ma-
nera que iquestpor queacute preocuparse de este asunto de XHTMLCSS El uso de ta-
blas para el formato etc es como se soliacutea hacer en los malos tiempos del
disentildeo web y mucha gente todaviacutea lo hace de esta manera (aunque no se de-
beriacutea de hacer) y de hecho es uno de los motivos por los que hemos creado
esta asignatura Aquiacute no trataremos estos meacutetodos Eacutestas son las razones maacutes
importantes para utilizar CSS y HTML en vez de meacutetodos obsoletos
1) Eficiencia del coacutedigo cuanto mayores sean los archivos maacutes tardaraacuten en
descargarse y maacutes dinero le costaraacute a algunas personas (algunas personas toda-
viacutea pagan por megabyte descargado) Por lo tanto no se debe malgastar el an-
cho de banda con paacuteginas grandes abarrotadas de informacioacuten de estilo y de
formato en cada archivo HTML Una alternativa mucho mejor es que los ar-
chivos HTML esteacuten desglosados y limpios e incluir la informacioacuten de estilo y
de formato soacutelo una vez en un archivo CSS independiente o en varios
2) Facilidad de mantenimiento en relacioacuten con el uacuteltimo punto si la infor-
macioacuten de estilo y formato soacutelo se especifica en un sitio quiere decir que soacutelo
habraacute que hacer actualizaciones en un lugar si se quiere cambiar el aspecto de
la paacutegina web iquestPrefeririacuteais tener que actualizar esta informacioacuten en cada paacute-
gina de vuestra web No lo creo
3) Accesibilidad los usuarios de la web con problemas visuales pueden
utilizar una tipo de software conocido como ldquolector de pantallardquo para ac-
ceder a la informacioacuten mediante el sonido en vez de la vista literalmente
les lee la paacutegina Ademaacutes el software de introduccioacuten de datos mediante la
voz que utilizan las personas con problemas de movilidad tambieacuten se be-
neficia de las paacuteginas web con una semaacutentica bien construida De manera
muy parecida al lector de pantalla que utiliza las instrucciones del teclado
para navegar por los encabezamientos enlaces y formularios un usuario
Eficiencia del coacutedigo
Para ver un caso real de este hecho en accioacuten podeacuteis ver el artiacuteculo sobre la reescritura de Slashdot en A List Apart don-de el autor tomoacute una paacutegina web muy popular y la reescri-bioacute en XHTMLCSS httpwwwalistapartcomarticlesslashdot
CC-BY-NC-ND bull PID_00150463 20 Introduccioacuten al mundo de los estaacutendares web
que interaccione mediante voz utilizaraacute instrucciones con su voz Los do-
cumentos web marcados semaacutenticamente en vez de presentacionalmente
pueden resultar maacutes faacuteciles de navegar y la informacioacuten que contienen es
maacutes faacutecil de encontrar por parte del usuario En otras palabras cuanto maacutes
raacutepidamente ldquoentre en materiardquo (el contenido) mejor Los lectores de pan-
talla no pueden acceder al texto dentro de imaacutegenes y encuentran confusos
algunos usos de JavaScript Aseguraos de que el contenido maacutes importante
estaacute disponible para todo el mundo
4) Compatibilidad de dispositivos ya que vuestra paacutegina XHTML es simple-
mente etiquetado normal sin informacioacuten de estilo se puede reformatear
para diferentes dispositivos con atributos ampliamente variados (por ejemplo
el tamantildeo de pantalla) simplemente aplicando una hoja de estilos alternativa
podeacuteis hacerlo de varias maneras Podeacuteis ver los artiacuteculos de devoperacom
para obtener recursos al respecto CSS tambieacuten permite especificar hojas de es-
tilo diferentes a nivel nativo para distintos meacutetodos de presentacioacuten o tipos de
soporte (por ejemplo visualizacioacuten en pantalla impresioacuten visualizacioacuten en
un dispositivo moacutevil etc)
5) Motores de buacutesqueda en la web probablemente os interesaraacute que vues-
tras paacuteginas web sean faacuteciles de encontrar al buscar en Google o en otros mo-
tores de busca Un motor de buacutesqueda utiliza un crawler o arantildea web que es
una pieza de software especializada para leer vuestras paacuteginas Si esta arantildea tu-
viera problemas para encontrar el contenido de vuestras paacuteginas o interpretara
mal lo que es importante porque no habeacuteis definido los encabezamientos
como encabezamientos etc entonces seguro que vuestra posicioacuten en los re-
sultados de busca se veraacute afectada
6) Es simplemente una buena praacutectica se trata de un motivo un poco del
tipo ldquoporque lo digo yordquo pero hablad con cualquier desarrollador o disentildeador
web profesional consciente de los estaacutendares y seguro que os dice que separar
el contenido el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacioacuten
32 Etiquetado la base de cada paacutegina
httpdevoperacomarticlesmobile
HTML y XHTML son lenguajes de etiquetado formados por elemen-
tos que contienen atributos (algunos opcionales y otros obligatori-
os) Estos elementos se utilizan para etiquetar los diferentes tipos de
contenidos en los documentos especificando que cada trozo de con-
tenido se debe entregar supuestamente como en los navegadores web
(por ejemplo encabezamientos paacuterrafos tablas listas con vintildeetas
etc)
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 9 Introduccioacuten al mundo de los estaacutendares web
valioso porque casi todos los usuarios de la web desconocen y probablemente
no les importa quieacuten es el W3C En consecuencia las guerras de los navega-
dores continuaron sin trabas
132 El proyecto de estaacutendares web
En 1998 el mercado de los navegadores estaba dominado por Internet Explo-
rer 4 y Netscape Navigator 4 Se habiacutea lanzado una versioacuten beta de Internet
Explorer 5 que implementaba un nuevo HTML dinaacutemico de marca registrada
Ello significaba que los desarrolladores web profesionales debiacutean conocer cin-
co maneras diferentes de escribir JavaScript
En consecuencia un grupo de desarrolladores y disentildeadores web se asociaron
entre ellos Este grupo se denominaba WaSP (Web Standards Project Proyecto
de estaacutendares web) La idea era que si los documentos del W3C se llamaban
estaacutendares en vez de recomendaciones podriacutean convencer a Microsoft y Netsca-
pe de que les dieran su apoyo
El antiguo meacutetodo de realizar un llamamiento a la accioacuten se llevoacute a cabo me-
diante una teacutecnica publicitaria tradicional denominada barricada donde una
empresa lanza un anuncio en todos los canales de emisioacuten al mismo tiempo
de manera que aunque el espectador cambie de canal obtendraacute exactamente
el mismo mensaje WaSP publicoacute un artiacuteculo simultaacuteneamente en varias paacutegi-
nas centradas en el desarrollo web como buildercom Wired online y algunas
listas de correo muy populares
Otra teacutecnica que utilizaron fue ridiculizar a las empresas que se uniacutean al W3C
(y a otros organismos de estaacutendares) pero que despueacutes se centraban maacutes en
crear nuevas funciones que en hacer que los conceptos baacutesicos para los que se
habiacutean comprometido fueran correctos para empezar
Todo esto suena un poco negativo pero los de WaSP no se conformaban con
criticar a la gente tambieacuten la ayudaban Siete miembros formaron CSS Samu-
rai que identificoacute los diez problemas principales de compatibilidad CSS en
Opera e Internet Explorer (Opera resolvioacute sus problemas y Microsoft no)
133 El auge de los estaacutendares web
En el 2000 Microsoft lanzoacute Internet Explorer 5 Macintosh Edition Fue un
hito muy importante ya que se trataba del navegador que se instalaba enton-
ces de manera predeterminada con el Mac OS y tambieacuten teniacutea un nivel decen-
te de compatibilidad con las recomendaciones del W3C Junto con el nivel
decente de compatibilidad con CSS y HTML Opera contribuyoacute a un movi-
miento positivo general con el que los desarrolladores y disentildeadores web se
CC-BY-NC-ND bull PID_00150463 10 Introduccioacuten al mundo de los estaacutendares web
sentiacutean coacutemodos disentildeando paacuteginas mediante estaacutendares web por primera
vez
WaSP persuadioacute a Netscape de retrasar el lanzamiento de la versioacuten 50 de
Netscape Navigator hasta que fuera mucho maacutes compatible (este trabajo for-
moacute la base de lo que ahora es Firefox un navegador muy popular) WaSP tam-
bieacuten creoacute un grupo de trabajo para Dreamweaver con el fin de animar a
Macromedia a cambiar su popular herramienta de autoriacutea web y dar soporte a
la creacioacuten de paacuteginas web compatibles
La popular paacutegina de desarrollo web A List Apart se redisentildeoacute a principios del 2001 y enun artiacuteculo que explicaba coacutemo y por queacute declaraba
ldquoEn seis meses un antildeo o dos antildeos como mucho todas las paacuteginas se disentildearaacuten con estosestaacutendares [] Podemos contemplar coacutemo nuestras capacidades se quedan obsoletas opodemos empezar a aprender ahora teacutecnicas basadas en estaacutendaresrdquo
Esto era un poco optimista no todas las paacuteginas ni siquiera en el antildeo 2009
estaacuten hechas con estaacutendares web Pero muchos les hicieron caso Los navega-
dores antiguos redujeron su cuota de mercado y dos paacuteginas web maacutes de perfil
muy alto se redisentildearon utilizando estaacutendares web la revista Wired en el 2002
y ESPN en el 2003 se convirtieron en liacutederes del sector en el soporte a los es-
taacutendares web y las nuevas teacutecnicas
Tambieacuten en el 2003 Dave Shea creoacute una paacutegina web denominada CSS Zen
Garden Debiacutea tener maacutes impacto sobre los profesionales web que cual-
quier otra cosa e ilustraba verdaderamente que todo el disentildeo podiacutea cam-
biar soacutelo modificando el estilo de la paacutegina el contenido podiacutea seguir
siendo ideacutentico
Desde entonces en la comunidad de desarrollo web profesional los estaacutenda-
res web se han convertido en un elemento de rigor En esta serie os daremos
unos excelentes fundamentos en estas teacutecnicas para que podaacuteis crear paacuteginas
web tan limpias semaacutenticas accesibles y conformes con los estaacutendares como
las de las grandes empresas
Resumen
En este apartado hemos hablado de coacutemo se creoacute la Internet moderna como
resultado de la carrera espacial de coacutemo Tim Berners-Lee definioacute el hipertexto
para una generacioacuten y de coacutemo los intereses comerciales de dos compantildeiacuteas
provocaron una de las reacciones maacutes notables de los desarrolladores como
nunca se habiacutea visto El teacutermino estaacutendares web se utiliza ahora maacutes amplia-
mente entre los profesionales web que cualquier otro teacutermino aplicado por el
W3C (de hecho el W3C ha empezado a utilizar el teacutermino en sus propias paacute-
ginas) de manera que por este motivo os ensentildearemos el modo de construir
paacuteginas web siguiendo los estaacutendares
CC-BY-NC-ND bull PID_00150463 11 Introduccioacuten al mundo de los estaacutendares web
Preguntas de repaso
Podriacuteais intentar investigar maacutes respondiendo estas preguntas
1 iquestQueacute navegadores estaacuten disponibles actualmente en Internet para los usu-
arios de Windows Mac OS X y Linux
2 iquestQueacute porcentaje de usuarios de la web utiliza cada navegador
3 iquestQueacute navegadores utilizan los dispositivos moacuteviles para acceder a las paacutegi-
nas web
4 iquestCuaacutentos estaacutendares web ha publicado el W3C y cuaacuteles son ampliamente
seguidos por los fabricantes de navegadores actualmente
Lecturas complementarias
Si quereacuteis saber maacutes es posible que queraacuteis visitar algunas de las paacuteginas sigui-
entes
The history of the Internet (wikipedia)
httpenwikipediaorgwikiHistory_of_the_Internet
The history of the World Wide Web (wikipedia)
httpenwikipediaorgwikiHistory_of_the_World_Wide_Web
The history of the W3C
httpwwww3orgConsortiumhistory
El Web Standards Project y su historia
httpwebstandardsorg
httpwwwwebstandardsorgabouthistory
A List Apart
httpwwwalistapartcom
CSS Zen Garden
httpwwwcsszengardencom
CC-BY-NC-ND bull PID_00150463 12 Introduccioacuten al mundo de los estaacutendares web
2 iquestCoacutemo funciona InternetJonathan Lane
Muy de vez en cuando es posible conseguir ver los engranajes y las correas que
actuacutean entre bastidores Hoy es vuestro diacutea de suerte Os llevareacute a dar una vuel-
ta tras los telares de una de las tecnologiacuteas maacutes interesantes que posiblemen-
te ya conoceacuteis bien la web
Este apartado trata sobre la tecnologiacutea subyacente que hace funcionar la web
bull Lenguaje de etiquetado de hipertexto (HTML)
bull Protocolo de transferencia de hipertexto (HTTP)
bull Sistema de nombres de dominio (DNS)
bull Servidores web y navegadores web
bull Contenido estaacutetico y dinaacutemico
Son materias bastante baacutesicas y aunque la mayor parte de lo que aquiacute se ex-
plica no os ayudaraacute a construir una paacutegina web mejor siacute que os proporcionaraacute
el lenguaje adecuado para hablar con clientes y otras personas sobre Internet
Es como lo que una institutriz muy inteligente dijo una vez en Sonrisas y
laacutegrimas ldquoCuando leemos empezamos por ABC Cuando cantamos empeza-
mos por Do Re Mirdquo En este apartado describiremos brevemente coacutemo los or-
denadores se comunican realmente utilizando HTTP y TCPIP y despueacutes nos
fijaremos en los diferentes lenguajes que se combinan para crear las paacuteginas
web que conforman Internet
21 iquestCoacutemo se comunican los ordenadores a traveacutes de Internet
Por suerte hemos mantenido las cosas simples para los ordenadores Cuando
se trata de la web la mayoriacutea de las paacuteginas estaacuten escritas utilizando el mismo
lenguaje el HTML que pasa de un sitio a otro utilizando un protocolo comuacuten
HTTP (hypertext transfer protocol o protocolo de transferencia de hipertexto) El
HTTP es el dialecto (especificacioacuten) comuacuten de Internet que permite por ejem-
plo que un equipo con Windows cante en armoniacutea con un ordenador que eje-
cute la versioacuten maacutes reciente y maacutes fantaacutestica de Linux (iexclDo Re Mi) Mediante
el uso de un navegador web ndashun software especial que interpreta el HTTP y en-
trega el HTML en una manera legible para los humanosndash las paacuteginas web crea-
das con HTML y con cualquier tipo de ordenador se pueden leer en cualquier
medio incluyendo teleacutefonos PDA e incluso en los sistemas de videojuegos
maacutes populares
Aunque hablen el mismo lenguaje los diferentes dispositivos que acceden
a la web han de tener algunas normas establecidas para poder hablar entre
CC-BY-NC-ND bull PID_00150463 13 Introduccioacuten al mundo de los estaacutendares web
ellos es como aprender a alzar la mano para preguntar en clase El HTTP
establece estas normas baacutesicas para Internet Gracias al HTTP un equipo
cliente (como vuestro ordenador) sabe que debe ser eacutel quien inicie una pe-
ticioacuten de una paacutegina web desde un servidor Un servidor es un ordenador
donde residen las paacuteginas web cuando escribiacutes una direccioacuten web en vues-
tro navegador un servidor recibe la peticioacuten encuentra la paacutegina web que
deseaacuteis y la enviacutea a vuestro ordenador para que se vea en vuestro navega-
dor
211 Diseccioacuten de un ciclo de solicitud-respuesta
Ahora que hemos visto todas las partes que permiten a los ordenadores comu-
nicarse a traveacutes de Internet trataremos con maacutes detalle el ciclo de solicitud-
respuesta de HTTP A continuacioacuten se presentan una serie de pasos numera-
dos para que podaacuteis trabajar siguieacutendolos y asiacute os podremos demostrar algu-
nos conceptos de manera maacutes eficaz
1) Todas las solicitudes-respuestas empiezan cuando se escribe un URL
(universal resource locator localizador universal de recursos) en la barra de di-
recciones del navegador web como httpdevoperacom Abrid un navega-
dor para hacerlo ahora mismo
Algo que quizaacute no sabeacuteis es que los navegadores realmente no utilizan los URL
para solicitar paacuteginas web en los servidores utilizan el Protocolo de Internet
o direcciones IP (que son casi como nuacutemeros de teleacutefono o direcciones pos-
tales que identifican los servidores) Por ejemplo la direccioacuten IP de http
devoperacom es 21323620898
2) Abrid una nueva pestantildea o ventana del navegador escribid http
wwwapplecom y pulsad intro a continuacioacuten escribid http1714916010
y pulsad intro llegareacuteis al mismo sitio Escribid http21323620898 en la ba-
rra de direcciones y pulsad intro ireacuteis a parar al mismo sitio que en el paso 1
pero obtendreacuteis un error 403 ldquoAcceso Denegadordquo esto es porque no teneacuteis per-
miso para acceder a la raiacutez real de este servidor
httpwwwapplecom actuacutea baacutesicamente como un alias para http
1714916010 pero iquestpor queacute iquestY coacutemo Ello se debe a que a las personas les
resulta maacutes faacutecil recordar palabras que largas cadenas de nuacutemeros El sistema
que realiza este trabajo se denomina Domain name system (DNS) o Sistema de
nombres de dominio que es esencialmente un directorio automaacutetico comple-
to de todos los ordenadores conectados a Internet Cuando escribiacutes http
devoperacom en la barra de direcciones y apretaacuteis intro esta direccioacuten se en-
viacutea a un servidor de nombres que intenta asociarla a vuestra direccioacuten IP Hay
muchos ordenadores conectados a Internet y no todos los servidores DNS tie-
CC-BY-NC-ND bull PID_00150463 14 Introduccioacuten al mundo de los estaacutendares web
nen un listado de cada ordenador que hay conectado de manera que hay un
sistema creado donde se puede dirigir la solicitud al servidor correcto para
atenderla
Asiacute pues el sistema DNS busca la paacutegina web wwwoperacom averigua que se
encuentra en 1714916010 y devuelve la direccioacuten IP al navegador
El ordenador enviacutea una solicitud al ordenador de la direccioacuten IP especificada
y espera obtener una respuesta Si todo va bien el ordenador del servidor en-
viacutea un breve mensaje de retorno al cliente que dice que todo es correcto (po-
deacuteis ver la figura 1) seguido de la propia paacutegina web Este tipo de mensaje estaacute
incluido en un encabezamiento HTTP
Figura 1
En este caso todo es correcto y el servidor devuelve la paacutegina web correcta
Si algo va mal por ejemplo si se escribe incorrectamente el URL en su lugar
se obtendraacute un error HTTP el famoso error 404 ldquono se encuentra la paacuteginardquo
es el ejemplo maacutes comuacuten que se puede encontrar
3) Escribid httpdevoperacomjoniscoolhtml la paacutegina no existe o sea
que obtendreacuteis un error 404 Probadlo con algunas paacuteginas en diferentes paacute-
ginas web que no existan y os devolveraacuten paacuteginas diferentes Esto se debe al
hecho de que algunos desarrolladores web han dejado que el servidor web soacutelo
emita la paacutegina de error predeterminada y otros han codificado paacuteginas de
error personalizadas para que aparezcan cuando se devuelve una paacutegina no
existente Se trata de una teacutecnica avanzada que no trataremos en esta asigna-
tura pero que afortunadamente se veraacute pronto en un artiacuteculo aparte en
devoperacom
Por uacuteltimo una nota sobre los URL generalmente el primer URL al que se ac-
cede en una paacutegina web no tiene un nombre de archivo real al final (por ejem-
plo httpwwwmysitecom) y a continuacioacuten las paacuteginas subsiguientes a
veces tienen y a veces no Siempre se accede a archivos reales pero en ocasio-
nes el desarrollador web ha configurado el servidor web para que no muestre
CC-BY-NC-ND bull PID_00150463 15 Introduccioacuten al mundo de los estaacutendares web
los nombres de archivo en el URL esto a menudo permite conseguir URL maacutes
limpios y faacuteciles de recordar que conducen a una mejor experiencia para el
usuario de vuestra paacutegina web
22 Tipos de contenido
Ahora que ya os hemos ensentildeado una solicitud-respuesta HTTP queremos
que os fijeacuteis en los diferentes tipos de contenido que pueden encontrarse
en Internet Los hemos agrupado en 4 tipos texto normal estaacutendares web
paacuteginas web dinaacutemicas y formatos que requieren otras aplicaciones o co-
nectores
221 Texto normal
Durante los primeros diacuteas de Internet antes de que apareciera cualquier estaacuten-
dar web o conector Internet era principalmente imaacutegenes y texto normal ar-
chivos con una extensioacuten txt o similar Cuando se encuentra un texto normal
en Internet el navegador lo muestra tal como es sin ninguacuten tipo de proceso
Todaviacutea pueden encontrarse ficheros de texto normal en paacuteginas web univer-
sitarias
222 Estaacutendares web
Las herramientas de construccioacuten baacutesicas de la web son los tres principales es-
taacutendares web HTML (o XHTML aquiacute utilizaremos ambos indistintamente
para nuestras finalidades) CSS y JavaScript
a) Lenguaje de marcado de hipertexto (HTML) es un nombre realmente
bueno con respecto a la definicioacuten de su objetivo El HTML se utiliza para di-
vidir un documento especificar sus contenidos y su estructura y definir el sig-
nificado de cada parte (es lo que incluye todo el texto etc que se ve en las
paacuteginas web) Utiliza elementos para identificar los diferentes componentes
de una paacutegina
b) Las hojas de estilo en cascada (CSS) dan un control total sobre coacutemo se
visualiza un elemento
Existen muchas ventajas para separar la estructura del formato y lo vere-
mos con maacutes detalle en el siguiente apartado Para demostrar la potencia
de HTML y CSS utilizados de manera combinada la figura 2 muestra a la
izquierda HTML normal sin ninguacuten formato antildeadido mientras que a la
derecha puede verse exactamente el mismo HTML con algunos estilos de
CSS aplicados
Cambios de formato
Utilizando declaraciones de es-tilo es muy sencillo cambiar todos los paacuterrafos para que queden a doble espacio
line-height 2em
O hacer que todos los encabe-zamientos de segundo nivel sean verdes
color green
CC-BY-NC-ND bull PID_00150463 16 Introduccioacuten al mundo de los estaacutendares web
Figura 2
HTML normal a la izquierda HTML con CSS aplicado a la derecha
c) Por uacuteltimo el lenguaje JavaScript aporta funciones dinaacutemicas a las paacuteginas
web Se pueden escribir pequentildeos programas en JavaScript que se ejecutaraacuten en el
ordenador cliente y que no requieren que haya ninguacuten software especial instala-
do en el servidor JavaScript permite antildeadir algunas funciones baacutesicas e interacti-
vidad a las paacuteginas web pero tiene sus limitaciones lo que nos lleva a hablar de
lenguajes de programacioacuten del lado del servidor y a paacuteginas web dinaacutemicas
223 Paacuteginas web dinaacutemicas
En ocasiones cuando navegueacuteis por Internet os encontrareacuteis paacuteginas web que
no tienen una extensioacuten html es posible que tengan una extensioacuten php asp
aspx jsp u otras extensiones extrantildeas Todos son ejemplos de tecnologiacuteas
web dinaacutemicas que se pueden utilizar para crear paacuteginas web que tengan sec-
ciones dinaacutemicas coacutedigo que muestra diferentes resultados seguacuten los valores
que reciba por ejemplo de una base de datos de un formulario o de otra fuen-
te de datos Trataremos estos tipos de paacuteginas web en el subapartado ldquoPaacuteginas
web estaacuteticas o dinaacutemicasrdquo a continuacioacuten
224 Formatos que requieren otras aplicaciones o conectores
Como los navegadores web soacutelo estaacuten equipados para interpretar y mostrar de-
terminadas tecnologiacuteas como estaacutendares web si solicitaacuteis un URL que apunta
a un formato de archivo complejo o a una paacutegina web que contiene una tec-
nologiacutea que requiere conectores (plugins) se descargaraacute en vuestro ordenador
o se abriraacute utilizando el conector necesario si el navegador lo tiene instalado
Ejemplos de conectores
Si os encontraacuteis un documento de Word de Excel PDF un fichero comprimido (porejemplo ZIP o SIT) un fichero de imaacutegenes complejas como Photoshop PSD u otrofichero complejo que el navegador no comprende generalmente el navegador os pre-guntaraacute si deseaacuteis descargar o abrir el fichero Ambas acciones normalmente tienen resul-tados similares excepto que la uacuteltima haraacute que el fichero se descargue y a continuacioacutense abra con una aplicacioacuten que lo comprende si estaacute instalada
CC-BY-NC-ND bull PID_00150463 17 Introduccioacuten al mundo de los estaacutendares web
Si os encontraacuteis una paacutegina que contenga una peliacutecula Flash MP3 u otro formato de muacutesicaMPEG u otro formato de viacutedeo el navegador lo reproduciraacute utilizando un conector si hayuno instalado En caso contrario se proporcionaraacute un enlace para instalar el conector nece-sario o el archivo se descargaraacute y buscaraacute una aplicacioacuten de escritorio para ejecutarlo
Naturalmente hay algunas aacutereas grises por ejemplo SVG (scalable vector grap-
hics graacuteficos vectoriales escalables) es un estaacutendar web que se ejecuta de manera
nativa en algunos navegadores como Opera pero no en otros como Internet
Explorer El IE necesita un conector para comprender los SVG Hay una serie de
navegadores que incluyen algunos conectores previamente instalados de modo
que es posible que no seaacuteis conscientes de que el contenido se estaacute visualizando
mediante un conector y de manera no nativa en el navegador
23 Paacuteginas web estaacuteticas o dinaacutemicas
Asiacute pues iquestqueacute son las paacuteginas web estaacuteticas y dinaacutemicas y cuaacutel es la diferencia
entre ambas Como en una caja de bombones todo se basa en el relleno
Otra cosa que cabe tener en cuenta es que se debe instalar un software especial
en el servidor para crear una paacutegina web dinaacutemica Mientras que los ficheros
HTML estaacuteticos normales se guardan con una extensioacuten de fichero html es-
tos ficheros contienen coacutedigo dinaacutemico especial ademaacutes del HTML y se guar-
dan con extensiones de archivo especiales para indicarle al servidor web que
necesitan un procesado adicional antes de enviarlos al cliente (como por
ejemplo que se inserten los datos desde la base de datos) los archivos PHP
por ejemplo generalmente tienen una extensioacuten de archivo php
Hay muchos lenguajes dinaacutemicos que se pueden elegir el PHP que hemos
mencionado antes y otros como Python Ruby on Rails ASPNET y Coldfu-
sion En definitiva todos estos lenguajes tienen maacutes o menos las mismas ca-
pacidades como hablar con bases de datos validar la informacioacuten introducida
en los formularios etc pero hacen las cosas de manera ligeramente diferente
y tienen algunas ventajas e inconvenientes Todo se reduce a la forma maacutes
sencilla que mejor se adapte
Paacutegina web dinaacutemica
Podeacuteis ver un ejemplo de paacutegi-na web dinaacutemica id a Ama-zon con vuestro navegador web y buscad cinco productos diferentes Amazon no os ha enviado cinco paacuteginas diferen-tes os ha enviado la misma paacutegina cinco veces pero con diferente informacioacuten dinaacutemi-ca completada cada vez Esta informacioacuten diferente se guar-da en una base de datos que entrega la informacioacuten corres-pondiente cuando se solicita y la enviacutea al servidor web para in-sertarla en la paacutegina dinaacutemica wwwamazoncom
Una paacutegina web estaacutetica es una paacutegina web donde el contenido el
HTML y los graacuteficos son siempre estaacuteticos ndashse sirve a cualquier visitante
de la misma manera a no ser que la persona que ha creado la web deci-
da cambiar manualmente su copia en el servidorndash exactamente lo que
hemos estado repasando en la mayor parte de este apartado
Por el contrario en una paacutegina web dinaacutemica el contenido del servi-
dor es el mismo pero en vez de ser soacutelo HTML tambieacuten contiene coacutedi-
go dinaacutemico que puede mostrar datos diferentes seguacuten la informacioacuten
que suministre a la paacutegina web
CC-BY-NC-ND bull PID_00150463 18 Introduccioacuten al mundo de los estaacutendares web
Resumen
Hasta aquiacute el recorrido por la sala de maacutequinas de Internet Este apartado real-
mente soacutelo trata de pasada muchos de los temas que incluye pero resulta uacutetil por-
que los pone en perspectiva entre ellos y muestra coacutemo se relacionan y funcionan
entre siacute Todaviacutea queda mucho por aprender sobre la sintaxis real del lenguaje que
conforma el HTML el CSS y JavaScript y esto es lo que haremos a continuacioacuten
el apartado siguiente se centra en el modelo de estaacutendares web HTML CSS y Ja-
vaScript de desarrollo web y da un vistazo al coacutedigo de la paacutegina web
Preguntas de repaso
1 Realizad una breve descripcioacuten de HTML y HTTP y explicad la diferencia en-
tre los dos
2 Explicad la funcioacuten de un navegador web
3 Navegad por Internet durante 5-10 minutos e intentad encontrar algunos
tipos diferentes de contenidos texto normal imaacutegenes HTML paacuteginas dinaacute-
micas como paacuteginas PHP y NET (aspx) PDF documentos de Word peliacuteculas
Flash etc Acceded a algunos de estos contenidos y pensad coacutemo os los mues-
tra el ordenador
4 iquestCuaacutel es la diferencia entre una paacutegina estaacutetica y una paacutegina dinaacutemica
5 Encontrad una lista de coacutedigos de error HTTP enumerad cinco y explicad
queacute significa cada uno de ellos
Lecturas complementarias
En esta asignatura ya no volveremos a hablar de los lenguajes dinaacutemicos pero
hemos creado una lista de recursos en caso de que queraacuteis leeacuteroslos
Rails Fernandez Obie (2007) The Rails Way Addison-Wesley Professional Ruby
Series
Railss screencasts
httpwwwrubyonrailsorgscreencasts
PHP Powers David (2006) PHP Solutions Dynamic web development made easy
friends of ED
Documentacioacuten en liacutenea de PHP
httpwwwphpnetdocsphp
ASPNET Lorenz Patrick (2003) ASPNET 20 Revealed Apress
ASPNET documentacioacuten y guiacuteas en liacutenea de ASPNET
httpaspnet
CC-BY-NC-ND bull PID_00150463 19 Introduccioacuten al mundo de los estaacutendares web
3 El modelo de estaacutendares web HTML CSS y JavaScriptJonathan Lane
En el uacuteltimo apartado hemos visto brevemente las herramientas de construc-
cioacuten baacutesicas de la web HTML (o XHTML) CSS y JavaScript Ahora es el mo-
mento de ampliar un poco maacutes y observarlos individualmente queacute hacen y
coacutemo interaccionan entre ellos para crear una paacutegina web
31 iquestPor queacute separar
Eacutesta es generalmente la primera pregunta que se formula sobre los estaacutendares
web Se puede crear el contenido el estilo y el formato soacutelo utilizando HTML
elementos de tipo de letra para el estilo y tablas HTML para el formato de ma-
nera que iquestpor queacute preocuparse de este asunto de XHTMLCSS El uso de ta-
blas para el formato etc es como se soliacutea hacer en los malos tiempos del
disentildeo web y mucha gente todaviacutea lo hace de esta manera (aunque no se de-
beriacutea de hacer) y de hecho es uno de los motivos por los que hemos creado
esta asignatura Aquiacute no trataremos estos meacutetodos Eacutestas son las razones maacutes
importantes para utilizar CSS y HTML en vez de meacutetodos obsoletos
1) Eficiencia del coacutedigo cuanto mayores sean los archivos maacutes tardaraacuten en
descargarse y maacutes dinero le costaraacute a algunas personas (algunas personas toda-
viacutea pagan por megabyte descargado) Por lo tanto no se debe malgastar el an-
cho de banda con paacuteginas grandes abarrotadas de informacioacuten de estilo y de
formato en cada archivo HTML Una alternativa mucho mejor es que los ar-
chivos HTML esteacuten desglosados y limpios e incluir la informacioacuten de estilo y
de formato soacutelo una vez en un archivo CSS independiente o en varios
2) Facilidad de mantenimiento en relacioacuten con el uacuteltimo punto si la infor-
macioacuten de estilo y formato soacutelo se especifica en un sitio quiere decir que soacutelo
habraacute que hacer actualizaciones en un lugar si se quiere cambiar el aspecto de
la paacutegina web iquestPrefeririacuteais tener que actualizar esta informacioacuten en cada paacute-
gina de vuestra web No lo creo
3) Accesibilidad los usuarios de la web con problemas visuales pueden
utilizar una tipo de software conocido como ldquolector de pantallardquo para ac-
ceder a la informacioacuten mediante el sonido en vez de la vista literalmente
les lee la paacutegina Ademaacutes el software de introduccioacuten de datos mediante la
voz que utilizan las personas con problemas de movilidad tambieacuten se be-
neficia de las paacuteginas web con una semaacutentica bien construida De manera
muy parecida al lector de pantalla que utiliza las instrucciones del teclado
para navegar por los encabezamientos enlaces y formularios un usuario
Eficiencia del coacutedigo
Para ver un caso real de este hecho en accioacuten podeacuteis ver el artiacuteculo sobre la reescritura de Slashdot en A List Apart don-de el autor tomoacute una paacutegina web muy popular y la reescri-bioacute en XHTMLCSS httpwwwalistapartcomarticlesslashdot
CC-BY-NC-ND bull PID_00150463 20 Introduccioacuten al mundo de los estaacutendares web
que interaccione mediante voz utilizaraacute instrucciones con su voz Los do-
cumentos web marcados semaacutenticamente en vez de presentacionalmente
pueden resultar maacutes faacuteciles de navegar y la informacioacuten que contienen es
maacutes faacutecil de encontrar por parte del usuario En otras palabras cuanto maacutes
raacutepidamente ldquoentre en materiardquo (el contenido) mejor Los lectores de pan-
talla no pueden acceder al texto dentro de imaacutegenes y encuentran confusos
algunos usos de JavaScript Aseguraos de que el contenido maacutes importante
estaacute disponible para todo el mundo
4) Compatibilidad de dispositivos ya que vuestra paacutegina XHTML es simple-
mente etiquetado normal sin informacioacuten de estilo se puede reformatear
para diferentes dispositivos con atributos ampliamente variados (por ejemplo
el tamantildeo de pantalla) simplemente aplicando una hoja de estilos alternativa
podeacuteis hacerlo de varias maneras Podeacuteis ver los artiacuteculos de devoperacom
para obtener recursos al respecto CSS tambieacuten permite especificar hojas de es-
tilo diferentes a nivel nativo para distintos meacutetodos de presentacioacuten o tipos de
soporte (por ejemplo visualizacioacuten en pantalla impresioacuten visualizacioacuten en
un dispositivo moacutevil etc)
5) Motores de buacutesqueda en la web probablemente os interesaraacute que vues-
tras paacuteginas web sean faacuteciles de encontrar al buscar en Google o en otros mo-
tores de busca Un motor de buacutesqueda utiliza un crawler o arantildea web que es
una pieza de software especializada para leer vuestras paacuteginas Si esta arantildea tu-
viera problemas para encontrar el contenido de vuestras paacuteginas o interpretara
mal lo que es importante porque no habeacuteis definido los encabezamientos
como encabezamientos etc entonces seguro que vuestra posicioacuten en los re-
sultados de busca se veraacute afectada
6) Es simplemente una buena praacutectica se trata de un motivo un poco del
tipo ldquoporque lo digo yordquo pero hablad con cualquier desarrollador o disentildeador
web profesional consciente de los estaacutendares y seguro que os dice que separar
el contenido el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacioacuten
32 Etiquetado la base de cada paacutegina
httpdevoperacomarticlesmobile
HTML y XHTML son lenguajes de etiquetado formados por elemen-
tos que contienen atributos (algunos opcionales y otros obligatori-
os) Estos elementos se utilizan para etiquetar los diferentes tipos de
contenidos en los documentos especificando que cada trozo de con-
tenido se debe entregar supuestamente como en los navegadores web
(por ejemplo encabezamientos paacuterrafos tablas listas con vintildeetas
etc)
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 10 Introduccioacuten al mundo de los estaacutendares web
sentiacutean coacutemodos disentildeando paacuteginas mediante estaacutendares web por primera
vez
WaSP persuadioacute a Netscape de retrasar el lanzamiento de la versioacuten 50 de
Netscape Navigator hasta que fuera mucho maacutes compatible (este trabajo for-
moacute la base de lo que ahora es Firefox un navegador muy popular) WaSP tam-
bieacuten creoacute un grupo de trabajo para Dreamweaver con el fin de animar a
Macromedia a cambiar su popular herramienta de autoriacutea web y dar soporte a
la creacioacuten de paacuteginas web compatibles
La popular paacutegina de desarrollo web A List Apart se redisentildeoacute a principios del 2001 y enun artiacuteculo que explicaba coacutemo y por queacute declaraba
ldquoEn seis meses un antildeo o dos antildeos como mucho todas las paacuteginas se disentildearaacuten con estosestaacutendares [] Podemos contemplar coacutemo nuestras capacidades se quedan obsoletas opodemos empezar a aprender ahora teacutecnicas basadas en estaacutendaresrdquo
Esto era un poco optimista no todas las paacuteginas ni siquiera en el antildeo 2009
estaacuten hechas con estaacutendares web Pero muchos les hicieron caso Los navega-
dores antiguos redujeron su cuota de mercado y dos paacuteginas web maacutes de perfil
muy alto se redisentildearon utilizando estaacutendares web la revista Wired en el 2002
y ESPN en el 2003 se convirtieron en liacutederes del sector en el soporte a los es-
taacutendares web y las nuevas teacutecnicas
Tambieacuten en el 2003 Dave Shea creoacute una paacutegina web denominada CSS Zen
Garden Debiacutea tener maacutes impacto sobre los profesionales web que cual-
quier otra cosa e ilustraba verdaderamente que todo el disentildeo podiacutea cam-
biar soacutelo modificando el estilo de la paacutegina el contenido podiacutea seguir
siendo ideacutentico
Desde entonces en la comunidad de desarrollo web profesional los estaacutenda-
res web se han convertido en un elemento de rigor En esta serie os daremos
unos excelentes fundamentos en estas teacutecnicas para que podaacuteis crear paacuteginas
web tan limpias semaacutenticas accesibles y conformes con los estaacutendares como
las de las grandes empresas
Resumen
En este apartado hemos hablado de coacutemo se creoacute la Internet moderna como
resultado de la carrera espacial de coacutemo Tim Berners-Lee definioacute el hipertexto
para una generacioacuten y de coacutemo los intereses comerciales de dos compantildeiacuteas
provocaron una de las reacciones maacutes notables de los desarrolladores como
nunca se habiacutea visto El teacutermino estaacutendares web se utiliza ahora maacutes amplia-
mente entre los profesionales web que cualquier otro teacutermino aplicado por el
W3C (de hecho el W3C ha empezado a utilizar el teacutermino en sus propias paacute-
ginas) de manera que por este motivo os ensentildearemos el modo de construir
paacuteginas web siguiendo los estaacutendares
CC-BY-NC-ND bull PID_00150463 11 Introduccioacuten al mundo de los estaacutendares web
Preguntas de repaso
Podriacuteais intentar investigar maacutes respondiendo estas preguntas
1 iquestQueacute navegadores estaacuten disponibles actualmente en Internet para los usu-
arios de Windows Mac OS X y Linux
2 iquestQueacute porcentaje de usuarios de la web utiliza cada navegador
3 iquestQueacute navegadores utilizan los dispositivos moacuteviles para acceder a las paacutegi-
nas web
4 iquestCuaacutentos estaacutendares web ha publicado el W3C y cuaacuteles son ampliamente
seguidos por los fabricantes de navegadores actualmente
Lecturas complementarias
Si quereacuteis saber maacutes es posible que queraacuteis visitar algunas de las paacuteginas sigui-
entes
The history of the Internet (wikipedia)
httpenwikipediaorgwikiHistory_of_the_Internet
The history of the World Wide Web (wikipedia)
httpenwikipediaorgwikiHistory_of_the_World_Wide_Web
The history of the W3C
httpwwww3orgConsortiumhistory
El Web Standards Project y su historia
httpwebstandardsorg
httpwwwwebstandardsorgabouthistory
A List Apart
httpwwwalistapartcom
CSS Zen Garden
httpwwwcsszengardencom
CC-BY-NC-ND bull PID_00150463 12 Introduccioacuten al mundo de los estaacutendares web
2 iquestCoacutemo funciona InternetJonathan Lane
Muy de vez en cuando es posible conseguir ver los engranajes y las correas que
actuacutean entre bastidores Hoy es vuestro diacutea de suerte Os llevareacute a dar una vuel-
ta tras los telares de una de las tecnologiacuteas maacutes interesantes que posiblemen-
te ya conoceacuteis bien la web
Este apartado trata sobre la tecnologiacutea subyacente que hace funcionar la web
bull Lenguaje de etiquetado de hipertexto (HTML)
bull Protocolo de transferencia de hipertexto (HTTP)
bull Sistema de nombres de dominio (DNS)
bull Servidores web y navegadores web
bull Contenido estaacutetico y dinaacutemico
Son materias bastante baacutesicas y aunque la mayor parte de lo que aquiacute se ex-
plica no os ayudaraacute a construir una paacutegina web mejor siacute que os proporcionaraacute
el lenguaje adecuado para hablar con clientes y otras personas sobre Internet
Es como lo que una institutriz muy inteligente dijo una vez en Sonrisas y
laacutegrimas ldquoCuando leemos empezamos por ABC Cuando cantamos empeza-
mos por Do Re Mirdquo En este apartado describiremos brevemente coacutemo los or-
denadores se comunican realmente utilizando HTTP y TCPIP y despueacutes nos
fijaremos en los diferentes lenguajes que se combinan para crear las paacuteginas
web que conforman Internet
21 iquestCoacutemo se comunican los ordenadores a traveacutes de Internet
Por suerte hemos mantenido las cosas simples para los ordenadores Cuando
se trata de la web la mayoriacutea de las paacuteginas estaacuten escritas utilizando el mismo
lenguaje el HTML que pasa de un sitio a otro utilizando un protocolo comuacuten
HTTP (hypertext transfer protocol o protocolo de transferencia de hipertexto) El
HTTP es el dialecto (especificacioacuten) comuacuten de Internet que permite por ejem-
plo que un equipo con Windows cante en armoniacutea con un ordenador que eje-
cute la versioacuten maacutes reciente y maacutes fantaacutestica de Linux (iexclDo Re Mi) Mediante
el uso de un navegador web ndashun software especial que interpreta el HTTP y en-
trega el HTML en una manera legible para los humanosndash las paacuteginas web crea-
das con HTML y con cualquier tipo de ordenador se pueden leer en cualquier
medio incluyendo teleacutefonos PDA e incluso en los sistemas de videojuegos
maacutes populares
Aunque hablen el mismo lenguaje los diferentes dispositivos que acceden
a la web han de tener algunas normas establecidas para poder hablar entre
CC-BY-NC-ND bull PID_00150463 13 Introduccioacuten al mundo de los estaacutendares web
ellos es como aprender a alzar la mano para preguntar en clase El HTTP
establece estas normas baacutesicas para Internet Gracias al HTTP un equipo
cliente (como vuestro ordenador) sabe que debe ser eacutel quien inicie una pe-
ticioacuten de una paacutegina web desde un servidor Un servidor es un ordenador
donde residen las paacuteginas web cuando escribiacutes una direccioacuten web en vues-
tro navegador un servidor recibe la peticioacuten encuentra la paacutegina web que
deseaacuteis y la enviacutea a vuestro ordenador para que se vea en vuestro navega-
dor
211 Diseccioacuten de un ciclo de solicitud-respuesta
Ahora que hemos visto todas las partes que permiten a los ordenadores comu-
nicarse a traveacutes de Internet trataremos con maacutes detalle el ciclo de solicitud-
respuesta de HTTP A continuacioacuten se presentan una serie de pasos numera-
dos para que podaacuteis trabajar siguieacutendolos y asiacute os podremos demostrar algu-
nos conceptos de manera maacutes eficaz
1) Todas las solicitudes-respuestas empiezan cuando se escribe un URL
(universal resource locator localizador universal de recursos) en la barra de di-
recciones del navegador web como httpdevoperacom Abrid un navega-
dor para hacerlo ahora mismo
Algo que quizaacute no sabeacuteis es que los navegadores realmente no utilizan los URL
para solicitar paacuteginas web en los servidores utilizan el Protocolo de Internet
o direcciones IP (que son casi como nuacutemeros de teleacutefono o direcciones pos-
tales que identifican los servidores) Por ejemplo la direccioacuten IP de http
devoperacom es 21323620898
2) Abrid una nueva pestantildea o ventana del navegador escribid http
wwwapplecom y pulsad intro a continuacioacuten escribid http1714916010
y pulsad intro llegareacuteis al mismo sitio Escribid http21323620898 en la ba-
rra de direcciones y pulsad intro ireacuteis a parar al mismo sitio que en el paso 1
pero obtendreacuteis un error 403 ldquoAcceso Denegadordquo esto es porque no teneacuteis per-
miso para acceder a la raiacutez real de este servidor
httpwwwapplecom actuacutea baacutesicamente como un alias para http
1714916010 pero iquestpor queacute iquestY coacutemo Ello se debe a que a las personas les
resulta maacutes faacutecil recordar palabras que largas cadenas de nuacutemeros El sistema
que realiza este trabajo se denomina Domain name system (DNS) o Sistema de
nombres de dominio que es esencialmente un directorio automaacutetico comple-
to de todos los ordenadores conectados a Internet Cuando escribiacutes http
devoperacom en la barra de direcciones y apretaacuteis intro esta direccioacuten se en-
viacutea a un servidor de nombres que intenta asociarla a vuestra direccioacuten IP Hay
muchos ordenadores conectados a Internet y no todos los servidores DNS tie-
CC-BY-NC-ND bull PID_00150463 14 Introduccioacuten al mundo de los estaacutendares web
nen un listado de cada ordenador que hay conectado de manera que hay un
sistema creado donde se puede dirigir la solicitud al servidor correcto para
atenderla
Asiacute pues el sistema DNS busca la paacutegina web wwwoperacom averigua que se
encuentra en 1714916010 y devuelve la direccioacuten IP al navegador
El ordenador enviacutea una solicitud al ordenador de la direccioacuten IP especificada
y espera obtener una respuesta Si todo va bien el ordenador del servidor en-
viacutea un breve mensaje de retorno al cliente que dice que todo es correcto (po-
deacuteis ver la figura 1) seguido de la propia paacutegina web Este tipo de mensaje estaacute
incluido en un encabezamiento HTTP
Figura 1
En este caso todo es correcto y el servidor devuelve la paacutegina web correcta
Si algo va mal por ejemplo si se escribe incorrectamente el URL en su lugar
se obtendraacute un error HTTP el famoso error 404 ldquono se encuentra la paacuteginardquo
es el ejemplo maacutes comuacuten que se puede encontrar
3) Escribid httpdevoperacomjoniscoolhtml la paacutegina no existe o sea
que obtendreacuteis un error 404 Probadlo con algunas paacuteginas en diferentes paacute-
ginas web que no existan y os devolveraacuten paacuteginas diferentes Esto se debe al
hecho de que algunos desarrolladores web han dejado que el servidor web soacutelo
emita la paacutegina de error predeterminada y otros han codificado paacuteginas de
error personalizadas para que aparezcan cuando se devuelve una paacutegina no
existente Se trata de una teacutecnica avanzada que no trataremos en esta asigna-
tura pero que afortunadamente se veraacute pronto en un artiacuteculo aparte en
devoperacom
Por uacuteltimo una nota sobre los URL generalmente el primer URL al que se ac-
cede en una paacutegina web no tiene un nombre de archivo real al final (por ejem-
plo httpwwwmysitecom) y a continuacioacuten las paacuteginas subsiguientes a
veces tienen y a veces no Siempre se accede a archivos reales pero en ocasio-
nes el desarrollador web ha configurado el servidor web para que no muestre
CC-BY-NC-ND bull PID_00150463 15 Introduccioacuten al mundo de los estaacutendares web
los nombres de archivo en el URL esto a menudo permite conseguir URL maacutes
limpios y faacuteciles de recordar que conducen a una mejor experiencia para el
usuario de vuestra paacutegina web
22 Tipos de contenido
Ahora que ya os hemos ensentildeado una solicitud-respuesta HTTP queremos
que os fijeacuteis en los diferentes tipos de contenido que pueden encontrarse
en Internet Los hemos agrupado en 4 tipos texto normal estaacutendares web
paacuteginas web dinaacutemicas y formatos que requieren otras aplicaciones o co-
nectores
221 Texto normal
Durante los primeros diacuteas de Internet antes de que apareciera cualquier estaacuten-
dar web o conector Internet era principalmente imaacutegenes y texto normal ar-
chivos con una extensioacuten txt o similar Cuando se encuentra un texto normal
en Internet el navegador lo muestra tal como es sin ninguacuten tipo de proceso
Todaviacutea pueden encontrarse ficheros de texto normal en paacuteginas web univer-
sitarias
222 Estaacutendares web
Las herramientas de construccioacuten baacutesicas de la web son los tres principales es-
taacutendares web HTML (o XHTML aquiacute utilizaremos ambos indistintamente
para nuestras finalidades) CSS y JavaScript
a) Lenguaje de marcado de hipertexto (HTML) es un nombre realmente
bueno con respecto a la definicioacuten de su objetivo El HTML se utiliza para di-
vidir un documento especificar sus contenidos y su estructura y definir el sig-
nificado de cada parte (es lo que incluye todo el texto etc que se ve en las
paacuteginas web) Utiliza elementos para identificar los diferentes componentes
de una paacutegina
b) Las hojas de estilo en cascada (CSS) dan un control total sobre coacutemo se
visualiza un elemento
Existen muchas ventajas para separar la estructura del formato y lo vere-
mos con maacutes detalle en el siguiente apartado Para demostrar la potencia
de HTML y CSS utilizados de manera combinada la figura 2 muestra a la
izquierda HTML normal sin ninguacuten formato antildeadido mientras que a la
derecha puede verse exactamente el mismo HTML con algunos estilos de
CSS aplicados
Cambios de formato
Utilizando declaraciones de es-tilo es muy sencillo cambiar todos los paacuterrafos para que queden a doble espacio
line-height 2em
O hacer que todos los encabe-zamientos de segundo nivel sean verdes
color green
CC-BY-NC-ND bull PID_00150463 16 Introduccioacuten al mundo de los estaacutendares web
Figura 2
HTML normal a la izquierda HTML con CSS aplicado a la derecha
c) Por uacuteltimo el lenguaje JavaScript aporta funciones dinaacutemicas a las paacuteginas
web Se pueden escribir pequentildeos programas en JavaScript que se ejecutaraacuten en el
ordenador cliente y que no requieren que haya ninguacuten software especial instala-
do en el servidor JavaScript permite antildeadir algunas funciones baacutesicas e interacti-
vidad a las paacuteginas web pero tiene sus limitaciones lo que nos lleva a hablar de
lenguajes de programacioacuten del lado del servidor y a paacuteginas web dinaacutemicas
223 Paacuteginas web dinaacutemicas
En ocasiones cuando navegueacuteis por Internet os encontrareacuteis paacuteginas web que
no tienen una extensioacuten html es posible que tengan una extensioacuten php asp
aspx jsp u otras extensiones extrantildeas Todos son ejemplos de tecnologiacuteas
web dinaacutemicas que se pueden utilizar para crear paacuteginas web que tengan sec-
ciones dinaacutemicas coacutedigo que muestra diferentes resultados seguacuten los valores
que reciba por ejemplo de una base de datos de un formulario o de otra fuen-
te de datos Trataremos estos tipos de paacuteginas web en el subapartado ldquoPaacuteginas
web estaacuteticas o dinaacutemicasrdquo a continuacioacuten
224 Formatos que requieren otras aplicaciones o conectores
Como los navegadores web soacutelo estaacuten equipados para interpretar y mostrar de-
terminadas tecnologiacuteas como estaacutendares web si solicitaacuteis un URL que apunta
a un formato de archivo complejo o a una paacutegina web que contiene una tec-
nologiacutea que requiere conectores (plugins) se descargaraacute en vuestro ordenador
o se abriraacute utilizando el conector necesario si el navegador lo tiene instalado
Ejemplos de conectores
Si os encontraacuteis un documento de Word de Excel PDF un fichero comprimido (porejemplo ZIP o SIT) un fichero de imaacutegenes complejas como Photoshop PSD u otrofichero complejo que el navegador no comprende generalmente el navegador os pre-guntaraacute si deseaacuteis descargar o abrir el fichero Ambas acciones normalmente tienen resul-tados similares excepto que la uacuteltima haraacute que el fichero se descargue y a continuacioacutense abra con una aplicacioacuten que lo comprende si estaacute instalada
CC-BY-NC-ND bull PID_00150463 17 Introduccioacuten al mundo de los estaacutendares web
Si os encontraacuteis una paacutegina que contenga una peliacutecula Flash MP3 u otro formato de muacutesicaMPEG u otro formato de viacutedeo el navegador lo reproduciraacute utilizando un conector si hayuno instalado En caso contrario se proporcionaraacute un enlace para instalar el conector nece-sario o el archivo se descargaraacute y buscaraacute una aplicacioacuten de escritorio para ejecutarlo
Naturalmente hay algunas aacutereas grises por ejemplo SVG (scalable vector grap-
hics graacuteficos vectoriales escalables) es un estaacutendar web que se ejecuta de manera
nativa en algunos navegadores como Opera pero no en otros como Internet
Explorer El IE necesita un conector para comprender los SVG Hay una serie de
navegadores que incluyen algunos conectores previamente instalados de modo
que es posible que no seaacuteis conscientes de que el contenido se estaacute visualizando
mediante un conector y de manera no nativa en el navegador
23 Paacuteginas web estaacuteticas o dinaacutemicas
Asiacute pues iquestqueacute son las paacuteginas web estaacuteticas y dinaacutemicas y cuaacutel es la diferencia
entre ambas Como en una caja de bombones todo se basa en el relleno
Otra cosa que cabe tener en cuenta es que se debe instalar un software especial
en el servidor para crear una paacutegina web dinaacutemica Mientras que los ficheros
HTML estaacuteticos normales se guardan con una extensioacuten de fichero html es-
tos ficheros contienen coacutedigo dinaacutemico especial ademaacutes del HTML y se guar-
dan con extensiones de archivo especiales para indicarle al servidor web que
necesitan un procesado adicional antes de enviarlos al cliente (como por
ejemplo que se inserten los datos desde la base de datos) los archivos PHP
por ejemplo generalmente tienen una extensioacuten de archivo php
Hay muchos lenguajes dinaacutemicos que se pueden elegir el PHP que hemos
mencionado antes y otros como Python Ruby on Rails ASPNET y Coldfu-
sion En definitiva todos estos lenguajes tienen maacutes o menos las mismas ca-
pacidades como hablar con bases de datos validar la informacioacuten introducida
en los formularios etc pero hacen las cosas de manera ligeramente diferente
y tienen algunas ventajas e inconvenientes Todo se reduce a la forma maacutes
sencilla que mejor se adapte
Paacutegina web dinaacutemica
Podeacuteis ver un ejemplo de paacutegi-na web dinaacutemica id a Ama-zon con vuestro navegador web y buscad cinco productos diferentes Amazon no os ha enviado cinco paacuteginas diferen-tes os ha enviado la misma paacutegina cinco veces pero con diferente informacioacuten dinaacutemi-ca completada cada vez Esta informacioacuten diferente se guar-da en una base de datos que entrega la informacioacuten corres-pondiente cuando se solicita y la enviacutea al servidor web para in-sertarla en la paacutegina dinaacutemica wwwamazoncom
Una paacutegina web estaacutetica es una paacutegina web donde el contenido el
HTML y los graacuteficos son siempre estaacuteticos ndashse sirve a cualquier visitante
de la misma manera a no ser que la persona que ha creado la web deci-
da cambiar manualmente su copia en el servidorndash exactamente lo que
hemos estado repasando en la mayor parte de este apartado
Por el contrario en una paacutegina web dinaacutemica el contenido del servi-
dor es el mismo pero en vez de ser soacutelo HTML tambieacuten contiene coacutedi-
go dinaacutemico que puede mostrar datos diferentes seguacuten la informacioacuten
que suministre a la paacutegina web
CC-BY-NC-ND bull PID_00150463 18 Introduccioacuten al mundo de los estaacutendares web
Resumen
Hasta aquiacute el recorrido por la sala de maacutequinas de Internet Este apartado real-
mente soacutelo trata de pasada muchos de los temas que incluye pero resulta uacutetil por-
que los pone en perspectiva entre ellos y muestra coacutemo se relacionan y funcionan
entre siacute Todaviacutea queda mucho por aprender sobre la sintaxis real del lenguaje que
conforma el HTML el CSS y JavaScript y esto es lo que haremos a continuacioacuten
el apartado siguiente se centra en el modelo de estaacutendares web HTML CSS y Ja-
vaScript de desarrollo web y da un vistazo al coacutedigo de la paacutegina web
Preguntas de repaso
1 Realizad una breve descripcioacuten de HTML y HTTP y explicad la diferencia en-
tre los dos
2 Explicad la funcioacuten de un navegador web
3 Navegad por Internet durante 5-10 minutos e intentad encontrar algunos
tipos diferentes de contenidos texto normal imaacutegenes HTML paacuteginas dinaacute-
micas como paacuteginas PHP y NET (aspx) PDF documentos de Word peliacuteculas
Flash etc Acceded a algunos de estos contenidos y pensad coacutemo os los mues-
tra el ordenador
4 iquestCuaacutel es la diferencia entre una paacutegina estaacutetica y una paacutegina dinaacutemica
5 Encontrad una lista de coacutedigos de error HTTP enumerad cinco y explicad
queacute significa cada uno de ellos
Lecturas complementarias
En esta asignatura ya no volveremos a hablar de los lenguajes dinaacutemicos pero
hemos creado una lista de recursos en caso de que queraacuteis leeacuteroslos
Rails Fernandez Obie (2007) The Rails Way Addison-Wesley Professional Ruby
Series
Railss screencasts
httpwwwrubyonrailsorgscreencasts
PHP Powers David (2006) PHP Solutions Dynamic web development made easy
friends of ED
Documentacioacuten en liacutenea de PHP
httpwwwphpnetdocsphp
ASPNET Lorenz Patrick (2003) ASPNET 20 Revealed Apress
ASPNET documentacioacuten y guiacuteas en liacutenea de ASPNET
httpaspnet
CC-BY-NC-ND bull PID_00150463 19 Introduccioacuten al mundo de los estaacutendares web
3 El modelo de estaacutendares web HTML CSS y JavaScriptJonathan Lane
En el uacuteltimo apartado hemos visto brevemente las herramientas de construc-
cioacuten baacutesicas de la web HTML (o XHTML) CSS y JavaScript Ahora es el mo-
mento de ampliar un poco maacutes y observarlos individualmente queacute hacen y
coacutemo interaccionan entre ellos para crear una paacutegina web
31 iquestPor queacute separar
Eacutesta es generalmente la primera pregunta que se formula sobre los estaacutendares
web Se puede crear el contenido el estilo y el formato soacutelo utilizando HTML
elementos de tipo de letra para el estilo y tablas HTML para el formato de ma-
nera que iquestpor queacute preocuparse de este asunto de XHTMLCSS El uso de ta-
blas para el formato etc es como se soliacutea hacer en los malos tiempos del
disentildeo web y mucha gente todaviacutea lo hace de esta manera (aunque no se de-
beriacutea de hacer) y de hecho es uno de los motivos por los que hemos creado
esta asignatura Aquiacute no trataremos estos meacutetodos Eacutestas son las razones maacutes
importantes para utilizar CSS y HTML en vez de meacutetodos obsoletos
1) Eficiencia del coacutedigo cuanto mayores sean los archivos maacutes tardaraacuten en
descargarse y maacutes dinero le costaraacute a algunas personas (algunas personas toda-
viacutea pagan por megabyte descargado) Por lo tanto no se debe malgastar el an-
cho de banda con paacuteginas grandes abarrotadas de informacioacuten de estilo y de
formato en cada archivo HTML Una alternativa mucho mejor es que los ar-
chivos HTML esteacuten desglosados y limpios e incluir la informacioacuten de estilo y
de formato soacutelo una vez en un archivo CSS independiente o en varios
2) Facilidad de mantenimiento en relacioacuten con el uacuteltimo punto si la infor-
macioacuten de estilo y formato soacutelo se especifica en un sitio quiere decir que soacutelo
habraacute que hacer actualizaciones en un lugar si se quiere cambiar el aspecto de
la paacutegina web iquestPrefeririacuteais tener que actualizar esta informacioacuten en cada paacute-
gina de vuestra web No lo creo
3) Accesibilidad los usuarios de la web con problemas visuales pueden
utilizar una tipo de software conocido como ldquolector de pantallardquo para ac-
ceder a la informacioacuten mediante el sonido en vez de la vista literalmente
les lee la paacutegina Ademaacutes el software de introduccioacuten de datos mediante la
voz que utilizan las personas con problemas de movilidad tambieacuten se be-
neficia de las paacuteginas web con una semaacutentica bien construida De manera
muy parecida al lector de pantalla que utiliza las instrucciones del teclado
para navegar por los encabezamientos enlaces y formularios un usuario
Eficiencia del coacutedigo
Para ver un caso real de este hecho en accioacuten podeacuteis ver el artiacuteculo sobre la reescritura de Slashdot en A List Apart don-de el autor tomoacute una paacutegina web muy popular y la reescri-bioacute en XHTMLCSS httpwwwalistapartcomarticlesslashdot
CC-BY-NC-ND bull PID_00150463 20 Introduccioacuten al mundo de los estaacutendares web
que interaccione mediante voz utilizaraacute instrucciones con su voz Los do-
cumentos web marcados semaacutenticamente en vez de presentacionalmente
pueden resultar maacutes faacuteciles de navegar y la informacioacuten que contienen es
maacutes faacutecil de encontrar por parte del usuario En otras palabras cuanto maacutes
raacutepidamente ldquoentre en materiardquo (el contenido) mejor Los lectores de pan-
talla no pueden acceder al texto dentro de imaacutegenes y encuentran confusos
algunos usos de JavaScript Aseguraos de que el contenido maacutes importante
estaacute disponible para todo el mundo
4) Compatibilidad de dispositivos ya que vuestra paacutegina XHTML es simple-
mente etiquetado normal sin informacioacuten de estilo se puede reformatear
para diferentes dispositivos con atributos ampliamente variados (por ejemplo
el tamantildeo de pantalla) simplemente aplicando una hoja de estilos alternativa
podeacuteis hacerlo de varias maneras Podeacuteis ver los artiacuteculos de devoperacom
para obtener recursos al respecto CSS tambieacuten permite especificar hojas de es-
tilo diferentes a nivel nativo para distintos meacutetodos de presentacioacuten o tipos de
soporte (por ejemplo visualizacioacuten en pantalla impresioacuten visualizacioacuten en
un dispositivo moacutevil etc)
5) Motores de buacutesqueda en la web probablemente os interesaraacute que vues-
tras paacuteginas web sean faacuteciles de encontrar al buscar en Google o en otros mo-
tores de busca Un motor de buacutesqueda utiliza un crawler o arantildea web que es
una pieza de software especializada para leer vuestras paacuteginas Si esta arantildea tu-
viera problemas para encontrar el contenido de vuestras paacuteginas o interpretara
mal lo que es importante porque no habeacuteis definido los encabezamientos
como encabezamientos etc entonces seguro que vuestra posicioacuten en los re-
sultados de busca se veraacute afectada
6) Es simplemente una buena praacutectica se trata de un motivo un poco del
tipo ldquoporque lo digo yordquo pero hablad con cualquier desarrollador o disentildeador
web profesional consciente de los estaacutendares y seguro que os dice que separar
el contenido el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacioacuten
32 Etiquetado la base de cada paacutegina
httpdevoperacomarticlesmobile
HTML y XHTML son lenguajes de etiquetado formados por elemen-
tos que contienen atributos (algunos opcionales y otros obligatori-
os) Estos elementos se utilizan para etiquetar los diferentes tipos de
contenidos en los documentos especificando que cada trozo de con-
tenido se debe entregar supuestamente como en los navegadores web
(por ejemplo encabezamientos paacuterrafos tablas listas con vintildeetas
etc)
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 11 Introduccioacuten al mundo de los estaacutendares web
Preguntas de repaso
Podriacuteais intentar investigar maacutes respondiendo estas preguntas
1 iquestQueacute navegadores estaacuten disponibles actualmente en Internet para los usu-
arios de Windows Mac OS X y Linux
2 iquestQueacute porcentaje de usuarios de la web utiliza cada navegador
3 iquestQueacute navegadores utilizan los dispositivos moacuteviles para acceder a las paacutegi-
nas web
4 iquestCuaacutentos estaacutendares web ha publicado el W3C y cuaacuteles son ampliamente
seguidos por los fabricantes de navegadores actualmente
Lecturas complementarias
Si quereacuteis saber maacutes es posible que queraacuteis visitar algunas de las paacuteginas sigui-
entes
The history of the Internet (wikipedia)
httpenwikipediaorgwikiHistory_of_the_Internet
The history of the World Wide Web (wikipedia)
httpenwikipediaorgwikiHistory_of_the_World_Wide_Web
The history of the W3C
httpwwww3orgConsortiumhistory
El Web Standards Project y su historia
httpwebstandardsorg
httpwwwwebstandardsorgabouthistory
A List Apart
httpwwwalistapartcom
CSS Zen Garden
httpwwwcsszengardencom
CC-BY-NC-ND bull PID_00150463 12 Introduccioacuten al mundo de los estaacutendares web
2 iquestCoacutemo funciona InternetJonathan Lane
Muy de vez en cuando es posible conseguir ver los engranajes y las correas que
actuacutean entre bastidores Hoy es vuestro diacutea de suerte Os llevareacute a dar una vuel-
ta tras los telares de una de las tecnologiacuteas maacutes interesantes que posiblemen-
te ya conoceacuteis bien la web
Este apartado trata sobre la tecnologiacutea subyacente que hace funcionar la web
bull Lenguaje de etiquetado de hipertexto (HTML)
bull Protocolo de transferencia de hipertexto (HTTP)
bull Sistema de nombres de dominio (DNS)
bull Servidores web y navegadores web
bull Contenido estaacutetico y dinaacutemico
Son materias bastante baacutesicas y aunque la mayor parte de lo que aquiacute se ex-
plica no os ayudaraacute a construir una paacutegina web mejor siacute que os proporcionaraacute
el lenguaje adecuado para hablar con clientes y otras personas sobre Internet
Es como lo que una institutriz muy inteligente dijo una vez en Sonrisas y
laacutegrimas ldquoCuando leemos empezamos por ABC Cuando cantamos empeza-
mos por Do Re Mirdquo En este apartado describiremos brevemente coacutemo los or-
denadores se comunican realmente utilizando HTTP y TCPIP y despueacutes nos
fijaremos en los diferentes lenguajes que se combinan para crear las paacuteginas
web que conforman Internet
21 iquestCoacutemo se comunican los ordenadores a traveacutes de Internet
Por suerte hemos mantenido las cosas simples para los ordenadores Cuando
se trata de la web la mayoriacutea de las paacuteginas estaacuten escritas utilizando el mismo
lenguaje el HTML que pasa de un sitio a otro utilizando un protocolo comuacuten
HTTP (hypertext transfer protocol o protocolo de transferencia de hipertexto) El
HTTP es el dialecto (especificacioacuten) comuacuten de Internet que permite por ejem-
plo que un equipo con Windows cante en armoniacutea con un ordenador que eje-
cute la versioacuten maacutes reciente y maacutes fantaacutestica de Linux (iexclDo Re Mi) Mediante
el uso de un navegador web ndashun software especial que interpreta el HTTP y en-
trega el HTML en una manera legible para los humanosndash las paacuteginas web crea-
das con HTML y con cualquier tipo de ordenador se pueden leer en cualquier
medio incluyendo teleacutefonos PDA e incluso en los sistemas de videojuegos
maacutes populares
Aunque hablen el mismo lenguaje los diferentes dispositivos que acceden
a la web han de tener algunas normas establecidas para poder hablar entre
CC-BY-NC-ND bull PID_00150463 13 Introduccioacuten al mundo de los estaacutendares web
ellos es como aprender a alzar la mano para preguntar en clase El HTTP
establece estas normas baacutesicas para Internet Gracias al HTTP un equipo
cliente (como vuestro ordenador) sabe que debe ser eacutel quien inicie una pe-
ticioacuten de una paacutegina web desde un servidor Un servidor es un ordenador
donde residen las paacuteginas web cuando escribiacutes una direccioacuten web en vues-
tro navegador un servidor recibe la peticioacuten encuentra la paacutegina web que
deseaacuteis y la enviacutea a vuestro ordenador para que se vea en vuestro navega-
dor
211 Diseccioacuten de un ciclo de solicitud-respuesta
Ahora que hemos visto todas las partes que permiten a los ordenadores comu-
nicarse a traveacutes de Internet trataremos con maacutes detalle el ciclo de solicitud-
respuesta de HTTP A continuacioacuten se presentan una serie de pasos numera-
dos para que podaacuteis trabajar siguieacutendolos y asiacute os podremos demostrar algu-
nos conceptos de manera maacutes eficaz
1) Todas las solicitudes-respuestas empiezan cuando se escribe un URL
(universal resource locator localizador universal de recursos) en la barra de di-
recciones del navegador web como httpdevoperacom Abrid un navega-
dor para hacerlo ahora mismo
Algo que quizaacute no sabeacuteis es que los navegadores realmente no utilizan los URL
para solicitar paacuteginas web en los servidores utilizan el Protocolo de Internet
o direcciones IP (que son casi como nuacutemeros de teleacutefono o direcciones pos-
tales que identifican los servidores) Por ejemplo la direccioacuten IP de http
devoperacom es 21323620898
2) Abrid una nueva pestantildea o ventana del navegador escribid http
wwwapplecom y pulsad intro a continuacioacuten escribid http1714916010
y pulsad intro llegareacuteis al mismo sitio Escribid http21323620898 en la ba-
rra de direcciones y pulsad intro ireacuteis a parar al mismo sitio que en el paso 1
pero obtendreacuteis un error 403 ldquoAcceso Denegadordquo esto es porque no teneacuteis per-
miso para acceder a la raiacutez real de este servidor
httpwwwapplecom actuacutea baacutesicamente como un alias para http
1714916010 pero iquestpor queacute iquestY coacutemo Ello se debe a que a las personas les
resulta maacutes faacutecil recordar palabras que largas cadenas de nuacutemeros El sistema
que realiza este trabajo se denomina Domain name system (DNS) o Sistema de
nombres de dominio que es esencialmente un directorio automaacutetico comple-
to de todos los ordenadores conectados a Internet Cuando escribiacutes http
devoperacom en la barra de direcciones y apretaacuteis intro esta direccioacuten se en-
viacutea a un servidor de nombres que intenta asociarla a vuestra direccioacuten IP Hay
muchos ordenadores conectados a Internet y no todos los servidores DNS tie-
CC-BY-NC-ND bull PID_00150463 14 Introduccioacuten al mundo de los estaacutendares web
nen un listado de cada ordenador que hay conectado de manera que hay un
sistema creado donde se puede dirigir la solicitud al servidor correcto para
atenderla
Asiacute pues el sistema DNS busca la paacutegina web wwwoperacom averigua que se
encuentra en 1714916010 y devuelve la direccioacuten IP al navegador
El ordenador enviacutea una solicitud al ordenador de la direccioacuten IP especificada
y espera obtener una respuesta Si todo va bien el ordenador del servidor en-
viacutea un breve mensaje de retorno al cliente que dice que todo es correcto (po-
deacuteis ver la figura 1) seguido de la propia paacutegina web Este tipo de mensaje estaacute
incluido en un encabezamiento HTTP
Figura 1
En este caso todo es correcto y el servidor devuelve la paacutegina web correcta
Si algo va mal por ejemplo si se escribe incorrectamente el URL en su lugar
se obtendraacute un error HTTP el famoso error 404 ldquono se encuentra la paacuteginardquo
es el ejemplo maacutes comuacuten que se puede encontrar
3) Escribid httpdevoperacomjoniscoolhtml la paacutegina no existe o sea
que obtendreacuteis un error 404 Probadlo con algunas paacuteginas en diferentes paacute-
ginas web que no existan y os devolveraacuten paacuteginas diferentes Esto se debe al
hecho de que algunos desarrolladores web han dejado que el servidor web soacutelo
emita la paacutegina de error predeterminada y otros han codificado paacuteginas de
error personalizadas para que aparezcan cuando se devuelve una paacutegina no
existente Se trata de una teacutecnica avanzada que no trataremos en esta asigna-
tura pero que afortunadamente se veraacute pronto en un artiacuteculo aparte en
devoperacom
Por uacuteltimo una nota sobre los URL generalmente el primer URL al que se ac-
cede en una paacutegina web no tiene un nombre de archivo real al final (por ejem-
plo httpwwwmysitecom) y a continuacioacuten las paacuteginas subsiguientes a
veces tienen y a veces no Siempre se accede a archivos reales pero en ocasio-
nes el desarrollador web ha configurado el servidor web para que no muestre
CC-BY-NC-ND bull PID_00150463 15 Introduccioacuten al mundo de los estaacutendares web
los nombres de archivo en el URL esto a menudo permite conseguir URL maacutes
limpios y faacuteciles de recordar que conducen a una mejor experiencia para el
usuario de vuestra paacutegina web
22 Tipos de contenido
Ahora que ya os hemos ensentildeado una solicitud-respuesta HTTP queremos
que os fijeacuteis en los diferentes tipos de contenido que pueden encontrarse
en Internet Los hemos agrupado en 4 tipos texto normal estaacutendares web
paacuteginas web dinaacutemicas y formatos que requieren otras aplicaciones o co-
nectores
221 Texto normal
Durante los primeros diacuteas de Internet antes de que apareciera cualquier estaacuten-
dar web o conector Internet era principalmente imaacutegenes y texto normal ar-
chivos con una extensioacuten txt o similar Cuando se encuentra un texto normal
en Internet el navegador lo muestra tal como es sin ninguacuten tipo de proceso
Todaviacutea pueden encontrarse ficheros de texto normal en paacuteginas web univer-
sitarias
222 Estaacutendares web
Las herramientas de construccioacuten baacutesicas de la web son los tres principales es-
taacutendares web HTML (o XHTML aquiacute utilizaremos ambos indistintamente
para nuestras finalidades) CSS y JavaScript
a) Lenguaje de marcado de hipertexto (HTML) es un nombre realmente
bueno con respecto a la definicioacuten de su objetivo El HTML se utiliza para di-
vidir un documento especificar sus contenidos y su estructura y definir el sig-
nificado de cada parte (es lo que incluye todo el texto etc que se ve en las
paacuteginas web) Utiliza elementos para identificar los diferentes componentes
de una paacutegina
b) Las hojas de estilo en cascada (CSS) dan un control total sobre coacutemo se
visualiza un elemento
Existen muchas ventajas para separar la estructura del formato y lo vere-
mos con maacutes detalle en el siguiente apartado Para demostrar la potencia
de HTML y CSS utilizados de manera combinada la figura 2 muestra a la
izquierda HTML normal sin ninguacuten formato antildeadido mientras que a la
derecha puede verse exactamente el mismo HTML con algunos estilos de
CSS aplicados
Cambios de formato
Utilizando declaraciones de es-tilo es muy sencillo cambiar todos los paacuterrafos para que queden a doble espacio
line-height 2em
O hacer que todos los encabe-zamientos de segundo nivel sean verdes
color green
CC-BY-NC-ND bull PID_00150463 16 Introduccioacuten al mundo de los estaacutendares web
Figura 2
HTML normal a la izquierda HTML con CSS aplicado a la derecha
c) Por uacuteltimo el lenguaje JavaScript aporta funciones dinaacutemicas a las paacuteginas
web Se pueden escribir pequentildeos programas en JavaScript que se ejecutaraacuten en el
ordenador cliente y que no requieren que haya ninguacuten software especial instala-
do en el servidor JavaScript permite antildeadir algunas funciones baacutesicas e interacti-
vidad a las paacuteginas web pero tiene sus limitaciones lo que nos lleva a hablar de
lenguajes de programacioacuten del lado del servidor y a paacuteginas web dinaacutemicas
223 Paacuteginas web dinaacutemicas
En ocasiones cuando navegueacuteis por Internet os encontrareacuteis paacuteginas web que
no tienen una extensioacuten html es posible que tengan una extensioacuten php asp
aspx jsp u otras extensiones extrantildeas Todos son ejemplos de tecnologiacuteas
web dinaacutemicas que se pueden utilizar para crear paacuteginas web que tengan sec-
ciones dinaacutemicas coacutedigo que muestra diferentes resultados seguacuten los valores
que reciba por ejemplo de una base de datos de un formulario o de otra fuen-
te de datos Trataremos estos tipos de paacuteginas web en el subapartado ldquoPaacuteginas
web estaacuteticas o dinaacutemicasrdquo a continuacioacuten
224 Formatos que requieren otras aplicaciones o conectores
Como los navegadores web soacutelo estaacuten equipados para interpretar y mostrar de-
terminadas tecnologiacuteas como estaacutendares web si solicitaacuteis un URL que apunta
a un formato de archivo complejo o a una paacutegina web que contiene una tec-
nologiacutea que requiere conectores (plugins) se descargaraacute en vuestro ordenador
o se abriraacute utilizando el conector necesario si el navegador lo tiene instalado
Ejemplos de conectores
Si os encontraacuteis un documento de Word de Excel PDF un fichero comprimido (porejemplo ZIP o SIT) un fichero de imaacutegenes complejas como Photoshop PSD u otrofichero complejo que el navegador no comprende generalmente el navegador os pre-guntaraacute si deseaacuteis descargar o abrir el fichero Ambas acciones normalmente tienen resul-tados similares excepto que la uacuteltima haraacute que el fichero se descargue y a continuacioacutense abra con una aplicacioacuten que lo comprende si estaacute instalada
CC-BY-NC-ND bull PID_00150463 17 Introduccioacuten al mundo de los estaacutendares web
Si os encontraacuteis una paacutegina que contenga una peliacutecula Flash MP3 u otro formato de muacutesicaMPEG u otro formato de viacutedeo el navegador lo reproduciraacute utilizando un conector si hayuno instalado En caso contrario se proporcionaraacute un enlace para instalar el conector nece-sario o el archivo se descargaraacute y buscaraacute una aplicacioacuten de escritorio para ejecutarlo
Naturalmente hay algunas aacutereas grises por ejemplo SVG (scalable vector grap-
hics graacuteficos vectoriales escalables) es un estaacutendar web que se ejecuta de manera
nativa en algunos navegadores como Opera pero no en otros como Internet
Explorer El IE necesita un conector para comprender los SVG Hay una serie de
navegadores que incluyen algunos conectores previamente instalados de modo
que es posible que no seaacuteis conscientes de que el contenido se estaacute visualizando
mediante un conector y de manera no nativa en el navegador
23 Paacuteginas web estaacuteticas o dinaacutemicas
Asiacute pues iquestqueacute son las paacuteginas web estaacuteticas y dinaacutemicas y cuaacutel es la diferencia
entre ambas Como en una caja de bombones todo se basa en el relleno
Otra cosa que cabe tener en cuenta es que se debe instalar un software especial
en el servidor para crear una paacutegina web dinaacutemica Mientras que los ficheros
HTML estaacuteticos normales se guardan con una extensioacuten de fichero html es-
tos ficheros contienen coacutedigo dinaacutemico especial ademaacutes del HTML y se guar-
dan con extensiones de archivo especiales para indicarle al servidor web que
necesitan un procesado adicional antes de enviarlos al cliente (como por
ejemplo que se inserten los datos desde la base de datos) los archivos PHP
por ejemplo generalmente tienen una extensioacuten de archivo php
Hay muchos lenguajes dinaacutemicos que se pueden elegir el PHP que hemos
mencionado antes y otros como Python Ruby on Rails ASPNET y Coldfu-
sion En definitiva todos estos lenguajes tienen maacutes o menos las mismas ca-
pacidades como hablar con bases de datos validar la informacioacuten introducida
en los formularios etc pero hacen las cosas de manera ligeramente diferente
y tienen algunas ventajas e inconvenientes Todo se reduce a la forma maacutes
sencilla que mejor se adapte
Paacutegina web dinaacutemica
Podeacuteis ver un ejemplo de paacutegi-na web dinaacutemica id a Ama-zon con vuestro navegador web y buscad cinco productos diferentes Amazon no os ha enviado cinco paacuteginas diferen-tes os ha enviado la misma paacutegina cinco veces pero con diferente informacioacuten dinaacutemi-ca completada cada vez Esta informacioacuten diferente se guar-da en una base de datos que entrega la informacioacuten corres-pondiente cuando se solicita y la enviacutea al servidor web para in-sertarla en la paacutegina dinaacutemica wwwamazoncom
Una paacutegina web estaacutetica es una paacutegina web donde el contenido el
HTML y los graacuteficos son siempre estaacuteticos ndashse sirve a cualquier visitante
de la misma manera a no ser que la persona que ha creado la web deci-
da cambiar manualmente su copia en el servidorndash exactamente lo que
hemos estado repasando en la mayor parte de este apartado
Por el contrario en una paacutegina web dinaacutemica el contenido del servi-
dor es el mismo pero en vez de ser soacutelo HTML tambieacuten contiene coacutedi-
go dinaacutemico que puede mostrar datos diferentes seguacuten la informacioacuten
que suministre a la paacutegina web
CC-BY-NC-ND bull PID_00150463 18 Introduccioacuten al mundo de los estaacutendares web
Resumen
Hasta aquiacute el recorrido por la sala de maacutequinas de Internet Este apartado real-
mente soacutelo trata de pasada muchos de los temas que incluye pero resulta uacutetil por-
que los pone en perspectiva entre ellos y muestra coacutemo se relacionan y funcionan
entre siacute Todaviacutea queda mucho por aprender sobre la sintaxis real del lenguaje que
conforma el HTML el CSS y JavaScript y esto es lo que haremos a continuacioacuten
el apartado siguiente se centra en el modelo de estaacutendares web HTML CSS y Ja-
vaScript de desarrollo web y da un vistazo al coacutedigo de la paacutegina web
Preguntas de repaso
1 Realizad una breve descripcioacuten de HTML y HTTP y explicad la diferencia en-
tre los dos
2 Explicad la funcioacuten de un navegador web
3 Navegad por Internet durante 5-10 minutos e intentad encontrar algunos
tipos diferentes de contenidos texto normal imaacutegenes HTML paacuteginas dinaacute-
micas como paacuteginas PHP y NET (aspx) PDF documentos de Word peliacuteculas
Flash etc Acceded a algunos de estos contenidos y pensad coacutemo os los mues-
tra el ordenador
4 iquestCuaacutel es la diferencia entre una paacutegina estaacutetica y una paacutegina dinaacutemica
5 Encontrad una lista de coacutedigos de error HTTP enumerad cinco y explicad
queacute significa cada uno de ellos
Lecturas complementarias
En esta asignatura ya no volveremos a hablar de los lenguajes dinaacutemicos pero
hemos creado una lista de recursos en caso de que queraacuteis leeacuteroslos
Rails Fernandez Obie (2007) The Rails Way Addison-Wesley Professional Ruby
Series
Railss screencasts
httpwwwrubyonrailsorgscreencasts
PHP Powers David (2006) PHP Solutions Dynamic web development made easy
friends of ED
Documentacioacuten en liacutenea de PHP
httpwwwphpnetdocsphp
ASPNET Lorenz Patrick (2003) ASPNET 20 Revealed Apress
ASPNET documentacioacuten y guiacuteas en liacutenea de ASPNET
httpaspnet
CC-BY-NC-ND bull PID_00150463 19 Introduccioacuten al mundo de los estaacutendares web
3 El modelo de estaacutendares web HTML CSS y JavaScriptJonathan Lane
En el uacuteltimo apartado hemos visto brevemente las herramientas de construc-
cioacuten baacutesicas de la web HTML (o XHTML) CSS y JavaScript Ahora es el mo-
mento de ampliar un poco maacutes y observarlos individualmente queacute hacen y
coacutemo interaccionan entre ellos para crear una paacutegina web
31 iquestPor queacute separar
Eacutesta es generalmente la primera pregunta que se formula sobre los estaacutendares
web Se puede crear el contenido el estilo y el formato soacutelo utilizando HTML
elementos de tipo de letra para el estilo y tablas HTML para el formato de ma-
nera que iquestpor queacute preocuparse de este asunto de XHTMLCSS El uso de ta-
blas para el formato etc es como se soliacutea hacer en los malos tiempos del
disentildeo web y mucha gente todaviacutea lo hace de esta manera (aunque no se de-
beriacutea de hacer) y de hecho es uno de los motivos por los que hemos creado
esta asignatura Aquiacute no trataremos estos meacutetodos Eacutestas son las razones maacutes
importantes para utilizar CSS y HTML en vez de meacutetodos obsoletos
1) Eficiencia del coacutedigo cuanto mayores sean los archivos maacutes tardaraacuten en
descargarse y maacutes dinero le costaraacute a algunas personas (algunas personas toda-
viacutea pagan por megabyte descargado) Por lo tanto no se debe malgastar el an-
cho de banda con paacuteginas grandes abarrotadas de informacioacuten de estilo y de
formato en cada archivo HTML Una alternativa mucho mejor es que los ar-
chivos HTML esteacuten desglosados y limpios e incluir la informacioacuten de estilo y
de formato soacutelo una vez en un archivo CSS independiente o en varios
2) Facilidad de mantenimiento en relacioacuten con el uacuteltimo punto si la infor-
macioacuten de estilo y formato soacutelo se especifica en un sitio quiere decir que soacutelo
habraacute que hacer actualizaciones en un lugar si se quiere cambiar el aspecto de
la paacutegina web iquestPrefeririacuteais tener que actualizar esta informacioacuten en cada paacute-
gina de vuestra web No lo creo
3) Accesibilidad los usuarios de la web con problemas visuales pueden
utilizar una tipo de software conocido como ldquolector de pantallardquo para ac-
ceder a la informacioacuten mediante el sonido en vez de la vista literalmente
les lee la paacutegina Ademaacutes el software de introduccioacuten de datos mediante la
voz que utilizan las personas con problemas de movilidad tambieacuten se be-
neficia de las paacuteginas web con una semaacutentica bien construida De manera
muy parecida al lector de pantalla que utiliza las instrucciones del teclado
para navegar por los encabezamientos enlaces y formularios un usuario
Eficiencia del coacutedigo
Para ver un caso real de este hecho en accioacuten podeacuteis ver el artiacuteculo sobre la reescritura de Slashdot en A List Apart don-de el autor tomoacute una paacutegina web muy popular y la reescri-bioacute en XHTMLCSS httpwwwalistapartcomarticlesslashdot
CC-BY-NC-ND bull PID_00150463 20 Introduccioacuten al mundo de los estaacutendares web
que interaccione mediante voz utilizaraacute instrucciones con su voz Los do-
cumentos web marcados semaacutenticamente en vez de presentacionalmente
pueden resultar maacutes faacuteciles de navegar y la informacioacuten que contienen es
maacutes faacutecil de encontrar por parte del usuario En otras palabras cuanto maacutes
raacutepidamente ldquoentre en materiardquo (el contenido) mejor Los lectores de pan-
talla no pueden acceder al texto dentro de imaacutegenes y encuentran confusos
algunos usos de JavaScript Aseguraos de que el contenido maacutes importante
estaacute disponible para todo el mundo
4) Compatibilidad de dispositivos ya que vuestra paacutegina XHTML es simple-
mente etiquetado normal sin informacioacuten de estilo se puede reformatear
para diferentes dispositivos con atributos ampliamente variados (por ejemplo
el tamantildeo de pantalla) simplemente aplicando una hoja de estilos alternativa
podeacuteis hacerlo de varias maneras Podeacuteis ver los artiacuteculos de devoperacom
para obtener recursos al respecto CSS tambieacuten permite especificar hojas de es-
tilo diferentes a nivel nativo para distintos meacutetodos de presentacioacuten o tipos de
soporte (por ejemplo visualizacioacuten en pantalla impresioacuten visualizacioacuten en
un dispositivo moacutevil etc)
5) Motores de buacutesqueda en la web probablemente os interesaraacute que vues-
tras paacuteginas web sean faacuteciles de encontrar al buscar en Google o en otros mo-
tores de busca Un motor de buacutesqueda utiliza un crawler o arantildea web que es
una pieza de software especializada para leer vuestras paacuteginas Si esta arantildea tu-
viera problemas para encontrar el contenido de vuestras paacuteginas o interpretara
mal lo que es importante porque no habeacuteis definido los encabezamientos
como encabezamientos etc entonces seguro que vuestra posicioacuten en los re-
sultados de busca se veraacute afectada
6) Es simplemente una buena praacutectica se trata de un motivo un poco del
tipo ldquoporque lo digo yordquo pero hablad con cualquier desarrollador o disentildeador
web profesional consciente de los estaacutendares y seguro que os dice que separar
el contenido el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacioacuten
32 Etiquetado la base de cada paacutegina
httpdevoperacomarticlesmobile
HTML y XHTML son lenguajes de etiquetado formados por elemen-
tos que contienen atributos (algunos opcionales y otros obligatori-
os) Estos elementos se utilizan para etiquetar los diferentes tipos de
contenidos en los documentos especificando que cada trozo de con-
tenido se debe entregar supuestamente como en los navegadores web
(por ejemplo encabezamientos paacuterrafos tablas listas con vintildeetas
etc)
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 12 Introduccioacuten al mundo de los estaacutendares web
2 iquestCoacutemo funciona InternetJonathan Lane
Muy de vez en cuando es posible conseguir ver los engranajes y las correas que
actuacutean entre bastidores Hoy es vuestro diacutea de suerte Os llevareacute a dar una vuel-
ta tras los telares de una de las tecnologiacuteas maacutes interesantes que posiblemen-
te ya conoceacuteis bien la web
Este apartado trata sobre la tecnologiacutea subyacente que hace funcionar la web
bull Lenguaje de etiquetado de hipertexto (HTML)
bull Protocolo de transferencia de hipertexto (HTTP)
bull Sistema de nombres de dominio (DNS)
bull Servidores web y navegadores web
bull Contenido estaacutetico y dinaacutemico
Son materias bastante baacutesicas y aunque la mayor parte de lo que aquiacute se ex-
plica no os ayudaraacute a construir una paacutegina web mejor siacute que os proporcionaraacute
el lenguaje adecuado para hablar con clientes y otras personas sobre Internet
Es como lo que una institutriz muy inteligente dijo una vez en Sonrisas y
laacutegrimas ldquoCuando leemos empezamos por ABC Cuando cantamos empeza-
mos por Do Re Mirdquo En este apartado describiremos brevemente coacutemo los or-
denadores se comunican realmente utilizando HTTP y TCPIP y despueacutes nos
fijaremos en los diferentes lenguajes que se combinan para crear las paacuteginas
web que conforman Internet
21 iquestCoacutemo se comunican los ordenadores a traveacutes de Internet
Por suerte hemos mantenido las cosas simples para los ordenadores Cuando
se trata de la web la mayoriacutea de las paacuteginas estaacuten escritas utilizando el mismo
lenguaje el HTML que pasa de un sitio a otro utilizando un protocolo comuacuten
HTTP (hypertext transfer protocol o protocolo de transferencia de hipertexto) El
HTTP es el dialecto (especificacioacuten) comuacuten de Internet que permite por ejem-
plo que un equipo con Windows cante en armoniacutea con un ordenador que eje-
cute la versioacuten maacutes reciente y maacutes fantaacutestica de Linux (iexclDo Re Mi) Mediante
el uso de un navegador web ndashun software especial que interpreta el HTTP y en-
trega el HTML en una manera legible para los humanosndash las paacuteginas web crea-
das con HTML y con cualquier tipo de ordenador se pueden leer en cualquier
medio incluyendo teleacutefonos PDA e incluso en los sistemas de videojuegos
maacutes populares
Aunque hablen el mismo lenguaje los diferentes dispositivos que acceden
a la web han de tener algunas normas establecidas para poder hablar entre
CC-BY-NC-ND bull PID_00150463 13 Introduccioacuten al mundo de los estaacutendares web
ellos es como aprender a alzar la mano para preguntar en clase El HTTP
establece estas normas baacutesicas para Internet Gracias al HTTP un equipo
cliente (como vuestro ordenador) sabe que debe ser eacutel quien inicie una pe-
ticioacuten de una paacutegina web desde un servidor Un servidor es un ordenador
donde residen las paacuteginas web cuando escribiacutes una direccioacuten web en vues-
tro navegador un servidor recibe la peticioacuten encuentra la paacutegina web que
deseaacuteis y la enviacutea a vuestro ordenador para que se vea en vuestro navega-
dor
211 Diseccioacuten de un ciclo de solicitud-respuesta
Ahora que hemos visto todas las partes que permiten a los ordenadores comu-
nicarse a traveacutes de Internet trataremos con maacutes detalle el ciclo de solicitud-
respuesta de HTTP A continuacioacuten se presentan una serie de pasos numera-
dos para que podaacuteis trabajar siguieacutendolos y asiacute os podremos demostrar algu-
nos conceptos de manera maacutes eficaz
1) Todas las solicitudes-respuestas empiezan cuando se escribe un URL
(universal resource locator localizador universal de recursos) en la barra de di-
recciones del navegador web como httpdevoperacom Abrid un navega-
dor para hacerlo ahora mismo
Algo que quizaacute no sabeacuteis es que los navegadores realmente no utilizan los URL
para solicitar paacuteginas web en los servidores utilizan el Protocolo de Internet
o direcciones IP (que son casi como nuacutemeros de teleacutefono o direcciones pos-
tales que identifican los servidores) Por ejemplo la direccioacuten IP de http
devoperacom es 21323620898
2) Abrid una nueva pestantildea o ventana del navegador escribid http
wwwapplecom y pulsad intro a continuacioacuten escribid http1714916010
y pulsad intro llegareacuteis al mismo sitio Escribid http21323620898 en la ba-
rra de direcciones y pulsad intro ireacuteis a parar al mismo sitio que en el paso 1
pero obtendreacuteis un error 403 ldquoAcceso Denegadordquo esto es porque no teneacuteis per-
miso para acceder a la raiacutez real de este servidor
httpwwwapplecom actuacutea baacutesicamente como un alias para http
1714916010 pero iquestpor queacute iquestY coacutemo Ello se debe a que a las personas les
resulta maacutes faacutecil recordar palabras que largas cadenas de nuacutemeros El sistema
que realiza este trabajo se denomina Domain name system (DNS) o Sistema de
nombres de dominio que es esencialmente un directorio automaacutetico comple-
to de todos los ordenadores conectados a Internet Cuando escribiacutes http
devoperacom en la barra de direcciones y apretaacuteis intro esta direccioacuten se en-
viacutea a un servidor de nombres que intenta asociarla a vuestra direccioacuten IP Hay
muchos ordenadores conectados a Internet y no todos los servidores DNS tie-
CC-BY-NC-ND bull PID_00150463 14 Introduccioacuten al mundo de los estaacutendares web
nen un listado de cada ordenador que hay conectado de manera que hay un
sistema creado donde se puede dirigir la solicitud al servidor correcto para
atenderla
Asiacute pues el sistema DNS busca la paacutegina web wwwoperacom averigua que se
encuentra en 1714916010 y devuelve la direccioacuten IP al navegador
El ordenador enviacutea una solicitud al ordenador de la direccioacuten IP especificada
y espera obtener una respuesta Si todo va bien el ordenador del servidor en-
viacutea un breve mensaje de retorno al cliente que dice que todo es correcto (po-
deacuteis ver la figura 1) seguido de la propia paacutegina web Este tipo de mensaje estaacute
incluido en un encabezamiento HTTP
Figura 1
En este caso todo es correcto y el servidor devuelve la paacutegina web correcta
Si algo va mal por ejemplo si se escribe incorrectamente el URL en su lugar
se obtendraacute un error HTTP el famoso error 404 ldquono se encuentra la paacuteginardquo
es el ejemplo maacutes comuacuten que se puede encontrar
3) Escribid httpdevoperacomjoniscoolhtml la paacutegina no existe o sea
que obtendreacuteis un error 404 Probadlo con algunas paacuteginas en diferentes paacute-
ginas web que no existan y os devolveraacuten paacuteginas diferentes Esto se debe al
hecho de que algunos desarrolladores web han dejado que el servidor web soacutelo
emita la paacutegina de error predeterminada y otros han codificado paacuteginas de
error personalizadas para que aparezcan cuando se devuelve una paacutegina no
existente Se trata de una teacutecnica avanzada que no trataremos en esta asigna-
tura pero que afortunadamente se veraacute pronto en un artiacuteculo aparte en
devoperacom
Por uacuteltimo una nota sobre los URL generalmente el primer URL al que se ac-
cede en una paacutegina web no tiene un nombre de archivo real al final (por ejem-
plo httpwwwmysitecom) y a continuacioacuten las paacuteginas subsiguientes a
veces tienen y a veces no Siempre se accede a archivos reales pero en ocasio-
nes el desarrollador web ha configurado el servidor web para que no muestre
CC-BY-NC-ND bull PID_00150463 15 Introduccioacuten al mundo de los estaacutendares web
los nombres de archivo en el URL esto a menudo permite conseguir URL maacutes
limpios y faacuteciles de recordar que conducen a una mejor experiencia para el
usuario de vuestra paacutegina web
22 Tipos de contenido
Ahora que ya os hemos ensentildeado una solicitud-respuesta HTTP queremos
que os fijeacuteis en los diferentes tipos de contenido que pueden encontrarse
en Internet Los hemos agrupado en 4 tipos texto normal estaacutendares web
paacuteginas web dinaacutemicas y formatos que requieren otras aplicaciones o co-
nectores
221 Texto normal
Durante los primeros diacuteas de Internet antes de que apareciera cualquier estaacuten-
dar web o conector Internet era principalmente imaacutegenes y texto normal ar-
chivos con una extensioacuten txt o similar Cuando se encuentra un texto normal
en Internet el navegador lo muestra tal como es sin ninguacuten tipo de proceso
Todaviacutea pueden encontrarse ficheros de texto normal en paacuteginas web univer-
sitarias
222 Estaacutendares web
Las herramientas de construccioacuten baacutesicas de la web son los tres principales es-
taacutendares web HTML (o XHTML aquiacute utilizaremos ambos indistintamente
para nuestras finalidades) CSS y JavaScript
a) Lenguaje de marcado de hipertexto (HTML) es un nombre realmente
bueno con respecto a la definicioacuten de su objetivo El HTML se utiliza para di-
vidir un documento especificar sus contenidos y su estructura y definir el sig-
nificado de cada parte (es lo que incluye todo el texto etc que se ve en las
paacuteginas web) Utiliza elementos para identificar los diferentes componentes
de una paacutegina
b) Las hojas de estilo en cascada (CSS) dan un control total sobre coacutemo se
visualiza un elemento
Existen muchas ventajas para separar la estructura del formato y lo vere-
mos con maacutes detalle en el siguiente apartado Para demostrar la potencia
de HTML y CSS utilizados de manera combinada la figura 2 muestra a la
izquierda HTML normal sin ninguacuten formato antildeadido mientras que a la
derecha puede verse exactamente el mismo HTML con algunos estilos de
CSS aplicados
Cambios de formato
Utilizando declaraciones de es-tilo es muy sencillo cambiar todos los paacuterrafos para que queden a doble espacio
line-height 2em
O hacer que todos los encabe-zamientos de segundo nivel sean verdes
color green
CC-BY-NC-ND bull PID_00150463 16 Introduccioacuten al mundo de los estaacutendares web
Figura 2
HTML normal a la izquierda HTML con CSS aplicado a la derecha
c) Por uacuteltimo el lenguaje JavaScript aporta funciones dinaacutemicas a las paacuteginas
web Se pueden escribir pequentildeos programas en JavaScript que se ejecutaraacuten en el
ordenador cliente y que no requieren que haya ninguacuten software especial instala-
do en el servidor JavaScript permite antildeadir algunas funciones baacutesicas e interacti-
vidad a las paacuteginas web pero tiene sus limitaciones lo que nos lleva a hablar de
lenguajes de programacioacuten del lado del servidor y a paacuteginas web dinaacutemicas
223 Paacuteginas web dinaacutemicas
En ocasiones cuando navegueacuteis por Internet os encontrareacuteis paacuteginas web que
no tienen una extensioacuten html es posible que tengan una extensioacuten php asp
aspx jsp u otras extensiones extrantildeas Todos son ejemplos de tecnologiacuteas
web dinaacutemicas que se pueden utilizar para crear paacuteginas web que tengan sec-
ciones dinaacutemicas coacutedigo que muestra diferentes resultados seguacuten los valores
que reciba por ejemplo de una base de datos de un formulario o de otra fuen-
te de datos Trataremos estos tipos de paacuteginas web en el subapartado ldquoPaacuteginas
web estaacuteticas o dinaacutemicasrdquo a continuacioacuten
224 Formatos que requieren otras aplicaciones o conectores
Como los navegadores web soacutelo estaacuten equipados para interpretar y mostrar de-
terminadas tecnologiacuteas como estaacutendares web si solicitaacuteis un URL que apunta
a un formato de archivo complejo o a una paacutegina web que contiene una tec-
nologiacutea que requiere conectores (plugins) se descargaraacute en vuestro ordenador
o se abriraacute utilizando el conector necesario si el navegador lo tiene instalado
Ejemplos de conectores
Si os encontraacuteis un documento de Word de Excel PDF un fichero comprimido (porejemplo ZIP o SIT) un fichero de imaacutegenes complejas como Photoshop PSD u otrofichero complejo que el navegador no comprende generalmente el navegador os pre-guntaraacute si deseaacuteis descargar o abrir el fichero Ambas acciones normalmente tienen resul-tados similares excepto que la uacuteltima haraacute que el fichero se descargue y a continuacioacutense abra con una aplicacioacuten que lo comprende si estaacute instalada
CC-BY-NC-ND bull PID_00150463 17 Introduccioacuten al mundo de los estaacutendares web
Si os encontraacuteis una paacutegina que contenga una peliacutecula Flash MP3 u otro formato de muacutesicaMPEG u otro formato de viacutedeo el navegador lo reproduciraacute utilizando un conector si hayuno instalado En caso contrario se proporcionaraacute un enlace para instalar el conector nece-sario o el archivo se descargaraacute y buscaraacute una aplicacioacuten de escritorio para ejecutarlo
Naturalmente hay algunas aacutereas grises por ejemplo SVG (scalable vector grap-
hics graacuteficos vectoriales escalables) es un estaacutendar web que se ejecuta de manera
nativa en algunos navegadores como Opera pero no en otros como Internet
Explorer El IE necesita un conector para comprender los SVG Hay una serie de
navegadores que incluyen algunos conectores previamente instalados de modo
que es posible que no seaacuteis conscientes de que el contenido se estaacute visualizando
mediante un conector y de manera no nativa en el navegador
23 Paacuteginas web estaacuteticas o dinaacutemicas
Asiacute pues iquestqueacute son las paacuteginas web estaacuteticas y dinaacutemicas y cuaacutel es la diferencia
entre ambas Como en una caja de bombones todo se basa en el relleno
Otra cosa que cabe tener en cuenta es que se debe instalar un software especial
en el servidor para crear una paacutegina web dinaacutemica Mientras que los ficheros
HTML estaacuteticos normales se guardan con una extensioacuten de fichero html es-
tos ficheros contienen coacutedigo dinaacutemico especial ademaacutes del HTML y se guar-
dan con extensiones de archivo especiales para indicarle al servidor web que
necesitan un procesado adicional antes de enviarlos al cliente (como por
ejemplo que se inserten los datos desde la base de datos) los archivos PHP
por ejemplo generalmente tienen una extensioacuten de archivo php
Hay muchos lenguajes dinaacutemicos que se pueden elegir el PHP que hemos
mencionado antes y otros como Python Ruby on Rails ASPNET y Coldfu-
sion En definitiva todos estos lenguajes tienen maacutes o menos las mismas ca-
pacidades como hablar con bases de datos validar la informacioacuten introducida
en los formularios etc pero hacen las cosas de manera ligeramente diferente
y tienen algunas ventajas e inconvenientes Todo se reduce a la forma maacutes
sencilla que mejor se adapte
Paacutegina web dinaacutemica
Podeacuteis ver un ejemplo de paacutegi-na web dinaacutemica id a Ama-zon con vuestro navegador web y buscad cinco productos diferentes Amazon no os ha enviado cinco paacuteginas diferen-tes os ha enviado la misma paacutegina cinco veces pero con diferente informacioacuten dinaacutemi-ca completada cada vez Esta informacioacuten diferente se guar-da en una base de datos que entrega la informacioacuten corres-pondiente cuando se solicita y la enviacutea al servidor web para in-sertarla en la paacutegina dinaacutemica wwwamazoncom
Una paacutegina web estaacutetica es una paacutegina web donde el contenido el
HTML y los graacuteficos son siempre estaacuteticos ndashse sirve a cualquier visitante
de la misma manera a no ser que la persona que ha creado la web deci-
da cambiar manualmente su copia en el servidorndash exactamente lo que
hemos estado repasando en la mayor parte de este apartado
Por el contrario en una paacutegina web dinaacutemica el contenido del servi-
dor es el mismo pero en vez de ser soacutelo HTML tambieacuten contiene coacutedi-
go dinaacutemico que puede mostrar datos diferentes seguacuten la informacioacuten
que suministre a la paacutegina web
CC-BY-NC-ND bull PID_00150463 18 Introduccioacuten al mundo de los estaacutendares web
Resumen
Hasta aquiacute el recorrido por la sala de maacutequinas de Internet Este apartado real-
mente soacutelo trata de pasada muchos de los temas que incluye pero resulta uacutetil por-
que los pone en perspectiva entre ellos y muestra coacutemo se relacionan y funcionan
entre siacute Todaviacutea queda mucho por aprender sobre la sintaxis real del lenguaje que
conforma el HTML el CSS y JavaScript y esto es lo que haremos a continuacioacuten
el apartado siguiente se centra en el modelo de estaacutendares web HTML CSS y Ja-
vaScript de desarrollo web y da un vistazo al coacutedigo de la paacutegina web
Preguntas de repaso
1 Realizad una breve descripcioacuten de HTML y HTTP y explicad la diferencia en-
tre los dos
2 Explicad la funcioacuten de un navegador web
3 Navegad por Internet durante 5-10 minutos e intentad encontrar algunos
tipos diferentes de contenidos texto normal imaacutegenes HTML paacuteginas dinaacute-
micas como paacuteginas PHP y NET (aspx) PDF documentos de Word peliacuteculas
Flash etc Acceded a algunos de estos contenidos y pensad coacutemo os los mues-
tra el ordenador
4 iquestCuaacutel es la diferencia entre una paacutegina estaacutetica y una paacutegina dinaacutemica
5 Encontrad una lista de coacutedigos de error HTTP enumerad cinco y explicad
queacute significa cada uno de ellos
Lecturas complementarias
En esta asignatura ya no volveremos a hablar de los lenguajes dinaacutemicos pero
hemos creado una lista de recursos en caso de que queraacuteis leeacuteroslos
Rails Fernandez Obie (2007) The Rails Way Addison-Wesley Professional Ruby
Series
Railss screencasts
httpwwwrubyonrailsorgscreencasts
PHP Powers David (2006) PHP Solutions Dynamic web development made easy
friends of ED
Documentacioacuten en liacutenea de PHP
httpwwwphpnetdocsphp
ASPNET Lorenz Patrick (2003) ASPNET 20 Revealed Apress
ASPNET documentacioacuten y guiacuteas en liacutenea de ASPNET
httpaspnet
CC-BY-NC-ND bull PID_00150463 19 Introduccioacuten al mundo de los estaacutendares web
3 El modelo de estaacutendares web HTML CSS y JavaScriptJonathan Lane
En el uacuteltimo apartado hemos visto brevemente las herramientas de construc-
cioacuten baacutesicas de la web HTML (o XHTML) CSS y JavaScript Ahora es el mo-
mento de ampliar un poco maacutes y observarlos individualmente queacute hacen y
coacutemo interaccionan entre ellos para crear una paacutegina web
31 iquestPor queacute separar
Eacutesta es generalmente la primera pregunta que se formula sobre los estaacutendares
web Se puede crear el contenido el estilo y el formato soacutelo utilizando HTML
elementos de tipo de letra para el estilo y tablas HTML para el formato de ma-
nera que iquestpor queacute preocuparse de este asunto de XHTMLCSS El uso de ta-
blas para el formato etc es como se soliacutea hacer en los malos tiempos del
disentildeo web y mucha gente todaviacutea lo hace de esta manera (aunque no se de-
beriacutea de hacer) y de hecho es uno de los motivos por los que hemos creado
esta asignatura Aquiacute no trataremos estos meacutetodos Eacutestas son las razones maacutes
importantes para utilizar CSS y HTML en vez de meacutetodos obsoletos
1) Eficiencia del coacutedigo cuanto mayores sean los archivos maacutes tardaraacuten en
descargarse y maacutes dinero le costaraacute a algunas personas (algunas personas toda-
viacutea pagan por megabyte descargado) Por lo tanto no se debe malgastar el an-
cho de banda con paacuteginas grandes abarrotadas de informacioacuten de estilo y de
formato en cada archivo HTML Una alternativa mucho mejor es que los ar-
chivos HTML esteacuten desglosados y limpios e incluir la informacioacuten de estilo y
de formato soacutelo una vez en un archivo CSS independiente o en varios
2) Facilidad de mantenimiento en relacioacuten con el uacuteltimo punto si la infor-
macioacuten de estilo y formato soacutelo se especifica en un sitio quiere decir que soacutelo
habraacute que hacer actualizaciones en un lugar si se quiere cambiar el aspecto de
la paacutegina web iquestPrefeririacuteais tener que actualizar esta informacioacuten en cada paacute-
gina de vuestra web No lo creo
3) Accesibilidad los usuarios de la web con problemas visuales pueden
utilizar una tipo de software conocido como ldquolector de pantallardquo para ac-
ceder a la informacioacuten mediante el sonido en vez de la vista literalmente
les lee la paacutegina Ademaacutes el software de introduccioacuten de datos mediante la
voz que utilizan las personas con problemas de movilidad tambieacuten se be-
neficia de las paacuteginas web con una semaacutentica bien construida De manera
muy parecida al lector de pantalla que utiliza las instrucciones del teclado
para navegar por los encabezamientos enlaces y formularios un usuario
Eficiencia del coacutedigo
Para ver un caso real de este hecho en accioacuten podeacuteis ver el artiacuteculo sobre la reescritura de Slashdot en A List Apart don-de el autor tomoacute una paacutegina web muy popular y la reescri-bioacute en XHTMLCSS httpwwwalistapartcomarticlesslashdot
CC-BY-NC-ND bull PID_00150463 20 Introduccioacuten al mundo de los estaacutendares web
que interaccione mediante voz utilizaraacute instrucciones con su voz Los do-
cumentos web marcados semaacutenticamente en vez de presentacionalmente
pueden resultar maacutes faacuteciles de navegar y la informacioacuten que contienen es
maacutes faacutecil de encontrar por parte del usuario En otras palabras cuanto maacutes
raacutepidamente ldquoentre en materiardquo (el contenido) mejor Los lectores de pan-
talla no pueden acceder al texto dentro de imaacutegenes y encuentran confusos
algunos usos de JavaScript Aseguraos de que el contenido maacutes importante
estaacute disponible para todo el mundo
4) Compatibilidad de dispositivos ya que vuestra paacutegina XHTML es simple-
mente etiquetado normal sin informacioacuten de estilo se puede reformatear
para diferentes dispositivos con atributos ampliamente variados (por ejemplo
el tamantildeo de pantalla) simplemente aplicando una hoja de estilos alternativa
podeacuteis hacerlo de varias maneras Podeacuteis ver los artiacuteculos de devoperacom
para obtener recursos al respecto CSS tambieacuten permite especificar hojas de es-
tilo diferentes a nivel nativo para distintos meacutetodos de presentacioacuten o tipos de
soporte (por ejemplo visualizacioacuten en pantalla impresioacuten visualizacioacuten en
un dispositivo moacutevil etc)
5) Motores de buacutesqueda en la web probablemente os interesaraacute que vues-
tras paacuteginas web sean faacuteciles de encontrar al buscar en Google o en otros mo-
tores de busca Un motor de buacutesqueda utiliza un crawler o arantildea web que es
una pieza de software especializada para leer vuestras paacuteginas Si esta arantildea tu-
viera problemas para encontrar el contenido de vuestras paacuteginas o interpretara
mal lo que es importante porque no habeacuteis definido los encabezamientos
como encabezamientos etc entonces seguro que vuestra posicioacuten en los re-
sultados de busca se veraacute afectada
6) Es simplemente una buena praacutectica se trata de un motivo un poco del
tipo ldquoporque lo digo yordquo pero hablad con cualquier desarrollador o disentildeador
web profesional consciente de los estaacutendares y seguro que os dice que separar
el contenido el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacioacuten
32 Etiquetado la base de cada paacutegina
httpdevoperacomarticlesmobile
HTML y XHTML son lenguajes de etiquetado formados por elemen-
tos que contienen atributos (algunos opcionales y otros obligatori-
os) Estos elementos se utilizan para etiquetar los diferentes tipos de
contenidos en los documentos especificando que cada trozo de con-
tenido se debe entregar supuestamente como en los navegadores web
(por ejemplo encabezamientos paacuterrafos tablas listas con vintildeetas
etc)
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 13 Introduccioacuten al mundo de los estaacutendares web
ellos es como aprender a alzar la mano para preguntar en clase El HTTP
establece estas normas baacutesicas para Internet Gracias al HTTP un equipo
cliente (como vuestro ordenador) sabe que debe ser eacutel quien inicie una pe-
ticioacuten de una paacutegina web desde un servidor Un servidor es un ordenador
donde residen las paacuteginas web cuando escribiacutes una direccioacuten web en vues-
tro navegador un servidor recibe la peticioacuten encuentra la paacutegina web que
deseaacuteis y la enviacutea a vuestro ordenador para que se vea en vuestro navega-
dor
211 Diseccioacuten de un ciclo de solicitud-respuesta
Ahora que hemos visto todas las partes que permiten a los ordenadores comu-
nicarse a traveacutes de Internet trataremos con maacutes detalle el ciclo de solicitud-
respuesta de HTTP A continuacioacuten se presentan una serie de pasos numera-
dos para que podaacuteis trabajar siguieacutendolos y asiacute os podremos demostrar algu-
nos conceptos de manera maacutes eficaz
1) Todas las solicitudes-respuestas empiezan cuando se escribe un URL
(universal resource locator localizador universal de recursos) en la barra de di-
recciones del navegador web como httpdevoperacom Abrid un navega-
dor para hacerlo ahora mismo
Algo que quizaacute no sabeacuteis es que los navegadores realmente no utilizan los URL
para solicitar paacuteginas web en los servidores utilizan el Protocolo de Internet
o direcciones IP (que son casi como nuacutemeros de teleacutefono o direcciones pos-
tales que identifican los servidores) Por ejemplo la direccioacuten IP de http
devoperacom es 21323620898
2) Abrid una nueva pestantildea o ventana del navegador escribid http
wwwapplecom y pulsad intro a continuacioacuten escribid http1714916010
y pulsad intro llegareacuteis al mismo sitio Escribid http21323620898 en la ba-
rra de direcciones y pulsad intro ireacuteis a parar al mismo sitio que en el paso 1
pero obtendreacuteis un error 403 ldquoAcceso Denegadordquo esto es porque no teneacuteis per-
miso para acceder a la raiacutez real de este servidor
httpwwwapplecom actuacutea baacutesicamente como un alias para http
1714916010 pero iquestpor queacute iquestY coacutemo Ello se debe a que a las personas les
resulta maacutes faacutecil recordar palabras que largas cadenas de nuacutemeros El sistema
que realiza este trabajo se denomina Domain name system (DNS) o Sistema de
nombres de dominio que es esencialmente un directorio automaacutetico comple-
to de todos los ordenadores conectados a Internet Cuando escribiacutes http
devoperacom en la barra de direcciones y apretaacuteis intro esta direccioacuten se en-
viacutea a un servidor de nombres que intenta asociarla a vuestra direccioacuten IP Hay
muchos ordenadores conectados a Internet y no todos los servidores DNS tie-
CC-BY-NC-ND bull PID_00150463 14 Introduccioacuten al mundo de los estaacutendares web
nen un listado de cada ordenador que hay conectado de manera que hay un
sistema creado donde se puede dirigir la solicitud al servidor correcto para
atenderla
Asiacute pues el sistema DNS busca la paacutegina web wwwoperacom averigua que se
encuentra en 1714916010 y devuelve la direccioacuten IP al navegador
El ordenador enviacutea una solicitud al ordenador de la direccioacuten IP especificada
y espera obtener una respuesta Si todo va bien el ordenador del servidor en-
viacutea un breve mensaje de retorno al cliente que dice que todo es correcto (po-
deacuteis ver la figura 1) seguido de la propia paacutegina web Este tipo de mensaje estaacute
incluido en un encabezamiento HTTP
Figura 1
En este caso todo es correcto y el servidor devuelve la paacutegina web correcta
Si algo va mal por ejemplo si se escribe incorrectamente el URL en su lugar
se obtendraacute un error HTTP el famoso error 404 ldquono se encuentra la paacuteginardquo
es el ejemplo maacutes comuacuten que se puede encontrar
3) Escribid httpdevoperacomjoniscoolhtml la paacutegina no existe o sea
que obtendreacuteis un error 404 Probadlo con algunas paacuteginas en diferentes paacute-
ginas web que no existan y os devolveraacuten paacuteginas diferentes Esto se debe al
hecho de que algunos desarrolladores web han dejado que el servidor web soacutelo
emita la paacutegina de error predeterminada y otros han codificado paacuteginas de
error personalizadas para que aparezcan cuando se devuelve una paacutegina no
existente Se trata de una teacutecnica avanzada que no trataremos en esta asigna-
tura pero que afortunadamente se veraacute pronto en un artiacuteculo aparte en
devoperacom
Por uacuteltimo una nota sobre los URL generalmente el primer URL al que se ac-
cede en una paacutegina web no tiene un nombre de archivo real al final (por ejem-
plo httpwwwmysitecom) y a continuacioacuten las paacuteginas subsiguientes a
veces tienen y a veces no Siempre se accede a archivos reales pero en ocasio-
nes el desarrollador web ha configurado el servidor web para que no muestre
CC-BY-NC-ND bull PID_00150463 15 Introduccioacuten al mundo de los estaacutendares web
los nombres de archivo en el URL esto a menudo permite conseguir URL maacutes
limpios y faacuteciles de recordar que conducen a una mejor experiencia para el
usuario de vuestra paacutegina web
22 Tipos de contenido
Ahora que ya os hemos ensentildeado una solicitud-respuesta HTTP queremos
que os fijeacuteis en los diferentes tipos de contenido que pueden encontrarse
en Internet Los hemos agrupado en 4 tipos texto normal estaacutendares web
paacuteginas web dinaacutemicas y formatos que requieren otras aplicaciones o co-
nectores
221 Texto normal
Durante los primeros diacuteas de Internet antes de que apareciera cualquier estaacuten-
dar web o conector Internet era principalmente imaacutegenes y texto normal ar-
chivos con una extensioacuten txt o similar Cuando se encuentra un texto normal
en Internet el navegador lo muestra tal como es sin ninguacuten tipo de proceso
Todaviacutea pueden encontrarse ficheros de texto normal en paacuteginas web univer-
sitarias
222 Estaacutendares web
Las herramientas de construccioacuten baacutesicas de la web son los tres principales es-
taacutendares web HTML (o XHTML aquiacute utilizaremos ambos indistintamente
para nuestras finalidades) CSS y JavaScript
a) Lenguaje de marcado de hipertexto (HTML) es un nombre realmente
bueno con respecto a la definicioacuten de su objetivo El HTML se utiliza para di-
vidir un documento especificar sus contenidos y su estructura y definir el sig-
nificado de cada parte (es lo que incluye todo el texto etc que se ve en las
paacuteginas web) Utiliza elementos para identificar los diferentes componentes
de una paacutegina
b) Las hojas de estilo en cascada (CSS) dan un control total sobre coacutemo se
visualiza un elemento
Existen muchas ventajas para separar la estructura del formato y lo vere-
mos con maacutes detalle en el siguiente apartado Para demostrar la potencia
de HTML y CSS utilizados de manera combinada la figura 2 muestra a la
izquierda HTML normal sin ninguacuten formato antildeadido mientras que a la
derecha puede verse exactamente el mismo HTML con algunos estilos de
CSS aplicados
Cambios de formato
Utilizando declaraciones de es-tilo es muy sencillo cambiar todos los paacuterrafos para que queden a doble espacio
line-height 2em
O hacer que todos los encabe-zamientos de segundo nivel sean verdes
color green
CC-BY-NC-ND bull PID_00150463 16 Introduccioacuten al mundo de los estaacutendares web
Figura 2
HTML normal a la izquierda HTML con CSS aplicado a la derecha
c) Por uacuteltimo el lenguaje JavaScript aporta funciones dinaacutemicas a las paacuteginas
web Se pueden escribir pequentildeos programas en JavaScript que se ejecutaraacuten en el
ordenador cliente y que no requieren que haya ninguacuten software especial instala-
do en el servidor JavaScript permite antildeadir algunas funciones baacutesicas e interacti-
vidad a las paacuteginas web pero tiene sus limitaciones lo que nos lleva a hablar de
lenguajes de programacioacuten del lado del servidor y a paacuteginas web dinaacutemicas
223 Paacuteginas web dinaacutemicas
En ocasiones cuando navegueacuteis por Internet os encontrareacuteis paacuteginas web que
no tienen una extensioacuten html es posible que tengan una extensioacuten php asp
aspx jsp u otras extensiones extrantildeas Todos son ejemplos de tecnologiacuteas
web dinaacutemicas que se pueden utilizar para crear paacuteginas web que tengan sec-
ciones dinaacutemicas coacutedigo que muestra diferentes resultados seguacuten los valores
que reciba por ejemplo de una base de datos de un formulario o de otra fuen-
te de datos Trataremos estos tipos de paacuteginas web en el subapartado ldquoPaacuteginas
web estaacuteticas o dinaacutemicasrdquo a continuacioacuten
224 Formatos que requieren otras aplicaciones o conectores
Como los navegadores web soacutelo estaacuten equipados para interpretar y mostrar de-
terminadas tecnologiacuteas como estaacutendares web si solicitaacuteis un URL que apunta
a un formato de archivo complejo o a una paacutegina web que contiene una tec-
nologiacutea que requiere conectores (plugins) se descargaraacute en vuestro ordenador
o se abriraacute utilizando el conector necesario si el navegador lo tiene instalado
Ejemplos de conectores
Si os encontraacuteis un documento de Word de Excel PDF un fichero comprimido (porejemplo ZIP o SIT) un fichero de imaacutegenes complejas como Photoshop PSD u otrofichero complejo que el navegador no comprende generalmente el navegador os pre-guntaraacute si deseaacuteis descargar o abrir el fichero Ambas acciones normalmente tienen resul-tados similares excepto que la uacuteltima haraacute que el fichero se descargue y a continuacioacutense abra con una aplicacioacuten que lo comprende si estaacute instalada
CC-BY-NC-ND bull PID_00150463 17 Introduccioacuten al mundo de los estaacutendares web
Si os encontraacuteis una paacutegina que contenga una peliacutecula Flash MP3 u otro formato de muacutesicaMPEG u otro formato de viacutedeo el navegador lo reproduciraacute utilizando un conector si hayuno instalado En caso contrario se proporcionaraacute un enlace para instalar el conector nece-sario o el archivo se descargaraacute y buscaraacute una aplicacioacuten de escritorio para ejecutarlo
Naturalmente hay algunas aacutereas grises por ejemplo SVG (scalable vector grap-
hics graacuteficos vectoriales escalables) es un estaacutendar web que se ejecuta de manera
nativa en algunos navegadores como Opera pero no en otros como Internet
Explorer El IE necesita un conector para comprender los SVG Hay una serie de
navegadores que incluyen algunos conectores previamente instalados de modo
que es posible que no seaacuteis conscientes de que el contenido se estaacute visualizando
mediante un conector y de manera no nativa en el navegador
23 Paacuteginas web estaacuteticas o dinaacutemicas
Asiacute pues iquestqueacute son las paacuteginas web estaacuteticas y dinaacutemicas y cuaacutel es la diferencia
entre ambas Como en una caja de bombones todo se basa en el relleno
Otra cosa que cabe tener en cuenta es que se debe instalar un software especial
en el servidor para crear una paacutegina web dinaacutemica Mientras que los ficheros
HTML estaacuteticos normales se guardan con una extensioacuten de fichero html es-
tos ficheros contienen coacutedigo dinaacutemico especial ademaacutes del HTML y se guar-
dan con extensiones de archivo especiales para indicarle al servidor web que
necesitan un procesado adicional antes de enviarlos al cliente (como por
ejemplo que se inserten los datos desde la base de datos) los archivos PHP
por ejemplo generalmente tienen una extensioacuten de archivo php
Hay muchos lenguajes dinaacutemicos que se pueden elegir el PHP que hemos
mencionado antes y otros como Python Ruby on Rails ASPNET y Coldfu-
sion En definitiva todos estos lenguajes tienen maacutes o menos las mismas ca-
pacidades como hablar con bases de datos validar la informacioacuten introducida
en los formularios etc pero hacen las cosas de manera ligeramente diferente
y tienen algunas ventajas e inconvenientes Todo se reduce a la forma maacutes
sencilla que mejor se adapte
Paacutegina web dinaacutemica
Podeacuteis ver un ejemplo de paacutegi-na web dinaacutemica id a Ama-zon con vuestro navegador web y buscad cinco productos diferentes Amazon no os ha enviado cinco paacuteginas diferen-tes os ha enviado la misma paacutegina cinco veces pero con diferente informacioacuten dinaacutemi-ca completada cada vez Esta informacioacuten diferente se guar-da en una base de datos que entrega la informacioacuten corres-pondiente cuando se solicita y la enviacutea al servidor web para in-sertarla en la paacutegina dinaacutemica wwwamazoncom
Una paacutegina web estaacutetica es una paacutegina web donde el contenido el
HTML y los graacuteficos son siempre estaacuteticos ndashse sirve a cualquier visitante
de la misma manera a no ser que la persona que ha creado la web deci-
da cambiar manualmente su copia en el servidorndash exactamente lo que
hemos estado repasando en la mayor parte de este apartado
Por el contrario en una paacutegina web dinaacutemica el contenido del servi-
dor es el mismo pero en vez de ser soacutelo HTML tambieacuten contiene coacutedi-
go dinaacutemico que puede mostrar datos diferentes seguacuten la informacioacuten
que suministre a la paacutegina web
CC-BY-NC-ND bull PID_00150463 18 Introduccioacuten al mundo de los estaacutendares web
Resumen
Hasta aquiacute el recorrido por la sala de maacutequinas de Internet Este apartado real-
mente soacutelo trata de pasada muchos de los temas que incluye pero resulta uacutetil por-
que los pone en perspectiva entre ellos y muestra coacutemo se relacionan y funcionan
entre siacute Todaviacutea queda mucho por aprender sobre la sintaxis real del lenguaje que
conforma el HTML el CSS y JavaScript y esto es lo que haremos a continuacioacuten
el apartado siguiente se centra en el modelo de estaacutendares web HTML CSS y Ja-
vaScript de desarrollo web y da un vistazo al coacutedigo de la paacutegina web
Preguntas de repaso
1 Realizad una breve descripcioacuten de HTML y HTTP y explicad la diferencia en-
tre los dos
2 Explicad la funcioacuten de un navegador web
3 Navegad por Internet durante 5-10 minutos e intentad encontrar algunos
tipos diferentes de contenidos texto normal imaacutegenes HTML paacuteginas dinaacute-
micas como paacuteginas PHP y NET (aspx) PDF documentos de Word peliacuteculas
Flash etc Acceded a algunos de estos contenidos y pensad coacutemo os los mues-
tra el ordenador
4 iquestCuaacutel es la diferencia entre una paacutegina estaacutetica y una paacutegina dinaacutemica
5 Encontrad una lista de coacutedigos de error HTTP enumerad cinco y explicad
queacute significa cada uno de ellos
Lecturas complementarias
En esta asignatura ya no volveremos a hablar de los lenguajes dinaacutemicos pero
hemos creado una lista de recursos en caso de que queraacuteis leeacuteroslos
Rails Fernandez Obie (2007) The Rails Way Addison-Wesley Professional Ruby
Series
Railss screencasts
httpwwwrubyonrailsorgscreencasts
PHP Powers David (2006) PHP Solutions Dynamic web development made easy
friends of ED
Documentacioacuten en liacutenea de PHP
httpwwwphpnetdocsphp
ASPNET Lorenz Patrick (2003) ASPNET 20 Revealed Apress
ASPNET documentacioacuten y guiacuteas en liacutenea de ASPNET
httpaspnet
CC-BY-NC-ND bull PID_00150463 19 Introduccioacuten al mundo de los estaacutendares web
3 El modelo de estaacutendares web HTML CSS y JavaScriptJonathan Lane
En el uacuteltimo apartado hemos visto brevemente las herramientas de construc-
cioacuten baacutesicas de la web HTML (o XHTML) CSS y JavaScript Ahora es el mo-
mento de ampliar un poco maacutes y observarlos individualmente queacute hacen y
coacutemo interaccionan entre ellos para crear una paacutegina web
31 iquestPor queacute separar
Eacutesta es generalmente la primera pregunta que se formula sobre los estaacutendares
web Se puede crear el contenido el estilo y el formato soacutelo utilizando HTML
elementos de tipo de letra para el estilo y tablas HTML para el formato de ma-
nera que iquestpor queacute preocuparse de este asunto de XHTMLCSS El uso de ta-
blas para el formato etc es como se soliacutea hacer en los malos tiempos del
disentildeo web y mucha gente todaviacutea lo hace de esta manera (aunque no se de-
beriacutea de hacer) y de hecho es uno de los motivos por los que hemos creado
esta asignatura Aquiacute no trataremos estos meacutetodos Eacutestas son las razones maacutes
importantes para utilizar CSS y HTML en vez de meacutetodos obsoletos
1) Eficiencia del coacutedigo cuanto mayores sean los archivos maacutes tardaraacuten en
descargarse y maacutes dinero le costaraacute a algunas personas (algunas personas toda-
viacutea pagan por megabyte descargado) Por lo tanto no se debe malgastar el an-
cho de banda con paacuteginas grandes abarrotadas de informacioacuten de estilo y de
formato en cada archivo HTML Una alternativa mucho mejor es que los ar-
chivos HTML esteacuten desglosados y limpios e incluir la informacioacuten de estilo y
de formato soacutelo una vez en un archivo CSS independiente o en varios
2) Facilidad de mantenimiento en relacioacuten con el uacuteltimo punto si la infor-
macioacuten de estilo y formato soacutelo se especifica en un sitio quiere decir que soacutelo
habraacute que hacer actualizaciones en un lugar si se quiere cambiar el aspecto de
la paacutegina web iquestPrefeririacuteais tener que actualizar esta informacioacuten en cada paacute-
gina de vuestra web No lo creo
3) Accesibilidad los usuarios de la web con problemas visuales pueden
utilizar una tipo de software conocido como ldquolector de pantallardquo para ac-
ceder a la informacioacuten mediante el sonido en vez de la vista literalmente
les lee la paacutegina Ademaacutes el software de introduccioacuten de datos mediante la
voz que utilizan las personas con problemas de movilidad tambieacuten se be-
neficia de las paacuteginas web con una semaacutentica bien construida De manera
muy parecida al lector de pantalla que utiliza las instrucciones del teclado
para navegar por los encabezamientos enlaces y formularios un usuario
Eficiencia del coacutedigo
Para ver un caso real de este hecho en accioacuten podeacuteis ver el artiacuteculo sobre la reescritura de Slashdot en A List Apart don-de el autor tomoacute una paacutegina web muy popular y la reescri-bioacute en XHTMLCSS httpwwwalistapartcomarticlesslashdot
CC-BY-NC-ND bull PID_00150463 20 Introduccioacuten al mundo de los estaacutendares web
que interaccione mediante voz utilizaraacute instrucciones con su voz Los do-
cumentos web marcados semaacutenticamente en vez de presentacionalmente
pueden resultar maacutes faacuteciles de navegar y la informacioacuten que contienen es
maacutes faacutecil de encontrar por parte del usuario En otras palabras cuanto maacutes
raacutepidamente ldquoentre en materiardquo (el contenido) mejor Los lectores de pan-
talla no pueden acceder al texto dentro de imaacutegenes y encuentran confusos
algunos usos de JavaScript Aseguraos de que el contenido maacutes importante
estaacute disponible para todo el mundo
4) Compatibilidad de dispositivos ya que vuestra paacutegina XHTML es simple-
mente etiquetado normal sin informacioacuten de estilo se puede reformatear
para diferentes dispositivos con atributos ampliamente variados (por ejemplo
el tamantildeo de pantalla) simplemente aplicando una hoja de estilos alternativa
podeacuteis hacerlo de varias maneras Podeacuteis ver los artiacuteculos de devoperacom
para obtener recursos al respecto CSS tambieacuten permite especificar hojas de es-
tilo diferentes a nivel nativo para distintos meacutetodos de presentacioacuten o tipos de
soporte (por ejemplo visualizacioacuten en pantalla impresioacuten visualizacioacuten en
un dispositivo moacutevil etc)
5) Motores de buacutesqueda en la web probablemente os interesaraacute que vues-
tras paacuteginas web sean faacuteciles de encontrar al buscar en Google o en otros mo-
tores de busca Un motor de buacutesqueda utiliza un crawler o arantildea web que es
una pieza de software especializada para leer vuestras paacuteginas Si esta arantildea tu-
viera problemas para encontrar el contenido de vuestras paacuteginas o interpretara
mal lo que es importante porque no habeacuteis definido los encabezamientos
como encabezamientos etc entonces seguro que vuestra posicioacuten en los re-
sultados de busca se veraacute afectada
6) Es simplemente una buena praacutectica se trata de un motivo un poco del
tipo ldquoporque lo digo yordquo pero hablad con cualquier desarrollador o disentildeador
web profesional consciente de los estaacutendares y seguro que os dice que separar
el contenido el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacioacuten
32 Etiquetado la base de cada paacutegina
httpdevoperacomarticlesmobile
HTML y XHTML son lenguajes de etiquetado formados por elemen-
tos que contienen atributos (algunos opcionales y otros obligatori-
os) Estos elementos se utilizan para etiquetar los diferentes tipos de
contenidos en los documentos especificando que cada trozo de con-
tenido se debe entregar supuestamente como en los navegadores web
(por ejemplo encabezamientos paacuterrafos tablas listas con vintildeetas
etc)
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 14 Introduccioacuten al mundo de los estaacutendares web
nen un listado de cada ordenador que hay conectado de manera que hay un
sistema creado donde se puede dirigir la solicitud al servidor correcto para
atenderla
Asiacute pues el sistema DNS busca la paacutegina web wwwoperacom averigua que se
encuentra en 1714916010 y devuelve la direccioacuten IP al navegador
El ordenador enviacutea una solicitud al ordenador de la direccioacuten IP especificada
y espera obtener una respuesta Si todo va bien el ordenador del servidor en-
viacutea un breve mensaje de retorno al cliente que dice que todo es correcto (po-
deacuteis ver la figura 1) seguido de la propia paacutegina web Este tipo de mensaje estaacute
incluido en un encabezamiento HTTP
Figura 1
En este caso todo es correcto y el servidor devuelve la paacutegina web correcta
Si algo va mal por ejemplo si se escribe incorrectamente el URL en su lugar
se obtendraacute un error HTTP el famoso error 404 ldquono se encuentra la paacuteginardquo
es el ejemplo maacutes comuacuten que se puede encontrar
3) Escribid httpdevoperacomjoniscoolhtml la paacutegina no existe o sea
que obtendreacuteis un error 404 Probadlo con algunas paacuteginas en diferentes paacute-
ginas web que no existan y os devolveraacuten paacuteginas diferentes Esto se debe al
hecho de que algunos desarrolladores web han dejado que el servidor web soacutelo
emita la paacutegina de error predeterminada y otros han codificado paacuteginas de
error personalizadas para que aparezcan cuando se devuelve una paacutegina no
existente Se trata de una teacutecnica avanzada que no trataremos en esta asigna-
tura pero que afortunadamente se veraacute pronto en un artiacuteculo aparte en
devoperacom
Por uacuteltimo una nota sobre los URL generalmente el primer URL al que se ac-
cede en una paacutegina web no tiene un nombre de archivo real al final (por ejem-
plo httpwwwmysitecom) y a continuacioacuten las paacuteginas subsiguientes a
veces tienen y a veces no Siempre se accede a archivos reales pero en ocasio-
nes el desarrollador web ha configurado el servidor web para que no muestre
CC-BY-NC-ND bull PID_00150463 15 Introduccioacuten al mundo de los estaacutendares web
los nombres de archivo en el URL esto a menudo permite conseguir URL maacutes
limpios y faacuteciles de recordar que conducen a una mejor experiencia para el
usuario de vuestra paacutegina web
22 Tipos de contenido
Ahora que ya os hemos ensentildeado una solicitud-respuesta HTTP queremos
que os fijeacuteis en los diferentes tipos de contenido que pueden encontrarse
en Internet Los hemos agrupado en 4 tipos texto normal estaacutendares web
paacuteginas web dinaacutemicas y formatos que requieren otras aplicaciones o co-
nectores
221 Texto normal
Durante los primeros diacuteas de Internet antes de que apareciera cualquier estaacuten-
dar web o conector Internet era principalmente imaacutegenes y texto normal ar-
chivos con una extensioacuten txt o similar Cuando se encuentra un texto normal
en Internet el navegador lo muestra tal como es sin ninguacuten tipo de proceso
Todaviacutea pueden encontrarse ficheros de texto normal en paacuteginas web univer-
sitarias
222 Estaacutendares web
Las herramientas de construccioacuten baacutesicas de la web son los tres principales es-
taacutendares web HTML (o XHTML aquiacute utilizaremos ambos indistintamente
para nuestras finalidades) CSS y JavaScript
a) Lenguaje de marcado de hipertexto (HTML) es un nombre realmente
bueno con respecto a la definicioacuten de su objetivo El HTML se utiliza para di-
vidir un documento especificar sus contenidos y su estructura y definir el sig-
nificado de cada parte (es lo que incluye todo el texto etc que se ve en las
paacuteginas web) Utiliza elementos para identificar los diferentes componentes
de una paacutegina
b) Las hojas de estilo en cascada (CSS) dan un control total sobre coacutemo se
visualiza un elemento
Existen muchas ventajas para separar la estructura del formato y lo vere-
mos con maacutes detalle en el siguiente apartado Para demostrar la potencia
de HTML y CSS utilizados de manera combinada la figura 2 muestra a la
izquierda HTML normal sin ninguacuten formato antildeadido mientras que a la
derecha puede verse exactamente el mismo HTML con algunos estilos de
CSS aplicados
Cambios de formato
Utilizando declaraciones de es-tilo es muy sencillo cambiar todos los paacuterrafos para que queden a doble espacio
line-height 2em
O hacer que todos los encabe-zamientos de segundo nivel sean verdes
color green
CC-BY-NC-ND bull PID_00150463 16 Introduccioacuten al mundo de los estaacutendares web
Figura 2
HTML normal a la izquierda HTML con CSS aplicado a la derecha
c) Por uacuteltimo el lenguaje JavaScript aporta funciones dinaacutemicas a las paacuteginas
web Se pueden escribir pequentildeos programas en JavaScript que se ejecutaraacuten en el
ordenador cliente y que no requieren que haya ninguacuten software especial instala-
do en el servidor JavaScript permite antildeadir algunas funciones baacutesicas e interacti-
vidad a las paacuteginas web pero tiene sus limitaciones lo que nos lleva a hablar de
lenguajes de programacioacuten del lado del servidor y a paacuteginas web dinaacutemicas
223 Paacuteginas web dinaacutemicas
En ocasiones cuando navegueacuteis por Internet os encontrareacuteis paacuteginas web que
no tienen una extensioacuten html es posible que tengan una extensioacuten php asp
aspx jsp u otras extensiones extrantildeas Todos son ejemplos de tecnologiacuteas
web dinaacutemicas que se pueden utilizar para crear paacuteginas web que tengan sec-
ciones dinaacutemicas coacutedigo que muestra diferentes resultados seguacuten los valores
que reciba por ejemplo de una base de datos de un formulario o de otra fuen-
te de datos Trataremos estos tipos de paacuteginas web en el subapartado ldquoPaacuteginas
web estaacuteticas o dinaacutemicasrdquo a continuacioacuten
224 Formatos que requieren otras aplicaciones o conectores
Como los navegadores web soacutelo estaacuten equipados para interpretar y mostrar de-
terminadas tecnologiacuteas como estaacutendares web si solicitaacuteis un URL que apunta
a un formato de archivo complejo o a una paacutegina web que contiene una tec-
nologiacutea que requiere conectores (plugins) se descargaraacute en vuestro ordenador
o se abriraacute utilizando el conector necesario si el navegador lo tiene instalado
Ejemplos de conectores
Si os encontraacuteis un documento de Word de Excel PDF un fichero comprimido (porejemplo ZIP o SIT) un fichero de imaacutegenes complejas como Photoshop PSD u otrofichero complejo que el navegador no comprende generalmente el navegador os pre-guntaraacute si deseaacuteis descargar o abrir el fichero Ambas acciones normalmente tienen resul-tados similares excepto que la uacuteltima haraacute que el fichero se descargue y a continuacioacutense abra con una aplicacioacuten que lo comprende si estaacute instalada
CC-BY-NC-ND bull PID_00150463 17 Introduccioacuten al mundo de los estaacutendares web
Si os encontraacuteis una paacutegina que contenga una peliacutecula Flash MP3 u otro formato de muacutesicaMPEG u otro formato de viacutedeo el navegador lo reproduciraacute utilizando un conector si hayuno instalado En caso contrario se proporcionaraacute un enlace para instalar el conector nece-sario o el archivo se descargaraacute y buscaraacute una aplicacioacuten de escritorio para ejecutarlo
Naturalmente hay algunas aacutereas grises por ejemplo SVG (scalable vector grap-
hics graacuteficos vectoriales escalables) es un estaacutendar web que se ejecuta de manera
nativa en algunos navegadores como Opera pero no en otros como Internet
Explorer El IE necesita un conector para comprender los SVG Hay una serie de
navegadores que incluyen algunos conectores previamente instalados de modo
que es posible que no seaacuteis conscientes de que el contenido se estaacute visualizando
mediante un conector y de manera no nativa en el navegador
23 Paacuteginas web estaacuteticas o dinaacutemicas
Asiacute pues iquestqueacute son las paacuteginas web estaacuteticas y dinaacutemicas y cuaacutel es la diferencia
entre ambas Como en una caja de bombones todo se basa en el relleno
Otra cosa que cabe tener en cuenta es que se debe instalar un software especial
en el servidor para crear una paacutegina web dinaacutemica Mientras que los ficheros
HTML estaacuteticos normales se guardan con una extensioacuten de fichero html es-
tos ficheros contienen coacutedigo dinaacutemico especial ademaacutes del HTML y se guar-
dan con extensiones de archivo especiales para indicarle al servidor web que
necesitan un procesado adicional antes de enviarlos al cliente (como por
ejemplo que se inserten los datos desde la base de datos) los archivos PHP
por ejemplo generalmente tienen una extensioacuten de archivo php
Hay muchos lenguajes dinaacutemicos que se pueden elegir el PHP que hemos
mencionado antes y otros como Python Ruby on Rails ASPNET y Coldfu-
sion En definitiva todos estos lenguajes tienen maacutes o menos las mismas ca-
pacidades como hablar con bases de datos validar la informacioacuten introducida
en los formularios etc pero hacen las cosas de manera ligeramente diferente
y tienen algunas ventajas e inconvenientes Todo se reduce a la forma maacutes
sencilla que mejor se adapte
Paacutegina web dinaacutemica
Podeacuteis ver un ejemplo de paacutegi-na web dinaacutemica id a Ama-zon con vuestro navegador web y buscad cinco productos diferentes Amazon no os ha enviado cinco paacuteginas diferen-tes os ha enviado la misma paacutegina cinco veces pero con diferente informacioacuten dinaacutemi-ca completada cada vez Esta informacioacuten diferente se guar-da en una base de datos que entrega la informacioacuten corres-pondiente cuando se solicita y la enviacutea al servidor web para in-sertarla en la paacutegina dinaacutemica wwwamazoncom
Una paacutegina web estaacutetica es una paacutegina web donde el contenido el
HTML y los graacuteficos son siempre estaacuteticos ndashse sirve a cualquier visitante
de la misma manera a no ser que la persona que ha creado la web deci-
da cambiar manualmente su copia en el servidorndash exactamente lo que
hemos estado repasando en la mayor parte de este apartado
Por el contrario en una paacutegina web dinaacutemica el contenido del servi-
dor es el mismo pero en vez de ser soacutelo HTML tambieacuten contiene coacutedi-
go dinaacutemico que puede mostrar datos diferentes seguacuten la informacioacuten
que suministre a la paacutegina web
CC-BY-NC-ND bull PID_00150463 18 Introduccioacuten al mundo de los estaacutendares web
Resumen
Hasta aquiacute el recorrido por la sala de maacutequinas de Internet Este apartado real-
mente soacutelo trata de pasada muchos de los temas que incluye pero resulta uacutetil por-
que los pone en perspectiva entre ellos y muestra coacutemo se relacionan y funcionan
entre siacute Todaviacutea queda mucho por aprender sobre la sintaxis real del lenguaje que
conforma el HTML el CSS y JavaScript y esto es lo que haremos a continuacioacuten
el apartado siguiente se centra en el modelo de estaacutendares web HTML CSS y Ja-
vaScript de desarrollo web y da un vistazo al coacutedigo de la paacutegina web
Preguntas de repaso
1 Realizad una breve descripcioacuten de HTML y HTTP y explicad la diferencia en-
tre los dos
2 Explicad la funcioacuten de un navegador web
3 Navegad por Internet durante 5-10 minutos e intentad encontrar algunos
tipos diferentes de contenidos texto normal imaacutegenes HTML paacuteginas dinaacute-
micas como paacuteginas PHP y NET (aspx) PDF documentos de Word peliacuteculas
Flash etc Acceded a algunos de estos contenidos y pensad coacutemo os los mues-
tra el ordenador
4 iquestCuaacutel es la diferencia entre una paacutegina estaacutetica y una paacutegina dinaacutemica
5 Encontrad una lista de coacutedigos de error HTTP enumerad cinco y explicad
queacute significa cada uno de ellos
Lecturas complementarias
En esta asignatura ya no volveremos a hablar de los lenguajes dinaacutemicos pero
hemos creado una lista de recursos en caso de que queraacuteis leeacuteroslos
Rails Fernandez Obie (2007) The Rails Way Addison-Wesley Professional Ruby
Series
Railss screencasts
httpwwwrubyonrailsorgscreencasts
PHP Powers David (2006) PHP Solutions Dynamic web development made easy
friends of ED
Documentacioacuten en liacutenea de PHP
httpwwwphpnetdocsphp
ASPNET Lorenz Patrick (2003) ASPNET 20 Revealed Apress
ASPNET documentacioacuten y guiacuteas en liacutenea de ASPNET
httpaspnet
CC-BY-NC-ND bull PID_00150463 19 Introduccioacuten al mundo de los estaacutendares web
3 El modelo de estaacutendares web HTML CSS y JavaScriptJonathan Lane
En el uacuteltimo apartado hemos visto brevemente las herramientas de construc-
cioacuten baacutesicas de la web HTML (o XHTML) CSS y JavaScript Ahora es el mo-
mento de ampliar un poco maacutes y observarlos individualmente queacute hacen y
coacutemo interaccionan entre ellos para crear una paacutegina web
31 iquestPor queacute separar
Eacutesta es generalmente la primera pregunta que se formula sobre los estaacutendares
web Se puede crear el contenido el estilo y el formato soacutelo utilizando HTML
elementos de tipo de letra para el estilo y tablas HTML para el formato de ma-
nera que iquestpor queacute preocuparse de este asunto de XHTMLCSS El uso de ta-
blas para el formato etc es como se soliacutea hacer en los malos tiempos del
disentildeo web y mucha gente todaviacutea lo hace de esta manera (aunque no se de-
beriacutea de hacer) y de hecho es uno de los motivos por los que hemos creado
esta asignatura Aquiacute no trataremos estos meacutetodos Eacutestas son las razones maacutes
importantes para utilizar CSS y HTML en vez de meacutetodos obsoletos
1) Eficiencia del coacutedigo cuanto mayores sean los archivos maacutes tardaraacuten en
descargarse y maacutes dinero le costaraacute a algunas personas (algunas personas toda-
viacutea pagan por megabyte descargado) Por lo tanto no se debe malgastar el an-
cho de banda con paacuteginas grandes abarrotadas de informacioacuten de estilo y de
formato en cada archivo HTML Una alternativa mucho mejor es que los ar-
chivos HTML esteacuten desglosados y limpios e incluir la informacioacuten de estilo y
de formato soacutelo una vez en un archivo CSS independiente o en varios
2) Facilidad de mantenimiento en relacioacuten con el uacuteltimo punto si la infor-
macioacuten de estilo y formato soacutelo se especifica en un sitio quiere decir que soacutelo
habraacute que hacer actualizaciones en un lugar si se quiere cambiar el aspecto de
la paacutegina web iquestPrefeririacuteais tener que actualizar esta informacioacuten en cada paacute-
gina de vuestra web No lo creo
3) Accesibilidad los usuarios de la web con problemas visuales pueden
utilizar una tipo de software conocido como ldquolector de pantallardquo para ac-
ceder a la informacioacuten mediante el sonido en vez de la vista literalmente
les lee la paacutegina Ademaacutes el software de introduccioacuten de datos mediante la
voz que utilizan las personas con problemas de movilidad tambieacuten se be-
neficia de las paacuteginas web con una semaacutentica bien construida De manera
muy parecida al lector de pantalla que utiliza las instrucciones del teclado
para navegar por los encabezamientos enlaces y formularios un usuario
Eficiencia del coacutedigo
Para ver un caso real de este hecho en accioacuten podeacuteis ver el artiacuteculo sobre la reescritura de Slashdot en A List Apart don-de el autor tomoacute una paacutegina web muy popular y la reescri-bioacute en XHTMLCSS httpwwwalistapartcomarticlesslashdot
CC-BY-NC-ND bull PID_00150463 20 Introduccioacuten al mundo de los estaacutendares web
que interaccione mediante voz utilizaraacute instrucciones con su voz Los do-
cumentos web marcados semaacutenticamente en vez de presentacionalmente
pueden resultar maacutes faacuteciles de navegar y la informacioacuten que contienen es
maacutes faacutecil de encontrar por parte del usuario En otras palabras cuanto maacutes
raacutepidamente ldquoentre en materiardquo (el contenido) mejor Los lectores de pan-
talla no pueden acceder al texto dentro de imaacutegenes y encuentran confusos
algunos usos de JavaScript Aseguraos de que el contenido maacutes importante
estaacute disponible para todo el mundo
4) Compatibilidad de dispositivos ya que vuestra paacutegina XHTML es simple-
mente etiquetado normal sin informacioacuten de estilo se puede reformatear
para diferentes dispositivos con atributos ampliamente variados (por ejemplo
el tamantildeo de pantalla) simplemente aplicando una hoja de estilos alternativa
podeacuteis hacerlo de varias maneras Podeacuteis ver los artiacuteculos de devoperacom
para obtener recursos al respecto CSS tambieacuten permite especificar hojas de es-
tilo diferentes a nivel nativo para distintos meacutetodos de presentacioacuten o tipos de
soporte (por ejemplo visualizacioacuten en pantalla impresioacuten visualizacioacuten en
un dispositivo moacutevil etc)
5) Motores de buacutesqueda en la web probablemente os interesaraacute que vues-
tras paacuteginas web sean faacuteciles de encontrar al buscar en Google o en otros mo-
tores de busca Un motor de buacutesqueda utiliza un crawler o arantildea web que es
una pieza de software especializada para leer vuestras paacuteginas Si esta arantildea tu-
viera problemas para encontrar el contenido de vuestras paacuteginas o interpretara
mal lo que es importante porque no habeacuteis definido los encabezamientos
como encabezamientos etc entonces seguro que vuestra posicioacuten en los re-
sultados de busca se veraacute afectada
6) Es simplemente una buena praacutectica se trata de un motivo un poco del
tipo ldquoporque lo digo yordquo pero hablad con cualquier desarrollador o disentildeador
web profesional consciente de los estaacutendares y seguro que os dice que separar
el contenido el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacioacuten
32 Etiquetado la base de cada paacutegina
httpdevoperacomarticlesmobile
HTML y XHTML son lenguajes de etiquetado formados por elemen-
tos que contienen atributos (algunos opcionales y otros obligatori-
os) Estos elementos se utilizan para etiquetar los diferentes tipos de
contenidos en los documentos especificando que cada trozo de con-
tenido se debe entregar supuestamente como en los navegadores web
(por ejemplo encabezamientos paacuterrafos tablas listas con vintildeetas
etc)
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 15 Introduccioacuten al mundo de los estaacutendares web
los nombres de archivo en el URL esto a menudo permite conseguir URL maacutes
limpios y faacuteciles de recordar que conducen a una mejor experiencia para el
usuario de vuestra paacutegina web
22 Tipos de contenido
Ahora que ya os hemos ensentildeado una solicitud-respuesta HTTP queremos
que os fijeacuteis en los diferentes tipos de contenido que pueden encontrarse
en Internet Los hemos agrupado en 4 tipos texto normal estaacutendares web
paacuteginas web dinaacutemicas y formatos que requieren otras aplicaciones o co-
nectores
221 Texto normal
Durante los primeros diacuteas de Internet antes de que apareciera cualquier estaacuten-
dar web o conector Internet era principalmente imaacutegenes y texto normal ar-
chivos con una extensioacuten txt o similar Cuando se encuentra un texto normal
en Internet el navegador lo muestra tal como es sin ninguacuten tipo de proceso
Todaviacutea pueden encontrarse ficheros de texto normal en paacuteginas web univer-
sitarias
222 Estaacutendares web
Las herramientas de construccioacuten baacutesicas de la web son los tres principales es-
taacutendares web HTML (o XHTML aquiacute utilizaremos ambos indistintamente
para nuestras finalidades) CSS y JavaScript
a) Lenguaje de marcado de hipertexto (HTML) es un nombre realmente
bueno con respecto a la definicioacuten de su objetivo El HTML se utiliza para di-
vidir un documento especificar sus contenidos y su estructura y definir el sig-
nificado de cada parte (es lo que incluye todo el texto etc que se ve en las
paacuteginas web) Utiliza elementos para identificar los diferentes componentes
de una paacutegina
b) Las hojas de estilo en cascada (CSS) dan un control total sobre coacutemo se
visualiza un elemento
Existen muchas ventajas para separar la estructura del formato y lo vere-
mos con maacutes detalle en el siguiente apartado Para demostrar la potencia
de HTML y CSS utilizados de manera combinada la figura 2 muestra a la
izquierda HTML normal sin ninguacuten formato antildeadido mientras que a la
derecha puede verse exactamente el mismo HTML con algunos estilos de
CSS aplicados
Cambios de formato
Utilizando declaraciones de es-tilo es muy sencillo cambiar todos los paacuterrafos para que queden a doble espacio
line-height 2em
O hacer que todos los encabe-zamientos de segundo nivel sean verdes
color green
CC-BY-NC-ND bull PID_00150463 16 Introduccioacuten al mundo de los estaacutendares web
Figura 2
HTML normal a la izquierda HTML con CSS aplicado a la derecha
c) Por uacuteltimo el lenguaje JavaScript aporta funciones dinaacutemicas a las paacuteginas
web Se pueden escribir pequentildeos programas en JavaScript que se ejecutaraacuten en el
ordenador cliente y que no requieren que haya ninguacuten software especial instala-
do en el servidor JavaScript permite antildeadir algunas funciones baacutesicas e interacti-
vidad a las paacuteginas web pero tiene sus limitaciones lo que nos lleva a hablar de
lenguajes de programacioacuten del lado del servidor y a paacuteginas web dinaacutemicas
223 Paacuteginas web dinaacutemicas
En ocasiones cuando navegueacuteis por Internet os encontrareacuteis paacuteginas web que
no tienen una extensioacuten html es posible que tengan una extensioacuten php asp
aspx jsp u otras extensiones extrantildeas Todos son ejemplos de tecnologiacuteas
web dinaacutemicas que se pueden utilizar para crear paacuteginas web que tengan sec-
ciones dinaacutemicas coacutedigo que muestra diferentes resultados seguacuten los valores
que reciba por ejemplo de una base de datos de un formulario o de otra fuen-
te de datos Trataremos estos tipos de paacuteginas web en el subapartado ldquoPaacuteginas
web estaacuteticas o dinaacutemicasrdquo a continuacioacuten
224 Formatos que requieren otras aplicaciones o conectores
Como los navegadores web soacutelo estaacuten equipados para interpretar y mostrar de-
terminadas tecnologiacuteas como estaacutendares web si solicitaacuteis un URL que apunta
a un formato de archivo complejo o a una paacutegina web que contiene una tec-
nologiacutea que requiere conectores (plugins) se descargaraacute en vuestro ordenador
o se abriraacute utilizando el conector necesario si el navegador lo tiene instalado
Ejemplos de conectores
Si os encontraacuteis un documento de Word de Excel PDF un fichero comprimido (porejemplo ZIP o SIT) un fichero de imaacutegenes complejas como Photoshop PSD u otrofichero complejo que el navegador no comprende generalmente el navegador os pre-guntaraacute si deseaacuteis descargar o abrir el fichero Ambas acciones normalmente tienen resul-tados similares excepto que la uacuteltima haraacute que el fichero se descargue y a continuacioacutense abra con una aplicacioacuten que lo comprende si estaacute instalada
CC-BY-NC-ND bull PID_00150463 17 Introduccioacuten al mundo de los estaacutendares web
Si os encontraacuteis una paacutegina que contenga una peliacutecula Flash MP3 u otro formato de muacutesicaMPEG u otro formato de viacutedeo el navegador lo reproduciraacute utilizando un conector si hayuno instalado En caso contrario se proporcionaraacute un enlace para instalar el conector nece-sario o el archivo se descargaraacute y buscaraacute una aplicacioacuten de escritorio para ejecutarlo
Naturalmente hay algunas aacutereas grises por ejemplo SVG (scalable vector grap-
hics graacuteficos vectoriales escalables) es un estaacutendar web que se ejecuta de manera
nativa en algunos navegadores como Opera pero no en otros como Internet
Explorer El IE necesita un conector para comprender los SVG Hay una serie de
navegadores que incluyen algunos conectores previamente instalados de modo
que es posible que no seaacuteis conscientes de que el contenido se estaacute visualizando
mediante un conector y de manera no nativa en el navegador
23 Paacuteginas web estaacuteticas o dinaacutemicas
Asiacute pues iquestqueacute son las paacuteginas web estaacuteticas y dinaacutemicas y cuaacutel es la diferencia
entre ambas Como en una caja de bombones todo se basa en el relleno
Otra cosa que cabe tener en cuenta es que se debe instalar un software especial
en el servidor para crear una paacutegina web dinaacutemica Mientras que los ficheros
HTML estaacuteticos normales se guardan con una extensioacuten de fichero html es-
tos ficheros contienen coacutedigo dinaacutemico especial ademaacutes del HTML y se guar-
dan con extensiones de archivo especiales para indicarle al servidor web que
necesitan un procesado adicional antes de enviarlos al cliente (como por
ejemplo que se inserten los datos desde la base de datos) los archivos PHP
por ejemplo generalmente tienen una extensioacuten de archivo php
Hay muchos lenguajes dinaacutemicos que se pueden elegir el PHP que hemos
mencionado antes y otros como Python Ruby on Rails ASPNET y Coldfu-
sion En definitiva todos estos lenguajes tienen maacutes o menos las mismas ca-
pacidades como hablar con bases de datos validar la informacioacuten introducida
en los formularios etc pero hacen las cosas de manera ligeramente diferente
y tienen algunas ventajas e inconvenientes Todo se reduce a la forma maacutes
sencilla que mejor se adapte
Paacutegina web dinaacutemica
Podeacuteis ver un ejemplo de paacutegi-na web dinaacutemica id a Ama-zon con vuestro navegador web y buscad cinco productos diferentes Amazon no os ha enviado cinco paacuteginas diferen-tes os ha enviado la misma paacutegina cinco veces pero con diferente informacioacuten dinaacutemi-ca completada cada vez Esta informacioacuten diferente se guar-da en una base de datos que entrega la informacioacuten corres-pondiente cuando se solicita y la enviacutea al servidor web para in-sertarla en la paacutegina dinaacutemica wwwamazoncom
Una paacutegina web estaacutetica es una paacutegina web donde el contenido el
HTML y los graacuteficos son siempre estaacuteticos ndashse sirve a cualquier visitante
de la misma manera a no ser que la persona que ha creado la web deci-
da cambiar manualmente su copia en el servidorndash exactamente lo que
hemos estado repasando en la mayor parte de este apartado
Por el contrario en una paacutegina web dinaacutemica el contenido del servi-
dor es el mismo pero en vez de ser soacutelo HTML tambieacuten contiene coacutedi-
go dinaacutemico que puede mostrar datos diferentes seguacuten la informacioacuten
que suministre a la paacutegina web
CC-BY-NC-ND bull PID_00150463 18 Introduccioacuten al mundo de los estaacutendares web
Resumen
Hasta aquiacute el recorrido por la sala de maacutequinas de Internet Este apartado real-
mente soacutelo trata de pasada muchos de los temas que incluye pero resulta uacutetil por-
que los pone en perspectiva entre ellos y muestra coacutemo se relacionan y funcionan
entre siacute Todaviacutea queda mucho por aprender sobre la sintaxis real del lenguaje que
conforma el HTML el CSS y JavaScript y esto es lo que haremos a continuacioacuten
el apartado siguiente se centra en el modelo de estaacutendares web HTML CSS y Ja-
vaScript de desarrollo web y da un vistazo al coacutedigo de la paacutegina web
Preguntas de repaso
1 Realizad una breve descripcioacuten de HTML y HTTP y explicad la diferencia en-
tre los dos
2 Explicad la funcioacuten de un navegador web
3 Navegad por Internet durante 5-10 minutos e intentad encontrar algunos
tipos diferentes de contenidos texto normal imaacutegenes HTML paacuteginas dinaacute-
micas como paacuteginas PHP y NET (aspx) PDF documentos de Word peliacuteculas
Flash etc Acceded a algunos de estos contenidos y pensad coacutemo os los mues-
tra el ordenador
4 iquestCuaacutel es la diferencia entre una paacutegina estaacutetica y una paacutegina dinaacutemica
5 Encontrad una lista de coacutedigos de error HTTP enumerad cinco y explicad
queacute significa cada uno de ellos
Lecturas complementarias
En esta asignatura ya no volveremos a hablar de los lenguajes dinaacutemicos pero
hemos creado una lista de recursos en caso de que queraacuteis leeacuteroslos
Rails Fernandez Obie (2007) The Rails Way Addison-Wesley Professional Ruby
Series
Railss screencasts
httpwwwrubyonrailsorgscreencasts
PHP Powers David (2006) PHP Solutions Dynamic web development made easy
friends of ED
Documentacioacuten en liacutenea de PHP
httpwwwphpnetdocsphp
ASPNET Lorenz Patrick (2003) ASPNET 20 Revealed Apress
ASPNET documentacioacuten y guiacuteas en liacutenea de ASPNET
httpaspnet
CC-BY-NC-ND bull PID_00150463 19 Introduccioacuten al mundo de los estaacutendares web
3 El modelo de estaacutendares web HTML CSS y JavaScriptJonathan Lane
En el uacuteltimo apartado hemos visto brevemente las herramientas de construc-
cioacuten baacutesicas de la web HTML (o XHTML) CSS y JavaScript Ahora es el mo-
mento de ampliar un poco maacutes y observarlos individualmente queacute hacen y
coacutemo interaccionan entre ellos para crear una paacutegina web
31 iquestPor queacute separar
Eacutesta es generalmente la primera pregunta que se formula sobre los estaacutendares
web Se puede crear el contenido el estilo y el formato soacutelo utilizando HTML
elementos de tipo de letra para el estilo y tablas HTML para el formato de ma-
nera que iquestpor queacute preocuparse de este asunto de XHTMLCSS El uso de ta-
blas para el formato etc es como se soliacutea hacer en los malos tiempos del
disentildeo web y mucha gente todaviacutea lo hace de esta manera (aunque no se de-
beriacutea de hacer) y de hecho es uno de los motivos por los que hemos creado
esta asignatura Aquiacute no trataremos estos meacutetodos Eacutestas son las razones maacutes
importantes para utilizar CSS y HTML en vez de meacutetodos obsoletos
1) Eficiencia del coacutedigo cuanto mayores sean los archivos maacutes tardaraacuten en
descargarse y maacutes dinero le costaraacute a algunas personas (algunas personas toda-
viacutea pagan por megabyte descargado) Por lo tanto no se debe malgastar el an-
cho de banda con paacuteginas grandes abarrotadas de informacioacuten de estilo y de
formato en cada archivo HTML Una alternativa mucho mejor es que los ar-
chivos HTML esteacuten desglosados y limpios e incluir la informacioacuten de estilo y
de formato soacutelo una vez en un archivo CSS independiente o en varios
2) Facilidad de mantenimiento en relacioacuten con el uacuteltimo punto si la infor-
macioacuten de estilo y formato soacutelo se especifica en un sitio quiere decir que soacutelo
habraacute que hacer actualizaciones en un lugar si se quiere cambiar el aspecto de
la paacutegina web iquestPrefeririacuteais tener que actualizar esta informacioacuten en cada paacute-
gina de vuestra web No lo creo
3) Accesibilidad los usuarios de la web con problemas visuales pueden
utilizar una tipo de software conocido como ldquolector de pantallardquo para ac-
ceder a la informacioacuten mediante el sonido en vez de la vista literalmente
les lee la paacutegina Ademaacutes el software de introduccioacuten de datos mediante la
voz que utilizan las personas con problemas de movilidad tambieacuten se be-
neficia de las paacuteginas web con una semaacutentica bien construida De manera
muy parecida al lector de pantalla que utiliza las instrucciones del teclado
para navegar por los encabezamientos enlaces y formularios un usuario
Eficiencia del coacutedigo
Para ver un caso real de este hecho en accioacuten podeacuteis ver el artiacuteculo sobre la reescritura de Slashdot en A List Apart don-de el autor tomoacute una paacutegina web muy popular y la reescri-bioacute en XHTMLCSS httpwwwalistapartcomarticlesslashdot
CC-BY-NC-ND bull PID_00150463 20 Introduccioacuten al mundo de los estaacutendares web
que interaccione mediante voz utilizaraacute instrucciones con su voz Los do-
cumentos web marcados semaacutenticamente en vez de presentacionalmente
pueden resultar maacutes faacuteciles de navegar y la informacioacuten que contienen es
maacutes faacutecil de encontrar por parte del usuario En otras palabras cuanto maacutes
raacutepidamente ldquoentre en materiardquo (el contenido) mejor Los lectores de pan-
talla no pueden acceder al texto dentro de imaacutegenes y encuentran confusos
algunos usos de JavaScript Aseguraos de que el contenido maacutes importante
estaacute disponible para todo el mundo
4) Compatibilidad de dispositivos ya que vuestra paacutegina XHTML es simple-
mente etiquetado normal sin informacioacuten de estilo se puede reformatear
para diferentes dispositivos con atributos ampliamente variados (por ejemplo
el tamantildeo de pantalla) simplemente aplicando una hoja de estilos alternativa
podeacuteis hacerlo de varias maneras Podeacuteis ver los artiacuteculos de devoperacom
para obtener recursos al respecto CSS tambieacuten permite especificar hojas de es-
tilo diferentes a nivel nativo para distintos meacutetodos de presentacioacuten o tipos de
soporte (por ejemplo visualizacioacuten en pantalla impresioacuten visualizacioacuten en
un dispositivo moacutevil etc)
5) Motores de buacutesqueda en la web probablemente os interesaraacute que vues-
tras paacuteginas web sean faacuteciles de encontrar al buscar en Google o en otros mo-
tores de busca Un motor de buacutesqueda utiliza un crawler o arantildea web que es
una pieza de software especializada para leer vuestras paacuteginas Si esta arantildea tu-
viera problemas para encontrar el contenido de vuestras paacuteginas o interpretara
mal lo que es importante porque no habeacuteis definido los encabezamientos
como encabezamientos etc entonces seguro que vuestra posicioacuten en los re-
sultados de busca se veraacute afectada
6) Es simplemente una buena praacutectica se trata de un motivo un poco del
tipo ldquoporque lo digo yordquo pero hablad con cualquier desarrollador o disentildeador
web profesional consciente de los estaacutendares y seguro que os dice que separar
el contenido el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacioacuten
32 Etiquetado la base de cada paacutegina
httpdevoperacomarticlesmobile
HTML y XHTML son lenguajes de etiquetado formados por elemen-
tos que contienen atributos (algunos opcionales y otros obligatori-
os) Estos elementos se utilizan para etiquetar los diferentes tipos de
contenidos en los documentos especificando que cada trozo de con-
tenido se debe entregar supuestamente como en los navegadores web
(por ejemplo encabezamientos paacuterrafos tablas listas con vintildeetas
etc)
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 16 Introduccioacuten al mundo de los estaacutendares web
Figura 2
HTML normal a la izquierda HTML con CSS aplicado a la derecha
c) Por uacuteltimo el lenguaje JavaScript aporta funciones dinaacutemicas a las paacuteginas
web Se pueden escribir pequentildeos programas en JavaScript que se ejecutaraacuten en el
ordenador cliente y que no requieren que haya ninguacuten software especial instala-
do en el servidor JavaScript permite antildeadir algunas funciones baacutesicas e interacti-
vidad a las paacuteginas web pero tiene sus limitaciones lo que nos lleva a hablar de
lenguajes de programacioacuten del lado del servidor y a paacuteginas web dinaacutemicas
223 Paacuteginas web dinaacutemicas
En ocasiones cuando navegueacuteis por Internet os encontrareacuteis paacuteginas web que
no tienen una extensioacuten html es posible que tengan una extensioacuten php asp
aspx jsp u otras extensiones extrantildeas Todos son ejemplos de tecnologiacuteas
web dinaacutemicas que se pueden utilizar para crear paacuteginas web que tengan sec-
ciones dinaacutemicas coacutedigo que muestra diferentes resultados seguacuten los valores
que reciba por ejemplo de una base de datos de un formulario o de otra fuen-
te de datos Trataremos estos tipos de paacuteginas web en el subapartado ldquoPaacuteginas
web estaacuteticas o dinaacutemicasrdquo a continuacioacuten
224 Formatos que requieren otras aplicaciones o conectores
Como los navegadores web soacutelo estaacuten equipados para interpretar y mostrar de-
terminadas tecnologiacuteas como estaacutendares web si solicitaacuteis un URL que apunta
a un formato de archivo complejo o a una paacutegina web que contiene una tec-
nologiacutea que requiere conectores (plugins) se descargaraacute en vuestro ordenador
o se abriraacute utilizando el conector necesario si el navegador lo tiene instalado
Ejemplos de conectores
Si os encontraacuteis un documento de Word de Excel PDF un fichero comprimido (porejemplo ZIP o SIT) un fichero de imaacutegenes complejas como Photoshop PSD u otrofichero complejo que el navegador no comprende generalmente el navegador os pre-guntaraacute si deseaacuteis descargar o abrir el fichero Ambas acciones normalmente tienen resul-tados similares excepto que la uacuteltima haraacute que el fichero se descargue y a continuacioacutense abra con una aplicacioacuten que lo comprende si estaacute instalada
CC-BY-NC-ND bull PID_00150463 17 Introduccioacuten al mundo de los estaacutendares web
Si os encontraacuteis una paacutegina que contenga una peliacutecula Flash MP3 u otro formato de muacutesicaMPEG u otro formato de viacutedeo el navegador lo reproduciraacute utilizando un conector si hayuno instalado En caso contrario se proporcionaraacute un enlace para instalar el conector nece-sario o el archivo se descargaraacute y buscaraacute una aplicacioacuten de escritorio para ejecutarlo
Naturalmente hay algunas aacutereas grises por ejemplo SVG (scalable vector grap-
hics graacuteficos vectoriales escalables) es un estaacutendar web que se ejecuta de manera
nativa en algunos navegadores como Opera pero no en otros como Internet
Explorer El IE necesita un conector para comprender los SVG Hay una serie de
navegadores que incluyen algunos conectores previamente instalados de modo
que es posible que no seaacuteis conscientes de que el contenido se estaacute visualizando
mediante un conector y de manera no nativa en el navegador
23 Paacuteginas web estaacuteticas o dinaacutemicas
Asiacute pues iquestqueacute son las paacuteginas web estaacuteticas y dinaacutemicas y cuaacutel es la diferencia
entre ambas Como en una caja de bombones todo se basa en el relleno
Otra cosa que cabe tener en cuenta es que se debe instalar un software especial
en el servidor para crear una paacutegina web dinaacutemica Mientras que los ficheros
HTML estaacuteticos normales se guardan con una extensioacuten de fichero html es-
tos ficheros contienen coacutedigo dinaacutemico especial ademaacutes del HTML y se guar-
dan con extensiones de archivo especiales para indicarle al servidor web que
necesitan un procesado adicional antes de enviarlos al cliente (como por
ejemplo que se inserten los datos desde la base de datos) los archivos PHP
por ejemplo generalmente tienen una extensioacuten de archivo php
Hay muchos lenguajes dinaacutemicos que se pueden elegir el PHP que hemos
mencionado antes y otros como Python Ruby on Rails ASPNET y Coldfu-
sion En definitiva todos estos lenguajes tienen maacutes o menos las mismas ca-
pacidades como hablar con bases de datos validar la informacioacuten introducida
en los formularios etc pero hacen las cosas de manera ligeramente diferente
y tienen algunas ventajas e inconvenientes Todo se reduce a la forma maacutes
sencilla que mejor se adapte
Paacutegina web dinaacutemica
Podeacuteis ver un ejemplo de paacutegi-na web dinaacutemica id a Ama-zon con vuestro navegador web y buscad cinco productos diferentes Amazon no os ha enviado cinco paacuteginas diferen-tes os ha enviado la misma paacutegina cinco veces pero con diferente informacioacuten dinaacutemi-ca completada cada vez Esta informacioacuten diferente se guar-da en una base de datos que entrega la informacioacuten corres-pondiente cuando se solicita y la enviacutea al servidor web para in-sertarla en la paacutegina dinaacutemica wwwamazoncom
Una paacutegina web estaacutetica es una paacutegina web donde el contenido el
HTML y los graacuteficos son siempre estaacuteticos ndashse sirve a cualquier visitante
de la misma manera a no ser que la persona que ha creado la web deci-
da cambiar manualmente su copia en el servidorndash exactamente lo que
hemos estado repasando en la mayor parte de este apartado
Por el contrario en una paacutegina web dinaacutemica el contenido del servi-
dor es el mismo pero en vez de ser soacutelo HTML tambieacuten contiene coacutedi-
go dinaacutemico que puede mostrar datos diferentes seguacuten la informacioacuten
que suministre a la paacutegina web
CC-BY-NC-ND bull PID_00150463 18 Introduccioacuten al mundo de los estaacutendares web
Resumen
Hasta aquiacute el recorrido por la sala de maacutequinas de Internet Este apartado real-
mente soacutelo trata de pasada muchos de los temas que incluye pero resulta uacutetil por-
que los pone en perspectiva entre ellos y muestra coacutemo se relacionan y funcionan
entre siacute Todaviacutea queda mucho por aprender sobre la sintaxis real del lenguaje que
conforma el HTML el CSS y JavaScript y esto es lo que haremos a continuacioacuten
el apartado siguiente se centra en el modelo de estaacutendares web HTML CSS y Ja-
vaScript de desarrollo web y da un vistazo al coacutedigo de la paacutegina web
Preguntas de repaso
1 Realizad una breve descripcioacuten de HTML y HTTP y explicad la diferencia en-
tre los dos
2 Explicad la funcioacuten de un navegador web
3 Navegad por Internet durante 5-10 minutos e intentad encontrar algunos
tipos diferentes de contenidos texto normal imaacutegenes HTML paacuteginas dinaacute-
micas como paacuteginas PHP y NET (aspx) PDF documentos de Word peliacuteculas
Flash etc Acceded a algunos de estos contenidos y pensad coacutemo os los mues-
tra el ordenador
4 iquestCuaacutel es la diferencia entre una paacutegina estaacutetica y una paacutegina dinaacutemica
5 Encontrad una lista de coacutedigos de error HTTP enumerad cinco y explicad
queacute significa cada uno de ellos
Lecturas complementarias
En esta asignatura ya no volveremos a hablar de los lenguajes dinaacutemicos pero
hemos creado una lista de recursos en caso de que queraacuteis leeacuteroslos
Rails Fernandez Obie (2007) The Rails Way Addison-Wesley Professional Ruby
Series
Railss screencasts
httpwwwrubyonrailsorgscreencasts
PHP Powers David (2006) PHP Solutions Dynamic web development made easy
friends of ED
Documentacioacuten en liacutenea de PHP
httpwwwphpnetdocsphp
ASPNET Lorenz Patrick (2003) ASPNET 20 Revealed Apress
ASPNET documentacioacuten y guiacuteas en liacutenea de ASPNET
httpaspnet
CC-BY-NC-ND bull PID_00150463 19 Introduccioacuten al mundo de los estaacutendares web
3 El modelo de estaacutendares web HTML CSS y JavaScriptJonathan Lane
En el uacuteltimo apartado hemos visto brevemente las herramientas de construc-
cioacuten baacutesicas de la web HTML (o XHTML) CSS y JavaScript Ahora es el mo-
mento de ampliar un poco maacutes y observarlos individualmente queacute hacen y
coacutemo interaccionan entre ellos para crear una paacutegina web
31 iquestPor queacute separar
Eacutesta es generalmente la primera pregunta que se formula sobre los estaacutendares
web Se puede crear el contenido el estilo y el formato soacutelo utilizando HTML
elementos de tipo de letra para el estilo y tablas HTML para el formato de ma-
nera que iquestpor queacute preocuparse de este asunto de XHTMLCSS El uso de ta-
blas para el formato etc es como se soliacutea hacer en los malos tiempos del
disentildeo web y mucha gente todaviacutea lo hace de esta manera (aunque no se de-
beriacutea de hacer) y de hecho es uno de los motivos por los que hemos creado
esta asignatura Aquiacute no trataremos estos meacutetodos Eacutestas son las razones maacutes
importantes para utilizar CSS y HTML en vez de meacutetodos obsoletos
1) Eficiencia del coacutedigo cuanto mayores sean los archivos maacutes tardaraacuten en
descargarse y maacutes dinero le costaraacute a algunas personas (algunas personas toda-
viacutea pagan por megabyte descargado) Por lo tanto no se debe malgastar el an-
cho de banda con paacuteginas grandes abarrotadas de informacioacuten de estilo y de
formato en cada archivo HTML Una alternativa mucho mejor es que los ar-
chivos HTML esteacuten desglosados y limpios e incluir la informacioacuten de estilo y
de formato soacutelo una vez en un archivo CSS independiente o en varios
2) Facilidad de mantenimiento en relacioacuten con el uacuteltimo punto si la infor-
macioacuten de estilo y formato soacutelo se especifica en un sitio quiere decir que soacutelo
habraacute que hacer actualizaciones en un lugar si se quiere cambiar el aspecto de
la paacutegina web iquestPrefeririacuteais tener que actualizar esta informacioacuten en cada paacute-
gina de vuestra web No lo creo
3) Accesibilidad los usuarios de la web con problemas visuales pueden
utilizar una tipo de software conocido como ldquolector de pantallardquo para ac-
ceder a la informacioacuten mediante el sonido en vez de la vista literalmente
les lee la paacutegina Ademaacutes el software de introduccioacuten de datos mediante la
voz que utilizan las personas con problemas de movilidad tambieacuten se be-
neficia de las paacuteginas web con una semaacutentica bien construida De manera
muy parecida al lector de pantalla que utiliza las instrucciones del teclado
para navegar por los encabezamientos enlaces y formularios un usuario
Eficiencia del coacutedigo
Para ver un caso real de este hecho en accioacuten podeacuteis ver el artiacuteculo sobre la reescritura de Slashdot en A List Apart don-de el autor tomoacute una paacutegina web muy popular y la reescri-bioacute en XHTMLCSS httpwwwalistapartcomarticlesslashdot
CC-BY-NC-ND bull PID_00150463 20 Introduccioacuten al mundo de los estaacutendares web
que interaccione mediante voz utilizaraacute instrucciones con su voz Los do-
cumentos web marcados semaacutenticamente en vez de presentacionalmente
pueden resultar maacutes faacuteciles de navegar y la informacioacuten que contienen es
maacutes faacutecil de encontrar por parte del usuario En otras palabras cuanto maacutes
raacutepidamente ldquoentre en materiardquo (el contenido) mejor Los lectores de pan-
talla no pueden acceder al texto dentro de imaacutegenes y encuentran confusos
algunos usos de JavaScript Aseguraos de que el contenido maacutes importante
estaacute disponible para todo el mundo
4) Compatibilidad de dispositivos ya que vuestra paacutegina XHTML es simple-
mente etiquetado normal sin informacioacuten de estilo se puede reformatear
para diferentes dispositivos con atributos ampliamente variados (por ejemplo
el tamantildeo de pantalla) simplemente aplicando una hoja de estilos alternativa
podeacuteis hacerlo de varias maneras Podeacuteis ver los artiacuteculos de devoperacom
para obtener recursos al respecto CSS tambieacuten permite especificar hojas de es-
tilo diferentes a nivel nativo para distintos meacutetodos de presentacioacuten o tipos de
soporte (por ejemplo visualizacioacuten en pantalla impresioacuten visualizacioacuten en
un dispositivo moacutevil etc)
5) Motores de buacutesqueda en la web probablemente os interesaraacute que vues-
tras paacuteginas web sean faacuteciles de encontrar al buscar en Google o en otros mo-
tores de busca Un motor de buacutesqueda utiliza un crawler o arantildea web que es
una pieza de software especializada para leer vuestras paacuteginas Si esta arantildea tu-
viera problemas para encontrar el contenido de vuestras paacuteginas o interpretara
mal lo que es importante porque no habeacuteis definido los encabezamientos
como encabezamientos etc entonces seguro que vuestra posicioacuten en los re-
sultados de busca se veraacute afectada
6) Es simplemente una buena praacutectica se trata de un motivo un poco del
tipo ldquoporque lo digo yordquo pero hablad con cualquier desarrollador o disentildeador
web profesional consciente de los estaacutendares y seguro que os dice que separar
el contenido el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacioacuten
32 Etiquetado la base de cada paacutegina
httpdevoperacomarticlesmobile
HTML y XHTML son lenguajes de etiquetado formados por elemen-
tos que contienen atributos (algunos opcionales y otros obligatori-
os) Estos elementos se utilizan para etiquetar los diferentes tipos de
contenidos en los documentos especificando que cada trozo de con-
tenido se debe entregar supuestamente como en los navegadores web
(por ejemplo encabezamientos paacuterrafos tablas listas con vintildeetas
etc)
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 17 Introduccioacuten al mundo de los estaacutendares web
Si os encontraacuteis una paacutegina que contenga una peliacutecula Flash MP3 u otro formato de muacutesicaMPEG u otro formato de viacutedeo el navegador lo reproduciraacute utilizando un conector si hayuno instalado En caso contrario se proporcionaraacute un enlace para instalar el conector nece-sario o el archivo se descargaraacute y buscaraacute una aplicacioacuten de escritorio para ejecutarlo
Naturalmente hay algunas aacutereas grises por ejemplo SVG (scalable vector grap-
hics graacuteficos vectoriales escalables) es un estaacutendar web que se ejecuta de manera
nativa en algunos navegadores como Opera pero no en otros como Internet
Explorer El IE necesita un conector para comprender los SVG Hay una serie de
navegadores que incluyen algunos conectores previamente instalados de modo
que es posible que no seaacuteis conscientes de que el contenido se estaacute visualizando
mediante un conector y de manera no nativa en el navegador
23 Paacuteginas web estaacuteticas o dinaacutemicas
Asiacute pues iquestqueacute son las paacuteginas web estaacuteticas y dinaacutemicas y cuaacutel es la diferencia
entre ambas Como en una caja de bombones todo se basa en el relleno
Otra cosa que cabe tener en cuenta es que se debe instalar un software especial
en el servidor para crear una paacutegina web dinaacutemica Mientras que los ficheros
HTML estaacuteticos normales se guardan con una extensioacuten de fichero html es-
tos ficheros contienen coacutedigo dinaacutemico especial ademaacutes del HTML y se guar-
dan con extensiones de archivo especiales para indicarle al servidor web que
necesitan un procesado adicional antes de enviarlos al cliente (como por
ejemplo que se inserten los datos desde la base de datos) los archivos PHP
por ejemplo generalmente tienen una extensioacuten de archivo php
Hay muchos lenguajes dinaacutemicos que se pueden elegir el PHP que hemos
mencionado antes y otros como Python Ruby on Rails ASPNET y Coldfu-
sion En definitiva todos estos lenguajes tienen maacutes o menos las mismas ca-
pacidades como hablar con bases de datos validar la informacioacuten introducida
en los formularios etc pero hacen las cosas de manera ligeramente diferente
y tienen algunas ventajas e inconvenientes Todo se reduce a la forma maacutes
sencilla que mejor se adapte
Paacutegina web dinaacutemica
Podeacuteis ver un ejemplo de paacutegi-na web dinaacutemica id a Ama-zon con vuestro navegador web y buscad cinco productos diferentes Amazon no os ha enviado cinco paacuteginas diferen-tes os ha enviado la misma paacutegina cinco veces pero con diferente informacioacuten dinaacutemi-ca completada cada vez Esta informacioacuten diferente se guar-da en una base de datos que entrega la informacioacuten corres-pondiente cuando se solicita y la enviacutea al servidor web para in-sertarla en la paacutegina dinaacutemica wwwamazoncom
Una paacutegina web estaacutetica es una paacutegina web donde el contenido el
HTML y los graacuteficos son siempre estaacuteticos ndashse sirve a cualquier visitante
de la misma manera a no ser que la persona que ha creado la web deci-
da cambiar manualmente su copia en el servidorndash exactamente lo que
hemos estado repasando en la mayor parte de este apartado
Por el contrario en una paacutegina web dinaacutemica el contenido del servi-
dor es el mismo pero en vez de ser soacutelo HTML tambieacuten contiene coacutedi-
go dinaacutemico que puede mostrar datos diferentes seguacuten la informacioacuten
que suministre a la paacutegina web
CC-BY-NC-ND bull PID_00150463 18 Introduccioacuten al mundo de los estaacutendares web
Resumen
Hasta aquiacute el recorrido por la sala de maacutequinas de Internet Este apartado real-
mente soacutelo trata de pasada muchos de los temas que incluye pero resulta uacutetil por-
que los pone en perspectiva entre ellos y muestra coacutemo se relacionan y funcionan
entre siacute Todaviacutea queda mucho por aprender sobre la sintaxis real del lenguaje que
conforma el HTML el CSS y JavaScript y esto es lo que haremos a continuacioacuten
el apartado siguiente se centra en el modelo de estaacutendares web HTML CSS y Ja-
vaScript de desarrollo web y da un vistazo al coacutedigo de la paacutegina web
Preguntas de repaso
1 Realizad una breve descripcioacuten de HTML y HTTP y explicad la diferencia en-
tre los dos
2 Explicad la funcioacuten de un navegador web
3 Navegad por Internet durante 5-10 minutos e intentad encontrar algunos
tipos diferentes de contenidos texto normal imaacutegenes HTML paacuteginas dinaacute-
micas como paacuteginas PHP y NET (aspx) PDF documentos de Word peliacuteculas
Flash etc Acceded a algunos de estos contenidos y pensad coacutemo os los mues-
tra el ordenador
4 iquestCuaacutel es la diferencia entre una paacutegina estaacutetica y una paacutegina dinaacutemica
5 Encontrad una lista de coacutedigos de error HTTP enumerad cinco y explicad
queacute significa cada uno de ellos
Lecturas complementarias
En esta asignatura ya no volveremos a hablar de los lenguajes dinaacutemicos pero
hemos creado una lista de recursos en caso de que queraacuteis leeacuteroslos
Rails Fernandez Obie (2007) The Rails Way Addison-Wesley Professional Ruby
Series
Railss screencasts
httpwwwrubyonrailsorgscreencasts
PHP Powers David (2006) PHP Solutions Dynamic web development made easy
friends of ED
Documentacioacuten en liacutenea de PHP
httpwwwphpnetdocsphp
ASPNET Lorenz Patrick (2003) ASPNET 20 Revealed Apress
ASPNET documentacioacuten y guiacuteas en liacutenea de ASPNET
httpaspnet
CC-BY-NC-ND bull PID_00150463 19 Introduccioacuten al mundo de los estaacutendares web
3 El modelo de estaacutendares web HTML CSS y JavaScriptJonathan Lane
En el uacuteltimo apartado hemos visto brevemente las herramientas de construc-
cioacuten baacutesicas de la web HTML (o XHTML) CSS y JavaScript Ahora es el mo-
mento de ampliar un poco maacutes y observarlos individualmente queacute hacen y
coacutemo interaccionan entre ellos para crear una paacutegina web
31 iquestPor queacute separar
Eacutesta es generalmente la primera pregunta que se formula sobre los estaacutendares
web Se puede crear el contenido el estilo y el formato soacutelo utilizando HTML
elementos de tipo de letra para el estilo y tablas HTML para el formato de ma-
nera que iquestpor queacute preocuparse de este asunto de XHTMLCSS El uso de ta-
blas para el formato etc es como se soliacutea hacer en los malos tiempos del
disentildeo web y mucha gente todaviacutea lo hace de esta manera (aunque no se de-
beriacutea de hacer) y de hecho es uno de los motivos por los que hemos creado
esta asignatura Aquiacute no trataremos estos meacutetodos Eacutestas son las razones maacutes
importantes para utilizar CSS y HTML en vez de meacutetodos obsoletos
1) Eficiencia del coacutedigo cuanto mayores sean los archivos maacutes tardaraacuten en
descargarse y maacutes dinero le costaraacute a algunas personas (algunas personas toda-
viacutea pagan por megabyte descargado) Por lo tanto no se debe malgastar el an-
cho de banda con paacuteginas grandes abarrotadas de informacioacuten de estilo y de
formato en cada archivo HTML Una alternativa mucho mejor es que los ar-
chivos HTML esteacuten desglosados y limpios e incluir la informacioacuten de estilo y
de formato soacutelo una vez en un archivo CSS independiente o en varios
2) Facilidad de mantenimiento en relacioacuten con el uacuteltimo punto si la infor-
macioacuten de estilo y formato soacutelo se especifica en un sitio quiere decir que soacutelo
habraacute que hacer actualizaciones en un lugar si se quiere cambiar el aspecto de
la paacutegina web iquestPrefeririacuteais tener que actualizar esta informacioacuten en cada paacute-
gina de vuestra web No lo creo
3) Accesibilidad los usuarios de la web con problemas visuales pueden
utilizar una tipo de software conocido como ldquolector de pantallardquo para ac-
ceder a la informacioacuten mediante el sonido en vez de la vista literalmente
les lee la paacutegina Ademaacutes el software de introduccioacuten de datos mediante la
voz que utilizan las personas con problemas de movilidad tambieacuten se be-
neficia de las paacuteginas web con una semaacutentica bien construida De manera
muy parecida al lector de pantalla que utiliza las instrucciones del teclado
para navegar por los encabezamientos enlaces y formularios un usuario
Eficiencia del coacutedigo
Para ver un caso real de este hecho en accioacuten podeacuteis ver el artiacuteculo sobre la reescritura de Slashdot en A List Apart don-de el autor tomoacute una paacutegina web muy popular y la reescri-bioacute en XHTMLCSS httpwwwalistapartcomarticlesslashdot
CC-BY-NC-ND bull PID_00150463 20 Introduccioacuten al mundo de los estaacutendares web
que interaccione mediante voz utilizaraacute instrucciones con su voz Los do-
cumentos web marcados semaacutenticamente en vez de presentacionalmente
pueden resultar maacutes faacuteciles de navegar y la informacioacuten que contienen es
maacutes faacutecil de encontrar por parte del usuario En otras palabras cuanto maacutes
raacutepidamente ldquoentre en materiardquo (el contenido) mejor Los lectores de pan-
talla no pueden acceder al texto dentro de imaacutegenes y encuentran confusos
algunos usos de JavaScript Aseguraos de que el contenido maacutes importante
estaacute disponible para todo el mundo
4) Compatibilidad de dispositivos ya que vuestra paacutegina XHTML es simple-
mente etiquetado normal sin informacioacuten de estilo se puede reformatear
para diferentes dispositivos con atributos ampliamente variados (por ejemplo
el tamantildeo de pantalla) simplemente aplicando una hoja de estilos alternativa
podeacuteis hacerlo de varias maneras Podeacuteis ver los artiacuteculos de devoperacom
para obtener recursos al respecto CSS tambieacuten permite especificar hojas de es-
tilo diferentes a nivel nativo para distintos meacutetodos de presentacioacuten o tipos de
soporte (por ejemplo visualizacioacuten en pantalla impresioacuten visualizacioacuten en
un dispositivo moacutevil etc)
5) Motores de buacutesqueda en la web probablemente os interesaraacute que vues-
tras paacuteginas web sean faacuteciles de encontrar al buscar en Google o en otros mo-
tores de busca Un motor de buacutesqueda utiliza un crawler o arantildea web que es
una pieza de software especializada para leer vuestras paacuteginas Si esta arantildea tu-
viera problemas para encontrar el contenido de vuestras paacuteginas o interpretara
mal lo que es importante porque no habeacuteis definido los encabezamientos
como encabezamientos etc entonces seguro que vuestra posicioacuten en los re-
sultados de busca se veraacute afectada
6) Es simplemente una buena praacutectica se trata de un motivo un poco del
tipo ldquoporque lo digo yordquo pero hablad con cualquier desarrollador o disentildeador
web profesional consciente de los estaacutendares y seguro que os dice que separar
el contenido el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacioacuten
32 Etiquetado la base de cada paacutegina
httpdevoperacomarticlesmobile
HTML y XHTML son lenguajes de etiquetado formados por elemen-
tos que contienen atributos (algunos opcionales y otros obligatori-
os) Estos elementos se utilizan para etiquetar los diferentes tipos de
contenidos en los documentos especificando que cada trozo de con-
tenido se debe entregar supuestamente como en los navegadores web
(por ejemplo encabezamientos paacuterrafos tablas listas con vintildeetas
etc)
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 18 Introduccioacuten al mundo de los estaacutendares web
Resumen
Hasta aquiacute el recorrido por la sala de maacutequinas de Internet Este apartado real-
mente soacutelo trata de pasada muchos de los temas que incluye pero resulta uacutetil por-
que los pone en perspectiva entre ellos y muestra coacutemo se relacionan y funcionan
entre siacute Todaviacutea queda mucho por aprender sobre la sintaxis real del lenguaje que
conforma el HTML el CSS y JavaScript y esto es lo que haremos a continuacioacuten
el apartado siguiente se centra en el modelo de estaacutendares web HTML CSS y Ja-
vaScript de desarrollo web y da un vistazo al coacutedigo de la paacutegina web
Preguntas de repaso
1 Realizad una breve descripcioacuten de HTML y HTTP y explicad la diferencia en-
tre los dos
2 Explicad la funcioacuten de un navegador web
3 Navegad por Internet durante 5-10 minutos e intentad encontrar algunos
tipos diferentes de contenidos texto normal imaacutegenes HTML paacuteginas dinaacute-
micas como paacuteginas PHP y NET (aspx) PDF documentos de Word peliacuteculas
Flash etc Acceded a algunos de estos contenidos y pensad coacutemo os los mues-
tra el ordenador
4 iquestCuaacutel es la diferencia entre una paacutegina estaacutetica y una paacutegina dinaacutemica
5 Encontrad una lista de coacutedigos de error HTTP enumerad cinco y explicad
queacute significa cada uno de ellos
Lecturas complementarias
En esta asignatura ya no volveremos a hablar de los lenguajes dinaacutemicos pero
hemos creado una lista de recursos en caso de que queraacuteis leeacuteroslos
Rails Fernandez Obie (2007) The Rails Way Addison-Wesley Professional Ruby
Series
Railss screencasts
httpwwwrubyonrailsorgscreencasts
PHP Powers David (2006) PHP Solutions Dynamic web development made easy
friends of ED
Documentacioacuten en liacutenea de PHP
httpwwwphpnetdocsphp
ASPNET Lorenz Patrick (2003) ASPNET 20 Revealed Apress
ASPNET documentacioacuten y guiacuteas en liacutenea de ASPNET
httpaspnet
CC-BY-NC-ND bull PID_00150463 19 Introduccioacuten al mundo de los estaacutendares web
3 El modelo de estaacutendares web HTML CSS y JavaScriptJonathan Lane
En el uacuteltimo apartado hemos visto brevemente las herramientas de construc-
cioacuten baacutesicas de la web HTML (o XHTML) CSS y JavaScript Ahora es el mo-
mento de ampliar un poco maacutes y observarlos individualmente queacute hacen y
coacutemo interaccionan entre ellos para crear una paacutegina web
31 iquestPor queacute separar
Eacutesta es generalmente la primera pregunta que se formula sobre los estaacutendares
web Se puede crear el contenido el estilo y el formato soacutelo utilizando HTML
elementos de tipo de letra para el estilo y tablas HTML para el formato de ma-
nera que iquestpor queacute preocuparse de este asunto de XHTMLCSS El uso de ta-
blas para el formato etc es como se soliacutea hacer en los malos tiempos del
disentildeo web y mucha gente todaviacutea lo hace de esta manera (aunque no se de-
beriacutea de hacer) y de hecho es uno de los motivos por los que hemos creado
esta asignatura Aquiacute no trataremos estos meacutetodos Eacutestas son las razones maacutes
importantes para utilizar CSS y HTML en vez de meacutetodos obsoletos
1) Eficiencia del coacutedigo cuanto mayores sean los archivos maacutes tardaraacuten en
descargarse y maacutes dinero le costaraacute a algunas personas (algunas personas toda-
viacutea pagan por megabyte descargado) Por lo tanto no se debe malgastar el an-
cho de banda con paacuteginas grandes abarrotadas de informacioacuten de estilo y de
formato en cada archivo HTML Una alternativa mucho mejor es que los ar-
chivos HTML esteacuten desglosados y limpios e incluir la informacioacuten de estilo y
de formato soacutelo una vez en un archivo CSS independiente o en varios
2) Facilidad de mantenimiento en relacioacuten con el uacuteltimo punto si la infor-
macioacuten de estilo y formato soacutelo se especifica en un sitio quiere decir que soacutelo
habraacute que hacer actualizaciones en un lugar si se quiere cambiar el aspecto de
la paacutegina web iquestPrefeririacuteais tener que actualizar esta informacioacuten en cada paacute-
gina de vuestra web No lo creo
3) Accesibilidad los usuarios de la web con problemas visuales pueden
utilizar una tipo de software conocido como ldquolector de pantallardquo para ac-
ceder a la informacioacuten mediante el sonido en vez de la vista literalmente
les lee la paacutegina Ademaacutes el software de introduccioacuten de datos mediante la
voz que utilizan las personas con problemas de movilidad tambieacuten se be-
neficia de las paacuteginas web con una semaacutentica bien construida De manera
muy parecida al lector de pantalla que utiliza las instrucciones del teclado
para navegar por los encabezamientos enlaces y formularios un usuario
Eficiencia del coacutedigo
Para ver un caso real de este hecho en accioacuten podeacuteis ver el artiacuteculo sobre la reescritura de Slashdot en A List Apart don-de el autor tomoacute una paacutegina web muy popular y la reescri-bioacute en XHTMLCSS httpwwwalistapartcomarticlesslashdot
CC-BY-NC-ND bull PID_00150463 20 Introduccioacuten al mundo de los estaacutendares web
que interaccione mediante voz utilizaraacute instrucciones con su voz Los do-
cumentos web marcados semaacutenticamente en vez de presentacionalmente
pueden resultar maacutes faacuteciles de navegar y la informacioacuten que contienen es
maacutes faacutecil de encontrar por parte del usuario En otras palabras cuanto maacutes
raacutepidamente ldquoentre en materiardquo (el contenido) mejor Los lectores de pan-
talla no pueden acceder al texto dentro de imaacutegenes y encuentran confusos
algunos usos de JavaScript Aseguraos de que el contenido maacutes importante
estaacute disponible para todo el mundo
4) Compatibilidad de dispositivos ya que vuestra paacutegina XHTML es simple-
mente etiquetado normal sin informacioacuten de estilo se puede reformatear
para diferentes dispositivos con atributos ampliamente variados (por ejemplo
el tamantildeo de pantalla) simplemente aplicando una hoja de estilos alternativa
podeacuteis hacerlo de varias maneras Podeacuteis ver los artiacuteculos de devoperacom
para obtener recursos al respecto CSS tambieacuten permite especificar hojas de es-
tilo diferentes a nivel nativo para distintos meacutetodos de presentacioacuten o tipos de
soporte (por ejemplo visualizacioacuten en pantalla impresioacuten visualizacioacuten en
un dispositivo moacutevil etc)
5) Motores de buacutesqueda en la web probablemente os interesaraacute que vues-
tras paacuteginas web sean faacuteciles de encontrar al buscar en Google o en otros mo-
tores de busca Un motor de buacutesqueda utiliza un crawler o arantildea web que es
una pieza de software especializada para leer vuestras paacuteginas Si esta arantildea tu-
viera problemas para encontrar el contenido de vuestras paacuteginas o interpretara
mal lo que es importante porque no habeacuteis definido los encabezamientos
como encabezamientos etc entonces seguro que vuestra posicioacuten en los re-
sultados de busca se veraacute afectada
6) Es simplemente una buena praacutectica se trata de un motivo un poco del
tipo ldquoporque lo digo yordquo pero hablad con cualquier desarrollador o disentildeador
web profesional consciente de los estaacutendares y seguro que os dice que separar
el contenido el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacioacuten
32 Etiquetado la base de cada paacutegina
httpdevoperacomarticlesmobile
HTML y XHTML son lenguajes de etiquetado formados por elemen-
tos que contienen atributos (algunos opcionales y otros obligatori-
os) Estos elementos se utilizan para etiquetar los diferentes tipos de
contenidos en los documentos especificando que cada trozo de con-
tenido se debe entregar supuestamente como en los navegadores web
(por ejemplo encabezamientos paacuterrafos tablas listas con vintildeetas
etc)
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 19 Introduccioacuten al mundo de los estaacutendares web
3 El modelo de estaacutendares web HTML CSS y JavaScriptJonathan Lane
En el uacuteltimo apartado hemos visto brevemente las herramientas de construc-
cioacuten baacutesicas de la web HTML (o XHTML) CSS y JavaScript Ahora es el mo-
mento de ampliar un poco maacutes y observarlos individualmente queacute hacen y
coacutemo interaccionan entre ellos para crear una paacutegina web
31 iquestPor queacute separar
Eacutesta es generalmente la primera pregunta que se formula sobre los estaacutendares
web Se puede crear el contenido el estilo y el formato soacutelo utilizando HTML
elementos de tipo de letra para el estilo y tablas HTML para el formato de ma-
nera que iquestpor queacute preocuparse de este asunto de XHTMLCSS El uso de ta-
blas para el formato etc es como se soliacutea hacer en los malos tiempos del
disentildeo web y mucha gente todaviacutea lo hace de esta manera (aunque no se de-
beriacutea de hacer) y de hecho es uno de los motivos por los que hemos creado
esta asignatura Aquiacute no trataremos estos meacutetodos Eacutestas son las razones maacutes
importantes para utilizar CSS y HTML en vez de meacutetodos obsoletos
1) Eficiencia del coacutedigo cuanto mayores sean los archivos maacutes tardaraacuten en
descargarse y maacutes dinero le costaraacute a algunas personas (algunas personas toda-
viacutea pagan por megabyte descargado) Por lo tanto no se debe malgastar el an-
cho de banda con paacuteginas grandes abarrotadas de informacioacuten de estilo y de
formato en cada archivo HTML Una alternativa mucho mejor es que los ar-
chivos HTML esteacuten desglosados y limpios e incluir la informacioacuten de estilo y
de formato soacutelo una vez en un archivo CSS independiente o en varios
2) Facilidad de mantenimiento en relacioacuten con el uacuteltimo punto si la infor-
macioacuten de estilo y formato soacutelo se especifica en un sitio quiere decir que soacutelo
habraacute que hacer actualizaciones en un lugar si se quiere cambiar el aspecto de
la paacutegina web iquestPrefeririacuteais tener que actualizar esta informacioacuten en cada paacute-
gina de vuestra web No lo creo
3) Accesibilidad los usuarios de la web con problemas visuales pueden
utilizar una tipo de software conocido como ldquolector de pantallardquo para ac-
ceder a la informacioacuten mediante el sonido en vez de la vista literalmente
les lee la paacutegina Ademaacutes el software de introduccioacuten de datos mediante la
voz que utilizan las personas con problemas de movilidad tambieacuten se be-
neficia de las paacuteginas web con una semaacutentica bien construida De manera
muy parecida al lector de pantalla que utiliza las instrucciones del teclado
para navegar por los encabezamientos enlaces y formularios un usuario
Eficiencia del coacutedigo
Para ver un caso real de este hecho en accioacuten podeacuteis ver el artiacuteculo sobre la reescritura de Slashdot en A List Apart don-de el autor tomoacute una paacutegina web muy popular y la reescri-bioacute en XHTMLCSS httpwwwalistapartcomarticlesslashdot
CC-BY-NC-ND bull PID_00150463 20 Introduccioacuten al mundo de los estaacutendares web
que interaccione mediante voz utilizaraacute instrucciones con su voz Los do-
cumentos web marcados semaacutenticamente en vez de presentacionalmente
pueden resultar maacutes faacuteciles de navegar y la informacioacuten que contienen es
maacutes faacutecil de encontrar por parte del usuario En otras palabras cuanto maacutes
raacutepidamente ldquoentre en materiardquo (el contenido) mejor Los lectores de pan-
talla no pueden acceder al texto dentro de imaacutegenes y encuentran confusos
algunos usos de JavaScript Aseguraos de que el contenido maacutes importante
estaacute disponible para todo el mundo
4) Compatibilidad de dispositivos ya que vuestra paacutegina XHTML es simple-
mente etiquetado normal sin informacioacuten de estilo se puede reformatear
para diferentes dispositivos con atributos ampliamente variados (por ejemplo
el tamantildeo de pantalla) simplemente aplicando una hoja de estilos alternativa
podeacuteis hacerlo de varias maneras Podeacuteis ver los artiacuteculos de devoperacom
para obtener recursos al respecto CSS tambieacuten permite especificar hojas de es-
tilo diferentes a nivel nativo para distintos meacutetodos de presentacioacuten o tipos de
soporte (por ejemplo visualizacioacuten en pantalla impresioacuten visualizacioacuten en
un dispositivo moacutevil etc)
5) Motores de buacutesqueda en la web probablemente os interesaraacute que vues-
tras paacuteginas web sean faacuteciles de encontrar al buscar en Google o en otros mo-
tores de busca Un motor de buacutesqueda utiliza un crawler o arantildea web que es
una pieza de software especializada para leer vuestras paacuteginas Si esta arantildea tu-
viera problemas para encontrar el contenido de vuestras paacuteginas o interpretara
mal lo que es importante porque no habeacuteis definido los encabezamientos
como encabezamientos etc entonces seguro que vuestra posicioacuten en los re-
sultados de busca se veraacute afectada
6) Es simplemente una buena praacutectica se trata de un motivo un poco del
tipo ldquoporque lo digo yordquo pero hablad con cualquier desarrollador o disentildeador
web profesional consciente de los estaacutendares y seguro que os dice que separar
el contenido el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacioacuten
32 Etiquetado la base de cada paacutegina
httpdevoperacomarticlesmobile
HTML y XHTML son lenguajes de etiquetado formados por elemen-
tos que contienen atributos (algunos opcionales y otros obligatori-
os) Estos elementos se utilizan para etiquetar los diferentes tipos de
contenidos en los documentos especificando que cada trozo de con-
tenido se debe entregar supuestamente como en los navegadores web
(por ejemplo encabezamientos paacuterrafos tablas listas con vintildeetas
etc)
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 20 Introduccioacuten al mundo de los estaacutendares web
que interaccione mediante voz utilizaraacute instrucciones con su voz Los do-
cumentos web marcados semaacutenticamente en vez de presentacionalmente
pueden resultar maacutes faacuteciles de navegar y la informacioacuten que contienen es
maacutes faacutecil de encontrar por parte del usuario En otras palabras cuanto maacutes
raacutepidamente ldquoentre en materiardquo (el contenido) mejor Los lectores de pan-
talla no pueden acceder al texto dentro de imaacutegenes y encuentran confusos
algunos usos de JavaScript Aseguraos de que el contenido maacutes importante
estaacute disponible para todo el mundo
4) Compatibilidad de dispositivos ya que vuestra paacutegina XHTML es simple-
mente etiquetado normal sin informacioacuten de estilo se puede reformatear
para diferentes dispositivos con atributos ampliamente variados (por ejemplo
el tamantildeo de pantalla) simplemente aplicando una hoja de estilos alternativa
podeacuteis hacerlo de varias maneras Podeacuteis ver los artiacuteculos de devoperacom
para obtener recursos al respecto CSS tambieacuten permite especificar hojas de es-
tilo diferentes a nivel nativo para distintos meacutetodos de presentacioacuten o tipos de
soporte (por ejemplo visualizacioacuten en pantalla impresioacuten visualizacioacuten en
un dispositivo moacutevil etc)
5) Motores de buacutesqueda en la web probablemente os interesaraacute que vues-
tras paacuteginas web sean faacuteciles de encontrar al buscar en Google o en otros mo-
tores de busca Un motor de buacutesqueda utiliza un crawler o arantildea web que es
una pieza de software especializada para leer vuestras paacuteginas Si esta arantildea tu-
viera problemas para encontrar el contenido de vuestras paacuteginas o interpretara
mal lo que es importante porque no habeacuteis definido los encabezamientos
como encabezamientos etc entonces seguro que vuestra posicioacuten en los re-
sultados de busca se veraacute afectada
6) Es simplemente una buena praacutectica se trata de un motivo un poco del
tipo ldquoporque lo digo yordquo pero hablad con cualquier desarrollador o disentildeador
web profesional consciente de los estaacutendares y seguro que os dice que separar
el contenido el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacioacuten
32 Etiquetado la base de cada paacutegina
httpdevoperacomarticlesmobile
HTML y XHTML son lenguajes de etiquetado formados por elemen-
tos que contienen atributos (algunos opcionales y otros obligatori-
os) Estos elementos se utilizan para etiquetar los diferentes tipos de
contenidos en los documentos especificando que cada trozo de con-
tenido se debe entregar supuestamente como en los navegadores web
(por ejemplo encabezamientos paacuterrafos tablas listas con vintildeetas
etc)
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 21 Introduccioacuten al mundo de los estaacutendares web
Como seriacutea de esperar los elementos definen el tipo de contenido actual
mientras que los atributos definen informacioacuten adicional sobre estos elemen-
tos como una ID para identificar el elemento o una ubicacioacuten para que le se-
ntildeale un enlace Deberiacuteais tener en cuenta que se supone que el etiquetado es
el maacutes semaacutentico posible es decir se supone que debe describir la funcioacuten del
contenido de la manera maacutes cuidada posible La figura 1 muestra la anatomiacutea
de un elemento (X)HTML caracteriacutestico
Figura 1
Anatomiacutea de un elemento (X)HTML
Teniendo esto en cuenta iquestcuaacutel es la diferencia entre HTML y XHTML
321 iquestQueacute es el XHTML
La X de XHTML quiere decir ldquoextensiblerdquo es decir ampliable Una de las pre-
guntas maacutes habituales para los que empiezan es ldquoiquesthe de utilizar HTML o XHT-
ML y queacute diferencia hayrdquo Son casi lo mismo la principal diferencia radica
en la estructura Podeacuteis consultar la tabla 1 para ver las diferencias
Tabla 1 Diferencias entre HTML y XHTML
httpwwwcstutfi~jkorpelahtmlemptyhtmlhtml
httpwwww3orgTRxhtml1guidelineshtml
HTML XHTML
Los elementos y atributos no distinguen entre mayuacutesculas y minuacutesculas lth1gt es lo mismo que ltH1gt
Los elementos y atributos distinguen entre mayuacutesculas y minuacutesculas todos estaacuten en minuacutesculas
Algunos elementos no necesitan una etiqueta de cierre (por ejemplo paacuterrafos ltpgt) mientras que otros (denominados elementos vaciacuteos) prohiacuteben la marca de cierre (por ejemplo las imaacutegenes ltimggt)
Todos los elementos se deben cerrar claramente (por ejemplo ltpgtA paragraphltpgt) Los elementos sin contenido se pueden cerrar utilizando una barra inclinada en la marca inicial (por ejemplo lthrgtlthrgt y lthrgt significan lo mismo)
Si serviacutes el texto XHTML como texthtml debereacuteis utilizar la sintaxis abreviada en todos los elementos que estaacuten definidos como ldquovaciacuteosrdquoy colocar un espacio antes de la barra inclinada Deberiacuteais utilizar la forma larga (con marcas inicial y final independientes) en cualquier elemento que no esteacute definido como vaciacuteo aunque no tenga ninguacuten contenido
Algunos valores de atributos pueden estar escritos sin estar entre comillas
Los valores de los atributos se han de incluir entre comillas
Algunos atributos se pueden abreviar (por ejemplo ltoption selectedgt)
Se debe utilizar la forma de atributo entera para todos los atributos (por ejemplo ltoption selected=ldquoselectedrdquogt)
Los servidores habriacutean de servir el HTML al cliente con un tipo de medio texthtml
El XHTML deberiacutea utilizar el tipo de medio applicationxhtml+xml pero se puede utilizar applicationxml textxml o texthtml Si se utiliza texthtml se deberiacutean seguir las directrices de compatibilidad de HTML porque los navegadores lo trataraacuten como HTML (y utilizar la recuperacioacuten de errores para representar las diferencias entre idiomas)
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 22 Introduccioacuten al mundo de los estaacutendares web
aPor ahora os recomendamos que no os preocupeacuteis mucho sobre si estaacuteis escri-
biendo HTML o XHTML Seguid los consejos que se dan a lo largo de esta asig-
natura y utilizad el tipo de documento HTML e ireacuteis por el buen camino
322 Validacioacuten iquestqueacute es eso
aComo HTML y XHTML son estaacutendares establecidos (y CSS tambieacuten en rea-
lidad) el World Wide Web Consortium (W3C) ha creado una gran herra-
mienta denominada validador que comprueba automaacuteticamente las paacuteginas
que queraacuteis y sentildeala cualquier problema-error que pueda tener vuestro coacutedi-
go como la falta de etiquetas de cierre o la falta de comillas alrededor de los
atributos
bull El validador de HTML estaacute disponible en liacutenea en httpvalidatorw3org
Detectaraacute automaacuteticamente si estaacuteis utilizando HTML o XHTML y queacute tipo
de documento estaacuteis usando
bull Si quereacuteis comprobar el CSS el validador estaacute disponible en la red
33 CSS antildeadimos un poco de estilo
Hay tres maneras baacutesicas de aplicar estilos mediante CSS redefinicioacuten de un
elemento aplicacioacuten de un estilo a una ID o aplicacioacuten de un estilo a una cla-
se Echemos un vistazo a cada uno de ellos
1) Redefinicioacuten de un elemento Podeacuteis cambiar la forma en la que cualquier
elemento de (X)HTML se muestra mediante la definicioacuten de una regla de estilo
Ejemplo de redefinicioacuten de un elemento
Si quereacuteis que todos los paacuterrafos sean a doble espacio y en verde podeacuteis antildeadir esta de-claracioacuten en CSS
Ahora todo el contenido incluido entre las etiquetas ltpgtltpgt tendraacute una altura de liacuteneadoble y seraacute de color verde
Para obtener maacutes informacioacuten sobre tipos de documentos HTML podeacuteis consultar el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
Encontrareacuteis maacutes informacioacuten sobre la validacioacuten en el apartado 6 del moacutedulo ldquoEl texto central de HTMLrdquo Tambieacuten encontrareacuteis maacutes informacioacuten sobre los tipos de documentos en el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo
httpjigsaww3orgcss-validator
Las hojas de estilo en cascada permiten un control preciso sobre el for-
mato y la disposicioacuten del documento Podeacuteis cambiar o antildeadir colores
fondo tipo de letra tamantildeos y estilos de tipo de letra e incluso la po-
sicioacuten de elementos de vuestra paacutegina web en diferentes lugares
p line-height 2 color green
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 23 Introduccioacuten al mundo de los estaacutendares web
2) Definicioacuten de una ID Podeacuteis darle a un elemento un atributo id para identi-
ficarlo de manera uacutenica en una paacutegina (cada ID se puede utilizar soacutelo una vez por
paacutegina) por ejemplo id=ldquonavigation_menurdquo Esto os permite un control maacutes
preciso sobre el formato de una paacutegina
Ejemplo de definicioacuten de una ID
Si soacutelo quereacuteis que un paacuterrafo determinado sea a doble espacio y destacado con texto ver-de asignad una ID
Y entonces aplicadle una regla CSS tal como se indica a continuacioacuten
Esto soacutelo aplicaraacute la regla CSS al paacuterrafo de la paacutegina con un atributo id del tipo hig-hlight(el siacutembolo de almohadilla es soacutelo una convencioacuten de CSS para indicar que se tra-ta de una ID)
3) Definicioacuten de una clase Las clases son como las ID excepto que se puede
tener maacutes de un elemento de la misma clase en cada paacutegina
Ejemplo de definicioacuten de una clase
Siguiendo con nuestro ejemplo de doble espacio si quereacuteis que los dos primeros paacute-rrafos de una paacutegina sean a doble espacio y esteacuten destacados les habriacuteais de antildeadirclases como
Y entonces aplicadles una regla CSS como se indica a continuacioacuten
a
En este caso highlightes una clase no una ID el punto soacutelo es una convencioacuten de CSSpara indicar que se trata de una clase
El ejemplo siguiente os daraacute una idea mejor de coacutemo CSS aplica estilos a
HTML
ltp id=ldquohighlightrdquogtParagraph contentltpgt
highlight line-height 2 color green
ltp class=ldquohighlightrdquogtParagraph contentltpgtltp class=ldquohighlightrdquogtThe content of the second paragraphltpgt
highlight line-height 2 color green
Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 24 Introduccioacuten al mundo de los estaacutendares web
34 JavaScript adicioacuten de comportamiento a las paacuteginas web
Por uacuteltimo JavaScript es el lenguaje de script que se utiliza para antildeadir com-
portamiento a sus paacuteginas web
La mayoriacutea del JavaScript moderno funciona localizando un elemento HTML
de destino y despueacutes hacieacutendole algo igual que el CSS pero la manera de fun-
cionamiento la sintaxis etc es bastante diferente
aEl JavaScript es un tema maacutes complicado y extenso que el HTML y el CSS de
modo que para poner las cosas simples y evitar confusiones tan pronto no lo
incluimos en el ejemplo siguiente
35 Una paacutegina de ejemplo
Hay muchos detalles que no hemos incluido pero lo trataremos todo durante
esta asignatura de disentildeo web Por ahora os presentaremos una paacutegina real de
ejemplo soacutelo para que veaacuteis una pequentildea muestra de aquello con lo que tra-
bajareacuteis durante el resto de apartados
El ejemplo que presentamos a continuacioacuten es una paacutegina de referencias que
se puede utilizar para citar referencias al final de pongamos por caso un en-
sayo psicoloacutegico sobre la dinaacutemica de grupo de un equipo de desarrollo web
o un informe para trabajar sobre el uso de Internet de banda ancha en Estados
Unidos Tened en cuenta que si sois muy estrictos con la redaccioacuten acadeacutemica
canoacutenica este ejemplo muestra el formato APA (teniacutea que elegir uno) Descar-
gaos el coacutedigo
351 indexhtml
JavaScript se puede utilizar para validar los datos que se introducen en
un formulario (discriminar si estaacuten en el formato correcto o no) para
ofreceros la funcionalidad de arrastrar y soltar para cambiar estilos so-
bre la marcha para animar elementos de las paacuteginas como los menuacutes
para tratar las funciones de los botones y un milloacuten de cosas maacutes
De hecho no volvereacuteis a ver el JavaScript hasta una asignatura posterior
httpdevoperacomarticlesview4-the-web-standards-model-html-css-aarticle4_exampleszip
1 ltDOCTYPE html PUBLIC ldquo-W3CDTD XHTML 10 TransitionalENrdquo ldquohttpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdrdquogt2 lthtml xmlns=ldquohttpwwww3org1999xhtmlrdquo xmllang=ldquoenrdquo lang=ldquoenrdquogt3 ltheadgt4 ltmeta http-equiv=ldquoContent-Typerdquo content=ldquotexthtml charset=utf-8rdquogt5 lttitlegtReferenceslttitlegt6 ltstyle type=ldquotextcssrdquogt7 import url(ldquostylescssrdquo)8 ltstylegt9 ltheadgt
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 25 Introduccioacuten al mundo de los estaacutendares web
No haremos una diseccioacuten de este archivo liacutenea por liacutenea ya que vereacuteis mu-
chos ejemplos en futuros apartados sin embargo a continuacioacuten se indican
algunos elementos importantes que cabe tener en cuenta
aLa liacutenea 1 es lo que se denomina declaracioacuten de tipo de documento o doctype En este
caso la paacutegina es ldquoXHTML 10 Transitionalrdquo El tipo de documento especifica una
serie de reglas que debe seguir el etiquetado y gracias a las que se puede validar
Las liacuteneas 5 a 7 importan un archivo CSS a la paacutegina los estilos contenidos en
este archivo se aplicaraacuten a los diferentes elementos de la paacutegina En el siguien-
te subapartado vereacuteis el contenido del archivo CSS que trata todo el formato
de la paacutegina
Hemos asignado una clase diferente a cada uno de los diferentes tipos de refe-
rencia Hacerlo de esta manera nos permite aplicar un estilo diferente a cada
tipo de referencia asiacute en nuestro ejemplo hemos puesto un color diferente a
la derecha de cada referencia para que sea maacutes faacutecil analizar la lista
Ahora demos un vistazo al CSS que aplica estilo al HTML
352 stylescss
10 ltbodygt11 ltdiv id=ldquobggraphicrdquogtltdivgt12 ltdiv id=ldquoheaderrdquogt13 lth1gtReferenceslth1gt14 ltdivgt15 ltdiv id=ldquoreferencesrdquogt16 ltcite class=ldquoarticlerdquogtAdams J R (2008) The Benefits of Valid Markup A Post-Modernistic
Approach to Developing Web Sites ltemgtThe Journal of Awesome Web Standards 157ltemgt 57-62ltcitegt
17 ltcite class=ldquobookrdquogtBaker S (2006) ltemgtValidate Your Pages Or Elseltemgt Detroit MI Are you out of your mind publishersltcitegt
18 ltcite class=ldquoarticlerdquogtLane J C (2007) Dude HTML 4 thats like so 2000 ltemgtThe Journal that Publishes Genius 12 ltemgt 12-34ltcitegt
19 ltcite class=ldquowebsiterdquogtSmith J Q (2005) ltemgtWeb Standards and Youltemgt Retrieved May 3 2007 from lta href=ldquohttpwwwwebstandardsandyoucomrdquogtWeb standards and youltagt ltcitegt
20 ltdivgt21 ltdiv id=ldquofooterrdquogt22 ltpgtThe content of this page is copyright copy 2007 23 lta href=ldquomailtojonathanlanegmailcomrdquogtJ Laneltagtltpgt24 ltdivgt25 ltbodygt26 lthtmlgt
Podeacuteis ver el apartado 3 del moacutedulo ldquoFundamentos de HTMLrdquo para encontrar maacutes informacioacuten sobre tipo de documentos
body background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 26 Introduccioacuten al mundo de los estaacutendares web
Hemos exagerado un poco con el estilo de esta paacutegina y hemos antildeadido algu-
nos bonitos efectos de fondo para mostraros algunas de las cosas que se pue-
den conseguir con el CSS
La liacutenea 1 establece algunos valores predeterminados para el documento
como el color del texto y del fondo el ancho del borde que se debe antildeadir en
torno al texto etc Algunas personas no se preocuparaacuten de indicar expliacutecita-
references cite margin 1em 0 0 3em text-indent -3em display block font-style normal padding-right 3px
website border-right 5px solid blue
book border-right 5px solid red
article border-right 5px solid green
footer font-size 05em border-top 1px solid 000 margin-top 20px
footer a color 000 text-decoration none
footer ahover text-decoration underlinebody background fff url(imagesgradbgjpg) top left repeat-x color 000 margin 0 padding0 border 0 font-family Verdana Arial sans-serif font-size 1em
div width 800px margin 0 auto
bggraphic background url(imagespenpng) top left no-repeat height 278px width 362px position absolute left 50 z-index 100
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 27 Introduccioacuten al mundo de los estaacutendares web
mente valores predeterminados como eacutestos y la mayoriacutea de los navegadores
modernos aplicaraacuten sus propios valores predeterminados pero es una buena
idea ya que le permite un control mayor sobre coacutemo se veraacute vuestra paacutegina
web en diferentes navegadores
En la liacutenea siguiente hemos establecido la anchura de paacutegina en 800 px (aun-
que en este caso podriacuteamos haber especificado un porcentaje para que la paacute-
gina se expandacontraiga en funcioacuten del tamantildeo de la ventana del
navegador) La configuracioacuten de maacutergenes que hemos utilizado garantizaraacute
que el contenido de la paacutegina siempre se mantenga centrado en la ventana
Las imaacutegenes PNG semitransparentes no funcionan en Internet Explorer 6 o
versiones anteriores pero funcionan praacutecticamente en todos los navegadores
modernos podeacuteis consultar la correccioacuten de JavaScript para IE por parte de
Dean Edward para una solucioacuten para IE 6 a este problema que tambieacuten resuel-
ve algunos de los problemas de compatibilidad con CSS de IE 6
Pasemos ahora a fijarnos en las imaacutegenes de fondo utilizadas en la paacutegina (se
aplican utilizando las declaraciones de fondo url) En esta paacutegina tenemos 3
elementos de fondos diferentes El primero es una gradacioacuten de azul a blanco
que empieza desde la parte superior de la paacutegina En segundo lugar hemos uti-
lizado un PNG semitransparente para el graacutefico de la pluma para crear un poco
de contraste con el texto que tiene encima y respetar la gradacioacuten Por uacuteltimo
hemos utilizado otro PNG para el fondo del encabezamiento de paacutegina Le da
al tiacutetulo un poco maacutes de contraste y ofrece un efecto de calidad
El ejemplo queda como se ve en la figura 2
Figura 2
El ejemplo acabado con los estilos aplicados
Resumen
XHTML CSS y JavaScript no tienen nada de complicado Son simplemente
una evolucioacuten de la web Si ya habeacuteis tenido un poco de contacto con HTML
lo podeacuteis aprovechar perfectamente Todo lo que sabeacuteis sigue siendo vaacutelido
soacutelo hay que tratar algunos conceptos de manera diferente (y tener un poco
maacutes de cuidado con el etiquetado)
httpcodegooglecompie7-js
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 28 Introduccioacuten al mundo de los estaacutendares web
Aparte de tener la satisfaccioacuten de un trabajo bien hecho el desarrollo de los
estaacutendares web es totalmente loacutegico Los argumentos en contra del desarrollo
con estaacutendares son que se debe invertir mucho tiempo y es muy pesado hacer
que un disentildeo funcione en distintos navegadores Se podriacutea utilizar el argu-
mento contrario para hacer que un formato no basado en estaacutendares funcione
en diferentes dispositivos y con futuras versiones de navegadores iquestCoacutemo se
puede tener la certeza de que un etiquetado que se sostiene con agujas se veraacute
bien en Opera 120 Firefox 50 e IE 100 No se puede a no ser que se sigan
algunas reglas
Preguntas de repaso
1 iquestCuaacutel es la diferencia entre una clase y una ID
2 iquestPara queacute sirven XHTML CSS y JavaScript en una paacutegina web
3 Tomad el archivo indexhtml del ejemplo y cambiad el formato utilizando
soacutelo CSS (os recomendamos editar el archivo utilizando un editor de texto
como el Bloc de Notas o Text Wrangler) No hagaacuteis ninguacuten cambio al HTML
a) Antildeadid un icono para cada uno de los diferentes tipos de referencia (un ico-
no diferente para artiacuteculos libros y recursos web) Generad vuestros propios
iconos para este propoacutesito y haced que aparezcan junto con los diferentes ti-
pos de referencia utilizando soacutelo CSS
b) Ocultad el aviso de copyright de la parte inferior de la paacutegina
c) Cambiad el aspecto del tiacutetulo conseguid que destaque
4 iquestQueacute tipo de cosas podriacuteais hacer con CSS para lograr que este ejemplo fun-
cione bien con un navegador de teleacutefono moacutevil
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 29 Introduccioacuten al mundo de los estaacutendares web
4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidadJonathan Lane
Hasta ahora hemos hablado sobre el maravilloso ideal de los estaacutendares web
Los estaacutendares web permiten una interoperabilidad entre todos los navegado-
res web en todos los sistemas operativos e incluso en todos los dispositivos
electroacutenicos disponibles Pero iquestes eacutesta la realidad iquestTodos los navegadores
cumplen los estaacutendares al 100 iquestEstaacuten utilizando adecuadamente los estaacuten-
dares web todos los desarrolladores web iquestConstruyen los desarrolladores web
una paacutegina utilizando estaacutendares web y ya se quedan tranquilos pensando que
su disentildeo funcionaraacute en todas partes
La respuesta realmente sencilla a esta uacuteltima pregunta es no aunque se trata
de una situacioacuten ideal estaacute muy alejada de la realidad
41 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web
Antes de continuar la pregunta que probablemente os esteacute pasando por la ca-
beza es iquestcoacutemo se sabe si una paacutegina web utiliza estaacutendares web iquestTiene un as-
pecto diferente a cualquier otra paacutegina web Siacute y no Las paacuteginas web que
cumplen los estaacutendares web si estaacuten correctamente desarrolladas no deben
parecer diferentes de las paacuteginas web codificadas mediante un etiquetado que
es un batiburrillo o que se sujeta con pinzas No obstante el coacutedigo fuente de
la paacutegina web puede parecer bastante diferente (intentad hacer clic con el bo-
toacuten secundario del ratoacuten o pulsando la tecla Ctrl sobre una paacutegina web y se-
leccionad la opcioacuten ldquoCoacutedigo fuenterdquo o ldquoVer el coacutedigo fuenterdquo la terminologiacutea
exacta depende del navegador)
Una paacutegina web que cumpla los estaacutendares tendraacute un etiquetado ordenado y
claro con poco o sin formato incrustado en la misma paacutegina Es posible que os
resulte difiacutecil notarlo a primera vista pero creedme las personas con dificul-
tades visuales que utilizan lectores de pantalla y motores de buacutesqueda lo no-
taraacuten enseguida En el uacuteltimo apartado ya hemos hablado de las ventajas de
utilizar los estaacutendares web
La manera maacutes sencilla de comprobar la compatibilidad de los estaacutendares
es utilizar una praacutectica herramienta disponible en liacutenea denominada va-
lidador
bull El World Wide Web Consortium (W3C) tiene disponible el validador gratui-
tamente (podeacuteis consultar la figura 1) Podeacuteis (y seriacutea necesario) utilizar esta httpvalidatorw3org
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 30 Introduccioacuten al mundo de los estaacutendares web
herramienta para comprobar errores de HTML o XHTML en cualquier paacutegina
web que esteacuteis desarrollando
bull El CSS se puede comprobar utilizando el validador de CSS
Visitad libremente estos enlaces y probad algunas de las paacuteginas web que maacutes
os gusten
Figura 1
El servicio de validacioacuten de etiquetado del W3C comprueba vuestras paacuteginas e indica cualquier error de etiquetado
aValidar siempre las paacuteginas que se crean es soacutelo la mitad del proceso iquestCoacutemo
podemos comprobar si los navegadores cumplen los estaacutendares El Proyecto
de estaacutendares web ha desarrollado una serie de pruebas denominadas pruebas
Acid que utilizan algunas reglas complejas de HTML y CSS (ademaacutes de otro eti-
quetado y coacutedigo) para ver si un navegador puede reproducir correctamente
diferentes pantallas de prueba La uacuteltima versioacuten de la prueba Acid Acid3 to-
daviacutea estaacute en proceso de creacioacuten
42 Compatibilidad de los estaacutendares en las paacuteginas
actualmente
iquestUtilizan las principales webs los estaacutendares o simplemente recogen cuatro co-
sas y ya estaacute Echemos una ojeada a unas cuantas empresas y veamos queacute pun-
tuacioacuten reciben mediante el servicio de validacioacuten de etiquetado del W3C Os
sorprenderiacutea cuaacutentas grandes paacuteginas web no pasan las pruebas de validacioacuten
de estaacutendares no os desanimeacuteis porque no hay motivo para no poder hacerlo
mejor y que vuestras paacuteginas siacute se validen correctamente Cuando leaacuteis los si-
Disponible en httpjigsaww3orgcss-validator
Podeacuteis leer maacutes cosas sobre las pruebas Acid en la paacutegina web de acidtestsorg y tambieacuten podeacuteis visitar las paacuteginas de prueba reales para poner a prueba vuestro navegadorhttpwwwacidtestsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 31 Introduccioacuten al mundo de los estaacutendares web
guientes informes tened en cuenta que cuanto mayor y complicada sea la paacute-
gina web maacutes difiacutecil seraacute validarla en general (hay otros factores que se deben
tener en cuenta como las tecnologiacuteas utilizadas)
421 Amazon iquestcomprar con estaacutendares
Es posible que si alguna vez habeacuteis realizado alguna compra en liacutenea hayaacuteis
visitado Amazoncom (o una de las webs especiacuteficas por paiacutes) Amazon es un
megaalmaceacuten del ciberespacio que ofrece de todo desde libros hasta CD e in-
cluso alimentos en algunas zonas Ahora bien iquestpasariacutea Amazoncom la prueba
de validacioacuten Podeacuteis comprobarlo en la figura 2
Figura 2
iexclAmazoncom falla estrepitosamente No soacutelo tiene etiquetado no vaacutelido sino que ni siquiera declaran un tipo de documento(explicando queacute versioacuten de HTML o XHTML utilizan)
A Amazon todaviacutea le queda mucho por hacer con respecto a compatibilidad con
los estaacutendares Desconocemos queacute sucede en Amazon pero si se nos permite es-
pecular un poco diriacuteamos que teniendo en cuenta que Amazon ya hace tiempo
que funciona probablemente han utilizado el mismo software para su paacutegina
web durante toda su existencia Como los estaacutendares web no han recibido la su-
ficiente atencioacuten hasta comienzos de este siglo es muy probable que el sistema
que utiliza Amazon para vender productos en liacutenea se desarrollara mucho antes
cuando los estaacutendares web no eran realmente aceptados ni publicitados No lo sa-
bemos a ciencia cierta pero intuimos que Amazon se encuentra en el caso de
aquellos que se mantienen con lo que les funciona
422 CNN iquestnoticias estandarizadas
iquestSeguro que las organizaciones de noticias son entes semaacutenticos CNNcom es
una de las paacuteginas web de medios mayor de todo el mundo Al tener recursos
globales e informar sobre las noticias a medida que suceden seguramente ten-
draacuten un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vaacutelido iquestno Podeacuteis comprobarlo en la figura 3
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 32 Introduccioacuten al mundo de los estaacutendares web
Figura 3
CNNcom (el 15 de abril del 2008) no supera la validacioacuten con 33 errores Se menciona un tipo de documentoHTML 401 transicional pero gran parte de su etiquetado se parece mucho a XHTML
33 errores no estaacute mal trataacutendose de una web de dimensiones y complejidad
como las de CNN Puede que estos 33 errores se produzcan (y de nuevo esta-
mos especulando) por que el sistema de gestioacuten de contenidos que utiliza no
esteacute del todo preparado para producir etiquetado que cumpla los estaacutendares
o podriacutea tratarse de una coleccioacuten de errores de etiquetado por parte de un per-
sonal de produccioacuten que se especializa en redactar noticias y no en producir
webs cualquier explicacioacuten es verosiacutemil
423 Apple el maacuteximo de elegancia en disentildeo iquesty en validacioacuten
Apple es famosa por sus productos de hardware y software bonitos y funcio-
nales Sus anuncios de productos son casi como experiencias religiosas para
multitudes de fieles seguidores La web de Apple (podeacuteis ver la figura 4) a me-
nudo se considera muy bien disentildeada y organizada sin embargo iquestpasariacutea la
prueba de validacioacuten
Figura 4
A Applecom le falta muy poco para tener un etiquetado HTML 401 transicional vaacutelido Entre los seis errores quetiene hay una mezcla de errores de etiquetado y un caso de uso de etiquetas especiacuteficas de Safari
httpapplecom
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 33 Introduccioacuten al mundo de los estaacutendares web
La web de Apple se acerca mucho a la validacioacuten Realmente soacutelo seriacutea nece-
sario que alguien le dedicara cinco minutos para corregir los errores y hacer
que la paacutegina supere la prueba de validacioacuten No obstante el uacutenico error que
mencionariacuteamos brevemente es que Apple ha decidido utilizar un atributo es-
peciacutefico de Safari en su cuadro de busca (dando al cuadro de busca el atributo
type=ldquosearchrdquo) En Safari esto permitiraacute ver una lista de buscas recientes
pinchando sobre un pequentildeo icono de lupa En otros navegadores como Ope-
ra o Internet Explorer se veraacute soacutelo como un cuadro de texto normal
424 Un pequentildeo sondeo de compatibilidad de estaacutendares
En vez de ver muchos ejemplos como eacuteste hemos comprimido el resto de
webs sondeadas en una praacutectica graacutefica de tarta Hemos mirado unas 40 webs
corporativas de la lista Fortune 500 y tambieacuten las clasificaciones Alexa de webs
con maacutes traacutefico y en la figura 5 se muestra lo que hemos averiguado
Figura 5
Wl 85 de las webs sondeadas no pasaron la validacioacuten de ninguna manera Algunas presentaban fallosespectaculares de hasta mil errores otras teniacutean soacutelo un par de errores aquiacute y alliacute
43 iquestPor queacute hay tan pocas paacuteginas que cumplan los estaacutendares
Nos preguntamos iquestpor queacute por queacute no validan Esto puede ser un poco dra-
maacutetico pero como miacutenimo tiene un tono similar a la pregunta que os estaacuteis
haciendo en este momento iquestPor queacute se validan tan pocas webs Ya hemos
mencionado algunas de las razones posibles ndashcosas como sistemas de comer-
cio electroacutenico o sistemas de gestioacuten de contenidos heredadosndash pero tambieacuten
hay otros motivos subyacentes
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 34 Introduccioacuten al mundo de los estaacutendares web
431 Educacioacuten
La facultad en la que estudieacute teniacutea un programa de sistemas de informacioacuten
de gestioacuten (management information systems) un programa de ciencias infor-
maacuteticas y un programa de nuevos medios cada uno de los cuales teniacutea asigna-
turas relacionadas con la produccioacuten de webs pero aunque ensentildeaban
muchas cosas de manera eficiente en ninguna de eacutestas habiacutea realmente mu-
cha cobertura sobre coacutemo codificar realmente una web La sensacioacuten general
que tengo cuando reviso muchas asignaturas universitarias es que los lengua-
jes web como el HTML el CSS y JavaScript se encuentran bajo el umbral teacutec-
nico de la mayoriacutea de los programas de ciencias informaacuteticas y por encima del
de la mayoriacutea de los programas de MISNuevos medios
A donde quiero ir a parar en este caso es que muchos cursos educativos no cu-
bren este tipo de materias con mucho detalle Apostariacutea a que si le preguntaacuteis
a diez desarrolladores que trabajen con estaacutendares web doacutende aprendieron a
utilizarlos nueve de ellos responderiacutean que son autodidactas (y el otro no res-
ponderiacutea porque tiene demasiado trabajo intentando que su web se visualice
bien con el IE 6)
El World Wide Web Consortium (W3C) que es el grupo responsable de desa-
rrollar los estaacutendares y la Web Standards Project (WaSP) se estaacuten tomando se-
riamente este reto y estaacuten presionando realmente para que mejore la
aceptacioacuten de los estaacutendares web tanto por parte de los fabricantes de nave-
gadores como por parte de los desarrolladores
De hecho el verdadero motivo por el que se creoacute esta asignatura que estaacuteis le-
yendo es proporcionar un conjunto adecuado de materiales de aprendizaje
para los estaacutendares web y un medio para utilizar este material para aprender
de manera gratuita En definitiva intentamos eliminar algunos motivos maacutes
(dudamos de si utilizar la palabra excusas en este caso) por los que la gente
no estaacute adoptando los estaacutendares web Realmente no hay excusa para no uti-
lizarlos teniendo en cuenta las ventajas que suponen (tal como se ha visto en
el subapartado 31)
432 Motivos empresariales
Una web que visitamos frecuentemente destinada a emprendedores implica-
dos en poner en marcha nuevas iniciativas basadas en la web ha alojado una
serie de discusiones sobre el uso de los estaacutendares web en ldquoaplicaciones web
20rdquo Generalmente existe un intercambio interesante entre aquellos que
creen que se deberiacutean utilizar los estaacutendares web porque tiene sentido (por to-
dos los motivos que hemos tratado anteriormente) y aquellos que simple-
mente dicen que no importa
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 35 Introduccioacuten al mundo de los estaacutendares web
El fondo de la cuestioacuten es que los navegadores web interpretaraacuten el coacutedigo por
malo que sea No es necesario validar vuestras paacuteginas para que se visualicen
correctamente en la mayoriacutea de los navegadores Desde una perspectiva em-
presarial donde el tiempo es oro iquestpara queacute preocuparse de invertir maacutes tiem-
po a fin de que se validen Si podeacuteis arreglar cuatro coacutedigos en forma de tabla
en 30 minutos o pasaros 30 minutos codificando vuestra paacutegina en HTML y
CSS y 30 minutos para aseguraros de que se valida y funciona correctamente
en cualquier navegador y el resultado final tiene el mismo aspecto en la ma-
yoriacutea de los navegadores web iquestqueacute os parece maacutes faacutecil y raacutepido
Mucha gente de mi generacioacuten (casi llego a la treintena en el momento de re-
dactar esto) aprendioacute a crear webs utilizando tablas para el formato y etiquetas
de tipo de letra para la tipografiacutea Puede parecer abrumador volver a aprender
a hacer algo cuando lo que estaacutes haciendo todaviacutea ldquofuncionardquo (todaviacutea se ve
bien en la mayoriacutea de los navegadores web) Los empresarios generalmente no
distinguen la diferencia no me he encontrado nunca con que un director me
hablara de la calidad de mi etiquetado durante una revisioacuten de rendimiento
De manera que realmente iquestcuaacutel es el incentivo
Pues lo que yo creo es (ya podeacuteis adivinar cuaacutel es mi posicioacuten) que el plantea-
miento del coacutedigo desordenado o mal hecho tiene muy poca visioacuten de futuro
Seguacuten mi experiencia redisentildear una web basada en estaacutendares es mucho maacutes
faacutecil que tener que convertir un caos de paacuteginas incorrectamente codificadas
(he hecho las dos cosas) Todaviacutea debe llegar la utopiacutea que prometen XHTML
y CSS en la que soacutelo se ha de tocar el CSS para redisentildear una web pero me he
acercado mucho
Tambieacuten hay que tener en cuenta que vereacuteis muchos maacutes anuncios de trabajo
actualmente pidiendo conocimientos de estaacutendares web que nunca
Tambieacuten hay algunos motivos empresariales directos que se deben tener en
cuenta En general el uso de estaacutendares web mejora la posicioacuten de una web en
las clasificaciones de los motores de buacutesqueda (el orden en el que aparecen las
webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad
de encontrarla Ademaacutes el uso de estaacutendares y buenas praacutecticas generalmente
haraacute que la paacutegina web sea maacutes accesible para las personas con discapacidades
que intentan utilizarla y para los usuarios que intentan acceder a la web con
teleacutefonos moacuteviles Maacutes usuarios y un aumento de la visibilidad siempre es bue-
no para el negocio
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcioacuten de es-
taacutendares web sobre coacutemo comprobar si los estaacutendares se estaacuten utilizando co-
rrectamente en una web cuaacutentos utilizan los estaacutendares web correctamente y
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg
CC-BY-NC-ND bull PID_00150463 36 Introduccioacuten al mundo de los estaacutendares web
los motivos por los que la gente no adopta los estaacutendares Como ya habeacuteis vis-
to anteriormente los motivos no son tan imperativos y deberiacutean ser faacuteciles de
superar
Asiacute pues iquestqueacute debe hacer un desarrollador web emprendedor iquestPensaacuteis que
son importantes los estaacutendares web (y seguir leyendo esta asignatura) o sois
de los que poneacuteis en marcha un editor graacutefico y empezaacuteis a maquetar la web
con tablas
Digaacutemoslo de esta manera la queja individual mayor que he leiacutedo de personas
que dicen que el desarrollo basado en estaacutendares es una peacuterdida de tiempo es
que se tarda demasiado en aprender los estaacutendares web en vez de los meacutetodos
obsoletos y desarrollar webs que funcionen con todos los navegadores Enton-
ces iquestpor queacute no empezar aprendiendo la manera correcta de hacerlo y aho-
rrarse unos cuantos problemas Habeacuteis decidido aprender coacutemo crear webs y
debeacuteis hacerlo de una manera u otra por lo tanto iquestpor queacute no aprender a ha-
cerlo correctamente
Preguntas de repaso
1 Hemos visto muchas ldquograndesrdquo webs y si validan o no Pasad por el valida-
dor algunas de las webs que visitaacuteis a menudo iquestValidan Si no es asiacute mirad
algunos de los errores para haceros una idea de por queacute fallan
2 iquestQueacute es un tipo de documento (doctype) iquestDe queacute se encarga
3 iquestQueacute argumentos podeacuteis dar a favor de los estaacutendares web para los negocios
Lecturas complementarias
Servicio de validacioacuten de marcado del W3C
httpvalidatorw3org
Web del W3C (con informacioacuten sobre distintos estaacutendares y recomendaciones
para el futuro)
httpwwww3org
El Proyecto de estaacutendares web
httpwwwwebstandardsorg