Flash™ non intrusif
Flash™, créé par Macromedia™ en 1996, aujourd'hui maintenu par Adobe™, est une technologie permettant d'ajouter à une page web une application interactive pouvant inclure des graphismes 2D et textes vectoriels animés, des vidéos en streaming… Des animations Flash™ sont aujourd'hui visibles partout sur internet. Cette technologie apporte beaucoup, sur le plan esthétique comme en interactivité, mais apporte aussi beaucoup de problèmes d'accessibilité… sauf si on s'y prend bien.
Voici quelques conseils :
Règles à suivre
En suivant quelques règles tenant du bon sens, on arrive à mettre en place des embellissements utilisant Flash™, de manière à garder une bonne accessibilité, et, surtout, sans pénaliser celles et ceux qui n'ont pas le fameux plugin permettant de voir ces animations.
1. Faire comme si Flash™ n'existait pas
Dans un premier temps, on va créer le design, les contenus et fonctionnalités, en faisant comme si Flash™ n'existait tout simplement pas. Les règles CSS sont souvent très suffisantes pour créer certains effets, et javascript permet, à moindre efforts, et à condition de l'employer de manière non intrusive, de créer un certain nombre d'effets que même Flash™ ne permettrait pas de faire. Les frameworks tels que Prototype et Scriptaculous, par exemple, permettent pléthore d'effets et autres interactions, je vous les conseille chaudement.
Agir ainsi, en préparant, d'abord, un environnement pleinement fonctionnel sans utiliser Flash™ est un préalable indispensable pour permettre une bonne accessibilité : si le client possède le bon plugin, les animations Flash™ viendront se substituer à certains contenus, dans le cas contraire, la navigation n'en souffrira pas.
Une fois que le contenu est présent, que le design joue son rôle et que javascript viens prêter main forte, on passe à la suite :
2. Identifier les contenus et fonctions «flashables»
On ne va pas tout placer sous Flash™, évidement : seules quelques parties, finement choisies, seront remplacées par du contenu Flash™ en fonction des critères suivants :
- Les CSS ne peuvent créer les mêmes effets esthétiques souhaités
- Le javascript, lui non plus, ne peut aider à atteindre ces objectifs esthétiques
- Si flash n'apporte pas un «plus» esthétique, il apporte au contenu un «plus» dans la navigation et l'interactivité.
Une fois ces contenus identifiés, on modifiera le code (X)HTML de manière à identifier le conteneur de ces contenus :
<div>Ce texte sera remplacé par une animation Flash™</div>
sera modifié en
<div id="texte_flash">Ce texte sera remplacé par une animation Flash™</div>
et les feuilles de style seront adaptées en fonction, afin de ne pas être perturbées par l'ajout des <div>.
L'étape suivante sera, bien évidement, de créer les animations Flash™ à proprement parler, mais nous n'en parlerons pas ici.
3. «Flasher» le contenu
Vos animations sont prêtes, il ne reste plus qu'à les mettre en place. Pour ce faire, on peut soit utiliser une fonction javascript de notre fabrication, soit utiliser ce qui existe déjà : le script SWFObject.
SWFObject, écrit par Geoff Stearns, Michael Williams, et Bobby van der Sluis, est, pour moi, le meilleur moyen d'inclure du Flash™ dans une page web. Ce script open-source (sous licence MIT) vous permet d'inclure dans vos pages web des animations Flash™ en les plaçant dans des conteneurs (<div> par exemple). Pour l'utiliser, téléchargez le .zip depuis le site officiel, et placez le fichier .js dans un dossier et liez-le à votre page web via une balise <script> comme suit. En suite, rien de plus simple ! reprenons notre exemple de tout à l'heure :
<div id="texte_flash">Ce texte sera remplacé par une animation Flash™</div>
Notre animation Flash™ (nommée "animation.swf") ayant 300 pixels de large et 120 de haut et requérant la version 5 minimum du plugin Flash™, viendra se loger dans le conteneur nommé "texte_flash", et nous allons utiliser SWFObject comme suit pour ce faire :
<script type="text/javascript">
var anim = new swfobject.embedSWF("animation.swf", "texte_flash", "300", "120", "5.0.0");
</script>
Pour de plus amples informations, reportez-vous à la page suivante (en anglais) : http://code.google.com/p/swfobject/wiki/documentation
Ainsi, notre animation remplacera le contenu de la
4. Maintenance
Il conviendra, évidement, à chaque changement du contenu «non-Flash™», de modifier le contenu de l'animation. Il est donc fortement recommandé de faire en sorte que l'animation récupère le contenu à afficher de manière dynamique (via javascript par exemple) afin que les contenus avec et sans Flash™ restent identiques, sans pour autant avoir besoin de mettre à jour à la fois le contenu et les animations.
Un mot sur l'intrusivité
N'afficher un contenu Flash™ que lorsque celà est nécessaire, c'est bien, mais faire en sorte que l'utilisateur ne soit pas gêné par ces contenus, d'une quelconque manière, c'est mieux.
Certains «webmasters» trouvent intéressent d'ajouter à leurs animations Flash™ une bande son. Dans l'absolu, rien de bien méchant, cependant, ces bandes son sont, bien souvent, imposées au visiteur. Certes, la musique ajoute un peit quelquechose à l'ambiance du site, cependant, le visiteur écoute déjà peut être de la musique… ou peut être qu'il n'aime pas cette musique imposée, peut etre encore qu'il a le son réglé au maximum sans le savoir, peut être encore qu'il est au bureau… et voilà que, sans prévenir, sans son accord, sans qu'il en ait été prévenu au préalable, sans qu'il ai pu dire si, oui ou non, il désirait cette musique, voilà que des sons jaillissent de ses haut-parleurs ou de ses écouteurs. Quelle intrusivité, quel irrespect pour le visiteur que de lui imposer celà. «Comment faire ?» demanderont certains… simplement en prévenant l'utilisateur par un message, lors du pré-chargement par exemple : «Nous vous proposons une ambiance musicale pour accompagner votre navigation : cliquez-ici pour désactiver l'ambiance musicale» est-ce si compliqué ?
Pour en finir avec la musique et les sons sous Flash™ : quitte à mettre en place un fond sonore, autant que ce fond soit de qualité ! par pitié, utilisez un échantillonage de 128kbps minimum ! et en stéréo ! par pitié ! Nul doute que vous ne mettriez pas en ligne des photos pixélisées, alors pourquoi faire de même pour la musique ? d'autant qu'une musique de mauvaise qualité offre de vous une image d'amateurisme certain…
Conclusion
Il existe bien des manières d'inclure du Flash™ dans une page web, celle proposée ici en est une, à mon très humble avis, des plus simple et des moins intrusive. Il conviendra de vous documenter plus avant sur Flash™ et les moyens de mettre vos contenus «flashés» à jour lors des modifications sur le contenu classique, mais, avant de céder à la tentation, d'utiliser au maximum les possibilités des CSS et de javascript. Et si Flash™ se révèle incontournable dans votre projet, gardez à l'esprit qu'au moins votre animation sera intrusive, au plus les visiteurs l'apprécieront.
