HTML5 jako aplikační platforma

Stiskněte → pro posun.

Zvětšení / zmenšení: Ctrl nebo Command + +/-

Originální kód pochází z http://slides.html5rocks.com a je uvolněno pod licencí Apache

# HTML5

## Od hypertextu k aplikacím

Martin Malý / Zdrojak.cz

- 1991 HTML
- 1994 HTML 2
- 1996 CSS 1 + JavaScript
- 1997 HTML 4
- 1998 CSS 2
- 2000 XHTML 1
- 2002 Beztabulkový layout
- 2005 AJAX
- 2009 HTML 5

HTML5 ~= HTML + CSS + JS APIs

# HTML

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <script type="text/javascript">
    <style type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!DOCTYPE html>

    <script>
    <style>
    <meta charset=utf-8>

    <body>
      <header>
        <hgroup>
          <h1>Nadpis</h1>
          <h2>Podnadpis</h2>
        </hgroup>
      </header>

      <nav>
       <ul>
         Navigace...
       </ul>
      </nav>

      <section>
       <article>
         <header>
           <h1>Titulek</h1>
         </header>
         <section>
           Obsah...
         </section>
       </article>

       <article>
         <header>
           <h1>Titulek</h1>
         </header>
         <section>
           Obsah...
         </section>
       </article>

       <article>
         <header>
           <h1>Titulek</h1>
         </header>
         <section>
           Obsah...
         </section>
       </article>
      </section>

      <aside>
       Postranní panel...
      </aside>

      <footer>
       Copyright © 2010.
      </footer>
    </body>

    <link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="pingback" href="http://myblog.com/xmlrpc.php">
    <link rel="prefetch" href="http://myblog.com/main.php">
    ...

    <a rel="archives" href="http://myblog.com/archives">starší články</a>
    <a rel="external" href="http://notmysite.com">tutorial</a>
    <a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">licence</a>
    <a rel="nofollow" href="http://notmysite.com/sample">opruz</a>
    <a rel="tag" href="http://myblog.com/category/games">články hry</a>
    ...

    <time
    datetime="010-11-13T020:00+01:00">
    Narozeninová párty v Praze
    </time>
    ...

    <p>Tento článek byl publikován
    <time datetime="2010-06-08" pubdate>
    8 června 2010
    </time>.</p>

    <embed>
    <hr>
    <small>
    <cite>
    <a>
    <script src= async>
    <script src= defer>

    <div itemscope itemtype="http://example.org/band">
     <p>My name is <span itemprop="name">Neil</span>.</p>
     <p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
     <p>I am <span itemprop="nationality">British</span>.</p>
    </div>

    <style>
      [required] { background-color: yellow; }
      :invalid { background-color: red; }
    </style>

    <input type="text" required />
    <input type="email" value="muj@mail.cz"  required />
    <input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>
    <input type="range" min="0" max="50" value="10" />
    <input type="search" results="10" placeholder="Hledat..." />
    <input type="tel" placeholder="(555) 555-5555" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />

    <input type="color" placeholder="např. #bbbbbb" />
    <input type="number" step="1" min="-5" max="10" value="0" />

## Others:

    <meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>
    Vaše skóre je: A+
    <progress>pracuji...</progress>
    Zpracování: pracuji...
    <progress value="75" max="100">3/4 hotovo</progress>
    Generuji náhled: 3/4 hotovo

    <audio id="audio" src="sound.mp3" controls></audio>
    document.getElementById("audio").muted = false;

    <video id="video" src="movie.webm" autoplay controls></video>
    document.getElementById("video").play();

Your browser does not support the video tag
Your browser does not support the audio tag

    <canvas id="canvas" width="838" height="220"></canvas>

    <script>
      var canvasContext = document.getElementById("canvas").getContext("2d");
      canvasContext.fillRect(250, 25, 150, 100);

      canvasContext.beginPath();
      canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
      canvasContext.lineWidth = 15;
      canvasContext.lineCap = 'round';
      canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
      canvasContext.stroke();
    </script>

Autor demonstrace: Sean Christmann

    <html>
      <svg>
        <circle id="myCircle" class="important" cx="50%" cy="50%" r="100"
            fill="url(#myGradient)"
            onmousedown="alert('Nazdar');"/>
      </svg>
    </html>

- Sémantika (Nové tagy, relace, mikrodata)
- Web Forms 2.0 (vylepšené formuláře)
- Multimédia (Audio, Video)
- 2D a 3D grafika (Canvas, WebGL, SVG)

# JS API

## Hledání elementů podle tříd a ID (DOM API)

    var el = document.getElementById('section1');
    el.focus();

    var els = document.getElementsByTagName('div');
    els[0].focus();

    var els = document.getElementsByClassName('section');
    els[0].focus();

