Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Site Web > XHTML / CSS > Faire un site valide xHTML Strict 1.0 pour Mozilla et IE avec du Flash > Lecture du tutoriel

Faire un site valide xHTML Strict 1.0 pour Mozilla et IE avec du Flash

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Avatar
Auteur : Severance
Note : 15 / 20 (9 votes)
Visualisations : 18 218

Plus d'informations Plus d'informations
J'ai réalisé un site web et j'ai tout de suite voulu y intégrer du Flash. Cependant, j'ai eu quelques problèmes pour qu'il soit valide w3c xHTML Strict 1.0 et qu'il fonctionne parfaitement à fois sous Mozilla et sous IE (et éventuellement les autres navigateurs mais pour ce principe-là, ils ne sont pas différents de Mozilla).

Alors autant que les "expériences" que j'ai faites servent au plus grand nombre :) .

Pour que vous compreniez ce tuto, il faut d'abord avoir suivi le tuto de M@teo21 sur la création d'un site web. En effet, je ne reviendrai ni sur la signification des balises xHTML, ni sur le CSS.
Sommaire du tutoriel :
Icône du chapitre

La balise object

Ça sert à quoi ?

Cette balise sert à insérer un objet qui peut être de différente nature :

C'est à ce dernier point que nous allons nous intéresser.

Sa syntaxe


C'est une balise inline avec une syntaxe classique :
Code : Autre
1
<object>...</object>


Ses attributs


Ils sont nombreux mais voici les principaux que nous allons utiliser :
data="..." : l'URL des données de l'objet ;
type="..." : type de contenu Internet des données ;
height="..." : hauteur de l'objet ;
width="..." : largeur de l'objet.

Si vous voulez les autres :
http://msdn.microsoft.com/workshop/aut [...] ts/object.asp

Ses paramètres


À l'intérieur de cette balise, on peut également ajouter des paramètres qui peuvent modifier des propriétés de l'objet inséré. Nous allons le voir, ils sont très importants dans notre cas.
Voici la syntaxe d'un paramètre :
Code : Autre
1
<param name="mon_paramètre" value="valeur_du_paramètre" />

En pratique

Passons directement à la pratique sur une animation Flash.

Sur cette partie, nous verrons la mise en place d'une bannière en Flash. Les autres insertions Flash (pour les menus, animations indépendantes... etc.) se font sur le même modèle.

Préparation



Imaginons donc que l'on veuille insérer une bannière Flash nommée entete.swf et qui a une largeur de 660 pixels et une hauteur de 150 pixels. On définit donc avec le CSS un bloc de 660 x 150 comme dans le tuto de M@teo21, et qui se nomme en_tete.

On met ce code xHTML pour que l'on écrive dans ce bloc :
Code : Autre
1
2
3
<div id="en_tete">

</div>


Jusque-là, ce n'est pas trop dur, si ? :p


La mauvaise méthode



Maintenant, la chose à ne pas faire, c'est utiliser l'insertion automatique que propose votre logiciel avec lequel vous faites votre site. Exemples : Dreamweaver, Frontpage, etc.

En effet cela va vous mettre quelque chose comme cela :
Code : Autre
1
2
3
4
5
6
7
<div id="en_tete">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="660" height="150" title="entete">
    <param name="movie" value="entete.swf" />
    <param name="quality" value="high" />
    <embed src="entete.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="660" height="150"></embed>
  </object>
</div>


Et alors ? Chez moi, ça marche sous Firefox et sous IE !!

Ça, pour marcher, ça marche... mais essayez donc le validator w3c :
http://validator.w3.org/
Boom !! Un gros : "This page is not Valid XHTML 1.0 Strict!", avec plein d'erreurs. Bref, ce n'est pas ce qu'on veut.


La bonne méthode



Insérez ce code et essayez :
Code : Autre
1
2
3
<object type="application/x-shockwave-flash" data="entete.swf" width="660" height="150">
        <param name="movie" value="entetePlanete.swf" />
</object>


Voilà, on a enfin un beau : "This Page Is Valid XHTML 1.0 Strict!".
Ahhh... ça fait du bien :) . Surtout que ça marche impeccablement sous Firefox et sous IE :p .
En plus, c'est un code plus léger et assez compréhensible (regardez les définitions des attributs dans le chapitre précédent).


D'autres bonnes choses



On va rajouter 2 autres paramètres :

- celui-ci pour dire au navigateur de lire l'animation avec la meilleure qualité :
Code : Autre
1
<param name="quality" value="high" />

- celui-ci pour ne pas avoir un fond blanc "flashy" lors du chargement de l'animation et pour que le fond de l'animation soit le fond de votre site :
Code : Autre
1
<param name="wmode" value="transparent" />

Essayez ce paramètre même si vous voulez garder le fond de votre animation : en effet, cela enlève le chargement à fond blanc pas très esthétique. Ainsi, si vous souhaitez garder le fond de votre animation, dans Flash, mettez celui-ci dans un graphique rectangle, il sera affiché normalement.


Ensuite, il faut penser à ceux qui n'ont pas le plugin Flash. Ainsi l'on pourra rajouter un message indiquant qu'il faut télécharger le plugin :
Code : Autre
1
<p>Installez le plugin Flash pour voir l'animation</p>

Rappelez-vous : mettez le texte entre les balises de paragraphe p, sinon votre page ne passera pas le validator.

On pourra également mettre un lien vers le téléchargement du plugin, toujours à l'intérieur des balises de paragraphe. Ainsi, au final, on obtient quelque chose du genre :
Code : Autre
1
2
3
4
5
6
<object type="application/x-shockwave-flash" data="entete.swf" width="660" height="150">
        <param name="movie" value="entete.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <p>Installez le plugin Flash pour voir l'animation : <a href="http://www.adobe.com/go/gntray_dl_getflashplayer_fr" title="LienPlugin">Cliquez ici pour le télécharger</a></p>
  </object>


Voilà. :)
Et si vous intégrez un menu en Flash, avec cette méthode, vous pouvez mettre des liens vers les pages de votre site, comme ça, le visiteur ne possédant pas le plugin Flash peut quand même surfer sur votre site.

Un petit conseil : ne faites pas un site complètement en Flash.
En effet, même si c'est très attrayant au premier abord, le problème est que les moteurs de recherche ne peuvent pas lire les mots dans des animations Flash. Donc pas de référencement :colere: . De plus, les mises à jour sont plus compliquées car il faut régénérer une animation à chaque fois.

Si toutefois vous voulez faire un site totalement en Flash, faites également une version html/php : ainsi, les personnes n'ayant pas Flash et les personnes malvoyantes pourront tout de même profiter du contenu votre site (et n'iront pas à la concurrence :p ).

Voilà, j'espère que ce tuto vous a aidé, et si vous voulez voir ce qu'on peut faire avec cette méthode, allez voir cette page de démonstration. Notez que le fond étoilé est celui de la page, pas celui de la bannière Flash qui, lui, est simplement noir (c'est grâce au paramètre wmode vu plus haut).
Retour en haut Retour en haut


Créé : le 15/07/2006 à 18:20:55
Modifié : le 22/08/2008 à 16:07:41
Avancement : 100%
Licence : Copie non autorisée

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news
Édité par Simple IT SARL : Nous contacter | Notre blog | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 561 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.0312s (0.0208s)