Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to HTML5 workshop, part 1
Similar to HTML5 workshop, part 1 (20)
More from Robert Nyman
More from Robert Nyman (20)
Recently uploaded
Recently uploaded (20)
HTML5 workshop, part 1
- 1. HTML5 The Open Web, and what it means for you
- 4. 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
- 5. @robertnyman
- 7. "Very emotional. But I don't like it."
- 8. Platforms!
- 10. Semantics APIs
- 11. must die!!! rea lly Not
- 12. HTML5 semantics
- 14. <!DOCTYPE html>
- 16. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- 18. <header> <aside> <article> <nav> <section> <figure> <footer> <figcaption>
- 20. <!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>
- 21. <!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>
- 22. <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>
- 23. <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>
- 24. <footer id="page-footer" role="contentinfo"> Created by <a href="http://robertnyman.com/">Robert Nyman</a> </footer>
- 25. <figure> <img src="elephant.jpg" alt="A close up of an elephant"> <figcaption>A mighty big elephant, and mighty close too!</figcaption> </figure>
- 27. JAWS version 10 screen reader NVDA 2010.1 VoiceOver on iPhone IOS4
- 28. <aside aria-live="polite" aria-relevant="additions" aria-atomic="true"> Some sidebar content </aside>
- 29. WAI-ARIA Authoring Practices 1.0 Live Regions - http://www.w3.org/WAI/PF/aria-practices/ #LiveRegions
- 31. <p data-type="police" data-value="I am da law!"> An element with custom data attributes </p>
- 32. HTML5 Doctor
- 33. Video
- 35. <video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source> <p>Hello, older web browser</p> </video>
- 42. Canvas
- 43. <canvas id="my-canvas" width="500" height="500"> I am canvas </canvas>
- 46. SVG
- 47. <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>
- 49. <?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>
- 50. 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);
- 51. Raphaël JavaScript Library - SVG and VML
- 52. var paper = Raphael(document.getElementById("raphael-demo"), 320, 200), circle = paper.circle(150, 62, 60); circle.attr("fill", "#ff0000"); circle.attr("stroke", "#00ffff");
- 53. Dev tools
- 56. Will HTML5 be around?
- 57. Questions
- 59. Can I use it?
- 65. HTML5 - The beauty of the Open Web
- 66. Robert Nyman robertnyman.com/speaking/ robnyman@mozilla.com robertnyman.com/html5/ Twitter: @robertnyman robertnyman.com/css3/