Aprovechando que la semana pasada se celebraron en Madrid unas jornadas de hackathon de Firefox OS en las que participé junto con mis compañeros de TALENTUM Startups, vuelvo por estos lares para traeros una nueva entrega del tutorial #FirefoxOSDeveloper que tanto me habéis pedido continuar.

mozilla-mozcamp-firefox-os.018

En esta entrada hablaremos de varias características nuevas relacionadas con el diseño front end que recomiendan seguir, así como un ejemplo real de subida de una aplicación (aún en fase beta, recuerdo) a un dominio propio (falta aún acabarla y entonces explicaré las pautas para subirla al market.

Firefox OS Simulator 3.0 disponible

Hay varias novedades interesantes, y es que desde el día de ayer, ya tenemos disponible la nueva versión del simulador de Firefox OS, un complemento del que ya os hablé largo y tendido anteriormente, y que nos permitirá probar cómo luce este nuevo SO, así como testear nuestras aplicaciones de forma cómoda y sencilla desde el navegador.

En esta nueva versión, han solucionado algunos problemas que daba la anterior, así como incluido alguna que otra característica que se echaba de menos, y que ya veníamos usando en otros entornos de desarrollo como Android e iOS:

  • Push to Device: Si contamos con un terminal Firefox, bastaría con conectarlo al ordenador y abrir el complemento del navegador para cargar las aplicaciones que estemos probando. Recordar que como en el resto de casos semejantes en otras plataformas, es necesario tener activo el modo depuración del terminal, llendo en este caso a Settings>Device information>More Information>Developer>Remote debugging.
  • Simulador de rotación: Tendremos un botón inferior para cambiar la rotación de la pantalla, que si bien he visto, por ahora no he conseguido que funcionase.
  • Simulación de API de geolocalización básica: Otro de los botones inferiores nuevos, que es de agradecer para el testeo de apps de geolocalización. Podremos configurar la geolocalización en nuestro punto, o emular posiciones distintas.
  • Validación del Manifest: La pantalla de carga del simulador servirá así mismo como validador de archivos, y junto con el simulador, se cargará una consola de errores que viene genial, y se echaba de menos.
  • Correcciones de estabilidad para la instalación y actualización de aplicaciones: Añadir únicamente que con CTRL+R podremos actualizar una aplicación directamente (sin tener que parar el simulador, darle update al manifest y volver a activar).
  • Nuevas versiones del motor de renderizado de Firefox y Gaia: El simulador ha ganado en estabilidad y velocidad.

Tenéis más información al respecto en la nota en el blog de FirefoxHacks.

Diseño de iconos para Firefox OS

Si habéis bajado el framework que liberé ya hace tiempo para el desarrollo en Firefox OS en mi cuenta de GitHub (que por cierto he actualizado hace relativamente poco), os habréis percatado que el icono de la aplicación no se mostraba correctamente en la interfaz de Firefox OS. Esto es debido a que las dimensiones aceptadas para el logo son de 60×60, y yo tenía definidas 64×64 (manías de informáticos heredadas de la época de los 8 bits). Ya he incluido el path correcto, el icono base y la llamada desde el manifest al icono.

Firefox OS app icons

Según las pautas de Mozilla, es recomendable que el icono esté contemplado con una base circular, aunque como podemos ver en su documentación, aceptan que la imagen esté dentro, sobresalga, o acompañe al círculo (como en el caso del logotipo del navegador Firefox), siempre y cuando se mantenga a todos los efectos en un cuadrado transparente de 60×60.

Incluyen así mismo una máscara semitransparente en forma de semicírculo en uno de los laterales del icono (podéis descargaros la plantilla en .PSD), y recuerdan que todos los iconos irán acompañados por una sombra que incluye por defecto la interfaz de Firefox OS.

Es simpático este hecho porque solo hace falta navegar por el market de aplicaciones para darte cuenta que casi nadie cumple con las restricciones, habiendo bastantes más aplicaciones en cuadrado redondeado (heredado sin duda de iOS) que circulares.

Elementos de interface

Como ya vimos hace tiempo, Mozilla apuesta fuertemente por el responsive design, y una estructura en capas de la interfaz de cada aplicación. Para ello, pone a nuestra disposición desde la cuenta de GitHub del proyecto Gaia (recordemos que Gaia es la capa de interfaz del sistema) toda la parte visual del sistema, que está dividida en dos carpetas: style para los estilos que están terminados y style_unestable con todo el CSS que puede sufrir cambios.

Los CSS están listos para ser usados, y se recomienda exportarlos según su necesidad, como ya viene siendo habitual en proyectos web:
@import url(resources/action_menu.css); /* menús de acciones */
@import url(resources/buttons.css); /* botones */
@import url(resources/confirm.css); /* panel de confirmación */
@import url(resources/headers.css); /* cabeceras */
@import url(resources/status.css); /* panel de alerta de estado */
@import url(resources/switches.css); /* interruptores, radio y checkbox */
Su uso es semejante al del resto de frameworks front-end. Basta dedicarle un tiempo a cacharrear con las hojas de estilo, e implementar mediante classes los diferentes botones, títulos y otros elementos comunes en las aplicaciones. Decir de paso que por defecto, el sistema entiende la mayoría de etiquetas con un estilo propio amigable, por lo que una consulta del tipo button type=date, devolverá por pantalla una suerte de rueda táctil con el día por defecto (el de hoy), y con la posibilidad de subir o bajar para cambiarlo).

