Prezentácia o HTML5 na Noc kóderov v Connect.

1. Potulky s HTML5
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5

2. Martin Puškáč
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5

3. 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.2013
Bratislava
Martin Puškáč
Potulky s HTML5

4. Čo je to HTML5?
• HTML
• JavaScript
• CSS3
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5

5. Nové HTML elementy
a sémantické znáčky
• <header>
• <main>
• <nav>
• <section>
• <article>
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5
• <aside>
• <figure>
• <footer>

6. Nové HTML elementy
a sémantické znáčky
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5

7. CSS3
• Pseudo selektory
• :first-child
• :last-child
• :nth-child(n)
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5
Selektory

8. CSS3
• Vlastné písma
• rôzne prehliadače majú
rôznu podporu
• EOT - IE
• WOFF - nový štandard
• SVG - iOS
• TTF
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5
Písma

9. 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);
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5
• 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));

10. 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;
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5

11. JavaScript selektory, API pre
prácu s históriou prehliadača
• var els = document.getElementsByClassName('section');
• var tds = document.querySelectorAll("table.test > tr > td");
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5

12. 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;
}});
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5

13. Offline úložiská
• Web Storage
• Web SQL Databáza
• IndexedDB
• Application Cache
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5

14. Offline úložiská
•Web Storage
• window.localStorage.setItem('x', ‘value’);
• var x = window.localStorage.getItem('x');
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5

15. 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.2013
Bratislava
Martin Puškáč
Potulky s HTML5

16. Demo:
http://dev.mattonik.com/
html5/app/
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5

17. Q&A
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5

18. Ďakujem za pozornosť
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5