Praktische Umsetzung von Web-Apps

Transcript

1. PRAKTISCHE UMSETZUNG VON WEB-APPS 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 Safari/Chrome Firefox IE Opera 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- • -o- • -webkit- • Gecko Engine (Mozilla) • Trident Engine (Microsoft) • KHTML (Konquerer) • Presto (Opera) ✝ • Webkit (Chrome / Safari)
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. Demo Web App
31. 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
32. SELECTORS LEVEL3 • p:nth-child(2n) Jedes 2. <p> Element seines Elternelements • :root Das Rootelement eines Dokuments • :empty Jedes Element ohne Kindelemente
33. SELECTORS LEVEL3 • input:enabled Jedes aktive <input> Element • input:disabled Jedes nicht aktive <input> Element • input:checked Jedes „ge-checkte“ <input> Element (Checkbox)
34. Demo Web App
35. GRID LAYOUT
36. TABLE LAYOUT
37. TABLE LAYOUT • table-layout: auto • table-layout: fixed A B CDEFGH A B CDEFGH
38. 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
39. MULTI COLUMNS .columns{ column-count: 4; column-gap: 10px; }
40. CSS3GENERATOR.COM • border-radius • box-shadow / text-shadow • Gradienten • Transitions • Fonts
41. CSS3GENERATOR.COM
42. OFFLINE APPS
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, Amsterdam'); } backgroundtask.js main.js
59. Demo
60. WEB SOCKETS
61. Demo Web App
62. LITTLE HELPERS
65. POLYFILLS
66. POLYFILLS https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross- browser-Polyfills
68. yepnope({ test : Modernizr.geolocation, yep : 'normal.js', nope : ['polyfill.js', 'wrapper.js'] });
69. FRAMEWORKS
70. FRAMEWORKS • Bootstrap • Foundation v3 • Foundation v4 • Skeleton • 960.gs • http://responsive.vermilion.com/compare.php
71. LESS / SASS
72. Demo Web App
74. MOZILLA DEVELOPER NETWORK
76. FRAGEN?
77. 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