HTML5 unplugged
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5 unplugged

on

  • 273 views

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

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

Statistics

Views

Total Views
273
Views on SlideShare
273
Embed Views
0

Actions

Likes
1
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 unplugged Presentation 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