## Hledání elementů pomocí CSS selektorů (Selectors API)

    var els = document.querySelectorAll("ul li:nth-child(odd)");
    var els = document.querySelectorAll("table.test > tr > td");

    // use localStorage for persistent storage
    // use sessionStorage for per tab storage
    textarea.addEventListener('keyup', function () {
      window.localStorage['value'] = area.value;
      window.localStorage['timestamp'] = (new Date()).getTime();
    }, false);
    textarea.value = window.localStorage['value'];

Uložení dat na straně klienta

    var db = window.openDatabase("Database Name", "Database Version");
    db.transaction(function(tx) {
      tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
    });

    <html manifest="cache.manifest">
    window.applicationCache.addEventListener('checking', updateCacheStatus, false);

    CACHE MANIFEST

    # version 1

    CACHE:
    /html5/src/refresh.png
    /html5/src/logic.js
    /html5/src/style.css
    /html5/src/background.png

    main.js:
      var worker = new Worker('extra_work.js');
      worker.onmessage = function(event) { alert(event.data); };

    extra_work.js:
      self.onmessage = function(event) {
        // Něco dělej.
        self.postMessage(some_data);
      }

Nahrávám trasu...

    var socket = new WebSocket(location);
    socket.onopen = function(event) {
      socket.postMessage(“Hello, WebSocket”);
    }
    socket.onmessage = function(event) { alert(event.data); }
    socket.onclose = function(event) { alert(“closed”); }

Obousměrný plně duplexní komunikační kanál přes TCP socket.
Implementace na serveru: node.js

    if (window.webkitNotifications.checkPermission() == 0) {
      // můžete předat URL jako parametr
      window.webkitNotifications.createNotification(tweet.picture, tweet.title,
          tweet.text).show();
    } else {
      window.webkitNotifications.requestPermission();
    }

Použití twitteru pro notifikace

    document.addEventListener('dragstart', function(event) {
       event.dataTransfer.setData('text', 'Nějaký text');
       event.dataTransfer.effectAllowed = 'copy';
    }, false);

2. Vyberte a přetáhněte (originál zmizí)
3. Vyberte a přetáhněte (originál bude změněn)

Zdrojová data
Prostor pro vložení

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

- Ukládání na straně klienta (Web SQL Database, App Cache, Web Storage)
- Zlepšení komunikace (Web Sockets)
- Zlepšení UI (Web Workers)
- Přiblížení nativním aplikacím (Notifications, Drag & Drop)
- Geolokace

- Desktopové aplikace
- Prohlížeč jako běhové prostředí
- Není omezeno na počítače!
- Zrychlení JavaScriptu (V8 - JIT)

# CSS3

## Selektory

    .row:nth-child(even) {
      background: #dde;
    }
    .row:nth-child(odd) {
      background: white;
    }

Řádek 1
Řádek 2
Řádek 3
Řádek 4

## Display jako obrázek

    div {
      display: inline-block;
    }

## Specifické atributy

    input[type="text"] {
      background: #eee;
    }

## Negace

    :not(.box) {
      color: #00c;
    }
    :not(span) {
      display: block;
    }

## Specifičtější cílení

    h2:first-child { ... }

    div.text > div { ... }
    h2 + header { ... }

    @font-face {
      font-family: 'LeagueGothic';
      src: url(LeagueGothic.otf);
    }

    @font-face {
      font-family: 'Droid Sans';
      src: url(Droid_Sans.ttf);
    }

    header {
      font-family: 'LeagueGothic';
    }

Příšerně žluťoučký kůň

    div {
      text-overflow: ellipsis;
    }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas gravida sem, id faucibus diam sagittis et. Donec tempus lectus ac lectus condimentum imperdiet fermentum orci ultrices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas gravida sem, id faucibus diam sagittis et. Donec tempus lectus ac lectus condimentum imperdiet fermentum orci ultrices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas gravida sem, id faucibus diam sagittis et. Donec tempus lectus ac lectus condimentum imperdiet fermentum orci ultrices.

    -webkit-column-count: 2;
    -webkit-column-rule: 1px solid #bbb;
    -webkit-column-gap: 2em;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas gravida sem, id faucibus diam sagittis et. Donec tempus lectus ac lectus condimentum imperdiet fermentum orci ultrices.

Mauris arcu erat, volutpat et sodales ut, tristique id massa. Cras nulla lectus, faucibus non lobortis ac, vehicula nec ante. Vivamus rutrum pretium neque eu consectetur. Nullam tellus mauris, ultricies eu volutpat eu, ultricies at lectus. Suspendisse iaculis eros sed est ullamcorper ac elementum mi adipiscing. Nulla sit amet nisi et erat bibendum scelerisque vehicula non lectus. Suspendisse ultricies, tellus id vulputate ultricies, libero orci gravida lorem, non viverra odio nulla vel ligula. Curabitur sed ornare arcu.

