Firefox OS, le web de demain - Epita - 2014-06-06
Upcoming SlideShare
Loading in...5
×
 

Firefox OS, le web de demain - Epita - 2014-06-06

on

  • 567 views

HTML5 est un pas de géant dans la bonne direction: il apporte plusieurs fonctionnalités dont les développeurs avaient besoin pour créer plus facilement de meilleures expériences web. Il a aussi ...

HTML5 est un pas de géant dans la bonne direction: il apporte plusieurs fonctionnalités dont les développeurs avaient besoin pour créer plus facilement de meilleures expériences web. Il a aussi fait naitre un débat sans fin: applications natives ou applications web! Lors de cette présentation, Frédéric Harper vous montrera comment le web ouvert peut vous aider à créer des applications mobiles de qualités. Vous en apprendrez plus sur des technologies telles que les WebAPIs, ainsi que les outils qui vous permettront de viser un nouveau marché avec Firefox OS et le web d’aujourd'hui.

Statistics

Views

Total Views
567
Views on SlideShare
433
Embed Views
134

Actions

Likes
0
Downloads
2
Comments
0

9 Embeds 134

http://outofcomfortzone.net 81
https://twitter.com 22
http://feedly.com 11
http://feeds.feedburner.com 8
http://newsblur.com 4
http://www.newsblur.com 4
http://fredericharper.azurewebsites.net 2
http://www.inoreader.com 1
http://0.0.0.0 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Firefox OS, le web de demain - Epita - 2014-06-06 Firefox OS, le web de demain - Epita - 2014-06-06 Presentation Transcript

  • Firefox OS EPITA le web de demain 2014-06-06 Frédéric Harper Sr. Technical Evangelist @ Mozilla @fharper | outofcomfortzone.net CreativeCommons:http://bit.ly/1maOUjx
  • Creative Commons: http://j.mp/1hCZYIe
  • Creative Commons: http://j.mp/1ljZuJC
  • 38 milliards d’appareils connectés d’ici 2020 ABI Research - 2013-05-09 - http://j.mp/38billion
  • Creative Commons: http://j.mp/1gP4X4K
  • Le web de demain… aujourd’hui
  • Quelques faits §  7 opérateurs mobiles & 4 partenaires fabricants §  ZTE Open, Alcatel One Touch Fire, Geeksphone Keon, Geeksphone Peak, LG FireWeb… §  D’autres à venir: Huawei Y300, ZTE Open C, Alcatel One Touche Fire C & E & S… §  Vise les marchés émergents
  • Construit avec le Web Utilisant HTML5, CSS3 et JavaScript avec un nombre d’API pour développer des applications.
  • Bénéfices d’HTML ü  Distribution intégrée – le Web ü  Technologies simples utilisées par plusieurs développeurs ü  Une évolution des pratiques existantes ü  Ouvert, indépendant, et standardisé
  • C’est open source
  • Architecture
  • HTML5 + manifest = une app Firefox OS { "version": “42", "name": ”Mon application", "launch_path": "/index.html", "description": ”Ma super application qui fait des choses fantastiques", "icons": { "16": "/images/logo16.png”,}, "developer": { "name": ”Frédéric Harper", "url": "http://outofcomfortzone.net", }, "default_locale": "en", "permissions": { "geolocation": { "description": ”Obtenir le long/lat de l’utilisateur" } } }
  • DÉMO Firefox OS + App Manager + Emberjs todomvc
  • Une application Firefox OS? §  Une application “hosted” ou “packaged” §  Utilisant §  Vanilla HTML5 §  Librairies… §  Regular WebAPI §  Privileged WebAPI §  Certified WebAPI
  • Web APIs
  • Web APIs – Regular •  Alarm API •  Ambient light sensor •  Archive API •  Battery Status API •  Geolocation API •  IndexedDB •  Network Information API •  Notifications API •  Open WebApps •  Proximity sensor •  Push API •  Screen Orientation •  Vibration API •  Web Activities •  WebFM API •  WebPayment packaged hosted
  • Ambient Light Sensor
  • Ambient Light Sensor window.addEventListener("devicelight", function (event) { // Le niveau de la lumière ambiante en lux // Une lumière ambiante peu lumineuse est habituellement de 50 et moins, // et la valeur pour très lumineux commence aux alentours de 10000 console.log(event.value); });
  • DÉMO Boilerplate – Ambient Light Sensor
  • Battery Status
  • Battery Status var battery = navigator.battery; if (battery) { var batteryLevel = Math.round(battery.level * 100) + "%",   charging = (battery.charging)? “yes" : "no", chargingTime = parseInt(battery.chargingTime / 60, 10, dischargingTime = parseInt(battery.dischargingTime / 60, 10);   battery.addEventListener("levelchange", setStatus, false); battery.addEventListener("chargingchange", setStatus, false); battery.addEventListener("chargingtimechange", setStatus, false); }
  • DÉMO Boilerplate – Battery status
  • Web APIs – Privileged •  Browser API •  Contacts API •  Device Storage API •  systemXHR •  TCP Socket API packaged
  • Browser
  • Browser <div> <span id='location-bar'></span> <button onclick='go_button_clicked()'>Go</button> </div> <div id='load-status'></div> <div id='security-status'></div> <img id='favicon'> <div id='title'></div> <iframe mozbrowser src=‘votresite.com' id='browser'></iframe>
  • Browser addEventListener('mozbrowserloadstart', function(e) { //Ajouter actions ici }); /* Valeurs possibles: "mozbrowserloadstart“ "mozbrowserloadend" "mozbrowserlocationchange“ "mozbrowsertitlechange" "mozbrowsericonchange“ "mozbrowsersecuritychange" "mozbrowsercontextmenu“ "mozbrowsererror" "mozbrowserkeyevent“ "mozbrowsershowmodalprompt" "mozbrowseropenwindow“ "mozbrowserclose" */
  • Web APIs – Certified •  Camera API •  Idle API •  Mobile Connection API •  Network Stats API •  Permissions API •  Power Management API •  Settings API •  Time/Clock API •  Voicemail •  WebBluetooth •  WebSMS •  WebTelephony •  WiFi Information API OS/OEM
  • Web Activities
  • Web Activities •  browse •  configure •  costcontrol •  dial •  open •  pick •  record •  save-bookmark •  share •  view •  update •  new •  mail •  websms/sms •  webcontacts/contact
  • Pick var activity = new MozActivity({ name: "pick", data: { type: "image/jpeg" } });
  • Pick activity.onsuccess = function () { var img = document.createElement("img"); if (this.result.blob.type.indexOf("image") != -1) { img.src = window.URL.createObjectURL(this.result.blob); } }; activity.onerror = function () { //error };
  • Dial var call = new MozActivity({ name: "dial", data: { number: "+46777888999" } });
  • Web Activity Received Handler "activities": { "pick": { "filters": { "type": ["image/jpeg", "image/png"] }, "disposition": "inline", "returnValue": true, "href": "/index.html#pick" } }
  • N’oubliez pas de le gérer! navigator.mozSetMessageHandler('activity', function(activityRequest) { var option = activityRequest.source; if (activityRequest.source.name === "pick") { // Do something to handle the activity if (picture) { activityRequest.postResult(picture); } else { activityRequest.postError(”Impossible de fournir une image"); } } });
  • Creative Commons: http://j.mp/1iZHGAW
  • Comment débuter
  • Creative Commons: http://j.mp/1iquK8Q
  • Creative Commons: http://j.mp/Ilm7wx
  • Cordova & Phonegap
  • API implémentés •  Camera •  Contacts •  Device •  Device-motion •  Geolocation •  Orientation •  Vibration
  • Camera API $ cordova plugin add org.apache.cordova.camera //Cordova code navigator.camera.getPicture(function (src) { var img = document.createElement('img'); img.id = 'slide'; img.src = src; }, function () {}, { destinationType: 1 });
  • Simple
  • Firefox Web Developer Tools
  • DÉMO Déboguer Firefox OS
  • En bonus
  • Prototypé avec JSFiddle •  Ajouté /webapp.manifest pour installer une application dans le Firefox OS simulator •  Ajouté /fxos.html pour obtenir une page d’installation telle une application Firefox OS hosted.
  • Creative Commons: http://j.mp/1gIdcPF Vers l'infini et plus loin encore…
  • Plus d’API Web & fonctionnalités •  Calendar API •  FileHandle API Sync API •  Keyboard/IME API WebRTC •  HTTP-cache API •  Peer to Peer API •  Spellcheck API LogAPI •  Resource lock API •  UDP Datagram Socket API •  WebNFC •  WebUSB
  • Prochaine fois que vous développerez une application… Pensez au web en premier…
  • Téléphone gratuit! http://j.mp/mozFlame Creative Commons: https://flic.kr/p/epEL3n
  • Resources Firefox OS App Manager http://j.mp/fxosAppManager Firefox OS Simulators http://j.mp/FxOSSimulators Firefox OS with Cordova/PhoneGap https://mozilla-cordova.github.io/ Mozilla Developer Network https://developer.mozilla.org StackOverflow forum http://j.mp/fxosStackOverflow Firefox OS Boilerplate http://j.mp/fxosBoilerplate Firefox OS UI Component http://buildingfirefoxos.com/ Mozilla Brick http://j.mp/mozBrick
  • Vous planifiez rendre votre application disponible sous Firefox OS? Faites-moi signe!
  • Frédéric Harper fharper@mozilla.com @fharper http://hacks.mozilla.com http://outofcomfortzone.net