Maquetación CSS

  • Por
Una introducción sobre cómo maquetar una página utilizando capas, que ilustra el funcionamiento y la potencia de las CSS con ejemplos.
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.

Ventajas e inconvenientes de la maquetación CSS

La maquetación por capas, también llamada maquetación CSS, es una forma de crear webs más evolucionada y que mejora en mucho a la maquetación tradicional (que antes se hacía por tablas), 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:

Actualizado: La verdad es que en la actualidad casi no podemos decir que existan desventajas en la maquetación CSS, salvo la difcultad que puedan encontrar los desarrolladores para para aprender una cosa nueva. Actualmente todos los navegadores la soportan y la interpretan de una manera muy parecida, lo que facilita bastante la labor de desarrollo.
  • Compatibilidad con navegadores antiguos. Se necesita que el visitante disponga de un navegador bastante avanzado actual. 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.
    Actualizado: Es conveniente señalar que en la actualidad ya todos los navegadores soportan maquetación CSS, por lo que este inconveniente podemos descartarlo prácticamente.
  • 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.
    Actualizado: Las diferencias entre navegadores en la actualidad se han minimizado bastante y lo cierto es que con unas pocas técnicas podremos diseñar páginas que se vean exactamente igual en cualquier navegador.
  • Dificultad. Sin duda, si estamos acostumbrados al HTML, pasar a CSS resulta 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, ilustra las posibilidades de la maquetación CSS

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 para aprender a maquetar con CSS

En DesarrolloWeb.com hemos publicado una compilación de artículos sobre el tema en el Manual de Maquetación CSS. En el manual podremos encontrar algunas notas interesantes e introductorias para comenzar a maquetar con CSS, pero además diversos artículos prácticos que nos ayudarán a aprender con casos reales.

Prestar especial atención al taller de maquetación comienza con Maquetar una página con CSS y los artículos siguientes donde se continúa ese ejemplo. Además, para los desarrolladores más avanzados que deseen disponer de unas herramientas que ayuden a la maquetación más rápida, recomendamos estudiar los artículos del framework css 960 Grid System.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

José López

06/1/2005
Hola. No conocía el CSSZenGarden y me he quedado flipado con la cantidad de diseños distintos que tienen y lo distintos que son entre si. Yo también voy a ponerme a estudiar un poquito las CSS y a ver si puedo hacer un diseñito para enviarles. Muchas gracias por la información que nos proporcionan.

carlos

08/1/2005
simplemente impactado no sabia que se podia hacer esto de hecho que trabajar con maquetacion CSS le da a tu sitio web facilididad para poder cambia su diseño .Gracias por enviar articulos como estos que hacen que piense que forma diferente. Gracias de verdad.

Buena página sobre CSS en español

08/1/2005
Aquí va un enlace que os puede interesar: http://www.sidar.org/recur/desdi/mcss/index.php

Nacho Cuevas

12/1/2005
También tenemos una página como css garden pero en español que está teniendo bastante éxito.

http://www.camaleoncss.com

Un saludo
Nacho Cuevas

wakeup

19/1/2006
hay un error en el articulo cuando pone
"La maquetación por tablas es una forma de crear webs más evolucionada " se referirán a maquetacion por capas

un saludo
http://www.hhdirecto.net

Gustavo

24/12/2006
A mi parecer, IE se debe adecuar a los estándares, no entiendo a microsft en su empeño de desviarse de ellos. El sgte. enlace es muy interesante y habla sobre el tema:
http://www.danielclemente.com/navega/popup.html

13/4/2007
Increible todo esto, gracias a esta web he podido crear mi pagina principal en un par de minutos de la manera que yo la veia en el photoshop y hacerla realidad...Por cierto en el parrafo donde dices: "La maquetación por tablas es una forma de crear webs más evolucionada" creo que te estas refiriendo a la maquetación con css y no por tablas" todo lo demás esta bien. Saludos y sigan así...

wariodiaz

30/7/2009
CSS vs TAblas
ps hasta el dia de hoy y ya desde el 2001 yo he maquetado con tablas, la vdd, creo que es una maquetacion ma sencilla y mas global, que con css, con css se complica muchos aspectos, he visto en mas de un tutorial, la maquetacion por tablas no cumple elos estadares... ¿perdon.?.. en efecto hay algunos atributos en tablas que no entran y hacen que te repruebe w3c, pero si cambias y los manejas por CSS, el validador lo pasas como sin nada y sin complicarte mucho, pero bueno dejemonos un poco de gustos, y seamos mas objetivos (que es por ello que estoy estudiando maquetacion) por que ademas muchos de los que dicen que los que atacan la maquetacion CSS es por que no la conocen, la vdd yo la conosco, manejo mucho CSS y la vdd por comondidad y a contra de lo que dicen una pagina en tablas se ve en exploradores modernos y viejos, cosas que hay que hacer mil trucos para que la maquetacion CSS se vea como uno quiere en todos los exploradores, tendremos que esperar a que muera IE6, para poder tener una vida de desarrollo mas tranquila, hoy por hoy, se me hace una buena practca para el futuro, pero se tiene que dejar el pasado de tajo, cosa que no se puede por que estamos en internet hay gente que esta años atras de nosotros, creo que tendran que pasar algunos años mas para que podamos confiar que si maqueto algo en CSS puro sin trucos va a pasar mucho tiempo, minimo hasta que IE8 sea como IE6 en TODO EL WWW no solo por que yo tengo IE8 o utlizo Firefox todo el mundo lo usan.

auke ps seguiremos estudiando esto. que auke dificil y que no me gusta por que los diseños si no son muy bien planeado y bien "trukeados" el diseño es muy facil que se descomponga.. pero ps adammos aprendiendo y viendo que show con este mundo, que de entrada no me convence.. pero como dije hay que ser objetivo y no cerrarse de entrada a esto que esta muy de "moda" en los desarrolladores

fernando

06/8/2009
HTML Y CSS
Me ha quedado claro que la maquetacion con CSS es maravillosa, pero si tengo que hacer 50 paginas html, y todas ellas las lanzo desde un menu que esta en el HTML, y despues de un tiempo quiero modificar ese menu agregando más opciones, como le hago?, tendre que modificar pagina por pagina?, porque las opciones del menu no estan en el archivo .css, en el .css solo va la funcionalidad....

o diganme como lanzo mis paginas html , parecido a lo que se hace con los frames!

saludos

kitty

19/1/2010
Ajustar CSS a javascript
Hola, tengo un problema. Quiero meter en mi página anuncios adsense.
Meto la columna derecha y perfecto.
Pero al meter anuncios en la columna izquierda se me va todo para abajo.

Lo he contenido en un div , ajusto el ancho clear none y se me va todavía... me hace como un clear both.

Me suele pasar cuando inserto algún script en la parte izquierda. Me hace como un clear both... y tengo clear none.

Alguien puede resolverme el problema?? Gracias

cristian_carrera

02/1/2011
css o tablas?
La lucha entre los que dicen q las tablas son mejores y los que dicen q los DIVs son mas versatiles, siempre ha existido.
Tienen razon Fernando, si uno maneja las tablas con CSS, puede validarlas tranquilamente en W3C.

Pero, lo que permite los DIVs con CSS y NO permite las tablas, es la escalabilidad del proyecto: al estructurar datos con DIVs, luego es mucho mas facil cambiar el aspecto de los mismos, son solo modificar una linea de codigo CSS.
Por ejemplo: si tengo un sitio con 30 paginas, las cuales tienen un menu superior y un dia deseo cambiar el aspecto de estos menus, con CSS es tan facil como cambiar una linea de codigo.
Si ese menu, lo realizo con tablas......el tema se complica mas, ya que seguramente se deberá modificar tabla por tabla, con la perdida de tiempo que esto conlleva.

Recordemos que las tablas se inventaros para organizar datos tabulados como listas, items y demas. No se inventaron para estructurar informacion de cualquier tipo.

Si les interesa el tema, les dejo aqui mi blog donde hablo mucho sobre maquetacion web, CSS, psd a html y XHTML.

Saludos!
Cristian