WeLoveJS 2014: Un paseo por FirefoxOS

275 views
231 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
275
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WeLoveJS 2014: Un paseo por FirefoxOS

  1. 1. Un paseo por Firefox OS WeLoveJS 2014 Arnau March @rnowm Francisco Jordano @mepartoconmigo
  2. 2. 2011: I have a dream ….
  3. 3. 2012: El año que vivimos locamente
  4. 4. 2013: El sueño es una realidad
  5. 5. 2014: Un prometedor futuro
  6. 6. Leitmotiv: The Web Is the Platform … that your phone deserves!
  7. 7. … absolutamente todo* esta hecho con
  8. 8. … desde el gestor de ventanas … hasta el navegador … pasando por el dialer, sms, gestión de gasto ... Por qué mola tanto?
  9. 9. de que esta hecho tu navegador? de html, css y javascript
  10. 10. https://github.com/mozilla-b2g/B2G https://github.com/mozilla-b2g/gaia realmente libre, sin trampa ni cartón!
  11. 11. Cómo empiezo? Qué necesito para empezar a programar en Firefox OS? ● Un nuevo lenguaje de programación? ● Aprender nuevos ciclos de vida de aplicaciones? ● El nuevo paradigma de programación que se enseña solo en Nepal?
  12. 12. Necesito algún combo mágico?
  13. 13. Vamos a crear apps, web apps, que no son diferentes a las web apps que ya estás creando. La web es nativa en FirefoxOS Recuerda: la web es la plataforma … que todos nos merecemos o/
  14. 14. Define tu web app con un manifest acuerdate que el content-type para este fichero es: application/x-web-app-manifest+json
  15. 15. Ya está? Sólo eso? Casi! Tienes que decidir cómo distribuir tu aplicación Hosted: All your files belong to … yourself Packaged: todos los ficherines se guardan en un zip que vive en el teléfono del usuario.
  16. 16. Permisos: la privacidad del usuario es lo primero
  17. 17. Nuevas APIs para jugar! Queremos que nuestras webapps molen mucho, necesitamos control sobre el hardware! MOAR APIS! Sí, pero con cabeza y estandarizándolas! Vamos a impulsar la web hasta el infinito y más allá!
  18. 18. Dialer API
  19. 19. SMS API
  20. 20. Device Storage API
  21. 21. https://developer.mozilla.org/en-US/docs/WebAPI
  22. 22. Vale, lo pillo, algún ejemplo rápido? Ya sabeis, estais en la web, seguro que podeis crear mejores web que yo! Podeis seguir la aplicación de ejemplo de Robert Nyman https://github. com/robnyman/Firefox-OSBoilerplate-App
  23. 23. Y cómo desarrollo? … esa pregunta es fácil ● Usa tu editor favorito (recuerda, no hay IDE’s, o frameworks o mágias raras, this is the WEB!) ● Prueba tu web app en Firefox Nightly ● Utiliza el simulador ● Intenta probar siempre en un dispositivo
  24. 24. Un vistazo al flamante App Manager y al simulador
  25. 25. vamos a ver algunos truquitos
  26. 26. El problema del metro de Londres
  27. 27. Be offline my friend Ahora más que nunca tenemos que tener cuidado con la conectividad del usuario. Tenemos herramientas para hacer que tus web apps funcionen offline, como packaged apps, y nuestro viejo amigo appcache, que se integra en el manifest. Y otras, a punto de aterrizar como service workers.
  28. 28. … es muy fácil estar preparado
  29. 29. Nuestra web app no tiene porque hacer todo, utiliza otras apps instaladas para conseguir tus objetivos. Say Hola! to Web Activities! https://developer.mozilla.org/en-US/docs/WebAPI/Web_Activities Compartiendo información con otras aplicaciones
  30. 30. pidiendo un contacto
  31. 31. … ofrenciendonos como activity
  32. 32. nuevas APIs: DataStore
  33. 33. Más APIs nuevas: IAC
  34. 34. https://developer.mozilla.org/en-US/docs/Persona/Quick_setup Más regalitos: identity! Integración con Mozilla Persona
  35. 35. http://blog.digital.telefonica.com/2013/04/09/mozilla-web-payments-api/ Y más todavía: pagos
  36. 36. No podía faltar: Push Notifications
  37. 37. https://marketplace.firefox.com/ Distribuye tus web apps
  38. 38. Rompiendo las reglas del mercado Libertad para el creador y el usuario al distribuir tus apps!
  39. 39. https://github.com/pdi-innovation/generator-firefoxos Más goodies! Firefox OS Yeoman generator FTW!
  40. 40. Y ahora CSS… “Yo sé un huevo de JS, pero mis apps parece que las ha diseñado Jakob Nielsen!”
  41. 41. Building Blocks to the rescue!
  42. 42. 1er paso: revisar todas las apps
  43. 43. 2: identificar los elementos que se repiten
  44. 44. 3: convertir los diseños a HTML/CSS
  45. 45. Dónde están los estilos en Firefox OS https://github.com/mozilla-b2g/gaia/tree/master/shared/style
  46. 46. Documentación: www.buildingfirefox.com

×