Hiiiii! geeks,
Tengo el gran gusto de iniciar la aventura de HTML5 con ustedes, para los que estamos en el día a día del mundo de la web nos podemos dar cuenta que se esta construyendo toda una revolución para recibir a la web moderna que consiste en un manejo sencillo de vídeo, audio, geolocalización, nuevos componentes y etiquetas que son el marco que aclama la web de hoy en día.
ESTO Y MÁS ES HTML5
Pero que es HMTL5 ?
HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5 también es un termino de marketing para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5, CSS3 y nuevas capacidades de Javascript.
Porque fue creada ?
La versión anterior y más usada de HTML, HTML4, carece de características necesarias para la creación de aplicaciones modernas orientadas al navegador. La intervención de Javascript ha ayudado a mejorar esto y gracias a frameworks como jQuery, jQuery UI,Sproutcore, entre otros.
Porqué la tan anunciada muerte de Plug-in como Flash y Silverlight ?
Como les comentaba debido a esta carencia se vio en muchas casos el uso de plug-in como reemplazo de HTML para desarrollar aplicaciones web con un rico contenido en: audio, video, animaciones vectoriales, componentes de interfaz complejos y más acceso a hardware como webcams y micrófonos entre muchas otras cosas. Ahora HTML5 es capaz de hacer esto sin necesidad de plug-in y con una gran compatibilidad entre navegadores.
Que necesito para empezar ?
Editor de código
Puedes comenzar con un simple Bloc de Notas si tu estilo es el Hard Code.
Pero si te interesa una metodología un poco más ágil en el desarrollo emplear Intellisense más un editor ligero te recomendamos Sublime Text.
O sino ahora necesitas acceso a datos, reportes, y de más funciones de forma sencilla en un editor ligero te presentamos a WEBMATRIX la nueva herramienta de Microsoft que incluye todo lo necesario para el desarrollo de sitios web ademas de que es gratis como a nosotros nos gusta =).
Desarrollar sitios web con HTML5 nunca ha sido tan fácil usa WebMatrix.
Nuevas etiquetas de HTML5 y estructura de nuestro primer proyecto
Para empezar a usar HTML5 lo único que tienes que hacer es colocar este DOCTYPE antes de la etiqueta <html>:
<!DOCTYPE html>
Es un DOCTYPE mucho más simple que XHTML pero esto no cambia las reglas implementadas mas bien esta ahora te permite usar todo el poder de HTML5 sin que nada de lo que ya tienes programado anteriormente deje de funcionar.
Todas las etiquetas que estamos a punto de presentar se comportan como un div o span. Pero con la diferencia que estas mantienen un significado semántico que queremos decir "es como la etiqueta describe el significado de su contenido". De este modo, los navegadores sabrán qué partes de una página web son estas como cabeceras, pies de página, partes centrales de contenido, etc, etc y de ese modo podrán dar más importancia a unas u otras.
<header>
Está diseñada para reemplazar la necesidad de crear divs sin significado semántico, ahora aquí ubicaremos nuestra respectiva cabecera.
<nav>
Está diseñado para que coloques los botones de navegación de tu sitie. Incluso puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>. Y como nota importante sólo puedes tener un <nav> por página.
<section>
Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts.
<article>
Define zonas únicas de contenido independiente. En un blog, cada post sería un article.
<aside>
Cualquier contenido que no esté relacionado directamente con la misión de la página va en un aside. En un blog, obviamente el aside es la barra lateral de información.
<footer>
Es el pie de página y todo lo que lo compone.
Atención:
Y ustedes se preguntaran que paso con el <div> ya no tiene propósito su uso ???
Con todas estas nuevas etiquetas no significan que ya no se use <div>. Solo usaremos un DIV cuando no exista otra etiqueta más idónea para usar o, cuando pretendamos aplicar un Script o unos estilos CSS a un bloque de contenido al que no es posible aplicar una de esas nuevas etiquetas Sólo se deben usar las etiquetas semánticas de HTML5 donde sean necesarias.
AHORA COMO QUEDA LA ESTRUCTURA DE NUESTRO DOCUMENTO HTML5
Código
Presentación
El código lo pueden encontrar aquí.
De está manera se a defino la estructura semántica del sitio haciendo que la exploración tanto para el navegador y el desarrollador sea más efectiva ya que de está manera le damos un significado especifico a cada contenido vale la pena aclarar que esto no es el como se verá nuestro sitio sino como está estructurado en si y su significado, para el como se verá es trabajo de CSS3 que ya veremos en siguientes post.
Y es todo por hoy chic@s quería agradecer en este primer post a @SoreyGarcia por la oportunidad y confianza depositada en mi. Un gran saludo a todos los miembros de @Avanet espero vivir grandes y felices experiencias con ustedes =).
Puedes realizar tus consultas en formspring o dejanos tu comentario 
Mail: peter.conchar@fcmf.ug.edu.ec
No olvides seguir en twitter a:
para estar al día con las entradas en este blog.