Potulky s HTML5

Potulky s HTML5

29.08.2013Bratislava

Martin PuškáčPotulky s HTML5

Martin Puškáč



Dnes nás čaká• Čo je to HTML5?

• Nové HTML elementy a sémantické znáčky

• CSS3

• Multimédia

• JavaScript selektory, API pre prácu s históriou prehliadača

• Offline úložiská

• Realtime komunikácia (WebSocket)29.08.2013Bratislava


Čo je to HTML5?

• HTML

• JavaScript

• CSS3



Nové HTML elementy a sémantické znáčky

• <header>

• <main>

• <nav>

• <section>

• <article>



• <aside>

• <figure>

• <footer>

Nové HTML elementy a sémantické znáčky



CSS3

• Pseudo selektory

• :first-child

• :last-child

• :nth-child(n)



Selektory

CSS3

• Vlastné písma

• rôzne prehliadače majú rôznu podporu

• EOT - IE

• WOFF - nový štandard

• SVG - iOS

• TTF29.08.2013Bratislava


Písma

CSS3

• Podpora farebných modelov: RGB(A), HSL(A)

• color:rgb(0,0,0);

• background:rgba(255,255,255,0.7);

• Tiene

• text-shadow:0 2px 4px rgba(0,0,0,0.7);



• box-shadow:0 4px 8px rgba(0,0,0,0.7);

•Oblé rohy

• border-radius: 10px

•Farebné prechody

• background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(white));

Multimédia

• <video src=”video.mp4” autoplay controls id=”video”></video>

document.getElementById("video").play();

• <audio src=”audio.mp3” autoplay controls id=”audio”></audio>

document.getElementById("audio").muted = false;



JavaScript selektory, API pre prácu s históriou prehliadača

• var els = document.getElementsByClassName('section');

• var tds = document.querySelectorAll("table.test > tr > td");



JavaScript selektory, API pre prácu s históriou prehliadača• history.pushState(null, ‘Názov do histórie’, 'adresa');

• window.addEventListener('popstate', function( event ) {

if(history && history.pushState) {

var route = location.pathname;

}});



Offline úložiská

• Web Storage

• Web SQL Databáza

• IndexedDB

• Application Cache



Offline úložiská

• Web Storage

• window.localStorage.setItem('x', ‘value’);

• var x = window.localStorage.getItem('x');



Realtime komunikácia

• var socket = new WebSocket('ws://html5rocks.websocket.org/echo');

• socket.onopen = function(event) {

socket.send('Hello, WebSocket');

};

• socket.onmessage = function(event) { alert(event.data); }

• socket.onclose = function(event) { alert('closed'); }29.08.2013Bratislava


Demo: http://dev.mattonik.com/

html5/app/



http://dev.mattonik.com/html5/app/




Q&A



Ďakujem za pozornosť



Potulky s HTML5

Technology

Transcript of Potulky s HTML5