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
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
