empezando con html 5. Tutoriales, ejemplos y opiniones

Pues este es el primero post sobre html5 que escribo. La verdad que me ha dejado asombrado, había visto algo muy por encima y sin prestar mucha atención.
Tiene muy buena pinta, pero supondrá que hay que darse caña en aprender esta nueva mejora en la tecnología de World Wide Web, HTML.

Para tener algo de teoría HTML 5 es una de las revisiones más importantes que establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Algunos de ellos son técnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semántico, como por ejemplo <nav> (bloque de navegación del sitio web) y <footer>. Otros elementos proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos <audio> y <video>.

Mejoras en el elemento <canvas>

Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos puramente de presentación, como <font> y <center>, cuyos efectos son manejados por el CSS. También hay un renovado enfasis en la importancia del scripting DOM para el comportamiento de la web.

Fuente: wikipedia

Nuevas APIS
A parte de las nuevas etiquetas de html5 existen una serie de APIs que extienden algunas interfaces de las propiedades DOM,  éstas son un  por ejemplo:

1. El elemento canvas para dibujar en 2D, es un parte de html5 que permite la renderización de gráficos e imágenes bitmap de forma dinámica. Es un modelo de procesamiento de bajo nivel que actualiza un bitmap.
   Ejemplo de uso de una etiqueta canvas

   <canvas id="tutorial" width="150" height="150"></canvas>
   

   Función para verificar si el navegador soporta la etiqueta

   var canvas = document.getElementById('tutorial');
   if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    // pintar codigo aqui
   } else {
    // codigo que no soporta canvas de html5 aqui
   }
   

   Ver ejemplo de canvas tag html5

2. Reproducción de vídeo
   <video id="video_with_controls" width="320" controls autobuffer>
    <source src="video.webm" type="video/vp8" />
    <source src="video.mp4" type="video/mp4" />
    <source src="video.ogv" type="video/ogg" />
    Tu navegador no soporta el video tag de html5
    </video>
   
   Ver ejemplo de video tag html5
   

3. Aplicaciones offline

4. Drag-and-drop

5. Gestión del historial del navegador

6. Geolocalización

He visto algunas web y ejemplos en HTML5 y me ha dejado asombrado. Sobre todo sketchpad, es una web para dibujar parecida al paint, obviamente no lo vamos a comparar con Photoshop… pero para ser los inicios de html5 aplicado a un desarrollo, de dibujo y edición de imagen a bajo nivel, online  esta pero que muy bien desarrollada, me ha gustado mucho.

También esta el siguiente video que al pulsar sobre él hace un efecto de explosión, el tema es que al tener unos frames por segundo muy altos los ordenadores que ya son un poco viejos como mi portátil pues se nota que va lento.

He estado trasteando en la web HTML5Rocks.com desarrollada por Google, y en la que hay tutoriales sobre html5, implementación de nuevos tags, ejemplos de uso, presentaciones, una herramienta online para testear y probar código y javascript html5 y otros recursos y material didáctico para empezar a usar y aprender html5.

Esto es señal de que ha Google le gusta y lo apoya, y personalmente creo que a la hora de indexar empezará a valorar más las web de vídeos que usan html5 en vez de flash, más allá de que flash no indexe y se tengan que hacer algunos trucos o “piruetas” para que indexe contenido. Pero lo cierto es que el Sr. Google es quien marca las reglas del juego y parece que html 5 le gusta.

No me voy a aventurar a opinar sobre flash (mucho), que esta muy bien para depende que aplicaciones y determinados tipos de webs, pero yo creo que con el tiempo flash dejará de usarse para muchas tareas, que hoy día son necesarias y el reproductor de vídeos puede ser una de ellas.

Para mas especificaciones y ver la documentación oficial sobre HTML5 Y XHTML5 visitar la web oficial de W3C

Mas información en la wikipedia html5