Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 6,022 views

 

Statistics

Views

Total Views
6,022
Views on SlideShare
5,541
Embed Views
481

Actions

Likes
9
Downloads
24
Comments
5

23 Embeds 481

https://hacks.mozilla.org 244
http://hacks.mozilla.org 118
http://drbeat.li 23
http://www.newsblur.com 23
http://newsblur.com 21
http://lanyrd.com 13
http://dev.1kpl.us 5
http://webdesigning.collected.info 5
http://thewebdesign.collected.info 5
http://htmlfive.collected.info 3
http://localhost 2
https://www.linkedin.com 2
https://hacks-dev.allizom.org 2
http://xianguo.com 2
http://127.0.0.1 2
http://bummerware.tumblr.com 2
http://1kpl.us 2
http://www.hanrss.com 2
http://bottlenose.local 1
http://fever.lightcorp.net 1
http://feeds.feedburner.com 1
https://quality.mozilla.org 1
http://us-w1.rockmelt.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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