Campus party mexico the future of the open web

  • 8,003 views
Uploaded on

Closing keynote at Campus Party Mexico 2014 Day Two

Closing keynote at Campus Party Mexico 2014 Day Two

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
8,003
On Slideshare
0
From Embeds
0
Number of Embeds
12

Actions

Shares
Downloads
90
Comments
2
Likes
94

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) 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