HTML5 - The 2012 of the Web

Mozilla is a global non-proﬁt dedicated to putting you in
control of your online experience and shaping the future of the Web for the public good

@robertnyman

Mesoamerican Long Count calendar

"The beginning of a new era"

HTML4 * 1000 HTML 4000

must die!!! Not really

What is HTML5?

Semantics APIs

The makeup of the Open Web stack

HTML5 semantics

<!DOCTYPE html>

HTML5 Doctor

HTML5 Forms

<input type="color"> <input type="date"> <input type="datetime"> <input type="datetime-local"> <input type="email">
<input type="month"> <input type="number"> <input type="range"> <input type="search" results="5" autosave="saved-searches"> <input type="tel"> <input type="time"> <input type="url"> <input type="week"> New form types

<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"> New form attributes

<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> New form elements

<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>

http://www.quirksmode.org/html5/inputs.html http://www.quirksmode.org/html5/inputs_mobile.html http://wufoo.com/html5/

Web Storage

sessionStorage.setItem("Charming", "Anthony Weiner"); console.log(sessionStorage.getItem("Charming"));

localStorage.setItem("Occupation", "Politician");

var anthonyWeiner = { "Interest" : "Photography", "Social" : "Twitter"
}; localStorage.setItem("anthonyWeiner", JSON.stringify(anthonyWeiner)); console.log(typeof JSON.parse(localStorage.getItem("anthonyWeiner")));

IndexedDB Web SQL

History API

window.history.pushState(state, title, url);

var url = "http://robertnyman.com", title = "My blog", state =
{ address : url }; window.history.pushState(state, title, url);

Web Sockets

What came before WebSockets? Cross Frame Communication HTTP Polling LiveConnect
Forever Frame AJAX HTTP Long-Polling and XHR Streaming

var ws = new WebSocket("ws://robertnyman.com/wsmagic"); // Send data ws.send("Some data");
// Close the connection ws.close();

web-socket-js Socket.IO

<video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source> <p>Hello, older web browser</p>
</video>

Canvas

<canvas id="my-canvas" width="500" height="500"> I am canvas </canvas>

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);

pdf.js

http://code.google.com/p/webglsamples/

Questions

Is it ready? Will HTML5 be around?

Is it ready?

Is it ready? http://caniuse.com/

Will HTML5 be around?

HTML5 - The beauty of the Open Web

Robert Nyman [email protected] Twitter: @robertnyman robertnyman.com/speaking/ robertnyman.com/html5/ robertnyman.com/css3/

HTML5 - The 2012 of the Web - Adobe MAX

HTML5 - The 2012 of the Web - Adobe MAX

More Decks by Robert Nyman

Other Decks in Technology

Featured

Transcript