Cada vez más, los dispositivos habilitados para la web son capaces de determinar su orientación, es decir, que pueden informar sobre los datos que indican cambios en su orientación con relación a la atracción de la gravedad. En concreto, los dispositivos manuales como, por ejemplo, los teléfonos móviles pueden utilizar esta información para rotar automáticamente la pantalla de forma que se mantenga en posición vertical. Cuando el dispositivo se gira, presenta una vista en pantalla panorámica del contenido de la web, de manera que su anchura es superior a su altura.
Hay dos maneras de tratar la información de orientación en Gecko. La primera es la consulta a medios de orientación . Esto te permite ajustar el contenido de tu diseño con CSS, en función de si el dispositivo está en modo horizontal (es decir, su anchura es superior a su altura) o en modo vertical (su altura es mayor que su anchura).
La segunda manera de administrar la información de orientación, , es el evento MozOrientation, agregado en Gecko 1.9.2 (Firefox 3.6). Este evento se envía cuando el acelerómetro detecta un cambio en la orientación del dispositivo. Al recibir y procesar los datos reportados por los eventos MozOrientation, es posible responder de forma interactiva a los cambios de elevación y rotación causados por el movimiento del dispositivo.
Ajuste de diseño cuando cambia la orientación
Uno de los casos en que te interesarán los cambios de orientación es cuando quieras evaluar el diseño de tu contenido en función de la orientación del dispositivo. Por ejemplo, tal vez desees que una barra de botones se extienda a lo largo de la pantalla del dispositivo. Si utilizas una consulta multimedia, puede hacer esto fácilmente y de forma automática.
Construir el CSS para cada orientación
Para este caso práctico, necesitarás dos hojas de estilo: una para ser usada cuando el dispositivo está en orientación vertical (su altura es mayor que su anchura) y la otra que se utiliza cuando el dispositivo está en posición horizontal (su ancho es mayor a su altura).
| Vertical | Horizontal |
|
| #toolbar { min-height: 500px; width: 125px; margin-right: 8px; float: left; } |
Como puedes ver si analizas los dos fragmentos de CSS anteriores, en el modo vertical, hacemos que la barra de herramientas se extienda horizontalmente en la parte superior de la ventana, con el fin de maximizar el espacio horizontal disponible para el contenido. En el modo horizontal, la barra de herramientas se extiende verticalmente por el lado izquierdo del documento.
La aplicación del CSS correcto en función de la orientación actual
Lo único que tienes que hacer ahora es establecer las consultas multimedia que seleccionará automáticamente el archivo CSS correcto basado en la orientación del dispositivo. Esto es sencillo:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
A partir de ahora, la carga de los contenidos da como resultado la disposición correcta que se aplicará en función de la orientación del dispositivo.
Procesamiento de eventos de orientación
Firefox 3.6 (Gecko 1.9.2) introdujo el evento MozOrientation, al que puedes prestar atención con el fin de recibir las actualizaciones mientras el usuario ajusta la orientación del dispositivo.
En la actualidad, este es compatible con algunos dispositivos móviles (Windows Mobile, por ejemplo) y en el MacBook de Apple y los equipos MacBook Pro.
Lo único que tienes que hacer para comenzar a recibir los eventos de orientación es lo siguiente:
window.addEventListener("MozOrientation", handleOrientation, true);
Después de registrar tu escucha de eventos (en este caso, una función de JavaScript llamada handleOrientation()), la función de escucha se llama de forma periódica con la orientación de datos actualizada.
El evento de orientación contiene tres valores:
| Campo | Tipo | Descripción |
x | double | La cantidad de inclinación a lo largo del eje X. |
y | double | La cantidad de inclinación a lo largo del eje Y. |
z | double | El importe de la inclinación a lo largo del eje Z. |
Los valores de x , y y z pueden variar desde -1 a 1, donde 0 significa que el dispositivo está en equilibrio sobre ese eje.
La función de controlador o manejador de eventos puede ser algo así:
function handleOrientation(orientData) {
var x = orientData.x;
var y = orientData.y;
var z = orientData.z;
// Haz cosas con los datos de orientación nuevos
}
Los valores del acelerómetro explicados
El valor indicado para cada acceso indica la cantidad de la aceleración a lo largo de ese eje que está teniendo lugar actualmente.
El eje X representa la cantidad de inclinación de derecha a izquierda. Este valor es 0 si el dispositivo está a nivel del eje X, y se aproxima a 1 si el dispositivo se inclina hacia la izquierda, y -1 si el dispositivo se inclina hacia la derecha.
El eje Y representa la cantidad de inclinación de adelante hacia atrás. El valor es 0 si el dispositivo está a nivel del eje Y, y se aproxima a 1 a medida que inclinas el dispositivo hacia atrás (lejos de ti) y -1 si inclinas el dispositivo hacia el frente (hacia ti).
El eje Z representa la aceleración vertical. El valor es 1 cuando el dispositivo está pasando por la gravedad terrestre estándar (9.8m/sec 2), pero no en movimiento. Al mover el dispositivo hacia arriba hace que el valor descienda. El valor es 0 si el dispositivo está en caída libre (ingrávido o precipitándose como consecuencia de una caída).
En ingravidez, todos los valores será igual a cero cuando el dispositivo no se mueva, independientemente de su orientación, y sólo cambiará cuando se acelere.