Cras dapibus nunc eget metus molestie porttitor. Nullam condimentum posuere sem, non posuere tortor vulputate nec. Sed scelerisque mattis metus, eu sodales libero suscipit vel. Duis mattis nisi laoreet ligula tristique commodo. Sed dictum quam nec velit ornare a convallis ligula vehicula. Praesent feugiat libero rhoncus turpis congue mollis. Suspendisse rhoncus luctus luctus.

Proin convallis orci sed sem pulvinar ullamcorper aliquet sapien vestibulum.

Etiam pharetra sollicitudin augue, id imperdiet turpis sodales quis. Suspendisse vestibulum augue quis leo cursus a facilisis sapien porta. Duis et tincidunt turpis. Proin quis dui tortor, ac rutrum erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec id laoreet nisl.

Etiam purus enim, tincidunt fringilla varius sit amet, varius at dui. Sed posuere sodales commodo. Nam pretium odio ac turpis blandit eget scelerisque turpis aliquet. Proin eget interdum est. Donec quis est tellus, lacinia facilisis nulla.

    div {
      -webkit-text-fill-color: black;
      -webkit-text-stroke-color: red;
      -webkit-text-stroke-width: 0.00px;
    }

Příklad textu

      color: rgba(255, 0, 0, 0.75);
      background: rgba(0, 0, 255, 0.75);

Nezávislá průhlednost

    color: hsla(
      128
      74%
      33%
      1.00

Příklad HSL

      border-radius: 0px;

Bez nich by Web 2.0 nebyl

    background: -webkit-gradient(linear, left top, left bottom,
                                 from(#00abeb), to(white),
                                 color-stop(0.5, white), color-stop(0.5, #66cc00))

    background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))

    text-shadow:
      rgba(64, 64, 64, 0.5)
      0px
      0px
      0px;

    box-shadow:
      rgba(0, 0, 128, 0.25)
      0px
      0px
      0px;

Příklad stínů

    text-shadow: rgba(0, 0, 0, 0.5) 0 0px 0px;

    background:
      -webkit-gradient(linear, left top, left bottom,
                       from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));

    border-radius: 0px;

    -webkit-box-reflect: below 10px
      -webkit-gradient(linear, left top, left bottom,
                       from(transparent), to(rgba(255, 255, 255, 0)));

Web 2.0 Logo Creatr

## Změna velikosti pozadí

    #logo {
      background: url(logo.gif) center center no-repeat;
      background-size:
        ;
    }

Změňte veliksot! »

## Vícenásobné pozadí

    div {
      background: url(src/zippy-plus.png) 10px center no-repeat,
                  url(src/gray_lines_bg.png) 10px center repeat-x;
    }

Test

    #box.left {
      margin-left: 0;
    }
    #box.right {
      margin-left: 1000px;
    }

    document.getElementById('box').className = 'left';
    document.getElementById('box').className = 'right';

    #box {
      -webkit-transition: margin-left 1s ease-in-out;
    }

    document.getElementById('box').className = 'left';
    document.getElementById('box').className = 'right';

Stačí přejet myší:

    -webkit-transform: rotateY(45deg);
    -webkit-transform: scaleX(25deg);
    -webkit-transform: translate3d(0, 0, 90deg);
    -webkit-transform: perspective(500px)

3d

    @-webkit-keyframes pulse {
     from {
       opacity: 0.0;
       font-size: 100%;
     }
     to {
       opacity: 1.0;
       font-size: 200%;
     }
    }

    div {
      -webkit-animation-name: pulse;
      -webkit-animation-duration: 2s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
      -webkit-animation-direction: alternate;
    }

*Používejte s rozmyslem. Vzpomeňte na hrůzy, co napáchal tag BLINK ;)

Blik!

- Typografie
- Vzhled
- Přechody, transformace, animace

- Moderní prohlížeče
- Mobilní prohlížeče
- Rozšíření pro prohlížeče
- Widgety, gadgety, ...

- http://caniuse.com
- http://findmebyip.com/litmus

- Snadná kontrola podpory HTML5 v UA
- Nonobtrusive přizpůsobení stránky
- Nepřidává podporu, jen detekuje

Lze stylovat obě varianty:

    .multiplebgs div p {
      /* styl pro prohlížeče, které
         podporují vícenásobné pozadí */
    }
    .no-multiplebgs div p {
      /* volitelný fallback pro ty,
         které ho nepodporují */
    }

http://www.modernizr.com/

- Přidání podpory HTML5 do prohlížečů IE6, 7 a 8
- Stačí přidat patřičné metainformace

V HTML:

    <meta http-equiv="X-UA-Compatible" content="chrome=1">

V HTTP hlavičkách:

    X-UA-Compatible: chrome=1

http://jdem.cz/hkhj6

HTML5 ~= HTML + CSS + JS API

HTML5 = Nová generace nástroje pro vývoj webových a mobilních aplikací

http://zdrojak.cz
Prezentace: http://slides.html5rocks.com