HTML5 u praksiWeb::Strategija 14   Emanuel Blagonić
Prije godinu dana...
Zašto smo se odlučili za       HTML5?
Dobili smo nove tagove...
sectionarticleheaderfooter navasidehgroup
Novi tagovi = novasemantička vrijednost
Kako ih koristiti?
section<section id=”content”>   ...</section>
section<section id=”content”>   <section id=”inner-content”>...</section>   <section id=”sidebar”>...</section>   <section...
section<section id=”content”>   <section id=”inner-content”>...</section>   <section id=”sidebar”>...</section>   <section...
article<article>   <h2>Heading</h2>   <p>Short description...</p></article>
header<header id=”page-header”>   <a href=”/” id=”logo”>      <img src=”logo.png” />   </a></header>
header<header>   <h1><a href=”#”>Heading</a></h1>   <p class=”meta author”>Emanuel Blagonić</p></header>
footer<footer id=”page-footer”>   <nav>      <ul>          <li><a href=”#”>Navigation item</a></li>      </ul>   </nav></f...
footer<footer>   <p class=”meta tags”><a href=”#”>Tag1</a></p></footer>
<article>  <header>     <h1><a href=”#”>Naslov</a></h1>     <p class=”meta author”>Emanuel Blagonić</p>  </header>  <p>Sho...
nav<nav>   <a href=”#” class=”button-mobile”>Show navigation</a>  <ul class=”navigation-primary”>     <li><a href=”#”>Home...
aside<aside id=”main-sidebar” class=”sidebar”>   ...</aside>
hgroup<hgroup>   <h1>Our company</h1>   <h2>Tagline for our company</h2></hgroup>
hgroup<article>   <header>     <hgroup>        <h1>Article title</h1>        <h2>Subtitle for the article</h2>     </hgrou...
Kako ovo koristiti — danas?         bez problema
<!DOCTYPE html><html lang=”en”><head>  <meta charset="utf-8" />  <script src=”script.js”></script>  <link rel="stylesheet"...
<!DOCTYPE html><html lang=”en”><head>  <!--[if lt IE 9]>  <script src="http://html5shim.googlecode.com/svn/trunk/  html5.j...
<!DOCTYPE html><html lang=”en”><head>  <!--[if lt IE 9]>  <script>     document.createElement("header" );  </script>  <![e...
Kako pišete kod?  zadržite stare navike
<!-- HTML5 <3 --><!-- Odaberite svoj stil pisanja tagova --><img src=”logo.png”><IMG SRC=”logo.png”><img src=”logo.png” />...
A što s formama?  forme na steroidima
<input type="date"><input type="datetime"><input type="time">                          <input type="text"<input type="mont...
<input type="tel">   <input type="url">   <input type="email">
Podrška u Internet Exploreru?      Nepostojeća, ali postoji rješenje.         http://www.modernizr.com/   http://code.goog...
Zaključak?Čekati ili krenuti?
HTML5 podrška SVGCanvasWebGLAudioVideo                  * Vrijedi za Internet Explorer 9 i novije
Audio i video codeciogg/vorbis   mp3   wav  AACogg/theora  H.264  WebM                      * Vrijedi za Internet Explorer...
Podrška za formeSearchPhone URL EmailDatalist                  * Biti će podržano od Internet Explorera 10 i novijih
Gdje naučiti više?       http://www.w3.org/TR/html5/         http://html5doctor.com/       http://html5boilerplate.com/htt...
Hvalawww.blagonic.com@emanuelblagonicemanuel@blagonic.com
Upcoming SlideShare
Loading in …5
×

(WS14) Emanuel Blagonic - HTML5 u praksi

497 views
425 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
497
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

(WS14) Emanuel Blagonic - HTML5 u praksi

  1. 1. HTML5 u praksiWeb::Strategija 14 Emanuel Blagonić
  2. 2. Prije godinu dana...
  3. 3. Zašto smo se odlučili za HTML5?
  4. 4. Dobili smo nove tagove...
  5. 5. sectionarticleheaderfooter navasidehgroup
  6. 6. Novi tagovi = novasemantička vrijednost
  7. 7. Kako ih koristiti?
  8. 8. section<section id=”content”> ...</section>
  9. 9. section<section id=”content”> <section id=”inner-content”>...</section> <section id=”sidebar”>...</section> <section class=”clear”>...</section></section>
  10. 10. section<section id=”content”> <section id=”inner-content”>...</section> <section id=”sidebar”>...</section> <section class=”clear”>...</section></section>
  11. 11. article<article> <h2>Heading</h2> <p>Short description...</p></article>
  12. 12. header<header id=”page-header”> <a href=”/” id=”logo”> <img src=”logo.png” /> </a></header>
  13. 13. header<header> <h1><a href=”#”>Heading</a></h1> <p class=”meta author”>Emanuel Blagonić</p></header>
  14. 14. footer<footer id=”page-footer”> <nav> <ul> <li><a href=”#”>Navigation item</a></li> </ul> </nav></footer>
  15. 15. footer<footer> <p class=”meta tags”><a href=”#”>Tag1</a></p></footer>
  16. 16. <article> <header> <h1><a href=”#”>Naslov</a></h1> <p class=”meta author”>Emanuel Blagonić</p> </header> <p>Short description...</p> <footer> <p class=”meta tags”><a href=”#”>Tag1</a></p> </footer></article>
  17. 17. nav<nav> <a href=”#” class=”button-mobile”>Show navigation</a> <ul class=”navigation-primary”> <li><a href=”#”>Home</a></li> <li><a href=”#”>About us</a></li> <li><a href=”#”>Contact</a></li> <li><a href=”#”>Blog</a></li> </ul> <ul class=”navigation-secondary”> <li><a href=”#”>Sitemap</a></li> <li><a href=”#”>Privacy policy</a></li> </ul></nav>
  18. 18. aside<aside id=”main-sidebar” class=”sidebar”> ...</aside>
  19. 19. hgroup<hgroup> <h1>Our company</h1> <h2>Tagline for our company</h2></hgroup>
  20. 20. hgroup<article> <header> <hgroup> <h1>Article title</h1> <h2>Subtitle for the article</h2> </hgroup> <p class=”meta author”>Emanuel Blagonić</p> </header> <p>Short description...</p></article>
  21. 21. Kako ovo koristiti — danas? bez problema
  22. 22. <!DOCTYPE html><html lang=”en”><head> <meta charset="utf-8" /> <script src=”script.js”></script> <link rel="stylesheet" href="file.css"></head>
  23. 23. <!DOCTYPE html><html lang=”en”><head> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/ html5.js"></script> <![endif]--></head>
  24. 24. <!DOCTYPE html><html lang=”en”><head> <!--[if lt IE 9]> <script> document.createElement("header" ); </script> <![endif]--></head>
  25. 25. Kako pišete kod? zadržite stare navike
  26. 26. <!-- HTML5 <3 --><!-- Odaberite svoj stil pisanja tagova --><img src=”logo.png”><IMG SRC=”logo.png”><img src=”logo.png” /><br> <!-- je OK --><br /> <!-- je isto OK :) --><!-- Odaberite svoj stil pisanja tagova... ali budite konzistentni-->
  27. 27. A što s formama? forme na steroidima
  28. 28. <input type="date"><input type="datetime"><input type="time"> <input type="text"<input type="month"> autofocus><input type="week"> <input type="text"<input type="color"> required><input type="range"><datalist> <input type="text" placeholder="Search"><input type="email"><input type="tel"><input type="url">
  29. 29. <input type="tel"> <input type="url"> <input type="email">
  30. 30. Podrška u Internet Exploreru? Nepostojeća, ali postoji rješenje. http://www.modernizr.com/ http://code.google.com/p/webforms2/
  31. 31. Zaključak?Čekati ili krenuti?
  32. 32. HTML5 podrška SVGCanvasWebGLAudioVideo * Vrijedi za Internet Explorer 9 i novije
  33. 33. Audio i video codeciogg/vorbis mp3 wav AACogg/theora H.264 WebM * Vrijedi za Internet Explorer 9 i novije
  34. 34. Podrška za formeSearchPhone URL EmailDatalist * Biti će podržano od Internet Explorera 10 i novijih
  35. 35. Gdje naučiti više? http://www.w3.org/TR/html5/ http://html5doctor.com/ http://html5boilerplate.com/http://www.quirksmode.org/html5/index.html
  36. 36. Hvalawww.blagonic.com@emanuelblagonicemanuel@blagonic.com

×