Christian Heilmann (@codepo8)
Campus Party Mexico
(27/06/14, Guadalajara, Mexico)
THE FUTURE OF
THE OPEN WEB
AT THE START OF MY CAREER…
CHRIS <3 *
I ALWAYS WANTED TO BUILD THINGS
BUT THEY TURNED OUT DIFFERENT
I LOVED TO ASK QUESTIONS
I DIDN’T SEE MUCH FUTURE IN MY TOWN
HELLO WORLD…
HELLO WEB…
HELLO MONEY…
+
AND I WAS OUT OF THERE…
THINGS MOVED FAST…
FORM FACTORS CHANGE…
FROM DOCUMENTS TO APPS…
WHAT MAKES A GOOD APP?
• focused: fullscreen with a simple interface
• mobile: works offline
• contained: deleting the icon ...
PROMISES OF HTML5
LOCKOUT
NO FUN FOR YOU!
FIXING HTML ISSUES
FIREFOX OS
ARCHITECTURE
Linux/Gonk (ADB enabled)
Gecko rendering engine
Third Party HTML5 Apps
Web APIs / Web Actitivies
GAIA
- + =
PREDICTABLE HTML5 SUPPORT
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) + ...
SECURITY
AVOIDING USER OVERLOAD…
http://smus.com/installable-webapps/
APPLICATION MANIFEST
{

"version": "1.0",

"name": "MozillaBall",

"description": "Exciting Open Web development action!",...
PERMISSIONS
"permissions": {

"contacts": {

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

"access": ...
WHAT MAKES A GREAT HTML5 APP?
DOES ONE THING AND ONE
THING WELL!
FOCUSED APPS
WORKS OFFLINE
HELP US MAKE SERVICE
WORKER EPIC.
CROSS-PLATFORM
INTEGRATED
https://hacks.mozilla.org/2014/03/better-integration-for-open-web-apps-on-android/
https://hacks.mozilla.org/20...
ENTER CORDOVA
• Camera
• Contacts
• Device
• Device-motion
• Geolocation
• Orientation
• Vibration
EASY DISTRIBUTION
FIREFOX OS MARKETPLACE
https://marketplace.firefox.com/
INSTALL FROM THE WEB…
USE WHATEVER EDITOR AND
ENVIRONMENT YOU ARE
HAPPY WITH!
OR…
OR…
https://www.youtube.com/watch?v=n8c34wk4OnY
JUST USE FIREFOX!
WHAT’S THE FUTURE OF THE
OPEN WEB?
YOU ARE!
TOOLS I’D HAVE KILLED FOR IN THE PAST…
COLLABORATIVE EDUCATION
https://www.youtube.com/watch?v=hC9sXz3tRow
THE WEB IS YOURS!
EDUCATE YOURSELF AND
OTHERS.
FIGHT FOR YOUR RIGHT TO
PUBLISH, SPEAK AND SHARE
#EPNvsInternet
THANKS!
CHRIS HEILMANN
@CODEPO8
Campus party mexico   the future of the open web
Upcoming SlideShare
Loading in...5
×

Campus party mexico the future of the open web

8,407

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
8,407
On Slideshare
0
From Embeds
0
Number of Embeds
14
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. 1. Christian Heilmann (@codepo8) Campus Party Mexico (27/06/14, Guadalajara, Mexico) THE FUTURE OF THE OPEN WEB
  2. 2. AT THE START OF MY CAREER…
  3. 3. CHRIS <3 *
  4. 4. I ALWAYS WANTED TO BUILD THINGS
  5. 5. BUT THEY TURNED OUT DIFFERENT
  6. 6. I LOVED TO ASK QUESTIONS
  7. 7. I DIDN’T SEE MUCH FUTURE IN MY TOWN
  8. 8. HELLO WORLD…
  9. 9. HELLO WEB…
  10. 10. HELLO MONEY… +
  11. 11. AND I WAS OUT OF THERE…
  12. 12. THINGS MOVED FAST…
  13. 13. FORM FACTORS CHANGE…
  14. 14. FROM DOCUMENTS TO APPS…
  15. 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. 16. PROMISES OF HTML5
  17. 17. LOCKOUT
  18. 18. NO FUN FOR YOU!
  19. 19. FIXING HTML ISSUES
  20. 20. FIREFOX OS
  21. 21. ARCHITECTURE Linux/Gonk (ADB enabled) Gecko rendering engine Third Party HTML5 Apps Web APIs / Web Actitivies GAIA
  22. 22. - + =
  23. 23. PREDICTABLE HTML5 SUPPORT
  24. 24. WEB APIS
  25. 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. 26. BATTERY STATUS API
  27. 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. 28. SECURITY
  29. 29. AVOIDING USER OVERLOAD… http://smus.com/installable-webapps/
  30. 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. 31. PERMISSIONS "permissions": {
 "contacts": {
 "description": "Required for autocompletion in the share screen",
 "access": "readcreate"
 },
 "alarms": {
 "description": "Required to schedule notifications"
 }
 }
  32. 32. WHAT MAKES A GREAT HTML5 APP?
  33. 33. DOES ONE THING AND ONE THING WELL!
  34. 34. FOCUSED APPS
  35. 35. WORKS OFFLINE
  36. 36. HELP US MAKE SERVICE WORKER EPIC.
  37. 37. CROSS-PLATFORM
  38. 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. 39. ENTER CORDOVA • Camera • Contacts • Device • Device-motion • Geolocation • Orientation • Vibration
  40. 40. EASY DISTRIBUTION
  41. 41. FIREFOX OS MARKETPLACE https://marketplace.firefox.com/
  42. 42. INSTALL FROM THE WEB…
  43. 43. USE WHATEVER EDITOR AND ENVIRONMENT YOU ARE HAPPY WITH!
  44. 44. OR…
  45. 45. OR… https://www.youtube.com/watch?v=n8c34wk4OnY JUST USE FIREFOX!
  46. 46. WHAT’S THE FUTURE OF THE OPEN WEB?
  47. 47. YOU ARE!
  48. 48. TOOLS I’D HAVE KILLED FOR IN THE PAST…
  49. 49. COLLABORATIVE EDUCATION https://www.youtube.com/watch?v=hC9sXz3tRow
  50. 50. THE WEB IS YOURS!
  51. 51. EDUCATE YOURSELF AND OTHERS.
  52. 52. FIGHT FOR YOUR RIGHT TO PUBLISH, SPEAK AND SHARE
  53. 53. #EPNvsInternet
  54. 54. 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.

×