Potulky s HTML5
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5
Martin Puškáč
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5
Dnes nás čaká
• Čo je to HTML5?
• Nové HTML elementy a sémantické znáčky
• CSS3
• Multimédia
• JavaScript selektory, API p...
Čo je to HTML5?
• HTML
• JavaScript
• CSS3
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5
Nové HTML elementy
a sémantické znáčky
• <header>
• <main>
• <nav>
• <section>
• <article>
29.08.2013
Bratislava
Martin Pu...
Nové HTML elementy
a sémantické znáčky
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5
CSS3
• Pseudo selektory
• :first-child
• :last-child
• :nth-child(n)
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5
Se...
CSS3
• Vlastné písma
• rôzne prehliadače majú
rôznu podporu
• EOT - IE
• WOFF - nový štandard
• SVG - iOS
• TTF
29.08.2013...
CSS3
• Podpora farebných modelov:
RGB(A), HSL(A)
• color:rgb(0,0,0);
• background:rgba(255,255,255,0.7);
• Tiene
• text-sh...
Multimédia
• <video src=”video.mp4” autoplay controls id=”video”></video>
document.getElementById("video").play();
• <audi...
JavaScript selektory, API pre
prácu s históriou prehliadača
• var els = document.getElementsByClassName('section');
• var ...
JavaScript selektory, API pre
prácu s históriou prehliadača
• history.pushState(null, ‘Názov do histórie’, 'adresa');
• wi...
Offline úložiská
• Web Storage
• Web SQL Databáza
• IndexedDB
• Application Cache
29.08.2013
Bratislava
Martin Puškáč
Potulk...
Offline úložiská
•Web Storage
• window.localStorage.setItem('x', ‘value’);
• var x = window.localStorage.getItem('x');
29.08...
Realtime komunikácia
• var socket = new WebSocket('ws://html5rocks.websocket.org/echo');
• socket.onopen = function(event)...
Demo:
http://dev.mattonik.com/
html5/app/
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5
Q&A
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5
Ďakujem za pozornosť
29.08.2013
Bratislava
Martin Puškáč
Potulky s HTML5
Upcoming SlideShare
Loading in …5
×

Potulky s HTML5

434 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
434
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Potulky s HTML5

  1. 1. Potulky s HTML5 29.08.2013 Bratislava Martin Puškáč Potulky s HTML5
  2. 2. Martin Puškáč 29.08.2013 Bratislava Martin Puškáč Potulky s HTML5
  3. 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. 4. Čo je to HTML5? • HTML • JavaScript • CSS3 29.08.2013 Bratislava Martin Puškáč Potulky s HTML5
  5. 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. 6. Nové HTML elementy a sémantické znáčky 29.08.2013 Bratislava Martin Puškáč Potulky s HTML5
  7. 7. CSS3 • Pseudo selektory • :first-child • :last-child • :nth-child(n) 29.08.2013 Bratislava Martin Puškáč Potulky s HTML5 Selektory
  8. 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. 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. 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. 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. 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. 13. Offline úložiská • Web Storage • Web SQL Databáza • IndexedDB • Application Cache 29.08.2013 Bratislava Martin Puškáč Potulky s HTML5
  14. 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. 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. 16. Demo: http://dev.mattonik.com/ html5/app/ 29.08.2013 Bratislava Martin Puškáč Potulky s HTML5
  17. 17. Q&A 29.08.2013 Bratislava Martin Puškáč Potulky s HTML5
  18. 18. Ďakujem za pozornosť 29.08.2013 Bratislava Martin Puškáč Potulky s HTML5

×