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