Cronometro Táctil DEMO para Firefox OS
En el ejemplo de hoy vamos a ver cómo realizar un pequeño cronometro táctil (para móviles Firefox OS), los elementos que utilizaremos son la librería JavaScript Zepto.js la cual es una versión comprimida de JQuery.js y a su vez es un tanto más ligera y fácil de emplear, otra librería que usaremos en touch.js, para detectar los toques (tap´s) o deslizamientos (swipe´s) dentro de un móvil, así también te mostraré como configurar la aplicación para que pueda ser cargada dentro del simulador de Firefox.
 |
| Cronometro en Firefox OS |
El comportamiento que tendrá nuestra aplicación es el siguiente, cuando presionemos sobre el reloj, este comenzará su curso, y deseamos registrar un tiempo dentro de nuestro cronometro basta con deslizar nuestro dedo sobre el reloj, hacia la derecha, con lo cual el tiempo quedara registrado en la parte inferior del cronometro, si deseamos detener el cronometro, solo tenemos que presionar sobre él, o deslizar nuestro dedo hacia la izquierda siempre que se esté ejecutando, ya que si el cronometro se encuentra detenido y deslizamos nuestro dedo hacia la izquierda, el cronometro se reiniciara por completo y limpiarán los registros.
El código HTML de la aplicación es sumamente sencillo de realizar, y es el siguiente:
 |
| Código HTML |
Como podemos apreciar agregamos las librerías antes mencionadas, así como el código JavaScript y de Estilo necesario para que el cronometro funcione correctamente.
Para darle el estilo que aparece dentro de la aplicación necesitamos el siguiente CSS:
 |
| Código CSS |
Como vemos igual el código es sumamente sencillo, continuemos con el código del comportamiento de nuestra aplicación el cual se encuentra alojado en el archivo jscrpt.js, el cual contiene el código siguiente:
 |
| Código JavaScript Parte 1 |
 |
| Código JavaScript Parte 2 |
Como se puede apreciar en las imágenes superiores cada segmento de código posee sus comentarios, los últimas tres líneas de código son los eventos de la librería touch.js encargado de supervisar los gestos que se realizan sobre la aplicación y llamar a la función que corresponda con dicho gesto.
Tap --> Sí se hace el gesto con el dedo de seleccionar el cronometro.
swipeRight --> Sí se desliza el dedo hacia la derecha encima del cronometro.
swipeLeft --> Sí se deliza el dedo hacia la izquierda sobre el cronometro.
Para poder ejecutar nuestra aplicación dentro del simulador de Firefox OS, el cual viene dentro del navegador Firefox, es necesario declarar un archivo conocido como “manifest.wabapp”, el cual funciona como descriptor de la aplicación, este descriptor se genera en formato JSON. El código que lleva dentro este archivo es el siguiente.
 |
| manifest.wabapp |
Veamos los elementos de este archivo:
version
Se refiere a la versión de lanzamiento de nuestra aplicación.
name
Es el nombre de nuestra aplicación.
description
Aquí podemos colocar una pequeña descripción de nuestra aplicación, la cual el usuario leerá al momento de instalar.
launch_path
Se refiere a la pagina de inicio de nuestra aplicación web.
Icons
Es un arreglo con los tamaños de los iconos de nuestra aplicación.
type
El tipo aplicación.
default_locale
Es el idioma por defecto de nuestra aplicación.
developer
Es un arreglo con lo datos del desarrollador de la aplicación.
Para poder ejecutar nuestra aplicación lo único que no resta es abrir el navegador Firefox e iniciar nuestro simulador, para poder instalar el cronometro dentro del simulador.
Seleccionamos la versión de Firefox OS que tengamos instala dentro de nuestro navegador, y después de unos segundos iniciará nuestro teléfono Firefox OS.
Para poder instalar nuestra aplicación es necesario ir al aparado “Agregar Aplicaciones Empaquetadas”, con lo cual se nos abrirá el navegador de archivos y solo tendremos que dirigirnos a la carpeta donde se encuentra la aplicación, una vez seleccionada, nos aparecerá una pantalla muy similar a la siguiente:
La cual en caso de existir un error, nos los indicará o en su defecto como se muestra en la imagen nos indicara que todo está correcto y que la aplicación ya se encuentra instalada, si no llegará aparecer puedes presionar en el botón actualizar para rectificar que la actualización se llevo de manera correcta.
 |
| Aplicación Verificada e Instalada. |
Ahora solo nos resta iniciar el cronometro, y verificar su funcionamiento.
|
| Ejecución de la Aplicación. |
Comentarios