The document discusses HTML5 and its evolution from working drafts to recommendations. It provides statistics on the number of tests submitted for different HTML5 specifications and how various browsers perform on those tests. It also provides examples of using new HTML5 features like video, canvas, and CSS3 media queries to build responsive designs.
11. 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)
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.
14. 7200 fournis pour IE8
jusqu’à 60000 tests unitaires pour valider
les spécifications HTML5/CSS3
Rappel : ACID3 = 100 tests répartis sur 6 groupes
15. 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
22. <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>
23. 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
24.
25.
26. <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
26
Demos from IETestDrive.com
http://ie.microsoft.com/testdrive/HTML5/01BorderRadius/
You can determine if browser supports video playback by testing for container only, or container and video, audio or video & audio using canPlayType method of the video object in the JavaScript code.
1 – http://www.dailymotion.com/html5 sous IE9 puis en mode IE8
2 - http://blogs.msdn.com/b/iefrance/archive/2010/09/24/une-acc-233-l-233-ration-mat-233-rielle-compl-232-te-pour-tous-les-233-l-233-ments-du-web.aspx sous IE9, Chrome et FF4 pour montrer le fallback
3 – Video Player différent : http://ie.microsoft.com/testdrive/Graphics/VideoPanorama/Default.html
4 – Un exemple de ce qu’il ne faut pas faire : http://www.apple.com/html5/ !
1 – http://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.html
2 - http://www.xs4all.nl/~peterned/3d/3 - http://ie.microsoft.com/testdrive/Performance/Galactic/Default.html dans IE9, FF, Chrome, Opera