HTML5
unplugged

marc.baechinger@zuehlke.com
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
Offline
Technology
Dienstag, 11. Februar 14
das Web wird sesshaft

Dienstag, 11. Februar 14
resources

app state

data sources

html, css, js,
json, xml,
png, mp3,
mp4

appcache

Dienstag, 11. Februar 14

localStor...
appcache

Dienstag, 11. Februar 14

localStorage

File API

Database API*
Resource caching
Dienstag, 11. Februar 14
<html manifest="sbb.appcache">

CACHE MANIFEST
index.html
styles.css
app.js
NETWORK:
/service/fahrplan.json

Dienstag, 11....
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...
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...
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...
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...
offline resource cache

64.88%

22 15 12 5.1 10
Mobile
Dienstag, 11. Februar 14

Desktop

WWW
live reload
demo reload
reload
Dienstag, 11. Februar 14
Application state
Dienstag, 11. Februar 14
localStorage
{
setLastCheckDate: function() {
localStorage.lastCacheCheck = new Date();
console.log(typeof localStorage.la...
localStorage
var storage = {
store: function(name, obj) {
localStorage[name] = JSON.stringify(obj);
},
read: function (nam...
localStorage and sessionStorage

91.85%

22 15 12 5.1 8
Mobile
Dienstag, 11. Februar 14

Desktop

WWW
Data sources
Dienstag, 11. Februar 14
SQL select
var db = openDatabase("fahrplan", "1.0", "SBB",
50*1024*1024);
db.transaction(function(tx) {
tx.executeSql("SEL...
SQL insert
transaction.executeSql(
! "INSERT INTO favorite(dep, arrival)" +
! "VALUES (?,?)",
! [
! connection.departure,
...
45.44%

Web SQL API

22
Mobile
Dienstag, 11. Februar 14

-

12 5.1
Desktop

-

WWW
Indexed DB API

22 15
Mobile
Dienstag, 11. Februar 14

17.92%

Desktop

-

10
WWW
Indexed or SQL DB API

~60%

22 15 12 5.1 10
Mobile
Dienstag, 11. Februar 14

Desktop

WWW
Network monitoring
Dienstag, 11. Februar 14
network state
window.addEventListener("offline", function(e) {
$("#network-monitor").removeClass("online");
}, false);
win...
navigator.connection

navigator.connection.bandwidth
navigator.connection.metered

Dienstag, 11. Februar 14
navigator.connection.type

Connection.UNKNOWN
Connection.ETHERNET
Connection.WIFI
Connection.CELL_2G
Connection.CELL_3G
Co...
Server availability
// register global ajax handlers
$(document).ajaxSuccess(setOnline);
$(document).ajaxError(setOffline)...
Platform
integration
Dienstag, 11. Februar 14
WWW

Cordova/
Worklight

Windows RT

Safari iOS

Firefox Aurora

Firefox Android

CEF/App.js/
Brakets shell

Dienstag, 11....
Desktop

Mobile
standalone

standalone

OSX Dashboard

Cordova/
Worklight

Windows RT

Safari iOS

Firefox Aurora

Firefox...
Desktop

Mobile
standalone

Cordova/
Worklight

standalone

OSX Dashboard
Appstore

Windows RT

Safari iOS

Appstore

stan...
Modern Browsers

+
+
+
+
+
Dienstag, 11. Februar 14

Desktop/Tablet/Phone
Simple Deployment
Bookmark, Favorites, Pinned Si...
Add to Home Screen

Dienstag, 11. Februar 14
Add to Home Screen

Dienstag, 11. Februar 14
Add to Home Screen

Dienstag, 11. Februar 14
live reload
demo reload
reload
Dienstag, 11. Februar 14
iOS und Android Apps

Dienstag, 11. Februar 14
Chromium
Embedding Framework

+
+
+
Dienstag, 11. Februar 14

Desktop-Integration
Standalone für Win/Mac/Lin
einheitliche ...
Firefox OS/
Marketplace

Dienstag, 11. Februar 14
Dienstag, 11. Februar 14
@marcbaechinger

ks for
tha n
ening
list

Q&A
Browsercoveragedaten: caniuse.com
Dienstag, 11. Februar 14
Backup slides

Dienstag, 11. Februar 14
Wsasx

0.0002%

22 15 12 5.1 8
Mobile
Dienstag, 11. Februar 14

Desktop

WWW
feature testing
Dienstag, 11. Februar 14
Sencha Desktop
Packager

Dienstag, 11. Februar 14
server log
debug:
debug:
debug:
debug:
debug:
debug:
debug:
debug:

serving
serving
serving
serving
serving
serving
servin...
server log
debug:
debug:
debug:
debug:
debug:
debug:
debug:
debug:

serving
serving
serving
serving
serving
serving
servin...
server log
debug:
debug:
debug:
debug:
debug:
debug:
debug:
debug:

serving
serving
serving
serving
serving
serving
servin...
server log
debug:
debug:
debug:
debug:
debug:
debug:
debug:
debug:

serving
serving
serving
serving
serving
serving
servin...
server log
debug:
debug:
debug:
debug:
debug:
debug:
debug:
debug:

serving
serving
serving
serving
serving
serving
servin...
server log
debug:
debug:
debug:
debug:
debug:
debug:
debug:
debug:

serving
serving
serving
serving
serving
serving
servin...
server log
debug:
debug:
debug:
debug:
debug:
debug:
debug:
debug:

serving
serving
serving
serving
serving
serving
servin...
The HTML(5)
(r)evolution
Dienstag, 11. Februar 14
HTML5 is a conspiracy theory!
• Standardisierung existierender, fortgeschrittener
Browserfeatures

• Öffentlichkeitswirksa...
JavaScript APIs

JavaScript API werden Web Standards

Dienstag, 11. Februar 14
CSS3 - runde Ecken machen glücklich
•
•
•
•
•

box-sizing
border-radius
opacity
box-shadow, text-shadow
gradients

•

tran...
<!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 ...
Upcoming SlideShare
Loading in...5
×

HTML5 unplugged

275

Published on

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
275
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5 unplugged

  1. 1. HTML5 unplugged marc.baechinger@zuehlke.com Dienstag, 11. Februar 14
  2. 2. The tale of the evernet Dienstag, 11. Februar 14
  3. 3. The World Wide Web. An evernet? Dienstag, 11. Februar 14
  4. 4. Dienstag, 11. Februar 14
  5. 5. In der freien Natur weitab von high speed Internet Dienstag, 11. Februar 14
  6. 6. in Tiefgaragen und anderen unterirdischen Räumen Dienstag, 11. Februar 14
  7. 7. Auf Reisen im Zug... Dienstag, 11. Februar 14
  8. 8. Text ...spätestens in Tunnels Dienstag, 11. Februar 14
  9. 9. beim Sparen von Roamingkosten Dienstag, 11. Februar 14
  10. 10. Dienstag, 11. Februar 14
  11. 11. Offline Technology Dienstag, 11. Februar 14
  12. 12. das Web wird sesshaft Dienstag, 11. Februar 14
  13. 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. 14. appcache Dienstag, 11. Februar 14 localStorage File API Database API*
  15. 15. Resource caching Dienstag, 11. Februar 14
  16. 16. <html manifest="sbb.appcache"> CACHE MANIFEST index.html styles.css app.js NETWORK: /service/fahrplan.json Dienstag, 11. Februar 14
  17. 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. 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. 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. 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. 21. offline resource cache 64.88% 22 15 12 5.1 10 Mobile Dienstag, 11. Februar 14 Desktop WWW
  22. 22. live reload demo reload reload Dienstag, 11. Februar 14
  23. 23. Application state Dienstag, 11. Februar 14
  24. 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. 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. 26. localStorage and sessionStorage 91.85% 22 15 12 5.1 8 Mobile Dienstag, 11. Februar 14 Desktop WWW
  27. 27. Data sources Dienstag, 11. Februar 14
  28. 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. 29. SQL insert transaction.executeSql( ! "INSERT INTO favorite(dep, arrival)" + ! "VALUES (?,?)", ! [ ! connection.departure, ! connection.arrival ], ! successHandler, ! errorHandler ); Dienstag, 11. Februar 14
  30. 30. 45.44% Web SQL API 22 Mobile Dienstag, 11. Februar 14 - 12 5.1 Desktop - WWW
  31. 31. Indexed DB API 22 15 Mobile Dienstag, 11. Februar 14 17.92% Desktop - 10 WWW
  32. 32. Indexed or SQL DB API ~60% 22 15 12 5.1 10 Mobile Dienstag, 11. Februar 14 Desktop WWW
  33. 33. Network monitoring Dienstag, 11. Februar 14
  34. 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. 35. navigator.connection navigator.connection.bandwidth navigator.connection.metered Dienstag, 11. Februar 14
  36. 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. 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. 38. Platform integration Dienstag, 11. Februar 14
  39. 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. 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. 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. 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. 43. Add to Home Screen Dienstag, 11. Februar 14
  44. 44. Add to Home Screen Dienstag, 11. Februar 14
  45. 45. Add to Home Screen Dienstag, 11. Februar 14
  46. 46. live reload demo reload reload Dienstag, 11. Februar 14
  47. 47. iOS und Android Apps Dienstag, 11. Februar 14
  48. 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. 49. Firefox OS/ Marketplace Dienstag, 11. Februar 14
  50. 50. Dienstag, 11. Februar 14
  51. 51. @marcbaechinger ks for tha n ening list Q&A Browsercoveragedaten: caniuse.com Dienstag, 11. Februar 14
  52. 52. Backup slides Dienstag, 11. Februar 14
  53. 53. Wsasx 0.0002% 22 15 12 5.1 8 Mobile Dienstag, 11. Februar 14 Desktop WWW
  54. 54. feature testing Dienstag, 11. Februar 14
  55. 55. Sencha Desktop Packager Dienstag, 11. Februar 14
  56. 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. 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. 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. 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. 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. 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. 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. 63. The HTML(5) (r)evolution Dienstag, 11. Februar 14
  64. 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. 65. JavaScript APIs JavaScript API werden Web Standards Dienstag, 11. Februar 14
  66. 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. 67. <!DOCTYPE html> http://www.html5rocks.com Dienstag, 11. Februar 14
  68. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×