MAQUETACION DE UN SITIO WEB CON HTML5 Y CSS3

Para esta oportunidad, continuaremos mostrandoles las etiquetas del lenguaje de estructura web llamado HTML5, mostrando las etiquetas que se encargan de organizar el contenido de una pagina web, como introducción mostraremos un poco de teoría y luego pasaremos a describir cada etiqueta.

La estructura del cuerpo (El código entre las etiquetas body) generara la parte visible del documento. Este el código que producirá nuestra página web.

HTML siempre ofreció diferentes formas de construir y organizar la información dentro del cuerpo de un documento. Uno de los primeros elementos provistos para este propósito fue table. Las tablas permitían a los diseñadores acomodar datos, texto, imágenes y herramientas dentro de filas y columnas de celdas, incluso sin que hayan sido concebidas para este propósito.

En los primeros días de la web, las tablas fueron una revolución, un gran paso hacia adelante con respecto a la visualización de los documentos y la experiencia ofrecida a los usuarios. Más adelante, gradualmente, otros elementos reemplazaron su función, permitiendo lograr lo mismo con menos código, facilitando de este modo la creación, permitiendo portabilidad y ayudando al mantenimiento de los sitios web.

El elemento div comenzó a dominar la escena. Con el surgimiento de webs más interactivas y la integración de HTML, CSS y JavaScript, el uso de div se volvió una práctica común. Pero este elemento, así como table, no provee demasiada información acerca de las parte del cuerpo que está representando. 

Desde imágenes a menús, textos, enlaces, códigos, formularios, cualquier cosa puede ir entre las etiquetas de apertura y cierre de un elemento div. En otras palabras, la palabra clave div solo especifica una división en el cuerpo, como la celda de una tabla, pero no ofrece indicio alguno sobre qué clase de división es, cuál es su propósito o qué contiene.

Para los usuarios estas claves o indicios no son importantes, pero para los navegadores la correcta interpretación de qué hay dentro del documento que se está procesando puede ser crucial en muchos casos.

Luego de la revolución de los dispositivos móviles y el surgimiento de diferentes formas en que la gente accede a la web, la identificación de cada parte del documento es una tarea que se ha vuelto más relevante que nunca.

Considerando todo lo expuesto, HTML5 incorpora nuevos elementos que ayudan a identificar cada sección del documento y organizar el cuerpo del mismo. 

En HTML5 las secciones más importantes son diferenciadas y la estructura principal ya no depende más de los elementos div o table.

Cómo usamos estos nuevos elementos depende de nosotros, pero las palabras clave otorgadas a cada uno de ellos nos dan ayudan a entender sus funciones. Normalmente una página o aplicación web está dividida entre varias áreas visuales

Para mejorar la experiencia del usuario y facilitar la interactividad. Las palabras claves que representan cada nuevo elemento de HTML5 están íntimamente relacionadas con estas áreas, como veremos pronto.

ORGANIZACIÓN.

Definamos la organización según la siguiente imagen.

maquetacion web html5 y css3

En la parte superior, descrito como Cabecera, se encuentra el espacio donde usualmente se ubica el logo, título, subtítulos y una En la parte superior, descrito como Cabecera, se encuentra el espacio donde usualmente se ubica el logo, título, subtítulos y una corta descripción del sitio web o la página.

BARRA DE NAVEGACIÓN

En la cual casi todos los desarrolladores ofrecen un menú o lista de enlaces con el propósito de facilitar la navegación a través del sitio.

CUERPO O INFORMACIÓN PRINCIPAL

El contenido más relevante de una página web se encuentra, en casi todo diseño, ubicado en su centro. Esta sección presenta información y enlaces valiosos. La mayoría de las veces es dividida en varias filas y columnas.

En la imagen anterior se utilizaron solo dos columnas: Información Principal y Barra Lateral, pero esta sección es extremadamente flexible y normalmente diseñadores la adaptan acorde a sus necesidades insertando más columnas, dividiendo cada columna entre bloques más pequeños o generando diferentes distribuciones y combinaciones.

En la sección de información principal, se mostrarías todas las entradas de un blog, mientras que en la barra lateral  una lista de todas las entradas que el blog contiene, información del desarrollador, redes sociales, formulario de login etc.

A continuación les muestro una imagen de lo que es un diseño de blog meramente tradicional, es el punto de partida para poder realizar los diseños que nosotros queramos y sobre todo nos aran entender un poco mejor la ubicación de cada una de las etiquetas que hemos visto hasta ahora.

Para un mayor entendimiento de la imagen les mostrare como sería la estructura de ese blog utilizando las etiquetas de HTML5.

En el ejemplo se muestran las etiquetas posteriormente detalladas en el articulo INTRODUCCIÓN A HTML5, si  aun no lo has checado, te dejo el enlace para que vallas y lo hagas, ya que nos sirve como base para los ejemplos propuestos en este articulo.

Les mostrare el esquema del blog, propuesto anteriormente utilizando las etiquetas que estudiamos  en el articulo anterior.

De esta manera se nos hacer mucho más fácil reconocer cada una de las etiquetas y que tipo de información contienen cada una de estas. Ahora veremos una breve explicación de cada una de estas para aclarar cualquier duda.

header

El elemento header no debe ser confundido con head usado antes para construir la cabecera del documento. Del mismo modo que head, la intención de header es proveer información introductoria (títulos, subtítulos, logos) el elemento head tiene el propósito de proveer información acerca de todo el documento, header es usado solo para el cuerpo o secciones específicas dentro del cuerpo:

@madesweb

nav

Siguiendo con nuestro ejemplo, la siguiente sección es la Barra de Navegación. Esta barra es generada en HTML5 con el elemento nav:

@madesweb

section

En esta etiqueta como se pudo apreciar en la imagen anterior se encargara de mostrar el contenido general del sitio web:

                

@madesweb

aside

La Barra Lateral contendrá una lista de enlaces

@madesweb

footer

Para finalizar la construcción de la plantilla o estructura elemental de nuestro documento HTML5, solo necesitamos un elemento más.

      

@madesweb

Ufff!! Es así  como por fin termino, de mostrarles las etiquetas que ordenan, el contenido de una pagina web, decirles que los artículos son bastante extensos, pero lo que se pretende es dejar un material completo que logre solventar todas sus dudas, quizá pueda parecer aburrido pero créanme que hago lo posible de hacer los artículos lo mas amigable y cortos  posibles, y aun así no se logra abarcar toda la temática o por lo menos no el objetivo principal el cual es brindarles una información lo mas completa posible.

En un nuevo articulo se explicara la configuración de lo que es ya un articulo en si, que aunque no lo parezca son varias etiquetas aun, en mi opinión una de las razones por la cual muchas personas optan por utilizar un framework, o gestor de contenido es porque no conocen estas etiquetas y piensan que html5 no cuenta con todo lo necesario para desarrollar un articulo completo.

Habiendo expuesto eso pues el siguiente articulo sera probar que html5 si tiene las etiquetas necesarias para desarrollar un buen arcitulo.

Descarga el Archivo con la plantilla completa.

LINK!!!

Hasta entonces amigos.!!!!