Closing keynote at Campus Party Mexico 2014 Day Two

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

21. FIREFOX OS

22. ARCHITECTURE
Linux/Gonk (ADB enabled)
Gecko rendering engine
Third Party HTML5 Apps
Web APIs / Web Actitivies
GAIA

23. - + =

24. PREDICTABLE HTML5 SUPPORT

25. WEB APIS

26. 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

27. BATTERY STATUS
API

28. 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);
}

29. SECURITY

30. AVOIDING USER OVERLOAD…
http://smus.com/installable-webapps/

31. 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"
}

32. PERMISSIONS
"permissions": {
"contacts": {
"description": "Required for autocompletion in the share screen",
"access": "readcreate"
},
"alarms": {
"description": "Required to schedule notifications"
}
}

33. WHAT MAKES A GREAT HTML5 APP?

34. DOES ONE THING AND ONE
THING WELL!

35. FOCUSED APPS

36. WORKS OFFLINE

37. HELP US MAKE SERVICE
WORKER EPIC.

38. CROSS-PLATFORM

39. 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/

40. ENTER CORDOVA
• Camera
• Contacts
• Device
• Device-motion
• Geolocation
• Orientation
• Vibration

41. EASY DISTRIBUTION

42. FIREFOX OS MARKETPLACE
https://marketplace.firefox.com/

43. INSTALL FROM THE WEB…

44. USE WHATEVER EDITOR AND
ENVIRONMENT YOU ARE
HAPPY WITH!

45. OR…

46. OR…
https://www.youtube.com/watch?v=n8c34wk4OnY
JUST USE FIREFOX!

47. WHAT’S THE FUTURE OF THE
OPEN WEB?

48. YOU ARE!

49. TOOLS I’D HAVE KILLED FOR IN THE PAST…

50. COLLABORATIVE EDUCATION
https://www.youtube.com/watch?v=hC9sXz3tRow

51. THE WEB IS YOURS!

52. EDUCATE YOURSELF AND
OTHERS.

53. FIGHT FOR YOUR RIGHT TO
PUBLISH, SPEAK AND SHARE

54. #EPNvsInternet

55. THANKS!
CHRIS HEILMANN
@CODEPO8