Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Firefox OS
Python Montreal
HTML5 to the next level
2014-05-12
Frédéric Harper
Sr. Technical Evangelist @ Mozilla
@fharper ...
print("Sorry, I don’t speak Python")
Creative Commons: http://j.mp/1hCZYIe
Creative Commons: http://j.mp/1ljZuJC
38 billion devices
connected in 2020
ABI Research - 2013-05-09 - http://j.mp/38billion
Creative Commons: http://j.mp/1gP4X4K
What you deserve
Built with the Web
Using HTML5, CSS3 and JavaScript
with a number of APIs
to build apps.
It’s open source
Some facts
§  7 operator (17 committed) & 4 hardware partners
§  ZTE Open, Alcatel One Touch Fire, Geeksphone Keon,
Geek...
A Firefox OS app?
§  Creating a hosted or packaged app
§  Using
§  Vanilla HTML5
§  Librairies…
§  Regular API
§  Pr...
HTML5 + manifest (JSON) = Firefox OS app
{	
"version": “42",	
"name": ”My amazing app",	
"launch_path": "/index.html",	
"d...
DEMO 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...
DEMO Boilerplate – Ambient Light Sensor
Battery Status
Battery Status
var battery = navigator.battery;	
	
if (battery) {	
	var batteryLevel = Math.round(battery.level * 100) + "...
DEMO 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
•  new
•  mail
•  websms/sms
•  webcontacts/contact
•...
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"	
}	
});
Web Activity Received Handler
"activities": {	
"pick": {	
"filters": {	
"type": ["image/jpeg", "image/png"]	
},	
"disposit...
Don’t forget to handle it!
navigator.mozSetMessageHandler('activity', function(activityRequest) { 	
var option = activityR...
Creative Commons: http://j.mp/1iZHGAW
How to start
Creative Commons: http://j.mp/1iquK8Q
Creative Commons: http://j.mp/Ilm7wx
Cordova & Phonegap
API implementations
•  Camera
•  Contacts
•  Device
•  Device-motion
•  Geolocation
•  Orientation
•  Vibration
Free phone!
http://j.mp/mozPFA
Creative Commons: https://flic.kr/p/epEL3n
Simplicity…
Firefox Web Developer Tools
Creative Commons: http://j.mp/1gIdcPF
To infinity, and
beyond…
More Web APIs & features
•  Calendar API
•  FileHandle API Sync API
•  Keyboard/IME API WebRTC
•  HTTP-cache API
•  Peer t...
When you’ll build your next app
You know you’ll have the API you need using HTML5
Resources
Firefox OS Simulator
http://j.mp/fxosSimulator
Firefox OS App Manager
http://j.mp/fxosAppManager
Mozilla Develop...
Planning to port
or build a
Firefox OS app?
Please let me know!
http://yuldev.ca
Frédéric Harper
fharper@mozilla.com
@fharper
http://hacks.mozilla.com
http://outofcomfortzone.net
Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12
Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12
Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12
Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12
Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12
Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12
Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12
Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12
Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12
Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12
Upcoming SlideShare
Loading in …5
×

of

Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 1 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 2 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 3 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 4 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 5 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 6 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 7 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 8 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 9 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 10 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 11 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 12 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 13 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 14 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 15 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 16 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 17 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 18 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 19 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 20 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 21 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 22 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 23 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 24 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 25 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 26 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 27 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 28 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 29 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 30 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 31 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 32 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 33 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 34 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 35 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 36 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 37 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 38 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 39 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 40 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 41 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 42 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 43 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 44 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 45 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 46 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 47 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 48 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 49 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 50 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 51 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 52 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 53 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 54 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 55 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 56 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 57 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 58 Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12 Slide 59
Upcoming SlideShare
Firefox OS Graphics inside
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Firefox OS, HTML5 to the next level - Python Montreal - 2014-05-12

  1. 1. Firefox OS Python Montreal HTML5 to the next level 2014-05-12 Frédéric Harper Sr. Technical Evangelist @ Mozilla @fharper | outofcomfortzone.net CreativeCommons:https://bitly.com/RwaQxN
  2. 2. print("Sorry, I don’t speak Python")
  3. 3. Creative Commons: http://j.mp/1hCZYIe
  4. 4. Creative Commons: http://j.mp/1ljZuJC
  5. 5. 38 billion devices connected in 2020 ABI Research - 2013-05-09 - http://j.mp/38billion
  6. 6. Creative Commons: http://j.mp/1gP4X4K
  7. 7. What you deserve
  8. 8. Built with the Web Using HTML5, CSS3 and JavaScript with a number of APIs to build apps.
  9. 9. It’s open source
  10. 10. 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
  11. 11. A Firefox OS app? §  Creating a hosted or packaged app §  Using §  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. DEMO 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. DEMO 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. DEMO 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 •  new •  mail •  websms/sms •  webcontacts/contact •  pick •  record •  save-bookmark •  share •  view •  update packaged hosted
  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. Web Activity Received Handler "activities": { "pick": { "filters": { "type": ["image/jpeg", "image/png"] }, "disposition": "inline", "returnValue": true, "href": "/index.html#pick" } }
  33. 33. 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"); } } });
  34. 34. Creative Commons: http://j.mp/1iZHGAW
  35. 35. How to start
  36. 36. Creative Commons: http://j.mp/1iquK8Q
  37. 37. Creative Commons: http://j.mp/Ilm7wx
  38. 38. Cordova & Phonegap
  39. 39. API implementations •  Camera •  Contacts •  Device •  Device-motion •  Geolocation •  Orientation •  Vibration
  40. 40. Free phone! http://j.mp/mozPFA Creative Commons: https://flic.kr/p/epEL3n
  41. 41. Simplicity…
  42. 42. Firefox Web Developer Tools
  43. 43. Creative Commons: http://j.mp/1gIdcPF To infinity, and beyond…
  44. 44. 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
  45. 45. When you’ll build your next app You know you’ll have the API you need using HTML5
  46. 46. 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
  47. 47. Planning to port or build a Firefox OS app? Please let me know!
  48. 48. http://yuldev.ca
  49. 49. Frédéric Harper fharper@mozilla.com @fharper http://hacks.mozilla.com http://outofcomfortzone.net

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.

Views

Total views

2,092

On Slideshare

0

From embeds

0

Number of embeds

692

Actions

Downloads

14

Shares

0

Comments

0

Likes

0

×