Download - HTML5 unplugged
HTML5unplugged
Dienstag, 11. Februar 14
The tale of the evernet
Dienstag, 11. Februar 14
The World Wide Web. An evernet?
Dienstag, 11. Februar 14
Dienstag, 11. Februar 14
In der freien Natur weitab von high speed Internet
Dienstag, 11. Februar 14
in Tiefgaragen und anderen unterirdischen Räumen
Dienstag, 11. Februar 14
Auf Reisen im Zug...
Dienstag, 11. Februar 14
Text
...spätestens in Tunnels
Dienstag, 11. Februar 14
beim Sparen von Roamingkosten
Dienstag, 11. Februar 14
Dienstag, 11. Februar 14
OfflineTechnology
Dienstag, 11. Februar 14
das Web wird sesshaft
Dienstag, 11. Februar 14
resources
appcache
app state
localStorage File API Database API*
html, css, js, json, xml, png, mp3,
mp4
data sources
Dienstag, 11. Februar 14
appcache localStorage File API Database API*
Dienstag, 11. Februar 14
Resource cachingDienstag, 11. Februar 14
CACHE MANIFESTindex.htmlstyles.cssapp.js
NETWORK:/service/fahrplan.json
<html manifest="sbb.appcache">
Dienstag, 11. Februar 14
Server Browser
GET /*.* HTTP/1.1
HTTP/1.1 200 OK
GET /sbb.appcache HTTP/1.1
HTTP/1.1 200 OK
GET /index.html HTTP/1.1
HTTP/1.1 200 OK
Dienstag, 11. Februar 14
Server Browser
GET /*.* HTTP/1.1
HTTP/1.1 200 OK
GET /sbb.appcache HTTP/1.1
HTTP/1.1 200 OK
GET /index.html HTTP/1.1
HTTP/1.1 200 OK
GET /index.html HTTP/1.1
HTTP/1.1 200 OK
Dienstag, 11. Februar 14
Server Browser
GET /*.* HTTP/1.1
HTTP/1.1 200 OK
GET /sbb.appcache HTTP/1.1
HTTP/1.1 200 OK
GET /index.html HTTP/1.1
HTTP/1.1 200 OK
GET /styles.css HTTP/1.1
HTTP/1.1 200 OK
GET /index.html HTTP/1.1
HTTP/1.1 200 OK
Dienstag, 11. Februar 14
Server Browser
GET /*.* HTTP/1.1
HTTP/1.1 200 OK
GET /sbb.appcache HTTP/1.1
HTTP/1.1 200 OK
GET /index.html HTTP/1.1
HTTP/1.1 200 OK
GET /styles.css HTTP/1.1
HTTP/1.1 200 OK
GET /index.html HTTP/1.1
HTTP/1.1 200 OK
GET /app.js HTTP/1.1
HTTP/1.1 200 OK
Dienstag, 11. Februar 14
1015 5.11222Mobile Desktop WWW
offline resource cache 64.88%
Dienstag, 11. Februar 14
reloadreloadreload
livedemo
Dienstag, 11. Februar 14
Application stateDienstag, 11. Februar 14
{setLastCheckDate: function() {
localStorage.lastCacheCheck = new Date();console.log(typeof localStorage.lastCacheCheck); // string
},getLastCheckDate: function () {
if (localStorage.lastCacheCheck) {return new Date(localStorage.lastCacheCheck);
} else {return undefined;
} }}
localStorage
Dienstag, 11. Februar 14
var storage = {store: function(name, obj) {
localStorage[name] = JSON.stringify(obj);},read: function (name) {
if (localStorage[name]) {return JSON.parse(localStorage[name]);
} else {return undefined;
} }};
localStorage
Dienstag, 11. Februar 14
815 5.11222Mobile Desktop WWW
localStorage and sessionStorage 91.85%
Dienstag, 11. Februar 14
Data sourcesDienstag, 11. Februar 14
var db = openDatabase("fahrplan", "1.0", "SBB", 50*1024*1024);
db.transaction(function(tx) { tx.executeSql("SELECT * FROM favorite", [], ! ! ! function success (tx, rs) {! ! ! ! callback({! ! ! ! ! connections: rs.rows! ! ! ! });! ! ! },! ! ! function error () {! ! ! ! console.error(arguments);! ! ! }
);});
SQL select
Dienstag, 11. Februar 14
transaction.executeSql(! "INSERT INTO favorite(dep, arrival)" + ! "VALUES (?,?)",
! [! connection.departure, ! connection.arrival],
! successHandler,! errorHandler);
SQL insert
Dienstag, 11. Februar 14
-- 5.11222Mobile Desktop WWW
Web SQL API 45.44%
Dienstag, 11. Februar 14
1015 --22Mobile Desktop WWW
Indexed DB API 17.92%
Dienstag, 11. Februar 14
1015 5.11222Mobile Desktop WWW
Indexed or SQL DB API ~60%
Dienstag, 11. Februar 14
Network monitoringDienstag, 11. Februar 14
window.addEventListener("offline", function(e) { $("#network-monitor").removeClass("online");}, false);
window.addEventListener("online", function(e) { $("#network-monitor").addClass("online");}, false);
var search = function (callback) {
if (navigator.onLine) { $.ajax({success: callback});} else { callback(localStorage.lastSearch);}
}
network state
Dienstag, 11. Februar 14
navigator.connection
navigator.connection.bandwidthnavigator.connection.metered
Dienstag, 11. Februar 14
navigator.connection.type
Connection.UNKNOWNConnection.ETHERNETConnection.WIFIConnection.CELL_2GConnection.CELL_3GConnection.CELL_4GConnection.NONE
Dienstag, 11. Februar 14
// register global ajax handlers $(document).ajaxSuccess(setOnline);$(document).ajaxError(setOffline);
// check for backend server availabiliyvar checkServerAvailability = function (callback) {! $.ajax({! url: "data/probe.json",
! ! dataType: "json",! ! timeout: CONNECTION_TIMEOUT,! ! complete: callback || function () {}! });};
checkServerAvailability();
Server availability
Dienstag, 11. Februar 14
Platformintegration
Dienstag, 11. Februar 14
Safari iOS
Cordova/Worklight
Firefox AndroidFirefox Aurora
Windows RT
OSX Dashboard
stan
dalo
neW
WW
Desktop Mobile
CEF/App.js/Brakets shell Firefox OS
Dienstag, 11. Februar 14
Safari iOS
Cordova/Worklight
Firefox AndroidFirefox Aurora
Windows RT
OSX Dashboard
stan
dalo
neW
WW
Desktop Mobile
CEF/App.js/Brakets shell Firefox OS
standalone
standalone
standalone
Dienstag, 11. Februar 14
Safari iOS
Cordova/Worklight
Firefox AndroidFirefox Aurora
Windows RT
OSX Dashboard
stan
dalo
neW
WW
Desktop Mobile
CEF/App.js/Brakets shell Firefox OS
Appstore
Appstore
Appstore Appstore
Appstore
Appstore
Appstore
standalone
standalone
standalone
Dienstag, 11. Februar 14
Modern Browsers
+ Desktop/Tablet/Phone + Simple Deployment + Bookmark, Favorites, Pinned Site/Tabs+ Browser Home als Einstiegspunkt+ Fullscreen Modus verfügbar
- keine Desktop-Integration- Abhängigkeit vom Browser als Platform
Dienstag, 11. Februar 14
Add to Home Screen
Dienstag, 11. Februar 14
Add to Home Screen
Dienstag, 11. Februar 14
Add to Home Screen
Dienstag, 11. Februar 14
reloadreloadreload
livedemo
Dienstag, 11. Februar 14
iOS und Android Apps
Dienstag, 11. Februar 14
Chromium Embedding Framework
+ Desktop-Integration+ Standalone für Win/Mac/Lin+ einheitliche HTML/JS-Engine
- Installer notwendig- Build- und Konfigurationsskills
Dienstag, 11. Februar 14
Firefox OS/Marketplace
Dienstag, 11. Februar 14
Dienstag, 11. Februar 14
Q&A
thanks for
listening
@marcbaechinger
Browsercoveragedaten: caniuse.com
Dienstag, 11. Februar 14
Backup slides
Dienstag, 11. Februar 14
815 5.11222Mobile Desktop WWW
Wsasx 0.0002%
Dienstag, 11. Februar 14
feature testingDienstag, 11. Februar 14
Sencha Desktop Packager
Dienstag, 11. Februar 14
debug: serving file at: src/index.htmldebug: serving file at: src/sbb.appcachedebug: serving file at: src/css/bootstrap.cssdebug: serving file at: src/css/style.cssdebug: serving file at: src/css/bootstrap-responsive.cssdebug: serving file at: src/lib/jquery-1.8.2.jsdebug: serving file at: src/javascript/main.jsdebug: serving file at: src/img/train.jpg
debug: serving file at: src/lib/jquery-1.8.2.jsdebug: serving file at: src/javascript/main.jsdebug: serving file at: src/img/train.jpgdebug: serving file at: src/css/style.cssdebug: serving file at: src/css/bootstrap.cssdebug: serving file at: src/css/bootstrap-responsive.css
debug: serving file at: src/sbb.appcachedebug: serving file at: src/sbb.appcachedebug: serving file at: src/sbb.appcache
server log
Dienstag, 11. Februar 14
debug: serving file at: src/index.htmldebug: serving file at: src/sbb.appcachedebug: serving file at: src/css/bootstrap.cssdebug: serving file at: src/css/style.cssdebug: serving file at: src/css/bootstrap-responsive.cssdebug: serving file at: src/lib/jquery-1.8.2.jsdebug: serving file at: src/javascript/main.jsdebug: serving file at: src/img/train.jpg
debug: serving file at: src/lib/jquery-1.8.2.jsdebug: serving file at: src/javascript/main.jsdebug: serving file at: src/img/train.jpgdebug: serving file at: src/css/style.cssdebug: serving file at: src/css/bootstrap.cssdebug: serving file at: src/css/bootstrap-responsive.css
debug: serving file at: src/sbb.appcachedebug: serving file at: src/sbb.appcachedebug: serving file at: src/sbb.appcache
server log
Dienstag, 11. Februar 14
debug: serving file at: src/index.htmldebug: serving file at: src/sbb.appcachedebug: serving file at: src/css/bootstrap.cssdebug: serving file at: src/css/style.cssdebug: serving file at: src/css/bootstrap-responsive.cssdebug: serving file at: src/lib/jquery-1.8.2.jsdebug: serving file at: src/javascript/main.jsdebug: serving file at: src/img/train.jpg
debug: serving file at: src/lib/jquery-1.8.2.jsdebug: serving file at: src/javascript/main.jsdebug: serving file at: src/img/train.jpgdebug: serving file at: src/css/style.cssdebug: serving file at: src/css/bootstrap.cssdebug: serving file at: src/css/bootstrap-responsive.css
debug: serving file at: src/sbb.appcachedebug: serving file at: src/sbb.appcachedebug: serving file at: src/sbb.appcache
server log
reload
Dienstag, 11. Februar 14
debug: serving file at: src/index.htmldebug: serving file at: src/sbb.appcachedebug: serving file at: src/css/bootstrap.cssdebug: serving file at: src/css/style.cssdebug: serving file at: src/css/bootstrap-responsive.cssdebug: serving file at: src/lib/jquery-1.8.2.jsdebug: serving file at: src/javascript/main.jsdebug: serving file at: src/img/train.jpg
debug: serving file at: src/lib/jquery-1.8.2.jsdebug: serving file at: src/javascript/main.jsdebug: serving file at: src/img/train.jpgdebug: serving file at: src/css/style.cssdebug: serving file at: src/css/bootstrap.cssdebug: serving file at: src/css/bootstrap-responsive.css
debug: serving file at: src/sbb.appcachedebug: serving file at: src/sbb.appcachedebug: serving file at: src/sbb.appcache
server log
reload
Dienstag, 11. Februar 14
debug: serving file at: src/index.htmldebug: serving file at: src/sbb.appcachedebug: serving file at: src/css/bootstrap.cssdebug: serving file at: src/css/style.cssdebug: serving file at: src/css/bootstrap-responsive.cssdebug: serving file at: src/lib/jquery-1.8.2.jsdebug: serving file at: src/javascript/main.jsdebug: serving file at: src/img/train.jpg
debug: serving file at: src/lib/jquery-1.8.2.jsdebug: serving file at: src/javascript/main.jsdebug: serving file at: src/img/train.jpgdebug: serving file at: src/css/style.cssdebug: serving file at: src/css/bootstrap.cssdebug: serving file at: src/css/bootstrap-responsive.css
debug: serving file at: src/sbb.appcachedebug: serving file at: src/sbb.appcachedebug: serving file at: src/sbb.appcache
server log
reloadreload
Dienstag, 11. Februar 14
debug: serving file at: src/index.htmldebug: serving file at: src/sbb.appcachedebug: serving file at: src/css/bootstrap.cssdebug: serving file at: src/css/style.cssdebug: serving file at: src/css/bootstrap-responsive.cssdebug: serving file at: src/lib/jquery-1.8.2.jsdebug: serving file at: src/javascript/main.jsdebug: serving file at: src/img/train.jpg
debug: serving file at: src/lib/jquery-1.8.2.jsdebug: serving file at: src/javascript/main.jsdebug: serving file at: src/img/train.jpgdebug: serving file at: src/css/style.cssdebug: serving file at: src/css/bootstrap.cssdebug: serving file at: src/css/bootstrap-responsive.css
debug: serving file at: src/sbb.appcachedebug: serving file at: src/sbb.appcachedebug: serving file at: src/sbb.appcache
server log
reloadreload
Dienstag, 11. Februar 14
debug: serving file at: src/index.htmldebug: serving file at: src/sbb.appcachedebug: serving file at: src/css/bootstrap.cssdebug: serving file at: src/css/style.cssdebug: serving file at: src/css/bootstrap-responsive.cssdebug: serving file at: src/lib/jquery-1.8.2.jsdebug: serving file at: src/javascript/main.jsdebug: serving file at: src/img/train.jpg
debug: serving file at: src/lib/jquery-1.8.2.jsdebug: serving file at: src/javascript/main.jsdebug: serving file at: src/img/train.jpgdebug: serving file at: src/css/style.cssdebug: serving file at: src/css/bootstrap.cssdebug: serving file at: src/css/bootstrap-responsive.css
debug: serving file at: src/sbb.appcachedebug: serving file at: src/sbb.appcachedebug: serving file at: src/sbb.appcache
server log
reloadreloadreload
Dienstag, 11. Februar 14
The HTML(5) (r)evolution
Dienstag, 11. Februar 14
• Standardisierung existierender, fortgeschrittener Browserfeatures
• Öffentlichkeitswirksame Promotion der Webtechnologie
• Google, Mozilla, Apple, Opera, Microsoft
• die Gunst der x-platform-Problematik nutzend
• von der Webpage zur Webapplication
• mobile is a game changer
HTML5 is a conspiracy theory!
Dienstag, 11. Februar 14
JavaScript API werden Web Standards
JavaScript APIs
Dienstag, 11. Februar 14
• box-sizing • border-radius• opacity• box-shadow, text-shadow• gradients
• transitions, animations (GPU support) • @media queries
• simplifizierte DOM-Struktur (tables must die!)• skalierbare, hi-res GUIs (no bitmaps)• Responsive Design
CSS3 - runde Ecken machen glücklich
Dienstag, 11. Februar 14
<!DOCTYPE html>
http://www.html5rocks.com
Dienstag, 11. Februar 14
Das Web wurde eine RIA Platform
• Browserkonvergenz auf hohem Niveau
• fortgeschrittener CSS Support
• Offline und Storage features
• Performance- und Reliability-Boost
• Vendor-Kooperation und Ökosystem
• Applikationen statt Websites (shift of mind)
• erprobte MVC-ArchitekturenDienstag, 11. Februar 14
