fitc spotlight html5 - the state of the web
DESCRIPTION
TRANSCRIPT
FITC Spotlight HTML5 - 2011-12-03
Frédéric Harper - @fharper
Microsoft Canada
1. You know HTML5 and use it now
2. You know what is HTML5 and don’t use it
3. You are totally new to this
http://www.fanpop.com/spots/dcs-flash/images/9732789/title/flash-fanart
http://esselinkc.wordpress.com/category/uncategorized/
http://azure.com/
http://www.duncannuggets.com/2011/02/duncan-nugget-68-minor-situations-major.html
HTML5
+ + HTML5 CSS3 JavaScript
3D Effects
Performance Semantics
Offline& Storage
Styling
Connectivity
Multimedia
Device Access
Video
Document editing
Offline storage
CSS3 Media Queries
Microdata
WOFF
Web Workers
Geolocalisation
Drag-and-drop
Canvas
Cross-document messaging
Audio
Semantics elements
Web Sockets
AND MUCH MORE!
<video src="video.mp4" id="videoTag">
<source src="video.webm" />
<a href="http://videolink.com/">
Your browser doesn’t support HTML5 video tag
</a>
<!– Flash/Silverlight video here -->
</video>
<div id=“header”>
<div id=“footer”>
<d
iv id
=
“si
de
ba
r”>
<div id=“nav”>
<div id=“article”>
<div id=“article”>
<div id=“media”>
<div id=“section”>
<header>
<footer>
<a
sid
e>
<nav>
<article>
<article>
<figure>
<section>
<style type="text/css">
@font-face {
font-family: MyFont;
src: url('Font.woff');
}
</style>
<div style="font: 24pt MyFont, sans-serif;">
Text that I want to use the font MyFont.
</div>
<link href="mobile.css" rel="stylesheet" media="screen and (max-width:480px)“ type="text/css" />
<link href="netbook.css" rel="stylesheet“ media="screen and (min-width:481px) and (max-width: 1024px)“ type="text/css" />
<link href="laptop.css" rel="stylesheet" media="screen and (min-width:1025px)“ type="text/css" />
First draft Working draft Last call Recommendation candidate Recommendation
X X X X X
X X X
X X
X X X
X X
Lowest Common Dominator
Polyfill Enriched X X X X X
X X X
X X
X X X
X X
X X
Alternate Experiences
X X X X X
X X X
X X
X X X
X X
X X X
X X
X X
And
more…
And
more…
http://joshduck.com/periodic-table.html
Try it
Try it
Read on it
Try it
Read on it
Do cool project
Try it
Read on it
Do cool project
and have fun!
http://www.w3.org/TR/html5/
http://caniuse.com
http://www.modernizr.com/
http://makeawesomeweb.com
http://html5gallery.com
http://diveintohtml5.org/
http://www.beautyoftheweb.com
http://ie.microsoft.com/testdrive/
Frédéric Harper
Developer Evangelist @ Microsoft
@fharper
http://webnotwar.ca
http://oocz.net