Usar La API De Orientación Para El Dispositivo

Hoy en día los dispositivos móviles están equipados con diferente tecnología: cámara, GPS, sensores de movimiento, sensores de proximidad, etc. Estos aditamentos sin duda nos permite realizar ciertas tareas que podemos y no podemos hacer en nuestros computadores de escritorio.

En esta ocasión hablaremos sobre la API de orientación para el dispositivo. La API de Orientación del dispositivo nos ayuda a detectar la orientación de la pantalla del usuario y hacer los cambios necesarios en la aplicación. Por ejemplo, en YouTube, si estás viendo un video y se mueve el teléfono, el video ira a pantalla completa, claro, haciendo uso de la API. Pero como sabes, el uso de esta las API para dispositivos móviles, se enfocan en el desarrollo de juegos ;)

Compatibilidad Del Navegador

El soporte de los navegadores para esta API es bastante bueno para ser una nueva API, es compatible con todos los principales navegadores, excepto Safari e IE.

Usando La API

Cuando se trata de este tipo de característica, lo primero que tenemos que hacer es poner a prueba el soporte en el navegador del usuario, para esto usarmos la siguiente sentencia donde evaluamos si el navegador soporta el uso de la API:

[js]<br /><br />if (window.DeviceOrientationEvent) {<br /><%%KEEPWHITESPACE%%> // Si la API es soportada, usaremos el código en este bloque<br />}<br /><br />[/js]

 

Esto es todo lo que se necesita para comprobar la compatibilidad. Nada complicado, verdad?

Después de esto, vamos tenemos que verificar los movimientos del dispositivo con el atributo deviceorientation.

[js]window.addEventListener("deviceorientation", orientation, true);[/js]

 

A través de este escuchador de evento, podemos recuperar cuatro valores diferentes de la API:

  • absolute – este valor indica si el dispositivo está proporcionando el valor absoluto.
  • alpha – el valor alfa será un valor de 0 a 360 que representará el movimiento del dispositivo en el eje z.
  • beta – el valor beta representa el movimiento en el eje x y los valores del rango de -180 a 180.
  • gamma – el último valor representa el movimiento en el eje y, y tiene valores de -90 a 90.

No tienes que utilizar todos estos valores, sólo las que sean necesarias para el proyecto. Por ejemplo si quiero un div se mueva con la orientación del dispositivo, sólo se deberá usar los valores de beta y gamma, justo así:

[js]<br /><br />function orientation(event) {<br /><%%KEEPWHITESPACE%%> var x = event.beta;<br /><%%KEEPWHITESPACE%%> var y = event.gamma;<br />}<br /><br />[/js]

 

Ahora podemos utilizar las variables x e y  para controlar el movimiento de un div, todo lo que tenemos que hacer es utilizar el método css de jQuery y fijar la parte superior de la x y la izquierda a la y:

[js]<br /><br />function orientation(event) {<br /><%%KEEPWHITESPACE%%> var x = event.beta;<br /><%%KEEPWHITESPACE%%> var y = event.gamma;<br /><br />$(‘.square’).css({<br /><%%KEEPWHITESPACE%%> ‘top’:x,<br /><%%KEEPWHITESPACE%%> ‘left’: y<br /><%%KEEPWHITESPACE%%> });<br />}<br /><br />[/js]

 

Finalmente

Este tipo de API muy a menudo se pasa por alto porque es bastante simple, pero puede ofrecer un gran impulso para su aplicación. No nos podemos negar que usar algo así en cualquier desarrollo móvil que hagamos, nos facilitara de gran manera la vida. Ademas de encontrar un soporte en los navegadores principales, podemos brindar más de lo que el usuario podría esperar.