Entradas
Si deseas continuar leyendo esta guía, puedes descargar la aplicación de la introducción rápida.
Estructura de las aplicaciones
Aplicaciones empaquetadas en comparación a aplicaciones alojadas
Existen dos tipos de aplicaciones Firefox OS:
empaquetadas y alojadas. Las aplicaciones empaquetadas son principalmente un archivo zip que contiene todos los recursos de un aplicación: HTML, CSS, JavaScript, imágenes, archivo manifest, etc. Las aplicaciones alojadas se ejecutan desde un servidor de un determinado dominio, igual que una página web. Los dos tipos de aplicación necesitan un archivo manifest válido. Cuando quieras incluir tu aplicación en Firefox Marketplace, deberás cargar la aplicación como si fuera un archivo zip o proporcionar la dirección URL en la que se aloja la aplicación.
A efectos de la presente guía, vas a crear una aplicación alojada que estará activa en la dirección de tu
localhost. Una vez que esté lista y se pueda mostrar en Firefox Marketplace, puedes decidir si la incluyes como aplicación empaquetada o la publicas como aplicación alojada.Archivos manifest de las aplicaciones
En todas las aplicaciones para Firefox es necesario tener un archivo manifest.webapp en el directorio raíz de la aplicación. El archivo
manifest.webapp contiene información importante sobre la aplicación, como por ejemplo su versión, nombre, descripción, ubicación del icono, cadenas de la versión en otros idiomas y dominios desde los que se puede instalar la aplicación, además de otros muchos más datos (sólo el nombre y la descripción son obligatorios). El archivo manifest incluido en la plantilla de aplicación es muy sencillo y contiene la siguiente información:{
"version": "0.1",
"name": "Your App",
"description": "Your new awesome Open Web App",
"launch_path": "/index.html",
"icons": {
"16": "/img/icons/mortar-16.png",
"48": "/img/icons/mortar-48.png",
"128": "/img/icons/mortar-128.png"
},
"developer": {
"name": "Your Name",
"url": "http://yourawesomeapp.com"
},
"installs_allowed_from": ["*"],
"locales": {
"es": {
"description": "Su nueva aplicación impresionante Open Web",
"developer": {
"url": "http://yourawesomeapp.com"
}
},
"it": {
"description": "Il vostro nuovo fantastico Open Web App",
"developer": {
"url": "http://yourawesomeapp.com"
}
}
},
"default_locale": "en",
"permissions": {
"systemXHR": {}
}
}
A medida que el proyecto va avanzando y llegando a su fin, se va añadiendo más información, que es el caso de la mayoría de las aplicaciones para Firefox OS. Para empezar puedes utilizar un archivo manifest básico.
Diseño y apariencia de las aplicaciones
El diseño adaptativo se ha convertido en una pieza importante puesto que cada vez más resoluciones de pantalla son estándar en distintos dispositivos. Incluso si tu aplicación sólo está pensada para Firefox OS, es importante tener presente que Firefox OS se puede instalar en distintos dispositivos con diferentes resoluciones. Una consulta de medios CSS proporciona el medio para adaptar el diseño al dispositivo:
/* The following are examples of different CSS media queries */
/* Basic desktop/screen width sniff */
@media only screen and (min-width : 1224px) {
/* styles */
}
/* Traditional iPhone width */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* styles */
}
/* Device settings at different orientations */
@media screen and (orientation:portrait) {
/* styles */
}
@media screen and (orientation:landscape) {
/* styles */
}
Existen multitud de marcos JavaScript y CSS disponibles que te pueden ayudar en el diseño adaptativo y desarrollo de aplicaciones móviles (Bootstrap, etc.): elige uno o varios marcos que se adapten perfectamente a tu aplicación y estilo de desarrollo.
Una utilidad muy buena es mortar de Mozilla. Mortar no te proporciona ayuda con el diseño adaptativo, pero sí te ofrece para las plantillas de aplicaciones una serie de utilidades que facilitan el desarrollo para dispositivos móviles Firefox OS, como zepto.js (una alternativa más ligera a jQuery) y una utilidad que instala tu aplicación en Firefox OS Simulator. Esta guía rápida te proporciona la plantilla de diseño más básica de mortar:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<!-- Use this installation button to install locally without going
through the marketpace (see app.js) -->
<button id="install-btn">Install</button>
<!-- Write your application here -->
<!-- Using require.js, a module system for javascript, include the
js files. This loads "init.js", which in turn can load other
files, all handled by require.js:
http://requirejs.org/docs/api.html#jsfiles -->
<script type="text/javascript" data-main="js/init.js" src="js/lib/require.js"></script>
</body>
</html>
Modifica la estructura establecida por mortar todo lo que quieras: el snippet de arriba te ayudará a comenzar. Ten en cuenta que todo el código JavaScript debe incluirse en archivos
.js individuales: no se permite insertar código en línea (atributos) ni en etiquetas script.Web API
Se están creando y mejorando API de JavaScript a la misma velocidad que los dispositivos. Este esfuerzo que Mozilla está realizando con la WebAPI supone incorporar a las API de JavaScript docenas de características estándares para dispositivos móviles. Hay una lista que detalla el estado y la compatibilidad con los distintos dispositivos accesible desde la página de WebAPI. Por supuesto, la detección de características de JavaScript continúa siendo la mejor práctica:
// If this device supports the vibrate API...
if('vibrate' in navigator) {
// ... vibrate for a second
navigator.vibrate(1000);
}
En esta plantilla de aplicaciones tan básica vamos a modificar el estilo de presentación de un
DIVbasado en los cambios del estado de la batería del dispositivo:// Create the battery indicator listeners
(function() {
var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery,
indicator, indicatorPercentage;
if(battery) {
indicator = document.getElementById('indicator'),
indicatorPercentage = document.getElementById('indicator-percentage');
// Set listeners for changes
battery.addEventListener('chargingchange', updateBattery);
battery.addEventListener('levelchange', updateBattery);
// Update immediately
updateBattery();
}
function updateBattery() {
// Update percentage width and text
var level = (battery.level * 100) + '%';
indicatorPercentage.style.width = level;
indicatorPercentage.innerHTML = 'Battery: ' + level;
// Update charging status
indicator.className = battery.charging ? 'charging' : '';
}
})();
En la muestra de código que aparece arriba, una vez que confirmes que la API de la batería es compatible, puedes agregar escuchas de eventos para que
chargingchange y levelchange actualicen la visualización del elemento.
¡Vista con frecuencia la página WebAPI para mantenerte al día sobre los estados de las API de dispositivos!
WebRT API (API basadas en permisos)
Hay disponibles una serie de WebAPI que solicitan permisos para que se active esa determinada característica. Las aplicaciones registrarán las solicitudes de permisos en el archivo
manifest.webapp:// New key in the manifest: "permissions"
// Request access to any number of APIs
// Here we request permissions to the systemXHR API
"permissions": {
"systemXHR": {}
}
Una vez que hayas instalado tu aplicación en Firefox OS Simulator, abre los
Ajustes, seleccionaPermisos de aplicaciones, selecciona tu aplicación y activa los permisos que quieras. Es importante tener en cuenta que no todas las Web API se hallan implementadas en Firefox OS Simulator.Herramientas y pruebas
Llevar a cabo pruebas es extraordinariamente importante cuando se trata de la compatibilidad de dispositivos móviles. Existen muchas opciones para realizar pruebas de las aplicaciones para Firefox OS:
Simulador de Firefox OS
La forma más fácil de tener tu aplicación lista y funcionando es instalar y utilizar Firefox OS Simulator. Una vez finalizada la instalación del simulador, se puede acceder a él a través de Herramientas -> Desarrollador web -> Menú Firefox OS Simulator. El simulador se inicia con una consola JavaScript que te permite depurar tu aplicación desde el mismo simulador.
Pruebas unitarias
Las pruebas unitarias son extremadamente valiosas cuando se realizan sobre diferentes dispositivos y versiones. QUnit de jQuery es una utilidad de pruebas popular para el lado del cliente, pero puedes usar cualquier combinación de herramientas de prueba que desees.
Instalar Firefox OS en un dispositivo
Como Firefox OS es una plataforma de código abierto, el código y las herramientas están disponibles para desarrollar e instalar Firefox OS en tu propio dispositivo. Las instrucciones sobre desarrollo e instalación se encuentran en MDN. Los dispositivos prototipo de Firefox OS estarán disponibles próximamente enGeeksphone.
Envío y distribución de aplicaciones
Una vez que completes la aplicación, puedes enviarla a Firefox Marketplace. Se validará el archivo manifest de tu aplicación y podrás elegir con qué dispositivos será compatible la aplicación (Firefox OS, Firefox de escritorio, Firefox para Android). Una vez validada, puedes incluir otros detalles sobre ella (capturas de pantalla, descripciones, precio, etc.) y enviarla de manera oficial para que aparezca en las listas de Marketplace. Una vez aprobada, tu aplicación está disponible para que el mundo entero la compre y la instale.
Fuente: Mozilla Hub
Articulo bajo licéncia creative Commons v3.0
0 comentarios:
Publicar un comentario