More Related Content Similar to HTML5 - The 2012 of the Web Similar to HTML5 - The 2012 of the Web (20) More from Robert Nyman (20) 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
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>
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>
32. var anthonyWeiner = {
"Interest" : "Photography",
"Social" : "Twitter"
};
localStorage.setItem("anthonyWeiner", JSON.stringify(anthonyWeiner));
console.log(typeof JSON.parse(localStorage.getItem("anthonyWeiner")));
36. var url = "http://robertnyman.com",
title = "My blog",
state = {
address : url
};
window.history.pushState(state, title, url);
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");
};
46. <video controls>
<source src="nasa.mp4"></source>
<source src="nasa.webm"></source>
<p>Hello, older web browser</p>
</video>
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);
75. HTML5
-
The beauty of the Open Web
