(WS14) Emanuel Blagonic - HTML5 u praksi
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

(WS14) Emanuel Blagonic - HTML5 u praksi

on

  • 544 views

 

Statistics

Views

Total Views
544
Views on SlideShare
543
Embed Views
1

Actions

Likes
0
Downloads
5
Comments
0

1 Embed 1

http://www.verious.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

(WS14) Emanuel Blagonic - HTML5 u praksi Presentation Transcript

  • 1. HTML5 u praksiWeb::Strategija 14 Emanuel Blagonić
  • 2. Prije godinu dana...
  • 3. Zašto smo se odlučili za HTML5?
  • 4. Dobili smo nove tagove...
  • 5. sectionarticleheaderfooter navasidehgroup
  • 6. Novi tagovi = novasemantička vrijednost
  • 7. Kako ih koristiti?
  • 8. section<section id=”content”> ...</section>
  • 9. section<section id=”content”> <section id=”inner-content”>...</section> <section id=”sidebar”>...</section> <section class=”clear”>...</section></section>
  • 10. section<section id=”content”> <section id=”inner-content”>...</section> <section id=”sidebar”>...</section> <section class=”clear”>...</section></section>
  • 11. article<article> <h2>Heading</h2> <p>Short description...</p></article>
  • 12. header<header id=”page-header”> <a href=”/” id=”logo”> <img src=”logo.png” /> </a></header>
  • 13. header<header> <h1><a href=”#”>Heading</a></h1> <p class=”meta author”>Emanuel Blagonić</p></header>
  • 14. footer<footer id=”page-footer”> <nav> <ul> <li><a href=”#”>Navigation item</a></li> </ul> </nav></footer>
  • 15. footer<footer> <p class=”meta tags”><a href=”#”>Tag1</a></p></footer>
  • 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. 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. aside<aside id=”main-sidebar” class=”sidebar”> ...</aside>
  • 19. hgroup<hgroup> <h1>Our company</h1> <h2>Tagline for our company</h2></hgroup>
  • 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. Kako ovo koristiti — danas? bez problema
  • 22. <!DOCTYPE html><html lang=”en”><head> <meta charset="utf-8" /> <script src=”script.js”></script> <link rel="stylesheet" href="file.css"></head>
  • 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. <!DOCTYPE html><html lang=”en”><head> <!--[if lt IE 9]> <script> document.createElement("header" ); </script> <![endif]--></head>
  • 25. Kako pišete kod? zadržite stare navike
  • 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. A što s formama? forme na steroidima
  • 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. <input type="tel"> <input type="url"> <input type="email">
  • 30. Podrška u Internet Exploreru? Nepostojeća, ali postoji rješenje. http://www.modernizr.com/ http://code.google.com/p/webforms2/
  • 31. Zaključak?Čekati ili krenuti?
  • 32. HTML5 podrška SVGCanvasWebGLAudioVideo * Vrijedi za Internet Explorer 9 i novije
  • 33. Audio i video codeciogg/vorbis mp3 wav AACogg/theora H.264 WebM * Vrijedi za Internet Explorer 9 i novije
  • 34. Podrška za formeSearchPhone URL EmailDatalist * Biti će podržano od Internet Explorera 10 i novijih
  • 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. Hvalawww.blagonic.com@emanuelblagonicemanuel@blagonic.com