Christian Heilmann (@codepo8)
Sapo Codebits, Lisbon, Portugal, April 2014
FIREFOX OS
HTML5 FOR A TRULY WORLD-WIDE-WEB
I LIVE BY THE RIVER…
PEOPLE ARE BUSY…
BENEFITS OF HTML5
★ In-built distribution - the web
★ Simple technologies used by lots of
developers
★ Evolution of existi...
PROMISES OF HTML5
LOCKOUT
FIXING HTML ISSUES
FIREFOX OS
SOME FACTS…
★ Released in fourteen countries: Spain, Poland, Venezuela,
Colombia, Peru, Uruguay, Mexico, Brasil (more soon...
"Movistar offers the
ZTE Open for €69,
including €30 of
balance for prepaid
customers and a
4GB microSD card"
ARCHITECTURE
Linux/Gonk (ADB enabled)
Gecko rendering engine
Third Party HTML5 Apps
Web APIs / Web Actitivies
GAIA
- + =
PREDICTABLE HTML5 SUPPORT
SECURITY
AVOIDING USER OVERLOAD…
http://smus.com/installable-webapps/
APPLICATION MANIFEST
{

"version": "1.0",

"name": "MozillaBall",

"description": "Exciting Open Web development action!",...
Privileged Web App
More access, more
responsibility
Web Content
Regular web content
APPLICATIONS
Installed Web App
A regul...
APPLICATIONS
PERMISSIONS
"permissions": {

"contacts": {

"description": "Required for autocompletion in the share screen",

"access": ...
CROSS-PLATFORM
WEB APIS
WEB APIS (FOR ALL)
Vibration API (W3C)
Screen Orientation
Geolocation API
Mouse Lock API (W3C)
Open WebApps
Network Inform...
BATTERY STATUS
API
BATTERY STATUS API
var battery = navigator.battery;

if (battery) {

var batteryLevel = Math.round(battery.level * 100) + ...
VIBRATION API
VIBRATION API
// Vibrate for one second

navigator.vibrate(1000);



// Vibration pattern [vibrationTime, pause,…]

naviga...
NETWORK
INFORMATION API
NETWORK INFORMATION API
var connection = window.navigator.mozConnection,

online = connection.bandwidth > 0,

metered = co...
PAGE VISIBILITY
PAGE VISIBILITY
document.addEventListener("visibilitychange", function () {

if (document.hidden) {

console.log("App is h...
PUSH
NOTIFICATIONS
WEB APIS (PRIVILEGED APPS)
Device Storage API
Browser API
TCP Socket API
Contacts API
systemXHR
CONTACTS API
CONTACTS API
var contact = new mozContact();

contact.init({name: "Tom"});



var request = navigator.mozContacts.save(con...
CERTIFIED APPS = THE OS :)
WEB
ACTIVITIES
GET A PHOTO?
var getphoto = new MozActivity({

name: "pick", 

data: {

type: ["image/png", "image/jpeg"], "image/jpg"]

}...
APP
DISTRIBUTION
FIREFOX OS MARKETPLACE
https://marketplace.firefox.com/
INSTALL FROM THE WEB…
DYNAMIC APP WEB SEARCH
DEVELOPMENT
ENVIRONMENT
DEVELOPER ENVIRONMENT
FIREFOX OS
BOILERPLATE APP
https://github.com/robnyman/Firefox-OS-Boilerplate-App
PROTOTYPING WITH JSFIDDLE
https://hacks.mozilla.org/2013/08/using-jsfiddle-to-prototype-firefox-os-apps/
1. Write your code ...
BUILDING
BLOCKS?
CERTIFIED APPS BUILDING BLOCKS
http://buildingfirefoxos.com/
CERTIFIED APPS BUILDING BLOCKS
http://buildingfirefoxos.com/
MOZILLA BRICK
http://mozilla.github.io/brick/
MOZILLA BRICK
<x-flipbox>
<div>I'm the front face.</div>
<div>And I'm the back face.</div>
</x-flipbox>
!
//JavaScript
tog...
CORDOVA IMPLEMENTATION APIS
• Camera
• Contacts
• Device
• Device-motion
• Geolocation
• Orientation
• Vibration
CORDOVA IMPLEMENTATION APIS
$ sudo npm install -g cordova
$ cordova create hello com.example.hello HelloWorld
$ cd hello
$...
CAMERA API
$ cordova plugin add org.apache.cordova.camera
!
//Cordova code
navigator.camera.getPicture(function (src) {
va...
WHAT’S
COOKING?
MORE WEB APIS…
Resource lock API
UDP Datagram Socket API
Peer to Peer API
WebNFC
WebUSB
HTTP-cache API
Calendar API
Spellc...
APPMAKER!
Resource lock API
UDP Datagram Socket API
Peer to Peer API
WebNFC
WebUSB
HTTP-cache API
Calendar API
Spellcheck ...
WHERE TO
GET INFO?
https://marketplace.firefox.com/developers/
DEVELOPER HUB
https://hacks.mozilla.org/category/firefox-os/
MOZILLA DEVELOPER BLOG
http://mozilla.github.io/app-basics-videos/
FIREFOX OS VIDEO SERIES
https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS
FIREFOX OS WIKI
TO WRAP UP…
https://hacks.mozilla.org/2013/12/write-elsewhere-run-on-firefox/
!
Aquarium Plants (Android w/ hand-coded native wrapper)...
THANKS!
CHRIS HEILMANN
@CODEPO8
Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-web
Upcoming SlideShare
Loading in...5
×

Firefox OS - HTML5 for a truly world-wide-web

4,034

Published on

Keynote at Codebits in Portugal, April 2014, explaining the how and why of Firefox OS and how to use it.
Video: https://videos.sapo.pt/ZYQyY57ZlB6lhgIdBzrs

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

No Downloads
Views
Total Views
4,034
On Slideshare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
66
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Firefox OS - HTML5 for a truly world-wide-web

  1. 1. Christian Heilmann (@codepo8) Sapo Codebits, Lisbon, Portugal, April 2014 FIREFOX OS HTML5 FOR A TRULY WORLD-WIDE-WEB
  2. 2. I LIVE BY THE RIVER…
  3. 3. PEOPLE ARE BUSY…
  4. 4. BENEFITS OF HTML5 ★ In-built distribution - the web ★ Simple technologies used by lots of developers ★ Evolution of existing practices ★ Open, independent, standardised
  5. 5. PROMISES OF HTML5
  6. 6. LOCKOUT
  7. 7. FIXING HTML ISSUES
  8. 8. FIREFOX OS
  9. 9. SOME FACTS… ★ Released in fourteen countries: Spain, Poland, Venezuela, Colombia, Peru, Uruguay, Mexico, Brasil (more soon) ★ Released with 7 mobile operator partners, 3 hardware partners ★ Hardware options: Alcatel One Touch Fire, ZTE Open, Geeksphone Keon, Geeksphone Peak, LG Fireweb… ★ Aimed at emerging markets/low end market ★ Aimed to be an alternative to feature phones and unavailable closed environments. ★ Open source - it is all on GitHub
  10. 10. "Movistar offers the ZTE Open for €69, including €30 of balance for prepaid customers and a 4GB microSD card"
  11. 11. ARCHITECTURE Linux/Gonk (ADB enabled) Gecko rendering engine Third Party HTML5 Apps Web APIs / Web Actitivies GAIA
  12. 12. - + =
  13. 13. PREDICTABLE HTML5 SUPPORT
  14. 14. SECURITY
  15. 15. AVOIDING USER OVERLOAD… http://smus.com/installable-webapps/
  16. 16. APPLICATION MANIFEST {
 "version": "1.0",
 "name": "MozillaBall",
 "description": "Exciting Open Web development action!",
 "icons": {
 "16": "/img/icon-16.png",
 "48": "/img/icon-48.png",
 "128": "/img/icon-128.png"
 },
 "developer": {
 "name": "Mozilla Labs",
 "url": "http://mozillalabs.com"
 },
 "installs_allowed_from": ["*"],
 "appcache_path": "/cache.manifest",
 "locales": {
 "es": {
 "description": "¡Acción abierta emocionante del desarrollo del Web!",
 "developer": {
 "url": "http://es.mozillalabs.com/"
 }
 }
 },
 "default_locale": "en"
 }

  17. 17. Privileged Web App More access, more responsibility Web Content Regular web content APPLICATIONS Installed Web App A regular web app Certified Web App Device-critical applications
  18. 18. APPLICATIONS
  19. 19. PERMISSIONS "permissions": {
 "contacts": {
 "description": "Required for autocompletion in the share screen",
 "access": "readcreate"
 },
 "alarms": {
 "description": "Required to schedule notifications"
 }
 }
  20. 20. CROSS-PLATFORM
  21. 21. WEB APIS
  22. 22. WEB APIS (FOR ALL) Vibration API (W3C) Screen Orientation Geolocation API Mouse Lock API (W3C) Open WebApps Network Information API (W3C) Battery Status API (W3C) Alarm API Web Activities Push Notifications API WebFM API WebPayment IndexedDB (W3C) Ambient light sensor Proximity sensor Notification
  23. 23. BATTERY STATUS API
  24. 24. BATTERY STATUS API var battery = navigator.battery;
 if (battery) {
 var batteryLevel = Math.round(battery.level * 100) + "%",
 charging = (battery.charging)? "" : "not ",
 chargingTime = parseInt(battery.chargingTime / 60, 10),
 dischargingTime = parseInt(battery.dischargingTime / 60, 10);
 
 // Set events
 battery.addEventListener("levelchange", setStatus, false);
 battery.addEventListener("chargingchange", setStatus, false);
 battery.addEventListener("chargingtimechange", setStatus, false);
 battery.addEventListener("dischargingtimechange", setStatus, false); }
  25. 25. VIBRATION API
  26. 26. VIBRATION API // Vibrate for one second
 navigator.vibrate(1000);
 
 // Vibration pattern [vibrationTime, pause,…]
 navigator.vibrate([200, 100, 200, 100]);
 
 // Vibrate for 5 seconds
 navigator.vibrate(5000);
 
 // Turn off vibration
 navigator.vibrate(0);
  27. 27. NETWORK INFORMATION API
  28. 28. NETWORK INFORMATION API var connection = window.navigator.mozConnection,
 online = connection.bandwidth > 0,
 metered = connection.metered;

  29. 29. PAGE VISIBILITY
  30. 30. PAGE VISIBILITY document.addEventListener("visibilitychange", function () {
 if (document.hidden) {
 console.log("App is hidden");
 }
 else {
 console.log("App has focus");
 }
 });
  31. 31. PUSH NOTIFICATIONS
  32. 32. WEB APIS (PRIVILEGED APPS) Device Storage API Browser API TCP Socket API Contacts API systemXHR
  33. 33. CONTACTS API
  34. 34. CONTACTS API var contact = new mozContact();
 contact.init({name: "Tom"});
 
 var request = navigator.mozContacts.save(contact);
 request.onsuccess = function() {
 console.log("Success");
 };
 
 request.onerror = function() {
 console.log("Error")
 };
  35. 35. CERTIFIED APPS = THE OS :)
  36. 36. WEB ACTIVITIES
  37. 37. GET A PHOTO? var getphoto = new MozActivity({
 name: "pick", 
 data: {
 type: ["image/png", "image/jpeg"], "image/jpg"]
 }
 });
 ! getphoto.onsuccess = function () { var img = document.createElement("img"); if (this.result.blob.type.indexOf("image") != -1) { img.src = window.URL.createObjectURL(this.result.blob); } }; getphoto.onerror = function () { // error };
  38. 38. APP DISTRIBUTION
  39. 39. FIREFOX OS MARKETPLACE https://marketplace.firefox.com/
  40. 40. INSTALL FROM THE WEB…
  41. 41. DYNAMIC APP WEB SEARCH
  42. 42. DEVELOPMENT ENVIRONMENT
  43. 43. DEVELOPER ENVIRONMENT
  44. 44. FIREFOX OS BOILERPLATE APP https://github.com/robnyman/Firefox-OS-Boilerplate-App
  45. 45. PROTOTYPING WITH JSFIDDLE https://hacks.mozilla.org/2013/08/using-jsfiddle-to-prototype-firefox-os-apps/ 1. Write your code as a JSFiddle 2. Append /webapp.manifest to your Fiddle URL and paste this link into the Firefox OS simulator to install the app 3. Alternatively, append /fxos.html to your Fiddle URL to get an install page like a typical Firefox OS hosted application
  46. 46. BUILDING BLOCKS?
  47. 47. CERTIFIED APPS BUILDING BLOCKS http://buildingfirefoxos.com/
  48. 48. CERTIFIED APPS BUILDING BLOCKS http://buildingfirefoxos.com/
  49. 49. MOZILLA BRICK http://mozilla.github.io/brick/
  50. 50. MOZILLA BRICK <x-flipbox> <div>I'm the front face.</div> <div>And I'm the back face.</div> </x-flipbox> ! //JavaScript toggleButton.addEventListener("click", function() { flipBox.toggle(); }); http://mozilla.github.io/brick/
  51. 51. CORDOVA IMPLEMENTATION APIS • Camera • Contacts • Device • Device-motion • Geolocation • Orientation • Vibration
  52. 52. CORDOVA IMPLEMENTATION APIS $ sudo npm install -g cordova $ cordova create hello com.example.hello HelloWorld $ cd hello $ cordova platform add firefoxos $ cordova prepare firefoxos
  53. 53. 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 });
  54. 54. WHAT’S COOKING?
  55. 55. MORE WEB APIS… Resource lock API UDP Datagram Socket API Peer to Peer API WebNFC WebUSB HTTP-cache API Calendar API Spellcheck API LogAPI Keyboard/IME API WebRTC FileHandle API Sync API
  56. 56. APPMAKER! Resource lock API UDP Datagram Socket API Peer to Peer API WebNFC WebUSB HTTP-cache API Calendar API Spellcheck API LogAPI Keyboard/IME API WebRTC FileHandle API Sync API
  57. 57. WHERE TO GET INFO?
  58. 58. https://marketplace.firefox.com/developers/ DEVELOPER HUB
  59. 59. https://hacks.mozilla.org/category/firefox-os/ MOZILLA DEVELOPER BLOG
  60. 60. http://mozilla.github.io/app-basics-videos/ FIREFOX OS VIDEO SERIES
  61. 61. https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS FIREFOX OS WIKI
  62. 62. TO WRAP UP…
  63. 63. https://hacks.mozilla.org/2013/12/write-elsewhere-run-on-firefox/ ! Aquarium Plants (Android w/ hand-coded native wrapper) Calc (iOS w/ hand-coded native wrapper) Calcula Hipoteca (Amazon Appstore) Captain Rogers (HTML5 Desktop) Cartelera Panama (Appcelerator Titanium) Fresh Food Finder (PhoneGap) Picross (WebOS) Reditr (Chrome Dev Store) Speed Cube Timer (Blackberry Webworks) Squarez (C++) Touch 12i (Windows Phone/ HTML5) NOTHING IS WASTED…
  64. 64. THANKS! CHRIS HEILMANN @CODEPO8
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×