HTML5The Open Web,  and what it means for you
Mozilla is aglobal non-profit dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for ...
@robertnyman
"Very emotional. But I dont like it."
Platforms!
What is HTML5?
Semantics   APIs
must die!!!              rea lly        Not
HTML5 semantics
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<header>    <aside><article>   <nav><section>   <figure><footer>    <figcaption>
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>HTML5 example with new elements and WAI-ARIA landmark role...
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>HTML5 example with new elements and WAI-ARIA landmarkroles...
<header role="banner">    <h1>HTML5 example <a href="http://robertnyman.com/html5">-To: Information and samples for HTML5 ...
<div id="demo-main" role="main">    <article id="demo-main-content">        <header>            <hgroup>                 <...
<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 clos...
JAWS version 10 screen readerNVDA 2010.1VoiceOver 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/    ...
Custom data attributes
<p data-type="police" data-value="I am da law!">     An element with custom data attributes</p>
HTML5 Doctor
Video
<video controls src="nasa.webm"></video>
<video controls>    <source src="nasa.mp4"></source>    <source src="nasa.webm"></source>    <p>Hello, older web browser</...
<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"...
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"    "http://www.w3.org/Graphics/SVG/1.1...
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"),    circle = document.createElementNS("http://www....
Raphaël JavaScript Library            -      SVG and VML
var paper = Raphael(document.getElementById("raphael-demo"), 320, 200),    circle = paper.circle(150, 62, 60);circle.attr(...
Dev tools
Will HTML5 be around?
Questions
Can I use it?
http://caniuse.com
http://html5boilerplate.com/
HTML5             -The beauty of the Open Web
Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/    Twitter: @robertnymanrobertnyman.com/c...
HTML5 workshop, part 1
HTML5 workshop, part 1
HTML5 workshop, part 1
HTML5 workshop, part 1
HTML5 workshop, part 1
HTML5 workshop, part 1
HTML5 workshop, part 1
HTML5 workshop, part 1
HTML5 workshop, part 1
HTML5 workshop, part 1
HTML5 workshop, part 1
HTML5 workshop, part 1
HTML5 workshop, part 1
HTML5 workshop, part 1
HTML5 workshop, part 1
HTML5 workshop, part 1
HTML5 workshop, part 1
HTML5 workshop, part 1
HTML5 workshop, part 1
HTML5 workshop, part 1
HTML5 workshop, part 1
Upcoming SlideShare
Loading in...5
×

HTML5 workshop, part 1

2,865

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
2,865
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
84
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

HTML5 workshop, part 1

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

    Clipping is a handy way to collect important slides you want to go back to later.

×