Programación y algo más.: Estructura y diseño. HTML5 Parte 1.

Y que digan y sigan diciendo lo que quieran, bueno este día recordé a un amigo conocido en el bajo mundo del hip-hop "rowan rabia -> Mono" guitarrista del Cartel de Santa ya que me dio un consejo alguna vez para volver hablarle a una persona muy especial; me comentó.... simplemente deja salir todo lo que tienes, búscala y habla con ella, pero creo olvidé que a ella no le gustaba que la fuera a ver a su casa.....y fui. Pero en fin aquí en mi espacio web yo hago y suelto mis más profundos sentimientos en arte, el verdadero arte profundo y agónico del programar ..... ;).

DISEÑO.

En la base de un diseño web clásico siempre nos encontramos con una barra más que aquí llamamos Institucional. La nombramos de esta manera porque esta es el área en donde normalmente se muestra información acerca del sitio web, el autor o la empresa, además de algunos enlaces con respecto a reglas, términos y condiciones y toda información adicional que el desarrollador considere importante compartir. La barra Institucional es un complemento de la Cabecera y es parte de lo que se considera estos días la estructura esencial de una página web, como podemos apreciar en el siguiente ejemplo:

1. Cabecera

2. Barra de Navegación

3. Sección de Información Principal

4. Barra Lateral

5. El pie o la barra Institucional

Esta simple representación de un blog nos puede ayudar a entender que cada sección definida en un sitio web tiene un propósito. A veces este propósito no es claro pero en esencia se encuentra siempre allí, ayudándonos a reconocer cualquiera de las secciones descritas anteriormente en todo diseño. HTML5 considera esta estructura básica y provee nuevos elementos para diferenciar y declarar cada una de sus partes. A partir de ahora podemos decir al navegador para qué es cada sección:

<header>

Uno de los nuevos elementos incorporados en HTML5 es <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), pero difiere con respecto a <head> en su alcance. Mientras que 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:

<!DOCTYPE html>

<head>

<title>Este texto es el título del documento</title>

</head>

<body>

<h1>Este es el título principal del sitio web</h1>

</header>

</body>

</html>

En el Listado 1-10, definimos el título de la página web utilizando el elemento <header>. Recuerde que esta cabecera no es la misma que la utilizada previamente para definir el título del documento. La inserción del elemento <header> representa el comienzo del cuerpo y por lo tanto de la parte visible del documento. De ahora en más será posible ver los resultados de nuestro código en la ventana del navegador.

Conceptos básicos: Entre las etiquetas <header> en el Listado hay un elemento que probablemente no conoce. El elemento <h1> es un viejo elemento HTML usado para definir títulos. El número indica la importancia del título. El elemento <h1> es el más importante y <h6> el de menor importancia, por lo tanto <h1> será utilizado para mostrar el título principal y los demás para subtítulos o subtítulos internos. Más adelante veremos cómo estos elementos trabajan en HTML5.

<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>:

<!DOCTYPE html>

<head>

<title>Este texto es el título del documento</title>

</head>

<body>

<h1>Este es el título principal del sitio web</h1>

</header>

<nav>

<ul>

<li>principal</li>

<li>fotos</li>

<li>videos</li>

<li>contacto</li>

</ul>

</nav>

</body>

</html>

Como se puede apreciar en el Listado, el elemento <nav> se encuentra dentro de las etiquetas <body> pero es ubicado después de la etiqueta de cierre de la cabecera (</header>), no dentro de las etiquetas <header>. Esto es porque <nav> no es parte de la cabecera sino una nueva sección.

Anteriormente dijimos que la estructura y el orden que elegimos para colocar los elementos HTML5 dependen de nosotros. Esto significa que HTML5 es versátil y solo nos otorga los parámetros y elementos básicos con los que trabajar, pero cómo usarlos será exclusivamente decisión nuestra. Un ejemplo de esta versatilidad es que el elemento <nav> podría ser insertado dentro del elemento <header> o en cualquier otra parte del cuerpo. Sin embargo, siempre se debe considerar que estas etiquetas fueron creadas para brindar información a los navegadores y ayudar a cada nuevo programa y dispositivo en el mercado a identificar las partes más relevantes del documento.

<section>

Siguiendo nuestro diseño estándar nos encontramos con las columnas que en la imagen llamamos Información Principal y Barra Lateral. Como explicamos anteriormente, la columna Información Principal contiene la información más relevante del documento y puede ser encontrada en diferentes formas (por ejemplo, dividida en varios bloques o columnas). Debido a que el propósito de estas columnas es más general, el elemento en HTML5 que especifica estas secciones se llama simplemente <section>:

<!DOCTYPE html>

<head>

