Maquetando con DIV’s

16 04 2007

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:

About these ads

Acciones

Information

13 responses

18 07 2007
calhemp

muchas gracias por este articulo, me ha sido de mucha ayuda, de verdad gracias

17 08 2007
Liderguitar

Hola a todos muy buen artículo. En donde puedo encontrar mas informacion sobre la propiedad style de div ? Gracias

23 11 2007
glenan

Son interesantes tus articulos, pero te comento algo que no me esta dejando estresado

por ejemplo en un gestor de contenidos como el joomla, donde las columnas izquierda,centro y derecha, nos muestran a veces contenidos disparejos depende de los modulos que colocas a acada lado (osea por ejemplo en la izquierda puede alcanzarme una altura de 100px, el centro de 600px y la izquierda 400px), y todo esto dentro de un contenedor, ¿como hago para que todas las columnas se autodimensionen?, osea que en este caso la izquierda y derecha se redimensionen a 600px, que es la altura mas extensa, y tambien cuando cualquiera de ellas alcanza la altura mas extensa que los demas se autoredimensiones para alcanzar la altura de la mas grande, ya que cuando coloco diferentes backgrounds a cada uno cuando no son del mismo tamaño se ve horrible……………..no se si fui claro, espero poder obtener tu ayuda, gracias

8 02 2008
RC Fuente Palmera

Estoy empezando con el maquetado con divs y css, aunque todavia me gustan mas las tablas.
Hoy empiezo a probarlo.

20 03 2008
Tabular datos con XHTML y CSS < voragine bramante

[...] Maquetando con DIV’s en DotPress el 16 de abril de 2007. Cómo y por qué maquetar con divs. [...]

17 04 2008
css, links i recursos « professors dw

[...] Maquetando con DIV’s (DotPress) [...]

12 09 2008
Víctor Barbero

Utilizo porcentajes en vez de tamaños absolutos en píxeles y, en ocasiones, con “display: table” en el contenedor, los elementos de la “tabla” no quedaban bien ordenados en ocasiones (sí, parece increíble: unas veces funcionaba y otras no) usando Internet Explorer.

He cambiado a “overflow: hidden;” y ahora funciona perfectamente.

Muchas gracias por la información.

8 10 2008
Bievenido al nuevo DotPress · DotPress

[...] también han tenido un gran impacto en los desarrolladores, como la serie de artículos sobre Maquetación de páginas utilizando DIV’s que ha recibido más de 30,000 [...]

7 01 2009
Bienvenido al nuevo DotPress | DotPress

[...] otros artículos también han tenido un gran impacto en los desarrolladores, como la serie de Maquetación de páginas utilizando DIV’s que ha recibido más de 30,000 visitas en [...]

16 06 2009
zaetoner

creo que los div’s facilitan la vida (de un webmaster) ademas son mas rapidos a la hora de deplejarse en pantalla

18 09 2009
Pablo

Hola!, interesante tu articulo. lo estoy siguiendo, pero al momento de darle al 2do art. me da error 404
para los proximos que te visiten, te agradeceran que este disponible-
Saludos!

25 11 2009
orlando

Hola, muchas gracias por explicar de forma tan sencilla, ya me sentía avergonzado de no saber como funcionan los div, y es que llevo mas de 3 años haciendo páginas web. Ya era hora lo se, mi proxima página ya la estoy haciendo con div siguiendo tus ejemplos.

Por cierto, el vínculo del segundo ejemplo está roto. Saludos

10 05 2010
Páginas de interes | diseño de paginas web horeca

[...] Maquetacion con divs This entry was posted in Uncategorized. Bookmark the permalink. ← Hola alumnos del curso de DPW y Multimedia [...]

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

A %d blogueros les gusta esto: