Court billet pour ceux et celles qui n’ont jamais réussi à faire valider leur embed Flash.
Voici un code qui vous rendra valide par le W3C :
<object type="application/x-shockwave-flash" data="movie.swf"
width="500" height="500">
<param value="movie.swf" />
</object>
Source prise d’un débat sur comment valider Flash : http://forums.hostmysite.com/about497.html
Enjoy and share!
Mon côté designer avait envi de créer des vignettes pour indiquer qu’une page est valide HTML5 par le W3C. Elles sont faites par plaisir d’avoir mes propres vignettes HTML5 d’ici à ce que le W3C en crée à leur tour.
Vous pouvez les utiliser sans problème sur vos sites. It’s free!
PS : Ne sachant pas parler français, elles sont en anglais.
Une des grandes nouveautés avec HTML5 est la possibilité d’intégrer de la vidéo sans passer par la technologie Flash. En effet, encore aujourd’hui sous HTML4 ou XHTML, nous devons “embedder” (oui oui le verbe embedder) nos vidéos en Flash. Cela implique donc beaucoup de code inutile et souvent pas conforme au W3C. De plus, il faut également s’assurer que l’utilisateur possède Flash Player pour être en mesure de jouer la vidéo en question. Vous me direz : “Oui, mais qui n’a pas Flash Player de nos jours?”… Admettons que mon grand-père ne l’a pas et que je veux lui faire plaisir, je vais utiliser HTML5 et la balise <video>.
Voici un exemple de l’utilisation de la vidéo avec HTML5 :
<video width=”450″ height=”400″ poster=”images/bla.jpeg” controls=”controls”>
<source src=”http://tinyvid.tv/vfe/big_buck_bunny.ogv” type=”video/ogg” />
</video>
Simple n’est-ce pas? En ayant moindrement des connaissances en HTML, vous devriez être en mesure de comprendre le fonctionnement général de cette ligne de code. Je vais par contre vous expliquez l’essentiel plus en profondeur ci-dessous.
La balise peut comprendre 8 attributs (voir mon billet “Bien démarrer avec HTML5” pour y consulter la HTML5 Cheat Sheet).
Vous connaissez sans aucun doute les attributs width, height et src qui sont également utilisés pour les images. Ce qui nous intéresse est plutôt l’attribut poster, control, autoplay(qui n’est pas dans l’exemple) ainsi que la balise <video>.
L’attribut poster permet de choisir une image qui apparaîtra si la vidéo prend du temps avant de charger ou si la vidéo n’existe plus. Dans mon exemple, mon image par défaut est placée sous le répertoire images.
L’attribut controls indique au navigateur que vous voulez les contrôles par défaut. Il est également possible de créer ses propres contrôles, mais j’y reviendrai dans un autre billet.
L’attribut autoplay s’assure de jouer automatiquement la vidéo (ce que je ne suggère en aucun cas sur un site Web à moins que ce soit vraiment pertinent..).
La balise <source> me sert à déterminer l’emplacement de la vidéo ainsi que son format.
Vous pouvez donc maintenant facilement intégrer vos vidéos dans vos pages en utilisant HTML5. Bien entendu, HTML5 n’est pas encore totalement au point et la balise <video> n’est pas encore supportée par tous les navigateurs . Firefox 3.5, Chrome 3 Beta, Safari 4 et iPhone OS3 supportent assez bien la balise <video>. Est-ce que cette nouvelle méthode va remplacer l’utilisation de Flash pour insérer de la vidéo dans nos pages? Seul le temps nous le dira. Une chose est sûre, il est intéressant d’avoir une alternative à Flash.
Voici également un exemple intéressant de l’utilisation de la vidéo en HTML5. Si votre navigateur ne supporte pas HTML5, la vidéo sera lue par Flash.
http://camendesign.com/code/video_for_everybody/test.html
Je ne sais pas pour vous, mais lorsque je fais un projet en XHTML/CSS, je réutilise toujours les mêmes choses. Je crois que tous les codeurs se doivent d’avoir leurs gabarits qu’ils peuvent réutiliser pour leur faire gagner beaucoup de temps. Une des choses donc je ne peux pas me passer, c’est ma feuille de style « reset.css »  que j’ai légèrement modifiée et qui a été créé par Éric Meyer (http://meyerweb.com/eric/tools/css/reset/). Plusieurs d’entres vous doivent déjà l’utiliser, mais pour les autres, je vous conseille fortement d’y jeter un coup d’œil. Ce « reset.css » permet un meilleur rendu pour tous les navigateurs puisqu’il « reset » certaines propriétés qui ne sont pas interprétées de la même façon par exemple sous Firefox, IE, Safari, etc…
Où est le rapport avec HTML5? Et bien c’est simple, il existe également un petit fichier CSS inspiré de celui d’Eric Meyer pour améliorer le rendu d’HTML5 sur tous les navigateurs. Ce HTML5 Reset Stylesheet a été créé par Richard Clark.
Il y a entre autre l’ajout suivant :
article, aside, dialog, figure, footer, header, hgroup, nav, section {
display:block;
}
qui initialise les nouvelles balises pour qu’elles soient vues comme des éléments en block.
Voici le lien pour le HTML5 Reset Stylesheet :
http://html5.pire.me/css/html5-reset-1.4.css
Et si vous pensiez vous en sortir, voici un autre lien fort intéressant qui vous permettra de valider votre code HTML5 :
En bonus, un PDF contenant HTML5 Cheat Sheet qui contient toutes les balises avec leur description. Il est de plus indiqué dans quelle version la balise peut être utilisée.
© Copyright 2009 Simon Guérin
