1. HTML pour le web mobile
DevFest Nantes
Firefox OS
2014-11-07
Frédéric Harper
Sr. Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
Creative Commons: https://flic.kr/p/iJCHKt

2. Fred, mais quelle
langue parles-tu?

3. Vidéo: www.koreus.com/jeu/
batman-france-quebec.html

4. Creative Commons: http://j.mp/1hCZYIe

5. Creative Commons: http://j.mp/1ljZuJC

8. 38 milliards d’appareils
connectés d’ici 2020
ABI Research - 2013-05-09 - http://j.mp/38billion

9. Creative Commons: http://j.mp/1gP4X4K

11. Firefox OS

13. Construit avec le Web
Utilisant HTML5, CSS3 et JavaScript
avec un nombre d’API
pour développer des applications.

14. C’est open source

15. Quelques faits
• Disponible dans plus de 24 pays
• Visant principalement les marchés
émergents

16. Quelques appareils

22. Une application Firefox OS?
§ Une application “hosted” ou “packaged”
§ Utilisant
§ Vanilla HTML5
§ Librairies…
§ Regular WebAPI
§ Privileged WebAPI
§ Certified WebAPI

23. 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"
}
}
}

24. DÉMO Firefox OS + App Manager
+ Emberjs todomvc

25. Web APIs

26. 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

27. Ambient Light Sensor

28. 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);
});

29. DÉMO Boilerplate – Ambient Light Sensor

30. Battery Status

31. 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);
}

32. DÉMO Boilerplate – Battery status

33. Web APIs – Privileged
• Browser API
• Contacts API
• Device Storage API
• systemXHR
• TCP Socket API
packaged

34. Browser

35. 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>

36. Browser
addEventListener('mozbrowserloadstart', function(e) {
//Ajouter actions ici
});
/*
Valeurs possibles:
"mozbrowserloadstart“ "mozbrowserloadend"
"mozbrowserlocationchange“ "mozbrowsertitlechange"
"mozbrowsericonchange“ "mozbrowsersecuritychange"
"mozbrowsercontextmenu“ "mozbrowsererror"
"mozbrowserkeyevent“ "mozbrowsershowmodalprompt"
"mozbrowseropenwindow“ "mozbrowserclose"
*/

37. 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

38. Web Activities

39. Web Activities
• browse
• configure
• costcontrol
• dial
• open
• pick
• record
• save-bookmark
• share
• view
• update
• new
• mail
• websms/sms
• webcontacts/contact

40. Pick
var activity = new MozActivity({
name: "pick",
data: {
type: "image/jpeg"
}
});

41. 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
};

42. Dial
var call = new MozActivity({
name: "dial",
data: {
number: "+46777888999"
}
});

43. Web Activity Received Handler
"activities": {
"pick": {
"filters": {
"type": ["image/jpeg", "image/png"]
},
"disposition": "inline",
"returnValue": true,
"href": "/index.html#pick"
}
}

44. 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");
}
}
});

45. Creative Commons: http://j.mp/1iZHGAW

46. Creative Commons: https://flic.kr/p/4mJnLg

47. Comment débuter

48. Creative Commons: http://j.mp/1iquK8Q

49. Creative Commons: http://j.mp/Ilm7wx

50. Firefox OS love

51. Implémentations
des extensions
http://mozilla-cordova.github.io/

52. Simple

53. Firefox Web Developer Tools

56. Vers l'infini et plus
loin encore…
Creative Commons: http://j.mp/1gIdcPF

57. 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

58. Prochaine fois que vous
développerez une application…
Pensez à HTML5 & Firefox OS…

59. 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

60. Firefox OS France
http://j.mp/fxOSFrance

61. Frédéric Harper
fharper@mozilla.com
@fharper
http://hacks.mozilla.org
http://outofcomfortzone.net