Maquetación Web en el presente

La Web, como todo lo relacionado con el mundo de la tecnología, avanza con el paso del tiempo y si no nos mantenemos al día resulta muy sencillo quedarse, como dicen los ingleses, deprecated. En otra ocasión, María nos habló acerca de cómo diseñar correctamente los contenidos de una página web. Esta vez, nos centraremos en otro de los aspectos que más ha evolucionado en los últimos tiempos, la manera de maquetar las páginas web.

En sus inicios, la evolución de los diseños de las páginas web hacia aspectos más vistosos motivó el uso incorrecto de componentes HTML <table></table> para realizar maquetaciones. Esto ha supuesto (podemos decir que todavía lo está haciendo) que haya hecho falta bastante tiempo para lograr que los nuevos diseños dejen de maquetarse así en favor de las recomendaciones del W3C.

Estas recomendaciones se centran en separar el contenido (xHTML) de la presentación (CSS) y utilizar cada componente para lo que fue diseñado, es decir, tablas fuera. Además, maquetar de esta manera aporta otra ventaja añadida: se simplifica su adaptación a los nuevos dispositivos (tablets, smarthones, etc), obteniendo así un producto, simplemente, más accesible.

Dicho esto, vamos a intentar entrar al detalle de cómo llevar a cabo una maquetación utilizando <div></div> de manera sencilla y sin tener unos conocimientos extraordinarios de CSS.

Una herramienta para facilitarnos el trabajo

Partiendo desde cero, implementar una estructura Web utilizando <div></div> resulta una tarea complicada (más laboriosa que con tablas), pero existen, por llamarlos de alguna manera, frameworks CSS que nos pueden simplificar enormemente la tarea. Ese es el aspecto en el que vamos a centrarnos en este post, es decir, no vamos a ver paso a paso cómo maquetar una web, si no que vamos a revisar alguna herramienta que puede hacer más sencilla la tarea. Desde este punto, con ganas de aprender e investigar nuevas posibilidades las opciones son infinitas.

La idea de los frameworks CSS surgió a partir de un desarrollo llamado 960 Grid System que no era, ni más ni menos, que una emulación de tablas utilizando exclusivamente <div></div> y CSS. A partir de dicho desarrollo han ido evolucionando varias soluciones como pueden ser:

Utilizaremos el último de ellos (Fluid 960 GS), por su simplicidad y opciones disponibles, para ilustrar algún ejemplo de sus posibilidades.

¿Por qué 960?

Una de las primeras preguntas que nos puede surgir al echar un vistazo a estos frameworks es por qué se repite tanto el número 960. Así pues, la solución a esta pregunta la podemos encontrar en las matemáticas: 960 es un número divisible entre 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 y 480, lo que aporta, indudablemente, una gran ventaja a la hora de poder estructurar nuestro diseño correctamente.

Además, hemos de tener en cuenta que se puede considerar como estándar de facto que todas las pantallas alcanzan una resolución suficiente como para mostrar 960 píxeles sin tener que recurrir a presentar scroll horizontal. De hecho, las webs de acceso masivo (facebook, google, yahoo, twitter) suelen considerar esta resolución para tratar de llegar al máximo público posible.

12 columnas

Otro de los puntos en común que presentan los frameworks es que todos suelen definir hasta 12 columnas (en algunos casos 16). Con combinaciones de dichos valores podemos obtener los aspectos más utilizados en las páginas Web. Por ejemplo:

Estructura 3c-6c-3c
Estructura 4c-8c

¿Como marca la diferencia Fluid 960 GS?

El framework nos ofrece una serie de clases predefinidas para ordenar nuestros divs. Estás clases son de la forma:

  • Aplicando la clase grid_n a un div conseguimos que ese div ocupe * columnas
  • Aplicando la clase prefix_n a un div conseguimos un margen izquierdo que ocupe n columnas
  • Aplicando la clase sufix_n a un div conseguimos un margen derecho que ocupe n columnas

Utilizando estas tres clases, siempre y cuando la estructura a montar se pueda representar como agrupaciones de 12 columnas, podemos desarrollar fácilmente el montaje que deseemos. Damos por hecho que siempre debería poderse utilizar una estructura de 12 columnas. De no ser así, estaríamos santándonos el principio KISS y, por lo tanto, deberíamos replantearnos la idea.

Además, aparte de la versión de tamaño fijo (960px) y de 12 columnas, el framework ofrece versiones de 16 columnas y versiones fluidas (se adaptan al tamaño de la ventana del navegador) con lo que se puede cubrir casi toda la logística que puede abarcar un diseño Web.

Como última nota, hay que resaltar que el framework tiene en cuenta todas las peculiaridades de la familia Internet Explorer. Así, podremos aspirar a que nuestras aplicaciones sean cross-browser sin demasiados problemas.

Caso de éxito

En uno de los últimos proyectos desarrollados hemos utilizado este framework para implementar con éxito la maquetación. Así podemos confirmar que el framework cumple su objetivo y es perfectamente utilizable en proyectos reales:

Desde este punto tenemos una semilla mediante la cual seguir investigando e ir evolucionando en la implementación de maquetaciones web en el presente, y, sobretodo, en el futuro (HTML5 está llamando muy fuerte a nuestra puerta).

3 comentarios :

RobertoMS2 dijo...

La entrada es muy interesante. En la misma línea hace poco se liberó el framework css de twitter
http://twitter.github.com/bootstrap/

En otro orden de cosas (principalmente con la llegada de los dispositivos móviles) últimamente está ganando fuerza el tema de los diseños sensibles. Para ampliar conocimientos sobre este tipo de maquetaciones recomiendo el libro "Responsive web desing", de Ethan Marcotte. Se puede conseguir desde el siguiente enlace y es realmente muy bueno.
http://www.abookapart.com/products/responsive-web-design

wow gold dijo...

Not only to write your article is very good, but very useful for me. From this article, I got a number of important and useful information.I hope to get more useful information from your article in the future.

Maquetacion web dijo...

Hoy en día las páginas web son más modernas, ya no se hacen con solo tablas ahora la gran mayoría de páginas web se hacen con menús y con divisiones, en algunos sitios web el menú está al lado izquierdo mientras que el contenido y las imágenes están al lado derecho, en otras páginas el menú se ve arriba en tanto que el contenido más las imágenes se ven abajo, aunque vale aclarar que no todas las páginas web cuentan con imágenes. La cuestión del diseño de páginas web es crear un sitio donde el lector pueda comprender con claridad el tema a tratar en el sitio web.