Читать книгу El gran libro de HTML5, CSS3 y Javascript - Diego Gauchat Juan - Страница 21

La Figura 1-1 representa un diseño regular que actualmente es utilizado en la mayoría de los sitios web. A pesar del hecho de que cada diseñador crea sus propios diseños, en general, podremos identificar las siguientes secciones en prácticamente cualquier sitio web:

Figura 1-1

Representación visual del diseño de una típica página web.

En la parte superior, que hemos llamado Cabecera del sitio, normalmente se encuentran el logo, el título o nombre de la página, los subtítulos y una breve descripción del sitio o página web.

La mayoría de los programadores ubican a continuación una Barra de navegación en la que ofrecen un menú o una lista de enlaces para facilitar la navegación, que dirige a los usuarios a diferentes páginas o documentos, por lo general en el mismo sitio web.

El contenido más relevante de la página se coloca generalmente en el centro de ésta. En esta sección se presenta la información más importante además de los enlaces y habitualmente está dividida en filas y columnas. En el ejemplo de la Figura 1-1 se pueden ver solo dos columnas: la Información principal y la Barra lateral, pero sepa que se trata de una sección extremadamente flexible, que los diseñadores suelen adaptar a según sus necesidades mediante la inserción de más filas, la división de las columnas en bloques más pequeños o la generación de diferentes combinaciones y distribuciones.

El contenido que se presenta en esta parte del diseño generalmente tiene la mayor prioridad o relevancia. En el ejemplo que presentamos, la Información principal podría incluir una lista de artículos, descripciones de productos, entradas de blog, o cualquier otro contenido relevante, y la Barra lateral podría mostrar una lista de enlaces relacionados con esos elementos. En un blog, por ejemplo, esta última columna ofrece una lista de enlaces a las entradas del blog, la información sobre el autor, etc.

En la parte inferior de la disposición típica, se encuentra el pie o Barra institucional. Le hemos dado este nombre porque suele mostrar información general sobre el sitio web, el autor, la compañía, además de enlaces a reglas, términos y condiciones, mapas y toda clase de datos adicionales sobre el promotor. La Barra institucional es el complemento de la Cabecera y es considerada actualmente una parte esencial de la estructura de una página web.

La Figura 1-2 es la representación de un blog estándar y en ella donde se pueden identificar claramente las partes del diseño descritas anteriormente:

Figura 1-2

Estructura de un blog estándar.

1. Cabecera

2. Barra de navegación

3. Información principal

4. Barra lateral

5. Pie o Barra institucional

Esta sencilla representación de un blog que acaba de ver muestra claramente que cada sección definida en un sitio web tiene un propósito. Aunque el propósito no siempre será tan explícito, siempre se mantiene la esencia y cualquier usuario será capaz de reconocer estos elementos en cualquier sitio.

HTML5 parte de esta estructura básica de diseño, y proporciona nuevos elementos para diferenciar y declarar cada uno de ellos. Ahora podemos anunciar a los navegadores cuál es el objetivo de cada una de las secciones. La Figura 1-3 muestra la disposición típica de la que venimos hablando, pero esta vez con los elementos de HTML5 correspondientes para cada sección (tanto etiquetas de apertura como de cierre).

Figura 1-3

Representación visual de la organización de un documento con las etiquetas de HTML5.