Maquetación CSS

En este artículo vamos a conocer la maquetación de paginas utilizando Hojas de estilos en cascada (CSS). Veremos cómo realizar este tipo de maquetación, junto con algunas ventajas e inconvenientes. Para muchos será todavía un campo por explorar. Aunque no vamos a entrar en grandes detalles, vamos a intentar dar a conocer la maquetación con CSS para que cubrir la posible laguna por parte del lector. En capítulos sucesivos ampliaremos la información y ofreceremos tutoriales más prácticos.

Como se ha podido aprender en el Manual de CSS, las hojas de estilo en cascada ayudan a separar el contenido de la forma, es decir, los elementos que componen una página de la forma con la que se muestran. Además, CSS ayuda en gran medida a la definición de estilos en la página, ya que permite ajustar de una manera mucho más precisa cualquier aspecto de cualquier elemento de la página.

La maquetación con CSS lleva la utilización de las hojas de estilo a su grado máximo, de manera que cualquier definición del aspecto de la página se realiza en la declaración CSS que enlazamos con el documento HTML. Para definir la situación de los elementos en la página se utilizan las capas, a las que se aplica un posicionamiento a través también de las hojas de estilo.

Para crear las capas se utilizan etiquetas <DIV>, en las que se introducen los elementos que queramos que aparezcan en la página. Los elementos dentro de los <DIV> también se pueden anidar, para heredar las propiedades y posicionamiento de las capas padre.

En la maquetación por capas se definen únicamente etiquetas <DIV> y las tablas sólo se utilizan para mostrar información tabulada, es decir, mostrada en filas y columnas. Cabe señalar que en la maquetación tradicional se utilizan las tablas para ajustar la posición de los elementos en la página. Seguro que muchos de los lectores están muy familiarizados con el uso de tablas para maquetar una web, pues se trata de una técnica bastante sencilla, aunque bastante poco práctica y que complica un tanto el código de las páginas web resultantes.

La maquetación por tablas es una forma de crear webs más evolucionada y que mejora en mucho a la maquetación tradicional, aunque también tiene sus inconvenientes.

Veamos primero algunas de las ventajas de la maquetación CSS:

• La separación del contenido de la página y del estilo o aspecto con el que se deben mostrar. Tener en cuenta que, cuanto más separemos estos dos elementos, más sencillo será el mantenimiento de las páginas y el procesamiento de la información. Con ello también podremos obtener páginas más limpias y claras.
• Ahorro en la transferencia. Si todos los estilos y posiciones de los elementos se introducen en un documento externo, liberaremos el código de la página y ocupará mucho menos. Como la declaración de estilos se almacena en la caché del navegador, sólo se transfiere en la primera página que se visita del sitio, con lo que la segunda y posteriores páginas que se soliciten se cargarán mucho más rápido.
• Facilidad para alterar el aspecto de la página sin tocar el código HTML. Como toda la información de los estilos y el posicionamiento de las capas se encuentra en un mismo archivo, si deseamos cambiar cualquier elemento de la página -ya sea su posición o su aspecto-, sólo tenemos que actualizar la hoja de estilos y los cambios se verán automáticamente en todo el web.

Como decimos, también hay algunas desventajas:

• Compatibilidad con navegadores antiguos. Se necesita que el visitante disponga de un navegador bastante avanzado. La mayoría de los visitantes disponen de navegadores que soportan características avanzadas de las CSS, pero todavía hay mucha gente que no ha actualizado sus equipos o que navega en sistemas de sólo texto. Los navegadores que no soportan hojas de estilos, por lo menos leerán el código de la página y lo mostrarán sin ningún posicionamiento. Ello puede resultar fastidioso, pero por lo menos visualizarán todos los datos de la página, aunque descolocados y sin estilo.
• Diferencias entre navegadores. Dependiendo del navegador también cambian las etiquetas de estilos soportadas, por lo que las páginas puede que no se vean exactamente igual en unos clientes que en otros. También, al igual que ocurre con HTML, hay atributos no estándar o que tienen valores por defecto diferentes. Cuando se empieza con la maquetación en CSS, puede resultar un tema bastante complicado y crearnos bastantes dolores de cabeza, no obstante, se trata de, poco a poco, ir aprendiendo todos los atributos y los navegadores donde se visualizan o no.
• Dificultad. Sin duda, si estamos acostumbrados al HTML, pasar a CSS resulta bastante más complicado y requiere un estudio más profundo. Sin embargo, este paso nos brindará un mayor control de los elementos de la página y ampliará nuestras fronteras a la hora de maquetar.

Ejemplo CssZenGarden

Existe un sitio muy interesante e ilustrador que nos puede ayudar a conocer rápidamente la potencia de las CSS y hacernos una idea de lo que puede significar su uso. Es un sitio donde se muestra un contenido y un diseño bastante logrado. Además, dispone de varios enlaces para poder ver el mismo sitio, con el mismo contenido, pero con distinto aspecto. De ese modo podemos ver cómo se puede llegar a alterar el diseño de una página con tan solo cambiar la hoja de estilos.

La URL del sitio es http://www.csszengarden.com. Es muy interesante que seleccionéis otros diseños para ver el cambio radical que puede tener las páginas web con distintas hojas de estilos.

Nosotros hemos explorado un poco las capacidades de las CSS y hemos realizado un ejemplo de diseño de CssZenGarden por nuestra cuenta. Podemos verlo en nuestro propio servidor en este enlace.

Por donde continuar

En DesarrolloWeb.com hemos publicado una línea de artículos para explicar el proceso de creación de una web, maquetada por completo en CSS. Además, podemos referiros a algunas páginas en inglés que ofrecen diversas documentaciones y ejemplos:

http://www.stylegala.com/
http://www.cssbeauty.com/
http://www.cssvault.com/