HTML5         -The 2012 of the Web
Mozilla is a global non-profitdedicated to putting you incontrol of your online experienceand shaping the future of theWeb ...
@robertnyman
2012
Mesoamerican Long  Count calendar
"The beginning of a new era"
HTML4 * 1000HTML 4000
must die!!!              rea lly        Not
What is HTML5?
Semantics   APIs
The makeup of the Open Web stack
HTML5 semantics
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<header>    <hgroup><article>   <nav><section>   <figure><aside>     <figcaption><footer>
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="da-range"><output id="da-range-output"></output><script>    (function () {         var range = doc...
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...
pdf.js
WebGL
http://code.google.com/p/webglsamples/
Questions
Is it ready?               Will HTML5 be                  around?
Is it ready?
Is it ready?
Is it ready?http://caniuse.com/
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 - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
Upcoming SlideShare
Loading in...5
×

HTML5 - The 2012 of the Web - Adobe MAX

4,888

Published on

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

No Downloads
Views
Total Views
4,888
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
36
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

HTML5 - The 2012 of the Web - Adobe MAX

  1. 1. HTML5 -The 2012 of the Web
  2. 2. Mozilla is a global non-profitdedicated to putting you incontrol of your online experienceand shaping the future of theWeb for the public good
  3. 3. @robertnyman
  4. 4. 2012
  5. 5. Mesoamerican Long Count calendar
  6. 6. "The beginning of a new era"
  7. 7. HTML4 * 1000HTML 4000
  8. 8. must die!!! rea lly Not
  9. 9. What is HTML5?
  10. 10. Semantics APIs
  11. 11. The makeup of the Open Web stack
  12. 12. HTML5 semantics
  13. 13. <!DOCTYPE html>
  14. 14. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  15. 15. <meta charset="utf-8">
  16. 16. <header> <hgroup><article> <nav><section> <figure><aside> <figcaption><footer>
  17. 17. HTML5 Doctor
  18. 18. HTML5 Forms
  19. 19. 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">
  20. 20. 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">
  21. 21. <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">
  22. 22. 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>
  23. 23. <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>
  24. 24. <input type="range" id="da-range"><output id="da-range-output"></output><script> (function () { var range = document.getElementById("da-range"), output = document.getElementById("da-range-output"); range.addEventListener("input", function () { output.value = this.value; }, false); })();</script>
  25. 25. http://www.quirksmode.org/html5/inputs.htmlhttp://www.quirksmode.org/html5/inputs_mobile.htmlhttp://wufoo.com/html5/
  26. 26. Web Storage
  27. 27. sessionStorage.setItem("Charming", "Anthony Weiner");console.log(sessionStorage.getItem("Charming"));
  28. 28. localStorage.setItem("Occupation", "Politician");
  29. 29. var anthonyWeiner = { "Interest" : "Photography", "Social" : "Twitter"};localStorage.setItem("anthonyWeiner", JSON.stringify(anthonyWeiner));console.log(typeof JSON.parse(localStorage.getItem("anthonyWeiner")));
  30. 30. Web SQL IndexedDB
  31. 31. History API
  32. 32. window.history.pushState(state, title, url);
  33. 33. var url = "http://robertnyman.com",title = "My blog",state = { address : url};window.history.pushState(state, title, url);
  34. 34. Web Sockets
  35. 35. LiveConnect Forever Frame HTTP Long-Polling and XHR Streaming What came before WebSockets? AJAX HTTP PollingCross Frame Communication
  36. 36. var ws = new WebSocket("ws://robertnyman.com/wsmagic");// Send dataws.send("Some data");// Close the connectionws.close();
  37. 37. 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");};
  38. 38. web-socket-js Socket.IO
  39. 39. Video
  40. 40. <video controls src="nasa.webm"></video>
  41. 41. <video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source> <p>Hello, older web browser</p></video>
  42. 42. <video src="http://vid.ly/4w2g7d?content=video"controls></video>
  43. 43. Canvas
  44. 44. <canvas id="my-canvas" width="500" height="500"> I am canvas</canvas>
  45. 45. 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);
  46. 46. pdf.js
  47. 47. WebGL
  48. 48. http://code.google.com/p/webglsamples/
  49. 49. Questions
  50. 50. Is it ready? Will HTML5 be around?
  51. 51. Is it ready?
  52. 52. Is it ready?
  53. 53. Is it ready?http://caniuse.com/
  54. 54. Will HTML5 be around?
  55. 55. Will HTML5 be around?
  56. 56. HTML5 -The beauty of the Open Web
  57. 57. 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.

×