Firefox OS:
HTML5 sur les stéroïdes
Frédéric Harper
Sr. Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
HTM...
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
Ce que vous méritez:
HTML5 sur les stéroïdes
Construit avec le Web
Utilisant HTML5, CSS3 et JavaScript
avec un nombre d’API
pour développer des applications.
C’est open source
Architecture
Bénéfices d’HTML5
ü  Distribution intégrée – le Web
ü  Technologies simples utilisées par plusieurs développeurs
ü  Une...
Quelques faits
§  7 opérateurs mobiles & 4 partenaires fabricants
§  ZTE Open, Alcatel One Touch Fire, Geeksphone Keon,
...
Une application Firefox OS?
§  Une application “hosted” ou “packaged”
§  Utilisant
§  Vanilla HTML5
§  Librairies…
§ ...
HTML5 + manifest (JSON) = Firefox OS app
{	
"version": “42",	
"name": ”My amazing app",	
"launch_path": "/index.html",	
"d...
DÉMO App Manager + Emberjs todomvc
Web APIs
Web APIs – Regular
•  Alarm API
•  Ambient light sensor
•  Archive API
•  Battery Status API
•  Geolocation API
•  Indexed...
Ambient Light Sensor
Ambient Light Sensor
window.addEventListener("devicelight", function (event) {	
		
	// The level of the ambient light in l...
DÉMO Boilerplate – Ambient Light Sensor
Battery Status
Battery Status
var battery = navigator.battery;	
	
if (battery) {	
	var batteryLevel = Math.round(battery.level * 100) + "...
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...
Browser
addEventListener('mozbrowserloadstart', function(e) {	
	//Do stuff	
});	
	
/*	
Possible values:	
	"mozbrowserloads...
Web APIs – Certified
•  Camera API
•  Idle API
•  Mobile Connection API
•  Network Stats API
•  Permissions API
•  Power M...
Web Activities
Web Activities
•  browse
•  configure
•  costcontrol
•  dial
•  open
•  pick
•  record
•  save-bookmark
•  share
•  view
•...
Pick
var activity = new MozActivity({	
name: "pick",	
//Provide the data required	
//by the filter of the activity	
data: ...
Pick
activity.onsuccess = function () {	
var img = document.createElement("img");	
	
if (this.result.blob.type.indexOf("im...
Dial
var call = new MozActivity({	
name: "dial",	
data: {	
number: "+46777888999"	
}	
});
new webcontacts/contact
var newContact = new MozActivity({
name: "new",
data: {
type: "webcontacts/contact",
params: {
giv...
Web Activity Received Handler
"activities": {	
"pick": {	
"filters": {	
"type": ["image/jpeg", "image/png"]	
},	
"disposit...
N’oubliez pas de le gérer!
navigator.mozSetMessageHandler('activity', function(activityRequest) { 	
var option = activityR...
Creative Commons: http://j.mp/1iZHGAW
Comment débuter
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) ...
Firefox OS App Manager + Simulator (1.2+)
Firefox Web Developer Tools
DÉMO Déboguer une application Firefox OS
En bonus
Prototypé avec JSFiddle
•  Ajouté /webapp.manifest pour
installer une application dans le
Firefox OS simulator
•  Ajouté /...
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
•...
Prochaine fois que vous
développerez une application…
Pensez au web en premier…
Ressources
Firefox OS Simulator
http://j.mp/fxosSimulator
Firefox OS App Manager
http://j.mp/fxosAppManager
Mozilla Develo...
Vous planifiez
rendre votre
application
disponible sous
Firefox OS ou en
créer une nouvelle?
Faites-moi signe!
http://yuldev.ca
Frédéric Harper
fharper@mozilla.com
@fharper
http://hacks.mozilla.com
http://outofcomfortzone.net
Firefox OS: HTML5 sur les stéroïdes - HTML5mtl - 2014-04-22
Firefox OS: HTML5 sur les stéroïdes - HTML5mtl - 2014-04-22
Firefox OS: HTML5 sur les stéroïdes - HTML5mtl - 2014-04-22
Firefox OS: HTML5 sur les stéroïdes - HTML5mtl - 2014-04-22
Firefox OS: HTML5 sur les stéroïdes - HTML5mtl - 2014-04-22
Firefox OS: HTML5 sur les stéroïdes - HTML5mtl - 2014-04-22
Firefox OS: HTML5 sur les stéroïdes - HTML5mtl - 2014-04-22
Firefox OS: HTML5 sur les stéroïdes - HTML5mtl - 2014-04-22
Firefox OS: HTML5 sur les stéroïdes - HTML5mtl - 2014-04-22
Firefox OS: HTML5 sur les stéroïdes - HTML5mtl - 2014-04-22
Firefox OS: HTML5 sur les stéroïdes - HTML5mtl - 2014-04-22
Firefox OS: HTML5 sur les stéroïdes - HTML5mtl - 2014-04-22
Firefox OS: HTML5 sur les stéroïdes - HTML5mtl - 2014-04-22
Upcoming SlideShare
Loading in …5
×

Firefox OS: HTML5 sur les stéroïdes - HTML5mtl - 2014-04-22

741 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
741
On SlideShare
0
From Embeds
0
Number of Embeds
204
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Firefox OS: HTML5 sur les stéroïdes - HTML5mtl - 2014-04-22

  1. 1. Firefox OS: HTML5 sur les stéroïdes Frédéric Harper Sr. Technical Evangelist @ Mozilla @fharper | outofcomfortzone.net HTML5mtl Montréal, Canada 2014-04-22
  2. 2. Creative Commons: http://j.mp/1ljZuJC
  3. 3. 38 milliards d’appareils connectés d’ici 2020 ABI Research - 2013-05-09 - http://j.mp/38billion
  4. 4. Creative Commons: http://j.mp/1gP4X4K
  5. 5. Ce que vous méritez: HTML5 sur les stéroïdes
  6. 6. Construit avec le Web Utilisant HTML5, CSS3 et JavaScript avec un nombre d’API pour développer des applications.
  7. 7. C’est open source
  8. 8. Architecture
  9. 9. Bénéfices d’HTML5 ü  Distribution intégrée – le Web ü  Technologies simples utilisées par plusieurs développeurs ü  Une évolution des pratiques existantes ü  Ouvert, indépendant, et standardisé
  10. 10. 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
  11. 11. Une application Firefox OS? §  Une application “hosted” ou “packaged” §  Utilisant §  Vanilla HTML5 §  Librairies… §  Regular API §  Privileged API §  Certified API
  12. 12. HTML5 + manifest (JSON) = Firefox OS app { "version": “42", "name": ”My amazing app", "launch_path": "/index.html", "description": ”My super amazing app do super amazing things", "icons": { "16": "/images/logo16.png”,}, "developer": { "name": ”Frédéric Harper", "url": "http://outofcomfortzone.net", }, "default_locale": "en", "permissions": { "geolocation": { "description": ”Get the long/lat of the user" } } }
  13. 13. DÉMO App Manager + Emberjs todomvc
  14. 14. Web APIs
  15. 15. 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
  16. 16. Ambient Light Sensor
  17. 17. Ambient Light Sensor window.addEventListener("devicelight", function (event) { // The level of the ambient light in lux // The lux values for "dim" typically begin below 50, // and the values for "bright" begin above 10000 console.log(event.value); });
  18. 18. DÉMO Boilerplate – Ambient Light Sensor
  19. 19. Battery Status
  20. 20. 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); }
  21. 21. DÉMO Boilerplate – Battery status
  22. 22. Web APIs – Privileged •  Browser API •  Contacts API •  Device Storage API •  systemXHR •  TCP Socket API packaged
  23. 23. Browser
  24. 24. 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=‘yoursite.com' id='browser'></iframe>
  25. 25. Browser addEventListener('mozbrowserloadstart', function(e) { //Do stuff }); /* Possible values: "mozbrowserloadstart“ "mozbrowserloadend" "mozbrowserlocationchange“ "mozbrowsertitlechange" "mozbrowsericonchange“ "mozbrowsersecuritychange" "mozbrowsercontextmenu“ "mozbrowsererror" "mozbrowserkeyevent“ "mozbrowsershowmodalprompt" "mozbrowseropenwindow“ "mozbrowserclose" */
  26. 26. 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
  27. 27. Web Activities
  28. 28. Web Activities •  browse •  configure •  costcontrol •  dial •  open •  pick •  record •  save-bookmark •  share •  view •  update •  new •  mail •  websms/sms •  webcontacts/contact
  29. 29. Pick var activity = new MozActivity({ name: "pick", //Provide the data required //by the filter of the activity data: { type: "image/jpeg" } });
  30. 30. 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 };
  31. 31. Dial var call = new MozActivity({ name: "dial", data: { number: "+46777888999" } });
  32. 32. new webcontacts/contact var newContact = new MozActivity({ name: "new", data: { type: "webcontacts/contact", params: { givenName: "Frédéric", lastName: "Harper", email: ”fharper@mozilla.com", company: "Mozilla" } } });
  33. 33. Web Activity Received Handler "activities": { "pick": { "filters": { "type": ["image/jpeg", "image/png"] }, "disposition": "inline", "returnValue": true, "href": "/index.html#pick" } }
  34. 34. 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("Unable to provide a picture"); } } });
  35. 35. Creative Commons: http://j.mp/1iZHGAW
  36. 36. Comment débuter
  37. 37. Creative Commons: http://j.mp/Ilm7wx
  38. 38. Cordova & Phonegap
  39. 39. API implémentés •  Camera •  Contacts •  Device •  Device-motion •  Geolocation •  Orientation •  Vibration
  40. 40. 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 });
  41. 41. Firefox OS App Manager + Simulator (1.2+)
  42. 42. Firefox Web Developer Tools
  43. 43. DÉMO Déboguer une application Firefox OS
  44. 44. En bonus
  45. 45. 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.
  46. 46. Creative Commons: http://j.mp/1gIdcPF Vers l'infini et plus loin encore…
  47. 47. 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
  48. 48. Prochaine fois que vous développerez une application… Pensez au web en premier…
  49. 49. Ressources Firefox OS Simulator http://j.mp/fxosSimulator Firefox OS App Manager http://j.mp/fxosAppManager 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 FireWatch https://github.com/digitarald/firewatch
  50. 50. Vous planifiez rendre votre application disponible sous Firefox OS ou en créer une nouvelle? Faites-moi signe!
  51. 51. http://yuldev.ca
  52. 52. Frédéric Harper fharper@mozilla.com @fharper http://hacks.mozilla.com http://outofcomfortzone.net

×