Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Real Time Web Applications mit HTML5 und JavaScript - Part 2

Real Time Web Applications mit HTML5 und JavaScript - Part 2

Thorsten Rinne

June 02, 2013
Tweet

More Decks by Thorsten Rinne

Other Decks in Technology

Transcript

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

    View full-size slide

  2. 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

    View full-size slide

  3. WEB STORAGE
    This page was requested
    <br/>if (!sessionStorage.pageCounter) {<br/>sessionStorage.setItem('pageCounter',0);<br/>}<br/>sessionStorage.setItem('pageCounter',<br/>parseInt(sessionStorage.pageCounter)+1);<br/>document.write(sessionStorage.pageCounter);<br/>
    times.

    onClick="sessionStorage.clear();location.reload(true);">
    onClick="location.reload(true);">

    View full-size slide

  4. FULL SCREEN API

    View full-size slide

  5. 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% }

    View full-size slide

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

    View full-size slide

  7. CASCADING STYLE SHEETS

    View full-size slide

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

    View full-size slide

  9. 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)

    View full-size slide

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

    View full-size slide

  11. Opacity
    Opacity
    Opacity
    Opacity
    Opacity

    View full-size slide

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

    View full-size slide

  13. 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%);

    View full-size slide

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

    View full-size slide

  15. BORDER RADIUS

    View full-size slide

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

    View full-size slide

  17. 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);
    }

    View full-size slide

  18. MEDIA QUERIES

    View full-size slide

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

    View full-size slide

  20. 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

    View full-size slide

  21. SELECTORS LEVEL3
    • p:nth-child(2n)
    Jedes 2. Element seines Elternelements
    • :root
    Das Rootelement eines Dokuments
    • :empty
    Jedes Element ohne Kindelemente

    View full-size slide

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

    View full-size slide

  23. TABLE LAYOUT

    View full-size slide

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

    View full-size slide

  25. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. CSS3GENERATOR.COM

    View full-size slide

  29. OFFLINE APPS

    View full-size slide

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

    View full-size slide

  31. 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);
    });
    }

    View full-size slide

  32. PUSH STATE
    HASH CHANGE
    VS

    View full-size slide

  33. 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

    View full-size slide

  34. LITTLE HELPERS

    View full-size slide

  35. BROWSER VERSION
    DETECTION
    BROWSER FEATURE
    DETECTION

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. MOZILLA DEVELOPER
    NETWORK

    View full-size slide

  40. 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

    View full-size slide