Your SlideShare is downloading. ×
Firefox OS - HTML5 for a truly world-wide-web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

3,810
views

Published on

Keynote at Codebits in Portugal, April 2014, explaining the how and why of Firefox OS and how to use it. …

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
3,810
On Slideshare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
63
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Christian Heilmann (@codepo8) Sapo Codebits, Lisbon, Portugal, April 2014 FIREFOX OS HTML5 FOR A TRULY WORLD-WIDE-WEB
  • 2. I LIVE BY THE RIVER…
  • 3. PEOPLE ARE BUSY…
  • 4. BENEFITS OF HTML5 ★ In-built distribution - the web ★ Simple technologies used by lots of developers ★ Evolution of existing practices ★ Open, independent, standardised
  • 5. PROMISES OF HTML5
  • 6. LOCKOUT
  • 7. FIXING HTML ISSUES
  • 8. FIREFOX OS
  • 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. "Movistar offers the ZTE Open for €69, including €30 of balance for prepaid customers and a 4GB microSD card"
  • 11. ARCHITECTURE Linux/Gonk (ADB enabled) Gecko rendering engine Third Party HTML5 Apps Web APIs / Web Actitivies GAIA
  • 12. - + =
  • 13. PREDICTABLE HTML5 SUPPORT
  • 14. SECURITY
  • 15. AVOIDING USER OVERLOAD… http://smus.com/installable-webapps/
  • 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. 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. APPLICATIONS
  • 19. PERMISSIONS "permissions": {
 "contacts": {
 "description": "Required for autocompletion in the share screen",
 "access": "readcreate"
 },
 "alarms": {
 "description": "Required to schedule notifications"
 }
 }
  • 20. CROSS-PLATFORM
  • 21. WEB APIS
  • 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. BATTERY STATUS API
  • 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. VIBRATION API
  • 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. NETWORK INFORMATION API
  • 28. NETWORK INFORMATION API var connection = window.navigator.mozConnection,
 online = connection.bandwidth > 0,
 metered = connection.metered;

  • 29. PAGE VISIBILITY
  • 30. PAGE VISIBILITY document.addEventListener("visibilitychange", function () {
 if (document.hidden) {
 console.log("App is hidden");
 }
 else {
 console.log("App has focus");
 }
 });
  • 31. PUSH NOTIFICATIONS
  • 32. WEB APIS (PRIVILEGED APPS) Device Storage API Browser API TCP Socket API Contacts API systemXHR
  • 33. CONTACTS API
  • 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. CERTIFIED APPS = THE OS :)
  • 36. WEB ACTIVITIES
  • 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. APP DISTRIBUTION
  • 39. FIREFOX OS MARKETPLACE https://marketplace.firefox.com/
  • 40. INSTALL FROM THE WEB…
  • 41. DYNAMIC APP WEB SEARCH
  • 42. DEVELOPMENT ENVIRONMENT
  • 43. DEVELOPER ENVIRONMENT
  • 44. FIREFOX OS BOILERPLATE APP https://github.com/robnyman/Firefox-OS-Boilerplate-App
  • 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. BUILDING BLOCKS?
  • 47. CERTIFIED APPS BUILDING BLOCKS http://buildingfirefoxos.com/
  • 48. CERTIFIED APPS BUILDING BLOCKS http://buildingfirefoxos.com/
  • 49. MOZILLA BRICK http://mozilla.github.io/brick/
  • 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. CORDOVA IMPLEMENTATION APIS • Camera • Contacts • Device • Device-motion • Geolocation • Orientation • Vibration
  • 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. 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. WHAT’S COOKING?
  • 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. 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. WHERE TO GET INFO?
  • 58. https://marketplace.firefox.com/developers/ DEVELOPER HUB
  • 59. https://hacks.mozilla.org/category/firefox-os/ MOZILLA DEVELOPER BLOG
  • 60. http://mozilla.github.io/app-basics-videos/ FIREFOX OS VIDEO SERIES
  • 61. https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS FIREFOX OS WIKI
  • 62. TO WRAP UP…
  • 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. THANKS! CHRIS HEILMANN @CODEPO8