<title>Este texto es el título del documento</title>

</head>

<body>

<h1>Este es el título principal del sitio web</h1>

</header>

<nav>

<ul>

<li>principal</li>

<li>fotos</li>

<li>videos</li>

<li>contacto</li>

</ul>

</nav>

</section>

</body>

</html>

Al igual que la Barra de Navegación, la columna Información Principal es una sección aparte. Por este motivo, la sección para Información Principal va debajo de la etiqueta de cierre </nav>.

IMPORTANTE: Las etiquetas que representan cada sección del documento están localizadas en el código en forma de lista, unas sobre otras, pero en el sitio web algunas de estas secciones se ubicarán lado a lado (las columnas Información Principal y Barra Lateral son un claro ejemplo). En HTML5, la responsabilidad por la representación de los elementos en la pantalla fue delegada a CSS. El diseño será logrado asignando estilos CSS a cada elemento HTML.

<aside>

En un típico diseño web la columna llamada Barra Lateral se ubica al lado de la columna Información Principal. Esta es una columna o sección que normalmente contiene datos relacionados con la información principal pero que no son relevantes o igual de importantes.

En el diseño de un blog, por ejemplo, la Barra Lateral contendrá una lista de enlaces. En el ejemplo de la imagen, los enlaces apuntan a cada una de las entradas del blog y ofrecen información adicional sobre el autor (número 4). La información dentro de esta barra está relacionada con la información principal pero no es relevante por sí misma.

Siguiendo el mismo ejemplo podemos decir que las entradas del blog son relevantes pero los enlaces y las pequeñas reseñas sobre esas entradas son solo una ayuda para la navegación pero no lo que al lector realmente le interesa.

En HTML5 podemos diferenciar esta clase secundaria de información utilizando el elemento <aside>:

<!DOCTYPE html>

<head>

<title>Este texto es el título del documento</title>

</head>

<body>

<h1>Este es el título principal del sitio web</h1>

</header>

<nav>

<ul>

<li>principal</li>

<li>fotos</li>

<li>videos</li>

<li>contacto</li>

</ul>

</nav>

</section>

<aside>

<blockquote>Mensaje número uno</blockquote>

<blockquote>Mensaje número dos</blockquote>

</aside>

</body>

</html>

El elemento <aside> podría estar ubicado del lado derecho o izquierdo de nuestra página de ejemplo, la etiqueta no tiene una posición predefinida. El elemento <aside> solo describe la información que contiene, no el lugar dentro de la estructura. Este elemento puede estar ubicado en cualquier parte del diseño y ser usado siempre y cuando su contenido no sea considerado como el contenido principal del documento. Por

ejemplo, podemos usar <aside> dentro del elemento <section> o incluso insertado entre la información relevante, como en el caso de una cita.

<footer>

Para finalizar la construcción de la plantilla o estructura elemental de nuestro documento HTML5, solo necesitamos un elemento más. Ya contamos con la cabecera del cuerpo, secciones con ayuda para la navegación, información importante y hasta una barra lateral con datos adicionales, por lo tanto lo único que nos queda por hacer es cerrar nuestro diseño para otorgarle un final al cuerpo del documento. HTML5 provee un elemento específico para este propósito llamado <footer>:

<!DOCTYPE html>

<head>

<title>Este texto es el título del documento</title>

</head>

<body>

<h1>Este es el título principal del sitio web</h1>

</header>

<nav>

<ul>

<li>principal</li>

<li>fotos</li>

<li>videos</li>

<li>contacto</li>

</ul>

</nav>

</section>

<aside>

<blockquote>Mensaje número uno</blockquote>

<blockquote>Mensaje número dos</blockquote>

</aside>

</footer>

</body>

</html>

En el típico diseño de una página web (Figura 1-1) la sección llamada Institucional será definida por etiquetas <footer>. Esto es debido a que la barra representa el final (o pie) del documento y esta parte de la página web es normalmente usada para compartir información general sobre el autor o la organización detrás del proyecto. Generalmente, el elemento <footer> representará el final del cuerpo de nuestro documento y tendrá el propósito descripto anteriormente. Sin embargo, <footer> puede ser usado múltiples veces dentro del cuerpo para representar también el final de diferentes secciones (del mismo modo que la etiqueta <header>).

Bueno hora ya tenemos el esqueleto completo, ahora falta rellenarlo con información pero eso ya es otra historia, así que poco a poco iremos diseñando y haciendo algo más avanzado e incrementando más y más de nivel.

Saludos :p c0d3r - Javier.

Programación y algo más.

miércoles, 12 de marzo de 2014

Estructura y diseño. HTML5 Parte 1.

<header>

No hay comentarios:

Publicar un comentario