Maquetando con DIVs

La antigua tcnica para maquetar una pgina, se basaba en tablas. Sin duda, en su momento fu una herramienta til. Sin embargo, a medida que la Web a venido evolucionando, esta misma tcnica a sido la culpable de muchos problemas para los webmaster.

El uso de las tablas est condicionado a la mera tabulacin de datos.

Un diseo con tablas no es flexible, es decir, que no podemos cambiar la distribucin de los elementos en la pgina, a menos que la volvamos a hacer.

Cada Explorador renderiza de manera distinta cada documento HTML y con estructuras con tablas el cambio es ms notorio

Ocupa ms espacio y ms ancho de banda.

Google no indexa de igual manera las pginas con estructuras basadas en tablas.

Ahora, que ya conocemos todas estan desventajas de usar maquetacin basada en tablas, podemos darnos cuenta que, comparada con la tcnica de maquetacin con DIVs, las tablas son mas bien un estorbo en la optimizacin de nuestros sitios. Para maquetar correctamente con DIVs debemos hacer uso extenso de CSS, algo que tal vez no nos guste mucho, pero que reducir el tiempo de desarrollo considerablemente. Antes de comenzar, debemos:

Elegir un buen editor HTML

Tener la gua de XHTML y CSS a mano. Sin nimo de hacer publicidad, podemos solicitar una copia gratuita a la oficina de la W3C de Espaa Tener instalado en nuestro sistema como minimo Internet Explorer 6 y 7 (s, aunque no lo crean, se puede instalar multiples versiones de Internet Explorer en un computador), Mozilla Firefox y Opera, y si son usuarios de Macintosh; Safari.

Lapiz y Papel: lo mejor ser que el diseo de la pgina lo hagamos de esta manera. La razn de esto es que de esta manera, tendremos un plano adecuado de los elementos y distribucin de los bloques que vamos a trabajar, tratando de optimizar el nmero de bloques, por que recordemos que entre ms compleja es nuestra pgina, ms riesgo enfrentamos de que el explorador la renderice incorrectamente.

Entendiendo la Lgica de la maquetacin con DIVsCasi todos hemos usado elementos DIV. Sabemos por experiencia que un elemento DIV nos reserva un bloque y que todo lo que vaya despus; caer a la linea siguiente. Pero, al igual que las imagenes, los elementos DIV, pueden configurarse para que dejen el texto y los elementos al lado. Esto lo lograremos con el atributo FLOAT; que usaremos ampliamente para ir adecuando nuestros elementos en la pgina. Un DIV con FLOAT: LEFT RIGHT, se alinear dejando el texto al lado. Podemos ir creando DIVs sucesivos para que se vayan colocando, uno al lado del otro. Pero, maquetando de esta manera surge un problema y es que el DIV se torna flotante y se sale de su contenedor. Para solucionar esto, el contenedor deber tener como atributo DISPLAY: TABLE (generalmente). Esto har que el tamao del contenedor se adapte a sus elementos.

Adems, lo mejor ser que trabajemos con anchos fijos y no en porcentaje (aunque, con un conocimiento ms amplio, yo lo recomendar), en pixeles, por que los exploradores trabajan con algunas variaciones en las medidas (en especial Internet Explorer, que "hasta pierde pixeles") el renderizado ser ms parecido de explorador a explorador.

Una recomendacin adicional, sera usar siempre clases CSS para cada seccin y bloque, tratando de ir generalizando con los atributos para optimizar la pgina. Pero si los atributos son pocos solamente en esa pgina se va a trabajar con un elemento con atributos nicos, podra personalizarse colocando los atributos y valores CSS, dentro de una parmetro STYLE, no olvidando utilizar estilos por defecto.

Ahora que ya sabemos lo esencial, vamos con el primer ejemplo, resolviendo dudas, conforme avanzamos.

Actualizacin:Como les he comentado, todos los ejemplos los he probado en Internet Explorer 6, Mozilla Firefox 2 y Opera 9 (adicional, comento que ya los he visto en Safari 3 beta para Windows). Al parecer, podra ocurrir un problema de renderizado con Internet Explorer 5.5 o anterior. Las soluciones estaran en:

