Programa INTRODUCCIÓN A FIREFOX OS • Oportunidad de negocio: un solo desarrollo para todas las plataformas. • Concibiendo aplicaciones web móviles. • Un nuevo ecosistema: Linux + Gecko + HTML5 + JS + CSS3 = Firefox OS, sus orígenes. • Arquitectura general del Sistema (B2G). • Simulador de Firefox OS. • “Hola Mundo”

1. Taller Firefox OS
App Days
1
Pablo Sepúlveda
Development Eng. Lead
Firefox OS Launch Team
Mozilla Chile

2. Mozilla, su misión
● Una comunidad
global de personas
que creemos en la
libertad, innovación,
y oportunidad son
las claves para
mantener internet
viva y accesible para
todos
Taller Firefox OS App Days 2

3. ¿Open Web?
● Internet es un recurso publico global que
debemos mantener libre y accesible.
● Internet debe enriquecer la vida de los seres
humanos.
● La seguridad y privacidad de los usuarios en
Internet son fundamentales y no deben ser
tratados como algo opcional.
● Los usuarios deben tener la posibilidad de
moldear Internet y su propia experiencia en
Internet.
Taller Firefox OS App Days 3

4. Comunidad y Proyectos
● Comunidad de Mozilla en Chile - http://mozillachile.cl
● Comunidad Mozilla Hispano - http://mozilla-hispano.org
● Comunidad Global - http://mozilla.org
Proyectos
● Webmaker, SUMO, QA, MDN, Difusión, Localización, Desarrollo
web, Firefox Marketplace, Complementos, Firefox OS, etc.
Taller Firefox OS App Days 4

5. Team Mobilizer Chile
● Propósito: centrado en los usuarios y la difusión de Firefox OS.
● Grupo en Facebook:
https://www.facebook.com/groups/mobilizerchile/
● Fiesta Mobilizer Chile
Taller Firefox OS App Days 5

6. Introducción a Firefox OS
Taller Firefox OS App Days 6

7. ¿Qué es Firefox OS?
● Nombre clave: Boot to
Gecko – B2G.
● Un nuevo ecosistema de
sistemas operativos
móviles basados en
HTML5.
● Un “nuevo” concepto:
Aplicaciones web
móviles →
multiplataforma.
Taller Firefox OS App Days 7

8. Firefox OS: Algo de Historia
● 2010:
– Mozilla Labs publica un video de SeaBird,
idea de S.O. basado en Android.
– Ese mismo año, Mozilla lanza Open Web
Apps (marketplace).
– Telefónica da pie a una iniciativa junto a
AT&T para crear un S.O. móvil basado en
webkit (WAC).
● 2011:
– Mozilla inicia el Proyecto B2G. Se lanza un
pre-alpha.
– Telefónica fracasa con el WAC.
Taller Firefox OS App Days 8

9. Firefox OS: Algo de Historia
● 2012:
– En febrero, se lanza la versión 1.0.
– Telefónica anuncia apoyo a la Fundación Mozilla por B2G.
– En julio, cambia el nombre de B2G a Firefox OS.
– En octubre, Mozilla estrena el Firefox Marketplace.
Taller Firefox OS App Days 9

10. Firefox OS: Algo de Historia
● 2013:
– Pactos de cooperación con
LG, Alcatel, ZTE, Huawei.
– En septiembre, se lanza la
versión 1.0.1.
– Lanzamiento de la línea de
Geeksphone.
– En octubre, se lanza la
versión 1.1.
– Lanzamientos en España,
Brasil, México,Venezuela,
entre otros.
– En diciembre, se lanza la
versión 1.2.
Taller Firefox OS App Days 10

11. Firefox OS: Algo de Historia
● 2014:
– En enero, se anuncia a Panasonic
como nuevo partner y la inclusión
de Firefox OS en Smart TV's.
También se anuncia el TCP (Tablet
Contribution Program).
– En febrero, se lanza en Chile con
el dispositivo Alcatel One Touch
Fire.
– Cadena de lanzamientos en
Sudamérica.
– En marzo, se lanza la versión 1.3, actual estable oficial.
– En junio, se lanza la versión 1.4. Además se anuncia el
lanzamiento del Flame (Firefox OS Developer phone).
– En julio, se lanza la versión 2.0. Versión 2.1 pre-release.
– Lanzamientos en Centroamérica.
– En octubre, se proyecta el lanzamiento de la versión 2.1.
Taller Firefox OS App Days 11

