html5 now
TRANSCRIPT
★HTML5 NOW
Clinton R. NixonWeb Wrangler, Viget Labs
Guest Appearance By CSS3
Friday, January 29, 2010
What is HTML5?
Friday, January 29, 2010
★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
Why HTML5?
Friday, January 29, 2010
★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
HTML5 Documents
Friday, January 29, 2010
<!DOCTYPE html>
Friday, January 29, 2010
OK!
<!DOCTYPE html>
Friday, January 29, 2010
<!DOCTYPE html><title>Valid HTML 5</title><p>Hello world</p>
Friday, January 29, 2010
<!DOCTYPE html><title>Valid HTML 5</title><p>Hello world</p>
Caution!
Friday, January 29, 2010
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
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
HTML5Elements
Friday, January 29, 2010
New block-level elements
★ header
★ footer
★ hgroup
★ nav
★ section
★ article
★ aside
★ dialog
★ command
★ output
Friday, January 29, 2010
New block-level elements
★ header
★ footer
★ hgroup
★ nav
★ section
★ article
★ aside
★ dialog
★ command
★ output
OK*
Friday, January 29, 2010
New block-level elements
★ header
★ footer
★ hgroup
★ nav
★ section
★ article
★ aside
★ dialog
★ command
★ output
OK*Caution!
Friday, January 29, 2010
<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
<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
New text-level elements
★ mark
★ time
★ meter
★ progress
Friday, January 29, 2010
New text-level elements
★ mark
★ time
★ meter
★ progress
OK*
Friday, January 29, 2010
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
* IE, Firefox 2
Friday, January 29, 2010
* IE, Firefox 2
IE doesn’t let you style unknown elements. You can fix this with a little JS.
Friday, January 29, 2010
* 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
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
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
OK!
Friday, January 29, 2010
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
OK!
metal
Friday, January 29, 2010
Elements that have been run out of town★ basefont
★ big
★ center
★ font
★ s
★ strike
★ tt
★ u
★ frame
★ frameset
★ noframes
★ acronym
★ applet
Friday, January 29, 2010
New and changed attributes
★ All presentational attributes are gone.
★ <a id> instead of <a name>
★ data-*
★ contexteditable
★ contextmenu
★ draggable
★ hidden
★ spellcheck
★ <a ping>
★ <ol reversed>
★ <script async>
★ <style scoped>
Friday, January 29, 2010
New and changed attributes
★ All presentational attributes are gone.
★ <a id> instead of <a name>
★ data-*
★ contexteditable
★ contextmenu
★ draggable
★ hidden
★ spellcheck
★ <a ping>
★ <ol reversed>
★ <script async>
★ <style scoped>
OK!Friday, January 29, 2010
New and changed attributes
★ All presentational attributes are gone.
★ <a id> instead of <a name>
★ data-*
★ contexteditable
★ contextmenu
★ draggable
★ hidden
★ spellcheck
★ <a ping>
★ <ol reversed>
★ <script async>
★ <style scoped>
Caution!OK!Friday, January 29, 2010
New and changed attributes
★ All presentational attributes are gone.
★ <a id> instead of <a name>
★ data-*
★ contexteditable
★ contextmenu
★ draggable
★ hidden
★ spellcheck
★ <a ping>
★ <ol reversed>
★ <script async>
★ <style scoped>
Danger!Caution!OK!Friday, January 29, 2010
HTML5Forms
Friday, January 29, 2010
★A lot of HTML5 is focused on web applications.
★Because of that, forms have gained a lot of capabilities.
Friday, January 29, 2010
★ tel
★ search
★ url
★ datetime
★ date
★ month
★ week
★ time
★ datetime-‐local
★ number
★ range
★ color
New input types
Friday, January 29, 2010
★ tel
★ search
★ url
★ datetime
★ date
★ month
★ week
★ time
★ datetime-‐local
★ number
★ range
★ color
New input types
OK!
Friday, January 29, 2010
New attributes for form elements
★ <input autofocus>★ <input required>★ <input placeholder>★ <input form=form_id>★ <input min=x max=y>★ <input multiple>★ <input pattern=some_pattern>★ <input list=list_name>★ <form novalidate>
Friday, January 29, 2010
New attributes for form elements
★ <input autofocus>★ <input required>★ <input placeholder>★ <input form=form_id>★ <input min=x max=y>★ <input multiple>★ <input pattern=some_pattern>★ <input list=list_name>★ <form novalidate>
Caution!
Friday, January 29, 2010
Datalists
<input list="sandwiches" name="sandwich"><datalist id="sandwiches"> <option value="hamburger">hamburger <option value="reuben">reuben <option value="grilled cheese">grilled cheese</datalist>
Friday, January 29, 2010
Datalists
<input list="sandwiches" name="sandwich"><datalist id="sandwiches"> <option value="hamburger">hamburger <option value="reuben">reuben <option value="grilled cheese">grilled cheese</datalist>
Caution!
Friday, January 29, 2010
MULTIMEDIARODEO
Friday, January 29, 2010
★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
★ src
★ autobuffer
★ autoplay
★ loop
★ controls
★ width (video only)
★ height (video only)
★ poster (video only)
Media attributes
Friday, January 29, 2010
How to fix codec issues
<video controls> <source src="/downloads/streaming/media/tube1.mp4"> <source src="/downloads/streaming/media/tube1.ogv" type="video/ogg; codecs=theora,vorbis">
<!-- No HTML 5 support. Use Flash instead --> <a href="/downloads/streaming/media/tube1.mp4" id="player"></a> <script> $f("player", "/downloads/streaming/swf/flowplayer-3.0.5.swf", {config: { autoPlay: false, autoBuffering: true }}); </script> </video>
for Safari and Chrome
Friday, January 29, 2010
How to fix codec issues
<video controls> <source src="/downloads/streaming/media/tube1.mp4"> <source src="/downloads/streaming/media/tube1.ogv" type="video/ogg; codecs=theora,vorbis">
<!-- No HTML 5 support. Use Flash instead --> <a href="/downloads/streaming/media/tube1.mp4" id="player"></a> <script> $f("player", "/downloads/streaming/swf/flowplayer-3.0.5.swf", {config: { autoPlay: false, autoBuffering: true }}); </script> </video>
for Firefox
Friday, January 29, 2010
The Canvas
Friday, January 29, 2010
★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
★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 JSCaution!
Friday, January 29, 2010
JavaScriptStampede
Friday, January 29, 2010
Cross-document messaging
One document sends messages using postMessage(); another document listens by adding an event listener for “message.”
Friday, January 29, 2010
<iframe src="http://whiteboard.me/board" id="whiteboard"></iframe><form id="localwriter"> <input type="text" id="message"> <input type="submit"></form><script> $(document).ready(function () { var whiteboard = $('#whiteboard').get(0); $('#localwriter').bind('submit', function (event) { whiteboard.postMessage($('#message').val(), 'http://writeboard.me/'); event.preventDefault(); }); });</script>-‐-‐-‐<script>$(window).bind('message', function (event) { if (event.origin !== 'http://crnixon.org') { return; } $("#output").get(0).textContent += "<p>" + "so-‐and-‐so said: " + event.data;
event.source.postMessage("message posted", event.origin);});</script>
Friday, January 29, 2010
<iframe src="http://whiteboard.me/board" id="whiteboard"></iframe><form id="localwriter"> <input type="text" id="message"> <input type="submit"></form><script> $(document).ready(function () { var whiteboard = $('#whiteboard').get(0); $('#localwriter').bind('submit', function (event) { whiteboard.postMessage($('#message').val(), 'http://writeboard.me/'); event.preventDefault(); }); });</script>-‐-‐-‐<script>$(window).bind('message', function (event) { if (event.origin !== 'http://crnixon.org') { return; } $("#output").get(0).textContent += "<p>" + "so-‐and-‐so said: " + event.data;
event.source.postMessage("message posted", event.origin);});</script>
Friday, January 29, 2010
<iframe src="http://whiteboard.me/board" id="whiteboard"></iframe><form id="localwriter"> <input type="text" id="message"> <input type="submit"></form><script> $(document).ready(function () { var whiteboard = $('#whiteboard').get(0); $('#localwriter').bind('submit', function (event) { whiteboard.postMessage($('#message').val(), 'http://writeboard.me/'); event.preventDefault(); }); });</script>-‐-‐-‐<script>$(window).bind('message', function (event) { if (event.origin !== 'http://crnixon.org') { return; } $("#output").get(0).textContent += "<p>" + "so-‐and-‐so said: " + event.data;
event.source.postMessage("message posted", event.origin);});</script>
Friday, January 29, 2010
<iframe src="http://whiteboard.me/board" id="whiteboard"></iframe><form id="localwriter"> <input type="text" id="message"> <input type="submit"></form><script> $(document).ready(function () { var whiteboard = $('#whiteboard').get(0); $('#localwriter').bind('submit', function (event) { whiteboard.postMessage($('#message').val(), 'http://writeboard.me/'); event.preventDefault(); }); });</script>-‐-‐-‐<script>$(window).bind('message', function (event) { if (event.origin !== 'http://crnixon.org') { return; } $("#output").get(0).textContent += "<p>" + "so-‐and-‐so said: " + event.data;
event.source.postMessage("message posted", event.origin);});</script>
Friday, January 29, 2010
<iframe src="http://whiteboard.me/board" id="whiteboard"></iframe><form id="localwriter"> <input type="text" id="message"> <input type="submit"></form><script> $(document).ready(function () { var whiteboard = $('#whiteboard').get(0); $('#localwriter').bind('submit', function (event) { whiteboard.postMessage($('#message').val(), 'http://writeboard.me/'); event.preventDefault(); }); });</script>-‐-‐-‐<script>$(window).bind('message', function (event) { if (event.origin !== 'http://crnixon.org') { return; } $("#output").get(0).textContent += "<p>" + "so-‐and-‐so said: " + event.data;
event.source.postMessage("message posted", event.origin);});</script>
Friday, January 29, 2010
<iframe src="http://whiteboard.me/board" id="whiteboard"></iframe><form id="localwriter"> <input type="text" id="message"> <input type="submit"></form><script> $(document).ready(function () { var whiteboard = $('#whiteboard').get(0); $('#localwriter').bind('submit', function (event) { whiteboard.postMessage($('#message').val(), 'http://writeboard.me/'); event.preventDefault(); }); });</script>-‐-‐-‐<script>$(window).bind('message', function (event) { if (event.origin !== 'http://crnixon.org') { return; } $("#output").get(0).textContent += "<p>" + "so-‐and-‐so said: " + event.data;
event.source.postMessage("message posted", event.origin);});</script>
Friday, January 29, 2010
<iframe src="http://whiteboard.me/board" id="whiteboard"></iframe><form id="localwriter"> <input type="text" id="message"> <input type="submit"></form><script> $(document).ready(function () { var whiteboard = $('#whiteboard').get(0); $('#localwriter').bind('submit', function (event) { whiteboard.postMessage($('#message').val(), 'http://writeboard.me/'); event.preventDefault(); }); });</script>-‐-‐-‐<script>$(window).bind('message', function (event) { if (event.origin !== 'http://crnixon.org') { return; } $("#output").get(0).textContent += "<p>" + "so-‐and-‐so said: " + event.data;
event.source.postMessage("message posted", event.origin);});</script>
Friday, January 29, 2010
<iframe src="http://whiteboard.me/board" id="whiteboard"></iframe><form id="localwriter"> <input type="text" id="message"> <input type="submit"></form><script> $(document).ready(function () { var whiteboard = $('#whiteboard').get(0); $('#localwriter').bind('submit', function (event) { whiteboard.postMessage($('#message').val(), 'http://writeboard.me/'); event.preventDefault(); }); });</script>-‐-‐-‐<script>$(window).bind('message', function (event) { if (event.origin !== 'http://crnixon.org') { return; } $("#output").get(0).textContent += "<p>" + "so-‐and-‐so said: " + event.data;
event.source.postMessage("message posted", event.origin);});</script>
Friday, January 29, 2010
<iframe src="http://whiteboard.me/board" id="whiteboard"></iframe><form id="localwriter"> <input type="text" id="message"> <input type="submit"></form><script> $(document).ready(function () { var whiteboard = $('#whiteboard').get(0); $('#localwriter').bind('submit', function (event) { whiteboard.postMessage($('#message').val(), 'http://writeboard.me/'); event.preventDefault(); }); });</script>-‐-‐-‐<script>$(window).bind('message', function (event) { if (event.origin !== 'http://crnixon.org') { return; } $("#output").get(0).textContent += "<p>" + "so-‐and-‐so said: " + event.data;
event.source.postMessage("message posted", event.origin);});</script>
Friday, January 29, 2010
<iframe src="http://whiteboard.me/board" id="whiteboard"></iframe><form id="localwriter"> <input type="text" id="message"> <input type="submit"></form><script> $(document).ready(function () { var whiteboard = $('#whiteboard').get(0); $('#localwriter').bind('submit', function (event) { whiteboard.postMessage($('#message').val(), 'http://writeboard.me/'); event.preventDefault(); }); });</script>-‐-‐-‐<script>$(window).bind('message', function (event) { if (event.origin !== 'http://crnixon.org') { return; } $("#output").get(0).textContent += "<p>" + "so-‐and-‐so said: " + event.data;
event.source.postMessage("message posted", event.origin);});</script>
Friday, January 29, 2010
<iframe src="http://whiteboard.me/board" id="whiteboard"></iframe><form id="localwriter"> <input type="text" id="message"> <input type="submit"></form><script> $(document).ready(function () { var whiteboard = $('#whiteboard').get(0); $('#localwriter').bind('submit', function (event) { whiteboard.postMessage($('#message').val(), 'http://writeboard.me/'); event.preventDefault(); }); });</script>-‐-‐-‐<script>$(window).bind('message', function (event) { if (event.origin !== 'http://crnixon.org') { return; } $("#output").get(0).textContent += "<p>" + "so-‐and-‐so said: " + event.data;
event.source.postMessage("message posted", event.origin);});</script>
Caution!
Friday, January 29, 2010
Not actually HTML5★ Web Workers★ Web Storage★ Web Sockets★ Server-sent Events★ Web SQL Database★ Geolocation API★ XMLHttpRequest Level 2
Friday, January 29, 2010
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
Web Storage
★Key-value pairs★ sessionStorage and localStorage★Asynchronous, but fires events★Only stores strings★Max storage size varies by browser
OK!
Friday, January 29, 2010
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
Detection with
MODERNIZRFriday, January 29, 2010
★ Input types★ Input attributes★ <audio> and <video>★ <canvas>★ <canvas> text★ localStorage★ sessionStorage★ Web Workers★ applicationCache★ Geolocation API
★ @font-face★ border-image★ border-radius★ box-shadow★ Multiple backgrounds★ opacity★ CSS animations,
reflections & transforms
★ Columns
Friday, January 29, 2010
★Adds detection via CSS properties and JavaScript.
★Attaches classes to <html> and creates a global Modernizr object.
★Allows you to add your own tests.
Modernizr
Friday, January 29, 2010
/* Simulated box shadow using borders: */div.somediv { border-bottom: 1px solid #666; border-right: 1px solid #777;}.boxshadow div.somediv { border: none; box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px; -webkit-box-shadow: #666 1px 1px 1px;}
Friday, January 29, 2010
if (!Modernizr.inputtypes.date){ $("input[type='date']").datepicker();}
Friday, January 29, 2010
The Future of HTML
Friday, January 29, 2010
Questions?
<Friday, January 29, 2010
Find out more at:
http://crnixon.org
http://pinboard.in/u:crnixon/t:html5/
or email me at [email protected].
Friday, January 29, 2010