comparte el articulo 

Estructura de páginas web: Cómo hacer para que lo importante aparezca primero

Actualizado el 22/02/2010 < > 4 Cometarios

Resumen: La forma en que se decida maquetar la página, no impide que podamos colocar los contenidos en el orden que creamos más conveniente, empleando adecuadamente las propiedades CSS.

Cuando nos encontramos optimizando una página web para los buscadores, una de las cosas que debemos tener en cuenta es que aquellos contenidos de mayor importancia deben ser los primeros en aparecer, no solo visualmente, sino además en el código HTML. Esto está relacionado con el funcionamiento de los robots de búsqueda.

Los buscadores necesitan clasificar las páginas web de acuerdo a su contenido, lo que implica necesariamente un análisis de los mismos. Pero estos robots que hurgan en las páginas web no analizan la totalidad del código de cada página, sino que tienen un límite y solo analizan los primeros contenidos.

Es por ello que resulta muy importante que las páginas web cuenten dentro de sus primeras líneas aquellos contenidos que resulten más relevantes. Sin embargo, esto que parece sencillo, muchas veces choca con la intensión de los diseñadores de maquetar la página siguiendo cierto orden.

Por ejemplo, si un diseñador desea que la página tenga una cabecera, dos columnas a la izquierda y el cuerpo principal con el contenido a la derecha, podría parecer que es imposible hacer que el contenido principal aparezca entre las primeras líneas del código HTML. Sin embargo, empleando algunas características de CSS, esto es posible.

Cómo maquetar una página para que el contenido importante aparezca primero

A continuación mostraremos como es posible hacer que los contenidos más relevantes de la página aparezcan en los primeros lugares del código HTML, empleando para ello el float de CSS. Sin entrar en demasiados detalles, ya que no es la finalidad de este artículo explicar como funciona la propiedad float, podemos resumir que esta propiedad hace que el elemento salga del flujo del HTML para posicionarse a la izquierda o derecha de otros elementos adyacentes, alterando el orden en que se encuentran escritos en el código HTML.

Para poder explicarlo de mejor forma, escribiremos un código de ejemplo y su resultado visual, que podrán probarlo utilizando el mismo código escrito en bloc de notas, guardando el archivo como .html o .htm y abrirlo en su navegador para visualizar los resultados.

Código básico

Lo primero que haremos será ordenar los contenidos dentro del HTML en el orden que deseamos. Luego, empleando CSS le daremos el orden visual. El código de ejemplo es el siguiente:

<html>
<head>
<title>Página de ejemplo</title>
<!-- Vínculo al archivo CSS -->
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<h3>Cabecera</h3>
</div>
<div id="contenido">
<div id="caja">
<div id="primero">
Contenido principal
</div>
<div id="segundo">
Contenido de segundo orden
</div>
</div>
<div id="tercero">
Contenido de tercer orden
</div>
</div>
<div id="pie">
Pie de página
</div>
</div>
</body>
</html>

Como se puede apreciar, además del código HTML, deberemos escribir, en otro archivo aparte, una hoja de estilo independiente, a la que llamaremos estilo.css y que contendrá el código CSS. En este código HTML podemos ver que el contenido principal de la página, se encuentra inmediatamente después de la cabecera, es decir, en los primeros lugares del código.

En el archivo CSS, daremos los primeros atributos a los diferentes div’s, de forma que la página adquiera una forma visible y donde los contenidos aparezcan separados. El siguiente código es el que aparecerá en el archivo estilo.css:

/* Archivo base css de ejemplo */
/* Lo siguiente se emplea para resetear los valores por defecto de los navegadores */
html, body { margin:0; padding:0; border:none; }
/* Definición de los estilos básicos */
/* Contenedor general. Se determina el ancho y los márgenes automáticos */
#contenedor {
width:80%;
margin: auto;
}
/* Estilo de los otros contenedores */
#cabecera, #pie {
background: #cbcbcb;
}
#pie {
clear: both;
}
#primero {
background: #fb9f9f;
}
#segundo {
background: #fdc08b;
}
#tercero {
background: #fdeb8b;
}
#cabecera, #pie, #primero, #segundo, #tercero {
padding: 1.25em 2%;
margin: 0.4em 0;
}
#cabecera{ margin-bottom: 0; }
#contenido { padding: 0; } 

