Desarrollo para Firefox OS: Primer contacto

See this post in english here

El pasado 20 de marzo tuve la oportunidad de asistir a los Firefox OS App Days de Valladolid, donde, tras unas cuantas sesiones de introducción, tuvimos un hackatón donde pudimos tener un primer contacto con la plataforma.

La plataforma

Firefox OS es, dicho de una manera sencilla, un núcleo de Android y un navegador, con lo cual todo el sistema, incluida la pantalla de inicio, están hechos en HTML5, CSS y Javascript. La diferencia fundamental con un navegador que se ejecute en Android o iOS, es que tenemos acceso mediante las API de Firefox OS a todas las funciones del teléfono, contactos, calendario, etc.

Desarrollo: Lenguajes, herramientas y simulador

El desarrollo es como el de cualquier aplicación web, es decir, HTML + CSS + Javascript, de manera que podemos extenderlo usando LESS, SASS, jQuery, Sencha… Para empezar no necesitamos más que un editor de texto y Firefox para depurar, ya que el motor de renderizado del teléfono es exactamente igual que el de la versión para escritorio.

Sin embargo, hay cosas que no se puedan probar en un navegador convencional, y para ello contamos con un simulador, que se instala como un complemento de Firefox y nos permite probar nuestras aplicaciones.

Building Blocks

Mozilla ha preparado, de manera adicional, algunas plantillas CSS para los elementos comunes (listas, botones, cabeceras, mensajes de diálogo) de manera que nuestra aplicación tenga un aspecto nativo y se integre con el estilo del sistema. Es importante destacar que tendremos que copiar manualmente los ficheros CSS, ya que de momento no contamos con ninguna plantilla vacía. 

Mi primer proyecto

Tras la sesión de introducción pasamos al hackathon, poco menos de dos horas para desarrollar una pequeña aplicación y empezar a trabajar. Mi primer proyecto consiste en una pequeña lista de tareas:

  • Los estilos están tomados del repositorio de Github de Gaia, que es como se llama la Interfaz de Usuario de Firefox OS.
  • Las animaciones y el cambio de página se hacen con una combinación de transformaciones CSS y Javascript, ayuda de los chicos de Mozilla y Telefónica I+D que estaban en el evento.
  • Para gestión de la lista he empleado knockout.js para gestionar la lista de tareas y el proceso de agregar una nueva.

El resultado es lo que se aprecia en las capturas de pantalla:

newTask mainWindow

Siguientes pasos

Esto es poco más que un hola mundo, para que la aplicación fuese funcional necesitaría guardar los datos, y se podría extender enlazando las tareas con acciones del calendario. Hay muchas cosas que se pueden hacer, y parece una plataforma interesante.

Enlaces

3 pensamientos en “Desarrollo para Firefox OS: Primer contacto

  1. Pingback: Firefox OS: First steps | rlbisbe @ dev

  2. 4bs4l0n

    Estoy en desacuerdo en que firefox os es un núcleo android, es basicamente el kernel de linux solo que el usuario interactúa con una interfaz llamada boot to gecko al igual que android es nucleo linux con otro tipo de interfaz

    Responder
  3. Pingback: if (2013.IsComplete) 2014.StartAsync(); | rlbisbe @ dev

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s