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:

Anuncios

9 Responses to Maquetando con DIV’s

  1. ChS dice:

    BUenas interesante articulo, sobre todo para empezar a adentrarme en eso de las divs :) te hago una consulta, vivo en argentina, tenes idea donde puedo pedir los libros esos? Desde ya gracias

  2. Toni dice:

    Si es la guía de la W3C, lo puedes hacer solicitándola directamente o haciendo una búsqueda en la página de la W3c de España, creo que está en linea.

  3. ChS dice:

    Si estan en linea las dos guias, pero yo me referia a, sino me equivoco, solicitar las copias gratuitas y que si me las podian mandar a mi casa, si es que las mandan, ya que vivo en Argentina. Saludos

  4. Toni dice:

    Yo no encuentro esa guía, aunque se menciona en el post. pero pienso que si existe te as podrán mandar. Si localizar el enlace mándamelo y miro a ver, pues no veo el enlace, debe ser cosa del lunes que uno no está muy despierto. Salud.

  5. Martín dice:

    Hola,

    Desde la Oficina del W3C os mostramos nuestro agradecimiento por el interés mostrado en la obtención de las guías. Debido a la gran demanda, se nos han agotado en formato impreso, pero esperamos crear más próximamente.

    Estas guías tienen una hoja de estilos asociada para que pueda ser impresa desde los navegadores que soporten correctamente CSS2. Sólo se tiene que ajustar los tamaños de los márgenes y del área de impresión para que encajen correctamente las secciones en las páginas.

    Podéis hacer cualquier consulta directamente, enviándonos un correo a info@w3c.es.

    Un saludo,

    Martín Álvarez
    Oficina W3C España

  6. Toni dice:

    Muchas gracias Martín por la información.

  7. Glenan dice:

    Mira son bacanes tus ejemplos y funcionales, pero las alturas de los divs height tu lo especificas en px, dandoles tamaños fijos, si tenemos una web dinamica donde las alturas sean variables pero qe todos los divs mantengan las mismas alturas, osea se “adapten” a la altura del div mayor, ¿como harias eso?, estoy en eso y no me sale…………..
    Saludos por la pagina

  8. Hernan dice:

    En mi Blog explico como definir el layout de una página a través de divs y estilos css. Para algunos será obvio, pero mucha gente sigue utilizando tablas para este propósito.

Responder

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

A %d blogueros les gusta esto: