Introduction à HTML5 : son histoire, son état actuel, les technologies que l'on peut commencer d'envisager à utiliser et l'outillage actuellement disponible. Présentation jouée lors du WebCamp au Centre Pompidou le 15/1

2. http://blogs.msdn.com/davrous

7. First Public
Working
Draft
Working
Draft
Last call
Candidate
Recommendation
Call to implement
Proposed
Recommendation
Recommendation

8. First Public
Working Draft
Working Draft Last Call
Candidate
Recommendati
on
Recommendati
on

12. Source : Etude Forester Consulting "The Evolution Of Web Development -
An Inflection Point In Web Design And Evolving Standards Sets The Stage For HTML 5 Adoption“ Septembre 2010
Base : 210 développeurs Web (USA & Royaume Uni)

13. Source : Etude Forester Consulting "The Evolution Of Web Development -
An Inflection Point In Web Design And Evolving Standards Sets The Stage For HTML 5 Adoption“ Septembre 2010
Base : 210 développeurs Web (USA & Royaume Uni)

15. 7200 fournis pour IE8
jusqu’à 60000 tests unitaires pour valider
les spécifications HTML5/CSS3
Rappel : ACID3 = 100 tests répartis sur 6 groupes

16. Standards du
Web
Nombre de
tests
soumis
Internet
Explorer 9
Platform
Preview
Mozilla
Firefox
3.6.11
Opera 10.63
Apple Safari
5.0.2
Google
Chrome
7.0.517.41
Internet
Explorer 8
HTML5 122 98% 50% 57% 55% 70% 0%
SVG 1.1
2nd edition
70 100% 77% 87% 86% 89% 0%
CSS3 135 98% 59% 75% 69% 70% 10%
DOM 187 99% 76% 64% 68% 71% 4%
JavaScript 2339 100% 68% 68% 91% 96% 8%
Mise à jour : 29 octobre 2010

21. Mais sans eux, difficile d’avoir le même Markup…
21

23. <video src="video.mp4" id="videoTag" width="640px" height="360px">
<!-- Only shown when browser doesn’t support video -->
<!-- You Could Embed Flash or Silverlight Video Here -->
</video>

24. Using Script To Determine If A Video Code Is Supported
try {
var v = document.createElement("video");
if (v && v.canPlayType && v.canPlayType("video/mp4").match(/^(probably|maybe)$/i))
{
// Browser can likely play MPEG-4 video
}
else {
// Browser cannot play MPEG-4 video
}
}
catch (e) {
// Exception when testing for MPEG-4 Playback
}
Providing Multiple Video Sources To Support Multiple Browsers
<video id="myVideo">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
<!-- Insert Silverlight or Flash Video Fallback Here -->
</video>
Pour supporter tous les navigateurs

27. <canvas id="myCanvas" width="200" height="200">
Your browser doesn’t support Canvas, sorry.
</canvas>
<script type="text/javascript">
var example = document.getElementById("myCanvas");
var context = example.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
</script>
Canvas
27

29. Scalable Vector Graphics (SVG)
29
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<rect fill="red" x="20" y="20" width="100" height="75" />
<rect fill="blue" x="50" y="50" width="100" height="75" />
</svg>

33. CSS3 Media Queries
33
<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" />

34. 34
CSS3 Backgrounds & Borders
div {
border-radius: 152px 304px 228px 152px;
border-style: double;
border-width: 42px;
padding: 12px;
}

38. Helper HTML5 pour Visual Studio 2008 & 2010
Adobe CS5
WebMatrix
Adobe Illustrator avec plug-in MS
http://www.awkbird.com/labs/backyard/

42. http://blogs.msdn.com/davrous/
http://blogs.msdn.com/iefrance/
http://ie.microsoft.com/testdrive
http://blogs.technet.com/b/stanislas/archive/2010/11/04/mais-qui-
construit-l-html5.aspx
http://www.w3.org/
http://www.whatwg.org/