JFLAD Blog: Recherche & développement: Ajax, Javascript, CSS, XHTML, Flash, Référencement, Webmarketing, Open Source, gestion de projet - Web 2.0

Utilisation des tips avec mootools

julien lavault — Wed, 04 Jun 2008 08:25:00 +0000

Moolools permet de faire des infos bulles très sympa sous le nom de 'tips'. Son utilisation est très simple et permet d'ajouter des effets de transition sur l'apparition et la disparition des tips. L'exemple du site mootools est déjà très bien détaillé, je le complèterai en vous expliquant comment enrichir les effets sur vos tips.

/* Ma Tips */

var Tips2 = new Tips($$('.classTips'), {
   // On initilalise l'effet que l'on souhaite mettre en place (par defaut un effet en alpha d'apparition)
   initialize:function(){ this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0); },
   // Gestionnaire d'événement lancé à l'apparition de la Tips
   onShow: function(toolTip) { this.fx.start(1); },
   // Gestionnaire d'évènement lancé à la disparition de la Tips
   onHide: function(toolTip) { this.fx.start(0); }
});

Vous pouvez ainsi facilement rajouter des effet visuel sur l'apparition et la disparition de vos tips, comme un effet de grossissement elastique avec un changement de couleur de fond et de police. En référence pour créer cet effet visuel, le précédent article Enrichir vos formulaire avec FxStyles de mootools.

// On initialise l'objet Fx.Styles
            initialize:function(){ this.fx = new Fx.Styles(this.toolTip, {
               duration:500,
               wait:false,
               transition: Fx.Transitions.Back.easeOut
           });

          // On attache le gestionnaire 'onShow
            onShow: function(toolTip) { this.start({
                   'width': 400,
                   'color': #CCCCCC,
                   'background-color': #CCCCCC
                });
           });

            // On attache le gestionnaire d'évènement 'blur'
            onHide: function(toolTip) { this.start({
                   'width': 250,
                   'color': #FFFFFF,
                   'background-color': #FFFFFF
                });
           });

De nombreuses combinaisons sont possible, a vous de les imaginer!

Focus sur les Web 2.0

julien lavault — Sat, 11 Nov 2006 10:26:00 +0000

On parle beaucoup du Web 2.0, beaucoup d'amalgames sont faits sur ce sujet. Différents avis sur le Web 2.0 s’opposent : l’arrivée de nouvelles technologies (Ajax, RSS, XHTML…), la standardisation des normes, le partage de connaissances, la personnalisation des services Web par l’internaute, la syndication des contenus… Ces différents points de vues on tous une part de véracité, néanmoins il me semble que beaucoup de ces nouvelles technologies sont loin d’être novatrices; en effet les Flux RSS ou encore l’Ajax existent depuis plus de 5ans, ce n’est que leur utilisation qui explose réellement en ce moment.

Certes le Web évolue, mais pas aussi vite qu’on semble le dire, il existe un réel temps d’adaptation et d’absorption des nouvelles technologies qui évoluent plus vite que les mentalités . Mais quelques grosse enseignes, que je ne citerai pas …, arrivent à tirer profit de ces nouvelles technologies et à faire gonfler leurs chiffres d’affaires... Beaucoup de personnes parlent de Ajax comme le Web 2.0, la révolution de l’Internet ! Je ne comprends absolument pas ce point de vue car Ajax n’est en aucun point une révolution, car d‘une par Ajax n’est pas nouveau et d’autre part la méthode Ajax (transfert asynchrone de données sans rechargement de page) est déjà très répandu à travers Flash et d’autres technologies coté client !

Pour revenir au sujet, je dirais pour conclure que le Web 2.0 est avant tout une méthodologie qui repose sur l’implication, la participation de l’internaute à la vie communautaire d’un site Internet. L’internaute devient acteur et non plus un simple visiteur, voici pour moi la vrai définition du Web 2.0. L’émergence de nouvelles technologies n’est qu’une conséquence de l’évolution des mentalités vers ce nouveau principe et non pas l’inverse !

Donnez vos réactions, vos avis m’intéressent !