Introducción al mundo de los estándares web · CC-BY-NC-ND • PID_00150463 5 Introducción al...

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



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


4 Estaacutendares web un bonito suentildeo pero iquestcuaacutel es la realidad 2941 iquestCoacutemo se comprueba el cumplimiento de los estaacutendares web 29


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




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


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)


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


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


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


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


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


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


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-


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


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


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


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


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


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


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


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)


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)


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


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


Empezaremos a ver el CSS con maacutes detalle en el apartado 8 del moacutedulo ldquoEl texto central de HTMLrdquo


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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



Iacutendice








Resumen 10






221 Texto normal 15





Resumen 18










351 indexhtml 24

352 stylescss 25

Resumen 27





actualmente 30









Resumen 35























































































































1994













































































vez

























Resumen











Preguntas de repaso






nas web





entes








httpwebstandardsorg


A List Apart


CSS Zen Garden



































maacutes populares











dor


































atenderla








Figura 1













devoperacom















nectores

221 Texto normal






sitarias










de una paacutegina








CSS aplicados

Cambios de formato


line-height 2em


color green


Figura 2
































































Resumen








Preguntas de repaso


tre los dos






tra el ordenador








Series

Railss screencasts



friends of ED





httpaspnet





































































una aplicacioacuten









etc)









Figura 1











HTML XHTML






















atributos




































a



HTML



























gaos el coacutedigo

351 indexhtml



















de la paacutegina






352 stylescss

















































Figura 2


Resumen
















algunas reglas

Preguntas de repaso













































lidador








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org





actualmente 30









Resumen 35























































































































1994













































































vez

























Resumen











Preguntas de repaso






nas web





entes








httpwebstandardsorg


A List Apart


CSS Zen Garden



































maacutes populares











dor


































atenderla








Figura 1













devoperacom















nectores

221 Texto normal






sitarias










de una paacutegina








CSS aplicados

Cambios de formato


line-height 2em


color green


Figura 2
































































Resumen








Preguntas de repaso


tre los dos






tra el ordenador








Series

Railss screencasts



friends of ED





httpaspnet





































































una aplicacioacuten









etc)









Figura 1











HTML XHTML






















atributos




































a



HTML



























gaos el coacutedigo

351 indexhtml



















de la paacutegina






352 stylescss

















































Figura 2


Resumen
















algunas reglas

Preguntas de repaso













































lidador








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org























































































































1994













































































vez

























Resumen











Preguntas de repaso






nas web





entes








httpwebstandardsorg


A List Apart


CSS Zen Garden



































maacutes populares











dor


































atenderla








Figura 1













devoperacom















nectores

221 Texto normal






sitarias










de una paacutegina








CSS aplicados

Cambios de formato


line-height 2em


color green


Figura 2
































































Resumen








Preguntas de repaso


tre los dos






tra el ordenador








Series

Railss screencasts



friends of ED





httpaspnet





































































una aplicacioacuten









etc)









Figura 1











HTML XHTML






















atributos




































a



HTML



























gaos el coacutedigo

351 indexhtml



















de la paacutegina






352 stylescss

















































Figura 2


Resumen
















algunas reglas

Preguntas de repaso













































lidador








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org















































































vez

























Resumen











Preguntas de repaso






nas web





entes








httpwebstandardsorg


A List Apart


CSS Zen Garden



































maacutes populares











dor


































atenderla








Figura 1













devoperacom















nectores

221 Texto normal






sitarias










de una paacutegina








CSS aplicados

Cambios de formato


line-height 2em


color green


Figura 2
































































Resumen








Preguntas de repaso


tre los dos






tra el ordenador








Series

Railss screencasts



friends of ED





httpaspnet





































































una aplicacioacuten









etc)









Figura 1











HTML XHTML






















atributos




































a



HTML



























gaos el coacutedigo

351 indexhtml



















de la paacutegina






352 stylescss

















































Figura 2


Resumen
















algunas reglas

Preguntas de repaso













































lidador








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org




Preguntas de repaso






nas web





entes








httpwebstandardsorg


A List Apart


CSS Zen Garden



































maacutes populares











dor


































atenderla








Figura 1













devoperacom















nectores

221 Texto normal






sitarias










de una paacutegina








CSS aplicados

Cambios de formato


line-height 2em


color green


Figura 2
































































Resumen








Preguntas de repaso


tre los dos






tra el ordenador








Series

Railss screencasts



friends of ED





httpaspnet





































































una aplicacioacuten









etc)









Figura 1











HTML XHTML






















atributos




































a



HTML



























gaos el coacutedigo

351 indexhtml



















de la paacutegina






352 stylescss

















































Figura 2


Resumen
















algunas reglas

Preguntas de repaso













































lidador








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org




































maacutes populares











dor


































atenderla








Figura 1













devoperacom















nectores

221 Texto normal






sitarias










de una paacutegina








CSS aplicados

Cambios de formato


line-height 2em


color green


Figura 2
































































Resumen








Preguntas de repaso


tre los dos






tra el ordenador








Series

Railss screencasts



friends of ED





httpaspnet





































































una aplicacioacuten









