Successfully reported this slideshow.
Your SlideShare is downloading. ×

Apps Days Firefox OS

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 37 Ad
Advertisement

More Related Content

Slideshows for you (19)

Advertisement

Recently uploaded (20)

Apps Days Firefox OS

  1. 1. Taller Firefox OS App Days 1 Pablo Sepúlveda Development Eng. Lead Firefox OS Launch Team Mozilla Chile
  2. 2. Mozilla, su misión 2 Taller Firefox OS App Days ● 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
  3. 3. 3 Taller Firefox OS App Days ● 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. ¿Open Web?
  4. 4. 4 Taller Firefox OS App Days 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.
  5. 5. Introducción a Firefox OS 5 Taller Firefox OS App Days
  6. 6. ¿Qué es Firefox OS? 6 Taller Firefox OS App Days ● 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.
  7. 7. Firefox OS: Algo de Historia 7 Taller Firefox OS App Days ● 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.
  8. 8. Firefox OS: Algo de Historia 8 Taller Firefox OS App Days ● 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.
  9. 9. Firefox OS: Algo de Historia 9 Taller Firefox OS App Days ● 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.
  10. 10. Firefox OS: Algo de Historia 10 Taller Firefox OS App Days ● 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.
  11. 11. Firefox OS en la Actualidad 11 Taller Firefox OS App Days ● 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.
  12. 12. Arquitectura de Firefox OS 12 Taller Firefox OS App Days ● Basado en HTML5 y con kernel Linux. ● Consta de las siguientes capas principales de abstracción representadas en la imagen.
  13. 13. Arquitectura de Firefox OS 13 Taller Firefox OS App Days 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.
  14. 14. Entorno de Desarrollo 14 Taller Firefox OS App Days ● 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.
  15. 15. Hola Mundo en Firefox OS 15 Taller Firefox OS App Days ● 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.
  16. 16. Hola Mundo en Firefox OS 16 Taller Firefox OS App Days ● 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>
  17. 17. Hola Mundo en Firefox OS 17 Taller Firefox OS App Days ● 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": { } }
  18. 18. Hola Mundo en Firefox OS 18 Taller Firefox OS App Days ● 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.
  19. 19. Lo que se viene: WebIDE 19 Taller Firefox OS App Days ● 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.
  20. 20. Lo que se viene: WebIDE 20 Taller Firefox OS App Days
  21. 21. Aplicaciones 21 Taller Firefox OS App Days ● 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.
  22. 22. Tipos de Aplicaciones 22 Taller Firefox OS App Days ● 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
  23. 23. Herramientas de Desarrollo y WebAPIs 23 Taller Firefox OS App Days
  24. 24. Herramientas de Desarrollo Desarrollo web: ● Inspector de elementos ● Colorzilla ● Debug ● IndexedDB Browser 24 Taller Firefox OS App Days
  25. 25. 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 25 Taller Firefox OS App Days
  26. 26. 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 26 Taller Firefox OS App Days
  27. 27. 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. 27 Taller Firefox OS App Days +Info: https://developer.mozilla.org/en-US/Apps/Build/App_permissions Arquitectura de Seguridad de Firefox OS
  28. 28. 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) 28 Taller Firefox OS App Days
  29. 29. 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) 29 Taller Firefox OS App Days
  30. 30. 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) 30 Taller Firefox OS App Days
  31. 31. 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) 31 Taller Firefox OS App Days
  32. 32. 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 32 Taller Firefox OS App Days
  33. 33. 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/firefo x-os/ ● Casi todo evitable utilizando templates. 33 Taller Firefox OS App Days
  34. 34. Firefox Marketplace ● Cuentas en Mozilla Persona. – https://login.persona.org/ ● Firefox Marketplace para developers. – http://mzl.la/1vZ9Kgv – http://mzl.la/1eGXCWx 34 Taller Firefox OS App Days
  35. 35. 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. 35 Taller Firefox OS App Days
  36. 36. 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 36 Taller Firefox OS App Days
  37. 37. ¡Muchas Gracias! 37 Contacto: pablo.sepulveda@mozillachile.cl http://www.psep.cl @psep_cl Contenido bajo licencia Creative Commons By-Sa 3.0

×