13. HTML Goes Multimedia (Natively)!
Brand new <video> and <audio> tags.
Natively embedding video and audio files in html
file (as you do with images).
No Flash, Silverlight or other proprietary plug-in
15. HTML <video>: The Syntax
<video src="video.webm" controls>
</video>
Your browser does not support video element.
16. The Codec War
WebM H.264
(mp4)
Ogg Theora
IE9 Manual
Install
yes no
FF4 yes no yes
Chrome yes About to
drop
yes
Opera yes no yes
Safari no yes no
17. The Codec War Effect
<video controls>
</video>
<source src="video.webm"
type='video/webm; codecs="vp8, vorbis"'>
<source src="video.mp4" type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"'>
Your browser does not support video element.
18. Flash vs HTML5 <video>
● Easy integration with other
web tech.
● No security issues.
● It delivers better semantic.
● Content Protection.
● Easily Manageble.
● No affected by codec war
<video>
Flash
[4] Taken from Sonny Piers Photostream on Flikr
19. Web Forms: New Input Types
Before HTML5
<input type=”text”>
Generic use
20. Web Forms: New Input Types
<form>
<input type=”search”>
...
</form>
28. Web Forms 2.0: New Attributes
You can do in HTML what yo previously did
with JavaScript”
autofocus
<input type="text" id="hobby" autofocus>
autofocus through JavaScript (the old way)
<script>
// to be invoked on onload()
function giveFocus() {
document.getElementById("hobby").focus();
}
</script>
29. Web Forms 2.0: New Attributes
You can do in HTML what yo previously did
with JavaScript”
pattern
<input type="text" id="cap" name="cap"
pattern="[0-9]{5}">
30. The Canvas Element
A “place” where you can write: JavaScript
will be your pencil :)
<canvas></canvas>
Or
<canvas width=”300”
height=”300”></canvas>
32. The Canvas 2D API @ Work
[6] Developed by @hyperandroid
33. A Custom JavaScript Library
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
[7]
34. Semantic Rules
HTML5 new semantic tags.
<nav>
<footer>
<article>
<header>
<section>
<aside>
They bring a clear meaning to our pages.
35. Semantic Rules: <nav>
<nav>
<ul>
<li><a href="archive.html">Old Posts</a></li>
<li><a href="last_post.html">Last Post</a></li>
<li><a href=”faq.html”>FAQ</a></li>
</ul>
</nav>
They bring a clear meaning to our pages.
36. Semantic Rules: <footer>
<footer>
<nav>
<ul>
<li><a href="archive.html">Old Posts</a></li>
<li><a href="last_post.html">Last Post</a></li>
<li><a href=”faq.html”>FAQ</a></li>
</ul>
</nav>
</footer>
They bring a clear meaning to our pages.
37. Semantic Rules: <article>
<article>
<header>
<h1>Open Data, free your dataset</h1>
<p>Written by Gabriele Gigliotti</p>
<p>Published on <time pubdate datetime="2010-10-
22T15:30+01:00">22-10-2010</time>.</p>
</header>
<p>article text</p>
</article>
They bring a clear meaning to our pages.
39. HTML5 Feature Detection
Modernizr: the easiest way to check for any HTML5 related
feature (and much more).
<script src="modernizr-1.7.min.js"></script>
[8]
40. Feature Detection With Modernizr
if (Modernizr.canvas) {
// create a canvas obj & get a 2d context
}
<script type="text/javascript" src="modernizr-1.7.js"></script>
// Testing for video and codec support:
if (Modernizr.video && Modernizr.video.webm) {
// preload webm video assets
}
else if (Modernizr.video && Modernizr.video.h264){
// preload h264 assets
}
41. Browser Detection (Pay Attention!)
Firefox 4.01 User-Agent String on Linux
Mozilla/5.0 (X11; Linux i686; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
And then spoofing came along!
[9]
42. CSS3 Pseudo Classes
p:empty { margin: 20px; }
<p>here goes some text</p>
<p></p>
<p>other text goes here</p>
43. CSS3 Pseudo Classes
span:only-child { color: #f00; }
<p>I can resist <span>everything</span> except
<span>temptation.</span></p>
<p>I can resist everything <span>except</span>
temptation.</p>
Oscar Wilde