Praktische Umsetzung von Web-Apps

Praktische Umsetzung von Web-Apps

5ca293c48862620cf1a5a1f09b1bc9ec?s=128

Thorsten Rinne

March 07, 2013
Tweet

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

  63. None
  64. None
  65. POLYFILLS

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

  67. None
  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

  73. None
  74. MOZILLA DEVELOPER NETWORK

  75. None
  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