Tim Waters 2001-2002 MSc GIS [email protected] Psychogeography.
Tim stone.html5.rjug.20110316
-
Upload
richmond-java-users-group -
Category
Technology
-
view
940 -
download
0
description
Transcript of Tim stone.html5.rjug.20110316
![Page 1: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/1.jpg)
HTML4 XHTML HTML5The Evolution, Promise and Reality of HTML5
Thursday, March 17, 2011
![Page 2: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/2.jpg)
About MeSenior Web Application Developer Technical Lead Barclaycard US, Wilmington, DE
A SCJP Front End Engineer and UX/UI Advocate
Open Source Committer to Stripes and blojsom
Registered first domain in 1996
GnuPG/PGP Fingerprint0248 FAD3 D6BE 008C 27C8 7A72 7249 DE33 22A5 2C82
Still plays D&D (not exactly)
Contact: [email protected]
Thursday, March 17, 2011
![Page 3: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/3.jpg)
PROJECT
DATE CLIENTMARCH 16, 2011 RICHMOND JUG
EVOLUTION1996..2008
1996
2000
2004 2008
Thursday, March 17, 2011
![Page 4: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/4.jpg)
12 Years Ago...
HTML 2/3.2Tables! JavaScript! Oh, My!
First Browser Support 12/1994
W3C Recommendation 1/1997
Thursday, March 17, 2011
![Page 5: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/5.jpg)
Thursday, March 17, 2011
![Page 6: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/6.jpg)
HTML 4/4.01Quirks vs Standards Mode
First Browser Support 10/1996
W3C Recommendation 12/1999
Thursday, March 17, 2011
![Page 7: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/7.jpg)
XHTML 1.0/1.1
First Browser Support c. 1999
W3C Recommendation 1/2000 & 5/2001
"To Hell With Bad Browsers" - Zeldman, 2/2001"Draconian" "Valid XHTML is really just Invalid HTML 4.01"
Thursday, March 17, 2011
![Page 8: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/8.jpg)
XHTML 2.0Nevermind
Incompatible with XHTML 1.x
XHTML2WG announces support of HTML5 5/2007
Thursday, March 17, 2011
![Page 9: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/9.jpg)
HTML5/XHTML5 Buzzword Ready. Cool Logo.
Thursday, March 17, 2011
![Page 10: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/10.jpg)
Is HTML5 Ready Yet?
Thursday, March 17, 2011
![Page 11: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/11.jpg)
Thursday, March 17, 2011
![Page 12: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/12.jpg)
PROJECT
DATE CLIENTMARCH 16, 2011 RICHMOND JUG
PROMISEINTEROPERABILITY
http://www.flickr.com/photos/andyi/
Thursday, March 17, 2011
![Page 13: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/13.jpg)
Promise
WHATWGWeb Hypertext Application Technology Working Group
A Living Document of Standards"HTML is the New HTML5" - Ian Hickson, 1/19/11
HTML5 will be a SNAPSHOT
But… But... HTML is not JSON
Thursday, March 17, 2011
![Page 14: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/14.jpg)
Where We Are
A Theme Rises"Implementation Trumps Specification"Molly Holzschlag, Opera @ Philly ETE 2010
CSS 2.1?
Thursday, March 17, 2011
![Page 15: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/15.jpg)
Where We Are Going
A bellwetherOmniture Summit 2010
"This is application development now people."Molly Holzschlag, Opera
Thursday, March 17, 2011
![Page 16: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/16.jpg)
APIs22 APIs
Highlights
applicationCache
sessionStorage
localStorage
Native DnD (ha!)
Native getElementsByClassName
Web Workers*
Web Sockets*
Geolocation API
Thursday, March 17, 2011
![Page 17: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/17.jpg)
DeprecationMany HTML 3/4 Elements Gone
frameset, frames, noframes
basefont, big, center, font, s, strike, tt, u
Replaced Elements
abbr ! acronym,object ! applet,ul ! dir
Bye Bye Attributes
align
valign
link, vlink, alink, text on body
bgcolor
height and width
scrolling on iframe
hspace, vspace
cellpadding, cellspacing, border on table
Thursday, March 17, 2011
![Page 18: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/18.jpg)
CODEAwww... Yeah!
Thursday, March 17, 2011
![Page 19: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/19.jpg)
Modernizr
www.modernizr.com, v1.7
A lightweight JavaScript Library for implementingProgressive Enhancement
Simple to Use
Thursday, March 17, 2011
![Page 20: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/20.jpg)
Modernizr
<!doctype html><html class="no-js">… <script type="text/javascript"
src="/path/to/modernizr-1.7.min.js"></script>…</html>
Thursday, March 17, 2011
![Page 21: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/21.jpg)
Modernizr
<!doctype html><html class="no-js">… <script type="text/javascript"
src="/path/to/modernizr-1.7.min.js"></script>…</html>
Thursday, March 17, 2011
![Page 22: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/22.jpg)
Using ModernizrLeverage What You Know
JavaScript
(function() { if(Modernizr.borderradius) { // enhance } else { // gracefully degrade }})();
CSS
.borderradius div aside { // enhance}.no-borderradius div aside { // gracefully degrade}
Thursday, March 17, 2011
![Page 23: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/23.jpg)
New Semantic Elements
header, footer, nav, section, article, aside, meter, progress
Arising from popularity of weblogs (Wordpress?)
Thursday, March 17, 2011
![Page 24: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/24.jpg)
Semantics and IE
New Semantics not supported in IE 7 & 8
Add support
<!--[if lt IE 9]><script type="text/javascript"> document.createElement("nav"); …<![endif]>
Thursday, March 17, 2011
![Page 25: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/25.jpg)
Web Sockets
Think "Stateful Connection to Remote Server"
No polling
Implementation and Security Concerns
Separate Specificationwww.w3.org/TR/websockets/
Thursday, March 17, 2011
![Page 26: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/26.jpg)
Storage APIslocalStorage
persistent after browser session!
personal data?
(function() { if(Modernizr.localStorage || window.localStorage) { window.localStorage.setItem(name, value); window.localStorage.getItem(name); } else { // gracefully degrade }})();
sessionStorage
Similar API to localStorage
not persistent across session (browser close)
Thursday, March 17, 2011
![Page 27: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/27.jpg)
Web Workers
Think "multithreaded scripting engine"
Separate specification in WHATWG/W3C
Uses a messaging event API
postMessage
onMessage
Thursday, March 17, 2011
![Page 28: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/28.jpg)
Video and Audio
Where promise, interop, and commerce collide
Many participants, Many browsers, little agreement
Who To Watch?
Thursday, March 17, 2011
![Page 29: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/29.jpg)
Video and Audio CodecsVideo Codecs and Support
H.264 (IE9, Safari, Chrome, iOS)Theora (FF, Chrome, Opera)VP8 (IE9, with codec; FF4, Chrome, Opera)
Audio Codecs and Support
AAC (Safari, Chrome, iOS)MP3 (IE9, Safari, Chrome, iOS)Vorbis/Ogg (FF, Chrome, Opera)
Thursday, March 17, 2011
![Page 30: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/30.jpg)
Video and Audio CodeVideo (with Flash Support fallback!)
<video controls> <source src="/path/to/file.mp4"> <source src="/path/to/file.ogv"> <source src="/path/to/file.webm"> <object ...> <!-- Flash Player --> </object> <p>No support</p></video>
Audio Codecs and Support
/* in css, using Modernizr */.audio .dl-mp3 { display: none; }.no-audio .dl-mp3 { display:block; }...<audio controls> <source src="/path/to/file.ogg"> <source src="/path/to/file.mp3"></audio><p class="dl-mp3"><a href="/path/to/file.mp3">Download</a></p>
Thursday, March 17, 2011
![Page 31: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/31.jpg)
@fontfaceFont Support, Finally
Distribution Concerns
Sample
@fontface { font-family: "myawesomemetalfont"; src: url(/fonts/font.eot); src: url(/fonts/font.woff) format ('woff'), url(/fonts/font.ttf) format ('ttf'); font-weight: normal;}
Thursday, March 17, 2011
![Page 32: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/32.jpg)
So Much More...Recommended Reading
Thursday, March 17, 2011
![Page 33: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/33.jpg)
HTML5 and CSS3Pragmatic Bookshelf, Brian Hogan, 2010
Unobtrusive AjaxO'Reilly Shortcuts, Jesse Skinner, 2007
JavaScript: The Good PartsO'Reilly, Douglas Crockford, 2010
JavaScript PatternsO'Reilly, Stoyan Stefanov, 2010
Dive into HTML5diveintohtml5.org, Mark Pilgrim
WHATWG Blogblog.whatwg.org
Surfin' Safari, the WebKit Blogwebkit.org/blog
A List Apartalistapart.com
Thursday, March 17, 2011
![Page 34: Tim stone.html5.rjug.20110316](https://reader038.fdocuments.us/reader038/viewer/2022110302/545906acb1af9fc0638b56f0/html5/thumbnails/34.jpg)
Questions..Answers
Thursday, March 17, 2011