1.1
Firefox OS
L'autre système pour smartphone

16/11/13

1/34
Qui

Christophe
Villeneuve
Sommaire
✔

Le pourquoi

✔

Le comment

✔

Structure

✔

Démo

✔

Le +
Le pourquoi

Apporter l'ouverture du web
pour les appareils mobiles (devices)
Avant
De nos jours
Apple

Google

Microsoft
En résumé de nos jours
Web mobile
Donc
✔

Navigation par onglets

✔

Gestion mémoire

✔

✔

Créer vos applications 
personnalisées et 
différencier UX
Tout ...
➢

➢

GAIA

GECKO

GONK

https://mdn.mozillademos.org/files/4605/FirefoxOS.png
Architecture
✔

 Couche basse

✔

 Kernel Linux + Hardware

✔

 Abstraction Layer (HAL) 

GONK
Architecture
✔
➢

GONK

➢

GECKO

 Exécution des applications 

(runtime)
 Mécanisme de lancement dans 
Firefox pour HTML ...
Architecture
➢

GONK

✔

 Interface utilisateur

➢

GECKO

✔

 Construction API Full Web

➢

GAIA

✔

 HTML 5 + open Web
Application web
Création API... ALCHIMIE

Index.html

<!DOCTYPE html>
<html>
  <head>

    <meta charset="utf­8">
    <title>ALCHIMIE sur ...
Résultat
Manifest.webapp
{

"installs_allowed_from": ["*"],

  "version": "1.0",

  "appcache_path": "/cache.manifest",

  "name": ...
Résultat
Demo... Simulator

https://addons.mozilla.org/fr/firefox/addon/firefox-os-simulator/
Validateur

https://marketplace.firefox.com/developers/validator
Marketplace
✔

100 % le contrôle

✔

Pas d'intermédiaire

✔

Chez vous

✔

Déporté

✔

Sur la market
Marketplace

https://marketplace.firefox.com/
Web applications : mode vibreur

+ Web APIs
Vibration
// vibre 1 seconde
navigator.vibrate(1000);
// effet viration (pattern[vibration, pause...]
navigator.vibrate ([...
Composants → web applications
Matériels et ...
1.1
1.1
●

Android 4.0 +

●

Basé sur Firefox 24

●

Améliorations....
–
–

●

CSS / HTML / JS
DOM / mathML

Des mobiles dispo...
Appareils mobiles
Alcatel One touch fire

ZTE Open
Ete 2013

ZTE Open

Alcatel One touch fire

LG D300

=> 2014
URL ?
http://marketplace.mozilla.org
http://www.mozilla.org/firefoxos
http://wiki.mozilla.org/Gaia/Hacking
https://develop...
Merci

Sources des slides : 
Tristan Nitot
Robert Nyman
Firefox OS 1.1 L'autre systeme pour smartphone
Firefox OS 1.1 L'autre systeme pour smartphone
Firefox OS 1.1 L'autre systeme pour smartphone
Upcoming SlideShare
Loading in …5
×

Firefox OS 1.1 L'autre systeme pour smartphone

1,134 views

Published on

Présentation à Alchimie X (novembre 2013) par Christophe Villeneuve (Hello / Sector One)

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,134
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Firefox OS 1.1 L'autre systeme pour smartphone

  1. 1. 1.1 Firefox OS L'autre système pour smartphone 16/11/13 1/34
  2. 2. Qui Christophe Villeneuve
  3. 3. Sommaire ✔ Le pourquoi ✔ Le comment ✔ Structure ✔ Démo ✔ Le +
  4. 4. Le pourquoi Apporter l'ouverture du web pour les appareils mobiles (devices)
  5. 5. Avant
  6. 6. De nos jours Apple Google Microsoft
  7. 7. En résumé de nos jours
  8. 8. Web mobile
  9. 9. Donc ✔ Navigation par onglets ✔ Gestion mémoire ✔ ✔ Créer vos applications  personnalisées et  différencier UX Tout en application Web
  10. 10. ➢ ➢ GAIA GECKO GONK https://mdn.mozillademos.org/files/4605/FirefoxOS.png
  11. 11. Architecture ✔  Couche basse ✔  Kernel Linux + Hardware ✔  Abstraction Layer (HAL)  GONK
  12. 12. Architecture ✔ ➢ GONK ➢ GECKO  Exécution des applications  (runtime)  Mécanisme de lancement dans  Firefox pour HTML 5, CSS &  Javascript ✔ ✔  Gestion des API
  13. 13. Architecture ➢ GONK ✔  Interface utilisateur ➢ GECKO ✔  Construction API Full Web ➢ GAIA ✔  HTML 5 + open Web
  14. 14. Application web
  15. 15. Création API... ALCHIMIE Index.html <!DOCTYPE html> <html>   <head>     <meta charset="utf­8">     <title>ALCHIMIE sur Firefox OS</title>     <meta name="viewport"  content="width=device­width">     <link rel="stylesheet" href="css/osdc.css"> p {  background: #dddddd; font­weight:bold; color:#FF0000; height:200px; line­height:200px; text­align:center; }   </head>   <body>     <div id="container">          <p>ALCHIMIE</p>          X  #container{  position:absolute;   text­align:center; line­height: 200px; position:relative;     </div>                border:2px solid #000000;     </body> vertical­align:center; </html> }  *.css
  16. 16. Résultat
  17. 17. Manifest.webapp { "installs_allowed_from": ["*"],   "version": "1.0",   "appcache_path": "/cache.manifest",   "name": "ALCHIMIE",   "description": "Alchimie",   "launch_path": "/index.html",   "icons": {   "locales": {     "fr": {       "description": "Alchimie",     "16": "/img/icons/alchimie­16.png",       "developer": {     "48": "/img/icons/alchimie­48.png",         "url": "http://www.triplea.fr/alchimie"     "128": "/img/icons/alchimie­128.png"       }   },   "developer": {     "name": "Hello / Sector One",     "url": "http://www.hello­design.fr"   },     }   },   "default_locale": "en" }
  18. 18. Résultat
  19. 19. Demo... Simulator https://addons.mozilla.org/fr/firefox/addon/firefox-os-simulator/
  20. 20. Validateur https://marketplace.firefox.com/developers/validator
  21. 21. Marketplace ✔ 100 % le contrôle ✔ Pas d'intermédiaire ✔ Chez vous ✔ Déporté ✔ Sur la market
  22. 22. Marketplace https://marketplace.firefox.com/
  23. 23. Web applications : mode vibreur + Web APIs
  24. 24. 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);
  25. 25. Composants → web applications
  26. 26. Matériels et ... 1.1
  27. 27. 1.1 ● Android 4.0 + ● Basé sur Firefox 24 ● Améliorations.... – – ● CSS / HTML / JS DOM / mathML Des mobiles disponibles
  28. 28. Appareils mobiles Alcatel One touch fire ZTE Open
  29. 29. Ete 2013 ZTE Open Alcatel One touch fire LG D300 => 2014
  30. 30. URL ? http://marketplace.mozilla.org http://www.mozilla.org/firefoxos http://wiki.mozilla.org/Gaia/Hacking https://developer.mozilla.org/en­US/docs/Mozilla/Firefox_OS
  31. 31. Merci Sources des slides :  Tristan Nitot Robert Nyman

×