(ws14) emanuel blagonic - html5 u praksi
TRANSCRIPT
HTML5 u praksi
Web::Strategija 14 Emanuel Blagonić
Prije godinu dana...
Zašto smo se odlučili za HTML5?
Dobili smo nove tagove...
section
article
header
footer
nav
aside
hgroup
Novi tagovi = nova semantička vrijednost
Kako ih koristiti?
section
<section id=”content”> ...</section>
section
<section id=”content”> <section id=”inner-content”>...</section> <section id=”sidebar”>...</section> <section class=”clear”>...</section></section>
section
<section id=”content”> <section id=”inner-content”>...</section> <section id=”sidebar”>...</section> <section class=”clear”>...</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></footer>
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>Short description...</p>
<footer><p class=”meta tags”><a href=”#”>Tag1</a></p>
</footer>
</article>
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>
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>
</hgroup><p class=”meta author”>Emanuel Blagonić</p>
</header><p>Short description...</p>
</article>
Kako ovo koristiti — danas?bez problema
<!DOCTYPE html><html lang=”en”>
<head>
<meta charset="utf-8" /><script src=”script.js”></script><link rel="stylesheet" href="file.css">
</head>
<!DOCTYPE html><html lang=”en”>
<head>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<!DOCTYPE html><html lang=”en”>
<head>
<!--[if lt IE 9]><script>
document.createElement("header" );</script><![endif]-->
</head>
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” />
<br> <!-- je OK --><br /> <!-- je isto OK :) -->
<!-- Odaberite svoj stil pisanja tagova... ali budite konzistentni
-->
A što s formama?forme na steroidima
<input type="date"><input type="datetime"><input type="time"><input type="month"><input type="week">
<input type="color"> <input type="range"><datalist>
<input type="email"><input type="tel"><input type="url">
<input type="text" autofocus>
<input type="text" required>
<input type="text" placeholder="Search">
<input type="url"><input type="tel"> <input type="email">
Podrška u Internet Exploreru?Nepostojeća, ali postoji rješenje.
http://www.modernizr.com/http://code.google.com/p/webforms2/
Zaključak?Čekati ili krenuti?
SVG
Canvas
WebGL
Audio
Video
HTML5 podrška
* Vrijedi za Internet Explorer 9 i novije
ogg/vorbis
mp3
wav
AAC
ogg/theora
H.264
WebM
Audio i video codeci
* Vrijedi za Internet Explorer 9 i novije
Search
Phone
URL
Datalist
Podrška za forme
* 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/
http://www.quirksmode.org/html5/index.html
