Programa completo del taller realizado en la Universidad de Santiago de Chile.

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
– SEund mamarézori,c sae. 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:conf.
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

24. Herramientas de Desarrollo y
WebAPIs
Taller Firefox OS App Days 24

25. Herramientas de Desarrollo
Desarrollo web:
● Inspector de elementos
● Colorzilla
● Debug
● IndexedDB Browser
Taller Firefox OS App Days 25

26. Frameworks HTML5
● Bootstrap http://getbootstrap.com/
● jQuery Mobile http://jquerymobile.com/
● Especializados en Firefox OS:
– Firefox OS boilerplate App (demo APIs)
https://github.com/robnyman/Firefox-OS-Boilerplate-A
pp
– Building-Blocks
https://github.com/buildingfirefoxos/Building-Blocks
– FxOsStub
http://jaxo.github.io/fxosstub/docs/index.html
Taller Firefox OS App Days 26

27. Control de Versiones
● GIT, el control de versiones de moda.
● Plataforma popular y utilizada por Mozilla/Mozillians:
http://github.com
● Cuenta de Mozilla https://github.com/mozilla
● Mozilla Chile https://github.com/mozillachile
● @psep en GitHub https://github.com/Psep
Taller Firefox OS App Days 27

28. Introducción a las WebAPIs
● Diferentes APIs con
distintos niveles de
seguridad.
● Para acceder a APIs
que requieren
mayores privilegios se
requiere una
certificación para la
app (esto en
Marketplace). Esto es
parte de los Niveles
de Seguridad de
Firefox OS.
Arquitectura de Seguridad de Firefox OS
+Info: https://developer.mozilla.org/en-US/Apps/Build/App_permissions
Taller Firefox OS App Days 28

29. Introducción a las WebAPIs
● APIs de Comunicación:
– Información de la red
– Bluetooth (requiere certificación)
– API de Conexión (requiere certificación)
– Estado de la red (requiere certificación)
– Socket TCP (requiere privilegios)
– Web Telephony API (requiere certificación)
– WebSMS (requiere certificación)
Taller Firefox OS App Days 29

30. Introducción a las WebAPIs
● APIs de Acceso al Hardware:
– Sensor de luz
– Estado de batería
– Geolocalización
– PointerLock
– Proximidad
– Orientación de Pantalla y Dispositivo
– Vibración
– WebFM (si está disponible)
– Cámara (requiere certificación)
– Gestión de Energía (requiere certificación)
Taller Firefox OS App Days 30

31. Introducción a las WebAPIs
● APIs de Gestión de Datos:
– FileHandle API
– IndexedDB
– Contactos (requiere privilegios)
– Device Storage API (requiere privilegios)
– Settings API (requiere certificado)
Taller Firefox OS App Days 31

32. Introducción a las WebAPIs
● Otras APIs:
– Alarma
– Simple Push
– Web Notifications
– Apps API
– Web Activities
– WebPayment API
– Browser (requiere privilegios)
– Idle API (requiere certificación)
– API de Permisos (requiere certificación)
– Reloj API (requiere certificación)
Taller Firefox OS App Days 32

33. Introducción a las WebAPIs
● Utilizaremos Firefox OS boilerplate App (demo APIs)
https://github.com/robnyman/Firefox-OS-Boilerplate-App
para revisar las WebAPIs.
● Más información de WebAPIs en
https://developer.mozilla.org/en-US/docs/WebAPI
Taller Firefox OS App Days 33

34. Firefox OS Styleguide
● Diseño coherente e integrado con la interfaz gráfica.
● Guía para el diseño de botones, componentes, colores,
etc.
● Guía para el diseño de íconos.
● Más info:
https://www.mozilla.org/en-US/styleguide/products/firefox
-os/
● Casi todo evitable utilizando templates.
Taller Firefox OS App Days 34

35. Firefox Marketplace
● Cuentas en Mozilla Persona.
– https://login.persona.org/
● Firefox Marketplace para
developers.
– http://mzl.la/1vZ9Kgv
– http://mzl.la/1eGXCWx
Taller Firefox OS App Days 35

36. Hackathon
● El objetivo, realizar aplicaciones para Firefox OS.
● Parámetros de evaluación.
● Premiación, consiste en dos dispositivos Firefox OS. Se entregarán a las
dos mejores aplicaciones.
Taller Firefox OS App Days 36

37. Referencias y Documentación
● Roadmap Firefox OS: https://wiki.mozilla.org/B2G/Roadmap
● Especificación Firefox OS: https://wiki.mozilla.org/FirefoxOS
● Guía de referencia de apps en MDN:
https://developer.mozilla.org/en-US/Apps/Reference
● Guía de Firefox OS en MDN:
https://developer.mozilla.org/es/Firefox_OS
● Seguridad: https://developer.mozilla.org/en-US/Firefox_OS/Security
● WebAPIs: https://developer.mozilla.org/en-US/docs/WebAPI
Taller Firefox OS App Days 37

38. ¡Muchas Gracias!
38
Contacto:
pablo.sepulveda@mozillachile.cl
http://www.psep.cl
@psep_cl
Contenido bajo licencia
Creative Commons By-Sa 3.0