Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a HTML5 - The 2012 of the Web
Similar a HTML5 - The 2012 of the Web (20)
Más de Robert Nyman
Más de Robert Nyman (20)
Último
Último (20)
HTML5 - The 2012 of the Web
- 1. HTML5 - The 2012 of the Web
- 3. Mozilla is a global non-profit dedicated to putting you in control of your online experience and shaping the future of the Web for the public good
- 5. 2012
- 6. Mesoamerican Long Count calendar
- 7. "The beginning of a new era"
- 8. HTML4 * 1000 HTML 4000
- 10. What is HTML5?
- 11. Semantics APIs
- 12. HTML5 semantics
- 13. <!DOCTYPE html>
- 15. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- 17. HTML5 Doctor
- 18. HTML5 Forms
- 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">
- 21. 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="Don't validate"> <input type="submit" formtarget="_blank" value="Post to new tab/window">
- 22. <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">
- 23. 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>
- 24. <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>
- 25. <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>
- 28. Web Storage
- 32. var anthonyWeiner = { "Interest" : "Photography", "Social" : "Twitter" }; localStorage.setItem("anthonyWeiner", JSON.stringify(anthonyWeiner)); console.log(typeof JSON.parse(localStorage.getItem("anthonyWeiner")));
- 33. Web SQL IndexedDB
- 34. History API
- 36. var url = "http://robertnyman.com", title = "My blog", state = { address : url }; window.history.pushState(state, title, url);
- 38. Web Sockets
- 39. LiveConnect Forever Frame HTTP Long-Polling and XHR Streaming What came before WebSockets? AJAX HTTP Polling Cross Frame Communication
- 40. var ws = new WebSocket("ws://robertnyman.com/wsmagic"); // Send data ws.send("Some data"); // Close the connection ws.close();
- 41. var ws = new WebSocket("ws://robertnyman.com/wsmagic"); // When connection is opened ws.onopen = function () { console.log("Connection opened!"); }; // When you receive a message ws.onmessage = function (evt) { console.log(evt.data); }; // When you close the connection ws.onclose = function () { console.log("Connection closed"); }; // When an error occurred ws.onerror = function () { console.log("An error occurred"); };
- 44. Video
- 46. <video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source> <p>Hello, older web browser</p> </video>
- 54. Canvas
- 55. <canvas id="my-canvas" width="500" height="500"> I am canvas </canvas>
- 56. 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);
- 60. WebGL
- 64. Questions
- 65. Will HTML5 be Is it ready? around? Why did I hug that bear?
- 66. Why did I hug that bear?
- 67. Is it ready?
- 68. Is it ready?
- 70. Will HTML5 be around?
- 71. Will HTML5 be around?
- 72. Will HTML5 be around?
- 75. HTML5 - The beauty of the Open Web
- 77. Robert Nyman robertnyman.com/speaking/ robnyman@mozilla.com robertnyman.com/html5/ Twitter: @robertnyman robertnyman.com/css3/