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 :

1. Les CSS ne peuvent créer les mêmes effets esthétiques souhaités
2. Le javascript, lui non plus, ne peut aider à atteindre ces objectifs esthétiques
3. 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

Articles apparentés

• Internet Explorer™ 8 : enfin un produit Microsoft™ qui respecte les standards
• Forcer l'évaluation du code dans un contexte global en javascript

Jusqu'ici, Internet Explorer™ était un cauchemar pour l'intégration : chaque version ayant ses propres bugs, et ayant pas moins de 3 versions boguées sur le marché, chaque design devait être repensé pour chaque version... autant au niveau design (css) que code (javascript, DOM).

La question qui se pose maintenant est : «est-ce que Internet Explorer™ 8 est toujours Le Mal ?» et ma réponse est «oui, toujours !»

Pourquoi Internet Explorer™ est toujours Le Mal ?

Outre le fait que, par défaut, des informations personnelles sont envoyées à Microsoft™ ("programme d'amélioration des logiciels" et "système proposant des pages en rapport avec les pages que vous visitez, en fonction de l'historique", système "anti-phishing"), Internet Explorer™ garde une rétro-compatibilité avec ses anciennes versions et autorise toujours l'exécution de programmes ActiveX... mais surtout : il permet à certains de dire qu'il n'est plus besoin de se tourner vers des alternatives comme Firefox™, ou Opera™, car Internet Explorer™ fait désormais aussi bien.

Quoi de neuf sur IE ?

Les standards sont respectés, et l'affichage des sites est du même niveau que Firefox™, Opera™ ou Safari™ et même javascript et le DOM sont "touchés" par ces améliorations ! il n'est plus vraiment besoin d'agir différemment avec cette version d'IE et les autres navigateurs !

Contrepartie de ces améliorations : si vous utilisiez des insertions conditionnelles &lt;!-- [if IE] > il vous faudra les transformer la plus part du temps en &lt;!-- [if lt IE 8]> ou &lt;!-- [if lte IE 7]> car si non vos hacks ne seront plus valides...

Dans le détail

Cette partie s'enrichira potentiellement au fil du temps. Travaillant exclusivement sous GNU/Linux, je n'emploie IE que dans une machine virtuelle et ponctuellement pour déboguer des scripts et des règles CSS pour IE... les "découvertes" sont donc irrégulière par usage.

Standards (HTML-CSS)

On se croirait dans un navigateur "normal" : le rendu est correct, sans optimisation spécifique, un site web utilisant (X)HTMl et CSS apparaîtra de la même manière que sous Firefox™, Opera™ ou Safari™.

Javascript et DOM

Là aussi, rien à signaler de spécifique : IE se comporte enfin normalement et le DOM semble correct : plus besoin de détecter IE et de s'adapter à ses spécificités !

Support du PNG

Autrefois, on devait soit ne pas utiliser de PNG transparents soit les utiliser uniquement dans des balises <img> afin de leur appliquer, via javascript, un filtre DirectX™ pour leur ajouter une couche alpha non bugguée : terminé avec cette version! Les PNG transparents sont gérés correctement et n'apparaissent plus, en l'absence de patch, avec un fond beige du plus mauvais effet.

Vie privée - caractère intrusif

Lors de l'installation, l'utilisateur est invité à participer au "programme d'amélioration des logiciels" (case cochée par défaut, noyée parmis d'autres infos). Il est aussi invité à ne pas désactiver une fonction permettant à IE de proposer des pages en rapport avec celle qu'on est en train de lire. Enfin, le système anti-phishing, qui compare l'adresse du site que vous êtes en train de visualiser avec une liste de site connus pour être des sites de phishing hébergée par Microsoft™.

Sans vouloir dire que, forcément, Microsoft™ utilise les données recuieuillies à des fins douteuses, étant donné que chez Microsoft™ tout est opaque, breveté, secret, verrouillé... je me pose certaines questions sur la finalité : le MSN™ Live™ Messenger™ n'affiche-t-il pas déjà des publicités, parfois en rapport avec le message personnel de l'utilisateur ou ses conversations ? et cela sans qu'on puisse refuser de voir ces publicités ni connaître, exactement, les informations envoyées aux annonceurs ?

Autre intrusion dans l'utilisation courante : lors de la visite de certains sites, qui ne proposent aucun contenu Flash™, IE propose d'installer le plugin Flash™ prétextant que le site «souhaite» exécuter du Flash™... bizarre et plutôt curieux, surtout si on pense que Microsoft™ tente de prendre des parts de marché à Flash™ avec son produit équivalent Silverlight™.

Par ailleurs, IE intègre un outil permettant de bloquer la divulgation de données à d'autres sites que celui visité via l'inclusion de contenus externes (comme les trackers de visites à la Xiti™ ou Google™ Analytics™)

Développement - déboguage

IE intègre désormais un outil, autrefois externe, se voulant l'équivalent de la «Webdevelopper toolbar» disponible en plugin pour Firefox™. Gâce à son mode de retro-compatibilité, on peut déboguer des scripts et CSS pour IE8, IE7 et en «quirks mode». Bien que fournie en fonctionalités, il va falloir travailler encore pour arriver au niveau de la «Webdevelopper toolbar» en ce qui concerne le coté pratique.

Articles apparentés

• Flash™ non intrusif
• Forcer l'évaluation du code dans un contexte global en javascript

Par exemple, lors de l'utilisation d'une objet XMLHTTPRequest avec Prototype, comme suit :

var mavairable = 1;
function ajax() {
	new Ajax.Request('moncgi.php',{
		method: 'get',
		onSuccess: function (t) {
			var scripts = t.responseText.extractScripts();
			var r = scripts.map(function(script) {
				return eval(script);
			});
		},
		onException: function (xhr,e) {
			alert('Une erreur est survenue...\n'+e.toQueryString);
		}
	});
}

si la réponse du cgi est un script du type :

mavariable = 10;

la valeur de la variable mavariable restera à 1...

Pour faire en sorte qu'eval puisse "toucher" aux variables du contexte global, il "suffit" d'employer l'une ou l'autre des méthodes suivantes :

1. utiliser l'objet window

window.eval(script)

En faisant celà, le code est rattaché au contexte de l'object window… et c'est justement dans ce contexte que s'exécutent tous les autres.

2. utiliser un objet global

var global = this; // à placer dans le contexte global
 
global.eval(script); // à placer dans le contexte du XHR par exemple

Même chose que précédemment l'object ainsi créé est une instance de l'objet "window" (le this).
Voilà !

Articles apparentés

• Flash™ non intrusif
• Internet Explorer™ 8 : enfin un produit Microsoft™ qui respecte les standards