Maquetando con DIV’s

La antigua técnica para maquetar una página, 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 técnica a sido la culpable de muchos problemas para los webmaster.

• El uso de las tablas está condicionado a la mera tabulación de datos.
• Un diseño con tablas no es flexible, es decir, que no podemos cambiar la distribución de los elementos en la página, a menos que la volvamos a hacer.
• Cada Explorador renderiza de manera distinta cada documento HTML y con estructuras con tablas el cambio es más notorio
• Ocupa más espacio y más ancho de banda.
• Google no indexa de igual manera las páginas con estructuras basadas en tablas.

Ahora, que ya conocemos todas estan desventajas de usar maquetación basada en tablas, podemos darnos cuenta que, comparada con la técnica de maquetación con DIV’s, las tablas son mas bien un estorbo en la optimización de nuestros sitios. Para maquetar correctamente con DIV’s 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 guía de XHTML y CSS a mano. Sin ánimo de hacer publicidad, podemos solicitar una copia gratuita a la oficina de la W3C de España
• 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 diseño de la página lo hagamos de esta manera. La razón de esto es que de esta manera, tendremos un plano adecuado de los elementos y distribución de los bloques que vamos a trabajar, tratando de optimizar el número de bloques, por que recordemos que entre más compleja es nuestra página, más riesgo enfrentamos de que el explorador la renderice incorrectamente.

Entendiendo la Lógica de la maquetación con DIV’s

Casi todos hemos usado elementos DIV. Sabemos por experiencia que un elemento DIV nos reserva un bloque y que todo lo que vaya después; 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 página. Un DIV con FLOAT: LEFT ó RIGHT, se alineará dejando el texto al lado. Podemos ir creando DIV’s 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 tamaño del contenedor se adapte a sus elementos.

Además, lo mejor será que trabajemos con anchos fijos y no en porcentaje (aunque, con un conocimiento más 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á más parecido de explorador a explorador.

Una recomendación adicional, sería usar siempre clases CSS para cada sección y bloque, tratando de ir generalizando con los atributos para optimizar la página. Pero si los atributos son pocos ó solamente en esa página se va a trabajar con un elemento con atributos únicos, podría personalizarse colocando los atributos y valores CSS, dentro de una parámetro STYLE, no olvidando utilizar estilos por defecto.

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

Actualización:

Mi buen amigo Iván Mendoza, me envía un comentario muy interesante respecto al artículo. Creo conviente citarlo por que a todos aquellos que estén utilizando las técnicas que describo en el artículo, les serán de mucha utilidad. 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, podría ocurrir un problema de renderizado con Internet Explorer 5.5 o anterior. Según me cuenta Iván, las soluciones estarían en:

• El centrado de DIV’s debería 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. También 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 alineación al centro. Si desean probar sus diseños en varias versiones de Internet Explorer, pueden descargar una muy buena utilería llamada Multiple IE, que les instalará las versiones de Internet Explorer desde la 3.0 a la 6.0.
• Solamente, como medida de precaución, y por recomendación de un compañero de trabajo, reeemplace el atributo display: table; por overflow: hidden;. He probado con ambos y resultan en la misma presentación.

Articulos Relacionados:

• Maquetando con DIV’s (ejemplo I)
• Maquetando con DIV’s (ejemplo II)
• Maquetando con DIV’s (ejemplo III)
• Maquetando con DIV’s (ejemplo IV)