firefox os 1.1 l'autre systeme pour smartphone

34
16/11/13 1/34 Firefox OS L'autre système pour smartphone 1.1

Upload: christophe-villeneuve

Post on 25-Jun-2015

684 views

Category:

Documents


4 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Firefox OS 1.1 L'autre systeme pour smartphone

16/11/13

1/34

Firefox OSL'autre système pour smartphone

1.1

Page 2: Firefox OS 1.1 L'autre systeme pour smartphone

ChristopheVilleneuve

QuiQui

Page 3: Firefox OS 1.1 L'autre systeme pour smartphone

✔ Le pourquoi

✔ Le comment

✔ Structure

✔ Démo

✔ Le +

SommaireSommaire

Page 4: Firefox OS 1.1 L'autre systeme pour smartphone

Apporter l'ouverture du web

pour les appareils mobiles (devices)

Le pourquoiLe pourquoi

Page 5: Firefox OS 1.1 L'autre systeme pour smartphone

AvantAvant

Page 6: Firefox OS 1.1 L'autre systeme pour smartphone

Apple Google Microsoft

De nos joursDe nos jours

Page 7: Firefox OS 1.1 L'autre systeme pour smartphone

En résumé de nos joursEn résumé de nos jours

Page 8: Firefox OS 1.1 L'autre systeme pour smartphone

Web mobileWeb mobile

Page 9: Firefox OS 1.1 L'autre systeme pour smartphone

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

personnalisées et différencier UX

✔ Tout en application Web

DoncDonc

Page 10: Firefox OS 1.1 L'autre systeme pour smartphone
Page 11: Firefox OS 1.1 L'autre systeme pour smartphone

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

GONK

➢GECKO

➢GAIA

Page 12: Firefox OS 1.1 L'autre systeme pour smartphone

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

ArchitectureArchitecture

Page 13: Firefox OS 1.1 L'autre systeme pour smartphone

➢GONK

➢GECKO

✔ Exécution des applications (runtime)

✔ Mécanisme de lancement dans Firefox pour HTML 5, CSS & Javascript

✔ Gestion des API

ArchitectureArchitecture

Page 14: Firefox OS 1.1 L'autre systeme pour smartphone

➢GONK

➢GECKO

➢GAIA

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

ArchitectureArchitecture

Page 15: Firefox OS 1.1 L'autre systeme pour smartphone
Page 16: Firefox OS 1.1 L'autre systeme pour smartphone

Application webApplication web

Page 17: Firefox OS 1.1 L'autre systeme pour smartphone

<!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">

  </head>

  <body>

    <div id="container"> 

        <p>ALCHIMIE</p> 

        X 

    </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 *.cssCréation API... ALCHIMIECréation API... ALCHIMIE

Page 18: Firefox OS 1.1 L'autre systeme pour smartphone

RésultatRésultat

Page 19: Firefox OS 1.1 L'autre systeme pour smartphone

{

  "version": "1.0",

  "name": "ALCHIMIE",

  "description": "Alchimie",

  "launch_path": "/index.html",

  "icons": {

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

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

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

  },

  "developer": {

    "name": "Hello / Sector One",

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

  },

"installs_allowed_from": ["*"],

  "appcache_path": "/cache.manifest",

  "locales": {

    "fr": {

      "description": "Alchimie",

      "developer": {

        "url": "http://www.triplea.fr/alchimie"

      }

    }

  },

  "default_locale": "en"

}

Manifest.webappManifest.webapp

Page 20: Firefox OS 1.1 L'autre systeme pour smartphone

RésultatRésultat

Page 21: Firefox OS 1.1 L'autre systeme pour smartphone

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

Demo... SimulatorDemo... Simulator

Page 22: Firefox OS 1.1 L'autre systeme pour smartphone
Page 23: Firefox OS 1.1 L'autre systeme pour smartphone

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

ValidateurValidateur

Page 24: Firefox OS 1.1 L'autre systeme pour smartphone

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

MarketplaceMarketplace

Page 25: Firefox OS 1.1 L'autre systeme pour smartphone

https://marketplace.firefox.com/

MarketplaceMarketplace

Page 26: Firefox OS 1.1 L'autre systeme pour smartphone

+ Web APIs

Web applications : mode vibreurWeb applications : mode vibreur

Page 27: Firefox OS 1.1 L'autre systeme pour smartphone

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

VibrationVibration

Page 28: Firefox OS 1.1 L'autre systeme pour smartphone

Composants → web applicationsComposants → web applications

Page 29: Firefox OS 1.1 L'autre systeme pour smartphone

1.1

Matériels et ...Matériels et ...

Page 30: Firefox OS 1.1 L'autre systeme pour smartphone

1.11.1● Android 4.0 +

● Basé sur Firefox 24

● Améliorations....

– CSS / HTML / JS

– DOM / mathML

● Des mobiles disponibles

Page 31: Firefox OS 1.1 L'autre systeme pour smartphone

ZTE Open

Alcatel One touch fire

Appareils mobilesAppareils mobiles

Page 32: Firefox OS 1.1 L'autre systeme pour smartphone

Ete 2013Ete 2013

ZTE Open Alcatel One touch fire LG D300 => 2014

Page 33: Firefox OS 1.1 L'autre systeme pour smartphone

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

URL ?URL ?

Page 34: Firefox OS 1.1 L'autre systeme pour smartphone

Sources des slides : 

Tristan NitotRobert Nyman

MerciMerci