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

Vývoj webových technologií
  • 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

HTML

Zjednodušení zápisu

<!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>
HTML

Nové "sémantické" značky

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

            
HTML

Nové relace

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

Další značky

<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>
HTML

Microdata

<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>
HTML

Nové typy prvků pro formuláře

<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
HTML

Audio + Video

<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();
HTML

Canvas

<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>
            
HTML

Komplexní příklad s Canvasem

HTML

Video + Canvas

Autor demonstrace: Sean Christmann

HTML

SVG v HTML5

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

Příklad 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

JS API

Selektory

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");
JS API

Web Storage

// 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

JS API

Web SQL Database

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

    Application Cache

    <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
    
    JS API

    Web Workers

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

    JS API

    Web Sockets

    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

    JS API

    Desktopové notifikace

    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

    JS API

    Drag&drop

    document.addEventListener('dragstart', function(event) {
       event.dataTransfer.setData('text', 'Nějaký text');
       event.dataTransfer.effectAllowed = 'copy';
    }, false);
    
    1. Vyberte a přetáhněte (originál zmizí)
    2. Vyberte a přetáhněte (originál bude změněn)
    Zdrojová data
    Prostor pro vložení
    JS API

    Geolokace

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

    JS API
    • 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

    CSS

    CSS selektory

    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 { ... } 
    
    CSS

    Podpora pro fonty

    @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ůň
    CSS

    Přetahování textu

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

    Sloupce

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

    CSS

    Obtažení textu

    div {
      -webkit-text-fill-color: black;
      -webkit-text-stroke-color: red;
      -webkit-text-stroke-width: 0.00px; 
    }
    Příklad textu
    CSS

    Průhlednost

      color: rgba(255, 0, 0, 0.75); 
      background: rgba(0, 0, 255, 0.75); 
    
    Nezávislá průhlednost
    CSS

    Barevný model HSLA

    color: hsla(
      128 
      74% 
      33% 
      1.00 
            
    Příklad HSL
    CSS

    Oblé rohy

      border-radius: 0px; 
    
    Bez nich by Web 2.0 nebyl
    CSS

    Barevné přechody

    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))
                                                            
    
    CSS

    Stíny

    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ů
    CSS

    Kombinace efektů

    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
    CSS

    Zlepšení práce s pozadím

    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
    CSS

    Přechody

    #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'; 
    
    CSS

    Transformace

    Stačí přejet myší:

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

    3d

    CSS

    Animace

    @-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!
    CSS
    • Typografie
    • Vzhled
    • Přechody, transformace, animace

    Kde HTML5 uvidíte?

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

    Podpora v prohlížečích

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

    Modernizr

    • 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/

    Chrome Frame

    • 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í