Convirtiendo tu pagina web en una webapp para Firefox OS

Firefox OS es la gran novedad entre los teléfonos móviles y si tienes una pagina web quizás sea una buena forma de promocionarla. Así que ahora vamos a ver como convertir nuestra pagina en una webapp apta para el MarketPlace de Firefox.

Cabe aclarar que la aplicación que hagamos acá sera una “Hosted app” y no una app empaquetada. También hay que dejar en claro que la aplicación estará disponible no solo para Firefox OS, si no también para Android y para el navegador de escritorio.

El proceso de convertir nuestra web en una webapp es muy simple, solo hace falta tener un icono un archivo manifest.webapp en nuestro servidor.

Para crear el archivo manifest.webapp vamos a usar como base este documento:

{

"version": "0.1",

"name": "Nombre de la app",

"description": "Descripcion de la app",

"launch_path": "/pagina-de-inicio-de-la-app.html",

"fullscreen": "true",

"icons": {

"16": "/webapp/webapp-16.png",

"48": "/webapp/webapp-48.png",

"128": "/webapp/webapp-128.png"

},

"developer": {

"name": "Tu nombre",

"url": "https://poweredbylinux.es"

},

"installs_allowed_from": ["*"],

"locales": {

"es": {

"description": "Descripción en español de la aplicación",

"developer": {

"url": "https://es.pagina-en-español-de-tu-app.com"

}

}

},

"default_locale": "es"

}

Solo hace falta copiar todo en un documento de texto plano, editarlo para que se adapte a los datos de tu app, guardarlo con el nombre de "manifest.webapp" y luego subirlo a nuestro servidor.

Los iconos son muy importantes, necesitas por lo menos un icono del tamaño de 128x128 para subir tu aplicación al marketplace. Asegurate de incluir las direcciones de tus iconos RELATIVAS al escritorio de donde se encuentra el archivo manifest. Al lado de las direcciones van el tamaño de los iconos (ej:“48” para 48px x 48px). También es importante que el icono NO tenga sombra, porque en el teléfono se renderiza una sombra debajo de toso los iconos, y se podría ver algo extraño con dos sombras.

Un ejemplo de icono para Firefox OS:

Ahora lo único que falta es editar el archivo “.htaccess”(si no lo tienen lo crean) de nuestro servidor en el directorio donde se encuentra el archivo “manifest.webapp” y agregar la siguiente linea:

AddType application/x-web-app-manifest+json .webapp

Bueno, ahora solo queda validar y probar que ande todo bien en esta pagina, si tenemos algún error nos advertirá del mismo.

Si todo salio bien podemos simularla el correcto funcionamiento de la webapp en el simulador disponible para Firefox.

Ahora es muy importante saber que nuestra pagina tiene que tener un modo “mobile”, de otra forma se nos rechazara la webapp cuando la enviemos al marketplace para su verificación. El modo “mobile” no es mas que un diseño de pagina adaptado para bajas resoluciones(480x320) en el cual la navegación a través de un teléfono sea fluida y se vea bien sin necesidad de hacer zoom. Hay varios forma de agregar este modo a nuestra pagina, la mas conveniente es utilizar los condicionales disponibles para CSS que detectan la resolución del dispositivo, los DPI, el modo de lectura(apaisado o porta-retrato), entre otras cosas. Tambien tenemos la opcion de utilizar PHP(con la librería mobile_detect) para detectar el dispositivo con el que se entra a la pagina y si es necesario redireccionar a una pagina adaptada para dispositivos mobiles.

Si tenemos todo listo ahora podemos subir nuestra Webapp para que sea evaluada por el equipo de Marketplace y si todo sale todo bien podremos publicarla y llegar a millones de usuarios en el mundo.

Espero que les sirva y esperamos que dentro de poco estemos con otro tutorial para crear tu webapp pero esta vez para Ubuntu Phone y Tablet Gracias por pasar.