Download as PDF, PPTX
![<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)
Uploaded byRobert Nyman
HTML5 - The 2012 of the Web
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.
More Related Content
Similar to HTML5 - The 2012 of the Web
![Getting Started with Apache Spark: Big Data Made Simple [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/apachesparkgettingstarted-260203175547-8361bcc3-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML5 - The 2012 of the Web
- 1. HTML5 - The 2012 of the Web
- 3. Mozilla is aglobal non-profit dedicated to putting you in control of your online experience and shaping the future of the Web for the public good
- 5.
- 6. Mesoamerican Long Count calendar
- 7. "The beginning ofa new era"
- 8.
- 10.
- 11. Semantics APIs
- 12.
- 13.
- 15. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
- 16.
- 17.
- 18.
- 19. New form types <inputtype="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 <inputtype="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"> <inputtype="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 <inputtype="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"> <outputfor="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>
- 27.
- 28.
- 30.
- 31.
- 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.
- 35.
- 36. var url ="http://robertnyman.com", title = "My blog", state = { address : url }; window.history.pushState(state, title, url);
- 38.
- 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"); };
- 42.
- 44.
- 45.
- 46. <video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source> <p>Hello, older web browser</p> </video>
- 48.
- 54.
- 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.
- 61.
- 64.
- 65. Will HTML5 be Isit ready? around? Why did I hug that bear?
- 66. Why did Ihug that bear?
- 67.
- 68.
- 69.
- 70. Will HTML5 bearound?
- 71. Will HTML5 bearound?
- 72. Will HTML5 bearound?
- 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/