Lenguajes y Esta&#769 Ndares - Introduccio&#769 N Al Curri&#769 Culo de Esta&#769 Ndares Web-Contenidos PDF

Lenguajes y estndares - Introduccin al currculo de estndares web/contenidos
http://mosaic.uoc.edu/ac/le/es/[26/01/13 07:33:23]
Lenguajes y estndares
Introduccin al currculo de estndares web/contenidos
Accesibilidad : : :
1. Introduccin al currculo de estndares web/contenidos
Chris Mills. 8 de julio del 2008. Publicado en: currculum, principiante, web, estndares, curso
Tengo un sueo desde hace tiempo. Los ltimos 8 o 9 aos, mi trabajo se ha centrado mucho en la
enseanza, ya sea encargando y editando publicaciones tcnicas con el fin de ayudar a los dems a crear
algo interesante con la tecnologa, formando nuevos empleados en las diferentes empresas para las que he
trabajado o editando y redactando artculos de seminarios para ayudar a los dems a utilizar el software
Opera. Tambin me entusiasma la web y creo firmemente en los estndares web abiertos. Quera contribuir a
hacer que la web fuera un lugar mejor y creo que esto vuelve a tener que ver con la enseanza, ya sea
enseando a los dems cmo colaborar y tener ms respeto mutuo o ensendoles cmo hacer que sus
sitios web funcionen en todas las plataformas y dispositivos, y sean accesibles para personas discapacitadas.
Los estndares web son la clave para el ltimo objetivo, as que decid invertir mi tiempo y energa en algo
que les ayudara a mejorar la adopcin de estndares en la web actualmente y en el futuro. Le he dado
vueltas durante un tiempo, pero finalmente ha dado sus frutos con Opera: agradezco mucho a mis
estupendos jefes que me hayan pagado para hacerlo. Uno de mis sueos se ha hecho realidad finalmente.
As pues, en este artculo os presentar el resultado de una gran cantidad de trabajo en los ltimos meses
(ma y de muchas otras personas): el currculo de estndares web, un curso diseado para dar a todo el
mundo una buena base en diseo/desarrollo web, sea cual sea el destinatario, cuyo uso es completamente
gratuito, accesible y no requiere conocimientos previos. Como destinatarios pienso fundamentalmente en las
universidades, porque creo que de alguna manera los estndares de enseanza de los estndares web son
muy deficientes en muchas de ellas. He odo rumores de alumnos a los que se les ha bajado la nota por
utilizar estndares web en sus trabajos porque los esquemas de puntuacin son muy anticuados; tambin he
odo decir que hay empresarios que se desesperan porque, cuando entrevistan a graduados universitarios
para puestos relacionados con la web, ven que los graduados realmente no tienen ni idea sobre desarrollo
web en el mundo real. Si estis en una universidad progresista que s que ensea estndares web de
manera razonable, me quito el sombrero: poneos en contacto conmigo!
En este apartado trataremos lo siguiente:
Por qu son necesarios los estndares web? En este apartado trataremos brevemente las ventajas de
utilizar estndares web, por qu no se adoptan como se debera hacer y cmo este curso pretende
abordar estos temas.
Cmo est estructurado el curso. Lo que su nombre indica. Esta seccin tambin habla sobre cmo
deberan pensar los educadores a la hora de presentar el material para utilizarlo de manera eficaz en los
cursos.
Quin debera hacer este curso? Cuando digo "todo el mundo", qu quiero decir exactamente?
Contenidos. Pasad directamente a este subapartado si os cansis de mi palabrera y queris ir
directamente al aprendizaje.
Agradecimientos.
1.1. Por qu son necesarios los estndares web?
Los principales motivos por los que la adopcin de estndares web en su tarea de diseo/desarrollo web es
una idea tan buena se amplan en el artculo 4, pero los trataremos brevemente aqu como presentacin. El
uso de estndares web ofrece las siguientes ventajas:
1. Eficiencia del cdigo: como aprenderis a lo largo del curso, gran parte de las mejores prcticas en el
uso de estndares web se basan en la reutilizacin del cdigo: en el hecho de que se pueda separar el
contenido HTML de la informacin de estilo (CSS) y de comportamiento (J avaScript), lo que permite
mantener un tamao reducido de los ficheros y escribir el cdigo slo una vez y, ms adelante,
reutilizarlo siempre que sea necesario.
2. Facilidad de mantenimiento: esto est estrechamente relacionado con el ltimo punto; si se puede
escribir el cdigo HTML slo una vez y despus aplicar los estilos y el comportamiento siempre que sea
1/407
necesario utilizando clases y funciones, si se necesita cambiar algn elemento ms adelante, se puede
hacer el cambio slo en un lugar y que se traslade a todo el sitio web, sin tener que especificar este
cambio cada vez que sea necesario.
3. Accesibilidad: los dos puntos siguientes estn muy relacionados; uno de los grandes problemas de la
web es hacer que los sitios web sean accesibles para todo el mundo, independientemente de quien sea,
independientemente de su circunstancia. Esto incluye hacer que los sitios web sean utilizables por
personas con discapacidades como ceguera o problemas de visin y problemas motores (es decir,
personas con limitacin de movimientos y que es posible que no puedan usar adecuadamente las
manos, o nada en absoluto). Mediante el uso de estndares web y buenas prcticas, se puede conseguir
que los sitios web sean utilizables para este grupo de pblico de la web tan importante sin que haya que
hacer ningn esfuerzo adicional.
4. Compatibilidad de dispositivos: con esto nos referimos al hecho de garantizar que sus sitios web
funcionarn no slo en diferentes plataformas es decir, Windows, Mac, Linux, sino tambin con
dispositivos de navegacin alternativos, como los que hoy da pueden incluir los telfonos mviles,
televisores y consolas de juegos. Estos dispositivos tienen limitaciones como el tamao de pantalla, la
potencia de procesamiento, los mecanismos de control disponibles y otros, pero una vez ms la buena
noticia es que, utilizando estndares web y las mejores prcticas, est garantizado que los sitios web
funcionarn en la mayor parte de estos dispositivos. Hay ms telfonos mviles en el mundo que
ordenadores, muchos de los cuales son compatibles con Internet, de manera que os podis permitir
vosotros o vuestros clientes perderos este mercado? Para ms informacin sobre desarrollo web para
mviles, podis consultar algunos de los artculos relacionados en <dev.opera.com>.
5. Araas web y motores de bsqueda: con esto nos referimos a lo que se denomina "optimizacin de
motores de bsqueda", la prctica de hacer que los sitios web sean tan visibles como sea posible para
los llamados buscadores web que rastrean la web e indexan sitios web, y, por lo tanto, ofrecen mejores
posiciones de busca en sitios como Google. Existe toda una ciencia detrs (podis ver los artculos
sobre la optimizacin de motores de bsqueda como Intelligent site structure for better SEO! y Semantic
HTML and Search Engine Optimization), sin embargo, una vez ms, slo utilizando los estndares web
ya conseguiris que vuestro sitio sea ms visible en Google, Yahoo!, etc., lo cual es bueno para los
negocios.
No obstante, a pesar de estas ventajas, la mayor parte de los sitios no siguen los estndares web y muchos
desarrolladores web actualmente todava utilizan prcticas incorrectas y obsoletas. "Por qu?", os
preguntaris. Hay una serie de motivos para ello: algunos dirn que es por falta de formacin, por polticas
de empresa, por que no hay que aprender estndares si se les paga de todos modos, que son muy difciles
de aprender, que hay poca compatibilidad de los estndares en los navegadores web, etc. Examinemos con
ms detalle algunos de estos conceptos y, a continuacin, veamos los argumentos contrarios para
deshacernos de cualquier excusa que nos impida adoptar o aprender los estndares.
1. Falta de formacin: esto es un problema, pero es uno de los motivos principales por los que se ha
creado este curso. Muchas universidades no ensean los estndares web en sus cursos relacionados
con la web y muchos planes de estudios tienden a incluir prcticas obsoletas, muy difciles de cambiar a
causa de la burocracia. Los libros y cursos de formacin tienden a ser caros. Pero, un momento. Ahora
hemos ofrecido un curso que es gratuito y estamos yendo por las universidades, etc., para ayudarles a
hacer estos cambios, de manera que realmente no hay excusa posible en este caso.
2. Polticas de empresa: no cabe duda de que algunas empresas/instituciones todava tienen sitios web
realmente anticuados y obsoletos. Puede que tengan polticas que obliguen a sus empleados a utilizar
navegadores obsoletos, pero la situacin est mejorando y ahora que hay un curso gratuito disponible
para saber fcilmente cmo hacer cambios, las cosas deberan mejorar an ms. La actualizacin de un
sitio web a los estndares modernos anima a las empresas a actualizar los navegadores que utilizan
porque los sitios no se vern bien en navegadores obsoletos (aunque todava deberan funcionar en
navegadores antiguos). Las empresas tambin deberan animar a sus clientes a actualizarse. Tambin
existe un razonamiento empresarial slido: los sitios que utilizan estndares web, como se ha explicado
anteriormente, obtendrn mejores resultados en los motores de bsqueda y sern accesibles para
personas con discapacidades y usuarios de dispositivos alternativos. Se pueden permitir las empresas
ignorar a este pblico?
3. " No necesito aprenderlos" : sabemos que algunos desarrolladores an dicen: "Pero si estoy utilizando
prcticas obsoletas y an me pagan, por qu me debo preocupar de estas cosas nuevas?". Como se
ha dicho antes, hace que el cdigo sea ms eficiente, ms fcil de escribir y ms fcil de mantener.
Adems, permite escribir un cdigo moderno que es accesible y utilizable en dispositivos alternativos.
2/407
Es o no interesante? Tambin har que vuestro conjunto de habilidades sea a prueba de contingencias
futuras y lo har capaz de ganar ms. En la actualidad, hay muchas empresas que piden saber utilizar
los estndares web.
4. " Cuesta demasiado de aprender" : tonteras. Despus de digerir parte de este curso, veris qu fcil
es entender los conceptos bsicos del uso de estndares web, tanto si sois nuevos en el
desarrollo/diseo web como si ya conocis el tema y estis actualizando vuestro conjunto de
capacidades. Es tan difcil como utilizar los mtodos anticuados y desfasados, lo que no es nada difcil,
y, a pesar de todo, aporta muchas ventajas en comparacin con los mtodos antiguos.
5. Compatibilidad de los estndares en los navegadores: antes, la compatibilidad de los estndares en
los navegadores web sola diferir mucho y esto haca que conseguir que un sitio web funcionara en
diferentes navegadores fuera todo un dolor de cabeza. Pero actualmente esto ya ha pasado y los
navegadores actuales tienen todos una compatibilidad correcta con los estndares web. En ocasiones
an se necesita compatibilidad con navegadores antiguos que no disponen de una compatibilidad tan
buena, pero mediante el uso de las mejores prcticas actuales podis garantizar que los usuarios de
estos navegadores sigan teniendo una experiencia de usuario razonable.
As pues, como se puede ver, realmente no hay excusa para no adoptar los estndares web en su tarea de
desarrollo web. Como mnimo, si hacis este curso desde el punto de vista de un principiante, empezaris
con buen pie y aprenderis las mejores prcticas desde el comienzo en lugar de haber aprendido prcticas
incorrectas.
Nota
Estamos hablando de estas prcticas incorrectas en voz baja, como si fueran los
planes secretos de la Estrella de la Muerte o algo parecido. De hecho, en este curso
no trataremos estas prcticas detalladamente porque no creemos que debamos
hacerlo. Creemos que se las debera poner en el camino correcto, para empezar.
Probablemente os estaris preguntando qu son, de manera que hablemos un poco de
ellas.
Hace tiempo, la gente sola hacer cosas como planificar sus sitios web con tablas
gigantes, utilizando las diferentes celdas de la tabla para situar sus grficos, el texto,
etc. (la finalidad de las tablas no es sta y aade un etiquetado superfluo a la pgina).
Solan utilizar imgenes invisibles llamadas GIF espaciadores para ajustar con
precisin la colocacin de los elementos de la pgina (de hecho, la finalidad de las
imgenes no es sta, y, adems, aade un etiquetado superfluo a la pgina). Solan
escribir J avaScript que generaba mens, etc. a demanda (que no va bien para los que
no tienen desactivado J avaScript en sus navegadores, ni para las personas con
problemas visuales que utilizan lectores de pantalla porque se confunden con este
J avaScript) o que slo funcionaban en un navegador (qu sucede con la gente que
utiliza otros navegadores?). Solan insertar la informacin de estilo directamente en el
HTML utilizando elementos <f ont > (en realidad, son terribles para el mantenimiento y
aaden etiquetado superfluo a la pgina). Y muchos otros crmenes contra el
desarrollo web. Lo peor es que antes he dicho "hace tiempo", pero el hecho es que
muchos an hoy hacen cosas as.
El desarrollo web es una habilidad un poco confusa en general, pero las prcticas
incorrectas como stas provocan que sea an ms complicado. El uso de estndares
web y buenas prcticas, como se ha descrito en este curso, es la mejor alternativa.
1.2. Estructura del curso
El curso se compone de varios artculos, de los que habr ms de 50 cuando se haya acabado el curso
bsico, cada uno de ellos con miles de palabras. Cada artculo trata sobre un microtema especfico y, en
caso necesario, incluye antecedentes sobre el tema, teora esencial, ejemplos prcticos y guas paso a paso,
adems de preguntas de repaso para comprobar los conocimientos adquiridos.
Adems, en el futuro ofreceremos un programa de aprendizaje entero paso a paso, que repasar todo el
proceso de construccin de un sitio web de principio a fin.
Una manera lgica de impartir el curso es calcular en cuntas lecciones se puede ensear y dividirlas por el
nmero de artculos. Para cada leccin, debis hacer que los alumnos lean los artculos relacionados con la
3/407
leccin mencionada antes de que se imparta. A continuacin, podis repasar ejemplos prcticos durante la
leccin y hacer que los alumnos respondan a las preguntas de repaso despus de cada leccin.
Lgicamente, creo que una hora debera ser tiempo suficiente para repasar los conceptos contenidos en
cada artculo, siempre que los alumnos lean cada artculo antes de impartir las lecciones. En este curso hay
unas 50 horas de tiempo de clase y 50 horas de lectura preliminar.
Naturalmente, hay que tener en cuenta la cantidad de tiempo que se tarda en impartir el curso y qu se debe
cubrir exactamente en cada leccin, pero la experiencia es la clave.
1.3. Quin debera seguir este curso?
Se trata de un curso de estndares web que consta de varios artculos, dirigido a prcticamente todo el
mundo que quiera aprender diseo web basado en estndares desde cero. La finalidad es que el lector pase
de tener una mera familiaridad bsica con la navegacin a la web a ser competente en CSS y HTML y a
tener conocimientos bsicos de J avaScript y cmo encaja en el rompecabezas. Deberis dar bastantes
conocimientos para que se pueda empezar a pensar en entrar en el mercado laboral con confianza
(naturalmente, la experiencia no se puede ensear).
A quin va dirigido? Queremos que lo pueda hacer cualquier persona que desee aprender diseo web "de
la manera correcta":
1. Estudiantes y profesores universitarios: ya lo hemos comentado anteriormente, se trata de un
conjunto ideal de artculos a partir del que se puede crear un curso propio para impartirlo a los
estudiantes o utilizar parte de los artculos para completar otro curso. Si sois alumnos que ya estis
estudiando algn curso relacionado con la web, deberais utilizar este material para completar vuestros
conocimientos y presionar a vuestros profesores para que tambin lo puedan tener en cuenta.
Recomendara tambin a todos los profesores y conferenciantes que echen un vistazo a este material
para asegurarse de que las tcnicas cubiertas en sus cursos son buenas prcticas actuales.
2. Alumnos en edad preuniversitaria o universitaria: aunque este curso se ha concebido principalmente
para adultos, tambin se podra impartir perfectamente a alumnos ms jvenes; es cuestin de intentarlo
y ver cmo funciona.
3. Diseadores y desarrolladores web existentes: hay muchos desarrolladores y diseadores web en el
mercado que no estn utilizando los estndares web y las mejores prcticas, o que podran utilizar una
referencia fcilmente accesible para consultar dudas o utilizarlos para repasar sus conocimientos. A los
primeros, les recomiendo que le den una oportunidad a este curso y vean lo fcil que es y lo valioso que
resulta adoptar los estndares web. Para los ltimos, estoy seguro de que encontrarn este curso de
utilidad para ayudar a los dems, para repasar sus conocimientos, consultar hechos difciles de recordar
y encontrar argumentos para intentar convencer a jefes y clientes de que cosas como la accesibilidad
son muy tiles.
4. Educadores en empresas: se trata de una manera ideal de proporcionar una formacin nada cara a
los empleados.
5. Otras personas: si sois personas a quienes simplemente les apetece aprender algo sobre diseo y
desarrollo web, entonces, una vez ms, sta es una manera nada cara de contar con un poco de ayuda
para vuestro objetivo.
No espero que la gente pague para utilizar este curso. Se publica con una licencia de Creative Commons, de
modo que est disponible libremente para cualquiera que quiera utilizarlo mientras nos d el reconocimiento
adecuado.
1.4. Contenidos
Hay que tener en cuenta que se han publicado los primeros 39 artculos del currculo y que se publicarn
aproximadamente 10 ms tan pronto como sea posible para completar el curso.
Inicio
1. Material de introduccin, por Chris Mills (es lo que habis ledo hasta ahora). [versin original en
ingls]
4/407
HAY TRADUCCIONES DISPONIBLES. Hay traducciones disponibles del currculo de estndares web.
Introduccin al mundo de los estndares web
2. La historia de Internet y la web y la evolucin de los estndares web
3. Cmo funciona Internet?
4. El modelo de estndares web: HTML, CSS y J avaScript
5. Estndares web: un bonito sueo, pero cul es la realidad?
Conceptos de diseo web
Esta seccin no entrar en detalles de cdigos o etiquetado, y servir de introduccin al proceso de diseo
para ms tarde pasar a empezar a crear grficos, cdigo y presentar conceptos de AI, navegacin,
usabilidad, etc.
6. Arquitectura de la informacin: planificacin de una web
7. Qu necesita una buena pgina web?
8. Teora del color
9. Construccin del esqueleto de una pgina web
10. Combinaciones de color y modelos de diseo
11. La tipografa en la Web
Fundamentos de HTML
12. Conceptos bsicos de HTML
13. El elemento <head> del HTML
14. Elegir el doct ype correcto para los documentos HTML
El texto central de HTML
15. Etiquetar contenido textual en HTML
16. Listas HTML
17. Imgenes en HTML
18. Enlaces HTML: construimos una web!
19. Tablas HTML
20. Formularios HTML: conceptos bsicos
21. Elementos semnticos menos conocidos
22. Contenedores genricos: los elementos di v y span
23. Creacin de mltiples pginas con mens de navegacin
24. Validar el HTML
Accesibilidad
25. Conceptos bsicos de accesibilidad
26. Pruebas de accesibilidad
CSS
27. Conceptos bsicos de CSS
28. Herencia y cascada
29. Creacin de estilos de texto con CSS
30. El modelo de composicin de CSS: cajas, bordes, mrgenes, relleno
31. Imgenes de fondo en CSS
32. Estilos de listas y enlaces
33. Estilos de las tablas
34. Diseo, composicin y presentacin de formularios con CSS
35. Elementos flotantes y clearing
36. Posicionamiento esttico y relativo con CSS
37. Posicionamiento absoluto y fijo con CSS
Encabezamientos, pies, columnas y plantillas
38. Encabezamientos, pies, columnas y plantillas
5/407
Ben Buchanan empez a crear pginas web hace ms de diez aos, mientras
acababa licenciaturas de todo tipo de materias excepto las TI. Ha trabajado en
los sectores tanto pblico (universidad) como privado y en la remodelacin de
grandes sitios web, incluido el de The Australian y tres generaciones del sitio web
corporativo de la Universidad de Griffith. Actualmente trabaja de arquitecto de
soluciones para News Digital Media y escribe en el blog 200ok.
Fotografa: Andy Budd
Font: http://flickr.com/photos/
andybudd/98405468/
Mark Norman Francis ha trabajado con Internet desde antes de que se inventara
la web. En su ltimo empleo, trabaj en Yahoo! de front end architect de la
pgina web ms grande del mundo, donde defina mejores prcticas, estndares
de codificacin y calidad del desarrollo web en el mbito internacional.
Antes de trabajar en Yahoo! trabaj en Formula One Management, Purple
Interactive y City University en distintos puestos, incluidos desarrollo web,
programacin CGI y arquitectura de sistemas. Finge tener un blog en
<http://marknormanfrancis.com/>.
Linda Goin es licenciada en Bellas Artes con un minor en Empresariales y
marketing, y tiene un mster de Historia americana con un minor de la Reforma.
Aunque la ltima titulacin no parece encajar con la primera experiencia
educativa, Linda ha utilizado su experiencia de 25 aos de diseo in situ en
excavaciones arqueolgicas y en el estudio de la cultura material.
Agradecimientos
Son tantas las personas que me han ayudado a crear este curso que es imposible mencionarlas con detalle,
pero creo no haberme olvidado de nadie. Todas son grandes personas, de modo que no las perdis de vista,
id a sus charlas, comprad sus libros, leed sus blogs o haced cualquier otra cosa para apoyarlas. Os doy a
todos las gracias y os expreso mi admiracin.
1. Los autores: muchas gracias a Ben Buchanan, Tom Hughes-Croucher, Mark Norman "Norm" Francis,
Linda Goin, Paul Haine, J en Hanen, Benjamin Hawkes-Lewis, Ben Henick, Christian Heilmann, Roger
J ohansson, Peter-Paul Koch, J onathan Lane, Tommy Olsson, Nicole Sullivan y Mike West. Sin vosotros,
este curso no sera nada, literalmente.
2. El equipo de Opera: agradezco mucho a J an Standal, David Storey, al resto de mi equipo y a toda la
gente de Opera que creyeran en esta idea y me ayudaran a desarrollar el plan.
3. Las organizaciones: gracias a todos los de Yahoo! (a los autores, y a Sophie Major por su ayuda en la
organizacin y promocin), a WaSP (especialmente a Gareth Rushgrove, Stephanie Troeth y Aarron
Walter), a Britpack, a la gente de Geekup y a todas las universidades que mostraron inters por este
curso y por contribuir a su desarrollo.
4. Las personas: muchas gracias a estas personas maravillosas: Craig Saila, Sara Dodd, J ohn Allsopp,
Roan Lavery, Bruce Lawson, Alan White. Mis disculpas si me he dejado a alguien.
5. Los lectores: agradezco especialmente a todos los lectores su inters en la creacin de pginas web
de la manera correcta y tambin el hecho de tomarse la molestia de leer este curso.
Sobre los autores...
Ben Buchanan
Mark Norman Francis
Linda Goin
6/407
Linda Goin
Entre los reconocimientos de su trabajo se incluyen quince galardones de primera
posicin de la Colorado Press Association, numerosos premios de bellas artes y
diseo grfico, y entrevistas sobre el desarrollo de contenidos con The Wall St.
Journal, Chicago Tribune, Psychology Today y Los Angeles Times. Linda es
autora de varios libros electrnicos sobre diseo web y accesibilidad y, como
actividad suplementaria, tambin escribe artculos sobre finanzas personales y
para algunos profesionales de la optimizacin de motores de bsqueda (SEO).
El sitio web personal de
Paul es
<http://dev.joeblade.com>.
Despus de abrirse camino desde las profundidades ms oscuras de Somerset,
cuando lleg a la mayora de edad, Paul Haine se encontr paradjicamente
atrapado durante seis aos ms a la otra punta del pas en las profundidades
ms oscuras de Kent, donde aprendi todo lo que sabe sobre los estndares de
la web durante las pocas semanas que tena entre sus clases de historia.
Despus de pasar dos aos en Oxford y de escribir HTML Mastery se fue a
Islington, Londres, donde trabaja de client-side developer para The Guardian.
Diseadora y desarrolladora de webs por profesin y fotgrafa, escritora en blogs
mviles y "friki" profesional del arte por aficin, la seora J enifer Hanen, J en,
empez su carrera artstica y como diseadora desde la trona a la edad de 11
meses con su amor por el arte corporal alimentario y el arte mural alimentario.
Aprendi HTML por su cuenta en el ao 1996 cuando un loco de los ordenadores
le dijo que un artista no poda aprender a programar, y desde entonces ha
estado intensamente enamorada de todo lo que tiene que ver con el diseo de
webs.
La seora J en es la propietaria y fundadora de Black Phoebe Designs, una
empresa de diseo de webs y diseo mvil. La seora J en tiene un mster de
Informtica y sistemas multimedia por el Trinity College de Dubln, Irlanda, y
ense Diseo de webs en una universidad de la zona de Los ngeles entre el
2001 y el 2005. Ha participado en dos proyectos de blogs mviles de Nokia,
Wasabi Lifeblog (2004-2005) y Nokia Urbanista Diaries (2008). Siempre podris
encontrar a la seora J en en lnea en <blackphoebe.com> o en
<blackphoebe.mobi>.
Despus de estudiar una seleccin de reyes medievales, cientficos del siglo
XVIII y otros excntricos histricos en la universidad, Benjamin Hawkes-Lewis
acab no se sabe exactamente cmo trabajando de desarrollador de webs para
Yahoo!, con gran placer por su parte. Sus actividades preferidas incluyen una
comida decente con amigos, una buena pelcula en el cine, tumbarse en la hierba
a tomar el sol y solucionar problemas difciles a partir de fuentes primarias,
principios bsicos y pruebas empricas.
Paul Haine
Jenifer Hanen
Benjamin Hawkes-Lewis
Ben Henick
7/407
Ben Henick ha estado creando sitios web de un modo u otro desde setiembre de
1995, cuando empez su primer proyecto web como voluntario acadmico.
Desde entonces, ha trabajdo bsicamente como freelance.
Ben es un generalista; sus competencias profesionales incluyen prcticamente
todos los aspectos del diseo y desarrollo de sitios web, desde CSS y HTML
hasta el diseo y la generacin de textos, pasando por PHP/MySQL y
J avaScript/Ajax.
Vive en Lawrence, Kansas, con tres ordenadores y sin televisor. En henick.net
podis conocer ms acerca de l y de su trabajo.
Chris Heilmann
Fotografa: Bluesmoon
Chris Heilmann ha trabajado de desarrollador de webs durante diez aos
despus de pasar por el periodismo radiofnico. Trabaja para Yahoo! en el Reino
Unido como formador y desarrollador jefe y supervisa la calidad del cdigo de la
interfaz de usuario para Europa y Asia. Chris escribe en el blog Wait till I come y
se le puede encontrar en muchas redes sociales como "codepo8".
Tom Hughes-Croucher ha trabajado siempre en el sector de Internet. Ha
realizado aportaciones a varios estndares de tecnologa de la web para
organismos de estndares como el World Wide Web Consortium (W3C) y el
British Standards Institute (BSI). Hace poco trabaj en el sector de la msica
digital para ofrecer soluciones de msica digital a marcas muy conocidas del
Reino Unido, como Tesco, Three telecom y Channel 4.
Actualmente trabaja para Yahoo! como tcnico evangelista. Se ha especializado
en tecnologa web "lado cliente" y en servicios web REST y le gusta fomentar las
mejores prcticas siempre que puede. Antes haba sido encargado de European
Frontpages, que atiende a millones de visitantes europeos cada mes, y desde
entonces nunca ms le ha dado miedo el escalado.
Roger J ohansson es un profesional de la web que siente pasin por sus
estndares, accesibilidad y usabilidad. Se dedica a desarrollar sitios web en la
asesora sueca de webs NetRelations, y durante las noches y los fines de
semana, a escribir artculos para sus sitios web personales 456 Berea Street y
Kaffesnobben.
Cuando no est delante de un ordenador, a menudo est en su jardn
ensucindose las manos o perdido por el bosque pescando.
J onathan Lane es el presidente de Industry Interactive, una empresa de
desarrollo web y de aplicaciones web situada en Mayne Island, British Columbia,
Canad. Empez en el mundo del desarrollo web trabajando durante muchos
aos en el Centro de redesarrollo del currculo de la Universidad de Lethbridge
como coordinador de sus proyectos web.
Christian Heilmann
Tom Hughes-Croucher
Roger Johansson
Jonathan Lane
8/407
J onathan Lane
Tiene un blog en Flyingtroll y actualmente est desarrollando Mailmanagr, una
interfaz de correo electrnico para la aplicacin de gestin de proyectos
Basecamp.
Chris Mills
Chris Mills es director de relaciones de desarrollo de Opera: edita y publica
artculos en <dev.opera.com> y <labs.opera.com>, colabora con la comunidad
para aumentar la difusin de Opera y reunir opiniones, y fomenta el software de
Opera siempre que puede. Tambin es el organizador y editor del Currculo de
estndares web.
Aparte del trabajo, es un gran aficionado a la msica, que disfruta tocando y
escuchando una amplia variedad de msica, incluidas metal, folk, punk,
electrnica, progresiva y otras. Su banda de referencia actualmente es la potente
Conquest of Steel.
Intentamos mejorar constantemente este curso y que sea adoptado por cuantas
ms personas mejor. Si tenis alguna sugerencia sobre cmo se podra mejorar
el curso, comentarios en general para compartir, o si deseis comentarnos el
hecho de adoptarlo en alguna otra parte, poneos en contacto con nosotros en el
correo electrnico cmills@opera.com. Tambin podis publicar comentarios
sobre cada uno de los artculos de la serie mediante el enlace "Comentar este
artculo" que hay al final.
Tommy Olsson es un predicador pragmtico de los estndares web y la
accessibilidad, que reside en la zona interior del centro de Suecia. Cre su primer
documento HTML en 1993 y actualmente es el administrador web tcnico de una
agencia del Gobierno sueco. Hasta ahora ha escrito un libro: The Ultimate CSS
Reference (con Paul OBrien) y, por desgracia, tiene abandonado su blog,
denominado The Autistic Cuckoo (hasta el punto que ya no funciona).
Nicole Sullivan es una gur del rendimiento de CSS, que vive en California.
Comenz su carrera profesional en al ao 2000, cuando su futuro marido (que en
aquella poca era un empleado del W3C) le dijo que si su pgina web no
validaba, no podra dormir por la noche. Nicole pens que sera mejor investigar
qu era todo eso de la validacin y as es como surgi su aficin por los
estndares. A medida que aumentaba su apreciacin por el rendimiento y los
sitios a gran escala, empez a trabajar en el sector del marketing en lnea y cre
soluciones CSS para multitud de marcas muy famosas en Europa y en todo el
mundo, como SFR, Club Med, SNCF, La Poste, FNAC, Accor Hotels y Renault.
Actualmente, Nicole trabaja en Yahoo!, en el grupo de rendimiento excepcional.
Sus funciones son la investigacin y la promocin de las mejores prcticas sobre
el rendimiento, y crear herramientas, como YSlow, que contribuyen a que otros
ingenieros informticos creen mejores webs. Escribe sobre los estndares, sobre
su perro y sobre su obsesin, el CSS orientado a objetos, en
Chris Mills
Tommy Olsson
Nicole Sullivan
9/407
www.stubbornella.org.
Los contenidos recogidos en este artculo estn sujetos a una licencia Creative Commons
Reconocimiento, No comercial - Compartir bajo la misma licencia 3.0 No adaptada.
: :
10/407
Lenguajes y estndares - Accesibilidad
http://mosaic.uoc.edu/ac/le/es/m0/accessibilitat.html[26/01/13 07:33:41]
Accesibilidad
Declaracin de accesibilidad
Esta pgina ha sido desarrollada con la intencin de cumplir un nivel de accesibilidad de nivel AAA segn las
directrices de la Web Content Accessibility Guidelines (WCAG)
Validacin de los documentos
Teclas de acceso
Navegaci
Validacin de los documentos
Las pginas que forman este documento han sido validadas para un nivel de accesibilidad AAA segn los
siguientes validadores:
TAW
HERA
Cynthia Says [Ingls]
Tambin han pasado el validador automtico sobre el cdigo:
W3C Markup Validation Service [Ingls]
Y sobre la hoja de estilos (CSS):
W3C CSS Validation Service [Ingls]
Teclas de acceso
En todo el documento hemos habilitado una serie de teclas para acceder a diferentes secciones del
documento, con la intencin de facilitar la navegacin en toda la web:
0: Enlaza con el ndice del documento.
1: Enlaza con la subunidad 1 de cada artculo.
8: Enlaza con el artculo anterior.
9: Enlaza con el artculo siguiente.
11/407
Lenguajes y estndares - Accesibilidad
http://mosaic.uoc.edu/ac/le/es/m0/accessibilitat.html[26/01/13 07:33:41]
Listado de las teclas de acceso segn el sistema operativo y el tipo de navegador
Windows Macintosh
Firefox 2.0+ Alt + Mays + tecla de acceso Control + tecla de acceso
Internet Explorer
4+
Alt + tecla de acceso, i desprs
Enter
Control + tecla de acceso, i desprs
Enter
Opera 7+ Mays + Esc + tecla de acceso Mays + Esc + tecla de acceso
Safari 1.2+ Alt + tecla de acceso Control + Esc + tecla de acceso
Netscape 6+ Alt + tecla de acceso Control + tecla de acceso
Navegaci
Per tal de gaudir una bona experiencia a l'hora de navegar pels diferents articles, fem servir, adems de
les teclas de acceso, un index a cada article desprs d'una breu introducci per tal d'accedir a qualsevol
subunitat del mateix.
Per establir relacions amb els altres articuls, hem incls elemenets link amb el atributs rel="article
anterior", rel="index principal" i rel="article segent" a totes les pgines, per tal de navegar
fcilment per tot el document.
Els articles estn estructurats de tal manera que el primer encapalament (h1) fa referencia al ttol del
article o unitat. Desprs els encapalaments de segon nivell (h2) indiquen les subunitats y els de tercer
nivell (h3) les sub-subunitats.
Per tal d'evitar la redundancia als articles, els enllaos que ja son signicatius no tenen title, al mateix
temps que les imatges amb peus de foto i context textual no tenen cap alt per no repetir dos cops el
mateix significat, a les taules passa igual, tan sols les que no siguen prou explicites tindrn un summary,
d'altra banda, anir vuit.
Els enllaos a documents externes que no estn amb l'idioma del article, aniran acompanyats de la
etiqueta hreflang per a especificar l'idioma.
Les mesures de la pgina s'han establit amb percentatge per adaptar-se majorment a tot tipus de
resolucions i navegadors, exceptuant les etiquetes pre que es text preformatejat, tamb s'ha controlat
que l'usuari puga aumentar i disminuir el tamany de la pgina al seu gust sense afectar en la dispocici
de la web.
12/407
Introduccin al mundo de los estndares web - La historia de Internet y la web y la evolucin de los estndares web
http://mosaic.uoc.edu/ac/le/es/m1/ud1/index.html[26/01/13 07:33:56]
La historia de Internet y la web y la evolucin de los
estndares web
Accesibilidad : : :
Mark Norman Francis. 8 de julio del 2008. Publicado en: navegador, historial, wasp, w3c, guerras
"Por dnde debo empezar, Majestad?
Empieza por el principio dijo el rey solemnemente, y contina hasta llegar al final.
Entonces, detente".
Alicia en el Pas de las Maravillas, Lewis Caroll
Todo debe empezar por algn sitio, de manera que nuestro viaje empezar con una leccin centrada en la
historia. A continuacin, realizaremos un breve repaso de la creacin de Internet, la web mundial (World
Wide Web), y de los estndares web en los que se centra toda esta serie. Creo que es til e interesante
entender cmo hemos llegado hasta donde estamos, pero seremos lo bastante breves como para no
agobiaros y poder entrar en detalle de manera rpida y agradable. Si no estis familiarizados con algn
trmino, no os preocupis; si son importantes para aprender sobre el desarrollo web, se definirn en los
ltimos apartados que amplan cada tema, y siempre podis hacer una busca en Google. Si ya estis
familiarizados con la historia de Internet o de la web mundial, os podis saltar este apartado sobre los
estndares web.
Los contenidos de este apartado son los siguientes:
2.1. Los orgenes de Internet
2.2. La creacin de la web mundial
2.2.1. Las "guerras de los navegadores"
2.3. La aparicin de los estndares web
2.3.1. La formacin del W3C
2.3.2. El proyecto de estndares web
2.3.3. El auge de los estndares web
Resumen
Preguntas de repaso
Lecturas complementarias
2.1. Los orgenes de Internet
El cuatro de octubre de 1957 sucedi un acontecimiento que cambiara el mundo. La Unin Sovitica lanz
con xito el primer satlite a la rbita de la Tierra. Se llamaba "Sputnik 1" y sorprendi al mundo,
especialmente a Estados Unidos, que tena en curso su propio programa de lanzamientos de satlites, pero
todava no haban lanzado ninguno.
Este acontecimiento condujo directamente a la creacin de la ARPA (Advanced Research Projects Agency, la
Agencia de Proyectos de Investigacin Avanzada) del Departamento de Defensa de Estados Unidos, a causa
de la necesidad reconocida de una organizacin que pudiera investigar y desarrollar ideas avanzadas y
tecnologa ms all de las necesidades identificadas actualmente. Quiz su proyecto ms famoso (sin duda
el ms ampliamente utilizado) fue la creacin de Internet.
En 1960, el psiclogo y cientfico informtico Joseph Licklider public un documento titulado Simbiosis
Hombre-Ordenador, que articul la idea de ordenadores en red que proporcionaban un almacenaje y una
recuperacin avanzada de los datos. En 1962, mientras trabajaba para la ARPA como jefe de la oficina de
procesamiento de informacin, form un grupo para continuar con la investigacin informtica, pero lo
abandon antes de que se trabajara en aquella idea.
El plan para esta red de ordenadores (que se denominara ARPANET) se present 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 creacin de una red era cmo conectar redes fsicamente separadas sin colapsar los
recursos de la red a causa de las conexiones constantes. La tcnica que resolvi este problema se conoce
13/407
como conmutacin de paquetes e implica que las solicitudes de datos se dividen en pequeos trozos
(paquetes) que se pueden procesar rpidamente sin bloquear la comunicacin de los otros. Este principio
todava se utiliza en la actualidad para el funcionamiento de Internet.
Este concepto se adopt ampliamente con el nacimiento de otras redes que utilizaban la misma tcnica de
conmutacin de paquetes. Por ejemplo, la X.25 (desarrollada por la Unin Internacional de
Telecomunicaciones) form la base de la primera red universitaria del Reino Unido: JANET (que permita a
las universidades del Reino Unido enviar y recibir ficheros) y la red pblica norteamericana CompuServe (una
empresa comercial que permita a pequeas empresas y personas acceder a los recursos informticos con
tiempo compartido, y posteriormente el acceso a Internet). Estas redes, a pesar de tener muchas
conexiones, eran ms privadas que la Internet actual.
Esta proliferacin de diferentes protocolos de red no tard mucho en convertirse en un problema cuando se
intentaba que todas las redes independientes se comunicaran. Sin embargo, haba una solucin a la vista:
Robert Kahn, mientras trabajaba en un proyecto de red de paquetes por satlite para ARPA, empez a
definir algunas reglas para una arquitectura de red ms abierta que sustituyera el protocolo actual que se
utilizaba en ARPANET. Ms adelante, Vinton Cerf de la Universidad de Stanford se incorpor al proyecto y
ambos crearon un sistema que enmascaraba las diferencias entre protocolos de red utilizando un nuevo
estndar. La publicacin del borrador de la especificacin, en diciembre de 1974, se denomin Programa de
Control de Transmisin de Internet.
Esta especificacin reduca las funciones de la red y trasladaba la tarea de mantener la integridad de la
transmisin al ordenador principal. El resultado final fue que era posible unir fcilmente casi todas las redes
entre ellas. ARPA asumi el coste del desarrollo del software y en 1977 se llev a cabo una demostracin de
comunicacin entre tres redes diferentes. En 1981, la especificacin se complet, public y adopt; y en
1982 las conexiones de ARPANET fuera de Estados Unidos se convirtieron para utilizar el nuevo protocolo
TCP/IP. Haba llegado Internet tal como la conocemos.
2.2. La creacin de la web mundial
Gopher era un sistema de recuperacin de informacin que se utilizaba a principios de los aos noventa y
que proporcionaba un mtodo de entrega de mens de enlaces a archivos, recursos informticos y otros
mens. Estos mens podan cruzar los lmites del ordenador y utilizar Internet para ir a buscar mens de
otros sistemas. Era muy popular en las universidades, que queran proporcionar informacin para todo el
campus, y organizaciones grandes que queran centralizar el almacenaje y la gestin de documentos.
Gopher fue creado por la Universidad de Minnesota. En febrero de 1993, esta universidad anunci que
cobrara licencias por el uso de la implementacin de referencia del servidor Gopher. En consecuencia,
muchas organizaciones empezaron a buscar alternativas a Gopher.
El Consejo Europeo de Investigacin Nuclear (CERN), en Suiza, tena esta alternativa. Tim Berners-Lee
haba estado trabajando en un sistema de gestin de informacin en el que el texto pudiera contener enlaces
y referencias a otros trabajos, de manera que permitiera al lector saltar rpidamente de un documento a otro.
Haba creado un servidor para publicar este estilo de documento (denominado hipertexto) y tambin un
programa para leerlo, al que haba denominado World Wide Web. Este software se public por primera vez
en 1991, pero dos acontecimientos provocaron una explosin de popularidad y, finalmente, la sustitucin de
Gopher.
El 30 de abril de 1993 el CERN cedi el cdigo fuente del World Wide Web al dominio pblico, de manera
que cualquiera pudiera utilizar o construir sobre el software sin ningn coste.
As, ms tarde, en el mismo ao, el NCSA (National Center for Supercomputing Applications, Centro
Nacional para Aplicaciones de Supercomputacin) public un programa que era una combinacin de
navegador web y cliente Gopher, denominado Mosaic. Originalmente, slo estaba disponible para equipos
Unix y en forma de cdigo fuente, pero en diciembre de 1993 Mosaic ya dispona de una nueva versin con
instaladores tanto para Apple Macintosh como para Microsoft Windows. Mosaic aument en popularidad
rpidamente y, en consecuencia, tambin la web.
El nmero de navegadores web disponibles aument muchsimo, muchos de ellos creados para proyectos de
investigacin en universidades y corporaciones, como Telenor (una compaa noruega de comunicaciones),
que cre la primera versin del navegador Opera en 1994.
2.2.1. Las "guerras de los navegadores"
14/407
La popularizacin de la web atrajo intereses comerciales. Marc Andreessen abandon el NCSA y, junto con
Jim Clark, fund Mosaic Communications, que ms adelante cambi su nombre por Netscape
Communications Corporation, y empezaron a trabajar en lo que acabara convirtindose en el navegador
Netscape. La versin 1.0 del software se public en diciembre de 1994.
Spyglass Inc. (la rama comercial del NCSA) autoriz la comercializacin de su tecnologa Mosaic a Microsoft
para formar la base de Internet Explorer. La versin 1.0 se public en agosto de 1995.
Una rpida escalada sigui a continuacin, en la que Netscape y Microsoft intentaban cada uno obtener una
ventaja competitiva en cuanto a las funciones que admitan con el fin de atraer desarrolladores. Desde
entonces, esta competicin se ha conocido como "las guerras de los navegadores". Opera mantuvo una
presencia modesta pero continuada a lo largo de este perodo e intent innovar y ser compatible con los
estndares web lo mejor posible en aquellos tiempos.
2.3. La aparicin de los estndares web
Durante las guerras de los navegadores, Microsoft y Netscape se centraron en la implementacin de nuevas
funciones en lugar de resolver los problemas de las funciones con las que ya eran compatibles, y tambin en
aadir 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 vean forzados a tratar con niveles de confusin cada vez
mayores cuando se intentaban construir las pginas web, a veces hasta el punto de haber de construir dos
pginas diferentes, pero duplicadas en la prctica, para cada uno de los dos principales navegadores, y otras
simplemente optando por ser compatibles slo con un navegador, de manera que los usuarios que utilizaran
el otro no pudieran utilizar sus pginas. sta era una manera muy mala de trabajar y la inevitable reaccin
negativa de los desarrolladores no tard en producirse.
2.3.1. La formacin del W3C
En 1994, Tim Berners-Lee fund el World Wide Web Consortium (W3C) en el Massachusetts Institute of
Technology, con el apoyo del CERN, DARPA (como se haba bautizado la ARPA) y la Comisin Europea. La
misin del W3C era estandarizar los protocolos y las tecnologas utilizadas para construir la web, de manera
que el contenido estuviera disponible para la mayor parte posible de la poblacin del mundo.
Durante los aos siguientes, el W3C public varias especificaciones (denominadas recomendaciones)
incluyendo HTML 4.0, el formato para imgenes 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 slo deben ajustarse a la
documentacin del W3C si quieren etiquetar su producto como cumplidor del W3C. En la prctica, esto no es
un argumento de venta valioso porque casi todos los usuarios de la web desconocen, y probablemente no les
importa, quin es el W3C. En consecuencia, las guerras de los navegadores continuaron sin trabas.
2.3.2. El proyecto de estndares web
En 1998, el mercado de los navegadores estaba dominado por Internet Explorer 4 y Netscape Navigator 4.
Se haba lanzado una versin beta de Internet Explorer 5 que implementaba un nuevo HTML dinmico de
marca registrada. Ello significaba que los desarrolladores web profesionales deban conocer cinco maneras
diferentes de escribir JavaScript.
En consecuencia, un grupo de desarrolladores y diseadores web se asociaron entre ellos. Este grupo se
denominaba WaSP (Web Standards Project, Proyecto de estndares web). La idea era que si los
documentos del W3C se llamaban estndares en vez de recomendaciones podran convencer a Microsoft y
Netscape de que les dieran su apoyo.
El antiguo mtodo de realizar un llamamiento a la accin se llev a cabo mediante una tcnica publicitaria
tradicional denominada "barricada", donde una empresa lanza un anuncio en todos los canales de emisin al
mismo tiempo, de manera que aunque el espectador cambie de canal, obtendr exactamente el mismo
mensaje. WaSP public un artculo simultneamente en varias pginas centradas en el desarrollo web, como
builder.com, Wired online y algunas listas de correo muy populares.
Otra tcnica que utilizaron fue ridiculizar a las empresas que se unan al W3C (y a otros organismos de
15/407
estndares), pero que despus se centraban ms en crear nuevas funciones que en hacer que los conceptos
bsicos para los que se haban comprometido fueran correctos, para empezar.
Todo esto suena un poco negativo, pero los de WaSP no se conformaban con criticar a la gente, tambin la
ayudaban. Siete miembros formaron CSS Samurai, que identific los diez problemas principales de
compatibilidad CSS en Opera e Internet Explorer (Opera resolvi sus problemas y Microsoft no).
2.3.3. El auge de los estndares web
En el 2000, Microsoft lanz Internet Explorer 5 Macintosh Edition. Fue un hito muy importante, ya que se
trataba del navegador que se instalaba entonces de manera predeterminada con el Mac OS, y tambin tena
un nivel decente de compatibilidad con las recomendaciones del W3C. Junto con el nivel decente de
compatibilidad con CSS y HTML, Opera contribuy a un movimiento positivo general, con el que los
desarrolladores y diseadores web se sentan cmodos diseando pginas mediante estndares web por
primera vez.
WaSP persuadi a Netscape de retrasar el lanzamiento de la versin 5.0 de Netscape Navigator hasta que
fuera mucho ms compatible (este trabajo form la base de lo que ahora es Firefox, un navegador muy
popular). WaSP tambin cre un grupo de trabajo para Dreamweaver, con el fin de animar a Macromedia a
cambiar su popular herramienta de autora web y dar soporte a la creacin de pginas web compatibles. La
popular pgina de desarrollo web A List Apart se redise a principios del 2001 y, en un artculo que
explicaba cmo y por qu, declaraba:
"En seis meses, un ao, o dos aos como mucho, todas las pginas se disearn con
estos estndares. [...] Podemos contemplar cmo nuestras capacidades se quedan
obsoletas o podemos empezar a aprender ahora tcnicas basadas en estndares".
Esto era un poco optimista: no todas las pginas, ni siquiera en el ao 2009, estn hechas con estndares
web. Pero muchos les hicieron caso. Los navegadores antiguos redujeron su cuota de mercado y dos
pginas web ms de perfil muy alto se redisearon utilizando estndares web: la revista Wired en el 2002 y
ESPN en el 2003 se convirtieron en lderes del sector en el soporte a los estndares web y las nuevas
tcnicas.
Tambin en el 2003, Dave Shea cre una pgina web denominada CSS Zen Garden. Deba tener ms
impacto sobre los profesionales web que cualquier otra cosa, e ilustraba, verdaderamente, que todo el diseo
poda cambiar slo modificando el estilo de la pgina; el contenido poda seguir siendo idntico.
Desde entonces, en la comunidad de desarrollo web profesional, los estndares web se han convertido en un
elemento de rigor. En esta serie os daremos unos excelentes fundamentos en estas tcnicas para que
podis crear pginas web tan limpias, semnticas, accesibles y conformes con los estndares como las de
las grandes empresas.
Resumen
En este apartado hemos hablado de cmo se cre la Internet moderna como resultado de la carrera
espacial, de cmo Tim Berners-Lee defini el hipertexto para una generacin y de cmo los intereses
comerciales de dos compaas provocaron una de las reacciones ms notables de los desarrolladores como
nunca se haba visto. El trmino estndares web se utiliza ahora ms ampliamente entre los profesionales
web que cualquier otro trmino aplicado por el W3C (de hecho, el W3C ha empezado a utilizar el trmino en
sus propias pginas), de manera que por este motivo os ensearemos el modo de construir pginas web
siguiendo los estndares.
Preguntas de repaso
Podrais intentar investigar ms respondiendo estas preguntas:
1. Qu navegadores estn disponibles actualmente en Internet para los usuarios de Windows, Mac OS X
y Linux?
2. Qu porcentaje de usuarios de la web utiliza cada navegador?
3. Qu navegadores utilizan los dispositivos mviles para acceder a las pginas web?
16/407
4. Cuntos estndares web ha publicado el W3C y cules son ampliamente seguidos por los fabricantes
de navegadores actualmente?
Si queris saber ms, es posible que queris visitar algunas de las pginas siguientes:
The history of the Internet (wikipedia)
The history of the World Wide Web (wikipedia)
The history of the W3C
El Web Standards Project y su historia
A List Apart
CSS Zen Garden
: :
17/407
Introduccin al mundo de los estndares web - Cmo funciona Internet?
Cmo funciona Internet?
Accesibilidad : : :
Jonathan Lane. 8 de julio del 2008. Publicado en: dinmico, servidor, esttico, web, HTTP
Muy de vez en cuando es posible conseguir ver los engranajes y las correas que actan entre bastidores.
Hoy es vuestro da de suerte. Os llevar a dar una vuelta tras los telares de una de las tecnologas ms
interesantes que, posiblemente, ya conocis bien: la web.
Este apartado trata sobre la tecnologa subyacente que hace funcionar la web:
Lenguaje de etiquetado de hipertexto (HTML).
Protocolo de transferencia de hipertexto (HTTP).
Sistema de nombres de dominio (DNS).
Servidores web y navegadores web.
Contenido esttico y dinmico.
Son materias bastante bsicas y, aunque la mayor parte de lo que aqu se explica no os ayudar a construir
una pgina web mejor, s que os proporcionar 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 lgrimas:
"Cuando leemos, empezamos por ABC. Cuando cantamos, empezamos por Do Re Mi". En este apartado
describiremos brevemente cmo los ordenadores se comunican realmente utilizando HTTP y TCP/IP, y
despus nos fijaremos en los diferentes lenguajes que se combinan para crear las pginas web que
conforman Internet.
3.1. Cmo se comunican los ordenadores a travs de Internet?
3.1.1. Diseccin de un ciclo de solicitud-respuesta
3.2. Tipos de contenido
3.2.1. Texto normal
3.2.2. Estndares web
3.2.3. Pginas web dinmicas
3.2.4. Formatos que requieren otras aplicaciones o conectores
3.3. Pginas web estticas o dinmicas
Resumen
Preguntas de repaso
3.1. Cmo se comunican los ordenadores a travs de Internet?
Por suerte, hemos mantenido las cosas simples para los ordenadores. Cuando se trata de la web, la mayora
de las pginas estn escritas utilizando el mismo lenguaje, el HTML, que pasa de un sitio a otro utilizando un
protocolo comn: HTTP (hypertext transfer protocol o protocolo de transferencia de hipertexto). El HTTP es el
dialecto (especificacin) comn de Internet que permite, por ejemplo, que un equipo con Windows cante en
armona con un ordenador que ejecute la versin ms reciente y ms fantstica de Linux (Do Re Mi!).
Mediante el uso de un navegador web un software especial que interpreta el HTTP y entrega el HTML en
una manera legible para los humanos, las pginas web creadas con HTML y con cualquier tipo de
ordenador se pueden leer en cualquier medio, incluyendo telfonos, PDA e incluso en los sistemas de
videojuegos ms 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 bsicas para Internet. Gracias al HTTP, un equipo cliente (como
vuestro ordenador) sabe que debe ser l quien inicie una peticin de una pgina web desde un servidor. Un
servidor es un ordenador donde residen las pginas web; cuando escribs una direccin web en vuestro
navegador, un servidor recibe la peticin, encuentra la pgina web que deseis y la enva a vuestro
18/407
ordenador para que se vea en vuestro navegador.
3.1.1. Diseccin de un ciclo de solicitud-respuesta
Ahora que hemos visto todas las partes que permiten a los ordenadores comunicarse a travs de Internet,
trataremos con ms detalle el ciclo de solicitud-respuesta de HTTP. A continuacin, se presentan una serie
de pasos numerados para que podis trabajar siguindolos y, as, os podremos demostrar algunos
conceptos de manera ms eficaz:
a. Todas las solicitudes-respuestas empiezan cuando se escribe un URL (universal resource locator,
localizador universal de recursos) en la barra de direcciones del navegador web, como
http://dev.opera.com. Abrid un navegador para hacerlo ahora mismo.
Algo que quiz no sabis es que los navegadores realmente no utilizan los URL para solicitar pginas
web en los servidores; utilizan el Protocolo de Internet o direcciones IP (que son casi como nmeros
de telfono o direcciones postales que identifican los servidores.) Por ejemplo, la direccin IP de
http://dev.opera.com es 213.236.208.98.
b. Abrid una nueva pestaa o ventana del navegador, escribid http://www.apple.com y pulsad intro; a
continuacin, escribid http://17.149.160.10/ y pulsad intro: llegaris al mismo sitio. Escribid
http://213.236.208.98 en la barra de direcciones y pulsad intro: iris a parar al mismo sitio que en el
paso 1, pero obtendris un error 403 "Acceso Denegado", esto es porque no tenis permiso para
acceder a la raz real de este servidor.
http://www.apple.com acta bsicamente como un alias para http://17.149.160.10/, pero por qu? Y
cmo? Ello se debe a que a las personas les resulta ms fcil recordar palabras que largas cadenas de
nmeros. El sistema que realiza este trabajo se denomina Domain name system (DNS) o Sistema de
nombres de dominio, que es esencialmente un directorio automtico completo de todos los ordenadores
conectados a Internet. Cuando escribs http://dev.opera.com en la barra de direcciones y apretis intro,
esta direccin se enva a un servidor de nombres que intenta asociarla a vuestra direccin IP. Hay
muchos ordenadores conectados a Internet, y no todos los servidores DNS tienen 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.
As pues, el sistema DNS busca la pgina web www.opera.com, averigua que se encuentra en
17.149.160.10 y devuelve la direccin IP al navegador.
El ordenador enva una solicitud al ordenador de la direccin IP especificada y espera obtener una
respuesta. Si todo va bien, el ordenador del servidor enva un breve mensaje de retorno al cliente que
dice que todo es correcto (podis ver la figura 1) seguido de la propia pgina web. Este tipo de mensaje
est incluido en un encabezamiento HTTP.
Figura 1. En este caso todo es correcto y el servidor devuelve la pgina web
correcta.
Si algo va mal, por ejemplo, si se escribe incorrectamente el URL, en su lugar se obtendr un error
HTTP: el famoso error 404 "no se encuentra la pgina" es el ejemplo ms comn que se puede
encontrar.
c. Escribid http://dev.opera.com/joniscool.html: la pgina no existe, o sea que obtendris un error 404.
Probadlo con algunas pginas, en diferentes pginas web que no existan y os devolvern pginas
diferentes. Esto se debe al hecho de que algunos desarrolladores web han dejado que el servidor web
19/407
slo emita la pgina de error predeterminada y otros han codificado pginas de error personalizadas
para que aparezcan cuando se devuelve una pgina no existente. Se trata de una tcnica avanzada
que no trataremos en este curso, pero que afortunadamente se ver pronto en un artculo aparte en
dev.opera.com.
Por ltimo, una nota sobre los URL: generalmente el primer URL al que se accede en una pgina web no
tiene un nombre de archivo real al final (por ejemplo, http://www.mysite.com/), y a continuacin las pginas
subsiguientes a veces tienen y a veces no. Siempre se accede a archivos reales, pero en ocasiones 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 ms limpios y fciles de recordar, que conducen a una mejor
experiencia para el usuario de vuestra pgina web.
3.2. Tipos de contenido
Ahora que ya os hemos enseado una solicitud-respuesta HTTP, queremos que os fijis en los diferentes
tipos de contenido que pueden encontrarse en Internet. Los hemos agrupado en 4 tipos: texto normal,
estndares web, pginas web dinmicas y formatos que requieren otras aplicaciones o conectores.
3.2.1. Texto normal
Durante los primeros das de Internet, antes de que apareciera cualquier estndar web o conector, Internet
era principalmente imgenes y texto normal, archivos con una extensin .txt o similar. Cuando se encuentra
un texto normal en Internet, el navegador lo muestra tal como es, sin ningn tipo de proceso. Todava
pueden encontrarse ficheros de texto normal en pginas web universitarias.
3.2.2. Estndares web
Las herramientas de construccin bsicas de la web son los tres principales estndares web: HTML (o
XHTML, aqu 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
definicin de su objetivo. El HTML se utiliza para dividir un documento, especificar sus contenidos y su
estructura, y definir el significado de cada parte (es lo que incluye todo el texto, etc., que se ve en las
pginas web). Utiliza elementos para identificar los diferentes componentes de una pgina.
b. Las hojas de estilo en cascada (CSS) dan un control total sobre cmo se visualiza un elemento.
Cambios de formato
Utilizando declaraciones de estilo es muy sencillo cambiar todos los prrafos para
que queden a doble espacio:
line-height: 2em;
O hacer que todos los encabezamientos de segundo nivel sean verdes:
color: green;[/courier-new]
Existen muchas ventajas para separar la estructura del formato y lo veremos con ms 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 ningn formato aadido, mientras que a la derecha
puede verse exactamente el mismo HTML con algunos estilos de CSS aplicados.
20/407
Figura 2. HTML normal a la izquierda, HTML con CSS aplicado a la derecha.
c. Por ltimo, el lenguaje JavaScript aporta funciones dinmicas a las pginas web. Se pueden escribir
pequeos programas en JavaScript que se ejecutarn en el ordenador cliente y que no requieren que
haya ningn software especial instalado en el servidor. JavaScript permite aadir algunas funciones
bsicas e interactividad a las pginas web, pero tiene sus limitaciones, lo que nos lleva a hablar de
lenguajes de programacin del lado del servidor y a pginas web dinmicas.
3.2.3. Pginas web dinmicas
En ocasiones, cuando naveguis por Internet os encontraris pginas web que no tienen una extensin
.html: es posible que tengan una extensin .php. asp, .aspx, .jsp, u otras extensiones extraas. Todos son
ejemplos de tecnologas web dinmicas que se pueden utilizar para crear pginas web que tengan secciones
dinmicas: cdigo que muestra diferentes resultados segn los valores que reciba, por ejemplo, de una base
de datos, de un formulario o de otra fuente de datos. Trataremos estos tipos de pginas web en el
subapartado "Pginas web estticas o dinmicas", a continuacin.
3.2.4. Formatos que requieren otras aplicaciones o conectores
Como los navegadores web slo estn equipados para interpretar y mostrar determinadas tecnologas como
estndares web, si solicitis un URL que apunta a un formato de archivo complejo o a una pgina web que
contiene una tecnologa que requiere conectores (plugins), se descargar en vuestro ordenador o se abrir
utilizando el conector necesario si el navegador lo tiene instalado.
Ejemplos de conectores
Si os encontris un documento de Word, de Excel, PDF, un fichero comprimido (por
ejemplo, ZIP o SIT), un fichero de imgenes complejas como Photoshop PSD, u otro
fichero complejo que el navegador no comprende, generalmente el navegador os
preguntar si deseis descargar o abrir el fichero. Ambas acciones normalmente tienen
resultados similares, excepto que la ltima har que el fichero se descargue y a
continuacin se abra con una aplicacin que lo comprende, si est instalada.
Si os encontris una pgina que contenga una pelcula Flash, MP3 u otro formato de
msica, MPEG u otro formato de vdeo, el navegador lo reproducir utilizando un
conector, si hay uno instalado. En caso contrario, se proporcionar un enlace para
instalar el conector necesario, o el archivo se descargar y buscar una aplicacin de
escritorio para ejecutarlo.
Naturalmente, hay algunas reas grises: por ejemplo, SVG (scalable vector graphics, grficos vectoriales
escalables) es un estndar 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 seis conscientes de que el contenido se est visualizando mediante un conector y de manera no nativa
en el navegador.
3.3. Pginas web estticas o dinmicas
As pues, qu son las pginas web estticas y dinmicas y cul es la diferencia entre ambas? Como en una
21/407
caja de bombones, todo se basa en el relleno.
Una pgina web esttica es una pgina web donde el contenido, el HTML y los
grficos, son siempre estticos se sirve a cualquier visitante de la misma manera,
a no ser que la persona que ha creado la web decida cambiar manualmente su
copia en el servidor, exactamente lo que hemos estado repasando en la mayor
parte de este apartado.
Por el contrario, en una pgina web dinmica, el contenido del servidor es el
mismo, pero en vez de ser slo HTML, tambin contiene cdigo dinmico, que
puede mostrar datos diferentes segn la informacin que suministre a la pgina
web.
Pgina web dinmica
Podis ver un ejemplo de pgina web dinmica: id a Amazon con vuestro navegador
web y buscad cinco productos diferentes. Amazon no os ha enviado cinco pginas
diferentes, os ha enviado la misma pgina cinco veces, pero con diferente informacin
dinmica completada cada vez. Esta informacin diferente se guarda en una base de
datos, que entrega la informacin correspondiente cuando se solicita, y la enva al
servidor web para insertarla en la pgina dinmica.
Otra cosa que cabe tener en cuenta es que se debe instalar un software especial en el servidor para crear
una pgina web dinmica. Mientras que los ficheros HTML estticos normales se guardan con una extensin
de fichero .html, estos ficheros contienen cdigo dinmico especial adems del HTML y se guardan 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 extensin de archivo .php.
Hay muchos lenguajes dinmicos que se pueden elegir: el PHP que hemos mencionado antes y otros como
Python, Ruby on Rails, ASP.NET y Coldfusion. En definitiva, todos estos lenguajes tienen ms o menos las
mismas capacidades, como hablar con bases de datos, validar la informacin 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 ms sencilla que mejor se adapte.
Resumen
Hasta aqu el recorrido por la sala de mquinas de Internet. Este apartado realmente slo trata de pasada
muchos de los temas que incluye, pero resulta til porque los pone en perspectiva entre ellos y muestra
cmo se relacionan y funcionan entre s. Todava 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 continuacin: el apartado
siguiente se centra en el modelo de estndares web HTML, CSS y JavaScript de desarrollo web, y da un
vistazo al cdigo de la pgina web.
Preguntas de repaso
1. Realizad una breve descripcin de HTML y HTTP y explicad la diferencia entre los dos.
2. Explicad la funcin de un navegador web.
3. Navegad por Internet durante 5-10 minutos e intentad encontrar algunos tipos diferentes de contenidos:
texto normal, imgenes, HTML, pginas dinmicas como pginas PHP y .NET (.aspx), PDF, documentos
de Word, pelculas Flash, etc. Acceded a algunos de estos contenidos y pensad cmo os los muestra el
ordenador.
4. Cul es la diferencia entre una pgina esttica y una pgina dinmica?
5. Encontrad una lista de cdigos de error HTTP, enumerad cinco y explicad qu significa cada uno de
ellos.
22/407
En este curso ya no volveremos a hablar de los lenguajes dinmicos, pero hemos creado una lista de
recursos en caso de que queris leroslos:
Rails: Fernandez, Obie. (2007). The Rails Way. Addison-Wesley Professional Ruby Series.
Rails screencasts
PHP: Powers, David (2006). PHP Solutions: Dynamic web development made easy, friends of ED.
Documentacin en lnea de PHP
ASP.NET: Lorenz, Patrick. (2003). ASP.NET 2.0 Revealed. Apress.
ASP.NET: documentacin y guas en lnea de ASP.NET
: :
23/407
Introduccin al mundo de los estndares web - El modelo de estndares web: HTML, CSS y JavaScript
El modelo de estndares web: HTML, CSS y JavaScript
Accesibilidad : : :
4. El modelo de estndares web: HTML, CSS y JavaScript
Jonathan Lane. 8 de julio del 2008. Publicado en: html, javascript, web, css, estndares
En el ltimo apartado hemos visto brevemente las herramientas de construccin bsicas de la web: HTML (o
XHTML), CSS y JavaScript. Ahora es el momento de ampliar un poco ms y observarlos individualmente:
qu hacen y cmo interactan interaccionan entre ellos para crear una pgina web.
4.1. Por qu separar?
4.2. Etiquetado, la base de cada pgina
4.2.1. Qu es el XHTML?
4.2.2. Validacin, qu es eso?
4.3. CSS: aadimos un poco de estilo
4.4. JavaScript: adicin de comportamiento a las pginas web
4.5. Una pgina de ejemplo
4.5.1. index.html
4.5.2. styles.css
Resumen
Preguntas de repaso
4.1. Por qu separar?
sta es, generalmente, la primera pregunta que se formula sobre los estndares web. Se puede crear el
contenido, el estilo y el formato slo utilizando HTML: elementos de tipo de letra para el estilo y tablas HTML
para el formato, de manera que, por qu preocuparse de este asunto de XHTML/CSS? El uso de tablas
para el formato, etc., es como se sola hacer en los malos tiempos del diseo web, y mucha gente todava lo
hace de esta manera (aunque no se debera de hacer) y, de hecho, es uno de los motivos por los que
hemos creado este curso. Aqu no trataremos estos mtodos. stas son las razones ms importantes para
utilizar CSS y HTML en vez de mtodos obsoletos:
1. Eficiencia del cdigo: cuanto mayores sean los archivos, ms tardarn en descargarse y ms dinero le
costar a algunas personas (algunas personas todava pagan por megabyte descargado). Por lo tanto,
no se debe malgastar el ancho de banda con pginas grandes abarrotadas de informacin de estilo y de
formato en cada archivo HTML. Una alternativa mucho mejor es que los archivos HTML estn
desglosados y limpios, e incluir la informacin de estilo y de formato slo una vez en un archivo CSS
independiente o en varios.
Eficiencia del cdigo
Para ver un caso real de este hecho en accin, podis ver el artculo sobre la
reescritura de Slashdot, en A List Apart Slashdot, donde el autor tom una pgina
web muy popular y la reescribi en XHTML/CSS.
2. Facilidad de mantenimiento: en relacin con el ltimo punto, si la informacin de estilo y formato slo
se especifica en un sitio, quiere decir que slo habr que hacer actualizaciones en un lugar si se quiere
cambiar el aspecto de la pgina web. Preferirais tener que actualizar esta informacin en cada pgina
de vuestra web? No lo creo.
3. Accesibilidad: los usuarios de la web con problemas visuales pueden utilizar una tipo de software
conocido como "lector de pantalla" para acceder a la informacin mediante el sonido en vez de la vista;
literalmente, les lee la pgina. Adems, el software de introduccin de datos mediante la voz que utilizan
las personas con problemas de movilidad tambin se beneficia de las pginas web con una semntica
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 que interaccione interaccione
mediante voz utilizar instrucciones con su voz. Los documentos web marcados semnticamente, en vez
de presentacionalmente, pueden resultar ms fciles de navegar y la informacin que contienen es ms
24/407
fcil de encontrar por parte del usuario. En otras palabras, cuanto ms rpidamente "entre en materia"
(el contenido), mejor. Los lectores de pantalla no pueden acceder al texto dentro de imgenes y
encuentran confusos algunos usos de JavaScript. Aseguraos de que el contenido ms importante est
disponible para todo el mundo.
4. Compatibilidad de dispositivos: ya que vuestra pgina XHTML es simplemente etiquetado normal, sin
informacin de estilo, se puede reformatear para diferentes dispositivos con atributos ampliamente
variados (por ejemplo, el tamao de pantalla), simplemente aplicando una hoja de estilos alternativa;
podis hacerlo de varias maneras. Podis ver los artculos de dev.opera.com para obtener recursos al
respecto. CSS tambin permite especificar hojas de estilo diferentes a nivel nativo para distintos
mtodos de presentacin o tipos de soporte (por ejemplo, visualizacin en pantalla, impresin,
visualizacin en un dispositivo mvil, etc.).
5. Motores de bsqueda en la web: probablemente os interesar que vuestras pginas web sean fciles
de encontrar al buscar en Google o en otros motores de busca. Un motor de bsqueda utiliza un crawler
o araa web, que es una pieza de software especializada para leer vuestras pginas. Si esta araa
tuviera problemas para encontrar el contenido de vuestras pginas o interpretara mal lo que es
importante porque no habis definido los encabezamientos como encabezamientos, etc., entonces
seguro que vuestra posicin en los resultados de busca se ver afectada.
6. Es simplemente una buena prctica: se trata de un motivo un poco del tipo "porque lo digo yo", pero
hablad con cualquier desarrollador o diseador web profesional consciente de los estndares y seguro
que os dice que separar el contenido, el estilo y el comportamiento es la mejor manera de desarrollar
una aplicacin.
4.2. Etiquetado, la base de cada pgina
HTML y XHTML son lenguajes de etiquetado formados por elementos que
contienen atributos (algunos opcionales y otros obligatorios). Estos elementos se
utilizan para etiquetar los diferentes tipos de contenidos en los documentos,
especificando que cada trozo de contenido se debe entregar supuestamente como
en los navegadores web (por ejemplo, encabezamientos, prrafos, tablas, listas con
vietas, etc.).
Como sera de esperar, los elementos definen el tipo de contenido actual, mientras que los atributos
definen informacin adicional sobre estos elementos, como una ID para identificar el elemento o una
ubicacin para que le seale un enlace. Deberais tener en cuenta que se supone que el etiquetado es el
ms semntico posible, es decir, se supone que debe describir la funcin del contenido de la manera ms
cuidada posible. La figura 1 muestra la anatoma de un elemento (X)HTML caracterstico.
Figura 1. Anatoma de un elemento (X)HTML.
Teniendo esto en cuenta, cul es la diferencia entre HTML y XHTML?
4.2.1. Qu es el XHTML?
La X de XHTML quiere decir "extensible", es decir, ampliable. Una de las preguntas ms habituales para los
que empiezan es: "he de utilizar HTML o XHTML, y qu diferencia hay?". Son casi lo mismo; la principal
diferencia radica en la estructura. Podis consultar la tabla 1 para ver las diferencias.
HTML XHTML
Los elementos y atributos no Los elementos y atributos distinguen entre maysculas y
25/407
Tabla 1. Diferencias entre HTML y XHTML.
distinguen entre maysculas y
minsculas, <h1> es lo mismo que
<H1>.
minsculas; todos estn en minsculas.
Algunos elementos no necesitan
una etiqueta de cierre (por
ejemplo, prrafos, <p>), mientras
que otros (denominados
elementos vacos) prohben la
marca de cierre (por ejemplo, las
imgenes, <img>).
Todos los elementos se deben cerrar claramente (por
ejemplo, <p>A paragraph</p>). Los elementos sin contenido
se pueden cerrar utilizando una barra inclinada en la marca
inicial (por ejemplo, <hr></hr> y <hr/> significan lo mismo).
Si servs el texto XHTML como text/html, deberis utilizar la
sintaxis abreviada en todos los elementos que estn
definidos como "vacos" y colocar un espacio antes de la
barra inclinada. Deberais utilizar la forma larga (con marcas
inicial y final independientes) en cualquier elemento que no
est definido como vaco, aunque no tenga ningn
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, <option
selected>).
Se debe utilizar la forma de atributo entera para todos los
atributos (por ejemplo, <option selected="selected">).
Los servidores habran de servir
el HTML al cliente con un tipo de
medio text/html.
El XHTML debera utilizar el tipo de medio
application/xhtml+xml pero se puede utilizar application/xml,
text/xml o text/html. Si se utiliza text/html, se deberan
seguir las directrices de compatibilidad de HTML porque los
navegadores lo tratarn como HTML (y utilizar la
recuperacin de errores para representar las diferencias
entre idiomas).
Por ahora, os recomendamos que no os preocupis mucho sobre si estis escribiendo HTML o XHTML.
Seguid los consejos que se dan a lo largo de este curso y utilizad el tipo de documento HTML e iris por el
buen camino.
Ved tambin
Para obtener ms informacin sobre tipos de documentos HTML, podis consultar el apartado 14 del mdulo
"Fundamentos de HTML".
4.2.2. Validacin, qu es eso?
Como HTML y XHTML son estndares establecidos (y CSS tambin, en realidad), el World Wide Web
Consortium (W3C) ha creado una gran herramienta denominada validador que comprueba automticamente
las pginas que queris y seala cualquier problema-error que pueda tener vuestro cdigo, como la falta de
etiquetas de cierre o la falta de comillas alrededor de los atributos.
Ved tambin
Encontraris ms informacin sobre la validacin en el apartado 20 del mdulo "El texto central de HTML".
Tambin encontraris ms informacin sobre los tipos de documentos en el apartado 14 del mdulo
"Fundamentos de HTML".
El validador de HTML est disponible en lnea en http://validator.w3.org/. Detectar automticamente si
estis utilizando HTML o XHTML y qu tipo de documento estis usando.
Si queris comprobar el CSS, el validador est disponible en http://jigsaw.w3.org/css-validator/
4.3. CSS: aadimos un poco de estilo
26/407
Las hojas de estilo en cascada permiten un control preciso sobre el formato y la
disposicin del documento. Podis cambiar o aadir colores, fondo, tipo de letra,
tamaos y estilos de tipo de letra, e incluso la posicin de elementos de vuestra
pgina web en diferentes lugares.
Hay tres maneras bsicas de aplicar estilos mediante CSS: redefinicin de un elemento, aplicacin de un
estilo a una ID o aplicacin de un estilo a una clase. Echemos un vistazo a cada uno de ellos:
1. Redefinicin de un elemento. Podis cambiar la forma en la que cualquier elemento de (X)HTML se
muestra mediante la definicin de una regla de estilo.
Ejemplo de redefinicin de un elemento
Si queris que todos los prrafos sean a doble espacio y en verde, podis aadir
esta declaracin en CSS:
p {
line-height: 2;
color: green;
}
Ahora, todo el contenido incluido entre las etiquetas <p></p> tendr una altura de
lnea doble y ser de color verde.
2. Definicin de una ID. Podis darle a un elemento un atributo id para identificarlo de manera nica en
una pgina (cada ID se puede utilizar slo una vez por pgina), por ejemplo id="navigation_menu". Esto
os permite un control ms preciso sobre el formato de una pgina.
Ejemplo de definicin de una ID
Si slo queris que un prrafo determinado sea a doble espacio y destacado con
texto verde, asignad una ID.
<p id="highlight">Paragraph content</p>
Y entonces aplicadle una regla CSS, tal como se indica a continuacin:
#highlight {
line-height: 2;
color: green;
}
Esto slo aplicar la regla CSS al prrafo de la pgina con un atributo id del tipo
highlight (el smbolo de almohadilla es slo una convencin de CSS para indicar
que se trata de una ID).
3. Definicin de una clase. Las clases son como las ID, excepto que se puede tener ms de un elemento
de la misma clase en cada pgina.
Ejemplo de definicin de una clase
Siguiendo con nuestro ejemplo de doble espacio, si queris que los dos primeros
prrafos de una pgina sean a doble espacio y estn destacados, les habrais de
aadir clases como:
<p class="highlight">Paragraph content</p>
<p class="highlight">The content of the second paragraph</p>
Y entonces aplicadles una regla CSS como se indica a continuacin:
.highlight {
line-height: 2;
27/407
color: green;
}
En este caso, highlight es una clase, no una ID: el punto slo es una convencin
de CSS para indicar que se trata de una clase.
El ejemplo siguiente os dar una idea mejor de cmo CSS aplica estilos a HTML.
Ved tambin
Empezaremos a ver el CSS con ms detalle en el apartado 22 del mdulo "El texto central de HTML".
4.4. JavaScript: adicin de comportamiento a las pginas web
Por ltimo, JavaScript es el lenguaje de script que se utiliza para aadir comportamiento a sus pginas web.
JavaScript se puede utilizar para validar los datos que se introducen en un
formulario (discriminar si estn en el formato correcto o no), para ofreceros la
funcionalidad de arrastrar y soltar, para cambiar estilos sobre la marcha, para
animar elementos de las pginas como los mens, para tratar las funciones de los
botones y un milln de cosas ms.
La mayora del JavaScript moderno funciona localizando un elemento HTML de destino y despus
hacindole algo, igual que el CSS, pero la manera de funcionamiento, la sintaxis, etc., es bastante diferente.
El JavaScript es un tema ms 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.
Ved tambin
De hecho, no volveris a ver el JavaScript hasta una asignatura posterior.
4.5. Una pgina de ejemplo
Hay muchos detalles que no hemos incluido, pero lo trataremos todo durante este curso de diseo web. Por
ahora, os presentaremos una pgina real de ejemplo, slo para que veis una pequea muestra de aquello
con lo que trabajaris durante el resto de apartados.
El ejemplo que presentamos a continuacin es una pgina de referencias que se puede utilizar para citar
referencias al final de, pongamos por caso, un ensayo psicolgico sobre la dinmica 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 redaccin acadmica cannica, este ejemplo muestra el
formato APA (tena que elegir uno). Descargaos el cdigo.
4.5.1. index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>References</title>
<style type="text/css">
@import url("styles.css");
</style>
</head>
<body>
<div id="bggraphic"></div>
<div id="header">
<h1>References</h1>
</div>
28/407
<div id="references">
<cite class="article">Adams, J. R. (2008). The Benefits of Valid Markup:
A Post-Modernistic Approach to Developing Web Sites. <em>The Journal
of Awesome Web Standards, 15:7,</em> 57-62.</cite>
<cite class="book">Baker, S. (2006). <em>Validate Your Pages....
Or Else!.</em> Detroit, MI: Are you out of your mind publishers.</cite>
<cite class="article">Lane, J. C. (2007). Dude, HTML 4, that's like
so 2000. <em>The Journal that Publishes Genius, 1:2, </em> 12-34.</cite>
<cite class="website">Smith, J. Q. (2005). <em>Web Standards and You.</em>
Retrieved May 3, 2007 from <a href="http://www.webstandardsandyou.com/">
Web standards and you</a>.</cite>
</div>
<div id="footer">
<p>The content of this page is copyright 2007
<a href="mailto:jonathanlane@gmail.com">J. Lane</a></p>
</div>
</body>
</html>
No haremos una diseccin de este archivo lnea por lnea, ya que veris muchos ejemplos en futuros
apartados; sin embargo, a continuacin se indican algunos elementos importantes que cabe tener en cuenta.
La lnea 1 es lo que se denomina declaracin de tipo de documento o doctype. En este caso, la pgina es
"XHTML 1.0 Transitional". El tipo de documento especifica una serie de reglas que debe seguir el etiquetado
y gracias a las que se puede validar.
Ved tambin
Podis ver el apartado 14 del mdulo "Fundamentos de HTML" para encontrar ms informacin sobre tipo de
documentos.
Las lneas 5 a 7 importan un archivo CSS a la pgina: los estilos contenidos en este archivo se aplicarn a
los diferentes elementos de la pgina. En el siguiente subapartado veris el contenido del archivo CSS que
trata todo el formato de la pgina.
Hemos asignado una clase diferente a cada uno de los diferentes tipos de referencia. Hacerlo de esta
manera nos permite aplicar un estilo diferente a cada tipo de referencia, as, en nuestro ejemplo hemos
puesto un color diferente a la derecha de cada referencia para que sea ms fcil analizar la lista.
Ahora demos un vistazo al CSS que aplica estilo al HTML.
4.5.2. styles.css
body{
background: #fff url('images/gradbg.jpg') top left repeat-x;
color: #000;
margin: 0;
padding:0;
border: 0;
font-family: Verdana, Arial, sans-serif; font-size: 1em;
}
div {
width: 800px;
margin: 0 auto;
}
#bggraphic {
background: url('images/pen.png') top left no-repeat;
height: 278px;
width: 362px;
position: absolute;
left: 50%;
z-index: 100;
}
29/407
h1 {
text-align: center;
text-transform: uppercase;
font-size: 1.5em;
margin-bottom: 30px;
background: url('images/headbg.png') top left repeat;
padding: 10px 0;
}
#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: 0.5em;
border-top: 1px solid #000;
margin-top: 20px;
}
#footer a {
color: #000;
text-decoration: none;
}
#footer a:hover{
text-decoration: underline;
}
Hemos exagerado un poco con el estilo de esta pgina y hemos aadido algunos bonitos efectos de fondo
para mostraros algunas de las cosas que se pueden conseguir con el CSS.
La lnea 1 establece algunos valores predeterminados para el documento, como el color del texto y del
fondo, el ancho del borde que se debe aadir en torno al texto, etc. Algunas personas no se preocuparn de
indicar explcitamente valores predeterminados como stos, y la mayora de los navegadores modernos
aplicarn sus propios valores predeterminados, pero es una buena idea, ya que le permite un control mayor
sobre cmo se ver vuestra pgina web en diferentes navegadores.
En la lnea siguiente hemos establecido la anchura de pgina en 800 px (aunque en este caso podramos
haber especificado un porcentaje para que la pgina se expanda/contraiga en funcin del tamao de la
ventana del navegador). La configuracin de mrgenes que hemos utilizado garantizar que el contenido de
la pgina siempre se mantenga centrado en la ventana.
Las imgenes PNG semitransparentes no funcionan en Internet Explorer 6 o versiones anteriores, pero
funcionan prcticamente en todos los navegadores modernos; podis consultar la correccin de JavaScript
para el IE de Dean Edwards para una solucin para IE 6 a este problema, que tambin resuelve algunos de
los problemas de compatibilidad con CSS de IE 6.
Pasemos ahora a fijarnos en las imgenes de fondo utilizadas en la pgina (se aplican utilizando las
declaraciones de fondo: url). En esta pgina tenemos 3 elementos de fondos diferentes. El primero es una
gradacin de azul a blanco que empieza desde la parte superior de la pgina. En segundo lugar, hemos
utilizado un PNG semitransparente para el grfico de la pluma para crear un poco de contraste con el texto
que tiene encima y respetar la gradacin. Por ltimo, hemos utilizado otro PNG para el fondo del
encabezamiento de pgina. Le da al ttulo un poco ms de contraste y ofrece un efecto de calidad.
30/407
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 evolucin de la web. Si ya
habis tenido un poco de contacto con HTML, lo podis aprovechar perfectamente. Todo lo que sabis sigue
siendo vlido, slo hay que tratar algunos conceptos de manera diferente (y tener un poco ms de cuidado
con el etiquetado).
Aparte de tener la satisfaccin de un trabajo bien hecho, el desarrollo de los estndares web es totalmente
lgico. Los argumentos en contra del desarrollo con estndares son que se debe invertir mucho tiempo y es
muy pesado hacer que un diseo funcione en distintos navegadores. Se podra utilizar el argumento contrario
para hacer que un formato no basado en estndares funcione en diferentes dispositivos y con futuras
versiones de navegadores. Cmo se puede tener la certeza de que un etiquetado que se sostiene con
agujas se ver bien en Opera 12.0, Firefox 5.0 e IE 10.0? No se puede, a no ser que se sigan algunas
reglas.
Preguntas de repaso
1. Cul es la diferencia entre una clase y una ID?
2. Para qu sirven XHTML, CSS y JavaScript en una pgina web?
3. Tomad el archivo index.html del ejemplo y cambiad el formato utilizando slo CSS (os recomendamos
editar el archivo utilizando un editor de texto como el Bloc de Notas o Text Wrangler). No hagis ningn
cambio al HTML.
a. Aadid un icono para cada uno de los diferentes tipos de referencia (un icono diferente para
artculos, libros y recursos web). Generad vuestros propios iconos para este propsito y haced
que aparezcan junto con los diferentes tipos de referencia utilizando slo CSS.
b. Ocultad el aviso de copyright de la parte inferior de la pgina.
c. Cambiad el aspecto del ttulo, conseguid que destaque.
4. Qu tipo de cosas podrais hacer con CSS para lograr que este ejemplo funcione bien con un
navegador de telfono mvil?
: :
31/407
Introduccin al mundo de los estndares web - Estndares web: un bonito sueo, pero cul es la realidad?
Estndares web: un bonito sueo, pero cul es la
realidad?
Accesibilidad : : :
Jonathan Lane. 8 de julio del 2008. Publicado en: validacin, adopcin, compatibilidad, estndares
Hasta ahora, hemos hablado sobre el maravilloso ideal de los estndares web. Los estndares web permiten
una interoperabilidad entre todos los navegadores web, en todos los sistemas operativos e incluso en todos
los dispositivos electrnicos disponibles. Pero es sta la realidad? Todos los navegadores cumplen los
estndares al 100%? Estn utilizando adecuadamente los estndares web todos los desarrolladores web?
Construyen los desarrolladores web una pgina utilizando estndares web y ya se quedan tranquilos
pensando que su diseo funcionar en todas partes?
La respuesta realmente sencilla a esta ltima pregunta es no; aunque se trata de una situacin ideal, est
muy alejada de la realidad.
5.1. Cmo se comprueba el cumplimiento de los estndares web?
5.2. Compatibilidad de los estndares en las pginas actualmente
5.2.1. Amazon: comprar con estndares?
5.2.2. CNN: noticias estandarizadas?
5.2.3. Apple: la mxima elegancia en diseo... y en validacin?
5.2.4. Un pequeo sondeo de compatibilidad de estndares
5.3. Por qu hay tan pocas pginas que cumplan los estndares?
5.3.1. Educacin
5.3.2. Motivos empresariales
Resumen
Preguntas de repaso
5.1. Cmo se comprueba el cumplimiento de los estndares web?
Antes de continuar, la pregunta que probablemente os est pasando por la cabeza es: cmo se sabe si una
pgina web utiliza estndares web? Tiene un aspecto diferente a cualquier otra pgina web? S y no. Las
pginas web que cumplen los estndares web, si estn correctamente desarrolladas, no deben parecer
diferentes de las pginas web codificadas mediante un etiquetado que es un batiburrillo o que se sujeta con
pinzas. No obstante, el cdigo fuente de la pgina web puede parecer bastante diferente (intentad hacer clic
con el botn secundario del ratn o pulsando la tecla Ctrl sobre una pgina web y seleccionad la opcin
"Cdigo fuente" o "Ver el cdigo fuente"; la terminologa exacta depende del navegador).
Una pgina web que cumpla los estndares tendr un etiquetado ordenado y claro con poco o sin formato
incrustado en la misma pgina. Es posible que os resulte difcil notarlo a primera vista pero, creedme, las
personas con dificultades visuales que utilizan lectores de pantalla y motores de bsqueda lo notarn
enseguida. En el ltimo apartado ya hemos hablado de las ventajas de utilizar los estndares web.
La manera ms sencilla de comprobar la compatibilidad de los estndares es utilizar una prctica
herramienta, disponible en lnea, denominada validador.
El World Wide Web Consortium (W3C) tiene disponible el validador gratuitamente en
http://validator.w3.org/ (podis consultar la figura 1). Podis (y sera necesario) utilizar esta herramienta
para comprobar errores de HTML o XHTML en cualquier pgina web que estis desarrollando.
El CSS se puede comprobar utilizando el validador de CSS disponible en http://jigsaw.w3.org/css-
validator/.
Visitad libremente estos enlaces y probad algunas de las pginas web que ms os gusten.
32/407
Figura 1. El servicio de validacin de etiquetado del W3C comprueba vuestras
pginas e indica cualquier error de etiquetado.
Validar siempre las pginas que se crean es slo la mitad del proceso. Cmo podemos comprobar si los
navegadores cumplen los estndares? El Proyecto de estndares web ha desarrollado una serie de pruebas
denominadas pruebas Acid que utilizan algunas reglas complejas de HTML y CSS (adems de otro
etiquetado y cdigo), para ver si un navegador puede reproducir correctamente diferentes pantallas de
prueba. La ltima versin de la prueba Acid, Acid3, todava est en proceso de creacin.
Ved tambin
Podis leer ms cosas sobre las pruebas Acid en la pgina web de acidtests.org y tambin podis visitar las
pginas de prueba reales para poner a prueba vuestro navegador.
5.2. Compatibilidad de los estndares en las pginas actualmente
Utilizan las principales webs los estndares o simplemente recogen cuatro cosas y ya est? Echemos una
ojeada a unas cuantas empresas y veamos qu puntuacin reciben mediante el servicio de validacin de
etiquetado del W3C. Os sorprendera cuntas grandes pginas web no pasan las pruebas de validacin de
estndares; no os desanimis porque no hay motivo para no poder hacerlo mejor y que vuestras pginas s
se validen correctamente. Cuando leis los siguientes informes, tened en cuenta que cuanto mayor y
complicada sea la pgina web, ms difcil ser validarla, en general (hay otros factores que se deben tener
en cuenta, como las tecnologas utilizadas).
5.2.1. Amazon: comprar con estndares?
Es posible que si alguna vez habis realizado alguna compra en lnea hayis visitado Amazon.com (o una de
las webs especficas por pas). Amazon es un megaalmacn del ciberespacio que ofrece de todo, desde
libros hasta CD e incluso alimentos en algunas zonas. Ahora bien: pasara Amazon.com la prueba de
validacin? Podis comprobarlo en la figura 2.
33/407
Figura 2. Amazon.com falla estrepitosamente! No slo tiene etiquetado no
vlido, sino que ni siquiera declaran un tipo de documento (explicando qu
versin de HTML o XHTML utilizan).
A Amazon todava le queda mucho por hacer con respecto a compatibilidad con los estndares.
Desconocemos qu sucede en Amazon, pero si se nos permite especular un poco, diramos que, teniendo
en cuenta que Amazon ya hace tiempo que funciona, probablemente han utilizado el mismo software para su
pgina web durante toda su existencia. Como los estndares web no han recibido la suficiente atencin
hasta comienzos de este siglo, es muy probable que el sistema que utiliza Amazon para vender productos en
lnea se desarrollara mucho antes, cuando los estndares web no eran realmente aceptados ni publicitados.
No lo sabemos a ciencia cierta, pero intuimos que Amazon se encuentra en el caso de aquellos que se
mantienen con lo que les funciona.
5.2.2. CNN: noticias estandarizadas?
Seguro que las organizaciones de noticias son entes semnticos? CNN.com es una de las pginas web de
medios mayor de todo el mundo. Al tener recursos globales e informar sobre las noticias a medida que
suceden, seguramente tendrn un equipo de especialistas internos para garantizar que su web tenga un
etiquetado vlido, no? Podis comprobarlo en la figura 3.
Figura 3. CNN.com (el 15 de abril del 2008) no supera la validacin con 33
errores. Se menciona un tipo de documento HTML 4.01 transicional, pero gran
parte de su etiquetado se parece mucho a XHTML.
33 errores no est mal, tratndose de una web de dimensiones y complejidad como las de CNN. Puede que
estos 33 errores se produzcan (y de nuevo estamos especulando) por que el sistema de gestin de
contenidos que utiliza no est del todo preparado para producir etiquetado que cumpla los estndares, o
podra tratarse de una coleccin de errores de etiquetado por parte de un personal de produccin que se
especializa en redactar noticias, y no en producir webs; cualquier explicacin es verosmil.
34/407
5.2.3. Apple: el mximo de elegancia en diseo... y en validacin?
Apple es famosa por sus productos de hardware y software bonitos y funcionales. Sus anuncios de productos
son casi como experiencias religiosas para multitudes de fieles seguidores. La web de Apple (podis ver la
figura 4) a menudo se considera muy bien diseada y organizada, sin embargo... pasara la prueba de
validacin?
Figura 4. A Apple.com le falta muy poco para tener un etiquetado HTML 4.01
transicional vlido. Entre los seis errores que tiene hay una mezcla de errores de
etiquetado y un caso de uso de etiquetas especficas de Safari.
La web de Apple se acerca mucho a la validacin. Realmente, slo sera necesario que alguien le dedicara
cinco minutos para corregir los errores y hacer que la pgina supere la prueba de validacin. No obstante, el
nico error que mencionaramos brevemente es que Apple ha decidido utilizar un atributo especfico de
Safari en su cuadro de busca (dando al cuadro de busca el atributo type="search"). En Safari, esto permitir
ver una lista de buscas recientes pinchando sobre un pequeo icono de lupa. En otros navegadores, como
Opera o Internet Explorer, se ver slo como un cuadro de texto normal.
5.2.4. Un pequeo sondeo de compatibilidad de estndares
En vez de ver muchos ejemplos como ste, hemos comprimido el resto de webs sondeadas en una prctica
grfica de tarta. Hemos mirado unas 40 webs corporativas de la lista Fortune 500 y tambin las
clasificaciones Alexa de webs con ms trfico, y en la figura 5 se muestra lo que hemos averiguado:
35/407
Figura 5. El 85% de las webs sondeadas no pasaron la validacin de ninguna
manera. Algunas presentaban fallos espectaculares de hasta mil errores; otras
tenan slo un par de errores aqu y all.
5.3. Por qu hay tan pocas pginas que cumplan los estndares?
Nos preguntamos: por qu, por qu no validan? Esto puede ser un poco dramtico, pero como mnimo
tiene un tono similar a la pregunta que os estis haciendo en este momento. Por qu se validan tan pocas
webs? Ya hemos mencionado algunas de las razones posibles cosas como sistemas de comercio
electrnico o sistemas de gestin de contenidos heredados pero tambin hay otros motivos subyacentes.
5.3.1. Educacin
La facultad en la que estudi tena un programa de sistemas de informacin de gestin (management
information systems), un programa de ciencias informticas y un programa de nuevos medios, cada uno de
los cuales tena asignaturas relacionadas con la produccin de webs pero, aunque enseaban muchas cosas
de manera eficiente, en ninguna de stas haba realmente mucha cobertura sobre cmo codificar realmente
una web. La sensacin general que tengo cuando reviso muchas asignaturas universitarias es que los
lenguajes web como el HTML, el CSS y JavaScript se encuentran bajo el umbral tcnico de la mayora de los
programas de ciencias informticas y por encima del de la mayora de los programas de MIS/Nuevos medios.
A donde quiero ir a parar en este caso es que muchos cursos educativos no cubren este tipo de materias con
mucho detalle. Apostara a que si le preguntis a diez desarrolladores que trabajen con estndares web
dnde aprendieron a utilizarlos, nueve de ellos responderan que son autodidactas (y el otro no respondera
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 desarrollar los estndares, y la Web
Standards Project (WaSP) se estn tomando seriamente este reto y estn presionando realmente para que
mejore la aceptacin de los estndares web, tanto por parte de los fabricantes de navegadores como por
parte de los desarrolladores.
De hecho, el verdadero motivo por el que se cre este curso que estis leyendo es proporcionar un conjunto
adecuado de materiales de aprendizaje para los estndares web y un medio para utilizar este material para
aprender, de manera gratuita. En definitiva, intentamos eliminar algunos motivos ms (dudamos de si utilizar
la palabra excusas en este caso...) por los que la gente no est adoptando los estndares web. Realmente
no hay excusa para no utilizarlos, teniendo en cuenta las ventajas que suponen (tal como se ha visto en el
subapartado 4.1).
5.3.2. Motivos empresariales
Una web que visitamos frecuentemente, destinada a emprendedores implicados en poner en marcha nuevas
36/407
iniciativas basadas en la web, ha alojado una serie de discusiones sobre el uso de los estndares web en
"aplicaciones web 2.0". Generalmente, existe un intercambio interesante entre aquellos que creen que se
deberan utilizar los estndares web porque tiene sentido (por todos los motivos que hemos tratado
anteriormente), y aquellos que simplemente dicen que no importa.
El fondo de la cuestin es que los navegadores web interpretarn el cdigo por malo que sea. No es
necesario validar vuestras pginas para que se visualicen correctamente en la mayora de los navegadores.
Desde una perspectiva empresarial, donde el tiempo es oro, para qu preocuparse de invertir ms tiempo a
fin de que se validen? Si podis arreglar cuatro cdigos en forma de tabla en 30 minutos, o pasaros 30
minutos codificando vuestra pgina 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 mayora de
los navegadores web, qu os parece ms fcil y rpido?
Mucha gente de mi generacin (casi llego a la treintena en el momento de redactar esto) aprendi a crear
webs utilizando tablas para el formato y etiquetas de tipo de letra para la tipografa. Puede parecer
abrumador volver a aprender a hacer algo cuando lo que ests haciendo todava "funciona" (todava se ve
bien en la mayora 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 revisin
de rendimiento. De manera que, realmente, cul es el incentivo?
Pues lo que yo creo es (ya podis adivinar cul es mi posicin) que el planteamiento del cdigo desordenado
o mal hecho tiene muy poca visin de futuro. Segn mi experiencia, redisear una web basada en
estndares es mucho ms fcil que tener que convertir un caos de pginas incorrectamente codificadas (he
hecho las dos cosas). Todava debe llegar la utopa que prometen XHTML y CSS en la que slo se ha de
tocar el CSS para redisear una web, pero me he acercado mucho.
Tambin hay que tener en cuenta que veris muchos ms anuncios de trabajo actualmente pidiendo
conocimientos de estndares web que nunca.
Tambin hay algunos motivos empresariales directos que se deben tener en cuenta. En general, el uso de
estndares web mejora la posicin de una web en las clasificaciones de los motores de bsqueda (el orden
en el que aparecen las webs cuando se realiza una busca de Google) y sobre todo mejora la facilidad de
encontrarla. Adems, el uso de estndares y buenas prcticas generalmente har que la pgina web sea
ms accesible para las personas con discapacidades que intentan utilizarla y para los usuarios que intentan
acceder a la web con telfonos mviles. Ms usuarios y un aumento de la visibilidad siempre es bueno para
el negocio.
Resumen
En este apartado hemos hablado sobre el estado actual de la adopcin de estndares web, sobre cmo
comprobar si los estndares se estn utilizando correctamente en una web, cuntos utilizan los estndares
web correctamente y los motivos por los que la gente no adopta los estndares. Como ya habis visto
anteriormente, los motivos no son tan imperativos y deberan ser fciles de superar.
As pues, qu debe hacer un desarrollador web emprendedor? Pensis que son importantes los
estndares web (y seguir leyendo este curso), o sois de los que ponis en marcha un editor grfico y
empezis a maquetar la web con tablas?
Digmoslo de esta manera: la queja individual mayor que he ledo de personas que dicen que el desarrollo
basado en estndares es una prdida de tiempo es que se tarda demasiado en aprender los estndares web
en vez de los mtodos obsoletos y desarrollar webs que funcionen con todos los navegadores. Entonces,
por qu no empezar aprendiendo la manera correcta de hacerlo y ahorrarse unos cuantos problemas?
Habis decidido aprender cmo crear webs y debis hacerlo de una manera u otra; por lo tanto, por qu no
aprender a hacerlo correctamente?
Preguntas de repaso
1. Hemos visto muchas "grandes" webs y si validan o no. Pasad por el validador algunas de las webs que
visitis a menudo. Validan? Si no es as, mirad algunos de los errores para haceros una idea de por
qu fallan.
2. Qu es un tipo de documento (doctype)? De qu se encarga?
37/407
3. Qu argumentos podis dar a favor de los estndares web para los negocios?
Servicio de validacin de marcado del W3C.
Web del W3C (con informacin sobre distintos estndares y recomendaciones para el futuro).
El Proyecto de estndares web.
: :
38/407
Conceptos de diseo web - Arquitectura de la informacin: planificacin de una web
Arquitectura de la informacin: planificacin de una web
Accesibilidad : : :
Jonathan Lane. 8 de julio del 2008. Publicado en: arquitectura, informacin, AI, mapa, planificacin
En general, la fase de planificacin de una web (o de cualquier proyecto) puede ser un poco estresante.
Todo el mundo tiene una opinin sobre cmo se habra de crear una web y a menudo todas las opiniones
entran en conflicto entre ellas. El objetivo nmero uno de cualquier web debera ser crear algo que sea til
para las personas que la utilizarn. Realmente no importa qu diga vuestro jefe, qu diga aquel tipo del
fondo con un doctorado en ingeniera informtica, o incluso cules sean vuestras preferencias personales: al
final, si creis una web para un grupo de personas concreto, la opinin de este grupo es la nica que cuenta.
Este apartado establecer las fases iniciales de la planificacin de una web y la disciplina que se suele
denominar arquitectura de la informacin o AI. Ello implica pensar en cul ser el pblico objetivo, qu
informacin y servicios necesita de una web y cmo se habra de estructurar para ofrecrselos. Deberis
mirar todo el conjunto de informacin que ha de ir en la web y pensar cmo descomponerlo en fragmentos, y
cmo estos fragmentos se deben relacionar entre ellos.
6.1. Debis planificar la web que queris crear
6.1.1. Presentacin de "The Dung Beatles"
6.1.2. Y ahora qu? Trazado del mapa de una web
6.1.3. Nombres para las pginas
6.1.4. Adicin de algunos detalles
Resumen
Preguntas de repaso
6.1. Debis planificar la web que queris crear
Puede ser que muy de vez en cuando os encontris con algn proyecto web al que os podis lanzar a
trabajar directamente sin ningn planteamiento previo, pero sta es, de lejos, la excepcin y no la regla.
Echemos un vistazo a una banda ficticia denominada "The Dung Beatles" e intentemos ayudarles a trabajar
en las fases iniciales de la planificacin de su web. Hablaremos con la banda y averiguaremos qu objetivos
tienen y qu les gustara ver en la web. Despus, empezaremos a trabajar en una estructura para la
informacin de la banda.
6.1.1. Presentacin de "The Dung Beatles"
The Dung Beatles (TDB) tienen un problema. Son la banda preferida de homenaje a los Beatles de Moose
Jaw, Saskatchewan, pero necesitan realzar su imagen de cara a una prxima gira norteamericana este
verano. Tienen actuaciones programadas por todo Canad y Estados Unidos, pero son prcticamente
desconocidos fuera de su ciudad natal. Si hubiera alguna manera, mediante la tecnologa, de llegar a un
gran nmero de admiradores de los Beatles por relativamente poco dinero...
Afortunadamente para TDB, tenemos esta cosa denominada web y rpidamente deciden que crear una
pgina web es la solucin que han estado buscando. TDB necesitan un sitio para promocionar las fechas de
la gira, construir una base de fans en otras ciudades y aumentar el conocimiento de la banda. Trabajaris
sus ideas con ellos y veris si podis realizar una planificacin para su web.
Concertad una reunin con vuestros nuevos clientes para definir exactamente qu pretenden y para decidir
fechas de entrega y costes. Iniciad la conversacin sugiriendo hablar sobre las finalidades y los objetivos de
la web con el fin de tener una idea de qu quieren. Qu espera obtener la banda con su presencia en la
red?
TDB empiezan a hablar sobre la prxima gira y dicen que estara bien que todos los fans de los Beatles los
conocieran en cada una de las paradas previstas. Ahora estamos en febrero y esperan iniciar la gira dentro
de cinco meses.
Esperad un momento! Una web por s misma no generar su propio trfico ni se har publicidad sola. A raz
39/407
de la conversacin, deducs que el principal objetivo de la web es proporcionar un lugar de encuentro para
los fans de TDB en la red, un lugar donde puedan estar al da de las ltimas novedades, fechas y sitios de
conciertos. Mediante los fans (boca a boca) y otras acciones publicitarias se atraer gente nueva a la web,
donde podrn descargar pistas de muestra, ver fotos de la banda (completamente disfrazados) y averiguar
dnde y cundo pueden verlos en directo.
Raul McCoffee, el portavoz del grupo, seala que estara bien poder ganar ms dinero para la gira mediante
la venta de algunos CD y merchandising de la banda. Reunid a la banda y dibujadles un esquema rpido de
lo que puede querer el visitante cuando visite la web. Se trata slo de una lluvia de ideas; de momento hay
muy poca estructura.
Hay dos grupos generales de personas que visitarn la web: gente que ya conocen a TDB y les gustan
(fans), y gente que no lo tiene claro. Debis atender a estos dos grupos de manera diferente; a los fans
potenciales se les ha de "vender" el grupo, mientras que los fans actuales quieren "alimentar su adiccin"
(por as decirlo). Qu tipo de informacin buscar cada uno de estos grupos? La figura 1 nos lo indica: se
trata de un borrador tpico de lo que haris en este punto en futuros proyectos de web. A partir de aqu,
decidiris qu pginas necesita la web y cmo deben ir enlazadas entre ellas.
Figura 1. Lo que quieren los visitantes de la web.
Estableced un presupuesto y acordad publicar la web en un mes. Prometed volver a reuniros con la banda
en un par de das con algunos planes que describan la direccin hacia la que va.
6.1.2. Y ahora qu? Trazado del mapa de la web
Mucha gente improvisar un mapa de la web en esta fase: parece un cuadro organizativo. Generalmente, es
un grfico bastante sencillo que muestra simplemente los nombres de cada una de las pginas de la web y
cmo se enlazan en la estructura global de la web. Personalmente, nos gusta poner un poco ms de
40/407
informacin y comentar la finalidad y el contenido de cada pgina. Por ejemplo, una pgina puede tener el
ttulo "Home" (inicio), pero qu es la pgina de inicio? Se trata del tpico mensaje "bienvenido a nuestra
web" (eecs!), o se trata de una pgina ms dinmica que contiene elementos de noticias e imgenes
atractivas? Dedicad unos minutos a pensar en las pginas en las que se podra convertir el borrador anterior
y qu podra haber en cada una de ellas. Intentad dibujar vuestro propio mapa de la web antes de pasar al
subapartado siguiente.
Ahora empecemos con los conceptos bsicos: uno de estos cuadros organizativos que hemos mencionado
antes. La figura 2 muestra nuestro intento de convertir la lluvia de ideas en un cuadro organizativo de la web:
Figura 2. Primera versin de la estructura de la web.
Esto incluye definitivamente todas las pginas que necesitamos, pero no hay ninguna agrupacin real
todava. Por ahora slo se trata de un batiburrillo de pginas y en esta fase todava no hemos meditado
mucho cmo se llama cada cosa. Dimos un paso ms e intentamos "fragmentar" la informacin en
agrupaciones ligeramente mayores; la figura 3 muestra lo que hicimos:
41/407
Figura 3. Estructura de la web, revisada.
Hemos hecho un par de cosas con la estructura revisada de la web. La pgina "Noticias de la banda" ofrece
a TDB un lugar para publicar cualquier cosa que quieran compartir con sus fans. Aunque su gira de verano
haya acabado y la pgina "Fechas y lugares de la gira" ya no sea relevante, servir para publicar cosas. La
adopcin de un formato de blog en este caso permitir a los fans comentar en contexto las diferentes
historias, y ayudar a construir una comunidad en lnea en torno a TDB. Las noticias y los acontecimientos
de la gira generarn la mayor parte de la discusin, de manera que es mejor agruparlas. Adems, la palabra
Noticias es una palabra ms simple y genrica que la gente podr reconocer ms rpidamente si est
echando un vistazo a la pgina buscando la informacin que desea.
La nueva pgina "Acerca de The Dung Beatles" agrupa las biografas y fotografas de los miembros de la
banda. Yendo por esta va, tenemos un punto de partida para las biografas individuales de los miembros de
la banda. Siguiendo un argumento parecido al de antes, Acerca de es un trmino comn utilizado en muchas
webs. Siempre que un visitante quiere saber ms sobre una empresa, un producto, un servicio o una
persona, busca un enlace del tipo "Acerca de...".
Por ltimo, el trmino Discografa es un trmino un poco tcnico. Es posible que pocas personas entiendan
que este trmino no quiere decir otra cosa que "La msica". Adems, abre esta pgina a contenido adicional:
fuentes de inspiracin, historia de una cancin en concreto, etc. Ya captis la idea, no? Creemos que ya
estamos a punto para el despliegue. Despus de haber hablado un poco sobre cmo llamar las pginas de
manera razonable, continuaremos aadiendo un poco ms de informacin sobre cada pgina.
42/407
6.1.3. Nombres para las pginas
Los nombres de las pginas puede ser una de las decisiones ms cruciales que se tomarn durante el
diseo de la web. No slo es importante para que los visitantes puedan encontrar el camino en la web, sino
que tambin es una de las otras cosas que indican cmo es de fcil encontrar la web con un motor de
bsqueda (a lo largo del curso encontraris distintas noticias en cuanto a la optimizacin de motores de
bsqueda).
En general, los motores de bsqueda miran todo el texto incluido en una web, el URL de la pgina y el texto
de cualquier enlace en esta pgina a la hora de decidir "cmo de importante" es. Asignar nombres y URL
sensatos a las pginas animar a cualquiera que enlace con vuestras pginas a utilizar descripciones
juiciosas.
El nombre de la pgina
Pongamos por caso que sois una empresa de automviles y tenis un modelo
denominado "The Speedster". Tenis una web para promocionar este automvil y una
de las pginas enumera las prestaciones disponibles. Cmo llamarais a esta pgina:
"Prestaciones", "Prestaciones disponibles", "Prestaciones del Speedster" o "Elementos
accesorios"? Nosotros diramos que "Prestaciones del Speedster" es la mejor opcin
de esta lista. Es especfico sobre qu contiene la pgina, probablemente el ttulo
aparecer arriba del todo de la pgina y estar destacado (cosa que va muy bien para
la indexacin de los motores de bsqueda), y quiz puede encajar incluso en el URL
(algo parecido a www.autocompany.com/speedster/prestaciones-speedster/).
6.1.4. Adicin de algunos detalles
De momento no es necesario que lo planifiquis todo, pero como mnimo debis proporcionar una breve
descripcin de qu tenis pensado para cada pgina. Una vez hayis decidido la estructura de la web,
numerad cada una de las pginas y proporcionad una breve descripcin de cada una como hemos hecho en
la figura 4 para la pgina de inicio.
Ved tambin
Tendris la ocasin de crear una planificacin para el resto de las pginas en una de las preguntas de repaso
al final del apartado.
Figura 4. Informacin de la pgina de inicio.
Esto es todo lo que debis hacer por ahora. No es necesario que describis la funcionalidad de la pgina, la
43/407
tecnologa que utilizaris para construirla ni el diseo-formato con mucho detalle. Slo debis escribir lo que
tengis en mente en trminos generales. El objetivo, en este caso, es comunicar al cliente lo que pensis y
obligaros a pensar ms cosas.
En esta fase puede suceder que os deis cuenta de que la web tiene demasiadas pginas y de que nunca
podris encontrar contenidos para llenarlas. Podis volveros locos a la hora de crear una jerarqua de
pginas. Por ejemplo, si los miembros de la banda slo queran publicar un prrafo sobre ellos mismos, no
habra que crear pginas biogrficas independientes para cada miembro. Se podran combinar todas en una
nica pgina.
Resumen
Este apartado ha considerado la web como un todo y ha descrito cmo se debera plantear la estructura. En
el siguiente apartado, pasaremos a la pgina en s y veremos qu supone crear una gran web: qu funciones
incluir y dnde incluirlas. Seguiremos con los apartados 3, 4 y 5 y despus miraremos el diseo visual de una
pgina. De manera que esto se realizar en tres pasos lgicos (verificadlo con el cliente en cada fase para
aseguraros de que est de acuerdo):
1. En primer lugar, decidid el contenido de una web y decidid cmo estructurar este contenido en pginas.
2. A continuacin, decidid las funciones que se utilizarn realmente en la web.
3. La ltima cosa que haris antes de empezar realmente a sacar adelante y codificar la web es idear el
diseo visual: los formatos de pgina, los colores, etc.
Preguntas de repaso
1. Mirad de nuevo la figura 1 e intentad desarrollar una lluvia de ideas similar para una web sobre un
automvil (elegid cualquier automvil real o imaginario).
a. Qu quieren saber los visitantes de la web sobre l?
b. Hay algo en las webs de automviles existentes que consideris esencial o innecesario?
2. Con las notas extradas de la lluvia de ideas intentad organizar la informacin. Qu agrupaciones de
pginas seran lgicas?
3. Otra actividad que a veces resulta til cuando se planifica una web es ver qu hace la competencia.
Haced una busca de las webs de bandas (puntos adicionales si se trata de bandas de homenaje) y
fijaos en qu ofrecen. Nos hemos dejado algo?
4. Echad un vistazo a la figura 4 e intentad desarrollar figuras parecidas para el resto de las pginas que
habis identificado en la web.
: :
44/407
Conceptos de diseo web - Qu necesita una buena pgina web?
Qu necesita una buena pgina web?
Accesibilidad : : :
Mark Norman Francis. 8 de julio del 2008. Publicado en: contexto, accesibilidad, consistencia, navegacin, usabilidad
Continuando con el apartado anterior, en ste veremos el contenido de la web de The Dung Beatles para
que veis lo que deben tener las buenas webs y pginas.
Todava no veremos el cdigo real subyacente; en vez de ello, empezaris a examinar las diferentes pginas,
pensando qu elementos habran de aparecer y teniendo en cuenta temas como la consistencia, la
usabilidad y la accesibilidad.
7.1. La pgina de inicio
7.1.1. Qu significa para nuestra web?
7.2. Navegacin
7.3. Otros elementos comunes de una web
7.4. El contexto lo es todo
7.4.1. Contenido relevante
7.4.2. Encabezamientos
7.5. Usabilidad
7.6. Accesibilidad
Resumen
Preguntas de repaso
7.1. La pgina de inicio
En este punto, mucha gente tiende a pensar: "comencemos por la primera pgina que vern los usuarios: la
pgina de inicio". Parece lgico, no?
Puede sonar lgico pero, una vez ms, realmente no es el mejor sitio para empezar. Un error comn es
centrarse en la pgina de inicio. Las pginas de inicio de las webs pueden convertirse en una propiedad
delicada que trate de resumir toda la web y todo para todo el mundo. Esto puede conducir a que se
conviertan en un enorme desorden.
Pgina de inicio de MSN
Como ejemplo de lo que queremos decir, visitad unos instantes la pgina de inicio de
MSN (podis consultar tambin la figura 1). Maravillaos de la gran sobreabundancia de
enlaces y contenidos. La red de webs MSN es muy extensa: desde viajes a televisin,
citas, direcciones, aparatos, informacin ecolgica, etc. Y todos ellos disputndose
vuestra atencin.
45/407
Figura 1. La pgina de inicio de MSN: hay un montn de cosas!
Este tipo de pgina de inicio abrumador del tipo "lanza todos los elementos excepto el ms retorcido... y
despus aade el ms retorcido" probablemente est bien para este tipo de gran recopilacin de webs, pero
para la pgina de inicio de nuestra banda es definitivamente excesiva y asustara a ms usuarios de a los
que atraera.
Adems, es una idea errnea habitual pensar que la pgina de inicio es la primera pgina que vern los
visitantes. Quiz si oyen hablar de la banda o consiguen una hoja de propaganda o una etiqueta o un
distintivo/botn de la banda, introducirn la direccin de la web en el navegador de manera que acabarn en
la pgina de inicio.
Sin embargo, lo ms probable es que los visitantes acaben en vuestra web como resultado de una
bsqueda. Si buscan por el nombre de la banda, es probable (aunque no del todo seguro) que el primer
resultado sea la pgina de inicio de la web. Pongamos por caso que alguien busca "Actuacin homenaje
Beatles": es posible que aparezca la pgina "Fechas de la gira" como primer resultado. O, si la busca era
"banda Moose Jaw", el primer resultado puede ser la pgina "Acerca de TDB" porque menciona que la banda
es de la poblacin de Moose Jaw, mientras que la pgina de inicio no lo menciona. En un artculo sobre su
decisin de dejar de cobrar por el acceso a contenido antiguo, el New York Times observaba que el
comportamiento de sus visitantes haba cambiado. Lo que haba cambiado, deca el Times, era que:
"[...] muchos ms lectores empezaban a llegar a la web desde motores de bsqueda y
enlaces de otras webs en vez de venir directamente a NYTimes.com. Estos lectores
indirectos, que no pueden acceder a los artculos tras la pared de pago y es menos
probable que paguen una cuota de suscripcin que los usuarios directos ms fieles, se
consideraron como oportunidades de ms visionados de pginas y ms ingresos por
publicidad".
7.1.1. Qu significa para nuestra web?
Todo esto significa que aunque hay que subdividir el contenido en pginas individuales, deberais pensar
cmo encontrarn los visitantes lo que realmente deben estar buscando, o dnde podran ir una vez
empiecen a explorar ms.
Aunque puede resultar tentador llenar la pgina de inicio con un poco de todo,
realmente es mejor utilizarla para destacar otras reas de contenidos de la web y
dirigir el trfico hacia stas. Tratad la pgina de inicio como cualquier otra pgina
de la web y asignadle una finalidad definida (mostrar las novedades, ofrecer una
visin global o simplemente presentar a la banda y dirigir a las personas a otros
sitios de la web, etc.). La pgina tambin necesitar alguna manera de navegar a
otras reas de la web y de crear su marca.
46/407
Ahora profundizaremos un poco ms y aprenderemos ms sobre estos aspectos...
7.2. Navegacin
Como navegar por una web es uno de los aspectos ms cruciales de la
implementacin correcta, si no el ms crucial de todos, deberis investigar los
destinos comunes de vuestra web y colocarlos en vuestra navegacin principal.
Existe otra idea errnea que podis haber odo sobre la navegacin por las pginas web: que cualquier
pgina debera estar como mximo a tres clics de distancia. La proliferacin de esta idea ha supuesto
algunos de los peores y ms complejos problemas de navegacin por Internet. Un ejemplo de la vida real:
fijaos cmo la mayora de los lugares de comparacin de precios en Internet intentan meter el mximo de
enlaces posible a causa del mantra de reducir los clics de sus clientes al mnimo antes de comprar algo, y
todava menos que abandonen y utilicen la competencia. Al final, esto supondr demasiada informacin para
que el usuario la pueda asimilar y utilizar de manera eficaz. Tener demasiadas opciones es tan paralizante
como tener muy pocas.
Mientras haya un avance aparente de un enlace al siguiente y todo les indique que van por buen camino
para llegar al objetivo final, los usuarios tendern a continuar en un sitio.
Si tenemos en cuenta lo que se ha mencionado anteriormente sobre la estructura de AI, la navegacin
principal de la web de TDB debera contener enlaces a las pginas o secciones "Tienda", "Acerca de...",
"Contacto", "La Msica" y "Noticias de la banda", y tambin un enlace de vuelta a la pgina de inicio. No es
realmente necesario enlazar a las pginas situadas por debajo de stas, como las pginas "Fechas de la
gira" y "Letras". Los enlaces a estas pginas se habran de encontrar slo en esta rea; cualquiera que
necesite saltar de la pgina de la letra de una cancin determinada a "Fechas de la gira" podr navegar a
"Noticias de la banda" y desde all a "Fechas de la gira".
Uno de los aspectos ms cruciales para conseguir una navegacin satisfactoria por una web es la
consistencia.
Un ejemplo de web consistente
Echad un vistazo a las pestaas de la parte superior de la pgina de dev opera (podis
ver la figura 2): enlaces como "Home" (Inicio), "Articles" (Artculos), "Forums" (Foros),
etc. A medida que os movis por la web de dev.opera, esta barra de navegacin se
mantendr. La navegacin cambiar para indicar dnde os encontris actualmente en
la web y proporcionar ms enlaces para ampliar en esta rea. Por ejemplo, pinchando
en la pestaa "Artculos" accederis al rea principal de artculos, que al mismo tiempo
contiene enlaces a algunos de los artculos ms recientes y una coleccin de enlaces a
reas secundarias sobre temas como "Accessibility" (Accesibilidad), "CSS" y "Mobile"
(Mvil) (podis consultar tambin la figura 2).
47/407
Figura 2. La navegacin de dev.opera es constante estis donde estis en la
web.
7.3. Otros elementos comunes de una web
Aparte de la navegacin, normalmente hay otras partes de una web que aparecen repetidamente en las
pginas.
La mayora de las webs tienen alguna forma de construccin de marca, logotipo o ensea para indicar la
propiedad.
Logotipo
Casi cada pgina de la web de Yahoo tiene el logotipo en la parte superior izquierda y
este logotipo contiene la parte de la red de Yahoo donde os encontris (como "Viajes",
"Pelculas", "Autos", etc.).
El encabezamiento (horizontalmente sobre la parte superior de la pgina) puede
contener, asimismo, ms que un simple logotipo. Tambin puede contener, o estar
adjunto, al tablero de navegacin principal. Tambin es frecuente encontrar un
cuadro de busca, que permite a los usuarios buscar por el sitio en vez de navegar
utilizando los mens y los enlaces. Deberais incluir la mayora de estos elementos
o todos ellos en cada pgina de vuestra web.
El pie (la ltima rea de la pgina) habra de contener informacin adicional como
el aviso de copyright y enlaces a pginas adicionales tiles de la web, si es que
tiene (como, por ejemplo, "Sobre esta web", "Trminos y condiciones",
"Contctanos", etc.).
El color, el formato, el uso de formas e iconos, la tipografa y las imgenes se combinan para crear una
impresin global de una pgina como "perteneciente" a la web donde se encuentra: la consistencia es la
clave. El uso de aspectos y disposiciones consistentes ayuda a mantenerse orientado sobre dnde hemos
ido a parar en la web y crea una sensacin de familiaridad. Sabis que la pgina donde os encontris est
48/407
relacionada y forma parte de la misma experiencia que las pginas anteriores porque estn visualmente
conectadas y relacionadas. Cuando diseis la web, debis tener esto en cuenta y no crear una imagen
general diferente para todas las pginas de la web.
En nuestra web de TDB, el encabezamiento de la pgina contendra el logotipo y el nombre de la banda para
reforzar esta imagen a los visitantes a medida que se mueven por el sitio y que as les d un sentido de
familiaridad de estar todava viendo informacin sobre la banda. El pie contendra informacin de copyright
sobre el sitio y sobre las letras, imgenes y muestras de sonido de la web; tambin habra de contener
enlaces a pginas sobre cmo ponerse en contacto con la banda o cmo contratarla.
7.4. El contexto lo es todo
Cada pgina, a pesar de todos los elementos comunes, debera ser nica. Una buena pgina web har una
cosa, o una pequea cantidad de cosas, y las har bien.
7.4.1. Contenido relevante
Hacer que el contenido sea relevante e independiente es un factor clave para
conseguir que las buenas pginas web sean muy buenas. El contenido debera
tener una direccin nica (tener un lugar donde reside de manera definitiva, un
URL nico) y ordenado de manera lgica (tanto en la web como en la misma
pgina) para que se pueda encontrar fcilmente.
Pongamos por caso las prximas actuaciones que tendr la banda: aunque resultara tentador situar un
mdulo de "prximas actuaciones" en cada pgina, esta informacin ha de tener su propio lugar donde
residir. Un sencillo mdulo "prxima actuacin" que tambin enlace con la pgina de "Fechas de la gira"
puede servir de promocin con la misma efectividad sin duplicar el contenido ni confundir potencialmente
tanto a los usuarios como a los motores de bsqueda.
7.4.2. Encabezamientos
La prxima vez que tengis en las manos un diario, miradlo atentamente. Observad cmo algunas historias
tienen un tipo de letra mayor y ms oscuro, imgenes y titulares ms destacados. El diario os est diciendo
de manera efectiva cules son las noticias ms importantes para leer si tenis prisa y slo queris leer las
grandes noticias. Lo mismo se aplica a las pginas web.
Cada seccin de contenido de una pgina debe ir presentada por un
encabezamiento que indique su importancia relativa (esta seccin est subordinada
a la anterior o se encuentran al mismo nivel) en la pgina.
Como ejemplo, en la parte actual de este mismo apartado estn las dos lneas "Contenido relevante" y
"Encabezamientos". Se trata de encabezamientos que se encuentran en un nivel inferior que "El contexto lo
es todo" para indicar que se trata de secciones secundarias de la seccin "Contexto de la pgina".
7.5. Usabilidad
Usabilidad es un trmino genrico para referirse a que una web se comporta de
una manera racional y esperada.
Habis intentado alguna vez leer un artculo en un portal de noticias y entonces habis descubierto que os
debais registrar antes de poder leerlo? Habis intentado alguna vez reservar un vuelo o un viaje en tren en
lnea en menos de dos minutos (que sera el tiempo que se podra tardar normalmente en explicar el viaje
para el que queris los billetes a alguien por telfono o en un mostrador)? Habis introducido una direccin
o un nmero de tarjeta de crdito y os han dicho que lo habis introducido incorrectamente? Habis
realizado una bsqueda que no ha dado resultados tiles aunque sabais que s que estaban o que una web
no tenga una funcin de bsqueda?
Todo esto son ejemplos de mala usabilidad, el resultado de no tener en cuenta las necesidades de los
49/407
usuarios de la web. Dando prioridad a estas necesidades en la web que diseis y creis es muy posible que
creis una web satisfactoria.
Crear webs usables no es fcil, pero gran parte de los conocimientos se adquieren sencillamente por
experiencia. Mantened un diario de las cosas que os molestan de otras webs y aprended a no hacerlas en la
vuestra. Por otra parte, no hay nada mejor que probar la web con personas reales. Una vez la hayis creado,
mirad a la gente mientras la utilizan:
pueden encontrar las pginas que buscan?
les da la bsqueda los resultados adecuados a partir de los trminos de bsqueda utilizados?
funcionan las imgenes/sonido/vdeo en su navegador?
les molesta algo?
les satisface algo?
Unas pruebas de usabilidad especficas son algo por lo que las empresas profesionales cobran mucho, pero
incluso unas pruebas rpidas informales con amigos y familiares pueden daros pistas valiosas sobre
problemas que no hayis detectado. Eso es porque sois vosotros quienes habis creado la web y ms o
menos podis intuir las cosas, mientras que los otros no.
7.6. Accesibilidad
Lamentablemente, la accesibilidad se suele entender como "hacer que una web funcione para personas con
ceguera". En realidad, sin embargo, los problemas de accesibilidad afectan a muchas personas ms.
Se utiliza el trmino tecnologa de asistencia o asistente para describir cualquier parte adicional de equipo
informtico o de hardware que ayuda a una persona a interactuar con su ordenador ms correctamente. Esto
normalmente hace pensar en los lectores de pantalla para personas que no pueden ver o en las
instrucciones sonoras para aquellas personas que no pueden utilizar un ratn o un teclado. Pero y las
gafas? La gente que necesita corregir su visin tambin utiliza una tecnologa asistente. Pero la mayora no
se consideraran discapacitados.
A la hora de desarrollar buenas pginas web, es importante ser consciente de los
problemas con los que se puede encontrar la gente cuando intenta utilizar Internet.
No deis por supuesto que vuestros usuarios tendrn un ratn; no presupongis que
las personas podrn ver las imgenes que habis utilizado; no asumis que todo el
mundo tiene Flash instalado y ofreced un contenido alternativo para los que no lo
tienen.
Adems de las personas que necesitan tecnologa asistente, hay otras personas a las que les sucede lo
mismo con los telfonos mviles. La tecnologa Flash todava no es lo bastante madura incluso para los
telfonos mviles que la tienen: el Apple iPhone no la tiene y probablemente no la tendr nunca, pero aun
as puede navegar por la web casi como la versin de sobremesa del navegador Safari en un Mac (Opera
Mobile s admite Flash). Las tecnologas como Opera Mini, que permiten que telfonos mviles de pocas
prestaciones puedan acceder a la web, harn que se hayan de reescribir las pginas web para que sean
ms ligeras y ms eficientes y que las imgenes de las pginas se puedan representar ms pequeas para
la mayora de los usuarios, lo cual quiere decir que cualquier contenido que dependa de la sutileza del detalle
se puede perder.
En el caso de nuestra banda, deberais ser conscientes de que si utilizis muchas imgenes (fotos de la
banda), habrais de describir el contenido de la imagen. Si utilizis un reproductor de msica Flash en la
pgina para que la gente pueda escuchar la msica de la banda, tambin deberais enlazar directamente con
la msica, de manera que quien no tenga Flash instalado pueda acceder igualmente a la msica de la
manera que ms le guste.
Resumen
En este apartado hemos tratado, en trminos generales, lo que se deber tener en cuenta cuando se
empiecen a crear las pginas reales de la web, hacerlas ms usables, ms accesibles y que se ejecuten
50/407
mejor. Todos los conceptos se explicarn con ms detalle a medida que avance este curso.
Preguntas de repaso
Para las preguntas de repaso de este apartado slo debis visitar muchas webs: visitad algunos de vuestros
sitios preferidos y miradlos desde un punto de vista nuevo. Anotad algunas respuestas a las siguientes
preguntas:
1. Tienen encabezamientos, pies y reas de navegacin consistentes?
2. Fijaos cmo cambia la navegacin a medida que os movis por la web.
3. Prestad atencin por si alguna cosa de la web os molesta o confunde y, si es as, pensad qu cosa
habra de hacer la web en este punto.
4. Si podis, desactivad la compatibilidad con imgenes o el JavaScript de vuestro navegador, o bien
utilizad el telfono mvil y comparad la experiencia cuando se utiliza la misma pgina en vuestro
ordenador.
: :
51/407
Conceptos de diseo web - Teora del color
Teora del color
Accesibilidad : : :
8. Teora del color
Linda Goin. 8 de julio del 2008. Publicado en: tridico, color, tetrdico, monocromtico, teora
Sin mucho color ni grficos, cualquier web se convertira en el sueo de Jakob Nielsen. Aunque la filosofa
de Nielsen de arquitectura web esencial tiene las ventajas de la accesibilidad y usabilidad, la mayora de los
diseadores web quieren aadir un toque personal a sus webs con muchos elementos de diseo.
Afortunadamente, un diseador puede aadir color a una web sin perder accesibilidad y usabilidad si la web
est diseada teniendo en cuenta estas capacidades. Aunque muchos diseadores se sienten cmodos
diseando una web para muchos usuarios, estos mismos diseadores se pueden sentir incompetentes
cuando se trata de elegir colores y grficos.
En este apartado, trataremos los conceptos bsicos del color y tres combinaciones cromticas sencillas para
que os podis sentir seguros a la hora de elegir los colores para vuestra web. Continuaremos este apartado
con otra parte sobre cmo simplificar estas selecciones de colores. Al fin y al cabo, es ms divertido disfrutar
de los cumplidos sobre el diseo de la web que sudar a la hora de elegir las opciones de colores.
8.1. Colores, tonos y matices
8.1.1. Combinaciones de colores monocromticas
8.1.2. Combinaciones de colores complementarios
8.1.3. Colores clidos y colores fros
8.1.4. Combinaciones de colores tridicas
8.1.5. Combinaciones de colores tetrdicas
Resumen
Preguntas de repaso
8.1. Colores, tonos y matices
Los colores, o tonos, se han dividido tradicionalmente en colores primarios, secundarios y terciarios. Los
colores primarios son el rojo, el amarillo y el azul, y se denominan primarios porque no hay que mezclar
colores para conseguirlos. Si queris traducir estos colores en colores web, podis reproducirlos utilizando
sus equivalentes hex (hexadecimales) #ff0000, #ffff00 y #0033cc como se muestra en la figura 1:
Figura 1. Los colores primarios y secundarios, y sus equivalentes
hexadecimales.
Los colores secundarios se mezclan a partir de los colores primarios, y son los siguientes:
52/407
Rojo + amarillo = naranja (#ff9900)
Amarillo + azul = verde (#00cc00)
Azul + rojo = violeta (#660099)
Los colores terciarios se mezclan a partir de los colores secundarios y se encuentran entre los colores
primarios y secundarios mostrados en la rueda anterior.
Aunque los colores web son diferentes de los colores normales "de los pintores", puede ser til tener una
rueda de colores (como la que se ve en la figura 2) y tenerla a mano mientras aprendis las diferentes
combinaciones de colores. Adems, una rueda de colores os mostrar todos los colores, tonos y matices
para empezar a ver las posibilidades de colores de las que disponis. A continuacin, se enumeran algunos
trminos importantes que hay que aprender:
Tono (tint): el color resultante cuando se aade blanco.
Tonalidad (tone): el color resultante cuando se aade gris.
Matiz (shade): el color resultante cuando se aade negro.
Figura 2. Una rueda de colores real.
Las flechas de la figura 2 indican cosas diferentes, a saber:
Lado ms exterior: color terciario de amarillo naranja (amarillo + naranja).
Segundo lado: tono de este color terciario (blanco aadido).
Tercer lado: tonalidad del color (gris aadido).
Lado ms interior: matiz sobre la rueda imprimida (negro aadido).
Como se puede ver en la rueda de colores anterior, la cantidad de blanco, gris y negro aadido a un color es
mnima, pero suficiente para alterar el color original y crear lo que se conoce como combinacin de colores
monocromtica.
8.1.1. Combinaciones de colores monocromticas
Las combinaciones de colores existen desde hace siglos, de manera que no hay que reinventar la rueda de
colores. Aunque el color de la web sea diferente del color imprimido, los conceptos son los mismos. Slo es
necesario cambiar los nmeros hexadecimales por nombres de colores y hacer que coincidan lo mximo
posible. Una herramienta de la Red que recomendamos para esta tarea es Color Scheme Generator II, como
se observa en la figura 3, que permite determinar las combinaciones de colores de manera rpida y sencilla,
e incluso determinar si los colores que habis elegido ofrecen suficiente contraste para los usuarios con poca
visin o daltnicos.
53/407
Figura 3. Color Scheme Generator II.
Si queris ms ayuda para decidir si los colores que habis elegido ofrecen un buen contraste, probad el
Contrast Analyser de Paciello Group. Esta herramienta comprueba el contraste entre los colores de primer
plano y del fondo.
Para conseguir el tono, la tonalidad y el matiz para el color amarillo naranja del generador de colores en
lnea, seleccionad primero el color que seala la flecha en la imagen mostrada anteriormente. A continuacin,
seleccionad Mono en el panel situado bajo la rueda de colores y Default ("Predeterminado") en el panel del
cuadro de la derecha. Seleccionad tambin Normal Vision ("Visin Normal") en la seleccin del men
desplegable de la parte inferior derecha. No marquis la casilla "reduce to 'safe' colours" ("reducir a colores
seguros") situada sobre el cuadro de colores a no ser que seis unos puristas.
El trmino web-safe colours
El trmino web-safe colours ("colores seguros para la web") proviene de un tiempo en
el que los monitores podan mostrar 256 colores, de los que slo 216 eran los mismos
en las diferentes plataformas Windows/Mac/Unix, de aqu la expresin seguro para la
web. Mientras que algunos puristas todava se cien a la "paleta de colores seguros
para la web", los navegadores modernos son capaces de tratar lo que se conoce como
color de "24 bits". El color de 24 bits real a entre diez y once bits por canal genera un
total de 16.777.216 colores diferentes. En otras palabras, es seguro decir que la paleta
de colores "seguros para la web" ya raramente es necesaria.
Volvamos a la combinacin de colores monocromtica. Los resultados que debis obtener si segus los
pasos descritos anteriormente son: amarillo naranja (#FFCC00), tono (#FFF2BF), tonalidad (#FFE680) y
matiz (#B38F00). Estos nmeros hexadecimales son mucho ms fiables que cualquier intento de hacer
coincidir una rueda de colores tangible con la pantalla retroiluminada de un navegador web. Tal como
sugiere la palabra mono, esta combinacin se traduce en una combinacin de colores monocromtica, como
se puede ver en la figura 4.
Figura 4. Una combinacin de colores monocromtica.
Una combinacin de colores monocromtica equivale a un color y todos sus
tonos, tonalidades y matices. Aunque esta combinacin es la ms sencilla de
utilizar, para muchos diseadores no aporta mucho inters al diseo de una web.
En vez de eso, quiz os atraiga explorar otras combinaciones para aadir variedad
a vuestros enlaces, imgenes y banners.
8.1.2. Combinaciones de colores complementarios
La siguiente familia de combinaciones de colores que cabe descubrir es la combinacin de complementarios,
donde se emparejan los colores que se encuentran directamente opuestos entre ellos en la rueda de colores,
como se puede ver en la figura 5.
54/407
Figura 5. Ejemplos de combinaciones de colores complementarios.
Cuando se elige un color y su color opuesto, tambin se incluyen todos los tonos, las tonalidades y los
matices de ambos colores. Ello da una gama ms amplia de opciones y se traduce bien con la herramienta
de colores en lnea; podis consultar la figura 6.
Figura 6. Una combinacin de colores complementarios en la herramienta de
colores en lnea.
En la figura 6, hemos elegido un color naranja con el color complementario opuesto: el azul. La configuracin
que hemos elegido para conseguir esta combinacin incluye el ajuste del Contraste en la parte inferior
izquierda, el valor predeterminado en el men situado bajo el generador y visin normal. Observad que el
color principal seleccionado est marcado con un punto negro en el disco interior de la rueda de colores
(tanto por encima como en lnea en la web del generador) y que el color complementario opuesto que se ha
elegido automticamente est marcado con un crculo vaco en la anilla interior. Estas marcas facilitan que
podis analizar vuestra combinacin de colores.
Este generador de colores facilita la eleccin de los colores de los enlaces, los enlaces visitados e incluso las
imgenes, ya que proporciona los colores hexadecimales en la parte superior derecha. Podis mezclar y
combinar cualquier color puro (el color de la parte superior) y su tono, tonalidad o matiz y de esta manera
encontrar una buena combinacin de colores.
El caso de Greenpeace USA
Greenpeace USA (podis ver la figura 7) es uno de los muchos sitios que utilizan una
combinacin de colores con contraste. S, se puede ver amarillo y naranja, pero los
colores predominantes son el verde y el rojo, dos colores que estn directamente
opuestos entre ellos en la rueda de colores. Con este mtodo de colores
complementarios siempre realizaris una buena eleccin. De hecho, el uso de una
combinacin de colores "clidos" y "fros" provoca que la web luzca con el contraste de
colores.
55/407
Figura 7. La web de Greenpeace es un buen ejemplo de combinacin de
colores complementarios.
8.1.3. Colores clidos y colores fros
Las combinaciones de colores complementarios son geniales para utilizarlas en las webs porque contienen
colores clidos y fros al mismo tiempo. El uso de estos colores proporciona contraste y es muy fcil recordar
qu colores son clidos y qu colores son fros, como se puede ver en la figura 8 (y en la web del generador
de colores):
Figura 8. Colores clidos (warm) y colores fros (cold).
Los colores clidos son los colores que recuerdan el verano, el sol o el fuego. Van desde los violetas hasta
los amarillos. Los colores fros pueden recordar la primavera, el hielo o el agua. Estos colores van desde el
amarillo verde hasta el violeta. Si observis cmo funcionan los colores en la rueda, no tardaris en descubrir
que no podis elegir un color sin elegir su opuesto en "temperatura". De manera que si elegs un rojo
caliente, el opuesto es un verde fro. O, si elegs un azul verde fro, acabaris con un rojo naranja picante en
el otro lado.
Ecolution
Un ejemplo de una web que utiliza de manera consistente una combinacin de colores
clidos/fros es Ecolution, como se puede ver en la figura 9.
56/407
Figura 9. Ecolution, un buen ejemplo de colores clidos/fros.
Ecolution generalmente utiliza el color rojo como acentuacin en su web en contraste
con el logotipo verde. Despus, mezcla los dos colores en contraste con distintos
tonos, tonalidades y matices de estos dos colores. Incluso los negros de una imagen
pueden tender a ser clidos o fros, igual que los blancos. En conjunto, la fotografa es
clida, lo que queda muy bien con el verde absolutamente puro. Aunque utiliza los
mismos colores que Greenpeace, la web de Ecolution toma menos "brillo" con los
tonos y matices ricos de la fotografa.
Nunca os habrais imaginado que la teora de los colores fuera tan fcil, verdad? Bien, pues... vamos a
complicar el tema un poquito.
8.1.4. Combinaciones de colores tridicas
Una combinacin de colores tridica (podis ver la figura 10) se crea eligiendo un color y despus eligiendo
dos colores ms equidistantes entre ellos en torno al crculo, as:
Figura 10. Una combinacin de colores tridica
Hemos elegido los colores primarios para esta combinacin porque queramos que se viera cmo las
combinaciones de colores parecen dar un orden al caos. No es casualidad que los colores primarios estn
donde estn en la rueda de colores, ya que cada color contiene una cantidad igual de colores secundarios y
terciarios entre cada primario. Pero una combinacin de colores tridica puede parecer muy vista porque ya
se ha utilizado en exceso. En vez de esto, podis elegir algunas otras opciones de colores en el generador
de colores en lnea; algo parecido a la figura 11:
57/407
Figura 11. Una combinacin de colores tridica alternativa
La combinacin de trada anterior se construye a partir de naranja amarillo, azul verde y rojo violeta. Hemos
elegido el naranja amarillo en primer lugar (observad el punto oscuro en la seccin interior de la rueda de
colores, a la izquierda) y, a continuacin, elegid la seleccin Triad situada bajo la rueda. El generador ha
elegido automticamente las opciones tridicas incluyendo todos los tonos, tonalidades y matices. Los
colores de acompaamiento estn marcados en la rueda de colores con los puntos vacos, de la misma
manera que se indicaba el color complementario en el ejemplo monocromtico.
Aqu es donde una rueda de colores real puede resultar til porque los resultados en lnea no coinciden
mucho con los resultados de una rueda de colores manual. Sin embargo, cuando hemos colocado la
herramienta Angle/Distance debajo de la rueda de colores hasta "max", pareca coincidir con la rueda real
que tenamos en la mano. Los resultados mostrados anteriormente son los que ms se acercaban a la rueda
de colores.
La combinacin de colores tridica tambin contiene colores clidos y fros, aunque predominar una
temperatura. Generalmente, la temperatura que eclipsar a la otra es la que hayis elegido para el primer
plano. En este caso, inicialmente nosotros preferimos el naranja amarillo, que es un color clido. Por lo tanto,
predominarn los colores clidos mostrados anteriormente y uno de los otros dos colores tender al
contraste fro.
Figura 12. Puzzle Pirates, una buena combinacin de colores tridica.
Puzzle Pirates, que se muestra en la figura 12, utiliza una combinacin tridica en su pgina de inicio.
Utilizan la combinacin primaria rojo-azul-amarillo y esta combinacin primaria es perfecta para una web de
juegos infantiles. Observad que predomina el azul y que los rojos y amarillos se utilizan para acentuar y
conducir la vista por la pgina.
58/407
8.1.5. Combinaciones de colores tetrdicas
Cuantos ms colores elijis, ms complicada ser la combinacin de colores. No obstante, un truco es
encontrar un tono, tonalidad o matiz y limitarse a estas zonas del tablero en vez de mezclar colores puros y
sus tonos, tonalidades y matices. Este mtodo funciona bien con una combinacin de colores como la
combinacin tetrdica de cuatro colores. Esta combinacin (podis ver la figura 13) es casi igual que la
combinacin complementaria, con la diferencia de que se utilizan dos complementarios equidistantes.
Figura 13. Combinaciones de colores tetrdicas.
En la figura 14 se muestra cmo funciona una combinacin tetrdica en lnea:
Figura 14. Una combinacin de colores tetrdica en el generador en lnea
Fijaos en el punto negro bajo el rojo en la rueda de colores, a la izquierda. ste es el primer color que hemos
seleccionado; despus, hemos pinchado en el botn Tetrad debajo de la rueda. Los cuatro colores que han
aparecido esta vez tambin eran un poco diferentes de la rueda de colores que tenamos en la mano, pero
cuando hemos colocado la herramienta Angle/Distance debajo de la rueda de colores hasta "max", ha
coincidido mucho con la rueda de colores que tenamos en la mano. Los resultados mostrados anteriormente
son los que ms se acercaban a la rueda de colores.
Esta combinacin de colores puede complicarse bastante, de manera que lo que podrais hacer, llegados a
este punto, es elegir los cuatro tonos, tonalidades o matices de los colores de la columna de la derecha.
Podis elegir vuestras opciones pinchando en las flechas del extremo derecho. Por ejemplo, la figura 15
muestra un ejemplo de bloque rellenado con los tonos de esta combinacin de colores:
59/407
Figura 15. Tonos tetrdicos
Y en la figura 16 se muestra un ejemplo de las tonalidades de la gama de medios:
Figura 16. Tonalidades de la gama de medios tetrdica.
Si observis atentamente los cuadros anteriores, veris que el generador tambin facilita cuatro
combinaciones de colores monocromticas. Estas combinaciones aparecen tanto en la columna de la
derecha como en cada cuadrado del cuadrado mayor.
Jane Goodall Institute
La web del Jane Goodall Institute (figura 17) es uno de los pocos sitios que realmente
resuelve bien la combinacin de colores tetrdica. Observad el prpura, el tono
amarillo, los reflejos rojos de la fotografa (la web contiene ms rojo ms adelante en la
pgina) y los verdes. El prpura no coincide exactamente con la combinacin de
colores generada por la herramienta de colores en lnea tiende a un rojo violeta,
pero se acerca lo suficiente a l como para utilizarlo como ejemplo de cmo se puede
utilizar tanto una rueda de colores como el generador de colores en lnea para crear
ideas para vuestra web.
60/407
Figura 17. La web del Jane Goodall Institute: un buen ejemplo de combinacin
de colores tetrdica
Ahora, cuando naveguis por la web buscando ideas de colores y diseos, tened a mano la rueda de colores
para aprender ms cosas sobre cmo los diseadores utilizan las combinaciones de colores en vuestras
webs preferidas.
Resumen
Aunque las combinaciones de colores pueden parecer complicadas, todas suponen ciertas "reglas". Estas
directrices facilitan la comprensin de qu colores funcionan entre ellos para aadir inters y contraste a una
web.
El motivo por el que existen las ruedas de color es que la gente las utilice. Las ruedas y herramientas de
colores como el Color Generator en lnea facilitan la eleccin del color, incluso a diseadores sin experiencia.
Las cuatro combinaciones de colores que se tratan en este apartado son monocromticas, complementarias,
tridicas y tetrdicas. Aunque existen otras combinaciones de colores, estas cuatro combinaciones son las
ms fciles de entender e implementar.
Preguntas de repaso
1. Mencionad los tres colores primarios y explicad por qu se denominan colores primarios.
2. Mencionad los tres colores secundarios y los colores primarios que se utilizan para conseguir estas
tonalidades secundarias.
3. Describid cmo se crea un tono, una tonalidad y un matiz.
4. Qu es una combinacin de colores monocromtica?
5. Qu es una combinacin de colores complementarios?
6. Describid los colores clidos y fros.
7. Qu es una combinacin de colores tridica? Podis seleccionar tres colores que encajaran en esta
combinacin?
8. Qu es una combinacin de colores tetrdica? Podis seleccionar cuatro colores que encajaran en
esta combinacin?
9. Qu combinacin de colores parece ms fcil de utilizar?
10. Qu combinacin de colores parece la ms complicada?
Las ltimas dos preguntas no tienen respuestas del tipo "correcta" o "incorrecta".
61/407
: :
62/407
Conceptos de diseo web - Construccin del esqueleto de una pgina web
Construccin del esqueleto de una pgina web
Accesibilidad : : :
Linda Goin. 8 de julio del 2008. Publicado en: diseo, construccin de marca, esqueleto, formato, publicidad
Todo diseador debera conocer y entender los parmetros de una web antes de empezar a disearla. En
este apartado aprenderis los fundamentos necesarios para empezar a disear webs comerciales. Aunque
esta informacin es til si deseis construir webs para otras personas, tambin puede servir como lista de
comprobacin para las webs que queris crear para vosotros. sta es generalmente la fase que viene
despus de la arquitectura de la informacin; debis recoger informacin sobre qu quiere al cliente en su
web y cmo habra de estar estructurada, qu tipo de construccin de marca utiliza esta empresa y,
entonces, utilizar esta informacin para crear un borrador de diseo visual que podis acordar con el cliente
antes de aadirle grficos y combinaciones de colores. Concretamente, hablaremos de lo siguiente:
Aunque el color y el diseo son importantes, debis entender lo que el cliente quiere conseguir con su
web. Esta informacin afectar de manera importante al aspecto y al tono de la web.
Por lo tanto, habris de gestionar una lista de comprobacin de elementos para aprender cosas sobre la
web del cliente antes de intentar empezar a disear.
Tambin necesitis saber ms sobre las acciones de marketing anteriores de la empresa, incluyendo la
creacin de marca. Esta informacin influir en el diseo de la web.
En funcin de toda la informacin recogida del cliente, crearis el diseo visual de la web de manera
que el cliente pueda visualizar los fundamentos de los grficos y contenidos adicionales.
9.1. Lo que necesitis saber
9.2. Los primeros pasos
9.2.1. La web imaginaria de ejemplo
9.2.2. El logotipo
9.2.3. La composicin
9.2.4. Sobre la publicidad en una web
9.2.5. Comprobacin de la composicin con validadores y el cliente
Resumen
Preguntas de repaso
9.1. Lo que necesitis saber
Generalmente, antes de que se decida el diseo de una web, la persona o la empresa deberan tener ideado
un plan sobre la finalidad de la web. Aunque el color y los grficos son importantes, debera haber un plan
que prevea un presupuesto, el mercado destinatario y los objetivos proyectados, y tambin los recursos para
llevar a cabo estas tareas. La web slo dar informacin al usuario o tambin est pensada para vender
productos o servicios? La web se ampliar en el futuro o est pensada para ser una accin a corto plazo
para conseguir una posicin en el mercado (como la web de una campaa poltica o una web que intente
aprovechar una tendencia actual)? Incluir la web un blog, pginas de aspectos legales y de informacin,
galera de fotos, formulario de contacto por correo electrnico? Qu ms necesita? Cmo se puede
comparar esta web con la competencia?
Por ltimo, pero no menos importante, queda saber si la compaa tiene una marca prevista, junto con
directrices de marketing. Si no es as, entonces se debe atender a esta cuestin antes de iniciar el diseo de
la web. El logotipo, la creacin de marca del merchandising o servicios dirigidos a un mercado especfico y
un medio para llegar a este mercado pueden ser cuestiones que vayan ms all de vuestras capacidades. Si
no habis intentado antes esta tarea, podrais incorporar un experto en marketing para ayudar a situar esta
empresa en la direccin correcta. Por otra parte, si ya hay un plan ideado, entonces es importante seguir las
directrices de la empresa para que la web encaje con otros materiales de marketing.
Aunque mucha de esta informacin se puede decidir antes de que la web propuesta llegue al diseador, las
63/407
respuestas a estas preguntas os pueden ayudar a decidir qu tipo de web disear, los colores que se van
utilizar y los tipos de grficos que se deben incluir. Hay algo que s se puede determinar de entrada en la
mayora de los casos: la web debe ser accesible y usable. Por lo tanto, la atencin al cdigo y a la
navegacin es una prioridad en todos los casos. Ms adelante, en este curso, podris aprender ms sobre
accesibilidad y algunos conceptos ms sobre usabilidad gracias a Jakob Nielsen.
La cuestin es mantener la simplicidad de la web utilizando HTML y CSS para el cdigo y el diseo,
respectivamente. Evitad Flash a no ser que sea apropiado para algunos elementos del sitio (ltimamente se
ha avanzado mucho por hacer Flash ms accesible, y va muy bien para algunas tareas, como el vdeo) y
pensad si son necesarios JavaScript y otros elementos tcnicos. Ello har que el diseo de la web sea ms
fcil de crear para el diseador y el programador (especialmente si el diseador tambin es el programador) y
ser ms compatible con todos los navegadores.
9.2. Los primeros pasos
Para ayudaros con estos temas, crearemos una web comercial muy sencilla utilizando un conjunto de
directrices que utilizamos para disear webs para nosotros mismos y para otros. Estas listas de control
incluirn aspectos empresariales adems de los conceptos de diseo. Por comodidad, utilizaremos una
empresa imaginaria ya desarrollada, de manera que ya ha utilizado materiales de marketing en el pasado.
Los materiales impresos, incluyendo el logotipo y la marca, ya estn previstos. Si empezis desde cero, la
planificacin del logotipo y la creacin de la marca se debern desarrollar antes de empezar a crear la web.
Como diseadores de la web, necesitamos saber la informacin siguiente sobre una empresa antes de
empezar su diseo. Necesitamos crear una lista de todo lo que queremos que incluya el diseo de esta web,
de modo que no haya que hacer cambios radicales ms adelante. Este hecho no es una situacin
imaginaria, porque los temas indicados a continuacin se deben tratar con los propietarios/responsables de
las decisiones de la empresa para asegurarse de que nuestra visin del proyecto coincide con la que ellos
tienen.
1. Nombre del sitio web: el nombre refleja la empresa y su presencia en Internet? En este caso, el
nombre de la web es el nombre de la empresa: "Wiki Whatevers". Es posible que la empresa quiera
desarrollar tambin un aadido o tag line si es que todava no utiliza uno. El aadido se colocar
entonces junto al nombre de la empresa y al logotipo en la web.
2. Logotipo y marca: necesitamos recopilar cualquier material impreso que se haya desarrollado antes de
esta tarea, incluyendo el logotipo, folletos, etc., de modo que podamos crear un archivo que contenga
informacin como nmeros de telfono y direcciones. Estos elementos tambin nos ayudarn a entender
mejor el "tono", la marca y el estilo de esta empresa a partir de las acciones realizadas en el pasado. En
caso de que ninguno de estos elementos se haya desarrollado anteriormente, entonces trataremos de
contratar un equipo de diseo para crear un logotipo (no soy diseador de logotipos, de manera que
encargo este trabajo a otra persona, y vosotros tambin podis hacerlo y sumar este precio a la factura).
3. Nombre de dominio de la web: junto con el nombre de la web, queremos saber si el nombre del
dominio est disponible. El nombre del dominio es la direccin que utiliza una web para su identificacin
y que el usuario escribir en la barra de direcciones de un navegador para llegar a esta web. El nombre
de dominio tambin se utiliza como enlace a la web desde recursos exteriores. El nombre de dominio
puede llevar cualquier nmero de registros de dominio de nivel superior, como .com, .org, etc. Aunque
un diseador normalmente no es responsable del registro del nombre de dominio, es conveniente saber
si alguien lo ha elegido y registrado. En algunos casos hemos debido cambiar un nombre de dominio y
algunos de los contenidos de la web porque ste no estaba disponible. Este problema supuso un gasto
ms alto para el cliente, que podra habrselo ahorrado si antes de nada se hubiera elegido el nombre
de dominio.
4. Investigacin de la competencia: es bueno saber cmo son las webs de la competencia con respecto
a grficos y contenidos, de manera que la web que diseemos entre en el mercado con igual o mejor pie
que los principales competidores de la empresa.
5. Arquitectura de informacin: necesita la web un carrito de la compra virtual o un blog? Qu planes
de expansin tiene en mente el propietario de la web? Qu estructura sera mejor para enlazar las
pginas entre ellas? Estos elementos son importantes porque necesitaris incorporarlos al diseo de la
web y su navegacin. Necesitis saber cmo se ampliar la web en el futuro, lo cual determinar
tambin cmo se crear la web.
6. Contenido de la web: se ha desarrollado el contenido de la web? En caso afirmativo, necesitaris
64/407
acceder al contenido inmediatamente para ayudar a determinar la navegacin, el diseo del tipo de letra
y la disposicin. La categorizacin del contenido es la mejor manera de desarrollar la navegacin. El
contenido puede ayudar a determinar tambin al aspecto y el tono de la web; por lo tanto, si el contenido
no se ha desarrollado, puede ser positivo demorar el diseo. Aseguraos de que el contenido es
relevante y planificad las actualizaciones porque el contenido de la web es lo que hace que los visitantes
vuelvan a un sitio.
7. Buscad varios proveedores de espacio web: aunque el cliente puede tener un proveedor de
alojamiento en mente, es posible que necesite alguna otra cosa, ya que no todos los alojamientos
proporcionan el mismo soporte tecnolgico. Un alojamiento (hosting) web es la empresa que aloja webs
y algunos proveedores de espacio web ofrecen acceso a bases de datos, que es posible que necesitis
para un blog o para catalogar informacin o productos para un carro de la compra. Otros proveedores
de espacio limitan el nmero de visitantes por web y esto puede crear problemas si la web se hace muy
popular. Para obtener una gran lista de proveedores de espacio web y sus capacidades, podis visitar la
base de datos de alojamiento web (WHDb). Aseguraos de que el cliente ha adquirido espacio en un
alojamiento web antes de empezar el diseo de la web, de manera que conozca sus parmetros de
diseo.
8. Salida dirigida: planificar la salida dirigida quiere decir que vosotros o vuestro cliente tenis el control
sobre cmo los usuarios saldrn de la web. Los visitantes acabarn saliendo de la web, de modo que
por qu no planificar su salida mediante la colocacin de un anuncio subvencionado o mediante
intercambios de enlaces? Hacer planes en esta direccin puede aadir valor monetario a la web u
ofrecer un servicio a sus usuarios.
9. Fechas lmite: en este punto hay que determinar cundo se pondr en marcha la web. Generalmente,
un plazo de ocho semanas es suficiente para finalizar cualquier proyecto pequeo como ste, siempre
que los clientes tengan preparado el contenido, sean flexibles con respecto a los diseos de colores y
formatos que les presentis y no se necesite ninguna programacin difcil.
Una vez tengis resueltos estos puntos bsicos, podis sentaros, leer el contenido, planificar la navegacin y
decidir cmo optimizar mejor la web para los motores de bsqueda. Aunque puede ser que no estis a cargo
de la SEO (search engine optimization u optimizacin para motores de bsqueda), podis colaborar con un
experto en SEO para determinar cmo aprovechar mejor el contenido de la web y vuestro cdigo para
generar ms trfico mediante palabras clave en el contenido y en los encabezamientos principales y
secundarios.
De la misma manera que no elegirais las alfombras o un sof para un nuevo hogar antes de que el
arquitecto haya creado el proyecto, tampoco crearais un diseo visual para la web hasta que hayis
planificado la arquitectura de la web. La navegacin y los planes para la SEO en esta fase inicial ahorrarn
tiempo y dolores de cabeza en el futuro. Cuando est preparado para crear un plan visual, ya estar
familiarizado con la direccin de la web y sus contenidos, y facilitar mucho el trabajo con el color y los
grficos.
9.2.1. La web imaginaria de ejemplo
Esta web imaginaria es una empresa que proporciona cdigo abierto para wikis y se inventan como mnimo
tres nuevas ideas de cdigo por semana. Dado que el uso y la modificacin del cdigo son gratuitos, los
propietarios de la web quieren generar dinero a partir de ella mediante donaciones, colocacin de anuncios y
servicios adicionales ofrecidos por sus programadores. El nombre de la web es "Wiki Whatevers", y el
nombre del dominio ha sido elegido. El contenido se ha desarrollado y contiene fragmentos de cdigo que se
deben catalogar, artculos y biografas de los programadores implicados en este proyecto. El alojamiento web
ofrece disponibilidad de bases de datos MySQL y est preparado para aceptar las puntas de trfico ms
intensas sin cadas. Ahora es el momento de juntar los elementos que se utilizarn en la web:
1. Utilizando el logotipo previamente existente de la empresa, queremos preparar una copia digital para
utilizarla en toda la web del cliente. Necesitamos un escner para escanear la imagen en un programa
grfico como Photoshop o Gimp. Ms adelante, ya adaptaremos el tamao del logotipo para la web,
antes debemos determinar la composicin. Guardaremos la imagen a 72 dpi, que permitir un tiempo de
descarga ms rpido. Probablemente tambin utilicemos este logotipo para el punto 4.
2. Pondremos fotos de los programadores en la pgina del personal (o en la pgina "Acerca de..."), de
modo que necesitaremos imgenes digitales para ello. Debern proporcionarnos fotos para escanearlas
o enviarnos imgenes digitales. Si envan imgenes digitales, necesitaremos una imagen con ms
detalle que la que acabaremos utilizando, de manera que una imagen de 300 dpi est bien, o una
65/407
imagen de tamao grande que se pueda reducir despus segn nuestras especificaciones.
3. El cliente ha decidido utilizar un blog porque tiene suficiente contenido para mantenerlo activo durante
los prximos meses. Afortunadamente, el cliente ha elegido a un proveedor de alojamiento web que est
familiarizado con los blogs y que tiene las capacidades necesarias para gestionar bases de datos y
trfico intenso, incluyendo puntas de trfico. Este alojamiento tambin ofrece varias soluciones para la
expansin, lo cual es un gran ofrecimiento si el cliente quiere crecer. Si el tiempo de actividad del
alojamiento est garantizado, el cliente estar ms contento si puede mantenerse con el mismo
alojamiento durante su fase de crecimiento hasta el final. Esta capacidad de mantenerse con un
proveedor de alojamiento durante aos facilita mucho la vida.
4. Mediante FTP (hay varios productos de cdigo abierto para elegir en el mercado como Filezilla, o fireftp
para Firefox, o un cliente propietario como CuteFTP), cargaremos una pgina esttica que anuncie la
web que existir. "En construccin" es una frase terrible de utilizar porque los visitantes de la web quiz
no vuelvan si no saben cul es la fecha del "gran lanzamiento". En vez de esto, utilizad una pgina que
indique el nombre de la empresa, qu ofrecer, una fecha a partir de la cual estar activa la web y un
contacto (el correo electrnico est bien; si se trata de una empresa que ya tiene una sede fsica,
aadid una direccin postal y tambin un nmero de telfono). Todava mejor: utilizad un formulario de
correo electrnico que las personas puedan utilizar para ser notificadas cuando la web est en activo.
Esta ltima sugerencia proporciona a nuestros clientes consumidores potenciales, incluso antes de que
la web empiece su actividad comercial.
5. Utilizando la informacin de contenido/estructura recibida del cliente y sabiendo que quieren un espacio
publicitario diseado en todas las pginas, disearemos la arquitectura del sitio y planificaremos la
navegacin y los enlaces de texto. Tambin utilizaremos este texto para planificar palabras clave para la
SEO de la web.
6. Utilizando los colores del logotipo, elegiremos dos o tres combinaciones de colores para presentarlas al
cliente para que las apruebe.
7. Despus, elegiremos otras fotografas o ilustraciones de una web de fotografas de archivo, como iStock
o Comstock. Pero aseguraos de buscar mucho, porque algunas empresas de fotografas de archivo
ofrecen rebajas y otros tratos que quiz no podis desperdiciar. El uso de fotografas de archivo no es
tan caro y ahorra dolores de cabeza con respecto a problemas de copyright. Tambin necesitaremos
cualquier imagen que la empresa haya producido, o que vaya a producir, para acompaar cualquier
cdigo, artculos de "cmo hacer..." y entradas de bloques.
Ved tambin
Los ltimos dos pasos se tratarn en el prximo apartado. Tened en cuenta que querris obtener la
aprobacin del cliente para el esbozo de composicin visual antes de empezar a rellenarlo de colores y
grficos.
9.2.2. El logotipo
El logotipo es una parte esencial de la imagen de marca de cualquier empresa. Aunque muchas empresas
no se precipitan, porque esta pieza de arte representar a su empresa durante muchos aos, otros clientes
se preocupan menos de la imagen que representa a la empresa. Podemos deciros por experiencia que una
empresa que no invierte tiempo y dinero en un logotipo profesional generalmente nunca invertir este dinero,
por muy lgicos que puedan ser vuestros argumentos en sentido contrario.
Los propietarios de la empresa Wiki Whatevers fueron todos al Instituto Tecnolgico de Georgia (Georgia
Tech), de manera que utilizaron los colores de su alma mater: dorado y negro, en el diseo del logotipo. Sin
embargo, aunque el logotipo es sencillo, como mnimo puede resultar fcil trabajar con el color y el formato.
En la figura 1 se muestra el logotipo:
66/407
Figura 1. El logotipo de Wiki Whatevers.
El problema en este caso es que simplemente escaneamos un logotipo impreso y queramos utilizar el
mismo logotipo en la red. Los colores impresos, que son CMYK cyan (cian), magenta, yellow (amarillo) y
key (negro), no coincidirn con los colores web, que consisten en RGB (red, green, blue, es decir: rojo,
verde y azul). As pues, necesitamos realizar un poco de adaptacin del color para conseguir que los colores
web coincidan el mximo posible con los del logotipo. Hay cuatro maneras de conseguir este objetivo:
1. Poneros en contacto con la imprenta para preguntar qu colores se utilizaron para imprimir el logotipo
de Wiki de cualquier cosa en el material imprimido anteriormente. Generalmente, la imprenta utilizar los
colores Pantone, y Pantone ofrece herramientas que ayudan a los diseadores a adaptar los colores de
impresin a los colores web. Este sistema de adaptacin de colores de Pantone es algo que la imprenta
puede tener a mano, de manera que puede ser muy til para hacer coincidir los colores de impresin
con los colores web correspondientes sin gastar dinero en herramientas Pantone.
2. Como los propietarios de Wiki Whatevers utilizaron los colores de Georgia Tech, podemos ir a la web de
Georgia Tech para ver si podemos adaptar los colores de la web. Podis utilizar un programa grfico
para extraer un color a una web haciendo una copia de pantalla y llevando esta imagen a un programa
grfico para utilizar el cuentagotas u otra herramienta para hacer coincidir los colores.
3. Comparad mirando el material impreso y los colores web para intentar que coincidan lo mximo posible.
En algunos casos, los colores pueden ser muy diferentes. En otros casos, los colores pueden ser
demasiado parecidos para apreciar la diferencia.
4. Escanead la imagen imprimida en un programa de escaneo que acepte CMYK y utilizad las cartas de
colores Pantone de Photoshop para hacer que coincidan lo mximo posible. Esta ltima solucin slo
funciona si nuestro escner acepta CMYK y disponis del programa Photoshop.
En nuestro caso, pudimos hacer que este dorado coincidiese perfectamente a partir de la imagen de la
mascota de la web Georgia Tech Athletic. El dorado es #eab200 y el negro es, pues bien, negro (#000000).
El fondo, que es un verde azul oscuro (#002123), se utiliz en la sombra del logotipo. As, lo que podra
haber sido problemtico acab siendo sencillo gracias a una simple mascota de abejorro, como se puede ver
en la figura 2:
Figura 2. Una parte de la mascota del Georgia Tech utilizada para adaptar los
colores del logotipo.
Reflexin
Casi nunca os encontraris con una empresa que no haya utilizado una imagen digital
de su logotipo o marca en lnea para elementos como tarjetas comerciales y papel de
cartas, incluso para su presencia real en la web. No obstante, muchas de estas
empresas suelen aceptar los colores que presenta la web en vez de cambiar los
colores para adaptarlos a su material impreso. As pues, no os fiis siempre de los
colores web para crear la web de una empresa, especialmente si estos colores no
coinciden con su material impreso, como folletos o papel de cartas. En vez de esto,
preguntad a la empresa qu colores prefiere: de entrada, es posible que no se hayan
dado cuenta de que los colores eran diferentes.
9.2.3. La composicin
Para la composicin, y por la simplicidad de esta gua, mostraremos una nica composicin. Hemos elegido
una disposicin de blog que promueve los cambios ms frecuentes en el texto central en la parte superior,
fcil acceso a la navegacin entre el encabezamiento y el texto central reciente, y acceso a los apuntes
67/407
anteriores "por debajo del pliegue" de la pgina de inicio. El trmino por debajo del pliegue tiene su origen en
la produccin de diarios. Cuando un diario est en el montn, el lector slo ver el texto principal situado
"por encima del pliegue" en el diario (es decir, el pliegue fsico del papel). Este texto principal incluyendo
imgenes es importante porque debe seducir al lector para que compre el diario.
La misma teora "por encima del pliegue" se aplica al diseo de una web. Cualquier cosa que aparezca en
un monitor cuando el visitante entra en una web se encuentra "por encima del pliegue". Y el texto principal
que el lector debe desplazar para poder verlo se encuentra "por debajo del pliegue". De manera que el truco
es mantener la atencin del visitante de una web en las primeras imgenes y el texto que ve en el monitor,
independientemente de la resolucin (que es un buen motivo para probar vuestras webs en diferentes
monitores/resoluciones de pantalla, un tema que abordaremos ms adelante en este apartado). En la figura
3, se muestra un ejemplo aproximado para la disposicin inicial del Wiki Whatevers:
68/407
Figura 3. Composicin aproximada (esqueleto o wireframe) de la pgina de
inicio de Wiki Whatevers.
69/407
Esta disposicin seguir siendo la misma a lo largo de la web, pero puede cambiar para las pginas
archivadas que enumeran los artculos y las entradas de los blogs sin imgenes. El motivo de esta
consistencia es que el espectador no se confunda. Una vez que los usuarios aprendan a utilizar un sitio,
generalmente no les gusta ver cambios de una pgina a otra. Esto es lo que contendr este diseo en
concreto:
1. Encabezamiento: el encabezamiento es pequeo porque no queramos que el logotipo ocupara
demasiado espacio en la pgina. Aunque el logotipo es una caracterstica menor, los colores del
logotipo contribuirn a la combinacin de colores global de la web. El encabezamiento se encuentra en
la parte superior, una situacin tradicional, y el logotipo enlazar con la pgina de inicio del blog. El
enlace desde el logotipo es cmodo y muchos usuarios se han acostumbrado a utilizar el logotipo como
manera de volver a la pgina inicial de cualquier web.
2. Navegacin: situada inmediatamente bajo el encabezamiento, la navegacin es obvia y fcil de utilizar.
Esta navegacin tambin se repetir en el pie. Repetimos la navegacin al pie sencillamente porque
somos de la vieja escuela, donde la navegacin se repite como slo texto para aquellos usuarios que no
visualizan imgenes en su navegador. Como todava no sabemos si utilizaremos imgenes para la
navegacin en la parte superior, automticamente incluimos navegacin textual en algn otro lugar de la
pgina, generalmente al pie. Este texto ayuda a los lectores ciegos que utilizan un lector de pantalla
para "leer" una web. Que coloquis este texto de navegacin en la parte superior o inferior de la pgina
es irrelevante excepto para el diseo porque los lectores ciegos pueden escanear una pgina de abajo
arriba y a la inversa tan rpidamente como una persona con visin. Por otra parte, es decisin del
diseador y su cliente si se repite o no la navegacin en cualquier otro lugar de una pgina
determinada. Si utilizis imgenes para la navegacin y no repets los enlaces de navegacin en forma
de texto, aseguraos de incluir atributos alt descriptivos para las imgenes de navegacin. De esta
manera, los usuarios que utilizan un lector de pantalla o que desactivan las imgenes todava sabrn
para qu son estas imgenes.
Ved tambin
Podis ver el apartado 17 del mdulo "El texto central de HTML" para aprender ms sobre el uso
correcto de los atributos alt.
3. Entrada ms reciente del blog: la entrada ms reciente del blog merece ser destacada y la posibilidad
de que esta entrada tenga un tratamiento destacado en la pgina "por encima del pliegue" es una
ventaja tanto para el cliente como para sus lectores. Cuando el lector llega a esta web, ste es el texto
central que ver. No obstante, esta colocacin obvia significa que el cliente deber actualizar
continuamente la web de modo consistente o se arriesgar a que los visitantes no vuelvan: la gente no
volver a un blog si ste no ofrece contenidos nuevos.
4. Entradas anteriores en el blog: aqu es donde se situaran las entradas anteriores del blog; de tres a
cinco entradas sera suficiente para que los espectadores pudieran saber, de un vistazo, qu se puede
esperar de esta web de manera continuada. Aqu quedaran bien algunas imgenes, pero no son
necesarias porque este rea se encuentra por debajo del pliegue, de manera que no es tan importante
para atraer la mirada del espectador. La decisin de utilizar imgenes puede depender de si el tiempo
de descarga es un problema o de si el apartado anterior realmente necesita una imagen para motivar al
espectador a pinchar en toda la entrada del artculo/bloque.
5. Columna derecha: aqu es donde los lectores pueden acceder a las entradas del blog enumeradas por
categoras, archivos y otros tipos de contenido de la web. Entre los ejemplos de otras pginas se
encuentra la pgina "Sobre la empresa", el ndice de una web y la informacin de contacto. Es
importante decidir cmo queris enumerar estos elementos en una columna lateral, ya que el blog se
crear en funcin de las categoras que creis, las pginas que construyis y el material de archivo. A
medida que hagis crecer la web, estas listas se harn ms largas, posiblemente hasta el punto de que,
en este caso, es posible que las categoras sean la nica lista que el espectador vea "por encima del
pliegue". Los clientes pueden decidir que las pginas son ms importantes que las categoras y la lista
mostrada anteriormente se puede cambiar para situar las pginas por encima de las categoras. Como
nota al margen, esta lista no incluye todo lo que se puede incluir en una barra lateral o columna lateral.
Algunos clientes podran pensar que dos columnas seran preferibles, haciendo el blog de tres columnas
en vez de las dos que hemos elegido nosotros.
6. Informacin al pie: la informacin al pie es esencial e importante porque proporciona a los visitantes
informacin de antecedentes sobre la empresa y su web de un vistazo, en vez de tener que buscarla. El
nombre de la empresa, posiblemente una repeticin del logotipo, direccin de correo electrnico,
70/407
enlaces (con el formulario de contacto, avisos de privacidad, renuncias de responsabilidad, informacin
legal), y tambin resmenes de noticias, son todos buenos candidatos para incluirse al pie de pgina.
Como se ha mencionado anteriormente, tambin se puede repetir la navegacin en versin slo de
texto.
7. Publicidad: en esta disposicin, la publicidad est situada a continuacin de la entrada ms reciente del
blog y antes de las entradas anteriores de ste, en un banner horizontal. De esta manera, el cliente
tiene la flexibilidad de elegir un texto o imgenes de banner para sus necesidades publicitarias. Este tipo
de disposicin para publicidad sita slo un anuncio por encima del pliegue y otro anuncio por debajo
de l. Esta cantidad de publicidad es ms que suficiente para la mayora de webs. Adems, relega la
publicidad a una posicin secundaria, bajo el texto central del contenido de la web.
Esta disposicin permite al lector pasar rpidamente del texto central a la navegacin sin desplazamiento, y
tambin permite a los usuarios, como mnimo, ver otros temas que se pueden tratar en la web sin ms
enlaces a las categoras de la web. Aunque el espectador nunca pase de la lnea roja del pliegue, la
composicin proporciona todos los elementos importantes que puede necesitar el lector, todos situados por
encima del pliegue.
9.2.4. Sobre la publicidad en una web
Es una ventaja para el cliente y un servicio para el lector que la publicidad de una web est relacionada con
su contenido. En otras palabras, si el contenido del sitio es sobre flores, entonces la publicidad de esta web
podra incluir servicios de jardinera, servicio de comida (para complementar los arreglos florales), etc. De
manera que, para un sitio que proporciona materiales de cdigo abierto, podramos buscar anunciantes
relacionados con contenido de cdigo abierto. Google Adsense, como fuente, ayudara en este sentido, ya
que los anuncios estn relacionados con el contenido. El uso de este tipo de publicidad es una gran idea
hasta que el trfico crezca lo suficiente como para motivar a otros anunciantes en vuestra web. Sin embargo,
pensad siempre en las implicaciones de SEO antes de aceptar anuncios, ya que mucha publicidad puede
afectar negativamente a la presencia del cliente en las pginas de bsqueda. A continuacin se muestran
algunos buenos recursos de SEO:
Intelligent site structure for better SEO (Estructura inteligente de la web para una mejor SEO), por Joost
de Valk.
Semantic HTML and search engine optimization (HTML semntico y optimizacin de motores de
bsqueda), por Joost de Valk.
How Affiliate Programs Can Affect Search Rankings (Cmo los programas de afiliados pueden afectar a
las clasificaciones de las buscas), por Fredrick Marckini.
New Report Explores how PPC Rank Affects Traffic (Un nuevo informe analiza cmo el PPC afecta al
trfico), por Jennifer Laycock.
Reflexin
Es posible que no seis responsables de la publicidad como diseadores, a menos
que estis diseando una web para vosotros mismos, pero si en el futuro pensis
trabajar con una agencia de publicidad o de diseo, es posible que queris contribuir a
la publicidad en estas empresas de diseo. Cuantos ms conocimientos tengis sobre
qu provoca que una web tenga xito, ms xito podris tener en vuestra carrera de
diseo. Cuando sea posible, aprended todo lo que podis sobre marketing (para
vosotros y para vuestros clientes) y sobre tcticas de optimizacin en motores de
bsqueda.
9.2.5. Comprobacin de la composicin con validadores y el cliente
Antes de implementar este formato con el cdigo, necesitamos confirmar la composicin o composiciones (o
wireframes) con el cliente. Una tctica que utilizamos para convencer al cliente de que una composicin es
mejor que otra es recordarle que la codificacin de composiciones adicionales cuesta dinero. Ello contribuye
a hacer que el cliente elija una composicin sabiendo que el cdigo se puede modificar ms tarde para hacer
algunos cambios estructurales.
El siguiente paso es codificar el formato y despus validar este cdigo. Utilizamos el servicio de validacin de
marcado y el servicio de validacin de CSS del W3C para confirmar que el HTML y el CSS utilizados para
crear la composicin no contienen errores. Podis cargar los archivos directamente desde vuestro ordenador
71/407
a estos servicios de validacin, de manera que no necesitis cargarlos en la web del cliente para probarlos.
Esta prueba permite al diseador o al programador detectar cualquier error en la interfaz de usuario que se
pueda resolver antes de que la web quede saturada con cdigo de imgenes, publicidad y otros elementos
aadidos a las pginas.
La accesibilidad es otra gran preocupacin, asegurarse de que la web sea utilizable para personas con
discapacidades como ceguera o deficiencias motoras. Este proceso de validacin no es tan sencillo como el
de validar CSS y HTML. Hay verificadores disponibles, como TAWDIS, pero lo ideal es que probis con
usuarios reales y hagis un anlisis cualitativo de vuestras webs con respecto a la accesibilidad; un
comprobador mecanizado no puede concluir si una web es accesible o no, aunque puede dar alguna
indicacin de qu es correcto y qu no. A veces tambin cometen errores. Se publicar mucha ms
informacin sobre accesibilidad en la siguiente parte del curso, de manera que estad atentos a este espacio.
Tambin podis comprobar la composicin en los diferentes navegadores disponibles para garantizar que
vuestra web pueda ser vista por el mximo nmero de usuarios de la web posible. Podris hacerlo si tenis
sistemas Mac, Windows, Linux y mviles disponibles, todos con diferentes navegadores instalados, o utilizis
emuladores como VMWare Fusion para emular diferentes sistemas en un ordenador, pero esto es bastante
complicado e interminable. Otra opcin es utilizar servicios de captura de navegadores, como BrowserCam,
ya que este servicio es rpido, cmodo y cubre una serie de posibilidades de navegadores diferentes
(incluyendo la mayora de los navegadores antiguos). stos ofrecen una prueba gratuita de 24 horas para
que uno pueda comprobar si el servicio es adecuado y, despus de la oferta gratuita, el coste para utilizar el
servicio vale la pena, especialmente si se disea una gran cantidad de webs y se hacen pruebas con un
gran nmero de navegadores diferentes.
Por ltimo, es buena idea hablar con el cliente para hacerle saber que se ha generado el cdigo para la
composicin y que se ha validado; tambin deberais decirle cuntos cambios ha habido que realizar en el
esqueleto para que funcione en todos los navegadores. Slo una vez generado el cdigo, finalizada la
validacin y recibido el visto bueno del cliente, se debe empezar a aadir colores, imgenes y otros tipos de
cdigo como, por ejemplo, la publicidad. Aunque este trabajo puede parecer muy pesado, es mejor confirmar
toda la validacin y obtener la aprobacin del cliente antes de poner la guinda en el pastel. En caso
contrario, puede ser que acabis trabajando ms de la cuenta si encontris problemas de cdigo e
incompatibilidades de navegadores una vez est hecho. Adems, cualquier pieza de arte o texto central
puede suponer un descuido para el cliente cuando intente revisar la arquitectura real de la web.
Una vez completado este proceso, podris empezar a trabajar en el texto, las imgenes y los colores de la
web. Cmo empezar a hacerlo? La respuesta la encontraris en el siguiente apartado.
Resumen
El diseador de webs a menudo debe saber hacer muchas cosas de diferentes mbitos porque el diseo
web se basa en muchos factores. Crecer una web con el tiempo o seguir siendo esttica? Puede el
alojamiento web proporcionar una calidad de servicio consistente y espacio para crecer, o necesitar el
cliente moverse de un alojamiento web a otro con las nuevas adiciones en la web? Y, si el diseador no
puede encargarse como sera necesario de todos los temas de diseo, dispone de una red de personas
para ayudarlo?
As pues, ms all del color y los grficos, hay que poner los fundamentos sobre los que construir la web. La
empresa de crear una web afecta al diseo, y cualquier aspecto que se pueda convertir en un problema por
el camino se puede limar en las fases de planificacin. Esta capacidad de resolver problemas antes de que
surjan distingue a un diseador profesional.
Una vez establecidos los fundamentos y desarrollada la arquitectura y la malla (o wireframe) de la web, el
diseador puede empezar a trabajar con combinaciones de colores para desarrollar toda la web para la
aprobacin del cliente.
Preguntas de repaso
1. Qu elementos hay que tener a mano antes de empezar a desarrollar el diseo de una web?
2. Por qu hay que enumerar todos los elementos que se piensan utilizar en una pgina web?
3. Por qu es importante investigar diferentes proveedores de espacio web?
72/407
4. Un diseador puede hacer muchas cosas diferentes, pero qu harais si vuestro cliente os pidiera que
disearais un logotipo y no tuvierais ni idea sobre diseo de logotipos?
5. Mencionad dos buenas razones para investigar las webs de la competencia de una empresa.
6. Qu es CMYK y qu significan estas letras?
7. Mencionad como mnimo dos maneras de convertir un color CMYK en el correspondiente RGB.
8. Mencionad un motivo por el que un diseador debera utilizar texto para la navegacin como mnimo en
una zona de la composicin de una pgina web.
9. Por qu un diseador mantendra una composicin consistente en toda una web?
10. Mencionad una razn de por qu el cdigo de una web se debera validar en las primeras fases de
diseo.
A continuacin se enumeran otras webs que ofrecen listas de control:
Lista de control de Dive In Designs
Lista de control de usabilidad web de Net Mechanic
Lista de control de Max Design
Lista de control de Usability First
Lista de control de David Skyrme and Associates
Lista de control de diseo web de SCORE
: :
73/407
Conceptos de diseo web - Combinaciones de color y modelos de diseo
Combinaciones de color y modelos de diseo
Accesibilidad : : :
Linda Goin. 8 de julio del 2008. Publicado en: color, modelo, combinacin, marca
Despus de que el diseador web presente la arquitectura de una web, o wireframe, al cliente para que le d
el visto bueno, el siguiente paso es determinar el aspecto y el tono de la web mediante colores y grficos. En
este apartado demostraremos cmo mantenemos este proceso de la manera ms simple posible, tanto para
nosotros como para el cliente. Creo en la filosofa KISS (keep it simple, sweetie: "las cosas, sencillas,
querido"). Existen dos motivos para utilizar esta tctica: en primer lugar, la vida ya es bastante complicada tal
como es; en segundo lugar, un plan sencillo tambin contribuye a mantener una web ms accesible y usable
para todos los implicados. En este apartado, haris lo siguiente:
Determinar el tipo de letra para los encabezamientos, subttulos y texto central, junto con otros
elementos tipogrficos.
Planificar diferentes combinaciones de colores para la web.
Crear un esbozo para el cliente para que decida el color y los grficos.
Pensar en cmo probar la web antes de ponerla en activo.
10.1. Primer paso: consideracin de la tipografa
10.1.1. Sobre los tipos de letra o fuentes
10.1.2. Sobre la legibilidad
10.2. Segundo paso: aadir tipografa
10.2.1. Atencin a la alineacin
10.3. Tercer paso: color
10.4. Cuarto paso: pruebas
Resumen
Preguntas de repaso
10.1. Primer paso: consideracin de la tipografa
Aprenderis algo ms sobre los aspectos tcnicos de la tipografa en el apartado sobre tipografa que viene
a continuacin; ahora veris algunos aspectos que os sern tiles en esta fase.
Las fuentes tambin se denominan tipos de letra y se utilizan para visualizar texto, nmeros, caracteres y
otros smbolos. Tambin conocidos como glifos, estos smbolos, letras y nmeros se categorizan por familia
(todos relacionados), estilo (cursiva, normal, oblicua, etc.), variante (normal o mayscula pequea), peso
(negrita), estiramiento (reducir o ampliar el tipo en altura o anchura) y tamao (por puntos o por altura o
anchura de pxeles). La tipografa es la disposicin y el aspecto del texto, de manera que est relacionado
con el aspecto de los glifos y con cmo estn dispuestos en la pgina (columnas, prrafos, alineacin, etc.).
La manera ms efectiva de controlar el aspecto de la tipografa en una pgina web es mediante las hojas de
estilo en cascada (CSS).
Uno de los primeros pasos para finalizar el diseo web es decidir las fuentes que utilizaris en todo el sitio
web. Muchos estudios han demostrado que una gran variedad de tipos de letra en un sitio web puede
confundir al lector. Por otra parte, una web que slo utiliza un tipo de letra para todo puede parecer insulsa.
Nuestro consejo es utilizar un tipo de letra para los encabezamientos y subttulos y otro tipo de letra para el
texto del cuerpo, especialmente si pensis aadir publicidad. La limitacin del nmero de fuentes aade
continuidad a la web y permite al mismo tiempo al lector diferenciar entre los encabezamientos y el texto
central cuando se mire la pgina. Los anunciantes aadirn la variedad; no se puede saber por adelantado
qu tipo de letra o variedad de tipo de letra puede utilizar un anunciante en un banner o anuncio de texto.
Nosotros solemos utilizar Verdana para el texto central y Times Roman o Georgia para los ttulos. Los tipos
de letra Times Roman y Georgia son serifs, y la Verdana es una sans-serif.
Como veris pronto, hemos decidido aplicar la Verdana al texto central de la web de ejemplo, pero como el
74/407
logotipo se ha creado a partir de la Arial Black, tambin hemos utilizado este tipo de letra sans-serif para
todos los ttulos. A veces se deben romper las propias normas y esta composicin ofrece un ejemplo
excelente de esta contingencia. Pero, en primer lugar, permitidnos explicar la diferencia entre tipos de letra y
por qu aplicamos unas opciones tan sencillas.
10.1.1. Sobre los tipos de letra o fuentes
Hay cuatro tipos principales de fuentes, que son las siguientes:
1. Serif: cualquier tipo de letra que contenga un trazo acabado, acampanado o con extremos rematados, o
que tenga extremos con filigranas (incluyendo serifs planas). A lo largo de la historia, se ha elegido
siempre la fuente serif para imprimir texto central porque resulta fcil de leer sobre una pgina
imprimida. Pero la web es diferente de la pgina impresa y algunos estudios sobre la legibilidad de las
fuentes demuestran que algunas del tipo sans-serif son ms fciles de leer, como la que se muestra en
la figura 2, cuando se utilizan como texto central en una pgina web.
Figura 1. Ejemplo de tipo serif, Times New Roman, normal (no negrita ni
cursiva), en 18 pt.
2. Sans-serif o de palo seco: cualquier tipo de letra que tenga los trazos de los extremos normales, sin
ser acampanados ni tener trazos cruzados ni ornamentos de ningn tipo. Aunque algunos autores
argumentan que los estudios sobre la legibilidad de las fuentes son errneos, nos hemos fijado en que
en sus webs utilizan el tipo sans-serif para el texto central. Incluso en los artculos que argumentan que
los tipos de letra serif son ms legibles, se utiliza el tipo sans-serif en el texto central de su web. Por lo
tanto, nos inclinamos por seguir a la mayora en este caso: utilizamos sans-serif como en la figura 2
porque se ha convertido en un tipo de letra tradicional para el texto central de la web.
Figura 2. Ejemplo de tipo sans-serif, Verdana, normal en 18 pt.
3. Caligrfica o cursiva: estos tipos de letra suelen tener un aspecto ms parecido a la escritura a mano
con bolgrafo o pincel que a la letra impresa, como el ejemplo que se muestra en la figura 3. Estas
fuentes incluiran las que parecen escritas a mano, aunque no sean en cursiva. Un motivo para no
utilizar este tipo de fuente en una web, especialmente en el texto central, es que resulta difcil de leer en
fragmentos largos. Adems, no todos los navegadores muestran las mismas fuentes, de manera que si
decids utilizar una fuente caligrfica o cursiva es posible que decida mostrarse como fuente serif en el
navegador de alguien.
Lectura difcil
Pensad qu difcil resultaba leer aquella carta escrita a mano de vuestra ta Mara
o el manuscrito del siglo XII que visteis una vez en el museo.
Figura 3. Ejemplo de fuente caligrfica, Staccato, a 18 pt.
4. Especializada, incluyendo espacio nico: el nico criterio de una fuente de espacio nico es que
todos los glifos tengan la misma anchura fija, similar a lo que podra ser una pgina escrita a mquina.
Otras fuentes podran tener un tono de fantasa, como la que se muestra en la figura 4 a continuacin, y
se utilizan nicamente para finalidades decorativas. Las fuentes de espacio nico son tiles en una web
especialmente para mostrar cdigo de programacin. Este tipo de letra se suele utilizar para esta
finalidad porque una fuente de espacio nico muestra claramente cada letra y cada smbolo utilizado en
el cdigo.
Figura 4. Ejemplo de fuente especializada, Jokewood, a 18 pt.
75/407
Si nos fijamos en las imgenes anteriores, veremos que no todos los tipos se crean de la misma manera,
aunque se creen al mismo tamao de punto. El tamao de punto es la altura de una letra, y algunas fuentes
sern ms altas a 18 puntos que otras. Tambin hay otras variaciones, como los espacios entre letras y
palabras, o el hecho de que algunos tipos de letra, como Jokewood, no tienen letras minsculas. Pero podis
ver cmo la Jokewood y el Staccato, la caligrfica, seran difciles de leer como texto central. Estas letras
caligrficas podran utilizarse en zonas pequeas como los ttulos o anuncios.
Un punto que se debe tener en cuenta es que es posible que estas fuentes no se vean igual en todos los
navegadores porque los navegadores diferentes son bsicamente incompatibles. Es posible que hayis
captado nuestro comentario anterior sobre que "no todos los navegadores muestran las mismas fuentes". El
motivo de este problema es que no todos los sistemas operativos admiten las mismas fuentes. O es posible
que admitan las mismas fuentes pero la variante, el peso y otros factores pueden mostrarse de manera
diferente de un navegador a otro. Por este motivo, podis elegir utilizar una fuente genrica, o simplemente
un tipo serif o sans-serif para mostrar la tipografa de la web. O podis utilizar tanto el nombre genrico como
el nombre de la fuente que elijis y cruzar los dedos, porque los usuarios tambin tienen la posibilidad de
cambiar su fuente o su aspecto en algunos casos.
Reflexin
La nica manera de poder utilizar un tipo de letra especfico en un estilo, variante o
peso especfico, o que se adapte a todos los navegadores, es crear un grfico con esta
fuente en un programa grfico. Sin embargo, no es recomendable hacerlo por muchos
motivos, incluyendo que el texto es inaccesible (un lector de pantalla no puede leer el
texto oculto en el interior de un grfico), que es ms difcil de cambiar el tamao (no
todos los navegadores admiten el cambio de tamao de pantalla completa) y que es
ms difcil de mantener (se debe volver a crear el grfico cada vez que se quiere
cambiar el texto). Creednos, no sigis por esta va.
Por este motivo, como diseadores web, debis aprender a aceptar el hecho de que la web es, para todos
los propsitos y finalidades, bsicamente un formato maleable. En el diseo de una web tenis control sobre
muchas cosas. El tipo de letra es un elemento sobre el cual tenis control, pero slo si lo mantenis tan
sencillo como sea posible. Y ste es el motivo por el que hemos sido fieles a Verdana para el texto central y
a Times Roman o Georgia para los ttulos durante todos estos aos.
Por otra parte, los diseadores de tipo de letra y los programadores intentan continuamente que las fuentes
sean ms legibles y bonitas. De manera que tomoslo con reservas e intentad algo nueva si creis que
funcionar. Descubriris si funciona o no cuando probis la pgina web en diferentes navegadores (una tarea
que explicaremos ms adelante en este apartado).
10.1.2. Sobre la legibilidad
Cuando mostris vuestro diseo de la web a un cliente, generalmente ste no sabr la diferencia entre un
tipo de letra serif o sans-serif. Todo lo que el cliente sabr es si puede o no puede leer el contenido de esta
pgina. De manera que, en definitiva, la legibilidad es lo que importa. Para tal fin, hay que garantizar lo
siguiente:
1. Que vuestro tipo de letra sea lo suficientemente grande para que se pueda leer en diferentes
resoluciones de navegador. Aunque los usuarios tienen los medios para cambiar un tamao de fuente
en algunos navegadores (como por ejemplo, Opera), podis intentar aseguraros de que vuestras fuentes
se pueden adaptar a diferentes resoluciones de navegadores. Una manera de conseguir esta
caracterstica es especificar el tamao de vuestras fuentes en porcentajes o "ems" en vez de por altura
de pxeles (se utiliza CSS para hacerlo).
2. Que ofrezcis un contraste suficiente entre el fondo y el texto central. Aunque un tipo de letra
blanco o claro sobre un fondo negro para fragmentos grandes del texto central puede cansar la vista, si
lo vais a hacer de esta manera, intentad proporcionar una hoja de estilos alternativa de manera que los
usuarios, en vez de esto, puedan leer un texto central oscuro sobre un fondo claro.
3. Que los ttulos sean realmente diferentes del texto central. La capacidad de dividir los fragmentos
grandes de texto central con ttulos y subttulos, o con listas (como sta) facilita que los usuarios puedan
analizar una pgina para encontrar lo que es importante para ellos. Dividir una pgina con imgenes
tambin est bien, pero aseguraos de que estas imgenes estn relacionadas con el texto central. En
caso contrario, estis desperdiciando ancho de banda.
76/407
4. Que evitis alargar el texto central a toda la anchura de una pantalla con composicin fluida.
Intentad leer un prrafo que se alarga por todo el espacio horizontal que proporciona un monitor grande:
al cabo de un rato os cansaris porque estaris utilizando los ojos y tambin la cabeza para leer el texto
de un lado de la pantalla al otro. Echad un vistazo a esta web sobre legibilidad, que es lo mejor que
hemos visto hasta ahora para ilustrar una anchura tpica legible para el texto central (tambin la
ilustracin que se muestra a continuacin en la figura 5). Esta pgina tambin explica con detalle cmo
la gente lee una pgina, independientemente de si se trata de una web o de pgina impresa.
La imagen que se muestra a continuacin se captur en una pantalla de veinticuatro pulgadas con una
resolucin de 1920 x 1200. Comparad esta imagen con la que se ve en la pantalla cuando pinchis en el
enlace anterior. A continuacin, tomad nota de la resolucin de la pantalla para ver las diferencias. Algunas
veces, una composicin fija es una buena opcin porque definir los parmetros del texto central en beneficio
de vuestros lectores. No os preocupis del espacio en torno a este rea de texto central (como la que se
muestra a continuacin). Ofreced un fondo agradable que no distraiga del diseo o del texto, y haris un
favor a aquellos que disponen de pantallas grandes.
40-60 caracteres se consideran en general una buena longitud de lnea para el texto central, y esto vara en
funcin de factores como el tamao de la fuente y el pblico a quien va destinado.
Figura 5. Ejemplo de una anchura apropiada para el texto central, visualizado en
una pantalla grande.
Por ltimo, pero no menos importante, comprobad si el texto central y los ttulos contienen errores
tipogrficos y ortogrficos. Hemos encontrado como mnimo un error tipogrfico y unos cuantos errores
ortogrficos en aproximadamente la mitad de los enlaces que hemos facilitado hasta ahora para este
apartado. Aunque errar es de humanos, la credibilidad de una empresa o de una persona puede quedar
manchada por una ortografa deficiente y con palabras sin espacios u otros problemas que se pueden
resolver fcilmente.
10.2. Segundo paso: aadir tipografa
Una vez hayis elegido las fuentes que utilizaris para la web, deberis disponer los ttulos, subttulos y el
texto central en la composicin de la web. En el apartado anterior, introdujimos una empresa imaginaria, Wiki
Whatevers, que quera compartir sus fragmentos de cdigo en una web como material de cdigo abierto.
Diseamos una arquitectura de la web para su aprobacin, y nos complace informaros de que les encantaron
las ideas que les presentamos. Aunque este esqueleto parece austero, evita cualquier colocacin de grficos
o imgenes que puedan dar al cliente la nocin preconcebida de dnde "podran" ir las cosas, incluyendo el
logotipo de la empresa. La imagen de este esqueleto se muestra a continuacin en la figura 6:
77/407
Figura 6. Esqueleto para Wiki Whatevers.
Ahora, para nuestra propia tranquilidad, queremos aadir el logotipo y parte del texto que la empresa nos
facilit para determinar si fluir correctamente con esta composicin. El otro motivo por el que queremos
aadir el logotipo y el texto en este momento es que la tipografa puede ayudarnos con la eleccin de colores
que estamos a punto de llevar a cabo. El texto central, los ttulos y otras partes de la tipografa de una web
aaden su propio "color" a una web. Slo hay que comparar la imagen que se ve a continuacin en la figura
7, con la que est directamente encima, en la figura 6, para ver la diferencia:
78/407
Figura 7. Texto central y logotipo aadidos al esqueleto.
El texto anterior aade "color" a la web, aunque el nico color que se ha aadido es el del logotipo. El texto
ha aadido "valor", no slo en contenido, sino tambin en tonos, tonalidades y matices de negro, blanco y
gris. Hemos aadido slo los elementos que son esenciales para la web: el logotipo, el nombre de la web
(que tambin es el nombre de la empresa), un aadido o tag line ("Open Source Wikis"), los enlaces y la
suscripcin a un boletn o canal RSS en la columna central, la informacin del pie sobre la empresa, y
tambin enlaces de texto y el texto de los anuncios. El cuadro de bsqueda era demasiado grande para
utilizar slo una columna, de manera que lo colocamos en el encabezamiento.
Reflexin
Aunque decimos que utilizamos texto central, realmente utilizamos un "relleno"
proporcionado por el generador Lorem Ipsum. Este texto central "falso" puede
representar el texto real si queris disear una web y todava no disponis del texto.
10.2.1. Atencin a la alineacin
Llegados a este punto, nos gustara ensearos cmo tomamos la decisin de colocar el texto donde est, y
cmo elegimos la alineacin. La alineacin significa cmo est colocado el texto en una determinada zona.
79/407
Podis alinearlo a la izquierda y dejar bordes irregulares a la derecha, que sera el formato tradicional. O
podis centrar el texto o justificarlo (alineado por igual a derecha e izquierda), o alinearlo a la derecha de
manera que los bordes de la derecha sean rectos y los bordes de la izquierda sean irregulares.
Elegimos la alineacin tradicional a la izquierda, donde el tipo de letra se alinea en lnea recta a la izquierda.
Pero quiz notaris que el texto central est justificado ms a la derecha que los subttulos que acompaan a
este texto. El logotipo fue el motivo por el que elegimos esta alineacin. A continuacin, puede observarse
una ampliacin que explica por qu tomamos esta decisin en la figura 8:
Figura 8. Ilustracin de la alineacin entre el logotipo y el texto central.
Como el logotipo no es un diseo de premio, intentamos que el tamao fuera pequeo. Adems, el peso que
proporciona el tipo de letra Arial Black hace que el logotipo parezca mayor y ms desproporcionado que
cualquier otra caracterstica de la pgina. Aunque lo redujimos mucho, queramos que el logotipo fuera lo
suficientemente grande para que cupiera el nombre de la empresa y su aadido "Open Source Wikis" en el
espacio que proporcionaba la altura del logotipo. Por las lneas rojas que hemos colocado en la ilustracin
anterior, podis ver que el nombre de la empresa est alineado en la parte superior del logotipo inclinado, y
que el aadido est situado en la parte inferior de la "W" negra del logotipo.
Reflexin
Volved a mirar tambin la figura 7: mirando hacia abajo desde la primera "W" del
logotipo, veris que el encabezamiento de "The Latest Wiki" est alineado con el punto
inferior izquierdo de esta letra. Como el logotipo est inclinado, el punto ms bajo
intenta apuntar al ttulo de debajo de la navegacin. De hecho, provoca que la
navegacin aparezca en segundo trmino, ya que el ttulo est tan en negrita como el
nombre de la empresa.
Llegados a este punto, notamos que el tipo de letra Georgia que elegimos para el ttulo de entrada del
bloque pareca demasiado apretado para esta zona. Por este motivo, decidimos cambiar los ttulos a Arial
Black, un tipo sans-serif que es ligeramente diferente a Verdana, que utilizamos en el texto central, aunque
no tan diferente como para generar confusin.
Esta capacidad de alinear distintos elementos en el diseo de una pgina se facilita con CSS. Aunque
algunos navegadores pueden descomponer la alineacin que hayis creado, en muchos casos va muy bien
utilizar puntos exactos en una composicin para aplicar los elementos. ste es el motivo por el que tambin
podis alinear un cuadro de bsqueda con la parte inferior de un aadido, o por el que podis alinear el lado
derecho de este cuadro de busca con el lado derecho de un formulario situado ms abajo, tal como hicimos
en el ejemplo mostrado anteriormente.
Podra haber alineado el texto central con la esquina superior izquierda del logotipo y tambin con los ttulos,
pero la justificacin mostrada anteriormente permite al lector mirar rpidamente los ttulos y leer el texto que
le parezca importante. Por otra parte, cada pgina web es diferente y otro diseo de logotipo podra pedir
una alineacin totalmente diferente. La cuestin es alinear todos los elementos importantes de la pgina de
80/407
manera que fluyan correctamente. El lector no notar que os habis tomado esta molestia (ni tampoco el
cliente, normalmente), pero slo hace falta que no alineis los objetos importantes de una pgina, para que
alguien acabe haciendo el comentario de "hay alguna cosa que no encaja del todo".
El desplazamiento del texto central en una pequea cantidad tambin genera lo que se conoce como
espacio blanco, o una forma (a veces denominada canal) en torno al texto y otros elementos que provocan
que el lector vea claramente que una parte del texto est separada de la otra. El espacio a la izquierda del
texto central se debe establecer generalmente de manera similar al espacio de la derecha del texto central (o
cualquier imagen), de modo que se pueda crear un equilibrio en un espacio determinado. Este espacio
blanco da a la web un poco de "espacio para respirar", para que no parezca tan apretado.
Echad un vistazo a las webs la prxima vez que naveguis por Internet. Fijaos en las pginas que os
parezcan bien diseadas o en las que simplemente "encajen bien". Observad la alineacin del texto central,
los ttulos, los logotipos y otros elementos de la pgina. Estn alineados? Parece que fluyan de un
elemento al otro? Quiz el diseador dedic tiempo a los pequeos detalles como stos para que el diseo
de la pgina fuera menos importante que el contenido, que, para todos los propsitos y finalidades, es el
objetivo de un buen diseo.
Es evidente que un diseo puede encontrarse con muchos problemas en diferentes navegadores. Es posible
que el texto no se alinee correctamente en Safari, pero que aparezca perfectamente alineado en Opera o
Firefox. ste es un problema que habr que solucionar pronto, pero slo despus de haber elegido los
colores para la web.
Reflexin
Es posible que algunos os preguntis por qu no hemos elegido Arial Black para los
subttulos, as como para el nombre de la empresa. Hemos decidido seguir fieles a la
opcin Times New Roman porque este tipo aporta contraste a la web, un principio de
diseo que aumenta el inters por una pgina. El uso generalizado de Arial Black para
todos los ttulos hara que esta web quedara aburrida.
10.3. Tercer paso: color
Cuando preparamos un esbozo de web para un cliente, generalmente intentamos desarrollarlo al mximo
una vez decidido el esqueleto inicial, antes de volver a mostrar los ejemplos al cliente. Siempre que sea
posible, preferimos utilizar cdigo en vez de una imagen para el esqueleto. De esta manera podemos aadir
elementos como el logotipo, el texto central e incluso esbozos de anuncios para mostrar al cliente cmo
quedar todo en la web definitiva. Con esta disposicin completa, el cliente no se desilusiona por el aspecto
que tendr la pgina con todos los elementos colocados. Despus, el cliente puede tomar decisiones sobre
qu se puede aadir o eliminar. Adems, cuando podemos ensearle a un cliente una pgina web en un
ordenador tal como quedara en la web, puede visualizar cmo quedara esta pgina si la visitara en tiempo
real.
El color forma parte de esta mentalidad de "todo est en su sitio". El motivo es que las diferentes
combinaciones de colores pueden cambiar una web completamente, incluso con todos los elementos
situados. Adems, preferimos mantener las muestras de color al mnimo porque demasiadas muestras
pueden llegar a confundir. En este caso, el cliente tena un presupuesto limitado, de modo que lo
persuadimos de limitar las opciones a una combinacin de colores como muestra con la que trabajar.
Cuando presentamos el Color Scheme Generator II, no mencionamos que se puede introducir un color
hexadecimal en esta herramienta para generar una combinacin de colores a partir de un color especfico.
Justo debajo de la rueda de colores, veris un enlace que dice "Enter RGB" (introducid RGB). En nuestro
caso, el dorado del logotipo era el color ms fuerte, de manera que introdujimos este hexadecimal (#eab304)
para conocer mejor qu opciones tenamos. La combinacin monocromtica resultante era un poco aburrida,
pero la combinacin de colores de contraste era prometedora. Esta combinacin tena un azul violeta con el
que podamos trabajar porque la sombra de detrs del logotipo tambin tena un toque de azul, como se
muestra en la figura 9.
Ved tambin
Podis ver el Color Scheme Generator II en el apartado 8 de este mdulo.
81/407
Figura 9. Combinacin de colores de contraste basada en #eab304.
Con los colores que se muestran aqu, decidimos utilizar el color dorado principal del logotipo como fondo
para la navegacin superior. Utilizamos el azul ms oscuro (casi un azul violeta) #2b0da4 para los enlaces
(que tambin subrayamos) y utilizamos una opacidad ms clara como el mismo color azul para el fondo de la
publicidad. En la figura 10 podis ver cmo estas adiciones de colores alteran el aspecto de la disposicin:
Figura 10. Composicin con colores que crean contraste.
En la imagen superior podis ver que los colores son demasiado oscuros y "duros" para la web. Por lo tanto,
redujimos la opacidad de la barra de navegacin hasta un 75% y la opacidad de las barras del texto
publicitario hasta un 20%. En la figura 11 podis ver la diferencia inmediata.
La reduccin del color en la barra de navegacin provoca que quede ms alineada con el color del logotipo.
82/407
La reduccin de opacidad del color del fondo de la publicidad hace que encaje mejor con los colores de los
enlaces. Como los anuncios consisten en enlaces, esta reduccin del color y adaptacin a los enlaces de la
web es adecuada. El hecho de que se haya aadido el color del ltimo de los anuncios es bueno (si alguna
vez utilizis un servicio de publicidad como Google Adsense, descubriris que Google prefiere que
destaquis los anuncios del resto del texto central) y la adicin de color contribuye a cumplir estos criterios.
Tambin utilizamos el color de contraste oscuro #2B0DA4 para el aadido, y esta adicin contribuye a
destacar el color de contraste azul en torno a todo el permetro de la pgina.
Figura 11. Composicin con opacidad reducida.
Aunque esta composicin puede parecer fcil de crear, estuvimos bastante tiempo utilizando los colores de la
combinacin de colores de contraste para los fondos, para dar color a los ttulos y para cambiar la
disposicin de los anuncios varias veces. Con cada cambio, los colores parecan saturar la sencillez de la
composicin, de manera que los eliminamos y nos quedamos con el negro para toda la tipografa, excepto
para el aadido. Aunque podamos utilizar un enlace de color "visitado", creemos que nuestra mejor opcin
es quedarnos con una base sencilla de dos colores que acepte bien las imgenes en color sin crear una
pesadilla cromtica.
Por otra parte, podis ver cmo crear un esqueleto previamente puede simplificar tambin el trabajo: una vez
tengis definido un "mapa" o una arquitectura, la adicin del color es ms o menos como pintar "sin salirse
de la raya". Si os ces a vuestra composicin, la podis utilizar para guiaros a la hora de elegir. Adems, si
mantenis la sencillez, el diseo puede ser ms elegante a largo plazo, y tambin ms usable y accesible.
Existe otra buena razn para mantener la simplicidad de esta composicin: las pginas interiores tendrn
fragmentos de cdigo y utilizaremos una fuente de espacio nico para este cdigo con la finalidad de
ceirnos a las mejores prcticas. ste es otro motivo por el que hemos decidido utilizar dos tipos de letra
sans-serif diferentes de estilos parecidos. La aplicacin de una fuente de espacio nico en el interior de esta
83/407
web aportar una buena variedad de tipo de letra, junto con cualquier variante publicitaria. Aseguraos de
utilizar los elementos de encabezamiento (h1, h2, h3, etc.) para los ttulos y subttulos en vez de hacer que
estn en negrita (strong) o en cursiva (em). El uso de elementos de encabezamiento har la web ms
accesible. Podis modificar el modo en que estos ttulos aparecen en la hoja de estilos (CSS).
Algunas cosas que cabe tener en cuenta sobre la pgina anterior:
Hemos mantenido el nombre de la empresa de la parte superior de la pgina en negro porque el negro
ayuda a conectar el negro del logotipo con la parte superior de la pgina.
Hemos utilizado una alineacin centrada en la parte superior como la columna central para atraer la
atencin a la funcin de registro. Como el formulario para el registro en un boletn llena la anchura de
esta columna, el texto centrado queda compensado mediante esta alineacin y hace que la copia
parezca "pertenecer" a la forma creada para este formulario.
La alineacin centrada de la direccin en la parte inferior de la pgina al pie puede parecer descentrada,
pero queramos que esta direccin formara parte de la zona que lleva el texto central de la web. A
medida que vaya creciendo la web, esta columna derecha quedar llena de ms enlaces y posiblemente
algunas imgenes, y queremos que esta zona quede completamente separada del texto central de la
web. Esta separacin avisa a los espectadores de que la columna de la derecha es a donde debe ir
para encontrar ms informacin.
Para acabar, como ltimo retoque aadiremos las imgenes de la pgina. A no ser que el cliente tenga una
imagen para utilizar, la que elijamos habr de "encajar" con la combinacin de la composicin. Dicho de otra
manera: intentad encontrar una imagen apropiada que refleje los colores que habis elegido para la web. En
este caso, hemos decidido aadir un poco de humor a la composicin con una foto de archivo de un geek.
Uno de los motivos por los que hemos elegido esta foto es que el hombre de la imagen est mirando
directamente al espectador, lo que significa que esta imagen podra llamar la atencin del espectador antes
que cualquier otra cosa del sitio. Como esta imagen es tan importante, nos fue bien que los colores de su
camisa fueran semejantes al dorado y al azul de la web. Por ltimo, las gafas oscuras reflejan los puntos de
negro fuerte de los ttulos de la web. Adems, aadimos una tonalidad azul a las sombras y una tonalidad
amarilla a los puntos de luz de esta foto con Photoshop para que encajara mejor con la combinacin de
colores global.
Tambin metimos un aadido para contener las etiquetas de publicacin del blog y un sello de fecha y hora
para que los espectadores puedan ver de cundo son las entradas del blog. Todos estos elementos, como
podis ver a continuacin, aaden ms "peso" y confusin a la web. ste es slo un motivo ms por el que
es recomendable mantener la informacin importante y esencial tan simple como sea posible: el espectador
tendr bastantes opciones cuando pinche en esta web tal como est ahora. Podis ver la figura 12 a
continuacin para comprobar el resultado final:
84/407
Figura 12. El diseo definitivo preparado para la presentacin al cliente
La ventaja del diseo web es que no se trata de un diseo impreso. La impresin es para siempre, mientras
que la web cambia constantemente. De manera que esta web puede cambiar con los aos para reflejar el
crecimiento de este grupo. Los errores se pueden corregir y los colores se pueden modificar. No obstante, es
preferible tener el producto ms perfecto en la red desde el principio. Este objetivo de ofrecer el mejor
producto posible es bueno para el prestigio personal y tambin para el prestigio del cliente.
A medida que creemos ms pginas, las llevaremos acabadas al paso siguiente y definitivo antes de que
pasen otra vez al cliente.
10.4. Cuarto paso: pruebas
Probar una web significa que el diseador pasar un fino tamiz a todas las pginas de la web para buscar
distintos errores que se puedan resolver antes de que la web est activa. Existen diferentes opciones para
estas pruebas, ya que se deben hacer varias.
1. Prueba de la tipografa y los enlaces: podis utilizar amigos, foros y editores profesionales para
comprobar los errores tipogrficos y ortogrficos. Mientras esta gente mira las pginas por vosotros,
pedidles que comprueben tambin los enlaces para asegurar que funcionan. Una advertencia: a muchos
clientes no les gustara nada que sus contenidos sean de dominio pblico antes de estar en activo en la
web. En este caso, aadid el coste de un editor a la factura sobre la interfaz de usuario y haced que el
editor firme un acuerdo de no divulgacin (NDA) de manera que sea responsable de la privacidad del
contenido de la web.
2. Prueba de la validez del cdigo: utilizad los validadores del W3C para comprobar el cdigo HTML y
CSS cada vez que aadis cdigo nuevo a la web. Sin este paso, el siguiente es un tema discutible, ya
85/407
que un error de cdigo puede desajustar un diseo web en mltiples navegadores. Puede ser que
mientras trabajis, descubris que alguna parte del cdigo que habis creado para la publicidad no
valide. Sin embargo, no intentis cambiar el cdigo porque podrais negar el valor de los anuncios
generando errores en el cdigo. En vez de ello, muchos diseadores han aprendido a aceptar el hecho
de que el cdigo de la publicidad es como es, y no se puede hacer casi nada para cambiarlo. Por
suerte, la mayor parte del cdigo publicitario no afectar a la composicin en el siguiente paso.
3. Prueba de compatibilidad de navegadores: quiz os preguntis si deberais ir corriendo a comprar
unos cuantos ordenadores diferentes y distintos tamaos de monitor, junto con unos cuantos sistemas
operativos diferentes para probar una web. No es necesario. Muy pocos diseadores web pueden
permitirse esta extravagancia, de manera que utilizan distintas opciones para probar la compatibilidad
de una web en diferentes navegadores. Estas opciones incluyen descargar distintas versiones de un
sistema operativo en una mquina, el consejo de amigos y foros, y el uso de servicios que proporcionan
capturas de pantalla. Los servicios de captura de pantallas proporcionan bsicamente una instantnea
de una pgina web desde varios equipos diferentes.
Con este servicio, podis ver si el tipo de letra es demasiado grande para una resolucin o demasiado
pequeo para otra. O quiz descubris si la composicin obliga a un usuario a desplazarse
horizontalmente o si habis perdido completamente una columna en otro navegador. Nosotros
normalmente utilizamos capturas de pantalla para las pruebas porque las dos primeras opciones han
sido cuando menos complicadas. Adems, no nos gusta enviar el trabajo de nuestros clientes si
podemos mantener la privacidad de su informacin mediante el uso de servicios de captura de pantallas.
Hay servicios gratuitos de captura de webs, pero hemos aprendido que las colas son largas y las
opciones para diferentes entornos de pruebas pueden ser limitadas. De manera que hemos invertido
una cierta cantidad de dinero en BrowserCam y este servicio nos ha ido bastante bien durante unos
cuantos aos. Este servicio tambin ofrece una prueba gratuita, de modo que podis probar vuestro
producto gratuitamente para entender cmo funciona.
4. Prueba de usabilidad y accesibilidad: existen una serie de herramientas en lnea para probar la
accesibilidad. Algunas requieren el uso de sonido para poder or cmo una mquina hablante "leera" su
pgina. Otros resultados de las pruebas pueden requerir un sencillo cambio de cdigo o un cambio de
colores para ofrecer ms contraste a los usuarios con poca visin. Con respecto a la usabilidad, podis
encontrar herramientas y listas de control en la Red que os ayudarn a garantizar que la web que
diseis sea fcil de usar tambin por el mximo nmero de lectores.
Estas pruebas son una tarea aburrida y es posible que en el proceso descubris que vuestro bonito diseo
sigue siendo bonito en algunos navegadores, pero en otros acaba como unos espaguetis recalentados de la
semana pasada. Lo ms importante que cabe recordar es el contenido: mientras sea visible y legible en
todos los navegadores, el hecho de que una fraccin de espacio os d problemas en la parte superior del
encabezamiento en un navegador determinado no es tan importante. Si la mayora de los usuarios de una
web no tienen problemas para acceder a los materiales en lnea de la web que habis diseado, entonces
habris cumplido el objetivo que muchos diseadores olvidan a cambio de un diseo que creen que ganar
premios.
Resumen
Aunque el color y la composicin son muy atractivos para el diseador, tambin se deben tener en cuenta
otros elementos del diseo. La tipografa, las imgenes y la posibilidad de incorporar las necesidades de un
cliente con respecto a publicidad y financiacin son elementos importantes en el diseo de una web. Las
exigencias planteadas a un diseador para satisfacer los deseos de un cliente, satisfacer las necesidades de
unos lectores que piden webs accesibles y usables, y a pesar de todo crear un gran diseo, pueden parecer
abrumadoras en ocasiones.
Pero todava ms frustrante es la falta de compatibilidad entre diferentes navegadores. Aunque en la ltima
dcada se han realizado avances hacia una compatibilidad mayor, se ha de entender que el diseo acabado
puede ser diferente en distintos navegadores. Adems, deberais comprender que en algunos navegadores
los usuarios pueden cambiar toda una web slo pinchando en un botn. Se pueden eliminar imgenes,
cambiar el color de fondo y del texto, y los usuarios pueden ignorar cualquier cosa que incluya JavaScript por
pequea que sea.
Por otra parte, los avances hacia un entorno ms compatible y una interesante nueva era de funcionalidad
web pueden acabar siendo un reto interesante para los diseadores web de hoy. Y hay que pensar que
todava no han pasado treinta aos desde que los ordenadores domsticos empezaron a estar ampliamente
86/407
disponibles en el mercado minorista. Pensad qu puede aportar la prxima dcada para el diseador que se
interesa por mantenerse al corriente de todos los cambios.
Preguntas de repaso
1. Cules son los cuatro tipos principales de fuentes?
2. Qu fuentes son mejores para el texto central y por qu?
3. Por qu es importante crear bastante contraste entre el texto central y el fondo del texto?
4. Mencionad como mnimo dos maneras de dividir una pgina llena de texto central.
5. Dad una razn de por qu es buena idea aadir tipografa a una pgina antes de aadir imgenes.
6. Mencionad cuatro tipos de alineacin.
7. Explicad cmo la alineacin puede ayudar a que una web parezca "ms limpia".
8. Qu es un NDA y cundo se debe utilizar este documento?
9. Por qu es importante comprobar la ortografa de una web?
10. Mencionad cuatro maneras de probar una web antes de que est en activo.
: :
87/407
Conceptos de diseo web - La tipografa en la web
La tipografa en la web
Accesibilidad : : :
11. La tipografa en la web
Paul Haine. 8 de julio del 2008. Publicado en: entidades, citas, tipo de letra, tipografa, interletraje
Qu es la tipografa? Para decirlo de una manera sencilla, es el arte, el diseo y la configuracin del texto
(al que nos referiremos como tipo). Es un concepto tomado prestado de la impresin tradicional. Se trata
tanto de saber aquello que no se debe hacer nunca con el tipo, como de saber qu se debe hacer. En la
web, normalmente se presta muy poca atencin a la tipografa y hay algunas limitaciones tecnolgicas que
hacen que la tipografa de la web tenga menos posibilidades que la tipografa de la imprenta. No obstante,
con las herramientas disponibles no existe ninguna razn por la que el tipo no se pueda presentar en la web
en una amplia variedad de formas elegantes y atractivas.
En este apartado explicaremos exactamente por qu la tipografa est tan limitada en la web (en
comparacin con el diseo de imprenta) y daremos algunos consejos para conseguir una buena tipografa en
ella, junto con un ejemplo de una pgina web que demuestra algunos de estos consejos. De momento no es
necesario que os preocupis si no entendis el cdigo CSS y HTML; de lo que se trata es de que pensis en
el diseo. A medida que vais leyendo el apartado, puede ser una buena idea tener un lpiz o un bolgrafo a
mano y una hoja de papel para poder ir esbozando ideas sobre la maquetacin del texto.
11.1. Limitaciones de la tipografa de la web
11.1.1. Seleccin reducida de tipo de letra
11.1.2. Particin de palabras
11.1.3. Interletraje
11.1.4. Falta de control
11.2. Cmo se realiza la tipografa en la web?
11.3. Algunos consejos rpidos
11.3.1. Seleccin de una serie de tipos de letras
11.3.2. Longitud de lnea
11.3.3. Interlineado
11.3.4. Iniciales
11.3.5. Versalitas
11.3.6. Puntuacin libre
11.3.7. Puntuacin tipogrficamente correcta y otras entidades
11.3.8. Destacados
Resumen
Preguntas de repaso
11.1. Limitaciones de la tipografa de la web
Los diseadores de la imprenta tradicional tienen un montn de posibilidades a su disposicin con respecto a
la tipografa, que incluyen toda la gran cantidad de tipos de letras disponibles y muchas opciones para la
distribucin del texto. La tipografa de la web es mucho ms limitada, ya que hay que crear el diseo
utilizando tipos de letras, distribuciones de texto, etc., que sabemos de entrada que estarn disponibles en
los ordenadores de todos los usuarios que naveguen por Internet. No sirve de nada disear la web
pensando slo en uno mismo!
Algunas de las limitaciones de la tipografa de la web son:
Poca variedad de tipo de letra.
No se pueden partir palabras, con lo que el texto justificado queda feo para las columnas de texto muy
estrechas.
Control limitado del interletraje (el espacio entre las letras).
Falta de control sobre la visualizacin del resultado final. Los diseadores deben tener en cuenta la gran
variedad de dimensiones de pantallas, resoluciones y entornos.
88/407
A continuacin comentaremos cada uno de estos puntos con ms detalle.
11.1.1. Seleccin reducida de tipo de letra
La poca variedad de fuentes es normalmente lo primero con lo que os encontraris a la hora de definir el
estilo del texto. Aunque podis especificar el tipo de letra que queris en el cdigo CSS, las personas que
visiten vuestros sitios web slo vern el texto en este tipo de letra si la tienen instalada en su ordenador; si
no la tienen, su navegador utilizar el tipo de letra alternativo que hayis especificado en el CSS o recurrir
al tipo de letra por defecto (normalmente, Times New Roman). Puede ser que os guste ver todo el cuerpo de
texto con tipos de letra especiales como Trump Medieval o Avant Garde pero, a no ser que vuestro pblico
objetivo no tenga una cierta propensin hacia los diseadores, es muy probable que no puedan apreciar
nunca vuestros esfuerzos. Por ello, muchos diseadores de webs se limitan a utilizar los tipos de letras
disponibles ms habitualmente en todos los sistemas, que normalmente son slo los siguientes:
Andale Mono
Times New Roman
Georgia
Verdana
Arial/Arial Black
Courier/Courier New
Trebuchet MS
Comic Sans (muchos creen que esta fuente es poco profesional y muy fea; no la utilicis si no es con
mucha moderacin y en sitios web destinados a nios)
Impact
La figura 1 muestra el aspecto de estos tipos de letras.
89/407
Figura 1. Los tipos de letras disponibles ms habitualmente en todos los
sistemas se limitan a stos.
Si especificis cualquiera de los tipos de letra anteriores, tendris muchas posibilidades de que tambin lo
tengan la mayora de las personas que os visiten. Microsoft cre seis tipos de letra nuevos diseados para su
uso en pantalla en Windows Vista y XP cuyos nombres, curiosamente, empiezan por la letra C. Si las queris
utilizar, son Cambria, Calibri, Candara, Consolas, Constantia y Corbel. Sin embargo, nosotros no
aconsejaramos su uso porque es muy probable que no estn disponibles en las plataformas Mac o Linux.
Por lo tanto, en comparacin con los millares de tipos de letra disponibles para los diseadores grficos, los
diseadores de sitios web slo pueden seleccionar entre poco ms de una docena. Pero se trata de una
limitacin problemtica? La tipografa es mucho ms que el hecho de seleccionar un tipo de letra atractivo;
tambin hay que tener en cuenta las longitudes de lnea, el interletraje y el espacio en blanco. Recordad que
los tipgrafos anteriores a las tipografas electrnicas tambin se haban de enfrentar a unas limitaciones
similares.
11.1.2. Particin de palabras
Cuando se trata de alinear el texto dentro del espacio disponible hay cuatro opciones: alineado a la izquierda,
alineado a la derecha, centrado y justificado. El texto justificado, en el que los mrgenes izquierdo y derecho
del bloque estn alineados con los lados verticales del espacio que lo contiene, puede tener un aspecto ms
atractivo que el texto con un margen "irregular" y se puede ver mucho en revistas y libros. En la web, sin
embargo, esto es problemtico a causa de la falta de la particin de palabras automtica, que en otros
soportes rompe las palabras en los puntos apropiados a fin de que encajen mejor dentro de la lnea. Con el
fin de justificar el bloque de texto, lo nico que puede hacer el navegador es ajustar el espacio entre las
palabras, lo cual puede provocar que aparezcan "ros de espacio en blanco" que fluyan verticalmente por el
bloque de texto; esto suele pasar normalmente cuando la longitud de lnea del bloque de texto es demasiado
corta y no hay suficiente espacio para realizar unos ajustes sutiles, tal como muestra la figura 2.
90/407
Figura 2. Los ros de espacio en blanco pueden estropear los bloques de texto
justificados.
Tal como podis ver en esta figura, el hecho de que no se partan las palabras para cortarlas en los puntos
naturales provoca que el espaciado entre algunas palabras llegue a tener unas dimensiones inaceptables.
Para evitarlo, en la web la mayora de las veces hay que utilizar el texto alineado a la izquierda.
11.1.3. Interletraje
El interletraje es el proceso de ajustar el espaciado entre parejas de letras concretas cuando el tipo de letra
utilizado es proporcional (como Times New Roman, en el que el espacio entre los caracteres vara segn los
caracteres de los que se trate) y no de anchura fija (como Courier, en el que el espacio entre los caracteres
es siempre el mismo). El interletraje se utiliza en imprenta para ajustar el espacio entre letras que se alinean
de una manera natural, como por ejemplo una W seguida de una A, y puede dar un aspecto ms profesional
al texto. Los tipos de letra ms profesionales ya incorporan instrucciones de interletraje con el fin de dar
informacin sobre el espaciado al dispositivo que deba reproducir el tipo. La figura 3 muestra la diferencia
que representa el uso del interletraje.
Figura 3. El interletraje puede mejorar mucho el aspecto del texto.
En la figura anterior, la primera palabra est imprimida sin el interletraje ajustado. En la segunda palabra, en
cambio, se ha reducido el espaciado entre la W y la A, mientras que el espacio entre la A y la S se ha
aumentado ligeramente.
En la web, es totalmente imposible aplicar el interletraje con este grado de precisin. Lo nico que se le
parece un poco es la posibilidad de utilizar el espaciado entre caracteres, lo cual, en el mundo de la
impresin, significa ajustar la separacin entre los caracteres en todo el texto, sean cuales sean stos. De
esta manera, se puede reducir el espacio entre la W y la A, pero ello tambin afectar al espacio entre todas
las otras letras. En la web, el espaciado entre letras se controla con CSS; podemos ver un ejemplo en la
figura 4.
91/407
Figura 4. En la web no se puede utilizar el interletraje propiamente dicho, lo ms
parecido es el espaciado de letra general.
En la figura anterior se ha aumentado el espaciado entre cada uno de los caracteres en la misma medida.
Esto ha servido para separar la A y la S, pero ahora el espacio entre la W y A es demasiado grande. A
causa de esta caracterstica de todo o nada, es muy difcil utilizar el espaciado de letra con CSS de una
manera adecuada; por ello, hay que utilizarlo con mucha moderacin.
11.1.4. Falta de control
Despus de todas estas explicaciones sobre el mundo de la imprenta, hay algo muy importante que cabe
tener siempre en cuenta, y es que la web no es una imprenta. As que, mientras el diseador grfico no se
debe preocupar de si la persona que ve su trabajo redimensiona el texto, de si no tiene los tipos de letra
necesarios o de s no ha activado el aliasing, nosotros, sin embargo, s que nos hemos de preocupar, y
normalmente caemos en la tentacin de forzar un diseo concreto para el espectador, por ejemplo,
definiendo un texto de un tamao rgido, metiendo el texto en un espacio de una anchura y una altura fijas o
incluso sustituyendo fragmentos de texto por imgenes.
Esta falta de control, sin embargo, no ha de ser necesariamente un problema. Slo es necesario tener en
cuenta que la gente querr leer el contenido de la web utilizando muchos dispositivos diferentes con
entornos diferentes y de maneras diferentes. Lo que no debis hacer es intentar que no lo hagan o ponerles
dificultades. Si quieren leer vuestro contenido lo han de poder hacer de la manera ms sencilla posible.
Quiz quieren leer el contenido de la web desde su dispositivo mvil mientras vuelven hacia casa despus
del trabajo; quiz prefieren imprimirlo y leerlo en papel y no en la pantalla, o quiz tienen alguna
discapacidad visual y deben aumentar el tamao del tipo de letra. Cuando defins el estilo del texto de la
web, lo que estis haciendo en realidad es ofrecer una gua para todos los diferentes dispositivos de
navegacin sobre cmo prefers que se visualice este texto. Evidentemente, los dispositivos pueden ignorar
todo lo que vosotros les decs, pero esto no es ningn problema. Lo que realmente importa es que no
intentis imponer decisiones de diseo a todo vuestro pblico.
11.2. Cmo se trabaja la tipografa en la web?
La tipografa en la web se controla totalmente con CSS; y con CSS se consigue un control importante: no
slo se controla el tamao, el color y el tipo de letra, sino tambin el interlineado, el espaciado de letra, el uso
de las maysculas (todo maysculas, maysculas iniciales, versalitas o sin ninguna mayscula) e incluso se
controla el estilo de la primera letra o de la primera lnea del texto.
Cuando se define el bloque que contiene el texto tambin se controla el grado de justificacin del texto y la
longitud de lnea. Y no slo eso; slo es necesario crear unas normas de estilo en un lugar concreto (la hoja
de estilo) y despus aplicar estas normas a todo el texto de todo el sitio web (o tambin se puede ser ms
especfico y aplicarlas a prrafos o partes concretas de la pgina). Adems, si nunca os encontris con que
debis aumentar el tamao del texto de la pgina web, o si debis cambiar el tipo de letra, slo deberis
cambiar este valor en la hoja de estilo.
11.3. Algunos consejos rpidos
A continuacin encontraris algunos consejos rpidos sobre la tipografa de la web.
11.3.1. Seleccin de una serie de tipos de letra
Cuando especifiquis el tipo de letra de pantalla preferido, es aconsejable incluir algunas selecciones
alternativas. Es decir, en lugar de especificar slo "Georgia", podis especificar "Georgia, Cambria, "Times
New Roman", Times, serif". De esta manera, el navegador intentar en primer lugar utilizar el tipo de letra
Georgia, pero si no est instalado lo probar con Cambria, despus con Times New Roman, despus con
Times y finalmente con el tipo de letra que el sistema operativo tenga asignado en la palabra clave "serif".
11.3.2. Longitud de lnea
92/407
Para facilitar la lectura, la longitud de lnea media del texto que se encuentra dentro de un bloque debera ser
de 40-60 caracteres por lnea, aunque este valor puede variar mucho en funcin del pblico objetivo (los
nios prefieren unas lneas ms cortas y los adultos ms largas). La figura 5 muestra una longitud de lnea
ideal:
Figura 5. 60 caracteres por lnea, la longitud de lnea ideal.
El texto de esta captura de pantalla tiene aproximadamente unos 60 caracteres por lnea. Si las lneas son
ms largas, el lector debe empezar a mover los ojos, o incluso la cabeza, poder seguir el texto, lo cual puede
hacer que aumente la fatiga ocular y sea ms difcil asimilar el texto.
11.3.3. Interlineado
La interlnea es el espacio vertical que hay entre las lneas; el texto ser ms fcil de leer si esta interlnea es
un poco mayor que el valor predeterminado del navegador (esto tambin har que haya espacio disponible
para los caracteres de subndice y superndice). La figura 6 muestra la diferencia entre dos prrafos:
Figura 6. La interlnea puede hacer que el aspecto del texto sea muy diferente.
El primer prrafo de la figura anterior tiene la interlnea predeterminada, lo que le da un aspecto un poco
apretado. El segundo prrafo tiene una interlnea mayor, con lo cual el texto tiene ms espacio para respirar
y es ms fcil de leer. No obstante, una interlnea excesiva tambin har que el texto sea difcil de leer, de
modo que hay que ir con cuidado.
11.3.4. Iniciales
Si definimos el pseudoelemento first-letter con algo similar a p:first-letter { }, podremos crear un estilo
diferente del del resto del texto para la primera letra. Estas primeras letras se conocen normalmente como
iniciales, que son unas letras que ocupan el espacio de unas 3 o 4 lneas. Podis ver la figura 7.
Figura 7. Una inicial tpica.
11.3.5. Versalitas
93/407
A menudo los tipos de letras incorporan una variante en versalitas, que son unas letras en maysculas pero
que tienen el tamao de la versin en minsculas. Las versalitas son tiles cuando queremos escribir algo en
maysculas pero no queremos destacarlo de una manera excesiva; se pueden utilizar, por ejemplo, para las
siglas. Aunque el sistema no tenga ninguna variante en versalitas del tipo de letra especificado, ello no ser
ningn problema; el navegador generar su versin propia utilizando las letras en maysculas y reduciendo
los caracteres finos aproximadamente 70% de su tamao. La figura 8 muestra una frase en versalitas.
Figura 8. Una frase en versalitas.
11.3.6. Puntuacin libre
Si una frase empieza con comillas, se puede utilizar un efecto tipogrfico muy efectivo. Se puede utilizar la
propiedad CSS text-indent combinada con un valor negativo (ya sea un valor en ems (-10 em), puntos (-10
pt.), pxeles (-10 px.) o porcentaje (-10%) para desplazar las comillas hacia la izquierda y mantener la lnea
vertical izquierda del bloque de texto, tal como se puede ver en la figura 9:
Figura 9. Puntuacin libre.
11.3.7. Puntuacin tipogrficamente correcta y otras entidades
Se puede dar un aspecto ms profesional y elegante al texto mediante la amplia variedad de entidades
tipogrficas HTML disponibles, como las comillas "altas" o "inglesas" y los guiones cortos y largos .
Muchos programas para la publicacin de textos en bloques y de procesamiento de textos pueden hacerlo
automticamente mientras se escribe. Estos programas convierten las comillas rectas en las comillas altas
tipogrficamente correctas y convierten las cadenas de guiones en guiones cortos o largos. La figura 10
muestra algunos ejemplos de puntuacin tipogrficamente correcta.
Figura 10. Puntuacin tipogrficamente correcta.
Una vez empecis a rellenar vuestro texto con signos de puntuacin inteligentes, ste adquirir un aspecto
mucho ms elegante y profesional, parecer ms el texto de una revista o de un libro que un texto en lnea.
Es necesario tener en cuenta, sin embargo, que este tipo de puntuacin podr tener un aspecto un poco
94/407
pixelado cuando se vea en pantallas un poco viejas o con el aliasing desactivado, por lo que hay que
utilizarla con precaucin.
Por otra parte, tenemos las entidades, que son cdigos HTML especiales que podis insertar en el texto para
generar caracteres especiales que normalmente no estn disponibles desde el teclado. La figura 11 contiene
varias entidades:
Figura 11. Entidades HTML.
Estas entidades se pueden introducir a mano, pero hay muchos gestores de contenido que permiten
convertirlas o insertarlas muy fcilmente.
11.3.8. Destacados
Un destacado es un fragmento corto del texto que aparece en algn otro punto de la pgina con caracteres
de un tamao mayor y algunas veces tambin con un tipo de letra diferente a fin de que el lector se fije en l.
Prcticamente, todas las revistas utilizan los destacados y son una manera muy efectiva de dividir el texto y
destacar las citas o las frases ms importantes. Adems, son muy fciles de hacer en la web slo con unas
cuantas etiquetas y definiendo el estilo. Slo hay que hacer que el texto tenga un tamao ms grande, quiz
definir un tipo de letra diferente, colocarlo de manera que el texto normal lo rodee y listos. Tambin hay
algunas soluciones ms avanzadas que utilizan JavaScript para seleccionar el texto y crear automticamente
un destacado. Estas soluciones provocan que no haya que escribir el mismo texto dos veces en la etiqueta.
Resumen
Ya hemos repasado todo lo que haba que decir sobre la tipografa y la tipografa en la web; esperamos que
ahora ya tengis claro que el texto en lnea no debe limitarse a Verdana, small, #333333, sino que existen un
montn de recursos y trucos tipogrficos que os pueden ayudar a hacer que el texto destaque por encima del
resto. La gente visita bsicamente los sitios web para leer lo que han escrito sus autores; por lo tanto, lo ms
sensato es hacer que la lectura sea tan agradable como sea posible.
Preguntas de repaso
1. Qu diferencia existe entre el interletraje y el espaciado entre letras? Cul est disponible para el
diseador de webs?
2. Cmo se puede evitar que haya "ros de espacio en blanco" en medio del texto?
3. Nombrad cuatro usos diferentes de las maysculas disponibles con CSS.
95/407
4. Cul es la longitud de lnea ideal para el cuerpo del texto, y qu factores le afectan?
5. Qu diferencia hay entre un tipo de letra con serif y un tipo de letra de palo seco? Dad un ejemplo de
cada uno.
6. Qu diferencia hay entre la puntuacin libre y la puntuacin normal?
7. Para insertar un smbolo de copyright dentro del texto se utiliza una entidad HTML. Navegad por Internet
e intentad encontrar todas las otras entidades HTML. Hay unas 250!
: :
96/407
Fundamentos de HTML - Conceptos bsicos de HTML
Fundamentos de HTML
Conceptos bsicos de HTML
Accesibilidad : : :
Mark Norman Francis. 8 de julio del 2008. Publicado en: en lnea, atributo, html, elemento, etiqueta.
En este apartado aprenderemos los conceptos bsicos de HTML: qu es, qu hace, un resumen de su
historia y qu estructura tiene un documento en HTML. Los apartados que encontraris despus de ste
explican cada una de las partes especficas de HTML con mucho ms detalle.
12.1. Qu es el HTML
12.2. Aspecto del HTML
12.3. La historia del HTML
12.4. La estructura de un documento HTML
12.5. La sintaxis de los elementos HTML
12.6. Elementos de bloque y en lnea
12.7. Referencias de carcter
Resum
12.1. Qu es el HTML
La mayora de las aplicaciones de escritorio que pueden leer y escribir ficheros utilizan un formato de fichero
especial. Por ejemplo, Microsoft Word entiende los ficheros .doc y Microsoft Excel entiende los .xls. Estos
ficheros contienen las instrucciones para reconstruir el documento cuando se vuelve a abrir y para saber cul
es su contenido, adems de los "metadatos" sobre el artculo, como por ejemplo el autor, la fecha de la
ltima modificacin del documento e incluso cosas como la lista de cambios realizados con el fin de poder
recuperar todas sus diferentes versiones.
El HTML (HyperText Markup Language) es un lenguaje para describir el
contenido de los documentos de la web. Utiliza una sintaxis especial que contiene
marcadores (conocidos como "elementos") que rodean al texto que hay dentro del
documento para indicar a los agentes de usuario cmo deben interpretar esta parte
del documento.
Utilizamos el trmino tcnico agentes de usuario en lugar de navegadores web. Un agente de usuario es
cualquier software que se utilice para acceder a las pginas web en nombre de los usuarios. Aqu debemos
hacer una distincin muy importante: todos los tipos de navegadores de escritorio (Internet Explorer, Opera,
Firefox, Safari, etc.) y los navegadores alternativos para otros dispositivos (como el canal de Internet de la
Wii y los navegadores para telfonos mviles como Opera Mini y WebKit para el iPhone) son agentes de
usuario, pero no todos los agentes de usuario son navegadores. Los programas automatizados que utilizan
Google y Yahoo! para indexar la web y que ejecutan en sus motores de bsqueda tambin son agentes de
usuario, pero no hay ningn ser humano que los controle directamente.
12.2. Aspecto del HTML
El HTML es slo una representacin textual del contenido y de su significado general. Por ejemplo, el cdigo
para el encabezamiento "Aspecto del HTML" es el siguiente:
<h2 id="htmllooks">Aspecto del HTML </h2>
La parte <h2> es un marcador (que se conoce como "etiqueta") que significa "lo que sigue se debe considerar
como un ttulo de segundo nivel". </h2> es una etiqueta que indica dnde acaba el ttulo de segundo nivel (y
se conoce como "etiqueta de cierre"). La etiqueta de apertura, la etiqueta de cierre y todo lo que hay entre
ellas se conoce como "elemento". Mucha gente utiliza los trminos elemento y etiqueta indistintamente, lo
cual no es del todo correcto. id="htmllooks" es un atributo; ya hablaremos de los atributos ms adelante.
97/407
La mayora de los navegadores incorporan una opcin "Cdigo fuente" o "Ver el cdigo fuente", normalmente
bajo el men "Ver". Si vuestro navegador incorpora esta opcin, seleccionadla y dedicad unos momentos a
mirar el cdigo fuente HTML de esta pgina.
12.3. La historia del HTML
Cuando Tim Berners-Lee invent la web, cre tanto el primer servidor web como la primera versin del
HTML.
Ved tambin
En el apartado 2 del mdulo "Introduccin al mundo de los estndares web" visteis resumidamente la aparicin
de la web moderna.
El HTML ha cambiado de una manera muy importante desde aquellos primeros das, pero una buena parte
del contenido del HTML actual ya se encontraba en esta primera documentacin y ms de la mitad de las
"etiquetas" descritas en el documento "Etiquetas HTML" original todava existen.
A medida que fue habiendo cada vez ms gente que escriba pginas web y alternativas al navegador
original, tambin se fueron aadiendo ms funciones a HTML. Muchas se adoptaron universalmente (como el
elemento img utilizado para insertar una imagen en un documento, que se utiliz por primera vez en NCSA
Mosaic). Otras etiquetas eran propias y slo se utilizaban en uno o dos navegadores. Cada vez haba una
necesidad mayor de estandarizacin a fin de que los autores de otros navegadores pudieran tener un
documento (conocido como "especificacin") que describiera de manera definitiva el aspecto de HTML para
as poder juzgar si se saltaban algunas partes de la implantacin de HTML.
El IETF (Internet Engineering Task Force, un organismo definidor de estndares que se preocupa por la
interoperabilidad a travs de Internet) public en el ao 1993 un borrador de propuesta de HTML. Esta
propuesta caduc en el ao 1994 sin haberse convertido en un estndar, pero provoc que el IETF creara un
grupo de trabajo para estudiar la estandarizacin del HTML.
En el ao 1995 se redact "HTML 2.0", que aprovechaba ideas del borrador de HTML original. Dave Raggett
escribi una propuesta alternativa conocida como HTML+; esta propuesta se utiliz como base para muchos
de los elementos nuevos implantados por los navegadores (como el mtodo para insertar imgenes en
documentos, que se utiliz por primera vez en NCSA Mosaic).
Ms tarde, en aquel mismo ao apareci un borrador de HTML 3.0, pero se dej de trabajar en esta versin
a causa de la falta de apoyo por parte de los creadores de navegadores en cuanto a la direccin que se
deba seguir. HTML 3.2 suprimi muchas de las funciones nuevas de la versin 3.0 y, en lugar de stas,
adopt muchas de las creaciones de los navegadores ms populares de entonces: Mosaic y Netscape
Navigator.
En el ao 1997, el W3C public HTML 4.0 como recomendacin que adoptaba ms extensiones especficas
de navegadores, pero que tambin intentaba racionalizar y perfeccionar HTML. Esto se hizo marcando varios
elementos como desaprobados (deprecated), que significa que los elementos estn obsoletos y que, aunque
todava aparecen en esta versin, se eliminarn en una revisin posterior. Esto se hizo para impulsar un uso
mejor y ms semntico de HTML en documentos.
Ved tambin
Podis ver la evolucin de HTML en el apartado 4 del mdulo "Introduccin al mundo de los estndares web".
En el ao 1999 se public HTML 4.01, con algunas erratas corregidas en el ao 2001. sta es la ltima
versin de HTML, aunque actualmente se est trabajando en la versin HTML 5.
En el ao 2000, el W3C tambin public la especificacin XHTML 1.0, que era HTML reestructurado para ser
un documento XML vlido.
12.4. La estructura de un documento HTML
El documento HTML vlido ms pequeo posible sera algo similar a esto:
98/407
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/
strict.dtd">
<html>
<head>
<title>Pgina d'exemple</title>
</head>
<body>
<h1>Hola a todos</h1>
</body>
</html>
El documento empieza con un elemento de tipo de documento o doctype. Este elemento describe el tipo de
HTML que se utiliza para que los agentes de usuario puedan determinar cmo se debe interpretar el
documento y saber si sigue las normas que dice que seguir.
Ved tambin
El doctype se describe con ms detalle en el apartado 14 de este mdulo.
A continuacin, se puede ver la etiqueta de apertura del elemento html. ste es un elemento que incluye a
todo el documento. La etiqueta html de cierre es lo ltimo que hay en cualquier documento HTML.
Dentro del elemento html est el elemento head. ste es un elemento que contiene informacin sobre el
documento (los metadatos). Este elemento se describe ms detalladamente en el apartado siguiente. En la
cabecera est el elemento title, que define el ttulo "Pgina de ejemplo" de la barra del men.
Despus del elemento head est el elemento body, que es el elemento que incluye el contenido real de la
pgina; en este caso slo hay un elemento de encabezamiento de nivel uno (h1), que contiene el texto "Hola
a todos". Y ste es todo nuestro documento.
Como se puede ver, a menudo los elementos contienen otros elementos. El cuerpo del documento incluir
inevitablemente muchos otros elementos. Las divisiones de pgina crean la estructura general del
documento y contendrn subdivisiones. stas contendrn ttulos, prrafos, listas, etc. Los prrafos pueden
contener elementos que creen enlaces hacia otros documentos, citas, nfasis, etc. A medida que vayis
avanzando en esta serie, iris sabiendo ms cosas sobre estos elementos.
12.5. La sintaxis de los elementos HTML
Como ya hemos visto, un elemento bsico en HTML consiste en dos marcadores al principio y al final de un
bloque de texto. Hay algunos elementos que no rodean al texto y, en la mayora de los casos, los elementos
pueden contener subelementos (como html que contiene head y body en el ejemplo anterior).
Los elementos tambin pueden tener atributos, que pueden modificar el comportamiento del elemento e
introducir un significado adicional.
<div id="masthead">
<h1>Conceptos bsicos del
<abbr title="lenguaje de marcado de hipertexto">HTML</abbr>
</h1>
</div>
En este ejemplo hay un elemento div (divisin de pgina, una manera de partir los documentos en bloques
lgicos) con un atributo id aadido que tiene el valor de masthead. El elemento div contiene un elemento h1
(encabezamiento de primer nivel o ms importante), que al mismo tiempo contiene texto. Parte de este texto
est incluido en un elemento abbr (que se utiliza para especificar la expansin de las siglas), que tiene el
atributo title, cuyo valor est definido como lenguaje de marcado de hipertexto (Hypertext Markup
Language).
Muchos de los atributos de HTML son comunes para todos los elementos, aunque algunos son especficos
de uno o varios elementos concretos. stos tienen siempre la forma keyword="value". El valor debe aparecer
siempre entre comillas simples o dobles (en algunas circunstancias se pueden omitir las comillas, pero no es
99/407
una prctica recomendable con respecto a la predictibilidad, la comprensin y la claridad; se deben poner
siempre los valores entre comillas).
La mayora de los atributos y sus valores posibles estn definidos por las especificaciones HTML; no es
posible crear atributos propios sin invalidar el HTML, ya que ello puede confundir a los agentes de usuario y
provocar problemas a la hora de interpretar correctamente la pgina web. Las nicas excepciones reales son
los atributos id y class; sus valores estn totalmente bajo vuestro control, ya que sirven para aadir
significado y semntica propias a vuestros documentos.
Un elemento que se encuentra dentro de otro elemento se conoce como "hijo" de este elemento. As pues,
en el ejemplo anterior, abbr es hijo del elemento h1, que al mismo tiempo es hijo de div. Y al revs, el
elemento div sera "padre" del elemento h1. Este concepto de padre/hijo es muy importante, ya que es la
base de CSS y se utiliza mucho en JavaScript.
12.6. Elementos de bloque y en lnea
En el HTML hay dos categoras generales de elementos que corresponden a dos tipos de contenidos y
estructuras que representan estos elementos: elementos de bloque y elementos en lnea.
Los elementos de bloque son elementos de nivel superior y normalmente definen
la estructura del documento. Puede ser til ver los elementos de bloque como
aquellos que empiezan en una lnea nueva y que representan una ruptura con lo
anterior.
Algunos elementos de bloque comunes incluyen los prrafos, las listas, los ttulos y las tablas.
Los elementos en lnea son aquellos que se encuentran incluidos en los
elementos estructurales de bloque y que incluyen slo partes pequeas del
contenido del documento, y no prrafos enteros ni grupos de contenido.
Un elemento en lnea no har que aparezca una lnea nueva en el documento; son los tipos de elementos
que aparecen dentro de un prrafo de texto. Algunos elementos en lnea comunes son los vnculos de
hipertexto, las palabras o frases destacadas o las citas breves.
12.7. Referencias de carcter
Un ltimo aspecto que hay que mencionar de un documento HTML es la manera de incluir caracteres
especiales. En el HTML, los caracteres <, > i & son especiales. Estos caracteres inician y finalizan partes del
documento HTML, y no representan los caracteres de "menor que", "mayor que" y "et".
Uno de los primeros errores que puede cometer un autor de webs es utilizar un carcter "et" en un
documento y entonces ver que aparece algo inesperado. Por ejemplo, si se escribe la frase "Imperial units
measure weight in stones&pounds" puede ser que en algunos navegadores se vea "...stoness".
Esto sucede porque en HTML la cadena literal "£" ses en realidad una referencia de carcter. Una
referencia de carcter es una manera de incluir en un documento un carcter que es difcil o imposible de
escribir desde un teclado, o en una codificacin de documento concreta.
El smbolo "et" (&) introduce la referencia, y el punto y coma (;) la acaba. No obstante, muchos agentes de
usuario pueden ser muy condescendientes a la hora de perdonar errores en el HTML, como por ejemplo el
de olvidar el punto y coma, e interpretarn "&pound" como una referencia de carcter. Las referencias
pueden ser nmeros (referencias numricas) o palabras abreviadas (referencias de entidades).
Un smbolo "et" se debe introducir en un documento como "&", que es la
referencia de entidad de carcter, o como "&" que es la referencia numrica.
En evolt.org encontraris una tabla completa de las referencias de caracteres.
100/407
Resumen
En este apartado hemos aprendido los conceptos bsicos del HTML, de dnde proviene y algunas ideas
sobre la estructura de un documento HTML. A continuacin, explicaremos la seccin <head> de un
documento HTML ms detalladamente y despus continuaremos explicando el contenido de <body>.
: :
101/407
Fundamentos de HTML - El elemento <head> del HTML
Fundamentos de HTML
El elemento <head> del HTML
Accesibilidad : : :
Christian Heilmann. 8 de julio del 2008. Publicado en: estilos, html, cabecera, externo, script
Este apartado trata una parte del documento HTML que no recibe la atencin que se merece: el marcado
que va dentro del elemento head. Cuando acabis este tutorial, habris aprendido las diferentes partes de
esta seccin y qu hacen, incluyendo el doctype, el elemento title, las palabras clave y la descripcin (todos
ellos gestionados con elementos meta). Tambin aprenderis los detalles de JavaScript y de los estilos CSS
(tanto internos como externos) y sabris qu no debis dejar dentro de head. Podis descargaros algunos
ficheros de demostracin, a los que haremos referencia a lo largo de este apartado; una vez hayis acabado
de trabajar, podis dedicaros a modificarlos como queris. Debis seguir este tutorial de principio a fin, ya
que va presentando una serie de buenas prcticas que se deben seguir cuando se trabaja con el head del
HTML. Aunque todas las partes son vlidas en s mismas, al final encontraris una conclusin sobre las
mejores prcticas que os har reconsiderar algunos de los primeros consejos.
13.1. Head? Qu es eso?
13.2. Definir el idioma principal del documento
13.3. Juzgar un documento por su ttulo
13.4. Aadir palabras clave y una descripcin
13.5. Y el aspecto? Aadir estilos
13.6. Aadir funciones dinmicas con JavaScript
13.7. Un momento! El uso de CSS integrado y JavaScript no es precisamente la mejor idea
Resumen
Preguntas de repaso
13.1. Head? Qu es eso?
En este mismo curso ya habis visto que un documento HTML vlido necesita un doctype, que es un
elemento que explica qu tipos de HTML hay que esperar e indica a los navegadores la manera de mostrar
correctamente el documento. Roger explica mucho ms detalladamente el elemento doctype en el apartado
siguiente, aqu nos limitaremos a decir que el doctype especifica que el documento necesita un elemento html
con unos elementos head y body en su interior. La mayor parte del tiempo la dedicaris al elemento body, ya
que es el que incorpora todo el contenido del documento. head tiene un papel aparentemente menos
importante, ya que, si dejamos de lado el elemento title, no hay nada de todo lo que ponis dentro de esta
seccin que sea visible para las personas que visitan vuestra web. Pero head es el lugar donde estn la
mayor parte de las instrucciones para el navegador y donde se guarda informacin adicional (la que se
conoce como informacin meta) sobre el documento.
13.2. Definir el idioma principal del documento
Una parte de la informacin sobre el documento se encuentra en el elemento padre de head, que es el
elemento html. Aqu se define el idioma natural principal del documento. Cuando hablamos de idioma natural
nos estamos refiriendo a un idioma humano, como por ejemplo el francs, el tailands o el ingls. Esto es de
gran ayuda para los lectores de pantalla, ya que, por ejemplo, la palabra six se pronuncia de una manera
muy diferente en francs y en ingls; tambin puede ser de mucha ayuda para los motores de bsqueda. Es
muy aconsejable definir el idioma principal de un documento, sobre todo si estis escribiendo pginas
pensadas para un pblico internacional, aunque hay muchas pginas que no lo hacen. Se debe definir de la
manera siguiente:
<html lang="en-GB">
...
</html>
102/407
Nota
Tened en cuenta que tambin podis definir el idioma de subsecciones de vuestro
documento utilizando el atributo lang en otros elementos, como por ejemplo <span
lang="fr">Bonjour</span>.
Los atributos que utilizis para definir el idioma dependen del DOCTYPE de vuestro documento. El W3C
dice:
"Para HTML hay que utilizar slo el atributo lang; para XHTML 1.0 servido como
text/html hay que utilizar los atributos lang y xml:lang; y para XHTML servido como
XML hay que utilizar slo el atributo xml:lang."
Los cdigos de idioma pueden ser cdigos de dos letras, como por ejemplo en para el ingls, o cdigos de
cuatro letras como en-US para el ingls americano u otros cdigos menos habituales. Los cdigos de dos
letras estn definidos en ISO 639-1, aunque las mejores prcticas actuales exigen el uso del registro de
subetiquetas de la IANA para las definiciones de los cdigos de idioma.
13.3. Juzgar un documento por su ttulo
Uno de los elementos ms importantes de head es title. El texto incluido en el title aparece en la mayora
de los agentes de usuario/navegadores dentro de la barra del ttulo de la aplicacin (la barra que hay en la
parte superior de la ventana del navegador). Es lo primero que vern los usuarios de la web cuando visiten
vuestro sitio; por lo tanto, es realmente importante. Adems, las tecnologas de asistencia como por ejemplo
los lectores de pantalla (software que lee en voz alta las pginas web para los usuarios con alguna
discapacidad visual) lo leen para dar una primera idea sobre lo que los visitantes pueden esperar del
documento, y tambin hay muchos motores de bsqueda que funcionan de un modo similar. As pues, si
utilizis un buen ttulo que sea legible para las personas y que contenga las palabras clave adecuadas,
tendris muchsimas ms posibilidades de que os encuentren en la Red. Ahora seleccionaremos el
documento HTML headexample.html y lo abriremos en el navegador.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/
html4/strict.dtd">
<html>
<head>
<title>I am a title example</title>
</head>
<body>
</body>
</html>
Veris que el texto de title aparece en la barra que hay sobre el navegador, tal como muestra la figura 1.
Figura 1. Mostrar un ttulo en un navegador.
Hay muchos tutoriales en la web que explican cmo escribir unos buenos ttulos de documentos; en la
103/407
mayora de los casos, las explicaciones estn relacionadas con la optimizacin para motores de bsqueda
(SEO, del ingls search engine optimization). Tampoco hay que exagerar e intentar engaar a los motores
de bsqueda para que muestren un nmero excesivamente alto de resultados de bsqueda. Debis escribir
un ttulo que d una informacin concisa sobre el documento. "Cra de perros: consejos sobre los
alsacianos" es mucho ms comprensible que "Perros, Alsacianos, Cra, Perro, Consejos, Gratuito, Mascota".
13.4. Aadir palabras clave y una descripcin
Lo siguiente que se debe hacer puede parecer de entrada superfluo, ya que las personas que visiten vuestro
sitio web no lo vern nunca: aadir una descripcin y palabras clave. La una y las otras se deben aadir a
head dentro de los elementos meta, tal como se puede ver en el ejemplo siguiente de la web de Yahoo!
Eurosport:
html4/strict.dtd">
<html>
<head>
<title>Yahoo! UK & Ireland EurosportSports News | Live Scores | Sport</title>
<meta name="description" content="Latest sports news and live scores
from Yahoo! Eurosport UK. Complete sport coverage with Football results,
Cricket scores, F1, Golf, Rugby, Tennis and more.">
<meta name="keywords" content="eurosport,sports,sport,sports news,
live scores,football,cricket,f1,golf,rugby,tennis,uk,yahoo">
</head>
<body>
</body>
</html>
Si abrs este documento en un navegador, no veris nada de todo eso, pero si ponis el documento en lnea
y los motores de bsqueda lo indexan, entonces el texto de esta descripcin aparecer bajo el vnculo en los
resultados del motor de bsqueda, tal como se puede ver en la figura 2.
Figura 2. Las descripciones aparecen en las pginas de resultados de los
motores de busca.
sta podra ser precisamente la informacin crucial que estaba buscando un posible visitante de vuestro sitio
web y el motivo para hacer clic en el enlace. Las descripciones tienen otro uso ms: algunos navegadores
muestran la descripcin como informacin adicional cuando se aade el documento a la lista de direcciones
de inters, tal como se puede ver en la figura 3:
104/407
Figura 3. En algunos navegadores se ven las descripciones cuando se aade el
documento a la lista de direcciones de inters.
Por lo tanto, aunque el hecho de aadir descripciones meta no tiene ninguna ventaja inmediata obvia, estas
descripciones tienen una funcin muy importante para el xito de vuestro documento. Eso mismo tambin
sirve, aunque en un grado menor, para las palabras clave aadidas.
A pesar de que muchos aos de abuso para falsear ndices han hecho que los motores de bsqueda hayan
dejado de tomarse seriamente las palabras clave, stas an pueden ser una buena herramienta que se
puede utilizar para indexar rpidamente muchos documentos sin necesidad de tener que examinar y analizar
su contenido. Podis utilizar las palabras clave meta, por ejemplo, en un sistema de gestin de contenido
escribiendo un script que las indexe y que haga que el motor de bsqueda funcione mucho ms
rpidamente. No cuesta nada ofrecer una manera de encontrar documentos sin necesidad de analizar su
contenido. Si aads algunas palabras clave en un elemento meta, tendris la opcin de realizar una
bsqueda inteligente y rpida de vuestros sitios web en caso de que en el futuro los lleguis a crear. Podis
imaginaros las palabras clave como unos pequeos puntos de libro que ponis dentro de un libro muy
grande para que os sea ms fcil encontrar rpidamente una seccin concreta sin tener que leer captulos
enteros.
13.5. Y el aspecto? Aadir estilos
El otro elemento que podis aadir al head de un documento son las normas para los estilos, que se definen
en hojas de estilo en cascada (CSS, del ingls cascading style sheets). Los podis integrar directamente en
head utilizando un elemento style, como por ejemplo (headinlinestyles.html):
html4/strict.dtd">
<html>
<head>
<title>Breeding DogsTips about Alsatians</title>
<meta name="description" content="How to breed Alsatians, tips on proper
breeding and information about common issues with this breed.">
<meta name="keywords" content="Dogs,Alsatian,Breeding,Dog,Tips,Free,Pet">
body{
background:#000;
color:#ccc;
font-family: helvetica, arial, sans-serif;
105/407
}
</style>
</head>
<body>
<p>Test!</p>
</body>
</html>
Si abrs el archivo en un navegador, aparecer la palabra Test! en gris sobre un fondo negro y el tipo de
letra ser Helvetica o Arial, segn lo que haya instalado en vuestro sistema. El elemento style tambin
puede contener otro atributo llamado media, que define qu tipo de soporte utilizar estos estilos; es decir,
queris utilizar estos estilos cuando veis el documento en una pantalla de ordenador, en un dispositivo
porttil o impreso? Podis elegir entre varios tipos de soportes; los ms tiles son:
pantalla (screen): para la visualizacin en pantalla.
impresin (print): defineix l'aspecte que tindr el document imprs.
aparatos porttiles (handheld): define el aspecto del documento en dispositivos mviles y otros
dispositivos porttiles.
presentaciones (projection): para presentaciones hechas en HTML, por ejemplo las aceptadas por
Opera Show.
Si, por ejemplo, queris invalidar los colores utilizados en la pantalla y utilizar un tamao mayor para el tipo
de letra con el fin de mejorar la pgina para la impresin, podis aadir otro bloque de estilos bajo el primero
con un atributo media de print, como podis ver a continuacin (headinlinestyles.html):
<style type="text/css" media="print">
body{
background:#fff;
color:#000;
font-size:300%;
}
</style>
Ahora, cuando imprimis esta pgina web, el navegador sabr que debe utilizar la hoja de estilos de
impresin y no los estilos de pantalla. Podis comprobarlo cargando headinlinestylesmedia.html y
seleccionando la previsualizacin de la impresin, como muestra la figura 4.
106/407
Figura 4. Una hoja de estilos de pantalla y de impresin.
13.6. Aadir funciones dinmicas con JavaScript
Otro elemento que podis aadir a head son scripts que ejecutar el navegador, y que por ello se conocen
como "scripts de cliente", escritos en JavaScript. Como ya hemos visto, JavaScript aade un comportamiento
dinmico al HTML esttico, como por ejemplo efectos de animacin, validacin de datos de formularios u
otras cosas que pasan cuando el usuario realiza determinadas acciones.
Podis aadir JavaScript a un documento utilizando el elemento script. Cuando un navegador encuentra un
elemento de este tipo, ignora todo lo dems y deja de analizar cualquier otra parte del documento mientras
intenta ejecutar el cdigo que hay en este elemento. Eso significa que si queris estar seguros de que
vuestro JavaScript estar disponible antes de que se cargue el documento principal, deberis aadirlo a head.
Por ejemplo, podis avisar a la gente que os visite de que un enlace concreto los conducir a otro servidor
con el siguiente script (headscript.html):
Ved tambin
Hemos visto el JavaScript en el apartado 4 del mdulo "Introduccin al mundo de los estndares web".
html4/strict.dtd">
<html>
<head>
<style type="text/css" media="screen">
body{
background:#000;
color:#ccc;
107/407
}
a {color:#fff}
</style>
body{
background:#fff;
color:#000;
font-size:300%;
}
</style>
<script>
function leave(){
return confirm("This will take you to another site,\n are you sure you
want to go?")
}
</script>
</head>
<body>
Test!
<a href="http://dailypuppy.com" onclick="return leave()">The Daily Puppy</a>
</body>
</html>
Si abrs este ejemplo en vuestro navegador web y hacis clic en el enlace, se os pedir que confirmis la
accin. ste es slo un ejemplo muy rpido de un script, pero queda muy lejos de las mejores prcticas
actuales. Los otros tutoriales que encontraris ms adelante en este mismo curso explican las mejores
prcticas de JavaScript y ensean las tcnicas de JavaScript con detalle, pero de momento no es necesario
que os preocupis de eso.
13.7. Un momento! El uso de CSS integrado y JavaScript no es
precisamente la mejor idea
Puede sonar muy fuerte, pero hay algo que debis recordar siempre que construyis sitios web: lo mejor que
podis hacer es reutilizar vuestro cdigo tanto como sea posible. Aadir estilos y scripts comunes a todo un
sitio en todas y cada uno de las pginas no tiene demasiado sentido; ms bien al contrario, ya que as es
ms difcil mantener un sitio completo y los documentos individuales quedan excesivamente cargados.
Es mucho mejor poner los estilos y scripts en archivos externos e importarlos hacia los archivos HTML
cuando sea necesario; de esta manera, cuando se deban hacer cambios slo habr que actualizarlos en un
lugar. Para vuestro JavaScript, eso es hace utilizando elementos script que no tienen ningn script en su
interior, sino un enlace a un archivo externo utilizando un atributo src, tal como podis ver en el cdigo
siguiente (externaljs.html):
html4/strict.dtd">
<html>
<head>
body{
background:#000;
color:#ccc;
}
a {color:#fff}
</style>
108/407
body{
background:#fff;
color:#000;
font-size:300%;
}
</style>
<script src="leaving.js"></script>
</head>
<body>
Test!
</body>
</html>
Con CSS no es tan fcil. El elemento style no tiene ningn atributo src, con lo cual deberis utilizar el
elemento link; ste tiene un atributo href que especifica un fichero CSS externo para importarlo y un atributo
media para definir si estos estilos se deben utilizar para pantalla, impresin, etc., de manera similar a lo que
hemos visto antes. Poniendo tanto CSS como JavaScript en sus ficheros independientes se puede reducir de
una manera muy importante la longitud del head, tal como se puede ver a continuacin (externalall.html):
html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="styles.css">
<link rel="stylesheet" type="text/css" media="print" href="printstyles.css">
<script src="leaving.js"></script>
</head>
<body>
Test!
</body>
</html>
Otras ventajas de mantener los estilos y scripts en sus ficheros independientes son:
Todo ser ms rpido y fcil para los visitantes de vuestro sitio web; aunque se descarguen algunos
archivos adicionales, la informacin sobre estilos y scripts no se repetir en cada uno de los archivos de
la pgina web (slo se descargar una vez, en los archivos de estilos y scripts independientes), con lo
cual, los archivos de pgina descargados sern ms pequeos. Adems, los archivos CSS y JavaScript
se guardarn en la memoria cach (quedarn guardados temporalmente en vuestro equipo local) y la
prxima vez que accedis al sitio web los archivos ya estarn en el ordenador, lo que significa que no
habr que volver a cargarlos.
La facilidad de mantenimiento. Los estilos y los scripts para todo el sitio web, que puede estar formado
por miles de documentos, se encuentran en un nico sitio; por lo tanto, si hay que cambiar algo, slo lo
tendris que hacer en un archivo y no en miles.
Resumen
Esto es todo. Habis aprendido las diferentes partes que puede haber en la seccin de cabecera de los
documentos HTML. stas son:
title, que introduce el documento.
Elementos meta, que contienen una descripcin del contenido de este documento y palabras clave que
109/407
permiten una indexacin ms sencilla del contenido.
Elementos link, que indican los archivos CSS externos.
Elementos script que indican los archivos JavaScript externos..
Si todo es correcto, conseguiris tener un documento rpido y fcil de encontrar y entender.
Preguntas de repaso
Como siempre, aqu tenis unas cuantas preguntas de repaso para ver si habis entendido todo lo que
hemos explicado:
1. Por qu es aconsejable aadir una descripcin en un elemento meta aunque no se pueda ver en la
pantalla?
2. Qu ventaja tiene aadir JavaScript al head de un documento y no al body?
3. Cmo podis aprovechar el almacenaje en memoria cach de vuestro navegador y qu debis hacer
para sacarle partido?
4. Como los navegadores dan mucha importancia al ttulo, no sera til llenarlo de palabras clave
relacionadas? Cules son las desventajas de esta prctica?
5. Como la pantalla del ttulo puede ser un poco aburrida, no sera bueno destacar en negrita algunas
palabras con un elemento b? Es posible hacerlo?
: :
110/407
Fundamentos de HTML - Elegir el doctype correcto para los documentos HTML
Fundamentos de HTML
Elegir el doctype correcto para los documentos HTML Accesibilidad : : :
14. Elegir el doctype correcto para los documentos HTML
Roger Johansson. 8 de julio del 2008. Publicado en: doctype, dtd, html, validacin, navegadores
El apartado anterior analizbamos la anatoma de la seccin head de un documento HTML y explicbamos
brevemente los diferentes elementos que puede haber en la cabecera y su funcin. En este apartado
estudiaremos el elemento doctype con mucho ms detalle: qu hace, cmo ayuda a validar el HTML, cmo
elegir un doctype para el documento y la declaracin XML, que no necesitaris casi nunca pero con la que
os encontraris algunas veces.
14.1. En primer lugar, el doctype
14.2. Cambios de doctype y modos de representacin
14.3. Validacin
14.4. Elegir un doctype
14.5. La declaracin XML
Resumen
Preguntas de repaso
14.1. En primer lugar, el doctype
Lo primero que debis comprobar que haya en cualquier documento HTML que creis es una declaracin
DTD. Si no habis odo nunca hablar de la declaracin DTD, no os preocupis. Para facilitar las cosas,
normalmente se conoce como "doctype", que es el nombre que utilizaremos en este apartado.
Es muy posible que os estis preguntando qu es una DTD o doctype. DTD son las siglas de document type
definition (definicin del tipo de documento), que, entre otras cosas, define los elementos y los atributos que
se pueden utilizar en una versin concreta del HTML. S, no es ningn error, actualmente se utilizan en la
Red diferentes versiones del HTML, pero esto no os debe preocupar en absoluto, ya que slo os deberis
interesar por una.
El doctype se utiliza para dos cosas en diferentes tipos de software:
1. Los navegadores web lo utilizan para determinar el modo de representacin que deben utilizar (ms
adelante ya hablaremos de los modos de representacin).
2. Los validadores de etiquetado miran el doctype para determinar las normas con las que deben
comprobar el documento (ms adelante tambin hablaremos de ello).
Las dos os afectarn, pero de maneras diferentes que ya explicaremos ms adelante en este mismo
apartado.
Aqu tenis un ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/
html4/strict.dtd">
Es posible que no le encontris ningn sentido, por lo que ahora explicaremos de una manera simplificada
su construccin. Para una explicacin con mucho ms detalle de qu significa cada uno de los caracteres,
podis ver el artculo !DOCTYPE.
Las partes ms importantes de doctype son las dos cadenas delimitadas por comillas. "-//W3C//DTD HTML
4.01//EN" indica que ste es un documento DTD publicado por el W3C, que la DTD describe la versin 4.01
del HTML y que el idioma utilizado en la DTD es el ingls.
111/407
La segunda cadena, "http://www.w3.org/TR/html4/strict.dtd", es una URL que indica el documento DTD
utilizado para este doctype.
Aunque un doctype puede tener un aspecto un tanto extrao, las especificaciones HTML y XHTML lo exigen.
Si no inclus ninguno, aparecer un error de validacin cuando comprobis la sintaxis de vuestro documento
con el validador de etiquetado del W3C u otras herramientas que comprueben los documentos HTML por si
contienen errores. Algunos navegadores incluso contienen esta funcin por defecto, mientras que otros
pueden incluirla si se instala una extensin.
14.2. Cambios de doctype y modos de representacin
Si no proporcionis ningn doctype, los navegadores seguirn gestionando y mostrando el documento de
todos modos; deben intentar mostrar todo tipo de cosas extraas que se pueden encontrar en la Red, por lo
que no pueden ser muy quisquillosos. No obstante, sin un doctype los resultados no siempre sern los
esperados a causa de una cosa conocida como "doctype sniffing" o "doctype switching".
La mayora de los navegadores del siglo XXI miran el doctype de todos los documentos HTML que
encuentran y lo utilizan para decidir si el autor de los documentos se ha preocupado de escribir
adecuadamente el HTML y el CSS segn los estndares de la Red.
Si encuentran un doctype que indica que el documento est bien codificado, utilizan un modo conocido como
"modo de estndares" para maquetar la pgina. En el modo de estndares, los navegadores intentan
normalmente mostrar la pgina segn las especificaciones de CSS; se fan de que la persona que ha creado
el documento saba qu estaba haciendo.
Por otra parte, si encuentran un doctype anticuado o incompleto, utilizan el modo Quirks (peculiaridades), que
es ms compatible con las prcticas y los navegadores antiguos. El modo Quirks presupone que el
documento es antiguo o que no se ha creado teniendo en cuenta los estndares de la web; la pgina web se
seguir mostrando, pero se necesitar ms potencia de procesamiento para hacerlo y es muy probable que
el resultado sea algo extrao, nada parecido a lo que se esperaba.
Las diferencias estn bsicamente relacionadas con la manera de mostrar el CSS y slo en unos pocos
casos con la manera de tratar el HTML en s. Como diseadores o desarrolladores de webs, obtendris los
mejores resultados asegurndoos de que todos los navegadores utilicen su modo de representacin de
estndares, y por ello deberais ceiros a los estndares de la web y utilizar un doctype adecuado.
14.3. Validacin
Como ya hemos comentado, los validadores tambin utilizan el doctype; ya lo comentaremos con ms detalle
ms adelante en esta serie de apartados. De momento, todo lo que debis saber es que se utiliza un
validador para comprobar que la sintaxis de vuestros documentos HTML sea correcta y que no contenga
ningn error. Los programas validadores miran el doctype utilizado para determinar las normas que se deben
utilizar. Es algo similar a indicar a un corrector ortogrfico el idioma en el que est escrito un documento. Si
no lo sabe, no sabr qu normas ortogrficas y de gramtica debe utilizar.
14.4. Elegir un doctype
As pues, ahora que ya sabis que hay que introducir un doctype y para qu se utiliza, cmo podis saber
cul hay que utilizar? De hecho, no hay uno, sino que hay muchos. Incluso podis crear uno propio, siempre
y cuando tengis el nivel de conocimientos necesario para hacerlo. Aqu, sin embargo, no hablaremos de
muchos doctypes diferentes. Haremos las cosas fciles y slo mencionaremos dos.
Si vuestro documento es HTML, utilizad el siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/
html4/strict.dtd">
Si vuestro documento es XHTML, utilizad el siguiente:
112/407
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">
Nota
El XHTML "real" se debe comunicar al navegador como XML, pero los detalles sobre
cmo y cundo hacerlo, y las implicaciones que tiene, quedan fuera del alcance de
este apartado en concreto.
Estos dos doctypes garantizarn que los navegadores utilicen su modo de estndares a la hora de trabajar
con vuestro documento. El efecto ms evidente que tendr sobre vuestro trabajo es que obtendris unos
resultados ms uniformes a la hora de disear el documento con CSS. Para ver algunos de los otros
doctypes que podis utilizar, el W3C ha publicado una lista de DTD recomendadas para utilizarlas en vuestro
documento web.
Es posible que hayis observado que los dos doctypes que hemos mencionado se llaman "Strict". Aunque
pueda parecer un poco extrao, no lo es en absoluto.
Tanto el HTML como el XHTML pueden ser estrictos o transicionales. Estrictos, en este caso, significa que
los doctypes permiten un etiquetado menos presentacional que los doctypes transicionales. El etiquetado
presentacional que no est permitido no debera aparecer de ninguna manera, ya que debis utilizar el
HTML para definir la estructura y el significado de vuestros documentos, y el CSS para determinar el modo
como se presentarn. El uso de un doctype estricto os ayudar, ya que el validador os avisar de cualquier
elemento o atributo presentacional que se pueda haber escurrido dentro del cdigo.
14.5. La declaracin XML
Ya hemos sealado antes que el doctype debe ser la primera cosa que haya dentro de vuestros documentos
HTML. Pues bien, eso es en realidad una versin simplificada de la verdad. Tambin hay que tener en
cuenta la declaracin XML.
Es posible que en algunos documentos XHTML hayis visto un fragmento de cdigo con un aspecto similar
al siguiente antes del doctype:
<?xml version="1.0" encoding="UTF-8"?>
Esto se conoce como declaracin XML, y cuando est presente debe estar insertada antes del doctype.
La versin 6 de Internet Explorer tiene un problema con esta declaracin: hace que pase al modo Quirks y,
tal como ya hemos explicado anteriormente, no es muy probable que queris que eso suceda.
Por suerte, la declaracin XML no es necesaria si no es que enviis vuestros documentos XHTML como XML
a los navegadores (podis ver la nota al margen sobre el XHTML) y utilizis una codificacin de caracteres
diferente de UTF-8 y vuestro servidor no enva un encabezamiento HTTP que determina la codificacin de
caracteres.
Las probabilidades de que sucedan todas estas cosas al mismo tiempo son muy pequeas, por lo que la
manera ms sencilla de solucionar el problema de Internet Explorer es sencillamente omitir la declaracin
XML. Pero no os olvidis del doctype!
Resumen
Hay que incluir siempre uno de los doctypes mencionados como primer elemento dentro de todos vuestros
documentos HTML. Esto garantizar que los validadores sepan la versin del HTML que utilizis y as
podrn informar correctamente de cualquier error que hayis cometido. Tambin garantizar que todos los
navegadores ms nuevos utilizarn su modo de estndares, con lo que obtendris unos resultados ms
uniformes cuando diseis el documento con el CSS.
Preguntas de repaso
113/407
Despus de leer este apartado, deberais poder responder a las siguientes preguntas:
1. Cules son los dos objetivos principales de incluir un doctype en los documentos HTML?
2. Cules son las ventajas de utilizar un doctype estricto en lugar de uno transicional?
3. Por qu es problemtica la declaracin XML?
4. Un doctype que no hemos mencionado en este apartado es el de definicin de marcos; intentad
descubrir qu hace y por qu no se debe utilizar.
"Don't forget to add a doctype"
"Recommended DTDs to use in your Web document"
"Fix Your Site With the Right DOCTYPE!"
"Activating Browser Modes with Doctype"
"The Opera 9 DOCTYPE switches"
"Quirks mode and strict mode"
"Transitional vs. StrictMarkup"
: :
114/407
El texto central de HTML - Etiquetar contenido textual en HTML
Etiquetar contenido textual en HTML
Accesibilidad : : :
Mark Norman Francis. 8 de julio del 2008. Publicado en: prrafo, texto, nfasis, cita, pre
En este apartado explicaremos los conceptos bsicos del uso de HTML para describir el significado del
contenido dentro del cuerpo de vuestro documento.
Veremos elementos estructurales generales como los ttulos y los prrafos y la incrustacin de citas y cdigo.
Despus tambin veremos el contenido en lnea, como por ejemplo las citas cortas y el nfasis, y
acabaremos con un anlisis rpido del contenido presentacional anticuado.
Nota
Despus de cada ejemplo de cdigo hay un enlace "Ved ejemplos reales" que os
llevar a la visualizacin del resultado de este cdigo fuente en un archivo diferente;
de esta manera, podris ver ejemplos reales de cmo se ve realmente este cdigo
fuente en el navegador, aparte del cdigo en s.
15.1. El espacio: la ltima frontera
15.2. Elementos de bloque
15.2.1. Ttulos de seccin de pgina
15.2.2. Prrafos genricos
15.2.3. Citar otras fuentes
15.2.4. Texto preformateado
15.3. Elementos en lnea
15.3.1. Citas breves
15.3.2. nfasis
15.3.3. Texto en cursiva
15.4. Elementos presentacionales: no utilizar nunca
Resumen
15.1. El espacio: la ltima frontera
Una cuestin muy importante que queremos tratar antes de empezar a hablar sobre el texto es la del
espacio, y concretamente la del espacio entre palabras. Cuando se escribe el HTML, el documento fuente
contendr lo que se conoce como "espacios en blanco", que son los caracteres del archivo que sirven para
separar el texto. El carcter de espacio ms habitual es el que se obtiene al pulsar la barra espaciadora,
pero hay otros, como el tabulador y la marca entre dos lneas independientes de un documento (conocido
como retorno o lnea nueva).
En el HTML, cuando un carcter de stos aparece varias veces seguidas, se
considera (casi) siempre como un nico carcter de espacio.
Por ejemplo, un navegador interpretara lo siguiente:
<h3>In the
beginning</h3>
Ved ejemplos reales en: "Whitespace example"
como equivalente a:
<h3>In the beginning</h3>
El nico caso en el que esto no es as es el elemento pre, del cual hablaremos con detalle ms adelante en
115/407
este mismo apartado.
Esto puede provocar algunas confusiones para los autores que escriben por primera vez un documento en
HTML y que intentan introducir espacios adicionales dentro del texto para conseguir el sangrado deseado,
dejar ms espacio despus de un punto entre frases o aadir ms espacio vertical entre prrafos. El diseo
visual de los documentos no se debe definir en el cdigo fuente HTML, sino que se debe hacer mediante las
hojas de estilos, de las que hablaremos ms adelante en esta serie de apartados.
15.2. Elementos de bloque
En este subapartado explicaremos la sintaxis y el uso de los elementos de bloque ms frecuentes utilizados
para formatear texto.
15.2.1. Ttulos de seccin de pgina
Una vez que hayis dividido la pgina en secciones lgicas, cada una de estas secciones debera ir
introducida por un ttulo adecuado. De ello se habla con ms detalle en el apartado Qu necesita una buena
pgina web.
Ved tambin
Podis ver el apartado 7 del mdulo "Conceptos de diseo web".
El HTML define seis niveles de ttulos: h1, h2, h3, h4, h5 i h6 (desde el ms
importante hasta el menos importante). Hablando en general, h1 sera el ttulo
principal de toda la pgina que introducira el tema. h2 se utilizara para dividir la
pgina en secciones, h3 en subsecciones y as sucesivamente.
Es muy importante utilizar los niveles de ttulos para describir el documento en referencia a las secciones,
subsecciones, subsubsecciones, etc., ya que esto hace que el documento sea ms comprensible para los
lectores de pantalla y para los procesos automatizados (como los robots de indexacin de Google).
Un buen ejemplo de una estructura de ttulos, utilizando este documento como plantilla, podra ser el
siguiente:
<h1>Etiquetar contenido textual en HTML</h1>
<h2>Introduccin</h2>
<h2>El espacio: la ltima frontera</h2>
<h2>Elementos de bloque</h2>
<h3>Ttulos de seccin de pgina</h3>
<h3>Prrafos genricos</h3>
<h3>Citar otras fuentes</h3>
<h3>Texto preformateado</h3>
<h2>Elementos en lnea</h2>
Ved ejemplos reales en: "Headings example"
[...y as sucesivamente...]
15.2.2. Prrafos genricos
El prrafo es el componente bsico de la mayora de los documentos. En HTML, un
prrafo se representa con el elemento p, que no tiene ningn atributo especial.
Por ejemplo:
<p>This is a very short paragraph. It only has two sentences.</p>
Ved ejemplos reales en: "Paragraph example"
En muchos artculos y libros, un prrafo puede contener slo una frase. Aunque el significado (en cuanto a la
116/407
prosa escrita) de la palabra prrafo est bastante claro, en la web hay reas de texto mucho ms cortas que
a menudo aparecen entre elementos de prrafos por el simple hecho de que el autor cree que es ms
"semntico" que utilizar un elemento div (hablaremos de ello en otro apartado titulado "Contenedores
genricos").
Ejemplo
Un prrafo es un conjunto de una o ms frases, igual que en los peridicos y libros. En
la web es una buena idea utilizar el elemento de prrafo para estos conjuntos de
frases y no para cualquier parte aleatoria de texto de la pgina. Si son slo unas
cuantas palabras y no una frase propiamente dicha, entonces quiz sera mejor no
etiquetarlo como un prrafo.
15.2.3. Citar otras fuentes
A menudo, los artculos, los apuntes de bloques y los documentos de referencia
citan total o parcialmente algn otro documento. En el HTML, estas citas se marcan
con el elemento blockquote para citas largas, como frases enteras, prrafos, listas o
similares.
Un elemento blockquote no puede contener texto, sino que debe tener en su interior otro elemento de bloque.
Deberais utilizar el mismo elemento de bloque que en el documento original. Si citis un prrafo de texto,
utilizad un prrafo; cuando citis una lista, utilizad los elementos para listas; y as sucesivamente.
Si la cita es de otra pgina web, podis indicarlo utilizando el atributo cite.
Como en el ejemplo siguiente:
<p>HTML 4.01 is the only version of HTML that you should use
when creating a new web page, as, according to the
specification:</p>
<blockquote cite="http://www.w3.org/TR/html401/">
<p>This document obsoletes previous versions of HTML 4.0,
although W3C will continue to make those specifications and
their DTDs available at the W3C Web site.</p>
</blockquote>
Ved ejemplos reales en: "Quoting other sources example"
El atributo cite no es necesario en el caso de que la cita se tome de una novela, una revista o de alguna
otra forma de contenido fuera de lnea.
15.2.4. Texto preformateado
Cualquier texto en el que el formato y el espacio en blanco (podis ver ms arriba)
sean importantes se debera etiquetar con el elementopre.
En la mayora de los navegadores web, el texto marcado como preformateado se mostrar al usuario tal
como aparezca en el cdigo fuente, algunas veces utilizando un tipo de letra de ancho fijo, lo cual da al texto
el aspecto de haber sido escrito con una mquina de escribir. Este uso de tipos de letras de ancho fijo es
uno de los primeros recursos que utilizaron los programadores para el texto preformateado.
En ste podis ver un fragmento de cdigo escrito en el lenguaje de programacin Perl:
<pre><code class="language-perl">
# read in the named file in its entirety
sub slurp {
my $filename = shift;
my $file = new FileHandle $filename;
if ( defined $file ) {
117/407
local $/;
return <$file>;
}
return undef;
};
</code></pre>
Ved ejemplos reales en: "Preformatted example"
El uso de code que se hace en este ejemplo se explicar en el apartado sobre los elementos semnticos
menos conocidos, que encontraremos ms adelante en este mismo mdulo.
Ved tambin
Podis ver el apartado 21 de este mdulo.
15.3. Elementos en lnea
En este subapartado explicaremos la sintaxis y el uso de los elementos en lnea ms frecuentes utilizados
para formatear texto.
Ved tambin
Podis ver el apartado 12 del mdulo "Fundamentos de HTML".
15.3.1. Citas breves
Las citas breves que se utilizan en una frase o prrafo normal se ponen en el
elemento q. Igual que el elemento blockquote, ste puede contener un atributo cite,
que indica la pgina de Internet en la que se puede encontrar la cita.
Una cita breve aparece normalmente entre comillas. Segn la especificacin HTML, estas citas las debe
insertar el agente usuario para poder imbricarlas correctamente y que sepan el idioma que se utiliza en el
documento. Se puede utilizar CSS para controlar las comillas utilizadas; este aspecto se tratar en el
apartado sobre estilos de texto.
Ved tambin
Podis ver el apartado 29 del mdulo "CSS".
Un ejemplo de q en accin:
<p>This did not end well for me. Oh well,
<q lang="fr">c'est la vie</q> as the French say.</p>
Ved ejemplos reales en: "Inline quote example"
15.3.2. nfasis
El HTML contiene dos mtodos para indicar que el texto de su interior debe aparecer enfatizado delante del
usuario, como por ejemplo los mensajes de error, las advertencias o las notas.
En los navegadores visuales esto significa normalmente la aplicacin de un color o
un tipo de letra diferente o la visualizacin del texto en negrita o cursiva. Para los
usuarios de lectores de pantalla, el resultado puede ser una voz diferente o algn
otro efecto acstico. Para presentar texto con nfasis hay que utilizar el elemento
em.
Como en el ejemplo siguiente:
<p><em>Please note:</em> the kettle is to be unplugged at night.</p>
118/407
Ved ejemplos reales en: "Emphasis example"
Si hay que enfatizar toda una frase pero una parte concreta de sta se debe enfatizar de una manera an
ms importante, se debe utilizar el elemento strong para indicar un nfasis ms fuerte de lo normal, como en
el ejemplo siguiente:
<p><em>Please note: the kettle <strong>must</strong> be unplugged every evening,
otherwise it will explode - <strong>killing us all</strong></em>.</p>
Ved ejemplos reales en: "Emphasis and strong example"
15.3.3. Texto en cursiva
Normalmente se cree que cursiva no describe el significado y que, por lo tanto, el elemento i no se debe
utilizar (igual que muchos otros elementos presentacionales descritos en el subapartado siguiente).
Hay un par de casos en los que es correcto describir el contenido como cursiva. Ya
se ha comentado que algunos conceptos se describen mejor como "cursiva" en
lugar de tener que crear algunos elementos muy especficos y no utilizados. stos
incluyen cosas como por ejemplo los nombres de barcos, los ttulos de series de
televisin, pelculas y libros, algunos trminos tcnicos y otras designaciones
taxonmicas.
La razn es que la cursiva indica que el texto es especial y el contexto indica en qu sentido lo es. De hecho,
esto ya queda reflejado en el borrador de la especificacin de HTML 5:
"El elemento i representa un texto en una voz o un modo alternativo, o que de alguna
manera queda fuera de la prosa normal. [...] El elemento i se debe utilizar como ltimo
recurso cuando no hay ningn otro elemento que sea ms apropiado".
Como el CSS puede modificar el elemento i a fin de que no sea cursiva, en este contexto hay que interpretar
el significado de "cursiva" fundamentalmente como "algo un tanto diferente". Yo no lo considero correcto,
personalmente hablando, pero hay precedentes suficientes para utilizarlo de esta manera.
15.4. Elementos presentacionales: no utilizar nunca
La especificacin de HTML incluye varios elementos que se describen de manera general como
"presentacionales", ya que slo especifican qu aspecto debe tener el texto que contienen, pero no qu
significan
La especificacin ha etiquetado algunos de estos elementos como desaprobados. Eso significa que han sido
sustituidos por un mtodo ms nuevo que permite conseguir los mismos resultados.
Aqu los describiremos brevemente, pero hay que tener en cuenta que esta explicacin tiene casi
exclusivamente un inters puramente histrico; estos elementos no se deben utilizar nunca en ninguna
pgina web moderna. El efecto de todos estos elementos se debe conseguir de alguna otra manera, que se
describir en otros dos apartados: "Estilos de texto con el CSS" y "Elementos semnticos menos conocidos".
Ved tambin
Podis ver el apartado 29 del mdulo "CSS" y el apartado 21 de este mdulo.
font face="..." size="...". El navegador mostrar el texto en estos elementos utilizando un tipo de
letra diferente del tipo por defecto; los tipos de letra, sin embargo, se deben definir con CSS.
b. El texto aparece en negrita; casi siempre significa que el texto tiene algn tipo de nfasis y, por lo
tanto, se debera utilizar em o strong, tal como se ha explicado antes.
s y strike. El texto aparece rayado con una lnea que lo atraviesa; si es slo un efecto presentacional,
este efecto se debera conseguir con CSS. Adems, si el texto se quiere marcar como suprimido o no
deseado, se debera etiquetar con el elemento del que se describe ms adelante.
119/407
u. El texto se subraya; es casi siempre un efecto visual y se debera conseguir con el CSS.
tt. El texto se presenta en un tipo de letra de "teletipo" o de ancho fijo; este efecto se debera conseguir
con el CSS o con algn elemento semntico ms apropiado, como por ejemplo pre, tal como se ha visto
anteriormente.
big y small. Se ajusta el tamao del texto; se debera conseguir con el CSS.
Resumen
En este apartado hemos hablado de algunos de los elementos ms comunes que se utilizan para etiquetar
contenido textual. En el siguiente apartado hablaremos de otro tipo de contenido: las listas.
: :
120/407
El texto central de HTML - Listas HTML
Listas HTML
Accesibilidad : : :
16. Listas HTML
Ben Buchanan. 8 de julio del 2008. Publicado en: definicin, ordenado, desordenado, xhtml, html
Las listas se utilizan para agrupar datos relacionados para que queden claramente asociadas entre ellas y
sean fciles de leer. En el desarrollo de las webs modernas, las listas son elementos muy habituales que se
utilizan tanto para la navegacin, como para el contenido general.
Las listas son muy adecuadas desde un punto de vista estructural, ya que ayudan a crear un documento bien
estructurado, ms accesible y fcil de mantener. Tambin son tiles por una razn puramente prctica:
aportan elementos adicionales a los que adjuntar estilos CSS y disponer as de una gran variedad de estilos
(ms adelante en este curso ya hablaremos del CSS; para saber cules son los apartados sobre el CSS que
hay disponibles, podis consultar el ndice de contenidos).
En este apartado explicaremos los diferentes tipos de listas disponibles en HTML, cundo y cmo se deben
utilizar y cmo aplicar algunos estilos bsicos. El contenido es el siguiente (Mira! Es una lista!):
16.1. Los tres tipos de listas
16.1.1. Listas no ordenadas
16.1.2. Etiquetado de listas no ordenadas
16.1.3. Listas ordenadas
16.1.4. Etiquetado de listas ordenadas
16.1.5. Empezar listas ordenadas con un nmero diferente de 1
16.1.6. Listas de definiciones
16.2. Elegir entre tipos de listas
16.3. La diferencia entre listas HTML y texto
16.4. Anidar listas
16.5. Ejemplo paso a paso
16.5.1. Etiquetado de la pgina principal
16.5.2. Aadir algunos estilos
16.5.3. La pgina de la receta
16.5.4. Etiquetado de la pgina de la receta
16.5.5. Estilos de la pgina de la receta
Resumen
Preguntas de repaso
16.1. Los tres tipos de listas
En el HTML hay tres tipos de listas:
lista no ordenada: esse utiliza para agrupar elementos relacionados sin ningn orden en concreto.
lista ordenada: se utiliza para agrupar elementos relacionados en un orden concreto.
lista de definiciones: se utiliza para mostrar parejas de nombres y valores, como por ejemplo trminos
y sus definiciones u horas y actos.
Cada una de estas listas tiene una finalidad y un significado especficos y no son intercambiables.
16.1.1. Listas no ordenadas
Las listas no ordenadas, o listas de picos, se utilizan cuando tenemos una serie de
elementos que se pueden colocar en cualquier orden.
La lista de la compra
121/407
Un ejemplo de esto podra ser una lista de la compra:
leche
pan
mantequilla
caf
Todos estos elementos forman parte de una lista, pero se pueden poner en cualquier
orden sin que la lista pierda su sentido:
pan
caf
leche
mantequilla
Se puede utilizar CSS para cambiar el pico a uno de los distintos estilos por defecto, puede usarse una
imagen propia o incluso se pueden hacer listas sin picos; ms adelante, en este mismo apartado, veremos
cmo hacerlo y en otros apartados sobre el CSS lo explicaremos con ms detalle. Si lo encontris un poco
confuso, no es necesario que os preocupis por el CSS ahora; ya lo aclararemos todo ms adelante.
16.1.2. Etiquetado de listas no ordenadas
Las listas no ordenadas utilizan las etiquetas <ul></ul> alrededor de mltiples
grupos de <li></li>.
<ul>
<li>pan</li>
<li>caf</li>
<li>leche</li>
<li>mantequilla</li>
</ul>
16.1.3. Listas ordenadas
Las listas ordenadas, o listas numeradas, se utilizan cuando tenemos una serie de
elementos que se deben colocar en un orden concreto.
Un ejemplo de esto podran ser las instrucciones de cocina, que se deben seguir por orden para que la
receta salga bien:
1. Tened todos los ingredientes a mano
2. Mezclad todos los ingredientes
3. Poned la mezcla en una bandeja para el horno
4. Dejadlo cocer durante una hora
5. Sacadlo del horno
6. Dejadlo reposar durante diez minutos
7. Servidlo
Si los elementos de la lista se desordenan, la informacin no tendr ningn sentido:
122/407
4. Servidlo
Las listas ordenadas se pueden mostrar con varios sistemas de numeracin o alfabticos; es decir, letras o
nmeros. El sistema por defecto de la mayora de los navegadores son los nmeros decimales, pero hay
ms opciones:
Letras
Letras ASCII en minsculas (a, b, c...)
Letras ASCII en maysculas (A, B, C...)
Letras griegas clsicas en minsculas: (, , ...)
Nmeros
Nmeros decimales (1, 2, 3...)
Nmeros decimales con ceros iniciales (01, 02, 03...)
Nmeros romanos en minsculas (i, ii, iii...)
Nmeros romanos en maysculas (I, II, III ...)
Numeracin georgiana tradicional (an, ban, gan...)
Numeracin armenia tradicional (mek, yerku, yerek...)
Aqu tambin podis utilizar el CSS para cambiar el estilo de vuestras listas.
16.1.4. Etiquetado de listas ordenadas
Las listas ordenadas utilizan las etiquetas <ol></ol> alrededor de mltiples grupos
de <li></li>.
<ol>
<li>Tened todos los ingredientes a mano</li>
<li>Mezclad todos los ingredientes</li>
<li>Poned la mezcla en una bandeja para el horno</li>
<li>Dejadlo cocer durante una hora</li>
<li>Sacadlo del horno</li>
<li>Dejadlo reposar durante diez minutos</li>
<li>Servidlo</li>
</ol>
16.1.5. Empezar listas ordenadas con un nmero diferente de 1
Es posible hacer que una lista ordenada empiece con un nmero diferente del 1 (o
i, I, etc.). Esto se consigue con el atributo start, que define un valor numrico
incluso aunque utilicis el CSS para cambiar los contadores de la lista y hacer que
sean caracteres alfabticos o nmeros romanos con la propiedad list-style-type.
Esto puede ser til si tenis una nica lista de puntos pero queris romperla con
una nota u otro tipo de informacin relacionada.
Lo podramos hacer, por ejemplo, con la lista anterior:
<ol>
<li>Tened todos los ingredientes a mano</li>
<li>Mezclad todos los ingredientes</li>
123/407
<li>Poned la mezcla en una bandeja para el horno</li>
</ol>
<p class="note">Antes de poner la mezcla en la bandeja, precalentad
el horno a 180 grados centgrados para tenerlo a punto para el siguiente paso</p>
<ol start="4">
<li>Dejadlo cocer durante una hora</li>
<li>Sacadlo del horno</li>
<li>Dejadlo reposar durante diez minutos</li>
<li>Servidlo</li>
</ol>
Con ello se obtiene el resultado siguiente:
Antes de poner la mezcla en la bandeja, precalentad el horno a 180 grados centgrados para tenerlo a
punto para el siguiente paso
7. Servidlo
Tened en cuenta que este atributo ha sido desaprobado en la ltima versin de las especificaciones de
HTML, lo que significa que vuestras pginas no validarn si utilizan doctypes estrictos. Esto puede parecer
muy extrao, ya que este atributo es muy til y no hay ninguno equivalente en CSS. Eso demuestra que la
validacin del HTML es uno de los objetivos ideales que hay que perseguir, pero que no siempre debe ser el
objetivo nico. Adems, tenemos otro recurso a nuestro alcance: el atributo start no est desaprobado en
las especificaciones HTML5 (les diferencias entre HTML5 y HTML4 da fe de ello). Si queris utilizar esta
funcin en una pgina HTML4 estricta y es absolutamente necesario validarla, podis hacerlo utilizando los
contadores de CSS en lugar de este atributo.
16.1.6. Listas de definiciones
Las listas de definiciones asocian elementos concretos y sus definiciones en un formato de lista. Por ejemplo,
si queris dar una definicin de los elementos de vuestra lista de la compra, podis hacerlo de la siguiente
manera:
leche
Producto lcteo lquido de color blanco
pan
Alimento cocinado en el horno a base de harina.
mantequilla
Producto lcteo slido de color amarillo
caf
Semillas de los frutos de algunos rboles del caf
Cada definiciones y trmino es un grupo de definicin (o grupo nombre-valor). Podis tener tantos grupos de
definicin como queris, pero debe haber como mnimo un trmino y una definicin en cada uno de los
grupos. No es posible tener un trmino sin ninguna definicin o una definicin sin ningn trmino.
Podis asociar ms de un trmino a una nica definicin, o viceversa. Por ejemplo, el trmino caf puede
tener varios significados, que podis mostrar uno despus del otro:
caf
124/407
bebida hecha a partir de granos de caf tostados y molidos
taza de caf
una reunin social en la que se consume caf
un color marrn tirando a oscuro
Tambin es posible tener ms de un trmino para la misma definicin. Esto se utiliza para mostrar
variaciones de un trmino, todas ellas con el mismo significado:
soda
gaseosa
bebida gaseosa
cola
Bebida dulce con gas.
Las listas de definiciones son diferentes de los otros tipos de listas, ya que utilizan
trminos y descripciones en lugar de elementos de lista.
As pues, las listas de definiciones utilizan las etiquetas <dl></dl> alrededor de
grupos de <dt></dt> y <dd></dd>: Se debe aparejar como mnimo un <dt></dt> con
como mnimo un <dd></dd>; el <dt></dt> debe ir siempre primero.
Una lista de definiciones muy sencilla con trminos nicos y definiciones nicas tendra el siguiente aspecto:
<dl>
<dt>Trmino</dt>
<dd>Definicin del trmino</dd>
<dt>Trmino</dt>
<dt>Trmino</dt>
</dl>
Y se representa de la manera siguiente:
Trmino
Definicin del trmino
Trmino
Trmino
En este ejemplo hemos asociado ms de un trmino a una definicin, y viceversa:
<dl>
<dt>Trmino</dt>
<dt>Trmino</dt>
<dt>Trmino</dt>
<dd>Definicin aplicable a los dos trminos anteriores</dd>
<dt>Trmino que puede tener las dos definiciones siguientes</dt>
<dd>Una definicin del trmino</dd>
<dd>Otra definicin del trmino</dd>
</dl>
Y se representara de la manera siguiente:
Trmino
Trmino
125/407
Trmino
Definicin aplicable a los dos trminos anteriores
Trmino que puede tener las dos definiciones siguientes
Una definicin del trmino
Otra definicin del trmino
En general, no es demasiado habitual asociar mltiples trminos a una nica definicin, pero est bien saber
que es posible por si alguna vez hay que hacerlo.
16.2. Elegir entre tipos de listas
A la hora de decidir el tipo de lista que utilizaris, normalmente podris tomar la decisin correcta
respondiendo a dos preguntas muy sencillas:
1. Estoy definiendo trminos (o asociando otras parejas nombre/valor)?
a. Si la respuesta es afirmativa, utilizad una lista de definiciones.
b. Si la respuesta es negativa, no utilicis una lista de definiciones y pasad a la pregunta siguiente.
2. El orden de los elementos de la lista es importante?
a. Si la respuesta es afirmativa, utilizad una lista ordenada.
b. Si la respuesta es negativa, utilizad una lista no ordenada.
16.3. La diferencia entre listas HTML y texto
Es posible que os estis preguntando cul es la diferencia entre una lista HTML y el texto con picos o
nmeros escritos manualmente. El uso de una lista HTML tiene unas cuantas ventajas:
Si tenis que cambiar el orden de los elementos de una lista ordenada, slo ser necesario que los
movis en el cdigo HTML. Si hubierais escrito los nmeros a mano, deberais revisarlo a pesar de
cambiar el nmero de cada uno de los elementos para corregir el orden, lo cual sera muy pesado.
El uso de una lista HTML permite aplicar un estilo a la lista. Si os limitis a utilizar un texto normal, os
ser mucho ms difcil aplicar un estilo a los elementos individuales de una manera adecuada.
Si utilizis una lista HTML, el contenido tendr la estructura semntica adecuada y no ser slo un
efecto visual "tipo lista". Esto tiene unas ventajas importantes; por ejemplo, los lectores de pantalla
pueden indicar a los usuarios con alguna deficiencia visual que estn leyendo una lista y no un lo
confuso de texto y nmeros.
O, para decirlo de otra manera: el texto y las listas no son lo mismo. El uso de texto en lugar de una lista
har que tengis ms trabajo y puede provocar problemas en los lectores del documento. Por lo tanto, si
vuestro documento necesita una lista, deberais utilizar la lista HTML correcta.
16.4. Anidar listas
Un elemento de una lista puede contener otra lista; eso se conoce como "anidar" una lista. Puede ser til
para elementos como tablas de contenido:
1. Captulo uno
1. Seccin uno
2. Seccin dos
3. Seccin tres
2. Captulo dos
3. Captulo tres
La clave para anidar listas es recordar que la lista anidada debe estar relacionada con un elemento concreto
126/407
de la lista. Para reflejarlo en el cdigo, la lista anidada debe estar contenida en este elemento de la lista.
El cdigo de la lista anterior es el siguiente:
<ol>
<li>Captulo uno
<ol>
<li>Seccin uno</li>
<li>Seccin dos</li>
<li>Seccin tres</li>
</ol>
</li>
<li>Captulo dos</li>
<li>Captulo tres</li>
</ol>
Observad que la lista anidada empieza despus de <li> del texto del elemento de la lista que la contiene
("Captulo uno"), y que acaba antes de </li> del elemento de la lista que la contiene. Las listas anidadas son
normalmente la base para los mens de navegacin de sitios web, ya que son una buena manera de definir
la estructura del sitio.
En teora, se pueden anidar tantas listas como se quiera, aunque en la prctica una anidacin excesiva
puede llegar a crear una situacin muy confusa. En el caso de listas muy largas, puede ser mejor dividir el
contenido en varias listas con ttulos o incluso dividirla en varias pginas.
16.5. Ejemplo paso a paso
A continuacin, veremos un ejemplo paso a paso en el que incluiremos todo lo que hemos explicado hasta
ahora. Imaginemos la siguiente situacin:
Estis creando un pequeo sitio web para la Escuela de Cocina HTML. En la pgina principal debe aparecer
una lista de recetas clasificadas por categoras que nos deben llevar a las pginas de las recetas. Cada una
de las pginas de recetas incluye una lista con los ingredientes necesarios, notas sobre estos ingredientes y
el mtodo de preparacin. Las tres categoras son "Pasteles" (que incluye recetas para "Bizcocho", "Pastel
de chocolate" y "Pastel de manzana"); "Galletas" (que incluye recetas para "Galletas de avena y coco",
"Gotas de mermelada" y "Momentos dulces"); y "Panes rpidos" (que incluye recetas para "Pan de soda" y
"Panecillos de leche"). El cliente no tiene ninguna preferencia por el orden en el que aparezcan las
categoras y las recetas; slo quiere estar seguro de que la gente sabr qu elementos son categoras y
cules son recetas.
Ahora iremos pasando por todo el proceso de creacin de este sitio. En este subapartado explicaremos la
creacin del etiquetado y mostraremos la manera de aadir algunos estilos a las listas. Los estilos los
explicaremos de una manera ms superficial, ya que ms adelante en esta serie encontraris un apartado
dedicado a los estilos de las listas y de los enlaces.
16.5.1. Etiquetado de la pgina principal
1. Cread una pgina HTML de la manera adecuada que incluya el doctype y los elementos html, head y
body y guardadla como stepbystep-main.html. Aadid el ttulo principal (h1) "Escuela de cocina HTML" y
un subttulo (h2) "Recetas":
<h1>Escuela de cocina HTML</h1>
<h2>Recetas</h2>
2. Debis presentar tres categoras de recetas y el orden no es importante; en este caso, lo ms adecuado
es una lista desordenada y, por lo tanto, deberis aadir lo siguiente a vuestra pgina:
<h2>Recetas</h2>
<ul>
<li>Pasteles</li>
<li>Galletas</li>
<li>Panes rpidos</li>
127/407
</ul>
El sangrado de los elementos li, aunque no es necesario, hace que el cdigo sea ms legible.
3. Ahora deberis aadir las recetas como subelementos; por ejemplo, "Bizcocho", "Pastel de chocolate" y
"Pastel de manzana" deben ir a la categora "Pasteles". Para hacerlo, debis crear una lista anidada en
cada uno de los elementos. Como el orden no es importante, aqu tambin deberemos utilizar listas no
ordenadas. Con el fin de facilitar las cosas en este tutorial, enlazaremos todas las recetas a una nica
pgina de receta (ms adelante se explican los enlaces HTML con ms detalle. Si queris informacin
sobre los enlaces, podis ir a la seccin correspondiente):
Ved tambin
<h2>Recetas</h2>
<ul>
<li>Pasteles
<ul>
<li><a href="stepbystep-recipe.html">Bizcochos</a></li>
<li><a href="stepbystep-recipe.html">Pastel de chocolate</a></li>
<li><a href="stepbystep-recipe.html">Pastel de manzana</a></li>
</ul>
</li>
<li>Galletas
<ul>
<li><a href="stepbystep-recipe.html">Galletas de avena y coco</a></li>
<li><a href="stepbystep-recipe.html">Gotas de mermelada</a></li>
<li><a href="stepbystep-recipe.html">Momentos dulces</a></li>
</ul>
</li>
<li>Panes/panes rpidos
<ul>
<li><a href="stepbystep-recipe.html">Pan de soda</a></li>
<li><a href="stepbystep-recipe.html">Panecillos de leche</a></li>
</ul>
</li>
</ul>
16.5.2. Aadir algunos estilos
Debemos volver a sealar que no debis preocuparos excesivamente del CSS en este apartado, si no lo
entendis,. Aqu slo veremos el CSS de una manera muy superficial, y ya hablaremos de l con mucho ms
detalle ms adelante en este mismo curso.
Al cliente le gusta esta organizacin, pero quiere que las categoras se indiquen con unas flechas pequeas
en lugar de picos. Tambin quiere que las categoras queden alineadas a la izquierda de la pgina. Para
hacerlo, debis especificar una imagen en lugar de un pico y que entonces definis los ajustes de
margen/separacin.
1. Para evitar conflictos con otras listas del sitio, deberis aadir una clase a la lista para poder crear
selectores contextuales especficos en vuestra hoja de estilos. La clase "lista de recetas" podra ser
adecuada:
<h2>Recetas</h2>

<ul class="lista-de-recetas">
2. Ahora debis crear una hoja de estilo y aadir unas cuantas reglas, pero en primer lugar debis aadir
etiquetas style de apertura y de cierre en el head de vuestro documento.
3. Ahora eliminaris el espaciado de la lista. Por defecto, algunos navegadores utilizan margin y otros
padding para separar los elementos y, por lo tanto, deberis ajustar los dos a cero; debis aadir lo
128/407
siguiente entre las etiquetas style:
ul.lista-de-recetas {
margin-left: 0;
padding-left: 0;
}
4. A continuacin, debis crear una imagen de pico personalizada; si queris, podis utilizar la nuestra
(podis ver la figura 1).
Figura 1. Imagen de pico personalizada.
5. Ahora deberis eliminar los picos de los elementos de la lista, definir el pico como imagen de fondo para
stos y aadir un poco de separacin a fin de que el texto no quede sobre la imagen de fondo. Podis
hacerlo aadiendo el siguiente CSS justo antes de la etiqueta style de cierre:
ul.lista-de-recetas li {
list-style-type: none;
background: #fff url("example-bullet.gif") 0 0.4em no-repeat;
padding-left: 10px;
}
6. Finalmente, deberis volver a poner los picos en los elementos de la lista anidada y definir un fondo de
color blanco (la segunda norma es ms especfica, por lo que anular la norma de la imagen de fondo).
Recordad que la lista anidada heredar la primera norma del CSS, por lo que deberis "deshacer" todos
los ajustes de la lista principal. Aadid el siguiente CSS justo antes de la etiqueta style de cierre:
ul.lista-de-recetas li li {
list-style-type: disc;
background: #fff;
}
El resultado final debera ser algo similar a lo que aparece en la figura 2:
Figura 2. La pgina principal acabada con imgenes de picos personalizadas.
Tambin podis ver ms ejemplos en: "HTML Cooking School"
16.5.3. La pgina de la receta
En este ejemplo slo crearemos la pgina de la receta para el bizcocho, pero, si queris, podis crear las
otras por vuestra cuenta utilizando esta pgina como plantilla. El cliente os ha suministrado la receta del
bizcocho en un archivo de texto que tiene el siguiente aspecto:
Bizcocho
Ingredientes
3 huevos
129/407
100 gr de azcar glas
85 gr de harina con levadura
Notas sobre los ingredientes:
Azcar glas: azcar blanco granulado muy fino.
Harina con levadura: una mezcla ya preparada de harina y agentes gasificantes
(normalmente sal y levadura artificial).
Preparacin
1. Precalentad el horno a 190 C.
2. Engrasad un molde redondo de 20 cm.
3. En un bol de tamao medio, mezclad los huevos y el azcar glas hasta
obtener una mezcla esponjosa.
4. Incorporad la harina.
5. Poned esta mezcla en el molde preparado.
6. Horneadlo durante 20 minutos en el horno precalentado, o hasta que la
parte superior del bizcocho recupere la forma al apretarla ligeramente.
7. Dejadlo enfriar dentro del molde sobre una reja metlica.
16.5.4. Etiquetado de la pgina de la receta
1. Cread otro documento HTML de la manera adecuada y guardadlo como en stepbystep-recipe.html.
Aadidle los ttulos siguientes:
<h1>Bizcocho</h1>
<h2>Ingredientes</h2>
<h3>Notas sobre los ingredientes</h3>
<h2>Preparacin</h2>
2. La lista de ingredientes tiene varios elementos, pero el orden no es importante. As pues, hay que
utilizar una lista desordenada. Aadid lo siguiente a body de vuestro HTML:
<h2>Ingredientes</h2>
<ul>
<li>3 huevos</li>
<li>100 gr de azcar glas</li>
<li>85 gr de harina con levadura</li>
</ul>
3. Las notas sobre los ingredientes son para definir adecuadamente qu son algunos de los ingredientes.
Debis asociar el ingrediente (el trmino) con su definicin. Para ello, hay que utilizar una lista de
definiciones. Aadid lo siguiente a vuestro HTML, bajo la lista desordenada del paso anterior:
<h3>Notas sobre los ingredientes</h3>
<dl>
<dt>Azcar glas</dt>
<dd>Azcar blanco granulado muy fino</dd>
<dt>Harina con levadura</dt>
<dd>Una mezcla ya preparada de harina y agentes gasificantes (normalmente
sal y azcar artificial).</dd>
</dl>
4. La preparacin debe seguir, como es obvio, el orden correcto, por lo que deberemos utilizar una lista
ordenada; aadid lo siguiente a vuestro HTML, bajo la lista de definiciones:
<h2>Preparacin</h2>
<ol>
<li>Precalentad el horno a 190C.</li>
<li>Engrasad un molde redondo de 20 cm.</li>
<li>En un bol de tamao medio, mezclad los huevos y el azcar glas hasta
obtener una mezcla esponjosa.</li>
<li>Incorporad la harina</li>
<li>Poned esta mezcla en el molde preparado.</li>
<li>Horneadlo durante 20 minutos en el horno precalentado, o hasta que la
parte superior del bizcocho recupere la forma al apretarla ligeramente.</li>
130/407
<li>Dejadlo enfriar dentro del molde sobre una reja metlica.</li>
</ol>
16.5.5. Estilos de la pgina de la receta
El cliente est muy contento con los resultados, pero quiere que las definiciones aparezcan en negrita para
hacerlas ms legibles. Aadid lo siguiente al head de vuestro HTML:
<style>
dt {
font-weight: bold;
}
</style>
La pgina debera tener un aspecto similar al de la figura 3.
Figura 3. La pgina de la receta acabada con los trminos de las definiciones
en negrita.
Tambin podis ver la pgina de ejemplo en: "Simple Sponge Cake"
Ya habis acabado!
Resumen
Llegados a este punto, ya deberais entender perfectamente los tres tipos de listas diferentes de HTML. Con
este ejemplo paso a paso habis creado las tres y habis aprendido a anidar listas dentro de elementos de
listas.
Ahora que ya sabis cmo utilizar adecuadamente las listas HTML, muy probablemente veris que las
utilizis con mucha frecuencia. Hay mucho contenido en la web que se debera haber puesto en una lista,
pero que simplemente se ha colocado en un elemento genrico con unas cuantas etiquetas de saltos de
lnea. Es una prctica de vagos y que genera ms problemas de los que soluciona; no lo hagis nunca!
Debis crear siempre listas semnticamente correctas para ayudar a la gente a leer vuestros sitios web. A la
hora de ir haciendo el mantenimiento de los sitios web es mejor para todo el mundo y no slo para quien los
ha creado.
Preguntas de repaso
Preguntas a las que deberais poder responder:
1. Cules son los tres tipos de listas de HTML?
2. Cundo utilizarais cada uno de los tipos de listas? Cmo elegs uno u otro?
131/407
3. Cmo se hace para anidar listas?
4. Por qu se debe utilizar CSS y no HTML para aplicar estilos a las listas?
A List Apart: Taming Lists
W3C CSS2: list-style-type definition
: :
132/407
El texto central de HTML - Imgenes en HTML
Imgenes en HTML
Accesibilidad : : :
17. Imgenes en HTML
Christian Heilmann. 8 de julio del 2008. Publicado en: longdesc, alt, imgenes, html, ttulo
En este apartado hablaremos de una de las cosas que hacen que el diseo web sea algo bonito: las
imgenes. Una vez lo hayis ledo sabris cmo aadir imgenes a vuestros documentos web de manera
accesible (para que la gente con discapacidades visuales tambin pueda utilizar la informacin de vuestro
sitio) y cmo y cundo utilizar imgenes en lnea para aportar informacin o imgenes de fondo en el diseo
de la pgina.
Nota
Podis descargaros los archivos de ejemplo que se utilizan en este apartado desde el
archivo "code.zip"; a lo largo de este apartado iremos haciendo referencias a estos
archivos.
17.1. Una imagen dice ms que mil palabras, o no?
17.2. Diferentes tipos de imgenes en la web: imgenes de contenido y de fondo
17.3. El elemento img y sus atributos
17.3.1. Ofrecer una alternativa de texto con el atributo alt
17.3.2. Aadir informacin pertinente con el atributo title
17.3.3. Utilizar longdesc para ofrecer una alternativa a las imgenes complejas
17.3.4. Visualizacin ms rpida de las imgenes definiendo las dimensiones con width y height
17.4. Las imgenes en lnea
17.5. Imgenes de fondo con CSS
17.5.1. Aplicacin de fondos con CSS
Resumen
Preguntas de repaso
17.1. Una imagen dice ms que mil palabras, o no?
Resulta muy tentador utilizar un montn de imgenes en los sitios web. Las imgenes son una manera muy
buena de dar un aire concreto a la pgina y las ilustraciones resultan muy tiles para comunicar informacin
compleja de una manera ms fcil a la gente que la visita.
El inconveniente de las imgenes en la web es que no todo el que navega las puede ver. Si retrocedemos
hasta los das en los que los navegadores empezaron a aceptar las imgenes, veremos que muchos de los
visitantes tenan las imgenes desactivadas para as ahorrar trfico y poder navegar ms rpidamente; las
conexiones eran normalmente muy lentas y se deba pagar mucho dinero por cada minuto que se pasaba en
lnea. Aunque actualmente las cosas son muy diferentes, todava no estamos ni mucho menos totalmente
fuera de peligro.
Las personas que utilizan dispositivos mviles pueden seguir teniendo las imgenes desactivadas a
causa de las reducidas dimensiones de las pantallas y del coste de la descarga de datos.
Vuestro sitio web puede ser visitado por personas ciegas o con alguna discapacidad visual que les
impida ver correctamente las imgenes.
Tambin puede recibir visitas de personas de otras culturas que no entiendan los iconos que habis
utilizado.
Los motores de bsqueda slo indexan texto y (todava) no analizan las imgenes, lo que significa que
la informacin almacenada en imgenes no se podr encontrar ni indexar.
Por lo tanto, es muy importante elegir las imgenes con prudencia y utilizarlas slo cuando sea adecuado. Y
an es ms importante que os aseguris de que ofrecis siempre alguna alternativa para aquellas personas
133/407
que no puedan ver vuestras imgenes. De momento, veamos las tecnologas que tenemos disponibles para
aadir imgenes a un documento HTML.
Ved tambin
En el apartado "Creacin de mltiples pginas con mens de navegacin" de este mismo tutorial encontraris
ms informacin sobre los problemas que generan los iconos y las imgenes mal utilizadas.
17.2. Diferentes tipos de imgenes en la web: imgenes de contenido y de
fondo
Hay dos maneras bsicas de aadir imgenes a un documento: imgenes de contenido utilizando el
elemento img e imgenes de fondo aplicadas a elementos utilizando CSS. El uso de uno o de otro depender
de qu queris hacer:
1. Si la imagen es crucial para el contenido del documento, como por ejemplo una fotografa del autor o un
grfico que presenta datos, lo deberais aadir como un elemento img con el texto alternativo adecuado
2. Si la imagen tiene slo una finalidad esttica, deberais utilizar las imgenes de fondo de CSS. La razn
es que estas imgenes no deben tener ningn texto alternativo (de qu servira "ngulo redondeado de
color verde que parpadea" para una persona ciega?) y que hay muchas ms opciones en CSS que en
HTML para trabajar con estilos de imgenes.
17.3. El elemento img y sus atributos
El elemento img es muy fcil aadir una imagen a un documento HTML.
El documento inlineimageexample.html del archivo zip muestra la fotografa balconyview.jpg en un navegador
(siempre que tengis la imagen en la misma carpeta que el archivo HTML.)
html4/strict.dtd">
<html>
<head>
<title>Example of an inline image</title>
</head>
<body>
<img src="balconyview.jpg">
</body>
</html>
Archivo fuente: "inlineimageexample.html "
Si ejecutis este cdigo en un navegador, veris lo que sale en la figura 1.
134/407
Figura 1. La imagen tal como se ve en un navegador.
17.3.1. Ofrecer una alternativa de texto con el atributo alt
La imagen se ve bien, pero es un cdigo HTML no vlido porque el elemento img necesita un atributo alt.
Este atributo contiene el texto que aparece si, por alguna razn, la imagen no est disponible. La imagen
puede no estar disponible porque no se puede encontrar o no cargar o porque el agente de usuario
(normalmente un navegador) no acepta imgenes. Adems, las personas con alguna discapacidad visual
utilizan tecnologas de asistencia que les leen las pginas web. Estas tecnologas leen en voz alta el
contenido del atributo alt de los elementos img a los usuarios. Por lo tanto, es muy importante escribir un
buen texto alternativo para describir el contenido de la imagen y ponerlo dentro del atributo alt.
En Internet encontraris muchos textos que hablan sobre las "etiquetas alt". Esto es objetivamente un error,
ya que no hay ninguna etiqueta (o elemento) que tenga este nombre, sino que es un atributo del elemento
img que es extremamente importante tanto para la accesibilidad, como para la optimizacin en motores de
bsqueda.
Para que la imagen sea comprensible para todo el mundo, es necesario que aadis un texto alternativo
adecuado; en este caso, por ejemplo, "View from my balcony, showing a row of houses, trees and a castle"
(vista desde mi balcn, desde donde se ve una hilera de casas, rboles y un castillo).
html4/strict.dtd">
<html>
<head>
<title>Example of an inline image</title>
</head>
<body>
<img src="balconyview.jpg" alt="View from my balcony, showing a row of houses,
trees and a castle">
</body>
</html>
Archivo fuente: "inlineimageexamplealt.html"
El atributo alt contiene el texto que aparecer cuando la imagen no est disponible.
La informacin del atributo alt no debera aparecer cuando la imagen se cargue
correctamente; Internet Explorer lo hace mal y muestra este texto como si fuera un
indicador de funcin al poner el puntero del ratn sobre la imagen durante unos
momentos. Esto es un error, ya que hace que mucha gente utilice el atributo alt
para aadir informacin adicional sobre la imagen. Si queris aadir informacin
adicional, debis utilizar el atributo title, que explicaremos en el subapartado
siguiente.
135/407
17.3.2. Aadir informacin pertinente con el atributo title
La mayora de los navegadores muestran el valor del atributo title de un elemento
img como si fuera un indicador de funcin al poner el puntero del ratn encima
(podis ver la figura 5.) Esto puede ayudar al visitante a saber ms cosas sobre la
imagen, pero no os podis fiar de que todos los visitantes tendrn un ratn.
El atributo title puede ser muy til, pero no es una manera segura de ofrecer informacin crucial. En
cambio, s que es una buena manera, por ejemplo, para escribir las sensaciones que provoca la imagen o el
significado que tiene dentro del contexto.
html4/strict.dtd">
<html>
<head>
<title>Example of an inline image with alternative text and title</title>
</head>
<body>
trees and a castle" title="What I see when I look out of my window; the castle was
one reason to move there.">
</body>
</html>
Archivo fuente: "inlineimagewithtitle.html "
Si cargis este cdigo en vuestro navegador, veris lo que hay en la figura 2.
Figura 2. En muchos navegadores, los atributos title aparecen como si fueran
indicadores de funcin.
17.3.3. Utilizar longdesc para ofrecer una alternativa a las imgenes complejas
Si la imagen es muy compleja, como por ejemplo un grfico, podis ofrecer una
descripcin ms larga con el atributo longdesc para que las personas que utilicen
lectores de pantalla o naveguen con las imgenes desactivadas puedan seguir
accediendo a la informacin que transmite la imagen.
Este atributo contiene una URL que lleva a un documento que contiene la misma informacin. Por ejemplo, si
tenis un grfico que muestra una serie de datos, podis vincularlo a una tabla de datos que contenga la
misma informacin utilizando longdesc:
html4/strict.dtd">
<html>
<head>
<title>Example of an inline image with longdesc</title>
136/407
</head>
<body>
<img src="chart.png" width="450" height="150" alt="Chart showing the fruit
consumption amongst under 15 year olds. Most children ate Pineapples,
followed by Pears" longdesc="fruitconsumption.html">
</body>
</html>
Archivo fuente: "inlineimagelongdesc.html"
El archivo "fruitconsumption.html" contiene una tabla muy sencilla que representa los mismos datos:
html4/strict.dtd">
<html>
<head>
<title>Fruit consumption</title>
</head>
<body>
<table summary="Fruit Consumption of under 15 year olds, March 2007">
<caption>Fruit Consumption</caption>
<thead>
<tr><th scope="col">Fruit</th><th scope="col">Amount</th></tr>
</thead>
<tbody>
<tr><td>Apples</td><td>10</td></tr>
<tr><td>Oranges</td><td>58</td></tr>
<tr><td>Pineapples</td><td>95</td></tr>
<tr><td>Bananas</td><td>30</td></tr>
<tr><td>Raisins</td><td>8</td></tr>
<tr><td>Pears</td><td>63</td></tr>
</tbody>
</table>
<p><a href="inlineimagelongdesc.html">Back to article</a></p>
</body>
</html>
Archivo fuente: "fruitconsumption.html"
Las dos representaciones de estos datos, la una al lado de la otra, aparecen tal como se puede ver en la
figura 3.
137/407
Figura 3. Podis vincular un documento con datos complejos a una imagen
mediante el atributo longdesc.
Observad que no hay ninguna indicacin visual y que hay un archivo de descripcin largo conectado a esta
imagen. No obstante, las tecnologas de asistencia permitirn que sus usuarios sepan que hay una
alternativa disponible.
17.3.4. Visualizacin ms rpida de las imgenes definiendo las dimensiones con width y height
Cuando el agente de usuario encuentra un elemento img en el HTML, empieza a
cargar la imagen sealada por el atributo src. Por defecto, ste no sabe cules son
las dimensiones de la imagen, por lo que se limitar a mostrar todo el texto apilado
y desplazar el resto del documento cuando finalmente se carguen y aparezcan las
imgenes. Esto puede provocar que la carga de la pgina sea ms lenta y genere
confusin entre las personas que la visitan. A fin de que eso no ocurra, podis
indicar al agente de usuario que asigne el espacio adecuado a las imgenes antes
de que stas se carguen especificndole las dimensiones de la imagen con los
atributos width y height.
html4/strict.dtd">
<html>
<head>
<title>Example of an inline image with dimensions</title>
</head>
<body>
trees and a castle" width="400" height="186">
</body>
</html>
138/407
Archivo fuente: "inlineimagewithdimensions.html"
De esta manera, aparecer un indicador de posicin de la imagen hasta que sta se cargue y ocupe su
lugar, con lo que se evitar el desagradable desplazamiento de la pgina. Con estos atributos tambin se
pueden modificar las dimensiones de la imagen (dividid por dos los valores de los atributos del ejemplo
anterior, guardadlo y volved a cargar la pgina), pero no es una buena idea porque la calidad de esta
modificacin de las dimensiones no es buena en todos los navegadores. Algo que est especialmente
desaconsejado es el hecho de redimensionar las imgenes para convertirlas en miniaturas, ya que la idea de
las miniaturas no es slo tener una imagen con unas dimensiones ms pequeas, sino tambin un archivo
que ocupe menos. No hay nadie que quiera cargar una fotografa de 300 KB para acabar teniendo una
imagen pequea que podra ser de slo 5 KB.
17.4. Las imgenes en lnea
HiHay muchos atributos que podis utilizar para las imgenes, pero la mayora estn desaprobados porque
definen la maquetacin y la alineacin de la imagen. Si el objetivo es ste, no se debe utilizar el HTML, sino
el CSS, que se invent precisamente para ello. Aqu slo diremos que es importante recordar que las
imgenes son, por defecto, elementos en lnea. Esto significa que pueden aparecer entre palabras dentro del
texto sin crear lneas nuevas. Eso es muy til para aadir iconos pequeos dentro del texto, pero puede ser
muy molesto cuando intentis crear maquetaciones utilizando imgenes y texto. Con CSS podris hacer que
las imgenes no queden en lnea por defecto y hacer que aparezcan como si fueran elementos de bloque
(elementos que aparecen en una lnea nueva al aadirlos a un documento).
17.5. Imgenes de fondo con CSS
Lo que est muy claro es que el diseo de webs se volvi mucho ms divertido cuando los navegadores
empezaron a aceptar CSS. En lugar de manipular el HTML utilizando celdas de tablas para definir la
posicin de los diferentes componentes de la pgina, espacios no separables ( ) para mantener el
espaciado y GIF separadores (imgenes GIF transparentes de 1 1 pxeles redimensionadas para crear
mrgenes), ahora podemos utilizar la separacin, los mrgenes, las dimensiones y el posicionamiento de
CSS y dejar que el HTML se dedique exclusivamente a definir la estructura del contenido.
Con CSS tambin podis utilizar las imgenes de fondo de una manera muy verstil: podis ponerlas detrs
del texto o en torno a ste de la manera que deseis, y tambin podis repetir las imgenes utilizando
patrones regulares para crear fondos. Aqu slo hablaremos muy brevemente de las del CSS para imgenes
porque en otro apartado ya hablaremos con mucho ms detalle del CSS para imgenes de fondo.
17.5.1. Aplicacin de fondos con CSS
El uso de CSS para aplicar imgenes como fondo es muy sencillo. Antes de mirar el cdigo CSS siguiente,
cargad el archivo de ejemplo imagesandcss.html" en vuestro navegador o consultad la figura 4 para haceros
una idea de todo lo que se puede hacer con las imgenes de fondo del CSS.
139/407
Figura 4. Imgenes de fondo con CSS.
Los diferentes cuadros son en realidad elementos de ttulo h2 con una cierta separacin y bordes aplicados
con CSS para as tener espacio suficiente para mostrar la imagen de fondo. Si comprobis el archivo HTML,
veris que cada uno de los elementos h2 tiene un id nico, de manera que cada uno puede tener aplicada
una norma CSS diferente. El CSS para el primer ejemplo es el siguiente:
background-image:url(ball.gif);
background-color:#eee;
La imagen se aade con el selector background-image y se le da una URL entre parntesis para especificar la
imagen que hay que incluir. Como alternativa en caso de que la imagen no est disponible, tambin deberais
definir un color de fondo con el selector background-color y un valor de color (en hexadecimal, por nombre o
en RGB). En este caso, hemos elegido un color gris claro.
Por defecto, las imgenes de fondo se repetirn tanto horizontal como verticalmente para llenar todo el
espacio del elemento. Pero se puede definir una repeticin diferente con el selector background-repeat:
No repetir la imagen: background-repeat:no-repeat;
Repetir la imagen slo horizontalmente: background-repeat:repeat-x;
Repetir la imagen slo verticalmente: background-repeat:repeat-y;
Por defecto, la imagen de fondo (si no se repite) se colocar en el ngulo superior izquierdo del elemento.
Tambin podis utilizar background-position para desplazar la imagen de fondo. Los valores ms sencillos
que se pueden elegir son top, center y bottom para la alineacin vertical y left, center y right para la
alineacin horizontal. Por ejemplo, para colocar la imagen en la parte inferior derecha deberis utilizar
background-position:bottom-right;, mientras que para centrar la imagen verticalmente y alinearla
horizontalmente a la derecha utilizarais background-position:center-right;.
Controlando la repeticin y la posicin de las imgenes de fondo y usando imgenes ingeniosas podris crear
muchos efectos impresionantes que no eran posibles antes del CSS; y si ponis todas las definiciones del
fondo en un archivo CSS independiente, lo tendris muy fcil para cambiar el aspecto de todo el sitio web
140/407
cambiando slo algunas lneas del cdigo. Esto se explicar ms adelante en el apartado 30.
Ved tambin
Resumen
Esto es todo lo que debis saber para empezar a aadir imgenes a vuestro HTML. Hay muchos ms trucos
que utilizan imgenes y CSS, pero de momento podis empezar a trabajar con lo que habis aprendido aqu
concentrndoos en las mejores prcticas para la aplicacin de imgenes. Hemos hablado de:
1. El elemento img y sus atributos bsicos:
a. src para la ubicacin del archivo de la imagen
b. alt para el texto que debe estar disponible cuando la imagen no se carga o no se puede ver
c. title para la informacin adicional interesante (pero no esencial)
d. longdesc para indicar un archivo externo que contiene una representacin textual alternativa de los
datos que aparecen en la imagen cuando sta es, por ejemplo, un grfico complejo
e. width y height para indicar al navegador las dimensiones de la imagen y, por lo tanto, el espacio
que le debe asignar
2. Los conceptos bsicos de las imgenes de fondo del CSS
a. cundo utilizar fondos (bsicamente, cuando no es necesario que la imagen tenga un texto
alternativo porque tiene slo una finalidad esttica para la maquetacin).
b. cmo colocar y repetir las imgenes de fondo en el CSS
Preguntas de repaso
1. Por qu es importante aadir un buen texto a una imagen en un atributo alt Y es necesario?
2. Si tenis una imagen de 1.280 786 pxeles y queris presentar una miniatura de 40 30 pxeles,
podis hacerlo con HTML? Y es aconsejable hacerlo?
3. Qu hace el atributo longdesc, y cmo lo muestran los navegadores?'
4. Qu hacen los atributos valign y align y por qu no los hemos explicado aqu?
5. Dnde se colocan por defecto las imgenes de fondo del CSS en un elemento y cul es el patrn de
repeticin por defecto?
: :
141/407
El texto central de HTML - Enlaces HTML: construimos una web!
Enlaces HTML: construimos una web!
Accesibilidad : : :
Christian Heilmann. 8 de julio del 2008. Publicado en: alt, href, ancla, ttulo, enlace
En este apartado encontraris informacin sobre uno de los inventos ms revolucionarios de toda la historia
de Internet: los enlaces. Los enlaces permiten que el lector de un documento los siga para ir hacia otro
documento y pueda pasar de un servidor a otro sin necesidad de desconectarse y volver a conectarse cada
vez. Desde que se inventaron han pasado muchas cosas, pero hay una que no ha cambiado nada: los
enlaces son una parte muy importante de la experiencia en Internet, y segn cmo los utilicis podis poner
las cosas fciles o difciles a las personas que visiten vuestra web.
Cuando hayis ledo este apartado, sabris cmo crear enlaces que sean fciles de entender y que
funcionen en cualquier entorno. Adems, tambin aprenderis cmo los enlaces afectan a vuestra
popularidad en los motores de bsqueda y recibiris algunos consejos sobre su descripcin.
Nota
Como ya es habitual, este apartado va acompaado de un archivo "links_code.zip" que
contiene varios archivos a los que iremos haciendo referencia.
18.1. Qu son los enlaces?
18.2. La anatoma de un enlace ancla
18.3. Enlace o destino? Los atributos id y href
18.4. No permitis ninguna ambigedad en los enlaces
18.4.1. Ofrecer informacin adicional con un atributo title
18.4.2. Enlaces a recursos no HTML: no obliguis a los visitantes a hacer conjeturas
18.4.3. Enlaces externos y enlaces internos
18.5. Marcos y ventanas emergentes: ni hablar!
18.6. Ventajas de los enlaces de salida y de los enlaces de entrada
18.7. Descripcin de los enlaces
18.8. Estilos de los enlaces
Resumen
Preguntas de repaso
18.1. Qu son los enlaces?
Los enlaces son partes de un sitio web (normalmente creado con HTML, pero no siempre) que apuntan hacia
otros recursos, como por ejemplo otros documentos HTML, archivos de texto, PDF, etc. Hay enlaces que el
navegador debe seguir automticamente y que se crean con elementos link (ya habis encontrado algunos
en apartados anteriores, que se utilizaban para importar archivos CSS a un documento HTML) y tambin hay
enlaces que el usuario puede activar opcionalmente. stos se conocen como anclas y podis aadirlos al
documento con el elemento a.
18.2. La anatoma de un enlace ancla
Podis convertir cualquier elemento insertado en el documento en un enlace ancla
aadiendo un elemento a delante y detrs.
Por ejemplo, en el siguiente documento HTML el texto Yahoo Developer Network se convierte en un enlace.
html4/strict.dtd">
<html>
142/407
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Link Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>A link to the YDN</h1>
<p><a href="http://developer.yahoo.com">Yahoo Developer Network</a></p>
</body>
</html>
Archivo fuente: "linkexample.html"
Las personas que visiten la web y activen este enlace (al hacer clic con el ratn o al activarlo con el teclado
o, en algunos casos, con la voz) dejarn el lugar actual y pasarn a la YDN. El enlace en s experimenta
otros cambios, que ya veremos cuando hablemos de los estilos de los enlaces.
El ancla tiene varios atributos que podis aadir:
href: el recurso hacia el que apunta (ya sea un archivo externo o un ID de ancla).
id: el ID de ancla si el ancla es un destino y no un enlace.
title: informacin adicional sobre el recurso externo.
Ahora veremos en primer lugar los atributos ms importantes y despus hablaremos sobre lo que podis
hacer a fin de que todo sea ms comprensible para las personas que visiten vuestra web.
18.3. Enlace o destino? Los atributos id y href
Un elemento a puede tener varias funciones segn los atributos que definis. El atributo ms habitual que
utilizaris es href, que define el recurso al que apunta el enlace. Este atributo puede contener diferentes
valores:
Una URL en la misma carpeta (help.html), relativa a la carpeta actual (por ejemplo "../../help/help.html";
los 2 puntos significan "sube un nivel dentro de la jerarqua de carpetas del sitio") o absoluta en la raz
del servidor. Por ejemplo "/help/help.html"; una barra inclinada al principio de la direccin significa que
sta empieza en la raz del ordenador en el que se encuentra la pgina.
Una URL en un servidor totalmente diferente. Por ejemplo "http://wait-till-i.com" o "ftp://ftp.opera.com/" o
"http://developer.yahoo.com/yui".
Un identificador de fragmento o un nombre de ancla precedido de una almohadilla. ste apunta a un
destino dentro del mismo documento. Por ejemplo "#menu".
Una combinacin de URL e identificadores de fragmentos: podis enlazar directamente con una seccin
de un documento diferente haciendo que el atributo href apunte hacia una URL seguida de un
identificador de fragmento. Por ejemplo, "http://developer.yahoo.com/yui/#cheatsheets".
Cualquiera de estos valores lo convertir en un enlace, ya que apuntar hacia otro lugar. Por otra parte, un
atributo id lo convertir en un ancla dentro de la pgina; algo a lo que apunta otro enlace. Esto puede ser un
poco confuso, ya que ambos utilizan el elemento de ancla (a). Para poder recordarlo ms fcilmente, podis
verlo de la manera siguiente: un atributo id convierte un enlace en un ancla y lo podis utilizar para enlazar
con secciones especficas del documento.
El siguiente bloque de cdigo HTML contiene ejemplos de todos los tipos diferentes de enlaces:
html4/strict.dtd">
<html>
<head>
<title>Different Link Example</title>
<link rel="stylesheet" href="linkexamplestyles.css">
143/407
</head>
<body>
<h1>Different Link examples</h1>
<h2>Example of in-page navigation with fragment identifiers, links and anchors</h2>
<div id="nav">
<ul id="toc">
<li><a href="#sec1">Section One</a></li>
<li><a href="#sec2">Section Two</a></li>
<li><a href="#sec3">Section Three</a></li>
<li><a href="#sec4">Section Four</a></li>
<li><a href="#sec5">Section Five</a></li>
</ul>
</div>
<div id="content">
<div>
<h2><a id="sec1">Section #1</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<h2>Some other link examples</h2>
<ul>
<li><a href="http://developer.yahoo.com">Yahoo Developer Network</a></li>
<li><a href="http://dev.opera.com/articles/view/the-freelancing-
business-part-1-pricing/#marketing">Tips on marketing yourself</a></li>
<li><a href="ftp://get.opera.com/pub/opera/win/">Download different
Opera versions</a></li>
<li><a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">
Photo of my book</a></li>
</ul>
</body>
</html>
Archivo fuente: "linkexample.html"
Abrid este archivo en el navegador y experimentad. Veris que si activis cualquiera de los enlaces de la
primera lista, pasaris a la seccin correspondiente del documento. Esto es as porque estn conectados por
el mismo identificador de fragmento; el primer enlace de la lista, por ejemplo, tiene un atributo href de #sec1,
que coincide con el valor ID del enlace que hay en el interior del primer elemento h2 del contenido. Esto es
todo lo que necesitis para conectar dos elementos de ancla en un documento; utilizad el mismo valor
precedido por una almohadilla si lo enlazis en un atributo href. Tambin puede que os hayis dado cuenta
de que la URL de la barra de ubicacin del navegador ha cambiado y que ahora muestra un identificador de
segmento al final, lo cual significa que los visitantes pueden aadir esta seccin a las direcciones de inters o
enviar el enlace por correo electrnico a otras personas para indicarles exactamente dnde deben ir.
144/407
No obstante, si activis cualquiera de los enlaces "Back to menu" (volver al men) ocurrir lo mismo. Cmo
puede ser? Los identificadores de fragmento pueden ser cualquier elemento con un ID.
Para recapitular:
Los enlaces de ancla pueden tener un identificador de fragmento como valor del atributo ref; este
identificador de fragmento debe empezar con una almohadilla (#).
Al activarlo, este enlace llevar hacia cualquier elemento HTML con un id de este valor. Estos ID de
cada pgina deben ser nicos.
Los ID siguen algunas convenciones con respecto a los nombres. Las ms importantes es que deben
empezar con un carcter alfanumrico y que no pueden contener espacios.
Todo esto cubre el men y las diferentes secciones del ejemplo, pero qu sucede con los otros enlaces? Si
los probis, veris que apuntan hacia destinos diferentes: uno va a otro sitio, otro muestra una fotografa y el
tercero muestra una seccin concreta de otra pgina web (que se encuentra pasando a un ID especfico). Si
todo ha funcionado bien, perfecto! Pero qu sucede si no habis entendido, o el navegador no ha
entendido, algunos de estos recursos?
18.4. No permitis ninguna ambigedad en los enlaces
Lo ms importante que debis recordar sobre los enlaces es que son una parte bsica para vuestra relacin
con las personas que os visiten. Estas personas se fan de que cuando les ofrezcis un enlace podrn
seguirlo y acceder a informacin de calidad y pertinente. Si vuestros enlaces no funcionan porque el recurso
al que apuntan no est disponible o se encuentra en un formato que el visitante no puede leer, habris
traicionado su confianza y habris perdido credibilidad. No debis permitir nunca que esto suceda.
18.4.1. Ofrecer informacin adicional con un atributo title
Igual que con cualquier otro elemento HTML, podis aadir un atributo title a un
elemento a para aadir informacin adicional. Los navegadores mostrarn lo que se
conoce como un indicador de funcin cuando los visitantes pasen el cursor del
ratn sobre el enlace. Este indicador de funcin les indica la naturaleza de este
enlace.
Por ejemplo, podis escribir una pequea introduccin al contenido y la ubicacin del documento enlazado:
html4/strict.dtd">
<html>
<head>
<title>Adding extra information with a title attribute</title>
</head>
<body>
<h1>Adding extra information with a title attribute</h1>
<ul>
<li>Find more information on the <a title="The Yahoo Developer
Network is the main hub for all the developer tools Yahoo offers,
including the Yahoo User Interface Library (YUI) and the Design
Patterns repository" href="http://developer.yahoo.com">Yahoo
Developer Network</a>.</li>
</ul>
</body>
</html>
Archivo fuente: "titleexample.html"
145/407
Figura 1. Aadir un atributo de ttulo para mostrar la informacin como un
indicador de funcin cuando los visitantes pasen por encima el enlace.
Pero no podis esperar que los visitantes tengan la suficiente paciencia y coordinacin mano-ojo para poder
fiaros de este recurso para dar informacin crucial. Es muy probable que los usuarios con alguna
discapacidad visual, que no pueden ver la pgina, no puedan acceder a esta informacin. Aunque los
lectores de pantalla incluyen la opcin de leer en voz alta los atributos title para el usuario final, esta opcin
est desactivada por defecto; por este motivo, no deberais utilizar nunca el atributo title para dar
informacin crucial sobre el enlace. Esa informacin crucial podra ser:
Enlazar con recursos no HTML, como archivos PDF, imgenes, vdeos, archivos de sonido o descargas.
Hacer que salgamos del sitio actual y que pasemos a otro servidor (enlaces externos versus enlaces
internos).
Enlazar con un documento que se abrir en un marco diferente o en una ventana emergente.
18.4.2. Enlaces a recursos no HTML: no obliguis a los visitantes a hacer conjeturas
Puede ser muy molesto hacer clic en un enlace y que el navegador no sepa qu hacer con aquello a lo que
apunta el. No obstante, no es nada extrao ver sitios web que enlazan con imgenes, documentos PDF y
vdeos sin avisar a los visitantes para que estn preparados. Los vdeos son una causa muy habitual de
problemas de los navegadores. Adems, tambin es posible que el recurso tenga un volumen muy grande
(un PDF de 20 MB, por ejemplo), lo que significa que quiz los visitantes preferiran descargarlo en lugar de
abrirlo dentro del navegador y aadirlo as a un consumo de memoria que ya es considerable; o quiz incluso
decidiran no acceder a l.
Uno de los factores principales del xito de un producto web es el hecho de no
obligar a las personas que lo visitan a hacer conjeturas sobre qu pasar cuando
hagan algo; siempre se debe explicar claramente qu efectos tendrn sus
acciones. En el caso de los enlaces, todo lo que debis hacer para evitar muchas
frustraciones es explicar bien a los visitantes qu es el recurso al que lleva el
enlace.
Aqu encontraris algunos ejemplos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/
strict.dtd">
<html>
<head>
<title>Linking non-HTML resources</title>
</head>
<body>
<h1>Linking non-HTML resources</h1>

<ul>
<li>Find more information on the <a href="http://developer.yahoo
.com">Yahoo Developer Network site (external)</a></li>
<li>Download the <a href="http://www.wait-till-i.com/stuff/JavaScript
-DOM-Cheatsheet.pdf">Dom Cheatsheet (PDF, 85KB)</a></li>
<li>Pick and <a href="ftp://get.opera.com/pub/opera/win/">download
different Opera versions from their FTP (external)</a></li>
146/407
<li>Check out a <a href="http://farm1.static.flickr.com/56/188791635_
0b8bdd808d.jpg?v=0">Photo of my book (JPG, 200KB)</a></li>
</ul>
</body>
</html>
Archivo fuente: "linkingnonhtml.html "
Si ofrecis toda esta informacin sobre el archivo enlazado y el espacio que ocupa, los visitantes podrn
decidir qu harn y no deberis suponer que tienen el navegador configurado de una manera concreta o
algunos programas instalados. Si lo combinis con unos estilos inteligentes, incluso podris conseguir que
tenga un buen aspecto y que todo sea muy intuitivo. Si os queris asegurar del todo, tambin podis ofrecer
una seccin de ayuda que explique qu son los diferentes formatos de archivo y dnde se pueden conseguir
los programas necesarios para abrirlos.
18.4.3. Enlaces externos y enlaces internos
Una de las cosas que ms temen los responsables de los negocios con respecto a los sitios web de sus
compaas es que la gente que los visite salga de ellos prematuramente. sta es a menudo la razn para no
ofrecer nunca enlaces hacia terceros (a menos que stos terceros paguen dinero por el privilegio del
redireccionamiento del trfico hacia ellos). Ms adelante ya volveremos a hablar de este criterio tan
equivocado; de momento, hablaremos de lo que hace la gente para evitar que los visitantes abandonen su
sitio y las consecuencias que tienen estas medidas para el xito del sitio web.
18.5. Marcos y ventanas emergentes: ni hablar!
El temor a perder visitantes que van hacia otros sitios web, combinado con el deseo de seguir enlazando con
estos otros sitios, nos ha trado algunos inventos en el desarrollo de las webs que se han convertido durante
aos en un verdadero problema para la usabilidad de los sitios: los marcos y las ventanas emergentes.
El uso de marcos HTML significa que estis separando la pgina que aparece en el navegador en diferentes
documentos. La ventaja es que el documento sigue siendo aparentemente el mismo incluso al cargar partes
de ste, ya sea desde el servidor propio o desde servidores de terceros. Pero aqu es donde acaba su
utilidad; los marcos son una experiencia terrible para el usuario y, de hecho, perniciosos:
Los motores de bsqueda no pueden indexar nunca toda la pgina, sino que en los resultados de la
bsqueda slo muestran partes que no tienen ningn sentido fuera de contexto.
Los visitantes no pueden aadir la pgina a la lista de direcciones de inters; la prxima vez que abran
la pgina desde esta lista vern el estado inicial del conjunto de marcos y no la pgina tal como la
dejaron la ltima vez.
Los visitantes que dependan de tecnologas de asistencia lo tienen muy difcil para navegar por
conjuntos de marcos.
Es posible que los sitios web de terceros no quieran aparecer dentro de un conjunto de marcos y que
utilicen scripts "rompedores de marcos", que sustituirn a los conjuntos de marcos para la URL real
cuando intentis incrustarlos. Esto se hace, por ejemplo, para evitar que los delincuentes consigan con
engaos que los usuarios de Internet introduzcan informacin como el nmero de la tarjeta de crdito en
un sitio web que aparentemente parece de un banco (lo que se conoce como phishing).
Los enlaces dentro de un conjunto de marcos utilizan el atributo target del ancla
para dirigirse al marco correcto. Cada uno de los marcos de un conjunto de marcos
tiene un nombre concreto y al activar el enlace se abre el documento definido en el
atributo href de este marco. Si el conjunto de marcos no est disponible (por
ejemplo, cuando un visitante ha encontrado el documento con los enlaces por
medio de un motor de bsqueda), cada uno de los enlaces se abre en una nueva
instancia del navegador.
Abrir una nueva instancia del navegador es otra de las maneras habituales de enlazar con sitios web de
terceros, ya sea con una ventana emergente de scripts o con un atributo target con el valor _blank. El hecho
de que todos los navegadores modernos tengan un bloqueador de ventanas emergentes ya es toda una
indicacin de si es seguro o no fiarse de esta tcnica... No lo es en absoluto!
147/407
Claro y conciso: no utilicis el atributo target para crear enlaces a no ser que sepis exactamente qu
estis haciendo. De todas maneras, sta ya es una idea anticuada; actualmente la mayora de los
navegadores tienen interfaces con pestaas, con lo cual los usuarios pueden abrir sitios de terceros en el
fondo para volver a ellos ms tarde y mientras tanto quedarse en vuestro sitio web. En algunas
circunstancias, es posible que queris indicar la diferencia entre los enlaces externos e internos, pero debis
dejar siempre que sea el visitante quien decida qu har con ellos.
18.6. Ventajas de los enlaces de salida y de los enlaces de entrada
Hay algunas buenas razones para enlazar con sitios de terceros incluso cuando stos son de la competencia.
Os da credibilidad ante vuestros visitantes; estis tan seguros de la calidad de vuestro contenido, que no
os asustis ante la competencia.
Es una oportunidad para ofrecer un servicio completo; os podis vincular al contenido y a artculos o
incluso a productos de otros sitios web que vosotros no ofrecis pero que pueden ser de inters para
los visitantes que quieren ampliar ms en el tema en cuestin.
Podis demostrar que tenis razn mencionando un artculo anterior de un tercero y ofreciendo una
solucin mejor o diferente y hacer referencia a este artculo mediante un enlace.
La utilidad de los enlaces de entrada (los enlaces que apuntan desde el sitio web de un tercero hacia el
vuestro) genera mucho menos debate. Cuantos ms sitios web vlidos y de alta calidad se enlacen con el
vuestro con las palabras clave pertinentes, ms arriba apareceris en los motores de bsqueda como
Google. Pero antes de que eso suceda, debis demostrar que no tenis miedo de enlazaros con otros sitios.
Las palabras clave pertinentes nos llevan hacia otra parte muy importante de la creacin de unos buenos
enlaces: cmo describirlos.
18.7. Descripcin de los enlaces
Ya hemos hablado un poco de ellos en el subapartado sobre los enlaces hacia recursos no HTML, pero
siempre es bueno recordar que los enlaces no slo son parte del texto de la pgina, sino que tambin son
unos elementos interactivos del documento.
Algunas tecnologas de asistencia ofrecen una lista de los enlaces en vez de todo el documento con el fin de
permitir a los usuarios que puedan navegar rpidamente por l, lo que significa que debis comprobar que
los textos de vuestros enlaces tengan sentido fuera del contexto en el que se encuentran. Podis
comprobarlo muy fcilmente en Opera abriendo cualquier sitio web y seleccionando "Tools" > "Links"
(herramientas > enlaces) en el men o presionando "Ctrl" + "Maysculas" + "L". Se abrir una pestaa nueva
en la que podris ver todos los enlaces del documento y hacia dnde apuntan.
Esto significa que debis comprobar no slo que todos los textos de los enlaces tengan sentido, sino tambin
que no haya varios enlaces con la misma descripcin pero que apunten hacia recursos diferentes. El error
clsico que se comete es el de los enlaces "haced clic aqu" que se describen, por ejemplo, como "Para
descargar la ltima versin de nuestra herramienta, haced clic aqu". Es mucho mejor utilizar un texto de
enlace que explique hacia dnde apunta; en este caso, "Podis descargar y probar la ltima versin de
nuestra herramienta".
Esto mismo tambin se aplica a los enlaces "ms". Los encontraris en los sitios de noticias, en los que
veris un titular y un texto resumido y un enlace "ms" o "noticia completa" que se debe seguir. La solucin a
este problema es utilizar una imagen "ms" enlazada y darle un texto alternativo nico o aadir un espacio
dentro del enlace despus de "ms" y ocultarlo con el CSS. Explicaremos todos estos trucos ms
detalladamente en el apartado sobre los mens y la navegacin, que encontraris ms adelante en este
curso.
Ved tambin
18.8. Estilos de los enlaces
148/407
Todava no ha llegado el momento de hablar del CSS, pero en este punto es til tener en cuenta que el
aspecto de los enlaces es muy importante y que hay varios y diferentes estados de enlaces que hay que
considerar. Los estados de los enlaces (que ms adelante se relacionan con los pseudoselectores del CSS;
puede sonar complejo, pero no lo es) son:
link: es el estado por defecto; define el aspecto que deben tener los enlaces en una parte concreta del
documento. Por defecto, los enlaces no visitados son de color azul.
visited: el estilo de un enlace que ya se ha visitado (y que quiz ya se encuentra en la memoria cach
del navegador). Por defecto, los enlaces ya visitados son de color prpura.
hover: el estilo de un enlace mientras el cursor del ratn se encuentra sobre l.
active: el estilo del enlace mientras est activado; es decir, mientras est en curso la conexin con el
otro sitio; tambin es el estilo del ltimo enlace activado cuando llegis al documento al ir atrs en el
navegador.
Resumen
Esta vez hemos explicado muchas cosas, pero es muy importante recordar el funcionamiento de los enlaces
y qu deben hacer. A lo largo de vuestra trayectoria profesional como desarrolladores web, aprenderis
muchos trucos y tcnicas para anular estos comportamientos por defecto, y esperamos que os paris a
pensar si lo que queris hacer es realmente necesario.
Hemos hablado de:
La anatoma del elemento a y sus atributos (no desaprobados).
La diferencia entre los elementos a como enlaces (con un atributo href) y como anclas (con un atributo
name).
La necesidad de que el nombre de un ancla sea nico.
La necesidad de explicar a los visitantes qu pueden esperar cuando siguen un enlace (el formato del
archivo y si es muy grande).
Cmo aadir informacin con el atributo de ttulo que se muestra como un indicador de funcin; y por
qu sta no es una manera segura de ofrecer informacin crucial.
La diferencia entre los enlaces externos (que apuntan hacia sitios web de terceros) y los internos (que
apuntan hacia documentos del mismo servidor).
Las prcticas anticuadas, como las ventanas emergentes y los marcos, y por qu hay que evitarlas.
Las ventajas de enlazarse con otros sitios y que otros sitios se enlacen con el vuestro.
Cmo describir adecuadamente los enlaces de manera que tengan sentido fuera de contexto, y por qu
es necesario.
Los antecedentes de los estilos bsicos de los enlaces.
Con todos estos conocimientos, deberais ser capaces de escribir documentos HTML que se enlacen
adecuadamente, y ya estis preparados para empezar a pensar en los mens y la navegacin del sitio.
Preguntas de repaso
1. Qu problema tiene el enlace siguiente: <a href="report.pdf" title="report as PDF, 2.3MB">get our
latest report</a>?
2. Para qu sirve el atributo target en los enlaces? Se puede utilizar de alguna manera positiva?
3. Hemos hablado sobre las relaciones de los enlaces y las conexiones entre los enlaces y las anclas.
Hay algn atributo para los enlaces que describa tambin las relaciones entre documentos?
4. Cmo se puede escribir un enlace que enve a los visitantes hacia un elemento que hay ms abajo de
la pgina al hacer clic en l? Qu hay que comprobar de antemano?
149/407
: :
150/407
El texto central de HTML - Tablas HTML
Tablas HTML
Accesibilidad : : :
19. Tablas HTML
Jenifer Hanen. 8 de julio del 2008. Publicado en: encabezamiento, datos, pie, tablas, ttulo de tabla
Vaya! Cmo debemos utilizar los estndares de la web para organizar pilas de datos? El simple hecho de
pensar en las toneladas de elementos anidados necesarios para conseguir que todos estos datos se
distribuyan en filas y cajas ya hace que nuestro cerebro quede totalmente colapsado; pero hay una solucin:
las tablas pueden salvarnos!
En el diseo web, las tablas son una manera muy buena de organizar datos en un formato tabulado. Es
decir, debemos ver las tablas, los grficos y los dems elementos visuales informativos como una ayuda
para ver y procesar una gran cantidad de informacin de una manera resumida que nos ayuda a comparar y
contrastar datos diferentes. Podemos ver estos elementos muy a menudo en los sitios web, ya sea para
resumir o comparar resultados de elecciones polticas, estadsticas deportivas, precios, tallas u otros datos.
En la era jursica de Internet, antes de la popularizacin del CSS como mtodo para separar la presentacin
de la estructura del HTML, las tablas se utilizaban para maquetar las pginas web: para crear columnas y
cajas y, en general, para distribuir el contenido. Pero sta no es la manera correcta de hacer las cosas; la
maquetacin con tablas daba como resultado unas pginas cargadas y confusas con un montn de tablas
anidadas; archivos muy grandes, difciles de mantener y difciles de modificar. Todava podris ver sitios web
hechos as en Internet, pero debis tener muy claro que actualmente las tablas se deben utilizar slo para lo
que fueron diseadas: los datos tabulares, y el CSS, para controlar la maquetacin.
En este apartado explicaremos cmo utilizar adecuadamente las tablas HTML.
19.1. La tabla ms bsica
19.2. Aadir otras funciones
19.3. Seguir estructurando la tabla
19.4. El CSS nos ayuda: una tabla con un aspecto mejor
Resumen
Preguntas de repaso
19.1. La tabla ms bsica
Empezaremos con el cdigo HTML semntico necesario para crear una tabla bsica; este ejemplo en
concreto compara erupciones volcnicas recientes de la regin del Pacfico de Amrica del Norte. A m me
gustan los volcanes y cuando era pequea convenc a mi madre para que me llevara a varios de estos
volcanes durante los viajes que hacamos en verano para visitar a la abuela. Siempre esperaba que alguno
de estos volcanes del noroeste del Pacfico entrara en erupcin mientras estbamos de vacaciones, pero fue
en vano.
La primera tabla es la siguiente:
<table>
<tr>
<td>Volcano Name</td>
<td>Location</td>
<td>Last Major Eruption</td>
<td>Type of Eruption</td>
</tr>
<tr>
<td>Mt. Lassen</td>
<td>California</td>
<td>1914-17</td>
<td>Explosive Eruption</td>
151/407
</tr>
<tr>
<td>Mt. Hood</td>
<td>Oregon</td>
<td>1790s</td>
<td>Pyroclastic flows and Mudflows</td>
</tr>
<tr>
<td>Mt. St. Helens</td>
<td>Washington</td>
<td>1980</td>
</tr>
</table>
Este cdigo se representa de la manera siguiente:
Volcano Name Location Last Major Eruption Type of Eruption
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt. St. Helens Washington 1980 Explosive Eruption
Empezaremos descomponiendo el etiquetado HTML utilizado en el cdigo anterior:
<table></table>: El elemento table es necesario para indicar al navegador que queris organizar el
contenido de una manera tabular.
<tr></tr>: El elemento tr establece una fila de la tabla. Esto permite que el navegador organice todo el
contenido que hay entre las etiquetas <tr> y </tr> dde una manera horizontal, todas ellas en una fila.
<td></td>: El elemento td define la celda de la tabla o cada uno de los espacios individuales para el
contenido dentro de la fila. Utilizad slo las celdas de tabla td necesarias segn los datos que se quieran
incluir. No utilicis celdas td vacas para crear espacio en blanco o separacin; para crear el espacio en
blanco o la separacin, es necesario que utilicis el CSS, ya que no slo es una buena manera de
separar la presentacin de la estructura, sino que tambin hace que la tabla sea ms fcil de entender
por parte de las personas con discapacidades visuales que utilizan lectores de pantalla para leerles el
contenido de la tabla en voz alta.
Tened en cuenta que los elementos bsicos se deben anidar de la manera siguiente:
<table>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</table>
Si los ordenamos de otra manera, el navegador generar un embrollo considerable y mostrar la tabla de
una manera muy extraa.
19.2. Aadir otras funciones
Ahora que ya tenemos la tabla bsica, podis aadir algunas funciones de tabla un poco ms complejas. En
primer lugar, aadiremos un ttulo y unos encabezamientos de columna para mejorar los datos tanto respecto
a la semntica, como a la legibilidad por parte de los lectores de pantalla. El etiquetado de la tabla mejorada
es el siguiente:
<table>
<caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>
152/407
<tr>
<th>Volcano Name</th>
<th>Location</th>
<th>Last Major Eruption</th>
<th>Type of Eruption</th>
</tr>
<tr>
<td>Mt. Lassen</td>
<td>California</td>
<td>1914-17</td>
</tr>
<tr>
<td>Mt. Hood</td>
<td>Oregon</td>
<td>1790s</td>
</tr>
<tr>
<td>Mt. St. Helens</td>
<td>Washington</td>
<td>1980</td>
</tr>
</table>
Este cdigo se representa de la manera siguiente:
Recent Major Volcanic Eruptions in the Pacific Northwest
Los elementos nuevos que hemos utilizado son:
<caption></caption>: El elemento caption permite aadir un ttulo a los datos de la tabla. La mayora de
los navegadores centran el ttulo y lo reproducen con el mismo ancho que la tabla, a menos que se
utilice el CSS para alinear el texto de una manera diferente.
<th></th>: El elemento th define el contenido que hay entre estas etiquetas como encabezamiento para
la columna correspondiente de la tabla. Esto es til no slo para ayudar a describir semnticamente cul
es la funcin de este contenido, sino que tambin ayuda a reproducirlo de una manera ms precisa en
varios navegadores y dispositivos. Este ejemplo es la manera ms bsica de utilizar el elemento th.
19.3. Seguir estructurando la tabla
Como paso final para acabar de estructurar nuestra tabla, definiremos unas secciones de encabezamiento y
de cuerpo de la tabla, le aadiremos un pie y definiremos el mbito de los ttulos de fila y columna. Tambin
aadiremos un atributo de resumen para describir el contenido de la tabla. El etiquetado definitivo de la tabla
es el siguiente:
<table summary="a summary of recent major volcanic eruptions
in the Pacific Northwest">
<caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>
<thead>
<tr>
<th scope="col">Volcano Name</th>
<th scope="col">Location</th>
<th scope="col">Last Major Eruption</th>
153/407
<th scope="col">Type of Eruption</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">Compiled in 2008 by Ms Jen</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Mt. Lassen</th>
<td>California</td>
<td>1914-17</td>
</tr>
<tr>
<th scope="row">Mt. Hood</th>
<td>Oregon</td>
<td>1790s</td>
</tr>
<tr>
<th scope="row">Mt. St. Helens</th>
<td>Washington</td>
<td>1980</td>
</tr>
</tbody>
</table>
Este cdigo de tabla tiene el siguiente aspecto en un navegador:
Compiled in 2008 by Ms Jen
Los nuevos elementos/atributos son los siguientes:
Los elementos thead, tbody y tfoot: estos elementos definen respectivamente el ttulo, el cuerpo y el pie
de la tabla. A menos que estemos codificando una tabla realmente compleja con muchas columnas y
filas de datos, si los utilizamos corremos el riesgo de excedernos. En una tabla compleja, sin embargo,
su uso no slo estructurar el contenido para el codificador, sino tambin para los navegadores y otros
dispositivos.
Los atributos colspan y rowspan: el atributo colspan crea una celda de tabla que ocupar ms de una
columna. En el caso del pie anterior, queramos que una celda de la tabla ocupara todo el ancho y por
ello le hemos dicho que deba extenderse a lo largo de cuatro columnas. Tambin podis aadir un
atributo rowspan de celda de tabla que permitir que la celda ocupe x filas, por ejemplo <td rowspan="3">.
El atributo summary: este atributo se utiliza para definir un resumen del contenido de la tabla para su uso
por parte de los lectores de pantalla (observad que este resumen no aparece en la versin de la tabla
que se ve en pantalla). Tened en cuenta que en las recomendaciones W3C antiguas, WCAG 1.0 y
HTML 4.0, se dice que se puede utilizar el atributo summary tal como hemos explicado anteriormente. En
los borradores ms nuevos de las especificaciones, sin embargo, este atributo summary ya no se
menciona. El hecho de seguir utilizando el atributo summary es una cuestin que est por resolver; de
momento, los integrantes de la Web Standards Curriculum hemos llegado a la conclusin de que vale la
pena seguir utilizndolo. Al fin y al cabo, no va mal y presenta algunas ventajas para la accesibilidad.
154/407
El atributo scope: tambin es posible que hayis observado los atributos scope de las etiquetas th, y el
hecho de que hayamos definido los nombres de los volcanes tambin como ttulos de columnas, dentro
de las filas de datos. Esto es perfectamente posible, pero de hecho nos estamos apartando del tema. El
atributo scope se puede utilizar dentro del elemento th para indicar a los lectores de pantalla que el
contenido de th es el ttulo de una columna o una fila. El atributo scope slo se utiliza dentro del
elemento th.
19.4. El CSS nos ayuda: una tabla con un aspecto mejor
Los elementos y atributos anteriores son todo lo que necesitis para codificar una buena tabla de datos.
Ahora que ya hemos definido la estructura HTML, pasamos a ver un CSS muy sencillo para hacer que la
tabla tenga un aspecto todava mejor:
body{
background: #ffffff;
margin: 0;
padding: 20px;
line-height: 1.4em;
font-family: tahoma, arial, sans-serif;
font-size: 62.5%;
}

table {
width: 80%;
margin: 0;
background: #FFFFFF;
border: 1px solid #333333;
border-collapse: collapse;
}

td, th {
border-bottom: 1px solid #333333;
padding: 6px 16px;
text-align: left;
}

th {
background: #EEEEEE;
}

caption {
background: #E0E0E0;
margin: 0;
border-bottom: none;
padding: 6px 16px;
font-weight: bold;
}
Cuando lo aplicamos al etiquetado definitivo de nuestra tabla, el aspecto que tendr es el que se puede ver
en la figura 1. Tambin podis comprobar la tabla real de ejemplo.
155/407
Figura 1. Ahora la tabla es visualmente mucho ms atractiva.
Archivo fuente: "table3.html"
Ooooh...! Mucho mejor, no? Podis aplicar los estilos que queris a la tabla, pero el ejemplo anterior es un
punto de referencia a partir del cual podis empezar a trabajar. En otro apartado aprenderis muchas ms
cosas sobre los estilos de las tablas; de momento, nos limitaremos a explicar qu hace cada una de las
secciones de este CSS:
body: en el CSS anterior hemos aadido propiedades para definir el margen (en este caso a cero), una
separacin (padding) para crear un poco de espacio, un color de fondo (blanco), el tamao y la familia
del tipo de letra, as como la interlnea para hacerlo todo un poco ms espacioso. Podis descargaros el
cdigo de este ejemplo en http://dev.opera.com/articles/view/19-html-tables/csstable.zip; intentad
modificar las propiedades en el archivo CSS para ver cmo cambian las cosas.
table: los bordes se han aadido con la declaracin de bordes de CSS. Para que todo funcionara
correctamente, tambin hemos tenido que aadir la propiedad border-collapse a collapse; de esta
manera, se reinician los valores de los bordes de la tabla y border-bottom es una lnea recta continua
que ocupa toda la fila en lugar de quedar partida entre cada una de las celdas de la tabla. En este
ejemplo hemos definido width al 80%. Esto hace que la tabla ocupe el 80% del ancho de la pantalla y el
ancho de la tabla cambiar siempre que se hagan cambios en el ancho de pantalla del navegador.
th y td: en el CSS anterior hemos definido la alineacin del texto a la izquierda, pero tambin puede ser
centrada o incluso podis dar nombres de clase a los diferentes elementos th y td y entonces utilizar el
CSS para tener un mayor control sobre cada una de las filas o columnas (en el caso de las filas, daris
un nombre de clase a la etiqueta del elemento tr). Tambin hemos aadido un poco de separacin a th
y td para abrir las filas y conseguir as que la legibilidad fuera mejor. En el caso del selector th anterior,
hemos definido otro color para diferenciar los ttulos del resto de la tabla.
caption: si no defins las propiedades CSS para el selector caption, ste no tendr ningn borde y
tendr el mismo color de fondo que toda la pgina aunque el etiquetado HTML para el ttulo de la tabla
se encuentre en la etiqueta table. As pues, en el ejemplo anterior hemos definido un borde para el
ttulo (sin ningn borde inferior, ya que el borde de la tabla ya desempea esta funcin), un color de
fondo diferente y un tipo en negrita para diferenciar el ttulo de la fila de los ttulos de columna.
Resumen
En este apartado hemos explicado todo lo que debis saber para crear unas tablas de datos en HTML muy
efectivas. Eso es todo! Para terminar, os dejaremos con un par de ideas bsicas que debis recordar:
Es importante que las tablas estn correctamente codificadas para que se puedan leer en todos los
navegadores, dispositivos mviles y todo tipo de soportes. El HTML de la tabla debe ser tan reducido
como sea posible, y para definir los estilos se debe utilizar el CSS. Ms adelante, en este mismo curso,
aprenderis mucho ms sobre el CSS.
Los dispositivos mviles y los usuarios que utilicen lectores de pantalla podrn acceder a las tablas
siempre que su cdigo sea limpio y que se utilicen los atributos como scope y summary, as como el
elemento caption, para anunciar clara y semnticamente para qu sirven las secciones respectivas.
Para la accesibilidad tambin es importante no utilizar celdas vacas para crear espacio en blanco (para
ello debis utilizar el CSS).
Preguntas de repaso
1. Empezad escribiendo el cdigo de una tabla sencilla con slo los 3 elementos de tabla principales:
table, tr y td. Guardadla y abridla en un navegador.
2. Igual que en el segundo ejemplo anterior, aadid un ttulo, ttulos de columna y un pie. Cmo cambia lo
que podis ver en el navegador?
3. Qu podis hacer para que la tabla sea ms accesible para los lectores de pantalla y los dispositivos
porttiles?
4. Ahora cread un archivo CSS. Intentad definir un estilo para los bordes, la separacin y el espaciado de
156/407
celda de la tabla slo con el CSS y sin utilizar ningn atributo del etiquetado HTML. Aadid un color de
fondo y definid el estilo de los tipos de letra.
Pasadlo bien!
Recomendacin HTML 4 para tablas del W3C
Recomendacin CSS 2 para tablas del W3C
"Bring on the Tables" de Roger Johansson
: :
157/407
El texto central de HTML - Formularios HTML: conceptos bsicos
Formularios HTML: conceptos bsicos
Accesibilidad : : :
Jenifer Hanen. 8 de julio del 2008. Publicado en: estructura, enviar, semntico, entrada, accesible
Todo el mundo ha visto un formulario. Todo el mundo ha utilizado alguno. Pero habis codificado alguno?
Un formulario en lnea es cualquier rea en la que se puede introducir informacin en una pgina web; por
ejemplo, introduciendo texto o nmeros en un cuadro de texto, marcando una casilla de seleccin,
seleccionando un botn de opcin o eligiendo una opcin de una lista. Entonces, el formulario se enva al
sitio web pulsando el botn de enviar.
En la web encontraris formularios por todas partes: para introducir nombres de usuario y contraseas en
una pantalla de acceso, para hacer comentarios en blogs, para escribir vuestro perfil en una red social o
para especificar la informacin de facturacin en un sitio de compras.
Crear un formulario es muy sencillo, pero qu hay que saber sobre los formularios para que sean acordes
con los estndares de la web? De momento, si habis ido siguiendo el currculo de estndares web de
Opera, probablemente ya tendris muy claro que es muy importante seguir siempre estos estndares. El
cdigo necesario para crear un formulario accesible y conforme con los estndares no supone ms trabajo
que la creacin de un formulario chapucero.
As pues, empezaremos con el formulario ms bsico y sencillo que podramos utilizar y lo iremos
complicando; en este apartado explicaremos todos los conceptos bsicos que hay que conocer para crear
unas estructuras de formularios elegantes y accesibles con HTML.
20.1. Paso uno: el cdigo bsico
20.2. Paso dos: aadir estructura y comportamiento
20.3. Paso tres: aadir semntica, estilo y un poco ms de estructura
Resumen
Preguntas de repaso
20.1. Paso uno: el cdigo bsico
Empezaremos con un formulario de comentario muy muy bsico, el tipo de formulario que utilizarais en un
sitio web para permitir que la gente pueda dar su opinin sobre algo como un artculo que hayis escrito, o
para permitir que pueda enviaros un mensaje sin saber vuestra direccin electrnica. El cdigo es el
siguiente:
<form>
Name: <input type="text" name="name" id="name" value="" />
Email: <input type="text" name="email" id="email" value="" />
Comments: <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
<input type="submit" value="submit" />
</form>
Si introducs este cdigo en un documento HTML y abrs este documento en un navegador, lo que veris es
lo que aparece en la figura 1.
Figura 1. El primer ejemplo de formulario bsico.
Archivo fuente: "step-1-form.html"
Probadlo; introducid este cdigo en vuestro documento HTML de muestra y cargadlo en un navegador, o id a
158/407
la pgina del primer ejemplo de formulario bsico para navegar hasta el formulario en otra pgina. Intentad
jugar un poco con los diferentes controles del formulario para ver todo lo que podis hacer.
Si leis el cdigo, veris una etiqueta <form> de apertura, una etiqueta </form> de cierre y algunas otras
cosas entre estas dos. El elemento contiene dos campos de texto en los que el lector de la pgina puede
introducir su nombre y su direccin electrnica, y un rea de texto que se puede llenar con un comentario
para enviarlo al propietario del sitio web.
Qu tenemos, pues, aqu?
<form></form>: estas dos etiquetas son esenciales para iniciar y acabar un formulario; sin stas no
tendramos formulario web. Todos los formularios deben empezar y acabar con las etiquetas <form> y
</form> respectivamente.
La etiqueta <form> puede tener algunos atributos, que explicaremos en el paso dos, pero de entrada hay
que tener bien claro que no se pueden anidar formularios dentro de formularios.
<input> (si utilizis un doctype XHTML, debera ser <input />): esta etiqueta define el rea en la que
podris insertar informacin. En nuestro ejemplo anterior, las etiquetas input definen cuadros de texto
en los que los visitantes pueden escribir su nombre y la direccin electrnica.
Todas las etiquetas de entrada deben tener un atributo type para definir el tipo de informacin que
recibirn. Los valores posibles para el atributo son text, button, checkbox, file, hidden, image, password,
radio, reset o submit.
Todas las etiquetas <input> (introduccin de datos) tambin deben tener un nombre (excepto en algunos
casos especiales en los que el atributo value valor tiene siempre el mismo valor que el atributo type
tipo, como por ejemplo type="submit" o "reset"), que debe elegir el codificador. El atributo name
(nombre) informa sobre dnde se envan los datos cuando se enva el formulario (sea a una base de
datos o un mensaje electrnico que se enva al administrador del sitio a travs de un script del servidor)
y sobre el nombre que tiene la informacin del cuadro de introduccin de datos. Al enviar el formulario,
la mayora de los scripts utilizan el atributo name para colocar los datos del formulario en una base de
datos o en un mensaje electrnico que puede ser ledo por una persona.
Por lo tanto, si el elemento <input> sirve para que el visitante del sitio pueda introducir su nombre,
entonces el atributo name sera name="nom", name="name" o name="first name", etc. Si la etiqueta <input>
es para la direccin electrnica, entonces el atributo name sera name="email". Para facilitaros las cosas, y
para facilitarlas a la persona que utilizar el formulario, se recomienda que pongis un nombre
descriptivo al elemento <input>.
Por nombre descriptivo se entiende un nombre relacionado con su funcin, tal como se ha explicado
antes. Si el objetivo es obtener una direccin electrnica, entonces el nombre debera ser name="correo-
electrnico". Si debe ser la direccin postal de la persona que visita el sitio, entonces el nombre
debera ser name="street-address" o name="adrea-postal". Cuanto ms esmerado sea el uso de estos
nombres, no slo lo tendris ms fcil para codificar el formulario e ir realizando el mantenimiento, sino
que la persona o la base de datos que lo reciba tambin lo tendr ms fcil para entenderlo. Debis
dedicar todo el tiempo necesario a pensar bien estos nombres.
Todas las etiquetas <input> tambin deben tener un atributo value. valor se puede dejar en blanco
(value=""), con lo que indicaris al script de procesamiento que inserte cualquier cosa que el visitante
del sitio escriba en este cuadro. En el caso de una casilla de seleccin (checkbox), un botn de
opciones (radio), oculto (hidden), enviar (submit) o cualquier otro atributo, podis definir el valor a fin de
que sea igual a lo que queris que sea por defecto. En otros casos, como por ejemplo enviar u oculto,
debis definir el valor a fin de que sea igual en la entrada final. Ejemplos: value="yes" para s,
value="submit" para un botn de envo, value="reset" para un botn de reinicializacin,
value="http://www.opera.com" para un redireccionamiento oculto, etc.
El atributo value
Algunos ejemplos sobre el uso del atributo value:
1. Un atributo de valor en blanco cuyo valor viene determinado por aquello
que introduzca el usuario:
159/407
El cdigo dice: <input type="text" name="first-name" id="first-
name" value="" />
El usuario introduce: Jenifer
El valor de first-name se enva como "Jenifer" en el momento de
enviar el formulario.
2. Un valor predeterminado:
El cdigo dice: <input type="checkbox" name="mailing-list"
id="mailing-list" value="yes" />
El usuario selecciona la casilla porque se quiere unir a la lista de
correo del sitio web.
El valor de mailing-list se enva como yes en el momento de enviar
el formulario.
Despus de los dos elementos <input> podis ver algo un tanto diferente: el elemento textarea.
textarea ses un espacio nuevo y mejorado muy adecuado para introducir texto. No es lo mismo que el
antiguo cuadro de texto normal de una nica lnea que ofrece nuestro amigo <input>; el elemento
textarea permite introducir mltiples lneas e incluso podis definir cuntas lneas habr disponibles
para introducir texto. Fijaos en los atributos cols y rows; estos atributos son necesarios para todos los
elementos textarea y especifican las columnas y filas que tendr el rea de texto. Estos valores se
miden en caracteres.
Y para terminar, pero no por ello menos importante, hay un elemento <input> especial con el atributo
value="submit". En lugar de mostrar un cuadro de una nica lnea para introducir texto, el envo del
texto introducido mostrar un botn de envo que, al hacer clic en l, enva el formulario al destino que
especifique el formulario para enviar los datos (en este momento esto an no est definido, por tanto el
envo del formulario no har nada).
20.2. Paso dos: aadir estructura y comportamiento
As pues, habis hecho clic en el enlace del formulario #1 anterior, lo habis rellenado y habis hecho clic en
el botn "Enviar"; por qu no ha pasado nada? Y por qu tiene tan mal aspecto y aparece todo en una
lnea? La respuesta es que todava no lo habis estructurado ni habis definido ningn lugar donde enviar
los datos que recoge el formulario.
Volvamos a la mesa de dibujo para crear un formulario nuevo:
<form id="contact-form" action="script.php" method="post">
<input type="hidden" name="redirect" value="http://www.opera.com" />
<ul>
<li>
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" />
</li>
<li>
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="" />
</li>
<li>
<label for="comments">Comments:</label>
<textarea name="comments" id="comments" cols="25" rows="3"></textarea>
</li>
<li>
<input type="reset" value="reset" />
</li>
</ul>
</form>
160/407
Cuando lo abrs en un navegador, este formulario tiene el aspecto que se puede ver en la figura 2:
Figura 2. El segundo ejemplo de formulario; su aspecto es mejor, pero todava
no es perfecto.
Podis jugar con este formulario mejorado en: "step-2-form.html"
Aqu hemos aadido algunas cosas al formulario bsico. Vemoslo para saber qu es lo que hemos hecho:
Dentro de la etiqueta <form> hay algunos atributos nuevos. Hemos aadido un atributo id no slo para
dar un nombre semnticamente descriptivo al formulario, sino tambin para ofrecer un ID nico para
identificarlo de manera que se puedan poner estilos ms fcilmente con el CSS o se pueda manipular
utilizando JavaScript si es necesario. Slo podis tener un id de cada por pgina; en este caso, lo
hemos llamado contact-form (formulario de contacto).
Luces, cmara, accin! Cuando habis pulsado el botn de envo en el primer formulario y no ha
sucedido nada, la razn era que no inclua ninguna accin ni mtodo. El atributo method (mtodo)
especifica cmo se envan los datos al script que los procesar. Los dos mtodos disponibles son "GET"
y "POST". El mtodo "GET" enviar los datos de la URL de la pgina (siempre veris URLs del estilo
http://www.example.com/page.php?data1=value1&data2=value2...; stos son datos que se transportan con
el mtodo "GET"). Si no tenis una razn concreta para utilizar "GET", probablemente es mejor no
utilizarlo si intentis enviar informacin segura, ya que todo el mundo puede ver la informacin mientras
se transmite a travs de la URL. "POST" enva los datos por medio del script que ofrece el formulario;
estos datos se pueden enviar a un mensaje electrnico que se enva al administrador del sitio o a una
base de datos que se almacenar y a la que se podr acceder ms adelante, y no en la URL del "GET".
"POST" es la opcin ms segura y normalmente la mejor.
Si la seguridad de los datos del formulario es un aspecto que os preocupa especialmente, por ejemplo
si enviis un nmero de tarjeta de crdito a un sitio de compras, entonces deberais utilizar el protocolo
https con un protocolo de capa de conexin segura (SSL, secure socket layer). Bsicamente, esto
significa que los datos se enviarn a travs del protocolo https y no del protocolo http. La prxima vez
que paguis algo en un sitio de compras o que utilicis la banca en lnea, observad las URL; es muy
probable que veis https:// en lugar de http://. La diferencia es que una conexin https es un poco ms
lenta de transmitir que una http, pero los datos se encriptan de manera que ningn pirata que hurgue
por ah pueda entender nada de los datos mientras estn en trnsito. Hablad con vuestro proveedor de
servicios web para saber cmo os puede ofrecer una conexin con https y SSL.
El atributo action (accin) especifica el fichero de script al que se deben enviar los datos del formulario
para su procesamiento. Muchos proveedores de servicios web tienen un script genrico de envo de
correo electrnico u otros scripts de formularios disponibles para su uso (podis consultar esta
informacin en la documentacin de vuestro proveedor de servicios web) que han adaptado para sus
servidores. Por otra parte, podis utilizar un script de servidor que vosotros mismos o alguien ms haya
creado para ofrecer vuestro formulario. La mayora de las veces se utilizan lenguajes como PHP, Perl o
Ruby para crear un script que procesar el formulario; por ejemplo, podis enviar un mensaje
electrnico que contenga la informacin del formulario, o introducir la informacin del formulario en una
base de datos que se almacenar para su uso en el futuro.
El alcance de este curso no nos permite explicaros la manera de redactar un script de servidor ni
ensearos a escribir un cdigo de servidor por vuestra cuenta; os deberis limitar a preguntar a vuestro
proveedor de servicios web qu es lo que os ofrece o a haceros amigos de un buen programador.
Aqu os damos unos cuantos recursos para empezar a introduciros en este campo en caso de que
queris investigar los scripts de servidor:
Perl: http://www.perl.com/
PHP: http://www.php.net
Documentacin PHP sobre formularios: http://uk3.php.net/manual/en/tutorial.forms.php
161/407
Python: http://python.org/
Ruby: http://www.ruby-lang.org
Sendmail: http://www.sendmail.org/
SP.NET: http://www.asp.net/
La segunda lnea que hemos aadido a nuestro formulario del paso dos es el campo de entrada
"oculto", que es un redireccionamiento. Qu?
Con el objetivo de separar la estructura del etiquetado por una parte y la presentacin y el
comportamiento por otro, lo mejor es utilizar el script que ofrecer el formulario tambin para redirigir al
usuario una vez que el formulario ya se haya enviado. Lo que no queris de ninguna de las maneras es
que los usuarios se encuentren mirando la pgina del formulario sin saber qu deben hacer una vez lo
han enviado; estamos muy seguros de que todos estaris de acuerdo en que es mucho mejor redirigir al
usuario a una pgina de agradecimiento que incluya unos enlaces sobre "qu debis hacer a
continuacin" una vez que el formulario se haya enviado correctamente. Esta lnea en concreto
especifica que, despus de enviar el formulario, el usuario pasar a la pgina inicial de Opera.
Para mejorar el aspecto del formulario, hemos puesto todos sus elementos en una lista no ordenada
para as poder utilizar el etiquetado para alinearlos y entonces utilizar CSS para pulir su aspecto.
Alguien podra decir que no deberamos utilizar una lista no ordenada para etiquetar un formulario, sino
una lista de definiciones. Otros podran decir que ni siquiera deberamos utilizar una lista, sino el CSS
para aplicar estilos en las etiquetas <label> y <input>. No entraremos en este debate y dejaremos que
hagis investigaciones por vuestra cuenta sobre este tema y lleguis a una conclusin propia sobre qu
es semnticamente ms correcto. Para nuestro ejercicio tan sencillo utilizaremos la lista no ordenada.
Y lo ltimo del paso dos, pero no por ello menos importante, es que hemos etiquetado los elementos del
formulario. Tanto en trminos de significado como de accesibilidad del formulario en una gama amplia
de dispositivos habilitados para Internet, lo mejor es poner etiquetas a todos los elementos del
formulario; comprobad el contenido de los elementos label, ya que estas etiquetas estn ligadas a los
elementos respectivos del formulario mediante los elementos id de los elementos input y textarea que
tienen el mismo valor que los atributos for de las etiquetas. Esto es perfecto porque no slo aporta un
indicador visual sobre la finalidad de cada uno de los campos del formulario en pantalla, sino que
tambin da ms significado semntico a los campos del formulario. Por ejemplo, una persona con
alguna deficiencia visual que utilice la pgina con un lector de pantalla podr ver qu etiqueta
corresponde a cada uno de los elementos del formulario. Los id tambin se pueden utilizar para aplicar
estilos en los campos individuales del formulario con el CSS.
Es muy probable que en este momento os estis preguntando por qu, adems de los atributos name, se
incluyen atributos id como identificadores en los elementos del formulario. La respuesta es que los
elementos input sin atributos name no se envan al servidor y, por lo tanto, son absolutamente
necesarios. Los atributos id son necesarios para asociar los elementos del formulario con sus
elementoslabel correspondientes. Por lo tanto, deberais utilizar los dos.
El segundo formulario tiene un aspecto un poco mejor, pero todava lo podemos seguir mejorando un poco
ms. Ya ha llegado el momento de aadir otros detalles antes de aplicar estilos.
20.3. Paso tres: aadir semntica, estilo y un poco ms de estructura
Ahora terminaremos lo que hemos empezado al principio de este apartado con la versin definitiva de
nuestro formulario de ejemplo:
<form id="contact-form" action="script.php" method="post">
<fieldset>
<legend>Contact Us:</legend>
<ul>
<li>
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" />
</li>
162/407
<li>
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="" />
</li>
<li>
<label for="comments">Comments:</label>
<textarea name="comments" id="comments" cols="25" rows="3"></textarea>
</li>
<li>
<label for="mailing-list">Would you like to sign up for our mailing
list?</label>
<input type="checkbox" checked="checked" id="mailing-list" value="Yes,
sign me up!" />
</li>
<li>
<input type="reset" value="reset" />
</li>
</ul>
</fieldset>
</form>
Cuando se muestra en un navegador, este formulario tiene el aspecto que se puede ver en la figura 3:
Figura 3. El formulario de ejemplo definitivo en todo su esplendor.
Podis ver la versin real de este formulario en un navegador y jugar con
l en: "step-3-form".
Los dos ltimos elementos principales que hemos aadido a este formulario son fieldset (conjunto de
campos) y legend (leyenda). Ninguno de ellos es obligatorio, pero son muy tiles para formularios ms
complejos y para la presentacin.
El elemento fieldset os permite organizar el formulario en mdulos semnticos. En un formulario ms
complejo, podrais por ejemplo utilizar diferentes fieldset para contener informacin de la direccin,
informacin de facturacin, informacin sobre las preferencias del cliente, etc. El elemento legend permite dar
un nombre a cada uno de las secciones fieldset.
Tambin hemos aplicado un poco de CSS a este formulario para dar estilo al etiquetado estructural. Esto se
aplica al tercer formulario de ejemplo con una hoja de estilos externa; para ver los estilos, id a la pgina de
ejemplo. Las dos cosas ms importantes que queramos que hiciera el CSS bsico eran aadir mrgenes
para alinear las etiquetas y los cuadros de introduccin de datos, y eliminar los picos de la lista desordenada.
ste es el CSS que reside en la hoja de estilos externa:
#contact-form fieldset {width:40%;}
#contact-form li {margin:10px; list-style: none;}
#contact-form input {margin-left:45px; text-align: left;}
#contact-form textarea {margin-left:10px; text-align: left;}
163/407
Qu hace este CSS? La primera lnea define el estilo del borde del conjunto de campos para que no ocupe
toda la pgina; tambin podis definir que no haya ningn borde con {border: none;} enen caso de que no
queris ninguno. La segunda lnea aade un margen de 10 pxeles a los elementos li para poner un poco de
espacio visual entre cada uno de los elementos de la lista. Las lneas tercera y cuarta definen un margen
izquierdo en los elementos input y textarea para que no queden a la misma altura que las etiquetas y se
alineen adecuadamente. Si queris ms informacin sobre los estilos de un formulario, podis consultar el
apartado sobre los estilos de los formularios de este currculo de estndares web o el artculo de Nick Rigby
en A List Apart, "Prettier Accessible Forms". Tambin podris encontrar ms informacin sobre los mrgenes
y los bordes ms adelante en este curso.
Resumen
En este apartado hemos explicado los tres pasos ms bsicos para crear un formulario conforme a los
estndares web. El mundo de los formularios incluye muchas ms cosas que no hemos explicado aqu y
que, en caso de que queris, deberis explorar por vuestra cuenta. Existen las teclas de acceso, las casillas
de seleccin y los botones de opcin, los botones de envo y reinicializacin personalizados y los cuadros de
seleccin.
En el formulario anterior del paso tres hemos aadido una casilla de seleccin (checkbox) con el fin de
mostrar que se pueden utilizar los atributos adicionales del elemento input para recoger informacin que
queda ms all de la introduccin de texto en una nica lnea o de la introduccin de texto en un rea de
mltiples lneas. Los valores de los atributos de botn checkbox y radio se pueden utilizar para aadir la
posibilidad de hacer preguntas cortas y dar al lector una lista de opciones entre las que podr elegir (las
casillas de seleccin permiten seleccionar varias opciones, mientras que los botones de opcin slo permiten
seleccionar una). Los botones de opcin pueden ser muy tiles en un formulario de encuesta.
El elemento select, que tampoco se ha tratado en este apartado, se puede utilizar para un men
desplegable con opciones (por ejemplo, una lista de pases o de estados/provincias).
Preguntas de repaso
Ya es hora de que escribis el cdigo de vuestro formulario de contacto.
1. Cread un formulario de contacto sencillo que pida al usuario su nombre, su direccin electrnica y un
comentario.
2. Aadid una casilla de seleccin que pida al lector si se quiere unir a vuestra lista de correo.
3. Utilizad CSS para aplicar estilos al formulario: definid una anchura para el formulario, alinead las
etiquetas a la izquierda, poned un color de fondo en la pgina, etc.
Deberes voluntarios: cuanto ms juguis con los elementos del formulario y con diferentes CSS, mejor
veris todo lo que podis hacer con un formulario de contacto muy sencillo.
Deberes an ms voluntarios: si queris adentraros an ms en este tema, buscad un script o utilizad
uno que os ofrezca vuestro proveedor de servicios web para enviaros el formulario a vosotros mismos.
Si el script para crear el formulario se complica excesivamente, tambin podis intentar sobornar a algn
buen programador...
Cameron Adams, "Accessible, stylish form layout".
http://www.themaninblue.com/writing/perspective/2004/03/24/
Brian Crescimanno, "Sensible Forms: A Form Usability Checklist".
http://www.alistapart.com/articles/sensibleforms/
Simon Willison, "Easier form validation with PHP".
http://simonwillison.net/2003/Jun/17/theHolyGrail/
Las especificaciones. No cualquier especificacin antigua, sino la especificacin W3C.
164/407
Si sufrs de insomnio y un vaso de leche caliente o contar ovejas no os solucionan el problema, podis leer
las especificaciones completas de HTML 4.01 o XHTML 1.0 en w3.org. Es mucho ms barato y ms efectivo
que cualquier otro remedio. Que [insertad aqu el nombre de la deidad] bendiga a los ingenieros de todo el
mundo.
Los amables integrantes de W3.org han definido las diferencias entre "GET" y "POST" y cundo se deben
utilizar:
Y todo el agradecimiento del mundo para el Sr. Rigby:
http://alistapart.com/articles/prettyaccessibleforms
: :
165/407
El texto central de HTML - Elements semntics menys coneguts
Elementos semnticos menos conocidos
Accesibilidad : : :
Mark Norman Francis. 8 de julio del 2008 Publicado en: direccin, sub, sup, samp, abbr
En este apartado presentaremos algunos de los elementos semnticos del HTML ms oscuros y menos
conocidos y utilizados. Hablaremos del etiquetado de cdigo de programacin, interaccin con ordenadores,
citas y abreviaturas, visualizacin de los cambios realizados en los documentos y ms. Acabaremos
comentando algunas de las propuestas de elementos semnticos nuevos que se han hecho en el borrador
de HTML 5.
Nota
Despus de cada ejemplo de cdigo hay un enlace "Archivo fuente", que, al hacer clic
en l, os llevar a la visualizacin del resultado de este cdigo fuente en un archivo
diferente; de esta manera, podris ver ejemplos reales de cmo aparece realmente
este cdigo fuente en el navegador, aparte del cdigo en s.
21.1. Destacar la informacin de contacto
21.2. Lenguajes y cdigo de programacin
21.3. Mostrar la interaccin con ordenadores
21.4. Variables
21.5. Citas
21.6. Abreviaturas
21.7. Instancias definidoras
21.8. Superndice y subndice
21.9. Saltos de lnea
21.10. Lneas horizontales
21.11. Cambios en los documentos (insertar y suprimir)
21.12. Algunos elementos HTML futuro
Resumen
21.1. Destacar la informacin de contacto
El elemento address es probablemente el que tiene el nombre ms equivocado y peor entendido de HTML. A
primera vista, con un nombre como address (direccin) parecera que se utiliza para encapsular direcciones,
ya sean electrnicas o postales, o cosas similares. Esto slo es as en parte.
El significado real de address es ofrecer informacin de contacto del autor o los
autores de la pgina, o de la seccin principal de la pgina, en la que aparece. Esta
informacin puede ser un nombre, una direccin electrnica, una direccin postal o
un enlace a otra pgina con ms informacin de contacto.
Por ejemplo:
<address>
<span>Mark Norman Francis</span>,
<span class="tel">1-800-555-4865</span>
</address>
Archivo fuente: "Simple address example"
En el ejemplo siguiente, la direccin se encuentra en el prrafo del pie de pgina y es un enlace hacia otra
pgina del sitio web. La informacin de contacto ampliada de la pgina a la que apunta este enlace puede
contener muchos ms datos, y de esta manera no hay que repetirla una y otra vez en el sitio web.
166/407
<p class="footer"> Copyright 2008</p>
<address>
<a href="/contact/">Mark Norman Francis</a>
</address>
Archivo fuente: "Advanced address example"
(Evidentemente, si el sitio web tuviera ms de un autor, se podra utilizar este mismo patrn y definir enlaces
hacia pginas de contacto diferentes para los diferentes autores.)
Lo que es incorrecto es utilizar el elemento address para indicar cualquier otro tipo de direcciones, como lo
que podis ver en la pgina web de ejemplo incorrecto.
<p> Our company address: </p>
<address>
Opera Software ASA,
Waldemar Thranes gate 98,
NO-0175 OSLO,
NORWAY
</address>
Archivo fuente: "Incorrect address example"
(Evidentemente, si Opera asumiera la responsabilidad colectiva por el artculo, este cdigo sera correcto
aunque nosotros, y no todo el personal de Opera, furamos los autores reales de esta pgina en concreto.)
Para cualquier direccin general, podis utilizar lo que se conoce como "microformato" para indicar que un
prrafo contiene una direccin. Encontraris ms informacin sobre los microformatos en otros artculos de la
pgina web de Opera.
21.2. Lenguajes y cdigo de programacin
El elemento code se utiliza para indicar el cdigo informtico o los lenguajes de
programacin, como PHP, JavaScript, CSS, XML y otros. En el caso de muestras
cortas dentro de una frase, simplemente debis rodear el elemento con el elemento
code, como por ejemplo:
<p>It is bad form to use event handlers like
<code>onclick</code> directly in the HTML.</p>
Archivo fuente: "First code example"
En caso de muestras de cdigo ms grandes que pueden ocupar mltiples lneas, podis utilizar un bloque
preformateado, tal como se explica en el apartado Etiquetado del contenido de texto en HTML.
Ved tambin
Aunque no hay ningn mtodo definido para indicar el lenguaje de programacin o el cdigo informtico
dentro del elemento code, podis utilizar el atributo class. Una prctica muy habitual (que se menciona en el
borrador de HTML 5) es utilizar el prefijo language- (lenguaje) y entonces aadirle el nombre del lenguaje.
As pues, el ejemplo anterior se convertira en:
<p>It is bad form to use event handlers like
<code class="language-javascript">onclick</code>
directly in the HTML.</p>
Archivo fuente: "Second code example"
Algunos lenguajes de programacin tienen nombres que no se pueden representar fcilmente en clases,
como por ejemplo C#. La manera correcta de escribir este nombre sera class='language-c\#', que puede
167/407
resultar confuso y se puede escribir mal con mucha facilidad. Aconsejaramos utilizar una clase consistente
slo en letras y guiones y deletrearla completamente. As pues, en este caso se podra utilizar
class='language-csharp'.
21.3. Mostrar la interaccin con ordenadores
Los dos elementos samp y kbd se pueden utilizar para indicar la entrada y la salida
de la interaccin con un programa informtico.
Por ejemplo:
<p>One common method of determining if a computer is connected
to the internet is to use the computer program <code>ping</code>
to see if a computer likely to be running is reachable.</p>
<pre><samp class="prompt">kittaghy%</samp> <kbd>ping -o google.com</kbd>
<samp>PING google.com (64.233.187.99): 56 data bytes
64 bytes from 64.233.187.99: icmp_seq=0 ttl=242 time=108.995 ms
--- google.com ping statistics ---
1 packets transmitted, 1 packets received, 0% packet loss
round-trip min/avg/max/stddev = 108.995/108.995/108.995/0.000 ms
</samp></pre>
Archivo fuente: "Computer interaction example"
El elemento samp indica un ejemplo de la salida de un programa informtico. Tal como se puede ver en este
ejemplo, con el atributo class se pueden indicar diferentes tipos de salidas. A pesar de ello, no hay ninguna
convencin que se haya adoptado de una manera general sobre el tipo de clases que se debe utilizar.
El elemento kbd indica la entrada por parte del usuario que interacta con el ordenador. Aunque
tradicionalmente estas entradas se hacen desde el teclado (y por ello se utiliza la contraccin kbd, del ingls
keyboard teclado), tambin se debe utilizar para indicar otros tipos de entradas, como por ejemplo por
voz.
21.4. Variables
El elemento var se utiliza para indicar variables en el contenido textual. Esto puede
incluir expresiones matemticas algebraicas o dentro del cdigo de programacin.
Por ejemplo:
<p>The value of <var>x</var> in
3<var>x</var>+2=14 is 4.</p>

<pre><code class="language-perl">
my <var>$welcome</var> = "Hello world!";
</code></pre>
Archivo fuente: "Variables example"
21.5. Citas
El elemento cite (cita) se utiliza para indicar de dnde procede el contenido
prximo; cuando se cita a una persona, un libro u otra publicacin, o se remite al
visitante de manera general a otra fuente, esta fuente debera estar dentro de un
elemento cite.
168/407
Por ejemplo:
<p>The saying <q>Everything should be made as simple as possible, but not
simpler</q> is often attributed to <cite>Albert Einstein</cite>, but it is
actually a paraphrasing of a quote which is much less easy to understand.</p>
Archivo fuente: "Citations example"
21.6. Abreviaturas
Los elementos abbr y acronym se utilizan para indicar dnde hay abreviaturas y
ofrecen un mtodo para desarrollarlas sin interrumpir innecesariamente el flujo del
documento.
El texto de la abreviatura se encuentra dentro del elemento abbr y la versin completa se sita dentro del
atributo title, es decir:
<p>Styling is added to <abbr title="Hypertext Markup Language">HTML</abbr>
documents using <abbr title="Cascading Style Sheets">CSS</abbr>.</p>
Archivo fuente: "Abbreviations example"
Un acrnimo es un tipo de abreviatura, con la diferencia de que el resultado es aceptado como si fuera una
palabra y se lee como tal. Un ejemplo de acrnimo podra ser radar, que es una palabra formada a partir de
la frase Radio Detecting And Ranging 'deteccin y medida de la distancia por radio). Aunque la especificacin
HTML 4.01 acepta los elementos abbr y acronym, la verdad es que no siempre queda perfectamente claro
cul es el que hay que utilizar.
Internet Explorer (antes de la versin 7, y la 7 no pone el subrayado de puntos bajo las abreviaturas igual
que hacen otros navegadores) no reconoce el elemento abbr, pero s acronym. Desafortunadamente, los
acrnimos son un subgrupo de abreviaturas y es incorrecto etiquetar algo como "HTML" con el elemento
acronym.
Por otra parte, en el borrador de HTML 5, el elemento acronym ha desaparecido y se propone estandarizar
abbr para ambos casos, ya que cualquier acrnimo no deja de ser una abreviatura vlida.
Lo mejor que se puede hacer es evitar utilizar acronym y utilizar siempre abbr en todo el cdigo. Si debis
aplicar algn estilo visual a abbr, podis poner un span en su interior y aplicrselo en lugar de aplicarlo a abbr,
con lo cual todos los navegadores aplicarn estos estilos visuales.
Ved tambin
Daremos ms detalles sobre los estilos de texto en el apartado 29 del mdulo "CSS".
21.7. Instancias definidoras
Existe cierta confusin sobre el uso adecuado de dfn, que se describe en la
especificacin HTML como "la instancia definidora del trmino incluido". Este
concepto es muy parecido a la idea del elemento dt (trmino de definicin) utilizado
en las listas de definiciones.
La diferencia es que el trmino utilizado en dfn no debe formar parte de una lista de trminos y definiciones y
que se puede utilizar como parte del flujo de texto normal, incluso en un estilo de prosa conversacional.
Veamos, pues, un ejemplo del uso de dfn:
<p><dfn>HTML</dfn>: HTML significa "HyperText Markup Language". Es el
llenguatge que es fa servir per descriure el contingut de documents web.</p>
Aparece el trmino HTML seguido inmediatamente de su definicin, con lo cual es el lugar ideal para utilizar
169/407
el elemento dfn. Lo deberais utilizar slo una vez en una pgina, en el punto en el que se define el trmino
por primera vez; de todas maneras, los trminos se deben definir slo una vez en una pgina, por lo que no
es demasiado problemtico.
Todo eso est muy bien, pero un ejemplo aislado no es demasiado prctico; el uso de dfn se recomienda
cuando una abreviatura se utiliza ms de una vez en una pgina. Por ejemplo, en el mdulo "Fundamentos
del HTML" de este curso, la abreviatura HTML apareca ms de cuarenta veces. Utilizar el cdigo <abbr
title="HyperText Markup Language">HTML</abbr> todas y cada una de las veces que se utiliza esta abreviatura
sera un despilfarro de ancho de banda, sera visualmente muy molesto y para los usuarios de lectores de
pantallas sera probablemente muy pesado y aburrido, ya que HTML se expande una y otra vez aunque ya
se ha explicado qu significa. En lugar de ello, lo que se podra hacer es insertar el cdigo en el punto en el
que se define por primera vez para los lectores:
<p><dfn><abbr>HTML</abbr></dfn> ("HyperText Markup Language") is
a language to describe the contents of web documents.</p>
Archivo fuente: "First defining instances example"
Entonces, cada vez que se utilice HTML se puede etiquetar simplemente como <abbr>HTML</abbr>. As, un
agente de usuario podra poner a disposicin del usuario algn mtodo para recuperar la instancia definidora
de la abreviatura. Desafortunadamente, hoy por hoy no existe ningn agente de usuario que lo haga, ni
siquiera los lectores de pantalla. Por lo tanto, sera mejor utilizar tambin el atributo title para ofrecer esta
informacin:
<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>
("HyperText Markup Language") is a language to describe the contents of web
documents.</p>
Archivo fuente: "Second defining instances example"
Ahora, sin embargo, hemos doblado el trmino ampliado para HTML, lo cual puede ser un problema para los
usuarios de lectores de pantalla. No obstante, el hecho de dejar la ampliacin visible provoca que el
documento sea menos til para los usuarios videntes, que en prcticamente todos los casos sern la
mayora.
Creemos que ste es un compromiso aceptable cuando slo hay una o dos abreviaturas que necesitan una
definicin (en pginas que exigen un nmero mayor de definiciones, quiz sera mejor crear una seccin de
glosario o una pgina en la que se pueda utilizar el etiquetado ms riguroso de las listas de definiciones). Si
esto es un tema que os afecta, el cdigo podra ser:
<p><abbr title="HyperText Markup Language">HTML</abbr>
(<dfn>HyperText Markup Language</dfn>) is a language to
describe the contents of web documents.</p>
Archivo fuente: "Third defining instances example"
No obstante, el agente de usuario debera tener algn mtodo para conectar la definicin con todas las
apariciones del trmino definido. Actualmente, no hay ningn navegador que haga algo til con dfn, aunque
sigue siendo un vnculo til para aplicar estilos con CSS. La solucin propuesta anteriormente es
actualmente la mejor que tenemos.
ste es un caso muy desgraciado de una especificacin que se ha creado sin unas directrices claras sobre
cmo se debe utilizar un elemento; probablemente no se bas en ningn uso de este elemento en el mundo
real, ya que en caso contrario habra algn mtodo para combinar el trmino con su descripcin o definicin
completa. La especificacin HTML 5 entra en muchos ms detalles sobre el uso de dfn, pero sigue siendo
slo un borrador y todava no se puede utilizar en la web.
21.8. Superndice y subndice
Para etiquetar una parte de un texto como superndice o subndice (ligeramente por
encima o por debajo del resto del texto) hay que utilizar los elementos sup y sub.
170/407
Algunos lenguajes necesitan estos elementos para el uso correcto de las abreviaturas y se pueden utilizar
para etiquetar contenido matemtico de poca envergadura, ya que as se evita recurrir a MathML (un
lenguaje de marcas matemtico especfico pero bastante complicado creado con el nico objetivo de
etiquetar frmulas matemticas complicadas).
Un ejemplo de los dos tipos:
<p>The chemical formula for water is H<sub>2</sub>O, and it
is also known as hydrogen hydroxide.</p>
<p>The famous formula for mass-energy equivalence as derived
by Albert Einstein is E=mc<sup>2</sup> energy
is equal to the mass multiplied by the speed of light
squared.</p>
Archivo fuente: "Superscript and subscript example"
21.9. Saltos de lnea
Teniendo en cuenta el modo como HTML define el espacio en blanco, no es posible controlar el lugar al que
saltarn las lneas de texto (por ejemplo, etiquetar una direccin postal como un nico prrafo pero querer
que tenga un aspecto visual en el que cada parte de la direccin aparezca en una lnea independiente)
simplemente apretando la tecla de retorno mientras se va escribiendo el texto.
Con el elemento br es posible introducir un salto de lnea en el documento. No
obstante, slo se debera utilizar para forzar saltos de lnea en los lugares en los
que sea estrictamente necesario, y nunca para aplicar ms espaciado vertical entre
prrafos o similares en un documento; eso se debera hacer con CSS.
Algunas veces puede ser ms fcil utilizar un bloque de texto preformateado en lugar de insertar elementos
br. O, si queris que una parte concreta de un texto aparezca en una lnea independiente, aunque eso es
puramente una cuestin de estilo, podis poner esta parte en un elemento span y definirla a fin de que se
muestre como un elemento de bloque.
As, por ejemplo, podis escribir la direccin de contacto de Opera que hemos visto antes en este apartado
cuando hablbamos sobre el elemento address de la siguiente manera:
<p>Our company address: </p>
<address>
Opera Software ASA,<br>Waldemar Thranes gate 98,<br>
NO-0175 OSLO,<br>NORWAY
</address>
Archivo fuente: "Line breaks example"
Evidentemente, si escribs en XHTML en lugar de HTML, el elemento debera ser autocerrado, as:
<br />.
21.10. Lneas horizontales
Las lneas horizontales se crean en HTML con el elemento hr. Este elemento
inserta una lnea en el documento que representa un lmite entre secciones
diferentes.
Algunos dicen que ste es un efecto inherentemente no semntico y puramente visual y de presentacin,
pero de hecho hay precedentes en la literatura que justifican la existencia de un elemento as. En un captulo
(que se podra describir como una seccin de un libro) en ocasiones aparece una lnea horizontal entre
escenas que tienen lugar en tiempos y/o lugares diferentes. En la poesa tambin se utilizan algunas
separaciones decorativas para delimitar las diferentes estrofas del poema.
Ninguno de estos usos justificara la existencia de un elemento de encabezamiento nuevo, que es la manera
171/407
aceptada de marcar los lmites entre secciones de un documento.
El elemento hr no tiene ningn atributo y su estilo se deber definir con el CSS en caso de que el aspecto
por defecto no sea satisfactorio.
Tambin, igual que en el salto de lnea, si escribs en XHTML y no en HTML deberis utilizar la forma
autocerrada: <hr />.
21.11. Cambios en los documentos (insertar y suprimir)
Si se han introducido cambios en un documento desde la primera vez que estuvo disponible, podis marcar
estos cambios para que las personas que lo vuelvan a leer o los procesos automatizados puedan saber qu
se ha cambiado y cundo.
El texto nuevo (inserciones) se debe poner dentro del elemento ins. El texto que se
ha eliminado (supresiones) se debe poner dentro del elemento del. Si en un punto
concreto del documento se ha hecho una supresin y una insercin, la manera
correcta de proceder es poner primero el texto suprimido y despus el texto
insertado.
Estos dos elementos pueden tener dos atributos que aportan ms significado a las ediciones.
Si la razn del cambio se explica en la pgina o en algn otro lugar de la web, deberais crear un enlace
hacia este documento o fragmento del atributo de cita. Lo que estamos diciendo en realidad es que "Este
cambio se ha hecho por la razn siguiente".
Tambin podis indicar la hora en la que se realiz el cambio con el atributo datetime. El valor debera ser
una marca horaria conforme al estndar ISO, que normalmente tiene la forma "AAAA-MM-DD HH:MM:SS
HH:MM" (encontraris ms informacin sobre esto en la Wikipedia).
Un ejemplo que utiliza los dos atributos:
<p>We should only solve problems that actually arise. As
<cite><del datetime="2008-03-25 18:26:55 Z"
cite="/changes.html#revision-4">Donald Knuth</del><ins
datetime="2008-03-25 18:26:55 Z"
cite="/changes.html#revision-4">C. A. R. Hoare</ins></cite>
said: <q>premature optimization is the root of all
evil</q>.</p>
Archivo fuente: "Inserting and deleting example"
21.12. Algunos elementos HTML futuros
Tal como ya se ha comentado varias veces en ste y en otros apartados, la versin 5 de HTML an se est
redactando. Esta versin ser la actualizacin ms radical de HTML desde su aparicin. Estudiando los
patrones de uso real de HTML en Internet en lugar de limitarse a pensar en qu podra ser til, es ms que
probable que la semntica de los documentos, que actualmente es poco ms que una convencin, se inserte
directamente en la especificacin.
Algunos elementos de ejemplo que probablemente se introducirn en el HTML y que podran representar una
mejora significativa en la manera de codificar y utilizar los documentos incluyen:
header: contiene el encabezamiento (masthead) de la pgina; normalmente consiste en un logotipo y un
ttulo, quiz una pequea seccin "Acerca de" y alguna navegacin global del lugar, como por ejemplo
enlaces para iniciar sesin/salir/perfil.
footer: contiene el pie de pgina, que normalmente incluye otros enlaces dentro del lugar, el copyright y
otra informacin legal.
nav: contiene los enlaces de navegacin principales de una pgina.
172/407
article: contiene la parte de una pgina que es el rea de contenido principal y excluye todos los
dems elementos de la pgina, como por ejemplo la navegacin, el encabezamiento y el pie de pgina.
aside: contiene la informacin de la barra lateral de un rea concreta de la pgina; tambin se puede
utilizar para destacados o notas dentro del contenido principal.
Hay ms y los podis encontrar en la especificaci HTML 5.
Resum
En este apartado hemos explicado algunos de los elementos semnticos del HTML menos conocidos y que
menos se utilizan. En el apartado siguiente seguiremos examinando el uso correcto de dos elementos
semnticos de HTML semnticamente neutros: div y span.
: :
173/407
El texto central de HTML - Contenedores genricos: los elementos div y span
Contenedores genricos: los elementos div y span
Accesibilidad : : :
22. Contenedores genricos: los elementos div y span
Mark Norman Francis 26 de septiembre del 2008. Publicado en: div, span, agrupar, vnculos, semntico
En este apartado explicaremos cmo y cundo utilizar los dos elementos de HTML que no se utilizan para
describir el contenido. Los elementos span y div no confieren en realidad ningn significado al contenido que
rodean; de hecho, son un mecanismo genrico que permite crear una estructura y unas agrupaciones
personalizadas de elementos en los lugares en los que no hay ningn otro elemento del HTML que resulte
realmente adecuado, a los que entonces se pueden aplicar estilos con CSS o manipular con JavaScript. A
pesar de que los elementos div no aaden ningn significado semntico, se puede considerar que stos
representan una divisin estructural del etiquetado junto con la clase semntica o el nombre de ID
adecuados.
Son "el ltimo recurso" y slo se deben utilizar cuando no hay ningn otro elemento del HTML que cumpla
los requisitos necesarios, ya que no tienen ningn significado para las tecnologas de asistencia, los motores
de bsqueda, etc.
22.1. Semnticamente neutros
22.2. En lnea y de bloque
22.3. Ms explicaciones sobre la agrupacin de contenido
22.4. Informacin adicional
22.5. Enlaces para JavaScript, y tambin CSS
22.6. "Div-itis"
22.7. Semntica inadecuada
22.7.1. Prrafos "genricos"
22.7.2. Elementos presentacionales
Resumen
Preguntas de repaso
22.1. Semnticamente neutros
La mayora de los elementos de HTML existen para describir el contenido, como por ejemplo las imgenes,
las listas o los ttulos, o para ayudar a componer el documento, como por ejemplo head, body, link, meta, etc.
Sin embargo, hay dos elementos que no tienen ningn significado asignado. De la especificacin del HTML:
Los elementos div y span, junto con los atributos id y class, ofrecen un mecanismo
genrico para aadir estructura a los documentos.
Estos dos elementos se pueden considerar como el andamio de HTML. Dan la posibilidad de agrupar el
contenido y de aadir informacin adicional relativa al contenido y vnculos para incorporar estilos e
interactividad. Pero no aaden ningn significado semntico nuevo al documento, ni en s mismos ni de ellos
mismos.
22.2. En lnea y de bloque
Como ya habis aprendido, los elementos de bloque son elementos que ayudan a informar sobre la
estructura de un documento. El elemento div, que es la abreviatura de divisin, es el contenedor genrico de
los bloques. Normalmente se utiliza para rodear otros elementos de bloque con el objetivo de agruparlos.
Tambin se puede utilizar para reunir un grupo de elementos insertados y/o texto que no encajan de manera
lgica bajo ningn otro elemento de bloque, pero debera ser el ltimo recurso.
Ved tambin
Podis ver el subapartado siguiente, donde encontraris una explicacin ms detallada sobre la agrupacin del
174/407
contenido.
El elemento span es el contenedor genrico para los elementos en lnea. Tambin
ayuda a informar sobre la estructura del documento, pero se utiliza para agrupar o
rodear otros elementos insertados y/o texto ms que elementos de bloque.
En un primer momento, la lnea de separacin entre estos dos tipos diferentes podra parecer arbitraria. La
diferencia que hay que tener en cuenta es el tipo de contenido y el modo como debera aparecer al escribirlo
sin ningn estilo. Un elemento div se pone alrededor de un grupo de elementos de bloque; por ejemplo, para
rodear un ttulo y una lista de enlaces para crear un men de navegacin. Un elemento span rodea un grupo
de elementos en lnea o (la mayora de las veces) texto plano. La palabra clave es grupo; si un elemento div
rodea slo un elemento de bloque, o un elemento span slo un elemento en lnea, entonces su uso es
innecesario.
Por ejemplo, observad el uso que se hace de los elementos div y span en el siguiente etiquetado, que es
muy simple:
<body>
<div id="mainContent">
<h1>Ttulo de la pgina</h1>
<p>ste es el primer prrafo de contenido de mi pgina de ejemplo.</p>
<img src="example.gif" alt="Esta imagen es slo un ejemplo, no tiene nada de
especial">
<p>ste es el segundo prrafo de contenido de mi pgina de ejemplo. Es muy
parecido al primero, pero aqu hay una <span id="specialAlert">alerta
especial que queremos colorear y cuyo tamao de texto queremos aumentar
mediante CSS</span>. No se trata de un nfasis estndar, sino ms bien un
estilo, de manera que <em> i <strong> no son del todo adecuados.</p>
</div>
</body>
Ahora podis seleccionar el contenido del interior de los elementos div y span utilizando sus atributos id y
aplicarles estilos y posicionamientos especiales con el CSS.
22.3. Ms explicaciones sobre la agrupacin de contenido
Si observamos el cdigo fuente de muchas pginas de Internet, veremos muchos elementos div anidados
que incluyen algunas metforas habituales en las class y/o id de los elementos; por ejemplo, header, footer,
content, sidebar, etc.
Vuestros nombres de class e id deben ser siempre semnticos, lo cual quiere decir que deberan remitir al
significado/papel del contenido y no limitarse a hacer referencia a su aspecto visual. As pues, por ejemplo,
barraLateral y mensajeAlerta son buenos nombres de class, mientras que columnaIzquierdaRoja y
textoAzulIntermitente no. Qu sucedera si despus quisierais cambiar el color de la barra lateral de rojo a
azul, o su posicin en el sitio web de la izquierda a la derecha? Y si quisierais cambiar vuestros mensajes
de alerta de azules intermitentes a verde sin intermitencia?
Estas divisiones aportan predictibilidad a la hora de crear estructuras de pgina y, seguramente mucho ms
importante, cuando se vuelve a revisar el HTML ms adelante ofrecen pistas sobre la parte de la pgina en
la que os encontris. Una pgina bien dividida se documenta prcticamente en s misma con respecto a sus
intenciones y a su contenido.
Con la buena intencin de dejarlo todo un poco ms claro, ahora veremos una estructura de div de un sitio
web real, concretamente la pgina de inicio de dev.opera.com. Tened en cuenta que este ejemplo de cdigo
no incluye ningn contenido, si dejamos de lado algunos otros elementos que hemos puesto porque son
importantes para la estructura del sitio. Bsicamente, lo que queremos es nicamente reproducir la estructura
real del sitio tal como est definida con los elementos div. En el cdigo siguiente, leed con atencin los
comentarios HTML; los hemos puesto para explicar la estructura del sitio. Mientras vais revisando este
cdigo, abrid la pgina principal de dev.opera.com en una nueva pestaa o ventana del navegador para
175/407
poder ver el aspecto del sitio mientras exploris su estructura.
<body>

<div id="wrap">

<ul id="sitenav" class="hidemobile">
...
</ul>
...

<form action="/search/" method="get" id="search">
<div>
...
</div>
</form>

<ul id="menu">
...
</ul>

<div id="loginbox">
<div id="login">
...
</div>
</div>

<div id="content2">
<div id="main">
...
<div class="major">
...
</div>
<div class="major">
...
</div>
...
</div>
</div>

<div id="side">
...
</div>

<div id="footer">
...
</div>

176/407
</div>
</body>
22.4. Informacin adicional
Algunos contenidos tienen informacin adicional, que es de utilidad para los agentes de usuario y para otros
analizadores, y sta se debe comunicar por medio de un atributo. Los elementos span son a menudo una
buena manera de adjuntar esta informacin al contenido de una pgina web, tal como veris a continuacin.
Un buen ejemplo de esto es un idioma diferente que aparece en un documento. Por ejemplo:
<p><q>Plus a change, plus c'est la mme chose</q> she said.</p>
Aunque el idioma del documento principal es el ingls, la cita es en francs. Esto se indicara mediante el uso
del atributo lang, de la siguiente manera:
<p><q lang='fr'>Plus a change, plus c'est la mme chose</q> she said.</p>
En este ejemplo era muy fcil indicar este cambio de idioma, ya que apareca slo en una cita, con lo cual el
elemento q era perfecto para rodear el contenido. Hay algunos casos, sin embargo, en los que no existe
ningn elemento semntico adecuado fcilmente disponible, con lo cual deberais recurrir a span o div. Por
ejemplo:
<p>A screen reader will read the French word chat (cat) as chat (to talk
informally) unless it is properly marked up.</p>
En este ejemplo, la primera aparicin de la palabra chat, que es una palabra en francs en un documento en
ingls, debera tener esta diferencia indicada a fin de que no se pudiera interpretar como la palabra inglesa
chat. En este caso, la manera correcta de hacerlo es con un elemento span en torno a la palabra chat, ya que
no hay ningn otro elemento HTML adecuado para rodear la palabra francesa (no queremos aadir ningn
nfasis a la palabra, no es una cita, no es un cdigo, etc.). Como es una nica palabra dentro de una frase,
estaremos trabajando con un elemento insertado. Por lo tanto, este ejemplo se debera escribir de la manera
siguiente:
<p> A screen reader will read the French word <span lang='fr'>chat</span> (cat) as
chat (to talk informally) unless it is properly marked up.</p>
sta es la misma tcnica que la utilizada en los microformatos para etiquetar formatos de datos comunes en
pginas web. Podis encontrar mucha ms informacin sobre los microformatos en algunos de los apartados
ms avanzados sobre HTML en dev.opera.com.
22.5. Enlaces para JavaScript, y tambin CSS
Antes ya hemos hablado de cmo se pueden utilizar div y span junto con los atributos id y class para ofrecer
enganches con los que aplicar estilos y posicionamiento CSS en ciertas partes de vuestro contenido. Lo
mismo tambin se puede hacer para aplicar JavaScript a vuestro documento.
Si el JavaScript debe encontrar y manipular un elemento concreto, lo ms habitual es aplicarle un id y
entonces utilizar la funcin getElementById para encontrarlo. En la ltima parte de este curso aprenderis
muchas ms cosas sobre JavaScript.
22.6. "Div-itis"
Una de las cosas que hay que tener en cuenta es un efecto que, entre la comunidad de desarrolladores de
webs, se conoce normalmente como "div-itis".
Es muy fcil aadir estilos mediante muchos elementos div o span anidados, pero es una tentacin en la que
deberamos evitar caer siempre que sea posible. En la mayora de los casos, se pueden aadir estilos o
funciones JavaScript a los elementos ya existentes del documento. El uso de un contenedor genrico debera
177/407
ser el ltimo recurso; es mejor intentar escribir pginas web empezando slo con los elementos semnticos y
aadir contenedores slo cuando sea necesario.
22.7. Semntica inadecuada
En esta seccin exploraremos algunos de los errores ms habituales que se deben tener en cuenta a la hora
de etiquetar el contenido con HTML y que se deben evitar siempre que sea posible.
22.7.1. Prrafos "genricos"
Algunas veces es muy tentador utilizar un elemento p (prrafo) en torno a cualquier bloque de texto, pero eso
no es demasiado correcto. Tal como ya hemos explicado en el apartado anterior sobre el etiquetado del
contenido:
"Si son slo unas cuantas palabras y no una frase propiamente dicha, entonces quiz
sera mejor no etiquetarlo como un prrafo."
Los elementos correctos para rodear contenido textual inconexo que no tiene ninguna otra relacin
semntica cubierta por otros elementos del HTML son div o span (segn la posicin exacta).
22.7.2. Elementos presentacionales
Un consejo especialmente malo que se puede encontrar algunas veces en Internet es el de utilizar elementos
presentacionales cortos, como b o i, como contenedores genricos en lugar de span. La razn aportada es
normalmente una de las dos siguientes:
Los elementos son tres bytes ms cortos, con lo cual ahorran ancho de banda tanto en el HTML como
el CSS.
Los estilos necesarios son slo para el aspecto, y por lo tanto el uso de elementos presentacionales es
correcto en estas circunstancias.
La primera razn es correcta, pero el ahorro es prcticamente insignificante (si no es que utilizis una
cantidad increble de efectos presentacionales), especialmente si tenemos en cuenta la compresin moderna
aplicada por los servidores web en los documentos antes de enviarlos a travs de Internet al navegador.
Esto provoca que los documentos sean mucho ms cortos de lo que puede conseguir cualquier compresin
hecha a mano.
La segunda razn revela una falta de comprensin de lo que significa realmente presentacional en el
contexto del HTML. Los elementos presentacionales describen el aspecto que debe tener su contenido (b
significa simplemente "el texto del interior est en negrita"). No representan ningn vnculo genrico para el
estilo de su interior.
Si se debe aplicar un estilo a una seccin pequea de texto dentro de un prrafo, o si el JavaScript lo debe
usar como destino y no hay ningn elemento semntico aplicable para rodearla, el nico elemento correcto
que se puede utilizar es span.
Resumen
Aqu acaban nuestras explicaciones sobre los elementos span y div; ahora ya deberais entender mucho
mejor cul es su finalidad y ser capaces de utilizarlos con toda confianza. Los apartados del mdulo
"Conceptos bsicos de CSS" se detendrn mucho ms en su uso para crear maquetaciones de pgina y
para otras finalidades.
Preguntas de repaso
1. Cul es la diferencia entre div y span?
2. Decid dos de los usos principales de estos elementos en las pginas web.
3. Observad el cdigo fuente de una de las pginas de vuestro sitio web preferido. Mirad qu estructura
178/407
tiene. Utiliza muchos elementos div y span? Podis ver algo malo o inadecuado en la manera de
utilizarlos? Cmo se podra mejorar?
: :
179/407
El texto central de HTML - Creacin de mltiples pginas con mens de navegacin
Creacin de mltiples pginas con mens de navegacin
Accesibilidad : : :
Christian Heilmann. Publicado en: seleccionar, men, navegacin, mapa, imagen
En este apartado hablaremos sobre la navegacin y mens en sitios. Veris los diferentes tipos de mens y
la manera de crearlos con HTML. Tambin hablaremos sobre la cuestin de la usabilidad y la accesibilidad
de los mens. No entraremos an en la aplicacin de estilos en los mens, pero s que estableceremos las
bases para otro apartado posterior de este curso sobre el CSS.
Ved tambin
Podis ver el apartado 32 del mdulo "CSS" de este curso.
Nota
Podis descargaros cdigos de ejemplo en "menu_examples.zip" para ir siguiendo las
explicaciones; iremos haciendo referencias a ellos a lo largo de este apartado.
23.1. Las herramientas de vuestro men HTML: enlaces, anclas y listas
23.2. La necesidad de flexibilidad
23.3. Diferentes tipos de mens
23.3.1. Navegacin por la pgina (contenido)
23.3.2. Navegacin por el sitio
23.3.3. Mens contextuales
23.3.4. Mapas del sitio
23.3.5. Paginacin
23.4. Cuando las listas no son suficientes: mapas de imagen y formularios
23.4.1. Definir zonas sensibles con mapas de imagen
23.4.2. Ahorrar espacio de pantalla y evitar la sobrecarga de enlaces con formularios
23.5. Dnde poner el men, y ofrecer opciones para saltrselo
Resumen
Preguntas de repaso
23.1. Las herramientas de vuestro men HTML: enlaces, anclas y listas
Con el HTML hay que considerar varios tipos diferentes de mens y sistemas de navegacin, todos ellos
muy relacionados con los elementos link y a (ancla). Para explicarlo rpidamente:
Los elementos link describen relaciones a travs de varios documentos. Por ejemplo, podis decir a un
agente de usuario que el documento actual forma parte de un curso ms amplio que incluye varios
documentos y qu otro documento es el contenido.
Las anclas (tambin conocidas como elementos a) permiten enlazar con otro documento o con una
seccin concreta del documento actual. El agente de usuario no las sigue automticamente; es
necesario que los visitantes las activen con el medio que tengan a su disposicin (ratn, teclado,
reconocimiento de voz, un conmutador, etc.).
Si no habis ledo los apartados anteriores de este curso sobre los enlaces y sobre las listas, os
aconsejamos que los leis, ya que aqu damos por conocida parte de la informacin que encontraris en
estos apartados para as evitar repeticiones.
Ved tambin
Podis ver los enlaces y las listas en los apartados 16 y 18 de este mdulo.
Las anclas y los enlaces no se convierten en mens sin ms; es necesario darles una estructura y aplicarles
180/407
estilos para que tanto el navegador como los usuarios sepan que funcionan como un men de navegacin y
no slo como un grupo de enlaces aleatorios. Si el orden de las pginas no es importante, podis utilizar una
lista no ordenada igual que en el ejemplo de men de lista no ordenada del archivo "unordered.html".
Observad que hemos puesto un id a los elementos ul. Lo hemos hecho para ofrecer un enganche para
aplicarles estilos con el CSS y para aadirles ms adelante un comportamiento especial con JavaScript. Un
id es una manera muy eficaz de permitir que otras tecnologas elijan un elemento concreto con el HTML.
Si el orden en el que los visitantes van pasando por todos los documentos es importante, entonces deberais
utilizar una lista ordenada. Si, por ejemplo, tenis un curso en lnea formado por mltiples documentos y
cada uno parte de aquello que se ha explicado en el anterior, podis utilizar una lista ordenada como la del
ejemplo de lista ordenada del archivo "ordered.html".
El uso de listas para crear mens es ideal por varias razones:
Todo el HTML se encuentra en un nico elemento de lista (ul, por ejemplo), lo cual significa que podis
utilizar la cascada del CSS para aplicar un estilo diferente a cada uno de ellos y que es muy fcil llegar
hasta los elementos en JavaScript bajando desde el nivel superior.
Las listas se pueden anidar, lo cual significa que podis crear fcilmente una navegacin con varios
niveles de jerarqua.
Incluso si no se aplica ningn estilo a la lista, la representacin del HTML por parte del navegador es
lgica y para un visitante es muy fcil ver que estos enlaces van juntos y que forman una nica unidad
lgica.
Las listas se anidan incrustando la lista imbricada al elemento li, y no despus de ste. Podis ver un
ejemplo correcto y uno incorrecto en el archivo "nesting.html".
Tened en cuenta que los navegadores muestran los dos ejemplos de la misma manera.
La visualizacin en el navegador no debera ser nunca un indicador de la calidad
del cdigo.
Una construccin HTML no vlida como la del ejemplo errneo anterior har que sea muy difcil aplicarle
estilos, aadirle comportamiento con JavaScript o convertirlo a otro formato. La estructura desde elementos
UL anidados debe ser siempre <ul><li><ul><li></li></ul></li></ul> y nunca
<ul><li></li><ul><li></li></ul></ul>.
23.2. La necesidad de flexibilidad
Es muy probable que el men de un sitio cambie a menudo; los sitios web tienen tendencia a crecer
orgnicamente a medida que se van aadiendo funciones y que crece la base de usuarios, por lo cual
deberais crear los mens teniendo en cuenta que se aadirn y eliminarn entradas a medida que el sitio
vaya progresando, y tambin que quiz se traducirn a diferentes lenguajes (con lo cual cambiar la longitud
de los enlaces). Tambin os podis encontrar trabajando en sitios en los que el HTML de los mens se crea
dinmicamente utilizando lenguajes del servidor y no HTML esttico. Esto, sin embargo, no significa que el
conocimiento del HTML ya no tenga ninguna utilidad. De hecho, ser cada vez ms importante porque estos
conocimientos se seguirn necesitando para crear las plantillas HTML con las que trabajar el script del
servidor.
23.3. Diferentes tipos de mens
Hay varios tipos de mens que deberis crear en HTML cuando vais trabajando en diferentes sitios web. La
mayora de ellos se pueden crear con listas, aunque algunas veces las restricciones de la interfaz obligan a
seguir otro camino (ya hablaremos de ello ms adelante). Los mens basados en listas que muy
probablemente crearis son los siguientes:
Navegacin por la pgina: por ejemplo, un contenido para una nica pgina con enlaces que conducen
a diferentes secciones de sta.
181/407
Navegacin por el sitio: una barra de navegacin para todo el sitio web (o una subseccin de ste) con
enlaces que conducen a pginas diferentes del mismo sitio.
Navegacin contextual segn el contenido: una lista de enlaces que conducen a pginas estrechamente
relacionadas con el tema de la pgina actual, tanto del mismo sitio como de otros.
Mapas del sitio: listas largas de enlaces que conducen a todas las pginas diferentes de un sitio web;
los enlaces se agrupan en sublistas relacionadas para que sea ms fcil entenderlo todo.
Paginacin: enlaces que conducen a otras pginas que constituyen otras secciones o partes de todo un
conjunto junto con la pgina actual, como por ejemplo parte 1, parte 2 y parte 3 de un artculo.
23.3.1. Navegacin por la pgina (contenido)
Ya hemos hablado de esto un poco en el apartado sobre los enlaces, pero aqu encontraris una descripcin
ms detallada de qu significa la navegacin por la pgina y qu hay que hacer para que funcione.
En el ejemplo relativo a este subapartado de navegacin por la pgina (archivo "inpagenavigation.html")
hemos utilizado una lista de enlaces que conducen a anclas que se encuentran ms abajo en la misma
pgina. Para conectar las anclas, es necesario utilizar un atributo id en los elementos hacia los cuales se
navegar y un atributo href consistente en un smbolo de almohadilla seguido del mismo nombre que el valor
id del ancla a la que queris que conduzca este enlace. Cada una de las secciones de la pgina tambin
tiene un enlace para volver al men que funciona de la misma manera, pero que conduce de vuelta al men.
Tcnicamente, esto es todo lo que necesitis para que este tipo de navegacin funcione sin problemas, pero
Internet Explorer presenta un problema muy molesto que nos obliga a trabajar un poco ms.
Podis comprobar este error vosotros mismos:
1. Abrid el documento con Internet Explorer 6 o 7.
2. No utilicis el ratn, utilizad el teclado para navegar por el documento. Podis pulsar la tecla del
tabulador para pasar de un enlace a otro y la tecla de retorno para activar un enlace; en este caso, para
pasar a la seccin a la que apunta.
3. Aparentemente todo funciona sin problemas; el navegador va hasta el punto de la pgina donde querais
ir.
4. Si volvis a pulsar la tecla del tabulador, lo que debera hacer un navegador sera llevaros a (o marcar)
el primer enlace de la seccin elegida. Internet Explorer, sin embargo, os enviar al principio del men
del principio de la pgina!
La manera de solucionar este problema es muy confusa y tiene que ver con una propiedad especial de
Internet Explorer llamada hasLayout. Podis hacerlo de varias maneras, y todas ellas se explican en el
excelente artculo de Ingo Chao "On having layout". La manera ms sencilla es definir la anchura del
elemento div con CSS, igual que en el ejemplo del archivo "inpagenavigationmsiefix.html". Lo que exige IE
es que el ancla se encuentre en un elemento con hasLayout.
Tener que hacerlo es muy molesto, pero tambin va bien en el caso de que queris aplicar estilos diferentes
a las secciones. Tambin soluciona uno de los problemas de los ttulos en HTML: los ttulos no contienen las
secciones a las que se aplican; simplemente se asume que todo lo que sigue hasta el prximo ttulo forma
parte de la misma seccin del documento. Esto hace que sea imposible aplicar estilos diferentes a las
secciones de un documento sin aadir un <div>. Otros lenguajes de marcas proponen un elemento <section>
con un <title> en su interior, de manera similar a como <fieldset> y <legend> os permiten etiquetar partes
de un formulario.
Navegacin espacial
Tened en cuenta que con Opera la navegacin por los enlaces con el teclado funciona
un tanto diferente; mirad el ejemplo anterior con Opera, mantened pulsada la tecla
Maysculas y utilizad las teclas de cursor para navegar por los enlaces (tambin
funciona con los elementos de los formularios). Esto se conoce como navegacin
espacial.
23.3.2. Navegacin por el sitio
182/407
La navegacin por el sitio es probablemente el tipo de men ms habitual que deberis crear. Es el men de
todo el sitio (o de una subseccin) que muestra tanto las opciones que pueden elegir los visitantes como la
jerarqua del sitio. Para estos mens, las listas son la opcin perfecta, tal como veris en el ejemplo de
navegacin por el sitio del archivo "home.html".
No encontraris demasiadas sorpresas, por lo menos desde el punto de vista del HTML en s. Ms adelante
en este curso hablaremos sobre la aplicacin de estilos a estos tipos de mens con CSS y, en otros cursos
del grado de Multimedia, sobre la manera de aadir comportamiento con JavaScript. Algo importante que hay
que tener en cuenta es el modo de destacar el documento actual del men, con el fin de dar al usuario la
sensacin de estar en un sitio concreto y que se est moviendo de un sitio a otro (aunque en realidad no se
mueve en absoluto, a no ser que utilice algn dispositivo mvil para navegar por la web). Eso es lo que
veremos a continuacin.
1) Dar a los visitantes la sensacin de "Usted est aqu"
La regla principal para el desarrollo de webs y la navegacin es que el documento actual no se debe enlazar
nunca con l mismo, sino que debe ser claramente diferente de las otras entradas del men. Esto es
importante porque da a los visitantes algo a lo que aferrarse y porque les explica dnde se encuentran en su
viaje por el sitio. Hay muchos casos diferentes, como aplicaciones web, los enlaces permanentes
(permalinks) de los blogs y lo que se conoce como sitios web "de una pgina", pero en el 99% de los casos
un enlace hacia el documento que ya estis mirando es redundante y resulta confuso para el visitante.
En el apartado sobre los enlaces ya hemos explicado que un enlace es un acuerdo y una responsabilidad: se
ofrece a los visitantes una manera de llegar a ms informacin que necesitan, pero hay que tener mucho
cuidado porque si el enlace no da a los usuarios lo que quieren, o si tiene un comportamiento inesperado,
perderis credibilidad y su confianza. Si, por ejemplo, ofrecis un enlace que apunta hacia el documento
actual, al activarlo volver a cargarse el documento. Como usuario esto es algo que no esperis: de qu
sirve hacer clic en este enlace? Lo nico que se consigue es que los usuarios queden perplejos.
Por ello, desde el men no debe haber nunca ningn enlace hasta la pgina actual. Podrais eliminar el
enlace o, mejor todava, hacer que deje de actuar como un enlace pero destacarlo (por ejemplo con un
elemento strong); con ello los usuarios tienen una indicacin visual y tambin indica a los visitantes ciegos
que es importante y que es la entrada actual del men.
Podis ver un ejemplo de pgina actual destacada en: "about.html"
2) Cuntas opciones hay que dar a los usuarios en cada momento?
Otra cuestin que hay que tener en cuenta es cuntas opciones queris dar a los visitantes. Muchos de los
mens que veis en la web intentan garantizar que se podr acceder a todas las pginas del sitio desde un
nico men. Aqu es donde entran en juego los trucos de los scripts y del CSS; podis hacer que los mens
sean ms fciles de utilizar ocultando partes hasta que los usuarios seleccionen algunas reas concretas (es
lo que algunas veces se conoce como mens rollover). Desde un punto de vista tcnico es perfecto, pero
este enfoque presenta unos cuantos problemas:
No todos los usuarios podrn utilizar este truco tan inteligente de la manera esperada; los usuarios del
teclado, por ejemplo, debern pasar por todos los enlaces de la pgina con el tabulador para llegar a lo
que buscan.
Para conseguirlo, deberis aadir mucho HTML a cada documento de vuestro sitio, y una buena parte
de ste puede ser redundante en muchas pginas. Si bajo tres niveles dentro de un men de este tipo
para llegar al documento que quiero leer, no es necesario que pueda ver las opciones que me llevan a
una profundidad de 4, 5 y 6 niveles.
Si ofrecis demasiadas opciones a la vez, podis agobiar a los visitantes; a los seres humanos no les
gusta tomar decisiones. Slo debis pensar en todo el tiempo que necesitis para elegir un plato en una
carta de restaurante un tanto larga.
Si en una pgina no hay mucho contenido pero s muchos enlaces, los motores de bsqueda asumirn
que no hay mucha informacin vlida y no le harn demasiado caso, con lo cual ser difcil de encontrar
cuando se hagan bsquedas en la web.
De hecho, la decisin sobre las entradas que pondris en un men es vuestra, ya que los diferentes diseos
exigirn unas opciones diferentes; pero si tenis alguna duda, siempre deberais intentar reducir los mens a
los enlaces hasta las secciones principales del sitio. Siempre podis ofrecer otros mens en los sitios donde
183/407
sea oportuno.
23.3.3. Mens contextuales
Los mens contextuales son enlaces que se basan en contenido del documento actual y ofrecen ms
informacin relacionada con la pgina en la que os encontris. Un ejemplo clsico de esto son los enlaces
"noticias relacionadas" que se suelen encontrar al final de las noticias que leis, como podis ver en la figura
1.
Figura 1. Ejemplo de men contextual: una noticia que ofrece noticias
relacionadas.
Estos mens son un poco diferentes de los mens contextuales de las interfaces de usuario, que ofrecen
opciones diferentes segn el sitio desde el que se accede (como los mens que aparecen con un clic del
botn derecho del ratn o con "Ctrl" + clic en las aplicaciones de escritorio que ofrecen unas opciones
concretas segn el punto en el que se encuentra el puntero del ratn en cada momento).
Los mens contextuales de los sitios web son una manera perfecta de presentar el contenido de otras partes
del sitio; y con respecto al HTML, no son nada ms que otra lista de enlaces.
23.3.4. Mapas del sitio
Los mapas del sitio son exactamente lo que indica su nombre: mapas de todas las pginas diferentes (o de
las secciones principales si hablamos de sitios realmente muy grandes) del sitio. Permiten a los visitantes del
sitio ver rpidamente la estructura general e ir rpidamente donde quieran, incluso si la pgina que necesitan
se encuentra en un nivel muy profundo de la jerarqua.
Tanto los mapas del sitio como las bsquedas en el sitio son una manera perfecta de ofrecer a los visitantes
una opcin alternativa cuando se encuentran perdidos, o de ofrecerles un acceso rpido cuando tienen prisa.
Desde el punto de vista del HTML, pueden ser una lista anidada muy grande llena de enlaces o, en el caso
de sitios web muy grandes, ttulos de seccin con enlaces anidados de las jerarquas especficas de cada
seccin, o incluso formularios de bsqueda para cada una de las secciones.
23.3.5. Paginacin
La paginacin es necesaria cuando hay que ofrecer una manera de navegar por documentos muy grandes
divididos en varias pginas. Encontraris paginacin, por ejemplo, en los archivos de imgenes muy grandes
o en las pginas de resultados de bsqueda (como las de Google o Yahoo).
La paginacin es diferente de otros tipos de navegacin porque normalmente enlaza hacia el mismo
documento, pero con un enlace que contiene ms informacin, como por ejemplo la pgina desde la que hay
que empezar. La figura 2 muestra algunos ejemplos de paginacin:
184/407
Figura 2. Los mens de paginacin permiten que los visitantes naveguen por
grandes conjuntos de datos sabiendo en todo momento dnde se encuentran.
El HTML no es nada revolucionario, ya que no deja de ser otra lista de enlaces con el enlace actual (lo que
indica los datos actuales y el nivel que ocupan en la paginacin) desactivado y destacado (con un elemento
strong, por ejemplo).
La diferencia principal con la navegacin por el sitio es que la paginacin incluye una lgica de programacin
importante. Segn el sitio en el que os encontris de todo el conjunto de datos, deberis mostrar u ocultar los
vnculos previo, siguiente, primero y ltimo. Si tenis un volumen de informacin realmente enorme por el
que navegar, tambin es recomendable ofrecer enlaces a puntos de referencia como 100, 200 y muchas
ms opciones. Por esta razn, muy probablemente no codificaris mens de este tipo en HTML, sino que los
crearis en el servidor. Esto, sin embargo, no hace que cambien las normas; los datos actuales no se deben
enlazar con ellos mismos y no debis ofrecer enlaces que no lleven a ningn sitio.
23.4. Cuando las listas no son suficientes: mapas de imagen y formularios
En el 99% de los casos, las listas ordenadas o no ordenadas son alternativas HTML suficientes para crear
mens, especialmente porque el orden lgico y la anidacin tambin permiten aplicar estilos muy interesantes
con CSS. Sin embargo, hay algunas situaciones que pueden exigir algunas tcnicas de diseo diferentes.
23.4.1. Definir zonas sensibles con mapas de imagen
Una de esas tcnicas es la de los mapas de imagen en el lado del cliente. Los mapas de imagen transforman
una imagen en un men al convertir secciones de una imagen en reas interactivas que se pueden enlazar
con diferentes documentos. El Ejemplo de mapa de imagen asociado a esta seccin convierte una imagen
en un men en el que se puede hacer clic. Probadlo siguiendo el enlace anterior y haciendo clic en las
diferentes secciones del tringulo de la imagen que aparece en la figura 3.
Figura 3. Definiendo un mapa con elementos de rea podis convertir partes de
una imagen en elementos interactivos.
Archivo fuente: "imagemap.html "
Podis convertir una imagen en un men definiendo un mapa con reas diferentes (tambin conocidas como
zones sensibles). Deberis dar al mapa un atributo usemap del elemento img. Observad que funciona
exactamente igual que los enlaces en la misma pgina, lo que significa que el valor del atributo usemap
deber ir precedido de una almohadilla.
185/407
Cada una de las reas debe tener varios atributos:
href
Define la URL a la que enlaza el rea (que tambin podra ser un destino en el mismo documento).
alt
Define un texto alternativo por si no se puede encontrar la imagen o si el agente de usuario no acepta
imgenes.
shape
Define la forma del rea. Puede ser rect para rectngulos, circle para crculos o poly para formas
irregulares definidas mediante polgonos.
coords
Define las coordenadas en la imagen que se deben convertir en zonas sensibles; estos valores se miden
desde el vrtice superior izquierdo de la imagen y se pueden medir en pxeles o porcentajes. Para las
reas rectangulares, slo hay que definir el vrtice superior izquierdo y el inferior derecho; para los
crculos deberis definir el centro y el radio; para los polgonos deberis ofrecer una lista de todos los
puntos de vrtice.
Los mapas de imagen no son tan divertidos de definir y escribir como el HTML, y por ello hay herramientas
de manipulacin de imgenes, como Adobe Image Ready o Fireworks, que ofrecen una opcin para crearlos
visualmente (generan automticamente el HTML).
23.4.2. Ahorrar espacio de pantalla y evitar la sobrecarga de enlaces con formularios
Otra tcnica que podis utilizar es crear un formulario con el elemento select. Podis definir las diferentes
pginas como opciones del elemento select, y as los visitantes podrn elegir una opcin y enviar el
formulario para pasar a otras pginas. Encontraris un ejemplo de men de formulario en el archivo
"selectnavigation.html"
La ventaja ms obvia del uso de este tipo de men es que podis ofrecer un montn de opciones sin ocupar
demasiado espacio de la pantalla, ya que los navegadores muestran el men en una lnea; podis ver la
figura 4.
Figura 4. Los mens de seleccin ocupan slo una lnea en la pantalla.
Archivo fuente: "selectnavigationoptgroup.html "
Podis ir ms lejos y agrupar las diferentes opciones del men con el elemento optgroup, tal como podis ver
en el ejemplo del archivo "selectnavigationoptgroup.html "
Entonces aparecer un men con opciones que no se podrn seleccionar (son los nombres de los grupos),
tal como se muestra en la figura 5.
Esta tcnica tiene la ventaja de que ocupa muy poco espacio, pero tambin os obliga a tener un script en el
servidor para enviar a los visitantes a las pginas que han elegido. Para hacer que los enlaces funcionen,
tambin podis utilizar JavaScript, pero no os podis fiar de que el JavaScript est disponible; deberis
comprobar que vuestros usuarios puedan utilizar los mens incluso con el JavaScript desactivado.
186/407
Figura 5. Los mens de seleccin pueden incorporar grupos de opciones que os
permitirn decir a los visitantes qu opciones estn relacionadas entre ellas. As
es tal como aparece en Opera 9.5.
Otra ventaja, aunque menos evidente, es que de esta manera no ofrecis un exceso de enlaces en el mismo
documento. Esto significa que no marearis a los usuarios de tecnologas de asistencia (que normalmente
suelen encontrar todos los enlaces en una lista muy larga). Y tambin significa que los motores de bsqueda
no considerarn los enlaces de vuestra pgina como algo intil, ya que la relacin entre enlaces y texto hace
que el documento parezca un mapa de sitio. No obstante, muchas tecnologas de asistencia pueden generar
un mapa de los enlaces de vuestras pginas; si todos vuestros enlaces importantes se encuentran en un
men de seleccin, existe la posibilidad de que un visitante no los llegue a encontrar nunca. As pues, es
una buena idea ofrecer enlaces de ancla hacia las pginas de destino principales y los mens del elemento
select para ofrecer ms opciones. Los visitantes los podrn utilizar, pero las mquinas como los robots de
los motores de bsqueda no necesitarn saber que existen.
23.5. Dnde poner el men, y ofrecer opciones para saltrselo
Una ltima cosa que cabe mencionar sobre los mens HTML es que la situacin del men es muy
importante. Pensad en los visitantes que no tienen ningn mecanismo de desplazamiento o que no pueden
ver y que, por lo tanto, se fan de la navegacin con el teclado para moverse por el sitio. Lo primero con lo
que se encontrarn cuando carguen el documento es su ubicacin y el ttulo, y a continuacin el documento
se leer de principio a fin detenindose en cada uno de los enlaces para pedir al visitante si los quieren
seguir o no. Otras opciones pueden ser una lista de todos los enlaces o pasar de ttulo a ttulo. Si el men se
encuentra en la parte superior del documento, ser lo primero que encontrar el usuario. El hecho de tener
que pasar por 15 o 20 enlaces antes de llegar al contenido puede ser una tarea realmente molesta. Para ello
hay dos soluciones disponibles. En primer lugar, podis poner el men despus del contenido principal del
documento (si queris, tambin lo podis poner en la parte superior de la pantalla utilizando el CSS). En
segundo lugar, podis ofrecer un enlace para pasar por alto el men. ste no es nada ms que un enlace
colocado antes del men principal y que lleva al principio del contenido, con lo que el visitante, si lo desea,
se puede saltar el men e ir directamente al contenido. Podis aadir otro enlace "ir al men" al final del
documento para as poder volver fcilmente a la parte superior.
Para conocer ms detalles sobre este tipo de enlaces, podis ver ejemplos en: "skiplinks.html"
Los enlaces para saltar el men no slo son tiles para las personas con este tipo de discapacidades, sino
que tambin lo hacen todo ms fcil cuando se navega por un sitio en un dispositivo mvil con una pantalla
pequea.
Resumen
En este apartado hemos explicado los diferentes tipos de mens que probablemente deberis escribir en
HTML. Hemos hablado de:
Por qu las listas con anclas son la estructura HTML perfecta para definir un men.
Por qu es importante no considerar los mens como algo inamovible, sino que hay prever y planificar
los cambios que puedan hacerse.
187/407
Navegacin por la pgina: enlaces hacia secciones del documento actual y de vuelta hacia el men.
Navegacin por el sitio: ofrecer un men que muestre tanto las pginas del sitio actual como su
jerarqua; tambin hemos explicado por qu es importante destacar la pgina en la que se encuentra
actualmente el usuario.
Navegacin contextual: ofrecer enlaces hacia pginas relacionadas de otros puntos del sitio (o de otros
sitios.
Mapas del sitio: como alternativa y herramienta de orientacin para los visitantes que se sientan
perdidos o que lleguen con una necesidad especfica.
Paginacin: una herramienta que permite a los visitantes navegar por un documento dividido en
mltiples pginas.
Mapas de imagen: crear mens grficos poniendo zonas sensibles sobre imgenes.
Mens de formulario: ofrecer muchas opciones sin ocupar mucho espacio de pantalla y sin agobiar a los
visitantes y los motores de bsqueda con demasiados enlaces.
Enlaces para saltar el men y ubicacin del men.
Ms adelante volveremos a hablar de algunos de estos temas en la seccin de CSS de este curso y
explicaremos cmo se puede conseguir que estas estructuras HTML tengan un aspecto atractivo y sean
unos mens todava ms intuitivos para los visitantes.
Preguntas de repaso
1. Por qu es una buena idea etiquetar los mens como listas?
2. Cuando diseis un men de navegacin, qu hay que planificar de cara al futuro?
3. Cules son las ventajas de utilizar elementos select para los mens, y cules son los problemas?
4. Qu se define con los elementos area, y para qu sirve el atributo nohref de un elemento area (no lo
encontraris aqu, deberis investigar un poco en lnea).
5. Cules son las ventajas de los enlaces para saltarse el men?
: :
188/407
El texto central de HTML - Validar el HTML
Validar el HTML
Accesibilidad : : :
24. Validar el HTML
Mark Norman Francis. 26 de septiembre de 2008. Publicado en: estndares, web, w3c, html, validador
Ahora ya habis escrito unas cuantas pginas en HTML y parece que se ven bastante bien, pero hay unas
cuantas cosas que no son del todo correctas. Cul es la mejor manera de encontrar aquello que no
funciona y garantizar que estas pginas (y todas las pginas que escribis en el futuro) se vean
correctamente con todos los navegadores sin ningn error?
La respuesta es la validacin. Hay muchas herramientas disponibles, del W3C y de otros sitios, que os
permiten validar el cdigo de vuestros sitios web. Los tres validadores ms habituales que utilizaris son:
El validador de marcado del W3C: Busca el doctype del (X)HTML que utilizis para el documento que le
dais para comprobar, revisa todo el documento y seala los lugares donde el HTML no sigue
correctamente el doctype (es decir, donde hay errores en el HTML).
El comprobador de enlaces de W3C: Esta herramienta revisa todo el documento que le deis para
comprobar y prueba todos los enlaces que encuentra para garantizar que funcionen (es decir, que los
valores href no apunten hacia recursos que no existen).
El validador del CSS de W3C: Tal como probablemente ya os imaginis, esta herramienta revisa un
documento CSS (o HTML/CSS) y comprueba que el CSS siga correctamente las especificaciones del
CSS.
En este apartado explicaremos el primero de estos tres validadores y la manera de utilizarlo y cmo
interpretar los tipos de resultados tpicos que da. El comprobador de enlaces es muy obvio, y sobre el
validador del CSS no habr que explicar mucho nada ms una vez que hayis ledo este apartado y los
apartados relativos al CSS que encontraris ms adelante en este curso.
Ved tambin
Podis ver los contenidos del mdulo "CSS" de este curso.
24.1. Errores
24.2. Qu es la validacin?
24.3. Por qu validar?
24.4. Los diferentes navegadores interpretan el HTML no vlido de una manera diferente
24.4.1. El "quirks mode"
24.5. Cmo validar las pginas
24.5.1. El validador de HTML del W3C
Resumen
Preguntas de repaso
Otras herramientas que podis utilizar
24.1. Errores
En general, en la programacin informtica hay dos tipos de problemas con el cdigo:
Errores sintcticos, que se dan cuando un error de escritura del cdigo hace que el ordenador sea
incapaz de ejecutar o compilar el programa adecuadamente.
Errores de programacin (o lgicos), que se dan cuando el cdigo no refleja completamente la intencin
del programador.
La mayora de los lenguajes de programacin detectan muy fcilmente el primer error, ya que el programa no
se ejecuta o no se compila hasta que se soluciona. Esto provoca que encontrar y solucionar estos tipos de
problemas en los momentos de desconcierto en los que os preguntis: "por qu no hace lo que debera
hacer?" sea mucho ms fcil.
189/407
HTML no es un lenguaje de programacin. Los errores de sintaxis de una pgina web no hacen normalmente
que el navegador web se niegue a abrir la pgina (a pesar de que XHTML suele ser ms estricto que HTML,
por lo menos cuando se sirve como datos application/xhtml+xml o text/xml, segn se quiera; y algunos
doctypes rechazarn el uso de ciertos tipos de elementos HTML). sta es una de las razones principales de
la rpida adopcin y difusin de la web.
El primer navegador web, WorldWideWeb (creado por Tim Berners-Lee) era tambin un editor, y permita
crear pginas web sin tener que aprender HTML. Este editor creaba HTML no vlido. Esto se podra haber
solucionado, pero estableci un precedente importante que an existe en todos los navegadores web
actuales: es ms importante que la gente pueda acceder al contenido que quejarse de errores que la gente
no entender o que no podr solucionar.
24.2. Qu es la validacin?
Los navegadores web aceptarn las pginas web malas (el trmino que utilizamos aqu es "no vlidas") y
harn todo lo que puedan para reproducir el cdigo intentando adivinar cules eran las intenciones del autor,
pero tambin se puede comprobar si el HTML se ha escrito correctamente; de hecho, tal como veris a
continuacin, vale la pena hacerlo. Eso se conoce como "validar" el HTML.
El programa de validacin compara el cdigo HTML de la pgina web con las normas de su doctype y dice si
no se han respetado estas normas y dnde.
Ved tambin
Podis ver el doctype en el apartado 14 del mdulo "Fundamentos de HTML".
24.3. Por qu validar?
Algunos desarrolladores de webs opinan que si una pgina web se ve bien en los navegadores, el hecho de
que no se valide no tiene ninguna importancia. Consideran que la validacin es un objetivo ideal, pero ni
mucho menos, obligatorio.
Esta actitud no deja de ser sabia. La especificacin HTML no es perfecta, y ahora incluso ha quedado un
poco anticuada. Algunos detalles que son perfectamente correctos (como por ejemplo empezar una lista
ordenada en un punto diferente de 1) no son vlidas en HTML.
Ved tambin
Podis ver cmo empezar una lista ordenada en un punto diferente de 1 en el apartado 16 de este mdulo.
Sin embargo, tal como dice el dicho:
"Aprende las normas para as saber cmo infringirlas correctamente."
Hay dos razones muy potentes para validar el HTML mientras lo vais escribiendo.
Las personas no son perfectas, igual que tampoco lo es el cdigo; todos cometemos errores, y vuestras
pginas web sern de una calidad superior (es decir, funcionarn mejor) si los eliminis.
Los navegadores cambian. En el futuro es muy probable que los navegadores sean menos
condescendientes cuando analicen un cdigo no vlido, y no al revs.
La validacin es vuestro sistema de alerta precoz ante la introduccin de problemas en vuestras pginas que
entonces se pueden manifestar de maneras realmente interesantes y difciles de determinar. Cuando un
navegador encuentra cdigo HTML no vlido, debe tomar una decisin bien fundamentada sobre cules
eran vuestras intenciones, y los diferentes navegadores pueden llegar a respuestas diferentes.
24.4. Los diferentes navegadores interpretan el HTML no vlido de una
manera diferente
190/407
El HTML vlido es el nico contrato que tenis con los fabricantes de los navegadores. La especificacin de
HTML dice cmo lo deberais escribir vosotros y cmo deberan interpretar vuestro documento los
navegadores. Actualmente, la conformidad de los navegadores con los estndares ha llegado al punto en el
que, si escribs un cdigo vlido, todos los navegadores principales interpretarn vuestro cdigo de la misma
manera. Con el HTML eso sucede prcticamente siempre, mientras que los dems estndares se pueden
encontrar con algunas otras diferencias aqu y all con respecto a su aceptacin.
Pero qu sucede si enviis un cdigo no vlido a un navegador? Qu consecuencias tiene? La respuesta
es que entra en accin la gestin de errores del navegador para decidir qu hay que hacer con el cdigo.
Bsicamente, lo que hace es decir: "De acuerdo, este cdigo no se puede validar, pero cmo podemos
presentar esta pgina al usuario final? Llenaremos los huecos de la manera siguiente".
Suena muy bien, no? Si la pgina contiene algunos errores, el navegador llenar los huecos por
vosotros? Pues no exactamente, porque cada navegador hace las cosas a su manera. Por ejemplo:
<p><strong>Este texto debera estar en negrita</p>
<p>Este texto debera estar en negrita? Cmo queda el HTML cuando
se representa?</p>

<p><a href="#"></strong>Este texto debera ser un enlace</p>
<p>Este texto debera ser un enlace? Cmo queda el HTML cuando se
representa?</p>
Los errores son que el elemento strong se encuentra anidado incorrectamente a travs de mltiples
elementos de bloque y que el elemento de ancla no se ha cerrado. Cuando se intenta verlo con diferentes
navegadores, stos interpretan el cdigo de maneras muy diferentes:
Opera convierte los elementos consecutivos en hijos del elemento negrita.
Firefox aade elementos negrita adicionales entre los prrafos que no estaban presentes en el
etiquetado.
Internet Explorer pone el texto "Este texto debera ser un enlace" fuera de la etiqueta de ancla que crea
el enlace.
Nota
Podis encontrar la versin original de este ejemplo en el artculo de Hallvord Steen
"Same DOM errors, different browser interpretations"; si lo leis, encontraris un
tratamiento mucho ms detallado de los errores del HTML e informacin sobre las
herramientas de depuracin.
Ninguno de los comportamientos de los diferentes navegadores es incorrecto; todos intentan reparar los
errores de vuestro cdigo incorrecto. La conclusin es, pues, que hay que evitar siempre que sea posible el
etiquetado no vlido en vuestra pgina.
24.4.1. El "quirks mode"
Otra cosa que deberais conocer es lo que se conoce como "Quirksmode" o "mode quirks"
(peculiaridades). Es el modo al que pasa el navegador cuando encuentra una pgina con un doctype
incorrecto, o sin doctype. En este modo, el navegador hace todo lo que puede para saber qu serie de
reglas debe utilizar para validar el cdigo y repara los errores lo mejor que sabe. Este modo existe realmente
para permitir la visualizacin de las pginas ms antiguas, y no se debe utilizar nunca para crear una pgina
nueva.
24.5. Cmo validar las pginas
Ahora que ya hemos explorado toda la parte terica que hay detrs de la validacin del HTML, ya podemos
pasar a la parte ms sencilla: la validacin en s. Bien, de hecho, no es exactamente as. Poner una URL en
un validador y ver si la pgina es vlida o no es muy fcil; descubrir qu es lo que est mal y solucionar los
errores no es siempre tan fcil, porque los mensajes de error en ocasiones son algo crpticos. A continuacin
veremos algunos ejemplos.
191/407
Lo que miraremos en este subapartado es lo siguiente (tambin os lo podis descargar o ver su HTML):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Validating your HTML</title>
</head>
<body>
<h2>The tale of Herbet Gruel</h2>
<p>Welcome to my story. I am a slight whisp of a man, slender and fragile,
features wrinkled and worn, eyes sunken into their sockets like rabbits
cowering in their burrows. The <em>years have not been kind to me</em>,
but yet I hold no regrets, as I have overcome all that sought to ail me,
and have been allowed to bide my time, making mischief as I travel to and
fro, 'cross the unyielding landscape of the <a href="http://outer-rim-
rocks.co.uk" colspan="3">outer rim</a>.</p>
<h3>Buster</h3>
<p>Buster is my guardian angel. Before that, he was my dog. Before that,
who knows? I lost my dog many moons ago while out hunting geese in the
undergrowth. A shot rang out from my rifle, and I called for Buster to
collect the goose I had felled. He ran off towards where the bird had
landed, but never returned. I never found his body, but I comfort myself
with the thought that he did not die; rather he transcended to a higher
place, and now watches over me, to ensure my well-being.

<h3>My possessions</h3>
<p>A travelling man needs very little to accompany him on the road:</p>
<ul>
<li>My hat full of memories</li>
<li>My trusty walking cane</li>
<li>A purse that did contain gold at one time</li>
<li>A diary, from the year 1874<li>
<li>An empty glasses case</li>
<li>A newspaper, for when I need to look busy</li>
</ul>
</body>
Archivo fuente: "example_validation.html "
Esta pgina tan sencilla est formada por tres ttulos, tres prrafos, un enlace y una lista no ordenada. Utiliza
el doctype XHTML 1.0 Strict como serie de reglas de validacin. El documento contiene algunos errores, que
descubriris ms adelante con el validador de HTML del W3C.
24.5.1. El validador de HTML del W3C
Como ya hemos comentado, el W3C ofrece un validador en lnea. Os ser muy til poder cambiar entre
diferentes pestaas para ir alternando entre el validador y este apartado mientras vais siguiendo este
ejemplo.
Tened en cuenta que tambin podis validar pginas con el validador del W3C
directamente desde el navegador Opera sencillamente haciendo clic con el botn
derecho del ratn o con un "Ctrl" + clic y seleccionando la opcin "Validate"
(validar).
Veris que el validador tiene tres pestaas en la parte superior del interfaz:
Validate by URI (validar por URI): permite introducir la direccin de una pgina que ya se encuentra en
Internet para su validacin.
Validate by File Upload (validar por carga de archivo): permite cargar un archivo HTML para su
validacin.
192/407
Validate by Direct Input (validar por entrada directa): permite pegar el contenido de un archivo HTML en
la ventana para su validacin.
Sea cual sea el mtodo que utilicis, el resultado debera ser el mismo; creemos que lo ms sencillo es
comprobar la pgina de ejemplo que tenemos aqu copiando todo el cdigo anterior y pegndolo en una
tercera pestaa. Si lo hacis, deberais obtener el resultado que podis ver en la figura 1:
Figura 1. Resultados de la validacin del documento de muestra, 17 errores!
Puede parecer muy preocupante, especialmente si os digo que en este documento no hay realmente 17
errores! No os desesperis; dice que hay ms errores de los que hay realmente porque normalmente un
error al principio de la pgina tiene un efecto en cascada, que hace que el validador informe de ms errores
a medida que va bajando por la pgina, ya que parece que hay ms elementos que no estn cerrados o que
no estn correctamente anidados. Slo es necesario que pensis en el significado del mensaje de error y
que encontris los errores obvios de etiquetado. La siguiente tabla muestra todos los errores que hemos
reparado para poder validar la pgina, junto con las deducciones para averiguar qu era lo que no
funcionaba y la solucin aplicada.
Mensaje de error Deduccin Reparacin
Lnea 8, columna 461: no hay
ningn atributo "colspan"
Sabemos que hay un atributo colspan y que
es un HTML vlido; por lo tanto, por qu
dice que no lo hay? Esperad; quiz quiere
decir que se utiliza en un elemento en el
que no se debera utilizar. Evidentemente,
se utiliza en un elemento a. Mal!
Hemos
eliminado el
atributo
colspan del
elemento a.
Lnea 13, columna 7: el tipo de
documento no permite el
elemento "h3" aqu; falta una
etiqueta de apertura de "object",
"applet", "map", "iframe", "button",
"ins", "del". <h3>My
possessions</h3>
A primera vista tambin parece extraa, ya
que el elemento h3 est cerrado y en este
contexto est permitido. Debis tener en
cuenta que, a menudo, este mensaje de
error significa que hay un elemento no
cerrado cerca...
Hemos
aadido una
etiqueta de
cierre p a la
lnea que hay
sobre el ttulo
en cuestin.
Lnea 19, columna 40: el tipo de
documento no permite el
elemento "li" aqu; falta una
etiqueta de apertura de "ul", "ol",
"menu", "dir". <li>A diary, from the
year 1874<li>
ste es muy fcil; en la lnea indicada
podis ver rpidamente que la etiqueta li
final no tiene la barra inclinada de cierre (/)
Hemos
aadido una
barra
inclinada de
cierre a la
lnea en
cuestin.
Lnea 23, columna 9: no est la En este caso tambin es muy fcil ver que Hemos
193/407
Tabla 1. Los errores reparados para validar la pgina de ejemplo
etiqueta de cierre para "html",
pero se ha especificado
OMITTAG NO. </body>
falta la etiqueta html final. Incluso la
explicacin del mensaje de error empieza
diciendo que quiz habis olvidado cerrar
un elemento.
aadido el
elemento html
final que
faltaba.
Despus de corregir estos errores, el validador da un mensaje bastante satisfactorio, tal como muestra la
figura 2:
Figura 2. Un mensaje satisfactorio que dice que ya se han reparado todos los
errores.
Eso es todo lo que haba que hacer. Slo necesitis no poneros nerviosos y que recordis el doctype que
utilizis para validar la pgina.
Descargaos o mirad la versin correcta del HTML en: " example_validation_fixed.html"
Resumen
Despus de leer este apartado, deberais poder trabajar con comodidad con el validador en lnea de W3C
para validar vuestro HTML. Esto, sin embargo, es slo la punta del iceberg con respecto a la validacin; a
continuacin encontraris una lista con unas herramientas ms complicadas que os pueden ayudar cuando
vuestras pginas se vayan haciendo grandes y se vayan complicando.
Preguntas de repaso
1. Qu sucede cuando un navegador analiza un HTML no vlido?
2. Qu problema hay?
3. El uso de un conjunto de marcos en un documento validado con el doctype HTML 4 Strict generar un
error?
Otras herramientas que podis utilizar
El men de depuracin de Opera
Bookmarklet de validacin general
La extensin Web Developer de Firefox
La barra de herramientas del desarrollador de IE
194/407
Safari tidy
HTML tidy
: :
195/407
Accesibilidad - Conceptos bsicos de accesibilidad
Accesibilidad
Conceptos bsicos de accesibilidad
Accesibilidad : : :
Tom Hughes-Croucher. 26 de septiembre del 2008. Publicado en: wcag, alt, 508, seccin, legal.
Cundo creis un sitio web, la accesibilidad (conseguir que todo el mundo lo pueda utilizar, sean cuales sean
sus capacidades o discapacidades) debera ser una de las preocupaciones ms importantes. En este curso,
hasta ahora la accesibilidad ha estado siempre implcita en todos los ejemplos que hemos visto, incluso
aunque no os dierais cuenta. En este apartado, sin embargo, hablaremos de ello explcitamente para que
podis entender bien qu es, por qu es importante, cmo se garantiza que los sitios sean accesibles y qu
directrices existen para definir los sitios accesibles.
Antes de hablar concretamente de la accesibilidad en la web, empezaremos hablando de la accesibilidad en
general; al fin y al cabo, la accesibilidad no es slo una cuestin asociada a los sitios web; es un aspecto
que, potencialmente, debe tener en cuenta todos los servicios, objetos o tecnologas con los que os
encontris.
Nota
Tened en cuenta que un tema asociado sobre el que os deberais informar es WAI
ARIA: la iniciativa Web Accessibility Initiative's Accessible Rich Internet Applications,
que es bsicamente una metodologa que permite la creacin de aplicaciones con
Ajax/JavaScript ms accesibles. Podis encontrar un artculo muy bueno de
introduccin al ARIA en dev.opera.com.
25.1. Qu es la accesibilidad?
25.2. Por qu es importante la accesibilidad?
25.2.1. Los aspectos legales de la accesibilidad
25.2.2. Mercados potenciales
25.2.3. Motores de bsqueda
25.2.4. tica y marcas
25.3. Disear pensando en la accesibilidad
25.4. Requisitos de interoperabilidad
25.5. Caractersticas de una pgina web accesible
25.5.1. Estructura semntica
25.5.2. Contenido alternativo
25.5.3. Definir la interaccin
25.6. Estndares de accesibilidad
25.6.1. Directrices de accesibilidad del contenido web 1.0
25.6.3. Seccin 508
25.6.4. Otros estndares
Resumen
Preguntas de repaso
25.1. Qu es la accesibilidad?
Mirad a vuestro alrededor. Es muy posible que veis a otras personas; si no es as, por qu no vais a dar
un paseo rpido? Probablemente lo disfrutaris y os sentar bien. Todas las personas que veris sern
diferentes: algunas tienen el pelo castao, otras no. Algunas tienen los ojos azules, otras no. Otras llevan
gafas, otras no. No hay dos personas exactamente iguales. Algunas diferencias, como el color del pelo o de
los ojos, son puramente estticas; es decir, no afectan de ninguna manera importante a nuestra vida.
Algunas diferencias, como el hecho de llevar gafas, s que la afectan. La accesibilidad es algo muy sencillo,
una filosofa, aunque en algunos pases tambin forma parte de la ley.
La accesibilidad es tratar a todo el mundo igual, sean cuales sean sus capacidades.
196/407
Somos muy conscientes de que esta afirmacin est abierta a interpretacin. La mayora de las discusiones
sobre accesibilidad empiezan hablando sobre la discapacidad. Esto implica que las personas con alguna
discapacidad merecen un tratamiento especial. Pero la accesibilidad no es eso; en realidad es un sntoma del
modo como la gente ha construido tradicionalmente edificios, sitios web y muchas otras cosas.
Cuando se construyen cosas presuponiendo que todo el mundo es igual que nosotros, podis estar seguros
de que siempre funcionarn mal para algunas personas. La gente presupone que la accesibilidad es ayudar
a las personas con alguna discapacidad, ya que la accesibilidad aadida es algo muy presente en nuestra
sociedad. Por ejemplo, muchos edificios que se construyeron slo con escaleras han incorporado de repente
unas rampas baratas y muy feas. Pero la accesibilidad ha sido durante mucho tiempo una cuestin
importante en el diseo militar. Por qu? Pues porque a menudo es vital para la supervivencia; con unas
fuerzas g muy elevadas, los pilotos de los aviones de combate no pueden hacer lo mismo que hacen cuando
estn en el suelo. Si los diseadores no tuvieran en cuenta las necesidades de los pilotos en entornos tanto
de gravedad alta como baja, habra muchos ms accidentes de avin.
Pero qu significa esto para los desarrolladores de sitios web? La respuesta rpida es que debis intentar
ser ms conscientes de las necesidades de todo el pblico potencial que puede visitar vuestro sitio web. Una
respuesta ms larga implicara, por vuestra parte, ser mnimamente conscientes de los diferentes niveles de
capacidades que puede tener la gente y del uso que hacen de los ordenadores. Aplicando las tcnicas que
se describen en este apartado y en otros apartados relacionados podris crear unos sitios web que funcionen
bien con muchas formas de interaccin. Vuestros sitios web deben poder ser utilizados por personas:
Ciegas o con deficiencias visuales graves que escuchen los sitios web utilizando un lector de pantalla o
que los lean en una pantalla braille.
Miopes que aumenten el tipo de letra hasta el 200% de su tamao.
Con discapacidades motrices que no puedan utilizar las manos para manipular un ratn y que, por lo
tanto, utilicen un dispositivo de sealizacin para manipular el teclado o incluso un puntero visual para
manipular el sitio web.
Utilicen ratones de bola u otros tipos de sistemas de control del ordenador menos habituales.
De momento, no es necesario que os preocupis por los detalles concretos de estas interacciones; ya los
iremos viendo paso a paso.
25.2. Por qu es importante la accesibilidad?
La accesibilidad es importante por una razn principal y por muchas otras razones pequeas. La principal es
que todos somos diferentes pero todos tenemos el mismo derecho a utilizar los sitios web, pero hay
muchas otras razones por las que deberais tener en cuenta la accesibilidad a la hora de crear sitios web:
En algunos pases es obligatorio por ley.
No se deben excluir clientes/visitantes potenciales de vuestro sitio web.
Los sitios accesibles suelen estar mejor situados en los motores de bsqueda.
Demostraris una buena tica, algo que los clientes sabrn valorar.
Si creis los sitios web siguiendo los estndares web, no necesitaris hacer prcticamente nada ms
para hacerlos accesibles, lo cual aporta muchas ventajas; adems, tambin hay muchas similitudes
entre los sitios ms accesibles y los sitios ms compatibles con los navegadores de telfonos mviles,
que es otra circunstancia que dificulta el uso de los sitios web, aunque por unas circunstancias
diferentes. De hecho, se han realizado algunos estudios de anlisis de la relacin entre la accesibilidad
de la web y las mejores prcticas del desarrollo de la web mvil; podis ver la pgina del WAI "Web
Content Accessibility and Mobile Web", donde encontraris ms informacin sobre esto.
Las tcnicas que ayudan a la gente con discapacidades benefician a todos los usuarios.
Ahora pasaremos a ver algunos de estos puntos ms detalladamente.
25.2.1. Los aspectos legales de la accesibilidad
197/407
Nota
Es muy importante entender los fundamentos de los aspectos legales, pero si no es
que sois abogados y sabis bien de qu estis hablando, sera necesario que fuerais
con mucho cuidado a la hora de dar una opinin sobre cuestiones legales.
En el Reino Unido, segn la DDA, es ilegal discriminar a las personas discapacitadas a la hora de contratar
trabajadores y ofrecer servicios o educacin. La discriminacin se define como no hacer "ajustes razonables"
para dar apoyo a todo el mundo, sean cuales sean sus capacidades o discapacidades. Esto se aplica,
evidentemente, a los servicios y la educacin disponibles a travs de sitios web.
En Estados Unidos y en la Unin Europea tambin hay exigencias para los sitios web gubernamentales. En
Estados Unidos, los sitios web del gobierno federal (y de algunos gobiernos estatales) deben cumplir la
Seccin 508. La Seccin 508 es un documento que intenta definir los requisitos mnimos para conseguir la
accesibilidad. La Seccin 508 no afecta slo a los sitios web, sino que tambin hace referencia a cualquier
otra tecnologa que puedan utilizar los empleados federales. En Europa, la Comisin Europea ha reconocido
la web Accessibility Initiative (WAI) de W3C y recomienda su uso a todos los Estados miembros. La WAI
publica directrices para sitios web, fabricantes de herramientas de creacin de webs y navegadores web (por
ejemplo, el WCAG, del que hablaremos ms adelante).
25.2.2. Mercados potenciales
Si creis sitios web (o cualquier otra cosa) para un tipo de personas concretas, estaris excluyendo otros
tipos de personas incluso aunque no os deis cuenta de ello, y toda esta gente excluida puede representar
fcilmente una cuota de mercado importante (o incluso mayoritaria). En el ao 2000, la cadena de
supermercados Tesco del Reino Unido puso en marcha un proyecto para crear una versin diferente de su
sitio de comestibles en lnea pensado especficamente para las personas con discapacidades visuales. Julie
Howell, de RNIB, coment que "El trabajo realizado por Tesco.com para conseguir que su servicio de
comestibles fuera ms accesible para las personas ciegas ha dado como resultado un aumento de los
ingresos de 13 millones de libras anuales, unos ingresos que no estaban al alcance de la compaa cuando
el sitio web no era accesible para los clientes ciegos". As pues, si Tesco no hubiera pensado en la gente
con discapacidades visuales, no habra llegado nunca a un mercado de clientes con un valor de 13 millones
de libras como mnimo.
La leccin que debemos extraer es que todo el mundo, sean cuales sean sus capacidades, necesita los
mismos servicios: comestibles, taxis, electricidad, etc. y deben poder disfrutar de las mismas cosas: pelculas,
msica, bares, etc. Presuponer que la situacin vital personal de alguien hace que cambien sus capacidades
o sus deseos de participar en todos los aspectos de la sociedad se ha demostrado una y una otra vez como
un gran error.
25.2.3. Motores de bsqueda
Los motores de bsqueda no son personas. A menudo, cuando alguien crea un sitio web lo hace sin tener en
cuenta cmo se podr encontrar en Google, Yahoo!, etc. Los motores de bsqueda son slo programas
informticos y para indexar la pgina slo pueden utilizar la informacin que pueden entender. Eso les hace
ser muy similares a los lectores de pantalla que pueden utilizar las personas con alguna discapacidad visual.
El ejemplo ms obvio de los efectos que esto tiene sobre el diseo de webs son las imgenes. Los
ordenadores muestran imgenes a partir de una lista con los colores que deben tener todos los pxeles y
envan esta informacin al monitor. Si ponis en una pgina web una imagen que contiene texto, como por
ejemplo un logotipo, el ordenador no tiene ni idea de qu dice el texto y ni siquiera sabe que la imagen
contiene texto. En HTML, el elemento de imagen contiene una manera de describir con texto el contenido de
una imagen, que es el atributo alt. Debis ofrecer un texto para describir todas las imgenes no decorativas
de vuestro sitio, y nunca deberais representar prrafos completos como imgenes (o Flash); las personas
ciegas y los motores de bsqueda no tendrn ni idea de qu dice el texto. Como resultado, la posicin en un
motor de bsqueda (es decir, la facilidad de encontrar vuestro sitio web con motores de bsqueda como
Google) se ver afectada y quedaris innecesariamente fuera de un mercado muy valioso.
25.2.4. tica y marcas
Todo el mundo debera tener en cuenta la accesibilidad, pero esto no quiere decir que todo el mundo lo
haga. Si tenis en cuenta la accesibilidad, estaris actuando en beneficio de la comunidad. Eso es algo de lo
que os podris enorgullecer; si demostris que tenis en cuenta a todos los que integran nuestra sociedad,
conseguiris mejorar mucho vuestra imagen de marca. Como profesionales, nuestra obligacin es intentar
198/407
conseguir los resultados de la mejor calidad posible. En una sociedad que nos valora como personas
individuales, es importante no excluir a alguien por el hecho de que tenga unas necesidades diferentes.
Si segus unos principios responsables y demostris de una manera genuina que los aplicis, podris crear
una imagen de marca extraordinariamente positiva. Las compaas que demuestran que se preocupan por
sus clientes los fidelizarn mucho ms que las que no lo hacen.
25.3. Disear pensando en la accesibilidad
La clave para la accesibilidad es pensar en un problema y decidir solucionarlo para
ms de un tipo de usuarios.
Si pretendis tratar la accesibilidad como algo que ya aadiris una vez que hayis acabado todos los
dems trabajos, slo conseguiris tener algo mal hecho y mal integrado. Necesitaris ms tiempo, no
funcionar bien y tendr un aspecto horrible.
La mejor manera de conseguir una solucin bien hecha es disear la web teniendo en cuenta todas las
necesidades desde el primer momento. Eso no quiere decir que no podis cambiar vuestros planes o aadir
algo que os hubiera pasado por alto, pero deberais intentar ser conscientes de cul es el problema general
que pretendis solucionar con vuestro diseo. En el caso de los sitios web, eso implica crear una solucin
usable por todos los usuarios, incluyendo a quienes quiz no pueden utilizar un ratn, un teclado, un monitor,
etc.
25.4. Requisitos de interoperabilidad
Los requisitos de interoperabilidad pueden variar mucho de una situacin a otra:
A menudo se introducen nuevas tecnologas que no incorporan funciones de accesibilidad.
Ejemplo
El nuevo conector Silverlight de Microsoft no presenta la informacin a travs de
los API de accesibilidad utilizados por los lectores de pantalla y otras tecnologas
de asistencia, aunque s que est previsto incorporar funciones de accesibilidad
en el futuro.
En los casos en los que estas funciones de accesibilidad estn tericamente disponibles, puede ser
necesario un cierto tiempo para que las tecnologas de asistencia las utilicen.
Ejemplo
Los lectores de pantalla ms nuevos funcionan mucho mejor con las
actualizaciones con JavaScript de las estructuras HTML que los lectores de
pantalla ms antiguos.
Incluso cuando ya estn establecidas desde hace mucho tiempo, las caractersticas de accesibilidad
pueden continuar difiriendo entre las distintas plataformas.
Ejemplo
El conector Adobe Flash Player expone desde hace mucho tiempo la informacin
en el API de accesibilidad de Windows, pero no en el equivalente de Apple o
GNOME.
Tambin suele haber un cierto retraso entre la llegada de la tecnologa y su distribucin generalizada.
Actualmente, los navegadores y los conectores suelen ser gratuitos, mientras que las tecnologas de
asistencia mayoritarias pueden llegar a ser muy caras.
Ejemplo
199/407
Uno de los lectores de pantalla ms populares es JAWS, de Freedom Scientific,
para Windows. Prcticamente cada ao aparece una versin nueva. El precio de
JAWS Profesional para el consumidor final es de 1.095 dlares, y aunque os
gastis 200 dlares adicionales para disfrutar de un contrato de mantenimiento de
software para las dos versiones siguientes, las actualizaciones seguirn costando
500 dlares o ms. Por lo tanto, a pesar de que la ltima versin es la 9, todava
encontraris a muchos usuarios de JAWS que utilicen versiones anteriores.
Cuando queris construir sitios para la web pblica, por lo tanto, deberis incorporar una cierta
interoperabilidad con una combinacin muy variada de usuarios y tecnologas. Hay cuatro enfoques posibles:
Mejorar progresivamente vuestro sitio web e ir comprobando la compatibilidad a medida que vayis
avanzando.
Permitir que todos los usuarios puedan desactivar las mejoras problemticas.
Ofrecer versiones alternativas con el mismo contenido o las mismas funciones.
Avisar a los clientes de las tecnologas que deben incorporar y dar ejemplos de compaas que sean
compatibles con estas tecnologas.
En las intranets, la compatibilidad con versiones anteriores y la variedad son un problema mucho ms
pequeo. Una organizacin concreta puede garantizar, por ejemplo, que todos los empleados con
discapacidades tengan acceso a una tecnologa de asistencia que acepte bien el DHTML. En estas
circunstancias, y con las pruebas pertinentes con la tecnologa de asistencia ofrecida, sera razonable tomar
el JavaScript como mnimo.
Sin embargo, la compatibilidad con versiones posteriores y la compatibilidad entre plataformas s que siguen
siendo un problema, por lo que se deberan preferir las tecnologas abiertas y estndar sobre las tecnologas
propietarias y no estndares.
Podrais desarrollar, por ejemplo, una aplicacin de formacin de la intranet para una gran corporacin. Os
han pedido que garanticis que la aplicacin sea accesible, pero no os han especificado ningn estndar al
que os debis adaptar. Hablis con el departamento de informtica y descubrs que todo el mundo tiene la
ltima versin de la Internet Explorer con el JavaScript habilitado y Flash instalado y activado, y tambin que
todo el mundo dispondr de la tecnologa de asistencia moderna necesaria para poder utilizar todos estos
programas. Aunque la compaa pase a una plataforma Unix, seguir habiendo la tecnologa de asistencia
necesaria para el JavaScript, pero el texto y los controles en Flash slo son accesibles desde Windows.
Podrais hacer que el script y el Flash fueran una referencia obligatoria para vuestra aplicacin. Pero decids
utilizar el Flash slo para reproducir vdeo y construir los grupos de controles para el vdeo Flash a partir de
los estndares web, ya que la tecnologa de asistencia slo puede acceder a los controles del Flash desde la
plataforma Windows. As, la aplicacin continuara siendo accesible aunque la compaa migrara a Unix.
Las polticas de TI de la organizacin pueden cambiar, y todos los esfuerzos mejor intencionados para hacer
que las funciones JavaScript sean operativas y para explotar los grupos de funciones de accesibilidad de los
conectores pueden fallar; por lo tanto, contina siendo una buena idea realizar una mejora progresiva de la
referencia tecnolgica a partir de una capa HTML bsica.
25.5. Caractersticas de una pgina web accesible
En este subapartado explicaremos las funciones de accesibilidad diferentes de un sitio web; es decir, qu
debe contener un sitio web accesible. Explicaremos cada una de ellas con detalle.
25.5.1. Estructura semntica
Una de las bases de los estndares de la web es el uso de la estructura semntica en el HTML. La estructura
semntica tambin es sumamente importante para la accesibilidad. Es as porque ofrece un marco de
referencia para la informacin de la pgina. Cuando la gente no puede ver el estilo visual de la pgina, la
estructura semntica ayuda a explicarles varias cosas. Les puede indicar su posicin en la jerarqua del
documento y los modos como pueden interactuar con los diferentes elementos de la pgina; tambin ofrece
nfasis en el contenido textual en los lugares adecuados.
Un buen ejemplo de la importancia de la estructura semntica de un documento para la accesibilidad es la
navegacin. Un men de navegacin bien estructurado es una lista de puntos. Podis etiquetarlo como una
200/407
lista HTML:
<ul>
<li>Entrada del men 1</li>
</ul>
Con unos mens de navegacin estructurados como listas, los usuarios de lectores de pantalla podrn saber
muy fcilmente que es una lista aunque no la puedan ver. Eso es as porque los lectores de pantalla les
dicen que es una lista. Si no utilizis el etiquetado de lista, entonces el lector de pantalla no tiene ninguna
manera de saber que es una lista y no lo puede decir al usuario.
Ved tambin
Podis encontrar ms informacin sobre el uso de la semntica correcta en vuestro HTML en muchos de los
apartados anteriores de este curso, bsicamente en los que hablan del HTML.
25.5.2. Contenido alternativo
Tal como se menciona en el subapartado sobre los motores de bsqueda, es esencial que haya una
alternativa accesible al contenido y la navegacin. El texto se considera la moneda universal del contenido,
pero al respecto hay que hacer una advertencia, tal como veris ms adelante. Un lector de pantalla puede
leer el texto sin ninguna dificultad, se puede hacer ms pequeo o ms grande, se puede modificar el
contraste muy fcilmente y se pueden hacer muchas ms transformaciones. Como el texto es tan fcil de
manipular, todas las formas ms exticas de contenido deberan tener siempre una alternativa basada en
texto. Algunos formatos, como las versiones ms modernas de Flash, ya integran el acceso en texto con el
fin de poder acceder directamente a su contenido textual directamente sin necesidad de tener que ofrecer
una alternativa para todo el soporte.
Ved tambin
Podis ver los motores de bsqueda en el subapartado 25.2.3 de este mdulo.
El nico grupo con discapacidad para el que una alternativa de texto puede no
tener ninguna utilidad es el grupo de personas con discapacidades cognitivas.
La dificultad que presentan las personas con discapacidades cognitivas es que normalmente necesitan un
contenido diferente y no el mismo contenido en un soporte diferente. Con eso no queremos decir que no
haya que hacerlo. La simplificacin del lenguaje y de la terminologa utilizada en vuestro sitio web
representar un beneficio para todo el mundo. Algunos grupos, como la Plain Language Commission,
recomiendan un enfoque de "lenguaje sencillo" para el material que utilizan las compaas para dar a sus
clientes la informacin importante, como los requisitos legales y los trminos y las condiciones. Estos grupos
ofrecen un lxico muy sencillo que contiene los trminos que se pueden utilizar para una comunicacin
efectiva utilizando el lenguaje ms simple posible.
Cmo podis incluir alternativas de texto en vuestro sitio web? El primer paso es identificar los elementos
que todava no son texto. En el HTML hay muchos elementos que todava no son texto. Las imgenes son el
ejemplo ms evidente de esto.
Aqu tenis un ejemplo de uso accesible de una imagen:
<p>An interesting piece of art is Michelangelo's "God creates
Adam" <img src="images/adam.jpg" alt="A painting of a man
reaching up to touch God's hand reaching down. It is cracked with age."
longdesc="adam.html">.</p>
La imagen de este ejemplo forma parte integral del contenido. El atributo alt contiene una breve descripcin
de la imagen para las personas (o para los motores de bsqueda) que quiz no pueden verla correctamente.
El atributo longdesc permite enlazar con una pgina HTML que contiene una descripcin completa de la
imagen. Esto se utiliza normalmente slo para describir imgenes complejas que se utilizan como parte
201/407
importante del contenido. Y tambin tiene el inconveniente de que los navegadores no lo aceptan
completamente. La mayora de las veces slo utilizaris el atributo alt.
Al usar las imgenes para cosas diferentes que no son contenidos, como la navegacin o simplemente como
decoracin visual, las deberais tratar diferente de las imgenes de contenido. Las imgenes utilizadas para
hacer ms atractivos los botones o la navegacin de la pgina deben tener un atributo alt que coincida con
el texto de la imagen. El atributo alt funciona sencillamente como una manera simple para permitir que el
ordenador lea el texto contenido en la imagen (y lo lea a un usuario de un lector de pantalla).
En el caso de las imgenes puramente decorativas, las imgenes utilizadas para el seguimiento de anuncios
o cualquier otra imagen que no tenga en principio ningn inters para el usuario o con el que no tenga que
interactuar, el atributo alt debera quedar vaco. Esto no quiere decir que se deba omitir este atributo, sino
que se debe definir como alt="". Esto es as a causa de una tctica que utilizan los lectores de pantalla para
ayudar a sus usuarios a hacer frente a pginas muy inaccesibles. Cuando una imagen no tiene ningn
atributo alt, especialmente cuando forma parte de un enlace, el lector de pantalla lee la URL de la imagen al
usuario. Lo hace as para que los usuarios puedan saber que es la imagen a partir de la URL, por ejemplo si
la imagen tiene un nombre similar a anadir_al_carrito.gif. As pues, deberais definir alt="" para las
imgenes que sepis que no tendrn ningn inters para el usuario, de manera que los lectores de pantalla
no lean todas y cada una de las URL de las imgenes, lo cual podra llegar a ser muy frustrante para el
usuario del lector de pantalla.
No todas las formas de contenido son tan simples como una imagen. Los soportes ms complejos, como
Flash (los archivos Flash pueden ser sitios web enteros en s mismos) o las pelculas exigen unas
descripciones ms complejas. Las versiones ms recientes de Flash permiten ofrecer alternativas de texto
para los elementos de una pelcula Flash, igual que en el HTML.
25.5.3. Definir la interaccin
Muchas webs actuales implican el uso de tecnologas ms all del HTML. Incluso algo tan bsico como el
CSS se puede utilizar de maneras que hagan que una pgina o una interaccin sean mucho menos
accesibles.
La clave para la accesibilidad de la interaccin se encuentra en el hecho de
empezar con las interacciones ms sencillas y utilizarlas como componentes
bsicos para las interacciones ms complejas.
Nota
Tened en cuenta que el objetivo de este ejemplo es haceros ver la funcin que tienen
los diferentes elementos de las pginas web. Para garantizar que sean accesibles,
deben ser semnticamente solventes en trminos tanto de los elementos HTML como
de las metforas visuales que se utilicen. Si lo encontris todo un poco confuso, podis
volver a leer el ejemplo unas cuantas veces y mirad tambin unos cuantos mens y
otros componentes de pginas web mientras vais comprobando no slo si se utiliza el
HTML correcto, sino tambin si el aspecto del componente tiene sentido en relacin
con su funcin. No podis esperar nunca que un visitante de una pgina web realice
una bsqueda con un cuadro de texto que se llama "Introducid vuestra direccin
electrnica para suscribiros a nuestro boletn informativo", ni tampoco podis esperar
que un visitante vidente pueda localizar contenido de inters si todos los ttulos tienen
el mismo estilo que el texto normal (de manera similar, tampoco podis esperar que un
usuario ciego localice contenido de inters si todos los "ttulos" son en realidad slo
otros prrafos con un tamao de texto ms grande aplicado con el CSS o elementos
font).
Un buen ejemplo de ello es la metfora visual tan utilizada de las pestaas. La metfora de las pestaas se
ha extrado de las carpetas de anillas con clasificadores de temas. Eso se ha trasladado a los ordenadores
para permitir que una nica rea de la pantalla pueda mostrar informacin de varios temas representados
por pestaas conectadas al rea; podis ver un buen ejemplo de pestaas en dev.opera.com, donde
aparecen en la parte superior de la pgina. Hasta aqu todo es razonablemente sencillo. El problema son las
tecnologas utilizadas para crear las pestaas, que normalmente se aplican con JavaScript.
202/407
En cuanto las pestaas se utilizan como parte de una interaccin ms compleja que el simple hecho de
permitir que el usuario seleccione la informacin, la metfora original queda rota, pero a menudo se sigue
utilizando el mismo cdigo para representar las pestaas. En el siguiente ejemplo, el HTML muestra el
aspecto de un control de pestaa que muestra informacin:
<div class="tabcontrol">
<div class="hd">
<ul>
<li><a href="#dogs" class="selected">Dogs</a></li>
<li><a href="#cats">Cats</a></li>
<li><a href="#fish">Fish</a></li>
</ul>
</div>
<div class="bd">
<p id="dogs" class="selected">Some information about dogs.
He dogs tab is the default tab.</p>
<p id="cats">Some information about cats.</p>
<p id="fish">Some information about fish.</p>
</div>
</div>
En este ejemplo, la clase selected se utilizara para especificar qu pestaa debe mostrar el grfico de
"pestaa frontal"; por ejemplo, podis consultar la pestaa "Artculos" de la parte superior de esta pgina que
utiliza este mtodo.
Esta estructura es adecuada para el contenido que transmite informacin. En este ejemplo, la class de
selected se utilizara para indicar qu pestaa es la activa, es decir, la que est abierta y muestra su
informacin; las dems estaran cerradas (es decir, sus prrafos estaran ocultos) hasta el momento de
hacer clic en sus enlaces correspondientes. La pestaa "Dogs" es la pestaa activa por defecto, tal como
muestra la figura 1.
Figura 1. Un control para pestaas muy sencillo que muestra la pestaa 'Dogs'
como la pestaa activa por defecto.
Cuando se hace clic en otro enlace (tal como muestra la figura 2), se utilizar el JavaScript para mover
dinmicamente class="selected" hasta ese enlace; en este momento se aplicar el estilo a esta pestaa para
mostrarla, y la que se mostraba previamente se ocultar.
Figura 2. Ahora se ha hecho clic en un enlace diferente y su pestaa
correspondiente pasa a ser la pestaa activa.
Nota
Encontraris ejemplos reales de estos tipos de control en algunos de los ltimos
apartados sobre el JavaScript, del currculum de estndares web de Opera.
Tambin es muy habitual utilizar pestaas para permitir que los usuarios seleccionen tipos diferentes de
bsquedas. En este caso, si intentis reutilizar el estilo de cdigo del ejemplo previo, el concepto se empieza
a descomponer:
<div class="tabcontrol">
<div class="hd">
<ul>
<li><a href="#dogs" class="selected">Dogs</a></li>
203/407
<li><a href="#cats">Cats</a></li>
<li><a href="#fish">Fish</a></li>
</ul>
</div>
<div class="bd">
<form id="dogs" class="selected" action="search.html"
method="GET"><div><label for="dogsearch"><input type="text"
name="dogsearch" id="dogsearch"><input type="submit"
value="Search for Dogs"></div></form>
<form id="cats" action="search.html" method="GET"><div><label
for="catsearch"><input type="text" name="catsearch"
id="catsearch"><input type="submit" value="Search for
cats"></div></form>
<form id="fish" action="search.html" method="GET"><div>
<label for="fishsearch"><input type="text" name="fishsearch"
id="fishsearch"><input type="submit" value="Search for
fish"></div></form>
</div>
</div>
El uso de la misma estructura de cdigo ya no tiene ningn sentido; en este caso, estn los mismos
elementos form repetidos una y otra vez para que todo encaje con el concepto de sustituir el contenido, lo
que es un despilfarro de etiquetado. En lugar de pensar visualmente, lo importante es pensar en la
interaccin en s. En este ejemplo, ms que seleccionar informacin nueva para ver las pestaas, deberais
cambiar la interaccin del usuario con el formulario de bsqueda. De hecho, lo nico que debe hacer una
pestaa es seleccionar el tipo de animal que busca el usuario. Si lo ponis en prctica, podris crear una
interaccin mucho mejor para todos los usuarios del sitio con un etiquetado ms limpio y ms sencillo de
mantener:
<form action="search.html" method="GET">
<fieldset>
<legend>Search within:</legend>
<ul>
<li><label for="dogs">Dogs</label><input id="dogs" type="radio"
name="animal" value="dog" checked></li>
<li><label for="cats">Cats</label><input id="cats" type="radio"
name="animal" value="cat"></li>
<li><label for="fish">Fish</label><input id="fish" type="radio"
name="animal" value="fish"></li>
</ul>
</fieldset>
<input type="text" id="searchfield" name="search">
<input type="submit" value="Search">
</form>
Si se crea primero la interaccin, el etiquetado es ms limpio y todos los usuarios del sitio obtendrn la mejor
experiencia posible. Cuando hemos empezado ampliando una metfora visual hemos roto rpidamente la
interaccin y hemos creado un etiquetado horrible basado en los supuestos del ejemplo previo. Si
hubiramos utilizado AJAX para insertar el contenido en lugar de tenerlo todo en la pgina, el resultado
habra sido an peor. Los usuarios sin JavaScript habran tenido que cargar una pgina totalmente nueva
para pasar al formulario de bsqueda para gatos o peces. Si pensamos primero en la interaccin bsica
(ms que en el aspecto visual), el problema ser mucho ms sencillo. Ahora podemos seguir manteniendo la
metfora de las pestaas (aunque con unos cuantos estilos y scripts) y utilizar un nico formulario para todas
las bsquedas.
Esto es bsico para entender cmo se debe crear una interaccin accesible. Uno de los puntos positivos de
HTML es que el trabajo ms pesado de conseguir que las interacciones en HTML sean accesibles ya est
hecho. Si no utilizis tecnologas con HTML para romper la metfora, podris conseguir que la mayora de
las cosas funcionen sin muchos esfuerzos para la mayor parte de las personas.
25.6. Estndares de accesibilidad
204/407
En este subapartado revisaremos algunos de los estndares y directrices disponibles que pretenden definir la
accesibilidad de la web y ayudar a los desarrolladores web a crear sitios accesibles. La mayora de estos
sistemas incluyen algn tipo de sistema de lista de control para que los desarrolladores puedan comprobar si
sus sitios cumplen los diferentes criterios de accesibilidad.
El W3C es uno de los principales organismos de estndares de Internet. Su Web Accessibility Initiative (WAI)
public la primera versin de sus directrices para unos sitios web accesibles en el mes de mayo de 1999.
Las directrices de accesibilidad del contenido web (WCAG) son el estndar ms utilizado para la
accesibilidad de la web. Varios organismos gubernamentales, que incluyen a la UE y al gobierno italiano,
recomiendan o exigen el uso de las WCAG 1.0.
Las WCAG 1.0 son un grupo de 14 directrices que intentan resumir los objetivos
necesarios para hacer que una pgina sea accesible.
Cada una de las directrices incluye varios puntos de control, que son la esencia real del documento. Las
directrices explican los conceptos que los autores queran transmitir, pero la validacin se hace con los
puntos de control. Cada uno de los puntos de control est clasificado con una prioridad del 1 al 3 para
identificar su importancia. Con el fin de ajustarse a las WCAG 1.0 hay que cumplir todos los puntos de
control de prioridad 1. El cumplimiento de todos los puntos de control de prioridad 1 da una clasificacin de
conformidad "A". Si, adems, se cumplen todos los puntos de control de prioridad 2, entonces el nivel de
conformidad es "AA". Si se cumplen todos los puntos de control de prioridad 1, 2 y 3, entonces el nivel de
conformidad ser "AAA", que es la clasificacin ms elevada.
Sin embargo, en realidad, las WCAG 1.0 ya se han quedado un poco anticuadas. Muchas compaas
empiezan con una clasificacin de conformidad "A" o "AA" y entonces se dedican a aadir otras directrices,
como por ejemplo la See it Right de RNIB. Las WCAG 1.0 son un buen punto de partida, pero tambin
deberais tener en cuenta otros estndares ms actuales, especialmente si utilizis mucho JavaScript u otras
tecnologas surgidas despus del ao 1999, que fue cuando se publicaron las WCAG 1.0.
Otro dato importante que hay que tener en cuenta sobre el estndar WCAG 1.0 es que fue diseado como
parte de un conjunto de 3 documentos. Otro haca referencia a los "agentes de usuario", que describe a los
navegadores (como Opera) y otras tecnologas adicionales que la gente puede necesitar para utilizar la web
(como lectores de pantalla). El tercero cubra las herramientas de autora, como Dreamweaver o los sistemas
de gestin de contenido; su objetivo es conseguir que estas herramientas hagan una buena parte del trabajo
necesario para acabar teniendo unas pginas web accesibles. Desafortunadamente, esta visin no ha
cuajado y el nico estndar de estos tres que se ha adoptado de una manera generalizada es el WCAG 1.0.
Esto significa que a menudo no se cumplen las expectativas del WCAG 1.0 con respecto a los agentes de
usuario, y que las herramientas de autora hacen una parte muy pequea del trabajo para conseguir unos
sitios web accesibles. Esto no quiere decir que no podis utilizar el WCAG 1.0; sencillamente significa que
slo hace referencia a una parte de los criterios de accesibilidad y que no es la solucin completa.
Una vez publicadas las directrices WCAG 1.0, el W3C ya empez a trabajar con las WCAG 2.0.
Nota
En el momento de escribir este apartado, esta versin actualizada del estndar se
encuentra todava en la fase de borrador. Teniendo en cuenta el proceso que sigue el
W3C, es muy probable que este estndar se publique a principios del 2009.
Las WCAG 2.0 son un poco diferentes, ya que intenta no centrarse tanto en una tecnologa concreta como
las WCAG 1.0; es decir, que se puede aplicar a HTML, CSS, Flash, etc. las WCAG 2.0 se basan en 4
principios de accesibilidad. stos son:
Perceptibilidad
Las personas deben poder acceder al contenido por medio de un soporte que tengan a su disposicin.
Por ejemplo, las personas con problemas deben poder escuchar el contenido.
Operatividad
205/407
Las personas deben poder interactuar con la aplicacin o el contenido de la web.
Comprensibilidad
Las personas que utilicen el contenido y la interfaz de usuario los deben entender.
Robustez
Cualquier solucin ofrecida debera estar disponible en diferentes plataformas o sistemas. Con esto se
pretende evitar que se inventen soluciones que la mayora de las personas no podrn utilizar porque el
hardware/software est restringido o es muy caro.
Aqu es importante decir que no se espera que los sitios web cumplan todos estos requisitos. La tecnologa
de que dispone el usuario tambin debera hacer parte del trabajo. Por ejemplo, se supone que las personas
que lo necesiten ya tendrn un lector de pantalla, y por lo tanto no es necesario que todos los sitios web
ofrezcan una versin de audio del contenido. Pero s que se supone que el sitio web debe ofrecer unas
pginas que se puedan leer utilizando la tecnologa de lectura de pantalla ms habitual con el fin de hacerlo
posible. Esta diferencia es importante, igual que lo es la diferencia entre un sitio web con "widgets de
accesibilidad" (como por ejemplo un botn para aumentar el tamao de la letra) y una pgina web que
funcionar en muchas situaciones diferentes (por ejemplo, varios navegadores y dispositivos que seran
imposibles de prever).
Las WCAG 2.0 tambin son diferentes de las WCAG 1.0 por su enfoque hacia la tecnologa. Como el
estndar es ms agnstico con respecto a la tecnologa y hace referencia a conceptos sobre accesibilidad en
lugar de concretar detalles tcnicos, es importante prestar atencin a los documentos que acompaan el
estndar. El documento "estndar" de WCAG 2.0 ofrecer "la informacin bsica", pero el documento
"tcnicas" ofrece datos slidos y aplicables al desarrollador. ste se divide en tcnicas "generales" (ambiguas
con respecto a la tecnologa) y en detalles concretos para las tecnologas individuales del W3C. El W3C no
escribe documentos para tecnologas propietarias, por lo que deberis encontrar tcnicas para tecnologas
como Flash y Silverlight en otros sitios.
25.6.3. Seccin 508
La Seccin 508 es una ampliacin del American Workforce Rehabilitation Act (Ley Americana de
Rehabilitacin de la Plantilla) de 1973. La versin de la Seccin 508 que se convirti en ley en el ao 1998
cre un proceso que hay que seguir para el abastecimiento del Gobierno Federal de Estados Unidos. Esto
significa que todas las agencias del gobierno de Estados Unidos financiadas con dinero federal deben
cumplir el proceso y las directrices estipuladas en la Seccin 508. Estas directrices hacen referencia tanto a
la accesibilidad de la web, como a otras cuestiones de accesibilidad relacionadas con los ordenadores y las
comunicaciones electrnicas. Sea lo que sea lo que hayis odo, no existe ninguna ley federal que obligue a
otras organizaciones ms all de las mencionadas a utilizar la Seccin 508. No obstante, algunos estados y
compaas de Estados Unidos utilizan la Seccin 508 para definir "accesibilidad" para sus procesos de
abastecimiento propios.
La parte de la Seccin 508 que cubre la accesibilidad web es la subparte B
1194.22.
La clusula 1194.22 se divide en 16 requisitos etiquetados desde el "a" hasta el "p". Los 11 primeros
requisitos ("a" hasta "k") se consideran directamente equivalentes a partes de las WCAG 1.0. Los requisitos y
sus equivalentes del WCAG 1.0 se enumeran en una tabla de referencia del documento de la Seccin 508.
Las WCAG 2.0 implican el cumplimiento de todos los dems requisitos de la Seccin 508 con una nica
excepcin. El requisito "m" hace referencia a la Subparte B 1194.21 de la Seccin 508. Este requisito tiene
un equivalente parcial en el principio "Robustez" de las WCAG 2.0.
Nota
En el momento de escribir este apartado, el Telecommunications and Electronic and
Information Technology Advisory Committee (TEITAC) estaba trabajando en una
versin nueva de la Seccin 508. En abril del 2008, el TEITAC present sus
recomendaciones al comit de evaluacin para la Seccin 508.
25.6.4. Otros estndares
Otro estndar importante que est desarrollando el W3C es el estndar WAI-ARIA. Estas siglas son el
206/407
acrnimo de Web Accessibility Initiative-Accessible Rich Internet Applications. Se trata de una serie de
documentos que definen la manera de hacer accesibles las aplicaciones web complejas que utilizan
tecnologas como HTML, JavaScript y AJAX. Este estndar se acepta oficialmente en las versiones actuales
o prximas de la mayora de los navegadores ms importantes del mercado: Opera 9.5, Internet Explorer 8 y
Firefox 3.
Hay muchos otros estndares para la accesibilidad de la web; demasiado
numerosos para hablar de ellos con detalle. El W3C mantiene una lista excelente
de polticas internacionales relativas a la accesibilidad de la web; ste es un
recurso muy importante para poder encontrar los documentos de polticas de todos
los gobiernos locales.
Resumen
La accesibilidad es una cuestin importante por razones tanto econmicas como sociales. No es una
caracterstica de un sitio web, sino una medida de la calidad con la que se cre. Si tenis en cuenta el
pblico de vuestro sitio mientras lo vais creando (y antes de hacerlo), construiris unas pginas ms
accesibles con todas las ventajas que eso supone. Hay varias directrices muy conocidas que os pueden
ayudar y si os ajustis a ellas, podris garantizar que lo que hayis construido satisfar a los criterios de los
expertos para hacer que vuestras pginas sean accesibles.
Preguntas de repaso
1. Dad 3 razones por las que es importante crear sitios web accesibles.
2. Utilizad Internet para ver cules son las leyes sobre accesibilidad de vuestro pas y elaborad una lista de
todas las leyes que creis que seran aplicables a vuestros sitios web. Vuestra lista tambin debera
incluir si estas leyes os exigen que utilicis algunos estndares de la web, como WCAG o la Seccin
508.
3. Explicad de qu manera la accesibilidad es importante para la optimizacin de los motores de bsqueda.
4. Cread un ejemplo de un uso accesible de contenido alternativo utilizando parte de vuestro contenido
propio, como por ejemplo una fotografa.
5. Utilizad Internet para ver cmo podrais conseguir que una tecnologa como Flash o Silverlight sea
accesible y escribid una comparacin entre hacerlas accesibles y cmo se hace accesible el HTML.
6. Explicad cmo disearais una interaccin de una pgina web para que sea accesible. Escribid unas
instrucciones paso a paso para crear un control de rbol (no es necesario que lo acabis creando
realmente).
: :
207/407
Accesibilidad - Pruebas de accesibilidad
Accesibilidad
Pruebas de accesibilidad
Accesibilidad : : :
Benjamin Hawkes Lewis. 26 de septiembre del 2008. Publicado en: usuario, personajes, verificador, prueba, inspeccionar.
Las pruebas de accesibilidad web son un subgrupo de las pruebas de usabilidad en las que los usuarios que
se tienen en cuenta tienen discapacidades que afectan a su manera de utilizarlo. El objetivo final, tanto con
respecto a la usabilidad como a la accesibilidad, es descubrir la facilidad con la que se puede utilizar un sitio
web y utilizar esta informacin para mejorar futuros diseos e implementaciones.
La evaluacin de la accesibilidad est ms formalizada, en general, que las pruebas de usabilidad. Las leyes
y la opinin pblica desaprueban totalmente la discriminacin de las personas con discapacidades. Para ser
justos con todo el mundo, los gobiernos y otras organizaciones intentan cumplir varios estndares de
accesibilidad de la web, como por ejemplo la legislacin de la Seccin 508 del Gobierno Federal de Estados
Unidos y las directrices de accesibilidad del contenido web (WCAG) del W3C.
Ved tambin
Podis ver la legislacin de la Seccin 508 y las directrices de accesibilidad del contenido web en el apartado
anterior de este mdulo didctico.
No obstante, es importante distinguir entre cumplir un estndar y maximizar la accesibilidad de un sitio web.
En una situacin ideal, ambas cosas seran la misma, pero cualquier estndar puede fallar a la hora de
cumplir con los objetivos siguientes:
Satisfacer las necesidades de todas las personas con discapacidades.
Encontrar el equilibrio entre las necesidades de las personas con diferentes discapacidades.
Hacer corresponder estas necesidades con las tcnicas ptimas.
Utilizar un lenguaje claro para expresar las necesidades o las tcnicas.
Estos puntos dbiles pueden hacer que las personas con las mejores intenciones vayan por el mal camino y
pueden ser aprovechados por los que pretenden la aprobacin oficial de productos inaccesibles.
Adems, la accesibilidad web es un objetivo y no una cuestin de s o no. Es un nexo entre las necesidades
humanas y la tecnologa. A medida que nuestro conocimiento de las necesidades humanas vaya
evolucionando y a medida que la tecnologa se vaya adaptando a estas necesidades, los requisitos de
accesibilidad cambiarn y los estndares actuales quedarn desfasados. Los diferentes sitios web, y las
distintas webs, satisfarn necesidades diferentes con tecnologas diferentes. Los servicios de chat por voz,
como Skype, son ideales para las personas ciegas, mientras que los servicios de chat por vdeo son una
gran ayuda para los usuarios del lenguaje de signos.
A la hora de determinar la facilidad de uso de un producto, las discapacidades plantean unos retos
especiales, ya que pueden introducir unos huecos adicionales entre usuarios y evaluadores. La evaluacin
de la accesibilidad debe tener en cuenta cmo se puede experimentar la web con los diferentes sentidos y
con diferentes capacidades cognitivas, y tambin las distintas opciones de configuracin inusuales y el
software especializado que permitir el acceso a la web a las personas con discapacidades concretas.
Si intentis evaluar la usabilidad o la accesibilidad de vuestro sitio web, es muy difcil que os podis poner en
el lugar de un adolescente amante del cine o de un director de banco de 59 aos que utilizan vuestro sitio,
incluso antes de tener en cuenta las discapacidades. Pero qu sucede si el adolescente amante del cine es
sordo y necesita que las pelculas estn subtituladas? Y si el director de banco es ciego y utiliza una
tecnologa especial (como un lector de pantalla) para interactuar con su entorno de escritorio y el navegador
web con la que el evaluador no est nada familiarizado?
Las directrices y las herramientas de accesibilidad ayudan a salvar estas faltas de experiencia. A pesar de
ello, no dejan de ser un complemento, y no una sustitucin, para la imaginacin emptica, la ingenuidad
tcnica y las conversaciones con los usuarios.
En este apartado hablaremos de varios enfoques para evaluar la accesibilidad de la web, tanto desde la
208/407
perspectiva del establecimiento de la conformidad formal como desde la perspectiva de la maximizacin de la
accesibilidad.
26.1. Cundo se deben realizar las pruebas?
26.2. Entender los requisitos
26.2.1. Requisitos externos
26.2.2. Detalles de la conformidad
26.2.3. Superar las expectativas
26.2.4. La importancia de la interfaz de usuario
26.2.5. Personajes con discapacidades
26.2.6. Elegir un estndar de accesibilidad
26.2.7. El espritu de la ley
26.3. Quin debe hacer las pruebas?
26.4. Pruebas avanzadas
26.4.1. Comprobadores de accesibilidad semiautomatizados
26.4.2. Inspectores estructurales
26.4.3. Simulacin y uso de tecnologas de asistencia de usuario final
26.4.4. Inspeccin detallada
Perceptibilidad
Operatividad
Comprensibilidad
Robustez
26.5. Pruebas de usuario
26.5.1. Encontrar verificadores
26.5.2. Consideraciones prcticas
26.5.3. Elegir las tareas
26.5.4. Interpretar los resultados
26.6. Comunicar los resultados de las pruebas de accesibilidad
Resumen
Preguntas de repaso
26.1. Cundo se deben realizar las pruebas?
Uno de los dichos de siempre del mundo de la ingeniera de software es "probad pronto y probad a menudo".
El hecho de realizar las pruebas al final de todo el proceso de desarrollo implica dos riesgos:
1. Los proyectos suelen durar ms de lo previsto y tener un precio ms alto del presupuestado. A causa de
estas presiones, las pruebas se hacen normalmente con prisas, no se hacen o se ignoran.
2. Normalmente, supone ms trabajo solucionar los problemas que se descubren una vez que el proceso
ya est muy adelantado que hacerlo ya desde el principio.
As pues, para garantizar la calidad y ahorrar tiempo y dinero, las evaluaciones de
accesibilidad deberan empezar ya desde el primer momento del diseo del
producto y se deberan incluir en todas las versiones de desarrollo siguientes hasta
la entrega del producto acabado.
26.2. Entender los requisitos
Antes de empezar a evaluar la accesibilidad de un proyecto, debis determinar cules son los requisitos
clave teniendo en cuenta su entorno, el pblico al que va destinado y los recursos. Algunos requisitos
vendrn impuestos por terceros como gobiernos y clientes; otros los podris elegir por vuestra cuenta.
26.2.1. Requisitos externos
Normalmente los requisitos vienen impuestos desde fuera, como por ejemplo:
Gobiernos. Los requisitos adoptan normalmente la forma de una legislacin general contra la
discriminacin de las personas con discapacidades, y muy pocas veces exigen el uso de un estndar
209/407
concreto o enumeran unos requisitos precisos de conformidad. Una excepcin importante es cuando la
legislacin obliga al sector pblico a utilizar un estndar concreto. Por ejemplo, la Seccin 508 forma
parte de la legislacin de Estados Unidos y obliga a los sitios web producidos por agencias federales a
satisfacer como mnimo un grupo concreto de requisitos definidos. La pgina de las polticas de la WAI
relativas a la accesibilidad de la web ofrece una lista parcial de legislaciones similares. Pero si queris
saber exactamente qu obligaciones tenis en vuestra jurisdiccin, consultad a un abogado.
Polticas del cliente. Por ejemplo, Shell est intentando garantizar que sus sitios web cumplan el nivel
de conformidad "Doble A" del WCAG 1.0, por lo que, si estis desarrollando un sitio web para Shell,
deberis satisfacer (como mnimo) este estndar.
Utilidad como marketing. La conformidad con un estndar concreto, como por ejemplo la Seccin 508,
puede ayudar a vender un proyecto a clientes que se preocupan por la accesibilidad.
Poltica de accesibilidad interna en vuestra organizacin. Por ejemplo, los productos producidos
para la BBC deben satisfacer las directrices de accesibilidad de la BBC v1.3.
26.2.2. Detalles de la conformidad
Es muy importante tener tan claro como sea posible cules son los requisitos externos. Algunos estndares
de accesibilidad incorporan ms de un nivel o tipo de conformidad, por lo que hay que concretar muy bien
cul es el que se exige. Por ejemplo, el WCAG 1.0 tiene tres niveles de conformidad:
1. Las personas con alguna discapacidad "no podrn acceder de ninguna manera a la informacin" de un
documento que no supere el "nivel A".
2. Las personas con alguna discapacidad "lo tendrn difcil para acceder a la informacin" de un
documento que no supere el nivel "Doble A".
3. Las personas con alguna discapacidad "encontrarn algunas dificultades para acceder a la informacin"
de un documento que no supere el nivel "Triple A".
El borrador de WCAG 2.0 tambin incorpora tres niveles, pero las posibilidades de conformidad son ms
complicadas. Cuando un recurso forma parte de una serie de recursos que forman todo un proceso (por
ejemplo la bsqueda, seleccin, compra y pago de un producto en una tienda en lnea), el nivel de
conformidad para todos los recursos de la serie es el del recurso con el nivel ms bajo.
Las declaraciones de conformidad se deben basar en la tecnologa de contenido "compatible con la
accesibilidad". Para poder ser una tecnologa de contenido compatible con la accesibilidad, una tecnologa
debe hacer lo siguiente:
Haber demostrado que funciona con la tecnologa de asistencia de los usuarios.
Tener unos agentes de usuario (navegadores, conectores, etc.) que funcionen con la tecnologa de
asistencia de los usuarios y estar disponible para los usuarios con discapacidades sin ningn coste
superior al que tiene un usuario sin ninguna discapacidad.
Tened en cuenta que en un entorno de intranet quiz s podris garantizar que estos agentes de usuario
estarn disponibles para los usuarios, pero en la web ser imposible. Por ejemplo, es posible que una
aplicacin se pueda utilizar sin ninguna tecnologa comercial, pero que sea accesible slo con lectores de
pantalla con un conector comercial para el que la organizacin ha comprado una licencia. Esta aplicacin
podra ser conforme a las WCAG 2.0 cuando se utiliza en la intranet de la organizacin, pero no cuando se
utiliza en la web pblica.
El WCAG 2.0 tambin permite unas declaraciones de conformidad ms limitadas. Un recurso no accesible
puede ser conforme si se ofrece una alternativa accesible. Los editores pueden hacer una declaracin de
conformidad parcial cuando se aada contenido procedente de otras fuentes.
26.2.3. Superar las expectativas
La determinacin de los requisitos externos debera ser slo el principio de todo el proceso; estos requisitos
se deberan considerar como los requisitos mnimos a los que hay que aadir unos objetivos ms altos con el
fin de maximizar la accesibilidad. Como evaluadores de accesibilidad, vuestra tarea es estimular la
concienciacin sobre la accesibilidad, ya que sois los expertos en el tema.
Cuando entreguis un informe final, es posible que debis distinguir los dos aspectos. Por ejemplo, las
210/407
instrucciones de un cliente para un supermercado en lnea pueden especificar que la tienda sea accesible
para los usuarios ciegos. Teniendo en cuenta al pblico al que va dirigida, tambin deberais evaluar si la
tienda ser accesible para usuarios con otras discapacidades.
Tened en cuenta que los requisitos externos de conformidad con un estndar concreto no impiden
necesariamente la aplicacin de directivas de buenas prcticas de otros estndares. Por ejemplo, podis
evaluar un sitio web de una agencia federal pensado para su uso por parte de personas de la tercera edad y
que debe cumplir con la Seccin 508. La Seccin 508 estipula lo siguiente:
" 1194.22 (c) Las pginas web deben disearse de manera que toda la informacin
que se transmita mediante colores est disponible tambin sin colores, por ejemplo a
partir del contexto o del etiquetado".
Esta disposicin ayuda a los usuarios, que saben cmo adaptar la presentacin del contenido de la web,
pero no maximiza la accesibilidad de la presentacin por defecto del contenido en la audiencia destino, ya
que no garantiza que habr el contraste suficiente entre los colores sugeridos. Por suerte, no hay nada que
impida que un sitio web satisfaga este requisito y, adems, satisfaga las disposiciones del siguiente nivel del
borrador de las directrices de accesibilidad del contenido web 2.0.
Borrador de las directrices de accesibilidad del contenido web 2.0.
"1.4.3 Contraste (mnimo): El texto y las imgenes de texto tienen una relacin de
contraste de como mnimo 5:1, excepto en los casos siguientes (nivel AA):
Texto grande: El texto y las imgenes de texto de tamao grande tienen una
relacin de contraste de 3:1 como mnimo.
Secundario: El texto o las imgenes de texto que forman parte de un
componente inactivo de la interfaz de usuario, que son puramente decorativos,
que son texto secundario en una imagen o que no son visibles para nadie, no
tienen ningn requisito de contraste mnimo.
1.4.6 Contraste (mejorado): El texto y las imgenes de texto tienen una relacin de
contraste de como mnimo 7:1, excepto en los casos siguientes (nivel AAA):
Texto grande: El texto y las imgenes de texto de tamao grande tienen una
relacin de contraste de 5:1 como mnimo.
Secundario: El texto o las imgenes de texto que forman parte de un
componente inactivo de la interfaz de usuario, que son puramente decorativos,
que son texto secundario dentro de una imagen o que no son visibles para
nadie, no tienen ningn requisito de contraste mnimo.
Los criterios 1.4.3 y 1.4.6 se pueden satisfacer mediante un control de contraste
disponible en la pgina o desde sta".
Nota
Cuando habla del control de contraste, este criterio se refiere al hecho de que
deberais ofrecer una manera de cambiar los colores o una variacin de alto contraste.
Para comprobar los esquemas de control de contraste, podis utilizar el analizador de
contraste de color de Juicystudio.
Las WCAG 2.0 se estn diseando para que tengan una gran compatibilidad con versiones anteriores de
otros estndares, especialmente WCAG 1.0 y la Seccin 508.
26.2.4. La importancia de la interfaz de usuario
Pensad en la importancia que tiene el hecho de conseguir que la interfaz de usuario de un sitio web sea
accesible. Aunque el contenido no est disponible de una manera adecuada, una interfaz de usuario
accesible puede ayudar a los usuarios a identificar el contenido de inters y solicitar ayuda externa para
convertirlo a un formato en el que lo pueda utilizar. Por ejemplo, una persona con una discapacidad auditiva
se puede encontrar con un vdeo de una charla o en un sitio donde se comparten vdeos sin subttulos.
211/407
Como la URL identifica el vdeo de una manera exclusiva, y como la persona puede seguir utilizando el
reproductor para ver el vdeo, lo podr enviar a un tercero, como por ejemplo el servicio gratuito Project
readOn, para aadir subttulos.
26.2.5. Personajes con discapacidades
Un enfoque ideal es integrar las discapacidades clave para vuestro proyecto directamente en los personajes
que actuarn como usuarios: unos usuarios ficticios que harn de arquetipos para ver el modo como algunos
tipos de usuarios particulares utilizarn un sitio web. Imaginmonos que estis evaluando prototipos para un
sitio donde se compartirn vdeos y que vuestros personajes incluyen:
James Smith, de 23 aos, que est loco por el ftbol y que lo que desea por encima de cualquier otra
cosa es compartir imgenes interesantes de deportes con sus amigos.
Sarah Maddison, de 34 aos, una madre trabajadora que normalmente no tendra tiempo para dedicarse
a visitar un sitio como ste. Pero resulta que su hija de tres aos es muy aficionada a ver vdeos, y por
eso Sarah quiere sentarse con ella y ayudarla a encontrar los vdeos adecuados que quiere ver.
Podis seleccionar a estos personajes e incorporarles discapacidades, como por ejemplo:
discapacidad visual
daltonismo
ceguera
sordera
discapacidad auditiva
sordoceguera
epilepsia
dislexia
Por ejemplo, podis decidir que James tambin es sordo y que quiere subttulos de los comentarios que se
escuchan en los vdeos, y que Sarah ve mal y tiene problemas para ver los tipos de letra de fantasa y el
texto de tamao muy pequeo. Estos personajes os sirven de gua para rechazar prototipos que no incluyan
la utilidad de subttulos en el reproductor de vdeo o que utilicen unos tipos de letra muy elaborados que
exigiran imgenes.
How People with Disablities Use the Web de la WAI y Just Ask: Integrating Accessibility Throughout Design
de Shawn Lawton Henry contienen otros ejemplos de personajes afectados por discapacidades que podis
utilizar para empezar a trabajar en este aspecto.
No debera ser necesario decirlo, pero no pensis que las personas con discapacidades son todas iguales.
La discapacidad es un fenmeno increblemente variado y, adems, las personas con discapacidades son tan
variadas como las personas sin discapacidades; sus diferencias (por ejemplo) pueden ser de gnero, edad,
intereses, valores y habilidades (y quiz las ms importantes son las relacionadas con su experiencia
informtica).
De nuevo, la comparacin de productos en cuanto a las directrices de accesibilidad puede ayudar a llenar los
huecos que vuestros personajes no cubren. Por ejemplo, quiz segus las WCAG 2.0 con el sitio para
compartir vdeos pero vuestros personajes no incluyen a ningn usuario con epilepsia. Aun as, podis leer la
Directriz 2.3 ("Ataques: no se debe disear el contenido de ninguna manera que pueda provocar ataques") y
decidir que el sistema debe poder filtrar los vdeos cargados antes de mostrarlos por si contienen centelleos.
26.2.6. Elegir un estndar de accesibilidad
Si debis elegir un estndar de accesibilidad para gestionar las cuestiones de accesibilidad de la web en un
equipo o sencillamente para utilizarlo como gua durante las pruebas, aconsejamos las WCAG 2.0 por estos
motivos:
Estn diseadas a partir de las necesidades humanas bsicas, aplicables a tecnologas diferentes de
HTML y CSS (como Flash).
Documentan de manera muy esmerada las razones de cada uno de los criterios de conformidad.
212/407
Sugieren tcnicas prcticas para satisfacer los criterios de conformidad utilizando tecnologas actuales.
Garantizan que todas las disposiciones se puedan someter a pruebas.
Incorporan estudios ms recientes que las alternativas actuales.
Estn diseadas para ser claramente compatibles con los estndares de accesibilidad existentes.
Sern un estndar internacional.
Podis citar la conformidad con un borrador concreto de WCAG 2.0; por cuestiones de marketing, lo mejor es
buscar tambin la conformidad con estndares acabados como la Seccin 508 y WCAG 1.0, adems de este
borrador.
26.2.7. El espritu de la ley
A la hora de hacer pruebas en comparacin con unas directrices, es importante tener en cuenta la base
fundamental de cualquier orientacin tcnica especfica, que es cumplir el espritu de la ley y no slo su letra.
A continuacin se explica una historia muy aleccionadora. La Seccin 508 ( 1194.22) incluye un requisito
que dice: "Se ofrecer un equivalente de texto para todos los elementos que no sean de texto (por ejemplo,
con alt, longdesc o en el contenido del elemento)".
De manera similar, el WCAG 1.0 incluye un punto de control que dice: "Ofreced un equivalente de texto para
todos los elementos que no sean de texto (por ejemplo, con alt, longdesc o en el contenido del elemento).
Esto incluye: imgenes, representaciones grficas de texto (incluyendo smbolos), regiones de mapa de
imagen, animaciones (GIF animados, por ejemplo), miniaplicaciones y objetos programticos, arte ascii,
marcos, scripts, imgenes utilizadas como picos para listas, separadores, botones grficos, sonidos
(reproducidos con interaccin del usuario o sin), archivos de audio autnomos, pistas de audio de vdeo y
vdeo".
Desafortunadamente, mucha gente que lee esta directriz interpreta mal lo que debe ser un equivalente de
texto genuino para un separador y los elementos decorativos y generan un etiquetado como el siguiente:
<img alt="borde decorativo" src="fancy-border.gif" border="0">
De hecho, como estas imgenes no transmiten ninguna informacin nueva y no tienen ninguna funcin, su
equivalente de texto correcto sera una cadena vaca (alt=""), que hace que el lector de pantalla pase por
alto el atributo alt y no lo lea. Para un usuario de un lector de pantalla es muy molesto tener que or en voz
alta un texto como "borde decorativo" una y otra vez cuando en realidad no les ofrece ninguna informacin
til.
Las WCAG 2.0 intentan ser ms claras. La directriz equivalente dice: "Todo el contenido que no sea texto
tiene una alternativa de texto que presenta una informacin equivalente, excepto para las situaciones
enumeradas ms abajo". Una de estas situaciones es: "Decoracin, formato, invisible: si es puramente
decoracin, o si se utiliza slo para el formato visual, o si no se presenta a los usuarios, entonces se
implementa de manera que la tecnologa de asistencia la pueda ignorar". Y tambin, muy importante, WCAG
2.0 intenta detallar el razonamiento que hay tras la directriz:
"El objetivo de esta directriz es garantizar que todo el contenido que no sea texto
tambin est disponible como texto. Texto se refiere al texto electrnico y no a una
imagen de texto. El texto electrnico tiene la ventaja especial de que es neutro con
respecto a la presentacin. Es decir, que se puede reproducir visualmente, por audio,
por tacto o en cualquier combinacin. As pues, la informacin enviada como texto
electrnico se puede presentar en la forma que mejor satisfaga las necesidades del
usuario. Tambin se puede ampliar muy fcilmente, se puede enviar con una voz fcil
de entender o se puede reproducir en el formato tctil que mejor se adecue a las
necesidades de un usuario".
26.3. Quin debe hacer las pruebas?
Hay bsicamente dos grupos que realizan pruebas: expertos y usuarios.
213/407
Las pruebas realizadas por expertos son importantes porque stos entienden el
modo como interactan las tecnologas web subyacentes, pueden actuar como
nexo de unin para el conocimiento sobre los diferentes grupos de usuarios y
tienen una inclinacin a aprender a utilizar herramientas de pruebas especializadas.
Las pruebas realizadas por usuarios son cruciales porque stos son los verdaderos
expertos sobre sus capacidades y su tecnologa de asistencia. Las pruebas hechas
por usuarios tambin pueden poner de manifiesto los problemas de usabilidad entre
usuarios ms y menos tcnicos, y entre personas familiarizadas con el sitio web en
cuestin (como por ejemplo los verificadores expertos) y personas que no lo estn
(usuarios nuevos).
Es muy improbable que un desarrollador web que sepa cmo utilizar un lector de pantalla explore un sitio de
la misma manera que un usuario normal de un lector de pantalla; y tambin es muy improbable que los
usuarios de lectores de pantalla que programan sus scripts exploren el sitio utilizando las mismas estrategias
que los usuarios de lectores de pantalla que se limitan a hacer las tareas informticas normales, como por
ejemplo escribir mensajes electrnicos.
La prxima vez que se realicen pruebas (ya sean otras pruebas del mismo proyecto o pruebas de un
proyecto totalmente diferente), el conocimiento adquirido con las pruebas de usuarios se incorpora al proceso
de pruebas avanzadas. Las pruebas de usuarios tambin tienen una ventaja ms sutil. Por el hecho de
humanizar la accesibilidad y de reunir desarrolladores y usuarios finales, estas pruebas pueden hacer
aumentar la motivacin para construir sitios web accesibles.
26.4. Pruebas avanzadas
Las pruebas avanzadas incluyen cuatro componentes:
Evaluacin guiada por herramientas: en las que una herramienta localiza problemas de accesibilidad
y los presenta al evaluador (esto incluira los comprobadores de accesibilidad y los analizadores de
cdigo).
Simulacin: en las que el experto simula una experiencia de usuario final del sitio web. A menudo no
ser necesario que busquis mucho para encontrar problemas de accesibilidad. Es posible que no
tengis que hacer nada ms que cargar la pgina en vuestro navegador y ya veris que el texto es muy
difcil de leer.
Inspeccin basada en herramientas: cuando el evaluador utiliza una herramienta para investigar el
modo como funcionan juntas las diferentes partes de un sitio web.
Revisin del cdigo: el evaluador mira directamente el cdigo y los activos de un sitio web para
localizar problemas.
Es muy probable que los principiantes dependan especialmente de la evaluacin guiada por herramientas,
pero los evaluadores de todos los niveles de experiencia se pueden beneficiar de cada uno de los
componentes. Incluso los principiantes pueden detectar elementos img sin equivalentes de texto en un
etiquetado HTML y, a medida que vais ganando experiencia, os ser cada vez ms fcil detectar problemas
antes de que pasis a pruebas ms rigurosas. Para los expertos en grandes proyectos, la revisin manual de
todo el cdigo del cliente o la inspeccin de todas las partes de un sitio web puede no ser factible; en estos
casos, una evaluacin guiada por herramientas puede localizar reas con un problema concreto que
merezcan una atencin especial. Adems, los evaluadores humanos pueden pasar por alto cosas que la
evaluacin de una mquina habra detectado.
Desafortunadamente, aunque hay muchas herramientas de accesibilidad, la mayora falla en algn aspecto u
otro. Por ejemplo, una herramienta que enumera los ttulos de los documentos HTML comete el error de no
incluir el texto alt de los elementos img. De la misma manera que debis tener en cuenta el espritu de la ley
con respecto a la conformidad con los estndares, tambin lo deberais tener en cuenta a la hora de utilizar
herramientas. Antes de quejaros a alguien sobre un problema de accesibilidad, comprobad que se trata de
un problema real y no de un error de la herramienta.
26.4.1. Comprobadores de accesibilidad semiautomatizados
Una vez que se han solucionado los problemas que se pueden detectar a simple vista, una buena manera de
proseguir es pasar la pgina por una herramienta de comprobacin de accesibilidad semiautomatizada. Si
214/407
evaluis la conformidad con un estndar concreto, probablemente querris utilizar una diseada para su uso
con este estndar.
Si evaluis la conformidad con la Seccin 508 o el WCAG 1.0, Cynthia Says es una opcin razonable. Si
comprobis la conformidad con el nivel 2 de la ley alemana BITV 1.0, la ley italiana Stanca o el borrador del
WCAG 2.0, la nica opcin actual es el comprobador experimental de accesibilidad de la web del ATRC.
Estas herramientas tienen unas limitaciones importantes. No existe nada que se pueda considerar una
prueba de accesibilidad totalmente automatizada. Por ejemplo, dada la naturaleza primitiva de la inteligencia
artificial actual, un programa informtico no puede tener la ltima palabra sobre si un texto es un equivalente
genuino para una fotografa en un contexto. Incluso en reas que tericamente se pueden automatizar
totalmente, los programadores de comprobadores se pueden equivocar en sus interpretaciones de las
directrices de accesibilidad y perderse el espritu de la ley entre sus letras.
Las buenas herramientas inspeccionan la pgina para localizar problemas de accesibilidad y generan una
lista de cosas que consideran errores y otras cosas que creen merecedoras de una investigacin por parte
de seres humanos. Por ejemplo, si Cynthia Says encuentra un elemento img con alt="", emitir una
advertencia (no un error) que indicar al usuario que "verifique que esta imagen se utiliza slo como
espaciador o para el diseo y que no tiene ningn significado". Si el equivalente de texto correcto para esta
imagen es una cadena vaca, deberais pasar al siguiente error o advertencia.
Quiz la mayor ventaja de los comprobadores de accesibilidad es que si elegs uno, como el TAW 3, que se
puede ejecutar con mltiples URL, podris encontrar pginas en series muy grandes que probablemente
necesiten una atencin ms precisa.
26.4.2. Inspectores estructurales
Muchas herramientas de inspeccin estn diseadas para investigar las estructuras del contenido web. Las
estructuras, por decirlo de una manera sencilla, definen cules son los componentes de un sitio web y cmo
se relacionan entre ellos. Por ejemplo, en el modelo de objetos de documento (DOM) de HTML, el texto se
puede designar como una etiqueta para un campo de formulario utilizando el elemento label. Los
navegadores convierten el HTML en un modelo de objetos de documento. El navegador asocia varios
comportamientos con componentes concretos. Por ejemplo, si hacis clic en la etiqueta de una casilla de
seleccin, sta normalmente quedar seleccionada.
Los entornos de escritorio y las aplicaciones aceptan la interactividad con lectores de pantalla, software de
reconocimiento del habla y otras tecnologas de asistencia ofreciendo una estructura similar que representa
el contenido y las funciones disponibles en la presentacin visual. En Windows, el sistema estructural
principal se conoce como Microsoft Active Accessibility (MSAA), o Vista UI Automation. Por ejemplo, un
cuadro de dilogo tiene una serie de hijos relacionados, como el ttulo, los campos, los botones y las
etiquetas.
Las tecnologas de asistencia tpicas se preocupan bsicamente de la representacin que hacen los
navegadores y los conectores del contenido de la web con respecto a estos sistemas estructurales en lugar
de procesar directamente los modelos de objetos del documento web.
Hay inspectores tanto para las estructuras de nivel de escritorio como para los modelos de objetos de nivel
de web. Con respecto al nivel de escritorio, OS X incluye el Accessibility Inspector y el Accessibility Verifier.
Microsoft ofrece herramientas de inspector para Microsoft Active Accessibility 2.0 y Microsoft Active
Accessibility 1.3. El Accerciser est disponible para SPI API, la tecnologa de asistencia de GNOME.
Las herramientas para analizar el modelo de objetos de documento de (X)HTML incluyen los inspectores
DOM, como se puede ver en Opera Dragonfly y Firebug y grupos de herramientas de accesibilidad como la
barra de herramientas de accesibilidad de la web para Internet Explorer y Opera y la barra de herramientas
de accesibilidad ICITA para Firefox.
Los inspectores DOM muestran el rbol de los elementos, atributos y texto construido a partir de la
serializacin de (X)HTML, mientras que los inspectores de accesibilidad web extraen componentes o
relaciones concretos y los enumeran. Por ejemplo, pueden enumerar todos los campos con sus etiquetas,
todos los ttulos o todos los enlaces.
Normalmente, el anlisis del modelo de accesibilidad no debera ser necesario para (X)HTML, aunque quiz
tambin necesitaris investigar esta capa si creis que un navegador representa incorrectamente en una
tecnologa de asistencia una estructura (X)HTML correcta. Sin embargo, normalmente comprobaris
215/407
directamente las estructuras (X)HTML.
No todo el contenido se puede inspeccionar con inspectores DOM o de la web. La inspeccin de aquello que
se muestra en las estructuras de accesibilidad de nivel de escritorio es importante para comprobar qu
contenido del conector (reproductores de medios, contenido Flash y applets Java) se muestra en la
tecnologa de asistencia que utiliza aquellos modelos de accesibilidad.
En general, debis comprobar que todos los controles aparezcan con la funcin apropiada (por ejemplo, que
los cuadros de texto sean cuadros de texto y los botones sean botones) y con las propiedades necesarias.
26.4.3. Simulacin y uso de tecnologas de asistencia de usuario final
La simulacin implica emular las experiencias de las personas con discapacidades durante las pruebas. Esto
se puede hacer utilizando la tecnologa de asistencia para interactuar con un sitio o intentando restringir de
alguna manera las capacidades propias. Por ejemplo:
Utilizar un puntero de boca para pulsar teclas mientras se comprueba la accesibilidad del teclado.
Ver una pgina con el simulador Vischeck, que intenta presentar la pgina, con las imgenes incluidas,
tal como la ven las personas con diferentes tipos de daltonismo.
Apagar el monitor mientras se utiliza un lector de pantalla junto con un navegador.
La simulacin puede ayudar al desarrollador a ser consciente de las necesidades de las personas con
discapacidades y puede hacer patente defectos de diseo fundamentales. El uso de tecnologas de
asistencia puede aclarar ciertos malentendidos sobre cmo son compatibles e interactan, o no, con los
estndares web. Por ejemplo, los lectores de pantalla ms populares no utilizan estilos sugeridos para los
tipos de soportes CSS aural o braille, sino que intentan representar el tipo screen presentado por los
navegadores visuales con los que interactan.
El uso de tecnologas de asistencia no es una tarea que se pueda tomar a la ligera, ya que para entender
bien cmo utilizan estos sistemas puede ser necesario un nivel muy alto de inmersin y formacin. Existe un
riesgo muy grande de crear nuevos malentendidos. Los desarrolladores se pueden esforzar mucho para
hacer algo con un lector de pantalla y llegar a la conclusin de que no se puede hacer por culpa de un
defecto del lector de pantalla, cuando en realidad es una consecuencia de su inexperiencia con la
herramienta. Tambin puede ser que intenten utilizar la herramienta de una manera equivocada; por ejemplo,
quiz intentan leer una pgina de manera secuencial cuando un lector de pantalla real ira saltando por la
pgina utilizando los ttulos y otros elementos mientras busca puntos de inters. O incluso es posible que no
consigan leer adecuadamente la pantalla. La lectura de una pgina que podis ver o que conocis bien con
un lector de pantalla es muy diferente de la exploracin de un sitio totalmente nuevo que no podis ver.
El uso de tecnologas de asistencia debe ir acompaado de la experiencia sobre el uso que hacen de estas
tecnologas los usuarios habituales y las conclusiones extradas de este uso se deberan confirmar
idealmente con usuarios expertos. En general, los principiantes deberan dejar el uso de las tecnologas de
asistencia a los usuarios verificadores.
26.4.4. Inspeccin detallada
Una vez que se hayan solucionado todos los problemas reales identificados por la herramienta de
comprobacin elegida, ya podris pasar a la comprobacin, la verificacin, el anlisis y la revisin manuales
del proyecto.
Las WCAG 2.0 dividen su criterio de mejores prcticas en cuatro principios. El contenido y las funciones
deben ser:
Perceptibles (por ejemplo, las imgenes deben tener equivalentes de texto).
Operativos (por ejemplo, debera ser posible interactuar con un sitio web sin un ratn y navegar con un
lector de pantalla).
Comprensibles (por ejemplo, el texto no debe ser ms complicado de lo necesario y el sitio web debe
funcionar de una manera predictible).
Robustos (por ejemplo, los sitios web deben funcionar con interoperatividad con diferentes agentes de
usuario y la navegacin debe ser lgica).
216/407
En este subapartado presentaremos algunos ejemplos sobre cmo los verificadores expertos pueden evaluar
hasta qu punto el contenido se adecua a estos principios. Tened en cuenta que esta seccin no est
pensada para sustituir la revisin de las WCAG y sus tcnicas.
Perceptibilidad
Un subgrupo de los problemas de perceptibilidad est relacionado con la existencia de soportes alternativos
de varios tipos. Podis comprobar los equivalentes de texto desactivando las imgenes y el contenido
multimedia en vuestro navegador y mirando la pgina. Pero deberis tener un cuidado especial con los
elementos img e input. Normalmente, deberis definir atributos alt en blanco (alt="") para todas las
imgenes puramente decorativas, de manera que el lector de pantalla las ignore. Sin embargo, en los casos
siguientes:
imgenes que son el nico contenido de enlaces y
botones de formulario
cuando estos elementos tienen unos atributos alt="", los lectores de pantalla interpretarn la imagen o el
botn como si el atributo alt="" no estuviera, e intentan poner uno (por ejemplo, leyendo la URL de la
imagen).
Por lo tanto, en estas circunstancias concretas deberis comprobar que las imgenes dentro de enlaces o
botones tengan un atributo alt que describa el destino del enlace o la accin del botn, incluso aunque sea
un poco repetitivo.
Nota
La comprobacin de equivalentes sincronizados con multimedia, como por ejemplo
ttulos y descripciones de audio, se puede llevar a cabo mirando las preferencias de
vuestro reproductor de soportes para activar los parmetros de accesibilidad.
Otro grupo de problemas de perceptibilidad es el que hace referencia a los estilos de la pgina. En este
caso, hay tres reas que hay que investigar:
La presentacin propuesta para la pgina es razonablemente accesible? Por ejemplo, el contraste del
color es suficiente? El texto tiene un tamao lo suficientemente grande para poder leerlo
cmodamente? Aparte de mirar la pgina por vuestra cuenta, tambin podis utilizar una herramienta
como Juicy Studio CSS Analyser para comprobar las combinaciones de colores de fondo y de primer
trmino con frmulas que pretenden medir la legibilidad.
Las sugerencias del editor para la presentacin se pueden combinar bien con las preferencias de los
usuarios normales que tienen como objetivo hacer que el contenido sea ms legible, como un tipo de
letra de un tamao mayor, el zoom y unos colores por defecto diferentes? Intentad aumentar el tamao
del texto entre 2 y 5 veces; no os preocupis si los resultados no son perfectos en cuanto a pixelacin,
sino que lo que debis mirar es que la maquetacin no quede muy afectada y haga que el contenido sea
difcil de leer. Intentad cambiar las preferencias de color para ver qu sucede. Si el CSS del editor
define los colores, debera definir explcitamente los colores de fondo y de primer trmino juntos para
garantizar que la combinacin de preferencias poco habituales y estilos del editor no resulte en un texto
ilegible o invisible. Los navegadores ms populares permiten que los usuarios definan sus preferencias
de color y que desactiven las imgenes de fondo del CSS. Cuando lo probis por vuestra cuenta, quiz
descubriris unas tcnicas de colocacin de imgenes de CSS mal concebidas que hacen que el texto
quede oculto, ya que la imagen no se cargar pero el texto seguir siendo invisible.
Si rechazis las sugerencias de presentacin del editor, se conserva toda la informacin comunicada
para estas sugerencias en el contenido de la web para su uso por parte de los estilos por defecto del
agente de usuario o por parte de los estilos de usuario? Intentad desactivar el CSS e inspeccionad el
modelo de objetos de documento para comprobar que los ttulos estn marcados como ttulos y que las
tablas se utilizan para los datos tabulados y no para la maquetacin.
Operatividad
La salud y la seguridad son una parte crucial a la hora de conseguir que un sitio web sea operativo, aunque
no se tienen en cuenta casi nunca. El contenido intermitente, por ejemplo, es un riesgo que puede provocar
ataques a las personas epilpticas fotosensibles. Podis hacer una captura de pantalla de vuestro sitio web
217/407
actual y pasarla por la Photosensitive Epilepsy Analysis Tool (PEAT) de Trace Center para ver si hay
contenido intermitente que pueda representar un peligro para vuestros usuarios. Evidentemente, si creis un
sitio web para compartir vdeos, ste ser un aspecto al que deberis prestar una atencin especial. Durante
la fase de diseo del producto podis pensar en la posibilidad de incluir un proceso de filtraje automatizado
para las cargas.
Adems, una buena manera de comprobar la operatividad de los sitios web es sencillamente mirar si podis
acceder a todo el contenido esencial y a todas las funciones con diferentes dispositivos:
Intentad utilizar vuestro sitio web utilizando slo el teclado. El punto marcado en cada momento est
siempre claramente indicado? Es posible acceder a todas las funciones con el teclado?
Intentad utilizar vuestro sitio web utilizando slo una pantalla tctil.
Intentad navegar por vuestra pgina web con instrucciones de voz utilizando Opera para Windows y su
complemento Voice, o Windows Vista Speech Recognition e Internet Explorer.
Nota
Hace poco se ha introducido el reconocimiento del habla comercial con calidad de
dictado en el Mac OS X mediante el MacSpeech Dictate, pero actualmente no existe
ningn equivalente en las plataformas *nix gratuitas.
Los lectores de pantalla y otras tecnologas de asistencia pueden utilizar la estructura semntica del
(X)HTML para asociar correctamente el contenido y para permitir la navegacin por el contenido. Por
ejemplo, los lectores de pantalla pueden permitir a los usuarios que pasen hasta el prximo sitio donde hay
un ttulo u otro tipo de elemento, o pueden listar todas las ocurrencias de un tipo concreto. El uso correcto de
los elementos label y legend permite que las tecnologas de asistencia asocien las etiquetas con los campos
de formulario correctos; y el uso correcto de los elementos th y de los atributos header, scope y axis les
permite asociar los ttulos de tablas con las casillas de datos de las tablas. La estructura semntica se puede
evaluar con un inspector del modelo de objetos del documento (DOM), como por ejemplo el que se
encuentra en Opera Dragonfly. Las herramientas de inspeccin de la accesibilidad, como la Firefox
Accessibility Extension, pueden facilitar estas tareas, por ejemplo, enumerando todos los ttulos de la pgina
o listando los atributos de los campos de formulario (y mostrar cules no tienen ninguna etiqueta asociada).
En la figura 1 encontraris un ejemplo de esto.
Figura 1. Captura de pantalla de la ventana de informacin de formularios de
Firefox Accessibility Extension con la nueva pgina inicial de la BBC
Comprensibilidad
Evaluar la comprensibilidad es una tarea an ms subjetiva que comprobar la legibilidad. A no ser que un
evaluador sea nuevo en un proyecto o sea un editor profesional, es muy probable que no sea la mejor
218/407
persona para evaluar si un texto es tan comprensible como sea posible. Sin embargo, podis utilizar la
herramienta Readability Test de Juicy Studio para tener una idea aproximada de la sencillez del texto de
vuestro sitio web.
De todos modos, hay algunos aspectos que se pueden comprobar de una manera muy objetiva, como por
ejemplo si el contenido tiene metadatos de idioma que permitan (por ejemplo) que los lectores de pantalla y
los navegadores de voz lean el contenido con la pronunciacin correcta. Con HTML podis utilizar un
inspector DOM para comprobar la presencia de un atributo lang para el documento y para cada uno de los
cambios de idioma.
Estad pendientes de las incoherencias de los sitios web, tanto respecto a las incoherencias internas como a
la predictibilidad a partir de las convenciones habituales de la web. Los usuarios de ampliadores de pantalla
que slo pueden ver una parte de la pgina en cada momento se fan mucho de esta coherencia para saber
dnde mirar para encontrar un contenido o una funcin concreta.
Robustez
La comprobacin de si el contenido es slido implica comprobar que las tecnologas se utilizan
correctamente. A un nivel muy bsico, podis pasar el etiquetado y el cdigo por analizadores como:
Validador HTML de WDG con las advertencias activadas
Validador de CSS del W3C
Analizador de JavaScript JSLint
A continuacin, podis revisar el cdigo con detenimiento para comprobar que las funciones se utilizan
correctamente. Por ejemplo, podis comprobar que se utilicen los controles nativos de HTML en lugar de
emular controles con elementos sin significado y JavaScript, y que el JavaScript utilice la deteccin de
funciones en lugar de la deteccin de navegador siempre que sea posible.
Entonces podis hacer pruebas en mltiples agentes de usuario y tecnologas de asistencia y comprobar que
el sitio sea perceptible, operativo y comprensible con cualquier combinacin de CSS, JavaScript y conectores
activados o desactivados.
El problema ms habitual es probablemente el JavaScript obstructivo, como por ejemplo las anclas y los
botones que se encuentran en el etiquetado sin scripts de la pgina pero que dependen del JavaScript para
poder hacer realmente algo. Pero hay otros problemas ms sutiles que surgen de la vinculacin
excesivamente estrecha del JavaScript con otras capas de la pila de tecnologa. Por ejemplo, el JavaScript
puede aplicar display: none; de CSS para ocultar el contenido, pero qu sucede cuando no se aplica el
CSS del editor?
Otro ejemplo son los controles multimedia. A menudo, cuando se incluye el contenido de un conector, la
interfaz de usuario propia del conector se desactiva y en su lugar el conector pasa a estar controlado por
widgets HTML con scripts. Cuando el contenido del conector slo se aade mediante JavaScript despus de
la deteccin del conector basado en JavaScript, no hay ningn problema. Pero en ocasiones el contenido del
conector se incluye en la pgina antes de cargarse los scripts. En estos casos, vale la pena comprobar no
slo que se dispone de una alternativa por si no hay disponible un conector adecuado, sino tambin que la
interfaz de usuario propia del conector no est desactivada a no ser que el JavaScript est disponible. Si no
se da el primer caso, entonces los usuarios vern el contenido alternativo; si no se da el segundo caso,
entonces los usuarios vern el conector pero no lo podrn controlar.
26.5. Pruebas de usuario
Por ms inspeccin y simulancin que haya por parte de los desarrolladores, no hay nada que pueda superar
el choque real entre un usuario y un sitio web para saber si est bien hecho. Teniendo en cuenta las
dificultades para entender todas las sutiles interacciones entre el contenido de la web y las tecnologas de
asistencia y las dificultades para acercarse a la experiencia de los usuarios con discapacidades, esto se
aplica sobre todo a los usuarios con discapacidades. A ser posible, deberais probar vuestros sitios web con
usuarios reales con discapacidades. Esto se puede hacer a gran escala y con un presupuesto muy alto, pero
no se deben subestimar los beneficios de hacer pruebas aunque sea a una escala muy pequea.
26.5.1. Encontrar verificadores
219/407
Podis encontrar verificadores de la misma manera que podis encontrar candidatos para las pruebas de
usabilidad en general (por ejemplo, por medio de anuncios y de agencias). Las organizaciones de
discapacidades locales tambin os podran recomendar los foros apropiados para encontrar sujetos para las
pruebas.
Las pruebas no dejan de ser un trabajo y, por lo tanto, se deberan remunerar como tal. La tarifa habitual
para las pruebas de usuario est en torno a los 70 dlares la hora.
Aun as, tambin es posible que podis encontrar gente que realice pruebas de proyectos ms pequeos de
manera gratuita. Es posible que haya personas con discapacidades entre vuestros amigos, familiares y
compaeros de trabajo. Adems, hay grupos de discusin en lnea centrados en las cuestiones de
accesibilidad del software, como por ejemplo:
Lista de discusin de accesibilidad WebAIM.
Lista de correo del grupo de inters de la iniciativa de accesibilidad de la web: un foro para la discusin
de cuestiones relacionadas con la accesibilidad de la web.
Lista de correo de la British Computer Association of the Blind: para hablar de las tecnologas de la
informacin y la comunicacin (TIC) para las personas con discapacidades visuales.
Grupo de Yahoo! Magnifiers.
jfw@freelists.org: lista de correo para usuarios del lector de pantalla JAWS.
GW-Info: lista de correo para usuarios del lector de pantalla GW Micro Window-Eyes.
Grupo de Yahoo! de usuarios del software Dolphin.
Lista de correo de usuarios de NVDA.
Lista de correo de usuarios de Thunder.
discuss@macvisionaries.com: lista sobre el uso del OS X por parte de personas ciegas.
macvoiceover@freelists.org: usuarios de VoiceOver de Apple.
Blinux-list: lista sobre el uso de Linux por parte de personas ciegas y con discapacidades visuales.
Usuarios de GNOME Orca.
Foros Ay Squared: incluyen a los usuarios del popular ampliador ZoomText.
Grupo de Yahoo! Deaf-Macs: para usuarios de Mac sordos, con discapacidades auditivas y con
sndrome de Usher o sordociegas.
Grupo de Yahoo! deaf-uk-technology: discusin de tecnologas relacionadas con los sordos.
Estos grupos aceptan normalmente preguntas de desarrolladores web sobre la accesibilidad de sus sitios o
sobre tcnicas concretas.
26.5.2. Consideraciones prcticas
Recordad que el entorno de pruebas en s tambin debe ser accesible. Por ejemplo, si preparis materiales
de prueba escritos, deberis estar preparados para ofrecerlos en formatos alternativos. La logstica necesaria
para reproducir exactamente el entorno de navegacin del usuario en vuestras instalaciones de pruebas
habituales es muy complicada, por lo que puede ser ms prctico hacer las pruebas en casa del usuario. Si
no es posible, tambin se puede pensar en la posibilidad de hacer pruebas remotas.
Una consideracin concreta que probablemente es an ms importante para los usuarios con discapacidades
que para otros usuarios es la tecnologa con la que estn familiarizados. Las tecnologas de asistencia
pueden aadir muchas capas de complejidad a su experiencia informtica, lo cual crea una gran divisin
entre los usuarios noveles y los experimentados; adems, tambin podemos encontrar usuarios muy expertos
con su configuracin propia pero que se desorientan totalmente con las tecnologas que no conocen. (Slo
debis pensar en las dificultades con las que se encuentran los usuarios sin discapacidades acostumbrados
a los ordenadores por cambiar entre un Mac y un PC!).
Si encontris a un usuario muy experimentado con el lector de pantalla Window-Eyes, ponedlo ante una
mquina que desconozca con el lector de pantalla JAWS instalado y pedidle que pruebe un sitio web; le ser
220/407
muy difcil distinguir sus problemas con el JAWS de sus problemas con el sitio web. Vistas las diferencias tan
importantes entre versiones y cmo los usuarios suelen personalizar su configuracin, incluso les puede ser
difcil aunque les deis el Window-Eyes. Por ello, si no es que queris probar especficamente la accesibilidad
de vuestro sitio web en entornos no familiares (por ejemplo en bibliotecas o en ordenadores de amigos), lo
mejor es permitir que los usuarios hagan las pruebas con su configuracin propia o con algo lo ms similar
posible a sta.
De la misma manera, a no ser que queris poner a prueba concretamente a usuarios muy inexpertos o muy
expertos, deberais seleccionar a unos usuarios con aproximadamente un ao de experiencia con el uso de
su configuracin actual para acceder a la web. Es muy importante aprender tanto las tecnologas de
asistencia como las convenciones de la web en s. Con los usuarios inexpertos no sabris si los problemas
son culpa de vuestro sitio web o si son intrnsecos del proceso de aprendizaje, y los usuarios expertos
pueden tener recursos al alcance que otros no tienen.
26.5.3. Elegir las tareas
El simple hecho de observar a un usuario explorando un sitio web puede llegar a ser muy instructivo. Igual
que con cualquier otro tipo de pruebas de usuario:
Intentad encargar algunas tareas concretas a los usuarios.
Preguntadles qu piensan y escuchad bien lo que os digan.
Prestad atencin a aquello que hagan, porque puede ser diferente de aquello que dicen: las
preferencias que puedan expresar son una mala gua para el rendimiento.
Cuando diseis un sitio web, os deberis concentrar en las transacciones que quieren hacer los usuarios
ms que en los controles concretos que deban utilizar. De la misma manera, cuando probis la accesibilidad,
las tareas que encomendis deberan reflejar (por lo menos inicialmente) los objetivos de un visitante que
utilice el sitio y no se deberan concentrar tanto en sus interacciones con controles concretos. Estas
transacciones sern normalmente similares para la gente con y sin discapacidades.
Por ejemplo, si estis comprobando la accesibilidad de un sitio en el que se comparten vdeos, no empecis
preguntndoles si pueden utilizar controles concretos ("Eso es el volumen. Lo podis ajustar?"). Lo que
deberais hacer es plantearles escenarios y pedirles que realicen tareas clave para los usuarios. Por ejemplo:
Echar una ojeada a una serie de vdeos y elegir uno para reproducirlo.
Buscar un vdeo.
Cargar un vdeo.
Hacer una pausa en un vdeo, reproducirlo, quitar el sonido, poner el sonido, rebobinarlo y volver a
reproducirlo.
Calificar un vdeo.
Compartir un vdeo con un amigo.
De esta manera, es muy probable que descubris muchos problemas que no habais previsto. Por ejemplo,
un usuario de un lector de pantalla puede no ser capaz de encontrar el cuadro de bsqueda o los controles
del vdeo. Pero tambin puede ser que los usuarios utilicen unas estrategias de navegacin para moverse
por el sitio web que ni siquiera conocais.
26.5.4. Interpretar los resultados
En un mundo ideal, podramos probar todas las combinaciones posibles y saber la opinin de todo el mundo.
Pero en la realidad, el tiempo y el dinero pondrn lmites a las pruebas de usuario. Una vez asumido esto, las
opiniones pueden ser al mismo tiempo una ventaja y un problema. Aunque nos pueden hacer ver muchas
cosas, existe el peligro de dar demasiada importancia a la opinin de una persona que quiz no es
representativa de la mayora del pblico objetivo. Por ejemplo, algunos usuarios de lectores de pantalla
suelen buscar una experiencia adaptada para usuarios ciegos, mientras que otros lo que quieren es saberlo
todo sobre el sitio que sus amigos videntes ven.
Aqu es donde entran en juego realmente los estndares de accesibilidad como WCAG. Si segus estas
directrices, tendris ms posibilidades de disponer de una base de accesibilidad incluso para usuarios con
los que no podis hacer pruebas.
221/407
Cuando observis un problema, debis analizar sus causas. Por ejemplo, vuestro sitio web para compartir
vdeos incluye una pgina que muestra los vdeos ms populares en una tabla de datos; las columnas de
esta tabla incluyen un fotograma del vdeo, un ttulo, la fecha en la que se carg, la fecha en la que se
reprodujo por ltima vez y su ndice de audiencia general, y todos los vdeos aparecen organizados por filas
segn su categora. En las pruebas de usuario, un lector de pantalla tiene problemas para utilizar esta tabla
de datos. Esto puede ser un reflejo de:
Un problema con el cdigo del sitio. Por ejemplo, puede ser que los desarrolladores hayan creado una
tabla de datos a partir de elementos div sin significado en lugar de utilizar el etiquetado adecuado para
una tabla de datos. En este caso, lo que habra que hacer es volver a escribir el cdigo de la tabla.
Inexperiencia por parte del usuario. Por ejemplo, un usuario de JAWS puede no estar familiarizado con
las funciones de JAWS para navegar por tablas de datos y leer los datos. En este caso, lo que se podra
hacer es ofrecer documentacin adicional o consejos para los usuarios no tan expertos. Es posible que
los usuarios expertos no sean los sujetos ideales para las pruebas, pero s que son unos grandes
asesores en cuestiones como sta.
Un problema con el agente de usuario. Por ejemplo, Safari expone la tabla de datos en el modelo de
accesibilidad de Apple como una serie de cuadros de maquetacin y no como un conjunto de relaciones
de datos. En este caso, se podra informar de este problema al distribuidor o a los desarrolladores del
agente de usuario, o intentar encontrar alguna tcnica que funcionara con este agente de usuario, o
quiz comentar esta limitacin en la documentacin y sugerir agentes de usuario alternativos que s que
funcionen con vuestro sitio web.
Un problema con el lector de pantalla. Por ejemplo, los desarrolladores pueden haber acortado las
cabeceras de tabla largas con el atributo abbr, pero el lector de pantalla no tiene ninguna interfaz de
usuario para leer la versin abreviada. En este caso, se podra informar de este problema al distribuidor
o a los desarrolladores del lector de pantalla, o tratar de encontrar alguna tcnica que funcionara con
este lector de pantalla, o quiz comentar esta limitacin en la documentacin y sugerir una herramienta
o una estrategia de navegacin alternativa que s que funcione.
26.6. Comunicar los resultados de las pruebas de accesibilidad
A la hora de comunicar los resultados de la evaluacin de accesibilidad, debis documentar de manera
precisa lo que se ha evaluado. Si habis probado la conformidad con algn estndar en concreto, debis
puntualizar claramente dnde se da esta conformidad y dnde no. Siempre que surja un problema,
comprobad que lo explicis en trminos sencillos y que explicis claramente cmo puede afectar a los
usuarios. Describid la manera de reproducir el problema y tratad de encontrar una solucin. Sugerid tcnicas
prcticas para conseguir la conformidad o para mejorar la accesibilidad.
Ejemplo
Por ejemplo, podis informar de un problema con el sitio web para compartir vdeos de
la siguiente manera:
Problema: el men desplegable no se puede abrir sin un ratn para situarse
sobre las opciones del men, y la seleccin del teclado desaparece de la
pantalla cuando se pulsa la tecla del tabulador para desplazarse por el men.
Cmo reproducirlo: abrid la pgina en vuestro navegador e intentad llegar
hasta un subelemento del men utilizando slo el teclado.
Explicacin: la navegacin por la web no debera depender del dispositivo, de
manera que los usuarios que utilizaran dispositivos diferentes de un ratn (como
los usuarios ciegos o con discapacidades motrices) pudieran acceder al
contenido y a las funciones. Actualmente, estos usuarios no pueden acceder a
las opciones de los submens y los usuarios videntes que utilizan el teclado
pueden quedar desconcertados cuando desaparece el indicador de seleccin.
Implicaciones para la conformidad: la operatividad del teclado es una
exigencia para la conformidad con el nivel "A" de WCAG 1.0 y WCAG 2.0
(podis ver la directriz 9 de WCAG 1.0 y la directriz 2.1 de WCAG 2.0).
Soluciones propuestas: cuando no est disponible JavaScript, utilizad una
simple lista de enlaces a subpginas para cada sublista de navegacin. En las
222/407
subpginas, presentad la navegacin principal seguida de la sublista. Cuando
JavaScript est disponible, eliminad la sublista del DOM y aadid sublistas para
cada uno de los elementos de men a la accin click; estos elementos se
pueden activar con teclados, ratones, el reconocimiento de la voz y pantallas
tctiles.
Resumen
No todas las pginas pasarn por una evaluacin de accesibilidad por parte de expertos y de todo un grupo
de sujetos de pruebas pagados. Pero cualquier desarrollador web puede aprender los principios de la
accesibilidad, intentar aplicarlos en su cdigo y enviar los resultados de su trabajo a listas de correo de
usuarios para descubrir otros problemas, y de esta manera adquirir nuevos conocimientos que podr aplicar
en desarrollos futuros.
Preguntas de repaso
1. Intentad navegar por un sitio complejo sin utilizar el ratn. Qu dificultades tenis? Cmo os podran
ayudar a los desarrolladores del sitio?
2. Desactivad el CSS durante todo un da y haced lo que harais normalmente. Qu problemas tenis?
3. Desactivad el JavaScript durante todo un da y haced lo que harais normalmente. Qu problemas
tenis?
4. Elegid uno de vuestros sitios preferidos, disead algunos personajes para este sitio y evaluad su
conformidad con WCAG 1.0 y la accesibilidad en general como verificador experto. Disead un plan de
pruebas de usuario para un sitio; incluid los requisitos para la seleccin de los usuarios y las tareas que
se sometern a pruebas. Redactad un informe sobre cmo se podra mejorar la accesibilidad.
: :
223/407
Conceptos bsicos de CSS
CSS
Accesibilidad : : :
Christian Heilmann. 26 de septiembre deL 2008. Publicado en: externo, selectores, regla, incrustado, comentarios.
En este curso ya hemos hablado sobre el contenido de los sitios web y cmo estructurar el contenido con
HTML. Esto es muy importante, ya que quiere decir que damos significado y estructura a nuestros
documentos para que otras tecnologas se puedan relacionar con ellos sin problemas. La tecnologa web
ms importante que discutiremos a continuacin es el CSS (Cascading Style Sheets, hojas de estilos en
cascada), que se utiliza para aplicar estilos al HTML y situarlo en la pgina web. En este apartado,
hablaremos del CSS: qu es, cmo aplicarlo al HTML y cul es su sintaxis bsica.
Ved tambin
Podis ver cmo estructurar el contenido de los sitios web en el mdulo "Fundamentos de HTML"
27.1. Qu es el CSS?
27.2. Definir las reglas de los estilos
27.2.1. Comentarios del CSS
27.2.2. Agrupar selectores
27.3. Selectores avanzados de CSS
27.3.1. Selectores universales
27.3.2. Selectores de atributos
27.3.3. Selectores de hijos
27.3.4. Selectores de descendientes
27.3.5. Selectores de hermanos adyacentes
27.3.6. Pseudoclases
27.3.7. Pseudoelementos
27.4. CSS abreviado
27.4.1. Comparar valores individuales y abreviados
27.4.2. Dar menos de cuatro valores para una propiedad abreviada
27.4.3. Elegir entre utilizar una propiedad nica o un valor abreviado
27.4.4. Referencia abreviada
27.5. Aplicar el CSS al HTML
27.5.1. Estilos en lnea
27.5.2. Estilos incrustados
27.5.3. Hojas de estilos externos
27.5.4. Importar hojas de estilos con @import
Resumen
Preguntas de repaso
27.1. Qu es el CSS?
Mientras que el HTML estructura el documento e indica a los navegadores cul es
la funcin de un elemento concreto (es un vnculo hacia otra pgina?, es un
ttulo?), el CSS da instrucciones al navegador sobre cmo debe mostrar un
elemento concreto: estilo, espaciado y posicin. Si el HTML son los puntales y los
ladrillos que forman la estructura de una casa, el CSS es el yeso y la pintura que la
decoran.
Esto se consigue al utilizar un sistema de reglas cuya sintaxis exacta veremos ms abajo. Estas reglas dicen
qu elementos de HTML deben tener estilos aadidos, y en cada regla enumeran las propiedades (por
ejemplo, color, tamao, tipo de letra, etc.) de aquellos elementos HTML que quieren manipular y los valores
nuevos que les quieren aplicar.
224/407
Ejemplo
Una regla del CSS podra decir, por ejemplo: "Quiero encontrar todos los elementos h2
y aplicarles el color verde", o: "Quiero encontrar todos los prrafos con el nombre de
clase author-name, aplicarles un fondo de color rojo, hacer que el texto de su interior
sea el doble de grande que el texto de los prrafos normales y aadir 10 pxeles de
espaciado a su alrededor".
El CSS no es un lenguaje de programacin como JavaScript ni tampoco es un lenguaje de etiquetas como
HTML; de hecho, no hay nada con lo que se le pueda comparar. Las tecnologas que definan las interfaces
antes del desarrollo de la web mezclaban siempre la presentacin y la estructura. Sin embargo, en un
entorno que cambia tan a menudo como la web, sta no es una manera muy inteligente de hacer las cosas,
y por ello se invent el CSS.
27.2. Definir las reglas de los estilos
As pues, veamos un ejemplo de cdigo del CSS y despus lo analizaremos:
selector {
propiedad1:valor;
propiedad2:valor;
propiedad3:valor;
}
Las partes pertinentes son las siguientes:
El selector identifica los elementos del HTML a los que se aplicar la regla, que se identifican con el
nombre del elemento en s, como por ejemplo body, o con algn otro mtodo, como los valores del
atributo class; ya volveremos a hablar de ello ms adelante.
Las llaves contienen las parejas de propiedad/valor, que se separan entre ellas con un signo de punto y
coma; las propiedades se separan de sus valores respectivos con el signo de dos puntos.
Las propiedades definen lo que queris hacer con los elementos que habis seleccionado. Pueden ser
muy variadas y pueden modificar el color, el color de fondo, la posicin, los mrgenes, la separacin, el
tipo de letra y muchos otros aspectos del elemento.
Los valores son los valores a los que queris cambiar cada una de las propiedades de los elementos
seleccionados. Los valores dependen de la propiedad; por ejemplo, las propiedades que afectan al color
pueden tener valores hexadecimales como #336699, valores RGB como rgb (12,134,22) o nombres de
colores (en ingls) como red, green o blue. Las propiedades que afectan a la posicin, los mrgenes, la
anchura, la altura... se pueden medir en pxeles, ems, porcentajes, centmetros u otras unidades
similares.
Veamos ahora un ejemplo concreto:
p {
margin:5px;
font-family:arial;
color:blue;
}
El elemento HTML que selecciona esta regla es p; esta regla se aplicar a todos los p de los documentos
HTML que utilicen este CSS, a menos que haya reglas ms concretas que se les apliquen, ya que en este
caso las reglas ms concretas tendrn prioridad sobre esta regla. Las propiedades que se ven afectadas por
esta regla son los mrgenes alrededor de los prrafos, el tipo de letra del texto de los prrafos y el color de
este texto. Los mrgenes estn definidos en 5 pxeles, el tipo de letra est definido en Arial y el color del
texto es azul.
Ya volveremos a hablar de todos estos detalles ms adelante; el objetivo principal de este apartado es
explicar las bases del CSS y no sus detalles menores.
Todas estas reglas se unen para formar una hoja de estilos. sta es la sintaxis ms bsica de CSS. Hay
225/407
ms cosas, pero no muchas ms; probablemente, lo mejor que tiene CSS es su sencillez.
27.2.1. Comentarios del CSS
Una de las primeras cosas que hay que saber es cmo hacer comentarios en CSS. Podis aadir
comentarios ponindolos entre /* y */. Los comentarios pueden ocupar varias lneas, que el navegador
ignorar:
/* stos son selectores de elementos bsicos */
selector{
propiedad1:valor;
propiedad2:valor;
propiedad3:valor;
}
Podis aadir comentarios entre reglas o en un bloque de propiedades; por ejemplo, en el siguiente CSS las
propiedades segunda y tercera se encuentran entre delimitadores de comentario, por lo que el navegador las
ignorar. Esto puede ser muy til cuando queris comprobar los efectos que tienen partes concretas del CSS
en vuestra pgina web; podis eliminarlas convirtindolas en comentarios, guardar el CSS y volver a cargar
el HTML.
selector{
propiedad1:valor;
/*
propiedad2:valor;
propiedad3:valor;
*/
}
A diferencia de otros lenguajes, el CSS slo tiene comentarios de bloque; los comentarios de lnea no
existen. Evidentemente, si lo queris, podis restringir el comentario a una nica lnea, pero deberis seguir
incluyendo los delimitadores de apertura y de cierre de comentario (/* y */).
27.2.2. Agrupar selectores
Tambin podis agrupar diferentes selectores. Pongamos por caso que queris aplicar el mismo estilo a h1 y
p; podrais escribir el siguiente CSS:
h1 {color:red}
p {color:red}
Sin embargo, sta no es la manera ideal de hacer las cosas, ya que repets informacin idntica. Por lo
tanto, podis acortar el CSS agrupando los selectores con una coma; las reglas entre llaves se aplican a
ambos selectores:
h1, p {color:red}
Hay varios selectores, y cada uno se corresponde con una parte diferente del etiquetado. Los tres ms
bsicos que encontraris ms a menudo son los siguientes:
p {}: selector de elementos.
Se corresponde con todos los elementos de este nombre de la pgina (en el caso anterior, elementos
p).
.example{}: selector de clase.
Se corresponde con todos los elementos que tienen el atributo class con el valor especificado; por lo
tanto, el selector anterior se correspondera con <p class="example">, <li class="example"> o <div
class="example">, o con cualquier otro elemento con class definido como example. Tened en cuenta que
los selectores de clase no comprueban ningn nombre de elemento concreto.
#example{}: selector de id.
Se corresponde con todos los elementos que tienen un atributo id con el valor especificado; as pues, el
226/407
selector anterior se correspondera con <p id="example">, <li id="example"> o <div id="example">, o con
cualquier otro elemento con id definido como example. Tened en cuenta que los selectores de ID no
comprueban ningn nombre de elemento y que slo podis tener un ID de cada por documento HTML,
ya que son nicos para cada pgina.
En los siguientes ejemplos podis ver los selectores anteriores en accin. Observad que cuando abrs el
ejemplo en un navegador, el estilo warning se aplica tanto al punto de la lista como al prrafo (si desaparece
el pico, es porque defins un color de texto blanco sobre un fondo blanco).
"Ejemplo de selectores"
"Selectors.css"
Tambin podis unir varios selectores para definir unas reglas an ms especficas:
p.warning{}. Se corresponde con todos los prrafos cuya class es warning de class.
div#example{}. Se corresponde con el elemento con example como atributo id, pero slo cuando es un
div.
p.info, li.highlight{}. Se corresponde con los prrafos cuya class sea info y con los puntos de lista
con el valor highlight en class.
En el siguiente ejemplo, utilizamos selectores especficos para diferenciar los diferentes estilos de
advertencias.
"Specificselectors example"
"Specificselectors.css"
27.3. Selectores avanzados de CSS
En el subapartado anterior hemos explicado los selectores ms bsicos de CSS, que son los selectores de
elemento, clase e identificador. Con estos selectores se pueden hacer muchas cosas, pero eso no lo es todo;
hay otros selectores que permiten seleccionar elementos para aplicarlos en funcin de criterios ms
especficos:
Selectores universales: los selectores universales se pueden utilizar para seleccionar todos los
elementos de la pgina.
Selectores de atributo: tal como indica su nombre, los selectores de atributos permiten seleccionar
elementos en funcin de sus atributos.
Selectores de hijos: si queris seleccionar elementos concretos que son hijos de otros elementos
concretos, podis utilizar este selector.
Selectores de descendientes: si queris seleccionar elementos concretos que son descendientes de
otros elementos concretos (no slo hijos directos, sino tambin ms abajo del rbol), podis utilizar este
tipo de selector
Selectores de hermanos adyacentes: si queris seleccionar slo elementos concretos que siguen a otros
elementos concretos, utilizad estos selectores.
Pseudoclases: permiten aplicar estilos a elementos, no en funcin de qu son los elementos, sino en
funcin de factores ms raros como, por ejemplo, el estado de los enlaces (por ejemplo, si se est
encima o si ya se han visitado).
Pseudoelementos: permiten aplicar estilos a partes concretas de los elementos y no a todo el elemento
(por ejemplo, la primera letra de este elemento); tambin os permiten insertar contenido antes o despus
de elementos concretos.
Nota
A medida que vayis progresando por este curso, encontraris referencias a algunos
de estos selectores ms complicados. Si no los entendis a la primera, no debis
preocuparos; ya los iris dominando a medida que ganis experiencia en los estilos de
227/407
las pginas web. Lo mejor es empezar con los tres selectores bsicos mencionados en
el subapartado anterior e ir utilizando los otros una vez que os vayis sintiendo ms
seguros.
27.3.1. Selectores universales
Para decirlo rpidamente, los selectores universales seleccionan todos los elementos de una pgina para
aplicarles estilos. Por ejemplo, la regla siguiente dice que todos los elementos de la pgina deben tener un
borde slido de color negro de 1 pxel:
* {
}
27.3.2. Selectores de atributos
Los selectores de atributos permiten seleccionar elementos en funcin de los atributos que contienen. Por
ejemplo, con el selector siguiente podis seleccionar todos los elementos img con un atributo alt:
img[alt]{
}
Tened en cuenta los corchetes.
Con el selector anterior quiz podrais definir un borde negro en torno a todas las imgenes con un atributo
alt y un borde rojo alrededor de todas las dems imgenes, algo muy til para las pruebas de accesibilidad.
Pero los atributos os pueden ser mucho ms tiles si tenis en cuenta que podis hacer selecciones a partir
del valor de los atributos, y no slo a partir de sus nombres. La regla siguiente se aplica a todas las
imgenes que tienen un atributo src con el valor alert.gif:
img[src="alert.gif"]{
}
Quiz pensis que no es muy til, pero puede serlo mucho para la depuracin. Y an mucho ms til es la
posibilidad de seleccionar partes concretas de atributos, como por ejemplo extensiones de archivos. Y eso ya
est llegando: CSS 3 introduce tres tipos nuevos de selectores de atributos que pueden hacer selecciones en
funcin de las cadenas de texto de los valores de los atributos (al principio, al final o en cualquier punto del
valor). Podis leer el artculo de Christopher Schmitt sobre los selectores de atributos del CSS 3.
27.3.3. Selectores de hijos
Si queris seleccionar elementos concretos que son hijos de otros elementos concretos, podis utilizar este
selector. Por ejemplo, la regla siguiente pondr de color azul el texto de los elementos strong hijos de
elementos h3, pero ninguno de los dems elementos strong:
h3 > strong {
color: blue;
}
Nota
IE 6 y sus versiones anteriores no aceptan los selectores de hijos.
27.3.4. Selectores de descendientes
Los selectores de descendientes son muy similares a los selectores de hijos, excepto que estos ltimos
seleccionan slo a los descendientes directos; los selectores de descendientes seleccionan los elementos
pertinentes en cualquier punto de la jerarqua del elemento, y no slo los descendientes directos. Fijmonos
bien en qu quiere decir esto. Pongamos por caso el siguiente fragmento de HTML:
228/407
<div>
<em>hello</em>
<p>In this paragraph I will say
<em>goodbye</em>.
</p>
</div>
En este fragmento, el elemento div es el padre de todos los dems. Tiene dos hijos, un em y un p. El
elemento p tiene un nico elemento hijo, que es otro em.
Podis utilizar un selector de hijos para seleccionar slo el elemento em que hay inmediatamente dentro de
div, de la siguiente manera:
div > em {
...
}
Si utilizis un selector de descendientes de la siguiente manera:
div em {
...
}
entonces se seleccionarn los dos elementos em.
27.3.5. Selectores de hermanos adyacentes
Estos selectores permiten seleccionar un elemento concreto que aparece directamente despus de otro
elemento concreto en el mismo nivel de la jerarqua del elemento. Por ejemplo, si quisierais seleccionar todos
los elementos p que aparecen inmediatamente despus de los elementos h2, pero no los dems elementos
p, podrais utilizar la siguiente regla:
h2 + p {
...
}
Nota
IE 6 y sus versiones anteriores no aceptan los selectores de hermanos adyacentes.
27.3.6. Pseudoclases
Las pseudoclases se utilizan para definir estilos, no para los elementos, sino para varios estados de los
elementos. El uso ms habitual que haris de ellas es para aplicar estilos en los estados de los enlaces; por
lo tanto, son los que veremos en primer lugar. La lista siguiente especifica las diferentes pseudoclases y
describe el estado del enlace que seleccionan:
:link: el estado normal por defecto de los enlaces, tal como se encuentran cuando se ven por primera
vez.
:visited: enlaces que ya habis visitado en el navegador que estis utilizando.
:focus: enlaces (o campos de formularios, o cualquier otra cosa) que tienen en este momento el cursor
del teclado en su interior.
:hover: enlaces que tienen en este momento el puntero del ratn sobre ellos.
:active: un enlace en el que se est haciendo clic.
Las siguientes reglas CSS definen que, por defecto, los enlaces sean de color azul (el valor por defecto en la
mayora de los navegadores). Al poneros encima, desaparece el subrayado del enlace. Tambin queremos
229/407
conseguir este mismo efecto cuando se selecciona el enlace con el teclado, por lo que duplicamos la regla
:hover con :focus. Una vez que ya se ha visitado un enlace, ste queda de color gris. Por ltimo, cuando un
vnculo est activo, aparece en negrita para dar una pista adicional de que pasar algo.
a:link{
color: blue;
}
a:visited{
color: gray;
}
a:hover a:focus{
}
a:active{
font-weight: bold;
}
Nota
Cuidado si no defins estas reglas en el orden en el que aparecen en el ejemplo
anterior, ya que de otro modo puede ser que no funcionen de la manera esperada.
Esto es por el modo como la especificidad hace que las reglas posteriores de la hoja
de estilos anulen las reglas anteriores. En el siguiente apartado, aprenderemos ms
detalles sobre la especificidad.
La pseudoclase :focus tambin es til como contribucin a la usabilidad en los formularios. Por ejemplo,
podis destacar el campo de introduccin de datos que tiene el cursor intermitente activo en su interior con
una regla como la siguiente:
input:focus {
border: 2px solid black;
background color: lightgray;
}
A continuacin, explicaremos :first-child. Esta pseudoclase selecciona cualquier aparicin del elemento
que es el primer elemento hijo de su padre; de modo que, por ejemplo, la regla siguiente selecciona el primer
punto (con pico o numerado) de cualquier lista y pone el texto en negrita:
li:first-child {
font-weight: bold;
}
Finalmente, comentaremos brevemente la pseudoclase :lang, que selecciona elementos que tienen un
idioma concreto definido con el atributo lang. Por ejemplo, el elemento siguiente:
<p lang="en-US">A paragraph of American text, gee whiz!<p>
Se podra seleccionar de la manera siguiente:
p:lang(en-US) {
...
}
27.3.7. Pseudoelementos
Los pseudoelementos tienen dos finalidades. En primer lugar, los podis utilizar para seleccionar la primera
letra o la primera lnea del texto del interior de un elemento concreto. Para crear una letra capitular al
principio de cada prrafo del documento, podis utilizar la regla siguiente:
p:first-letter {
font-weight: bold;
230/407
font-size: 300%
background-color: red;
}
La primera letra de cada prrafo aparecer en negrita, un 300% ms grande que el resto del prrafo y con
un fondo rojo.
Para hacer que la primera lnea de cada prrafo aparezca en negrita, podis utilizar la regla siguiente:
p:first-line {
font-weight: bold;
}
El segundo uso de los pseudoelementos es generar contenido por medio del CSS, lo cual es ms
complicado. Podis utilizar los pseudoelementos :before o :after para especificar el contenido que se debe
insertar antes o despus del elemento que seleccionis. Entonces podis especificar qu es lo que queris
insertar. Como ejemplo muy sencillo, podis utilizar la regla siguiente para insertar una imagen decorativa
despus de cada uno de los enlaces de la pgina:
a:after{
content: " " url(flower.gif);
}
Tambin podis utilizar la funcin attr() para insertar los valores de los atributos de los elementos despus
del elemento. Por ejemplo, con la regla siguiente podis insertar el destino de cada uno de los enlaces del
documento entre parntesis despus del enlace:
a:after{
content: "(" attr(href) ")";
}
Las reglas de este tipo son ideales para hojas de estilos de impresin, que son hojas de estilos que podis
escribir y que se aplican automticamente cuando un usuario imprime una pgina. La ventaja para el usuario
es que podis ocultar toda la navegacin que un usuario no podr seguir en una copia impresa y utilizar la
tcnica anterior para que el lector pueda ver las URL a las que se hace referencia en una pgina.
Tambin podis insertar valores numricos incrementados despus de los elementos que se repiten (como
por ejemplo picos o prrafos) con la funcin counter(); esto se explica con mucho ms detalle en el artculo
de dev.opera.com sobre los contadores de CSS.
Nota
IE 6 y sus versiones anteriores no aceptan estos selectores. Tambin debis tener en
cuenta que no debis dar informacin importante con CSS, ya que el contenido no
estar disponible para las tecnologas de asistencia o si un usuario decide no utilizar
vuestra hoja de estilos. La norma bsica es que el CSS es para los estilos y el HTML
es para el contenido importante.
27.4. CSS abreviado
Otro detalle con el que os encontraris normalmente en este curso es el CSS abreviado. Es posible combinar
varias propiedades de CSS relacionadas en una nica propiedad para ahorraros tiempo y esfuerzo. En este
apartado, veremos los tipos de propiedades abreviadas disponibles.
Nota
En este subapartado ya hemos utilizado el CSS abreviado sin decirlo. La regla border:
2px solid black; es la regla abreviada para especificar por separado border-width:
2px;, border-style: solid; y border-color: black;.
27.4.1. Comparar valores individuales y abreviados
231/407
Observad la regla siguiente para el margen (las reglas abreviadas para separacin y borde funcionan de la
misma manera):
div.foo {
margin-top: 1em;
margin-right: 1.5em;
margin-bottom: 2em;
margin-left: 2.5em;
}
Esta regla tambin se podra escribir:
div.foo {
margin: 1em 1.5em 2em 2.5em;
}
27.4.2. Dar menos de cuatro valores para una propiedad abreviada
Un valor abreviado puede incluir menos de cuatro valores, que se aplicarn segn se especifica a
continuacin. Los resultados se ordenan segn el nmero de valores especificados:
1. El mismo valor se aplica a los cuatro lados, por ejemplo margin: 2px;
2. El primer valor se aplica a los mrgenes superior e inferior, y el segundo a los mrgenes izquierdo y
derecho, por ejemplo margin: 2px 5px;.
3. Los valores primero y tercero se aplican a los mrgenes superior e inferior respectivamente, y el
segundo a los mrgenes izquierdo y derecho, por ejemplo margin: 2px 5px 1px;.
4. Los valores se aplican a los mrgenes superior, derecho, inferior e izquierdo respectivamente en el
orden en el que aparecen en el CSS, tal como hemos visto antes.
En general, la manera ms inteligente de proceder es especificar los cuatro valores en las propiedades
abreviadas, por cuestiones de legibilidad. Este consejo tambin sirve para la propiedad abreviada padding.
27.4.3. Elegir entre utilizar una propiedad nica o un valor abreviado
Las propiedades margin y padding abreviadas son las que se utilizan ms, aunque hay situaciones en las que
es mejor no utilizar las propiedades abreviadas, o como mnimo utilizarlas con mucho cuidado, como por
ejemplo las siguientes:
Slo se debe definir un nico margen. En una situacin en la que slo se debe definir una propiedad,
el hecho de definir al mismo tiempo mltiples propiedades representa normalmente una violacin del
principio KISS (Keep It Simple, Stupid o No lo compliques, estpido).
El selector al que se aplican las propiedades est sujeto a muchos casos diferentes. Cuando esto
suceda, y tarde o temprano acabar pasando, el inevitable piln de valores abreviados har que todo
sea difcil de entender cuando debis reparar o modificar la composicin.
El mantenimiento de la hoja de estilos que estis escribiendo ir a cargo de personas con un
nivel de habilidades (o de capacidad de razonamiento espacial) deficiente. Si contis con que
leern este texto, entonces no es necesario que os preocupis, pero quiz es mejor no suponer segn
qu cosas...
Debis cambiar un valor para un caso concreto. Esto es normalmente consecuencia de un
documento o de una hoja de estilos mal diseada, pero tampoco es una situacin excepcional.
27.4.4. Referencia abreviada
1. Definicin abreviada de bordes para diferentes propiedades: ya se han explicado al principio de este
subapartado. Una cuestin adicional que debemos mencionar es que incluso podis definir los valores
de las propiedades del borde slo para un nico borde del elemento al que se aplica, de la siguiente
manera:
232/407
border-left-width: 2px;
border-left-style: solid;
border-left-color: black;
2. Definicin abreviada de margen, rellenado y borde para las mismas propiedades: todas actan de la
misma manera.
Ved tambin
Podis ver la definicin abreviada de margen, rellenado y borde para las mismas propiedades en el
subapartado 27.4.1 de este mdulo.
3. Definicin abreviada de tipo de letra: podis especificar el tamao del tipo de letra, el peso, el estilo, la
familia y la interlnea utilizando una definicin abreviada como una nica lnea. Pongamos por caso el
CSS siguiente:
font-size: 1.5em;
line-height: 200%;
font-weight: bold;
font-style: italic;
font-family: Georgia, "Times New Roman", serif;
Podrais especificar exactamente lo mismo con la lnea siguiente:
font: 1.5em/200% bold italic Georgia, "Times New Roman", serif;
4. Definicin abreviada de fondo: podis especificar el color de fondo, la imagen de fondo, la repeticin de
la imagen y la posicin de la imagen con una nica lnea del CSS. Imaginmonos lo siguiente:
background-color: #000;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
Todo esto mismo se podra representar con la siguiente definicin abreviada:
background: #000 url(image.gif) no-repeat top left;
5. Definicin abreviada de lista: aqu tambin encontramos un cdigo similar con propiedades de una lista
que permite definir los valores para el tipo de pico, la posicin y la imagen en una nica lnea.
Imaginmonos el siguiente CSS:
list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif);
Esto es equivalente a:
list-style: circle inside url(bullet.gif);
Nota>
Observad que #000 es el valor hexadecimal abreviado para el color; es el equivalente al
valor no abreviado #000000 que ya hemos visto antes. Y si queris ver un ejemplo
ms complicado, #6c9 es lo mismo que #66cc99.
27.5. Aplicar el CSS al HTML
Hay tres maneras de aplicar el CSS a un documento HTML: estilos en lnea, estilos incrustados y hojas de
estilos externas. A no ser que tengis alguna razn muy buena para utilizar uno de los dos primeros
mtodos, os deberais decidir siempre por la tercera opcin. Pronto veremos el motivo, que es muy obvio,
pero antes hablaremos de las diferentes opciones.
233/407
27.5.1. Estilos en lnea
Podis aplicar estilos a un elemento utilizando un atributo style, de la manera siguiente:
<p style="background:blue; color:white; padding:5px;">Paragraph</p>
Podis ver la pgina ejemplo en: "CSS Basics Example"
En este atributo se listan todas las propiedades CSS y sus valores (cada pareja de propiedad/valor se separa
de las dems con un signo de punto y coma, y cada propiedad se separa de su valor dentro de la pareja con
un signo de dos puntos). sta es la manera de definir estilos con CSS.
Si abrs este ejemplo en un navegador y lo miris, veris que el prrafo con el atributo style es azul con el
texto blanco y que tiene un tamao diferente de los dems, como se puede ver en la figura 1.
Figura 1. Opera muestra el prrafo con los estilos insertados aplicados de una
manera diferente a los dems.
La ventaja de los estilos insertados es que el navegador se ver obligado a utilizar estos ajustes. Cualquier
otro estilo definido con otras hojas de estilos, o incluso los incrustados en el elemento head del documento,
quedarn invalidados por estos estilos.
El gran problema de los estilos insertados es que hacen que el mantenimiento sea mucho ms difcil de lo
que debera ser. El uso de CSS permite separar la presentacin del documento de su estructura, mientras
que lo que hacen los estilos insertados es precisamente extender reglas de presentacin por todo el
documento.
Adems de la cuestin del mantenimiento, tampoco se aprovecha el aspecto ms potente del CSS: la
cascada. En el siguiente apartado, volveremos a hablar de la cascada con detalle, pero de momento todo lo
que debis saber es que el uso de la cascada implica definir un aspecto en un lugar que entonces el
navegador aplica a todos los elementos que cumplen una regla concreta.
27.5.2. Estilos incrustados
Los estilos incrustados se colocan en el elemento head del documento en un elemento style, tal como se ve
en el ejemplo siguiente:
234/407
p {
color:white;
background:blue;
padding:5px;
}
</style>
Podis ver la pgina ejemplo en: "Embedded example"
Si abrs el enlace anterior en un navegador, veris que los estilos definidos se aplican a todos los prrafos
del documento, tal como muestra la figura 2. Mirad tambin el cdigo fuente de la pgina del ejemplo para
ver el CSS del interior de head.
Figura 2. Opera muestra todos los prrafos con los estilos definidos en la hoja
de estilos incrustados.
La ventaja de los estilos incrustados es que no hay que aadir un atributo style en cada prrafo; los estilos
se pueden aplicar a todos los prrafos con una nica definicin. Esto tambin quiere decir que si debis
cambiar el aspecto de todos los prrafos, podris hacerlo interviniendo en un nico lugar, aunque esto est
limitado a un documento; pero qu deberais hacer si quisierais definir al mismo tiempo el aspecto de todos
los prrafos de todo un sitio web? Utilizar hojas de estilos externas.
27.5.3. Hojas de estilos externos
Las hojas de estilos externos permiten poner todas las definiciones CSS en un archivo independiente,
guardar este archivo con la extensin CSS y entonces aplicarlo a todos los documentos HTML con un
elemento link en el head del documento. Consultad el cdigo fuente de nuestra pgina de ejemplo, observad
que head contiene un elemento que hace referencia a un archivo CSS externo y comprobad que todos los
estilos definidos en el archivo CSS externo se aplican al HTML. Observemos ms atentamente este elemento
link:
<link rel="stylesheet" href="styles.css" type="text/css" media="screen">
En este curso ya hemos hablado del elemento link. Slo para recapitular: el atributo href apunta hacia un
archivo CSS, el atributo media define en qu soportes se aplicarn estos estilos (en este caso, screen, ya que
no queremos que un documento impreso tenga este aspecto) y type define qu es el recurso al que apunta
el enlace (una extensin de archivo no es suficiente para determinarlo).
235/407
Ved tambin
Hemos hablado del elemento link en el apartado 18 del mdulo "El texto central de HTML".
Figura 3. Opera muestra los estilos definidos en la hoja de estilos externa
cuando se enlaza con un elemento link.
Podis ver un ejemplo en: "External example"
sta es la mejor situacin imaginable: todas las definiciones de aspecto se encuentran en un nico archivo,
lo que significa que podis hacer cambios en todo el sitio web slo cambiando un archivo, y el navegador lo
puede cargar una vez y despus guardarlo en la memoria cach para todos los dems documentos que
hacen referencia a ste, con lo cual se debe descargar una cantidad de datos menor.
27.5.4. Importar hojas de estilos con @import
Hay an otra manera de importar hojas de estilos externas a archivos HTML: la propiedad @import. Esta
propiedad se inserta en una hoja de estilos incrustada, de la misma manera que el CSS incrustado que
hemos visto antes. La sintaxis es la siguiente:
@import url("styles.css");
...aqu hi poden haver altres enunciats o estils CSS per importar-los...
</style>
Algunas veces veris enunciados de importacin sin los parntesis, pero el resultado es el mismo. Otro dato
que debis tener en cuenta es que @import debe ocupar siempre el primer lugar en una hoja de estilos
incrustada. Finalmente, podis especificar que la hoja de estilos importada se aplique slo a algunos tipos de
soporte e incluir el tipo de soporte al final del enunciado de importacin (esto funciona con todos los
navegadores exceptuando IE 6 y versiones anteriores). El siguiente cdigo hace lo mismo que el ejemplo
anterior:
@import url("styles.css") screen;
...aqu puede haber otros enunciados o estilos CSS para importarlos...
</style>
La primera pregunta que os debis estar haciendo es: "por qu necesito otra manera de aplicar hojas de
estilos externos a mis documentos HTML"? Pues bien, en realidad no la necesitis. Slo incluimos aqu la
informacin sobre @import por una cuestin de exhaustividad. El uso de @import en lugar de elementos link
236/407
tiene unas cuantas ventajas y desventajas menores, pero stas son muy menores, por lo cual la decisin
ser en realidad vuestra. Los elementos link son actualmente la manera ms aceptada de hacer las cosas:
Los navegadores antiguos no reconocen @import y, por lo tanto, lo ignoran completamente (Netscape 4 y
versiones anteriores, as como IE 4 y versiones anteriores si no ponis el nombre del archivo entre
parntesis). Por lo tanto, podis utilizar un enunciado @import para ocultar estilos a los navegadores
antiguos que los utilizaran incorrectamente. Podis poner los estilos actualizados en una hoja de estilos
externa, importarlos con @import y ofrecer algunos estilos realmente bsicos que no hagan que IE o
Netscape 4 se queden encallados en la hoja de estilos incrustada. Os puede ser muy til, pero
actualmente no es muy habitual que sea necesario ofrecer compatibilidad con IE/Netscape 4.
Como ya hemos comentado, IE 6 no acepta la colocacin del tipo de soporte al final de la lnea de
@import; por lo tanto, si queris insertar mltiples hojas de estilos para diferentes soportes, sta no es
una buena opcin.
Podrais argumentar que el cdigo para mltiples enunciados @import es ms corto que el cdigo para
mltiples elementos link, pero esta ventaja es insignificante.
Resumen
En este apartado habis aprendido a aplicar CSS a documentos HTML, ya sea en forma de estilos
insertados utilizando atributos style, en forma de estilos incrustados en un elemento style en el head del
documento o como archivos externos en un documento independiente. Tambin habis aprendido que esta
ltima opcin, la de enlazar una hoja de estilos externa utilizando un elemento link, es la ms recomendable
respecto al mantenimiento y al uso de la memoria cach. Finalmente, hemos hablado sobre la sintaxis bsica
del CSS y hemos explicado los comentarios, diferentes tipos de selectores y la agrupacin de selectores.
En el siguiente apartado seguiremos viendo detalles de CSS y hablaremos con detenimiento de la cascada y
de la especificidad de los selectores.
Preguntas de repaso
1. Cules son las ventajas y los problemas de los estilos en lnea y cmo los aplicis a un elemento?
2. Qu es una regla de estilo? Describid sus diferentes componentes y su sintaxis.
3. Imaginad que tenis unas cuantas reglas de estilos; qu debis hacer para convertirlas en una hoja de
estilos externa?
4. Con qu se corresponde el siguiente selector CSS: ul#nav{}?
5. Cul es la ventaja de agrupar selectores?
6. Cmo podis definir una hoja de estilos de impresin?
: :
237/407
CSS - Herencia y cascada
CSS
Herencia y cascada
Accesibilidad : : :
Tommy Olsson. 26 de septiembre del 2008. Publicado en: importancia, fuente, orden, importante, especificidad
La herencia y la cascada son dos conceptos bsicos en CSS. Se deben comprender bien para utilizar CSS.
Por suerte, no son muy difciles de entender, aunque algunos detalles pueden ser un tanto complicados de
recordar.
Ambos conceptos estn relacionados, pero son diferentes. La herencia est relacionada con cmo los
elementos del etiquetado de HTML heredan propiedades de sus elementos padres (los que los contienen) y
los transmiten a sus hijos, mientras que la cascada tiene que ver con las declaraciones de CSS que se
aplican a un documento y cmo las reglas contradictorias se anulan o no entre ellas.
En este apartado, trataremos detalladamente estos dos conceptos. Probablemente, la herencia es un
concepto ms fcil de captar, de manera que empezaremos con ste y despus pasaremos a las
particularidades de la cascada.
Nota
Descargad el cdigo fuente de los ejemplos de este apartado; el fichero
"inheritance_cascade_code.zip" contiene el CSS y HTML acabados, adems de la
plantilla inicial de HTML para que podis ir trabajando mientras veis los ejemplos.
Descargad los ejemplos en: "inheritance_cascade_code.zip"
28.1. Herencia
28.1.1. Para qu sirve la herencia
28.1.2. Cmo funciona la herencia
28.1.3. Un ejemplo de herencia
28.1.4. Forzar la herencia
28.2. Cascada
28.2.1. Importancia
28.2.2. Especificidad
28.2.3. Orden en las fuentes
Resumen
Preguntas de repaso
28.1. Herencia
La herencia en CSS es el mecanismo mediante el cual determinadas propiedades
de un elemento padre se transmiten a sus hijos. De hecho, se parece mucho a la
herencia gentica. Si los progenitores tienen los ojos azules, los hijos seguramente
tambin tendrn los ojos azules.
No todas las propiedades CSS son heredadas, porque algunas de ellas no tendra sentido que lo fueran. Por
ejemplo, los mrgenes no se heredan porque es poco probable que un elemento hijo necesite los mismos
mrgenes que su padre. Normalmente, el sentido comn dicta qu propiedades se heredan y cules no, pero
para estar del todo seguros, debemos consultar cada propiedad en la tabla de resumen de propiedades de la
especificacin CSS 2.1.
28.1.1. Para qu sirve la herencia
Por qu tiene CSS un mecanismo de herencia? Probablemente, la manera ms sencilla de responder a
esta pregunta sea pensar qu pasara si no existiera la herencia. Se deberan especificar cuestiones como la
familia de fuentes, el tamao de la fuente y el color del texto individualmente para todos y cada uno de los
238/407
tipos de elemento.
Mediante la herencia, por ejemplo, se pueden especificar las propiedades de las fuentes de los elementos
html o body y todo el resto de elementos los heredarn. Se pueden especificar los colores de fondo y de
primer plano de un elemento contenedor concreto y todos los elementos hijos de este contenedor heredarn
automticamente el color de primer plano. El color de fondo no se hereda, pero el valor inicial de background-
color (color de fondo) es transparent, lo cual significa que el fondo del padre se ver a travs de l. El efecto
es el mismo que si se heredara el color de fondo, pero pensad qu sucedera si se heredaran las imgenes
de fondo: todos los hijos tendran la misma imagen de fondo como padre y, por lo tanto, todo parecera un
rompecabezas creado por alguien con problemas de drogas, ya que el fondo "volvera a empezar desde
cero" para cada elemento.
28.1.2. Cmo funciona la herencia
Todos los elementos de un documento HTML heredan todas las propiedades heredables de su padre
excepto el elemento raz (html), que no tiene progenitor.
El hecho de que las propiedades heredadas tengan algn efecto o no depende de otros factores, como
veremos ms adelante cuando hablemos de la cascada. De la misma manera que una madre de ojos azules
puede tener un hijo de ojos marrones si el padre tiene los ojos marrones, las propiedades heredadas en CSS
pueden anularse.
28.1.3. Un ejemplo de herencia
1. Copiad el siguiente documento HTML en un fichero nuevo del editor de textos que ms os guste y
guardadlo como inherit.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Herencia</title>
</head>
<body>
<h1>Ttulo</h1>
<p>Un prrafo de texto.</p>
</body>
</html>
Si abrs el documento en el navegador web, veris un documento bastante aburrido que se muestra
segn el estilo por defecto de vuestro navegador.
2. Cread un nuevo fichero vaco con el editor de textos, copiad dentro la regla CSS que se muestra a
continuacin y guardad el fichero como style.css en la misma ubicacin que el fichero HTML.
html {
font: 75% Verdana,sans-serif;
}
3. Enlazad la hoja de estilos en el documento HTML insertando la lnea siguiente antes del tag </head>.
<link rel="stylesheet" type="text/css" media="screen" href="styles.css">
4. Guardad el fichero HTML modificado y recargad el documento en el navegador. La fuente pasar de ser
la predeterminada por el navegador (normalmente Times o Times New Roman) a ser Verdana. Si no
tenis Verdana instalada en el ordenador, el texto se mostrar con la fuente Sans Serif especificada por
defecto en la configuracin del navegador. Adems, el texto se ver un 25% ms pequeo que en la
versin sin estilo.
La regla CSS que hemos especificado se aplica nicamente al elemento html. No hemos especificado
ninguna regla para los ttulos o los prrafos, pero ahora todo el texto se muestra en Verdana al 75% del
tamao por defecto. Por qu? Por la herencia.
239/407
La propiedad font es una propiedad abreviada que establece toda una serie de propiedades
relacionadas con las fuentes. Slo hemos especificado dos, el tamao de la fuente y la familia de
fuentes, pero esta regla equivale a lo siguiente:
html {
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 75%;
line-height: normal;
font-family: Verdana,sans-serif;
}
Todas estas propiedades se heredan, de manera que el elemento body las heredar del elemento html y
despus las transmitir a sus hijos: el ttulo y el prrafo.
Pero, un momento! Hay algo que no acaba de quedar claro respecto a la herencia del tamao de la
fuente, verdad? El tamao de la fuente del elemento html se establece en 75%, pero 75% de qu? Y
el tamao de la fuente de body no debera ser el 75% del tamao de la fuente de su padre y los tamaos
de las fuentes del ttulo y del prrafo deberan ser el 75% del tamao del elemento body?
El valor que se hereda no es el valor especificado, es decir, el valor que escribimos en la hoja de estilo,
sino algo que se llama el valor computado. El valor computado es, en el caso del tamao de la fuente,
un valor absoluto medido en pxeles. Para el elemento html, que no tiene un elemento padre del cual
heredar, un porcentaje del valor de tamao de fuente se asocia al tamao de fuente predeterminada del
navegador. La mayora de los navegadores actuales tienen un tamao de fuente predeterminada de 16
pxeles. El 75% de 16 son 12, de manera que el valor computado del tamao de la fuente del elemento
html ser probablemente 12 pxeles. ste es el valor que hereda body y que se transmite al ttulo y al
prrafo.
(El tamao de la fuente del ttulo es mayor porque el navegador aplica algunas normas de estilo
integradas propias. Podis ver el tema de la cascada a continuacin.)
5. Aadid dos declaraciones ms a la regla de la hoja de estilo de CSS:
html {
font: 75% Verdana,sans-serif;
background-color: blue;
color: white;
}
6. Guardad el fichero CSS y recargad el documento en el navegador.
Ahora el fondo es de color azul fuerte y todo el texto es blanco. La regla se aplica al elemento html: el
documento entero, cuyo fondo ser azul. El elemento body hereda el color blanco de primer plano y se
transmite a todos los hijos de body: en este caso, el ttulo y el prrafo. stos no heredan el fondo, pero el
fondo se establecer en el valor por defecto de transparent, de manera que el resultado visual final ser
texto blanco sobre fondo azul.
7. Aadid otra regla nueva a la hoja de estilo y guardad y recargad el documento.
h1 {
font-size: 300%;
}
Esta regla establece el tamao de la fuente del ttulo. El porcentaje se aplica al tamao de fuente heredada
(el 75% de la predeterminada por el navegador, que suponemos que es 12 pxeles), de manera que el
tamao del ttulo ser el 300% de 12 pxeles, es decir: 36 pxeles.
28.1.4. Forzar la herencia
Mediante la palabra clave inherit (heredar) puede forzarse la herencia incluso para propiedades que no se
heredan normalmente. Sin embargo, se debe utilizar con mucho cuidado porque Microsoft Internet Explorer
(hasta la versin 7 incluida) no es compatible con esta palabra clave.
240/407
La regla siguiente hace que todos los prrafos hereden todas las propiedades de fondo de sus padres:
p {
background: inherit;
}
Con las propiedades abreviadas se puede utilizar inherit en vez de los valores normales. Se debe utilizar la
versin abreviada o bien para todo o bien para nada en absoluto. En la versin no abreviada no se pueden
especificar algunos valores y utilizar inherit para otros porque los valores pueden darse en cualquier orden y
no hay manera de especificar qu valores queremos heredar.
Forzar la herencia no es algo que haya que hacer a menudo. Puede ser til para "deshacer" una declaracin
de una regla conflictiva o para no tener que introducir los datos de determinados valores directamente en el
cdigo fuente. Un ejemplo de esto sera el tpico men de navegacin:
<ul id="nav">
<li><a href="/">Inicio</a></li>
<li><a href="/news/">Noticias</a></li>
<li><a href="/products/">Productos</a></li>
<li><a href="/services/">Servicios</a></li>
<li><a href="/about/">Sobre nosotros</a></li>
</ul>
Para mostrar esta lista de enlaces como men horizontal, podis utilizar el CSS siguiente:
#nav {
background: blue;
color: white;
margin: 0;
padding: 0;
}
#nav li {
display: inline;
margin: 0;
padding: 0 0.5em;
border-right: 1px solid;
}
#nav li a {
color: inherit;
}
En este caso, el color de fondo de toda la lista se establece en azul en la regla de #nav. As, tambin se
establece el color de primer plano como blanco y todos los elementos de la lista y todos los enlaces heredan
el mismo. La regla de los elementos de la lista establece un lmite a la derecha, pero no especifica el color
del margen, lo que significa que utilizar el color de primer plano heredado (el blanco). Para los enlaces,
hemos utilizado color:inherit para forzar la herencia y anular el color de los enlaces predeterminado del
navegador.
Lgicamente, tambin podra haber especificado el blanco como color del margen y del texto de los enlaces,
pero lo mejor del hecho de dejar que lo haga la herencia es que, si ms adelante decidimos cambiar los
colores, slo deberemos hacer un cambio en este punto.
28.2. Cascada
CSS significa cascading style sheets (hojas de estilo en cascada) y, por lo tanto, no
debera extraarnos que la cascada sea un concepto importante. Es el mecanismo
que controla el resultado final cuando se aplican varias declaraciones CSS
contrapuestas al mismo elemento.
241/407
Hay tres conceptos principales que controlan el orden en el que se aplican las declaraciones de CSS:
1. Importancia.
2. Especificidad.
3. Orden en las fuentes.
A continuacin, trataremos con detalle estos conceptos uno a uno.
La importancia es uno de los conceptos ms... pues... importantes. Si dos declaraciones tienen la misma
importancia, la especificidad de las reglas decidir cul se debe aplicar. Si las reglas tienen la misma
especificidad, el orden de las fuentes controla el resultado.
28.2.1. Importancia
La importancia de una declaracin de CSS depende de dnde se ha especificado. Las declaraciones
contrapuestas se aplicarn en el orden siguiente: las nuevas anularn a las ms antiguas.
1. Hoja de estilos de agente de usuario.
2. Declaraciones normales en hojas de estilo de autor.
3. Declaraciones normales en hojas de estilo de usuario.
4. Declaraciones importantes en hojas de estilo de autor.
5. Declaraciones importantes en hojas de estilo de usuario.
Una hoja de estilos de agente de usuario es la hoja de estilo integrada del navegador. Cada navegador
tiene sus propias reglas sobre cmo mostrar varios elementos de HTML si el usuario o diseador de la
pgina no especifica ningn estilo. Por ejemplo, los enlaces no visitados suelen ser azules y estar
subrayados.
Una hoja de estilos de usuario es una hoja de estilo que ha especificado el usuario. No todos los
navegadores son compatibles con las hojas de estilo de usuario, pero pueden ser muy prcticas, sobre todo
para los usuarios con determinados tipos de minusvala. Por ejemplo, una persona dislxica puede tener una
hoja de estilo de usuario que especifique determinadas fuentes y colores que le faciliten la lectura.
Opera permite especificar hojas de estilo de usuario desde Tools (herramientas) (o desde el men Opera en
un Mac) > Preferences... (preferencias) > pestaa Advanced (avanzado) > Content (contenido), haciendo clic
en el botn Style Options... (opciones de estilo...) y despus sealando la hoja de estilo de usuario del
campo de texto My style sheet (mi hoja de estilo) dentro de la pestaa Display (mostrar) de este cuadro de
dilogo. Tambin se puede especificar si se quiere que la hoja de estilos de usuario anule la hoja de estilos
del autor (el diseador de la web) en la pestaa Presentation (presentacin) e, incluso, que aada un botn a
la interfaz de usuario con el que poder cambiar la hoja de estilo del usuario con la del autor. Para hacerlo,
salid totalmente del men Preferences... (preferencias...) haciendo clic en Aceptar y despus haced clic con
el botn derecho o, mientras apretis Ctrl, haced clic en algn punto de la interfaz del navegador Opera,
seleccionad la vista Customize... (personalizar...) > pestaa Buttons (botones) > Browser (navegador) y
arrastrad el botn Author Mode (modo autor) hasta un punto de alguna de las barras de herramientas.
Cuando hablamos de "hojas de estilo", normalmente hacemos referencia a una hoja de estilo de autor. Es la
hoja de estilos que ha creado o enlazado el autor del documento (o, ms probablemente, el diseador de la
web).
Las declaraciones normales son exactamente lo que su nombre indica: declaraciones normales. Lo contrario
son las declaraciones importantes, que son las declaraciones que van seguidas de una directiva
!important.
Como se puede observar, las declaraciones importantes de una hoja de estilo de usuario tienen prioridad
sobre todas las dems, lo cual es lgico. Siguiendo el ejemplo de la persona dislxica, podra ser que
quisiera ver todo el texto con Comic Sans MS en caso de que le facilitara la lectura. Entonces podra tener
una hoja de estilo de usuario con la regla siguiente:
* {
242/407
font-family: "Comic Sans MS" !important;
}
En este caso, independientemente de lo que haya especificado el diseador, e independientemente de
aquello que se haya establecido como familia de fuentes predeterminada del navegador, todo se mostrar
con Comic Sans MS.
El mtodo de presentacin por defecto del navegador slo se aplicar si las declaraciones no quedan
anuladas por alguna regla de una hoja de estilo de usuario o una hoja de estilo de autor, ya que la hoja de
estilo de agente de usuario tiene precedencia menor.
En realidad, la mayora de los diseadores no se deben preocupar demasiado de la importancia porque no
se puede hacer nada al respecto. No hay ninguna manera de saber si un usuario tiene una hoja de estilos de
usuario definida que anule nuestro CSS. Y si la tiene, seguramente sea por alguna buena razn. Aun as, es
til saber qu es la importancia y cmo puede afectar a la presentacin de nuestros documentos.
28.2.2. Especificidad
La especificidad es algo que todos los autores de CSS deben comprender y tener en cuenta. Puede
considerarse una medida de cun especfico es el selector de una regla. Un selector de especificidad baja
puede dar como resultado muchos elementos (como *, que da como resultado todos los elementos del
documento), mientras que un selector con una especificidad elevada puede que slo d como resultado un
nico elemento de una pgina (como #nav, que slo da como resultado el elemento con una id de nav).
La especificidad de un selector puede calcularse fcilmente, como veremos muy pronto. Si dos o ms
declaraciones entran en conflicto por un elemento determinado y todas las declaraciones tienen la misma
importancia, la de la regla con el selector ms especfico ser la que "gane".
La especificidad tiene cuatro componentes; por ejemplo a, b, c y d. El componente "a" es el ms distintivo y
el "d", el que menos.
El componente "a" es bastante sencillo: es 1 para una declaracin en un atributo style; si no, es 0.
El componente "b" es el nmero de selectores de id en el selector (los que empiezan con #).
El componente "c" es el nmero de selectores de atributo, incluidos los selectores de clase y
pseudoclases.
El componente "d" es el nmero de tipo de elementos y pseudoelementos del selector.
As, despus de contar un poco, podemos unir estos cuatro componentes para conseguir la especificidad de
cualquier regla. Las declaraciones de CSS en un atributo style no tienen selector, de manera que su
especificidad siempre es 1,0,0,0.
Veamos unos cuantos ejemplos que nos ayudarn a aclarar cmo funciona este proceso.
Selector a b c d Especificidad
h1 0 0 0 1 0,0,0,1
.foo 0 0 1 0 0,0,1,0
#bar 0 1 0 0 0,1,0,0
html >head+body ul#nav *.home a:link 0 1 2 5 0,1,2,5
Pasemos ahora a comentar el ltimo ejemplo con ms detalle. Se obtiene a=0 porque es un selector, no una
declaracin de un atributo style. Hay un selector ID (#nav), de manera que b=1. Hay un selector de atributos
(.home) y una pseudoclase (:link), por lo tanto, c=2. Hay cinco tipos de elemento (html, head, body, ul y a), de
manera que d=5. Por lo tanto, la especificidad final es 0,1,2,5.
Hay que mencionar que los combinadores (como >, + y el espacio en blanco) no afectan a la especificidad de
un selector. El selector universal (*) tampoco cuenta para calcular la especificidad.
Tambin hay que tener en cuenta que existe una gran diferencia de especificidad entre un selector id y un
243/407
selector de atributos que por casualidad haga referencia a un atributo id. Aunque den como resultado el
mismo elemento, tienen especificidades muy diferentes. La especificidad de #nav es 0,1,0,0 y la especificidad
de [id="nav"] es slo 0,0,1,0.
Fijmonos en cmo funciona esto en la prctica.
1. Empezad aadiendo otro prrafo al documento HTML.
<body>
<h1>Ttulo</h1>
<p>Un prrafo de texto.</p>
<p>Un segundo prrafo de texto.</p>
</body>
2. Aadid una regla a la hoja de estilo para hacer que el texto de los prrafos sea de un color diferente.
p {
color: cyan;
}
3. Guardad los dos ficheros y recargad el documento en vuestro navegador. Se deberan ver dos prrafos
de color cian.
4. Estableced una id en el primer prrafo para que podis apuntar hacia l fcilmente con un selector
CSS.
<body>
<h1>Ttulo</h1>
<p id="special" >Un prrafo de texto.</p>
<p>Un segundo prrafo de texto.</p>
</body>
5. Aadid una regla para el prrafo especial a la hoja de estilo.
#special {
background-color: red;
color: yellow;
}
6. Guardad los dos ficheros y recargad el documento en el navegador para ver el resultado, que es
bastante colorido.
Veamos las declaraciones que se aplican en los dos prrafos.
La primera regla que hemos aadido establece color:cyan para todos los prrafos. La segunda regla
establece un color de fondo rojo y establece color:yellow para el nico elemento que tiene id de special. El
primer prrafo encaja con estas dos reglas; es un prrafo y tiene la id de special.
El fondo rojo no es ningn problema porque slo se ha especificado para #special. No obstante, ambas
reglas incluyen una declaracin de la propiedad de color, lo que significa que hay un conflicto. Ambas reglas
tienen la misma importancia, se trata de declaraciones normales en la hoja de estilos de autor, de manera
que hay que fijarse en la especificidad de los dos selectores.
El selector de la primera regla es p, que tiene una especificidad de 0,0,0,1 segn las reglas anteriormente
mencionadas, ya que incluye un nico tipo de elemento. El selector de la segunda regla es #special, que
tiene una especificidad de 0,1,0,0 porque est formado por un selector de id. 0,1,0,0 y es mucho ms
especfico que 0,0,0,1, de manera que la declaracin color:yellow gana y se obtiene el texto amarillo sobre
fondo rojo.
28.2.3. Orden en las fuentes
Si dos declaraciones afectan al mismo elemento, tienen la misma importancia y la misma especificidad, la
seal distintiva final es el orden en las fuentes. La declaracin que se ve ms adelante en las hojas de estilo
244/407
"ganar" a las anteriores.
Si tenis una nica hoja de estilo externa, las declaraciones al final del fichero anularn a las que sucedan
antes al fichero en caso de conflicto. Las declaraciones contrapuestas tambin pueden suceder en diferentes
hojas de estilo. En este caso, el orden en el que se enlazan, se incluyen o se importan las hojas de estilo
determina qu declaracin se aplica, de manera que si se tienen dos hojas de estilo enlazadas en el head a
un documento, la enlazada al ltimo anular a la enlazada al primero. Veamos un ejemplo prctico de cmo
funciona esto.
1. Aadid una regla nueva a la hoja de estilo, justo al final del fichero, como por ejemplo:
p {
background-color: yellow;
color: black;
}
2. Guardad y recargad la pgina web. Ahora tenis dos reglas que dan como resultado todos los prrafos.
Tienen la misma importancia y la misma especificidad (ya que el selector es el mismo); por lo tanto, el
mecanismo final para distinguirlas ser el orden de las fuentes.
La ltima regla especifica color:black y anular a color:cyan de la regla anterior.
Fijaos en cmo esta regla nueva no afecta en absoluto al primer prrafo. Aunque la regla nueva aparece en
ltimo lugar, su selector tiene una especificidad ms baja que la de #special. Esto demuestra claramente
cmo la especificidad tiene prioridad sobre el orden de las fuentes.
Resumen
Herencia y cascada son conceptos bsicos que cualquier diseador web debe comprender.
La herencia permite declarar propiedades en elementos de nivel alto y que estas propiedades se transmitan
a todos los elementos descendientes. Slo algunas propiedades se heredan por defecto, pero la herencia
puede forzarse mediante la palabra clave inherit.
La cascada soluciona los conflictos cuando varias declaraciones afectan a un elemento determinado. Las
declaraciones importantes anulan a las que no lo son tanto. Entre declaraciones de igual importancia, la
especificidad de la regla controla cul se aplica. Y, si todas las dems son iguales, el orden de las fuentes
supone la distincin definitiva.
Preguntas de repaso
1. Se puede heredar la propiedad width? Pensad en ello antes de contestar (tendra sentido?) y
despus mirad la respuesta correcta en la especificacin CSS.
2. Si aadimos !important a la declaracin color:black de la ltima regla de la hoja de estilo de ejemplo,
afectar al color del texto del primer prrafo "especial"?
3. Qu selector es ms especfico, "#special" o "html>head+body>h1+p"?
4. Qu apariencia debera tener una hoja de estilo de usuario para que nuestro documento de prueba
aparezca con Comic Sans MS negra sobre fondo blanco, independientemente de la hoja de estilo del
autor?
: :
245/407
CSS - Creacin de estilos de texto con CSS
CSS
Creacin de estilos de texto con CSS
Accesibilidad : : :
Ben Henick. 3 de octubre del 2008. Publicado en: alineacin, texto, aliasing, fuente, tipografa
Como la web es una coleccin de documentos, algunos dinmicos, otros estticos y otros funcionales, las
convenciones con las que se les aplica un formato se extraen de nuestro mejor punto de referencia: los seis
siglos de historia de la imprenta. Y esto incluye la tipografa. Sin embargo, la web es un medio nuevo y
diferente, y la tipografa para sitios web necesita un conjunto de competencias de diseo editorial muy
diferente y, adems, est mucho ms limitada.
Este apartado se basa en los conocimientos adquiridos previamente en el curso y ofrece una gua detallada
para aplicar estilo a un texto de manera efectiva utilizando CSS.
Nota
A continuacin, se enlaza con varios ejemplos que demuestran las tcnicas
mencionadas; podis descargaros los 29 ejemplos del apartado con el fichero
"article29_examples.zip".
Descargad los ejemplos en: "article29_examples.zip"
29.1. Repaso de tipografa en la web
29.1.1. Contraste
29.1.2. Facilidad de lectura
29.2. Propiedades de las fuentes CSS: cambiar el aspecto del texto
29.2.1. font-size y seleccin del tipo de unidad
Cmo se hace
Qu tipos de unidad pueden aplicarse en las propiedades de texto CSS?
Para qu sirve tener tantos tipos de unidades diferentes?
Cul es el equivalente fsico de un pxel?
Ems, porcentajes y puntos segn el CSS
Breve comentario sobre la recomendacin oficial de CSS 2.1
Palabras clave de tamao
29.2.2. font-family y seleccin de tipos de letra
29.2.3. font-style, font-variant y font-weight: cambiar los detalles
Por qu hay que utilizar la propiedad font-style cuando los elementos "em" e "i" ya
parecen bastante adecuados?
29.2.4. font-variant como herramienta para resaltar pasajes cortos
29.2.5. font-weight: negrita y la falta de sta
29.2.6. La propiedad abreviada fuente
29.3. Las propiedades de texto y alineacin de CSS. Modificar la composicin
29.3.1. Alineacin y justificacin del texto
Justificacin adecuada del texto escrito en alfabetos occidentales
29.3.2. Modificar el espaciado: Las propiedades letter-spacing y word-spacing
Utilizar unidades em para un buen control
29.3.3. Sangrar las primeras lneas: la propiedad text-indent
29.3.4. Maysculas: La propiedad text-transform
29.3.5. Aplicar estilos a los enlaces y mostrar las eliminaciones: La propiedad text-decoration
Mrgenes, no subrayados, con acronym y abbr
29.3.6. Ajuste del espacio interlineal y line-height
29.3.7. Suplantar pre y br: La propiedad white-space
Resumen
Preguntas de repaso
246/407
29.1. Repaso de tipografa en la web
En la web, los diseadores tienen mucho menos control sobre la presentacin que en otros medios. Este
hecho se ve claramente cuando se trata de las propiedades del lienzo del documento como el tamao, la
resolucin y el contraste. Tambin hay muchas limitaciones con respecto a la calidad de la tipografa de la
web, un tema que ya se ha tratado.
Ved tambin
Podis ver los conceptos bsicos de tipografa en el apartado 11 del mdulo "Conceptos de diseo web".
Otros aspectos que merecen ser tratados son el contraste y la facilidad de lectura, de los cuales hablaremos
a continuacin.
29.1.1. Contraste
El contraste del tipo de letra, la facilidad con la que pueden distinguirse las lneas del espacio en blanco y
de las lneas adyacentes, depende de varios factores como la luminosidad, el color, el tamao y la
composicin. Se menciona en este apartado por el mero hecho de destacar que el texto de contraste bajo se
debera establecer en el mayor tamao posible.
29.1.2. Facilidad de lectura
En un contexto de diseo utilizamos la palabra inglesa legibility para referirnos a la facilidad con la que
podemos buscar fragmentos especficos de informacin, mientras que con su sinnimo readabilty nos
referimos a la facilidad de comprensin de un texto. Las decisiones de diseo que potencian una u otra
calidad se enumeran en la tabla 1.
Objetivo
Longitud de
lnea
Canales y espacio
interlineal
Tipos Justificado
Tabla 1. Caractersticas de la facilidad de lectura.
'Readability'
moderada aumentados serif inexistente
[izquierda]
'Legibility'
corta normales sans-
serif
variable, a menudo
completo
En el prximo apartado, "El modelo de composicin de CSS", se hablar sobre la anchura ptima de
columna.
29.2. Propiedades CSS de fuentes: cambiar el aspecto del texto
La composicin de textos es la manipulacin del texto con respecto a la composicin general y al aspecto de
las letras y las palabras. Esta segunda tarea se lleva a cabo mediante las propiedades CSS de fuente, de las
que hablaremos a continuacin.
29.2.1. font-size y seleccin del tipo de unidad
Como los documentos generalmente varan de tamao de fuente ms que de tipo de letra y las variantes de
fuentes suelen manipularse con las hojas de estilos de usuario, la propiedad principal de inters es font-size
(tamao de la fuente). Cuando se utiliza en una regla, va seguida de un valor que especifica una medida de
unidad o, en ocasiones, un tamao de palabra clave (como pequeo o medio).
Cmo se hace
La declaracin de font-size ms importante de una hoja de estilo es ms o menos as:
body {...
font-size: 14px;
...}
247/407
La herencia hace que todas las especificaciones de tamao de la fuente de un documento se basen en el
tamao declarado por el documento body, ya sea en la hoja de estilo del navegador o en la nuestra.
El valor por defecto tpico de 16 pxeles de los navegadores es un buen punto de inicio para la parte central
del texto, pero la mayora de los visitantes pueden leer sin problemas tipos de letra ms pequeos. Por lo
tanto, la mayora de los diseadores eligen un tamao ms pequeo, de unos 11-14 pxeles.
La herencia se aplica al tamao del tipo de letra cuando se especifica un tamao relativo y cuando se
especifica un tamao de palabra clave para un elemento con un progenitor cuyo tamao no se especifica con
una palabra clave.
Qu tipos de unidad pueden aplicarse en las propiedades de texto CSS?
En las reglas de hojas de estilo, los tipos de unidad que suelen aplicarse ms a menudo al texto son pxeles
(px), ems (em, se explica ms adelante), porcentajes (%) y puntos (pt). En la tabla 2 se describe el
comportamiento del texto redimensionado con estas unidades.
Unidad
Definicin
1
Uso
Tabla 2. Unidades de CSS convenientes para dimensionar un texto
1
es la proporcin de cambio en el tamao de la fuente a partir del valor heredado.
2
Slo se hereda el valor del tamao no especificado en palabra clave ms cercano.
Ems de CSS = x 1,333 em
Palabras clave
Definido por el agente de usuario
2 large, etc.
Porcentaje = x / 100 133.3%
Pxels Unidad absoluta 16 px
Puntos Unidad absoluta 12 pt
Otros tipos de unidad posibles son las palabras clave de tamao, las picas (pc, una pica equivale
exactamente a 12 puntos) y las exes (ex). Tambin estn disponibles la mayora de los otros tipos de unidad
que acepta CSS2, pero no se utilizan casi nunca cuando se trabaja con texto.
Para qu sirve tener tantos tipos de unidad diferentes?
Como se indica en la tabla 2, hay unidades de tamao relativo y absoluto. Las palabras clave incluyen ambas
caractersticas, es decir, tamao absoluto entre s, pero relativas al valor no especificado en palabra clave
que heredan. La mejor manera de utilizarlas es sta:
Los tamaos absolutes (px, unidades estandarizadas como pt) es mejor aplicarlas a composiciones que
no cambien en relacin con las propiedades de lienzo del documento, las llamadas composiciones
"fijas", "estticas" o "de hielo".
Los tamaos relativos (em, %) deberan utilizarse en composiciones no estticas y en situaciones en las
que hay que establecer un compromiso entre la usabilidad del sitio y el control del diseador de la
composicin.
Los tamaos de palabra clave (que se explican a continuacin) deberan utilizarse cuando la usabilidad
prevalezca por encima de todas las dems consideraciones del diseo.
Tamaos absolutos y usabilidad
Las versiones antiguas de Internet Explorer no permiten al visitante modificar el tamao del texto que se ha
establecido en tamaos absolutos y las interfaces de modificacin del tamao del texto de algunos
navegadores que s que permiten este nivel de control de usuario pueden costar de encontrar (los usuarios
de Opera y Firefox lo tienen fcil con Shift + Ctrl/Cmd + ms/menos y Ctrl/Cmd + ms/menos,
respectivamente). A causa de estas limitaciones, se suele establecer el font-size de body en un valor
relativo, normalmente en unidades em, que se supone que el navegador controla por defecto.
Cul es el equivalente fsico de un pxel?
Aunque es estrictamente imposible definir o predecir las dimensiones literales de un pxel, los patrocinadores
248/407
de proyectos comerciales ms nerviosos suelen sorprenderse cuando descubren que el diseo de su sitio
adquiere un aspecto diferente en los ordenadores de los clientes que tienen una configuracin diferente de la
suya y rien al diseador web por este motivo. Por lo tanto, puede ser til comprender cmo funcionan los
pxeles. Esta informacin os servir para cuando alguien que os haya encargado crear una pgina web se
queje de que el texto no queda exactamente igual en diferentes ordenadores.
Las empresas de software mantienen un acuerdo informal segn el cual, 96 ppp (pxeles por pulgada) es un
tamao razonable. De esta manera, un texto central de 16 pxeles se imprimir a un tamao de una sexta
parte de una pulgada o 12 puntos. En la pantalla de cristal lquido cada vez ms habitual de 17" 1280x800,
un texto de 16 pxeles tendr un tamao aproximado de 13 puntos en la pantalla, pero en una pantalla
parecida de ordenador porttil de 15", el tamao ser de 11,44 puntos.
Estas medidas son efectivas con la configuracin por defecto. La mayora de los entornos permiten al usuario
final establecer una medida habitual de ppp, de manera que siempre se darn casos diferentes.
En conclusin: un pxel es un pxel, pero todo lo dems es variable.
Ems, porcentajes y puntos segn el CSS
Tradicionalmente, un em es equivalente a la altura de la "M" mayscula de la fuente de que hablemos. Sin
embargo, en CSS, la unidad em es el equivalente a la altura total de una lnea; o, dicho de otro modo, para
un elemento al que se le ha establecido el font-size a 14 pxeles:
1em = 100% = 14px
En entornos normales, esta declaracin puede ampliarse a:
1em = 100% = 14px = 10,5pt
El aumento y la reduccin del tamao funcionan de manera multiplicativa, de modo que si hay un segundo
elemento que se quiera definir con un tamao de 16 pxeles, teniendo en cuenta la herencia habitual, todo lo
que se muestra a continuacin obtendra el resultado deseado:
1,143em = 114,3% diferent de 16px = 12pt
Breve comentario sobre la recomendacin oficial de CSS 2.1
En ocasiones, os dirn que consultis la Recomendacin Candidata o Candidate Recommendation del World
Wide Web Consortium para la especificacin CSS 2.1. Como todas las recomendaciones del W3C, este
documento puede considerarse la definicin de un estndar web; algunos se siguen ms que otros, tanto por
parte de los fabricantes de navegadores como por los desarrolladores de webs.
Aunque es til conocer de arriba abajo las recomendaciones del W3C, este curso se ha diseado para
proporcionar una introduccin concisa y fcil de asimilar al diseo/desarrollo web y las recomendaciones del
W3C pueden ser un poco pesadas. En todos los casos en los que se os pida visitar la recomendacin de
CSS 2.1, se os est dirigiendo a un material demasiado complejo como para justificar una explicacin
detallada en este apartado.
Palabras clave de tamao
Tambin se pueden utilizar palabras clave de tamao, como se ha mencionado anteriormente. Hay siete,
desde xx-small hasta xx-large, y medium es el valor medio (y predeterminado). La lista completa de los siete
valores se muestra ms adelante en la tabla 3, que incluye todas las palabras clave que aceptan las distintas
propiedades CSS mencionadas en este apartado.
La recomendacin de CSS 2.1 ofrece una gran cantidad de informacin adicional sobre las palabras clave de
font-size.
Demostracin 1
De vez en cuando, este texto enlazar con un documento de Demostracin cada vez con ms estilo que
mostrar las propiedades CSS de las que hablamos en su uso real. El primero de los ejemplos es el
documento HTML de muestra sin ningn tipo de estilo aplicado.
249/407
Archivo fuente de: "Ejemplo sin estilos"
Nuevas reglas
body { font-size: 14px; }
h1 { font-size: x-large; }
.sectionNote { font-size: medium; }
.attribution { font-size: small; }
Archivo fuente de: "Ejemplo con ttulo redimensionado, atribuciones y parte central del texto aplicados"
Archivo fuente de: "Ejemplo de hoja de estilo de la Demostracin 1"
29.2.2. font-family y seleccin de tipos de letra
Cuando tengis el texto con el tamao que os guste, ya podis pasar a seleccionar uno o dos tipos de letra.
Esto se hace con la propiedad font-family, que se utiliza como se muestra a continuacin en la
Demostracin 2.
Cuando se ofrece un valor para la propiedad font-family, hay que seguir estas reglas:
1. Las tipografas se deben llamar exactamente como se llaman en la biblioteca de fuentes del ordenador
cliente, utilizando como gua la fuente no variante.
2. Todas las tipografas con nombre deben separarse con comas, con espacio detrs o sin l.
3. En los casos en que el nombre de una tipografa contenga ms de una palabra, hay que poner comillas
simples o dobles al principio y al final. Ejemplo: 'Times New Roman'.
4. Hay que enumerar las tipografas por orden ascendente de posible disponibilidad. Por ejemplo, si
queris que los usuarios de Macintosh vean una pgina con el texto en Palatino, la declaracin de valor
de propiedad probablemente debera ser as: font-family: Palatino, Georgia, serif;. La Palatino es
exactamente la que queris, pero puede ser que algunos usuarios no la tengan; la Georgia tiene ms
probabilidades de estar disponible y se parece a la Palatino; serif hace referencia a la fuente serif
predeterminada genrica; si no se dispone de la Palatino ni de la Georgia, el sistema volver a su fuente
serif por defecto.
5. Como mtodo de seguridad, el valor font-family siempre debera acabar con el nombre genrico
apropiado, tal como se ha explicado anteriormente. En la figura 1 se muestran las tipografas que se
utilizan en las familias genricas en MacOS 10.5.
Figura 1. Las tipografas "genricas" predeterminadas de MacOS 10.5 tal como
quedan representadas a 24 pxeles en Safari 3.1.
En la recomendacin del CSS 2.1 se enumeran varias tipografas ms que pueden aplicarse a cada familia
genrica.
Demostracin 2
Ahora que el tamao del texto es previsible, queremos optimizar las tipografas utilizadas. Lo mejor es aplicar
una tipografa sans serif al ttulo para que sea de fcil lectura y al texto en s, una tipografa serif.
Nuevas reglas
body { font-family: Palatino,'Palatino Linotype',Georgia, sans-serif; }
250/407
h1 { font-family: Helvetica,Arial,sans-serif; }
blockquote { font-family: Helvetica,Arial,sans-serif; }
Archivo fuente de: "Hoja de estilo de la Demostracin 2"
29.2.3. font-style, font-variant y font-weight: cambiar los detalles
La propiedad font-style manipula la cursiva sin tener que utilizar el elemento i; sus tres valores vlidos son
italic, oblique y normal.
Los valores italic y oblique proporcionan resultados funcionalmente idnticos en las versiones ms
recientes de todos los navegadores web del mercado general, aunque hay una diferencia tcnica significativa
entre los dos estilos.
Por qu hay que utilizar la propiedad font-style cuando los elementos "em" e "i" ya parecen bastante
adecuados?
Cada uno de estos elementos tiene usos especficos: el del em es proporcionar nfasis y el de i ser la
alternativa de <span style="font-style: italic;">...</span> en los pocos casos en los que su uso sera
poco adecuado. En general, <i> no es nada adecuado porque es un elemento presentacional, pero hay
determinadas partes del texto central que se escriben en cursiva por convencin, como por ejemplo los
ttulos de los libros (aunque eso es discutible, ya que hay quien cree que el elemento cite es ms adecuado
para los ttulos de libro, as que haced lo que consideris adecuado). <em> suele ser ms apropiado porque
especifica el nfasis como concepto en lugar de la cursiva como estilo especfico: la apariencia real del
nfasis puede variar entre varios navegadores.
Hay situaciones en las que el uso de em y su hermano strong pueden requerir un punto de vista diferente.
Por ejemplo, supongamos que queris dar nfasis al texto hacindolo ms grande. Lo que habra que hacer
para dar un mayor nfasis sera aadir cursiva, lo que dara lugar a reglas como las siguientes:
em {
font-size: large;
font-style: normal;
}
strong {
font-size: large;
font-weight: normal;
font-style: italic;
}
Las reglas de la hoja de estilo precedente daran unos resultados parecidos a los siguientes:
The quick red fox jumped over the lazy brown dog.
Demostracin 3
En el texto de Demostracin no hay palabras ni fragmentos en cursiva, y las atribuciones ya contienen la
cursiva necesaria gracias al uso del elemento cite. Teniendo en cuenta la falta de opciones, el ttulo es el
mejor candidato para estar en cursiva.
h1 { font-style: italic; }
.sectionNote { font-style: normal; }
Archivo fuente de: "Ejemplo con ttulo en cursiva"
Archivo fuente de: "Hoja de estilo de la demostracin 3"
29.2.4. font-variant como herramienta para resaltar pasajes cortos
La propiedad font-variant tiene dos valores posibles, small-caps y normal. Algunos diseadores utilizan
versalitas o "small caps" para resaltar la frase inicial de un texto largo o para dar nfasis a la indicacin de
una cita, como por ejemplo:
ABANDONAD TODA ESPERANZA LOS QUE AQU ENTRIS.
251/407
Demostracin 4
opening { font-variant: small-caps; }
Archivo fuente de: "Ejemplo con la frase inicial en versalitas"
29.2.5. font-weight: negrita y la falta de sta
La propiedad font-weight (peso de la fuente) permite modificar el nivel de negrita de cualquier fragmento de
texto al que se aplique.
Los valores habituales de la propiedad font-weight son normal y bold. Mientras que la recomendacin CSS
2.1 proporciona varios valores, el estado actual de compatibilidad con la tipografa web hace que los dems
valores no tengan valor funcional excepto para los usuarios especialistas.
Demostracin 5
Poner el nombre de un autor en negrita es una tcnica de diseo que se suele utilizar en las publicaciones
peridicas, pero que an encaja en varias situaciones de la web.
author { font-weight: bold; }
Archivo fuente de: "Ejemplo con el nombre del autor en negrita"
29.2.6. La propiedad abreviada fuente
Muchas propiedades de texto pueden proporcionarse en el valor para una nica propiedad, si procede, de
una manera parecida a las propiedades de fondo.
A continuacin, se muestra un ejemplo de regla abreviada de fuente:
h1 { font: italic normal bold x-large/1.167em Helvetica,Arial,sans-serif; }
Para obtener los mejores resultados, el valor dado a esta propiedad debera incluir los valores pretendidos
para todas las propiedades individuales siguientes exactamente en este orden, separadas con espacios:
1. font-style
2. font-variant
3. font-weight
4. font-size, seguido, si es necesario, de una barra y del valor de line-height (podis verlo a
continuacin).
5. font-family, que en este caso tambin puede ser una palabra reservada que especifica una fuente de
sistema; los valores mltiples deberan estar separados por comas, pero no por espacios.
Propiedad Valores
font-family cursive, fantasy, monospace, sans-serif, serif
font-size xx-small, x-small, small, medium, large, x-large, xx-large
font-style italic, normal, oblique
font-variant normal, small-caps
font-weight bold, normal
line-height normal
text-align center, justify, left, right
text-decoration line-through, none, overline, underline
text-transform capitalize, lowercase, none, uppercase
252/407
Tabla 3. Valores de palabra clave aceptados para las propiedades que se han tratado en este apartado
white-space normal, nowrap, pre, pre-line, pre-wrap
29.3. Las propiedades de texto y alineacin de CSS. Modificar la
composicin
Un especialista en estilos que trabaje con letras y palabras trata con detalles: lneas, curvas, puntos, pxeles
y otras partes celulares de un diseo. Sin embargo, un diseo es todo un conjunto; tiene componentes ms
grandes que se destacan mediante el control de la composicin principalmente a travs del modelo de
disposicin de CSS. Adems de este modelo de disposicin, CSS tambin implementa propiedades de texto
y alineacin que afectan a la composicin. El resto de este apartado trata sobre estas propiedades.
29.3.1. Alineacin y justificacin del texto
Como sucede con los entornos de procesamiento de texto, la propiedad text-align acepta cuatro valores de
justificacin: left, right, center y justify. Este ltimo proporciona justificacin completa: mrgenes de texto
visibles que son consistentes tanto por la izquierda como por la derecha de un bloque de texto.
Justificacin adecuada del texto escrito en alfabetos occidentales
La mejor manera de utilizar las diferentes alineaciones disponibles es as:
La justificacin izquierda es ms adecuada para fragmentos de texto largos.
La justificacin derecha es ms adecuada para la columna de la izquierda del todo de tablas de datos
y disposiciones de columna mltiple. Cuando la columna adyacente se deja justificada y colocada en el
otro lado de un canal adecuadamente ancho, el resultado es mejorar la legibilidad de ambas columnas.
La justificacin completa funciona bien para bloques pequeos, como citas de bloques y textos de
ejemplo. Cuando se utiliza en fragmentos largos como texto de ancho ptimo con mrgenes anchos, la
justificacin completa tambin mejora la coherencia de la maquetacin.
El centrado se suele utilizar para los elementos de interfaz y listas en serie como las que se encuentran
en los pies de pgina.
Demostracin 6
Como la demostracin se basa en un fragmento de texto de ficcin extrado de un libro, por qu no le
aplicamos la justificacin?
p { text-align: justify; }
blockquote p { text-align: left; }
Archivo fuente de: "Pgina con justificacin completa del texto central del fragmento"
29.3.2. Modificar el espaciado: las propiedades letter-spacing y word-spacing
El mismo nombre ya lo dice todo, es decir, estas propiedades permiten modificar la cantidad de espacio en
blanco entre letras y palabras, respectivamente.
El uso ms habitual de letter-spacing (espaciado de letra) es para dar un nfasis sutil parecido al efecto
que proporciona font-variant: small-caps; tambin puede utilizarse para modificar sutilmente la
composicin de elementos de interfaz.
La propiedad word-spacing (espaciado de palabras) es mejor utilizarla para modificar deliberadamente la
cantidad de palabras que es probable que aparezcan en una nica lnea de texto. Por ejemplo, puede
utilizarse si tenis un bloque de texto de la anchura habitual pero de tamao de fuente atpica.
En la impresin, el espaciado de letras y el de palabras tambin se aplican ad hoc para evitar errores de
composicin, pero en la web esta tcnica tiene una utilidad limitada.
Adems de los valores de unidad, estas propiedades aceptan el valor normal.
253/407
Utilizar unidades em para un buen control
Cuando se cambia el espaciado entre letras de un texto, un pequeo espacio significa una gran distancia; el
espaciado de letra predeterminado suele ser entre una dcima y una vigsima parte de un em, de manera
que los valores de letter-spacing que superen ms del doble o la mitad del valor predeterminado pueden
acabar haciendo que el texto sea ilegible.
Demostracin 7
Al texto seal del que hablamos hacia el final le ira bien un poco de nfasis sutil... y, como la cita
introductoria tiene un tamao mayor, puede mejorarse mediante el espaciado entre palabras.
q { letter-spacing: .143em; }
.pullQuote { word-spacing: .143em; }
Archivo fuente de: "Pgina con espaciado entre letras en los saludos propuestos en el penltimo prrafo del fragmento"
29.3.3. Sangrar las primeras lneas: la propiedad text-indent
La propiedad text-indent (sangrado de texto) permite sangrar los prrafos de la misma manera que en el
papel impreso. Adems, esta propiedad y el hecho de que acepte valores negativos permite toda una serie
de tcnicas de maquetacin avanzadas.
Los valores que acepta esta propiedad son los mismos que los que acepta font-size, adems de normal.
Demostracin 8
Por la misma razn que el fragmento tena justificacin completa, quiz debera tener sangrado en todas las
primeras lneas de los prrafos.
p { text-indent: 1.429em; }
blockquote p { text-indent: 0; }
Archivo fuente de: "Pgina con sangrado inicial en los prrafos del texto central "
29.3.4. Maysculas: La propiedad text-transform
De la misma manera que la propiedad font-variant proporciona acceso a las letras versalitas, la propiedad
text-transform se ocupa especficamente de las maysculas. Los valores que permite cubren todas las
maysculas, minsculas o todo el texto inicial completamente en maysculas. Podis ver la lista de los
valores aceptados en la tabla 3.
Demostracin 9
author { text-transform: uppercase; }
Archivo fuente de: "Pgina con el autor del fragmento destacado en versalitas"
29.3.5. Aplicar estilos a los enlaces y mostrar las eliminaciones: la propiedad text-decoration
Esta propiedad permite poner lneas por encima, por debajo y a travs del texto. Su uso ms habitual es
para manipular el subrayado por defecto de los enlaces, aunque en las wikis o en textos satricos y en otros
entornos tambin va muy bien para tachar palabras. En estos casos, se utilizan los elementos ins (insertar) y
del (eliminar), que ofrecen estilos equivalentes a:
ins {
}
del {
text-decoration: line-through;
}
254/407
Incluso sin reglas de hoja de estilo hechas a medida, ins y del aplican estilo de etiquetado de la siguiente
manera:
Mark Twain Benjamin Disraeli es famoso por sus dichos agudos, como "hay mentiras, grandes mentiras y
estadstica".
Mrgenes, no subrayados, con acronym y abbr
Algunos diseadores suelen modificar el aspecto de los elementos acronym y abbr para que aparezcan con un
subrayado que a primera vista parece una lnea de puntos. No obstante, en realidad este efecto se consigue
con un valor de border-bottom. (Recordad que algunos navegadores lo hacen automticamente, pero otros,
como IE 6, no.)
Demostracin 10
source a { text-decoration: none; }
Archivo fuente de: "Pgina con eliminacin del subrayado del enlace a fuente del texto de muestra"
29.3.6. Ajuste del espacio interlineal y line-height
Es bien sabido que disponer de espacio en blanco entre lneas tiende a aumentar su facilidad de lectura
porque el espacio adicional garantiza que las astas ascendentes y las astas descendentes (podis ver la
figura 2 para encontrar una explicacin) en lneas adyacentes no competirn por la atencin visual.
Figura 2. Las astas ascendentes son la parte de las letras que sobresale de la
lnea media del texto y las astas descendentes son la parte de las letras que se
extiende por debajo de la lnea base sobre la que descansa el texto.
Existe una tenue relacin entre el font-size (el tamao de la fuente) de un elemento y su line-height
(interlineado), pero, por defecto, todos los agentes de usuario insertan algo de espacio interlineal en cada
lnea de texto, normalmente del 10 al 15% de la altura de las letras. Como esta cantidad por defecto cambia
de una tipografa a otra, la propiedad line-height (interlnea) acepta un valor de normal adems de valores
numricos.
Tambin cabe mencionar que, al contrario que la mayora de las propiedades CSS, line-height (interlnea)
acepta valores numricos sin unidades, que despus se representan como una proporcin del valor bsico
predeterminado.
Demostracin 11
Se ha hablado mucho de la relacin entre espacio interlineal y legibilidad, de modo que aqu tenemos la
demostracin.
p { line-height: 1.5; }
attribution { line-height: 1.5; }
Archivo fuente de: "Pgina con aplicacin de una cantidad adecuada de interineado en un fragmento de texto"
29.3.7. Suplantar pre y br: La propiedad white-space
Estrictamente hablando, los saltos de lnea forzados son un elemento de presentacin, aunque hay muchas
255/407
circunstancias en las que son un elemento deseable para el diseo de un sitio. Junto con la costumbre de los
navegadores de cortar las lneas en espacios arbitrarios, ejercer el nivel de control deseado nicamente con
el etiquetado puede ser complicado.
El elemento pre sirve para hacer frente a estos retos, aunque presenta sus propios retos, razn por la que
CSS ofrece la propiedad white-space (espacio en blanco). Los valores que acepta, que se enumeran en la
tabla 3, permiten al diseador elegir si el navegador debe representar los espacios en blanco y los saltos de
lnea que se han aadido al etiquetado de origen o que se han insertado como contenido generado.
La recomendacin CSS 2.1 ofrece detalles exhaustivos sobre la implementacin y el uso recomendados de la
propiedad white-space (espacio en blanco).
Resumen
Un buen diseo de sitio requiere un nivel elevado de atencin al detalle y el ajuste adecuado de la
interaccin de numerosos elementos, uno de los cuales es la tipografa.
La combinacin de propiedades de fuente y texto que ofrecen las implementaciones de CSS de los
navegadores actuales da prcticamente el nivel de control mximo sobre la tipografa que permite el
hardware y depende del diseador concienciado aprender a utilizarlas como es debido. Cuando estas
propiedades se utilizan bien, se producen sitios que pueden aspirar a acercarse a los estndares de calidad
de la tipografa que normalmente se asocian al medio impreso, que se ha ido desarrollando durante siglos,
aunque la Web an no hace ni una generacin que existe.
Preguntas de repaso
Preguntes que haureu de poder respondre:
1. Decid tres elementos HTML que no sean b ni i, que por defecto se representen con fuentes variantes.
Haced una descripcin breve del propsito original de los elementos que habis mencionado y explicad
cmo el uso de una fuente variante es apropiado para los propsitos de estos elementos.
2. Comprobad de manera subjetiva la facilidad de lectura de un fragmento de un texto largo cualquiera con
diferentes valores de line-height (interlnea). Resumid brevemente los resultados.
3. Aplicad text-transform: uppercase; a un nico prrafo del fragmento utilizado en el ejercicio anterior y
repetid la prueba subjetiva de legibilidad. Resumid brevemente los resultados.
4. Explicad brevemente las ventajas y desventajas del antialiasing utilizando el repaso de la tipografa de
este apartado como ejemplo.
5. Describid el orden en el que deben especificarse las tipografas en un valor de font-family
6. Sin consultar el material didctico, elegid como mnimo tres propiedades de las descritas en este
apartado y decid como mnimo un valor vlido (aparte del predeterminado) de cada una. Demostrad o
describid los resultados del uso de estas parejas de propiedades y valores en una hoja de estilo.
7. Cread un elemento, aadidle texto central y asignadle un valor de font-size (tamao de la fuente) de
9px. Abrid el documento que contiene este elemento con Internet Explorer y pasad de un tamao de
fuente a otro de los que se proporcionan en el men Visualiza > Tamao del texto. Evaluad la
conveniencia de estos resultados en sitios web con grandes cantidades de visitantes de mediana edad y
de edad avanzada.
Bos, Bert y otros 2007. Cascading style sheets level 2 revision 1 (CSS 2.1) specification. World Wide
Web Consortium. [Fecha de consulta: 28 de mayo de 2008.]
Chaparro, Barbara y otros 2004. Reading online text: a comparison of four white space layouts. Wichita
State University Software Usablity Research Laboratory Usability News. [Fecha de consulta: 28 de mayo
de 2008.]
Dean, Paul. 2008. Extreme type terminology. I Love Typography, the Typography Blog. [Fecha de
256/407
consulta: 28 de mayo de 2008.]
Horton, Sarah, Lynch, Patrick. 2002. Web style guide: basic principles for creating web sites, 2nd edition.
New Haven, Conn.: Yale University Press.
Roselli, Adrian. 2002. A simple character entity chart. Evolt.org. [Fecha de consulta: 28 de mayo de
2008.]
: :
257/407
CSS - El modelo de composicin de CSS: cajas, bordes, mrgenes, relleno
CSS
El modelo de composicin de CSS: cajas, bordes,
mrgenes, relleno
Accesibilidad : : :
Ben Henick. 26 de septiembre del 2008 Publicado en: desbordamiento, abreviamiento, modelo, flotante, caja.
A primera vista, el modelo de composicin de CSS es muy sencillo. Las cajas, los bordes y los mrgenes son
elementos bastante simples y la sintaxis de CSS ofrece una manera fcil de describir sus caractersticas.
Sin embargo, los motores de representacin de los navegadores siguen una lista de reglas descritas en la
Recomendacin CSS 2.1 y unas cuantas propias. Por esta razn, hay muchos detalles que debemos
comprender antes de poder aadir tcnicas avanzadas al repertorio de un especialista en estilos.
En este apartado se presentan las propiedades de CSS que manipulan la composicin de los elementos
HTML como los bordes, los mrgenes y muchos ms. Tambin se tratan algunas de las reglas mencionadas
antes. En prximos apartados se hablar de la disposicin avanzada de columnas y las tcnicas de parrilla, y
se tratar con ms detalle la composicin de los formularios, los elementos flotantes, la distancia y el
posicionamiento.
Nota
A lo largo de todo el apartado encontraris muchos ejemplos de cdigo enlazados
para demostrar las tcnicas de las que se habla, pero si queris trabajar con el cdigo
en vuestro ordenador, podis descargaros todos los ejemplos de cdigo.
Descargad los ejemplos en: "article30_examples.zip"
30.1. Cambiar la composicin: mrgenes, bordes y relleno en CSS
30.1.1. Colocar espacio en blanco en torno a un elemento: las propiedades margin-top, margin-
right, margin-bottom, margin-left y margin
Mrgenes automticos
Mrgenes negativos
Colapso de los mrgenes
Demostracin 1
30.1.2. Aadir un borde a un elemento: propiedades de borde
Las propiedades border-width
Las propiedades border-style
Las propiedades border-color
La propiedad abreviada border y sus cuatro primos, con ms detalle
Crear reglas: la razn de ser de cinco propiedades abreviadas de borde en vez de una sola
...Y por qu tantas propiedades? Slo son bordes, no?
Demostracin 2
30.1.3. Cuando slo con los mrgenes no es suficiente: propiedades padding
Demostracin 3
30.2. Trabajar con la anchura y la altura de los elementos
30.2.1. Conceptos bsicos de width y height
30.2.2. min-width, max-width, min-height y max-height
Demostracin 4
30.2.3. Desbordamiento: poner barreras al cdigo o dejarlo libre
Los resultados de los cuatro valores de overflow
30.3. Los modelos de caja de CSS: hacer que todo encaje
30.3.1. Elegir las unidades adecuadas para la composicin
La regla principal de aplicar tamao a los elementos: mezclar unidades proporcionales y
estticas con cuidado, o no hacerlo
Elegir el tipo de unidad adecuada para la composicin: ventajas y desventajas
30.3.2. Los componentes del modelo de caja
30.3.3. El modelo de caja del W3C: todo es acumulable
258/407
Mrgenes proporcionales y relleno en el modelo de caja del W3C
30.4. Trabajar con flujo de documentos
30.4.1. Tipos de elementos y la propiedad display
Demostracin 5
30.4.2. Hacer que algunos elementos fluyan en torno a otros: la propiedad float
Demostracin 6
30.4.3. Forzar elementos por debajo de sus predecesores flotantes: la propiedad clear
Resumen
Preguntas de repaso
30.1. Cambiar la composicin: mrgenes, bordes y relleno en CSS
Muchos elementos de HTML, como los elementos div y los ttulos, se representan por defecto de manera
que ocupen todo el ancho del lienzo del navegador y fuercen un salto de lnea terminal, de modo que una
serie de estos elementos se representara como una pila de principio a fin sobre el lienzo del documento.
Sin embargo, los elementos de HTML y los estilos que el navegador suele asignarles no son adecuados para
la gama completa de casos de uso que se pide a los desarrolladores que tengan en cuenta cuando hacen su
trabajo. El modo como CSS y HTML se combinan se ha ajustado a una relacin de "llenar los agujeros", de
manera que las class e id puedan aadir significado semntico al etiquetado mientras que las reglas de hoja
de estilo pueden cambiar la composicin y la presentacin del contenido de manera precisa, quiz incluso
cancelando gran parte de los estilos predeterminados del navegador.
El control cuidado del espacio en blanco es una de las herramientas ms importantes del diseador y, segn
el autor de estas lneas, la ms importante de todas. No obstante, el grado de control del espacio en blanco
que aporta un valor de produccin elevado al diseo de un sitio no est presente en las hojas de estilo
predeterminadas de los navegadores, lo que significa que los especialistas en estilos suelen utilizar a
menudo los mrgenes, los bordes, el relleno y otras propiedades de CSS que se explican en este apartado.
Los mrgenes (margin), los bordes (border) y el relleno (padding) se disponen tal como se muestra en la
figura 1.
Figura 1. Representacin explcita de las diferentes partes de una caja de
elementos, con las respectivas etiquetas de las propiedades de CSS pertinentes
30.1.1. Colocar espacio en blanco en torno a un elemento: las propiedades margin-top, margin-right,
margin-bottom, margin-left y margin
Los mrgenes pueden especificarse de manera individual o en una regla abreviada. Adems, la regla
259/407
abreviada sigue permitiendo controlar cada uno de los bordes que rodean un objeto. Los valores vlidos
suelen especificarse en unidades px o em (pxeles o ems). En las hojas de estilo especficas de impresin
pueden utilizarse las unidades in, cm, o pt (pulgadas, centmetros o puntos).
En todos los casos, % (porcentaje) es un valor vlido, pero se debe utilizar con cuidado porque estos valores
se calculan como una proporcin de la anchura del elemento padre, y una previsin no suficientemente
precisa de valores podra tener consecuencias no deseadas. Esta dificultad se explica con ms detalle
cuando se habla del modelo de caja de CSS.
Ved tambin
Podis ver la explicacin del modelo de caja de CSS en el subapartado 29.2 de este mdulo.
Exceptuando las imgenes, los elementos en lnea carecen de mrgenes y no aceptan valores de margen.
Ved tambin
En la tabla 2 que se muestra en el subapartado 30.4.1, hay una lista de los elementos en lnea.
Mrgenes automticos
Dependiendo de las circunstancias, la provisin de un valor auto ordena al navegador que represente un
margen segn el valor proporcionado en su propia hoja de estilo. Sin embargo, cuando se aplica un margen
as a un elemento con una anchura significativa, un margen auto provoca que todo el espacio disponible se
represente como espacio en blanco.
Con la regla siguiente:
.narrowWaisted {
width: 16.667em;
margin: 1em auto 1em auto;
}
un elemento de bloque de la clase narrowWaisted (clase cintura estrecha) se centrar en medio del lienzo
disponible.
Tambin puede asignarse al margen derecho de un elemento aplicable un valor relativamente pequeo,
mientras que al margen izquierdo se le asigna un valor auto.
Cuando se hace esto, un elemento as se representar casi pegado a la derecha.
Mrgenes negativos
A todas las propiedades de mrgenes se les pueden asignar valores negativos. En este caso, un margen
adyacente puede ser "cancelado" a cualquier nivel. Si se aplica un valor lo suficientemente negativo a un
elemento lo suficientemente grande, el elemento adyacente afectado puede acabar quedando por debajo del
otro.
Como ejemplo, pongamos por caso los siguientes elementos sencillos div:
<div id="header"><h1>Lovely header</h1></div>
<div id="content"><p>Overlapping text is entirely unreadable</p></div>
Cuando se le aplican estilos con el CSS siguiente:
body {background-color:white font-family:Geneva, Arial, Helvetica, sans-serif;}
#header { background-color:yellow }
h1 { color:red; font-size:2em; }
se crea lo que se puede ver en la figura 2:
260/407
Figura 2. Los dos elementos de nuestro sencillo ejemplo. No tiene nada de
especial.
Archivo fuente: "Negativemargins1 example"
Pero ahora viene la parte interesante. Ahora aadiremos un margen negativo bastante grande encima del
elemento inferior mediante la regla siguiente:
#content {margin-top:-3em;}
Esto provoca el efecto visual de cambiar el elemento de manera que se superponga con el ttulo tal como se
puede ver en la figura 3.
Figura 3. Cuando se le aplica un margen negativo, el elemento inferior pasa
arriba y se superpone con el ttulo.
Archivo fuente: "Negativemargins2 example"
Colapso de los mrgenes
En los casos en los que dos elementos de bloque adyacentes y parecidos comparten mrgenes que son
mayores que cero, slo se aplicar el margen mayor de los dos. Por ejemplo, pongamos por caso la regla
siguiente:
p {
margin: 1em auto 1.5em auto;
}
Si un documento que incluya esta regla de estilo se representa de manera literal, el margen final entre los
dos prrafos seguidos sera de 2.5 em, es decir, la suma del margen inferior del prrafo 1 (1,5 em) y el
margen superior del prrafo 2 (1 em). No obstante, a causa de la aplicacin de mrgenes colapsados, el
margen entre ellos es slo de 1.5 em.
Las listas y ttulos son peculiares entre los elementos de bloque, de manera que sus mrgenes no se
colapsarn sobre los mrgenes de los dems elementos de bloque.
Demostracin 1
En el apartado anterior, de aplicacin de estilos al texto, se hizo la tipografa de la seccin introductoria de
una historia de F. Scott Fitzgerald con la mayora de herramientas de CSS. De cara a la demostracin de
este apartado, se utiliza aquella misma pgina con algunos pequeos cambios (principalmente, la adicin de
un elemento contenedor en torno a todo el texto central). Los estilos del texto no cambian, pero se han
eliminado los pocos estilos de composicin que se haban aplicado a aquella demostracin.
Para empezar, se aadirn mrgenes a todos los elementos que los necesiten.
body { margin: 0; }
#main { margin: 0 auto 0 auto; }
h1 { margin: 0 0 1em 0; }
.pullQuote { margin: auto 0 1em 1em; }
p { margin: 0; }
.attribution { margin: 0 0 1.5em 0; }
Archivo fuente de: "Ejemplo con slo el mnimo de estilos"
Archivo fuente de: "Hoja de estilo de inicio"
Archivo fuente de: "Ejemplo con mrgenes nuevos en body, ttulo, texto destacado, contenedor de documentos y prrafos"
261/407
30.1.2. Aadir un borde a un elemento: propiedades de borde
Hay una propiedad de border (borde) abreviada, pero slo es til cuando se quiere proporcionar un borde
completo y consistente alrededor de los cuatro lados de un elemento. Tambin es posible establecer el peso
(anchura), estilo y color de cualquiera de los cuatro bordes de un elemento mediante cualquier combinacin
significativa de las propiedades siguientes:
border-width
border-style
border-color
border-top
border-top-width
border-top-style
border-top-color
border-right
border-right-width
border-right-style
border-right-color
border-bottom
border-bottom-width
border-bottom-style
border-bottom-color
border-left
border-left-width
border-left-style
border-left-color
Las propiedades border-width
Estas propiedades se comportan exactamente como sera de esperar: asignan peso explcito a uno o ms
bordes.
La propiedad abreviada border-width (anchura de borde) acepta valores con la misma notacin que la
propiedad abreviada de margin (margen), pero no acepta valores porcentuales. Puede ser que en el futuro
debis redactar una regla como la siguiente:
td {
border-width: 1px 0 0 1px;
}
Las propiedades border-style
262/407
Figura 4. Los ocho estilos de borde ms habituales
Las propiedades border-style (estilo de borde) suelen aceptar cualquiera de los valores siguientes:
dashed. La longitud de las secciones de lnea y la cantidad de espacio en blanco entre ellas las
determina el navegador.
dotted. La cantidad de espacio en blanco entre los puntos (que pueden tener cualquier forma con una
proporcin de 1) la determina el navegador.
double. La anchura proporcionada se dividir en tercios y se asignar en el orden lleno-negativo-lleno.
groove. Se representar un outset inmediatamente dentro de y junto a un inset.
inset. Al borde se le aplicar una sombra para que parezca que el elemento al que se aplica est
incrustado en el lienzo.
none. Equivalente a especificar una -width (anchura) de cero.
outset. Al borde se le aplicar una sombra para que parezca que el elemento al que se aplica sobresale
del lienzo.
ridge. Se representar un inset inmediatamente dentro de y junto a un outset.
solid. El borde es una lnea continua sin sombra.
Cuando se utiliza la propiedad abreviada border-style (estilo de borde), sta acepta hasta cuatro valores
que se aplican de la misma manera que los valores abreviados margin (margen).
La prctica de oscurecer un borde (en lugar de omitirlo) se controla con las propiedades -color.
Las propiedades border-color
Para terminar, es posible establecer cualquier color en cualquier borde concreto, tanto con una nica
propiedad como las que se acaban de enumerar, como con la propiedad abreviada border-color (color de
borde).
263/407
Ved tambin
Podis consultar la explicacin de la propiedad abreviada de margin (margen) en el subapartado 27.4 para
saber ms detalles sobre los resultados de proporcionar menos de cuatro valores.
De la misma manera que background-color, border-color puede adoptar un valor de transparent. Esto puede
ser til para los casos lmite que necesitan una composicin consistente pero no un uso consistente de los
bordes.
La propiedad abreviada border y sus cuatro primos, con ms detalle
Al contrario que las distintas propiedades de borde -width, -style y -color, estas cinco propiedades permiten
definir las tres caractersticas de los cuatro bordes de un objeto o de cualquier borde concreto en cualquier
momento. Los valores abreviados de border (etc.) incluyen alguna o todas las propiedades de anchura, estilo
y color que se aplican a un borde; la nica limitacin es que se debe hacer referencia o bien a un nico lado
cualquiera de un elemento o bien a los cuatro a la vez.
Tened en cuenta la siguiente regla de border:
#borderShorthandExample {
border: 2px outset rgb(160,0,0);
padding: .857em;
background-color: rgb(255,224,224);
}
Un elemento sobre el que se haya aplicado la norma anterior, presentar exactamente este aspecto.
Cuando se omite un valor de una regla abreviada de border, el elemento representado mostrar un resultado
por defecto:
La anchura del borde la determinar el navegador.
El estilo del borde ser solid.
El color del borde ser idntico al color aplicado al elemento en cuestin.
Crear reglas: la razn de ser de cinco propiedades abreviadas de borde en vez de una sola
Las "reglas" que se mencionan aqu son lneas trazadas sobre una composicin y no directrices que haya
que seguir. Estas lneas mejoran el contraste entre un elemento y el espacio que tiene alrededor y, en la
mayora de los casos, contribuyen a crear la ilusin de profundidad en una composicin. Este ltimo
resultado se ejemplifica por la existencia de los estilos de borde inset y outset.
Si bien estos mismos efectos pueden conseguirse colocando bordes en torno a los cuatro lados de un
elemento, la habilidad para trazar lneas definidas con precisin en una composicin permite al diseador
alcanzar un control considerable sobre los detalles.
...Y por qu tantas propiedades? Slo son bordes, no?
Cuando se crea una composicin que exige mucha pericia de un experto en estilos, siempre existe la
necesidad de tener en cuenta casos lmite.
Ved tambin
Podis ver los casos lmite en el apartado 27 sobre los mrgenes.
A causa del modo como se ejecutan los diseos de los sitios, os encontraris muchos casos en los que
algn elemento pueda llegar a tener propiedades estructurales parecidas a otros elementos de un documento
pero que tenga requisitos de presentacin diferentes. En estos casos, tiene todo el sentido del mundo
escribir una regla para el caso ms comn y reglas adicionales para cada uno de los casos lmite. Por este
motivo, existen los valores auto (automtico) e inherit (heredar): para utilizar un estilo predeterminado como
264/407
caso lmite.
En el caso de los bordes, los casos lmite puede ser que requieran la modificacin de una sola caracterstica
de un borde de un nico lado de un elemento, y cuando se es lo bastante sabio para seguir el principio KISS,
normalmente lo mejor es cambiar nicamente los detalles que sean estrictamente necesarios.
Ved tambin
Podis ver el principio KISS en el subapartado 27.4 de este mdulo.
Demostracin 2
Determinadas secciones del documento deberan decorarse con reglas y bordes.
h1 { border-bottom: 1px solid rgb(153,153,153); }
.pullQuote { border: 1px solid rgb(153,153,153); }
Archivo fuente de: "Ejemplo con una regla inferior en el ttulo y un borde alrededor del texto destacado"
30.1.3. Cuando slo con los mrgenes no es suficiente: propiedades padding
Encontraris elementos con colores de fondo de tonos secundarios o destacados que necesitan canales
entre el contenido y los mrgenes. Tambin puede ser que necesitis incluir espacio entre los bordes y el
texto que hay cerca.
En estos casos y en muchos otros os sern muy tiles las propiedades padding (relleno), padding-top (relleno
superior), padding-right (relleno derecha), padding-bottom (relleno inferior) y padding-left (relleno izquierda).
Estas propiedades insertan espacio negativo entre los mrgenes o bordes de un elemento y su contenido.
Podis ver la figura 1 anterior como claro ejemplo de la relacin entre mrgenes, bordes y relleno.
Ved tambin
Podis ver la figura 1 en el subapartado 30.1 de este mdulo.
Estas propiedades se comportan exactamente igual que las propiedades de margen pero con las
excepciones siguientes:
Los valores auto son funcionalmente intiles en referencias a las propiedades de relleno.
Los valores negativos de relleno son invlidos.
El relleno nunca se colapsa.
Los valores de margen no se aplican a los elementos en lnea, pero los valores de relleno s.
Ved tambin
Podis ver las propiedades de margen en el subapartado 30.1 de este mdulo.
Demostracin 3
Los canales deberan aplicarse a los elementos a los que ya se han aplicado bordes previamente.
body { padding: 0; }
h1 { padding: .5em 0 .5em 0; }
.pullQuote { padding: .5em; }
Archivo fuente de: "Ejemplo de insercin de canales adyacentes a los bordes previamente aplicados al ttulo y al texto destacado"
30.2. Trabajar con la anchura y altura de los elementos
Pueden modificarse las dimensiones de la mayora de los elementos.
265/407
Ved tambin
Anteriormente en el subapartado 30.1.1, cuando hablbamos de los mrgenes auto, ya se ha demostrado
que la mayora de los elementos se pueden modificar.
Las propiedades CSS utilizadas para modificar las dimensiones de los elementos son: width, height, min-
width, max-width, min-height y max-height. Estas propiedades pueden separarse de (o enlazarse a) las
dimensiones del contenido de los elementos con la propiedad overflow.
Tambin hay una propiedad clip (recorte) que esconde partes de un elemento dentro de los mrgenes. Sin
embargo, no hablaremos de ello en este apartado a causa de sus limitadas posibilidades de uso.
30.2.1. Conceptos bsicos de width y height
En general, width y height producen exactamente los resultados que cabra esperar. No obstante, su uso
implica algunas notas importantes.
width y height no pueden aplicarse a elementos inline... hay varios elementos (como span, strong y
em) que ignoran la aplicacin de los valores width y height en circunstancias normales.
Ved tambin
Podis ver una lista de los elementos que ignoran la aplicacin de los valores width y height en el
subapartado 30.3 de este mdulo.
... excepto a las imgenes, a las que se les puede asignar width y height aunque sean elementos
en lnea. La Recomendacin CSS 2.1 habla de las imgenes como elementos "sustituidos", lo que
significa que los navegadores siempre deberan tratarlas como si tuvieran dimensiones estticas. Por
este motivo, estas dimensiones pueden modificarse arbitrariamente.
width y height slo son dos de las propiedades que pueden afectar a las dimensiones funcionales
de un elemento. Por lo tanto, es fcil encontrarse en situaciones en las que un elemento sea
demasiado pequeo (normalmente demasiado estrecho) para contener el contenido como debera, lo
que provoca errores.
Ved tambin
Podis ver cmo las propiedades pueden afectar a las dimensiones funcionales de un elemento en el
subapartado 30.3 de este mdulo, que trata sobre el modelo de cajas de CSS.
Los errores de representacin de Microsoft Internet Explorer (IE) hacen necesario especificar las
parejas de valor/propiedad de width o height para algunos elementos. Hay algunas peculiaridades
del motor de representacin de IE que slo pueden resolverse con la fuerza bruta. La mayora de estas
peculiaridades son bien conocidas y se eliminarn de IE 8, pero hasta que esta versin sustituya a sus
predecesoras en el mercado, este problema seguir siendo un caso de prueba inevitable.
PositionIsEverything.net y la wiki de discusin de CSS ofrecen mucha informacin sobre este asunto y
tcnicas para resolverlo.
De vez en cuando, los algoritmos de redondeo provocan diferencias fuera de especificacin en
los navegadores que muestran los contenidos con medios de visualizacin LCD, LED o CRT
(type="screen"). El tipo de medio screen (pantalla) requiere que todas las unidades se conviertan en
medidas de pxeles, de manera que la imagen puede quedar diferente en cada navegador.
30.2.2. min-width, max-width, min-height y max-height
En ocasiones os encontraris situaciones en las que necesitis limitar el tamao de un elemento,
generalmente para garantizar que una columna de tamao proporcional conserve siempre una anchura
legible. Las distintas propiedades min- y max- responden a este requisito. Del mismo modo que con width y
height, los resultados que pueden esperarse de utilizar estas propiedades son bastante previsibles en
realidad.
Sin embargo, segn nuestra experiencia, estas propiedades tienen un uso limitado (aunque otros expertos
no estn de acuerdo). Igual que los antiguos width y height, pueden sufrir errores de redondeo que pueden
266/407
enviar resultados totalmente inesperados. Y lo que es ms importante, IE 6, que a fecha de julio del 2008
an tiene una amplia cuota de mercado, no los reconoce en absoluto.
Demostracin 4
Se colocaron mrgenes auto a la izquierda y a la derecha del contenedor de la pgina. Ahora es necesaria
una width para que los valores de margen tengan sentido. Adems, el plan es asignar un valor float al texto
destacado de manera que tambin obtenga una anchura.
#main { width: 42em; }
.pullQuote { width: 14em; }
Archivo fuente de: "Ejemplo de cambio de la anchura del contenedor del documento y del texto destacado"
30.2.3. Desbordamiento: poner barreras al cdigo o dejarlo libre
Cuando se establece la width o la height de un elemento, a veces es necesario pensar qu resultados son
deseables en caso de que los contenidos de este elemento ocupen ms espacio del que hay disponible. Esto
es especialmente cierto para los sitios con contenido generado por el usuario y con especificaciones de
composicin estrictas.
La propiedad overflow (desbordamiento) y sus cuatro valores vlidos (visible, hidden, auto y scroll) existen
para hacer frente a estas circunstancias. En la figura 5 puede observarse el efecto que tienen cuando se
aplican a un elemento cuyo contenido se desborda de los lmites de su caja.
267/407
Figura 5. Los efectos de la propiedad de desbordamiento de CSS
Los resultados de los cuatro valores de overflow
visible (por defecto). El contenido que sobrepasa las dimensiones de la caja de un elemento se
muestra sin afectar al flujo o los mrgenes de los elementos adyacentes. En consecuencia, puede
parecer que el contenido de un elemento choque con el contenido de un elemento adyacente. En
subapartados posteriores, se habla de las tcnicas para evitar esta situacin y casos especiales
provocados por problemas de representacin en IE.
hidden. Cualquier contenido que est fuera de los lmites de un elemento quedar escondido.
auto. Las dimensiones de un elemento estarn limitadas igual que cuando se utiliza el valor hidden
(escondido), pero se crearn las barras de desplazamiento que sean necesarias para que el contenido
268/407
que no quepa sea accesible al visitante.
scroll. Se incorporarn barras de desplazamiento verticales y horizontales al elemento aunque no sean
necesarias.
30.3. Los modelos de caja de CSS: hacer que todo encaje
Ahora que ya hemos hablado de las propiedades fundamentales de composicin, es el momento de
descubrir cmo el navegador representa la anchura de un elemento segn sus propiedades de CSS y cmo
evitar que los elementos creen errores en las composiciones. Algunos resultados tendrn todo el sentido del
mundo y otros parecern horriblemente antiintuitivos. Para acabar de complicarlo todo, hay dos algoritmos de
composicin que se deben tener en cuenta: el modelo especificado por el World Wide Web Consortium
(W3C) en la Recomendacin de CSS 2.1 y el que se ha utilizado en las versiones antiguas de IE.
30.3.1. Elegir las unidades adecuadas para la composicin
Tal como sucede con el texto, el tamao de los elementos puede ajustarse con unidades proporcionales
como % o em, o con unidades estticas como px. Otro elemento que se debe tener en cuenta es que el lienzo
del navegador siempre tiene un tamao de un valor esttico que no se puede asumir sin utilizar un script en
el lado del cliente para recuperar el tamao de la ventana o cambiarlo, tcnicas que se ajustan mal a las
exigencias de la accesibilidad, usabilidad y portabilidad de medios.
La regla principal de aplicar tamao a los elementos: mezclar unidades proporcionales y estticas con
cuidado, o no hacerlo
El valor por defecto tanto de width como de height es auto, que es una directiva que significa: "Utiliza el
espacio disponible". El resultado de los elementos de bloque es que su width computada ocupa todo este
espacio. En cuanto a la height, los elementos se amplan por defecto para incluir su contenido.
Si cambiis los valores de width y height, debis ir con mucho cuidado para garantizar que el contenido de
un elemento encaje (con los mrgenes, los bordes y el relleno) con la anchura que habis especificado. La
manera ms fcil de hacerlo es llevar a cabo el proceso siguiente:
1. Pensad en el ancho mximo que pueda tener vuestra composicin teniendo en cuenta las resoluciones
de visualizacin habituales y/o el tamao de la tipografa. En el momento de escribir estas lneas, esta
anchura ser normalmente de unos 800 o 1.024 pxeles. Cuanto ms amplia sea la audiencia esperada
de vuestro sitio, ms probabilidades habr de que se deba elegir el ms pequeo de estos valores.
2. Cread un elemento contenedor para todo el documento ajustado a una anchura determinada inferior a la
calculada en el paso #1.
3. Utilizad el mismo tipo de unidad cuando establezcis las propiedades de composicin de los elementos
en el elemento contenedor creado en el paso #2.
Elegir el tipo de unidad adecuada para la composicin: ventajas y desventajas
Unidad Ventajas Desventajas
em
Es ms adecuado para crear cuadrculas
de composicin muy precisas en dos
dimensiones.
Cuando se utiliza en relacin con
contenedores de documentos, posibilita
composiciones que se amplan o se
contraen segn el tamao del texto
central.
Las dimensiones computadas de los
elementos se convierten en fcilmente
previsibles.
Puede ser que las unidades fraccionarias
se amplen o se contraigan con ligeras
diferencias entre navegadores.
Para conseguir los mejores resultados,
todos los valores de font-size y line-
height del documento deberan
establecerse en valores explcitos y
previsibles.
Es ms adecuado para composiciones
totalmente flexibles.
Para evitar errores, quiz se necesiten
elementos contenedores adicionales.
269/407
Tabla 1. Ventajas y desventajas del porcentaje, de em y de unidades de pxel que especifiquen propiedades de composicin.
porcentaje
Es ms fcil para crear elementos como
columnas iguales.
Puede resultar en elementos anchos de
manera inaceptable o estrechos.
Los resultados dependen mucho del
contexto.
px
Ofrece el mayor control sobre la
composicin.
Elimina la mayora de la variacin en la
composicin entre navegadores.
Es el menos adecuado para requisitos de
accesibilidad y aceptacin de todo tipo de
medios.
Es el ms susceptible de causar errores.
30.3.2. Los componentes del modelo de cajas
En realidad, el modelo de cajas slo es una serie de directivas que definen cmo interactan entre s las
diferentes especificaciones de composicin de un elemento. Los componentes que incluye el modelo de caja
son:
1. Lienzo de documento.
2. Mrgenes.
3. Bordes.
4. Relleno.
5. Anchuras y alturas de los elementos.
6. Propiedades de elementos hijo.
El ltimo de estos elementos incluye a los otros cinco. Sin embargo, para simplificar, este subapartado se
centrar en las relaciones sencillas de padre-hijo, y se reserva el tema de las interacciones de modelos de
caja de mltiples niveles para futuros apartados que tratarn con ms detalle los puntos de la composicin
de pgina.
30.3.3. El modelo de caja del W3C: todo es acumulable
La regla bsica es que la anchura o altura computada de un elemento es igual a:
margin + border + padding + (width|height)
En muchos casos, la width y/o height se establecern en su valor predeterminado de auto, lo que significa
que la zona del lienzo reservada para el contenido es igual a:
lienzo_disponible - margin - padding - border
En una expresin de este tipo, lienzo_disponible es un valor discreto en s (aunque a menudo
autocomputado), del que se restan las cantidades correspondientes a mrgenes, bordes y relleno. Este
nmero es de gran importancia para la anchura de los elementos porque los errores de clculo de anchura
que cometa un diseador tendrn la desagradable consecuencia de provocar que aparezca una barra de
desplazamiento horizontal en la ventana del navegador. Adicionalmente, los navegadores siempre sitan los
elementos en el margen izquierdo del lienzo del navegador, ya que, en caso contrario, se desbordan fuera
del margen derecho de la ventana del navegador si no se especifica lo contrario.
Fijaos en la siguiente regla de hoja de estilo:
#myLayoutColumn {
width: 50em;
margin: 1.5em auto 1.5em auto;
border: .1em;
padding: .9em;
}
270/407
Como ya hemos comentado en la explicacin de las propiedades del margen, se puede esperar que
#myLayoutColumn se centre en su elemento contenedor, independientemente de si el contenedor es body o algo
creado por el grupo de produccin.
Adems, si la activacin del "modo estricto" (mediante el uso de una declaracin !DOCTYPE adecuada) causa
que se utilice el modelo de cajas del W3C, tambin se puede esperar que la anchura no marginal computada
prevista sea:
.1em + .9em + 50em + .9em + .1em = 52em
En los medios screen, el navegador tomar este valor, redondear todos los valores de manera separada
hasta el pxel ms prximo y representar el resultado de acuerdo con ello.
Mrgenes proporcionales y relleno en el modelo de caja del W3C
Cuando se utiliza el modelo de cajas del W3C, los mrgenes proporcionales y el relleno se computan en
relacin con la width computada del elemento contenedor. Por poner un ejemplo, si especificis margin: 20%
para un elemento incluido en un elemento que tiene 800 pxeles de anchura, el margen que se representa
alrededor del primer elemento ser de 160 pxeles por todos los lados (ya que el 20% de 800 son 160).
Si a este mismo elemento se le asigna padding: 5%, la anchura computada del contenido ser de 400
pxeles:
20% + 5% + 5% + 20% = 50%
0.50 800 = 400
800 - 400 = 400
30.4. Trabajar con flujo de documentos
Los prximos apartados tratan de la creacin de composiciones de mltiples columnas, de manera que
debemos presentar tres propiedades de CSS que an nos faltan en este apartado: display, float y clear.
30.4.1. Tipos de elementos y la propiedad display
Excepto las partes de html, body y table, todos los elementos de la Recomendacin de HTML 4.01 que estn
relacionados con contenido primario tienen un tipo asociado "en lnea" o "bloque". Cada tipo determina el
comportamiento de la composicin por defecto de varias maneras.
a. En lnea
El texto y las imgenes que hay inmediatamente delante y/o detrs de elementos en lnea se
representan sobre una lnea base comn con el contenido del elemento en lnea, a no ser que
sean tan largos que se superpongan sobre el lmite del elemento contenedor, en cuyo caso el
contenido insertado acabar sobre una nueva lnea base por debajo de la primera.
Las lneas de texto dentro de elementos en lnea se disponen con saltos de lnea blandos segn
sea necesario (o segn se pueda), excepto en los casos en los que este comportamiento se
modifica por el uso de la propiedad white-space (espacio en blanco).
Las propiedades margin, width, height y float en reglas de hoja de estilo aplicables a estos
elementos (excepto img y object) se ignoran.
Los elementos en lnea slo pueden contener texto u otros elementos en lnea.
b. Bloque
Estos elementos se representan como bloques discretos dentro de sus contenedores.
A no ser que se les asigne un valor float de left o right, siempre se representarn con saltos de
lnea precedentes y posteriores.
En general, los saltos de lnea entre elementos de bloque anidados que no tienen ningn
contenido entre ellos se colapsarn.
271/407
Los elementos de bloque con una anchura de auto (la predeterminada) siempre se ampliarn para
llenar toda la anchura que puedan.
La propiedad display (visualizar) tiene tres valores que se utilizan habitualmente: block, inline y none, de los
cuales dos hacen referencia a los tipos de elemento correspondiente. El efecto de cambiar el valor de
display de un elemento es provocar que un elemento en lnea se comporte como un elemento de bloque,
que un elemento de bloque se comporte como uno en lnea o modificar la representacin del documento
como si el elemento (y todo su contenido) no existiera en absoluto.
De hecho, es fundamental saber qu elementos se corresponden con qu tipos por defecto. Las relaciones
se exponen brevemente en la tabla 2:
Elemento Tipo Subtipo Notas
Tabla 2. Elementos de HTML de uso frecuente y sus tipos. Slo se colapsarn los mrgenes entre dos elementos de bloque
a
en
lnea
especial
abbr
en
lnea
frase
acronym
en
lnea
frase
address bloque En la prctica se comporta de manera parecida a p.
blockquote
bloque Debe incluir como mnimo un elemento de bloque cuando el
!DOCTYPE declarado es Strict.
body
Engloba todo el lienzo del documento; normalmente tiene un
margen (en IE, Firefox y Safari) o un relleno (en Opera) de 10px
cuando el medio es screen.
cite
en
lnea
frase
div bloque
em
en
lnea
frase
fieldset bloque Normalmente se representa por defecto con border: 1px black;.
form bloque
h1... h6 bloque ttulo
input
en
lnea
control de
formulario
img
en
lnea
especial
label
en
lnea
control de
formulario
li
bloque Tipo de elemento no especificado en la Definicin de Tipo de
Documento, pero este elemento puede contener elementos de
bloque o insertados; la Recomendacin CSS 2.1 completa
reserva un valor display para elementos de lista.
ol bloque lista
p
bloque Slo puede incluir elementos en lnea, que normalmente se
representan con mrgenes superiores e inferiores.
span
en
lnea
especial
strong
en
lnea
frase
table bloque
ul bloque lista
272/407
adyacentes del mismo subtipo.
Demostracin 5
Y si eliminamos la anotacin "Prlogo" del ttulo nicamente para esta demostracin?
.sectionNote { display: none; }
Archivo fuente de: "Ejemplo con eliminacin de la parte superflua de un apartado"
30.4.2. Hacer que algunos elementos fluyan en torno a otros: la propiedad float
Hay una foto colocada a la izquierda de este prrafo. Prcticamente
todos veris que el texto siguiente fluye de manera natural a su
alrededor, aunque puede que algunos primero debis dejar de
preguntaros por qu un famoso escritor de novelas de ciencia ficcin
decide pegar tocino a su gato con cinta adhesiva, por muy aburrido
que est. Los atributos del HTML pueden utilizarse para especificar
el comportamiento de la composicin que podis observar, pero en
este caso los resultados se han conseguido con CSS.
Tal como os podis imaginar, la pareja propiedad/valor que lo hace
posible es float: left;. En futuros apartados se tratarn las sutilezas de trabajar con elementos flotantes,
pero, de momento, es necesario tocar este tema de pasada. float: right tambin es una pareja de
propiedad/valor perfectamente til, y para aquellas ocasiones en las que necesitis contradecir una
asignacin de class que invoque float, podis especificar float: none.
La propiedad float s que tiene unas cuantas instrucciones de uso:
Un valor float slo tendr relevancia si se aplica a un elemento de bloque con una width explcita.
Las propiedades float, clear y margin aparecen juntas en las reglas de hojas de estilo para crear
columnas en una composicin.
Es complicado hacer que un elemento flotante se estire hasta llegar a la parte inferior de su contenedor,
pero no es imposible. La manera habitual de hacerlo se denomina faux-columns.
Demostracin 6
Ya hemos hablado de la colocacin de un valor float en el texto destacado, de manera que ahora lo
haremos y veremos cmo queda. Y, ya que estamos, aadmosle un poco de color de fondo para que se
distinga mejor del contenido principal.
.pullQuote { float: right;
background-color: rgb(204,204,204); }
Archivo fuente de: "Ejemplo de hacer 'flotar' el texto destacado hacia el margen derecho"
30.4.3. Forzar elementos por debajo de sus predecesores flotantes: la propiedad clear
De la misma manera que la propiedad float, a la propiedad clear puede asignrsele uno de los valores left,
right o none. El valor both (ambos) tambin es posible.
Aunque la propiedad float rige cmo debera fluir el contenido de los elementos subsiguientes a su
alrededor, la propiedad clear rige cmo debe fluir un elemento en torno a todos sus vecinos; en la mayora
de los casos, no debera fluir en absoluto.
La figura 6 demuestra el funcionamiento de clear: left; en una composicin en la que a dos elementos
consecutivos se les han asignado valores idnticos de height y valores de float de left y right:
273/407
Figura 6. clear:left permite que la caja inferior corte las dos columnas porque
son de la misma altura.
En la demostracin anterior, el flujo por defecto de #cLeftWidget lo colocara justo por debajo del texto en
latn, es decir, entre #fLeftWidget y #fRightWidget.
Pensad qu sucede cuando el primero de la misma coleccin de elementos se hace ms corto que su
hermano que toca a la derecha, tal como se ve en la figura 7.
Figura 7. Cuando la columna derecha es ms larga que la columna izquierda,
clear:left no cortar las dos columnas y, por lo tanto, hay que utilizar
clear:both.
En el primer ejemplo, el valor clear del elemento final se establece en left para demostrar este hecho: como
los dos elementos con float son igual de altos, el elemento con clear se coloca automticamente por debajo
de los dos. Sin embargo, el segundo ejemplo demuestra que para conseguir el mismo resultado con
elementos con float de alturas diferentes, hay que utilizar clear: both;.
Esta informacin sobre la propiedad clear est pensada slo como una pequea introduccin a sus efectos,
ya que los detalles de la tcnica asociada a su uso se tratarn en apartados posteriores.
Resumen
Entre las diferencias entre motores de representacin, la necesidad de incluir una amplia gama de terreno
274/407
definido tradicionalmente y la inhabilidad para predecir las dimensiones exactas de una ventana de
navegador, la composicin de documentos web est llena de dificultades y riesgos. A pesar de todo, el nivel
habitual de soporte de CSS ha avanzado hasta el punto de que no es difcil conseguir que los documentos
web den resultados aceptables en cualquier navegador.
Preguntas de repaso
1. En qu circunstancias es mejor utilizar el valor abreviado como margin o una nica propiedad de
margen como margin-top?
2. Cuando las propiedades abreviadas de margin, padding y border-width se presentan con los cuatro
valores, en qu orden se aplican estos valores a los cuatro lados de un elemento?
3. Si quisierais colocar una regla bajo el texto de cada ttulo de un documento, qu propiedad utilizarais?
4. Qu valor de border-style utilizarais para hacer que un elemento parezca un botn de interfaz?
5. S o no: especificar un borde alrededor de un elemento tambin crear automticamente un canal en
torno al elemento?
6. Si creis un elemento que no sea tan ancho como su contenedor, qu pareja de propiedad/valor
debis establecer para garantizar que el elemento quede centrado horizontalmente en su contenedor?
7. S o no: si colocis un elemento contenedor dentro de body y establecis la width en un valor superior a
100%, cambiar el comportamiento del lienzo del documento?
8. Si una imagen es demasiado grande para el elemento contenedor, qu pareja de propiedad/valor
utilizarais para garantizar que no se creen errores en la composicin de la pgina y por qu?
9. Si asignis un valor de display de block a un elemento a (enlace) y dais una altura y una anchura
razonables a este elemento, cmo cambia el comportamiento del enlace cuando se pasa el ratn por
encima en un medio de visualizacin screen?
10. En circunstancias normales, un elemento de bloque se ampla hasta llenar la anchura de su contenedor
(menos mrgenes, bordes y relleno). Por defecto, cambia realmente este comportamiento cuando este
elemento va precedido de un elemento con float, o slo parece que cambia?
11. Si pretendis aplicar un valor float a un elemento, qu otra propiedad tambin debis establecer en
este elemento?
12. Si quisierais estar del todo seguros de que un elemento siempre se ampliar para llenar la anchura de
su contenedor, qu parejas de propiedad/valor establecerais?
Bergevin, Holly; Gallant, John (2006). Explorer exposed. Position Is Everything. [Fecha de consulta: 1 de
julio del 2008].
Bos, Bert y otros (2007). Cascading style sheets level 2 revision 1 (CSS 2.1) specification. World Wide Web
Consortium. [Fecha de consulta: 30 de junio del 2008].
Raggett, Dave y otros (1999). HTML 4.01 specification. World Wide Web Consortium. [Fecha de consulta:
30 de junio del 2008].
Raymond, Eric; Steele, Guy (eds.) (2003). Brute force. The Jargon File (Version 4.4.7). [Fecha de consulta:
30 de junio del 2008].
Scalzi, John (2006). Clearly you people thought I was kidding. Whatever. [Fecha de consulta: 30 de junio del
2008].
275/407
: :
276/407
CSS - Imgenes de fondo en CSS
CSS
Imgenes de fondo en CSS
Accesibilidad : : :
Nicole Sullivan. 26 de septiembre del 2008 Publicado en: repetir, adjuntar, sprite, prueba, posicin
Admitidlo! Desde el primer apartado de este curso os habis estado muriendo de ganas de aprender cmo
conseguir que vuestra web quede impresionante y fabulosa. Incluso es posible que os hayis saltado los
otros apartados para llegar a ste directamente!
Las imgenes de fondo sirven para hacer que vuestro sitio quede atractivo, pero quiz os sorprenda saber
que estn muy relacionadas con los conceptos fundamentales que ya habis aprendido.
Tal como ya habis visto en este curso, uno de los cambios ms importantes que aporta el CSS es la
capacidad para separar la presentacin, o el aspecto de las cosas, de la semntica, o el significado de las
cosas. La imagen de fondo de CSS es una de las herramientas ms importantes que podis utilizar porque
permite aplicar imgenes decorativas en determinadas partes de vuestro HTML sin aadir peso adicional al
HTML. Antes, los creadores web (como vosotros!) se vean obligados a llenar el cdigo de etiquetas img.
El CSS, y sobre todo la propiedad background (fondo), hacen que vuestro HTML deje de estar abarrotado de
elementos presentacionales. De esta manera, redisear un sitio o realizar otras transiciones de la vida de una
pgina web creada con mtodos modernos puede hacerse de una manera mucho ms sencilla. Podris
actualizar toda la pgina cambiando nicamente la hoja de estilo en lugar de tener que grabar todas y cada
una de las pginas HTML. Dependiendo del tamao del sitio, esto puede ahorraros una gran cantidad de
tiempo.
En este apartado veremos los conceptos bsicos del funcionamiento de las imgenes de fondo de CSS,
incluida la aplicacin de una imagen de fondo a travs de CSS, cmo ajustar su colocacin, repetirla en
vertical u horizontal y combinar imgenes de fondo con sprites CSS para mejorar el rendimiento del sitio.
31.1. Cmo funciona?
31.1.1. Propiedades de fondo
31.2. Crear un mensaje de alerta
31.2.1. El diseo
31.2.2. El cdigo
Crear el vnculo o selector de CSS
Aadir el color de fondo
Aplicar la imagen de fondo
Controlar la repeticin del fondo
Attachment
Colocar la imagen
Utilizar la abreviacin para combinarlo todo como un profesional
31.2.3. Hacer pruebas con el cdigo
31.2.4. Comprobar la calidad
31.3. Sprites
31.3.1. Un ejemplo de sprite complejo e imagen de fondo
Crear el sprite
Resumen
Preguntas de repaso
Cmo funciona?
El CSS para fondo se divide en varias propiedades. Utilizando estas propiedades, como position y color,
podis empezar a controlar el aspecto de vuestra pgina. En este apartado, repasaremos detalladamente las
imgenes de fondo de CSS y crearemos un mensaje de alerta como ejemplo paso a paso.
Antes de nada, debemos saber ms cosas sobre las diferentes propiedades que podemos utilizar.
277/407
31.1.1. Propiedades de fondo
Propiedad Definicin Descripcin
background-
color
Establece el
color de fondo
del elemento de
HTML.
Hay varias maneras de indicar el background-color o color de
fondo, como incluir valores y palabras clave RGB. La mayora de
la gente utiliza la notacin hexadecimal, un smbolo de
almohadilla o barra (#) seguido de seis caracteres. La primera
pareja indica los niveles rojos y la segunda y la tercera indican
los niveles verde y azul respectivamente: #RRGGBB.
Hay muchas herramientas para elegir colores que pueden
ayudaros a encontrar la notacin hexadecimal de un color
determinado. El rojo puro, por ejemplo, sera el #FF0000.
Los valores vlidos incluyen un valor de color, transparent o
inherit.
image Indica la ruta o
URL de la
imagen de
fondo.
Establece la background-image o imagen de fondo mostrando al
navegador dnde encontrar la imagen utilizando la URL. Por
ejemplo: url(alert.png). Fijaos en que la ruta va precedida de la
palabra clave url y entre parntesis. Esta sintaxis es importante
para que el navegador entienda que queris indicar una
ubicacin.
Los valores vlidos incluyen una URL, none o inherit.
repeat Indica en qu
direccin se
debe repetir la
imagen de
fondo.
Las imgenes pueden repetirse en vertical u horizontal, o en
ambas direcciones, para llenar toda la anchura o altura de un
elemento HTML. Utilizad background-repeat para indicar al
navegador que repita una imagen de fondo.
Los valores vlidos son repeat, repeat-x, repeat-y y no-repeat.
attachment Define el
comportamiento
de la imagen de
fondo cuando el
usuario se
desplaza.
Las imgenes pueden desplazarse con el contenido o quedarse
fijas en la pantalla de visualizacin. Los valores vlidos son:
scroll, fixed e inherit.
position Indica al Las imgenes pueden mostrarse en cualquier punto dentro de
278/407
Tabla 1. Propiedades de fondo
navegador
dnde colocar
la imagen de
fondo.
los bordes del elemento de HTML en el que estn aplicadas.
Utilizad background-position para colocar las imgenes con
precisin o para crear efectos visuales y capas.
Hay muchas maneras tiles de indicar la posicin, las palabras
clave y los valores numricos del fondo. Las palabras clave
(como top y bottom) son muy tiles y fciles de leer. Los valores
en pxeles son muy precisos pero no se adaptan a los cambios
de altura y anchura. Los valores de pxeles negativos son muy
tiles cuando se utilizan sprites CSS, como veremos ms
adelante.
Cuando se utilizan sprites y pxeles, el punto inicial siempre es el
extremo superior izquierdo del elemento HTML, aunque la
manera de funcionar de la colocacin de la imagen es algo
diferente con pxeles o con porcentajes. Los pxeles siempre
mueven la imagen un nmero concreto de pxeles hacia la parte
inferior derecha de la caja contenedora (o hacia la parte superior
izquierda si son valores negativos), sea cual sea el tamao de la
imagen y de la caja contenedora. Los porcentajes, en cambio,
mueven la imagen un porcentaje de la diferencia entre la caja
contenedora y el tamao de la imagen. Si la imagen y la caja
contenedora son igual de grandes, los porcentajes no movern la
imagen en absoluto.
Los valores vlidos incluyen length (normalmente en pxeles),
percentage (de la anchura del elemento) y las palabras clave top,
right, bottom, left y center. Fijaos en que center se puede
utilizar para indicar un centro vertical u horizontal. Fijaos tambin
en que podis mezclar porcentajes y pxeles en las reglas, pero
no palabras clave y pxeles ni palabras clave y porcentajes.
background La propiedad
abreviada que
se puede
utilizar para
describir todo el
resto de
propiedades de
una lnea.
Las propiedades abreviadas son realmente prcticas. La mayora
de los desarrolladores las utilizan para mantener el CSS lo ms
sencillo posible y para agrupar propiedades relacionadas. Se
puede escribir una regla general utilizando la abreviacin y
despus anularla segn sea necesario con propiedades
especficas.
Las propiedades siempre se deberan indicar en el mismo orden
para que los navegadores puedan interpretar fcilmente los
estilos.
1. color
2. url
3. repeat
4. attachment (no se utiliza casi nunca, se puede omitir)
5. horizontal-position
6. vertical-position
Un ejemplo de esta abreviacin con todas las propiedades
utilizadas (excepto attachment):
background: green url(logo.gif) no repeat left top;.
31.2. Crear un mensaje de alerta
Ahora que ya hemos visto la sintaxis bsica necesaria, os ensearemos cmo crear un ejemplo completo de
caja de alerta que servir para demostrar todos los aspectos de las imgenes de fondo.
279/407
31.2.1. El diseo
Pongamos por caso que un diseador grfico os ha presentado un boceto visual del mensaje de alerta que
queris crear para vuestro sitio web. Fijaos en que la alerta tiene el fondo de color naranja claro para
diferenciarlo de los prrafos que lo rodean. Tambin tiene un icono de alerta a diez pxeles del extremo
superior izquierdo.
Fijaos en que el boceto slo tiene una lnea de texto, pero que en otros casos puede tener ms. Uno de los
rasgos ms importantes del desarrollador web es prever cmo acabar evolucionando un diseo. En parte,
respetar la visin artstica de un sitio supone pensar en la consistencia desde que se inicia hasta que se
redisea. Por lo tanto, el mensaje de alerta podra incluir ms de una lnea de texto o incluso mltiples
prrafos, listas u otros elementos HTML. Deberais intentar ser tan agnsticos en cuestin de elementos
como os sea posible. De esta manera, aumentarn las probabilidades de reutilizacin del cdigo y el sitio
web tendr la mxima velocidad y eficiencia. El boceto es el que se ve en la figura 1:
Figura 1. El boceto del diseador grfico de la caja de alerta
El diseador tambin os ha proporcionado el icono que debis utilizar, como se muestra en la figura 2:
Figura 2. El icono de alerta
31.2.2. El cdigo
Basndoos en todo lo que habis aprendido de los fondos de CSS en la primera parte de este apartado, ya
podis ir pensando en cmo crear este mensaje de aviso. Os animamos a que lo probis ahora mismo y que
despus comparis el resultado con nuestro ejemplo.
Muy bien, ya lo habis probado? Vayamos paso a paso. Haced pruebas con el cdigo, aumentad o reducid
los valores e intentad probar alternativas. Tambin puede ser que queris ir siguiendo todos los pasos
escribiendo cada lnea nueva de cdigo en una herramienta como por ejemplo Opera Dragonfly o Firebug
para poder ir viendo los resultados de cada paso inmediatamente.
Nota
En la versin web, cada copia de pantalla tiene un enlace a ejemplos de cdigo para
que podis comprobar la fuente en cada paso.
Crear el vnculo o selector de CSS
Para empezar, debis crear una clase alert para que el CSS se pueda enlazar con l. Cread los ficheros
esqueleto nuevos de CSS y HTML, enlazad el CSS en el fichero HTML y aadidle el cdigo siguiente:
El CSS:
.alert { ... }
El HTML:
<p class="alert">
<strong>Alert!</strong> The text of our alert message goes here.
</p>
En este caso, hemos aplicado estilos a la alerta con un class y no con un id porque podra tener ms de una
alerta en la pgina, por ejemplo, en un elemento de formulario con varios errores. El CSS se debe hacer lo
ms flexible que se pueda y limitarlo todo a fin de que se corresponda al diseo cuando se crea el HTML.
Muy bien, pues ya tenis unas bases, pero todava parece un prrafo normal porque todava no le habis
280/407
aadido ningn estilo. Hagmoslo.
Nota
Hemos decidido intencionadamente no limitar la clase alert a prrafos; las cajas de
alerta tambin podran contener fcilmente otros elementos. Deberais dejar que el
CSS tenga la mxima flexibilidad posible.
Aadir el color de fondo
Ya habis aprendido cmo utilizar el color de fondo con los estilos de texto. Los mismos principios se aplican
a cualquier elemento HTML y pueden combinarse con imgenes de fondo para crear efectos visuales. Si el
color de fondo no se ha establecido ni heredado, ser transparente por defecto.
Ved tambin
Podis ver cmo utilizar el color de fondo con los estilos de texto en el apartado 29 de este mdulo.
Aadimos el color de fondo naranja claro a la caja de alerta para que resalte entre el texto que tiene
alrededor. No debera ser demasiado oscuro porque es importante que mantengis un nivel razonable de
contraste entre el texto y el color de fondo. Aadid la propiedad siguiente a vuestra regla de CSS:
.alert{background-color: #FFFFCC;}
Ahora la caja de alerta se parecer ms a la figura 3:
Figura 3. Una caja de alerta con color de fondo aadido
Archivo fuente: "Figura 3"
Aplicar la imagen de fondo
Pasemos a aadir la imagen. La ruta a la imagen de fondo debe estar entre url(), como se observa en el
cdigo siguiente. Aadid la lnea resaltada a la regla de CSS:
.alert{
background-color: #FFFFCC;
background-image: url(alert.png);
}
Ahora la caja de alerta quedar como en la figura 4:
Figura 4. Se ha aadido la imagen de fondo, pero la repeticin queda horrible.
Recordad que cada propiedad de fondo tiene un valor por defecto que se le aplicar si no especificis
ningn valor. Seguramente ya os habris dado cuenta de que la imagen se repite por toda la alerta como si
fueran las teselas de un mosaico. Cul es la conclusin de todo esto? Las imgenes de fondo estn
configuradas por defecto para repetirse tanto horizontal como verticalmente. Los fondos que se repiten son
especialmente tiles para gradaciones de colores y patrones que llenan la pantalla o un elemento de HTML
en concreto, pero en este caso no es lo que queremos.
Controlar la repeticin del fondo
281/407
Figura 5. De manera parecida a nuestra imagen de fondo, estas teselas se
repiten tanto en horizontal como en vertical.
Leer especificaciones puede ser una tarea intimidante, pero la especificacin es muy buen lugar para
averiguar cmo se supone que funciona el CSS antes de pasar ver con detalle la mirada de diferencias
existentes entre navegadores. Echadle un vistazo a la parte de los colores y los fondos de la especificacin
del W3C e intentad encontrar la palabra clave para utilizarlos cuando no queris que se repita una imagen de
fondo. A continuacin, la utilizaremos en un ejemplo.
Ya la habis encontrado? Fijaos en que existe una seccin para cada propiedad de fondo, background-
repeat incluida. En Value veris todas las opciones posibles, incluyendo repeat, repeat-x, repeat-y, no-
repeat e inherit. Por defecto, las imgenes de fondo (iniciales) se repiten. No se especifica ninguna
direccin, de modo que la imagen se repetir tanto horizontal como verticalmente. Seguramente ya os
habris imaginado que no-repeat (sin repeticin) es el valor que necesitis para impedir que la imagen se
repita en cualquier direccin. Aadid la siguiente lnea resaltada a la regla de CSS:
.alert{
}
Ahora la caja de alerta quedar como en la figura 6:
Figura 6. La caja de alerta con una nica copia de la imagen de fondo (sin
repeticiones)
Adems, tambin podis repetir en ambas direcciones (como si fueran teselas de un mosaico) o en ninguna.
282/407
Las gradaciones suelen repetirse horizontal o verticalmente (podis ver la figura 7). No es necesario que
sepis el tamao del elemento HTML; slo debis cortar un trozo de la gradacin y hacer que se repita en la
direccin que queris; ya sea "x" para horizontal o "y" para vertical. Los patrones a menudo se repiten en
ambas direcciones y los iconos normalmente no se repiten. Ms adelante examinaris background-repeat con
ms detenimiento en otro ejemplo.
Figura 7. Las teselas o baldosas de este ejemplo slo se repiten en horizontal.
Fijaos ahora en un ejemplo prctico de mi web, observad la figura 8:
Figura 8. Un ejemplo de imagen repetida de mi web
El CSS que utilizamos para aadir este efecto decorativo es relativamente sencillo. Hicimos que el fondo se
repitiera horizontalmente con repeat-x:
body{background-repeat:
repeat-x}
Attachment
283/407
attachment permite especificar cmo funciona el fondo cuando el usuario desplaza la pgina hacia abajo. El
funcionamiento por defecto es scroll, que hace que la imagen de fondo se desplace junto con el contenido.
Por otra parte, si se establece background-attachment en fixed, el elemento se queda fijo en la ventana del
navegador, de modo que no se mueve cuando se desplaza el contenido de dentro del elemento en el que
est adjunto. Esto crea algunos efectos extraos que slo sern visibles cuando desplacis la pgina por
encima el elemento de HTML en el que est adjunto. La W3C lo utiliza para sealar el estado de las
especificaciones, como por ejemplo la imagen de la "W3C Candidate Recommendation" de arriba del todo a
la izquierda en sus especificaciones. Desplazad la pgina hacia abajo y veris que la imagen se queda fija en
el rincn superior izquierdo. Est adjunta al elemento body, de manera que siempre es visible.
Este paso no tendr ningn efecto en nuestra visualizacin porque los navegadores establecen por defecto
que las imgenes de fondo se desplacen, pero aadmoslo igualmente al cdigo para que podis ver cmo
se utiliza la propiedad. Aadid la lnea resaltada a la regla de CSS:
.alert{
background-attachment: scroll;
}
Como se observa en la figura 9, la visualizacin de la caja de alerta no es muy diferente de como era antes.
Figura 9. No ha cambiado mucho, an.
Colocar la imagen
La propiedad de colocacin permite disponer la imagen de fondo exactamente donde queris ponerla, tanto
horizontal como verticalmente, en el elemento de HTML. Esta propiedad acepta palabras clave y valores
como: top, center, right, 100%, -10%, 50px y -30 em.
En la figura 10 se muestran los valores que pueden utilizarse para colocar las imgenes de fondo en
diferentes posiciones.
Figura 10. Varios ejemplos de posicin del fondo mediante palabras clave,
porcentajes y pxeles
Pasemos ahora a colocar la imagen de fondo: queris que quede en el extremo superior izquierdo, pero sin
284/407
tocar los lados, de manera que necesitis establecer una distancia de 10 pxeles tanto desde el lmite
superior como desde el izquierdo. Esto se puede hacer aadiendo la siguiente lnea resaltada en la regla
CSS. Hacedlo ahora.
.alert{
background-attachment: scroll;
background-position: 10px 10px;
}
El primer valor es la distancia horizontal y el segundo, la vertical. En este caso, son el mismo. Ahora la caja
de alerta quedar como en la figura 11:
Figura 11. Hemos utilizado la colocacin para situar la imagen de fondo.
Consejo
Utilizad o bien slo palabras clave o bien slo valores numricos, ya que los
navegadores antiguos puede que ignoren vuestra declaracin si los utilizis los dos a la
vez. Si utilizis right y bottom, conseguiris lo mismo que 100% horizontal y
verticalmente.
Utilizar la abreviacin para combinarlo todo como un profesional
Como ya habis podido observar, algunas propiedades de CSS pueden combinarse. Por ejemplo, el fondo y
todas las subpropiedades relacionadas. El cdigo de CSS que hemos escrito hasta ahora se puede reescribir
abreviadamente as:
.alert{background: #FFFFCC url(alert.png) no-repeat scroll 10px 10px;}
Consejo
Cuando combinis subpropiedades de background, poned siempre las propiedades en
el orden siguiente. Es importante tanto para la compatibilidad de todos los
navegadores, como para la organizacin y el mantenimiento de la hoja de estilo:
1. color
2. image
3. repeat
4. attachment
5. posici horizontal
6. posici vertical
Intentad sustituir el CSS antiguo con la abreviacin anterior, y vuestro ejemplo os debera quedar
exactamente igual. Podis ver la figura 12.
Figura 12. La abreviacin funciona de maravilla!
285/407
31.2.3. Hacer pruebas con el cdigo
La mejor manera de recordar todos los detalles de CSS es probar las opciones uno mismo. Intentad cambiar
algunas de las propiedades del ejemplo y ved cmo queda. Estableced la background-position a 100% 100%, y
fijaos en que da el mismo resultado que utilizar las palabras clave de right y bottom. Y si lo cambiarais a -
5px 0? Por qu creis que ahora no podis ver parte de la imagen?
31.2.4. Comprobar la calidad
Hacer pruebas es extremadamente importante para ofrecer una buena experiencia de usuario. El hecho de
que el sitio funcione bien en vuestro equipo con vuestra configuracin especfica no quiere decir que se vea
bien en todos los ordenadores. Cuando comprobis la caja de alerta, deberais seguir estos pasos bsicos
mnimos:
Aumentad o reducid la cantidad de texto en el interior de la alerta.
Aumentad el tamao del texto de vuestro navegador como mnimo dos niveles. Habra sido mejor
utilizar ems para colocar la imagen? Y qu sucede cuando aumentis el tamao del texto?
Aplicad la alerta class a otros elementos como div, p, ul, strong o em. Qu necesitis cambiar para
hacer que la clase sea agnstica?
Incluid unos cuantos prrafos y una lista dentro del div de la alerta. An funciona el cdigo?
Verificad la alerta visualmente en los navegadores de grado 1 (tambin llamado grado A). Mi consejo es
que escribis para buenos navegadores y adaptis para Internet Explorer despus de que funcione el
cdigo.
Realizar una serie rigurosa de pruebas forma parte del proceso de aprender a escribir CSS. Si vais con
mucho cuidado a la hora de aprender, acabaris yendo muy rpido.
31.3. Sprites
Los usuarios lo quieren todo. Quieren que vuestro sitio sea atractivo, interactivo y, encima, rpido, pero incluir
grandes cantidades de imgenes de fondo de CSS puede ralentizar mucho la web, ya que cuantas ms
peticiones HTTP hagis, ms lento ser el sitio (una peticin HTTP es cuando el ordenador est accediendo
a una pgina web y necesita pedir al servidor que le enve otro valor que compone el sitio, como un fichero o
una imagen de CSS; cada peticin adicional significa ms tiempo de carga del sitio). Con el fin de superar
esta limitacin, podis combinar iconos relacionados para formar una sola imagen, los llamados sprites CSS.
La propiedad de background-position permite colocar la imagen en la posicin adecuada de manera que los
iconos se vean a travs de la ventana del elemento HTML donde estn adjuntos los sprites CSS.
En la figura 13, por ejemplo, observaris que para ver el icono de la Tierra a travs de la ventana HTML
debis colocar la imagen utilizando left top. Para mover la posicin de la imagen de manera que se vea el
icono de alerta, la posicin del fondo se debe cambiar a -80 px 0. El valor negativo horizontal hace que la
imagen se desplace a la izquierda.
Figura 13. Utilizacin de sprites CSS para reducir las peticiones de HTTP
Nota
Si utilizis posiciones de fondo negativas, Safari repetir la imagen aunque hayis
especificado no repeat. Esto hay que tenerlo en cuenta cuando empecis a jugar con
las imgenes de fondo para crear composiciones ms complicadas.
31.3.1. Un ejemplo de sprite complejo e imagen de fondo
286/407
Fijmonos ahora en cmo se pueden utilizar los sprites CSS para conseguir buenos efectos. Imaginmonos
que nuestro amigo diseador nos ha enviado otro boceto. En este caso, se trata de una lista de enlaces a la
pgina de destino de un blog. Conduce al perfil LinkedIn, la suscripcin RSS, fotos Flickr y los enlaces
favoritos del escritor del blog. Si nos fijamos en cada enlace, nos daremos cuenta de que hay una gradacin
de color que empieza siendo blanco hasta llegar al gris en la parte superior e inferior del enlace y, para
acabar de complicarlo ms, el diseador nos ha pedido si podemos hacer que el fondo de cada enlace sea
de color blanco neutro sin gradacin cuando los visitantes pasen el cursor por encima; podis ver la figura
14.
Figura 14. El boceto del nuevo diseo
Los logos podran incluirse utilizando elementos img en el etiquetado, pero utilizar sprites CSS es mucho ms
prctico, porque como slo hay que cargar una imagen (y no cuatro), los sprites se cargan ms deprisa, lo
que simplifica el HTML y reduce la cantidad de etiquetado necesario.
Crear el sprite
El primer paso es recortar los cuatro logos y crear el conjunto de sprites como en la figura 15.
Figura 15. El conjunto de sprites
Tambin hay que recortar un trozo de la gradacin de un pxel de anchura. Para mejorar la visibilidad, hemos
recortado un trozo ligeramente mayor, pero vosotros slo necesitis un pxel; podis ver la figura 16.
Figura 16. El trozo de nuestro fondo de gradacin
El HTML de la lista es una lista no ordenada de enlaces. Fijaos en los elementos span vacos que hay en los
enlaces. Es muy importante no tener una height y width fija en los elementos que contienen texto, porque al
fin y al cabo no sabemos cmo ser de grande el texto. Qu sucedera si se tradujera el texto al alemn?
Se pueden utilizar estos spans adicionales para mostrar los logos. Alternativamente, podis decidir que no
queris tener etiquetado no semntico superfluo abarrotando el HTML. En este caso, necesitaris utilizar un
sprite mayor y dejar espacio blanco entre los iconos. Tened en cuenta que esto ser ms lento para los
usuarios con conexiones lentas, sobre todo los que acceden a Internet por telfono mvil. El cdigo de la
lista es el siguiente (aadidlo a una plantilla HTML):
<ul class="navigation">
<li id="resume">
<a href="#"><span></span>Resume</a>
</li>
<li id="rss">
<a href="#"><span></span>RSS Feed</a>
</li>
<li id="photos">
<a href="#"><span></span>Photos</a>
</li>
287/407
<li id="links">
<a href="#"><span></span>Links</a>
</li>
</ul>
El CSS utiliza las dos imgenes de fondo. Primero, fijaos en la gradacin de la imagen de fondo. Tiene tres
aspectos interesantes:
1. El primero es que la imagen se repite horizontalmente (repeat-x). De esta manera podemos hacer que
una imagen tan pequea se extienda por toda la lista.
2. El segundo es que la imagen est centrada verticalmente. El trozo redondo de la imagen debe quedar
en medio del elemento de la lista, de modo que debis utilizar una posicin de fondo de left center.
3. Para acabar, en el CSS hemos aplicado un color de fondo que es el mismo gris que el de nuestra
imagen de gradacin. As, si el elemento se hace ms grande, no quedar roto. Para saber ms sobre
esta tcnica, recomendamos leer Bulletproof Web Design, de Dan Cederholm.
Aadid el siguiente CSS a un nuevo fichero CSS y enlazadlo al fichero HTML:
.navigation, .navigation li {
margin:0;
padding:0;
}
.navigation li {
border-top: 1px solid white;
list-style-type:none
}
.navigation li a {
background:
#E2E2E2 url(sprite_gradient_bkg.jpg)
repeat-x left center;
padding:20px;
display:block;
font-family: Arial, Helvetica, sans-serif;
color:#333;
font-size:18px;
text-decoration:none
}
/* hover effects */
.navigation li a:hover, .navigation li a:focus{
background: transparent none;
}
La ltima lnea significa que el elemento no debera tener color ni imagen de fondo cuando el usuario pase el
ratn por encima o lo seleccione con el teclado. Puede que os estis preguntando por qu hemos aplicado
propiedades de fondo al enlace y no al elemento de la lista. La respuesta es que Internet Explorer 6 y las
versiones anteriores no reconocen pseudoclases como hover en elementos que no sean enlaces. Hemos
hecho el ajuste para adaptarnos a esta limitacin.
A continuacin, podis crear el CSS para los logos pequeos. Como siempre, podis empezar definiendo el
caso ms general para todos los elementos span de vuestro mdulo de navegacin. Es aqu donde defins la
imagen que se utilizar en todos los spans, la repeticin y la posicin del fondo (cada uno es diferente, de
manera que utilizaremos la primera). Para esta regla podis utilizar la abreviacin. Fijaos en que utilizamos
comentarios de CSS para dividir secciones del cdigo en trozos ms prcticos. Aadid el siguiente cdigo al
final del fichero CSS:
/* caso general */
.navigation span {
background:url(sprite_logo.gif) no-repeat left top;
height:15px;
width: 15px;
margin-right:20px;
288/407
display:-moz-inline-box;
display:inline-block;
vertical-align: middle;
}
Una vez bien definido el caso general, ya podis pasar a definir las excepciones, o lo que tiene de diferente
cada logo en concreto. En este caso, el nico CSS que cambia es la background-position. Cada elemento de
la lista respectivo necesita tener la imagen 15 pxeles ms hacia la izquierda porque cada logo tiene 15
pxeles de anchura. Aadid el siguiente cdigo al final del fichero CSS:
/* exceptions */
#rss span {
background-position: -15px 0;
}
#photos span {
}
#links span {
}
Este ejemplo puede intimidar un poco al principio, pero centraos en las imgenes de fondo. En este caso
hemos utilizado valores de pxel negativos para mover la imagen de fondo hacia la izquierda de manera que
se vea la parte relevante de la imagen. Los valores positivos mueven la imagen de fondo hacia abajo y hacia
la derecha, mientras que los negativos mueven la imagen hacia arriba y hacia la izquierda.
Haced pruebas con los valores de posicin de la imagen de fondo con el ejemplo acabado para entender
mejor cmo ajustar la colocacin de los sprites.
Ved el ejemplo acabado en: "Sprite example"
Resumen
Ahora ya deberais entender las imgenes de fondo de CSS y, adems, ya estaris adquiriendo prctica en
leer las especificaciones, de manera que si tenis alguna duda sobre alguna propiedad en particular,
deberais saber cmo consultarla. En este apartado hemos hablado del color de fondo, la imagen, la
repeticin, la adjuncin y la posicin. Tambin habis aprendido por qu los desarrolladores utilizan sprites
de CSS y cmo utilizar esta tcnica avanzada.
Preguntas de repaso
1. Un prrafo tiene unas dimensiones de 40 pxeles por 180 pxeles y la imagen de fondo es de 60 pxeles
por 200 pxeles. Veris toda la imagen o slo una parte? Por qu?
2. Debis hacer que una imagen quede colocada en el extremo inferior izquierdo del elemento blockquote.
Llenad los espacios con los valores correctos.
blockquote{background: yellow url(quote.png) no repeat scroll ____ ____;}
3. Pongamos por caso que queris que a cada h2 de vuestro documento con una class de "pregunta" se le
aplique un patrn de gradacin. Utilizarais repeat-x, repeat-y, no-repeat o repeat para conseguir un
resultado parecido al ejemplo siguiente? Por qu?
4. Cul sera la posicin del fondo del ejemplo de la pregunta 3? Cmo podrais utilizar un color de
fondo de manera creativa para garantizar que el fondo pueda ampliarse a cualquier altura? Por qu es
289/407
esto importante?
5. Qu abreviacin podis utilizar para eliminar todas las propiedades de fondo?
6. Para qu sirven los sprites CSS?
Rendimiento y peticiones HTTP en la Yahoo Developer Network
La especificacin CSS2 - Colores y fondos
CSS Sprites-Image Slicing's Kiss of Death
Bulletproof Web Design - Mi libro favorito
Crditos de las imgenes
The Tiles, DimsumDarren
little glass tiles, emdot
: :
290/407
CSS - Estilos de listas y enlaces
CSS
Estilos de listas y enlaces
Accesibilidad : : :
Ben Buchanan. 26 de septiembre del 2008 Publicado en: subrayar, estados, navegacin, relleno, margen
Muchos elementos de las pginas web son un tanto "indulgentes" en cuanto al diseo: no es muy grave si
no estn "del todo bien". Pero listas y enlaces son otra historia, porque si no se hacen bien, pueden causar
problemas graves a la gente que quiera utilizar vuestro sitio web.
En concreto, los enlaces tienen algunos requisitos bsicos en cuanto al estilo y a las expectativas de los
usuarios. Los enlaces con estilos mal hechos pueden arruinar la experiencia que tendr el usuario cuando
utilice la web porque la gente deber detenerse a pensar dnde debe hacer clic. En el peor de los casos, el
usuario no sabr determinar ni siquiera qu elementos de la pgina son enlaces.
En este apartado, nos centraremos en las competencias bsicas necesarias para crear unos estilos de listas
y de enlaces bien hechos. Tambin hablaremos de algunas maneras de evitar errores fundamentales de
estos elementos y de producir un resultado final que funcione en cualquier navegador y que sea accesible
para los usuarios con discapacidades.
Nota
En este apartado se utilizarn varios ejemplos, de modo que os podis descargar los
ficheros de muestra de las listas y los enlaces para ir vindolos a medida que sigis la
leccin.
Ved ejemplos reales en: "styling-lists-and-links examples"
32.1. Aplicar estilos a las listas
32.1.1. Picos y nmeros bsicos
32.1.2. Picos personalizados mediante imgenes
32.1.3. Mrgenes y relleno de listas
Listas no ordenadas
Listas ordenadas
Entonces qu hay que hacer?
32.1.4. Utilizar una colocacin de tipo lista
32.1.5. Y las listas de definiciones, qu?
32.1.6. Listas anidadas
32.1.7. Listas horizontales
32.1.8. "Columnas falsas"
Navegadores antiguos
32.1.9. Conclusin de las listas
32.2. Aplicar estilos a los enlaces
32.2.1. Comprender los estados de los enlaces
32.2.2. Cmo la evolucin de los navegadores cre expectativas
32.2.3. Expectativas del usuario
32.2.4. Utilizacin adecuada de los colores
32.2.5. Entremos en materia: el CSS
Aplicar estilos de estado de enlace en el orden adecuado
Controlar las opciones por defecto
Subrayados
Contorno
32.2.6. Ejemplo: recreacin de las opciones por defecto de Netscape
Subrayados falsos con border-bottom
Estilos no basados en el color
32.2.7. Iconos en enlaces
32.3. Combinarlo todo: un sencillo men de navegacin
Resumen
Preguntas de repaso
291/407
Bibliografa
32.1. Aplicar estilos a las listas
Antes de nada, os ensearemos los conceptos bsicos relacionados con la aplicacin de estilos a las listas
con CSS y despus pasaremos a echar un vistazo a algunas de las tcnicas algo ms complicadas.
32.1.1. Picos y nmeros bsicos
El punto ms bsico que se debe tener en cuenta a la hora de crear un estilo para una lista es pensar en
qu forma de pico o de nmero queremos utilizar. Tambin puede ser que no queris utilizar ningn tipo de
pico o de nmero. Como habis aprendido al ver el HTML para las listas, existen muchas posibilidades que
se establecen mediante la propiedad list-style-type.
Ved tambin
Podis ver las listas en el apartado 16 del mdulo "El texto central de HTML".
Por ejemplo, para especificar que todas las listas no ordenadas del sitio web utilicen picos cuadrados, podis
utilizar este CSS:
ul li {
list-style-type: square;
}
De esta manera, conseguiremos un resultado parecido al de la figura 1:
Figura 1. Lista desordenada con picos cuadrados
En la figura 2 se muestran algunos ejemplos de lista muy habituales:
Figura 2. Estilos ms habituales de listas
Podis ver algunas opciones ms en la pgina de ejemplos en: "styling-
lists-example-basics"
292/407
Fijaos en que los picos y los nmeros se representan con el color que se especifique en li o que ste
herede. Si necesitis que el pico sea de un color diferente del texto, deberis utilizar una imagen o
solucionarlo utilizando otros elementos de los puntos enumerados en la lista (puede ser muy fcil si la lista
est formada por enlaces, por ejemplo).
32.1.2. Picos personalizados mediante imgenes
El conjunto de picos estndar es suficiente para el contenido bsico, pero a menudo se pide a los
diseadores que sustituyan los picos por una imagen propia.
La especificacin de CSS incluye la propiedad list-style-image para aadir una imagen de lista
personalizada. No obstante, la propiedad tiene pocas opciones de colocacin de la imagen de fondo y, en
determinadas circunstancias, no funciona en absoluto en IE. Por ello, ha acabado siendo mucho ms habitual
establecer una imagen de fondo en los elementos enumerados en la lista.
Pongamos por caso que tenis una lista de canales de informacin RSS y queris cambiar el pico por el
tpico icono naranja de RSS. Aplicaremos la clase "rss" a la lista para diferenciarla de otras listas.
<ul class="rss">
<li><a href="http://example.com/rss.xml">News</a></li>
<li><a href="http://example.com/rss.xml">Sport</a></li>
<li><a href="http://example.com/rss.xml">Weather</a></li>
<li><a href="http://example.com/rss.xml">Business</a></li>
<li><a href="http://example.com/rss.xml">Entertainment</a></li>
<li><a href="http://example.com/rss.xml">Funny News</a></li>
</ul>
Primero estableceremos que la lista no tenga list-style-type y eliminaremos el margen y el relleno
(padding). Entonces, slo hay que aadir una imagen de fondo en cada elemento enumerado de la lista, algo
de relleno a la izquierda para desplazar el texto para que se pueda ver la imagen y algo de relleno alrededor
del botn para espaciar los elementos de la lista.
.rss {
margin: 0;
padding: 0;
}
.rss li {
background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
padding: 0 0 5px 15px;
}
De esta manera, nos quedar una lista con la imagen de RSS en lugar de picos, tal como se puede observar
en la figura 3:
Figura 3. Lista con picos hechos con una imagen
Tened en cuenta que la imagen de fondo est situada utilizando pxeles para colocarla de manera precisa.
Dependiendo del diseo que queris aplicar, puede ser que tambin podis utilizar %, em o palabras clave. De
todos modos, id con cuidado cuando el diseo incluya contenido que pueda hacer que un elemento de la lista
acabe teniendo varias lneas de texto, porque si establecis el fondo en center o 50% verticalmente, puede
quedar bastante extrao, como se ve en la figura 4:
293/407
Figura 4. Demostracin de imgenes de pico centradas verticalmente en un
elemento de lista de varias lneas
En cambio, si establecis que la imagen quede en la parte superior del elemento de la lista, conservaris el
comportamiento tradicional de los picos (es decir, quedar delante de la primera lnea). Podis ver la figura 5:
Figura 5. Demostracin de imgenes de pico alineadas en la parte superior de
un elemento de lista con ms de una lnea
32.1.3. Mrgenes y relleno de listas
Si se utilizan bien, los mrgenes y el relleno pueden hacer que las listas queden mucho ms ordenadas y
profesionales, pero debis saber qu estis haciendo y tener en cuenta que la situacin es diferente para
cada tipo de lista. En este subapartado os ensearemos cmo aplicar mrgenes y relleno a los dos tipos de
lista ms habituales de manera juiciosa.
Listas no ordenadas
Algo que probablemente notaris enseguida es que el estilo predeterminado de las listas aplica un sangrado
ms destacado que el estilo predeterminado para los prrafos. Podis ver la figura 6:
Figura 6. Las listas con el estilo predeterminado tienen un sangrado a la
izquierda.
Si queris que los elementos de una lista no ordenada queden alineados en el mismo punto que el resto de
contenido, deberis crear algunos estilos para modificar el sangrado como ms os guste. Cada navegador
requiere unos parmetros diferentes, en algunos se debe eliminar el margen y en otros se debe eliminar el
relleno. Por lo tanto, para establecer los valores iniciales en todos los navegadores, estableced lo siguiente:
ul {
margin: 0;
padding: 0;
}
Puede que eso no tenga el efecto que esperabais porque har que todo el texto quede a la misma altura
tocando a la izquierda, pero los picos quedarn ms all del texto, como se ve en la figura 7:
294/407
Figura 7. Los picos quedan ms a la izquierda que el texto.
Por lo tanto, para alinear los picos a la izquierda, lo que debis hacer es establecer un margen para la lista
de elementos y que as quede todo al mismo nivel:
ul {
margin-left: 0;
padding-left: 0;
}
ul li {
margin-left: 1em;
}
Llegados a este punto, an encontraris alguna diferencia de un pxel entre un navegador y otro, pero el
efecto es bsicamente el ms consistente posible. Podis ver la figura 8:
Figura 8. Los picos colocados al mismo nivel que los prrafos anteriores y
posteriores
Listas ordenadas
Ahora debis tener en cuenta lo mismo, pero aplicado a las listas ordenadas. Estas listas son ms
complicadas porque los smbolos numricos estn alineados segn el elemento de la lista que tenga el
nmero ms alto. Por ejemplo, si tenis una lista de 10 elementos, los decimales se colocarn de manera
que el elemento de dos dgitos, el "10", quede como se ve en la figura 9:
Figura 9. Los smbolos numricos de los elementos del 1 al 9 tienen un relleno
a la izquierda para quedar alineados con el elemento 10.
Por lo tanto, en realidad no se puede hacer que esta lista quede toda alineada a la izquierda y al mismo nivel
que el resto del texto, a no ser que establezcis que la lista utilice list-style-type: decimal-leading-cero;,
que solucionar el problema tal como se ve en la figura 10:
295/407
Figura 10. Los ceros a la izquierda llenan el espacio vaco de los elementos del
1 al 9.
Es ms habitual aceptar sencillamente la diferencia de espaciado. Sin embargo, esto significa que los
smbolos de las listas ordenadas y desordenadas no podrn alinearse fcilmente a la izquierda de manera
consistente. Slo se podr alinear el texto de las listas.
ul, ol {
margin-left: 0;
padding-left: 0;
}
li {
margin-left: 2em;
}
Necesitis como mnimo 2 em de margen a la izquierda para incluir tanto las listas ordenadas como las no
ordenadas. En la figura 11, fijaos en cmo se alinea el texto de los elementos en las dos listas.
Figura 11. El texto se alinea tanto en las listas ordenadas como en las
desordenadas.
Entonces qu hay que hacer?
296/407
Bsicamente tenis tres opciones:
1. Aceptar la colocacin por defecto de las listas y de sus smbolos.
2. Especificar la alineacin del texto de las listas.
3. Establecer un estilo diferente para ul y ol.
No hay una manera correcta ni incorrecta de hacerlo y es bastante habitual que se deje todo con la
configuracin predeterminada para las listas de contenido general.
32.1.4. Utilizar una colocacin de tipo lista
Si queris que el texto de elementos de ms de una lnea quede por debajo del smbolo de la lista, deberis
configurar la propiedad list-style-position en inside para as obtener el resultado que se ve en la figura
12:
Figura 12. La posicin de la lista inside hace que, a partir de la segunda lnea,
el texto quede por debajo del smbolo en lugar de alineado con el sangrado del
texto.
Este estilo de smbolos rodeados de texto no es muy popular. La propiedad list-style-position est
establecida por defecto en outside, lo que produce el resultado del que se habla ms adelante en este
apartado.
32.1.5. Y las listas de definiciones, qu?
En general, las listas de definiciones no requieren mucha atencin aparte de establecer un estilo dt
(normalmente texto en negrita) y controlar el sangrado de las definiciones:
dt {
font-weight: bold;
}
dd {
margin-left: 2em;
}
Eso define un estilo claro y sencillo para listas de definiciones, como se ve en la figura 13:
Figura 13. Una lista de definiciones con un estilo muy sencillo
Aunque las listas de definiciones pueden reestructurarse con elementos flotantes y posicionamientos, esto es
complicado y, en general, es mejor hacer las cosas sencillas. Como ya son bastante tiles, slo les hace falta
un poco de ayuda para hacer que los trminos de la definicin destaquen un poco ms y que las definiciones
tengan un sangrado adecuado.
297/407
32.1.6. Listas anidadas
Ya aprendisteis a anidar listas. Cuando creis vuestro propio CSS, debis ir con cuidado de mantener unos
rasgos de diseo muy claros para mostrar la relacin entre una lista anidada y la lista que la incluye. La
manera ms fcil de conseguirlo es aplicar un sangrado a los elementos de la lista anidada que, de hecho,
es la configuracin predeterminada en todos los navegadores.
Ved tambin
Podis ver las listas en el subapartado 16.4 del mdulo "El texto central de HTML".
Si establecis vuestro sangrado de lista personal, la configuracin bsica se multiplicar. Por ejemplo, podis
ver el CSS siguiente:
ul, ol {
margin-left: 0;
padding-left: 0;
}
li {
margin-left: 2em;
}
Cada elemento subsiguiente de la lista hija de la cadena hereda el valor de margin de su elemento de lista
padre adems de tener 2 em propios ms aadidos encima. As pues, un elemento de lista de nivel superior
(uno que no tenga un elemento de lista como elemento padre) tendr un margen izquierdo de 2 em, mientras
que un elemento de lista hijo del primer elemento de lista heredar 2 em de su padre y tendr 2 em ms
aadidos encima, es decir, un total de 4 em, etc.
32.1.7. Listas horizontales
Uno de los cambios ms comunes que son necesarios para trabajar con una lista es crear una lista
horizontal, es decir, hacer que los elementos de la lista aparezcan uno al lado del otro en vez de uno debajo
del otro. Se trata de un truco muy habitual para la navegacin por el sitio. Veamos un ejemplo del apartado
de los mens de navegacin (figura 14):
Figura 14. Una lista sencilla
Convirtmosla en una lista horizontal como se ve en la figura 15:
Figura 15. Una lista horizontal sencilla
Para conseguir este efecto, hemos de hacerle tres cosas a la lista:
1. Eliminar margin y padding de <ul>.
2. Establecer los elementos de la lista en display: inline;.
3. Aplicar un poco de espaciado a la derecha de los elementos de la lista para que no choquen.
En este ejemplo, la lista tiene el ID "mainmenu" (men principal), de manera que lo utilizaremos como
selector contextual para garantizar que slo cambiamos la lista que queremos cambiar. El CSS es el
siguiente:
#mainmenu {
margin: 0;
298/407
padding: 0;
}
#mainmenu {
display: inline;
padding: 0 1em 0 0;
}
En este sencillo ejemplo slo hay que establecer los elementos de la lista en display: inline;. Tened en
cuenta que si utilizis float: left; tambin conseguiris un resultado parecido. Ms adelante aprenderis
ms cosas sobre los elementos flotantes.
Ved tambin
Podis ver los elementos flotantes en el apartado 35 de este mdulo didctico.
32.1.8. "Columnas falsas"
Antes hemos creado una lista de canales de informacin de RSS. Ahora imaginaos que aquella lista se ha
situado en una barra lateral de vuestro sitio. El diseador quiere que la lista aparezca en dos columnas con
un borde alrededor de todo el grupo como se ve en la figura 16:
Figura 16. Una lista de canales de informacin en dos columnas con un icono
de RSS como pico
Ved el ejemplo en: "Styling lists example columns"
Supongamos que la lista se encuentra dentro de un <div> que establece la anchura y el borde. La lista bsica
quedara de una manera parecida a la figura 17:
Figura 17. La lista sin estilos dentro del borde
Ved la lista bsica original en: "Styling lists example image bullet"
Para conseguir el efecto de "faux columns" o columnas falsas, aadid el icono RSS como hemos visto antes
y aplicad un margen de 5 pxeles arriba, a la derecha y a la izquierda.
.rss {
margin: 5px 5px 0 5px;
padding: 0;
}
.rss li {
}
Nota
Fijaos en que se aade display:-moz-inline-box; para que el ejemplo se pueda ver
correctamente con Firefox 2.
299/407
No es necesario que le aadamos margen al botn porque el ltimo elemento de la lista ya aplicar el
espaciado adecuado con su relleno tal como se observa en la figura 18:
Figura 18. Ya casi hemos terminado; ahora tenemos un espaciado y unos
iconos de pico bien hechos.
Ahora estableced los elementos de la lista en display: inline-block; y estableced la anchura a 40% y el
margen derecho a 2% (tambin podis utilizar anchuras en pxeles). Tambin debis especificar que el <ul>
tenga una anchura de 100% para garantizar que los elementos de ms de una lnea queden como deben
quedar y que la lista tenga el tamao correcto:
.rss {
margin: 5px 5px 0 5px;
padding: 0;
width: 100%;
}
.rss li {
display: inline-block;
width: 40%;
margin: 0 2% 0 0;
}
En la mayora de los navegadores, con esto ser suficiente para crear el efecto de la columna, pero deberis
especificar que IE haga que "floten" los elementos de la lista a la izquierda. Utilizamos un estilo condicional
para todas las versiones hasta IE 7 (ya que an no sabemos qu harn las futuras versiones).

Ahora ya tenemos el efecto de las dos columnas, tal como se ve en la figura 19:
Figura 19. La lista completa
Navegadores antiguos
Si se os pide que creis este diseo para navegadores ms antiguos que no aceptan inline-block (bloque
en lnea), deberis hacer que "floten" los elementos de la lista a la izquierda en todos los navegadores y
utilizar un ajuste de distancia como el que se describe en el "How to clear floats without structural markup".
Por suerte, la ltima hornada de navegadores han hecho que el inline-block sea una propiedad de
300/407
visualizacin viable, as que, a no ser que tengis una cuota muy grande de navegadores antiguos como
Firefox 2, deberais poder utilizar el mtodo inline-block.
32.1.9. Conclusin de las listas
Ya hemos cubierto un conjunto bsico de opciones de aplicacin de estilos y mtodos para listas. Podis
utilizar estos ejemplos como punto de partida y combinarlos para crear un gran nmero de diseos. Como
las listas a menudo se combinan con enlaces, pasamos a hablar de estos.
32.2. Aplicar estilos a los enlaces
Aplicar estilos a los enlaces puede considerarse una especie de arte. En este campo hay muchos requisitos
en juego y puede ser difcil cumplirlos todos y, a la vez, obtener un resultado estticamente satisfactorio. Por
otra parte, es perfectamente posible siempre y cuando se tengan en cuenta una serie de normas muy
sencillas:
comprender los diferentes estados de los enlaces,
no apartarse mucho de las expectativas del usuario,
utilizar los colores adecuadamente.
Si segus estas reglas, podris crear enlaces claros y fciles de utilizar.
32.2.1. Comprender los estados de los enlaces
Antes de aplicar estilos a los enlaces, debis comprender los diferentes estados de los enlaces. Hay un
total de cinco estados: no visitado o predeterminado, visitado, seleccionado, por encima y activo.
No visitado (unvisited). El estado por defecto de un enlace cuando todava no se ha activado o visitado.
Visitado (visited). El estado de un enlace que el usuario ya ha visitado.
Seleccionado (focus). Se aplica mientras el enlace est seleccionado; por ejemplo, cuando el cursor del
usuario del teclado se encuentra sobre el enlace. Actualmente, IE no acepta el estado seleccionado y
slo utiliza active (activo) en lugar de focus (seleccionado).
Por encima (hover). Se aplica cuando un usuario tiene el puntero del ratn por encima del enlace pero
todava no ha hecho clic sobre l.
Activo (active). Se aplica cuando el usuario activa el enlace, es decir, mientras est haciendo clic sobre
l. En algunos navegadores, este estilo tambin se aplica cuando el enlace se ha abierto en otra
ventana o pestaa.
Siempre debis especificar el CSS para cada uno de estos estados. Cada uno aporta informacin al usuario
sobre el hecho de interactuar con un enlace. En caso de duda sobre si utilizar focus, hover o active, podis
aplicar el estilo focus y hover de la misma manera porque sus funciones son bastante parecidas para no
causar confusin con el mismo estilo de enlace. Despus podis aadir alguna variacin sencilla para
active, por ejemplo poner el texto en cursiva. En caso de que sea necesario, podis aplicar el mismo estilo a
los tres.
Nota
Fijaos en que no todos estos estados son mutuamente excluyentes (aunque en
realidad no es posible que un enlace est visitado y no visitado a la vez); es
perfectamente posible que un enlace est en estado "por encima", "activo" y "visitado"
a la vez.
32.2.2. Cmo la evolucin de los navegadores cre expectativas
Para entender mejor algunas expectativas de los usuarios respecto a los enlaces, va bien saber un poco de
la historia de la web.
Puede que hayis odo hablar de los "valores por defecto de Netscape" de los enlaces o que los enlaces
siempre deberan ser azules y morados. Esto se remonta a los principios de la creacin de la web, cuando
301/407
los navegadores establecan los colores del contenido y los creadores de webs no tenan demasiado control
sobre la manera de representacin de sus pginas.
El texto era negro, el fondo era gris y todos los enlaces estaban subrayados. Los enlaces sin visitar eran
azules, los enlaces visitados eran morados y los enlaces activos eran rojos. Esto era todo. Podis ver la
figura 20 para observar una muestra.
Figura 20. Una captura de pantalla de Mosaic
Aunque era un poco montono, era totalmente consistente y estableci la base de las futuras expectativas
de los usuarios. Concretamente, los usuarios todava a da de hoy esperan que el texto subrayado sea un
enlace. Quiz no se esperen que todos los enlaces estn subrayados, pero s esperan que se pueda hacer
clic sobre un texto subrayado. Y es mejor no ir en contra de esta expectativa.
Algunos sitios utilizan enlaces azules y morados, que an son los colores predeterminados del contenido sin
estilo en la mayora de los navegadores. Aunque siempre podis adaptaros a la moda "retro" y seguir con
esta pareja de colores, en general a los usuarios no les importa encontrarse con otros colores, dentro de
ciertos lmites.
32.2.3. Expectativas del usuario
Hay una serie de reglas generales para las expectativas del usuario en cuanto a los enlaces.
Los usuarios esperan encontrar enlaces que tengan un aspecto diferente del resto del texto que no
son enlaces.
Los usuarios esperan que los enlaces reaccionen de alguna manera cuando se pasa el cursor por
encima o cuando se selecciona el enlace.
Los usuarios esperan que los enlaces cambien despus de visitarlos.
A los usuarios les gusta la consistencia de los estilos de los enlaces de la misma funcin para as
saber sobre qu deben hacer clic.
Los usuarios esperan que el texto subrayado sea un enlace, as que no subrayis otra cosa.
302/407
Siempre debis cumplir estas normas bsicas porque contribuyen a que los usuarios puedan identificar y
utilizar los enlaces rpidamente. Debis crear estilos que no obliguen a la gente a dudar de qu partes del
texto son enlaces.
Estas expectativas se traducen en unas normas de codificacin muy sencillas:
definir estilos para todos los estados de enlace,
utilizar el subrayado slo para los enlaces.
32.2.4. Utilizacin adecuada de los colores
Cuando apliquis estilos a los enlaces, id con cuidado de no basaros nicamente en el color para distinguir
los diferentes estados de enlace. No todo el mundo puede ver igual los colores (como los daltnicos), de
manera que debis utilizar colores y tambin estilos como diferentes subrayados, iconos o colores invertidos.
Tambin deberais aseguraros de que los colores que elegs tengan bastante contraste. Es muy fcil si se
utilizan herramientas como Colour Contrast Analyser (tanto para PC como para Mac) o la barra de
herramientas de accesibilidad web para Opera (ambas de Paciello Group).
Con el Colour Contrast Analyser (podis ver la figura 21) se puede utilizar un selector de colores para
seleccionar los colores de letra y de fondo de la pantalla y despus obtener una evaluacin sencilla del
contraste que hacen:
Figura 21. Captura de pantalla del Colour Contrast Analyser
Si los cuatro resultados son "pass" (superado), la combinacin de colores es adecuada. No os olvidis de
comprobar todos los estados de enlace. Puede que debis introducir algunos manualmente en el campo
"hex" para comprobar el estado "seleccionado", "por encima" y "activo".
32.2.5. Entremos en materia: el CSS
Ahora que ya entendis las normas bsicas de los enlaces, pasemos a ver el cdigo. En este subapartado se
describe todo el CSS que necesitaris para aplicar estilos como es debido.
Aplicar estilos de estado de enlace en el orden adecuado
Para empezar, tened en cuenta que si no aplicis los estilos a los enlaces en el orden correcto en la hoja de
estilo, las definiciones se anularn entre ellas y los estados de los enlaces no funcionarn. Los estilos de los
enlaces siempre deben ir en este orden:
1. link
303/407
2. visited
3. focus
4. hover
5. active
Un truco mnemotcnico para recordarlo podra ser: "Los Visitantes Fueron Hasta All". Si creis que no os
acordaris de esta frase, deberis recordar el orden de las propiedades de memoria o copiar y pegar el
bloque de cdigo que se muestra a continuacin.
Los estilos de los diferentes estados de los enlaces se aplican utilizando sus "pseudoclases" (:link :visited
:focus :hover :active) que se adjuntan al selector de elemento de enlace, a. Por lo tanto, el CSS inicial
debera ser el siguiente:
a:link{}
a:visited{}
a:focus{}
a:hover{}
a:active{}
Si queris definir una regla de CSS para todos los enlaces en todos los estados, podis aplicar el estilo a
directamente. Slo debis acordaros de colocar primero la regla genrica para mantener el orden:
a {}
a:link{}
a:visited{}
a:focus{}
a:hover{}
a:active{}
Eso va muy bien si tenis pensado sustituir el subrayado por defecto por un borde inferior, que es lo que se
suele hacer para obtener un mejor control visual del estilo.
Controlar las opciones por defecto
Por defecto, la mayora de los navegadores establecen que todos los enlaces estn subrayados y los enlaces
en estado "seleccionado" tienen un contorno, como se puede ver en la figura 22:
Figura 22. De izquierda a derecha: los estilos por defecto de "seleccionado" de
Opera 9, Firefox 2 e IE 7
Si queris sustituir estos estilos por otros, podis cambiar o desactivar estos valores predeterminados.
Subrayados
El subrayado (underline) se define mediante la propiedad text-decoration:
a {
}
Podis desactivar el subrayado estableciendo la propiedad en none:
a {
}
304/407
Incluso si mantenis el estilo del subrayado, puede que os resulte ms fcil desactivar text-decoration y
utilizar border-bottom para establecer un subrayado falso. En el ejemplo que se muestra ms adelante lo
veremos ms detenidamente.
Contorno
El contorno del estado "seleccionado" se controla con la propiedad outline. El contorno es muy parecido a
un borde, pero no ocupa espacio ni provoca que la pgina refluya cuando aparece (tened en cuenta que IE 7
y versiones anteriores no lo soportan). La manera ms fcil de controlar el contorno es con la propiedad de
abreviacin:
a:focus{
outline: thick solid #000;
}
Este ejemplo se representara ms o menos como se ve en la figura 23:
Figura 23. Representacin de ejemplo de un contorno negro y grueso
Si tenis dudas sobre qu hacer con el contorno, limitaos a dejarlo en la forma predeterminada por el
navegador.
32.2.6. Ejemplo: recreacin de las opciones por defecto de Netscape
Para dar un ejemplo fcil de estilo de los enlaces, recrearemos las opciones por defecto de Netscape, es
decir, el azul, el morado y el rojo. Mantendremos el subrayado, pero haremos que el estado activo se
muestre en cursiva. Aumentaremos el tamao del texto slo para ver cmo queda y estableceremos un fondo
blanco para la pgina.
body{
background: #fff;
color: #000;
font-size: 2em;
}
a {
}
a:link{
color: #0000CC;
}
a:visited{
color: #6D006D;
}
a:focus{
color: #CC0000;
}
a:hover{
color: #CC0000;
}
a:active{
color: #CC0000;
font-style: italic;
}
305/407
Figura 24. Recreacin de las opciones por defecto de Netscape
Subrayados falsos con border-bottom
Muchos diseadores han observado que el subrayado es un poco demasiado grueso y tapa las astas
descendentes de las letras minsculas, es decir, la lnea del subrayado cruza la parte inferior de las letras
"g", "j", "p", e "y", tal como se muestra la figura 25:
Figura 25. La lnea del subrayado corta las astas descendentes de las
minsculas.
Pongamos por caso que la persona que se encarga del diseo de la pgina est de acuerdo y le gustara
que la lnea del subrayado fuera ms fina y que no tocara el texto. Para cumplir este requisito, que es muy
habitual, utilizaremos un borde en lugar de un subrayado de manera que quede como la figura 26:
Figura 26. Utilizar un borde en vez del subrayado queda ms bonito.
Primero, desactivad el subrayado para todos los estados de enlace y, despus, estableced un borde inferior
que encaje con el color del enlace en cada estado.
body{
background: #fff;
color: #000;
font-size: 2em;
line-height: 2em;
}
a {
}
a:link{
color: #00c;
border-bottom: 1px solid #00c;
}
a:visited{
color: #6D006D;
border-bottom: 1px solid #6D006D;
}
a:focus{
color: #c00;
border-bottom: 1px solid #c00;
}
a:hover{
color: #c00;
}
a:active{
color: #c00;
font-style: italic;
}
306/407
Figura 27. Enlaces con el subrayado falso aplicado
Si utilizis el mtodo del borde falso, id con cuidado de tener suficiente line-height (altura de lnea)
establecido para que el subrayado no choque con el texto de la lnea siguiente.
Estilos no basados en el color
Como el ejemplo que hemos utilizado hasta ahora se basa totalmente en los colores para distinguir cuatro de
los cinco estados de los enlaces, deberamos dar el paso siguiente y cambiar el borde inferior para los
estados "visitado", "seleccionado" y "por encima". Demos a los enlaces visitados un borde de puntos y a los
enlaces "por encima" y "seleccionado" un borde discontinuo:
body{
background: #fff;
color: #000;
font-size: 2em;
}
a {
}
a:link{
color: #00c;
border-bottom: 1px solid #00c;
}
a:visited{
color: #6D006D;
border-bottom: 1px dotted #6D006D;
}
a:focus{
color: #c00;
border-bottom: 1px dashed #c00;
}
a:hover{
color: #c00;
border-bottom: 1px dashed #c00;
}
a:active{
color: #c00;
font-style: italic;
}
De este modo, conseguiremos un resultado parecido al de la figura 28:
Figura 28. Cambiar el estilo de borde para cada estado de enlace
Este mtodo, si se aceptan "focus" y "hover" como estados con estilos equivalentes, provoca que los estados
de enlace se distingan con ms factores adems del color. Incluso si tuvierais que ver estos enlaces en
blanco y negro, podrais identificar los diferentes estados de enlace tal como se muestra la figura 29:
Figura 29. Ahora los estados de enlace pueden distinguirse aunque estn en
blanco y negro.
32.2.7. Iconos en enlaces
Algunos sitios web utilizan iconos y smbolos para aadir informacin sobre los enlaces. Por ejemplo,
algunas pginas utilizan una flecha para indicar que un enlace conduce a un sitio externo, o utilizan una
307/407
marca de aprobado para indicar que el enlace ya se ha visitado.
Estos efectos son muy fciles de aplicar con imgenes de fondo, como se muestra en la figura 30:
Figura 30. Ejemplo de enlaces con iconos distintivos
Para aadir un icono de flecha a los enlaces externos, podis aadir la clase external a la etiqueta del enlace
(link):
<a href="http://example.com/" class="external">external link</a>
Despus, en vuestra hoja de estilo, aplicad una imagen de fondo para esta clase sin olvidaros aadir el
relleno para que quepa la imagen:
a.external {
background: #fff url("icon-external.gif") center right no-repeat;
padding-right: 30px;
}
Este ejemplo aplicara el icono a todos los casos de enlaces visitados, a todos los estados. Si quisierais
limitar el icono slo a los enlaces externos no visitados, podis combinar las clases y las pseudoclases del
estado de enlace en el selector.
a.external:link{
background: #fff url("icon-external.gif") center right no-repeat;
padding-right: 30px;
}
Combinar clases y estados proporciona una amplia gama de posibilidades creativas para aplicar a los
enlaces. Mientras recordis comprobar los colores, el nico lmite a partir de aqu es vuestra imaginacin.
32.3. Combinarlo todo: un sencillo men de navegacin
Para demostrar una manera de combinar las listas y los enlaces, el zip de ejemplos incluye un submen
desplegable de navegacin sencillo, como se ve en la figura 31. Los submens desplegables son un sistema
de navegacin muy habitual.
Figura 31. Captura de pantalla del submen de ejemplo
Ved los ejemplos en: "Simple flyout navigation menu"
Resumen
Para un diseador web es esencial saber muy bien cmo aplicar estilos a listas y enlaces porque se utilizan
por todas partes. Se suelen combinar para crear la navegacin por el sitio, y un estilo claro de los enlaces es
vital para que un sitio web sea fcil de utilizar. Unos estilos de enlaces mal hechos pueden confundir mucho
a todo el mundo e incluso pueden hacer que determinadas personas no puedan utilizar el sitio.
308/407
Preguntas de repaso
1. Cmo se pueden elegir los estilos bsicos de las listas, como por ejemplo picos cuadrados o nmeros
romanos, en una lista ordenada?
2. Qu es un sprite de imagen y para qu se puede utilizar?
3. Por qu el contraste de los colores es importante y cmo se puede garantizar que los colores de los
enlaces sean de colores adecuados?
4. Cul es el orden correcto para aplicar estilos a cada estado de enlace?
Bibliografa
WCAG Samurai Errata for WCAG 1.0, que hace referencia especficamente al punto Guideline 2. Don't
rely on colour alone.
"Type and Colour" (un captulo de Building Accessible Websites, de Joe Clark)
"Juicy Studio: Highlighting Links"
"Max Design-Simple, accessible external links"
"Resource Center-Contrast Analyser 2.0 (Paciello Group)"
"A List Apart: CSS Sprites : Image Slicing's Kiss of Death"
: :
309/407
CSS - Estilos de las tablas
CSS
Estilos de las tablas
Accesibilidad : : :
Ben Buchanan. 26 de septiembre del 2008 Publicado en: fondo, cebra, error, bordes, alinear
En ocasiones, parece que en el mundo actual del desarrollo web las tablas estn algo marginadas. Se hace
tanto caso a la norma de "no utilicis tablas!" que a veces la gente se olvida de que en realidad la frase es:
"No utilicis tablas para la composicin". Las tablas van muy bien para su objetivo original, que es mostrar
datos tabulares. Por ello es til saber cmo aplicarles estilos correctamente.
Esta gua se centra en cmo aplicar CSS de manera eficaz para obtener estilos de tablas de datos claros y
legibles. Adems, tambin hablaremos de algunos requisitos habituales del diseo de tablas.
Nota
Puede que os resulte til descargaros los ejemplos de cdigo para las tablas que se
muestran en este apartado desde el archivo "table-examples.zip", de manera que
podis ir siguiendo el apartado.
Descargad los ejemplos en: "table-examples.zip"
33.1. Estructura de las tablas
33.2. Conceptos bsicos
33.2.1. Anchura de tabla y de celda
33.2.2. Alineacin del texto
33.2.3. Bordes
33.2.4. Relleno
33.2.5. Colocacin del caption
33.2.6. Fondo
33.2.7. Arreglar el IE con estilos condicionales
33.2.8. Un diseo sencillo
33.3. Variaciones habituales
33.3.1. Aplicar lneas de cebra
33.3.2. Parrillas incompletas
33.3.3. Parrillas interiores
Parrillas interiores con: lastchild
33.4. Dos errores comunes
33.4.1. Error de superposicin de los bordes
33.4.2. Error de margen/caption
Resumen
Preguntas de repaso
33.1. Estructura de las tablas
Antes de centrarnos en el CSS, fijmonos en los elementos estructurales bsicos de las tablas a las que
deberis aplicar estilos:
Encabezamientos de las tablas.
Celdas de datos de las tablas.
Ttulos de las tablas.
Cuando los usuarios de vuestro sitio lean vuestra tabla, deberan poder entender y seguir fcilmente su
estructura. La manera ms sencilla de conseguirlo es utilizar bordes, colores de fondo o ambos.
No es necesario que sigis estas convenciones estilsticas, pero s deberais garantizar que existe una
310/407
diferencia clara entre las celdas th y td; adems, el caption (ttulo) debera estar asociado claramente con la
tabla y diferenciado del resto del texto de la pgina.
33.2. Conceptos bsicos
Fijaos en cmo se representa esta tabla sin estilo:
Compiled in 2008 by Ms Jen
Ved tambin
Podis ver el mismo ejemplo en el apartado 19 del mdulo "El texto central de HTML".
Los datos son comprensibles, pero hay que esforzarse un poco para ver cmo va todo. Aadmosle unos
estilos para hacer que sea ms fcil de leer.
33.2.1. Anchura de tabla y de celda
La primera decisin que hay que tomar es qu anchura debe tener la tabla. La opcin por defecto del
navegador es la misma que establecer table {width: auto; }, que da como resultado que la tabla se
extienda a lo ancho del contenido. Esto, en general, queda desordenado.
Pongamos por caso que nuestra tabla debe ir en una columna de contenido de 600 pxeles de anchura.
Especificamos que la tabla se ample hasta el 100% de la anchura disponible para aprovechar mejor el
espacio. Como hay cuatro columnas, establezcamos tambin la anchura de las celdas de tabla en un 25%
cada una.
table {
width: 100%;
}
th, td {
width: 25%;
}
De hecho, podis limitaros a establecer la anchura para th y esto definir la anchura de todas las columnas;
aun as, siempre va bien ser riguroso. Este estilo tan sencillo dar el resultado que se ve en la figura 1:
Figura 1. La tabla de ejemplo con una configuracin sencilla de anchura
Ahora las celdas quedan con una anchura igualada. Ms adelante ya veremos cmo especificar anchos
desiguales, pero de momento seguimos con el siguiente paso.
33.2.2. Alineacin del texto
La tabla an es un poco confusa de leer, de manera que vamos a especificar que la alineacin del texto sea
un poco ms clara. La norma adicional que se muestra a continuacin alinear a la izquierda los
encabezamientos para que encajen con el contenido (por defecto, los navegadores centran los ttulos de las
tablas):
311/407
table {
width: 100%;
}
th, td {
width: 25%;
text-align: left;
}
As se clarifica un poco la tabla, como se puede ver en la figura 2:
Figura 2. Tabla con alineacin a la izquierda
Ahora mismo, todas las celdas estn alineadas verticalmente en el centro. Si lo prefers, podis definir que el
texto se alinee en la parte superior o inferior de la celda, o cualquier posicin de vertical-align que queris.
Las siguientes reglas establecen que el texto se alinee en la parte superior.
table {
width: 100%;
}
th, td {
width: 25%;
text-align: left;
vertical-align: top;
}
Ahora la tabla queda como se ve en la figura 3:
Figura 3. La tabla con alineacin vertical
Fijaos en cmo todos los ttulos de la fila superior quedan tocando arriba aunque "Last Major Eruption" queda
en dos lneas.
33.2.3. Bordes
La tabla ya queda un poco mejor, pero an cuesta un poco leer cada lnea. Ahora aplicaremos algunos
bordes para hacer que todo sea ms fcil de leer. Debis establecer los bordes de manera independiente
para cada parte de la tabla y despus decidir cmo se deberan combinar.
Para mostraros dnde quedarn los bordes, la figura 4 muestra diferentes bordes para table (solid black,
negro slido), caption (solid grey, gris slido), th (dashed blue, lnea discontinua azul) y td (dotted red, lnea
de puntos roja):
312/407
Figura 4. Muestra de los diferentes bordes en una tabla
Fijaos en cmo el borde de la table recorre el contorno exterior de todas las celdas de encabezamiento y de
datos y despus pasa entre las celdas y el ttulo de la tabla. Tambin podis ver que, por defecto, los bordes
th y td se distancian un poco el uno del otro.
Pasemos ahora a otro estilo de tabla. Podis crear un borde negro sencillo para la tabla y las celdas
mediante la propiedad border (borde). Esto se hace con las reglas siguientes:
table {
width: 100%;
}
th, td {
width: 25%;
text-align: left;
}
y da como resultado lo que se muestra en la figura 4b:
Figura 4b. Tabla con bordes negros sencillos
Esto provoca que las filas sean ms fciles de leer, pero puede que no os guste el espacio que queda entre
las celdas. Hay dos maneras de cambiarlo.
Primero, podis limitaros a cerrar los huecos utilizando la propiedad border-spacing (espaciado de bordes),
por ejemplo as:
table {
width: 100%;
}
th, td {
width: 25%;
text-align: left;
border-spacing: 0;
}
De esta manera, los bordes se tocarn en lugar de quedar separados. As se cambia el borde de 1 pxel por
313/407
un borde de 2 pxeles, como se ve en la figura 5:
Figura 5. Tabla sin espaciado entre bordes que produce un efecto de borde de
2 pxeles.
Tambin podis aumentar el espacio entre las celdas utilizando border-spacing, aunque hay que tener en
cuenta que esta propiedad no funciona con Internet Explorer.
Si queris mantener el efecto de borde de 1 pxel, necesitaris definir la tabla de manera que los bordes se
"colapsen" los unos sobre los otros. Podis conseguirlo utilizando la propiedad border-collapse
(superposicin de bordes) en lugar de la de border-spacing (espaciado de bordes):
table {
width: 100%;
}
th, td {
width: 25%;
text-align: left;
}
De esta manera, obtendris una tabla con un borde de 1 pxel como se observa en la figura 6:
Figura 6. Tabla con border-collapse (superposicin de bordes) definido para
superponerse y as reducir el borde en 1 pxel
Cuando definis que los bordes se superpongan, debis tener en cuenta que esto os puede causar
problemas si tenis estilos de bordes diferentes aplicados a celdas adyacentes. Cuando los estilos de bordes
diferentes se superponen unos sobre otros, entrarn en "conflicto" entre ellos. Esto se soluciona mediante las
reglas de resolucin de conflictos de bordes de tabla de la especificacin de CSS2 del W3C, que determinan
qu estilo "gana" cuando se superponen.
33.2.4. Relleno
Ahora que ya habis aplicado bordes en las celdas, puede que queris aadir un poco de espacio en blanco
a las celdas del ttulo y de la tabla. Para hacerlo, slo debis utilizar el padding (relleno).
table {
width: 100%;
}
th, td {
width: 25%;
314/407
text-align: left;
padding: 0.3em;
}
caption {
padding: 0.3em;
}
Esto hace que el texto "respire" un poco, como se ve en la figura 7:
Figura 7. Tabla con relleno aplicado a todas las celdas
33.2.5. Colocacin del caption
Hasta ahora, el caption ha estado siempre en la parte superior de la tabla. Sin embargo, puede que queris
moverlo a otro lugar. Por desgracia, en IE no se puede hacer, pero en todos los dems navegadores podis
cambiar la posicin del caption utilizando la propiedad caption-side (lado del ttulo). Las opciones posibles
son: top (superior), bottom (inferior), left (izquierda) y right (derecha). Ahora lo pondremos en la parte
inferior:
table {
width: 100%;
}
th, td {
width: 25%;
text-align: left;
padding: 0.3em;
caption-side: bottom;
}
caption {
padding: 0.3em;
}
En la figura 8 se muestra el resultado:
Figura 8. Tabla con el caption movido a la parte inferior
315/407
Si queris cambiar la posicin del caption, recordad que ningn estilo especfico de lado funcionar con IE.
Por ejemplo, si queris aadir tres bordes para hacer que el ttulo "se una" a la parte inferior de la tabla, en
IE no quedar as porque el ttulo seguir estando en la parte superior. Deberis utilizar comentarios
condicionales para reaplicar el estilo a la tabla para IE.
Ved tambin
Para saber ms, podis ver tambin el subapartado 33.2.7.
Para el resto de ejemplos, dejaremos el caption en la parte superior.
33.2.6. Fondo
Otra manera muy sencilla de aplicar estilos a las tablas es aadir colores e imgenes de fondo. Esto se hace
con la propiedad background (fondo), aunque debis tener presente que las diferentes partes de la tabla
actuarn como "capas" una encima de la otra. La especificacin CSS2 explica los efectos de capas de fondo
bastante detalladamente, pero en pocas palabras: los fondos se taparn los unos a los otros en este orden:
1. tabla (que queda "al fondo del todo" o "detrs de todo"),
2. grupos de columnas,
3. columnas,
4. grupos de filas,
5. filas,
6. celdas (por "encima" o "delante" de todo, es decir, que su fondo tapa a todos los dems).
Por lo tanto, si establecis un fondo para la tabla y un color diferente para las celdas, el fondo de la celda
tapar el fondo de la tabla. Si habis establecido los bordes en collapse (superposicin), el fondo de la tabla
no se ver. No obstante, si habis establecido border-collapse en separate, el fondo de la tabla se ver entre
los bordes.
Nota
Fijaos en que el concepto de elementos diferentes uno encima del otro en la pgina es
controlable; podis controlar a qu altura de la "pila" queda un elemento en relacin
con los dems cambiando su propiedad z-index.
Ved tambin
En el apartado 37 de este mdulo aprenderis ms cosas sobre z-index.
Imaginaos que defins la tabla de manera que tenga un fondo rojo y las celdas con fondo blanco. Entre la
separacin de las celdas se ve el rojo, pero las celdas siguen siendo blancas, como se muestra en la figura
9:
Figura 9. Tabla que demuestra cmo el elemento de fondo de tabla rojo se ve
entre los fondos blancos de las celdas.
Tambin podis utilizar una imagen de fondo. Por ejemplo, si queris tener una gradacin que se vea entre
316/407
las celdas, podrais definir th y td con fondos blancos, pero establecer el fondo de table con una gradacin
de colores:
table {
border-collapse: separate;
border-spacing: 5px;
background: #000 url("gradient.gif") bottom left repeat-x;
color: #fff;
}
td, th {
background: #fff;
color: #000;
}
Fijaos en que el color de fondo se establece en negro, que llena el espacio en la parte superior donde acaba
la gradacin cromtica (siempre debis tener en cuenta que la tabla puede ser ms alta que la imagen de
fondo). El color de delante del todo se establece en blanco por si en algn momento estos colores por
defecto se ven a travs del contenido de las celdas. En general, los estilos de las celdas cancelarn la
configuracin del color del texto del estilo de table {}, pero siempre se deberan definir colores de fondo y
de primer plano que hagan contraste.
Estos estilos crean una tabla que quedara como en la figura 10 en la mayora de los navegadores.
Figura 10. Tabla con una imagen de fondo con gradacin de colores que se ve
entre las celdas
Por defecto, con IE no se ver tanto el fondo porque no reconoce border-spacing. Sin embargo, se consigue
el mismo efecto, tal como se observa en la figura 11:
Figura 11. IE proporciona menos espacio entre bordes.
Dependiendo de las circunstancias, puede que os conformis con esta diferencia de representacin entre
navegadores. Pero, lgicamente, eso no siempre es posible, por ejemplo cuando un cliente especifica que
quiere que un diseo quede exactamente igual en todos los navegadores.
33.2.7. Arreglar el IE con estilos condicionales
Existe una manera de solucionar los problemas de IE que hemos mencionado antes. Hay que hurgar un
poco y requiere una hoja de estilo extra, pero funciona. Podis utilizar una expression para hacer el espacio
ms ancho y despus cargar esta expresin mediante comentarios condicionales. La sintaxis de la expresin
317/407
es sta:
table {
border-collapse: expression("separate", cellSpacing = "5px");
}
Este CSS slo sirve para IE, de manera que slo ste lo debe poder aplicar. La expresin tambin invalidar
la hoja de estilo, de manera que los desarrolladores prefieren aislar las manipulaciones de IE en una hoja de
estilo aparte que slo cargue IE.
Para hacerlo, cread una hoja de estilo nuevo que se llame ie-only.css ("slo IE") y enlazadla dentro de
comentarios condicionales:

Fijaos en que [if lte IE 7] significa "si menos que o igual a la versin 7 de IE". Esto revela el cdigo en IE
7 y en todas las versiones anteriores de IE, pero el comentario de HTML que lo rodea oculta el cdigo a
todos los dems navegadores. Podis ajustarlo a cualquier versin de IE que necesitis, por ejemplo, si se
trata de la versin IE6 y anteriores, utilizad: [if lte IE 6].
En vuestra hoja de estilo principal, estableced el estilo normal:
table {
border-spacing: 5px;
background: #000 url("gradient.gif") bottom left repeat-x;
}
y entonces estableced el estilo nicamente para IE como ie-only.css:
table {
border-collapse: expression("separate", cellSpacing = "5px");
}
As, IE mostrar una tabla con espacios anchos entre las celdas. Slo debis acordaros de conservar la
configuracin de anchura adicional. Si actualizis vuestra hoja de estilo principal, tambin deberis actualizar
ie-only.css. Como es lgico, los comentarios condicionales permiten hacer muchas cosas ms aparte de
aplicar estilos a las tablas, porque la hoja de estilo extra puede incluir todo el CSS que necesitis para
arreglar errores del IE.
33.2.8. Un diseo sencillo
La mayora de los diseos utilizan combinaciones sencillas de fondo. Por lo tanto, ahora aplicaremos a los
encabezamientos de la tabla un fondo gris y cambiaremos el ttulo de manera que sea texto blanco sobre
fondo negro:
table {
width: 100%;
}
th, td {
width: 25%;
text-align: left;
padding: 0.3em;
caption-side: bottom;
}
caption {
318/407
padding: 0.3em;
color: #fff;
background: #000;
}
th {
background: #eee;
}
Esto queda como se ve en la figura 12:
Figura 12. Tabla con ttulo de texto blanco sobre fondo negro y fondo gris claro
en las celdas de encabezado
33.3. Variaciones habituales
En este subapartado nos centraremos en algunos arquetipos de diseo habituales que veris muchas veces
en muchas tablas de la web.
33.3.1. Aplicar lneas de cebra
Algo que se suele pedir mucho en relacin con las tablas es crear filas de colores alternos. Se suelen
denominar "lneas de cebra". Aunque existe cierta polmica sobre si las lneas de cebra ayudan o no
realmente al lector, son un estilo muy popular. En la figura 13 se muestra un ejemplo:
Figura 13. Tabla con "lneas de cebra", filas alternativas de color blanco o gris
claro
La manera ms fcil de aplicar el efecto de las lneas de cebra es aadir una clase para alternar filas de la
tabla y despus utilizar un selector de CSS contextual para aplicar estilos en las celdas de estas filas. Antes
que nada, se aaden las clases "par" (odd) e "impar" (even) a las filas de la tabla, as:
...
<tr class="odd">
...
<tr class="even">
...
Podis saltaros la fila del ttulo porque ya tiene un estilo propio. Entonces aadid una clase contextual para
definir el fondo de todas las celdas de las filas de la clase impar (odd).
319/407
.odd th, .odd td {
background: #eee;
}
sta es la manera ms sencilla de aadir lneas de cebra a una tabla de HTML que funcione en todos los
navegadores, pero no es del todo perfecto porque, qu sucede si despus aads una fila a la tabla? Pues
que deberais desplazar todos los nombres de clase odd y even para que todo quedara bien.
Hay dos opciones alternativas:
Podis aadir las clases mediante JavaScript no obstrusivo como se demuestra en A List Apart: Zebra
Tables. La mayora de los frameworks de JavaScript tambin tienen un mtodo adecuado: Zebra Table
Showdown compara toda una gama de implementaciones.
Podis utilizar el selector de CSS3 :nthchild, pero an no lo reconocen todos los navegadores. De
todos modos, con el paso del tiempo eso ir mejorando.
Podis encontrar ms informacin sobre las lneas de cebra con nth-child en un apartado de
dev.opera.com.
33.3.2. Parrillas incompletas
Algunos diseos responden bien con parrilas de aspecto ms abierto y menos estructurado. Una variante
muy sencilla consiste en eliminar los bordes verticales y dejar que el fondo llene el ttulo, como en la figura
14:
Figura 14. Tabla con bordes gris claro slo por los extremos y por debajo de
cada celda
El CSS para conseguir este efecto es:
table {
width: 100%;
text-align: left;
margin: 0 0 1em 0;
caption-side: top;
}
caption, td, th {
padding: 0.3em;
}
th, td {
width: 25%;
}
caption {
font-weight: bold;
font-style: italic;
}
Tambin podis ir un paso ms all y eliminar todos los bordes excepto el borde superior e inferior para dar
un poco ms de definicin a la tabla central. Podis ver la figura 15:
320/407
Figura 15. Tabla con bordes slo en la parte superior e inferior de la tabla
central
El CSS para conseguir este efecto es el siguiente:
table {
width: 100%;
text-align: left;
margin: 0 0 1em 0;
caption-side: top;
}
caption, td, th {
padding: 0.3em;
}
tbody {
}
tbody th, tfoot th {
border: 0;
}
th.name {
width: 25%;
}
th.location {
width: 20%;
}
th.lasteruption {
width: 30%;
}
th.eruptiontype {
width: 25%;
}
tfoot {
text-align: center;
color: #555;
font-size: 0.8em;
}
33.3.3. Parrillas interiores
Puede que en ocasiones os interese eliminar el borde exterior pero conservar la parrilla interior de bordes
como en la figura 16:
321/407
Figura 16. Tabla con un diseo de parrilla interior
Para aplicar este efecto a todos los navegadores actuales, debis aadir una clase a las celdas th y td que
aparecen en el ltimo lugar de cada fila, as:
...
<tr>
<th scope="col">Volcano Name</th>
<th scope="col">Location</th>
<th scope="col">Last Major Eruption</th>
<th scope="col" class="last">Type of Eruption</th>
</tr>
...
Entonces utilizamos la clase para eliminar el borde derecho de estas celdas. El CSS completo es el
siguiente:
table {
width: 100%;
text-align: left;
margin: 0 0 1em 0;
caption-side: top;
}
caption, td, th {
padding: 0.3em;
}
th, td {
border-right: 1px solid #000;
}
th.last, td.last {
border-right: 0;
}
tfoot th, tfoot td {
border-bottom: 0;
text-align: center;
}
th {
width: 25%;
}
Parrillas interiores con :lastchild
Cuando mejore la compatibilidad de los navegadores, podremos utilizar el pseudoselector :lastchild para
conseguir este efecto sin clases. El CSS sera:
table {
width: 100%;
text-align: left;
margin: 0 0 1em 0;
322/407
caption-side: top;
}
caption, td, th {
padding: 0.3em;
}
th, td {
border-right: 1px solid #000;
}
th:lastchild, td:lastchild {
border-right: 0;
}
th {
width: 25%;
}
Esto ya funciona actualmente en las ltimas versiones de Opera, Firefox y Safari.
33.4. Dos errores comunes
En este ltimo subapartado hablaremos de dos errores realmente muy habituales para que estis preparados
cuando os los encontris. Tienen que ver con los bordes y los ttulos.
33.4.1. Error de superposicin de los bordes
Cuando definis la tabla con border-collapse: collapse; descubriris que Firefox y Safari no muestran
correctamente la anchura de los elementos de la tabla. Por ejemplo, si establecis un borde de 1 pxel para
la tabla, las celdas y el ttulo, Firefox mostrar el ttulo 1 pxel ms corto por el lado izquierdo, como se ve en
la figura 17:
Figura 17. El error de border-collapse afecta a Firefox y Safari.
Safari hace lo mismo, pero en el lado derecho. Este error se basa en una cuestin de redondeo que se
reduce al problema de cmo representar "medio pxel". Se podra afirmar que no se trata de un error per se,
pero los navegadores no estn de acuerdo, de manera que en la prctica s que se trata de un error.
Cmo se puede solucionar? Si queris utilizar un borde de 1 pxel y un fondo de ttulo, no hay ninguna otra
solucin aparte de aceptarlo. Es una diferencia muy pequea y no se trata de un problema grave. Es decir, la
tabla sigue siendo perfectamente legible. Por lo tanto, mucha gente opta por aceptar las diferencias entre
navegadores. La web tiene estas cosas.
Si no os importa utilizar un borde ms grande, como por ejemplo de 2 pxeles, podis establecer un borde de
1 pxel en la tabla, las celdas y el ttulo y despus definir la tabla para que tenga los bordes separados y
aplicar un espacio de cero entre ellas.
table {
border-spacing: 0;
}
th, td, caption {
}
323/407
En el caso de Firefox, como mnimo los bordes de 1 pxel se suman para crear el borde representado de 2
pxeles que queremos obtener, de manera que nos ahorramos el problema del redondeo. El Safari, en
cambio, sigue dejando un espacio.
Por otra parte, podis evitar el problema si no aplicis borde ni color de fondo al ttulo. El problema no
desaparecer, pero no se notar. Probablemente, sta es la solucin ms fcil y efectiva.
33.4.2. Error de margen/caption
Si utilizis una caption y establecis un margen en table (tabla), debis tener en cuenta que puede que
Firefox y Safari dispongan el margen de la tabla entre las celdas de la tabla y el ttulo.
Para evitar que suceda esto en Firefox, podis definir el margen en tres lados de la tabla, definir
explcitamente el caption-side (lado en el que aparece la caption) y despus aadir el cuarto margen en la
caption. Por desgracia, en el caso de Safari, esta solucin causar error. Por lo tanto, no se trata realmente
de una solucin a no ser que estis dispuestos a tolerar el error en Firefox o Safari.
La nica manera de evitar un problema en Firefox y, a la vez, en Safari, es establecer un margen cero al lado
de la caption. Por ejemplo, si el ttulo se encuentra en la parte superior, podis establecer el margen en el
lado de la derecha, abajo y en el lado izquierdo o slo abajo. Esto puede que funcione si defins todos los
mrgenes en el mismo lado de los elementos de contenido, de manera que no sea necesario que el margen
cree espacios entre la tabla y el contenido adyacente.
Resumen
Ya deberais dominar las opciones de estilo bsicas para tablas. Hay ciertos lmites que imponen las
inconsistencias de los navegadores, pero en general deberais poder crear tablas claras y legibles sin ningn
problema. Slo debis fijaros bien en los bordes, dar al texto un poco de espacio para que pueda "respirar" e
ir con cuidado con los fondos.
Preguntas de repaso
1. Cmo se controla el espacio entre la tabla y los bordes de las celdas?
2. Qu sucede cuando table (tabla) tiene un color de fondo, las celdas th y td tienen otro color de fondo
y border-collapse (superposicin de bordes) est establecido en collapse (superposicin)?
3. Cmo pueden establecerse anchos diferentes para cada columna?
W3C: CSS2 Tables, sobre todo el apartado que habla sobre las capas de fondo de tabla de CSS2.
"A Dao of Web Design - let the web be the web". A List Apart. Un artculo clsico que explica por qu
una diferencia de 1 pxel entre navegadores no es realmente importante.
"Zebra Tables" y "Zebra striping: Does it Really Help?". En: A List Apart.
"Zebra striping tables with CSS3"
"Supporting IE with conditional comments"
"A CSS styled table" y "A CSS styled calendar". En: Veerle's blog
"CSS Table Gallery" muestra una serie de diseos para tablas (aunque hay que tener en cuenta que
muchas no cumplen las recomendaciones de contraste de color del W3C).
: :
324/407
CSS - Diseo, composicin y presentacin de formularios con CSS
CSS
Diseo, composicin y presentacin de formularios con
CSS
Accesibilidad : : :
Ben Henick. 26 de septiembre del 2008 Publicado en: alineacin, seleccionar, tercios, composicin, cuadrculas
El apartado de formularios HTML os present los conceptos bsicos de creacin de formularios y estilos.
Este apartado contina donde acab el otro y ofrece ms detalles sobre los elementos y estilos de
formulario, as como sobre de qu modo se incluyen los formularios en los diseos de aplicacin web del
mundo real.
Nota
Podis descargaros el fichero de cdigo de ejemplo completo "styling_forms_code.zip"
para que podis jugar con l en vuestro ordenador. Adems, en varios puntos del
apartado se ofrecen enlaces a los ficheros de ejemplo.
Descargad el fichero de cdigo de ejemplo completo en: "Styling forms code examples"
34.1. Conceptos nuevos que presenta este apartado
34.1.1. Sobrecarga de reglas y etiquetas
34.1.2. Elementos de campo de formulario nuevos
34.1.3. Principios del diseo de formularios
34.1.4. La regla de los tercios
34.1.5. Cuadrculas
34.1.6. Capas de soporte de plataforma
34.2. Un formulario de contacto sencillo
34.2.1. Etiquetado
34.2.2. Cambios con respecto al formulario anterior
34.2.3. Defectos aparentes
34.2.4. Campos de formulario nuevos? Qu es eso?
Elegir descripciones: input type="checkbox"
Elegir uno de dos posibles estados mutuamente exclusivos: input type="radio"
Cuando hay demasiadas opciones para elegir: select/option
Agrupar series de controles: fieldset
34.3. De cero hasta un formulario completo
34.3.1. Demostracin 1
34.3.2. Demostracin 1: consideraciones previas
34.3.7. Crear una cuadrcula
Crear la estructura de una cuadrcula en una composicin
Aplicar la cuadrcula a la hoja de estilo
325/407
34.4. Establecer capas de soporte de plataforma
34.5. Composiciones de formulario complejas en la prctica (... en lugar de en teora)
Resumen
Preguntas de repaso
34.1. Conceptos nuevos que presenta este apartado
En este apartado encontraris informacin sobre la implementacin de formularios y la composicin de
interfaces.
34.1.1. Sobrecarga de reglas y etiquetas
Se puede decir que si se utilizan muchas etiquetas class e id, se incumple el principio KISS. Sin embargo,
las composiciones exigentes a menudo provocan conflictos en la cascada, conflictos que se pueden resolver
muy fcilmente aadiendo etiquetas y redactando reglas de hoja de estilo que contengan varios selectores.
Ved tambin
El principio KISS se explica en el apartado 30 de este mdulo.
Las composiciones ms exigentes estn llenas de casos lmite, que es mejor solucionar asignando un id a
los elementos que definen un contexto muy concreto y especial.
34.1.2. Elementos de campo de formulario nuevos
Un formulario efectivo a menudo debe ser algo ms que un conjunto de botones y campos de introduccin
de texto porque es habitual estructurar las respuestas del usuario en trminos de opciones. El HTML
proporciona varias opciones para los diseadores que se encuentren con este requisito.
34.1.3. Principios del diseo de formularios
Los formularios de un sitio web son normalmente puntos centrales para la interaccin con el usuario y la
obtencin de datos. Por lo tanto, suelen ser fundamentales para el xito de una web, que exige disearlos
con todo el cuidado posible.
Los usuarios suelen centrar su atencin en cuatro puntos de un lienzo (y en las lneas que los atraviesan).
Este apartado presenta este fenmeno al lector y ofrece sugerencias para aprovecharlo al mximo con el
CSS.
34.1.5. Cuadrculas
En apartados anteriores ya se ha explicado cmo garantizar unas tipografas consistentes y sacar el mximo
provecho del espacio en blanco. Este apartado va un poco ms all y explica cmo se pueden utilizar las
unidades em para aplicar un grado de consistencia a la composicin que sera imposible sin CSS.
Ved tambin
Podis ver cmo garantizar unas tipografas consistentes en el apartado 29 de este mdulo y cmo sacar el
mximo provecho del espacio en blanco en el apartado 10 del mdulo "Conceptos de diseo web".
34.1.6. Capas de soporte de plataforma
Un requisito habitual de los proyectos comerciales es la representacin casi exacta del diseo aprobado de la
326/407
web en uno o ms navegadores. En este apartado, se tratarn brevemente las causas, los efectos y los
procesos relacionados en el cumplimiento de este requisito.
34.2. Un formulario de contacto sencillo
Los formularios de contacto con los que los visitantes de una web pueden enviar un correo electrnico
directamente a una cuenta de correo son muy habituales por razones obvias: son accesibles a cualquier
persona que tenga una direccin activa de correo electrnico y son fciles de filtrar en una carpeta de correo
especfica.
Ved tambin
Podis ver los formularios de contacto en el apartado 20 del mdulo "El texto central de HTML".
El etiquetado que se ha utilizado en un mdulo anterior sobre formularios utiliza uno de estos formularios,
que se ha decorado mucho.
Ved tambin
Podis ver el apartado 20 del mdulo "El texto central de HTML".
34.2.1. Etiquetado
<form id="contactForm" method="post" action="/cgi-bin/service_email_script.php">
<ul>
<li id="nameField" class="required"><label for="realname">Name:</label>
<input type="text" name="name" value="" class="medium" id="realname" />
<span class="note">required</span></li>
<li id="addressField" class="required"><label for="address">Email:</label>
<input type="text" name="email" value="" class="medium" id="address" />
<span class="note">required</span></li>
<li id="subjectField"><label for="natureOfInquiry">General
subject:</label>
<select name="subject" class="medium" id="natureOfInquiry">
<option value="support">Support</option>
<option value="billing">Accounts & billing</option>
<option value="press">Press</option>
<option value="other_q">Other questions</option>
</select>
</li>
<li id="acctTypeField"><label for="acctNone">Account type:</label>
<fieldset>
<label for="acctGold">Gold</label><input type="radio"
name="acct_type" id="goldAcct" class="rInput" />
<label for="acctSilver">Silver</label><input type="radio"
name="acct_type" id="acctSilver" class="rInput" />
<label for="acctBronze">Bronze</label><input type="radio"
name="acct_type" id="acctBronze" class="rInput" />
<label for="acctNone">None</label><input type="radio" name="acct_type"
id="acctNone" class="rInput" checked="checked" />
</fieldset>
<span class="note">required</span>
</li>
<li id="availabilityField">
<label for="availability">My account is unavailable:</label>
<input type="checkbox" name="is_down" id="availability"
class="rInput" /></li>
<li id="messageField"><label for="messageBody">Comments:</label>
<textarea name="comments" cols="32" rows="8" class="long"
id="messageBody"></textarea></li>
<li class="submitField"><input type="submit" value="Send"
class="submitButton" /></li>
327/407
</ul>
</form>
34.2.2. Cambios con respecto al formulario anterior
Adems de incluir varios elementos nuevos, se han aadido algunas clases e ID al etiquetado a las que se
puede hacer referencia desde la hoja de estilo. De esta manera, se puede hacer referencia a cada
formulario, pareja de campo/valor y campo de manera individual sea cual sea el contexto.
Los nuevos identificadores tambin hacen que sea ms fcil que el diseador pueda distinguir los campos
que se deben llenar obligatoriamente de los que no.
Para terminar, hay algunas clases nuevas que ofrecen sugerencias de la cantidad y tipos de informacin que
deberan mostrar los elementos de formulario donde estn adjuntados. Estas clases permiten aplicar detalles
de composicin a elementos arbitrarios mltiples de manera simultnea.
34.2.3. Defectos aparentes
Como se supone que el formulario de demostracin es el contenido principal, la legend (leyenda) utilizada en
formularios anteriores se ha sustituido por un ttulo.
Las leyendas son muy adecuadas en los fieldsets (conjuntos de campos) en vez de las labels o etiquetas
(que pueden identificarse con controles nicos). En este caso, el elemento legend se ha omitido
completamente porque es difcil aplicarle estilos.
Hay que destacar tambin que es mejor colocar las etiquetas "obligatorio" sobre los campos a los que les
corresponda antes que el campo en el cdigo fuente para facilitar las cosas a los usuarios con software de
lector de pantalla. No obstante, la propiedad position (de la que no hablaremos en este apartado) es
necesaria para disponer estos elementos de manera adecuada. Por lo tanto, las etiquetas "obligatorio" se
han colocado despus de sus controles asociados en el cdigo fuente (aunque en el mismo contexto).
34.2.4. Campos de formulario nuevos? Qu es eso?
En el apartado anterior ya se habl de los campos de texto y de los controles de envo. Como ya se ha
mencionado anteriormente, hay varios casos de uso que requieren que el usuario pueda seleccionar una de
dos o tres opciones. Estos elementos se describen brevemente a continuacin:
Elegir descripciones: input type="checkbox"
...
<label for="availability">My account is unavailable:</label>
<input type="checkbox" name="is_down" id="availability" class="rInput" />
Las preguntas de participacin o no participacin suelen gestionarse con uno de estos controles. Otro caso
en el que se utilizan es cuando hay que elegir arbitrariamente entre varias opciones, como, por ejemplo, una
lista de intereses personales.
Elegir uno de dos posibles estados mutuamente exclusivos: input type="radio"
<label for="acctNone">Account type:</label>
<fieldset>
<label for="acctGold">Gold</label><input type="radio"
name="acct_type" id="goldAcct" class="rInput" />
<label for="acctSilver">Silver</label><input type="radio"
name="acct_type" id="acctSilver" class="rInput" />
<label for="acctBronze">Bronze</label><input type="radio"
name="acct_type" id="acctBronze" class="rInput" />
<label for="acctNone">None</label><input type="radio"
name="acct_type" id="acctNone" class="rInput" checked="checked" />
</fieldset>
Un grupo de stos permite presentar varias opciones la una al lado de la otra y de las que slo se puede
elegir una. Un buen ejemplo de caso de uso de un conjunto de controles de radio (eleccin de un elemento
328/407
entre varios) es la asignacin de una nota en una escala de 1 a 5 o de 1 a 10.
Al contrario que otros controles de formulario, los controles de radio no slo permiten sino que, de hecho,
requieren que los controles asociados tengan el mismo name (nombre).
Estos elementos toman su nombre de una interfaz habitual en los aparatos de radio de coche sintonizados
mecnicamente. Al contrario que los canales programables tpicos de los aparatos de sintonizacin digital, los
botones mecnicos de memoria, cuando se pulsan, suelen centrar el receptor en una gama de frecuencias
de la banda que se est sintonizando.
Los controles de checkbox (casilla de seleccin) y radio permiten un atributo checked (comprobado) que, si se
aplica, activa el control por defecto la primera vez que se representa.
Antes de responder a la pregunta de si utilizar controles de radio en lugar de controles de checkbox, hay que
tener en cuenta varios factores. Si queris que el usuario confirme una decisin subjetiva (como por ejemplo
ser miembro de una lista de correo), probablemente sern mejores los controles checkbox. Si prefers que el
usuario elija entre dos opciones objetivas (como, pongamos por caso, el gnero), es mejor utilizar los
controles de radio.
Cuando hay demasiadas opciones para elegir: select/option
...
<label for="natureOfInquiry">General subject:</label>
<select name="subject" class="medium" id="natureOfInquiry">
<option value="support">Support</option>
<option value="billing">Accounts & billing</option>
<option value="press">Press</option>
<option value="other_q">Other questions</option>
</select>
Los elementos select y option ofrecen resultados parecidos a los proporcionados por una serie de controles
de radio, pero ocupan mucho menos espacio. Elegir un elemento select en lugar de una serie de controles
de radio suele ser una cuestin de cmo se utiliza el espacio en la interfaz de usuario; una lista larga de
zonas geogrficas o departamentos en una web de comercio electrnico suele ser ms adecuada para
elementos select, mientras que una serie ms corta de opciones (como s/no, verdad/mentira, gama de
edad, gama de ingresos) debera establecerse como una serie de controles de radio.
Si ponemos a prueba de manera meticulosa nuestra creacin, comprobaremos que el nivel de control motriz
necesario para manipular una lista select es elevado, pero aumenta ligeramente en proporcin con el
nmero de options que incluye. El resultado prctico es que a las listas cortas de opciones mutuamente
exclusivas es mejor aplicarles un formato como una serie de controles radio con labels bien escritas.
Agrupar series de controles: fieldset
La funcin principal del elemento fieldset es asignar un nico contexto a una serie de controles ntimamente
relacionados (controles text para un nmero de telfono, elementos select para una fecha, etc.).
34.3. De cero hasta un formulario completo
Ahora que ya hemos presentado brevemente el material nuevo de este apartado, ha llegado el momento de
ver este material en accin: las doce demostraciones que siguen progresan a travs de varios conceptos de
diseo y retos de aplicar estilos que se pueden encontrar a la hora de crear formularios web.
Se recomienda a los lectores que guarden el material de demostracin en su disco
duro y que hagan pruebas con las reglas de hoja de estilo.
Nota
Estas demostraciones avanzan por orden de cdigo fuente en lugar de por el orden de
creacin de la hoja de estilo. Ms adelante en este apartado se habla de los motivos y
329/407
las implicaciones de esta divergencia.
Si empezamos con una regla como: html {margin: 0; padding: 0; }, el primer paso es configurar el body
(texto central) de la pgina.
body{
margin: 0;
padding: 1.714em;
background-image: url(images/bg_grid.gif);
font-size: 14px;
font-family: Helvetica,Arial,sans-serif;
line-height: 1.714em;
}
Archivo fuente de: "Pgina sin demasiados estilos"
Archivo fuente de: "Pgina con estilos body aplicados"
Cuando el XHTML se sirve con el Content-Type adecuado, para un agente de usuario que lo acepte
como es debido, el margin (margen) y/o padding (relleno) de la pgina por defecto se representan en el
elemento html.
En el resto de casos no descritos en el prrafo anterior, se coloca un canal de 10 pxeles en torno al
permetro de la pgina; Opera ofrece este elemento como valor de padding, pero otros navegadores
populares lo ofrecen (de una manera un poco contraintuitiva) como valor margin. La hoja de estilo de
demostracin normaliza el resultado.
Aunque muchos puristas de la accesibilidad se oponen al valor de tamao de letra de 14 pxeles, es
integral de las propiedades de caja y tipografa que se han especificado en otra parte de la hoja de
estilo, bsicamente denominados en sptimas partes de un em. Al final del apartado se proporciona una
tabla de conversin de fracciones a decimales para aquellos que quieran saber cmo es la aritmtica
utilizada.
Se ha elegido el valor 14 px porque es el tamao ms pequeo de texto central que puede leer casi
todo el mundo con la vista corregida.
Ya que uno de los objetivos de este apartado es demostrar el trabajo que se debe hacer para obtener
una cuadrcula extremadamente consistente, se ha aplicado a la pgina un fondo de cuadrcula en
incrementos de 24 pxeles.
Ahora que hemos hablado de los contenedores de la pgina, los prximos dos pasos modifican o eliminan los
estilos de agente de usuario.
h3 {
margin: 0 0 1.2em 0;
border-bottom: .05em solid rgb(0,96,192);
font-size: 1.429em;
line-height: 1.15em;
}
form {
width: 35.929em;
margin: 0;
}
ul {
margin: 0;
padding: 0;
}
Archivo fuente de: "Aplicar estilo al ttulo principal y eliminar los canales no deseados"
330/407
La progresin del tamao de la letra de los ttulos es diferente en cada plataforma; sin embargo, los
valores predeterminados siempre son una proporcin del valor medium utilizado para el texto de prrafo
sin estilo y, por lo tanto, se heredan a travs de la cascada. El resultado del valor proporcionado debe
cambiar la proporcin predeterminada.
Se considera ptimo utilizar h1 para el primer ttulo de una pgina. En este caso, esta prctica se ignora
porque, en un entorno de produccin comercial, el ttulo del sitio generalmente se encuentra en un h1 de
la pgina y el ttulo de la pgina debera estar ms abajo en la jerarqua de encabezamientos. En
muchos casos, la prominencia del formulario ser igual a la prominencia de otros contenidos o
formularios del mismo documento.
El objetivo de los estilos de h3 es crear una caja de contenido de 24 pxeles de altura con 24 pxeles de
canal justo debajo, de manera que:
(((14 1.429) 1.15) + (20 .05)) 24
14 * 1.429 20; 20 * 1.15 == 23; 20 * .05 == 1;
(20 1.2) = 24
La asignacin de un valor width (anchura) tanto en el form (formulario) como en los objetos de la lista es
necesaria si los elementos se deben justificar adecuadamente sin confiar en el posicionamiento. El valor
utilizado produce un valor esttico de 503 pxeles; la nica discrepancia de pxeles (teniendo en cuenta
una unidad de cuadrcula atmica de 24 pxeles) es un producto de errores producidos por el redondeo
y el antialiasing.
Los estilos predeterminados de agente de usuario para listas varan de un navegador a otro. Internet
Explorer da a cada elemento de la lista un margen izquierdo de 40 pxeles y coloca el smbolo de
entrada de lista en el canal creado, mientras que otros navegadores aplican relleno en la parte izquierda
del bloque de contenido del formulario en general. De la misma manera que las propiedades de
composicin modificadas en la regla body, esta regla est pensada especficamente para normalizar la
presentacin en todos los navegadores.
Pasemos ahora a establecer los contenedores de los elementos del formulario.
li {
clear: both;
height: 1.714em;
margin: 0;
}
fieldset {
height: 1.429em;
margin: 0 0 -.143em 0;
border: 0;
}
Archivo fuente de: "Elementos de la lista de estilo (contenedores de la pareja de etiqueta/valor) y del fieldset"
Si consideramos el formulario como una serie de filas, veremos que es necesario aplicar estilos a la
altura de cada uno para preservar una cuadrcula. Los mrgenes de los elementos de la lista se
establecen a cero de cara a Internet Explorer y por si acaso de cara al resto.
Como a muchos de los elementos del formulario se les aplicarn valores float, a los elementos de la
lista que incluye se les aplica un valor de clear: both para garantizar que cada uno quedar por debajo
de su predecesor automticamente.
Aparte de la eliminacin del margen (que es parte del estilo por defecto del agente de usuario), las
propiedades de composicin del fieldset parecen haberse establecido de manera arbitraria. De hecho,
331/407
se las asign despus de pruebas en todos los navegadores, de las que hablaremos de nuevo
brevemente en las notas adjuntas a la Demostracin 11.
Llegados a este punto, no se han asignado valores display ni float, lo que explica por qu el contenido
del fieldset choca con el siguiente control select.
34.3.7. Crear una cuadrcula
Uno de los puntos ms significantes del buen diseo grfico (y, de paso, del buen diseo de interfaces) es
que los elementos se disponen a intervalos regulares. A estos intervalos se les suele denominar la
cuadrcula (o grid, en ingls).
Como ya se ha mencionado anteriormente, la unidad atmica de cuadrcula del formulario de demostracin
son 24 pxeles cuadrados, pero la composicin coherente va ms all de garantizar que los elementos de
diseo se siten a intervalos pequeos pero regulares. Una cuadrcula realmente efectiva tiene las
caractersticas siguientes:
Los mrgenes de columna se sitan a intervalos consistentes de la cuadrcula en todo el documento.
Las secciones secuenciales de un mismo documento comparten sus mrgenes superiores con los
elementos de columnas adyacentes.
Las ilustraciones de una composicin se recortan o se enmascaran hasta que tienen unas dimensiones
que respetan las anchuras tanto de las columnas como de los intervalos de cuadrcula atmica.
Incluso en los casos en los que el contenido est en una sola columna, puntuado por unos cuantos
elementos float, todos estos ltimos elementos tienen los mismos estndares de tamao y
composicin.
Las composiciones que manifiestan estas caractersticas son ms atractivas y fciles de seguir, lo que
contribuye a que el sitio sea ms usable.
Crear la estructura de una cuadrcula en una composicin
La herramienta que utilizan la mayora de los profesionales para crear composiciones para la web es Adobe
Photoshop, y una de las ventajas que tiene es el fcil acceso a las lneas de cuadrcula que ofrece. Para
visualizar una cuadrcula atmica con Photoshop, se puede seleccionar View (vista) Show (mostrar)
Grid (cuadrcula), con lo que se mostrarn las lneas de la cuadrcula en los intervalos establecidos en
Guides & Grid Preferences (guas y preferencias de cuadrcula).
Superponer guas para elementos como las columnas se consigue seleccionando View (vista) Rulers
(reglas), cambiando a la herramienta Move (mover) y arrastrando el puntero desde la regla como sea
necesario.
Aplicar la cuadrcula a la hoja de estilo
Como se comenta en el apartado de los estilos de texto, y refuerzan algunas de las reglas que se incluyen
en la hoja de estilo de demostracin, la mejor manera de aplicar una cuadrcula atmica en una composicin
es la de confiar en las unidades em. Sin embargo, slo con eso no es suficiente; el especialista en estilos
tambin debe mantener la correccin de las conversiones de fracciones a decimales cuando trata con otros
tamaos de tipografa, canales y mrgenes.
En la hoja de estilo de la demostracin se puede ver otra tcnica para aplicar cuadrculas: la provisin de
etiquetas class (clase) que pueden hacer referencia a varios tamaos de elementos y columnas de un
documento. Cuando se utiliza de manera consistente, estas etiquetas se encargan de casi todo el proceso de
aplicacin de la cuadrcula.
Mantener los elementos alineados en una cuadrcula significa asignar propiedades de composicin en las
etiquetas y controles de formulario.
label {
display: block;
float: left;
332/407
clear: left;
width: 10.286em;
overflow: auto;
padding-right: 1.714em;
text-align: right;
}
input {
height: 1.143em;
border: .071em solid rgb(96,96,96);
padding: .071em;
line-height: 1;
}
Archivo fuente de: "Alinear las dos columnas principales"
Todos los controles de formulario, incluidas las reas de texto y las etiquetas, se representan como
elementos en lnea por defecto.
Para crear una columna izquierda consistente hay que asignar una width a los elementos label; en el
modo "estricto" de representacin, el padding proporcionado posibilita un canal factible entre controles y
etiquetas.
Hacer que tanto las etiquetas como los controles queden a la misma altura contra el mismo margen
hace que el formulario sea fcil de leer. En el tema de la regla de los tercios se trata este hecho y otros
aspectos de la composicin (podis verlo a continuacin).
Llegados a este punto, hay problemas claros con el formulario:
A las labels adjuntadas a los controles radio se les asignan los mismos valores de display y
float que a las dems labels del formulario. En algunos navegadores, junto con los valores
existentes de height y overflow, estos elementos chocan con la siguiente pareja de control y
etiqueta.
En Safari 3, los mrgenes de los controles de texto desaparecen en este desplazamiento. Se
sospecha que es un error de representacin.
Los controles radio parecen estar tocndose sin separacin en el orden del cdigo fuente; esto
sucede porque los controles label que intervienen estn en un contexto de composicin diferente.
Otra curiosidad que vale la pena mencionar es la asignacin de overflow: auto en etiquetas. El
truco de magia que se aplica en este caso puede describirse como una regla: si tenemos un
elemento de bloque dentro de otro, y teniendo en cuenta que slo uno de ellos tiene una height
especificada en unidades estticas o ems que se extienden a un nmero determinado de pxeles,
asignar overflow: auto al otro elemento (lo que no tiene un valor de height) har que se extienda
hasta adquirir la altura del elemento que s tiene un valor de height diferenciado. Esta tcnica
tambin se utiliza en la demostracin 11.
333/407
Figura 1. Una escena de principios de primavera en Portland, Oregon. Sobre
esta foto se han superpuesto unas lneas para demostrar la regla de los tercios;
fijaos en que la interseccin inferior derecha y las lneas que la forman
contienen toda la actividad visible. Foto 2000 del autor; todos los derechos
reservados.
Si se quiere conseguir una buena composicin, hay un recurso casi universal: si divids en tercios una
disposicin o ilustracin, descubriris que el observador centra la mirada en las lneas (y sobre todo en las
intersecciones de las lneas) que sealan estas divisiones. Si no se aprovecha esta extraa tendencia de la
vista, la composicin quedar desequilibrada.
La explicacin ms sencilla de este fenmeno es que estas cuatro lneas se adaptan prcticamente a la
perfeccin a la cuadrcula que sigue la seccin urea, una proporcin prxima a un sexto. La seccin urea
suele encontrarse en diferentes campos de las matemticas y en el mundo natural.
Figura 2. Una captura de pantalla de msnbc.msn.com con los primeros siete
rectngulos ureos superpuestos. Las dimensiones del cuarto y quinto
rectngulo uno al lado del otro aclaran el carcter de la cuadrcula de
composicin de pgina en general.
El formulario de demostracin se ha dispuesto de manera que los controles del formulario queden justificados
en el margen izquierdo situado a un tercio de la distancia del margen derecho del formulario en conjunto; fue
una decisin tomada a propsito. Mucho menos a propsito es la composicin vertical del formulario porque,
cuando se tiene en cuenta el ttulo, los campos de texto cortan las dos lneas descritas en el prrafo anterior.
Y aunque no se tenga en cuenta el ttulo, los campos obligatorios cortan la parte superior de estas lneas.
El punto principal para un especialista en estilos es que si la seccin urea y la cuadrcula se tienen en
cuenta antes de empezar a crear una hoja de estilo, el hecho de normalizar la hoja de estilo se puede
simplificar de manera considerable.
Para garantizar que la cuadrcula que queremos crear se conserve vertical y horizontalmente, se deben tener
en cuenta algunos detalles. Estos cambios son casi del todo estticos.
334/407
textarea {
height: 4.714em;
margin-bottom: .286em;
border: .071em solid rgb(96,96,96);
padding: 0;
}
select {
display: block;
float: left;
height: 1.571em;
font-family: Futura,'Century Gothic',sans-serif;
}
option { font-size: 100%; }
Archivo fuente de: "Retocar la presentacin de los controles textarea y select"
En las plataformas Windows, los controles select pueden modificarse para eliminar parte del biselado, lo
que hace que se parezcan ms a los controles de texto.
Como la facilidad de uso suele mejorar dndole al usuario una manera de distinguir a primera vista los
datos que introduce del resto del formulario, la tipografa utilizada para representar los valores del
formulario ser diferente de la utilizada en el resto del formulario. Teniendo eso en cuenta, esta
demostracin aplica el primero de estos valores.
La cascada no suele tenerse en cuenta en cuanto a la representacin del texto en los controles del
formulario, lo que es otra explicacin de por qu hay varios valores de texto/fuente. Se ha evitado
inherit (heredar) por razones de preferencia y costumbre y no por ningn motivo objetivo.
La demostracin previa manipula algunas representaciones de tipografa, de modo que ahora es el momento
de acabar de redondear el trabajo.
input, textarea {
display: block;
float: left;
overflow: hidden;
font-family: Futura,'Century Gothic',sans-serif;
font-size: 1em;
}
input, textarea, select {
margin-top: 0;
font-size: 100%;
}
Archivo fuente de: "Normalizar la presentacin de los controles de texto y ajustar el efecto de la cascada en el texto de control de
select"
En esta demostracin vemos el primer ejemplo de valores que se han reservado a propsito para una
asignacin simultnea en selectores mltiples. La ausencia de valores border de estas reglas se debe al
proceso de produccin, que se realiz en un orden diferente al de la presentacin de estas
demostraciones, un punto del que se habla ms detalladamente ms adelante.
Como hemos mencionado anteriormente, los valores de texto y fuente de los controles de formulario no
se benefician de las ventajas de la cascada. Estas reglas solucionan este hecho. Por lo tanto, la
mayora de los diferentes controles ahora ya se adaptan a la composicin deseada.
A causa del comportamiento de Internet Explorer 6, en el balance de los controles del formulario se les
da un valor float de left. Este valor se asign por costumbre y por ciertas experiencias
(desagradables), pero no es estrictamente necesario.
Al asignar valores block a los controles de texto, el problema de representacin de Safari visto en las
335/407
dos demostraciones anteriores ya se ha solucionado. Las cosas raras como stas son habituales cuando
se aplican estilos a formularios.
De la misma manera que los valores border no se han normalizado como es debido, tampoco se han
normalizado los valores font-size; la asignacin de valores 1 em a los controles de texto y valores 100% a
los controles select fue totalmente arbitraria.
Las anchuras de los distintos controles de texto se deben cambiar desde sus valores por defecto.
.medium { width: 11.714em; }
select.medium { width: 12em; }
.long { width: 20.429em; }
.rInput { border: 0; }
Archivo fuente de: "Modificar las anchuras de los controles de texto para hacerlas ms usables o, como mnimo, ms consistentes"
Una reexaminacin del etiquetado de origen revela que a cada control se le ha asignado una class: tres
relacionadas con la anchura para el texto y los controles select y otras para los controles que se basan
en informacin del puntero/cursor y no en informacin tecleada.
Las clases se deben asignar a controles bsicamente porque el soporte de Internet Explorer para los
selectores avanzados es limitado. En cuanto a selectores, la clase rInput podra sustituirse fcilmente
por input[type="radio"], input[type="checkbox"], etctera si las versiones de produccin actuales de
Internet Explorer aceptaran los segundos.
La asignacin de tres posibles valores para controles de texto es totalmente arbitraria y se deja a la
voluntad del diseador. En los entornos comerciales, algunos diseadores entregan unos trabajos tan
particulares en lo que respecta a la composicin, que los selectores de class como los que se utilizan
aqu seran funcionalmente intiles. Asignar un id a cada pareja de etiqueta/control ofrece la referencia
ms sencilla posible para cada elemento del formulario, una sencillez que es valiosa a la hora de aplicar
estilos al trabajo de un diseador que insiste en dar su toque a cada pequeo detalle de la composicin
del sitio.
El botn "enviar" del formulario decae...
.submitButton {
display: block;
clear: both;
width: 7.2em;
height: 2em;
margin: 0 0 0 16.8em;
border: 1px solid rgb(128,128,128);
padding: 0;
font-size: 10px;
text-align: center;
}
Archivo fuente de: "Ajustar con precisin la composicin del botn 'enviar' del formulario"
El reto ms complicado al que nos enfrentamos cuando aplicamos estilos a botones de envo es el
hecho de situarlos exactamente donde el diseador quiere. En la prctica, el aspecto deseado se
obtiene despus de muchos ajustes de la composicin y las propiedades line-height; algunos
desarrolladores puede que encuentren menos laborioso utilizar una sustitucin de imagen (podis ver la
bibliografa) o input type="image".
A primera vista, la asignacin de display: block para este elemento parece redundante y, de hecho, lo
es si pensamos en un nico formulario de una nica pgina. Sin embargo, en el contexto de todo un
336/407
sitio web, podra no ser redundante; muchos sitios web y aplicaciones tienen mltiples formularios en un
documento con diferentes valores de display.
Ponemos las etiquetas "required" (necesario) donde correspondan.
li.required span.note {
display: block;
width: auto;
float: right;
color: rgb(128,128,128);
font-size: .714em;
line-height: 2.4em;
font-style: italic;
}
Archivo fuente de: "Mover las etiquetas 'required' de manera que queden tocando en el margen derecho terico del formulario y
cambiar sus propiedades de texto"
En su estado actual, el fieldset que contiene los controles radio sigue siendo un elemento de bloque,
de manera que se extiende hasta el margen derecho del formulario. Por lo tanto, la etiqueta asociada a
este conjunto de controles se desplaza por debajo del final calculado del fieldset.
El valor auto que se proporciona para la width de las etiquetas "required" dicta que no deberan ser ms
anchos que su contenido.
Si nos fijamos ms en la aritmtica utilizada para la tipografa de las etiquetas "required", veremos un
tamao de letra de 10 pxeles y un espacio interlineal de 24 (equivalente a una unidad atmica de la
cuadrcula que se utiliza).
La estructura utilizada para indicar los campos obligatorios se ha creado pensando en la interactividad
con el usuario; con las distintas clases aplicadas al formulario es posible validar los datos introducidos
por el usuario con JavaScript y cambiar los estilos de las etiquetas, campos y/o etiquetas en los
conjuntos etiqueta/control que el usuario no ha manipulado adecuadamente.
Finalmente, ha llegado el momento de establecer las colisiones de los controles radio con los campos que
hay debajo en el orden de las fuentes.
fieldset label {
margin-right: .25em;
padding-right: 0;
line-height: 1;
}
fieldset .rInput { margin-right: .75em; }
fieldset label, fieldset .rInput {
width: auto;
display: inline;
float: none;
font-size: .857em;
}
li.required fieldset {
width: 18.857em;
float: left;
}
Archivo fuente de: "Alinear los controles radio y sus etiquetas horizontalmente"
El resultado principal de estas reglas, aparte de hacer los ajustes estticos, es cambiar el valor display
337/407
de los controles radio y checkbox de nuevo a inline. Esto se hace para evitar los problemas que supone
aplicarles float como al resto de los elementos input del formulario.
A pesar de la asignacin de display: inline a los controles asociados, se quedan como elementos
"sustituidos": elementos en lnea con dimensiones estticas conocidas en tiempo de ejecucin (es decir,
antes de que el navegador empiece a representar el contenido). Por este motivo pueden aplicarse
mrgenes a estos elementos.
El carcter peculiar de los elementos fieldset (es decir, que son los nicos elementos de bloque
pensados especficamente para utilizarse en formularios) hace que en este caso sea necesario aplicar
una anchura diferenciada a cualquier control que incluya fieldset que necesite activacin por parte del
usuario. (Podis ver los prrafos anteriores sobre la composicin de etiquetas "necesarias".)
Finalmente, para acabar como unos seores y conseguir que los ltimos detalles queden alineados como es
debido...
#acctTypeField fieldset {
padding: .286em 0 0 0;
}
#acctTypeField .rInput { margin-top: .167em; }
#availabilityField label {
height: 3.143em;
padding-top: .286em;
}
#availabilityField .rInput { margin-top: .286em; }
#availabilityField, #messageField {
height: 1%;
overflow: auto;
}
Archivo fuente de: "Retocar los ltimos detalles en varios controles"
La magia del overflow que hemos aplicado en la demostracin 4 se repite en este caso;
#availabilityField tiene una label de height conocida y sucede lo mismo con la textarea de
#messageField.
El uso de la etiqueta #acctTypeField para cambiar el valor padding del fieldset que incluye puede ser
demasiado especfico. No obstante, hay que trabajar de manera precisa a la hora de redactar estilos
que pueden verse afectados tan fcilmente por los estilos de los elementos adyacentes.
El resto de las reglas de este bloque de la hoja de estilo acaban de retocar un poco la composicin; se
trata de retoques que se determinaron durante el proceso de pruebas. Por desgracia, las horas de
comprobacin y retoques no consiguen revelar el comportamiento que producir controles radio de
idntica composicin tanto en Safari 3 como en Firefox 3. El resultado es un punto de referencia en las
labels de control de radio que es muy poco convencional en Firefox 3. En general, se puede decir que
aplicar estilos a los controles checkbox y radio es una especie de magia negra.
Todos los estilos anteriores se han desarrollado para Opera o Safari (elegid el que queris, ambos se
comportaron bastante bien). Los que se mencionan a continuacin son especficos de Internet Explorer,
especificados en un fichero CSS enlazado con link en un bloque de comentario condicional.
h3 { margin-bottom: 1.2em; }
li { margin: 0 0 -.214em 0; }
select { height: 1.429em; }
textarea { height: 4.571em; }
fieldset {
338/407
height: 1.583em;
padding-top: .417em;
}
.medium { width: 13.429em; }
select.medium { width: 13.714em; }
.long { width: 20.286em; }
fieldset .rInput { border: 0 !important; }
#subjectField { margin-bottom: -.214em; }
#availabilityField .rInput { margin-top: .286em; }
#messageField { padding-bottom: .286em; }
input.submitButton { margin-top: .15em; }
* html input, * html textarea { float: left; }
* html select { font-size: .643em; }
* html select.medium { width: 21.364em; }
* html textarea { height: 4.643em; }
* html #subjectField {
margin-top: .071em;
margin-bottom: 0;
}
* html #availabilityField label { padding-top: 0; }
* html input.submitButton { margin: .1em 0 0 7em; }
Archivo fuente de: "Pgina completa"
Como se puede observar, todos los estilos mostrados anteriormente sugieren ligeras diferencias en el
modo como Internet Explorer transmite los tamaos de fuente por la cascada y dispone las cajas.
Otro tema interesante es el selector * html. Internet Explorer 5 y 6 son los nicos navegadores que
reconocen este selector, por lo que es un filtro de paso bajo efectivo para reglas de hoja de estilo
dirigidas a estos navegadores.
34.4. Establecer capas de soporte de plataforma
El ltimo subapartado de demostraciones presenta el tipo de estilos reservados para Internet Explorer 6 y 7 y
nos lleva a hablar de cmo un buen equipo de diseo trata navegadores de muy diferentes tipos.
La realidad de la web es que los usuarios utilizan una amplia variedad de navegadores en toda clase de
entornos. Algunos son antiguos y otros son de rabiosa actualidad. Los hay que funcionan en ordenadores
convencionales y los hay que funcionan en aparatos porttiles como telfonos mviles. Todos ellos se
desarrollan con sistemas operativos especficos y despus se adaptan a otros con diferentes niveles de
aceptacin de estndares. Excepto Opera, todos los fabricantes de navegadores venden productos pensados
para ser utilizados junto con otros ttulos de una gran gama de productos, un requisito de producto que hace
que los navegadores sean ms complejos de lo necesario slo para navegar por la Web.
Como si no hubiera bastante con pensar en las mltiples y variadas ventajas y desventajas de los
navegadores, tambin se deben tener en cuenta los errores: errores de seguridad, errores de componentes
y, sobre todo, los errores de representacin. Los usuarios de Safari 3.x han descubierto que, en un punto, el
documento de demostracin descubre un molesto error de representacin en su propio navegador.
La mejor manera de solucionar estos problemas es definir capas de soporte. El primero en promulgar este
mtodo fue el equipo de desarrollo de interfaz de Yahoo!, que lo denomina Graded Browser Support.
Por norma general, las capas de soporte se dividen en cuatro grandes categoras:
1. El sitio web se representa tal como se dise originalmente dentro de los lmites de las capacidades de
estos navegadores y acepta todas las funciones. La plataforma de desarrollo define lo que en ocasiones
se llama el nivel "A+".
2. La desviacin respecto de la composicin preferente es evidente, quiz hasta un nivel destacado; sin
embargo, el sitio web an se puede utilizar y acepta la mayora o todas las funciones del sitio.
3. El sitio web que se presenta a los usuarios de estos navegadores es el ms sencillo que se puede hacer
339/407
sin estropear la marca del propietario del sitio, y es posible que determinadas funciones del sitio queden
inactivas. Estos navegadores tienen unas bases de instalacin comparativamente pequeas, y se los
considera anticuados, inestables o faltos de funciones.
4. Este nivel de aceptacin, que en la documentacin de Yahoo! se denomina "X Grade" o de grado X, se
reserva para las plataformas sin comprobar, es decir, habitualmente para los navegadores ms nuevos
con bases de instalacin pequeas (generalmente Opera, claro). Una vez probados, estos navegadores
promocionan a una capa superior.
Los detalles del proceso de recopilacin de requisitos que informan la definicin de los niveles de soporte y
asignan navegadores tienden a ser largusimos y muy aburridos y, por lo tanto, se omiten de este apartado,
que ya es bastante largo.
34.5. Composiciones de formulario complejas en la prctica (... en lugar de
en teora)
Entre las consideraciones previas proporcionadas anteriormente, se ha afirmado que las demostraciones se
han organizado por el orden del cdigo fuente de la hoja de estilo en lugar de por el orden en el que de
hecho se aadieron las reglas a la hoja de estilo. Los motivos para hacerlo son:
Para poder delimitar una serie de demostraciones cronolgicamente, era necesario mantener un diario
(o guardar la hoja de estilo en un sistema de control de versiones), cosa que no se hizo nunca. Cuando
se detect el despiste, ya haca demasiado tiempo que haba pasado la fecha lmite de entrega del
apartado para poder corregirlo.
Secuenciar segn el orden del cdigo fuente hace que sea mucho ms fcil producir los documentos de
demostracin; una concesin ms del ideal a la prctica.
Como la hoja de estilo de la demostracin original se escribi yendo con un cuidado notable (si no total)
para la normalizacin y el orden de las fuentes (como se debera hacer con todas las hojas de estilo de
produccin), secuenciar la demostracin por orden de fuentes garantiza que los estudiantes que quieran
"ver el cdigo fuente" lo tendrn mucho ms fcil para entender lo que se ofrece.
El programa Opera 9.6 para OS X fue el agente de usuario que se utiliz para el desarrollo; con esta
advertencia y las anteriores, a continuacin se presenta el orden general en que se hicieron los cambios y las
aadiduras en la hoja de estilo:
1. Se aplican los estilos del documento (es decir, body).
2. Se restablecen los valores predeterminados de lista, formulario y fieldset.
3. Se especifica la tipografa.
4. Se limita y se aplica clear a los elementos de la lista.
5. Se aplican las labels en general.
6. Se especifica y normaliza la composicin de los controles del formulario (sobre todo los tamaos).
7. Se crea el botn de enviar.
8. Se aplican los casos lmite.
9. Se prueba Safari y Firefox y se cambian los valores de la hoja de estilo para reflejar los compromisos
(all donde se puede).
10. Se prueba Internet Explorer 6 y 7 y se les suministran ajustes de propiedad/valor en una hoja de estilo
condicional.
El proceso que se acaba de describir empieza con las reglas ms generales y va pasando a las ms
concretas hasta llegar a solucionar los pequeos problemas especficos de navegadores determinados... de
manera muy parecida al orden del cdigo fuente de la hoja de estilo en s. Sin embargo, los resultados no se
correlacionan a la perfeccin. Esto sucede porque los diferentes motores de representacin y las
peculiaridades de elementos como el contexto float conllevan consecuencias imprevistas cuando se mezcla
todo, de modo que el proceso real va ms all de realizar unas cuantas comprobaciones, retoques y
reconsideraciones.
340/407
Resumen
Este apartado proporciona una base completa para aplicar estilos y composicin en los formularios, pero es
posible ir ms lejos todava. Las dificultades que plantean los sistemas operativos (cuyos componentes se
utilizan para crear los controles de formularios web) y las diferencias entre motores de representacin
aumentan el reto que supone para un especialista en estilos crear un formulario web segn una serie de
especificaciones. Este apartado deja la puerta abierta a la experimentacin con la multitud de pequeos
problemas asociados con esta tarea y muestra la manera de conseguir un buen nivel de dominio en uno de
los aspectos ms complicados del arte de disear webs.
Preguntas de repaso
1. Cul es el tipo de flujo de los controles de formulario que acepta datos introducidos por el usuario y
cules son las dos caractersticas que los hacen destacables en cuanto a la composicin?
2. Qu dos atributos aparte de value (valor) y disabled (desactivado) manipulan la configuracin de los
controles de formulario de antemano de la interaccin con el usuario y a qu elementos se aplican?
3. Este apartado de demostraciones os proporciona los campos obligatorios. Escribid como mnimo una
regla de estilo que, de una vez, pueda cambiar el aspecto de un campo que incluya un error u omisin
de introduccin de datos del usuario.
4. Describid un caso de uso del elemento select, del control checkbox y del control radio. Confirmad cada
descripcin con una explicacin de las ventajas que ofrece vuestra eleccin comparada con otras
opciones posibles.
5. Utilizando una referencia en lnea elegida por vuestro instructor, encontrad y describid brevemente
alternativas a input type="submit".
6. Cread un elemento select que permita seleccionar mltiples options aadiendo la pareja atributo/valor
de multiple="multiple". Despus de examinar el comportamiento de este elemento, explicad por qu
casi no se lo encuentra nunca en los lugares de produccin.
Tabla: conversiones de fracciones a decimales
En la tabla de conversiones de fracciones a decimales que os presentamos aqu, los dgitos que se incluyen
entre parntesis con un asterisco detrs se repiten hasta el infinito; por ejemplo, 0,2(6*) es equivalente a
0,266666666666666... (el 6 es peridico).
Los valores ms prximos a cero se encuentran a la izquierda de la tabla y avanzan hacia el uno leyendo la
tabla de izquierda a derecha.
Bos; Bert y otros (2007). "Cascading style sheets level 2 revision 1 (CSS 2.1) specification". World
Wide Web Consortium. [Fecha de consulta: 28 de mayo de 2008.]
Henick, Ben (2006). "12 lessons for those afraid of CSS and standards". En: A List Apart. [Fecha de
consulta: 16 de diciembre de 2008.]
Horton, Sarah; Lynch, Patrick (2002). Web style guide: basic principles for creating web sites (2. ed.).
New Haven, Conn.: Yale University Press.
Knott, Ron (2008). The golden section ratio: phi. Departamento de Matemticas, Universidad de Surrey
(UK). [Fecha de consulta: 18 de diciembre de 2008.]
Meyer, Eric (2007). "Formal weirdness". Meyerweb.com. [Fecha de consulta: 17 de diciembre de 2008.]
Microsoft Corporation. msnbc.com. [Fecha de consulta: 17 de diciembre de 2008.]
Raggett, Dave y otros (1999). "HTML 4.01 specification". World Wide Web Consortium. [Fecha de
341/407
consulta: 30 de junio de 2008.]
Reynolds, Garr (2005). "From golden mean to 'rule of thirds'". Presentation Zen. [Fecha de consulta: 16
de diciembre de 2008.]
Santa Maria, Jason (2008). "Making modular layout systems". 24 Ways. [Fecha de consulta: 16 de
diciembre de 2008.]
Wikipedia. 2008. "Fahrner image replacement". [Fecha de consulta: 19 de diciembre de 2008.]
"Yahoo! Developer Network" (2008). Graded browser support. [Fecha de consulta: 16 de diciembre de
2008.]
: :
342/407
CSS - Elementos flotantes y clearing
CSS
Elementos flotantes y clearing
Accesibilidad : : :
Tommy Olsson. 26 de septiembre del 2008 Publicado en: mrgenes, cuadros, ajustar, errores, contener
En este apartado veremos qu son los elementos flotantes y el clearing, dos herramientas indispensables
para el diseador de webs modernas. Son unas herramientas muy verstiles que podis utilizar para hacer
que el texto fluya en torno a las imgenes o incluso crear composiciones de mltiples columnas.
35.1. Para qu sirven float y clear?
35.2. Algo de teora muy aburrida
35.3. Cmo funcionan los elementos flotantes?
35.3.1. Los detalles
35.3.2. Ms elementos flotantes
35.3.3. Mrgenes en los elementos flotantes
35.4. Clearing
35.5. Elementos flotantes contenedores
35.6. Ajustar
35.7. Centrar elementos flotantes
35.8. Errores!
Resumen
Preguntas de repaso
35.1. Para qu sirven float y clear?
Si miris cualquier revista, veris que hay imgenes que ilustran los apartados y que el texto las rodea y
fluye a su alrededor. La propiedad float de CSS se cre para permitir este estilo de composicin en las
pginas web. Cuando se hace "flotar" una imagen, o cualquier otro elemento, sta se desplaza hacia un lado
y permite que el texto fluya por el otro. Aplicar clearing a un elemento flotante hace que ste se desplace
hacia abajo, si es necesario, para evitar que aparezca justo al lado del texto.
Aunque en principio cualquier elemento puede ser un elemento flotante, los diseadores utilizan esta
propiedad bsicamente para conseguir composiciones de mltiples columnas sin necesidad de abusar del
etiquetado de tabla.
35.2. Algo de teora muy aburrida
Para explicar cmo funcionan los elementos flotantes, primero deberemos dar un poco de teora y ver cmo
un navegador web muestra un documento HTML/CSS. No os preocupis, ser breve.
Todos los elementos HTML visibles generan una "caja" que inmediatamente se delimita. Si miris el
documento en una pantalla de ordenador o en un telfono mvil, los cuadros aparecen en la pantalla. Si
imprims el documento, los cuadros aparecen en el papel. Si utilizis un lector de pantalla, el contenido de los
cuadros se reproduce oralmente.
De la misma manera que en HTML hay elementos de bloque y elementos en lnea, en el CSS hay cajas de
bloque y en lnea. Por defecto, los elementos de bloque generan cajas de bloque y los elementos en lnea
generan cajas en lnea. Aparte de las cajas generadas por los elementos, tambin se generarn otras cajas;
por ejemplo, para el contenido textual del documento. Las cajas de bloque se presentan normalmente en el
orden en el que aparecen los elementos en el etiquetado, de arriba abajo. Las cajas de bloque no pueden
aparecer unas al lado de otras si no aplicamos CSS. Las cajas en lnea se distribuyen horizontalmente. La
propiedad direction determina si se distribuyen de izquierda a derecha o de derecha a izquierda (si no se
especifica esta propiedad, estas cajas se distribuyen por defecto de izquierda a derecha).
Esto se conoce como el flujo de documento: las cajas en lnea fluyen horizontalmente dentro de sus cajas de
bloque madre, y las cajas de bloque fluyen verticalmente. Las cajas aparecen en el mismo orden que los
343/407
elementos del etiquetado HTML.
Pongamos por caso el siguiente documento HTML, que es muy bsico (slo hemos incluido la parte que hay
dentro del elemento body):
<p>This is a very simple document.</p>
<p>It consists of <em>two</em> paragraphs.</p>
La figura 1 muestra una captura de pantalla de este documento con una sobreimpresin que muestra las dos
cajas de bloque generadas por los elementos p y la caja en lnea generada por el elemento em.
Figura 1. Muestra de las cajas de bloque generadas por los elementos p y de la
caja en lnea generada por el elemento em
Todas las cajas en lnea que forman una "lnea" en el dispositivo de salida estn rodeadas por rectngulos
imaginarios que se conocen como cajas de lnea. Las cajas de lnea se distribuyen siempre de arriba abajo
sin ningn espacio entre ellas, tal como podis ver en la figura 2.
Figura 2. Cada lnea representada est cerrada en una caja de lnea
independiente.
35.3. Cmo funcionan los elementos flotantes?
Ahora que ya hemos visto todas estas cuestiones tericas tan aburridas, pasemos a ver la sintaxis de los
elementos float y clear y a ver algunos ejemplos.
La propiedad float tiene cuatro valores vlidos: left, right, none e inherit. Los dos primeros valores son de
lejos los que se utilizan ms habitualmente y hacen que una caja flote hacia la derecha o hacia la izquierda.
La declaracin float:none, que es el valor por defecto, se utiliza normalmente slo para "deshacer" una
declaracin de alguna otra regla. El uso de float:inherit no es nada habitual; no lo hemos visto nunca en
ningn sitio y probablemente slo existe por una cuestin de coherencia. Hace que el elemento herede el
valor de float de su elemento padre.
Una caja flotante se extrae del flujo del documento y se desplaza todo lo posible hacia la izquierda o hacia la
derecha, segn la direccin de flotacin especificada. "Todo lo posible" significa normalmente hasta que el
borde exterior del elemento flotante toca el borde del bloque que lo contiene (el interior de su relleno, si est
definido). As pues, en el caso de float:left, la caja se desplaza hacia la izquierda hasta que el margen
izquierdo del elemento flotante toca el borde izquierdo del padre.
Los lectores que hayan estado alerta pueden haber visto que hemos ido utilizando "normalmente". Si ya hay
una caja flotada hacia la izquierda cuando flotamos otra en esta misma direccin, la segunda caja se
detendr cuando toque a esta primera. Es decir, que los elementos flotantes no se pueden poner los unos
sobre los otros.
Ya ha llegado el momento de ver los elementos flotantes en accin, de manera que ya podis preparar
vuestro editor de textos.
344/407
1. Cread un archivo nuevo, copiad el cdigo siguiente y guardad el documento como float.html.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Floating</title>
</head>
<body>
<p id="p1"><span id="span-a">Lorem ipsum</span>
<span id="span-b">dolor sit amet</span>
<span id="span-c">consectetuer</span> adipiscing elit.
Curabitur feugiat feugiat purus.
Aenean eu metus. Nulla facilisi.
Pellentesque quis justo vel massa suscipit sagittis.
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos.
Quisque mollis, justo vel rhoncus aliquam, urna tortor varius lacus, ut
tincidunt metus arcu vel lorem.
Praesent metus orci, adipiscing eget, fermentum ut, pellentesque non, dui.
Sed sagittis, metus a semper dictum, sem libero sagittis nunc, vitae
adipiscing leo neque vitae tellus.
Duis quis orci quis nisl nonummy dapibus.
Etiam ante. Phasellus imperdiet arcu at odio.
In hac habitasse platea dictumst. Aenean metus.
Quisque a nibh. Morbi mattis ullamcorper ipsum.
Nullam odio urna, feugiat sed, bibendum sed, vulputate in, magna.
Nulla tortor justo, convallis iaculis, porta condimentum, interdum nec, arcu.
Proin lectus purus, vehicula et, cursus ut, nonummy et, diam.</p>
<p id="p2">Nunc ac elit. Vestibulum placerat dictum nibh. Proin massa.
Curabitur at lectus egestas quam interdum mollis.
Cras id velit a lacus sollicitudin faucibus.
Proin at ante id nisi porttitor scelerisque.
In metus. Aenean nonummy semper enim.
Aenean tristique neque quis arcu tincidunt auctor.
Fusce consequat auctor ligula.
Fusce nulla lorem, sagittis a, lacinia et, nonummy in, eros.
In nisi augue, aliquam eget, convallis vel, malesuada quis, libero.</p>
<p id="p3">Hello, World!</p>
</body>
</html>
Ya s que es mucho contenido, pero lo necesitamos para ver bien cmo funciona.
2. Abrid el documento en vuestro navegador web para ver qu aspecto tiene. Aburrido, verdad?
3. Cread otro documento con el editor de textos, copiad el cdigo siguiente y guardadlo con el nombre
style.css en el mismo directorio que el fichero HTML del paso 1.
#span-a {
float: left;
background-color: #cfc;
color: #030;
}
4. Enlazad la hoja de estilo al documento HTML insertando la lnea siguiente justo antes de la etiqueta
</head>.
<link rel="stylesheet" type="text/css" href="style.css">
5. Guardadlo y actualizad la pgina en el navegador. Veris que el elemento span que contiene las
345/407
palabras "Lorem ipsum" se ha desplazado flotando hacia la izquierda. Tambin hemos puesto un fondo
de color verde claro para hacer que destaque un poco.
6. Todava no es fcil ver qu sucede aqu, o sea que haremos que el elemento flotante sea un poco
mayor. Aadid la siguiente declaracin a vuestra hoja de estilos:
#span-a {
float: left;
color: #030;
padding: 1em;
}
7. Guardad y actualizad, y veris que el rea de color ahora es un poco mayor, ya que hemos aadido un
poco de relleno por los cuatro lados del cuadro. El elemento flotante ocupa la altura de tres lneas de
texto y podemos ver claramente que el otro texto fluye en torno a este elemento flotante.
35.3.1. Los detalles
Ahora analizaremos con ms detalle qu es lo que sucede realmente aqu. La caja flotante generada por el
primer elemento span se ha desplazado hacia la izquierda, hasta el borde del documento, y las cajas de lnea
adyacentes se han reducido. Aunque todava no es visible, la caja de bloque generada por el prrafo que
contiene el elemento flotante se ve afectada. Ahora destacaremos el prrafo para que quede ms claro.
1. Aadid la siguiente regla CSS a la hoja de estilos:
p {
border: 1px solid #f00;
}
2. Volved a guardar el archivo CSS y actualizad la ventana del navegador. Ahora deberais ver un borde
rojo en torno a cada uno de los prrafos; observad que el elemento flotante se encuentra dentro de uno
de los prrafos.
3. Ahora modificaremos la ltima regla para verificar que el elemento flotante se detiene cuando llega al
borde interior del rea de separacin del padre:
p {
padding: 1em;
background-color: #ff9;
}
4. Guardad y actualizad, y veris la prueba de lo que os hemos dicho antes: el cuadro flotante se desplaza
hasta cerca del bloque que lo contiene, mientras que la separacin del padre queda fuera de ste.
Tambin veris que el fondo amarillo del prrafo se extiende por debajo de la caja flotante. Claramente,
el hecho de flotar una caja hija no afecta en absoluto a la caja del prrafo, slo a las cajas de lnea que
hay en su interior.
5. Ahora haremos unos cuantos experimentos ms: qu ocurre si el elemento flotante es ms alto que su
padre? Modificad la regla para el elemento flotante de la manera siguiente:
#span-a {
float: left;
color: #030;
padding: 1em 1em 10em;
}
Nota
Si la ventana del navegador es estrecha, es posible que debis utilizar un valor mayor
que 10 em para la separacin inferior con el fin de que el rea verde se extienda ms
all del borde inferior del prrafo.
346/407
Ahora veris algo muy interesante: la caja flotante sobresale fuera de la caja madre; la caja madre no se
ampla para poder contener a su caja hija flotante. Tambin podis ver (si habis utilizado una separacin
inferior lo bastante grande) que las cajas de lnea adyacentes al elemento flotante del segundo prrafo se
han acortado.
35.3.2. Ms elementos flotantes
Ahora crearemos otro elemento flotante para ver qu sucede cuando se desplazan dos elementos flotantes
en la misma direccin.
1. Aadid una regla nueva a la hoja de estilos, guardad y actualizad igual que habis hecho antes.
#span-b {
float: left;
background-color: #ccf;
color: #003;
padding: 1em;
}
El elemento span que contiene las palabras "dolor sit amet" tambin se ha desplazado flotando hacia la
izquierda. Veris que se ha desplazado hacia la izquierda hasta tocar el primer elemento flotante; es
decir, "todo lo posible".
2. Y por qu slo dos elementos flotantes? Crearemos an un tercero. Aadid la regla siguiente a vuestra
hoja de estilos:
#span-c {
float: left;
background-color: #fcc;
color: #300;
padding:2em 1em;
}
3. Tambin queremos aadir una regla temporal para ver un ejemplo de qu ocurre cuando no hay
suficiente espacio para un elemento flotante en una lnea. Aadid la regla siguiente al final de la hoja de
estilos:
span {
width: 34%;
}
4. Igual que antes, guardad vuestra hoja de estilos y actualizad el documento en el navegador; veris algo
similar a lo que hay en la figura 3.
347/407
Figura 3. No es exactamente lo que esperabais?
Mira por dnde! Qu ha pasado? El tercer elemento flotante aparece ahora bajo el segundo. (Y, adems,
Internet Explorer 6 hace otras cosas extraas, que de momento ignoraremos). Como la anchura de cada uno
de los elementos span es el 34% de la anchura del prrafo (como especifica la regla aadida en el paso 3),
ms un poco de separacin, no hay suficiente espacio para los tres uno al lado del otro (3 34% = 102%).
Los dos primeros elementos flotantes caben en la misma lnea, pero el tercero no y se desplaza hacia abajo.
Lo que es importante es que se desplaza hacia abajo slo lo necesario para caber en la lnea. No se
desplaza bajo el primer elemento flotante ms alto porque hay espacio suficiente a su derecha.
Otra cosa interesante que hay que tener en cuenta es que habis asignado una anchura a los elementos
span. Esto no debera representar ninguna diferencia porque span es un tipo de elemento en lnea. No
obstante, cuando se hace flotar una caja, sta se convierte automticamente en caja de bloque, lo que
significa que le podemos asignar dimensiones y mrgenes verticales.
35.3.3. Mrgenes en los elementos flotantes
Ahora veremos lo que se puede hacer con los mrgenes de los elementos flotantes.
1. En primer lugar, eliminad la regla temporal para los elementos span que habis aadido antes y despus
guardad y actualizad, de manera que los tres elementos flotantes vuelvan a quedar uno al lado del otro.
Es decir, borrad esta regla:
span {
width: 34%;
}
Ahora los tres elementos flotantes estn totalmente juntos y el texto adyacente empieza inmediatamente
despus del ltimo elemento flotante (a no ser que utilicis Microsoft Internet Explorer 6 o una versin
348/407
anterior, ya que en este caso habr un espacio de 3 pxeles a la derecha a causa del problema de los
tres pxeles). Cmo se puede crear un poco de espacio en torno a un cuadro flotante? La respuesta
son los mrgenes.
2. Lo probaremos con el elemento flotante central; cambiaremos la regla CSS para el elemento flotante
central de la manera siguiente y entonces guardaremos y actualizaremos:
#span-b {
float: left;
color: #003;
padding: 1em;
margin-left: 1em;
margin-right: 1em;
}
Ahora s que hay un poco de espacio a ambos lados del elemento flotante central.
3. Tambin podis definir mrgenes verticales para una caja flotante; haced los cambios siguientes en la
regla para el tercer elemento flotante, guardad y actualizad.
#span-c {
float: left;
color: #300;
padding:2em 1em;
margin-top: 2em;
margin-bottom: 2em;
}
El tercer elemento flotante se ha desplazado hacia abajo y tambin hay un poco de espacio adicional
debajo.
4. Como ya vamos lanzados hacia la aventura, veamos qu ocurre si empezamos a jugar con mrgenes
negativos. Haced los cambios siguientes en la regla para el tercer elemento flotante, guardad y
actualizad:
#span-c {
float: left;
color: #300;
padding:2em 1em;
margin-top: 2em;
margin-bottom: 2em;
margin-left: -4em;
}
Ahora veris el resultado que se muestra en la figura 4:
349/407
Figura 4. Ahora los elementos flotantes aparecen unos sobre otros!
Cmo puede ser? Quin ha dicho que los elementos flotantes no pueden aparecer los unos sobre los
otros? El margen negativo desplaza todo el elemento flotante hacia la izquierda.
El uso de mrgenes negativos en los elementos flotantes puede ser muy til para crear algunos tipos de
composiciones de mltiples columnas.
35.4. Clearing
Ahora que ya hemos visto las bases de los elementos flotantes, podemos pasar a otro tema muy
relacionado: el clearing.
Como hemos visto en los ejemplos a lo largo de este apartado, el texto fluye en torno a un elemento flotante
y las cajas de bloque no se ven afectadas por los elementos flotantes. Algunas veces es preferible que un
elemento no acabe colocado justo al lado de un elemento flotante. Por ejemplo, un ttulo que introduce una
seccin nueva de un apartado no debe aparecer al lado de una imagen de la seccin previa. Es mucho
mejor hacer que el ttulo aparezca bajo la imagen, incluso aunque la imagen sobresalga por debajo del ltimo
prrafo. La nica manera de hacerlo es usar la propiedad clear (distanciar) en el ttulo.
Otro ejemplo de esto es la omnipresente composicin de tres columnas con un pie de pgina que ocupa toda
la anchura. Si las columnas son flotantes, entonces utilizaris la propiedad clear en el pie para garantizar
que aparezca bajo todas las columnas, sea cual sea la ms larga.
La propiedad clear tiene tres valores tiles: left (izquierda), right (derecha) y both (ambos). Tambin son
vlidos los valores none (ninguno), que es el valor por defecto, e inherit (heredar).
El uso de clear:left en un elemento garantiza que su caja generada aparezca bajo cualquier caja flotada
previamente hacia la izquierda. Si utilizis clear:both, aparecer bajo todos los elementos flotantes previos
de ambos lados.
La distancia se consigue desplazando el elemento hacia abajo (el espacio en blanco se aade sobre su
margen superior), si es necesario, hasta que su borde superior se encuentre bajo los bordes inferiores de
todos los cuadros flotantes en la o las direcciones especificadas. Veamos un ejemplo para ilustrarlo mejor.
1. Antes de hacer la prueba, limpiemos primero la hoja de estilos. Eliminad las reglas para #span-b y
#span-c de manera que quede slo el elemento flotante verde de la izquierda. Comprobad que su
separacin inferior sea lo suficientemente grande como para extenderse dentro del segundo prrafo.
2. Aadid la regla siguiente para el segundo prrafo, guardad y actualizad:
#p2 {
clear: left;
}
350/407
Mirad! El segundo prrafo se desplaza hacia abajo hasta que queda por debajo del elemento flotante,
tal como podis ver en la figura 5.
Figura 5. Ahora el segundo prrafo queda por debajo del primero.
Para complicar todava ms las cosas, podemos utilizar float y clear en el mismo elemento.
3. Aadid una regla al segundo elemento flotante para separarlo del primero, guardad y actualizad:
#span-b {
float: left;
clear: left;
padding: 1em;
color: #003;
}
El elemento flotante azul aparece ahora bajo el elemento flotante verde, totalmente fuera del prrafo
padre. Como tambin se ha flotado hacia la izquierda, el segundo prrafo se desplaza un poco ms
hacia abajo para quedar separado.
35.5. Elementos flotantes contenedores
Como ya hemos visto antes, la caja madre no se ampla normalmente para contener a los hijos flotantes.
Esto a menudo puede provocar confusiones, por ejemplo cuando todos los hijos de un elemento flotan al
crear un men horizontal a partir de una lista no ordenada mediante la flotacin de todos los elementos li.
Como las cajas flotantes se sacan del flujo y no afectan a la caja madre, el hecho de hacer flotar las hijas
hace que en realidad la madre quede vaca y que pase a tener una altura cero. Algunas veces esto no es lo
que queremos, por ejemplo a la hora de definir un fondo para la madre. Si la madre tiene una altura cero, el
fondo no se ver.
351/407
Es evidente que necesitamos algn mecanismo para conseguir que una caja madre se ample para incluir a
sus hijas flotantes. El mtodo tradicional consista en incluir un elemento adicional en el etiquetado, justo
antes de la etiqueta de cierre de la caja madre, y definir en l clear:both. Esto funciona, pero no es muy
aceptable porque implica introducir un etiquetado adicional poco semntico e innecesario. Por suerte, hay
otras maneras que explicaremos a continuacin.
El primer mtodo consiste sencillamente en hacer flotar tambin a la madre. Las cajas flotantes se amplan
siempre para incluir todos sus cajas hijas.
1. Para probarlo en nuestro documento de ejemplo, eliminad otra vez la regla para #span-b, haced flotar el
primer prrafo de la manera siguiente y guardad y actualizad:
#p1 {
float: left;
}
El prrafo se ampla ahora hasta incluir el elemento flotante de color verde. Todo eso est muy bien,
pero algunas veces no tenemos la opcin de flotar a la madre. Otra manera de hacer lo mismo sin flotar
a la caja madre es definiendo la propiedad overflow (desbordamiento) de la madre a un valor diferente
de visible. Si defins el valor hidden y no especificis ninguna altura, la caja madre incluir las cajas
hijas flotantes.
2. Sustituid la ltima regla por la siguiente, guardad y actualizad:
#p1 {
overflow: hidden;
}
Tened en cuenta que el ltimo mtodo no funciona con Internet Explorer 6 o anterior.
35.6. Ajustar
Ya hemos comentado antes que el hecho de hacer flotar una caja en lnea haca que se convirtiera en una
caja de bloque, lo que permite especificar sus dimensiones y mrgenes verticales. Hacer flotar una caja de
bloque tambin tiene una consecuencia sorprendente: si no se especifica la anchura de la caja, sta "se
ajusta" para adaptarse a su contenido. Esto no era visible en el documento de ejemplo cuando habis hecho
flotar el primer prrafo porque ya tena suficiente contenido para llenar toda la ventana (a no ser que
tuvierais un monitor realmente ancho).
Ahora haremos flotar el ltimo prrafo para ver el efecto. De hecho, slo para tener un poco de variacin,
haremos una locura y lo haremos flotar a la derecha.
Aadid la regla siguiente en la hoja de estilos, guardad y actualizad:
#p3 {
float: right;
}
El prrafo que dice "Hello, World!" flotar hacia la derecha y tendr slo la anchura del texto, ms un poco de
relleno que habis especificado en una regla anterior para todos los prrafos.
35.7. Centrar elementos flotantes
Algunas veces querris hacer flotar un elemento, quiz para que incluya hijos flotantes, pero a la vez
mantenerlo centrado horizontalmente dentro de su padre. Esto representa un problema: no es posible utilizar
el truco habitual de definir los mrgenes izquierdo y derecho en auto para los elementos flotantes, y no existe
ningn valor float:center. Hay alguna manera de solucionarlo?
S, la hay. El gur del CSS Paul O'Brien explica cmo hacerlo en su artculo When is a float not a float?.
Implica el uso de un elemento de envoltorio adicional, pero es perfectamente asumible. El principio utiliza el
posicionamiento relativo, que explicaremos en el apartado siguiente. Desplazando el elemento de envoltorio
352/407
hacia la derecha y a continuacin el elemento flotante hacia la izquierda, se puede llegar a centrar un
elemento flotante ajustado de anchura desconocida. (Podis utilizar este conocimiento para impresionar a
vuestra pareja en vuestra prxima cita. No falla nunca).
Ved tambin
Intentmoslo. En el ejemplo siguiente aadiremos una barra de men horizontal a vuestra pgina. El men
estar basado en una lista no ordenada con elementos flotantes.
1. Insertad el etiquetado siguiente justo despus de la etiqueta <body> de vuestro documento HTML:
<div class="wrap">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>

<div class="clear"></div>
2. Aadid las reglas siguientes de CSS en la hoja de estilos para aplicar estilos al men:
#menu {
margin: 0;
padding: 0.5em;
}
#menu li {
float: left;
margin: 0 0 0 0.5em;
padding: 0.25em;
color: #ff9;
}
#menu a {
color: #ff9;
}
.wrap {
float: left;
margin-bottom: 2em;
}
.clear {
clear: left;
height: 1px;
margin-top: -1px;
}
3. Guardad los dos archivos y actualizad el navegador. Veris el men en la parte superior izquierda.
Ahora lo centraremos horizontalmente.
4. Desplazad el elemento de envoltorio hasta el punto central modificando la regla de .wrap como se indica
a continuacin:
.wrap {
float: left;
margin-bottom: 2em;
353/407
position: relative;
left: 50%;
}
El men empezar en el centro horizontal de la pgina, pero esto no es lo que queramos; est
demasiado desplazado hacia la derecha, o sea que lo deberemos desplazar un poco hacia la izquierda.
Como habis flotado el elemento de envoltorio, ste se ha ajustado para adaptarse a la lista. Debis
desplazar la lista una distancia equivalente a la mitad de su anchura, lo que tambin significa la mitad de
la anchura del envoltorio, o sea que lo deberemos desplazar un -50%.
5. Modificad la regla #menu de la manera siguiente:
#menu {
margin: 0;
padding: 0.5em;
position: relative;
left: -50%;
}
El men ya est centrado; el nico problema es que puede haber una barra de desplazamiento
horizontal segn la anchura de la lista y de la ventana del navegador. Esto ocurre porque habis
desplazado el elemento de envoltorio hasta el centro de la pantalla; si la lista es ms ancha que la mitad
de la ventana, una parte de sta quedar fuera.
6. Podis evitarlo definiendo overflow:hidden en un elemento padre adecuado para ocultar el
desbordamiento. En este caso, el padre del envoltorio es el body. Algunas veces no es factible ocultar el
desbordamiento del elemento body, y en este caso necesitaris un envoltorio para el envoltorio; aqu, sin
embargo, todo funciona correctamente.
Aadid la regla siguiente a vuestra hoja de estilos:
body{
overflow: hidden;
}
7. De hecho, an hay otro problema. Si lo abrs con Internet Explorer, veris que an no funciona del todo
bien. La manera de solucionarlo es hacer flotar la lista misma, pero slo en Internet Explorer, ya que en
otros navegadores quedara rota. Podis solucionarlo utilizando un pequeo truco que garantiza que
esta regla slo se aplicar en Internet Explorer.
Aadid la regla siguiente a vuestra hoja de estilos:
* html #menu {
float: left;
}
35.8.Errores!
Los elementos flotantes y el clearing son muy tiles, pero por desgracia la mayora de los navegadores (de
hecho, casi todos) aplica estas propiedades de una manera errnea. Internet Explorer 6 presenta una serie
increble de comportamientos extraos con los elementos flotantes, que incluyen la desaparicin del
contenido, mrgenes dobles y el famoso problema de los tres pxeles. Pero cuando se trata de aplicar los
elementos flotantes y el clearing, ni siquiera Firefox ni Opera estn totalmente libres de problemas. Position Is
Everything es un recurso muy valioso en el que se documentan todos estos problemas, junto con soluciones
para la mayora de los casos.
Resumen
El hecho de hacer flotar una caja provoca que sta se desplace todo lo posible hacia la izquierda o la
derecha dentro de su elemento padre. Una caja flotante se extrae del flujo del documento y no afecta a la
caja madre ni a las cajas de bloque siguientes, aunque las cajas de lnea adyacentes se acortan. Cuando no
354/407
hay espacio para una caja flotante en una lnea a causa de otros elementos flotantes previos, sta se
desplaza hacia abajo hasta que quepa (o hasta que no haya otros elementos flotantes).
Cuando se hace flotar una caja en lnea, sta se convierte en una caja de bloque. Si se hace flotar una caja
de bloque y no se especifica ninguna anchura concreta, sta se ajusta para adaptarse a su contenido.
Para centrar elementos flotantes hay que desplazar el contenido hacia abajo, si es necesario, hasta que su
borde superior se encuentre por debajo de los bordes inferiores de todas las cajas flotantes en la direccin
especificada.
Para centrar una caja flotante contenida se puede aadir un elemento de envoltorio y utilizar juiciosamente el
posicionamiento relativo.
Preguntas de repaso
1. Qu sucede si flotis un elemento en medio de un prrafo, es decir, si hay texto antes del elemento
flotante? Probadlo en navegadores diferentes, porque se comportan de maneras diferentes. Opera y
Safari lo hacen bien, pero Firefox e Internet Explorer no.
2. Cmo se pueden utilizar los elementos flotantes para mostrar miniaturas de imgenes en una galera
como "celdas" del mismo tamao sin utilizar una tabla para la distribucin?
3. Cmo podis tener un men de navegacin vertical a la izquierda de la pgina y una columna de
contenido a la derecha sin que el texto del contenido rodee el men por debajo?
4. Una composicin web muy habitual consiste en una cabecera que ocupa toda la anchura, tres columnas
de contenido debajo de sta y a continuacin un pie de pgina al final que vuelve a ocupar toda la
anchura. Cmo se puede conseguir esta composicin con elementos flotantes y clearing?
: :
355/407
CSS - Posicionamiento esttico y relativo con CSS
CSS
Posicionamiento esttico y relativo con CSS
Accesibilidad : : :
Tommy Olsson. 26 de septiembre del 2008 Publicado en: en lnea, composicin, columna, bloque, IE
En este apartado explicaremos con exhaustividad el modo como se puede utilizar CSS para posicionar
elementos HTML en el lugar deseado de una pgina con la propiedad position (posicionar) de CSS y
algunas propiedades relacionadas.
La propiedad position de CSS tiene cuatro valores lcitos (aparte del omnipresente inherit): static
(esttico), relative (relativo), absolute (absoluto) y fixed (fijo). Estos valores tienen un impacto muy
importante sobre la manera en que se representa un elemento. Los valores static y relative estn muy
relacionados, y en este apartado los estudiaremos con gran detalle. Los valores absolute y fixed tambin
estn muy relacionados, pero de momento los dejaremos para el prximo apartado.
36.1. El maravilloso mundo de los rectngulos
36.2. Posicionamiento esttico
36.2.1. Disposicin de cajas de bloque
36.2.2. Disposicin de cajas en lnea
36.3. Posicionamiento relativo
36.3.1. Disposicin de mltiples columnas con requisitos de orden en el cdigo fuente
Crear columnas
Solucionar los problemas con Internet Explorer
36.3.2. Otros usos del posicionamiento relativo
Resumen
Preguntas de repaso
36.1. El maravilloso mundo de los rectngulos
Para empezar, recapitularemos un poco todo lo que hemos dicho en el apartado anterior, dedicado a los
elementos flotantes y al clearing, sobre el CSS y las cajas HTML. Un documento HTML consiste en un
nmero de elementos salpicados con datos de caracteres (texto). Cuando un documento de este tipo se
reproduce en una pantalla de ordenador o en una copia impresa, estos elementos generan cajas
rectangulares. De la misma manera que un conjunto de elementos HTML se divide en elementos de bloque y
elementos en lnea, las cajas CSS tambin pueden ser bsicamente cajas de bloque o cajas en lnea. Por
defecto, la hoja de estilos del agente de usuario integrado de un navegador hace que los elementos HTML
de bloque, como p y div, generen cajas de bloque, mientras que los elementos en lnea, como strong y span,
generan cajas en lnea. Podemos utilizar la propiedad display para controlar el tipo de caja que se generar.
Ved tambin
Las cajas generadas por los elementos de un documento se disponen segn una serie de normas
claramente definidas segn la especificacin CSS2.1. Estas reglas estn escritas para las relativamente
escasas personas que escriben software para navegadores con el fin de que puedan saber cmo funciona el
CSS, pero no para aqullos de nosotros que diseamos pginas web para ganarnos la vida o como aficin.
Por ello existe todo este curso! Como resultado, la especificacin puede ser un tanto difcil de entender. En
este apartado, intentaremos explicar los conceptos bsicos de una manera que resulte apropiada para los
diseadores y desarrolladores de webs.
36.2. Posicionamiento esttico
De hecho, este nombre no es nada adecuado. En realidad, los cuadros con position:static no se
"posicionan" en el sentido del CSS. Simplemente se disponen en el orden en el que aparecen en el
356/407
etiquetado y ocupan todo el espacio que necesitan; ste es el comportamiento por defecto que se da cuando
no se aplica ningn CSS al HTML.
Existen algunas diferencias fundamentales en la manera como se distribuyen las cajas de bloque en
comparacin con la distribucin de las cajas en lnea; por tanto, examinaremos los dos tipos uno a uno.
Empezaremos con las cajas de bloque porque son ms sencillas.
36.2.1. Disposicin de cajas de bloque
Si no aplicamos ninguna declaracin CSS concreta, las cajas de bloque se disponen verticalmente de arriba
abajo en el orden en el que aparecen en el etiquetado. Cada caja es normalmente tan ancha como el
documento (el elemento body), pero incluso si las hacemos ms estrechas, stas no se distribuirn una al
lado de la otra aunque haya espacio, sino que se seguirn situando la una bajo la otra. Podis imaginroslo
como si cada caja de bloque tuviera un salto de lnea implcito antes y despus, ya que as se garantiza que
tendr una "lnea" propia.
La distancia vertical entre dos cajas de bloque se controla con la propiedad margin-bottom (margen-inferior)
de la primera caja y la propiedad margin-top (margen-superior) de la segunda caja (en este curso ya hemos
visto cmo manipular estas propiedades). Para las cajas del flujo normal, es decir, las cajas que no son
flotantes o que no tienen un posicionamiento absoluto, los mrgenes verticales entre dos cajas de bloque
adyacentes se superpondrn, de manera que el resultado final no ser la suma de los dos mrgenes, sino el
mayor de los dos, tal como se puede ver en la figura 1 que se muestra ms adelante.
Mirad el siguiente fragmento de HTML:
<p style="margin-bottom:40px">This paragraph has a 40px bottom margin.</p>
<p style="margin-top:20px">This paragraph has a 20px top margin.</p>
Cuando se muestra en un navegador, los mrgenes se superponen como se puede ver en la figura 1.
Figura 1. Los mrgenes se superponen y la distancia entre los dos es de 40
pxeles, y no de 60 pxeles.
Una caja de bloque incluir slo otras cajas de bloque o slo cajas en lnea. Si un elemento de bloque
contiene una mezcla de hijos de bloque y en lnea (algo permitido pero semnticamente cuestionable), se
generar lo que se conoce como cajas de bloque annimas para incluir las cajas hijas insertadas, de manera
que la madre contenga slo cajas de bloque.
Podis especificar las dimensiones de una caja de bloque con las propiedades width (anchura) y height
(altura). Tambin podis especificar los mrgenes vertical y horizontal. El valor inicial (por defecto) para width
y height es auto, y el valor inicial para las propiedades de margen es 0. Estos factores combinados significan
que una caja de bloque ser por defecto tan ancha como su madre, como muestra la figura 2.
Figura 2. Las cajas de bloque se distribuyen verticalmente.
36.2.2. Disposicin de cajas en lnea
Nota
Este subapartado puede ser difcil de entender si no tenis mucha experiencia con
357/407
CSS, de modo que quiz deberis leerlo unas cuantas veces, pero tampoco os debe
preocupar. La experimentacin por vuestra cuenta es probablemente la mejor manera
para entender bien todas estas cuestiones; slo es necesario que a la hora de hacer
las pruebas utilicis un buen navegador compatible con los estndares, como Opera o
Firefox.
Las cajas en lnea se generan por defecto a partir de los elementos HTML en lnea, pero tambin hay cajas
en lnea annimas generadas para incluir el contenido de texto de los elementos.
Las cajas en lnea se distribuyen horizontalmente, una despus de otra, en el orden en el que aparecen en el
etiquetado. Segn la propiedad direction, los cuadros insertados se distribuirn de izquierda a derecha
(direction:ltr) o de derecha a izquierda (direction:rtl). La direccin de izquierda a derecha se utiliza, por
ejemplo, con los idiomas europeos, mientras que la de derecha a izquierda se utiliza con idiomas como el
rabe y el hebreo.
El grupo de cajas en lnea que forman una lnea en la pantalla (o en el papel) est contenido en otro
rectngulo ms, que se conoce como caja de lnea. Las cajas de lnea se distribuyen verticalmente en su
bloque madre, sin ningn espacio entre ellas. Podemos modificar la altura de las cajas de lnea con la
propiedad line-height.
Para las cajas en lnea no podemos especificar ninguna dimensin. Podemos especificar los mrgenes
horizontales, pero no los verticales.
Si es necesario, una caja en lnea se puede dividir en varias cajas en lnea distribuidas por dos o ms cajas
de lnea. Cuando se produce una divisin de este tipo, todos los mrgenes horizontales y separaciones, y
todos los bordes verticales, se aplicarn slo antes de la primera caja y despus de la ltima caja.
Imaginmonos un documento con la regla siguiente para los elementos em:
em {
margin: 0 2em;
padding: 0 1em;
border: 1px dotted blue;
}
Con esto se obtendr una composicin similar a la que se puede ver en la figura 3, en la que los elementos
con estilo se dividen en mltiples lneas.
Figura 3. Los mrgenes, la separacin y el borde no se aplican donde se
produce la rotura.
La alineacin vertical de las cajas en lnea dentro de la caja de lnea que las contiene est determinada por
la propiedad vertical-align (alineacin-vertical). El valor por defecto es baseline, lo que significa que las
cajas en lnea se alinean de manera que sus lneas base de texto quedan alineadas. La lnea base es la
lnea imaginaria sobre la que se sitan las letras sin astas descendentes. Esta lnea se sita un poco por
encima de la parte inferior de la caja de lnea para dejar espacio para las astas ascendentes de las letras en
minsculas, tal como muestra la figura 4.
Figura 4. Las letras se sitan sobre la lnea base imaginaria.
Observad que la propiedad vertical-align se aplica slo a las cajas en lnea y a las celdas de tabla, y no se
358/407
hereda. La figura 5 muestra algunas imgenes pequeas con diferentes alineaciones verticales.
Figura 5. Las imgenes situadas con los valores de la propiedad vertical-
align del CSS
Cuando la anchura total de las cajas en lnea en una caja de lnea es inferior a la anchura de la caja de lnea
en s, la alineacin vertical se controla con la propiedad text-align. Con text-align:justify (alinear texto:
justificar) se inserta un espacio adicional entre las cajas en lnea, si es necesario, para alinear el contenido a
la izquierda y a la derecha. Esta propiedad se aplica a las cajas de bloque, a las celdas de tablas y a los
bloques en lnea, y se hereda. La figura 6 muestra el resultado de aplicar valores diferentes de la propiedad
text-align al texto que hay en el interior de las celdas de una tabla.
Figura 6. Controlar la alineacin del texto con la propiedad text-align
36.3. Posicionamiento relativo
El posicionamiento relativo es un sistema de posicionamiento de CSS, pero est ms relacionado con el
"posicionamiento" esttico que con sus primos-hermanos: el posicionamiento absoluto y el fijo.
Un elemento con position:relative se coloca en principio igual que cualquier elemento esttico; de bloque o
insertado. Pero entonces sucede algo muy interesante: la caja generada se desplaza segn las propiedades
top, bottom, left y right.
Lo que hay que recordar sobre el posicionamiento relativo es que slo se desplaza la caja generada. El
elemento sigue estando all donde estaba en el flujo del documento esttico. Aqu es donde "ocupa espacio"
respecto a los otros elementos. Eso significa que la caja desplazada puede acabar encima de otras cajas de
elementos, ya que stas siguen actuando como si el elemento con un posicionamiento relativo se hubiera
quedado donde deba estar antes de aplicar el posicionamiento. Respecto al flujo del documento, el
elemento no se ha movido; es slo el resultado visual final lo que muestra la caja desplazada. Veamos cmo
funciona en la prctica.
1. Copiad el siguiente cdigo HTML en un documento nuevo del editor de textos que ms os guste y
guardadlo con el nombre relative.html.
<html>
<head>
<title>Relative Positioning</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetuer adipiscing elit.
Curabitur feugiat feugiat purus.
Aenean eu metus. Nulla facilisi.
Pellentesque quis justo vel massa suscipit sagittis.
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos.
359/407
Quisque mollis, justo vel rhoncus aliquam, urna tortor varius lacus,
ut tincidunt metus arcu vel lorem.
Praesent metus orci, adipiscing eget, fermentum ut, pellentesque non,
dui.
Sed sagittis, <span>metus a semper</span> dictum, sem
libero sagittis nunc, vitae adipiscing leo neque vitae tellus.
Duis quis orci quis nisl nonummy dapibus.
Etiam ante. Phasellus imperdiet arcu at odio.
In hac habitasse platea dictumst. Aenean metus.
Quisque a nibh. Morbi mattis ullamcorper ipsum.
Nullam odio urna, feugiat sed, bibendum sed, vulputate in, magna.
Nulla tortor justo, convallis iaculis, porta condimentum, interdum
nec, arcu.
Proin lectus purus, vehicula et, cursus ut, nonummy et, diam.</p>
</body>
</html>
2. Abrid el archivo con vuestro navegador web para ver qu aspecto tiene en este momento; deberais ver
slo un prrafo de texto normal.
3. Cread un documento nuevo en vuestro editor, copiad el cdigo CSS siguiente y guardad el archivo con
el nombre style.css.
p {
width: 20em;
}
span {
background-color: lime;
}
4. Enlazad la hoja de estilo en el documento HTML insertando la lnea siguiente justo antes de la etiqueta
</head>.
<link rel="stylesheet" type="text/css" href="style.css">
5. Guardad los dos archivos y actualizad la pgina en el navegador. Hemos conseguido que el prrafo sea
ms estrecho para que los saltos de lnea estn siempre en la misma posicin incluso cuando la
ventana del navegador sea pequea. Ahora el elemento span tiene un color de fondo un poco chilln
para hacerlo ms visible.
6. A continuacin, modificaremos la hoja de estilos aadiendo tres declaraciones a la regla para el
elemento span:
span {
position: relative;
top: 1em;
left: 2em;
}
7. Guardad y volved a cargar la pgina en el navegador para ver los efectos del posicionamiento relativo.
Habis desplazado el elemento span tanto vertical como horizontalmente. Observad que queda superpuesto
sobre la lnea de texto siguiente y que en el lugar donde se encontraba ahora hay un espacio vaco.
La manera como se ha desplazado la caja generada quiz no era la que esperabais de este cdigo. Habis
especificado top:1em, pero la caja se ha desplazado hacia abajo. Adems, la caja tambin se ha desplazado
hacia la derecha a pesar de haber especificado left:2em. Por qu?
La clave para entender el funcionamiento de estas propiedades con el posicionamiento relativo es darse
cuenta de que especifican el borde en el que se aplica el movimiento, y no la direccin del movimiento. Es
decir, que la propiedad top desplaza la caja en relacin con su borde superior, la propiedad left lo desplaza
en relacin con su borde izquierdo, y as sucesivamente. La caja se aleja del borde especificado; por lo tanto,
360/407
top:1em desplaza el cuadro 1 em desde la posicin superior, es decir, hacia abajo. Los nmeros negativos
desplazan el cuadro en la direccin opuesta y, por lo tanto, bottom:-1em es lo mismo que top:1em.
Eso nos lleva a otra conclusin: no tiene ningn sentido especificar al mismo tiempo una propiedad top y una
propiedad bottom (o left y right) para el mismo elemento. Las reglas del CSS dicen que si se especifica top,
entonces bottom se debe ignorar. Respecto al movimiento horizontal, esto depende de la propiedad
direction. Si se especifican left y right al mismo tiempo, en un entorno de izquierda a derecha se ignora
right y en un entorno de derecha a izquierda se ignora left.
El ejemplo que hemos visto explica el posicionamiento relativo, pero no parece muy til, verdad? As pues,
para qu sirve el posicionamiento relativo? Echemos un vistazo a un ejemplo ms complicado.
36.3.1. Disposicin de mltiples columnas con requisitos de orden en el cdigo fuente
Aviso: este ejemplo es un tanto complejo. Si es la primera vez que entris en el mundo del CSS, os puede
parecer incluso algo descorazonador, pero lo iremos explicando a un ritmo muy pausado dejando bien claro
qu es lo que hacemos en cada momento. Si todava no habis ledo el apartado anterior, que habla de los
elementos flotantes y del clearing, ahora sera un buen momento para hacerlo.
Ved tambin
Hay un tipo de composicin que es muy habitual en las pginas web. Incluye un encabezamiento, que
normalmente contiene algn logotipo o insignia, bajo la que hay dos o ms "columnas" una al lado de la otra.
Al final suele haber un pie de pgina que ocupa toda la anchura, quiz con el aviso de copyright o la
informacin de contacto. La figura 7 muestra un ejemplo de este tipo de composicin.
Figura 7. Una composicin tpica con mltiples columnas entre un
encabezamiento y un pie de pgina
En la Edad Oscura (la dcada de 1990), este tipo de distribucin se sola crear con tablas. Esto es un uso
inadecuado del etiquetado del HTML para finalidades presentacionales, nada aconsejable; por lo tanto, en
este curso no lo ensearemos. CSS ofrece maneras de conseguir esto mismo con display:table-cell y
similares, pero esta solucin tiene un inconveniente importante: no hay ninguna versin de Internet Explorer
que lo acepte, de modo que tampoco la veremos. Slo nos quedan dos opciones: los elementos flotantes y el
361/407
posicionamiento absoluto. Estos dos mtodos tienen ventajas e inconvenientes, pero si queris un pie de
pgina que ocupe toda la anchura y no sabis de entrada qu columna ser la ms larga, entonces
necesitaris los elementos flotantes para garantizar la integridad del diseo.
El problema de los elementos flotantes es que slo se desplazan hacia la derecha o la izquierda hasta que
tocan el borde del bloque padre u otro elemento flotante. Esto quiere decir que las columnas flotantes deben
aparecer en el orden correcto en el etiquetado. Pero algunas veces se quiere tener un orden presentacional
diferente del orden del cdigo fuente. Quiz os interese que el contenido aparezca antes de la navegacin,
por ejemplo, con el fin de mejorar la usabilidad de la navegacin con el teclado y la optimizacin en motores
de bsqueda. Esto se puede conseguir, incluso con elementos flotantes, haciendo un buen uso de los
mrgenes negativos y el posicionamiento relativo; veamos cmo hacerlo. Empezaremos con un documento
HTML que nos servir de base para ir trabajando.
1. Copiad el cdigo siguiente en vuestro editor de textos y guardad el archivo con el nombre layout.html.
<html lang="en">
<head>
<title>Static and Relative Positioning</title>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<div id="header">Header</div>
<div id="main">Main content</div>
<div id="sidebar">Sidebar</div>
<div id="nav">Navigation</div>
<div id="footer">Footer</div>
</body>
</html>
2. A continuacin, crearemos el embrin de una hoja de estilos. Copiad el cdigo siguiente en vuestro
editor de textos y guardad el archivo con el nombre layout.css.
#header {
color: #fff;
}
#sidebar {
}
#nav {
background-color: #ddd;
}
#footer {
}
3. Guardad los dos archivos y cargad la pgina en el navegador. Las cinco divisiones aparecen en orden,
de arriba abajo.
Imaginaos que el departamento de diseo ha especificado que la navegacin debe ir a la izquierda, la
barra lateral a la derecha y el contenido principal en la columna de en medio. El encabezamiento y el pie
de pgina deben ocupar toda la anchura de la pgina, pero no sabemos cul de las tres columnas ser
la ms larga. El orden del cdigo fuente viene determinado por los expertos en accesibilidad y usabilidad
y no es negociable. Cmo se pueden combinar todos estos requisitos para conseguir una composicin
que funcione?
Para que funcione, deberis aadir un elemento adicional al etiquetado. Es inevitable, pero un elemento
adicional es algo que no os debera preocupar demasiado. Necesitaris un elemento que envuelva las
tres "columnas".
4. Insertad las dos lneas destacadas en el documento HTML:
362/407
<div id="header">Header</div>
<div id="wrapper">
<div id="main">Main content</div>
<div id="sidebar">Sidebar</div>
<div id="nav">Navigation</div>
</div>
<div id="footer">Footer</div>
Los diseadores (que, por suerte, son conscientes de la accesibilidad y de la independencia de
dispositivo) han estipulado que la navegacin debe tener una anchura de 12 em y la barra lateral, de 14
em. La columna con el contenido principal debe tener una anchura fluida, de manera que la composicin
se adapte a diferentes tamaos de ventanas, ya que las composiciones con una anchura fija no son
demasiado fciles de utilizar por el usuario. Para evitar que las lneas de texto sean demasiado largas y
dificulten la legibilidad, deberis limitar la composicin a una anchura mxima. Para evitar el
solapamiento en ventanas sumamente estrechas, tambin deberis limitar la composicin a una anchura
mnima. Dentro de estas limitaciones, la composicin se debe centrar horizontalmente en la ventana del
navegador.
5. A continuacin, asignad las anchuras a la navegacin y a la barra lateral y definid las limitaciones de
anchura y el centrado general aadiendo las reglas siguientes al final del archivo CSS:
body{
margin: 0 auto;
min-width: 40em;
max-width: 56em;
}
#sidebar {
width: 13em;
padding: 0 0.5em;
}
#nav {
width: 11em;
padding: 0 0.5em;
}
6. Guardad los archivos y volved a cargarlos; deberais ver la barra lateral amarilla y la navegacin de color
gris con las anchuras deseadas. Si la ventana del navegador es bastante ancha, tambin veris que
toda la pgina tiene una anchura limitada y que aparece centrada horizontalmente.
7. Intentad cambiar el tamao de la ventana y mirad cmo se adapta la composicin.
Nota
Si utilizis la versin 6 o anterior de Microsoft Internet Explorer, no podris ver los
efectos de ninguna limitacin de la anchura. Esto es as porque estas versiones del IE
no aceptan anchuras (o alturas) mnimas y mximas. Al final del ejemplo veremos una
manera de solucionar este problema. De hecho, a lo largo de todo este ejemplo iris
viendo unos resultados extraos, incluso con IE 7, porque Internet Explorer tiene
muchos errores de representacin. En este ejemplo nos centraremos en la manera de
hacer las cosas segn los estndares, y al final ya veremos las soluciones.
Si observis el cdigo con atencin, veris que las anchuras estn fijadas en 13 em y 11 em en lugar de 14
em y 12 em. Esto es as porque necesitamos un poco de separacin horizontal; no queremos que el
contenido de estas columnas toque los bordes, ya que no queda demasiado bien. La separacin se aade a
la anchura, con lo cual 13 em + 0,5 em + 0,5 em suman un total de 14 em, que es lo que queremos.
Crear columnas
Muy bien, ahora ya tenemos los componentes bsicos, pero se muestran uno despus de otro. Como
queremos tres columnas, las deberemos empezar a hacer flotar.
363/407
1. Aadid las reglas siguientes a vuestro archivo CSS:
#main {
float: left;
}
#sidebar {
float: left;
width: 13em;
padding: 0 0.5em;
}
#nav {
float: left;
width: 11em;
padding: 0 0.5em;
}
Con este cdigo se hacen flotar las columnas, s, pero no se muestran en el orden correcto. Adems, la
columna del contenido principal es demasiado estrecha. Y qu ha pasado con el pie de pgina?
2. En primer lugar, nos encargaremos del pie de pgina. El problema es que hemos hecho flotar las tres
columnas, con lo que han quedado fuera del flujo del documento. El pie de pgina queda justo debajo
del encabezamiento y la caja de lnea que contiene el texto se ha acortado, de manera que la palabra
"Footer" aparece a la derecha de los elementos flotantes. Podemos solucionarlo haciendo que el pie de
pgina est a una cierta distancia de todas las columnas flotantes. Aadid la regla siguiente a vuestro
archivo CSS:
#footer {
clear: left;
}
3. Y ahora nos dedicaremos a las tres columnas. Lo haremos paso a paso, y durante un momento todo
tendr un aspecto horrible; pero no os desesperis porque al final todo acabar bien.
La clave es el elemento de envoltorio. Definiremos unos mrgenes izquierdo y derecho que se
correspondan con las anchuras de las columnas laterales (la navegacin y la barra lateral). La columna
del contenido principal ocupar toda la anchura del envoltorio y las columnas laterales se desplazarn
hacia el espacio que dejan vaco los mrgenes. Suena complicado? No os preocupis, lo iremos
haciendo poco a poco. En primer lugar definiremos los mrgenes del envoltorio aadiendo la regla
siguiente al archivo CSS:
#wrapper {
margin: 0 14em 0 12em;
padding: 0 1em;
}
Recordad que los valores de la propiedad margin abreviada se especifican en el orden TRaBaLenguas,
es decir: top (superior), right (derecho), bottom (inferior), left (izquierdo). Definimos los mrgenes
superior e inferior a 0, el margen derecho en 14 em (para la barra lateral) y el margen izquierdo en 12
em (para la navegacin). Tambin hemos aadido 1 em de separacin horizontal porque no queremos
que el contenido toque las columnas laterales, ya que debe respirar.
4. El siguiente paso es hacer que la columna del contenido principal ocupe toda la anchura de su elemento
envoltorio padre; el cdigo tambin define un color de fondo chilln para esta columna, temporalmente:
#main {
float: left;
width: 100%;
}
364/407
5. Guardad el archivo y volved a cargarlo; veris una columna de contenido de color verde lima con la
barra lateral y la navegacin debajo. Tambin veris que hay mucho espacio en blanco a ambos lados.
Lo que debemos hacer ahora es conseguir que nuestras columnas laterales se desplacen hacia este
espacio en blanco.
De momento, nos dedicaremos a la barra lateral, que es flotante y ya tiene la anchura correcta, pero
como la columna #main tiene una anchura del 100% la barra lateral se desplaza hacia abajo. Cmo
podemos hacer que suba y se coloque al lado de #main teniendo en cuenta que #main ocupa toda la
anchura? Lo haremos en dos pasos: en primer lugar, la moveremos hacia arriba y, despus, la
desplazaremos hacia el margen.
6. Para conseguir que la barra lateral flotante, que se ha desplazado hacia abajo, vuelva a ir hacia arriba,
utilizaremos un truco muy ingenioso. Aadid lo siguiente a la regla #sidebar:
#sidebar {
float: left;
width: 13em;
padding: 0 0.5em;
margin-left: -14em;
}
7. Guardad, volved a cargar y veris que la barra lateral se encuentra ahora a la misma altura vertical que
la columna del contenido. Con un margen izquierdo negativo igual a la anchura de la barra lateral,
estamos moviendo el elemento hacia el interior del envoltorio y ya no se desplaza hacia abajo. El
problema es que queda sobre el contenido.
8. Deberis desplazarla hacia el margen sin que vuelva a ir hacia abajo, y aqu es donde entra en juego
finalmente el posicionamiento relativo. ste hace precisamente lo que queremos: desplaza la caja
generada sin mover el elemento en s. Aadid las propiedades destacadas del cdigo siguiente a la
regla para #sidebar:
#sidebar {
float: left;
width: 13em;
padding: 0 0.5em;
margin-left: -14em;
position: relative;
left: 15em;
}
Observad que hemos tenido que desplazar el elemento 15 em, y no 14 em. Esto es as porque en el
envoltorio hay 1 em de separacin a la derecha que es necesario que superemos. La barra lateral ya se
encuentra en el lugar donde debe estar: hacia el margen, al lado de la columna del contenido y bien
alineada con los bordes derechos del encabezamiento y el pie de pgina.
9. Ahora debis hacer lo mismo con la navegacin; el procedimiento es similar, pero hay un pequeo
detalle que debis tener en cuenta. Mover y desplazar la barra lateral ha sido fcil porque los
movimientos eran bsicamente los mismos que la anchura de la columna: un margen negativo de 14 em
y un desplazamiento de 14 em + 1 em hacia la derecha. Pero la columna de la navegacin se debe
mover por encima de la columna del contenido y entonces todava se debe desplazar ms hacia el
margen.
Aqu nuestros aliados sern los porcentajes. Un valor de porcentaje en los mrgenes de la columna de
la navegacin ser relativo a la anchura de su padre, el envoltorio. Como queris mover la columna
hasta el extremo del envoltorio, aadid la propiedad destacada del cdigo siguiente a la regla para #nav:
#nav {
float: left;
width: 11em;
padding: 0 0.5em;
margin-left: -100%;
365/407
}
10. Ya lo tenemos! Guardad, volved a cargar y veris la navegacin sobre la parte izquierda de la columna
del contenido. Todo lo que debis hacer es desplazarla hacia el margen. Aadid las siguientes
propiedades resaltadas a la regla para #nav:
#nav {
float: left;
width: 11em;
padding: 0 0.5em;
margin-left: -100%;
position: relative;
right: 13em;
}
Aqu tambin la anchura de la navegacin es de 12 em, pero tenemos 1 em de separacin del envoltorio
que debemos superar, por lo que es necesario que desplacemos la caja 13 em. Lo estis desplazando
hacia la izquierda, es decir, desde el borde derecho, y por ello utilizamos la propiedad right.
11. Eliminad el fondo de color verde lima de la columna del contenido y ya lo tendris todo.
Solucionar los problemas con Internet Explorer
Hay dos propiedades de esta composicin que hacen que no funcione bien con Internet Explorer 6 para
Windows. Uno de los problemas es que IE 6 no acepta las propiedades min-width (anchura mn.) y max-width
(anchura mx.) y el otro es que IE es muy malo con los porcentajes.
Para emular las restricciones de anchura, podis utilizar la notacin expression() exclusiva de Microsoft.
Toma una expresin de JScript como argumento y proporciona el valor de retorno de esta expresin. Si exige
hacer muchos clculos, esta expresin puede provocar problemas de rendimiento, ya que se calcula cada
vez que el navegador debe definir la anchura de body. Tambin exige que JScript est activado, pero podis
aadir una degradacin muy elegante, de manera que si, por ejemplo, JScript no est disponible, el diseo
recurrir a una alternativa que seguir siendo utilizable. En este ejemplo haris que la maquetacin sea
totalmente elstica en lugar del diseo fluido limitado que hemos creado antes si JScript est desactivado.
La manera recomendada de utilizar reglas de estilos para solucionar problemas en Internet Explorer es
utilizando los "comentarios condicionales". sta es una funcin nica de Microsoft que integra lgica
condicional en los comentarios del HTML (hay un apartado dedicado exclusivamente a los comentarios
condicionales en dev.opera.com).
1. Aadid las lneas siguientes en el cdigo HTML justo antes de la etiqueta </head>:

2. Ahora cread un archivo nuevo con el nombre layout-ie6.css que contenga lo siguiente:
body{
width: 50em;
width: expression(w=document.documentElement.offsetWidth,
em=document.getElementById("nav").offsetWidth/12,
(w<40*em?"40em":(w>56*em?"56em":"auto")));
}
#wrapper {
height: 1em;
}
#nav {
margin-left: -22em;
margin-left: expression((-(document.getElementById("wrapper").
clientWidth))+"px");
left: 13em;
366/407
}
As se solucionan los dos problemas de IE 6. Utilizamos expresiones JScript para emular las propiedades
min-width y max-width, que IE 6 no acepta, con un valor alternativo elstico de 50 em. A continuacin
utilizamos otra expresin JScript para definir un margen izquierdo en pxeles en lugar de porcentajes,
tambin con un valor alternativo elstico. La altura para #wrapper es slo para habilitar la propiedad hasLayout
especfica de Microsoft, que necesitamos para que el posicionamiento relativo de la navegacin funcione
correctamente. Microsoft ha documentado hasLayout en la MSDN, pero no es precisamente fcil de entender.
Y qu sucede con IE 7? S acepta min-width y max-width, pero sigue situando mal el elemento de la
navegacin; es el mismo problema de hasLayout de IE 6 que vuelve a asomar la cabeza. Debis habilitar
hasLayout en el elemento #wrapper. Por suerte, podis hacerlo de manera que no comprometa a los
navegadores conformes con los estndares, o sea que no ser necesario que creis una hoja de estilos
diferente para IE 7; podis aadir sencillamente la regla siguiente para manipular el envoltorio:
#wrapper {
margin: 0 14em 0 12em
padding: 0 1em;
min-height: 1em;
}
La definicin de una altura mnima habilita hasLayout y no provoca ningn problema en otros navegadores, es
decir, lo podis poner en la hoja de estilos principal.
Estas soluciones no son perfectas; si el tamao de la ventana se modifica en determinadas dimensiones, la
composicin seguir haciendo cosas raras en IE 6 e IE 7, aunque si se vuelve a cargar la pgina, la
composicin quedar bien otra vez.
36.3.2. Otros usos del posicionamiento relativo
El uso ms habitual del posicionamiento relativo no implica desplazar la caja generada. Esto puede sonar
extrao: por qu deberais utilizar el posicionamiento relativo sin desplazar la caja? Explicaremos esta razn
en el apartado siguiente porque tambin tiene que ver con el posicionamiento absoluto. As pues, deberis
esperar un poco.
Definir position:relative (sin desplazar la caja) tambin puede ser til con algunos problemas de
representacin extraos de Internet Explorer. Activa la famosa propiedad interna hasLayout, que tiene un
impacto muy importante en la representacin que hace Internet Explorer de los elementos.
Resumen
El posicionamiento esttico es la manera por defecto de hacer las cosas. Las cajas de bloque se distribuyen
verticalmente segn el orden en el que aparecen en el cdigo fuente, mientras que las cajas en lnea se
distribuyen horizontalmente en cajas en lnea dentro de estas cajas de bloque.
El posicionamiento relativo permite desplazar la caja generada en una o dos dimensiones. El elemento sigue
ocupando espacio como si fuera esttico, pero la caja generada se puede desplazar a otra posicin. El
posicionamiento relativo se utiliza principalmente en combinacin con elementos flotantes para crear
composiciones en las que el orden de la presentacin es diferente del orden del cdigo fuente.
Preguntas de repaso
1. Qu sucede cuando dos mrgenes adyacentes de un contexto de formato esttico se superponen y
uno o ambos mrgenes son negativos?
2. Aadid un borde vertical entre cada una de las columnas laterales y la columna del contenido principal.
Recordad que las tres columnas son flotantes, con lo cual la altura del elemento de envoltorio ha pasado
a ser cero.
367/407
3. Cmo podis hacer que todas las columnas tengan la misma altura (o que como mnimo lo parezca),
de manera que los colores de fondo lleguen hasta el pie de pgina sea cual sea la columna ms larga?
(Consejo: buscad "faux columns" en vuestro motor de bsqueda preferido.)
: :
368/407
CSS - Posicionamiento absoluto y fijo con CSS
CSS
Posicionamiento absoluto y fijo con CSS
Accesibilidad : : :
Tommy Olsson. 26 de septiembre del 2008. Publicado en: ndice z, apilamiento, recipiente, bloque, continente
Este es el momento de fijarnos en el segundo par de valores de propiedad de position: absolute (absoluto) y
fixed (fijo). El primer par de valores: static (esttica) y relative (relativo) estn ntimamente relacionados, y
ya los vimos en el apartado anterior.
Los elementos posicionados absolutamente se eliminan completamente del flujo del documento. Esto
significa que no tienen ningn efecto sobre su elemento padre ni sobre los elementos que aparecen despus
de ellos en el cdigo fuente. Por lo tanto, un elemento posicionado absolutamente se superpondr sobre
otros contenidos a no ser que se tome alguna medida para evitarlo. En ocasiones, por supuesto, esta
superposicin es exactamente lo que queris, pero deberais ser conscientes de ello para aseguraros de que
obtenis la composicin que queris.
El posicionamiento fijo es de hecho una forma especializada del posicionamiento absoluto; los elementos con
posicionamiento fijo estn fijos en relacin con la ventana o viewport del navegador en vez de estarlo en
relacin con el elemento continente; incluso si se desplaza la pgina, se mantienen exactamente en la misma
posicin en la ventana del navegador.
En este apartado os daremos algunos ejemplos prcticos del uso de los posicionamientos absolute y fixed,
observaremos algunos pequeos problemas de compatibilidad de navegadores y nos fijaremos en el
concepto de ndice z.
Pero antes de empezar a hablar de todo esto, trataremos un concepto previo esencial: los bloques
contenedores.
37.1. Bloques contenedores
37.2. Posicionamiento absoluto
37.2.1. Especificacin de la posicin
37.2.2. Especificacin de las dimensiones
37.2.3. La tercera dimensin: ndice Z
Contextos de apilamiento local
37.3. Posicionamiento fijo
Resumen
Preguntas de repaso
37.1. Bloques contenedores
Un concepto fundamental respecto al posicionamiento absoluto es el bloque contenedor: la caja de bloque
respecto a la que se encuentran la posicin y las dimensiones de la caja posicionada absolutamente.
Para las cajas estticas y posicionadas relativamente, la caja contenedora es la antepasada del bloque ms
prximo o, dicho de otro modo, el elemento padre. No obstante, para los elementos posicionados
absolutamente es algo ms complicado. En este caso, la caja contenedora es el antepasado posicionado
ms prximo. Con posicionado nos referimos a un elemento cuya propiedad position est establecida en
relative, absolute o fixed, es decir, cualquier cosa excepto elementos estticos normales.
De manera que, establecer position:relative para un elemento lo convierte en bloque contenedor de
cualquier descendiente posicionado absolutamente (elementos hijos), tanto si aparecen inmediatamente
debajo del elemento posicionado relativamente en la jerarqua, o ms abajo.
Si un elemento posicionado absolutamente no tiene un antepasado posicionado, entonces el bloque
contenedor es lo que se llama bloque contenedor inicial , que en la prctica equivale al elemento html. Si
estis mirando la pgina web en pantalla, se refiere a la ventana del navegador; si vais a imprimir la pgina,
se refiere a los lmites de la pgina.
369/407
Los elementos con posicionamiento fijo difieren ligeramente, ya que su bloque contenedor siempre es el
bloque contenedor inicial.
As pues, resumimos en una serie de sencillos pasos; para encontrar el bloque contenedor de un elemento
con position:absolute, esto es lo que debis hacer:
1. Mirad el elemento padre del elemento posicionado absolutamente: la propiedad position de este
elemento tiene uno de los valores relative, absolute o fixed?
2. Si es as, habis encontrado el bloque contenedor.
3. En caso contrario, pasad al elemento padre del padre y empezad de nuevo desde el paso 1 hasta que
encontris el bloque contenedor u os quedis sin antepasados.
4. Si habis llegado al elemento html sin encontrar un antepasado posicionado, entonces el bloque
contenedor es el elemento html.
37.2. Posicionamiento absoluto
El posicionamiento fijo es una forma especial de posicionamiento absoluto, de manera que lo estudiaremos
ms adelante y ahora nos concentraremos en el caso ms generalizado. A no ser que se indique lo contrario,
cuando utilizamos el trmino posicionado absolutamente desde ahora hasta el final del apartado, nos
estaremos refiriendo tanto a elementos con position:fixed como a elementos con position:absolute.
37.2.1. Especificacin de la posicin
Con el posicionamiento relativo, habis aprendido que las propiedades top, right, bottom y left se pueden
utilizar para especificar la posicin de la caja. Para especificar la posicin de una caja posicionada
absolutamente se utilizan las mismas propiedades, pero la manera de utilizarlas es bastante diferente.
Para un elemento posicionado relativamente, las cuatro propiedades especifican la distancia relativa para
desplazar la caja generada. Recordad que en el caso del posicionamiento relativo se complementan entre s,
de manera que top:1em y bottom:-1em quieren decir lo mismo, y no tiene mucho sentido especificar tanto top
como bottom (o left y right) para el mismo elemento porque uno de los valores se ignorar.
Estos puntos no son ciertos en el caso del posicionamiento absoluto. En este caso, se pueden utilizar las
cuatro propiedades al mismo tiempo para especificar la distancia desde cada borde del elemento posicionado
hasta el borde correspondiente del bloque continente. Tambin se puede especificar la posicin de una de
las esquinas del cuadro posicionado absolutamente, por ejemplo utilizando top y left, y entonces especificar
las dimensiones del cuadro mediante width y height (o simplemente no utilizar width y height si queris dejar
que se ajuste para encajar su contenido).
La versin 6 de Microsoft Internet Explorer (y anteriores) no acepta el mtodo de especificar los cuatro
bordes, pero s el mtodo de especificar una esquina ms las dimensiones.
/* Este mtodo funciona en IE6 */
#foo {
position: absolute;
top: 3em;
left: 0;
width: 30em;
height: 20em;
}
/* Este mtodo funciona en IE6 */
#foo {
position: absolute;
top: 3em;
right: 0;
bottom: 3em;
left: 0;
}
370/407
Lo que debis recordar en este caso es que los valores que habis establecido para las propiedades top,
right, bottom y left especifican las distancias desde los bordes del elemento hasta los bordes de su bloque
continente correspondiente. No es como en un sistema de coordenadas donde cada valor es relativo a un
punto de origen. Por ejemplo, right:2em significa que el borde derecho del cuadro posicionado absolutamente
estar a 2 em del borde derecho del bloque contenedor.
Es absolutamente esencial saber cul es el bloque contenedor cuando se utiliza el posicionamiento absoluto.
Por ello es tan til configurar position:relative en el bloque contenedor, incluso si no se desplaza realmente
la posicin del cuadro. Esto permite hacer que un elemento sea el bloque contenedor de sus descendientes
posicionados absolutamente, es decir, os proporciona el control.
Probemos un ejemplo para ver cmo funciona.
1. Copiad el cdigo siguiente en vuestro editor de texto y guardad el documento como absolute.html.
<html>
<head>
<title>Absolute Positioning</title>
<link rel="stylesheet" type="text/css" href="absolute.css">
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
</body>
</html>
2. A continuacin, copiad el cdigo siguiente en un nuevo archivo y guardadlo como absolute.css.
html, body {
margin: 0;
padding: 0;
}
#outer {
margin: 5em;
}
#inner {
width: 6em;
height: 4em;
}
3. Guardad los dos archivos y cargad el documento HTML en vuestro navegador. Veris un rectngulo gris
rodeado de un marco algo ms ancho de color rojo. El elemento #inner tiene una anchura y altura
especificadas y un color gris de fondo. El elemento #outer, que es el padre estructural de #inner, tiene
un marco rojo. Tambin tiene un margen de 5 em alrededor para alejarlo de los bordes de la ventana
del navegador y dejarnos ver ms claramente qu es lo que ocurre.
Nada sorprendente hasta ahora, verdad? La altura del elemento #outer viene dada por su elemento
hijo (#inner) y la anchura por los mrgenes horizontales.
4. Mirad qu sucede ahora si hacis que el elemento #inner est posicionado absolutamente. Aadid la
siguiente lnea resaltada en la regla de #inner:
#inner {
width: 6em;
height: 4em;

371/407
position: absolute;
}
5. Guardad y recargad. En vez de un marco rojo en torno al rectngulo gris, ahora vemos lo que parece un
marco ms grueso slo en la parte superior. Y el cuadro gris no se ha movido en absoluto. Os lo
esperabais?
Pasan dos cosas interesantes aqu: en primer lugar, hacer que #inner est posicionado absolutamente
lo ha eliminado completamente del flujo del documento. Esto significa que su padre, #outer, ahora no
tiene hijos que se encuentren en el flujo normal y, por lo tanto, su altura se reduce a cero. Lo que
parece una lnea roja de 2 pxeles de grueso es realmente un borde de 1 pxel alrededor de un elemento
con altura cero: estis viendo los bordes superiores e inferiores sin nada en medio.
Lo segundo interesante es que el cuadro posicionado absolutamente no se ha movido. El valor
predeterminado para las propiedades top, right, bottom y left es auto, lo que significa que el cuadro
posicionado absolutamente aparecer exactamente donde habra estado si no hubiera sido posicionado.
Pero como se ha eliminado del flujo, se superpondr a cualquier elemento del flujo normal que lo siga.
Esto es realmente muy til: podis utilizarlo si slo queris mover un cuadro generado en una
dimensin. Por ejemplo, en un men desplegable de CSS, los paneles "desplegables" se pueden
posicionar absolutamente especificando slo la propiedad top. Entonces aparecern automticamente en
la coordenada prevista a lo largo del eje X (igual que su padre).
6. A continuacin, establecemos una altura para el elemento #outer de manera que vuelva a parecer un
rectngulo y movemos #inner lateralmente. Aadid las siguientes lneas resaltadas a las reglas de CSS:
#outer {
margin: 5em;
height: 4em;
}
#inner {
width: 6em;
height: 4em;
position: absolute;
left: 1em;
}
7. Guardad y recargad y veris algunos cambios. El elemento #outer ahora es un rectngulo otra vez, ya
que le habis especificado una altura. El elemento #inner se ha desplazado lateralmente, pero no donde
se podra esperar encontrarlo. No est a 1 em del borde izquierdo de su padre, sino a 1 em del borde
izquierdo de la ventana.
El motivo es que, como se ha explicado antes, #inner no tiene un antepasado posicionado, de manera
que su bloque continente es el bloque continente inicial. Si especificis una posicin diferente de auto,
es relativa al borde correspondiente del bloque continente. Cuando habis establecido left:1em, el borde
izquierdo de #inner ha acabado a 1 em del borde izquierdo de la ventana.
8. Si en vez de esto lo queris a 1 em del borde izquierdo de su elemento padre, debis hacer padre al
bloque contenedor. Para hacerlo, ahora utilizaris el truco que hemos mencionado anteriormente en
este apartado: hacer que el bloque padre est posicionado relativamente. Aadid la siguiente lnea
resaltada a la regla #outer:
#outer {
margin: 5em;
height: 4em;
position: relative;
}
9. Guardad y recargad: pasen y vean! El rectngulo gris ahora est a 1 em del borde izquierdo del
elemento padre. Establecer position:relative en la regla #outer ha hecho que est posicionado y lo ha
372/407
establecido como bloque contenedor para cualquier descendiente posicionado relativamente que pueda
tener. El left:1em que habis establecido para #inner ahora cuenta a partir del borde izquierdo de
#outer, no del borde izquierdo de la ventana del navegador.
37.2.2. Especificacin de las dimensiones
Los elementos posicionados absolutamente se ajustarn para encajar su contenido a no ser que
especifiquis sus dimensiones. Podis especificar la anchura o bien definiendo las propiedades left y right,
o bien definiendo la propiedad width. Podis especificar la altura definiendo las propiedades top y bottom, o
definiendo la propiedad height.
Cualquiera de estas seis propiedades se puede especificar como porcentaje. Los porcentajes son, por su
propia naturaleza, relativos a alguna otra cosa. En este caso, son relativos a las dimensiones del bloque
contenedor.
Para un elemento posicionado absolutamente, los valores de porcentaje para las propiedades left, right y
width son relativos a la anchura del bloque continente. Los valores de porcentaje para las propiedades top,
bottom y height son relativos a la altura del bloque continente.
El navegador Internet Explorer 6 y anteriores, y tambin Opera 8 y anteriores, lo interpretaron de manera
totalmente errnea y utilizaron las dimensiones del bloque padre en su lugar. Vamos a probar con otro
ejemplo para ver cmo esto puede suponer una gran diferencia.
1. Empezad especificando las dimensiones de #inner mediante valores de porcentaje; haced los siguientes
cambios en la regla #inner:
#inner {
width: 50%;
height: 50%;
position: absolute;
left: 1em;
}
2. Guardad y recargad, y veris que el rectngulo gris se hace ms ancho y ms corto (como mnimo si
estis utilizando un navegador moderno). El bloque continente es todava #outer porque tiene
position:relative. La anchura del elemento #inner ahora es la mitad de la de #outer, y su altura es la
mitad de la altura de #outer.
3. Hacemos que el viewport sea el bloque contenedor una vez ms, para ver la diferencia. Haced el
siguiente cambio en #outer:
#outer {
margin: 5em;
height: 4em;
position: static;
}
4. Guardad y recargad; una diferencia notable, verdad? El cuadro gris es ahora la mitad de ancho y la
mitad de alto que la ventana del navegador.
Como podis ver, saber cules son vuestros bloques contenedores es absolutamente esencial.
37.2.3. La tercera dimensin: ndice Z
Es natural considerar que una pgina web tiene dos dimensiones. La tecnologa no ha evolucionado tanto
como para que las pantallas 3D estn generalizadas, de manera que nos debemos conformar con anchura,
altura y falsos efectos 3D. Pero la representacin CSS realmente se produce en tres dimensiones. Esto no
quiere decir que pueda hacer que un elemento vuele delante del monitor (an), pero puede hacer otras
cosas tiles con los elementos posicionados.
Los dos ejes principales de una pgina web son el eje horizontal X y el eje vertical Y. El origen de este
373/407
sistema de coordenadas se encuentra en la esquina superior izquierda de la ventana, es decir, donde tanto el
valor X como Y son 0.
Pero tambin hay un eje Z, que podemos imaginar como perpendicular a la superficie del monitor (o del
papel, si se trata de una impresin). Los valores Z ms altos indican una posicin de "delante" de los valores
Z ms bajos. Los valores Z tambin pueden ser negativos, y en este caso indican una posicin "detrs" de
algn punto de referencia (explicaremos este punto de referencia a continuacin).
Nota
Antes de continuar, debemos advertiros que ste es uno de los temas ms
complicados de CSS, as que no os desmoralicis si no lo entendis a la primera.
Los elementos posicionados (incluidos los elementos posicionados relativamente) se representan dentro de lo
que se conoce como contexto de apilamiento. Los elementos dentro de un contexto de apilamiento tienen el
mismo punto de referencia a lo largo del eje Z. A continuacin lo explicaremos ms detalladamente. Podis
cambiar la posicin Z (tambin denominada nivel de pila) de un elemento posicionado utilizando la propiedad
z-index. El valor puede ser un nmero entero (que puede ser negativo) o una de las palabras clave auto o
inherit. El valor predeterminado es auto, lo que quiere decir que el elemento tiene el mismo nivel de pila que
su padre.
Debis tener en cuenta que slo podis especificar una posicin ndice a lo largo del eje Z. No podis hacer
que un elemento aparezca 19 pxeles detrs o 5 centmetros delante de otro. Pensad en eso como si fuera
una baraja de cartas: Podis apilar las cartas y decidir que el as de espadas est sobre el tres de diamantes;
cada carta tiene su nivel de pila, o ndice Z.
Si especificis z-index como un entero positivo, le asignis un nivel de pila "delante de" el resto de
elementos del mismo contexto de apilamiento que tienen un nivel de pila inferior. Un z-index de 0 (zero)
significa lo mismo que auto, pero hay una diferencia de la que hablaremos en un momento. Un valor entero
negativo para z-index asigna un nivel de pila "detrs de" el nivel de apilamiento padre.
Cuando dos elementos del mismo contexto de apilamiento tienen el mismo nivel de pila, lo que aparece
posteriormente al cdigo fuente aparecer encima de sus hermanos predecesores.
De hecho, no puede haber menos de siete capas en un contexto de apilamiento, y en cada una de estas
capas puede haber cualquier nmero de elementos, pero no os preocupis: lo ms probable es que nunca
tengis que tratar con siete capas en un contexto de apilamiento. El orden en el que los elementos (todos los
elementos, no slo los posicionados) se representan en un contexto de apilamiento, desde detrs hacia
adelante, es el siguiente:
1. El fondo y los bordes de los elementos que forman el contexto de apilamiento.
2. Descendientes posicionados con niveles de pila negativos.
3. Descendientes de nivel de bloque en el flujo normal.
4. Descendientes flotantes.
5. Descendientes de nivel en lnea en el flujo normal.
6. Descendientes posicionados con el nivel de pila definido como auto o 0 (cero).
7. Descendientes posicionados con niveles de pila positivos.
Las entradas resaltadas son los elementos con un nivel de pila que se puede cambiar mediante la propiedad
z-index.
Todo puede ser bastante difcil de imaginar, de modo que, hagamos algunos experimentos prcticos para
ilustrar el ndice Z.
1. Empezad aadiendo la siguiente lnea resaltada a vuestro pequeo documento de muestra:
<body>
<div id="outer">
<div id="inner"></div>
374/407
<div id="second"></div>
</div>
</body>
2. A continuacin os explicaremos cmo restaurar el CSS de manera que #outer sea el bloque contenedor
y cmo establecer dimensiones no porcentuales de #inner. Hagamos que #outer sea un poco ms alto,
tambin, para tener ms espacio para hacer pruebas. Haced los siguientes cambios resaltados en las
dos reglas:
#outer {
margin: 5em;
height: 8em;
position: relative;
}
#inner {
width: 5em;
height: 5em;
position: absolute;
left: 1em;
}
3. Aadid una regla para el elemento #second, tambin:
#second {
width: 5em;
height: 5em;
background-color: #00f;
position: absolute;
top: 1em;
left: 2em;
}
4. Guardad y recargad y veris un cuadro azul brillante que se superpone a uno gris. Ambos cuadros
tienen el mismo nivel de pila (auto, el valor inicial, que significa un nivel de pila 0), pero el cuadro azul se
representa ante el cuadro gris porque aparece ms tarde en el cdigo fuente. Podis hacer que el
cuadro gris aparezca delante asignndole un nivel de pila positivo. Slo debis especificar que sea
mayor que 0: no hace falta exagerar y utilizar un valor como 10.000. Aadid la siguiente lnea resaltada
en la regla #inner:
#inner {
width: 5em;
height: 5em;
position: absolute;
left: 1em;
z-index: 1;
}
5. Guardad y recargad, y veris cmo el cuadro gris aparece ante el cuadro azul.
Contextos de apilamiento local
El resto de este subapartado trata de los contextos de apilamiento locales. Muy probablemente, no os
encontraris con eso muy a menudo trabajando como diseadores, a no ser que intentis hacer algo
realmente avanzado con posicionamiento absoluto, pero hemos decidido incluirlo igualmente por completitud.
Si queris, podis saltaros esta seccin.
Cada elemento que tenga el z-index especificado como un entero establece un contexto de apilamiento
nuevo, "local", en el que el propio elemento tiene un nivel de pila 0. sta es la diferencia que hemos
mencionado antes entre z-index: auto y z-index: 0. El anterior no establece un nuevo contexto de
375/407
apilamiento, pero el ltimo, s.
Cuando un elemento establece un contexto de apilamiento local, los niveles de pila de sus descendientes
posicionados se aplican slo en este contexto local. Estos descendientes se pueden volver a apilar los unos
respecto a los otros, y respecto a su padre, pero no respecto a los hermanos del padre. Es como si el padre
formara una jaula alrededor de sus descendientes de manera que no pueden abandonarla. Los
descendientes se pueden mover arriba y abajo en esta jaula, pero no pueden abandonarla. El padre y sus
descendientes formarn una unidad indivisible en el contexto de apilamiento que rodea al padre.
Imaginaos que estis clasificando el papeleo antes de entregarlo al contable que se ocupa de vuestros
asuntos fiscales. Tenis informes de gastos, recibos, confirmaciones de pedidos, etctera y apilis un papel
encima del otro: para facilitarle la vida a vuestro gestor, introducs los tipos de documentos que van juntos en
diferentes sobres.
Un contexto de apilamiento local es parecido a este tipo de sobre. Mantiene los elementos relacionados
juntos e impide que otros elementos se mezclen entre ellos. Podis clasificar el contenido de cada sobre
como queris, pero este orden de clasificacin slo se aplica a este sobre y no afecta a la pila de
documentos en conjunto. Vuestra pila contiene ahora una mezcla de documentos independientes (elementos
con el nivel de pila auto) y sobres (elementos con un nivel de pila entero). Los sobres con niveles de pila
positivos quedan por encima de los documentos independientes, mientras que los sobres con niveles de pila
negativos aparecen debajo del todo de la pila.
Cada vez que asignis un valor entero en la propiedad z-index de un elemento, se crea un "sobre" que
contiene este elemento y sus descendientes.
Veamos cmo funcionan estos contextos de apilamiento local. Puede parecer confuso, pero realmente no es
muy diferente de todo lo que ya habis visto. Si segus los ejemplos, acabaris hacindoos una buena idea
de cmo funciona todo.
1. Empezad aadiendo algn contenido a vuestros dos elementos internos; aadid las lneas resaltadas a
vuestro documento HTML:
<div id="inner">
<span></span>
</div>
<div id="second">
<span></span>
</div>
2. Aadid una regla CSS que se aplicar a estos dos elementos span:
span {
position: absolute;
top: 2em;
left: 2em;
width: 3em;
height: 3em;
}
Esto hace que los elementos span queden posicionados absolutamente y establece sus posiciones y
dimensiones. Pero, un momento, los elementos span son en lnea... Cmo se pueden especificar las
dimensiones de los elementos en lnea? La respuesta es que los elementos posicionados
absolutamente, como los elementos flotantes, generan automticamente cajas de bloque.
Las posiciones que especificis se aplicarn con relacin al bloque contenedor de cada span. Como
ambos elementos span tienen un div posicionado absolutamente como padre, estos padres asumen la
funcin de bloques contenedores.
3. Aadimos ahora un poco de color a los elementos span para que podis ver dnde aparecen; aadid las
siguientes reglas a vuestra hoja de estilos:
#inner span {
376/407
}
#second span {
background-color: #0ff;
}
4. Guardad y recargad y veris un cuadrado amarillo en la esquina inferior derecha del cuadrado gris
mayor y un cuadrado de color cian en la esquina inferior derecha del cuadrado azul mayor. Los
cuadrados gris y amarillo aparecen ante los cuadrados azul y cian porque el cuadrado gris tiene un z-
index:1.
5. Y si queris que el cuadrado cian quede por delante de todos los otros cuadrados? Todo lo que debis
hacer es aplicarle un nivel de pila ms alto que al cuadrado gris. De hecho, basta con darle
exactamente el mismo nivel de pila que el cuadrado gris, ya que el cuadrado cian aparece ms adelante
en el etiquetado. Probmoslo; efectuad el siguiente cambio en vuestro CSS:
#second span {
background-color: #0ff;
z-index: 1;
}
6. Guardad y recargad. Si vuestro navegador admite correctamente la recomendacin CSS, el cuadrado
cian debera estar ahora delante.
El cuadrado gris tiene un z-index:1, que quiere decir que establece un contexto de apilamiento local. En
otras palabras, habis creado uno de estos "sobres" y habis colocado el cuadrado gris y su cuadrado hijo
de color amarillo en el interior.
Segus sin verlo del todo claro? A ver si con el siguiente experimento lo acabamos de aclarar.
1. Estableced un nivel de pila alto para el cuadrado amarillo para llevarlo adelante; haced el siguiente
cambio en vuestro CSS:
#inner span {
z-index: 4;
}
2. Si guardis y recargis, veris... que no ha habido ningn cambio en absoluto. El nivel de pila que
hemos especificado para el cuadrado amarillo se aplica en el contexto de apilamiento local establecido
por el cuadrado gris, es decir: el cuadrado amarillo se encuentra en un sobre junto con su padre gris.
Podrais mover el cuadrado cian hasta adelante porque su padre (el cuadrado azul) no establece un
contexto de apilamiento local: tiene un z-index:auto implcito. El cuadrado azul es un papel
independiente en la pila. Los cuadrados amarillo y cian estn en realidad solos en pequeos sobres
individuales (tienen un nivel de pila entero y establecen contextos de apilamiento local por su cuenta).
3. Si hacis que el cuadrado azul establezca un contexto de apilamiento local, no podris mover el
cuadrado cian hacia adelante a no ser que tambin llevis a su padre (el cuadrado azul) adelante.
Probmoslo. Haced los siguientes cambios en vuestro CSS:
#inner {
...
z-index: 2;
}
#second {
...
z-index: 1;
}
#second span {
...
377/407
z-index: 3;
}
4. Guardad y recargad. Ahora, tanto el cuadrado gris como el cuadrado azul establecen contextos de
apilamiento local, de manera que se crean dos sobres. En la parte inferior de la pila hay un sobre con el
nivel de pila 1 que incluye dos sobres interiores (el cuadrado azul y el cuadrado cian). En la parte
superior de la pila hay un sobre con nivel de pila 2 que incluye dos sobres interiores (el cuadrado gris y
el cuadrado amarillo). En el primer sobre, el cuadrado azul tiene un nivel de pila local 0 y, por lo tanto,
se muestra detrs del cuadrado cian, que tiene un nivel de pila local 3. En el segundo sobre, el cuadrado
gris tiene un nivel de pila local 0, de manera que aparece detrs del cuadrado amarillo con nivel de pila
local 4.
La figura 1 muestra los cuatro cuadros y los dos contextos de apilamiento local desde el lateral, a lo largo del
eje Z.
Figura 1. Ilustracin de diferentes contextos de apilamiento. Los elementos que
aparecen dentro de "2" siempre aparecern por delante de todos los elementos
dentro de "1". Despus, dentro de cada contexto de apilamiento, los elementos
con un nmero de ndice z mayor aparecen por delante de los elementos con un
nmero de ndice z ms pequeo. Si dos elementos tienen el mismo nmero de
ndice z, lo que aparece ms tarde en el etiquetado aparecer delante.
Esta parte probablemente os haya resultado bastante complicada, especialmente si sois nuevos con CSS. La
cuestin es que debis conocer vuestros contextos de apilamiento si estis intentando cambiar los niveles de
apilamiento de diferentes elementos. Si un elemento pertenece a un contexto de apilamiento local, slo
podis cambiar su posicin a lo largo del eje Z en este contexto local. Un elemento en un contexto de
apilamiento local no se puede colar entre dos elementos de otro contexto de apilamiento local.
La buena noticia es que muy probablemente nunca os encontraris con estos problemas. Los cambios en z-
index no son muy comunes en las buenas composiciones, y en caso de que se produzcan, generalmente
siempre es en un nico contexto de apilamiento.
37.3. Posicionamiento fijo
Un elemento con position:fixed est fijo respecto a la ventana. Se mantiene donde est aunque se desplace
el documento. Para media="print" se repetir un elemento fijo en cada pgina impresa.
Tened en cuenta que las versiones 6 y anteriores de Internet Explorer no admiten el posicionamiento fijo de
ninguna forma. Si utilizis uno de estos navegadores, no podris ver los resultados de los ejemplos de este
subapartado.
Mientras que la posicin y las dimensiones de un elemento con position:absolute son siempre relativas a su
bloque continente, la posicin y las dimensiones de un elemento con position:fixed son siempre relativas al
378/407
bloque continente inicial. Este suele ser el viewport: la ventana del navegador o el cuadro de la pgina
impresa.
Para demostrarlo, en el ejemplo siguiente haris fijo uno de vuestros elementos. Haris el otro muy alto para
que se genere una barra de desplazamiento y as hacer ms fcil el efecto que tiene.
1. Haced los siguientes cambios en vuestro cdigo CSS:
#inner {
width: 5em;
height: 5em;
position: fixed;
top: 1em;
left: 1em;
}
#second
width: 5em;
height: 150em;
background-color: #00f;
position: absolute;
top: 1em;
left: 2em;
}
2. Guardad y recargad. Si no obtenis una barra de desplazamiento vertical, aumentad el valor height para
#second (pero qu tipo de monitor gigante tenis?).
El elemento azul alto se alarga ms all de la parte inferior de la ventana. Desplazad la pgina hacia abajo y
observad el cuadrado gris de la esquina superior izquierda. Ahora #inner queda fijo en la posicin a 1 em de
la parte superior de la ventana y a 1 em del lado izquierdo y, por lo tanto, a medida que os desplacis, el
cuadro gris se quedar en el mismo lugar de la pantalla.
Resumen
Los elementos posicionados absolutamente se eliminan completamente del flujo del documento. Se
superpondrn sobre otros contenidos a no ser que les hagis espacio. Si todos los elementos hijos de un
contenedor estn posicionados absolutamente, la altura del padre se reducir a cero.
Los elementos posicionados absolutamente lo estn respecto a un bloque contenedor, que es el antepasado
posicionado ms prximo. Si no hay antepasado posicionado, el viewport ser el bloque contenedor.
Los elementos con posicionamiento fijo lo estn respecto a la ventana: sta es siempre su bloque
contenedor. Siempre aparecen en el mismo lugar de la ventana del navegador cuando se ven en pantalla;
cuando se imprimen, aparecen en cada pgina.
Las posiciones de cada borde de un elemento posicionado absolutamente se pueden especificar mediante
las propiedades top, right, bottom y left. El valor de cada propiedad especifica la distancia de este borde al
borde correspondiente del bloque continente del elemento.
Todos los elementos posicionados se representan en un nivel de pila determinado en un contexto de
apilamiento. Podis cambiar el nivel de pila de un elemento posicionado utilizando la propiedad z-index.
Cuando se especifica z-index como un valor entero, el elemento establece un contexto de apilamiento local
para sus descendientes.
Preguntas de repaso
1. Deshaced los cambios del ejemplo de posicionamiento fijo y, a continuacin, cambiad el orden de
apilamiento entre los cuatro cuadrados posicionados absolutamente, de manera que el cuadrado gris
379/407
est en la parte de atrs, seguido de los cuadrados azul, amarillo y cian en este orden (consejo:
eliminad todas las declaraciones de z-index y empezad de nuevo).
2. Moved el cuadrado amarillo hacia arriba y a la derecha especificando top:-1em y left:8em. A
continuacin, haced que aparezca detrs del elemento #outer, de manera que el borde rojo aparezca a
travs del cuadrado amarillo.
3. Replicad la disposicin de tres columnas que creamos en el apartado de posicionamiento esttico y
relativo utilizando el posicionamiento absoluto en su lugar. Como ser imposible tener un pie de anchura
completa, podis eliminar el elemento #footer, pero no podis cambiar nada ms en el etiquetado
(aparte del enlace a la hoja de estilos).
4. Modificad la disposicin del ejercicio anterior para hacer que la navegacin utilice el posicionamiento fijo.
Deberis eliminar los mrgenes horizontales automticos del elemento body para hacerlo posible. Aadid
bastante contenido a la columna principal y/o la barra lateral para que aparezca una barra de
desplazamiento, de manera que podis verificar que funciona.
: :
380/407
Encabezamientos, pies, columnas y plantillas - Encabezamientos, pies, columnas y plantillas
Accesibilidad : : :
Ben Henick. 3 de febrero del 2009. Publicado en: pies, composicin, CSS, columnas, encabezamientos
Hasta ahora, los artculos de este curso se han centrado en temas concretos, desde conceptos "blandos"
como la tipografa y el color hasta una instruccin tcnica "dura" sobre partes de CSS 2.1. Este artculo tiene
un enfoque ms amplio; su finalidad es mostrar al lector cmo utilizar el material tratado hasta ahora para
construir la plantilla de una web completa.
La principal asuncin de este material es que ya estis familiarizados con las propiedades float (flotar),
display (visualitzar) i position (posici) de CSS.
Los lectores autodidactas que deseen pasar directamente al jugo del CSS estn invitados (contra nuestra
voluntad) a pasar directamente al subapartado 4 de este mdulo, pero debern tener en cuenta que, al
hacerlo, se perdern la leccin sobre cmo una planificacin satisfactoria del proyecto conduce a la
composicin e implementacin de un sitio web.
Ved tambin
Podis ver el subapartado 38.4 de este mdulo.
Aquellas almas impacientes que ignoren las advertencias del prrafo anterior tambin debern descargar las
plantillas para una, dos y tres columnas que se facilitan en este artculo y se les enlazar de nuevo a su
conclusin.
Archivo fuente: "Composicin a una columna"
Archivo fuente: "Composicin a dos columnas"
Archivo fuente: "Composicin a tres columnas"
La estructura de este artculo es la siguiente:
38.1. Los pasos crticos del proceso del estilista
38.1.1. Recopilacin de objetivos
38.1.2. Clasificacin de contenidos
38.1.3. Esbozo colaborativo y creacin de un compuesto
38.1.4. Establecimiento de una estructura entre y dentro de documentos
38.2. Requisitos, clasificacin e imbricacin de elementos con ms detalle
38.2.1. Definicin de objetivos empresariales
38.2.2. Definicin y cumplimiento de los objetivos de los visitantes
38.2.4. Orden del cdigo: accesibilidad y otras consideraciones
38.2.5. Asignacin de id, clases y elementos contenedores
38.3. Implementacin de la composicin a una columna
38.3.1. Centrado de la composicin
38.3.2. Es estrictamente necesario un contenedor de toda la anchura del documento?
38.4. Implementacin de la composicin a dos columnas
38.4.1. Problemas de composicin en relacin con las disposiciones a una y dos columnas
Colocacin de #sidebar a la izquierda en vez de en su orden original
Columnas falsas: uso de una imagen de fondo para alinear las longitudes de las columnas
cuando la longitud de su contenido es diferente
Desplazamiento de la navegacin principal en la segunda columna mientras se mantiene el
orden de origen
38.5. Implementacin de la composicin a tres columnas
38.6. Visin amplia de los encabezamientos y pies
38.6.1. Sitio personal: Cindy Li
Identidad
Contraste
38.6.2 Redes sociales: Facebook
381/407
38.6.3. Marketing de empresa y servicio al cliente: BNSF Railway
Repaso de la identidad
38.6.4. Diseo de encabezamiento y pie: los detalles de bajo nivel
Ms informacin sobre la implementacin de la composicin de navegacin
38.7. Webs con diferentes nmeros de columnas: hacer trampa con class y display
Resumen
Preguntas de repaso
Nota
Podis descargar todo el cdigo de ejemplo en un cmodo paquete para hacer
pruebas en vuestro equipo local.
Podis descargar el cdigo de ejemplo en: "layout_template_code.zip"
Una web construida adecuadamente suele ser el producto de un proceso deliberado, principalmente por
entregas, aunque el sitio lo creen una o dos personas en vez de un equipo entero de especialistas. En la
figura 1 se describe una representacin bastante elaborada de este proceso y de los diez pasos que aqu se
describen; este artculo se centra en cuatro, en concreto:
1. Recogida de requisitos en funcin de los objetivos empresariales y los consiguientes objetivos de los
visitantes
2. Clasificacin de contenidos
3. Borrador colaborativo y creacin de un compuesto
4. Establecimiento de la estructura de los documentos que se deben utilizar en la web
Una vez completados estos cuatro pasos, el estilista tiene la mayor parte de la informacin que necesita para
crear las disposiciones de la web, que generalmente tendrn una, dos o tres columnas. Independientemente
de la forma general de la composicin, habr diferencias de una seccin de una web a otra, que a su vez
influir en cmo algunos elementos y selectores de estilo pasan a formar parte del diseo global de la web.
Incluso despus de haber hecho las selecciones de diseo y estructurales, queda la cuestin de cmo se
tratar la produccin si la web se debe crear sobre un sistema de gestin de contenidos (CMS) como
Wordpress o Drupal.
Este artculo subraya la importancia de los cuatro pasos mencionados anteriormente; proporciona un marco
nico para la clasificacin de contenidos y describe cmo componer una web con todos los
encabezamientos, pies y columnas.
38.1. Los pasos crticos del proceso del estilista
Las dos secciones siguientes se facilitan como embellecimiento de otros artculos de este currculo, con un
nfasis en la planificacin y el proceso ms que en la implementacin. El mensaje principal es: "Mirad antes
de saltar"; en otras palabras, debis comprender claramente lo que vais a implementar antes de empezar
con el etiquetado, las hojas de estilos y el cdigo.
382/407
Figura 1. Diez pasos comunes del proceso de creacin de una web. Los que
son especialmente relevantes para este artculo se muestran en el tramo
inverso.
38.1.1. Recopilacin de objetivos
El buen CSS se basa en una cadena de dependencias:
el CSS se basa en una estructura para trabajar;
la estructura se informa mediante el contenido;
el contenido necesita un mbito;
el mbito del contenido se define mediante los posibles objetivos de visitantes, y
a su vez, los objetivos de los visitantes estn relacionados con los objetivos empresariales.
La cuestin de esta cadena de requisitos es que las necesidades de vuestros visitantes sealarn
directamente la estructura que debis crear para vuestro sitio y, por lo tanto, impulsarn los selectores y las
tcnicas aplicadas a vuestros estilos.
Cuando el proceso de recogida de requisitos se gestiona incorrectamente, los especialistas en estilos se
enfrentan a retos como los siguientes:
Falta de activos
Falta de orientacin respecto a la relacin entre el comportamiento de la composicin y la geometra de
las ventanas
Falta de definicin de los niveles de soporte de plataformas
Ved tambin
Solicitudes frecuentes de cambios, ya que los requisitos se acoplan durante el proceso de
implementacin
Falta de herramientas actuales
383/407
Una vez que hayis determinado el mbito del contenido de vuestra web, debis definir su importancia para
el sitio en conjunto y decidir qu herramientas de navegacin proporcionaris a los visitantes para
encontrarlo.
Tambin debis tener en cuenta la cuestin de qu hacer con la publicidad, las listas de enlaces, las galeras
y los comentarios.
Una vez clasificados, los contenidos se pueden asociar entonces a la navegacin de la web y ponderarlos. La
ponderacin de contenidos se tratar aqu en un contexto primario/secundario/terciario, dado que la
importancia de un bloque de contenidos la debera reflejar su posicin en el orden original del documento.
38.1.3. Esbozo colaborativo y creacin de un compuesto
Si estis trabajando en un proyecto en el que el diseo grfico y la implementacin de estilos son tareas
asignadas a diferentes personas (como suele ser el caso en los proyectos comerciales), el diseador grfico
deber basarse en los diagramas de mapa del sitio y los esqueletos (si es el caso) para empezar a crear el
aspecto general de la web. Puede ser til empezar con borradores sencillos, como manera de definir
elementos como el motivo general del sitio, sus caractersticas consistentes y los detalles que podran
complicar el etiquetado o la asignacin de class e id.
Una vez acordados los borradores, el diseador grfico puede pasar entonces a los compuestos acabados,
que deberan ser parecidos a capturas de pantalla que se podran generar en el navegador de desarrollo una
vez puesta la web en produccin.
De ahora en adelante, en este artculo, el diseo grfico se tratar de una manera rpida porque ya se ha
explicado en los artculos sobre esqueletos y compuestos/modelos.
38.1.4. Establecimiento de una estructura entre y dentro de documentos
Con los compuestos a mano, el especialista en estilos puede empezar a escribir el etiquetado y los CSS. El
primer paso de este trabajo es decidir el orden de los contenidos, el anidado de elementos, classes e ids que
se utilizarn en la web de produccin; un trabajo que slo se puede hacer bien si el especialista en estilos
comprende completamente el contenido que se debe ofrecer en la web y cmo se debe disponer.
38.2. Requisitos, clasificacin e imbricacin de elementos con ms detalle
Si se siguen las buenas prcticas modernas y se adopta el paradigma de diseo centrado en el usuario
(UCD, User Centered Design) para motivar las decisiones de diseo y desarrollo, entonces los objetivos de
los visitantes influyen en cada uno de los pasos del proceso de diseo.
No obstante, de hecho los objetivos del patrocinador (o editor) de la web tienen prioridad desde el punto de
vista del equipo de diseo, porque sin un conocimiento de aquellos objetivos, el equipo de diseo no tiene
manera de prever los objetivos de los visitantes.
38.2.1. Definicin de objetivos empresariales
Los objetivos "empresariales" de la web entrarn en una o varias de las siguientes definiciones generales:
Generacin directa de ingresos (comercio electrnico)
Ofrecimiento de publicidad, mensajes y/o servicios de almacenamiento mediante una interfaz web
(como, por ejemplo, Blogger, Flickr, Scribd, YouSendIt o Basecamp)
Comercializacin de un producto o servicio
Facilitacin de informacin
Entretenimiento del visitante
Una vez establecidos los objetivos generales, habr ms perfeccionamiento en funcin de cualquiera de una
serie de factores, como la demografa, los objetivos de conversin y las limitaciones de diseo impuestas por
el presupuesto del proyecto o la naturaleza del propio contenido (como podra ser el caso con el vdeo Flash).
La experiencia es, de lejos, la mejor gua en esta parte del proceso de recogida de requisitos.
384/407
38.2.2. Definicin y cumplimiento de los objetivos de los visitantes
Una vez establecidos los objetivos empresariales, es decir: "esto es lo que queremos que vean y hagan
nuestros visitantes", el paso siguiente es atraer y conducir a los visitantes a aquellos destinos y tipos de
funcionalidades que les resulten ms adecuados.
La principal asuncin de esta parte del proceso de diseo es que "los visitantes odian los obstculos". Las
mejores maneras de tener en cuenta este supuesto son las siguientes:
Definir y disear una navegacin que se adapte de la mejor manera posible a las estrategias de
bsqueda ms probables del visitante. Estas estrategias pueden incluir bsqueda de texto completo,
listas tradicionales taxonmicas de enlaces o "etiquetado" (ya sea moderado o definido por el usuario).
Nota
Es conveniente que tengis en cuenta que una web puede contemplar ms de una
estrategia de bsqueda.
Ofrecer siempre indicaciones para que el visitante sepa dnde se encuentra en la web en conjunto.
Entre los medios habituales de hacerlo estn los "rastros de migas de pan" o "breadcrumbs", enlaces a
contenido relacionado e indicaciones visuales como, por ejemplo, el diseo de enlaces de navegacin
dependientes del contexto.
Reforzar el estilo visual y escrito de la manera ms rgida posible, sin caer en una consistencia ridcula.
Esta prctica est ntimamente relacionada con la necesidad de dar al visitante pistas consistentes
sobre la ubicacin; la diferencia es que mientras el color y la disposicin de la navegacin ofrecen al
usuario orientacin por toda la web, una presentacin consistente a lo largo de las pginas es esencial
para orientarse en una nica pgina.
Indicar siempre en lenguaje sencillo las consecuencias de seguir un enlace o enviar un formulario. A
veces esto es tan sencillo como etiquetar un botn de enviar con la palabra "Bsqueda", pero en
ocasiones es posible que debis aadir una nota para dar ms instrucciones a los visitantes de la web.
Proporcionar una distincin clara entre los elementos de diseo que respondern a la interaccin del
usuario y cualquier otra cosa. Los estilos que hacen que los enlaces sean casi indistinguibles del texto
normal, el diseo inconsistente de los botones y los estilos de cursor atpicos son muy comunes y
confusos. Los colores con un contraste elevado, el uso meditado de padding (para ampliar el espacio
que ocupan los elementos de diseo interactivos), y los title informativos suelen ser ms eficaces.
Minimizar la cantidad de interaccin del usuario (especialmente el nmero de clics en enlaces o botones)
necesaria para alcanzar un objetivo comn, como una compra o el servicio de recursos populares. En la
prctica, esto generalmente requiere ponerse en la piel del visitante y analizar sus opciones desde su
punto de vista. A no ser que estas tareas se puedan completar y hasta que esto sea posible, el atajo
para cumplir esta directriz es seguir el espritu del principio KISS.
Cuando se trata de etiquetado y hojas de estilos, hay ciertas tcnicas muy sencillas que hacen que estas
reglas sean fciles de seguir:
A la hora de elaborar vuestra hoja de estilos, debis asignar las mximas propiedades posibles
con reglas mediante selectores de elementos simples.
Las id, por definicin, son nicas y, para ser tiles, las clases se deben reservar preferentemente para
casos poco comunes (o para requisitos de presentacin que los navegadores antiguos no aceptaran
correctamente de otra forma). No obstante, moderando su uso, los especialistas en estilos ms atentos
estn al tanto de las ocasiones en las que el diseador grfico insiste en niveles de detalle
potencialmente caros en sus diseos.
Debis asignar una id al body de cada pgina.
Si se asignan etiquetas de hojas de estilos a documentos determinados (y no slo en las secciones de
una web), los casos de presentacin nicos son ms fciles de solucionar. Otra ventaja de colocar una
id en el texto principal de cada pgina es que cuando se utiliza conjuntamente con elementos de
navegacin ponderados de manera similar, el estilista puede proporcionar indicaciones visuales en la
navegacin primaria para elementos como la seccin o web visualizada actualmente, sin necesidad de
utilizar lgica verbosa en el lado del servidor.
Debis evitar los diseos que exigen un elevado control motriz por parte del visitante.
385/407
Una manera ms directa de describir esta instruccin es "debis evitar los mens volantes como los
creados mediante las tcnicas Suckerfish, tambin conocidos como mens desplegables". Hay casos
claros de uso de estos diseos y todos implican webs grandes basadas en disposiciones de una y dos
columnas, pero a menudo se pueden evitar. Por otra parte, los usuarios sin experiencia y con
discapacidad de control motriz a menudo encuentran problemticos los mens desplegables:
Podis ver "Suckerfish Dropdowns", de Patrick Griffiths i Dan Webb.
Podis ver "Son of Suckerfish Dropdowns", de Patrick Griffiths i Dan Webb.
Para ser efectivos, estos elementos suelen requerir que los enlaces que contienen sean ms
pequeos que el tamao predeterminado del tipo de letra del texto, una indicacin visual
contraintuitiva que hace que los elementos de men tenga menos aspecto de enlaces que otros
elementos de la pgina que les rodean.
El nivel de control motriz necesario para utilizar estos elementos frustra fcilmente a los
visitantes sin experiencia, ocasionales y discapacitados.
La variedad de posibles destinos disponibles que hay en una seccin determinada de la web
permanece oculta hasta que el visitante interacta con estos elementos y esto limita su capacidad
de mantener un sentido de ubicacin en la web hasta que alcanzan experiencia en su uso.
Una vez calculado el alcance de los contenidos que se deben presentar en la web, podis crearle una
arquitectura. La arquitectura de un sitio se puede elaborar de varias maneras (podis ver algunos ejemplos
en el artculo 23).
Generalmente, podris asignar prioridades a vuestros contenidos, que informarn de las composiciones
posibles:
1. Los contenidos primarios son la materia en torno a la que se construyen los documentos de destino
individuales, como artculos, lbumes de fotos o conjuntos de datos.
2. Los contenidos secundarios incluyen metadatos legibles para las personas que estn adjuntas a los
contenidos primarios, y tambin contenidos de barra lateral (por ejemplo, texto de exposicin; extractos
de crticas; enlaces a artculos relacionados en el sitio; listas de grficos, mapas o tablas).
3. Los contenidos terciarios comprenden los enlaces salientes a materiales relacionados (como la lista
de enlaces amigos de un blog), instantneas persistentes de contenidos de otras fuentes como webs de
redes sociales o entradas de comentarios y publicidad.
Adems de los contenidos, vuestro formato casi seguro incluir dos secciones ms:
El encabezamiento incluir el ttulo de la web (que a menudo enlaza con la portada de la web), la
navegacin principal, enlaces a metadatos de la cuenta de usuario (en una aplicacin) y, por ltimo, el
formulario de bsqueda de contenidos principales (si est implementado).
El pie contiene la declaracin de copyright, como mnimo. Los enlaces a documentos compuestos de
metadatos (como canales RSS, sitemaps y la parte de metacontenidos de la web de la informacin de
contacto) tambin encuentran su camino en la navegacin secundaria de una web, que suele formar parte
del pie.
La navegacin principal y el ttulo de una web casi siempre forman parte de (o estn al mismo nivel que) el
encabezamiento en un contexto visual; cada implementador puede decidir si debern formar parte del
encabezamiento de la web a nivel de etiquetado.
38.2.4. Orden del cdigo: accesibilidad y otras consideraciones
Uno de los primeros pasos del diseo de plantillas web es decidir el orden de sus contenidos en el cdigo,
que debera ser consistente a lo largo de la web en conjunto.
El orden del cdigo del documento de manera que se pueda leer correctamente sin la ventaja de las hojas de
estilo es esencial por motivos de accesibilidad y soporte entre medios. En el primer caso, los usuarios con
discapacidad visual pueden utilizar lo que se denomina lectores de pantallas: aplicaciones de software que
386/407
leen los contenidos en voz alta al visitante, contenidos que no tienen ningn sentido si estn ordenados de
cualquier manera por motivos de presentacin.
...Y de la misma manera que la informacin dispuesta en el orden adecuado para la visualizacin en pantalla
probablemente exige claridad para ser leda en voz alta, aplicar estilos puede resultar imposible en otros
medios como visualizaciones impresas o mviles. En este caso, el resultado suele ser la duplicidad de
contenidos, lo que presenta una serie de inconvenientes:
Como mnimo, se debe implementar lgica adicional en la capa de vista para tener en cuenta el hecho
de que la salida de un registro individual de una base de datos se puede ofrecer de ms de una
manera.
En el peor de los casos, los contenidos se duplican no slo en el entorno en el que se encuentra el
visitante, sino tambin en la base de datos o en el sistema de archivos del sistema principal. El
resultado ser la duplicidad de algunos gastos de mantenimiento.
Por lo tanto, lo ms habitual es disponer las secciones ms exteriores en el orden siguiente:
1. Encabezamiento
Ttulo [preferiblemente enlazado con la pgina de inicio]
Navegacin principal
2. Contenido principal
Ttulo del documento
Texto central
3. Contenido secundario
4. Contenido terciario
5. Pie
Navegacin secundaria
Partes adicionales (por ejemplo, aviso de copyright)
La manera como se imbricarn estas secciones depender de una serie de requisitos variables, de los que el
ms habitual es el nmero de columnas estticas en la disposicin de la web.
38.2.5. Asignacin de id, clases y elementos contenedores
Cuestiones de taxonoma al margen, podemos asumir que cualquier web dada cubrir una serie de temas
relacionados dentro de un mbito entendido, ya sean operaciones y productos de una empresa, tipos
especficos de acontecimientos, o tipos especficos de entretenimiento, por nombrar algunos ejemplos con
los que suelen contar para atraer el inters de pblicos no tcnicos.
Por lo tanto, el estilista se encontrar probablemente asociando las etiquetas de hojas de estilos tanto con
elementos estructurales de los contenidos de la web (por ejemplo, fragmentos de navegacin,
encabezamiento, texto principal) como con abanicos de contenidos, ms o menos amplios.
Las prcticas varan, pero el autor generalmente asigna las siguientes etiquetas de formato a sus plantillas,
etiquetas que vern su uso en este mdulo.
#main: lienzo de contenidos
h1 (nic): ttulo de la web
ul#nav: cdigo de navegacin del sitio
#breadcrumb: rastro de "migas de pan" (si se utiliza)
#bodyCopy: artculo principal
#bodyCopy>h2 (nico): ttulo de documento principal
#sidebar: contenido secundario
387/407
#footer: cdigo del pie
ul#secondaryNav: navegacin secundaria
Adems de stos y mucho ms importante, se aade una id al body de cada pgina (como se ha
mencionado anteriormente) que da alguna indicacin del mbito del contenido primario asociado con todo el
documento. Algunos proyectos tambin generan un requisito para la asignacin de classes a los elementos
body.
38.3. Implementacin de la composicin a una columna
Figura 2. Elementos de la composicin de una columna; probablemente el
etiquetado se imbricar como se muestra aqu.
La figura 2 muestra que #main est immediatamente dentro de body, y que a la vez contiene todo el #header,
#bodyCopy i #footer.
38.3.1. Centrado de la composicin
El centrado del lienzo de contenidos es una cuestin de insertar (en este caso) #main {width: 960px;
margin: auto; } en vuestra hoja de estilos (el valor width elegido es arbitrario).
38.3.2. Es estrictamente necesario un contenedor de toda la anchura del documento?
En una web que se basa completamente en composiciones de una sola columna, no es absolutamente
necesario incluir #main; se podran aplicar igual de fcilmente los mismos pares de propiedad/valor de
composicin utilizados anteriormente en #header, #bodyCopy i #footer de manera combinada. No obstant aix,
no hi ha res semnticamente incorrecto en incluir #main y su inclusin ofrece al especialista en estilos ms
flexibilidad en relacin con elementos como las reglas, los canales, las imgenes de fondo y la construccin
de la prominencia de determinados elementos en la estructura de la plantilla.
38.4. Implementacin de la composicin a dos columnas
388/407
Figura 3. Elementos de una composicin en dos columnas; probablemente el
etiquetado estar anidado como se muestra aqu, con la condicin de que
#sidebar seguir de hecho a #bodyCopy en el orden de origen.
La diferencia entre las composiciones a una y dos columnas es el aadido de un segundo elemento
contenedor para el contenido secundario (#sidebar, que de hecho sigue a #bodyCopy en el orden de origen), y
algunos cambios en la hoja de estilos que probablemente se utilizarn para una disposicin a una columna.
38.4.1. Problemas de composicin en relacin con las disposiciones a una y dos columnas
Los cambios en el etiquetado necesarios para convertir una plantilla de una columna en una plantilla de dos
columnas son sencillos, pero en muchos casos las nuevas reglas de estilo necesarias no lo son.
Colocacin de #sidebar a la izquierda en vez de en su orden original
Hay dos procedimientos para hacerlo; uno funcionar independientemente de la longitud de cualquiera de las
columnas, mientras que el otro requiere que #bodyCopy sea ms largo que #sidebar.
El planteamiento principal y ms comn es utilizar float:
1. Asignar un valor width a #bodyCopy.
2. Aadir a esta regla un valor float de right.
3. Asignar un width apropiado a #sidebar.
4. Asignar valores de margin (margen) y padding (relleno) segn sea necesario en #bodyCopy (texto central)
y/o #footer (pie) para garantizar que exista el canal deseado entre los dos elementos.
5. Asignar clear: both; a #footer.
Las dos columnas tienen los valores width (anchura) especificados de manera que tengan unos mrgenes
consistentes.
En el caso en el que #sidebar queda en el margen derecho de la composicin, los pasos ya descritos se
deberan continuar siguiendo, aunque el valor de float de #bodyCopy se debera establecer en left. El valor
width asignado a #sidebar se debera sustituir por un valor margin-left (margen izquierdo) apropiado.
Tambin es posible asignar un valor margin-left o margin-right (margen derecho) grande (segn sea
necesario) al elemento del que se ha eliminado float, en vez de width.
Un segundo planteamiento que probablemente provocar menos errores en Internet Explorer 6 es asignar un
valor margin-left o margin-right grande a #bodyCopy segn convenga, y posicionar #sidebar de manera
absoluta. No obstante, este planteamiento es menos flexible porque los casos en los que #sidebar sea ms
389/407
largo que #bodyCopy harn que el elemento anterior sangre hacia #footer.
Columnas falsas: uso de una imagen de fondo para alinear las longitudes de las columnas cuando la
longitud de su contenido es diferente
Un examen ms minucioso de las implementaciones de columnas utilizando la propiedad float revela que
cuando se quieren diferentes colores de fondo o reglas verticales entre columnas, no se puede contar con
ello para establecer la longitud del rea de contenidos principal cuando se aplica mediante propiedades
background-color o border.
La solucin ms fcil a este problema es crear y especificar una imagen de fondo (generalmente de un pxel
de altura) a uno de los elementos antepasados de las columnas que, a causa de su asignacin a este
elemento antepasado, siempre se repetir desde la parte superior a la parte inferior de la columna ms alta
relacionada. Por lo tanto::
#main {
background-image: url(images/bg_2column.gif);
background-repeat: repeat-y;
}
Si bg_2column.gif est formado por dos bandas de colores muy contrastados que corresponden con ms o
menos precisin a las anchuras asignadas en las columnas de contenido, el resultado sern dos columnas
que parecern tener la misma altura... aunque realmente no la tengan, como se descubrira si a continuacin
se insertaran las reglas siguientes:
#bodyCopy {
background-color: #ccc;
}
#sidebar {
}
Realizar este paso no elimina necesariamente la necesidad de aplicar propiedades color o background-color
a una columna determinada; si el color del texto predeterminado no es legible sobre una o ambas columnas,
sus colores de fondo y primer plano se deberan especificar explcitamente en la hoja de estilos como
salvaguarda contra la posibilidad de que el navegador no cargue las imgenes de fondo.
Desplazamiento de la navegacin principal en la segunda columna mientras se mantiene el orden de
origen
Una vez que se ha aadido una segunda columna a la disposicin, probablemente parecer natural colocar
la navegacin principal de la web en la parte superior de aquella columna... sin embargo, cmo hacerlo
cuando la navegacin descansa en una parte diferente de la estructura de la plantilla?
La respuesta a esta pregunta se encuentra en el posicionamiento:
1. Si habis asignado overflow: hidden; en #header, (encabezamiento), haced que #nav sea un
descendiente directo de #main (principal). En casi todos los casos, ser posible hacerlo sin estropear el
orden de origen deseado.
2. Asignad position: relative; (posicin relativa) al antepasado inmediato de #nav, y position: absolute;
en la propia #nav.
3. Como la posicin absoluta de #nav lo colocar en el vrtice superior izquierdo de su antepasado de
manera predeterminada, ajustad los valores left y top (superior) de #nav segn dicten las
circunstancias.
4. Ajustad el valor margin-top o padding-top de #sidebar (segn convenga) para reflejar la altura prevista
de #nav. En los casos en los que #nav cambia de una pgina o seccin a la siguiente, ser necesario
escribir algunas reglas, quiz con varios selectores en cada una; de aqu el consejo anterior de asignar
una id referente del mbito del contenido (y quiz tambin una class) en el body de cada documento de
390/407
la web.
38.5. Implementacin de la composicin a tres columnas
Figura 4. Els elements d'una composici a tres columnes; observeu els dos
nous elements contenidors i la diferent assignaci d' id.
Las principales diferencias de etiquetado que impone aadir una tercera columna son:
Un contenedor incluye dos columnas adyacentes, generalmente la primera y la segunda.
La tercera columna est situada en su propio contenedor.
Una vez establecido el etiquetado, la obtencin de la disposicin deseada es una cuestin de ordenar
correctamente los valores float. No debis olvidar que los contenedores no flotantes requieren un ajuste de
mrgenes para que la alineacin sea correcta.
Nota
Debis tener en cuenta que en relacin con la figura 4, es mejor asignar a los
elementos de la columna dual y del contenedor terciario id que ofrezcan alguna
indicacin del contexto, ms que los id sugeridos en el propio diagrama.
Asignacin flotante en cada columna en una composicin de tres columnas.
Presentacin deseada
Contenido del
contenedor
Contenedor Primario Secundario Terciario
Tabla 1. Valores float de los cuatro elementos contenedores de una composicin de tres columnas por orden de aparicin
de izquierda a derecha.
2-1-3 1+2 left right none none
2-3-1 2+3 left none left none
3-1-2 1+2 right left none none
3-2-1 1+2 right left none none
1-2-3 1+2 left left none none
1-3-2 2+3 right none right none
La mayor dificultad de los diseos de tres columnas y su sencilla solucin
La disposicin a tres columnas ms flexible introduce un elemento contenedor que no tiene significado
391/407
semnticamente; la alternativa es imponer las convenciones de longitud del contenido u orden del cdigo,
que crearn una carga pesada, ya sea sobre los responsables de mantenimiento (en caso de requisitos de
longitud de los contenidos), o sobre los visitantes (en caso de limitaciones del orden del cdigo).
La introduccin de este contenedor "sin significado" tambin puede plantear problemas cuando se trata de
redisear una web. Imaginmonos la siguiente situacin:
Cuando se disea una web desde cero, se dispone con sus columnas en orden de presentacin 2-3-1, pero
ms adelante se redisea con sus columnas en un orden ms tradicional como 2-1-3. El elemento
contenedor de dos columnas se deber mover de manera que comprenda diferentes contenedores de
columnas. Y entonces, qu?
En este caso, el resultado es fcil de obtener; si el sitio funciona realmente con plantillas, entonces hay
(probablemente) pocos archivos que haya que cambiar. Si, en cambio, todos los documentos de la web
utilizan el mismo esquema de etiquetado, se deber utilizar buscar y sustituir. De todos modos, esto no ser
difcil.
La disposicin de etiquetado global de los contenedores tomar una de las dos formas siguientes:
<div id="#container"><div id="primary">...</div>
<div id="secondary">...</div></div><div id="tertiary">...</div>
<div id="primary">...</div><div id="#container">
<div id="secondary">...</div><div id="tertiary">...</div></div>
En estos dos ejemplos, los fragmentos correspondientes que se deben buscar y sustituir se muestran en
negrita. Algunas de estas id sern nicas en vuestro documento, y como la ubicacin de las etiquetas de
cierre doble se puede prever (ya sea al lado de una tercera etiqueta de cierre o de #tertiary), escribir una
operacin de bsqueda y sustitucin para modificarlas es un cambio relativamente sencillo.
38.6. Visin amplia de los encabezamientos y pies
Hasta ahora hemos hablado de qu debera ir en los encabezamientos y pies: logo/logotipo, bsqueda en
toda la web, enlaces con informacin de cuentas de usuario, metadatos de la web, etc., pero la efectividad y
el atractivo del encabezamiento/pie se ha tratado poco fuera de los artculos del currculo sobre esqueletos y
compuestos/bocetos.
Como no sera positivo agobiaros con un discurso largusimo en defensa de este hecho, os proponemos
buscar tres webs que sean notables, ya sea por su popularidad o por la importancia de sus editores, y echar
un vistazo a sus particularidades de diseo.
38.6.1. Sitio personal: Cindy Li
Figura 5. En este caso, hay dos asuntos dignos de ser comentados, la identidad
y el contraste.
Identidad
Identidad es un trmino que adquiere un significado especial en el reino de la publicidad y el marketing,
donde hace referencia a las marcas comerciales y otros elementos de diseo que son particulares de la
presentacin de una empresa comercial y sus productos. La web de Cindy Li lo lleva a cabo a un nivel
personal mostrando una caricatura de su perfil facial en el encabezamiento del sitio y utilizando un tipo de
letra distintivo para definir el ttulo de la web y la navegacin principal.
392/407
El modo como se impone la identidad en las webs de empresa se tratar con ms detalle a continuacin.
Contraste
En cindyli.com, el visitante puede ver a primera vista de qu va la cosa: la identidad, el lienzo de contenidos y
el contenido primario estn todos colocados en huellas discretas gracias a sus colores de fondo. Adems, el
ttulo de la web y la navegacin tienen un contraste alto en relacin con el fondo.
Y en cuanto al pie de la web:
Figura 6. El pie de Cindy Li es algo escaso, en l aparece la declaracin de
copyright, un enlace a la web de marketing de la plataforma publicitaria que
utiliza (lo que probablemente es obligatorio bajo las condiciones de la licencia
de uso), y un enlace a una suscripcin sindicada de los artculos que publica.
Al contrario que las dems webs presentadas en este artculo, la web de Cindy no ofrece una bsqueda de
texto completo, probablemente por motivos tcnicos. No obstante, como la web es un blog, su diseo permite
asumir que la mayora de los lectores limitan su inters en los nuevos contenidos.
38.6.2. Redes sociales: Facebook
Figura 7. Facebook, como muchos destinos de redes sociales, refuerza su
identidad mediante el uso de la composicin y el color, ya que la propia
aplicacin es el destino.
Igual que muchas webs comerciales, Facebook ofrece tanto una bsqueda con texto completo como un
enfoque categorizado en la navegacin de la web.
Figura 8. Igual que su encabezamiento, el pie de Facebook tambin es
pequeo, incluso si tenemos en cuenta el "widget" de aplicacin persistente en
la parte ms inferior. Lo que tiene inters en este caso se encuentra al lado de
la declaracin de copyright: un artilugio para cambiar el idioma predeterminado
del usuario.
Otra prctica comn ejemplificada por el pie de Facebook es que mientras los enlaces de uso en la
bsqueda de usuario van en el encabezamiento, el pie contiene todos los enlaces sobre el operador de la
web y de la propia web.
38.6.3. Marketing de empresa y servicio al cliente: BNSF Railway
Figura 9. Como la mayora de las webs "de empresa", el contraste ms alto de
las caractersticas del encabezamiento se disfruta mediante el logotipo del editor
de la web... y el nico tono presente es el mismo que se utiliza en el logotipo.
Repaso de la identidad
En cuanto a los diferentes logos, logotipos y otros recursos de diseo que refuerzan la identidad comercial,
debis tener en cuenta los siguientes, que son marcas omnipresentes que hacen negocios con Opera
Software:
393/407
Nokia
Samsung Group y Samsung Electronics
Google
IBM
Aparte de estos cuatro, hay otros ejemplos similares de diseo grfico muy conocidos: el smbolo de Nike, el
"Swoosh" (de hecho, este nombre est registrado), el logotipo de "la estrella de la muerte" de AT&T, el
logotipo de FedEx (y la flecha en el espacio blanco contenido por sus dos ltimas letras), y el "marrn de
UPS" son ejemplos de identidad corporativa que el pblico general conoce casi universalmente (al menos en
Estados Unidos).
Cualquier operador que se tome la molestia de desarrollar una identidad visual distintiva har bien en
integrar esta identidad en el diseo de la web porque tiene un fuerte impacto en la naturaleza del trabajo del
especialista en estilos.
Y en cuanto a otros elementos del encabezamiento de BNSF aparte del logotipo, el ms notable es el uso de
dos modos de bsqueda (como en el caso de Facebook).
Figura 10. La web de BNSF tiene la disposicin de pie ms "tradicional" de
estos tres sitios, donde se hace el mnimo esfuerzo por colocar la navegacin
secundaria en un plano visual distintivo con reglas horizontales o un color de
fondo diferente.
38.6.4. Diseo de encabezamiento y pie: los detalles de bajo nivel
Al adoptar una visin ms amplia del diseo del encabezamiento y el pie, quedan claras los siguientes
elementos comunes:
Los destinos de empresas y aplicaciones tienden a disponer su navegacin principal en una fila
a lo largo del margen superior del lienzo del navegador. Este hecho los distingue de las webs de
noticias y comercio electrnico, que a menudo utilizan un planteamiento ms columnar para la
composicin de la navegacin.
Igual que la navegacin principal orientada horizontalmente es habitual, tambin lo es el uso de
una navegacin secundaria discreta en el pie. Adems, la divisin de destino y metainformacin de la
web descrita anteriormente en este artculo se impone bastante a menudo.
Donde hay presente una bsqueda de texto completo, los campos de introduccin tienden a
colocarse cerca del margen derecho del encabezamiento. Esto es as sobre todo porque la
bsqueda de texto completo bien implementada es una manera tan vlida de navegar por el sitio como
los enlaces tradicionales alimentados por una taxonoma, y es probable que un subconjunto de la
poblacin de la web abuse de ello, probablemente los usuarios con menos conocimientos tcnicos.
394/407
Ms informacin sobre la implementacin de la composicin de navegacin
Antes de pasar a los detalles, deberais consultar List-O-Matic, una aplicacin alojada en Accessify.com que
crea elementos de navegacin con un estilo sencillo, preparados para ser insertados en cualquier
composicin de pgina.
Aparte del tema de las herramientas que hacen el trabajo por vosotros, hay dos enfoques bsicos en la
composicin de la navegacin:
La navegacin se integra en el encabezamiento de la web (visualmente, si no literalmente) y se orienta
horizontalmente. En este caso, el valor display (visualizar) de los enlaces individuales probablemente se
cambiar a block, y a los elementos de su lista de contenidos se les asignar un valor float de left.
La navegacin est orientada verticalmente y est colocada a la izquierda del contenido principal, ya sea en
su propia columna o justo encima del contenido no primario. En este caso, lo ms probable es que veis que
se utiliza algn tipo de posicionamiento no static.
38.7. Webs con diferentes nmeros de columnas: hacer trampa con class y
display
Algunas webs pueden tener pginas con una o dos columnas; otras, dos o tres. La flexibilidad es uno de los
puntos fuertes de CSS, y uno de los recursos de los que los diseadores grficos tiran inconscientemente, en
su libidionosa cruzada por obtener un control frreo sobre la experiencia del usuario.
Normalmente, estos casos se tratan parcialmente con includes: scripts del sitio que permiten aadir
fragmentos persistentes a una pgina de manera programtica, en vez de copiarlos repetidamente.
Sin embargo, incluso con esas inclusiones los especialistas en estilos todava encontrarn diferencias en la
disposicin; entonces, cul es la mejor manera de tratarlas?
El planteamiento ms directo es aadir una class al body de cualquier pgina que la pueda necesitar. Esto
podra asumir una naturaleza ordinal que corresponde a algunas series de disposiciones sugeridas en las
directrices de identidad, o tener que ver de nuevo con el contenido y el resultado en varias reglas selectoras,
como las siguientes:
.about #bodyCopy,
.contact #bodyCopy,
.privacy #bodyCopy {
float: none; width: auto;
}
.about #sidebar,
.contact #sidebar,
.privacy #sidebar {
display: none;
}
El nico inconveniente de seguir este planteamiento sin la ventaja de incluir declaraciones (una manera
pobre de hacer que el contenido desaparezca o reaparezca, si queris) es que las polticas de los
operadores de los motores de bsqueda podran reducir el peso de aquellas pginas en sus resultados o, en
el caso de implementaciones espectacularmente chapuceras, incluso sacar de sus listas las webs que las
utilizan. Por este motivo (entre muchos otros que se deben tener en cuenta), cualquier tipo de alojamiento
que contratis debera aceptar algn tipo de funcin de inclusin.
Resumen
Aunque es tentador sobre todo si sois principiantes sentarse directamente y empezar a escribir etiquetado
y cdigo, este proceso no da como resultado webs especialmente atractivas, tiles o mantenibles.
No obstante, teniendo en cuenta esmeradamente el contenido que ir en una web y el modo como se
395/407
debera disponer, podis lanzar cualquier web a la estructura derivada de sus requisitos.
Plantillas bsicas:
una columna
Archivo fuente: "Composicin a una columna"
dos columnas
Archivo fuente: "Composicin a dos columna"
tres columnas
Archivo fuente: "Composicin a tres columna"
Preguntas de repaso
1. Dada una lista de posibles enlaces proporcionados por vuestro instructor, divididlas en enlaces primarios
(encabezamientos) y secundarios (pies). Justificad vuestras asignaciones basndoos en los ejemplos
facilitados en este artculo.
2. Identificad lo siguiente en un compuesto creado por un compaero:
a. el nmero de columnas que se deben aplicar al diseo;
b. las anchuras de estas columnas,
c. el float/width/margin, y
d. la combinaci float/width/margin, si la hay, que se debera utilizar para implementar la
presentacin de estas columnas.
3. Con un logotipo, una lista de requisitos y una arquitectura determinados, disead un encabezamiento de
web.
4. Si no podis demostrar el uso de la seccin urea de la composicin del encabezamiento diseado en el
ejercicio anterior, modificad la composicin de manera apropiada y evaluad subjetivamente lo atractivo
que es el resultado.
5. Basndoos slo en los resultados de los motores de bsqueda, obtened el motivo por el que las listas
son preferibles a las colecciones de div (o de otros elementos) para estructurar los elementos de
navegacin. Haced referencia a las caractersticas del software de lectura de pantallas en vuestra
respuesta.
6. Revisad, de memoria, uno de los archivos de la plantilla proporcionada de manera que admita un
nmero diferente de columnas. Modificad tambin de manera significativa la composicin de la
navegacin principal, comparada con lo que se encontr en el archivo de plantilla original.
BNSF Railroad. 2006. [Fecha de consulta: 13 de enero de 2009].
Facebook. 2008. [Fecha de consulta: 13 de enero de 2009].
Henick, Ben. 2006. "Avoid edge cases by designing up front". A List Apart. [Fecha de consulta: 13 de
enero de 2009].
Li, Cindy (2008). "The Adventures of Cindy Li". [Fecha de consulta: 13 de gener de 2009].
Morville, Peter; Rosenfeld, Louis (2006). Information architecture for the world wide web (3 edici).
Cambridge: O'Reilly Media.
: :
396/407
http://mosaic.uoc.edu/ac/le/es/index.html[26/01/13 07:45:41]
Introduccin al currculo de estndares web/contenidos
Accesibilidad : : :
1. Introduccin al currculo de estndares web/contenidos
Chris Mills. 8 de julio del 2008. Publicado en: currculum, principiante, web, estndares, curso
Tengo un sueo desde hace tiempo. Los ltimos 8 o 9 aos, mi trabajo se ha centrado mucho en la
enseanza, ya sea encargando y editando publicaciones tcnicas con el fin de ayudar a los dems a crear
algo interesante con la tecnologa, formando nuevos empleados en las diferentes empresas para las que he
trabajado o editando y redactando artculos de seminarios para ayudar a los dems a utilizar el software
Opera. Tambin me entusiasma la web y creo firmemente en los estndares web abiertos. Quera contribuir a
hacer que la web fuera un lugar mejor y creo que esto vuelve a tener que ver con la enseanza, ya sea
enseando a los dems cmo colaborar y tener ms respeto mutuo o ensendoles cmo hacer que sus
sitios web funcionen en todas las plataformas y dispositivos, y sean accesibles para personas discapacitadas.
Los estndares web son la clave para el ltimo objetivo, as que decid invertir mi tiempo y energa en algo
que les ayudara a mejorar la adopcin de estndares en la web actualmente y en el futuro. Le he dado
vueltas durante un tiempo, pero finalmente ha dado sus frutos con Opera: agradezco mucho a mis
estupendos jefes que me hayan pagado para hacerlo. Uno de mis sueos se ha hecho realidad finalmente.
As pues, en este artculo os presentar el resultado de una gran cantidad de trabajo en los ltimos meses
(ma y de muchas otras personas): el currculo de estndares web, un curso diseado para dar a todo el
mundo una buena base en diseo/desarrollo web, sea cual sea el destinatario, cuyo uso es completamente
gratuito, accesible y no requiere conocimientos previos. Como destinatarios pienso fundamentalmente en las
universidades, porque creo que de alguna manera los estndares de enseanza de los estndares web son
muy deficientes en muchas de ellas. He odo rumores de alumnos a los que se les ha bajado la nota por
utilizar estndares web en sus trabajos porque los esquemas de puntuacin son muy anticuados; tambin he
odo decir que hay empresarios que se desesperan porque, cuando entrevistan a graduados universitarios
para puestos relacionados con la web, ven que los graduados realmente no tienen ni idea sobre desarrollo
web en el mundo real. Si estis en una universidad progresista que s que ensea estndares web de
manera razonable, me quito el sombrero: poneos en contacto conmigo!
En este apartado trataremos lo siguiente:
Por qu son necesarios los estndares web? En este apartado trataremos brevemente las ventajas de
utilizar estndares web, por qu no se adoptan como se debera hacer y cmo este curso pretende
abordar estos temas.
Cmo est estructurado el curso. Lo que su nombre indica. Esta seccin tambin habla sobre cmo
deberan pensar los educadores a la hora de presentar el material para utilizarlo de manera eficaz en los
cursos.
Quin debera hacer este curso? Cuando digo "todo el mundo", qu quiero decir exactamente?
Contenidos. Pasad directamente a este subapartado si os cansis de mi palabrera y queris ir
directamente al aprendizaje.
Agradecimientos.
1.1. Por qu son necesarios los estndares web?
Los principales motivos por los que la adopcin de estndares web en su tarea de diseo/desarrollo web es
una idea tan buena se amplan en el artculo 4, pero los trataremos brevemente aqu como presentacin. El
uso de estndares web ofrece las siguientes ventajas:
1. Eficiencia del cdigo: como aprenderis a lo largo del curso, gran parte de las mejores prcticas en el
uso de estndares web se basan en la reutilizacin del cdigo: en el hecho de que se pueda separar el
contenido HTML de la informacin de estilo (CSS) y de comportamiento (JavaScript), lo que permite
mantener un tamao reducido de los ficheros y escribir el cdigo slo una vez y, ms adelante,
reutilizarlo siempre que sea necesario.
2. Facilidad de mantenimiento: esto est estrechamente relacionado con el ltimo punto; si se puede
escribir el cdigo HTML slo una vez y despus aplicar los estilos y el comportamiento siempre que sea
397/407
necesario utilizando clases y funciones, si se necesita cambiar algn elemento ms adelante, se puede
hacer el cambio slo en un lugar y que se traslade a todo el sitio web, sin tener que especificar este
cambio cada vez que sea necesario.
3. Accesibilidad: los dos puntos siguientes estn muy relacionados; uno de los grandes problemas de la
web es hacer que los sitios web sean accesibles para todo el mundo, independientemente de quien sea,
independientemente de su circunstancia. Esto incluye hacer que los sitios web sean utilizables por
personas con discapacidades como ceguera o problemas de visin y problemas motores (es decir,
personas con limitacin de movimientos y que es posible que no puedan usar adecuadamente las
manos, o nada en absoluto). Mediante el uso de estndares web y buenas prcticas, se puede conseguir
que los sitios web sean utilizables para este grupo de pblico de la web tan importante sin que haya que
hacer ningn esfuerzo adicional.
4. Compatibilidad de dispositivos: con esto nos referimos al hecho de garantizar que sus sitios web
funcionarn no slo en diferentes plataformas es decir, Windows, Mac, Linux, sino tambin con
dispositivos de navegacin alternativos, como los que hoy da pueden incluir los telfonos mviles,
televisores y consolas de juegos. Estos dispositivos tienen limitaciones como el tamao de pantalla, la
potencia de procesamiento, los mecanismos de control disponibles y otros, pero una vez ms la buena
noticia es que, utilizando estndares web y las mejores prcticas, est garantizado que los sitios web
funcionarn en la mayor parte de estos dispositivos. Hay ms telfonos mviles en el mundo que
ordenadores, muchos de los cuales son compatibles con Internet, de manera que os podis permitir
vosotros o vuestros clientes perderos este mercado? Para ms informacin sobre desarrollo web para
mviles, podis consultar algunos de los artculos relacionados en <dev.opera.com>.
5. Araas web y motores de bsqueda: con esto nos referimos a lo que se denomina "optimizacin de
motores de bsqueda", la prctica de hacer que los sitios web sean tan visibles como sea posible para
los llamados buscadores web que rastrean la web e indexan sitios web, y, por lo tanto, ofrecen mejores
posiciones de busca en sitios como Google. Existe toda una ciencia detrs (podis ver los artculos
sobre la optimizacin de motores de bsqueda como Intelligent site structure for better SEO! y Semantic
HTML and Search Engine Optimization), sin embargo, una vez ms, slo utilizando los estndares web
ya conseguiris que vuestro sitio sea ms visible en Google, Yahoo!, etc., lo cual es bueno para los
negocios.
No obstante, a pesar de estas ventajas, la mayor parte de los sitios no siguen los estndares web y muchos
desarrolladores web actualmente todava utilizan prcticas incorrectas y obsoletas. "Por qu?", os
preguntaris. Hay una serie de motivos para ello: algunos dirn que es por falta de formacin, por polticas
de empresa, por que no hay que aprender estndares si se les paga de todos modos, que son muy difciles
de aprender, que hay poca compatibilidad de los estndares en los navegadores web, etc. Examinemos con
ms detalle algunos de estos conceptos y, a continuacin, veamos los argumentos contrarios para
deshacernos de cualquier excusa que nos impida adoptar o aprender los estndares.
1. Falta de formacin: esto es un problema, pero es uno de los motivos principales por los que se ha
creado este curso. Muchas universidades no ensean los estndares web en sus cursos relacionados
con la web y muchos planes de estudios tienden a incluir prcticas obsoletas, muy difciles de cambiar a
causa de la burocracia. Los libros y cursos de formacin tienden a ser caros. Pero, un momento. Ahora
hemos ofrecido un curso que es gratuito y estamos yendo por las universidades, etc., para ayudarles a
hacer estos cambios, de manera que realmente no hay excusa posible en este caso.
2. Polticas de empresa: no cabe duda de que algunas empresas/instituciones todava tienen sitios web
realmente anticuados y obsoletos. Puede que tengan polticas que obliguen a sus empleados a utilizar
navegadores obsoletos, pero la situacin est mejorando y ahora que hay un curso gratuito disponible
para saber fcilmente cmo hacer cambios, las cosas deberan mejorar an ms. La actualizacin de un
sitio web a los estndares modernos anima a las empresas a actualizar los navegadores que utilizan
porque los sitios no se vern bien en navegadores obsoletos (aunque todava deberan funcionar en
navegadores antiguos). Las empresas tambin deberan animar a sus clientes a actualizarse. Tambin
existe un razonamiento empresarial slido: los sitios que utilizan estndares web, como se ha explicado
anteriormente, obtendrn mejores resultados en los motores de bsqueda y sern accesibles para
personas con discapacidades y usuarios de dispositivos alternativos. Se pueden permitir las empresas
ignorar a este pblico?
3. "No necesito aprenderlos": sabemos que algunos desarrolladores an dicen: "Pero si estoy utilizando
prcticas obsoletas y an me pagan, por qu me debo preocupar de estas cosas nuevas?". Como se
ha dicho antes, hace que el cdigo sea ms eficiente, ms fcil de escribir y ms fcil de mantener.
Adems, permite escribir un cdigo moderno que es accesible y utilizable en dispositivos alternativos.
398/407
Es o no interesante? Tambin har que vuestro conjunto de habilidades sea a prueba de contingencias
futuras y lo har capaz de ganar ms. En la actualidad, hay muchas empresas que piden saber utilizar
los estndares web.
4. "Cuesta demasiado de aprender": tonteras. Despus de digerir parte de este curso, veris qu fcil
es entender los conceptos bsicos del uso de estndares web, tanto si sois nuevos en el
desarrollo/diseo web como si ya conocis el tema y estis actualizando vuestro conjunto de
capacidades. Es tan difcil como utilizar los mtodos anticuados y desfasados, lo que no es nada difcil,
y, a pesar de todo, aporta muchas ventajas en comparacin con los mtodos antiguos.
5. Compatibilidad de los estndares en los navegadores: antes, la compatibilidad de los estndares en
los navegadores web sola diferir mucho y esto haca que conseguir que un sitio web funcionara en
diferentes navegadores fuera todo un dolor de cabeza. Pero actualmente esto ya ha pasado y los
navegadores actuales tienen todos una compatibilidad correcta con los estndares web. En ocasiones
an se necesita compatibilidad con navegadores antiguos que no disponen de una compatibilidad tan
buena, pero mediante el uso de las mejores prcticas actuales podis garantizar que los usuarios de
estos navegadores sigan teniendo una experiencia de usuario razonable.
As pues, como se puede ver, realmente no hay excusa para no adoptar los estndares web en su tarea de
desarrollo web. Como mnimo, si hacis este curso desde el punto de vista de un principiante, empezaris
con buen pie y aprenderis las mejores prcticas desde el comienzo en lugar de haber aprendido prcticas
incorrectas.
Nota
Estamos hablando de estas prcticas incorrectas en voz baja, como si fueran los
planes secretos de la Estrella de la Muerte o algo parecido. De hecho, en este curso
no trataremos estas prcticas detalladamente porque no creemos que debamos
hacerlo. Creemos que se las debera poner en el camino correcto, para empezar.
Probablemente os estaris preguntando qu son, de manera que hablemos un poco de
ellas.
Hace tiempo, la gente sola hacer cosas como planificar sus sitios web con tablas
gigantes, utilizando las diferentes celdas de la tabla para situar sus grficos, el texto,
etc. (la finalidad de las tablas no es sta y aade un etiquetado superfluo a la pgina).
Solan utilizar imgenes invisibles llamadas GIF espaciadores para ajustar con
precisin la colocacin de los elementos de la pgina (de hecho, la finalidad de las
imgenes no es sta, y, adems, aade un etiquetado superfluo a la pgina). Solan
escribir JavaScript que generaba mens, etc. a demanda (que no va bien para los que
no tienen desactivado JavaScript en sus navegadores, ni para las personas con
problemas visuales que utilizan lectores de pantalla porque se confunden con este
JavaScript) o que slo funcionaban en un navegador (qu sucede con la gente que
utiliza otros navegadores?). Solan insertar la informacin de estilo directamente en el
HTML utilizando elementos <font> (en realidad, son terribles para el mantenimiento y
aaden etiquetado superfluo a la pgina). Y muchos otros crmenes contra el
desarrollo web. Lo peor es que antes he dicho "hace tiempo", pero el hecho es que
muchos an hoy hacen cosas as.
El desarrollo web es una habilidad un poco confusa en general, pero las prcticas
incorrectas como stas provocan que sea an ms complicado. El uso de estndares
web y buenas prcticas, como se ha descrito en este curso, es la mejor alternativa.
1.2. Estructura del curso
El curso se compone de varios artculos, de los que habr ms de 50 cuando se haya acabado el curso
bsico, cada uno de ellos con miles de palabras. Cada artculo trata sobre un microtema especfico y, en
caso necesario, incluye antecedentes sobre el tema, teora esencial, ejemplos prcticos y guas paso a paso,
adems de preguntas de repaso para comprobar los conocimientos adquiridos.
Adems, en el futuro ofreceremos un programa de aprendizaje entero paso a paso, que repasar todo el
proceso de construccin de un sitio web de principio a fin.
Una manera lgica de impartir el curso es calcular en cuntas lecciones se puede ensear y dividirlas por el
nmero de artculos. Para cada leccin, debis hacer que los alumnos lean los artculos relacionados con la
399/407
leccin mencionada antes de que se imparta. A continuacin, podis repasar ejemplos prcticos durante la
leccin y hacer que los alumnos respondan a las preguntas de repaso despus de cada leccin.
Lgicamente, creo que una hora debera ser tiempo suficiente para repasar los conceptos contenidos en
cada artculo, siempre que los alumnos lean cada artculo antes de impartir las lecciones. En este curso hay
unas 50 horas de tiempo de clase y 50 horas de lectura preliminar.
Naturalmente, hay que tener en cuenta la cantidad de tiempo que se tarda en impartir el curso y qu se debe
cubrir exactamente en cada leccin, pero la experiencia es la clave.
1.3. Quin debera seguir este curso?
Se trata de un curso de estndares web que consta de varios artculos, dirigido a prcticamente todo el
mundo que quiera aprender diseo web basado en estndares desde cero. La finalidad es que el lector pase
de tener una mera familiaridad bsica con la navegacin a la web a ser competente en CSS y HTML y a
tener conocimientos bsicos de JavaScript y cmo encaja en el rompecabezas. Deberis dar bastantes
conocimientos para que se pueda empezar a pensar en entrar en el mercado laboral con confianza
(naturalmente, la experiencia no se puede ensear).
A quin va dirigido? Queremos que lo pueda hacer cualquier persona que desee aprender diseo web "de
la manera correcta":
1. Estudiantes y profesores universitarios: ya lo hemos comentado anteriormente, se trata de un
conjunto ideal de artculos a partir del que se puede crear un curso propio para impartirlo a los
estudiantes o utilizar parte de los artculos para completar otro curso. Si sois alumnos que ya estis
estudiando algn curso relacionado con la web, deberais utilizar este material para completar vuestros
conocimientos y presionar a vuestros profesores para que tambin lo puedan tener en cuenta.
Recomendara tambin a todos los profesores y conferenciantes que echen un vistazo a este material
para asegurarse de que las tcnicas cubiertas en sus cursos son buenas prcticas actuales.
2. Alumnos en edad preuniversitaria o universitaria: aunque este curso se ha concebido principalmente
para adultos, tambin se podra impartir perfectamente a alumnos ms jvenes; es cuestin de intentarlo
y ver cmo funciona.
3. Diseadores y desarrolladores web existentes: hay muchos desarrolladores y diseadores web en el
mercado que no estn utilizando los estndares web y las mejores prcticas, o que podran utilizar una
referencia fcilmente accesible para consultar dudas o utilizarlos para repasar sus conocimientos. A los
primeros, les recomiendo que le den una oportunidad a este curso y vean lo fcil que es y lo valioso que
resulta adoptar los estndares web. Para los ltimos, estoy seguro de que encontrarn este curso de
utilidad para ayudar a los dems, para repasar sus conocimientos, consultar hechos difciles de recordar
y encontrar argumentos para intentar convencer a jefes y clientes de que cosas como la accesibilidad
son muy tiles.
4. Educadores en empresas: se trata de una manera ideal de proporcionar una formacin nada cara a
los empleados.
5. Otras personas: si sois personas a quienes simplemente les apetece aprender algo sobre diseo y
desarrollo web, entonces, una vez ms, sta es una manera nada cara de contar con un poco de ayuda
para vuestro objetivo.
No espero que la gente pague para utilizar este curso. Se publica con una licencia de Creative Commons, de
modo que est disponible libremente para cualquiera que quiera utilizarlo mientras nos d el reconocimiento
adecuado.
1.4. Contenidos
Hay que tener en cuenta que se han publicado los primeros 39 artculos del currculo y que se publicarn
aproximadamente 10 ms tan pronto como sea posible para completar el curso.
Inicio
1. Material de introduccin, por Chris Mills (es lo que habis ledo hasta ahora). [versin original en
ingls]
400/407
HAY TRADUCCIONES DISPONIBLES. Hay traducciones disponibles del currculo de estndares web.
4. El modelo de estndares web: HTML, CSS y JavaScript
Esta seccin no entrar en detalles de cdigos o etiquetado, y servir de introduccin al proceso de diseo
para ms tarde pasar a empezar a crear grficos, cdigo y presentar conceptos de AI, navegacin,
usabilidad, etc.
8. Teora del color
11. La tipografa en la Web
Fundamentos de HTML
14. Elegir el doctype correcto para los documentos HTML
16. Listas HTML
17. Imgenes en HTML
19. Tablas HTML
22. Contenedores genricos: los elementos div y span
24. Validar el HTML
Accesibilidad
CSS
401/407
Ben Buchanan empez a crear pginas web hace ms de diez aos, mientras
acababa licenciaturas de todo tipo de materias excepto las TI. Ha trabajado en
los sectores tanto pblico (universidad) como privado y en la remodelacin de
grandes sitios web, incluido el de The Australian y tres generaciones del sitio web
corporativo de la Universidad de Griffith. Actualmente trabaja de arquitecto de
soluciones para News Digital Media y escribe en el blog 200ok.
Fotografa: Andy Budd
Font: http://flickr.com/photos/
andybudd/98405468/
Mark Norman Francis ha trabajado con Internet desde antes de que se inventara
la web. En su ltimo empleo, trabaj en Yahoo! de front end architect de la
pgina web ms grande del mundo, donde defina mejores prcticas, estndares
de codificacin y calidad del desarrollo web en el mbito internacional.
Antes de trabajar en Yahoo! trabaj en Formula One Management, Purple
Interactive y City University en distintos puestos, incluidos desarrollo web,
programacin CGI y arquitectura de sistemas. Finge tener un blog en
<http://marknormanfrancis.com/>.
Linda Goin es licenciada en Bellas Artes con un minor en Empresariales y
marketing, y tiene un mster de Historia americana con un minor de la Reforma.
Aunque la ltima titulacin no parece encajar con la primera experiencia
educativa, Linda ha utilizado su experiencia de 25 aos de diseo in situ en
excavaciones arqueolgicas y en el estudio de la cultura material.
Agradecimientos
Son tantas las personas que me han ayudado a crear este curso que es imposible mencionarlas con detalle,
pero creo no haberme olvidado de nadie. Todas son grandes personas, de modo que no las perdis de vista,
id a sus charlas, comprad sus libros, leed sus blogs o haced cualquier otra cosa para apoyarlas. Os doy a
todos las gracias y os expreso mi admiracin.
1. Los autores: muchas gracias a Ben Buchanan, Tom Hughes-Croucher, Mark Norman "Norm" Francis,
Linda Goin, Paul Haine, Jen Hanen, Benjamin Hawkes-Lewis, Ben Henick, Christian Heilmann, Roger
Johansson, Peter-Paul Koch, Jonathan Lane, Tommy Olsson, Nicole Sullivan y Mike West. Sin vosotros,
este curso no sera nada, literalmente.
2. El equipo de Opera: agradezco mucho a Jan Standal, David Storey, al resto de mi equipo y a toda la
gente de Opera que creyeran en esta idea y me ayudaran a desarrollar el plan.
3. Las organizaciones: gracias a todos los de Yahoo! (a los autores, y a Sophie Major por su ayuda en la
organizacin y promocin), a WaSP (especialmente a Gareth Rushgrove, Stephanie Troeth y Aarron
Walter), a Britpack, a la gente de Geekup y a todas las universidades que mostraron inters por este
curso y por contribuir a su desarrollo.
4. Las personas: muchas gracias a estas personas maravillosas: Craig Saila, Sara Dodd, John Allsopp,
Roan Lavery, Bruce Lawson, Alan White. Mis disculpas si me he dejado a alguien.
5. Los lectores: agradezco especialmente a todos los lectores su inters en la creacin de pginas web
de la manera correcta y tambin el hecho de tomarse la molestia de leer este curso.
Sobre los autores...
Ben Buchanan
Mark Norman Francis
Linda Goin
402/407
Linda Goin
Entre los reconocimientos de su trabajo se incluyen quince galardones de primera
posicin de la Colorado Press Association, numerosos premios de bellas artes y
diseo grfico, y entrevistas sobre el desarrollo de contenidos con The Wall St.
Journal, Chicago Tribune, Psychology Today y Los Angeles Times. Linda es
autora de varios libros electrnicos sobre diseo web y accesibilidad y, como
actividad suplementaria, tambin escribe artculos sobre finanzas personales y
para algunos profesionales de la optimizacin de motores de bsqueda (SEO).
El sitio web personal de
Paul es
<http://dev.joeblade.com>.
Despus de abrirse camino desde las profundidades ms oscuras de Somerset,
cuando lleg a la mayora de edad, Paul Haine se encontr paradjicamente
atrapado durante seis aos ms a la otra punta del pas en las profundidades
ms oscuras de Kent, donde aprendi todo lo que sabe sobre los estndares de
la web durante las pocas semanas que tena entre sus clases de historia.
Despus de pasar dos aos en Oxford y de escribir HTML Mastery se fue a
Islington, Londres, donde trabaja de client-side developer para The Guardian.
Diseadora y desarrolladora de webs por profesin y fotgrafa, escritora en blogs
mviles y "friki" profesional del arte por aficin, la seora Jenifer Hanen, Jen,
empez su carrera artstica y como diseadora desde la trona a la edad de 11
meses con su amor por el arte corporal alimentario y el arte mural alimentario.
Aprendi HTML por su cuenta en el ao 1996 cuando un loco de los ordenadores
le dijo que un artista no poda aprender a programar, y desde entonces ha
estado intensamente enamorada de todo lo que tiene que ver con el diseo de
webs.
La seora Jen es la propietaria y fundadora de Black Phoebe Designs, una
empresa de diseo de webs y diseo mvil. La seora Jen tiene un mster de
Informtica y sistemas multimedia por el Trinity College de Dubln, Irlanda, y
ense Diseo de webs en una universidad de la zona de Los ngeles entre el
2001 y el 2005. Ha participado en dos proyectos de blogs mviles de Nokia,
Wasabi Lifeblog (2004-2005) y Nokia Urbanista Diaries (2008). Siempre podris
encontrar a la seora Jen en lnea en <blackphoebe.com> o en
<blackphoebe.mobi>.
Despus de estudiar una seleccin de reyes medievales, cientficos del siglo
XVIII y otros excntricos histricos en la universidad, Benjamin Hawkes-Lewis
acab no se sabe exactamente cmo trabajando de desarrollador de webs para
Yahoo!, con gran placer por su parte. Sus actividades preferidas incluyen una
comida decente con amigos, una buena pelcula en el cine, tumbarse en la hierba
a tomar el sol y solucionar problemas difciles a partir de fuentes primarias,
principios bsicos y pruebas empricas.
Paul Haine
Jenifer Hanen
Benjamin Hawkes-Lewis
Ben Henick
403/407
Ben Henick ha estado creando sitios web de un modo u otro desde setiembre de
1995, cuando empez su primer proyecto web como voluntario acadmico.
Desde entonces, ha trabajdo bsicamente como freelance.
Ben es un generalista; sus competencias profesionales incluyen prcticamente
todos los aspectos del diseo y desarrollo de sitios web, desde CSS y HTML
hasta el diseo y la generacin de textos, pasando por PHP/MySQL y
JavaScript/Ajax.
Vive en Lawrence, Kansas, con tres ordenadores y sin televisor. En henick.net
podis conocer ms acerca de l y de su trabajo.
Chris Heilmann
Fotografa: Bluesmoon
Chris Heilmann ha trabajado de desarrollador de webs durante diez aos
despus de pasar por el periodismo radiofnico. Trabaja para Yahoo! en el Reino
Unido como formador y desarrollador jefe y supervisa la calidad del cdigo de la
interfaz de usuario para Europa y Asia. Chris escribe en el blog Wait till I come y
se le puede encontrar en muchas redes sociales como "codepo8".
Tom Hughes-Croucher ha trabajado siempre en el sector de Internet. Ha
realizado aportaciones a varios estndares de tecnologa de la web para
organismos de estndares como el World Wide Web Consortium (W3C) y el
British Standards Institute (BSI). Hace poco trabaj en el sector de la msica
digital para ofrecer soluciones de msica digital a marcas muy conocidas del
Reino Unido, como Tesco, Three telecom y Channel 4.
Actualmente trabaja para Yahoo! como tcnico evangelista. Se ha especializado
en tecnologa web "lado cliente" y en servicios web REST y le gusta fomentar las
mejores prcticas siempre que puede. Antes haba sido encargado de European
Frontpages, que atiende a millones de visitantes europeos cada mes, y desde
entonces nunca ms le ha dado miedo el escalado.
Roger Johansson es un profesional de la web que siente pasin por sus
estndares, accesibilidad y usabilidad. Se dedica a desarrollar sitios web en la
asesora sueca de webs NetRelations, y durante las noches y los fines de
semana, a escribir artculos para sus sitios web personales 456 Berea Street y
Kaffesnobben.
Cuando no est delante de un ordenador, a menudo est en su jardn
ensucindose las manos o perdido por el bosque pescando.
Jonathan Lane es el presidente de Industry Interactive, una empresa de
desarrollo web y de aplicaciones web situada en Mayne Island, British Columbia,
Canad. Empez en el mundo del desarrollo web trabajando durante muchos
aos en el Centro de redesarrollo del currculo de la Universidad de Lethbridge
como coordinador de sus proyectos web.
Christian Heilmann
Tom Hughes-Croucher
Roger Johansson
Jonathan Lane
404/407
Jonathan Lane
Tiene un blog en Flyingtroll y actualmente est desarrollando Mailmanagr, una
interfaz de correo electrnico para la aplicacin de gestin de proyectos
Basecamp.
Chris Mills
Chris Mills es director de relaciones de desarrollo de Opera: edita y publica
artculos en <dev.opera.com> y <labs.opera.com>, colabora con la comunidad
para aumentar la difusin de Opera y reunir opiniones, y fomenta el software de
Opera siempre que puede. Tambin es el organizador y editor del Currculo de
estndares web.
Aparte del trabajo, es un gran aficionado a la msica, que disfruta tocando y
escuchando una amplia variedad de msica, incluidas metal, folk, punk,
electrnica, progresiva y otras. Su banda de referencia actualmente es la potente
Conquest of Steel.
Intentamos mejorar constantemente este curso y que sea adoptado por cuantas
ms personas mejor. Si tenis alguna sugerencia sobre cmo se podra mejorar
el curso, comentarios en general para compartir, o si deseis comentarnos el
hecho de adoptarlo en alguna otra parte, poneos en contacto con nosotros en el
correo electrnico cmills@opera.com. Tambin podis publicar comentarios
sobre cada uno de los artculos de la serie mediante el enlace "Comentar este
artculo" que hay al final.
Tommy Olsson es un predicador pragmtico de los estndares web y la
accessibilidad, que reside en la zona interior del centro de Suecia. Cre su primer
documento HTML en 1993 y actualmente es el administrador web tcnico de una
agencia del Gobierno sueco. Hasta ahora ha escrito un libro: The Ultimate CSS
Reference (con Paul OBrien) y, por desgracia, tiene abandonado su blog,
denominado The Autistic Cuckoo (hasta el punto que ya no funciona).
Nicole Sullivan es una gur del rendimiento de CSS, que vive en California.
Comenz su carrera profesional en al ao 2000, cuando su futuro marido (que en
aquella poca era un empleado del W3C) le dijo que si su pgina web no
validaba, no podra dormir por la noche. Nicole pens que sera mejor investigar
qu era todo eso de la validacin y as es como surgi su aficin por los
estndares. A medida que aumentaba su apreciacin por el rendimiento y los
sitios a gran escala, empez a trabajar en el sector del marketing en lnea y cre
soluciones CSS para multitud de marcas muy famosas en Europa y en todo el
mundo, como SFR, Club Med, SNCF, La Poste, FNAC, Accor Hotels y Renault.
Actualmente, Nicole trabaja en Yahoo!, en el grupo de rendimiento excepcional.
Sus funciones son la investigacin y la promocin de las mejores prcticas sobre
el rendimiento, y crear herramientas, como YSlow, que contribuyen a que otros
ingenieros informticos creen mejores webs. Escribe sobre los estndares, sobre
su perro y sobre su obsesin, el CSS orientado a objetos, en
Chris Mills
Tommy Olsson
Nicole Sullivan
405/407
www.stubbornella.org.
: :
406/407
http://mosaic.uoc.edu/ac/le/es/m6/ud8/taula.html[26/01/13 07:45:46]
CSS
Diseo, composicin y presentacin de formularios con CSS
x 1/x 2/x 3/x 4/x 5/x 6/x 7/x 8/x 9/x 10/x 11/x 12/x 13/x 14/x 15/x
2 0,5 - - - - - - - - - - - - - -
3 0,(3*) 0,(6*) - - - - - - - - - - - - -
4 0,25 0,5 0,75 - - - - - - - - - - - -
5 0,2 0,4 0,6 0,8 - - - - - - - - - - -
6 0,1(6*) 0,(3*) 0,5 0,(6*) 0,8(3*) - - - - - - - - - -
7 0,(142857*) 0,(285714*) 0,(428571*) 0,(571428*) 0,(714285*) 0,(857142*) - - - - - - - - -
8 0,125 0,25 0,375 0,5 0,625 0,75 0,875 - - - - - - - -
9 0,(1*) 0,(2*) 0,(3*) 0,(4*) 0,(5*) 0,(6*) 0,(7*) 0,(8*) - - - - - - -
10 0,1 0,2 0,3 0,4 0,5 0,6 0,7 0,8 0,9 - - - - - -
11 0,(09*) 0,(18*) 0,(27*) 0,(36*) 0,(45*) 0,(54*) 0,(63*) 0,(72*) 0,(81*) 0,(90*) - - - - -
12 0,08(3*) 0,1(6*) 0,25 0,(3*) 0,41(6*) 0,5 0,58(3*) 0,(6*) 0,75 0,8(3*) 0,91(6*) - - - -
13 0,(076923*) 0,(153846*) 0,(230769*) 0,(307692*) 0,(384615*) 0,(461538*) 0,(538461*) 0,(615383*) 0,(692307*) 0,(769230*) 0,(846153*) 0,(923076*) - - -
14 0,0(714285*) 0,(142857*) 0,2(142857*) 0,(285714*) 0,3(571428*) 0,(428571*) 0,5 0,5(714285*) 0,6(428571*) 0,(714285*) 0,7(857142*) 0,(857142*) 0,9(285714*) - -
15 0,0(6*) 0,1(3*) 0,2 0,2(6*) 0,(3*) 0,4 0,4(6*) 0,5(3*) 0,6 0,(6*) 0,7(3*) 8 0,8(6*) 0,9(3*) -
16 0,0625 0,125 0,1875 0,25 0,3125 0,375 0,4375 0,5 0,5625 0,625 0,6875 0,75 0,8125 0,875 0,9375
407/407

Lenguajes y Esta&#769 Ndares - Introduccio&#769 N Al Curri&#769 Culo de Esta&#769 Ndares Web-Contenidos PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Lenguajes y Esta&#769 Ndares - Introduccio&#769 N Al Curri&#769 Culo de Esta&#769 Ndares Web-Contenidos PDF

Caricato da

Copyright:

Formati disponibili

Lenguajes y estndares - Introduccin al currculo de estndares web/contenidos

Potrebbero piacerti anche