Date post: | 08-Sep-2014 |
Category: |
Technology |
Upload: | christian-heilmann |
View: | 7,612 times |
Download: | 3 times |
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 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
PROMISES OF HTML5
LOCKOUT
NO FUN FOR YOU!
FIXING HTML ISSUES
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 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
BATTERY STATUS API
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); }
SECURITY
AVOIDING USER OVERLOAD…
http://smus.com/installable-webapps/
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" }
PERMISSIONS
"permissions": { "contacts": { "description": "Required for autocompletion in the share screen", "access": "readcreate" }, "alarms": { "description": "Required to schedule notifications" } }
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/2013/10/progress-report-on-cross-platform-open-web-apps/
ENTER CORDOVA
• Camera • Contacts • Device • Device-motion • Geolocation • Orientation • Vibration
EASY DISTRIBUTION
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