Downloaded 14 times
![localStorage
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;
}
}
};
Dienstag, 11. Februar 14](https://image.slidesharecdn.com/sbb-talk-140211142545-phpapp01/85/HTML5-unplugged-25-320.jpg)
![SQL select
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);
! ! ! }
);
});
Dienstag, 11. Februar 14](https://image.slidesharecdn.com/sbb-talk-140211142545-phpapp01/85/HTML5-unplugged-28-320.jpg)
![SQL insert
transaction.executeSql(
! "INSERT INTO favorite(dep, arrival)" +
! "VALUES (?,?)",
! [
! connection.departure,
! connection.arrival
],
! successHandler,
! errorHandler
);
Dienstag, 11. Februar 14](https://image.slidesharecdn.com/sbb-talk-140211142545-phpapp01/85/HTML5-unplugged-29-320.jpg)
Uploaded byMarc Bächinger
HTML5 unplugged
Talk von SBB Developer Day 2012 über HTML5 Applikationen Offline-Applikationen
HTML5 unplugged
- 1.
- 2. The tale ofthe evernet Dienstag, 11. Februar 14
- 3. The World WideWeb. An evernet? Dienstag, 11. Februar 14
- 4.
- 5. In der freienNatur weitab von high speed Internet Dienstag, 11. Februar 14
- 6. in Tiefgaragen und anderenunterirdischen Räumen Dienstag, 11. Februar 14
- 7. Auf Reisen imZug... Dienstag, 11. Februar 14
- 8. Text ...spätestens in Tunnels Dienstag,11. Februar 14
- 9. beim Sparen vonRoamingkosten Dienstag, 11. Februar 14
- 10.
- 11.
- 12. das Web wirdsesshaft Dienstag, 11. Februar 14
- 13. resources app state data sources html,css, js, json, xml, png, mp3, mp4 appcache Dienstag, 11. Februar 14 localStorage File API Database API*
- 14. appcache Dienstag, 11. Februar14 localStorage File API Database API*
- 15. Resource caching Dienstag, 11.Februar 14
- 16.
- 17. Server Browser GET /index.html HTTP/1.1 HTTP/1.1200 OK GET /*.* HTTP/1.1 HTTP/1.1 200 OK GET /sbb.appcache HTTP/1.1 HTTP/1.1 200 OK Dienstag, 11. Februar 14
- 18. Server Browser GET /index.html HTTP/1.1 HTTP/1.1200 OK 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
- 19. Server Browser GET /index.html HTTP/1.1 HTTP/1.1200 OK 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 Dienstag, 11. Februar 14
- 20. Server Browser GET /index.html HTTP/1.1 HTTP/1.1200 OK 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 /app.js HTTP/1.1 HTTP/1.1 200 OK Dienstag, 11. Februar 14
- 21. offline resource cache 64.88% 2215 12 5.1 10 Mobile Dienstag, 11. Februar 14 Desktop WWW
- 22. live reload demo reload reload Dienstag,11. Februar 14
- 23. Application state Dienstag, 11.Februar 14
- 24. localStorage { 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; } } } Dienstag, 11. Februar 14
- 25. localStorage 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; } } }; Dienstag, 11. Februar 14
- 26. localStorage and sessionStorage 91.85% 2215 12 5.1 8 Mobile Dienstag, 11. Februar 14 Desktop WWW
- 27. Data sources Dienstag, 11.Februar 14
- 28. SQL select 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); ! ! ! } ); }); Dienstag, 11. Februar 14
- 29. SQL insert transaction.executeSql( ! "INSERTINTO favorite(dep, arrival)" + ! "VALUES (?,?)", ! [ ! connection.departure, ! connection.arrival ], ! successHandler, ! errorHandler ); Dienstag, 11. Februar 14
- 30. 45.44% Web SQL API 22 Mobile Dienstag,11. Februar 14 - 12 5.1 Desktop - WWW
- 31. Indexed DB API 2215 Mobile Dienstag, 11. Februar 14 17.92% Desktop - 10 WWW
- 32. Indexed or SQLDB API ~60% 22 15 12 5.1 10 Mobile Dienstag, 11. Februar 14 Desktop WWW
- 33. Network monitoring Dienstag, 11.Februar 14
- 34. network state 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); } } Dienstag, 11. Februar 14
- 35.
- 36.
- 37. Server availability // registerglobal ajax handlers $(document).ajaxSuccess(setOnline); $(document).ajaxError(setOffline); // check for backend server availabiliy var checkServerAvailability = function (callback) { ! $.ajax({ ! url: "data/probe.json", ! ! dataType: "json", ! ! timeout: CONNECTION_TIMEOUT, ! ! complete: callback || function () {} ! }); }; checkServerAvailability(); Dienstag, 11. Februar 14
- 38.
- 39. WWW Cordova/ Worklight Windows RT Safari iOS FirefoxAurora Firefox Android CEF/App.js/ Brakets shell Dienstag, 11. Februar 14 Mobile OSX Dashboard standalone Desktop Firefox OS
- 40. Desktop Mobile standalone standalone OSX Dashboard Cordova/ Worklight Windows RT SafariiOS Firefox Aurora Firefox Android standalone WWW CEF/App.js/ Brakets shell Dienstag, 11. Februar 14 standalone Firefox OS
- 41. Desktop Mobile standalone Cordova/ Worklight standalone OSX Dashboard Appstore Windows RT SafariiOS Appstore standalone WWW CEF/App.js/ Brakets shell Appstore Appstore Firefox Android Firefox Aurora standalone Dienstag, 11. Februar 14 Appstore Appstore Firefox OS Appstore
- 42. Modern Browsers + + + + + Dienstag, 11.Februar 14 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
- 43. Add to HomeScreen Dienstag, 11. Februar 14
- 44. Add to HomeScreen Dienstag, 11. Februar 14
- 45. Add to HomeScreen Dienstag, 11. Februar 14
- 46. live reload demo reload reload Dienstag,11. Februar 14
- 47. iOS und AndroidApps Dienstag, 11. Februar 14
- 48. Chromium Embedding Framework + + + Dienstag, 11.Februar 14 Desktop-Integration Standalone für Win/Mac/Lin einheitliche HTML/JS-Engine Installer notwendig Build- und Konfigurationsskills
- 49. Firefox OS/ Marketplace Dienstag, 11.Februar 14
- 50.
- 51. @marcbaechinger ks for tha n ening list Q&A Browsercoveragedaten:caniuse.com Dienstag, 11. Februar 14
- 52. Backup slides Dienstag, 11.Februar 14
- 53. Wsasx 0.0002% 22 15 125.1 8 Mobile Dienstag, 11. Februar 14 Desktop WWW
- 54. feature testing Dienstag, 11.Februar 14
- 55. Sencha Desktop Packager Dienstag, 11.Februar 14
- 56. server log debug: debug: debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving serving serving file file file file file file file file at: at: at: at: at: at: at: at: src/index.html src/sbb.appcache src/css/bootstrap.css src/css/style.css src/css/bootstrap-responsive.css src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving file file file file file file at: at: at: at: at: at: src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg src/css/style.css src/css/bootstrap.css src/css/bootstrap-responsive.css debug: debug: debug: serving fileat: serving file at: serving file at: Dienstag, 11. Februar 14 src/sbb.appcache src/sbb.appcache src/sbb.appcache
- 57. server log debug: debug: debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving serving serving file file file file file file file file at: at: at: at: at: at: at: at: src/index.html src/sbb.appcache src/css/bootstrap.css src/css/style.css src/css/bootstrap-responsive.css src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving file file file file file file at: at: at: at: at: at: src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg src/css/style.css src/css/bootstrap.css src/css/bootstrap-responsive.css debug: debug: debug: serving fileat: serving file at: serving file at: Dienstag, 11. Februar 14 src/sbb.appcache src/sbb.appcache src/sbb.appcache
- 58. server log debug: debug: debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving serving serving file file file file file file file file at: at: at: at: at: at: at: at: src/index.html src/sbb.appcache src/css/bootstrap.css src/css/style.css src/css/bootstrap-responsive.css src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving file file file file file file at: at: at: at: at: at: src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg src/css/style.css src/css/bootstrap.css src/css/bootstrap-responsive.css debug: debug: debug: serving fileat: serving file at: serving file at: Dienstag, 11. Februar 14 src/sbb.appcache src/sbb.appcache src/sbb.appcache reload
- 59. server log debug: debug: debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving serving serving file file file file file file file file at: at: at: at: at: at: at: at: src/index.html src/sbb.appcache src/css/bootstrap.css src/css/style.css src/css/bootstrap-responsive.css src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving file file file file file file at: at: at: at: at: at: src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg src/css/style.css src/css/bootstrap.css src/css/bootstrap-responsive.css debug: debug: debug: serving fileat: serving file at: serving file at: Dienstag, 11. Februar 14 src/sbb.appcache src/sbb.appcache src/sbb.appcache reload
- 60. server log debug: debug: debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving serving serving file file file file file file file file at: at: at: at: at: at: at: at: src/index.html src/sbb.appcache src/css/bootstrap.css src/css/style.css src/css/bootstrap-responsive.css src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving file file file file file file at: at: at: at: at: at: src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg src/css/style.css src/css/bootstrap.css src/css/bootstrap-responsive.css debug: debug: debug: serving fileat: serving file at: serving file at: Dienstag, 11. Februar 14 src/sbb.appcache src/sbb.appcache src/sbb.appcache reload reload
- 61. server log debug: debug: debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving serving serving file file file file file file file file at: at: at: at: at: at: at: at: src/index.html src/sbb.appcache src/css/bootstrap.css src/css/style.css src/css/bootstrap-responsive.css src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving file file file file file file at: at: at: at: at: at: src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg src/css/style.css src/css/bootstrap.css src/css/bootstrap-responsive.css debug: debug: debug: serving fileat: serving file at: serving file at: Dienstag, 11. Februar 14 src/sbb.appcache src/sbb.appcache src/sbb.appcache reload reload
- 62. server log debug: debug: debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving serving serving file file file file file file file file at: at: at: at: at: at: at: at: src/index.html src/sbb.appcache src/css/bootstrap.css src/css/style.css src/css/bootstrap-responsive.css src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg debug: debug: debug: debug: debug: debug: serving serving serving serving serving serving file file file file file file at: at: at: at: at: at: src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg src/css/style.css src/css/bootstrap.css src/css/bootstrap-responsive.css debug: debug: debug: serving fileat: serving file at: serving file at: Dienstag, 11. Februar 14 src/sbb.appcache src/sbb.appcache src/sbb.appcache reload reload reload
- 63. The HTML(5) (r)evolution Dienstag, 11.Februar 14
- 64. HTML5 is aconspiracy theory! • 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 Dienstag, 11. Februar 14
- 65. JavaScript APIs JavaScript APIwerden Web Standards Dienstag, 11. Februar 14
- 66. CSS3 - rundeEcken machen glücklich • • • • • 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 Dienstag, 11. Februar 14
- 67.
- 68. Das Web wurdeeine 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-Architekturen Dienstag, 11. Februar 14