WebCamp HTML5
- 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
- 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/
Editor's Notes
- 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
- Fichiers statiques PDC10
// avec canvas ici : http://www.skybeautiful.com
http://ie.microsoft.com/testdrive/Graphics/AtlaszurEuropawahl/Default.xhtml Interaction
http://ie.microsoft.com/testdrive/Graphics/RealWorldDataAndDiagrams/Default.xhtml Businesshttp://ie.microsoft.com/testdrive/Graphics/SVGoids/Default.xhtml -> Jeux
- http://people.opera.com/howcome/2010/forms/
- Media Queries : http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html
Borders Radius : Démo avec WebMatrix + F12 IE9
Borders Radius : http://ie.microsoft.com/testdrive/HTML5/BorderRadius/Default.html
- http://www.beautyoftheweb.com/
http://www.nevermindthebullets.com avec PP7 : CSS3 2D transform, multi background CSS3, WOFF, SVG, <audio>
- 1 – Contrôle Pivot : http://www.gdfsuez.com/pivot/
2 – BookClub : http://bookclub.cloudapp.net