etc)









Figura 1











HTML XHTML






















atributos




































a



HTML



























gaos el coacutedigo

351 indexhtml



















de la paacutegina






352 stylescss

















































Figura 2


Resumen
















algunas reglas

Preguntas de repaso













































lidador








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org











dor


































atenderla








Figura 1













devoperacom















nectores

221 Texto normal






sitarias










de una paacutegina








CSS aplicados

Cambios de formato


line-height 2em


color green


Figura 2
































































Resumen








Preguntas de repaso


tre los dos






tra el ordenador








Series

Railss screencasts



friends of ED





httpaspnet





































































una aplicacioacuten









etc)









Figura 1











HTML XHTML






















atributos




































a



HTML



























gaos el coacutedigo

351 indexhtml



















de la paacutegina






352 stylescss

















































Figura 2


Resumen
















algunas reglas

Preguntas de repaso













































lidador








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org






atenderla








Figura 1













devoperacom















nectores

221 Texto normal






sitarias










de una paacutegina








CSS aplicados

Cambios de formato


line-height 2em


color green


Figura 2
































































Resumen








Preguntas de repaso


tre los dos






tra el ordenador








Series

Railss screencasts



friends of ED





httpaspnet





































































una aplicacioacuten









etc)









Figura 1











HTML XHTML






















atributos




































a



HTML



























gaos el coacutedigo

351 indexhtml



















de la paacutegina






352 stylescss

















































Figura 2


Resumen
















algunas reglas

Preguntas de repaso













































lidador








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org












nectores

221 Texto normal






sitarias










de una paacutegina








CSS aplicados

Cambios de formato


line-height 2em


color green


Figura 2
































































Resumen








Preguntas de repaso


tre los dos






tra el ordenador








Series

Railss screencasts



friends of ED





httpaspnet





































































una aplicacioacuten









etc)









Figura 1











HTML XHTML






















atributos




































a



HTML



























gaos el coacutedigo

351 indexhtml



















de la paacutegina






352 stylescss

















































Figura 2


Resumen
















algunas reglas

Preguntas de repaso













































lidador








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org




Figura 2
































































Resumen








Preguntas de repaso


tre los dos






tra el ordenador








Series

Railss screencasts



friends of ED





httpaspnet





































































una aplicacioacuten









etc)









Figura 1











HTML XHTML






















atributos




































a



HTML



























gaos el coacutedigo

351 indexhtml



















de la paacutegina






352 stylescss

















































Figura 2


Resumen
















algunas reglas

Preguntas de repaso













































lidador








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org










































Resumen








Preguntas de repaso


tre los dos






tra el ordenador








Series

Railss screencasts



friends of ED





httpaspnet





































































una aplicacioacuten









etc)









Figura 1











HTML XHTML






















atributos




































a



HTML



























gaos el coacutedigo

351 indexhtml



















de la paacutegina






352 stylescss

















































Figura 2


Resumen
















algunas reglas

Preguntas de repaso













































lidador








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org







































































una aplicacioacuten









etc)









Figura 1











HTML XHTML






















atributos




































a



HTML



























gaos el coacutedigo

351 indexhtml



















de la paacutegina






352 stylescss

















































Figura 2


Resumen
















algunas reglas

Preguntas de repaso













































lidador








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org











Figura 1











HTML XHTML






















atributos




































a



HTML



























gaos el coacutedigo

351 indexhtml



















de la paacutegina






352 stylescss

















































Figura 2


Resumen
















algunas reglas

Preguntas de repaso













































lidador








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org













atributos




































a



HTML



























gaos el coacutedigo

351 indexhtml



















de la paacutegina






352 stylescss

















































Figura 2


Resumen
















algunas reglas

Preguntas de repaso













































lidador








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org

















a



HTML



























gaos el coacutedigo

351 indexhtml



















de la paacutegina






352 stylescss

















































Figura 2


Resumen
















algunas reglas

Preguntas de repaso













































lidador








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org
























gaos el coacutedigo

351 indexhtml



















de la paacutegina






352 stylescss

















































Figura 2


Resumen
















algunas reglas

Preguntas de repaso













































lidador








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org













de la paacutegina






352 stylescss

















































Figura 2


Resumen
















algunas reglas

Preguntas de repaso













































lidador








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org











































Figura 2


Resumen
















algunas reglas

Preguntas de repaso













































lidador








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org












algunas reglas

Preguntas de repaso













































lidador








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org


































lidador








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org








os gusten

Figura 1










actualmente



















Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org













Figura 2



















Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org




Figura 3















Figura 4


httpapplecom















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org

















Figura 5










431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org




431 Educacioacuten
















bien con el IE 6)













el subapartado 31)

































acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org



























acercado mucho











no para el negocio

Resumen







superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org






superar




con tablas








cerlo correctamente

Preguntas de repaso








httpvalidatorw3org


para el futuro)

httpwwww3org



Introducción al mundo de los estándares web · CC-BY-NC-ND • PID_00150463 5 Introducción al...

Documents

Transcript of Introducción al mundo de los estándares web · CC-BY-NC-ND • PID_00150463 5 Introducción al...