HTML5 workshop, part 1
Upcoming SlideShare
Loading in...5
×
 

HTML5 workshop, part 1

on

  • 3,293 views

Workshop given at Jfokus 2012

Workshop given at Jfokus 2012

Statistics

Views

Total Views
3,293
Views on SlideShare
3,289
Embed Views
4

Actions

Likes
6
Downloads
74
Comments
0

3 Embeds 4

http://dandan.nonobo.com 2
http://us-w1.rockmelt.com 1
https://twimg0-a.akamaihd.net 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 workshop, part 1 Presentation Transcript

  • 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/