an introduction to html5files.meetup.com/1750587/brandon keepers - intro to html5.pdf · html5 is...
TRANSCRIPT
![Page 1: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/1.jpg)
Ordered ListBrandon KeepersGrand Rapids Web Development Group
January 31, 2011
HTML5An Introduction to
Monday, January 31, 2011
![Page 2: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/2.jpg)
HTML5Hyper Trendy Marketing Lingo v5
@kplawver
Monday, January 31, 2011
![Page 3: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/3.jpg)
Monday, January 31, 2011
![Page 4: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/4.jpg)
1. Overview2. History3. Features
Monday, January 31, 2011
![Page 5: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/5.jpg)
1. Overview
Monday, January 31, 2011
![Page 6: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/6.jpg)
What is HTML5?good question.
Monday, January 31, 2011
![Page 7: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/7.jpg)
Monday, January 31, 2011
![Page 8: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/8.jpg)
Monday, January 31, 2011
![Page 9: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/9.jpg)
http://whatwg.org/html
Monday, January 31, 2011
![Page 10: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/10.jpg)
http://www.w3.org/TR/html5/
Monday, January 31, 2011
![Page 11: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/11.jpg)
…it’s complicated
Monday, January 31, 2011
![Page 12: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/12.jpg)
HTML5 is…DOM APIStructural elementsMultimedia elementsCanvasMicrodata
Monday, January 31, 2011
![Page 13: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/13.jpg)
HTML5 is “not”…Web WorkersWeb StorageWebSocket APIWebSocket protocolGeolocation API
Monday, January 31, 2011
![Page 14: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/14.jpg)
2. History
Monday, January 31, 2011
![Page 15: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/15.jpg)
HTML 4.0 publishedDecember 1997
Monday, January 31, 2011
![Page 16: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/16.jpg)
…working groupshut down
Monday, January 31, 2011
![Page 17: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/17.jpg)
XML 1.0February 1998
Monday, January 31, 2011
![Page 18: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/18.jpg)
XHTML draftDecember 1998
Monday, January 31, 2011
![Page 19: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/19.jpg)
application/xhtml+xml
Monday, January 31, 2011
![Page 20: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/20.jpg)
Appendix C
Monday, January 31, 2011
![Page 21: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/21.jpg)
XHTML 1.1May 2001
Monday, January 31, 2011
![Page 22: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/22.jpg)
Appendix C
Monday, January 31, 2011
![Page 23: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/23.jpg)
Workshop on Web Applications and Compound Documents
June 2004
Monday, January 31, 2011
![Page 24: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/24.jpg)
…evolve HTML 4
Monday, January 31, 2011
![Page 25: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/25.jpg)
voted 11:4 against
Monday, January 31, 2011
![Page 26: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/26.jpg)
WHATWGJune 2004
Monday, January 31, 2011
![Page 27: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/27.jpg)
Web Applications 1.0
Monday, January 31, 2011
![Page 28: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/28.jpg)
W3C works with WHATWG
October 2006
Monday, January 31, 2011
![Page 29: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/29.jpg)
Web Applications 1.0becomesHTML5
Monday, January 31, 2011
![Page 30: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/30.jpg)
3. Features
Monday, January 31, 2011
![Page 31: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/31.jpg)
doctypethe “standards mode” trigger
Monday, January 31, 2011
![Page 32: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/32.jpg)
<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐strict.dtd">
Monday, January 31, 2011
![Page 33: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/33.jpg)
<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐strict.dtd">
Monday, January 31, 2011
![Page 34: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/34.jpg)
<!DOCTYPE html>
Monday, January 31, 2011
![Page 35: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/35.jpg)
the root element<html>
Monday, January 31, 2011
![Page 36: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/36.jpg)
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Monday, January 31, 2011
![Page 37: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/37.jpg)
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Monday, January 31, 2011
![Page 38: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/38.jpg)
<html lang="en">
Monday, January 31, 2011
![Page 39: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/39.jpg)
Character Encoding
Monday, January 31, 2011
![Page 40: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/40.jpg)
Content-‐Type: text/html; charset="utf-‐8"
Monday, January 31, 2011
![Page 41: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/41.jpg)
<meta http-‐equiv="Content-‐Type" content="text/html; charset=utf-‐8">
Monday, January 31, 2011
![Page 42: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/42.jpg)
<meta http-‐equiv="Content-‐Type" content="text/html; charset=utf-‐8">
Monday, January 31, 2011
![Page 43: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/43.jpg)
<meta charset="utf-‐8" />
Monday, January 31, 2011
![Page 44: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/44.jpg)
Structural Elements<section>
<nav>
<article>
<aside>
<hgroup>
<header>
<footer>
Monday, January 31, 2011
![Page 45: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/45.jpg)
Inline Elements<time>
<mark>
<meter>
<progress>
Monday, January 31, 2011
![Page 46: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/46.jpg)
Multimedia <video> <audio>
Monday, January 31, 2011
![Page 47: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/47.jpg)
<video src="movie.mp4" width="320" height="240" autoplay></video>
Monday, January 31, 2011
![Page 48: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/48.jpg)
<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
![Page 49: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/49.jpg)
canvasresolution-dependent bitmap canvas
Monday, January 31, 2011
![Page 50: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/50.jpg)
<canvas id="a"></canvas>
canvas#a {height:200px; width:200px;}
Monday, January 31, 2011
![Page 51: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/51.jpg)
var a = document.getElementById("a");var context = a.getContext("2d");context.fillRect(0, 0, 150, 150);
Monday, January 31, 2011
![Page 52: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/52.jpg)
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
![Page 53: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/53.jpg)
Monday, January 31, 2011
![Page 54: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/54.jpg)
…and so much more!
Monday, January 31, 2011
![Page 55: 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](https://reader036.vdocument.in/reader036/viewer/2022070906/5f79ccf0d0cc5425c54ea09d/html5/thumbnails/55.jpg)
Ordered List
Thank [email protected]@bkeepers
Brandon KeepersGrand Rapids Web Development GroupJanuary 31, 2011
Monday, January 31, 2011