Pourquoi Firefox OS ?
Christophe Villeneuve
12 septembre 2013
nAcademy – 12 Septembre 2013
Sommaire
✔
Le pourquoi
✔
Le comment
✔
Structure
✔
Démo
✔
Le +
nAcademy – 12 Septembre 2013
Le pourquoi...
Apporter l'ouverture du web
pour les appareils mobiles (devices)
nAcademy – 12 Septembre 2013
Avant
nAcademy – 12 Septembre 2013
De nos jours
Apple Google Microsoft
nAcademy – 12 Septembre 2013
En résumé... Le futur
nAcademy – 12 Septembre 2013
Web Mobile
nAcademy – 12 Septembre 2013
Donc...
✔
Navigation par onglets
✔
Gestion mémoire
✔
Créer vos applications
personnalisées et...
nAcademy – 12 Septembre 2013
nAcademy – 12 Septembre 2013
https://mdn.mozillademos.org/files/4605/FirefoxOS.png
GONK
➢GECKO
➢GAIA
nAcademy – 12 Septembre 2013
Architecture
GONK
✔
Couche basse
✔
Kernel Linux + Hardware
✔
Abstraction Layer (HAL)
nAcademy – 12 Septembre 2013
Architecture
➢
GONK
➢
GECKO
✔
Exécution des applications
(runtime)
✔
Mécanisme de lancement d...
nAcademy – 12 Septembre 2013
Architecture
➢
GONK
➢
GECKO
➢
GAIA
✔
Interface utilisateur
✔
Construction API Full Web
✔
HTML...
nAcademy – 12 Septembre 2013
nAcademy – 12 Septembre 2013
Application Web
nAcademy – 12 Septembre 2013
Création API ….Neuros
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Neuros sur ...
nAcademy – 12 Septembre 2013
Résultat
nAcademy – 12 Septembre 2013
Manifest.webapp
{
"version": "1.0",
"name": "Neuros",
"description": "Neuros sur mobile",
"la...
nAcademy – 12 Septembre 2013
Demo.... simulator
https://addons.mozilla.org/fr/firefox/addon/firefox-os-simulator/
nAcademy – 12 Septembre 2013
nAcademy – 12 Septembre 2013
Validateur
https://marketplace.firefox.com/developers/validator
nAcademy – 12 Septembre 2013
MarketPlace
✔ 100 % le contrôle
✔ Pas d'intermédiaire
✔ Chez vous
✔ Déporté
✔ Sur la market
nAcademy – 12 Septembre 2013
MarketPlace
https://marketplace.firefox.com/
nAcademy – 12 Septembre 2013
Web applications : mode vibreur
+ Web APIs
nAcademy – 12 Septembre 2013
Vibration
// vibre 1 seconde
navigator.vibrate(1000);
// effet viration (pattern[vibration, p...
nAcademy – 12 Septembre 2013
Composants → Web applications
nAcademy – 12 Septembre 2013
Appareils mobiles
ZTE Open
Alcatel One touch fire
nAcademy – 12 Septembre 2013
Ete 2013
nAcademy – 12 Septembre 2013
Questions ?
URL :
http://marketplace.mozilla.org
http://www.mozilla.org/firefoxos
http://wiki...
Prochain SlideShare
Chargement dans... 5
×

Pourquoi Firefox OS

575

Published on

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

0 commentaires
0 mentions J'aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Be the first to like this

Aucun téléchargement
Vues
Total des vues
575
Sur Slideshare
0
À partir des ajouts
0
Nombre d'ajouts
4
Actions
Partages
0
Téléchargements
8
Commentaires
0
J'aime
0
Ajouts 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×