• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,636
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
29
Comments
0
Likes
4

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. Mozilla, Firefox OS & the Open Web
  • 2. @robertnyman
  • 3. Mozilla is aglobal non-profit dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for thepublic good
  • 4. Building for mobile
  • 5. Using HTML5, CSS andJavaScript together with anumber of APIs to buildapps and customize the UI.Firefox OS
  • 6. A walk in the park
  • 7. Build excellent interfaces!
  • 8. Packaged vs. Hosted Apps
  • 9. WebAPIs
  • 10. Security Levels
  • 11. Web ContentRegular web contentInstalled Web AppA regular web appPrivileged Web AppMore access, more responsibilityCertified Web AppDevice-critical applications
  • 12. https://wiki.mozilla.org/WebAPI#Planned_for_initial_release_of_B2G_.28aka_Basecamp.29
  • 13. "permissions": {"contacts": {"description": "Required for autocompletion in the share screen","access": "readcreate"},"alarms": {"description": "Required to schedule notifications"}}
  • 14. PERMISSIONS
  • 15. Vibration API (W3C)Screen OrientationGeolocation APIMouse Lock API (W3C)Open WebAppsNetwork Information API (W3C)Battery Status API (W3C)Alarm APIWeb ActivitiesPush Notifications APIWebFM APIWebPaymentIndexedDB (W3C)Ambient light sensorProximity sensorNotificationREGULAR APIS
  • 16. BATTERY STATUSAPI
  • 17. 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 eventsbattery.addEventListener("levelchange", setStatus, false);battery.addEventListener("chargingchange", setStatus, false);battery.addEventListener("chargingtimechange", setStatus, false);battery.addEventListener("dischargingtimechange", setStatus, false);}
  • 18. SCREENORIENTATION API
  • 19. // Portrait mode:screen.mozLockOrientation("portrait");/*Possible values:"landscape""portrait""landscape-primary""landscape-secondary""portrait-primary""portrait-secondary"*/
  • 20. VIBRATION API
  • 21. // Vibrate for one secondnavigator.vibrate(1000);// Vibration pattern [vibrationTime, pause,…]navigator.vibrate([200, 100, 200, 100]);// Vibrate for 5 secondsnavigator.vibrate(5000);// Turn off vibrationnavigator.vibrate(0);
  • 22. DEVICEPROXIMITY
  • 23. window.addEventListener("deviceproximity", function (event) {// Current device proximity, in centimetersconsole.log(event.value);// The maximum sensing distance the sensor is// able to report, in centimetersconsole.log(event.max);// The minimum sensing distance the sensor is// able to report, in centimetersconsole.log(event.min);});
  • 24. AMBIENT LIGHTEVENTS
  • 25. window.addEventListener("devicelight", function (event) {// The level of the ambient light in luxconsole.log(event.value);});
  • 26. window.addEventListener("devicelight", function (event) {// The lux values for "dim" typically begin below 50,// and the values for "bright" begin above 10000console.log(event.value);});
  • 27. Device Storage APIBrowser APITCP Socket APIContacts APIsystemXHRPRIVILEGED APIS
  • 28. DEVICE STORAGEAPI
  • 29. var deviceStorage = navigator.getDeviceStorage("videos");
  • 30. // "external", "shared", or "default".deviceStorage.type;// Add a file - returns DOMRequest with file namedeviceStorage.add(blob);// Same as .add, with provided namedeviceStorage.addNamed(blob, name);// Returns DOMRequest/non-editable File objectdeviceStorage.get(name);// Returns editable FileHandle objectdeviceStorage.getEditable(name);// Returns DOMRequest with success or failuredeviceStorage.delete(name);// Enumerates filesdeviceStorage.enumerate([directory]);// Enumerates files as FileHandlesdeviceStorage.enumerateEditable([directory]);
  • 31. var storage = navigator.getDeviceStorage("videos"),cursor = storage.enumerate();cursor.onerror = function() {console.error("Error in DeviceStorage.enumerate()", cursor.error.name);};cursor.onsuccess = function() {if (!cursor.result)return;var file = cursor.result;// If this isnt a video, skip itif (file.type.substring(0, 6) !== "video/") {cursor.continue();return;}// If it isnt playable, skip itvar testplayer = document.createElement("video");if (!testplayer.canPlayType(file.type)) {cursor.continue();return;}};
  • 32. WEB ACTIVITIES
  • 33. Interacting with the camera
  • 34. var activity = new MozActivity({name: "view",data: {type: "image/png",url: ...}});activity.onsuccess = function () {console.log("Showing the image!");};activity.onerror = function () {console.log("Cant view the image!");};
  • 35. {"activities": {"share": {"filters": {"type": ["image/png", "image/gif"]}"href": "sharing.html","disposition": "window"}}}
  • 36. navigator.mozSetMessageHandler("activity", function (a) {var img = getImageObject();img.src = a.source.url;// Call a.postResult() or a.postError() if// the activity should return a value});
  • 37. Future APIs
  • 38. Resource lock APIUDP Datagram Socket APIPeer to Peer APIWebNFCWebUSBHTTP-cache APICalendar APISpellcheck APILogAPIKeyboard/IME APIWebRTCFileHandle APISync API
  • 39. Games!
  • 40. Web Apps from Mozilla
  • 41. DialerContactsSettingsSMSWeb browserGalleryVideo PlayerMusic PlayerE-mail (POP, IMAP)CalendarAlarm ClockCameraNotesFirst Run ExperienceNotificationsHome ScreenMozilla MarketplaceSystem UpdaterLocalization Support
  • 42. Get started
  • 43. https://addons.mozilla.org/firefox/addon/firefox-os-simulator/
  • 44. FIREFOX OSBOILERPLATE APPhttps://github.com/robnyman/Firefox-OS-Boilerplate-App
  • 45. Help each other
  • 46. Go have some fun!
  • 47. Robert Nymanrobertnyman.comrobert@mozilla.comMozilla@robertnyman