Hola a todos, volviendo a escribir después de mucho tiempo, pues bien estos dias estuve viendo algo de HTML5 junto con WebMatrix y me gustaría compartir con ustedes la parte de HTML5, pienso presentar mas adelante tutoriales sobre WebMatrix.
Pues bien, como todos sabrán HTML5 salió con todo el año pasado y acompañado de CSS3 y Javascript es posible crear sitios web con una gran calidad en cuanto a diseño. Tal es su éxito que el mismo Microsoft esta adoptando esta tecnolgía para su próxima generación de aplicaciones, muchos de los juegos famosos como AngryBirds, Cut the Rope han sacado su versión en HTML5 y eso nos muestra el poder gráfico con el que cuenta esta naciente tecnología.
Actualmente
Definición del Doctype
Ahora vamos a lo que nos interesa, la forma de definir un documento HTML5 no es algo del otro mundo, pero uno de los primeros cambios que se tienen es la forma de definir el Doctype, ahora es un poco más simple y más fácil de memorizar:
<!DOCTYPE HTML>
<!-- Define doctype para html5, para que sea reconocido por los browsers -->
<html>
<head>
<!-- Información de cabecera del documento -->
</head>
<body>
<!-- Cuerpo del documento -->
</body>
</html>
Como se ve en el ejemplo, esa es la forma para definir un documento con contenido HTML5.
Nuevas etiquetas en HTML5
Primeramente todas las etiquetas que usamos en HTML4 que es el que la mayoria conoce se mantienen, pero ahora HTML5 incluye nuevas etiquetas las cuales tienen un significado estructural y significado gráfico, es decir que algunas de las nuevas etiquetas no se pueden ver visualmente pero como diseñadores nos ayudan a delimitar partes que comunmente tiene un sitio tales como headers, footers, articles, nav, etc. y también etiquetas que pueden ser observadas visualmente como la etiqueta audio, con el transcurso del tiempo les mostraré cada una de estas.
Header y Footer
Como se mencionó, HTML5 nos presenta etiquetas con representación estructural y gráfica, en este caso header y footer son etiquetas que no tienen representación visual pero nos ayudan a estructurar de una forma más entendible el documento html.
Como su nombre lo dice, header y footer representan la cabecera y el pie de la página, notese que no hay que confundir el header con el head, ya que en el head se establece el título, referencias a hojas de estilo, metadata, etc. mientras que en la etiqueta header se define la cabecera del sitio como tal, comunmente en esta etiqueta se muestra el logotipo de la página un menú de navegación, etc. Y en la etiqueta footer se define el pie de la página, que suele ser el año, el autor, algunos links de utilidad a otros sitios, etc. Veamos un ejemplo:
<!DOCTYPE HTML>
<html>
<head>
<title>Mi primera página HTML5</title>
</head>
<body>
<header>
<h1>Logotipo del sitio</h1>
<h3>Una imagen, animacion flash, etc</h3>
</header><!-- Cabecera del sitio -->
<p>Este es el contenido de mi página</p>
<footer>
Donkeysharp - Copyleft(2012)
</footer>
</body>
</html>
Si ejecutamos este ejemplo en algún browser podrán notar que no hay una representación visual para el header, solo visualizaremos lo que esta dentro de h1, h3 y p. Pero más adelante veremos que cuando empecemos a maquetear el sitio con css3 comenzaremos a ver la utilidad de esta etiqueta.
Etiquetas de navegación
Otra etiqueta a nivel estructural que nos presenta HTML5 es la etiqueta nav, que se encargá de indicar al browser que dentro de esta región se encuentra una estructura del tipo menú, que nos permitirá navegar a otras páginas o sitios, esta etiqueta puede ser establecida en diferentes partes de la estructura de una página. Por ejemplo este blog, tendriamos esta etiqueta dentro del header, pero también la tendriamos dos veces en la parte derecha, ya que tenemos un menú con las categorías y otro que clasifica las entradas del blog por periodos de tiempo. Viendo un ejemplo sobre una posible forma que estaría estructurado este blog podría ser la siguiente:
<!DOCTYPE HTML>
<html>
<head>
<title>Un blog cualquiera</title>
</head>
<body>
<header>
<h1>Mi blog!</h1>
<h3>Este soy yo :D</h3>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Acerca del autor</a></li>
</ul>
</nav>
</header>
<div>
<!-- Esta division se encargara de mostrar el contenido -->
<h2>Una entrada</h2>
<p>
El contenido de la entrada, bla bla bla.
</p>
</div>
<div>
<!-- Esta division se encargara de mostrar las categorias -->
<span><b>Categorías</b></span>
<nav>
<ul>
<li><a href="#">CSharp</a></li>
<li><a href="#">GNU/Linx</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">WebMatrix</a></li>
<li><a href="#">Windows Azur</a></li>
</ul>
</nav>
</div>
<div>
<!-- Esta division se encargara de mostrar las entradas por tiempo -->
<span><b>Historial</b></span>
<nav>
<ul>
<li><a href="#">Enero 2012 (2)</a></li>
<li><a href="#">Diciembre 2011 (5)</a></li>
<li><a href="#">Novimebre 2011 (9)</a></li>
</ul>
</nav>
</div>
</body>
</html>
Bueno, si ejecutan el anterior ejemplo en un browser obviamente todo se mostrará de arriba hacia abajo, eso por que todavía no establecimos el estilo con css3, pero espero se entienda la idea en que situaciones es útil utilizar la etiqueta nav.
Etiquetas de contenido
Bueno, este es último tipo de etiquetas para esta primera parte, pues bien estas etiquetas nos permiten definir contenido como tal, de la misma forma que las anteriores etiquetas no tienen representación visual si no estructural. Hoy en día la mayoría de los sitios cuenta con un blog o una sección de noticias, que cada artículo o entrada que es publicado tiene la siguiente forma:
- Título del artículo o entrada
- Información referente(hora, fecha, creador, tags, etc.)
- Contenido del artículo o entrada
Pues bien, HTML5 nos provee de las etiquetas section, article y aside que hacen referencia al contenido de una página, continuando con el ejemplo anterior sobre la estructura de un blog teniamos una división que se encargaba de mostrar el contenido, pero este contenido puede ser varios artículo o entradas como muchos sitios web, entonces gracias a HTML5 es posible reescribir esto de la siguiente forma:
<section>
...
</section>
Cabe resaltar que section no esta restringida para el contenido de la página, es utilizable en otras partes de la página, pero en el caso del blog, definiriamos el section como el contenedor de articulos, además que cada artículo tiene su propia estructura como se mencionó, entonces, podriamos utilizar algunas etiquetas HTML5 que ya vimos para definir la estructura de cada artículo o entrada, haciendo esto tendríamos definido el contenido de la siguiente manera:
<section>
<!-- Esta division se encargara de mostrar el contenido -->
<article>
<header>
<h2>Mi segunda entrada</h2>
<p>Creado por: psycho el 2012-12-12</p>
</header>
<p>
Este es el extenso contenido de la segunda entrada.
</p>
<footer>
<nav>
<span><b>Tags: </b></span>
<a href="#">Tag 1</a>, <a href="#">Tag 2</a>, <a href="#">Tag 3</a>
</nav>
</footer>
</article>
<article>
<header>
<h2>Mi primera entrada</h2>
<p>Creado por: psycho el 2012-11-21</p>
</header>
<p>
Este es el extenso contenido de la primera entrada.
</p>
<footer>
<nav>
<span><b>Tags: </b></span>
<a href="#">Tag 1</a>
</nav>
</footer>
</article>
</section>
Como pueden ver, section nos permite definir secciones de nuestro sitio, en el código anterior solo definimos una sección para el contenido de la página, pero podemos usar otra sección para el sidebar de la página, comparando con el primer ejemplo de la estructura de un blog, podriamos reemplazar los divs por estos sections.
Luego dentro de nuestro section de contenido, definimos dos entradas, usando la etiqueta article y dentro de esta creamos su propia estrutura (titulo, autor, fecha, contenido, tags, etc.) haciendo uso de las etiquetas header para definir el titulo y la información de la entrada y el footer para mostrar los tags de la entrada, mostrando que podemos utilizar estas etiquetas para definir estructuras a nivel de toda la página y para definir la estructuras de sub-partes de la página.
Y finalmente no puse un ejemplo de la etiqueta aside, pues bien, no encuentro palabras que puedan describir lo que realmente hace esta etiqueta, mas que como su definición dice que sirve para poner contenido tangencial en un articulo, pero si visitan este link muestra un ejemplo muy claro con el cual se entiende el uso de aside
Bueno, con eso llegamos al final de esta primera parte (espero de muchas) sobre HTML5, como pueden ver solo se vieron etiquetas que nos permiten estructurar mejor nuestra página, en la siguiente entrada mostrare algunas etiquetas sobre contenido semántico y algunas nuevas que ya las podemos apreciar graficamente. Espero que se haya entendido no duden en comentar, estoy abierto a observaciones, correcciones, etc.
Saludos
Muy bueno! una cosa, html5 necesita (obligatoriamente) definir el lenguaje de la web en el < html >
ResponderEliminarej:
< html lang="es" >
;)
No es necesario, pero es un estandar, se recomienda.
ResponderEliminar