Viendo un curso me encontré este ejemplo con un framework llamado zepto que en pocas palabras lo que hace es facilitar el acceso a los componentes DOM de una manera mas sencilla usando JavaScript (por lo menos en el ejemplo es lo que vamos a hacer).
Para bajar la librería lo hacemos directamente del siguiente sitio: http://zeptojs.com/
El framework viene muy completo aunque no tuve mucha oportunidad de probarlo un poco mas.
En esta tarea se hizo un pequeño cronometro muy sencillo pero que puede ser muy útil y sencilla de hacer.
El cronometro esta creado en base a una pagina HTML 5 teniendo un aspecto muy sencillo pero funcional, solo lo componen una carpeta con iconos, la librería de zepto, la pagina html, un htaccess y un webapp para su publicación.
Primero lo que vamos a hacer es el archivo index.html que prácticamente es el cronometro que se va a necesitar.
Para esto esta compuesto por el siguiente código:
<!DOCTYPE html>
<html>
<head>
<title> Cronómetro </title>
<meta charset="UTF-8">
<script type="text/javascript" src="zepto.min.js"> </script>
<script type="text/javascript">
$(function(){
localStorage.c = (localStorage.c || "0.0");
var t, cl=$("#crono");
function incr() { localStorage.c = +localStorage.c+0.01;}
function mostrar(){cl.html((+localStorage.c).toFixed(2));}
function arrancar(){t=setInterval(function(){incr();mostrar()},10);}
function parar(){clearInterval(t); t=undefined;}
function cambiar(){if(!t) arrancar(); else parar();}
$("#cambiar").on('click',cambiar);
$("#inicializar").on('click', function(){localStorage.c="0.0"; mostrar();});
mostrar();
});
</script>
</head>
<body>
<center>
<h2>Cronómetro</h2>
<h3><span id="crono">0.0</span> Segundos </h3>
<button type="button" id="cambiar"> Arrancar/Parar</button>
<button type="button" id="inicializar">Inicializar</button>
</center>
</body>
</html>
Para el código anterior hay que tomar en cuenta los script que se tienen al principio que nos permiten arrancar, incrementar, mostrar, inicializar nuestro contador. También tomemos en cuenta la variable localstorage.c donde c es la variable y el objeto localstorage nos sirve para que lo almacene de forma local permitiendo que se almacene y pueda mantener el valor.
Lo segundo que vamos a necesitar es manejar diferentes tamaños de los iconos por lo que los ponemos en una carpeta que pueda ser alcanzada por la pagina no tiene uso para la aplicación pero tiene uso para cuando se haga la publicación de la aplicación.
Una vez terminado creamos un archivo manifest.webapp que contendrá lo siguiente:
{
"name":"Cobycronometro",
"description":"Cronometro con almacenamiento local",
"launch_path":"/mydir/",
"icons":{
"128":"/mydir/img/icons/time128.png",
"32":"/mydir/img/icons/time32.png",
"64":"/mydir/img/icons/time64.png",
"48":"/mydir/img/icons/time48.png"
},
"type":"web",
"developer":{
"name":"Luis Cobian",
"url":"http://luiscobian.blogspot.mx/"
},
"default_locale":"es",
"version":"1.0"
}
Ahí tomen en cuenta que los iconos al hacer un directorio no hay problema pero cuando subimos a un servidor como en mi caso se maneja el direccionamiento desde el nombre del dominio, por ejemplo si dice /img/icons/image.png y la aplicacion esta guardada en un dominio.com en la carpeta aplicacion las referencias al los iconos debe de ser "/aplicacion/img/icons/image.png"
Para continuar cree un archivo .htaccess con la linea siguiente para que pueda validar correctamente la tienda de firefox
AddType application/x-web-app-manifest+json .webapp
Terminando solo abrimos una cuenta en: https://marketplace.firefox.com/
Ahí tendrás que dar la ruta completa donde esta el manifest, ahi tendras que tener ya tener todos tus archivos en un servidor web para que puedan ser encontrados, una vez terminando te pedirá datos de tu aplicación, datos de los servicios de pagos (en este caso como es gratuita no tuve que pagar), políticas y por ultimo te dará la oportunidad de administrar los datos mientras te validan la aplicación que en este momento el cronometro esta validándose, en cuando sepa el resultado lo hago saber.
