firefox os, html5 to the next level - python montreal - 2014-05-12
Post on 18-Oct-2014
810 views
DESCRIPTION
If you are like me, your spectrum of interest is large when it comes to technology. You may be a Python developer, but that does not mean you have not any interest in HTML, and it’s a good coincidence as it’s the foundation of my presentation. In this talk, Frédéric Harper will show you how you can use HTML5 with the power of JavaScript to build amazing mobile applications as to brush up what you previously published. Learn about the open web technologies, including WebAPIs, and tools designed to get you started developing HTML apps for Firefox OS, and the web.TRANSCRIPT
![Page 1: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/1.jpg)
Firefox OS
Python Montreal
HTML5 to the next level
2014-05-12
Frédéric Harper
Sr. Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
Crea
tive
Com
mon
s: h
ttps
://b
itly.
com
/Rwa
QxN
![Page 2: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/2.jpg)
print("Sorry, I don’t speak Python")
![Page 3: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/3.jpg)
Creative Commons: http://j.mp/1hCZYIe
![Page 4: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/4.jpg)
Creative Commons: http://j.mp/1ljZuJC
![Page 5: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/5.jpg)
![Page 6: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/6.jpg)
![Page 7: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/7.jpg)
38 billion devices connected in 2020
ABI Research - 2013-05-09 - http://j.mp/38billion
![Page 8: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/8.jpg)
Creative Commons: http://j.mp/1gP4X4K
![Page 9: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/9.jpg)
![Page 10: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/10.jpg)
What you deserve
![Page 11: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/11.jpg)
![Page 12: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/12.jpg)
Built with the Web
Using HTML5, CSS3 and JavaScript
with a number of APIs
to build apps.
![Page 13: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/13.jpg)
It’s open source
![Page 14: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/14.jpg)
Some facts
§ 7 operator (17 committed) & 4 hardware partners
§ ZTE Open, Alcatel One Touch Fire, Geeksphone Keon,
Geeksphone Peak, LG FireWeb…
§ More to come: Flame, Huawei Y300, ZTE Open C,
Alcatel One Touche Fire C & E & S…
§ Aimed at emerging markets/low end market
![Page 15: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/15.jpg)
![Page 16: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/16.jpg)
![Page 17: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/17.jpg)
![Page 18: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/18.jpg)
A Firefox OS app?
§ Creating a hosted or packaged app
§ Using § Vanilla HTML5
§ Librairies…
§ Regular API
§ Privileged API
§ Certified API
![Page 19: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/19.jpg)
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" } }}
![Page 20: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/20.jpg)
DEMO App Manager + Emberjs todomvc
![Page 21: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/21.jpg)
Web APIs
![Page 22: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/22.jpg)
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
![Page 23: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/23.jpg)
Ambient Light Sensor
![Page 24: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/24.jpg)
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);});
![Page 25: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/25.jpg)
DEMO Boilerplate – Ambient Light Sensor
![Page 26: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/26.jpg)
Battery Status
![Page 27: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/27.jpg)
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);}
![Page 28: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/28.jpg)
DEMO Boilerplate – Battery status
![Page 29: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/29.jpg)
Web APIs – Privileged • Browser API • Contacts API • Device Storage API • systemXHR • TCP Socket API
packaged
![Page 30: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/30.jpg)
Browser
![Page 31: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/31.jpg)
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>
![Page 32: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/32.jpg)
Browser
addEventListener('mozbrowserloadstart', function(e) {
//Do stuff});
/*
Possible values:
"mozbrowserloadstart“ "mozbrowserloadend""mozbrowserlocationchange“ "mozbrowsertitlechange"
"mozbrowsericonchange“ "mozbrowsersecuritychange"
"mozbrowsercontextmenu“ "mozbrowsererror""mozbrowserkeyevent“ "mozbrowsershowmodalprompt"
"mozbrowseropenwindow“ "mozbrowserclose"*/
![Page 33: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/33.jpg)
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
![Page 34: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/34.jpg)
Web Activities
![Page 35: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/35.jpg)
Web Activities • browse • configure • costcontrol • dial • Open • new
• mail • websms/sms • webcontacts/contact
• pick • record • save-bookmark • share • view • update
packaged
hosted
![Page 36: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/36.jpg)
Pick var activity = new MozActivity({ name: "pick", //Provide the data required //by the filter of the activity data: { type: "image/jpeg" }});
![Page 37: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/37.jpg)
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};
![Page 38: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/38.jpg)
Dial var call = new MozActivity({ name: "dial", data: { number: "+46777888999" }});
![Page 39: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/39.jpg)
Web Activity Received Handler "activities": { "pick": { "filters": { "type": ["image/jpeg", "image/png"] }, "disposition": "inline", "returnValue": true, "href": "/index.html#pick" }}
![Page 40: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/40.jpg)
Don’t forget to handle it! 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"); } }});
![Page 41: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/41.jpg)
Creative Commons: http://j.mp/1iZHGAW
![Page 42: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/42.jpg)
How to start
![Page 43: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/43.jpg)
Creative Commons: http://j.mp/1iquK8Q
![Page 44: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/44.jpg)
Creative Commons: http://j.mp/Ilm7wx
![Page 45: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/45.jpg)
Cordova & Phonegap
![Page 46: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/46.jpg)
API implementations • Camera • Contacts • Device • Device-motion • Geolocation • Orientation • Vibration
![Page 47: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/47.jpg)
Free phone!
http://j.mp/mozPFA
Creative Commons: https://flic.kr/p/epEL3n
![Page 48: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/48.jpg)
Simplicity…
![Page 49: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/49.jpg)
Firefox Web Developer Tools
![Page 50: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/50.jpg)
![Page 51: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/51.jpg)
![Page 52: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/52.jpg)
![Page 53: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/53.jpg)
Creative Commons: http://j.mp/1gIdcPF
To infinity, and beyond…
![Page 54: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/54.jpg)
More Web APIs & features
• 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
![Page 55: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/55.jpg)
When you’ll build your next app You know you’ll have the API you need using HTML5
![Page 56: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/56.jpg)
Resources 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
![Page 57: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/57.jpg)
Planning to port or build a
Firefox OS app?
Please let me know!
![Page 58: Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12](https://reader034.vdocuments.site/reader034/viewer/2022051512/5442cfe8b1af9f310a8b479b/html5/thumbnails/58.jpg)
http://yuldev.ca