12. Firefox OS en la Actualidad
● Versión estable: 1.3
● Operadoras: Telefónica
y sus distintas filiales
(principal), América
Móvil (México),
operadoras chinas,
coreanas, alemanas,
entre otras.
● Firefox OS en el mundo: Brasil, Chile, Colombia, El Salvador,
Francia, Alemania, Grecia, Hungría, Italia, Montenegro, México, Perú,
Polonia, Rusia, Serbia, España, Reino Unido, Estados Unidos,
Uruguay, Venezuela... y la lista sigue.
Taller Firefox OS App Days 12

13. Arquitectura de Firefox OS
● Basado en HTML5
y con kernel
Linux.
● Consta de las
siguientes capas
principales de
abstracción
representadas en
la imagen.
Taller Firefox OS App Days 13

14. Arquitectura de Firefox OS
En palabras simples:
● Gonk: es el sistema operativo de bajo nivel de Firefox OS, consiste en
un kernel Linux y una capa de abstracción de hardware de espacio
de usuario (HAL).
● Gecko: es el motor de renderizado que provee todo el soporte para
HTML, CSS y JavaScript. Esto hace que dichas APIs funcionen bien en
cualquier sistema operativo que soporte Gecko.
● Gaia: es la interfaz de usuario de la plataforma Firefox OS. Está
implementado completamente usando HTML, CSS y JavaScript.
● Haida: interfaz sucesora de Gaia. Implementación parcial desde la
v1.4 y completa desde la v2.0.
Taller Firefox OS App Days 14

15. Entorno de Desarrollo
● Desde las últimas
versiones de Firefox
y derivados.
● Se accede mediante
about:app-manager
● Administrador de apps, debug, simulador... todo en un
par de complementos.
● Sin SDKs = KISS.
Taller Firefox OS App Days 15

16. Hola Mundo en Firefox OS
● Dos archivos a tener en cuenta: index.html y
manifest.webapp.
● Creamos una carpeta “hola-mundo” y dentro
de ella los dos archivos mencionados
anteriormente.
Taller Firefox OS App Days 16

17. Hola Mundo en Firefox OS
● En index.html:
<!DOCTYPE html>
<html>
<header>
<title>Prueba en Firefox OS</title>
<style>
body{
text-align: center;
}
</style>
</header>
<body>
<h1>Prueba</h1>
<p>
Hola mundo desde Firefox OS :-)
</p>
</body>
</html>
Taller Firefox OS App Days 17

18. Hola Mundo en Firefox OS
● En manifest.webapp:
{
"version": "1.0",
"name": "Hola Mundo",
"launch_path": "/index.html",
"description": "Prueba en Firefox OS",
"icons": {
"128": "/images/logo128.png"
},
"developer": {
"name": "Pablo Sepúlveda",
"url": "http://www.psep.cl"
},
"installs_allowed_from": ["*"],
"default_locale": "es",
"permissions": {
}
}
Taller Firefox OS App Days 18

19. Hola Mundo en Firefox OS
● Habrán notado que el archivo
manifest.webapp no es más que un JSON.
● El manifest es el más importante y primordial
componente de nuestra aplicación. Realiza
todas las indicaciones de instalación y
ejecución en Firefox OS.
Taller Firefox OS App Days 19

20. Lo que se viene: WebIDE
● Si bien, para desarrollar apps no es necesario
más que un editor de texto, Mozilla a
incorporado un IDE totalmente web.
● Se encuentra disponible en las versiones de
Firefox Nightly. Este es la evolución del
app-manager.
● Se activa en el browser, cambiando a true el
parámetro “devtools.webide.enabled” en el
about:config
Taller Firefox OS App Days 20

21. Lo que se viene: WebIDE
Taller Firefox OS App Days 21

22. Aplicaciones
● Con un manifest.webapp es posible convertir
cualquier página web en una “webapp”.
● Esto indicando en el atributo “launch_path” la
url del index de la web.
● ¿Es real la dependencia de internet en las apps
de Firefox OS?
– Depende del tipo de aplicación.
Taller Firefox OS App Days 22

23. Tipos de Aplicaciones
● App Hosteada: es una página alojada en un
servidor web. Requiere conexión a internet.
● App Empaquetada: posee todo sus recursos
(html, css, js, manifest, etc.) comprimidos en un
archivo zip. No requiere conexión a internet.
● Más info en MDN: http://mzl.la/1pDgQm0
Taller Firefox OS App Days 23