★ HTML5 NOW Clinton R. Nixon Web Wrangler, Viget Labs Guest Appearance By CSS3 Friday, January 29, 2010
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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
Related Documents
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ...interoperability.blob.core.windows.net/web/MS-HTML5/[MS-HTML5].pdf · Microsoft Edge / Internet Explorer HTML5 Standards Support](https://static.cupdf.com/doc/110x72/5a903bb67f8b9a4a268e1ade/ms-html5-microsoft-edge-internet-explorer-html5-ms-html5pdfmicrosoft.jpg)
