html5 workshop, part 1
DESCRIPTION
Workshop given at Jfokus 2012TRANSCRIPT
HTML5The Open Web,
and what it means for you
Mozilla is a global non-profit dedicated to putting you in control of your online experience and shaping the future of the Web for the public good
"Very emotional. But I don't like it."
Platforms!
What is HTML5?
Semantics APIs
must die!!!Not really
HTML5 semantics
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<header>
<article>
<section>
<footer>
<aside>
<nav>
<figure>
<figcaption>
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>HTML5 example with new elements and WAI-ARIA landmark roles - robertnyman.com</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="screen"> <!--[if lte IE 8]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--></head>
<body id="index-page"> <div id="container"> <header role="banner"> <h1>HTML5 example <a href="http://robertnyman.com/html5">- To: Information and samples for HTML5 and related APIs</a></h1> <p>This page has valid simple HTML5 markup with new elements complemented with WAI-ARIA landmark roles for accessibility</p> </header> <div id="demo-main" role="main"> <article id="demo-main-content"> <header> <hgroup> <h2>A title</h2> <h3>Subtitle to the above title</h3> </hgroup> </header> <section> <p>Some content, created <time datetime="2009-10-14">October 14th 2009</time></p> </section> <section> <p>Some more content - I guess you get the drift by now</p> </section> </article> <aside id="demo-aside-content" role="complementary"> This is just a demo page to see HTML5 markup and WAI-ARIA landmark roles in action in a simple context </aside> </div> <footer id="page-footer" role="contentinfo"> Created by <a href="http://robertnyman.com/">Robert Nyman</a> </footer> </div> </body></html>
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>HTML5 example with new elements and WAI-ARIA landmark roles - robertnyman.com</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="screen"> <!--[if lte IE 8]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--></head>
<header role="banner"> <h1>HTML5 example <a href="http://robertnyman.com/html5">- To: Information and samples for HTML5 and related APIs</a></h1> <p>This page has valid simple HTML5 markup with new elements complemented with WAI-ARIA landmark roles for accessibility</p></header>
<div id="demo-main" role="main"> <article id="demo-main-content"> <header> <hgroup> <h2>A title</h2> <h3>Subtitle to the above title</h3> </hgroup> </header> <section> <p>Some content, created <time datetime="2009-10-14">October 14th 2009</time></p> </section> <section> <p>Some more content - I guess you get the drift by now</p> </section> </article> <aside id="demo-aside-content" role="complementary"> This is just a demo page to see HTML5 markup and WAI-ARIA landmark roles in action in a simple context </aside></div>
<footer id="page-footer" role="contentinfo"> Created by <a href="http://robertnyman.com/">Robert Nyman</a></footer>
<figure> <img src="elephant.jpg" alt="A close up of an elephant"> <figcaption>A mighty big elephant, and mighty close too!</figcaption></figure>
JAWS version 10 screen reader
NVDA 2010.1
VoiceOver on iPhone IOS4
<aside aria-live="polite" aria-relevant="additions" aria-atomic="true"> Some sidebar content
</aside>
WAI-ARIA Authoring Practices 1.0
Live Regions
-
http://www.w3.org/WAI/PF/aria-practices/#LiveRegions
Custom data attributes
<p data-type="police" data-value="I am da law!"> An element with custom data attributes</p>
<video controls src="nasa.webm"></video>
<video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source> <p>Hello, older web browser</p></video>
<video src="http://vid.ly/4w2g7d?content=video" controls></video>
Canvas
<canvas id="my-canvas" width="500" height="500"> I am canvas</canvas>
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="110" version="1.1" > <circle cx="100" cy="52" r="50" stroke="#0000ff" stroke-width="1" fill="#ff0000" /></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="110" version="1.1" > <circle cx="100" cy="52" r="50" stroke="#0000ff" stroke-width="1" fill="#ff0000" /></svg>
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");svg.setAttribute("width", "200");svg.setAttribute("height", "110");svg.setAttribute("version", "1.1");
circle.setAttribute("cx", "100");circle.setAttribute("cy", "52");circle.setAttribute("r", "50");circle.setAttribute("fill", "#ff0000");circle.setAttribute("stroke", "#00ffff");svg.appendChild(circle);document.getElementById("svg-container").appendChild(svg);
var paper = Raphael(document.getElementById("raphael-demo"), 320, 200), circle = paper.circle(150, 62, 60);circle.attr("fill", "#ff0000");circle.attr("stroke", "#00ffff");
Dev tools
Will HTML5 be around?
Questions
Can I use it?
http://html5boilerplate.com/
HTML5 -
The beauty of the Open Web
Robert [email protected]: @robertnyman
robertnyman.com/speaking/robertnyman.com/html5/robertnyman.com/css3/