HTML5 Semantics, APIs and Platforms
•
3 likes•6,401 views
This document discusses HTML5 and related topics. It provides code examples of new HTML5 elements like <header>, <article>, and <canvas>. It demonstrates how to add semantics, draw shapes, and load images onto a canvas. It also mentions new APIs for video, custom data attributes, and live regions for accessibility. The goal is to introduce HTML5 and showcase its capabilities for building engaging web content.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to HTML5 Semantics, APIs and Platforms
Similar to HTML5 Semantics, APIs and Platforms (20)
More from Robert Nyman
More from Robert Nyman (20)
Recently uploaded
Recently uploaded (20)
HTML5 Semantics, APIs and Platforms
- 1. HTML5 The Open Web, and what it means for you
- 4. @robertnyman
- 5. 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
- 12. What is HTML5?
- 13. Semantics APIs
- 14. Platforms!
- 15. must die!!! rea lly Not
- 16. HTML5 semantics
- 18. <!DOCTYPE html>
- 20. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- 22. <header> <aside> <article> <nav> <section> <figure> <footer> <figcaption>
- 24. <!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>
- 25. <!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>
- 26. <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>
- 27. <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>
- 28. <footer id="page-footer" role="contentinfo"> Created by <a href="http://robertnyman.com/">Robert Nyman</a> </footer>
- 29. <figure> <img src="elephant.jpg" alt="A close up of an elephant"> <figcaption>A mighty big elephant, and mighty close too!</figcaption> </figure>
- 31. JAWS version 10 screen reader NVDA 2010.1 VoiceOver on iPhone IOS4
- 32. <aside aria-live="polite" aria-relevant="additions" aria-atomic="true"> Some sidebar content </aside>
- 33. WAI-ARIA Authoring Practices 1.0 Live Regions - http://www.w3.org/WAI/PF/aria-practices/ #LiveRegions
- 35. <p data-type="police" data-value="I am da law!"> An element with custom data attributes </p>
- 36. var customAttributes = document.getElementById("custom-attributes"); customAttributes.getAttribute("data-type"); customAttributes.getAttribute("data-value");
- 38. var dataset = []; for (var i in customAttributes.dataset) { dataset.push(i + ": " + customAttributes.dataset[i]); }
- 39. HTML5 Doctor
- 40. Video
- 42. <video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source> <p>Hello, older web browser</p> </video>
- 51. Canvas
- 52. <canvas id="my-canvas" width="500" height="500"> I am canvas </canvas>
- 53. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100);
- 54. context.save(); context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillRect(50, 50, 100, 100); context.clearRect(40, 40, 20, 20); context.restore();
- 56. context.fillRect(350, 50, 100, 100); context.lineWidth = "10"; context.lineJoin = "round"; context.moveTo(50, 50); context.lineTo(200, 200); context.lineTo(100, 300); context.closePath(); context.stroke(); context.fill(); context.beginPath(); context.strokeStyle = "#00f"; context.arc(200, 400, 75, 0, Math.PI*2, false); context.stroke();
- 59. context.fillStyle = "#fff"; context.fillRect(0, 0, 200, 200); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.fillRect(100, 100, 100, 100);
- 61. context.strokeStyle = "transparent"; context.arc(100, 100, 75, 0, Math.PI*2, false); context.clip(); context.stroke(); context.fillStyle = "#fff"; context.fillRect(0, 0, 200, 200); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.fillRect(100, 100, 100, 100);
- 63. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"), img = document.createElement("img"); img.addEventListener("load", function () { context.drawImage(img, 0, 0, 600, 200); // Get canvas content as a base64 image var base64Img = canvas.toDataURL("image/png"); }, false); img.setAttribute("src", "view.jpg");
- 66. pdf.js
- 67. SVG
- 68. <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>
- 70. <?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>
- 71. 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);
- 72. Raphaël JavaScript Library - SVG and VML
- 73. var paper = Raphael(document.getElementById("raphael-demo"), 320, 200), circle = paper.circle(150, 62, 60); circle.attr("fill", "#ff0000"); circle.attr("stroke", "#00ffff");
- 74. Dev tools
- 77. Can I use it?
- 84. HTML5 - The beauty of the Open Web
- 85. Robert Nyman robertnyman.com/speaking/ robnyman@mozilla.com robertnyman.com/html5/ Twitter: @robertnyman robertnyman.com/css3/