Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad

Leave No One Behind
    with HTML5

Ad

@robertnyman

Ad

Mozilla is a
global non-
profit dedicated
to putting you
in control of
your online
experience and
shaping the
future of the...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Check these out next

1 of 79 Ad
1 of 79 Ad
Advertisement

More Related Content

Advertisement

More from Robert Nyman (20)

Advertisement

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

  1. Leave No One Behind with HTML5
  2. @robertnyman
  3. 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
  4. Accessibility
  5. JAWS version 10 screen reader NVDA 2010.1 VoiceOver on iPhone IOS4
  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 landmark roles in action in a simple context </aside> </div>
  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 elements complemented 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. <aside aria-live="polite" aria-relevant="additions" aria-atomic="true"> Some sidebar content </aside>
  9. WAI-ARIA Authoring Practices 1.0 Live Regions - http://www.w3.org/WAI/PF/aria-practices/ #LiveRegions
  10. Video
  11. <video controls src="myvideo.webm"></video>
  12. <video controls> <source src="myvideo.mp4"></source> <source src="myvideo.webm"></source> <p>Hello, older web browser</p> </video>
  13. <video src="http://vid.ly/4w2g7d?content=video" controls></video>
  14. must die!!! rea lly Not
  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 video playback capabilities"> </object> </video>
  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. <track kind="subtitles"> <track kind="captions"> <track kind="descriptions"> <track kind="chapters"> <track kind="metadata">
  18. 00:00:05.000 --> 00:00:11.500 Play the best song in the world, or I'll eat your soul. 00:00:12.000 --> 00:00:14.000 Well me and Kyle, we looked at each other, and we each said... "Okay."
  19. Canvas
  20. <canvas id="my-canvas" width="500" height="500"> I am canvas </canvas>
  21. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100);
  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. pdf.js
  24. History API
  25. window.history.pushState(state, title, url);
  26. var url = "http://robertnyman.com", title = "My blog", state = { address : url }; window.history.pushState(state, title, url);
  27. Fullscreen
  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. mozRequestFullScreenWithKeys?
  30. html:-moz-full-screen { background: red; } html:-webkit-full-screen { background: red; }
  31. Camera
  32. <input type="file" id="take-picture" accept="image/*">
  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. Pointer Lock API
  35. var docElm = document.documentElement; // Requesting Pointer Lock docElm.requestPointerLock = elem.requestPointerLock || elem.mozRequestPointerLock || elem.webkitRequestPointerLock; docElm.requestPointerLock();
  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. Polyfills
  38. Polyfills
  39. http://caniuse.com/
  40. Boot to Gecko
  41. https://github.com/mozilla-b2g/B2G https://github.com/mozilla-b2g/gaia
  42. WebAPI
  43. Try new things
  44. HTML5 - The beauty of the Open Web
  45. "So we saved the world together for a while, and that was lovely." - Lost
  46. Robert Nyman robertnyman.com @robertnyman

×