Also available in English

Inf@Vis!

La revista digital de InfoVis.net

Hojas de Estilo en Cascada y CSS Zen Garden
por Juan C. D√ľrsteler [mensaje nļ 171]

CSS Zen Garden es una interesante iniciativa lanzada en 2003 para demostrar los beneficios del uso de las hojas de estilo en cascada (Cascading Style Sheets o CSS). Con el mismo c√≥digo HTML fijo, muchos dise√Īadores de web han contribuido sus hojas CSS produciendo webs de apariencia radicalmente distinta, con el mismo contenido.
ZenGarden1.jpg (303500 bytes)
CSS Zen Garden: La P√°gina original tal como puede verse en la web CSS Zen Garden
Fuente: Captura de pantalla por el autor
Pulse sobre la imagen para agrandarla

CSS Zen Garden es un sitio web creado en 2003 por Dave Shea. Mitad manifiesto y mitad galer√≠a, seg√ļn sus propias palabras, Css Zen Garden surgi√≥ como respuesta al uso elemental y falto de inspiraci√≥n que se hac√≠a de las hojas de estilo en cascada (CSS). La idea era crear un c√≥digo HTML elemental e inamovible y solicitar a dise√Īadores, programadores y creadores web en general que contribuyeran sus hojas CSS para dar formato visual a dicho c√≥digo HTML.

HTML es un c√≥digo de descripci√≥n de p√°gina, soporte l√≥gico de toda p√°gina web, que se cre√≥ para estructurar l√≥gicamente las p√°ginas web, no para dar formato visual a las mismas. En los a√Īos 90 la proliferaci√≥n de sitios web, junto con la de browsers cada uno con sus distintas propiedades y formas de interpretar HTML hab√≠a creado un cierto caos en el que codificar una p√°gina web que se viera igual en distintos navegadores era poco menos que una proeza. (Todav√≠a hoy tiene su intr√≠ngulis).

Una organizaci√≥n de dise√Īadores web denominada "the Web Standards Project" empez√≥ a trabajar con los fabricantes de navegadores para alinear sus software (que presentaba notables dieferencias en comportamiento para una misma p√°gina HTML) con las recomendaciones del "WorldWide Web Consortium" (W3C).

Un poco de CSS

Una de las bases de la programación inteligente de interfaces gráficas ha sido siempre la de separar el contenido de la forma que se le da, el fondo de la forma. Esto quiere decir que todo el código que da funcionalidad al programa no debe contener ninguna instrucción referente a la forma en que se representa, sólo a su estructura. Por ejemplo en el código HTML

<blockquote>Esto es una cita</blockquote>

"blockquote" hace referencia a un bloque de texto que corresponde a una cita de otro texto. Es decir es una forma de estructurar una frase de un documento, pero no especifica que tama√Īo de letra o en que color se ha de pintar. Curiosamente, como muchos browsers indentaban este tipo de p√°rrafo, se ha usado <blockquote> regularmente para producir un efecto visual como es la indentaci√≥n o el sangrado, para el que no estaba pensado.

Si no respetamos ese principio de programaci√≥n, cada vez que cambiemos de opini√≥n sobre, por ejemplo, qu√© color ha de tener un t√≠tulo de nivel 3, habremos de recorrer todas las p√°ginas que contienen ese c√≥digo para cambiarlo al nuevo color lo cual puede convertirse en una pesadilla, limitando enormemente la flexibilidad de nuestros dise√Īos.

ZenSea.jpg (366386 bytes) Deco.jpg (291972 bytes) ZenBugs.jpg (374559 bytes)
CSS Zen Garden: Algunas de entre las centenares de contribuciones. De izquierda a derecha "Like the Sea", "Deco"y "Bugs" tal como se pueden ver en la web de CSS Zen Garden. Aunque parezca mentira, el código HTML de la página web es el mismo, sólo cambia la hoja de estilo!
Fuente: Captura de pantalla por el autor
Pulse sobre la imagen para agrandarla

Los resultados de los trabajos de los grupos antes mencionados proporcionaron varios est√°ndares para HTML y, particularmente, la especificaci√≥n de las hojas de estilo en cascada CSS. Mediante el a√Īadido de unos identificadores en los "tags" de HTML como por ejemplo "class" e "id" es posible definir que un "tag" de HTML es de una clase especial definida por el usuario. As√≠

<blockquote class="literaria">En un lugar de la Mancha...</blockquote>

indica que estructuralmente lo que est√° entre "blockquotes" es una cita literaria.

En un fichero aparte se definen con qué formato se representarán visualmente las diferentes instancias de class e id con lo que efectivamente separamos forma de fondo. Aunque la cita anterior esté repetida cientos de veces en muchas páginas de nuestra web la podemos representar de muchas maneras diferentes sin más que cambiar la entrada del fichero CSS donde se especifica dicha representación.

Zen Garden de nuevo

CSS se estaba utilizando a principios de siglo para cometidos relacionados m√°s con la programaci√≥n de p√°ginas web que para su dise√Īo visual y los esfuerzos por demostrar su bondad para gestionar el aspecto visual de la web no llegaban a los dise√Īadores gr√°ficos. En la mente de Dave Shea empez√≥ a tomar forma la idea de que si existiera un repositorio de trabajos gr√°ficos excelentes basados en CSS los dise√Īadores se dar√≠an cuenta de su potencial al tener ejemplos que valorar. Con este prop√≥sito cre√≥ CSS Zen Garden en 2003.

CSS Zen Garden consiste en una sola p√°gina que contiene un c√≥digo no muy largo explicando qu√© es e invitando a cualquiera que lo desee a contribuir una hoja CSS para dar formato a dicho c√≥digo. Existen enlaces en el mismo a las distintas contribuciones. Los resultados son espectaculares en algunos casos. En todos queda demostrada la enorme flexibilidad y potencia de las hojas CSS y la habilidad de los dise√Īadores para usarlas.

SilverScreen.jpg (277025 bytes)
CSS Zen Garden: Una interesante contribución, que se expande en horizontal es "SilverScreen", tal como puede verse en la web
Fuente: Captura de pantalla por el autor
Pulse sobre la imagen para agrandarla

Hay m√°s de 700 contribuciones, esto es, hojas de estilo. Cada una produce lo que parece una web completamente distinta a las dem√°s, con exactamente el mismo contenido HTML. M√°s importante a√ļn, revisando el c√≥digo de las hojas CSS se puede aprender mucho acerca de como utilizar esta tecnolog√≠a de uso imprescindible en cualquier web seria.

Porque CSS Zen Garden es una galer√≠a de aut√©nticas maravillas en el dise√Īo de p√°ginas web donde inspirarse para realizar dise√Īos, distribuir apropiadamente los elementos de la p√°gina, utilizar tipograf√≠a apropiada, crear efectos especiales con CSS avanzadas o simplemente descubrir la enorme potencia de las hojas de estilo en cascada.

Enlaces de este artŪculo:

http://www.csszengarden.com   Website de CSS Zen Garden
http://www.webstandards.org   Website de The Web Standards Project
http://w3c.org   Website de WorldWide Web Consortium
http://csszengarden.com/?cssfile=/163/163.css&page=1   Contribuci√≥n a ZenGarden: Like the Sea
http://csszengarden.com/?cssfile=/094/094.css   Contribuci√≥n a ZenGarden: Deco
http://csszengarden.com/?cssfile=/157/157.css&page=2   Contribuci√≥n a ZenGarden: Bugs
http://www.csszengarden.com/?cssfile=http://www.pboere.co.uk/images/165.css   Contribuci√≥n a ZenGarden: Silverscreen
© Copyright InfoVis.net 2000-2018