miércoles, 7 de agosto de 2013

Hola mundo en Firefox OS

Mozilla va con todo y quiere ser una alternativa real en el mundo de los dispositivos y aplicaciones móviles. Su "nuevo" bebé, Firefox OS,  tiene grandes expectativas y se perfila para ser una de las sorpresas de este año.

Hola mundo


Empecemos a desarrollar para este nuevo SO; obviamente el primer paso será el clásico "Hola mundo".

Herramientas

Firefox promete que cualquier desarrollador de front-end podrá crear aplicaciones en Firefox OS (FFOS) ya que está basado en HTML5, por lo que las herramientas no son nada del otro mundo.

Necesitaremos un editor de texto. Sublime Text es una buena opción.
También se requiere el simulador de FFOS (add-on de Firefox).

Pasos.

+ Crear la estructura de la aplicación:

La estructura de una aplicación básica para FFOS es muy similar a la de una aplicación web (una página). No es obligatorio tener nuestros recursos en carpetas pero se recomienda; así pues, nuestros scripts en JavaScript irán en un directorio "js", las imágenes en uno llamado "images" y así sucesivamente.

Para nuestro ejemplo, solo necesitaremos tres archivos y crearemos una carpeta llamada "app" (o con cualquier otro nombre):
  • Un archivo index.html
  • El archivo manifest.webapp
  • El archivo manifest.appcache
  • Una imagen icon.png 
+ index.html

Aquí diseñamos la aplicación, como cualquier página web, este es el comienzo.

<!DOCTYPE html>
<html>
<head>
<title>Hola mundo en Firefox OS</title>
</head>
<body>
<h1>Mi primera app en Firefox OS</h1>
<p>Hola mundo</p>
</body>
</html>
 
+ manifest.webapp

 Contiene la información necesaria de nuestra aplicación. Este archivo es muy importante dentro de cualquier aplicación de FFOS, es requisito indispensable contar con él.

Como verás, es un simpre JSON:

{
  "version": 1.0,
  "name": "Hola mundo en Firefox OS",
  "description": "Esta es mi primer app para Firefox OS",
  "launch_path": "/index.html",
  "icons": {
    "128": "icon.png"
  },
  "developer": {
    "name": "Hiram E. Perez",
    "url": "http://hiramperez.net"
  },
   "installs_allowed_from": ["*"],
   "default_locale": "es"
}



Los campos  permitidos y su descripción los puedes ver en la documentación.


+ manifest.appcache

En este archivo se indica qué recursos serán "cacheados", es decir, que estarán disponibles en todo momento.

CACHE MANIFEST
# v0.1
/index.html
/icon.png


+ icon.png

Es el ícono de nuestra aplicación. Crearemos una imagen con extensión png de 128 x 128 pixeles. Si no quieres complicarte, puedes descargar una imagen con estas dimensiones.

Así se ven los archivos de la aplicación.



Simulador

Una vez que hayamos creado nuestros documentos abrimos nuestro simulador de Firefox OS.


En la pestaña del add-on, damos clic en Add directory y seleccionamos el archivo manifest.webapp. Se abrirá el emulador y veremos nuestra app.






Ahora solo faltará agregar los estilos (CSS) y las funcionalidades (JS).

Felices líneas

No hay comentarios: