Firefox OS (Parte 2): Desarrollo de una App

Los Temas son algo común en la mayoría de los smartphones. Un tema permite definir un estilo específico con el cual se mostrará todo nuestro sistema operativo. Generalmente se incluyen temas de varios colores, o simplemente con tonalidad clara u oscura.

FFOS apunta a esta última opción, e incluye dos temas específicos dentro de su interfaz. Si desarrollamos Apps FFOS y queremos que nuestra App tenga un tema puntual, simplemente debemos escribir la siguiente clase dentro del HTML de la aplicación:

<class=”skin-organic”> //lo que nos devolverá un tema claro
<class=”skin-dark”> //lo que nos devolverá el tema oscuro

Cuando desarrollemos el ejemplo de APP para FFOS, comprenderemos mejor el manejo de TAGS de creación de ventanas, interfaces y temas, y así veremos que no es nada complicado el desarrollo de una UI con estas herramientas.

UI Alternativo

Dentro de los UI alternativos que podemos optar para construir aplicaciones Firefox OS, encontraremos a JqueryMobile y Sencha Touch. Ambos componentes disponen de versiones estables que funcionan muy bien, y tienen equivalencias y testeos realizados para casi todas las plataformas existentes.

Hands on!

A continuación construiremos un pequeño ejemplo que nos permita integrar en Firefox OS una aplicación nativa. La Fundación Mozilla no desarrolló ningún SDK propio para el desarrollo de aplicaciones FFOS, con lo cual podremos utilizar desde un simple Bloc de notas, hasta las herramientas más avanzadas en edición de código HTML + CSS + JavaScript.

Podemos optar por Notepad++, Ultraedit, Dreamweaver o Visual Web Developer Studio 2010 o 2012 (estas últimas versiones, parte de Visual Studio, son las que mejor soportan el estándar web necesario).

Estructura de nuestra App

Para definir la estructura de nuestro proyecto, creamos una carpeta y dentro de esta incorporamos todo el contenido necesario. Los archivos CSS y JavaScript conviene separarlos en subcarpetas, para una mejor organización. También debemos definir la carpeta de imágenes, videos, sonidos y todo aquel recurso que forme parte de nuestra App.

Jquerymobile

Jquerymobile es una librería que toma las bases de Jquery, y la integra haciendo hincapié en las principales características que definen el comportamiento de un móvil. La mayoría de estos están basados en una interfaz táctil, con lo cual, si navegamos alguna vez por una web que no tiene soporte para este tipo de interfaces habremos notado lo difícil que es hacer tap en un botón o un link y que éste responda de manera rápida.

Jquerymobile llega para solucionar estos temas, y a su vez para definir y respetar el estándar delimitado por cada uno de los navegadores web para dispositivos móviles (IE, Firefox, Chrome, Android Browser, Safari para iOS, etc).

Esta herramienta se define como un conjunto de librerías, que engloban estilos CSS con funciones JavaScript y, mediante la combinación de estas, podremos crear interfaces gráficas móviles en un tiempo récord. También dispone de un conjunto de íconos predefinidos, para poder establecerlos dentro de un botón o Toolbar.

No ahondaremos en las características que refieren a la librería en sí, porque esta es muy amplia y completa. Sólo ahondaremos en algunos Tags básicos que permitirán crear nuestra App.
Jquerymobile se puede utilizar de dos formas diferentes:

1) Descargando el conjunto de componentes de esta librería desde este link e integrándolo en una subcarpeta local de nuestro proyecto.
2) Referenciar la librería a repositorios externos que proveen gigantes como Google o Microsoft. Esto permite un ahorro de espacio en lo que ocupará nuestra aplicación instalada, pero hará dependiente la misma de disponer de una conexión a Internet, al menos la primera vez que utilizamos la App.

Los CDN que ofician como repositorios se encuentran también en la página de descarga, bajo el título de CDN-Hosted CSS.

Para agilizar este proyecto, incluiremos la referencia a los archivos alojados en los CDN. Si luego quieren tener descargados los archivos de Jquerymobile, pueden hacerlo desde este link. Al momento de escribir este artículo, la última versión estable es la 1.3.2.

Creada la estructura de nuestro proyecto, debemos a continuación crear un archivo .HTML al cual llamaremos index.html. Su estructura será la siguiente:

<!doctype html>
<html>
<head>
<meta charset=»utf-8″>
<title>Dattamagazine Firefox OS</title>
</head>
<body>

</body>
</html>

Luego debemos referenciar los archivos de Jquerymobile entre los Tags <header> y </header> de la página. Para ello incluimos el siguiente código:

…
<link rel=»stylesheet» href=»http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css» />
<script src=»http://code.jquery.com/jquery-1.9.1.min.js»></script>
<script src=»http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js»></script>
…

Al igual que Firefox OS, Jquerymobile dispone sus propios temas. Los mismos se identifican por una letra (A, B, C, D, E). También podemos utilizar una herramienta personalizada, y construir nuestro propio tema con colores customizados, o combinar los colores de tema por defecto que nos ofrece JQM, referenciando en cada tag el tema del componente a usar.

Page

El Tag <Page> permite definir una nueva página del tipo Jquerymobile dentro de nuestro archivo HTML. Dentro de los diferentes atributos que soporta Page, podemos incluir, por ejemplo, el tema de Jquerymobile que deseamos utilizar.

El resto de los Tags también pueden tener referenciado su propio tema, distinto al elegido para Page. Si no hacemos esto, la aplicación que crearemos contendrá el tema original definido en el Tag Page. La referencia a Page debemos realizarla dentro del <body> y </body> de la página. El código para crearlo es el siguiente:

<body>
<div data-role=»page» data-id=»index» data-theme=»c»>

</div>
</body>

Header, Content, Footer

Estructuramos nuestra App con una barra de encabezado, el cuerpo en sí de la App, y una barra inferior, que oficiará como Footer. Para ello utilizaremos las etiquetas <header>, <Content>, <Footer> dentro del tag Page, de la siguiente manera:

<div data-role=»page» data-id=»Index» data-theme=»c»>
<div data-role=»header»>
<h4>Firefox OS App</h4>
</div>
<div data-role=»content»>

</div>
<div data-role=»footer» data-position=»fixed»>
<h6>Copyright 2013 Dattamagazine</h6>
</div>
</div>

Navigation Bar

JQM también permite crear barras de herramientas a través del tag <navbar>. Podemos crear una <navbar> en el encabezado o pie de página, siempre que la incluyamos dentro del tag <header> o <footer> respectivamente. Su código es el siguiente:

<div data-role=»navbar»>

</div>

Las barras de herramientas pueden contener botones simples sólo texto, texto e imágenes, o imágenes solamente. Los mismos se pueden agrupar hasta cinco botones juntos en una misma línea. Para definirlos utilizaremos el tag <li> y <ul>, como si fueran viñetas.

Ahora incluiremos dos botones simples en la Toolbar de nuestra aplicación, para ello debemos realizarlo dentro del tag <navbar> y </navbar>, donde escribiremos lo siguiente:

<ul>
<li><a href=»index.html» data-icon=»home»>Inicio</a></li>
<li><a href=»about.html» data-icon=»alert»>Acerca de</a></li>
</ul>

En nuestros botones definimos un ícono para cada uno, como así también un texto. El texto por defecto se alinea en el extremo inferior del botón de la barra.

Nueva página

Para crear una nueva página o pantalla podemos hacerlo de dos maneras diferentes. Copiando el archivo original HTML con otro nombre, y cambiando el contenido que este mostrará, luego referenciando un link del archivo principal a este nuevo archivo.

Otra opción es dentro de un mismo archivo HTML, definir diferentes Tag Page. JQueryMobile interpretará esto y mostrará solamente el primero de la lista que definimos como pantalla principal. Los restantes sólo serán visualizados desde un link interno que debemos incluir en el primer Tag <page> a través de un vínculo, botón, Toolbar o componente equivalente.

Lo malo de cuando definimos un tag <Page> es que, aunque estemos dentro de un único archivo .HTML, debemos crear toda la estructura de la página nuevamente: <header>, <content>, <footer>, <navbar>, etcétera. Guardemos la página index.html con el nombre about.html en la misma ubicación raíz de la carpeta del proyecto.

Agregando texto e imagen

Ahora que tenemos definidas dos páginas para nuestra App, sólo nos resta agregarle contenido a cada una y establecer la navegación entre una y otra. Incluyamos el código detallado a continuación:

<!– Código para el tag <content> de index.html –>
<p>Desarrollando una App para Firefox OS.</p>
<p align=»center»>
<img src=»image/firefox-phone.png» width=»80%» alt=»Firefox OS Image» longdesc=»Firefox OS Image»></p>
<!– Reemplacemos la imagen mencionada aquí por una de nuestro gusto –>

<!– Código para el tag <content> de about.html –>
<h4>Acerca de</h4>
<p>Esta aplicación es un desarrollo pensado para Dattamagazine.com, que muestra cómo crear una Aplicación para Firefox OS.</p>
<p>Copyright 2013 – Fernando Omar Luna para Dattamagazine.com – todos los derechos reservados.</p>

Testear nuestra App

Si queremos ver el estilo que nuestra App está tomando, podemos ejecutar la página principal en nuestro navegador web preferido, o en todos los que tengamos, para ver si existen diferencias entre uno y otro al momento de ejecutar la UI diseñada en Jquerymobile.

Otra opción es utilizar Ripple, comentado anteriormente en esta nota, para así probar cómo se emula nuestra App en distintos móviles.

La última opción es probarla directamente en el Simulador Firefox OS. Debemos recordar incluir en el mismo el archivo Manifest.webapp mencionado anteriormente, con las referencias de las principales características que este archivo requiere.

Manifest.webapp

El archivo en cuestión, que permitirá que instalemos nuestra App en Firefox OS, se compone de una serie de comandos a través de los cuáles se indica la versión de la App, su nombre, el ícono que la representa, una breve descripción de la misma, el nombre del desarrollador y el sitio web de soporte, entre otras funciones más.

A continuación encontraremos el código que nos permitirá empaquetar e instalar nuestra App en Firefox OS:

Manifest.webapp
{
"version": "1.0",
"name": " Dattamagazine",
"description": "Ejemplo funcional de App para Firefox OS – by Fernando Luna para Dattamagazine.com",
"launch_path": "/index.html",
"icons": {
"16": "/image/dm-icon.png",
"48": "/image/dm-icon.png",
"128": "/image/dm-icon.png"
},
"developer": {
"name": "Fernando Luna",
"url": "http://www.dattamagazine.com/"
},
"installs_allowed_from": ["*"],
"locales": {
"en": {
"description": " Ejemplo funcional de App para Firefox OS – by Fernando Luna para Dattamagazine.com",
"developer": {
"name": "Fernando Omar Luna",
"url": "http://www.vidamobile.com.ar"
}
}
},
"default_locale": "es",
"permissions": {
},
"fullscreen": "true"
}

La lectura de este código es muy sencilla y no representará complicaciones para su estructura y modificación. Por último, nos queda guardar este archivo en la carpeta raíz de nuestro proyecto, con nuestro software compresión preferido.

Instalar nuestra aplicación

Llega el momento de la prueba final: instalar nuestra aplicación. Para ello debemos iniciar el Dashboard del Simulador Firefox OS, desde el navegador Mozilla Firefox. Iniciado el Dashboard encontraremos en el panel central la opción «Add Directory».

A través de la misma se abrirá una ventana de diálogo, donde seleccionaremos el directorio de la aplicación que hemos creado.

Inmediatamente después, presionamos el botón «Seleccionar» y crearemos en el Dashboard un acceso directo al proyecto que desarrollamos, al cual se realizará una pequeña validación de compatibilidad, devolviendo el resultado en la etiqueta «Validation Result:».

Ya podemos comenzar a navegar por las pequeñas funcionalidades que incluimos en nuestra primera App Firefox OS.

Si queremos ver qué ocurrió al momento de cargar nuestra App en el simulador, podemos ejecutar el botón «Connect» ubicado en el Dashboard, para conocer todos los procesos que se ejecutaron en su instalación.

Conclusión

Si bien repasamos las características básicas de Firefox OS y de cómo construir aplicaciones para este sistema operativo, las mismas nos serán muy útiles para comenzar a dar nuestros primeros pasos en esta plataforma que busca captar el mercado medio de los teléfonos móviles en todo el mundo.

Podemos pensar que Firefox OS es simple y humilde en cuanto a hardware refiere, pero debemos tener en cuenta que muchas personas prefieren hacer hincapié en una tecnología libre como la propuesta por la Fundación Mozilla en todos sus productos, y evitar atarse a compañías que restringen mucho el acceso a la tecnología de sus equipos.

A su vez, Firefox OS demuestra en base a la tecnología desplegada al momento de hacer funcionar su sistema operativo y su ecosistema de aplicaciones, que la tecnología de punta no siempre es la mejor. Sólo con los elementos básicos que componen la web de ayer y de hoy, también podemos tener grandiosas aplicaciones y mucho mejor, podemos desarrollarlas a nuestro gusto, y sin invertir dinero de por medio.

Aquí les dejamos el link al proyecto terminado, para su descarga y evaluación: DESCARGAR PROYECTO.