Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Praktische Umsetzung von Web-Apps

Praktische Umsetzung von Web-Apps

Thorsten Rinne

March 07, 2013
Tweet

More Decks by Thorsten Rinne

Other Decks in Programming

Transcript

  1. 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
  2. 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>
  3. 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% }
  4. FULL SCREEN API (JS) $('#fullScreen').on('click', function (e) { var el

    = document.documentElement, requestFullScreen = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen; requestFullScreen.call(el); });
  5. CSS LEVEL 3 • in der Entwicklung seit 2000 •

    modularer Aufbau • bekannte Module • Selectors Level 3 • Media Queries
  6. BROWSER PREFIXES • -moz- • -ms- / -mso- • -kthml-

    • -o- • -webkit- • Gecko Engine (Mozilla) • Trident Engine (Microsoft) • KHTML (Konquerer) • Presto (Opera) ✝ • Webkit (Chrome / Safari)
  7. 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); }
  8. MEDIA QUERIES @media (min-width: 1200px) { ... } @media (min-width:

    768px) and (max-width: 979px) { ... } @media (max-width: 767px) { ... } @media (max-width: 480px) { ... }
  9. 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
  10. SELECTORS LEVEL3 • p:nth-child(2n) Jedes 2. <p> Element seines Elternelements

    • :root Das Rootelement eines Dokuments • :empty Jedes Element ohne Kindelemente
  11. SELECTORS LEVEL3 • input:enabled Jedes aktive <input> Element • input:disabled

    Jedes nicht aktive <input> Element • input:checked Jedes „ge-checkte“ <input> Element (Checkbox)
  12. 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
  13. 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); }); }
  14. 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
  15. FRAMEWORKS • Bootstrap • Foundation v3 • Foundation v4 •

    Skeleton • 960.gs • http://responsive.vermilion.com/compare.php
  16. 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