Your SlideShare is downloading. ×
  • Like
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 5,548 views
Published

 

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
5,548
On SlideShare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
24
Comments
5
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Leave No One Behind with HTML5
  • 2. @robertnyman
  • 3. Mozilla is aglobal non-profit dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for thepublic good
  • 4. Accessibility
  • 5. JAWS version 10 screen readerNVDA 2010.1VoiceOver 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 landmarkroles 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 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. <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 videoplayback 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.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. 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 LockdocElm.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/B2Ghttps://github.com/mozilla-b2g/gaia
  • 42. WebAPI
  • 43. Try new things
  • 44. HTML5 -The beauty of the Open Web
  • 45. "So we saved the worldtogether for a while,and that was lovely." - Lost
  • 46. Robert Nymanrobertnyman.com @robertnyman