More Related Content Similar to HTML5 - The 2012 of the Web - Adobe MAX (20) More from Robert Nyman (20) 1. HTML5
-
The 2012 of the Web
5. 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
22. <header> <hgroup>
<article> <nav>
<section> <figure>
<aside> <figcaption>
<footer>
25. 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">
27. 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">
28. <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">
29. 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>
31. <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>
38. var anthonyWeiner = {
"Interest" : "Photography",
"Social" : "Twitter"
};
localStorage.setItem("anthonyWeiner", JSON.stringify(anthonyWeiner));
console.log(typeof JSON.parse(localStorage.getItem("anthonyWeiner")));
42. var url = "http://robertnyman.com",
title = "My blog",
state = {
address : url
};
window.history.pushState(state, title, url);
45. LiveConnect
Forever Frame
HTTP Long-Polling and XHR Streaming
What came before WebSockets?
AJAX
HTTP Polling
Cross Frame Communication
46. var ws = new WebSocket("ws://robertnyman.com/wsmagic");
// Send data
ws.send("Some data");
// Close the connection
ws.close();
47. 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");
};
52. <video controls>
<source src="nasa.mp4"></source>
<source src="nasa.webm"></source>
<p>Hello, older web browser</p>
</video>
62. 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);
79. HTML5
-
The beauty of the Open Web
