Your SlideShare is downloading. ×
0
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
HTML5 unplugged
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 unplugged

260

Published on

Talk von SBB Developer Day 2012 über HTML5 Applikationen Offline-Applikationen

Talk von SBB Developer Day 2012 über HTML5 Applikationen Offline-Applikationen

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
260
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 unplugged marc.baechinger@zuehlke.com Dienstag, 11. Februar 14
  • 2. The tale of the evernet Dienstag, 11. Februar 14
  • 3. The World Wide Web. An evernet? Dienstag, 11. Februar 14
  • 4. Dienstag, 11. Februar 14
  • 5. In der freien Natur weitab von high speed Internet Dienstag, 11. Februar 14
  • 6. in Tiefgaragen und anderen unterirdischen Räumen Dienstag, 11. Februar 14
  • 7. Auf Reisen im Zug... Dienstag, 11. Februar 14
  • 8. Text ...spätestens in Tunnels Dienstag, 11. Februar 14
  • 9. beim Sparen von Roamingkosten Dienstag, 11. Februar 14
  • 10. Dienstag, 11. Februar 14
  • 11. Offline Technology Dienstag, 11. Februar 14
  • 12. das Web wird sesshaft 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. Februar 14 localStorage File API Database API*
  • 15. Resource caching Dienstag, 11. Februar 14
  • 16. <html manifest="sbb.appcache"> CACHE MANIFEST index.html styles.css app.js NETWORK: /service/fahrplan.json Dienstag, 11. Februar 14
  • 17. Server Browser GET /index.html HTTP/1.1 HTTP/1.1 200 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.1 200 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.1 200 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.1 200 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% 22 15 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% 22 15 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( ! "INSERT INTO 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 22 15 Mobile Dienstag, 11. Februar 14 17.92% Desktop - 10 WWW
  • 32. Indexed or SQL DB 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. navigator.connection navigator.connection.bandwidth navigator.connection.metered Dienstag, 11. Februar 14
  • 36. navigator.connection.type Connection.UNKNOWN Connection.ETHERNET Connection.WIFI Connection.CELL_2G Connection.CELL_3G Connection.CELL_4G Connection.NONE Dienstag, 11. Februar 14
  • 37. Server availability // register global 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. Platform integration Dienstag, 11. Februar 14
  • 39. WWW Cordova/ Worklight Windows RT Safari iOS Firefox Aurora 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 Safari iOS 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 Safari iOS 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 Home Screen Dienstag, 11. Februar 14
  • 44. Add to Home Screen Dienstag, 11. Februar 14
  • 45. Add to Home Screen Dienstag, 11. Februar 14
  • 46. live reload demo reload reload Dienstag, 11. Februar 14
  • 47. iOS und Android Apps 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. Dienstag, 11. Februar 14
  • 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 12 5.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 file at: 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 file at: 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 file at: 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 file at: 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 file at: 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 file at: 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 file at: 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 a conspiracy 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 API werden Web Standards Dienstag, 11. Februar 14
  • 66. CSS3 - runde Ecken 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. <!DOCTYPE html> http://www.html5rocks.com Dienstag, 11. Februar 14
  • 68. 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-Architekturen Dienstag, 11. Februar 14

×