REAL TIME WEB APPLICATIONS MIT HTML5 UND JAVASCRIPT Sebastian Springer / Thorsten Rinne N ACH M ITTAG 

WEB STORAGE 

WEB STORAGE •„kurzlebige“ Daten •sessionStorage Object •wird beim Schließen des Browsers gelöscht •„langlebige“ Daten •localStorage Objekt •wird nicht beim Schließen des Browsers gelöscht •produziert File I/O, läuft synchron WebKit/Blink Gecko Trident Presto 2 MB 5 MB ~ 200MB 5 MB 4 MB 

WEB STORAGE

This page was requested if (!sessionStorage.pageCounter) { sessionStorage.setItem('pageCounter',0); } sessionStorage.setItem('pageCounter', parseInt(sessionStorage.pageCounter)+1); document.write(sessionStorage.pageCounter); times.



Demo Web App 

FULL SCREEN API 

FULL SCREEN API (CSS) #myelement: -webkit-full-screen { width: 100% } #myelement: -moz-full-screen { width: 100% } #myelement: -ms-full-screen { width: 100% } #myelement: -o-full-screen { width: 100% } #myelement: full-screen { width: 100% } 

FULL SCREEN API (JS) $('#fullScreen').on('click', function (e) { var el = document.documentElement, requestFullScreen = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen; requestFullScreen.call(el); }); 

Demo Web App 

CASCADING STYLE SHEETS 

CSS LEVEL 3 • in der Entwicklung seit 2000 • modularer Aufbau • bekannte Module • Selectors Level 3 • Media Queries 

BROWSER PREFIXES • -moz- • -ms- / -mso- • -kthml- • -webkit- • -o- • n/a • Gecko Engine (Mozilla) • Trident Engine (Microsoft) • KHTML (Konquerer) • Webkit (Safari) • Presto (Opera) ✝ • Blink (Chrome 28+, Opera) 

BROWSER PREFIXES .round-corners { border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; -o-border-radius: 12px; -khtml-border-radius: 12px; } 

Opacity Opacity Opacity Opacity Opacity 

OPACITY .my-opacity { opacity: 0.8; -ms-filter: "alpha(opacity=80)"; filter:alpha(opacity=80); } 

Demo Web App 

GRADIENTEN 

GRADIENTEN background: linear-gradient(135deg, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); 

ANYONE? 

GRADIENTEN filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1 ); 

Demo Web App 

BORDER RADIUS 

BORDER RADIUS .curved { -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; } 

Demo Web App 

BOX SHADOW 

BOX SHADOW .shadow { -webkit-box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 1); box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 1); } 

Demo Web App 

MEDIA QUERIES 

MEDIA QUERIES @media (min-width: 1200px) { ... } @media (min-width: 768px) and (max-width: 979px) { ... } @media (max-width: 767px) { ... } @media (max-width: 480px) { ... } 

SELECTORS LEVEL3 • a[src^="https"] Jedes Element, dessen src-Attribut mit https beginnt • a[src$=".pdf"] Jedes Element, dessen src-Attribut mit .pdf endet • a[src*="jsdays"] Jedes Element, dessen src-Attribut mit jsdays beinhaltet 

SELECTORS LEVEL3 • p:nth-child(2n) Jedes 2.

Element seines Elternelements • :root Das Rootelement eines Dokuments • :empty Jedes Element ohne Kindelemente 

SELECTORS LEVEL3 • input:enabled Jedes aktive Element • input:disabled Jedes nicht aktive Element • input:checked Jedes „ge-checkte“ Element (Checkbox) 

Demo Web App 

GRID LAYOUT 

TABLE LAYOUT 

TABLE LAYOUT • table-layout: auto • table-layout: fixed A B CDEFGH A B CDEFGH 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. MULTI COLUMNS 

MULTI COLUMNS .columns{ column-count: 4; column-gap: 10px; } 

CSS3GENERATOR.COM • border-radius • box-shadow / text-shadow • Gradienten • Transitions • Fonts 

CSS3GENERATOR.COM 

OFFLINE APPS 

OFFLINE APPS • Manifestdatei enthält die Konfiguration • manifest-Attribut im html-Tag aktiviert Caching • Verwaltung unter Chrome: chrome://appcache-internals/ 

Demo Web App 

CANVAS 

Demo 

WEB FONTS 

Demo Web App 

ANIMATIONS 

Demo Web App 

TRANSITIONS 

Demo Web App 

FILE API 

GEOLOCATION 

GEOLOCATION if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; var options = { position: new google.maps.LatLng(lat, lng) } var marker = new google.maps.Marker(options); marker.setMap(map); }); } 

PUSH STATE HASH CHANGE VS 

INDEXEDDB 

WEB WORKERS 

WEBWORKER var myWorker = new Worker('backgroundtask.js'); myWorker.onmessage = function(event) { alert(event.data); }; self.onmessage = function(event) { // Do some heavy work self.postMessage('Hello, Berlin!'); } backgroundtask.js main.js 

Demo 

WEB SOCKETS 

Demo Web App 

LITTLE HELPERS 

No content

No content

BROWSER VERSION DETECTION BROWSER FEATURE DETECTION 

POLYFILLS 

POLYFILLS https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross- browser-Polyfills 

No content

yepnope({ test : Modernizr.geolocation, yep : 'normal.js', nope : ['polyfill.js', 'wrapper.js'] }); 

FRAMEWORKS 

FRAMEWORKS • Bootstrap • Foundation v3 • Foundation v4 • Skeleton • 960.gs • http://responsive.vermilion.com/compare.php 

LESS / SASS 

Demo Web App 

No content

No content

MOZILLA DEVELOPER NETWORK 

No content

FRAGEN? 

KONTAKT Sebastian Springer sebastian.springer@mayflower.de Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland @basti_springer https://github.com/sspringer82 Thorsten Rinne [email protected] Yatego GmbH Kobellstr. 15 80336 München Deutschland @ThorstenRinne https://github.com/thorsten