Maquetando con DIV’s

En el blog LEANDRONO´S tenemos una referencia a otro blog DOTPRESS, que en una serie de cinco artículos descubro el ultimo: Maquetando con DIV’s , que me ha llamado mucho la atención, el conjunto de los artículos tienen ejemplo prácticos que explican la maquetación con DIV´s.

La antigua técnica para maquetar una página se basaba en tablas. Sin duda, en su momento fué una opción ú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 solamente 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 las 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 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 imágenes, 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.

Los anteriores artículos  de la serie que se mencionó al principio son:

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