HTML 5 provides us with all sorts of new abilities as web designers. We have new tags and attributes, richer form fields, client-side storage, and more. We’ll talk about how you can start using these features today and how to use them in a cross-browser friendly manner.
3. ★ Not XHTML 2.0
★ “Web Applications 1.0”
★ Description of current browser behavior
★ Description of common web page structure
★ A bunch of new tags
★ And a bunch of new attributes
★ New JavaScript capabilities
★ The DOM definition
Friday, January 29, 2010
5. ★ Ease of use
★ Semantic blah blah blah
★ Reduce content size
★ JavaScript and web app capabilities
★ Mobile applications
★ Learning new things is fun
Friday, January 29, 2010
9. <!DOCTYPE html>
<title>Valid HTML 5</title>
<p>Hello world</p>
Friday, January 29, 2010
10. Caut
ion!
<!DOCTYPE html>
<title>Valid HTML 5</title>
<p>Hello world</p>
Friday, January 29, 2010
11. This is not XHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Sample HTML 5 Page</title>
<body>
<p>This is perfectly valid HTML.
Friday, January 29, 2010
12. But XHTML-style is also valid
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Sample HTML 5 Page</title>
</head>
<body>
<p>This is perfectly valid HTML.</p>
</body>
</html>
Friday, January 29, 2010
14. New block-level elements
★ header ★ article
★ footer ★ aside
★ hgroup ★ dialog
★ nav ★ command
★ section ★ output
Friday, January 29, 2010
15. New block-level elements
★ header ★ article OK*
★ footer ★ aside
★ hgroup ★ dialog
★ nav ★ command
★ section ★ output
Friday, January 29, 2010
16. New block-level elements
★ header ★ article OK*
★ footer ★ aside
★ hgroup Cau
tion
! ★ dialog
★ nav ★ command
★ section ★ output
Friday, January 29, 2010
17. <header>
<h1>Good Times Blog</h1>
<p class="description">Good Times Blog is the blog that most ...</p>
</header>
<nav>
<menu>
<li><a href="/archives">Archives</a></li>
<li><a href="/about">About</a></li>
</menu>
</nav>
<section id="posts">
<article>
<header>
<h2>Best Throat-‐Singing Albums of 2009</h2>
<div class="date">10 Jan 2009</div>
</header>
<p>The best throat-‐singing ...</p>
<p>In my opinion ...</p>
<aside><p>Throat singing is practiced by ...</p></aside>
<footer>
<p>Posted by Clinton R. Nixon</p>
<p><a href="/best-‐throat-‐singing#comments">3 comments</a></p>
</footer>
</article>
<article>...</article>
<nav><a href="/archives">Earlier Entries</a></nav>
</section>
<footer><p>Good Times Blog is (c) 2010 +3 Magic Sword Productions</p></footer>
Friday, January 29, 2010
18. <section id="posts">
<article>
<header>
<h2>Best Throat-‐Singing Albums of 2009</h2>
<div class="date">10 Jan 2009</div>
</header>
<p>The best throat-‐singing ...</p>
<p>In my opinion ...</p>
<aside>
<p>Throat singing is practiced by ...</p>
</aside>
<footer>
<p>Posted by Clinton R. Nixon</p>
<p><a href="/best-‐throat-‐singing#comments">
3 comments</a></p>
</footer>
</article>
<article>...</article>
<nav><a href="/archives">Earlier Entries</a></nav>
</section>
Friday, January 29, 2010
21. This album received
<meter value="7.4" min="0.0" max="10.0"
low="5.0" high="7.5" optimum="9.0">
a score of 7.4
</meter> on Pitchfork.
You answered
<meter>62.5%</meter> or <meter>5/8</meter>ths
of the trivia questions correctly.
We are
<progress value="48" max="91">
more than halfway
</progress>
through with the movie.
Friday, January 29, 2010
23. * IE, Firefox 2
IE doesn’t let you style unknown elements.
You can fix this with a little JS.
Friday, January 29, 2010
24. * IE, Firefox 2
IE doesn’t let you style unknown elements.
You can fix this with a little JS.
Firefox 2 (and other old Gecko browsers) are
batpoop crazy. 3-4% of the browser market.
Worth it?
Friday, January 29, 2010
25. Changed elements
★ block-level <a>
★ <b>, <i> and <small> are semantically
justified
★ <address> is revisited
★ <menu> is back in town and ready to kick
<ul> in the validator
Friday, January 29, 2010
26. Changed elements
★ block-level <a> OK!
★ <b>, <i> and <small> are semantically
justified
★ <address> is revisited
★ <menu> is back in town and ready to kick
<ul> in the validator
Friday, January 29, 2010
27. Changed elements
★ block-level <a> OK!
★ <b>, <i> and <small> are semantically
justified
★ <address> is revisited
★ <menu> is back in town and ready to kick
<ul> in the validator metal
Friday, January 29, 2010
28. Elements that have
been run out of town
basefont u
big frame
center frameset
font noframes
s acronym
strike applet
tt
Friday, January 29, 2010
29. New and changed
attributes
All presentational contexteditable <ol reversed>
attributes are contextmenu <script async>
gone. draggable <style scoped>
<a id> instead of hidden
<a name> spellcheck
data-* <a ping>
Friday, January 29, 2010
30. New and changed
attributes
All presentational contexteditable <ol reversed>
attributes are contextmenu <script async>
gone. draggable <style scoped>
<a id> instead of hidden
<a name> spellcheck
data-* <a ping>
OK!
Friday, January 29, 2010
31. New and changed
attributes
All presentational contexteditable <ol reversed>
attributes are contextmenu <script async>
gone. draggable <style scoped>
<a id> instead of hidden
<a name> spellcheck
data-* <a ping>
OK! Caut
ion!
Friday, January 29, 2010
32. New and changed
attributes
All presentational contexteditable <ol reversed>
attributes are contextmenu <script async>
gone. draggable <style scoped>
<a id> instead of hidden
<a name> spellcheck
data-* <a ping>
OK! Caut
ion!
Danger!
Friday, January 29, 2010
42. ★ New tags: <audio> and <video>
★ Only supported in FF 3.5+, Safari 4,
and Chrome 3
★ Biggest problem: codec support
★ Biggest use: mobile devices
Friday, January 29, 2010
47. ★ Pixel-based drawing surface: points,
lines, curves, shapes, gradients, fonts,
images, and even video
★ Doesn’t work with IE natively
★ ExplorerCanvas can help, but isn’t
perfect (no fonts, images, or video)
★ Alternative to Flash
★ Interactive via JS
Friday, January 29, 2010
48. ★ Pixel-based drawing surface: points,
lines, curves, shapes, gradients, fonts,
images, and even video
★ Doesn’t work with IE natively
★ ExplorerCanvas can help, but isn’t
perfect (no fonts, images, or video)
★ Alternative to Flash
Caut
★ Interactive via JS ion!
Friday, January 29, 2010
50. Cross-document messaging
One document sends messages using
postMessage(); another document listens
by adding an event listener for
“message.”
Friday, January 29, 2010
62. Not actually HTML5
★ Web Workers
★ Web Storage
★ Web Sockets
★ Server-sent Events
★ Web SQL Database
★ Geolocation API
★ XMLHttpRequest Level 2
Friday, January 29, 2010
63. Web Storage
★ Key-value pairs
★ sessionStorage and localStorage
★ Asynchronous, but fires events
★ Only stores strings
★ Max storage size varies by browser
Friday, January 29, 2010
64. Web Storage
OK!
★ Key-value pairs
★ sessionStorage and localStorage
★ Asynchronous, but fires events
★ Only stores strings
★ Max storage size varies by browser
Friday, January 29, 2010
65. localStorage.setItem("emails",
JSON.stringify(emails));
var emails = JSON.parse(
localStorage.getItem("emails"));
localStorage.removeItem("emails");
localStorage.clear();
$(window).bind('storage', function (event) {
if (event.key == null) {
// clear event
} else if (event.newValue == null) {
// removeItem event
} else {
// setItem event
}
});
Friday, January 29, 2010
66. Detection
with
MODERNIZR
Friday, January 29, 2010
68. Modernizr
★ Adds detection via CSS properties
and JavaScript.
★ Attaches classes to <html> and creates
a global Modernizr object.
★ Allows you to add your own tests.
Friday, January 29, 2010