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

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

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

Vyberte a přetáhněte (originál zmizí)
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.

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í

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