Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Pourquoi Firefox OS

1,100 views

Published on

Présentation à la nAcademy (Septembre 2013) : Pourquoi Firefox OS ? par Christophe Villeneuve

  • Be the first to comment

  • Be the first to like this

Pourquoi Firefox OS

  1. 1. Pourquoi Firefox OS ? Christophe Villeneuve 12 septembre 2013
  2. 2. nAcademy – 12 Septembre 2013 Sommaire ✔ Le pourquoi ✔ Le comment ✔ Structure ✔ Démo ✔ Le +
  3. 3. nAcademy – 12 Septembre 2013 Le pourquoi... Apporter l'ouverture du web pour les appareils mobiles (devices)
  4. 4. nAcademy – 12 Septembre 2013 Avant
  5. 5. nAcademy – 12 Septembre 2013 De nos jours Apple Google Microsoft
  6. 6. nAcademy – 12 Septembre 2013 En résumé... Le futur
  7. 7. nAcademy – 12 Septembre 2013 Web Mobile
  8. 8. nAcademy – 12 Septembre 2013 Donc... ✔ Navigation par onglets ✔ Gestion mémoire ✔ Créer vos applications personnalisées et différencier UX ✔ Tout en application Web
  9. 9. nAcademy – 12 Septembre 2013
  10. 10. nAcademy – 12 Septembre 2013 https://mdn.mozillademos.org/files/4605/FirefoxOS.png GONK ➢GECKO ➢GAIA
  11. 11. nAcademy – 12 Septembre 2013 Architecture GONK ✔ Couche basse ✔ Kernel Linux + Hardware ✔ Abstraction Layer (HAL)
  12. 12. nAcademy – 12 Septembre 2013 Architecture ➢ GONK ➢ GECKO ✔ Exécution des applications (runtime) ✔ Mécanisme de lancement dans Firefox pour HTML 5, CSS & Javascript ✔ Gestion des API
  13. 13. nAcademy – 12 Septembre 2013 Architecture ➢ GONK ➢ GECKO ➢ GAIA ✔ Interface utilisateur ✔ Construction API Full Web ✔ HTML 5 + open Web
  14. 14. nAcademy – 12 Septembre 2013
  15. 15. nAcademy – 12 Septembre 2013 Application Web
  16. 16. nAcademy – 12 Septembre 2013 Création API ….Neuros <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Neuros sur Firefox OS</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/neuros.css"> </head> <body> <div id="container"> <p>N E U R O S</p> présentation nAcademy </div> </body> </html> p { background: #dddddd; font-weight:bold; color:#FF0000; height:200px; line-height:200px; text-align:center; } #container{ position:absolute; text-align:center; line-height: 200px; position:relative; border:2px solid #000000; vertical-align:center; } Index.html *.css
  17. 17. nAcademy – 12 Septembre 2013 Résultat
  18. 18. nAcademy – 12 Septembre 2013 Manifest.webapp { "version": "1.0", "name": "Neuros", "description": "Neuros sur mobile", "launch_path": "/index.html", "icons": { "16": "/img/icons/neuros-16.png", "48": "/img/icons/neuros-48.png", "128": "/img/icons/neuros-128.png" }, "developer": { "name": "Christophe Villeneuve", "url": "http://www.neuros.fr" }, "installs_allowed_from": ["*"], "appcache_path": "/cache.manifest", "locales": { "fr": { "description": "Neuros sur Firefox OS", "developer": { "url": "http://www.neuros.fr" } } }, "default_locale": "en" }
  19. 19. nAcademy – 12 Septembre 2013 Demo.... simulator https://addons.mozilla.org/fr/firefox/addon/firefox-os-simulator/
  20. 20. nAcademy – 12 Septembre 2013
  21. 21. nAcademy – 12 Septembre 2013 Validateur https://marketplace.firefox.com/developers/validator
  22. 22. nAcademy – 12 Septembre 2013 MarketPlace ✔ 100 % le contrôle ✔ Pas d'intermédiaire ✔ Chez vous ✔ Déporté ✔ Sur la market
  23. 23. nAcademy – 12 Septembre 2013 MarketPlace https://marketplace.firefox.com/
  24. 24. nAcademy – 12 Septembre 2013 Web applications : mode vibreur + Web APIs
  25. 25. nAcademy – 12 Septembre 2013 Vibration // vibre 1 seconde navigator.vibrate(1000); // effet viration (pattern[vibration, pause...] navigator.vibrate ([200,100,200,100]); // vibre 5 secondes navigator.vibrate (5000); // Mode Off pour Vibration navigator.vibrate(0);
  26. 26. nAcademy – 12 Septembre 2013 Composants → Web applications
  27. 27. nAcademy – 12 Septembre 2013 Appareils mobiles ZTE Open Alcatel One touch fire
  28. 28. nAcademy – 12 Septembre 2013 Ete 2013
  29. 29. nAcademy – 12 Septembre 2013 Questions ? URL : http://marketplace.mozilla.org http://www.mozilla.org/firefoxos http://wiki.mozilla.org/Gaia/Hacking Slides originales : Tristan Nitot Robert Nyman

×