firefox os 1.1 l'autre systeme pour smartphone

Post on 25-Jun-2015

684 Views

Category:

Documents

4 Downloads

Preview:

Click to see full reader

DESCRIPTION

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

TRANSCRIPT

16/11/13

1/34

Firefox OSL'autre système pour smartphone

1.1

ChristopheVilleneuve

QuiQui

✔ Le pourquoi

✔ Le comment

✔ Structure

✔ Démo

✔ Le +

SommaireSommaire

Apporter l'ouverture du web

pour les appareils mobiles (devices)

Le pourquoiLe pourquoi

AvantAvant

Apple Google Microsoft

De nos joursDe nos jours

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

Web mobileWeb mobile

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

personnalisées et différencier UX

✔ Tout en application Web

DoncDonc

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

GONK

➢GECKO

➢GAIA

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

ArchitectureArchitecture

➢GONK

➢GECKO

✔ Exécution des applications (runtime)

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

✔ Gestion des API

ArchitectureArchitecture

➢GONK

➢GECKO

➢GAIA

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

ArchitectureArchitecture

Application webApplication web

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

RésultatRésultat

{

  "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

RésultatRésultat

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

Demo... SimulatorDemo... Simulator

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

ValidateurValidateur

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

MarketplaceMarketplace

https://marketplace.firefox.com/

MarketplaceMarketplace

+ Web APIs

Web applications : mode vibreurWeb applications : mode vibreur

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

Composants → web applicationsComposants → web applications

1.1

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

1.11.1● Android 4.0 +

● Basé sur Firefox 24

● Améliorations....

– CSS / HTML / JS

– DOM / mathML

● Des mobiles disponibles

ZTE Open

Alcatel One touch fire

Appareils mobilesAppareils mobiles

Ete 2013Ete 2013

ZTE Open Alcatel One touch fire LG D300 => 2014

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 ?

Sources des slides : 

Tristan NitotRobert Nyman

MerciMerci

top related