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

79
Leave No One Behind with HTML5

description

 

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

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

Leave No One Behind with HTML5

Page 4: Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Page 7: Leave No One Behind with HTML5 - FFWD.PRO, Croatia

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 9: Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Page 12: Leave No One Behind with HTML5 - FFWD.PRO, Croatia

JAWS version 10 screen reader

NVDA 2010.1

VoiceOver on iPhone IOS4

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

<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

<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

<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

WAI-ARIA Authoring Practices 1.0

Live Regions

-

http://www.w3.org/WAI/PF/aria-practices/#LiveRegions

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

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

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

<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

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

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

must die!!!Not really

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

<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
Page 29: Leave No One Behind with HTML5 - FFWD.PRO, Croatia

<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

<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

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
Page 34: Leave No One Behind with HTML5 - FFWD.PRO, Croatia

Canvas

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

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

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

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

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
Page 43: Leave No One Behind with HTML5 - FFWD.PRO, Croatia

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

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

var url = "http://robertnyman.com",title = "My blog",state = { address : url};

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

Page 47: Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Page 48: Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Page 49: Leave No One Behind with HTML5 - FFWD.PRO, Croatia

<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

mozRequestFullScreenWithKeys?

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

html:-moz-full-screen { background: red;}

html:-webkit-full-screen { background: red;}

Page 53: Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Page 54: Leave No One Behind with HTML5 - FFWD.PRO, Croatia

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

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

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 57: Leave No One Behind with HTML5 - FFWD.PRO, Croatia

Pointer Lock API

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

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

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 63: Leave No One Behind with HTML5 - FFWD.PRO, Croatia

http://caniuse.com/

Page 65: Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Page 66: Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Page 74: Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Page 77: Leave No One Behind with HTML5 - FFWD.PRO, Croatia

HTML5 -

The beauty of the Open Web

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

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

- Lost