HTML5 unplugged

marc.baechinger@zuehlke.com

HTML5unplugged

Dienstag, 11. Februar 14

The tale of the evernet

The World Wide Web. An evernet?

In der freien Natur weitab von high speed Internet

in Tiefgaragen und anderen unterirdischen Räumen

Auf Reisen im Zug...

...spätestens in Tunnels

beim Sparen von Roamingkosten

OfflineTechnology

das Web wird sesshaft

resources

appcache

app state

localStorage File API Database API*

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

data sources

appcache localStorage File API Database API*

Resource cachingDienstag, 11. Februar 14

CACHE MANIFESTindex.htmlstyles.cssapp.js

NETWORK:/service/fahrplan.json

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

Server Browser

GET /*.* HTTP/1.1

HTTP/1.1 200 OK

Server Browser

GET /*.* HTTP/1.1

HTTP/1.1 200 OK

GET /styles.css HTTP/1.1

HTTP/1.1 200 OK

Server Browser

GET /*.* 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

1015 5.11222Mobile Desktop WWW

offline resource cache 64.88%

reloadreloadreload

livedemo

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

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

localStorage and sessionStorage 91.85%

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

transaction.executeSql(! "INSERT INTO favorite(dep, arrival)" + ! "VALUES (?,?)",

! [! connection.departure, ! connection.arrival],

! successHandler,! errorHandler);

SQL insert

-- 5.11222Mobile Desktop WWW

Web SQL API 45.44%

1015 --22Mobile Desktop WWW

Indexed DB API 17.92%

Indexed or SQL DB API ~60%

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

navigator.connection

navigator.connection.bandwidthnavigator.connection.metered

navigator.connection.type

Connection.UNKNOWNConnection.ETHERNETConnection.WIFIConnection.CELL_2GConnection.CELL_3GConnection.CELL_4GConnection.NONE

// 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

Platformintegration

Safari iOS

Cordova/Worklight

Firefox AndroidFirefox Aurora

Windows RT

OSX Dashboard

Desktop Mobile

CEF/App.js/Brakets shell Firefox OS

Safari iOS

Cordova/Worklight

Windows RT

OSX Dashboard

Desktop Mobile

standalone

Safari iOS

Cordova/Worklight

Windows RT

OSX Dashboard

Desktop Mobile

Appstore

Appstore Appstore

Appstore

standalone

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

Add to Home Screen

reloadreloadreload

livedemo

iOS und Android Apps

Chromium Embedding Framework

+ Desktop-Integration+ Standalone für Win/Mac/Lin+ einheitliche HTML/JS-Engine

- Installer notwendig- Build- und Konfigurationsskills

Firefox OS/Marketplace

thanks for

listening

@marcbaechinger

Browsercoveragedaten: caniuse.com

Backup slides

Wsasx 0.0002%

feature testingDienstag, 11. Februar 14

Sencha Desktop Packager

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

server log

reload

server log

reloadreload

server log

reloadreload

server log

reloadreloadreload

The HTML(5) (r)evolution

• 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!

JavaScript API werden Web Standards

JavaScript APIs

• 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

<!DOCTYPE html>

http://www.html5rocks.com

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

HTML5 unplugged

Technology

Transcript of HTML5 unplugged

HTML5 Grundlagen

BON JOUR UNPLUGGED OPTIC - Flos...BON JOUR UNPLUGGED OPTIC design by PHILIPPE STARCK ISTRUZIONI DI INSTALLAZIONE ED IMPIEGO INSTRUCTION FOR CORRECT INSTALLATION

Neue EBusiness Perspektiven durch HTML5

20140320 hellbusch-html5-und-wai-aria

Dmvö Unplugged Kurzanalyse

HTML5 Fragen und Antworten

Computer Science Unplugged Sortiernetzwerke © Computer Science Unplugged canterbury.ac.nz von Tim Bell, Ian H. Witten und Mike Fellows Übersetzung: Kompetenzzentrum.

unplugged - kaifu-lodge.de · unplugged Medienpartner SONNTAG, 26. NOVEMBER 2017 10 – 15:30 UHR IM RESTAURANT Brunch: 13,50 € Ingo Stahl singt und schreibt seit seiner Kindheit

Offline Strategien für HTML5 Web Applikationen - dwx13

Jesus Unplugged - WordPress.com · 2010. 10. 1. · Jesus Unplugged Der wilde Messias, wer er wirklich war und was er wollte Freitag, 1. Oktober 2010

El gran libro de HTML5, CSS3 y Javascript (Spanish Edition) · Índice El gran libro de HTML5, CSS3 y Javascript Página de créditos Introducción Capítulo 1 Documentos HTML5 1.1

HTML5? · HTML5 und CSS3 sind keine abgeschlossenen Speziﬁkationen. Die Implementation in Browsern ist noch lückenhaft. HTML5 + CSS3 + More = NEWT. HTML5 + CSS3 + More = NEWT SVG,

Aktuelle Webtechnologien - HTML5, CSS3 und mehr

HTML5 Storage

HTML5 Handbuch

HTML5, CSS3 und JavaScript für alle

Umstieg auf HTML5 1 - application.wiley-vch.de · Umstieg auf HTML5 1 In diesem Kapitel ... g Die Geschichte von HTML g Was ist HTML5? g Unterstützte Browserfunktionen testen g Auswahl

Wo steht HTML5 - Sven Brencher · 1 Wo steht HTML5 Überblick, Möglichkeiten, Zukunft (ohne Anspruch auf Vollständigkeit) Sven Brencher

Mobile Webapps mit JavaScript, CSS, HTML5

Allgemeines HTML5, PHP, MySQL - eberhart.mediaeberhart.media/pdfs/phpmyadmin/1_phpmyadmin.pdf · Eberhart 1_phpmyadmin.docx 1 Allgemeines HTML5, PHP, MySQL HTML dient zur Formatierung