HTML5 a fondo!!!

Bienvenidos al futuro, bienvenidos a HTML5, luego de ver las entradas anteriores tenemos una idea general de HTML por lo estamos en condiciones de sumergirnos de manera rápida pero no por eso superficial en el mundo de HTML5, trabajaremos todas las nuevas funciones de este lenguaje, hablaremos de tag y las distintas novedades q nos brinda. Comencemos...
La estructura de un archivo en HTML5 tiene algunos cambios respecto a lo q vimos hasta ahora, estos cambios se basan en reemplazar código q generalmente se usa por algo mas corto para facilitar el uso y aplicación de la misma, aparece como cabecera "header" un sector destinado a la cabeza de nuestra página, esto sustituiría crear un div con id="cabecera", pondremos un titular un mensaje de bienvenida, el nombre de nuestra página o bue ustedes verán.
Luego se destaca un sector llamado "nav" este espacio está destinado a la barra de link o barra de navegación, su disposición puede ser horizontal o vertical.
En el cuerpo de nuestro sitio vemos varias regiones bien delimitadas, dos grandes lugares, "section" y "aside", el primero va a contener los distintos "article" o articulos, el segundo tiene como fin albergar toda información q no es relevante para el contenido del sitio, esto es publicidad, herramientas y cualquier otro objeto. Por último tenemos el "footer" o pie de página, sustituiría un div id="pie" de la maquetación q haciamos en HTML. Solo para generar una imagen de lo relatado colocamos este esquema, pero no quiere decir q debe tener inevitablemente esa estructura, como siempre en esto, todo depende de nuestra creatividad:

Este sería el código correspondiente para generar esta estructura:

Pero q ventajas tiene esta nueva disposición?? bueno primero el orden, es mucho mas claro buscar la cabecera de nuestra página entre una etiqueta "header" q estar buscando entre los ""id" de nuestros "div" hasta encontrar el q buscamos, pero lo más significativo es el uso conjunto a CSS o javascript, ya q haremos referencia a estos sectores por su nombre, directamente por "header" o "footer".

---

Etiquetas multimedia

Si bien cambiaron las etiquetas semanticas, las q acabamos de ver, y estos cambios son productivos, creo q los avances de mayor impacto se sentirá en las nuevas etiquetas multimedia, soporte para audio, video y dibujo vectorial es lo q nos regala el nuevo HTML5...


-Video:

Insertar video sin necesidad de plugins, no va a ser nunca más parte del mundo de la ciencia ficción con este lenguaje es una realidad. Esta nueva etiqueta es muy fácil usarla, pero cada navegador soporta codecs diferentes, lo que hace necesario recodificar un archivo de video en múltiples codecs para abarcar todos los navegadores. Las versiones de los navegadores q poseen soporte para este tag son las siguientes versiones y superior: IE 9+, Firefox 3.5+, Chrome 3.0+, Safari 3.0+, Opera 10.5+, Android Browser 2.0+, Safari Mobile 1.0+. Si querés  saber q funciones soportan los distintos navegadores consultá ésta WEB q tiene varias opciones interesantes como por ejemplo detectar si tu navegador es compatible con HTML5 y hacer una comparativa entre varios de navegadores detallando cada ítem.

Pero como incluir un video con HTML5?? Para eso usamos la siguiente etiqueta:

Como vemos con "src" incluimos la ubicación del video, también admite la configuración de altura y ancho.

Otras propiedades muy importantes q posee esta etiqueta son:
Aclaro q para agregar estas funciones solo es necesario especificar la propiedad estas no toman ningún valor.
"preload"
Especifica si el video debe comenzar a cargarse automaticamente y no por acción del usuario.


"autoplay"
Reproducirá el video de forma automática


"controls"
Mostrará los controles para manejar la reproducción del archivo multimedia, esto es INCREIBLE, poder mostrar unos controles con esta facilidad era impensado en el viejo HTML, mezcla de javascript y css serian necesarios para lograr algo como esto. Gracias HTML5...

Y como agregar videos en varios codec distintos??
Fácil de la siguiente manera:
Debemos colocar los diferentes "source" para cada formato de video.

Como vemos solo quitamos el atributo "src" y agregamos los "source" de los diferentes archivos de video, uno para cada codec y especificando en "type" el formato.

Así se visualizaría nuestro video gracias a este genial tag:







(si no puedes visualizarlo es porq tu navegador no soporta esta función)

-Audio
La etiqueta de audio es muy parecida a la etiqueta video, posee las mismas propiedades solo q no debemos especificar el alto y ancho ya q solo es audio.
>
Eso es todo, simple no??

-Cambas
Cambas es una plataforma q brinda soporte para el dibujo vectorial, podriamos hablar muchisimo sobre esto, por ahora solo diremos q HTML5 nos posibilita el uso del mismo.

---

Espero q les sirva esta visión global de las nuevas etiquetas, en proximas entradas veremos los cambios introducidos en los formularios. Nos seguimos viendo...