Con esto, ya es posible visualizar la página, la que encontraremos que se encuentra diagramada en una única columna y los diferentes contenidos aparecen alineados en forma vertical. Esto se debe a que el proceso de maquetación aún no ha comenzado, y la página se verá de la siguiente manera:

Diseño sin maquetación

Empleando el ejemplo anterior, si deseáramos maquetar la página con una columna a la izquierda y el contenido principal a la derecha, deberíamos dejar el tercer contenedor debajo de los anteriores y ocupando todo el ancho de, para lo que podríamos escribir, debajo del CSS básico que ya hemos escrito, las siguientes líneas de código (debe observarse que en cada uno de los ejemplos que daremos, el código HTML no será modificado).

/* Diseño a dos columnas con el contenido principal a la derecha */
#primero {
float: right;
width: 65%;
margin-left: 1%;
display: block;
height: 190px;
}
#segundo {
float: left;
width: 26%;
display: block;
height: 190px;
}
#tercero {
clear: both;
width: 96%;
}

La siguiente imagen es el resultado del código descrito. En la caja de color rosa aparece el contenido principal, aunque visualmente no ocupe esa posición, ya que la columna de la izquierda aparece antes.

Diseño a dos columnas con contenido a la derecha

A continuación veremos un ejemplo donde la columna aparece a la derecha y el contenido principal de la página estará a la izquierda:

/* Diseño a dos columnas con el contenido principal a la izquierda */
#primero {
float: left;
width: 65%;
margin-right: 1%;
display: block;
height: 190px;
}
#segundo {
float: right;
width: 26%;
display: block;
height: 190px;
}
#tercero {
clear: both;
width: 96%;
} 

Diseño a dos columnas con contenido a la izquierda

Teniendo en cuenta que los contenidos se encuentran jerarquizados en tres escalas diferentes, es posible organizarlos en tres columnas, como en los dos casos que exponemos a continuación, donde las dos columnas se colocan sobre uno de los lados (en un ejemplo a la derecha y en el otro a la izquierda) y el contenido principal en el opuesto:

/*  Diseño a tres columnas con el contenido principal a la izquierda  */
#primero {
float: left;
width: 50%;
margin-right: 1%;
display: block;
height: 260px;
}
#segundo {
float: left;
width: 18%;
margin-right: 1%;
display: block;
height: 260px;
}
#tercero {
float: left;
width: 18%;
display: block;
height: 260px;
} 

Diseño a tres columnas con contenido a la izquierda

/*  Diseño a tres columnas con el contenido principal a la derecha */
#primero {
float: right;
width: 50%;
margin-left: 1%;
display: block;
height: 260px;
}
#segundo {
float: right;
width: 18%;
margin-left: 1%;
display: block;
height: 260px;
}
#tercero {
float: right;
width: 18%;
display: block;
height: 260px;
}

Diseño a tres columnas con contenido a la derecha

La forma en que se decida maquetar la página, no impide en modo alguno que podamos colocar los contenidos en el orden que creamos más conveniente. Empleando adecuadamente las propiedades CSS, es posible establecer el diseño deseado sin necesidad de realizar grandes modificaciones en el código HTML.

Publicado el 22/02/2010, última actualización 22/02/2010.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

4 Cometarios

  1. Diseño visual de una página web

    […] lo que colabora en la ubicación por parte de los mismos de las áreas funcionales y los contenidos importantes. Los diseños excesivamente llenos de elementos, con fondos cargados o con bajos […]

    Miércoles, 17 de marzo 2010

  2. nancy

    Me encantó. Muy clara la explicación.

    Domingo, 10 de abril 2011

  3. Rafael

    Hola, saludos cordiales desde Caracas, Venezuela.
    Gracias por poner a nuestro alcance sus extraordinarios articulos publicados en su pagina. No habia entendido la maquetacion y otros aspectos hasta que logre conocer su publicacion, me agrada la forma tan didactica de presentar los diferentes temas..Ahora ya puedo empezar a construir mis primeras paginas web de muestra. Abrazos.

    Lunes, 2 de junio 2014

  4. Zuly

    Exactamente lo que quería, una estructura básica con la cual se pudiera tratar las cajas, jugando con los porcentajes del ancho. Gracias

    Sábado, 9 de abril 2016

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras