http://blogs.msdn.com/davrous
First Public
Working
Draft
Working
Draft
Last call
Candidate
Recommendation
Call to implement
Proposed
Recommendation
Reco...
First Public
Working Draft
Working Draft Last Call
Candidate
Recommendati
on
Recommendati
on
Source : Etude Forester Consulting "The Evolution Of Web Development -
An Inflection Point In Web Design And Evolving Stan...
Source : Etude Forester Consulting "The Evolution Of Web Development -
An Inflection Point In Web Design And Evolving Stan...
7200 fournis pour IE8
jusqu’à 60000 tests unitaires pour valider
les spécifications HTML5/CSS3
Rappel : ACID3 = 100 tests ...
Standards du
Web
Nombre de
tests
soumis
Internet
Explorer 9
Platform
Preview
Mozilla
Firefox
3.6.11
Opera 10.63
Apple Safa...
Mais sans eux, difficile d’avoir le même Markup…
20
<video src="video.mp4" id="videoTag" width="640px" height="360px">
<!-- Only shown when browser doesn’t support video -->
...
Using Script To Determine If A Video Code Is Supported
try {
var v = document.createElement("video");
if (v && v.canPlayTy...
<canvas id="myCanvas" width="200" height="200">
Your browser doesn’t support Canvas, sorry.
</canvas>
<script type="text/j...
Scalable Vector Graphics (SVG)
28
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<rect fill="red" x="20...
CSS3 Media Queries
32
<link href=“mobile.css" rel="stylesheet"
media="screen and (max-width:480px)" type=“
text/css" />
<l...
33
CSS3 Backgrounds & Borders
div {
border-radius: 152px 304px 228px 152px;
border-style: double;
border-width: 42px;
padd...
Helper HTML5 pour Visual Studio 2008 & 2010
Adobe CS5
WebMatrix
Adobe Illustrator avec plug-in MS
http://www.awkbird.com/l...
http://blogs.msdn.com/davrous/
http://blogs.msdn.com/iefrance/
http://ie.microsoft.com/testdrive
http://blogs.technet.com/...
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
WebCamp HTML5
Upcoming SlideShare
Loading in …5
×

WebCamp HTML5

2,589 views
2,479 views

Published on

Introduction à HTML5 : son histoire et l'état actuel des specs. Ensuite, nous verrons certaines parties de HTML5, CSS3 ou SVG avec lesquelles on peut commencer relativement sereinement à développer. Pour finir, nous verrons un rapide point sur l'outillage.

Session jouée lors du WebCamp au Centre Pompidou de Paris le 25/11/2010 par David Rousset de Microsoft France.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,589
On SlideShare
0
From Embeds
0
Number of Embeds
65
Actions
Shares
0
Downloads
32
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • 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  Business http://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
  • WebCamp HTML5

    1. 1. http://blogs.msdn.com/davrous
    2. 2. First Public Working Draft Working Draft Last call Candidate Recommendation Call to implement Proposed Recommendation Recommendation
    3. 3. First Public Working Draft Working Draft Last Call Candidate Recommendati on Recommendati on
    4. 4. 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)
    5. 5. 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)
    6. 6. 7200 fournis pour IE8 jusqu’à 60000 tests unitaires pour valider les spécifications HTML5/CSS3 Rappel : ACID3 = 100 tests répartis sur 6 groupes
    7. 7. 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
    8. 8. Mais sans eux, difficile d’avoir le même Markup… 20
    9. 9. <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>
    10. 10. 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
    11. 11. <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
    12. 12. Scalable Vector Graphics (SVG) 28 <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>
    13. 13. CSS3 Media Queries 32 <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" />
    14. 14. 33 CSS3 Backgrounds & Borders div { border-radius: 152px 304px 228px 152px; border-style: double; border-width: 42px; padding: 12px; }
    15. 15. Helper HTML5 pour Visual Studio 2008 & 2010 Adobe CS5 WebMatrix Adobe Illustrator avec plug-in MS http://www.awkbird.com/labs/backyard/
    16. 16. 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/

    ×