An Introduction to HTML5files.meetup.com/1750587/brandon keepers - intro to html5.pdf · HTML5 is “not”… Web Workers Web Storage WebSocket API WebSocket protocol Geolocation

Ordered ListBrandon KeepersGrand Rapids Web Development Group

January 31, 2011

HTML5An Introduction to

Monday, January 31, 2011

HTML5Hyper Trendy Marketing Lingo v5

@kplawver



1. Overview2. History3. Features


1. Overview


What is HTML5?good question.




http://whatwg.org/html


http://www.w3.org/TR/html5/


…it’s complicated


HTML5 is…DOM APIStructural elementsMultimedia elementsCanvasMicrodata


HTML5 is “not”…Web WorkersWeb StorageWebSocket APIWebSocket protocolGeolocation API


2. History


HTML 4.0 publishedDecember 1997


…working groupshut down


XML 1.0February 1998


XHTML draftDecember 1998


application/xhtml+xml


Appendix C


XHTML 1.1May 2001


Appendix C


Workshop on Web Applications and Compound Documents

June 2004


…evolve HTML 4


voted 11:4 against


WHATWGJune 2004


Web Applications 1.0


W3C works with WHATWG

October 2006


Web Applications 1.0becomesHTML5


3. Features


doctypethe “standards mode” trigger


<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐strict.dtd">


<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐strict.dtd">


<!DOCTYPE html>


the root element<html>


<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


<html lang="en">


Character Encoding


Content-‐Type: text/html; charset="utf-‐8"


<meta http-‐equiv="Content-‐Type" content="text/html; charset=utf-‐8">


<meta http-‐equiv="Content-‐Type" content="text/html; charset=utf-‐8">


<meta charset="utf-‐8" />


Structural Elements<section>

<nav>

<article>

<aside>

<hgroup>

<header>

<footer>


Inline Elements<time>

<mark>

<meter>

<progress>


Multimedia <video> <audio>


<video src="movie.mp4" width="320" height="240" autoplay></video>


<video width="320" height="240" controls> <source src="pr6.mp4" type='video/mp4; codecs="mp4a.40.2"'> <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'></video>


canvasresolution-dependent bitmap canvas


<canvas id="a"></canvas>

canvas#a {height:200px; width:200px;}


var a = document.getElementById("a");var context = a.getContext("2d");context.fillRect(0, 0, 150, 150);


2D Context Rectanglesc.fillRect(x, y, w, h);c.strokeRect(x, y, w, h);

Transformationsc.scale(x, y);c.rotate(angle);c.translate(x, y);c.transform(a, b, c, d, e, f);c.setTransform(a, b, c, d, e, f);

Colors and Stylesc.strokeStyle = color;c.fillStyle = color;

Textc.fillText(text, x, y, maxWidth);

Pathsc.moveTo(x, y);c.lineTo(x, y);c.arcTo(x1, y1, x2, y2, radius);c.rect(x, y, w, h);c.fill();c.stroke();

Statec.save();c.restore();



…and so much more!


Ordered List

Thank [email protected]@bkeepers

Brandon KeepersGrand Rapids Web Development GroupJanuary 31, 2011


mailto:[email protected]

mailto:[email protected]

http://twitter.com/jnunemaker

http://twitter.com/jnunemaker