Cómo detectar la orientación del dispositivo con HTML5

Una de las características que más se ha hablado de HTML5, es sin dudas sobre la posibilidad de reproducir audio y video nativamente, es decir sin la necesidad de plugins de terceros. Curiosamente, una característica muy sorprendente y de la que poco se ha hablado, es la de detectar la orientación del dispositivo.

Equipos como un MacBook, iPhone, iPads, smatphones Nokia, Smartphone con Android (hasta mi antiguo Nokia N95) y casi cualquier smartphone/tablet que se vende en la actualidad incorporan un acelerómetro y/o giroscopio.

Un acelerómetro es un instrumento que mide aceleraciones. Por ejemplo en el caso de un Macbook se utiliza para detectar si el equipo está cayendo y así minimizar el daño en disco duro.

Todo esto permite por ejemplo usar los juegos del iPhone y/o iPad donde no hay palanca de mando sino que con el mismo dispositivo, se controla el juego según la posición.

HMTL5 está permitiendo a los programadores hacer aplicaciones verdaderamente potentes y que hasta funcionan sin conexión a Internet. Sin combinamos tecnologías como SVG y device orientation o detección de la orientación del dispositivo, pronto estaremos creando juegos similares a los que se desarrollan con lenguajes como C/C++ con sólo tecnología web.

En HTML5, detectar la orientación del dispositivo es tan sencillo como se ve en el código Javascript del siguiente ejemplo:

window.addEventListener('deviceorientation', function(event) {
var a = event.alpha;
var b = event.beta;
var g = event.gamma;
}, false);

Para que puedan ver en funcionamiento un demo funcional, gravé el siguiente video:

[youtube]http://www.youtube.com/watch?v=-kWtmJSKfeg&feature=colike[/youtube]

Si estás interesado en HTML5, te recomiendo estas otras entradas:

Conoce las ventajas de las aplicaciones web

5 Cosas que deberías saber sobre HTML5

3 Recursos para aprender HTML5

Fuente de referencia de esta entrada: HTML5 Rocks