Subir una aplicación a un dominio propio

Habíamos visto que Firefox OS contempla varias maneras de instalar aplicaciones. Una de ellas es directamente desde el market, mientras que existe la posibilidad de mantener tu aplicación en un dominio propio, y que el market te redirecione a él para descargártela (muy útil para no tener que pasar por el market para rentabilizar una app), o directamente buscarte tú las mañas para atraer tráfico a la aplicación sin el market.

Para probar el funcionamiento de una instalación vía dominio, aproveché la demo que mis compañeros Jorge Lavín, Pau Contreras y un servidor desarrollamos en la última Hackathon, y aquí os expongo algunas consideraciones con las que me he encontrado, y que al final he podido solucionar.

  • Una aplicación por dominio: Algo muy importante. Solo se puede tener una aplicación por dominio (entiendo que por seguridad). Afortunadamente, podemos hacer uso de subdominios (en nuestro caso la aplicación está en histogluc.pabloyglesias.com), y como en la mayoría de casos tenemos un número relativamente alto de subdominios, no deberíamos tener problema alguno.
  • El servidor de base no entiende la extensión del manifest: Otro de los quebraderos de cabeza con el que me encontré. Tenía la aplicación subida, se podía ver perfectamente, pero cuando intentaba abrirla como app (no como web), simplemente no hacía nada. Esto es debido a que el manifest, al ser un fichero .webapp, no está contemplado como archivo compatible. Para solucionarlo, basta con hacer entender al servidor que los archivos .webapp son a efectos prácticos ficheros .json. Por tanto, bastará con crear un fichero .htacess (o actualizar el que tengamos), e incluirle la siguiente línea (incluyo también la línea necesaria para servidores NGNIX):

#Añadir esta línea en .htaccess (en servidor Apache)
AddType application/x-web-app-manifest+json .webapp


#Añadir en mime.types esta línea (en servidor NGINX)
types {application/x-web-app-manifest+json webapp;}

  • Botón de instalación, o instalación automática: En el framework que liberé en mi cuenta de GitHub, incluía una función install() a la que llamaba mediante un botón. En la demo de HistoGluc, eliminamos dicho botón, y lo configuramos de manera que se cargue la función al cargar el body, por lo que si lo abris con el navegador Firefox, os saldrá una notificación de que tenéis disponible la instalación en cuestión:

PabloYglesias-InstalarFirefox

Dependiendo del sistema operativo donde estéis, la aplicación aparecerá como un acceso directo en tu escritorio (windows), como una aplicación más en Aplications (Mac OS) o como un enlace a la aplicación en el primer espacio de trabajo disponible (Android y Firefox OS). Como veis en la siguiente screen, se crea el paquete correcto en cada SO, con la posibilidad de desinstalarlo, y se abre como una ventana capada del navegador (al igual que algunos popups).

PabloYglesias-Instala

Mantiene el icono que le hayas pasado en el manifest (en la próxima versión de HistoGluc ya hay diseñado otro bastante más elaborado), siempre y cuando tengas uno en las dimensiones correctas de cada sistema operativo. Por ello, recomiendo que hagáis versiones de 128×128, 64×64, 60×60, 48×48, 32×32 y si eso 16×16.

Y hasta aquí esta nueva entrada sobre #FirefoxOSDeveloper. En la siguiente intentaré meterme más de lleno en el backend, sobre todo en el uso de almacenes de datos en local, un tema un tanto delicado, pero que es interesante conocer ya no solo para el desarrollo de aplicaciones web, sino para el futuro de la web en general.

Para facilitaros el seguimiento del tutorial, os dejo los enlaces a cada una de las entradas anteriores:

Otros artículos relacionados