viernes, abril 26, 2013

Hola Mundo en Firefox OS

viernes, abril 26, 2013

Firefox ha lanzado su propio sistema operativo para móviles llamado Firefox OS .
La creación de aplicaciones para este sistema no es del todo complicado, podemos crear aplicaciones usando HTML y Javascript, ahora veremos como hacer una aplicación sencilla para este sistema.

Que necesitamos:

-Un archivo .html donde pondremos nuestro "Hola Mundo" usando la semántica sencilla de HTML5

-Una imagen con dimensiones de 128x128 que nos servirá como logo de nuestra aplicación

-Necesitamos un archivo de manifesto con extension .webapp ejemplo: manifest.webapp, este 
documento tiene una estructura JSON donde aportamos algunas caracteristicas de nuestra aplicacion como el nombre, etc.

Necesitamos un archivo manifest.appcache que contendrá información sobre los directorios o archivos asociados a nuestra app como hojas CSS, archivos javascript , etc.

-Por ultimo necesitamos el emulador de Firefox OS que lo podemos descargar desde aqui este se instala como un complemento de nuestro navegador.

Archivos que necesitaremos

Ahora veamos lo que hay dentro de cada uno de ellos:

-index.html


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hola mundo | Firefox OS</title>
</head>
<body>
<p>Hola mundo | Firefox OS</p>
<p>Excelente !!</p>
</body>
</html>

-manifest.webapp


{
    "version": "1",
    "name": "Hola Mundo",
    "launch_path": "/index.html",
    "description": "Firefox OS Hola Mundo",
    "icons": {
        "128": "/logo.png"
    },
    "developer": {
        "name": "Saul Guardado",
        "url": "http://www.coding.com.sv"
    },
    "installs_allowed_from": ["*"],
    "default_locale": "es"
}

-manifest.appcache



CACHE MANIFEST
# Version 0.6799999

index.html
css/base.css
js/base.js

NETWORK:
*

Una vez estos archivos estén listos nos dirigimos al emulador de Firefox OS


Damos clic donde dice "Add Directory" y buscamos la carpeta donde tenemos nuestros archivos y seleccionamos el archivo manifest.webapp, si todo sale bien se ejecutará el emulador y podemos ver nuestro "Hola Mundo" funcionando :D


Y si buscamos en las aplicaciones instaladas en nuestro emulador podemos observar el icono con la imagen que elegimos en nuestro archivo manifest.webapp


Espero les haya servido este pequeño aporte


1 comentarios: