Leave No One Behind    with HTML5
@robertnyman
Mozilla is aglobal non-profit dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for ...
Accessibility
JAWS version 10 screen readerNVDA 2010.1VoiceOver on iPhone IOS4
<div id="demo-main" role="main">    <article id="demo-main-content">        <header>             <hgroup>                 ...
<header role="banner">    <h1>HTML5 example <a href="http://robertnyman.com/html5">-To: Information and samples for HTML5 ...
<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/    ...
Video
<video controls src="myvideo.webm"></video>
<video controls>    <source src="myvideo.mp4"></source>    <source src="myvideo.webm"></source>    <p>Hello, older web bro...
<video src="http://vid.ly/4w2g7d?content=video"controls></video>
must die!!!              rea lly        Not
<video width="320" height="240" poster="poster.jpg" controls="controls">    <!-- MP4 for Safari, IE9, iPhone, iPad, Androi...
<video src="tribute.webm">  <track kind="subtitles" label="English" src="English.vtt" srclang="en" default></track>  <trac...
<track   kind="subtitles"><track   kind="captions"><track   kind="descriptions"><track   kind="chapters"><track   kind="me...
00:00:05.000 --> 00:00:11.500Play the best song in the world, or Ill eat your soul.00:00:12.000 --> 00:00:14.000Well me an...
Canvas
<canvas id="my-canvas" width="500" height="500">    I am canvas</canvas>
var canvas = document.getElementById("my-canvas"),    context = canvas.getContext("2d");context.fillStyle = "#f00";context...
context.fillRect(350, 50, 100, 100);context.lineWidth = "10";context.lineJoin = "round";context.moveTo(50, 50);context.lin...
pdf.js
History API
window.history.pushState(state, title, url);
var url = "http://robertnyman.com",title = "My blog",state = {    address : url};window.history.pushState(state, title, ur...
Fullscreen
<button id="view-fullscreen">Fullscreen</button><script type="text/javascript">(function () {    var viewFullScreen = docu...
mozRequestFullScreenWithKeys?
html:-moz-full-screen {    background: red;}html:-webkit-full-screen {    background: red;}
Camera
<input type="file" id="take-picture" accept="image/*">
takePicture.onchange = function (event) {    // Get a reference to the taken picture or chosen file    var files = event.t...
Pointer Lock API
var docElm = document.documentElement;// Requesting Pointer LockdocElm.requestPointerLock = elem.requestPointerLock ||    ...
document.addEventListener("mousemove", function(e) {    var movementX = e.movementX       ||                    e.mozMovem...
Polyfills
Polyfills
http://caniuse.com/
Boot to Gecko
https://github.com/mozilla-b2g/B2Ghttps://github.com/mozilla-b2g/gaia
WebAPI
Try new things
HTML5             -The beauty of the Open Web
"So we saved the worldtogether for a while,and that was lovely."                  - Lost
Robert Nymanrobertnyman.com   @robertnyman
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Upcoming SlideShare
Loading in...5
×

Leave No One Behind with HTML5 - FFWD.PRO, Croatia

5,793

Published on

Published in: Technology, Design
5 Comments
9 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,793
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
25
Comments
5
Likes
9
Embeds 0
No embeds

No notes for slide

Leave No One Behind with HTML5 - FFWD.PRO, Croatia

  1. 1. Leave No One Behind with HTML5
  2. 2. @robertnyman
  3. 3. Mozilla is aglobal non-profit dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for thepublic good
  4. 4. Accessibility
  5. 5. JAWS version 10 screen readerNVDA 2010.1VoiceOver on iPhone IOS4
  6. 6. <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> <p> Hello </p> </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>
  7. 7. <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><footer id="page-footer" role="contentinfo"> Created by <a href="http://robertnyman.com/">Robert Nyman</a></footer>
  8. 8. <aside aria-live="polite" aria-relevant="additions" aria-atomic="true"> Some sidebar content</aside>
  9. 9. WAI-ARIA Authoring Practices 1.0 Live Regions -http://www.w3.org/WAI/PF/aria-practices/ #LiveRegions
  10. 10. Video
  11. 11. <video controls src="myvideo.webm"></video>
  12. 12. <video controls> <source src="myvideo.mp4"></source> <source src="myvideo.webm"></source> <p>Hello, older web browser</p></video>
  13. 13. <video src="http://vid.ly/4w2g7d?content=video"controls></video>
  14. 14. must die!!! rea lly Not
  15. 15. <video width="320" height="240" poster="poster.jpg" controls="controls"> <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 --> <source type="video/mp4" src="myvideo.mp4"> <!-- WebM/VP8 for Firefox4, Opera, and Chrome --> <source type="video/webm" src="myvideo.webm"> <!-- Ogg/Vorbis for older Firefox and Opera versions --> <source type="video/ogg" src="myvideo.ogv"> <!-- Flash fallback for non-HTML5 browsers without JavaScript --> <object width="320" height="240" type="application/x-shockwave-flash"data="flashmediaelement.swf"> <param name="movie" value="flashmediaelement.swf"> <param name="flashvars" value="controls=true&file=myvideo.mp4"> <!-- Image as a last resort --> <img src="myvideo.jpg" width="320" height="240" title="No videoplayback capabilities"> </object></video>
  16. 16. <video src="tribute.webm"> <track kind="subtitles" label="English" src="English.vtt" srclang="en" default></track> <track kind="subtitles" label="Croatian" src="Croatian.vtt" srclang="hr"></track></video>
  17. 17. <track kind="subtitles"><track kind="captions"><track kind="descriptions"><track kind="chapters"><track kind="metadata">
  18. 18. 00:00:05.000 --> 00:00:11.500Play the best song in the world, or Ill eat your soul.00:00:12.000 --> 00:00:14.000Well me and Kyle, we looked at each other,and we each said... "Okay."
  19. 19. Canvas
  20. 20. <canvas id="my-canvas" width="500" height="500"> I am canvas</canvas>
  21. 21. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d");context.fillStyle = "#f00";context.fillRect(0, 0, 100, 100);
  22. 22. 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();
  23. 23. pdf.js
  24. 24. History API
  25. 25. window.history.pushState(state, title, url);
  26. 26. var url = "http://robertnyman.com",title = "My blog",state = { address : url};window.history.pushState(state, title, url);
  27. 27. Fullscreen
  28. 28. <button id="view-fullscreen">Fullscreen</button><script type="text/javascript">(function () { var viewFullScreen = document.getElementById("view-fullscreen"); if (viewFullScreen) { viewFullScreen.addEventListener("click", function () { var docElm = document.documentElement; if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } }, false); }})(); </script>
  29. 29. mozRequestFullScreenWithKeys?
  30. 30. html:-moz-full-screen { background: red;}html:-webkit-full-screen { background: red;}
  31. 31. Camera
  32. 32. <input type="file" id="take-picture" accept="image/*">
  33. 33. takePicture.onchange = function (event) { // Get a reference to the taken picture or chosen file var files = event.target.files, file; if (files && files.length > 0) { file = files[0]; // Get window.URL object var URL = window.URL || window.webkitURL; // Create ObjectURL var imgURL = URL.createObjectURL(file); // Set img src to ObjectURL showPicture.src = imgURL; // Revoke ObjectURL URL.revokeObjectURL(imgURL); }};
  34. 34. Pointer Lock API
  35. 35. var docElm = document.documentElement;// Requesting Pointer LockdocElm.requestPointerLock = elem.requestPointerLock || elem.mozRequestPointerLock || elem.webkitRequestPointerLock;docElm.requestPointerLock();
  36. 36. document.addEventListener("mousemove", function(e) { var movementX = e.movementX || e.mozMovementX || e.webkitMovementX || 0, movementY = e.movementY || e.mozMovementY || e.webkitMovementY || 0; // Print the mouse movement delta values console.log("movementX=" + movementX, "movementY="+ movementY);}, false);
  37. 37. Polyfills
  38. 38. Polyfills
  39. 39. http://caniuse.com/
  40. 40. Boot to Gecko
  41. 41. https://github.com/mozilla-b2g/B2Ghttps://github.com/mozilla-b2g/gaia
  42. 42. WebAPI
  43. 43. Try new things
  44. 44. HTML5 -The beauty of the Open Web
  45. 45. "So we saved the worldtogether for a while,and that was lovely." - Lost
  46. 46. Robert Nymanrobertnyman.com @robertnyman
  1. A particular slide catching your eye?

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

×