![Page 1: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/1.jpg)
Leave No One Behind with HTML5
![Page 2: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/2.jpg)
![Page 3: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/3.jpg)
![Page 4: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/4.jpg)
![Page 5: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/5.jpg)
![Page 7: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/7.jpg)
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
![Page 8: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/8.jpg)
![Page 9: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/9.jpg)
![Page 10: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/10.jpg)
![Page 12: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/12.jpg)
JAWS version 10 screen reader
NVDA 2010.1
VoiceOver on iPhone IOS4
![Page 13: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/13.jpg)
<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>
![Page 14: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/14.jpg)
<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>
![Page 15: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/15.jpg)
<aside aria-live="polite" aria-relevant="additions" aria-atomic="true"> Some sidebar content
</aside>
![Page 16: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/16.jpg)
WAI-ARIA Authoring Practices 1.0
Live Regions
-
http://www.w3.org/WAI/PF/aria-practices/#LiveRegions
![Page 17: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/17.jpg)
![Page 18: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/18.jpg)
Video
![Page 19: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/19.jpg)
<video controls src="myvideo.webm"></video>
![Page 20: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/20.jpg)
<video controls> <source src="myvideo.mp4"></source> <source src="myvideo.webm"></source> <p>Hello, older web browser</p></video>
![Page 22: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/22.jpg)
<video src="http://vid.ly/4w2g7d?content=video" controls></video>
![Page 23: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/23.jpg)
must die!!!Not really
![Page 24: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/24.jpg)
<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>
![Page 26: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/26.jpg)
![Page 28: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/28.jpg)
![Page 29: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/29.jpg)
<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>
![Page 30: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/30.jpg)
<track kind="subtitles"><track kind="captions"><track kind="descriptions"><track kind="chapters"><track kind="metadata">
![Page 31: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/31.jpg)
00:00:05.000 --> 00:00:11.500Play the best song in the world, or I'll eat your soul.
00:00:12.000 --> 00:00:14.000Well me and Kyle, we looked at each other, and we each said... "Okay."
![Page 32: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/32.jpg)
![Page 33: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/33.jpg)
![Page 34: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/34.jpg)
Canvas
![Page 35: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/35.jpg)
<canvas id="my-canvas" width="500" height="500"> I am canvas</canvas>
![Page 36: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/36.jpg)
var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d");
context.fillStyle = "#f00";context.fillRect(0, 0, 100, 100);
![Page 37: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/37.jpg)
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();
![Page 38: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/38.jpg)
![Page 39: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/39.jpg)
pdf.js
![Page 41: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/41.jpg)
![Page 42: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/42.jpg)
History API
![Page 43: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/43.jpg)
window.history.pushState(state, title, url);
![Page 44: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/44.jpg)
var url = "http://robertnyman.com",title = "My blog",state = { address : url};
window.history.pushState(state, title, url);
![Page 45: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/45.jpg)
![Page 46: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/46.jpg)
Fullscreen
![Page 47: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/47.jpg)
![Page 48: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/48.jpg)
![Page 49: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/49.jpg)
<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>
![Page 50: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/50.jpg)
mozRequestFullScreenWithKeys?
![Page 51: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/51.jpg)
html:-moz-full-screen { background: red;}
html:-webkit-full-screen { background: red;}
![Page 52: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/52.jpg)
Camera
![Page 53: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/53.jpg)
![Page 54: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/54.jpg)
<input type="file" id="take-picture" accept="image/*">
![Page 55: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/55.jpg)
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); }};
![Page 56: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/56.jpg)
![Page 57: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/57.jpg)
Pointer Lock API
![Page 58: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/58.jpg)
var docElm = document.documentElement; // Requesting Pointer LockdocElm.requestPointerLock = elem.requestPointerLock || elem.mozRequestPointerLock || elem.webkitRequestPointerLock; docElm.requestPointerLock();
![Page 59: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/59.jpg)
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);
![Page 61: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/61.jpg)
Polyfills
![Page 62: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/62.jpg)
Polyfills
![Page 64: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/64.jpg)
Boot to Gecko
![Page 65: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/65.jpg)
![Page 66: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/66.jpg)
![Page 67: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/67.jpg)
https://github.com/mozilla-b2g/B2G
https://github.com/mozilla-b2g/gaia
![Page 68: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/68.jpg)
![Page 69: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/69.jpg)
WebAPI
![Page 71: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/71.jpg)
Try new things
![Page 72: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/72.jpg)
![Page 73: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/73.jpg)
![Page 74: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/74.jpg)
![Page 75: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/75.jpg)
![Page 76: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/76.jpg)
![Page 77: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/77.jpg)
HTML5 -
The beauty of the Open Web
![Page 78: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/78.jpg)
"So we saved the world together for a while, and that was lovely."
- Lost
![Page 79: Leave No One Behind with HTML5 - FFWD.PRO, Croatia](https://reader037.vdocuments.site/reader037/viewer/2022102721/54001cff8d7f724c088b4b0c/html5/thumbnails/79.jpg)
Robert Nymanrobertnyman.com
@robertnyman