Using HTML5 for a great Open Web
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,805
On Slideshare
3,701
From Embeds
104
Number of Embeds
11

Actions

Shares
Downloads
27
Comments
0
Likes
0

Embeds 104

http://www.conseilsmarketing.fr 54
http://www.conseilsmarketing.com 21
http://blog.websourcing.fr 15
http://www.stonepower.fr 3
https://www.linkedin.com 2
url_unknown 2
https://tasks.crowdflower.com 2
http://www.slideshare.net 2
http://lanyrd.com 1
http://www.onlydoo.com 1
https://twitter.com 1

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. Using HTML5 For a Great Open Web
  • 2. Why HTML5?
  • 3. <!DOCTYPE html>
  • 4. <DIV>A monkey</DIV><p id=john>John’s P</p><input type=text><input type="text"><input type="text" />
  • 5. 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>
  • 6. <audio> <aside> <nav> <section> <hgroup> <article><figure> <time> <header> <video> <figcaption> <footer>
  • 7. <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">
  • 8. Web Storage
  • 9. sessionStorage.setItem("FU", "Sarah Palin");console.log(sessionStorage.getItem("FU"));
  • 10. localStorage.setItem("Job", "Politician");
  • 11. var sarahPalin = { "contest" : "Miss Alaska pageant", "Talent" : "Flute playing"};localStorage.setItem("sarah", JSON.stringify(sarahPalin));console.log(typeof JSON.parse(localStorage.getItem("sarah")));
  • 12. Web SQLIndexedDB
  • 13. Offline Web Applications
  • 14. if (window.addEventListener) { /* Works well in Firefox and Opera with the Work Offline option in the File menu. Pulling the ethernet cable doesnt 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;}
  • 15. // Poll the navigator.onLine propertysetInterval(function () { console.log(navigator.onLine);}, 1000);
  • 16. <!DOCTYPE html><html manifest="offline.manifest"><head>...
  • 17. CACHE MANIFEST# VERSION 10CACHE:offline.htmlbase.cssFALLBACK:online.css offline.cssNETWORK:/live-updates
  • 18. History API
  • 19. var url = "http://robertnyman.com",title = "My blog",state = { address : url};window.history.pushState(state.address, title, url);
  • 20. window.history.replaceState(state.address, title, url);
  • 21. Geolocation
  • 22. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); });}
  • 23. Video
  • 24. <video controls src="nasa.webm"></video>
  • 25. <video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source></video>
  • 26. <video src="http://vid.ly/4w2g7d?content=video"controls></video>
  • 27. Canvas
  • 28. Apple even creates open standards for the web -Steve Jobs
  • 29. <canvas id="my-canvas" width="500" height="500"> I am canvas</canvas>
  • 30. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d");context.fillStyle = "#f00";context.fillRect(0, 0, 100, 100);
  • 31. context.save();context.fillStyle = "rgba(0, 0, 200, 0.5)";context.fillRect(50, 50, 100, 100);context.clearRect(40, 40, 20, 20);context.restore();
  • 32. HTML5 Canvas for Internet Explorer <= 8 - explorercanvas
  • 33. http://craftymind.com/factory/html5video/ CanvasVideo.html
  • 34. WebGL
  • 35. http://code.google.com/p/webglsamples/
  • 36. Flight of the Navigator
  • 37. Robert Nyman robertnyman.com/speaking/ robertnyman.com/html5/ Twitter: @robertnymanPictures:Star Wars Awesome: http://jacobcharlesdietz.com/#/awesome/ Internet hole: http://cheezburger.com/View/3194058752Robocop: 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.htmmillion-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-1000407Euro 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.jpgGeorge W Bush fail 1: http://freetraveler.net/pictures/2.09.06/fun/1.jpg Go where Ive 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=1George W Bush fail 3: http://blogs.warwick.ac.uk/images/akyrtzoglou/2005/06/07/ Super Mario Video: http://www.archive.org/details/Mario1_507gb3.jpgStorage fail: http://failfun.com/funny-pictures/gangsta-fail/Cookie monster: http://honestviewsfromhonestman.blogspot.com/2009/09/cookie-monster.htmlYou suck: http://www.crunchgear.com/2009/04/22/gadgets-sucks/
  • 38. We can’t change history, but we can change the future. Be nice to each other.