Using HTML5 For a Great Open Web
Why HTML5?
<!DOCTYPE html>
<DIV>A monkey</DIV><p id=john>John’s P</p><input type=text><input type="text"><input type="text" />
As XHTML<?xml version="1.0"?><html xmlns="http://www.w3.org/1999/xhtml">MUST be application/xhtml+xml or application/xml<n...
<audio>  <aside>       <nav>                           <section>           <hgroup>      <article><figure>                ...
<input type="color">      <input type="range"><input type="number">     <input type="email"><input type="time">           ...
Web Storage
sessionStorage.setItem("FU", "Sarah Palin");console.log(sessionStorage.getItem("FU"));
localStorage.setItem("Job", "Politician");
var sarahPalin = {    "contest" : "Miss Alaska pageant",    "Talent" : "Flute playing"};localStorage.setItem("sarah", JSON...
Web SQLIndexedDB
Offline Web Applications
if (window.addEventListener) {    /*        Works well in Firefox and Opera with the        Work Offline option in the Fil...
// Poll the navigator.onLine propertysetInterval(function () {    console.log(navigator.onLine);}, 1000);
<!DOCTYPE html><html manifest="offline.manifest"><head>...
CACHE MANIFEST# VERSION 10CACHE:offline.htmlbase.cssFALLBACK:online.css offline.cssNETWORK:/live-updates
History API
var url = "http://robertnyman.com",title = "My blog",state = {    address : url};window.history.pushState(state.address, t...
window.history.replaceState(state.address, title, url);
Geolocation
if (navigator.geolocation) {    navigator.geolocation.getCurrentPosition(function (position) {        alert(position.coord...
Video
<video controls src="nasa.webm"></video>
<video controls>    <source src="nasa.mp4"></source>    <source src="nasa.webm"></source></video>
<video src="http://vid.ly/4w2g7d?content=video"controls></video>
Canvas
Apple even creates open standards for the web                 -Steve Jobs
<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...
context.save();context.fillStyle = "rgba(0, 0, 200, 0.5)";context.fillRect(50, 50, 100, 100);context.clearRect(40, 40, 20,...
HTML5 Canvas for Internet Explorer <= 8                   -            explorercanvas
http://craftymind.com/factory/html5video/             CanvasVideo.html
WebGL
http://code.google.com/p/webglsamples/
Flight of the Navigator
Robert Nyman                                               robertnyman.com/speaking/                                      ...
We can’t change history, but we can change the future.               Be nice to each other.
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Using HTML5 for a great Open Web
Upcoming SlideShare
Loading in...5
×

Using HTML5 for a great Open Web

3,273

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,273
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Using HTML5 for a great Open Web

  1. 1. Using HTML5 For a Great Open Web
  2. 2. Why HTML5?
  3. 3. <!DOCTYPE html>
  4. 4. <DIV>A monkey</DIV><p id=john>John’s P</p><input type=text><input type="text"><input type="text" />
  5. 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. 6. <audio> <aside> <nav> <section> <hgroup> <article><figure> <time> <header> <video> <figcaption> <footer>
  7. 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. 8. Web Storage
  9. 9. sessionStorage.setItem("FU", "Sarah Palin");console.log(sessionStorage.getItem("FU"));
  10. 10. localStorage.setItem("Job", "Politician");
  11. 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. 12. Web SQLIndexedDB
  13. 13. Offline Web Applications
  14. 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. 15. // Poll the navigator.onLine propertysetInterval(function () { console.log(navigator.onLine);}, 1000);
  16. 16. <!DOCTYPE html><html manifest="offline.manifest"><head>...
  17. 17. CACHE MANIFEST# VERSION 10CACHE:offline.htmlbase.cssFALLBACK:online.css offline.cssNETWORK:/live-updates
  18. 18. History API
  19. 19. var url = "http://robertnyman.com",title = "My blog",state = { address : url};window.history.pushState(state.address, title, url);
  20. 20. window.history.replaceState(state.address, title, url);
  21. 21. Geolocation
  22. 22. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); });}
  23. 23. Video
  24. 24. <video controls src="nasa.webm"></video>
  25. 25. <video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source></video>
  26. 26. <video src="http://vid.ly/4w2g7d?content=video"controls></video>
  27. 27. Canvas
  28. 28. Apple even creates open standards for the web -Steve Jobs
  29. 29. <canvas id="my-canvas" width="500" height="500"> I am canvas</canvas>
  30. 30. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d");context.fillStyle = "#f00";context.fillRect(0, 0, 100, 100);
  31. 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. 32. HTML5 Canvas for Internet Explorer <= 8 - explorercanvas
  33. 33. http://craftymind.com/factory/html5video/ CanvasVideo.html
  34. 34. WebGL
  35. 35. http://code.google.com/p/webglsamples/
  36. 36. Flight of the Navigator
  37. 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. 38. We can’t change history, but we can change the future. Be nice to each other.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×