HTML5 workshop, part 1

4,655 views
4,079 views

Published on

Workshop given at Jfokus 2012

Published in: Technology, Art & Photos
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,655
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
85
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

HTML5 workshop, part 1

  1. HTML5The Open Web, and what it means for you
  2. Mozilla is aglobal non-profit dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for thepublic good
  3. @robertnyman
  4. "Very emotional. But I dont like it."
  5. Platforms!
  6. What is HTML5?
  7. Semantics APIs
  8. must die!!! rea lly Not
  9. HTML5 semantics
  10. <!DOCTYPE html>
  11. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  12. <meta charset="utf-8">
  13. <header> <aside><article> <nav><section> <figure><footer> <figcaption>
  14. <!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>
  15. <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>HTML5 example with new elements and WAI-ARIA landmarkroles - 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>
  16. <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 elementscomplemented with WAI-ARIA landmark roles for accessibility</p></header>
  17. <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">October14th 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 landmarkroles in action in a simple context </aside></div>
  18. <footer id="page-footer" role="contentinfo"> Created by <a href="http://robertnyman.com/">Robert Nyman</a></footer>
  19. <figure> <img src="elephant.jpg" alt="A close up of an elephant"> <figcaption>A mighty big elephant, and mighty close too!</figcaption></figure>
  20. JAWS version 10 screen readerNVDA 2010.1VoiceOver on iPhone IOS4
  21. <aside aria-live="polite" aria-relevant="additions" aria-atomic="true"> Some sidebar content</aside>
  22. WAI-ARIA Authoring Practices 1.0 Live Regions -http://www.w3.org/WAI/PF/aria-practices/ #LiveRegions
  23. Custom data attributes
  24. <p data-type="police" data-value="I am da law!"> An element with custom data attributes</p>
  25. HTML5 Doctor
  26. Video
  27. <video controls src="nasa.webm"></video>
  28. <video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source> <p>Hello, older web browser</p></video>
  29. <video src="http://vid.ly/4w2g7d?content=video"controls></video>
  30. Canvas
  31. <canvas id="my-canvas" width="500" height="500"> I am canvas</canvas>
  32. SVG
  33. <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>
  34. <?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>
  35. 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);
  36. Raphaël JavaScript Library - SVG and VML
  37. var paper = Raphael(document.getElementById("raphael-demo"), 320, 200), circle = paper.circle(150, 62, 60);circle.attr("fill", "#ff0000");circle.attr("stroke", "#00ffff");
  38. Dev tools
  39. Will HTML5 be around?
  40. Questions
  41. Can I use it?
  42. http://caniuse.com
  43. http://html5boilerplate.com/
  44. HTML5 -The beauty of the Open Web
  45. Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/ Twitter: @robertnymanrobertnyman.com/css3/

×