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
Martin Malý / Zdrojak.cz
<!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" />
<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í: <progress value="75" max="100">3/4 hotovo</progress> Generuji náhled:
<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();
<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>
var el = document.getElementById('section1'); el.focus(); var els = document.getElementsByTagName('div'); els[0].focus(); var els = document.getElementsByClassName('section'); els[0].focus();
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);
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); }); }
.row:nth-child(even) { background: #dde; } .row:nth-child(odd) { background: white; }
div { display: inline-block; }
input[type="text"] { background: #eee; }
:not(.box) { color: #00c; } :not(span) { display: block; }
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'; }
div { text-overflow: ellipsis; }
-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;
}
color: rgba(255, 0, 0, 0.75); background: rgba(0, 0, 255, 0.75);
color: hsla( 128 74% 33% 1.00
border-radius: 0px;
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;
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)));
#logo { background: url(logo.gif) center center no-repeat; background-size: ; }
Změňte veliksot! »
div { background: url(src/zippy-plus.png) 10px center no-repeat, url(src/gray_lines_bg.png) 10px center repeat-x; }
#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)
@-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 ;)
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/
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 = Nová generace nástroje pro vývoj webových a mobilních aplikací
http://zdrojak.cz
Prezentace: http://slides.html5rocks.com