- Usar interfaces de programación de aplicaciones (API) de sistemas operativos nativos para cada plataforma (es decir, Android, iOS, Microsoft) que deseen admitir.
- Usando un marco como PhoneGap, que permite a los desarrolladores escribir su código una vez en HTML5 y volver a compilarlo en aplicaciones nativas para cada sistema operativo y dispositivo, interactuando con API nativas.
- Se puede acceder a los datos del sensor utilizando API estándar creadas a través del W3C que funcionan con diferentes dispositivos que usan JavaScript dentro de navegadores móviles como Safari móvil, Chrome, Opera Mobile y Firefox.
La ventaja del tercer enfoque, basado en la Web, es que evita el requisito de pasar por el proceso de aprobación de la tienda de aplicaciones cada vez que se actualiza la aplicación, o se lanza una corrección de errores. Tampoco los usuarios tienen que actualizar manualmente sus aplicaciones (se puede hacer automáticamente). Y aún permite la creación de aplicaciones funcionales y hermosas. Este es el enfoque que más me atrae y que abordaré en detalle en este artículo.
Analizaré cada sensor a su vez y describiré cómo acceder a sus datos a través de JavaScript, daré ejemplos del uso en el mundo real y ofreceré algo de mi experiencia personal para obtener los mejores resultados. Consulte las Tablas de compatibilidad móvil HTML5 para obtener detalles completos sobre qué navegadores y dispositivos admiten actualmente el acceso a los datos del sensor.
El sensor de geolocalización
Este sensor es el cerebro detrás de las aplicaciones de mapeo móvil, ubicando la posición del usuario en la Tierra para ayudarlo a trazar rutas a diferentes destinos. El sensor utiliza una combinación de enfoques, que pueden incluir el posicionamiento WiFi, la triangulación de la torre celular GSM y el posicionamiento por satélite GPS para recuperar una coordenada de latitud y longitud de la ubicación del usuario. Para proteger la privacidad del usuario, la aplicación / sitio web debe solicitar permiso (como se especifica en las directrices del W3C), antes de acceder a los datos de este sensor. Al usuario se le presenta un diálogo pidiéndole que permita el acceso a su ubicación (en la foto a la derecha).
El uso de estos datos de geolocalización permite a los desarrolladores mejorar la experiencia del usuario (UE) en el sitio, por ejemplo, rellenando automáticamente los campos de la ciudad y el país en formularios web, o buscando qué películas se están reproduciendo, a qué hora, en los cines de la localidad. El uso de estos datos junto con la API de Google Maps significa que podemos crear aplicaciones dedicadas de mapeo y enrutamiento con mapas que actualizan dinámicamente la interfaz de usuario (UI) a medida que el usuario cambia de ubicación. Conocer la ubicación también permite que una aplicación muestre fotos tomadas en las proximidades del usuario utilizando la API de Panoramio o un asistente de entrenamiento para calcular cuánto tiempo le toma a un corredor cubrir una cierta distancia, con la capacidad de comparar el rendimiento con carreras pasadas y futuras.
La API de geolocalización W3C nos permite acceder a las coordenadas de ubicación del usuario a través de JavaScript; proporcionando un bloqueo de posición único o la capacidad de rastrear continuamente al usuario mientras se mueve. La API también nos permite establecer la precisión de las coordenadas devueltas y especificar si queremos que la ubicación se devuelva normalmente o con alta precisión. NB La ubicación de precisión tomará un poco más de tiempo para identificar al usuario y, potencialmente, consumirá más batería en el proceso. El siguiente ejemplo muestra cómo esta API podría utilizarse para actualizar un mapa en pantalla dinámicamente en función de la ubicación del usuario, utilizando la API de mapas estáticos de Google para simplificar.
Para evitar errores de JavaScript, utilice la detección de características para asegurarse de que el acceso al sensor de geolocalización esté disponible antes de codificar con su API. Es posible solicitar acceso a la ubicación del usuario en la carga de la página, pero es mejor evitarlo, ya que esto los obliga a elegir compartir su ubicación antes de saber cómo se usará. Proporcionar un botón para que el usuario presione para dar permiso para acceder a su ubicación, le da un mayor sentido de control sobre la aplicación, lo que hace que sea mucho más probable que otorguen permiso.
Si el usuario niega el acceso a su ubicación, es posible que pueda ubicar su posición general a nivel de ciudad o país utilizando un respaldo basado en IP. Si esto no es adecuado, explique educadamente al usuario que no puede proporcionarle alguna funcionalidad específica hasta que le otorgue permiso, de modo que sienta que tiene el control de su página o aplicación.
Otras lecturas
- Uso de geolocalización – Red de desarrolladores de Mozilla.
- Manejo de excepciones con la API de geolocalización – Jef Claes.
- Un medidor de viaje simple con la API de geolocalización: Michael Mahemoff, HTML5 Rocks.
El sensor táctil
Las pantallas táctiles permiten a los usuarios controlar la interfaz de sus dispositivos móviles de una manera simple y natural. Los sensores táctiles debajo de la pantalla pueden detectar el contacto con uno o más dedos y rastrear su movimiento a través de la pantalla. Esto es un
1
touchevent
- ¿Por qué mi tableta Android v4.4 se congela y se calienta con frecuencia, incluso después de un restablecimiento completo?
- ¿Cuáles son las diferencias entre el stock de Android y el Android puro?
- Cómo hacer una superposición de pantalla en Android 6.0
- ¿Los teléfonos Android se fabrican en mejores condiciones que los teléfonos Apple?
- ¿Cuáles son las funciones necesarias en un teléfono?
(todas las interacciones de los usuarios con páginas web / aplicaciones, por ejemplo, toques, clics, son eventos de la calle).
Se accede a los datos del sensor táctil en JavaScript utilizando la API W3C Touch Events. Esto permite la mejora de sitios web / aplicaciones con carruseles y presentaciones de diapositivas que reaccionan al deslizar el dedo. También permite el desarrollo de aplicaciones web avanzadas que permiten a las personas dibujar imágenes con los dedos (consulte la aplicación web de Artistic Abode) o probar su memoria volteando las tarjetas con un dedo para encontrar los pares (consulte la aplicación web MemoryVitamins.mobi).
Figura 1: La imagen muestra: una imagen dibujada con un dedo en una pantalla táctil, usando la aplicación web de Artistic Abode.
Cada vez que el usuario toca, mueve o quita un dedo de la pantalla, se activa un evento táctil en el navegador. Se asigna un oyente a cada evento, que ejecuta una rutina de código específica cada vez que el usuario interactúa con la pantalla. Además de darnos la ubicación del punto de contacto actual, el sensor también puede decirnos qué elemento de la página se tocó y proporcionar una lista de todos los demás toques de dedos actualmente en la pantalla, aquellos dentro de un elemento específico y aquellos que han cambiado desde el último toque evento despedido
Ciertas acciones táctiles desencadenan un comportamiento dentro del sistema operativo: mantener presionado un dedo sobre una imagen puede activar la aparición de un menú contextual o dos dedos que se mueven sobre una página pueden activar un zoom de página. Si está codificando el sensor táctil, puede anular este comportamiento predeterminado del sistema operativo dentro de su función de controlador de eventos usando theevent.preventDefault ().
El siguiente ejemplo muestra cómo esta API se puede utilizar para mostrar el número actual de toques en la pantalla en cualquier momento, actualizando cuando los dedos de los usuarios se agregan o eliminan de la pantalla.
1
2
3
4 4
5 5
6 6
7 7
8
9
10
11
12
13
14
15
dieciséis
17
18 años
19
20
21
22
23
24
25
26
27
28
29
30
// Definir un controlador de eventos para ejecutar cuando ocurre un evento táctil en la pantalla
var handleTouchEvent = función (e) {
// Obtenga la lista de todos los toques actualmente en la pantalla
var allTouches = e.touches,
allTouchesLength = allTouches.length,
// Obtenga una referencia a un elemento en la página para escribir el número total de toques
// actualmente en la pantalla en
touchCountElem = document.getElementById (“touch-count”);
// Evita que se produzca la acción predeterminada del navegador cuando el usuario toca y
// lleva el dedo a la pantalla
if (e.type === ‘touchstart’) {
e.preventDefault ();
}
// Escribe el número de toques actuales en la página
touchCount.innerHTML = ‘Actualmente hay’ + allTouchesLength + ‘toques en la pantalla.’;
}
// Asigne el controlador de eventos para que se ejecute cuando un dedo toque (‘touchstart’) o se elimine (‘touchend’) de la pantalla
window.addEventListener (‘touchstart’, handleTouchEvent, falso);
window.addEventListener (‘touchend’, handleTouchEvent, falso);
Los dispositivos Apple iOS admiten un conjunto más avanzado de eventos JavaScript relacionados con gestos. Estos disparan cuando el usuario pellizca o gira dos o más dedos en la pantalla e informa qué tan lejos se movieron las figuras. Estos son específicos del dispositivo, por lo que si desea replicar estos eventos en diferentes dispositivos, puede encontrar útil Hammer.js, es una biblioteca de JavaScript especializada en gestos táctiles.
Otras lecturas
- Desarrollo para navegadores web multitáctiles: Boris Smus, HTML5 Rocks.
- Touch Events – Red de desarrolladores de Mozilla
- Manejo de eventos gestuales: guía de contenido web Apple Safari.
Los sensores de orientación y dirección.
El sensor de orientación establece en qué dirección se sostiene el dispositivo; También puede detectar cómo se coloca el dispositivo alrededor de tres ejes de rotación diferentes, suponiendo que el dispositivo tenga un giroscopio interno. Algunos dispositivos (como el iPhone de Apple) también incluyen un magnetómetro, que nos ayuda a establecer la dirección precisa en la que apunta el dispositivo. La rotación alrededor de los ejes X, Y, Z puede denominarse respectivamente rodar, inclinar y guiñar. en aviones y barcos o en términos de grados de rotación beta, gamma y alfa.
Figura 1: La imagen muestra: La imagen muestra: rotación alrededor de los ejes X, Y, Z de un teléfono móvil. Fuente: http://hillcrestlabs.com
Al conocer la orientación del dispositivo, podemos ajustar las funciones de nuestros sitios para que se adapten, como reposicionar un menú de navegación arriba o al lado del área de contenido principal, según corresponda. La API de orientación de pantalla W3C en JavaScript nos informa de la orientación actual del dispositivo, ya sea vertical u horizontal, así como si se mantiene boca abajo o no. Se dispara un evento que podemos conectar en el momento en que el dispositivo se reorienta. Si solo desea cambiar los estilos de página visibles cuando el dispositivo se reorienta, considere usar Consultas de medios CSS para lograr esto en lugar de JavaScript, ya que esto proporcionará la separación correcta de las preocupaciones. El siguiente ejemplo muestra cómo usar esta API para agregar una clase CSS a la etiqueta de su página para indicar si el dispositivo está en orientación vertical u horizontal y para permitir que se realicen los cambios de estilo adecuados.
