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

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

on

  • 5,767 views

 

Statistics

Views

Total Views
5,767
Views on SlideShare
5,304
Embed Views
463

Actions

Likes
9
Downloads
24
Comments
5

22 Embeds 463

https://hacks.mozilla.org 229
http://hacks.mozilla.org 117
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
http://xianguo.com 2
http://www.hanrss.com 2
http://1kpl.us 2
http://bummerware.tumblr.com 2
http://127.0.0.1 2
https://quality.mozilla.org 1
http://feeds.feedburner.com 1
http://fever.lightcorp.net 1
http://bottlenose.local 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 Leave No One Behind with HTML5 - FFWD.PRO, Croatia Presentation Transcript

  • Leave No One Behind with HTML5
  • @robertnyman
  • Mozilla is aglobal non-profit dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for thepublic good
  • Accessibility
  • JAWS version 10 screen readerNVDA 2010.1VoiceOver on iPhone IOS4
  • <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>
  • <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>
  • <aside aria-live="polite" aria-relevant="additions" aria-atomic="true"> Some sidebar content</aside>
  • WAI-ARIA Authoring Practices 1.0 Live Regions -http://www.w3.org/WAI/PF/aria-practices/ #LiveRegions
  • Video
  • <video controls src="myvideo.webm"></video>
  • <video controls> <source src="myvideo.mp4"></source> <source src="myvideo.webm"></source> <p>Hello, older web browser</p></video>
  • <video src="http://vid.ly/4w2g7d?content=video"controls></video>
  • must die!!! rea lly Not
  • <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>
  • <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>
  • <track kind="subtitles"><track kind="captions"><track kind="descriptions"><track kind="chapters"><track kind="metadata">
  • 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."
  • Canvas
  • <canvas id="my-canvas" width="500" height="500"> I am canvas</canvas>
  • var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d");context.fillStyle = "#f00";context.fillRect(0, 0, 100, 100);
  • 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();
  • pdf.js
  • History API
  • window.history.pushState(state, title, url);
  • var url = "http://robertnyman.com",title = "My blog",state = { address : url};window.history.pushState(state, title, url);
  • Fullscreen
  • <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>
  • mozRequestFullScreenWithKeys?
  • html:-moz-full-screen { background: red;}html:-webkit-full-screen { background: red;}
  • Camera
  • <input type="file" id="take-picture" accept="image/*">
  • 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); }};
  • Pointer Lock API
  • var docElm = document.documentElement;// Requesting Pointer LockdocElm.requestPointerLock = elem.requestPointerLock || elem.mozRequestPointerLock || elem.webkitRequestPointerLock;docElm.requestPointerLock();
  • 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);
  • Polyfills
  • Polyfills
  • http://caniuse.com/
  • Boot to Gecko
  • https://github.com/mozilla-b2g/B2Ghttps://github.com/mozilla-b2g/gaia
  • WebAPI
  • Try new things
  • HTML5 -The beauty of the Open Web
  • "So we saved the worldtogether for a while,and that was lovely." - Lost
  • Robert Nymanrobertnyman.com @robertnyman