1. Leave No One Behind
with HTML5

6. @robertnyman

7. 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

11. Accessibility

12. JAWS version 10 screen reader
NVDA 2010.1
VoiceOver on iPhone IOS4

13. <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>

14. <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>

15. <aside aria-live="polite" aria-relevant="additions" aria-atomic="true">
Some sidebar content
</aside>

16. WAI-ARIA Authoring Practices 1.0
Live Regions
-
http://www.w3.org/WAI/PF/aria-practices/
#LiveRegions

18. Video

19. <video controls src="myvideo.webm"></video>

20. <video controls>
<source src="myvideo.mp4"></source>
<source src="myvideo.webm"></source>
<p>Hello, older web browser</p>
</video>

22. <video src="http://vid.ly/4w2g7d?content=video"
controls></video>

23. must die!!!
rea lly
Not

24. <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>

29. <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>

30. <track kind="subtitles">
<track kind="captions">
<track kind="descriptions">
<track kind="chapters">
<track kind="metadata">

31. 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."

34. Canvas

35. <canvas id="my-canvas" width="500" height="500">
I am canvas
</canvas>

36. var canvas = document.getElementById("my-canvas"),
context = canvas.getContext("2d");
context.fillStyle = "#f00";
context.fillRect(0, 0, 100, 100);

37. 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();

39. pdf.js

42. History API

43. window.history.pushState(state, title, url);

44. var url = "http://robertnyman.com",
title = "My blog",
state = {
address : url
};
window.history.pushState(state, title, url);

46. Fullscreen

49. <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>

50. mozRequestFullScreenWithKeys?

51. html:-moz-full-screen {
background: red;
}
html:-webkit-full-screen {
background: red;
}

52. Camera

54. <input type="file" id="take-picture" accept="image/*">

55. 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);
}
};

57. Pointer Lock API

58. var docElm = document.documentElement;
// Requesting Pointer Lock
docElm.requestPointerLock = elem.requestPointerLock ||
elem.mozRequestPointerLock ||
elem.webkitRequestPointerLock;
docElm.requestPointerLock();

59. 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);

61. Polyfills

62. Polyfills

63. http://caniuse.com/

64. Boot to Gecko

67. https://github.com/mozilla-b2g/B2G
https://github.com/mozilla-b2g/gaia

69. WebAPI

71. Try new things

77. HTML5
-
The beauty of the Open Web

78. "So we saved the world
together for a while,
and that was lovely."
- Lost

79. Robert Nyman
robertnyman.com
@robertnyman