HTML5 - The 2012 of the Web
22 likes5,923 views
HTML5 is the latest evolution of the standard markup language for the World Wide Web with new semantics and APIs, including new form types like color pickers and date pickers. It introduces features like local storage, video and audio playback, 2D drawing, and geolocation. WebSockets provide a standardized way for the web to establish two-way communications between a client and server. The Canvas element allows for dynamic, scriptable rendering of 2D shapes and bitmap images. Overall, HTML5 aims to make web-based applications more capable and powerful.
![<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">](https://image.slidesharecdn.com/html5-the2012oftheweb-dynabyte-110830140322-phpapp02/85/HTML5-The-2012-of-the-Web-22-320.jpg)
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/ [email protected] robertnyman.com/html5/ Twitter: @robertnyman robertnyman.com/css3/