API de orientación de pantalla en HTML5

En mi post anterior “Detección de luminosidad en el ambiente con CSS3”, les platique un poco de la actualidad de HTML5 en dispositivos móviles, algo interesante que he estado notando, es que siguen las propuestas y drafts de nuevas capacidades para estos y hoy les quiero platicar de una muy genial.

Esta API proporciona acceso al giroscopio del dispositivo, por lo cual podemos saber la orientación, la cual nos permitirá crear geniales interacciones para el usuario. Ya existen aplicaciones de esta API, pueden hacer una búsqueda en Github donde encontraran muchas opciones para obtener ideas o ejemplos que pueden ser de gran ayuda para entender como funciona pero les puedo asegurar que no es complicado.

Funciones de la API

Tenemos diferentes funciones que permiten realizar acciones específicas, todo se encuentra en el objeto “screen“ de JavaScript:

• screen.orientation: Permite obtener la orientación actual de la pantalla.
• screen.lockOrientation(): Permite bloquear determinada orientación y esta lo recibe como parámetro “portrait/landscape“
• screen.unlockOrientation(): Desbloquea la orientación anteriormente bloqueada.
• screen.addEventListener(“orientationchange”, my_function): Escucha al evento orientationchange para ejecutar una función cuando se haga un cambio de orientación.

Determinando la orientación

Existen diferentes resultados que podemos obtener al momento de utilizar “screen.orientation“, estos te permiten determinar la posición actual de la pantalla.

• portrait-primary
• portrait-secondary
• landscape-primary
• landscape-secondary
• portrait (Determina que esta entre primary y secondary)
• landscape (Determina que esta entre primary y secondary)

Nota: El soporte de éstas es determinado por el user-agent del navegador, puede darse el caso de que los “secondary“ no los soporte.

Soporte en navegadores

Este post está basado en el draft de la W3C con fecha del 17 de Febrero del 2014 y es experimental, personalmente lo probé en Chrome para Android en su ultima versión de Google Play Store, otras personas han probado en Firefox para Android. Si quieres experimentar, intenta hacer un ejemplo y coméntanos que te pareció.