Real Time Web Applications mit HTML5 und JavaScript - Part 2

Transcript

1. REAL TIME WEB APPLICATIONS MIT HTML5 UND JAVASCRIPT Sebastian Springer / Thorsten Rinne N ACH M ITTAG
2. WEB STORAGE
3. 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
4. WEB STORAGE <p>This page was requested <b> <script> if (!sessionStorage.pageCounter) { sessionStorage.setItem('pageCounter',0); } sessionStorage.setItem('pageCounter', parseInt(sessionStorage.pageCounter)+1); document.write(sessionStorage.pageCounter); </script> </b> times.</p> <p> <input value="sessionStorage leeren" type="button" onClick="sessionStorage.clear();location.reload(true);"> <input value="Seite laden" type="button" onClick="location.reload(true);"> </p>
5. Demo Web App
6. FULL SCREEN API
7. 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% }
8. FULL SCREEN API (JS) $('#fullScreen').on('click', function (e) { var el = document.documentElement, requestFullScreen = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen; requestFullScreen.call(el); });
9. Demo Web App
10. CASCADING STYLE SHEETS
11. CSS LEVEL 3 • in der Entwicklung seit 2000 • modularer Aufbau • bekannte Module • Selectors Level 3 • Media Queries
12. 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)
13. BROWSER PREFIXES .round-corners { border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; -o-border-radius: 12px; -khtml-border-radius: 12px; }
14. Opacity Opacity Opacity Opacity Opacity
15. OPACITY .my-opacity { opacity: 0.8; -ms-filter: "alpha(opacity=80)"; filter:alpha(opacity=80); }
16. Demo Web App
17. GRADIENTEN
18. 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%);
19. ANYONE?
20. GRADIENTEN filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1 );
21. Demo Web App
22. BORDER RADIUS
23. BORDER RADIUS .curved { -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; }
24. Demo Web App
25. BOX SHADOW
26. 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); }
27. Demo Web App
28. MEDIA QUERIES
29. MEDIA QUERIES @media (min-width: 1200px) { ... } @media (min-width: 768px) and (max-width: 979px) { ... } @media (max-width: 767px) { ... } @media (max-width: 480px) { ... }
30. SELECTORS LEVEL3 • a[src^="https"] Jedes <a> Element, dessen src-Attribut mit https beginnt • a[src$=".pdf"] Jedes <a> Element, dessen src-Attribut mit .pdf endet • a[src*="jsdays"] Jedes <a> Element, dessen src-Attribut mit jsdays beinhaltet
31. SELECTORS LEVEL3 • p:nth-child(2n) Jedes 2. <p> Element seines Elternelements • :root Das Rootelement eines Dokuments • :empty Jedes Element ohne Kindelemente
32. SELECTORS LEVEL3 • input:enabled Jedes aktive <input> Element • input:disabled Jedes nicht aktive <input> Element • input:checked Jedes „ge-checkte“ <input> Element (Checkbox)
33. Demo Web App
34. GRID LAYOUT
35. TABLE LAYOUT
36. TABLE LAYOUT • table-layout: auto • table-layout: fixed A B CDEFGH A B CDEFGH
37. 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
38. MULTI COLUMNS .columns{ column-count: 4; column-gap: 10px; }
39. CSS3GENERATOR.COM • border-radius • box-shadow / text-shadow • Gradienten • Transitions • Fonts
40. CSS3GENERATOR.COM
41. OFFLINE APPS
42. OFFLINE APPS • Manifestdatei enthält die Konfiguration • manifest-Attribut im html-Tag aktiviert Caching • Verwaltung unter Chrome: chrome://appcache-internals/
43. Demo Web App
44. CANVAS
45. Demo
46. WEB FONTS
47. Demo Web App
48. ANIMATIONS
49. Demo Web App
50. TRANSITIONS
51. Demo Web App
52. FILE API
53. GEOLOCATION
54. 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); }); }
55. PUSH STATE HASH CHANGE VS
56. INDEXEDDB
57. WEB WORKERS
58. 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
59. Demo
60. WEB SOCKETS
61. Demo Web App
62. LITTLE HELPERS
65. BROWSER VERSION DETECTION BROWSER FEATURE DETECTION
66. POLYFILLS
67. POLYFILLS https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross- browser-Polyfills
69. yepnope({ test : Modernizr.geolocation, yep : 'normal.js', nope : ['polyfill.js', 'wrapper.js'] });
70. FRAMEWORKS
71. FRAMEWORKS • Bootstrap • Foundation v3 • Foundation v4 • Skeleton • 960.gs • http://responsive.vermilion.com/compare.php
72. LESS / SASS
73. Demo Web App
76. MOZILLA DEVELOPER NETWORK
78. FRAGEN?
79. KONTAKT Sebastian Springer sebastian.springer@mayflower.de Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland @basti_springer https://github.com/sspringer82 Thorsten Rinne thorsten@yatego.com Yatego GmbH Kobellstr. 15 80336 München Deutschland @ThorstenRinne https://github.com/thorsten