Campus party mexico the future of the open web

12,322 views
11,781 views

Published on

Closing keynote at Campus Party Mexico 2014 Day Two

Published in: Technology
2 Comments
94 Likes
Statistics
Notes
No Downloads
Views
Total views
12,322
On SlideShare
0
From Embeds
0
Number of Embeds
1,549
Actions
Shares
0
Downloads
92
Comments
2
Likes
94
Embeds 0
No embeds

No notes for slide

Campus party mexico the future of the open web

  1. Christian Heilmann (@codepo8) Campus Party Mexico (27/06/14, Guadalajara, Mexico) THE FUTURE OF THE OPEN WEB
  2. AT THE START OF MY CAREER…
  3. CHRIS <3 *
  4. I ALWAYS WANTED TO BUILD THINGS
  5. BUT THEY TURNED OUT DIFFERENT
  6. I LOVED TO ASK QUESTIONS
  7. I DIDN’T SEE MUCH FUTURE IN MY TOWN
  8. HELLO WORLD…
  9. HELLO WEB…
  10. HELLO MONEY… +
  11. AND I WAS OUT OF THERE…
  12. THINGS MOVED FAST…
  13. FORM FACTORS CHANGE…
  14. FROM DOCUMENTS TO APPS…
  15. WHAT MAKES A GOOD APP? • focused: fullscreen with a simple interface • mobile: works offline • contained: deleting the icon deletes the app • integrated: works with the OS and has hardware access • responsive and fast: runs smooth, can be killed without taking down the rest of the OS
  16. PROMISES OF HTML5
  17. LOCKOUT
  18. NO FUN FOR YOU!
  19. FIXING HTML ISSUES
  20. FIREFOX OS
  21. ARCHITECTURE Linux/Gonk (ADB enabled) Gecko rendering engine Third Party HTML5 Apps Web APIs / Web Actitivies GAIA
  22. - + =
  23. PREDICTABLE HTML5 SUPPORT
  24. WEB APIS
  25. 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
  26. BATTERY STATUS API
  27. 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); }
  28. SECURITY
  29. AVOIDING USER OVERLOAD… http://smus.com/installable-webapps/
  30. 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"
 }

  31. PERMISSIONS "permissions": {
 "contacts": {
 "description": "Required for autocompletion in the share screen",
 "access": "readcreate"
 },
 "alarms": {
 "description": "Required to schedule notifications"
 }
 }
  32. WHAT MAKES A GREAT HTML5 APP?
  33. DOES ONE THING AND ONE THING WELL!
  34. FOCUSED APPS
  35. WORKS OFFLINE
  36. HELP US MAKE SERVICE WORKER EPIC.
  37. CROSS-PLATFORM
  38. INTEGRATED https://hacks.mozilla.org/2014/03/better-integration-for-open-web-apps-on-android/ https://hacks.mozilla.org/2013/10/progress-report-on-cross-platform-open-web-apps/
  39. ENTER CORDOVA • Camera • Contacts • Device • Device-motion • Geolocation • Orientation • Vibration
  40. EASY DISTRIBUTION
  41. FIREFOX OS MARKETPLACE https://marketplace.firefox.com/
  42. INSTALL FROM THE WEB…
  43. USE WHATEVER EDITOR AND ENVIRONMENT YOU ARE HAPPY WITH!
  44. OR…
  45. OR… https://www.youtube.com/watch?v=n8c34wk4OnY JUST USE FIREFOX!
  46. WHAT’S THE FUTURE OF THE OPEN WEB?
  47. YOU ARE!
  48. TOOLS I’D HAVE KILLED FOR IN THE PAST…
  49. COLLABORATIVE EDUCATION https://www.youtube.com/watch?v=hC9sXz3tRow
  50. THE WEB IS YOURS!
  51. EDUCATE YOURSELF AND OTHERS.
  52. FIGHT FOR YOUR RIGHT TO PUBLISH, SPEAK AND SHARE
  53. #EPNvsInternet
  54. THANKS! CHRIS HEILMANN @CODEPO8

×