HTML5         -The 2012 of the Web
Mozilla is a global non-profitdedicated to putting you in controlof your online experience andshaping the future of the Web...
2012
Mesoamerican Long  Count calendar
"The beginning of a new era"
HTML4 * 1000HTML 4000
What is HTML5?
Semantics   APIs
HTML5 semantics
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
HTML5 Doctor
HTML5 Forms
New form types<input type="color">             <input type="range"><input type="date">              <input type="search"  ...
New form attributes<input type="text" autocomplete="off"><input type="text" autofocus><input type="submit" formaction="htt...
<input type="text" list="data-list"><input type="range" max="95"><input type="range" min="2"><input type="file" multiple><...
New form elements<input type="text" list="data-list"><datalist id="data-list">    <option value="Hugo Reyes">    <option v...
<keygen></keygen><meter min="0" max="10" value="7"></meter><input type="range" id="range"><output for="range" id="output">...
<input type="range" id="range"><output for="range" id="output"></output><script>    (function () {         var theForm = d...
http://www.quirksmode.org/html5/inputs.htmlhttp://www.quirksmode.org/html5/inputs_mobile.htmlhttp://wufoo.com/html5/
Web Storage
sessionStorage.setItem("Charming", "Anthony Weiner");console.log(sessionStorage.getItem("Charming"));
localStorage.setItem("Occupation", "Politician");
var anthonyWeiner = {    "Interest" : "Photography",    "Social" : "Twitter"};localStorage.setItem("anthonyWeiner", JSON.s...
Web SQL   IndexedDB
History API
window.history.pushState(state, title, url);
var url = "http://robertnyman.com",title = "My blog",state = {    address : url};window.history.pushState(state, title, ur...
Web Sockets
LiveConnect    Forever Frame       HTTP Long-Polling and XHR Streaming      What came before WebSockets?      AJAX        ...
var ws = new WebSocket("ws://robertnyman.com/wsmagic");// Send dataws.send("Some data");// Close the connectionws.close();
var ws = new WebSocket("ws://robertnyman.com/wsmagic");// When connection is openedws.onopen = function () {    console.lo...
web-socket-js Socket.IO
Video
<video controls src="nasa.webm"></video>
<video controls>    <source src="nasa.mp4"></source>    <source src="nasa.webm"></source>    <p>Hello, older web browser</...
<video src="http://vid.ly/4w2g7d?content=video"controls></video>
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...
WebGL
http://code.google.com/p/webglsamples/
Questions
Will HTML5 beIs it ready?                  around? Why did I hug that bear?
Why did I hug that bear?
Is it ready?
Is it ready?
Is it ready?http://canisue.com
Will HTML5 be around?
Will HTML5 be around?
Will HTML5 be around?
HTML5             -The beauty of the Open Web
Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/    Twitter: @robertnymanrobertnyman.com/c...
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
HTML5 - The 2012 of the Web
Upcoming SlideShare
Loading in...5
×

HTML5 - The 2012 of the Web

9,466

Published on

Published in: Technology, Design
5 Comments
22 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,466
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
378
Comments
5
Likes
22
Embeds 0
No embeds

No notes for slide

HTML5 - The 2012 of the Web

  1. 1. HTML5 -The 2012 of the Web
  2. 2. Mozilla is a global non-profitdedicated to putting you in controlof your online experience andshaping the future of the Web forthe public good
  3. 3. 2012
  4. 4. Mesoamerican Long Count calendar
  5. 5. "The beginning of a new era"
  6. 6. HTML4 * 1000HTML 4000
  7. 7. What is HTML5?
  8. 8. Semantics APIs
  9. 9. HTML5 semantics
  10. 10. <!DOCTYPE html>
  11. 11. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  12. 12. <meta charset="utf-8">
  13. 13. HTML5 Doctor
  14. 14. HTML5 Forms
  15. 15. New form types<input type="color"> <input type="range"><input type="date"> <input type="search" results="5"<input type="datetime"> autosave="saved-searches"><input type="datetime-local"> <input type="tel"><input type="email"> <input type="time"><input type="month"> <input type="url"><input type="number"> <input type="week">
  16. 16. New form attributes<input type="text" autocomplete="off"><input type="text" autofocus><input type="submit" formaction="http://example.org/save" value="Save"><input type="submit" formenctype="application/x-www-form-urlencoded" value="Save with enctype"><input type="submit" formmethod="POST" value="Send as POST"><input type="submit" formnovalidate value="Dont validate"><input type="submit" formtarget="_blank" value="Post to new tab/window">
  17. 17. <input type="text" list="data-list"><input type="range" max="95"><input type="range" min="2"><input type="file" multiple><input type="text" readonly><input type="text" required><input type="text" pattern="[A-Z]*"><input type="text" placeholder="E.g. Robocop"><input type="text" spellcheck="true"><input type="number" step="5">
  18. 18. New form elements<input type="text" list="data-list"><datalist id="data-list"> <option value="Hugo Reyes"> <option value="Jack Shephard"> <option value="James Sawyer Ford"> <option value="John Locke"> <option value="Sayid Jarrah"></datalist>
  19. 19. <keygen></keygen><meter min="0" max="10" value="7"></meter><input type="range" id="range"><output for="range" id="output"></output><progress max="100" value="70">70%</progress>
  20. 20. <input type="range" id="range"><output for="range" id="output"></output><script> (function () { var theForm = document.getElementById("the-form"); if ("oninput" in theForm) { theForm.addEventListener("input", function () { output.value = range.value; }, false); } })();</script>
  21. 21. http://www.quirksmode.org/html5/inputs.htmlhttp://www.quirksmode.org/html5/inputs_mobile.htmlhttp://wufoo.com/html5/
  22. 22. Web Storage
  23. 23. sessionStorage.setItem("Charming", "Anthony Weiner");console.log(sessionStorage.getItem("Charming"));
  24. 24. localStorage.setItem("Occupation", "Politician");
  25. 25. var anthonyWeiner = { "Interest" : "Photography", "Social" : "Twitter"};localStorage.setItem("anthonyWeiner", JSON.stringify(anthonyWeiner));console.log(typeof JSON.parse(localStorage.getItem("anthonyWeiner")));
  26. 26. Web SQL IndexedDB
  27. 27. History API
  28. 28. window.history.pushState(state, title, url);
  29. 29. var url = "http://robertnyman.com",title = "My blog",state = { address : url};window.history.pushState(state, title, url);
  30. 30. Web Sockets
  31. 31. LiveConnect Forever Frame HTTP Long-Polling and XHR Streaming What came before WebSockets? AJAX HTTP PollingCross Frame Communication
  32. 32. var ws = new WebSocket("ws://robertnyman.com/wsmagic");// Send dataws.send("Some data");// Close the connectionws.close();
  33. 33. var ws = new WebSocket("ws://robertnyman.com/wsmagic");// When connection is openedws.onopen = function () { console.log("Connection opened!");};// When you receive a messagews.onmessage = function (evt) { console.log(evt.data);};// When you close the connectionws.onclose = function () { console.log("Connection closed");};// When an error occurredws.onerror = function () { console.log("An error occurred");};
  34. 34. web-socket-js Socket.IO
  35. 35. Video
  36. 36. <video controls src="nasa.webm"></video>
  37. 37. <video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source> <p>Hello, older web browser</p></video>
  38. 38. <video src="http://vid.ly/4w2g7d?content=video"controls></video>
  39. 39. Canvas
  40. 40. <canvas id="my-canvas" width="500" height="500"> I am canvas</canvas>
  41. 41. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d");context.fillStyle = "#f00";context.fillRect(0, 0, 100, 100);context.clearRect(40, 40, 20, 20);
  42. 42. WebGL
  43. 43. http://code.google.com/p/webglsamples/
  44. 44. Questions
  45. 45. Will HTML5 beIs it ready? around? Why did I hug that bear?
  46. 46. Why did I hug that bear?
  47. 47. Is it ready?
  48. 48. Is it ready?
  49. 49. Is it ready?http://canisue.com
  50. 50. Will HTML5 be around?
  51. 51. Will HTML5 be around?
  52. 52. Will HTML5 be around?
  53. 53. HTML5 -The beauty of the Open Web
  54. 54. Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/ Twitter: @robertnymanrobertnyman.com/css3/
  1. A particular slide catching your eye?

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

×