the rich standard: getting familiar with html5
DESCRIPTION
HTML 5 may take some time to find full support in all major browsers, but you may be surprised to discover how many of HTML 5’s features are available today! HTML 5 is the next generation standard for web applications, and it promises to give plug-in based RIAs a serious challenge. In this demo heavy session, you’ll see HTML 5 in action and learn what you can do with today’s browser support for the new standard. If you’re building rich web applications and you’ve never touched HTML 5, this session is a must see.TRANSCRIPT
![Page 1: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/1.jpg)
the RICHSTANDARD:
GETTING familiar
with HTML5by Todd Anglin
@telerik
facebook.com/telerik
![Page 2: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/2.jpg)
Introductions
Todd AnglinChief Evangelist, TelerikMicrosoft MVPPresident NHDNUG & O’Reilly Author
@toddanglin
TelerikWatch.com
![Page 3: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/3.jpg)
TelerikComplete provider of development planning, construction & testing tools
UI DATA PRODUCTIVITY TESTING TFS CMS
![Page 4: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/4.jpg)
the “plan”the
options
the browser
sHTML5
use it todayA&Q
![Page 5: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/5.jpg)
“Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.”
-Steve Jobs April, 2010
![Page 6: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/6.jpg)
<HTML5 ?>
![Page 7: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/7.jpg)
what do these *platforms* have in common?
![Page 8: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/8.jpg)
the rich web
New!
Web
3D
![Page 9: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/9.jpg)
Video Great Great Good
Audio Great Great Good
Animation Great Great Fair
Proprietary Yes Yes No
Availability Good Fair Great
Evolution Good Good Poor*
Tools Fair Great Eh…
HTML5
![Page 10: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/10.jpg)
famously dead* proprietary platforms
PowerBuilder
OS/2
ColdFusionWinForm
sVB6
FoxPro
OS 9BeOS
![Page 11: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/11.jpg)
when will HTML5 be “official?”
![Page 12: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/12.jpg)
2022
October 2007First W3C
Working Draft
October 2009Last Call
Working Draft
2011Call for test
suite contributions
2012Candidate
Recommendation
2012First draft of
test suite
2015Second draft of
test suite
2019Final version of
test suite.
2020Reissued Last Call Working
Draft
2022Proposed
Recommendation
![Page 13: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/13.jpg)
<HTML5>
![Page 14: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/14.jpg)
the basics• <!DOCTYPE html>• 9 new “structure” tags• 16 new HTML elements• 13 new <input> types
![Page 15: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/15.jpg)
compatible
![Page 16: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/16.jpg)
HTMLCSS+ +JavaScript
![Page 17: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/17.jpg)
video audio history
semantic tags canvas offline
local storage
drag & drop
geolocation
sockets editing web workers
![Page 18: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/18.jpg)
![Page 19: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/19.jpg)
which browsers matter?
of internet browses withIE, FF, Safari, Chrome, or Opera
99%
![Page 20: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/20.jpg)
![Page 21: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/21.jpg)
Because some browsers run on many different operating systems, there can be a tendency to use a 'least common denominator' approach to implementing HTML5. By using more of the underlying operating system, and taking advantage of the power of the whole PC, IE9 enables developers to do more with HTML5.
“
”
-Dean HachamovitchGeneral Manager, IE Team
![Page 22: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/22.jpg)
html5test.com
?
![Page 23: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/23.jpg)
DEMODEMO
HTML5 Test + IE9
![Page 24: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/24.jpg)
semantic tagstag: <header> <footer> <nav> <article> <hgroup>
<header> <hgroup> <h1>My Site</h1> <h2>My site tag line</h2> </hgroup></header><article> <header> <h1>An article title</h1> <header></article><footer><p>Copyright 1987</p></footer>
support: IE9, FF3.5, Safari, Chrome, Opera
![Page 25: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/25.jpg)
fixing IE
<head> <meta charset="utf-8" /> <title>My Weblog</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--></head>
![Page 26: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/26.jpg)
input typestag: time, date, search, email, etc.
<form><input type="email" autofocus="autofocus"
placeholder="Enter your email" /></form>
support: Safari, Chrome, Opera
![Page 27: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/27.jpg)
canvastag: <canvas />
<canvas id=“b" width="300" height="225"></canvas>
function draw_b() { var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100);}
support: IE*, FF3, Safari, Chrome, Opera
![Page 28: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/28.jpg)
fixing IE
<head> <!--[if IE]> <script src="excanvas.js"></script> <![endif]--></head>
Explorercanvas
![Page 29: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/29.jpg)
local storageapi: sessionStorage & localStoarge
<script>sessionStorage.setItem('value', this.value);localStorage.setItem('value', this.value);
sessionStorage.getItem(‘value’);
sessionStorage.clear();localStorage.clear();</script>
support: IE9, FF3.5, Safari, Chrome, Opera
5 MB limit
![Page 30: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/30.jpg)
web socketsapi: WebSocket
ws = new WebSocket("ws://localhost:8282/test”);
ws.onopen = WSonOpen;ws.onmessage = WSonMessage;ws.onclose = WSonClose;ws.onerror = WSonError;
function WSonMessage(event) { $(“#myDiv”).html(event.data);};
support: Safari, Chrome, Firefox, (Opera 10.7)
![Page 31: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/31.jpg)
web sqlapi: openDatabase
db = openDatabase("html5demos", "1.0", "HTML 5 Database API example", 200000);if (db) { db.transaction(function(tx) { tx.executeSql("CREATE TABLE IF NOT EXISTS tweets (id REAL UNIQUE, text TEXT, created_at TEXT, screen_name TEXT, mention BOOLEAN)", [], callback); });}
db.transaction(function (tx) { tx.executeSql('SELECT * FROM tweets WHERE mention = ? AND id > ? ORDER BY id DESC', [mention, latest], callbackFunc);});
support: Safari, Chrome, Opera
“This specification has reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.” –W3C
![Page 32: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/32.jpg)
offlinetag: <html manifest="html5demo.manifest">type: text/cache-manifest
CACHE MANIFEST# Files you want cached for your app to work offline
myLogo.jpg
//Interacting with cachewindow.applicationCache.update();alert(window.applicationCache.status);
support: FF3.5, Safari, Chrome
![Page 33: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/33.jpg)
videotag: <video />
<!-- Single video --><video src="mymovie.mp4" width="320" height="240"></video>
<!-- Multiple encoded versions --><video width="320" height="240" controls> <source src="mymovie.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="mymovie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></video>
support: IE9, FF3.6, Safari, Chrome, Opera
![Page 34: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/34.jpg)
video for all browsers
1. Multiple encodings
2. Graceful degradation
CODECS/CONTAINER
FIREFOX OPERA CHROME IE9 SAFARI IPHONE ANDROID
Theora+Vorbis+Ogg
✓ ✓ ✓ · · · ·
H.264+AAC+MP4
· · ✓ ✓ ✓ ✓ ✓
<video width="320" height="240" controls> <source src="mymovie.ogv"> <source src="mymovie.mp4"> <object data="videoplayer.swf"> <param name="flashvars" value="mymovie.mp4"> HTML5 and Flash video not supported </object></video>
![Page 35: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/35.jpg)
WebMRoyalty FreeVP8/Vorbis
support: IE9, FF3.5, Safari*, Chrome, Opera
![Page 36: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/36.jpg)
CSS3 &JavaScript
jQuery
![Page 37: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/37.jpg)
DEMODEMO
CSS3 Demos
![Page 38: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/38.jpg)
how do you use HTML5 today?
![Page 39: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/39.jpg)
modernizer
![Page 40: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/40.jpg)
progressiveenhancementgracefuldegradation
![Page 41: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/41.jpg)
![Page 42: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/42.jpg)
![Page 43: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/43.jpg)
DEMODEMO
PE & GD Examples
![Page 44: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/44.jpg)
should I use HTML5 today?
![Page 45: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/45.jpg)
The consumer should be able to decide which technologies they want to use, but a multi-platform world is definitely where the world is headed.
-Shantanu Narayen April, 2010
![Page 46: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/46.jpg)
The future of the web is HTML5.
-Dean Hachamovitch April, 2010
![Page 48: The Rich Standard: Getting Familiar with HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062513/55515103b4c905c6268b55a7/html5/thumbnails/48.jpg)
Resources
• Quotes– http://www.apple.com/hotnews/thoughts-on-flash/– http://www.dailytech.com/Adobes+CEO+Responds+to+Steve+Jobs+Rant+about+Flash/a
rticle18267.htm– http://blogs.msdn.com/ie/archive/2010/04/29/html5-video.aspx
• HTML5 Resources– http://www.w3.org/TR/html5-diff/#backwards-compatible– http://html5demos.com/– http://ishtml5ready.com– http://caniuse.com– http://html5readiness.com– http://html5test.com– http://www.browserscope.org/– http://www.html5rocks.com/
• HTML5 Demos– http://9elements.com/io/projects/html5/canvas/– http://html5demos.com/– http://www.chromeexperiments.com/
• CSS3 Demos– http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html– http://anthonycalzadilla.com/css3-ATAT/index.html
• IE9 Download– http://ie.microsoft.com/testdrive/