El centrado de DIVs debera hacerse con el atributo text-align: center en el elemento padre. Lo he probado en Internet Explorer 5.5 y efectivamente, el DiV padre no se centra. Tambin le he probado con el atributo que comenta mi amigo y necesita de crear un nuevo contenedor padre y afecta a todos los contenedores hijos, establecimiento la alineacin al centro. Si desean probar sus diseos en varias versiones de Internet Explorer, pueden descargar una muy buena utilera llamada Multiple IE, que les instalar las versiones de Internet Explorer desde la 3.0 a la 6.0.

Solamente, como medida de precaucin, y por recomendacin de un compaero de trabajo, reeemplace el atributo display: table; por overflow: hidden;. He probado con ambos y resultan en la misma presentacin.Maquetando con DIVs (ejemploI)

En este ejemplo, veremos la forma en que se puede realizar una maquetacin con DIVs de una estructura de pgina bastante sencilla. El ejemplo consiste en una rea de encabezando, un panel izquierdo, el rea para contenido y un footer. Los elementos que describiremos a detalle, en este artculo sern:

Centrado horizontal de un elemento DIV Estructuras ms dinmicas con DIVs Cuidando los anchos y altosCentrado horizontal de un elemento DIVAunque parezca algo extrao, los elementos DIV pueden centrarse utilizando los atributos margin-left: auto; margin-right: auto;. En cierto sentido, es compresible pensar es esta forma, como una forma lgica de centrar los elementos horizontalmente, dado que el valor auto para ambos lo empuja hacia el centro.

Estructuras ms dinmicas con DIVsNada extraordinario, ocurre cuando dibujamos los elementos en su forma por defecto. Pero cuando, colocamos al elemento que representa al panel izquierdo y le asignamos float: left, el siguiente elemento, se corre a su lado. Podemos notar en el cdigo que el panel tiene el atributo hacia la izquierda y el contenido hacia la derecha. Esto causa que uno este pegado hacia ese margen para el contenedor, por lo que se restamos el ancho de cualquiera de los dos, podriamos apreciar que queda un espacio vaci en el centro.

Cuidando los anchos y altosAhora, vemos la parte ms delicada de la maquetacin. En las estructuras clsicas con tablas, podiamos utilizar tamades en porcentaje. Aunque aqui, tambin podemos utilizar porcentajes, el dibujado de la pgina puede no verse como se esperaba. Debemos considerar que cuando un elemento sobrepasara el ancho de su contenedor y es flotante, caer a la linea siguiente. Aunque puede ocurrir que si el elemento tiene una orientacin hacia la izquierda y el que sobrepasa el tamao la tiene hacia la derecha, este ltimo dejar una porcin de su contenido por debajo del anterior. Debemos cuidar, sobre todo los anchos totales de los elementos por linea. Recordemos que cuando aplicamos valores a los margenes, el explorador suma el ancho fijo ms el margen; igual que con el padding. Para ello, si deberemos hechar mano de una calcularadora, por que cualquier valor adicional, sea de margenes, padding, bordes, etc. aumentara el tamao fijo del objeto.

Hay un ultimo valor CSS que esta en el ltimo elemento DIV. Se trata de CLEAR, que se encarga de limpiar el comportamiento del DIV anterior para que no afecte a este.

Maquetando con DIVs (ejemploIII)

Este es el tercer ejemplo que publico, utilizando maquetacin con DIVs. Al igual que el artculo anterior, este ejemplo utiliza el mtodo de dibujado del panel derecho, antes que el izquierdo. An sigo analizando el por que de este comportamiento, pero sin duda, sea cual sea la respuesta, permite un dibujado ms limpio, optimizado y profesional.

Maquetando con DIVs (ejemploIV)

Esta vez, fui vencido por mi propia creatividad, al tratar de realizar esta estructura con ocho divs. En este caso, me vi obligado a colocar otro DIV ms para los bloques marcados con un color ms fuerte. De todos modos, estoy contento de que, junto con ustedes, pude realizar esta estructura, an ms dinmica. Les prometo que para la siguiente vez, vern un diseo ms dificil de maquetar y con solamente los DIVs necesarios.

Aqu les dejo el cdigo de este ejemplo para que lo estudien. El punto de esta maquetacin es saber que los bloques que se colocan en flotante, si no tienen un alto igual, causaran que los siguientes caigan a la altura del ms alto. Esto puede ser una ventaja o desventaja.

Solo como nota adicional, respecto a lo conveniente de maquetar con DIVs, es que todos los ejemplos que les mostr en este tutorial fueron probados en: Mozilla Firefox 2.0, Opera Browser 9.0 e Internet Explorer 6 y todos resultaron en la misma estructura.