firefox os - l'autre système pour smartphone

32
Firefox OS L'autre système pour smartphone Christophe Villeneuve @hellosct1

Upload: christophe-villeneuve

Post on 25-Jun-2015

454 views

Category:

Documents


0 download

DESCRIPTION

Présentation effectuée à l'OSDC & Open World Forum 2013 - Track Code par Christophe Villeneuve

TRANSCRIPT

Page 1: Firefox OS - l'autre système pour smartphone

Firefox OSL'autre système pour smartphone

Christophe Villeneuve

@hellosct1

Page 2: Firefox OS - l'autre système pour smartphone

ChristopheVilleneuve

Qui ?

Page 3: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

✔ Le pourquoi✔ Le comment✔ Structure✔ Démo✔ Le +

Sommaire

Page 4: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

Apporter l'ouverture du web

pour les appareils mobiles (devices)

Le pourquoi

Page 5: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

Avant

Page 6: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

Apple Google Microsoft

De nos jours

Page 7: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

En résumé de nos jours

Page 8: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

Web mobile

Page 9: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

✔ Navigation par onglets✔ Gestion mémoire✔ Créer vos applications 

personnalisées et différencier UX

✔ Tout en application Web

Donc

Page 10: Firefox OS - l'autre système pour smartphone
Page 11: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

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

GONK

➢GECKO

➢GAIA

Page 12: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

GONK✔ Couche basse✔ Kernel Linux + Hardware✔ Abstraction Layer (HAL) 

Architecture

Page 13: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

➢GONK➢GECKO

✔ Exécution des applications (runtime)✔ Mécanisme de lancement dans Firefox pour HTML 5, CSS & Javascript✔ Gestion des API

Architecture

Page 14: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

➢GONK➢GECKO➢GAIA

✔ Interface utilisateur✔ Construction API Full Web✔ HTML 5 + open Web

Architecture

Page 15: Firefox OS - l'autre système pour smartphone
Page 16: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

Application web

Page 17: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf­8">

    <title>OSDC sur Firefox OS</title>

    <meta name="viewport" content="width=device­width">

    <link rel="stylesheet" href="css/osdc.css">

  </head>

  <body>

    <div id="container"> 

        <p>OSDC</p> 

        Open World Forum 2013 

    </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

Création API... OSDC

Page 18: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

Résultat

Page 19: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

{

  "version": "1.0",

  "name": "OSDC",

  "description": "OSDC sur Firefox OS",

  "launch_path": "/index.html",

  "icons": {

    "16": "/img/icons/osdc­16.png",

    "48": "/img/icons/osdc­48.png",

    "128": "/img/icons/osdc­128.png"

  },

  "developer": {

    "name": "Hello / Sector One",

    "url": "http://www.hello­design.fr"

  },

  "installs_allowed_from": ["*"],

  "appcache_path": "/cache.manifest",

  "locales": {

    "fr": {

      "description": "OSDC",

      "developer": {

        "url": "http://www.osdc.fr"

      }

    }

  },

  "default_locale": "en"

}

Manifest.webapp

Page 20: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

Résultat

Page 21: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

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

Demo... Simulator

Page 22: Firefox OS - l'autre système pour smartphone
Page 23: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

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

Validateur

Page 24: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

✔ 100 % le contrôle✔ Pas d'intermédiaire✔ Chez vous✔ Déporté✔ Sur la market

Marketplace

Page 25: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

https://marketplace.firefox.com/

Marketplace

Page 26: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

+ Web APIs

Web applications : mode vibreur

Page 27: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

// vibre 1 secondenavigator.vibrate(1000);

// effet viration (pattern[vibration, pause...]navigator.vibrate ([200,100,200,100]); 

// vibre 5 secondesnavigator.vibrate (5000);

// Mode Off pour Vibrationnavigator.vibrate(0);

Vibration

Page 28: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

Composants → web applications

Page 29: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

ZTE Open

Alcatel One touch fire

Appareils mobiles

Page 30: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

Ete 2013

Page 31: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

http://marketplace.mozilla.org

http://www.mozilla.org/firefoxos

http://wiki.mozilla.org/Gaia/Hacking

URL ?

Page 32: Firefox OS - l'autre système pour smartphone

Le 5 octobre 2013

Sources des slides : 

Tristan NitotRobert Nyman

Merci