an introduction to html5files.meetup.com/1750587/brandon keepers - intro to html5.pdf · html5 is...
TRANSCRIPT
Ordered ListBrandon KeepersGrand Rapids Web Development Group
January 31, 2011
HTML5An Introduction to
Monday, January 31, 2011
HTML5Hyper Trendy Marketing Lingo v5
@kplawver
Monday, January 31, 2011
Monday, January 31, 2011
1. Overview2. History3. Features
Monday, January 31, 2011
1. Overview
Monday, January 31, 2011
What is HTML5?good question.
Monday, January 31, 2011
Monday, January 31, 2011
Monday, January 31, 2011
http://whatwg.org/html
Monday, January 31, 2011
http://www.w3.org/TR/html5/
Monday, January 31, 2011
…it’s complicated
Monday, January 31, 2011
HTML5 is…DOM APIStructural elementsMultimedia elementsCanvasMicrodata
Monday, January 31, 2011
HTML5 is “not”…Web WorkersWeb StorageWebSocket APIWebSocket protocolGeolocation API
Monday, January 31, 2011
2. History
Monday, January 31, 2011
HTML 4.0 publishedDecember 1997
Monday, January 31, 2011
…working groupshut down
Monday, January 31, 2011
XML 1.0February 1998
Monday, January 31, 2011
XHTML draftDecember 1998
Monday, January 31, 2011
application/xhtml+xml
Monday, January 31, 2011
Appendix C
Monday, January 31, 2011
XHTML 1.1May 2001
Monday, January 31, 2011
Appendix C
Monday, January 31, 2011
Workshop on Web Applications and Compound Documents
June 2004
Monday, January 31, 2011
…evolve HTML 4
Monday, January 31, 2011
voted 11:4 against
Monday, January 31, 2011
WHATWGJune 2004
Monday, January 31, 2011
Web Applications 1.0
Monday, January 31, 2011
W3C works with WHATWG
October 2006
Monday, January 31, 2011
Web Applications 1.0becomesHTML5
Monday, January 31, 2011
3. Features
Monday, January 31, 2011
doctypethe “standards mode” trigger
Monday, January 31, 2011
<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐strict.dtd">
Monday, January 31, 2011
<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐strict.dtd">
Monday, January 31, 2011
<!DOCTYPE html>
Monday, January 31, 2011
the root element<html>
Monday, January 31, 2011
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Monday, January 31, 2011
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Monday, January 31, 2011
<html lang="en">
Monday, January 31, 2011
Character Encoding
Monday, January 31, 2011
Content-‐Type: text/html; charset="utf-‐8"
Monday, January 31, 2011
<meta http-‐equiv="Content-‐Type" content="text/html; charset=utf-‐8">
Monday, January 31, 2011
<meta http-‐equiv="Content-‐Type" content="text/html; charset=utf-‐8">
Monday, January 31, 2011
<meta charset="utf-‐8" />
Monday, January 31, 2011
Structural Elements<section>
<nav>
<article>
<aside>
<hgroup>
<header>
<footer>
Monday, January 31, 2011
Inline Elements<time>
<mark>
<meter>
<progress>
Monday, January 31, 2011
Multimedia <video> <audio>
Monday, January 31, 2011
<video src="movie.mp4" width="320" height="240" autoplay></video>
Monday, January 31, 2011
<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>
Monday, January 31, 2011
canvasresolution-dependent bitmap canvas
Monday, January 31, 2011
<canvas id="a"></canvas>
canvas#a {height:200px; width:200px;}
Monday, January 31, 2011
var a = document.getElementById("a");var context = a.getContext("2d");context.fillRect(0, 0, 150, 150);
Monday, January 31, 2011
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();
Monday, January 31, 2011
Monday, January 31, 2011
…and so much more!
Monday, January 31, 2011
Ordered List
Thank [email protected]@bkeepers
Brandon KeepersGrand Rapids Web Development GroupJanuary 31, 2011
Monday, January 31, 2011