por Alberto González
En el 2006, se cumplen trece años desde que el World Wide Web (WWW) dejó de ser dominio exclusivo del ámbito académico y se hizo abierto a todo público. Desde entonces, el comercio y los creadores individuales se han dedicado a explotar el Internet a niveles que sus primeros creadores jamás hubiesen imaginado. De hecho, en principio se envisionó a la red como un medio para transmitir comunicación meramente textual en forma rápida, y de ninguna manera como un escaparate de diseño visual, o de multimedios.
Sin embargo, con la creciente popularidad de Internet, estos requerimientos fueron creciendo en demanda, y muchos diseñadores pioneros, sacando partido de su inventiva, comenzaron a incorporar elementos gráficos y de diseño en la web, si bien con unas prestaciones bastante rudimentarias en comparación con las herramientas disponibles para diseño en impresos. Es de estos tiempos que se deriva la práctica –lamentablemente, aún hoy bastante común— del “slicing” o el “partir” un diseño gráfico en una especie de cuadrícula cuyas piezas están unidas entre sí por una o varias tablas de HTML, el lenguaje estándar de las páginas en Internet.
El meollo del asunto radica en que las tablas en HTML, como tales, nunca fueron concebidas para ser utilizadas como elemento de diseño, sino como un recurso para incluir información textual en forma tabular (similar a una hoja de cálculo de Excel). Por tanto, los diseñadores conscientes de hacer las cosas bien y como la norma manda, han adoptado un lenguaje para usos de diseño y presentación para documentos HTML llamado CSS (en inglés: Cascading Style Sheets, u hojas de estilo en cascada). El CSS, al igual que el HTML, es un lenguajes desarrollado por el World Wide Web Consortium (W3C) entidad encargada de establecer los parámetros en estándares para el WWW.
La finalidad principal del CSS es la de poder separar diseño de contenido en una página HTML. De esta manera, es posible crear una página con una estructura semánticamente correcta, con el mínimo de etiquetas (tags) necesario, lo cual nos deja con un documento bastante eficiente, de bajo peso y que es compatible con los estándares del W3C, por el cual se rigen los navegadores web de hoy día para desplegar contenido del WWW.
Ventajas de usar CSS en un diseño web
1. Separación absoluta de diseño y contenido. Esta es quizás la razón principal para adoptar CSS. La adopción creciente de normas estandarizadas en despliegue de contenido de una página HTML por parte de los principales navegadores en uso hace posible hoy día el maquetar el diseño entero de una página en CSS, sin utlizar tablas para dicho fin (aunque para quienes apenas empiezan en CSS, es aceptable el utilizar una tabla con el mínimo de celdas y elementos posible para utilizarla como sostén del “layout” general, y resolver el resto del diseño con CSS.)
2. Una sola página puede albergar muchos diseños. Quizás la forma en que se pueda entender esto mejor es echándole un vistazo a sitios como CSS Zen Garden (http://www.csszengarden.com/) o Camaleón CSS (http://www.camaleoncss.com/). En ambos casos, se trata del mismo juego; una sola e idéntica página de HTML, al escogerse un link de una lista de diseños alternativos, cambia radicalmente de diseño, de forma y de aspecto… sin alterar en forma alguna el contenido o el código de ésta. Toda la transformación se lleva a cabo en el archivo CSS que está enlazado a esta página – imágenes, colores, tipografías… en suma, todos los aspectos de diseño visual pueden ser cubiertos enteramente mediante CSS. Un aspecto de por qué esto es importante tiene que ver con el uso creciente de teléfonos y otros aparatos móviles para conectarse a Internet. En vez de crear una versión aparte de nuestro sitio web para acomodar a ese tipo de audiencia (con todos los problemas de tiempo y recursos que conlleva), bastaría crear un documento CSS optimizado para esos dispositivos, y obtenemos un sitio web que puede ser visto y utilizado no solo en las computadoras tradicionales, sino en estos nuevos medios de acceso a la Red. En suma, menos trabajo y más eficiencia.
3. Facilidad de mantenimiento y de desarrollo. Un solo documento CSS basta para controlar el diseño y aspecto general de todo un sitio, sea éste de 10 o de 10.000 páginas. Si el día de mañana la junta directiva de la empresa decide que hay que cambiar el encabezado del sitio web de la compañía, bastará con editar las referencias al mismo presentes en el documento CSS, y automáticamente todas las páginas enlazadas a ese documento se actualizarán con los nuevos estilos del encabezado. Los días de las largas noches editando el código fuente de miles de páginas para realizar esta especie de cambios ya son cosa del pasado.
¿Es difícil implementar CSS en un sitio web?
Si has podido aprender a escribir código HTML con un editor de texto, aprender CSS es algo bastante fácil. La sintaxis del lenguaje no es críptico, y aunque se basa en inglés como casi todos los lenguajes de programación, se hace fácil de seguir y entender. Por ejemplo, esta es la definición en CSS de una etiqueta “DIV” o contenedor de HTML llamada “pantalla”:
#pantalla {
position: absolute; width: 500px; height: 500px; background-image:url(imagen.gif); background-repeat:no-repeat; border: 1px red solid;
}
¿Qué quiere decir todo este código? Básicamente, aquí se le dice al contenedor “pantalla” que tenga una posición absoluta (con valores X y Y definidos) en el documento HTML, con una altura y anchura de 500 pixels, y con una imagen de fondo llamada imagen.gif, la cual le indicamos que no la repita como un patrón de fondo, y por último que tenga un borde de 1 píxel de anchura, en estilo “sólido” (línea contínua), y que sea de color rojo.
¿Y cómo aparece nuestro contenedor en un documento HTML? Pues de esta manera:
<div id=”pantalla”> Insertamos contenido aqui </div>
En el pasado, hubiéramos tenido que crear una (o varias) tablas de HTML para lograr el mismo efecto, y no tendríamos un código HTML ni tan legible ni tan liviano si no fuera por el empleo de CSS. Para los diseñadores web que trabajen en conjunto con equipos de programación, el cultivar buenos hábitos de código y diseño es algo que éstos le agradecerán infinitamente.
¿Qué dificultades puedo encontrar al implementar CSS?
Hemos hablado ya bastante de las ventajas de utilizar CSS en diseño web. Pero igual debemos hablar de las dificultades que el diseñador puede encontrar a la hora de crear diseños con esta maravillosa tecnología.
• Incompatibilidad de interpretaciones entre navegadores. Este es quizás uno de los factores más frustrantes y que dificultan más la adopción de CSS. Aunque el ideal de los estándares web es el de que todos los fabricantes de navegadores adopten los mismos parámetros de interpretación, en la realidad hay que enfrentarse a múltiples divergencias e incompatibilidades, particularmente con el navegador Internet Explorer de Microsoft (MSIE). Este navegador, el más utilizado en Internet, tiene un largo historial de incompatibilidades que hacen que interprete algunas reglas comunes de CSS de forma distinta a navegadores apegados a los estándares, como Mozilla Firefox. Esta situación ha conducido a que algunos diseñadores hayan ideado trucos, o “hacks”, para “engañar” al MSIE y mostrarle juegos de valores distintos a los correctos para arreglar la situación. La última versión de MSIE, la 6.0, ya lleva al menos cinco años sin mayores actualizaciones, pero es de esperar que más temprano que tarde la nueva versión de MSIE que viene con el próximo sistema operativo de Microsoft, Windows Vista, corrija de plano muchos de estos problemas. Mientras tanto, recomendamos el uso de Mozilla Firefox (http://www.getfirefox.com)
• Capacidad para escribir código. Aunque existen varios paquetes en el mercado que permiten escribir documentos CSS sin vérselas con el código fuente, si realmente se quiere tener el máximo control de CSS es bastante necesario, casi mandatario, sentirse lo suficientemente cómodo con un editor de texto para corregir errores y modificar valores en forma rápida. Afortunadamente, existen hoy día varios editores de código que simplifican bastante el montar documentos de CSS con funciones como autocompletado de valores y formato, entre otras ventajas. En esta categoría, podemos recomendar el uso de editores como TopStyle (http://www.topstyle4.com/) en Windows, o skEdit (http://www.skti.org/) en Mac OS X.
Para saber más de CSS
El mejor lugar para aprender sobre CSS es, naturalmente, la red misma, y a continuación indicamos acá algunos de los mejores puntos de partida para su aprendizaje que existen en la red.
• Maestros del Web: CSS
http://www.maestrosdelweb.com/
Un compendio de tutoriales, tips y trucos sobre CSS en español, así como un buen punto de partida.
• CSS Zen Garden
http://www.csszengarden.com/
• Camaleón CSS
http://www.camaleoncss.com/
Galerías online de estilos variados que comparten un mismo documento XHTML, para demostrar la versatilidad que ofrece CSS en diseño. Incluso puedes lanzarte a crear y contribuir con nuevos diseños.
• CSS Mania
http://www.cssmania.com/
Directorio visual de sitios diseñados con CSS alrededor del mundo.
• W3Schools: CSS
http://www.w3schools.com/css/
Guía de referencia rápida (en inglés) para todos los términos relacionados con CSS.
