HTML5 y JavaScript: cómo crear aplicaciones web móviles
Las aplicaciones móviles no siempre tienen que venir como aplicaciones nativas. También podemos usar HTML5 y las API de JavaScript que introdujo, para desarrollar aplicaciones web móviles que son (casi) iguales a las aplicaciones programadas de forma nativa. Además de eso, las aplicaciones nativas también tienen desventajas con las que no tendrás que lidiar cuando uses HTML5.
Sin restricciones de tienda, sin plataformas diferentes
Las aplicaciones se han convertido en una parte indispensable de los teléfonos inteligentes y tabletas. Sin embargo, si desea ofrecer aplicaciones móviles usted mismo, aprenderá que conlleva un par de peligros y esfuerzos que deben realizarse. Las llamadas aplicaciones híbridas que se ejecutan en múltiples plataformas, sin embargo, solo se parecen a algún tipo de de contenedor que contiene aplicaciones web desarrolladas en HTML y JavaScript.
Play Store de Google
Otra desventaja de las aplicaciones nativas es que solo se pueden instalar a través de la tienda de aplicaciones correspondiente. Esto provoca un pago de registro único en Google Play Store y pagos regulares cuando se usa Apple. Es posible instalar aplicaciones sin una tienda en dispositivos Android. Sin embargo, debe activar la instalación de la aplicación de fuentes «desconocidas» en la configuración para hacerlo.
No tiene ninguno de estos problemas con las aplicaciones web. Se crean íntegramente en HTML5 y JavaScript y, por lo tanto, son independientes de los sistemas operativos y las tiendas.
Orientación y localización de dispositivos
Muchas aplicaciones utilizan las funciones especiales del dispositivo con las que están equipados los teléfonos inteligentes y tabletas. Esto incluye el giroscopio, que detecta la rotación de un dispositivo alrededor de su propio eje, lo que le permite reconocer si un dispositivo se sostiene en modo vertical u horizontal. Esto también es posible usando JavaScript.
window.addEventListener("deviceorientation", function() {
console.log(e.alpha);
console.log(e.beta);
console.log(e.gamma);
}, true);En el ejemplo, tres ángulos que muestran la rotación actual del dispositivo se distribuyen a través del evento «orientación del dispositivo».
El rastreo por GPS también se usa con mucha frecuencia. Aparte de las aplicaciones de navegación, las aplicaciones de redes sociales son las que más acceden a la ubicación del usuario. Una vez más, esto también es posible con JavaScript.
navigator.geolocation.getCurrentPosition(function(position) {
console.log(position.coords.latitude, position.coords.longitude);
});Como puede ver arriba, las coordenadas de longitud y latitud se distribuyen mediante “geolocalización”. Esto permite determinar la posición GPS respectiva.
Guardar sin conexión a través de la caché de la aplicación
Especialmente en dispositivos móviles, las aplicaciones nativas tienen la ventaja de que solo necesitan descargarse una vez para estar disponibles incluso sin una conexión a Internet. Sin embargo, esa no es razón para sentirse obligado a crear una aplicación nativa. Después de todo, la caché de la aplicación HTML5 también le permite guardar permanentemente los datos de una aplicación web.
Para eso, se hace referencia a un llamado archivo de manifiesto, que define qué datos deben almacenarse en caché después de la primera vez que se carga la página en un dispositivo.
<html manifest="example.appcache">
Luego, el archivo de manifiesto contiene todos los datos del sitio web que desea que estén disponibles sin conexión.
CACHE MANIFEST index.html stylesheet.css logo.png
En el ejemplo anterior, se descargan tres archivos y, a partir de ese momento, se cargan desde la caché de la aplicación en lugar de desde Internet.
Controles de gestos
Si bien el mouse domina los dispositivos de escritorio, su trabajo se realiza tocando con los dedos en teléfonos inteligentes y tabletas. Aparte de los simples toques que reemplazan el clic del mouse hasta cierto punto, los dispositivos móviles también permiten los llamados gestos. El gesto de deslizar que se usa para mostrar u ocultar menús, o pasar por una galería de imágenes, es probablemente el más popular.
JavaScript también le permite crear esta funcionalidad. Para hacerlo, hay varios eventos «táctiles» diferentes que funcionan de manera similar a los eventos del «mouse». Por ejemplo, hay «touchstart», «touchmove» y «tocado», que reflejan la posición de un dedo en la pantalla. Aquí, varios dedos colocados en la pantalla al mismo tiempo, se pueden registrar a través de eventos «táctiles».
document.getElementsByTagName("body")[0].addEventListener("touchmove", function(e) { console.log(e.changedTouches[0].pageX);console.log(e.changedTouches[0].pageY);}, false);
A través de «changesTouches», todos los toques en la pantalla se guardan como matrices. En nuestro ejemplo, se muestran las coordenadas del primer toque.
Acceso a la cámara
Acceder a las cámaras a través de “getUserMedia ()” es una opción bastante nueva. Para eso, lo primero que hay que hacer es colocar un elemento «
<video autoplay="autoplay"></video>
Posteriormente, la imagen de la cámara se colocará allí a través de «getUserMedia ()»
navigator.getUserMedia ({
audio: true,
video: true
}, function (stream) {
document.getElementsByTagName("video")[0].src = window.URL.createObjectURL(stream);
}, function() {
console.log("Error");
});“GetUserMedia ()” requiere tres parámetros. Primero, defina si se debe transferir el contenido de video y audio. Luego, se necesita una función que procese el flujo y lo entregue al elemento “
Por el momento, «getUserMedia ()» todavía debe etiquetarse con un prefijo de proveedor, como «webkitGetUserMedia ()».
Colocación de aplicaciones web en la pantalla de inicio con el manifiesto de aplicación web
En el Chrome móvil, existe la función «agregar a la pantalla de inicio». Aquí, un marcador no se coloca en el navegador, sino en la pantalla de inicio. Un manifiesto le permite definir un nombre diferente del título de la página, así como un icono personalizado.
Chrome y la función «Agregar a la pantalla de inicio»
Para hacerlo, primero se debe definir el archivo de manifiesto en el encabezado HTML.
<link rel="manifest" href="https://www.noupe.com/design/manifest.json">
Posteriormente, la forma en que debe mostrarse este marcador en la pantalla de inicio se determina en este archivo en formato JSON.
{
"name": "Demo",
"icons": [{
"src": "icon_36x36.png",
"sizes": "36x36",
"type": "image/png",
"density": 1
}]
}En el ejemplo anterior, el nombre del marcador se define mediante «nombre», y un grupo de archivos que hacen referencia a iconos en diferentes resoluciones y densidades de píxeles se definen mediante «iconos».
Además, también puede determinar el comportamiento de la aplicación cuando se abre desde la pantalla de inicio.
"display": "standalone", "orientation": "portrait"
«Display» convierte un sitio web en una aplicación independiente. Aquí, la barra de direcciones y el menú del navegador están ocultos, y el sitio web se muestra en modo de pantalla completa. «Orientación» se utiliza para elegir entre el modo retrato y paisaje.
Conclusión
Gracias al manifiesto de la aplicación web, las aplicaciones móviles y las aplicaciones nativas apenas se diferencian entre sí una vez que se depositan en la pantalla de inicio. Con la ayuda de muchas API de JavaScript, también es posible utilizar casi todas las funciones de los teléfonos inteligentes y tabletas que las aplicaciones nativas pueden usar.
(dpe)
#HTML5 #JavaScript #cómo #crear #aplicaciones #web #móviles
