Using HTML5 for a great Open Web
0 likes8,999 views
Using HTML5 provides a great open web platform with new semantic elements like <header>, <nav>, <article>, and <aside> that improve accessibility. It introduces many new form input types, web storage APIs like localStorage and IndexedDB, offline capabilities, and technologies like geolocation, video, canvas, and WebGL that enable creative applications. HTML5 aims to standardize these new features for a better user experience across browsers.
Ad
More Related Content
What's hot (19)
Viewers also liked (19)
Ad
Similar to Using HTML5 for a great Open Web (20)
Ad
More from Robert Nyman (20)
Recently uploaded (20)
Using HTML5 for a great Open Web
- 1. Using HTML5 For a Great Open Web
- 10. Why HTML5?
- 11. <!DOCTYPE html>
- 12. <DIV>A monkey</DIV> <p id=john>John’s P</p> <input type=text> <input type="text"> <input type="text" />
- 14. As XHTML <?xml version="1.0"?> <html xmlns="http://www.w3.org/1999/xhtml"> MUST be application/xhtml+xml or application/xml <noscript>Not in XHTML</noscript>
- 15. <audio> <aside> <nav> <section> <hgroup> <article> <figure> <time> <header> <video> <figcaption> <footer>
- 16. <input type="color"> <input type="range"> <input type="number"> <input type="email"> <input type="time"> <input type="search"> <input type="month"> <input type="tel"> <input type="date"> <input type="datetime"> <input type="week"> <input type="datetime-local"> <input type="url">
- 18. Web Storage
- 23. var sarahPalin = { "contest" : "Miss Alaska pageant", "Talent" : "Flute playing" }; localStorage.setItem("sarah", JSON.stringify(sarahPalin)); console.log(typeof JSON.parse(localStorage.getItem("sarah")));
- 26. if (window.addEventListener) { /* Works well in Firefox and Opera with the Work Offline option in the File menu. Pulling the ethernet cable doesn't seem to trigger it */ window.addEventListener("online", isOnline, false); window.addEventListener("offline", isOffline, false); } else { /* Works in IE with the Work Offline option in the File menu and pulling the ethernet cable */ document.body.ononline = isOnline; document.body.onoffline = isOffline; }
- 27. // Poll the navigator.onLine property setInterval(function () { console.log(navigator.onLine); }, 1000);
- 29. CACHE MANIFEST # VERSION 10 CACHE: offline.html base.css FALLBACK: online.css offline.css NETWORK: /live-updates
- 30. History API
- 31. var url = "http://robertnyman.com", title = "My blog", state = { address : url }; window.history.pushState(state.address, title, url);
- 33. Geolocation
- 34. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); }); }
- 37. Video
- 39. <video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source> </video>
- 44. Canvas
- 45. Apple even creates open standards for the web -Steve Jobs
- 46. <canvas id="my-canvas" width="500" height="500"> I am canvas </canvas>
- 47. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100);
- 48. context.save(); context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillRect(50, 50, 100, 100); context.clearRect(40, 40, 20, 20); context.restore();
- 50. HTML5 Canvas for Internet Explorer <= 8 - explorercanvas
- 52. http://craftymind.com/factory/html5video/ CanvasVideo.html
- 53. WebGL
- 59. Flight of the Navigator
- 64. Robert Nyman robertnyman.com/speaking/ robertnyman.com/html5/ Twitter: @robertnyman Pictures: Star Wars Awesome: http://jacobcharlesdietz.com/#/awesome/ Internet hole: http://cheezburger.com/View/3194058752 Robocop: http://www.meh.ro/2010/04/01/murphy-as-robocop/ History: http://animatedtv.about.com/od/fgmultimedia/ig/-Family-Guy-- Bruce Willis: http://www.starsjournal.com/3192/bruce-willis-is-being-sued-for-4- Pictures/Griffin-Family-History.htm million-dollars.html Geolocation: http://www.datadial.net/blog/index.php/2008/09/22/the- Swedish flag: http://www.olssonfoto.se/JAlbum/SGP%202008%20Ullevi/slides/Svenska definitive-guide-to-website-geo-location/ %20flaggan.html Canvas: http://www.ioffer.com/c/Drawings-1000407 Euro Coin: http://accidentaldong.blogspot.com/2009/10/euro-uh-oh.html Oriental studies: http://www.swollenpickles.com/2007/01/29/phallic-logo- Firefox does good: http://www.flickr.com/photos/intothefuzz/5577418445/in/ awards/ set-72157626401344080 3D apple: http://3dst.de/typo3temp/pics/974e4144fc.jpg George W Bush fail 1: http://freetraveler.net/pictures/2.09.06/fun/1.jpg Go where I've never been: http://musicisart.ws/diane-arbus/ George W Bush fail 2: http://blogs.warwick.ac.uk/images/akyrtzoglou/2005/06/07/ Anything is possible: http://www.elektrodrop.com/2009/12/straight-out-of- g2.jpg china/?quick_view=1 George W Bush fail 3: http://blogs.warwick.ac.uk/images/akyrtzoglou/2005/06/07/ Super Mario Video: http://www.archive.org/details/Mario1_507 gb3.jpg Storage fail: http://failfun.com/funny-pictures/gangsta-fail/ Cookie monster: http://honestviewsfromhonestman.blogspot.com/2009/09/cookie- monster.html You suck: http://www.crunchgear.com/2009/04/22/gadgets-sucks/
- 65. We can’t change history, but we can change the future. Be nice to each other.