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

Sortie officielle de la nouvelle version du framework javascript mootools en version 1.2

julien lavault — Tue, 17 Jun 2008 13:06:00 +0000

Courant de semaine dernière, mootools a sortie le nouvelle version de son framework javascript en version 1.2 ! Beaucoup de nouveautés sont au rendez-vous, c'est véritablement l'ensemble du framework qui a été re-codé !

Je n'ai pas encore eu le temps de tester, mais j'ai pu constater que le framework a été totalement repensé, avec une nouvelle architecture:

Mootools à bien évidement pensés à la compatibilité des versions, ainsi les anciennes version de mootools seront compatible avec le nouveau framework 1.2.

Petite parenthèse pour le nouveau site internet mootools qui a accompagné la sortie de ce nouveau framework, je le retrouve vraiment moins agréable que l'ancienne version à tous les niveaux: ergonomie, design, interactivité... Vraiment dommage que le site est perdu sa petite touche mootools que tout le monde appréciait !

Il reste à voir si cette nouvelle version va être suivis, donnez moi votre avis !

Enrichir vos formulaires avec Fx.Styles de Mootools

julien lavault — Sun, 27 Apr 2008 18:53:00 +0000

Rajouter un peu d'interactivité est très abordable avec Mootools et son objet Fx.Styles. Quelques lignes peuvent permettre de rajouter un effet progressif de changement de couleur, ainsi qu'un léger effet élastique d'agrandissement sur les champs du formulaire.

Pour effectuer cette opération, il faut découper notre développement en trois étapes:

Déclaration et initialisation des variables,
Initialisation de l'objet Fx.Styles,
On attribue les gestionnaires d'évènement,

Présentation du code source:

window.addEvent('domready', function(){
       ////////////////////////////////////////////////////
       // On déclare les variables
       var type = 'text';
       var duree = 2000;
       var widthIn = '200px';
       var widthOut = '150px';
       var colorIn = '#333333';
       var colorOut = '#CCCCCC';
       var bgIn = '#CCCCCC';
       var bgOut = '#1E1E1E';

        //////////////////////////////////////
        // On boucle sur tout les éléments du formulaire
       var input = $$('#formulaire '+type);
       input.each(function(element) {

           // On initialise l'objet Fx.Styles
           var fxInput = new Fx.Styles(element, {
               duration:duree,
               wait:false,
               transition: Fx.Transitions.Back.easeOut
           });

          // On attache le gestionnaire d'évènement 'focus'
           $(element).addEvent('focus', function(e) {
               e = new Event(e).stop();
               alert('okai');
               fxInput.start({
                   'width': widthIn,
                   'color': colorIn,
                   'background-color': bgIn
               });
           });

            // On attache le gestionnaire d'évènement 'blur'
           $(element).addEvent('blur', function(e) {
               e = new Event(e).stop();
               fxInput.start({
                   'width': widthOut,
                   'color': colorOut,
                   'background-color': bgOut
               });
           });
       });
   });

Beaucoup d'amalgame dans le mot Ajax

julien lavault — Wed, 08 Aug 2007 17:45:00 +0000

A force de m'intéresser de très prêt à Ajax, je constate qu'il y énormément d'amalgame de fait à ce sujet! En effet, beaucoup pense que faire une requête en httpRequest au onclick d'un bouton constitue de l'Ajax. Hors la véritable utilisation de Ajax est véritablement ailleurs, la subtilité réside de faire un interface Web dont toute l'interactivité Javascript (dont les transferts asynchrone de donnée) sont Indépendante de l'application principale, c'est à dire que si le site le client ne possède pas Javascript, le site marche quand même normalement. Cela va plus loin, car cette méthode permet également de référencé les contenus des pages même si elles sont chargés de manière asynchrone!

Il faut que le document XHTML ne possède aucun script Javascript dans le body, mais juste l'appelle au librairie utilisées dans le header.

La technique est simple pour faire ceci, il faut utilisé les gestionnaires d'évènements ainsi que les sélecteurs d'éléments. Ainsi un site traditionnel pourra ce voir gréfer un ensemble évènementiel qui permettra de rendre un interface Web interactive. Le seul supplément sera de crée un fichier 'dataTransfert.php' qui transféra les templates de contenu. Autrement tout le reste sera simplement des librairie J avascript qui déclencheront des actions suivant un système évènementiel.

Voici un exemple de ce qu'il ne faut pas faire (gestionnaire d'évènement directement dans le document XHTML):

<p id="monBouton" onclick="maFoncitonJs();">Cliquez moi</p>

Voici le même exemple, mais correcte cette fois ci (fichier javascript inclus dans le header):

$'(monBouton').addEvent('click', function(){
// Contenu de ma fonction
});

Ce principe est la base, à partir de découle tout le reste, le Blog JFLAD vous présentera ultérieurement d'autres techniques pour faire des transferts asynchrone de données depuis une page traditionnelle en gardant une lisibilité dans les moteurs de recherche!

Je vous conseil fortement l'utilisation du framework Mootools dont j'ai déjà fait l'éloge dans de précédent billet, ce framework est vraiment sur-puissant, et possède toutes les fonctionnalités imaginable pour faire de l'Ajax et rendre une application Web riche version Web 2.0.

Scriptaculous la librairie javascript tendance

julien lavault — Wed, 07 Feb 2007 18:14:00 +0000

Un peu d'interactivité dans les pages Web statique à la sauce Web 2.0. Pour ce qui ne connaisse pas encore la librairie Javascript scriptaculous, cette librairie sert à manipulée vos objets (<balise>) du dom avec une interactivité hors du commun et à faire des applications en Ajax. Je l'utilise tellement ces derniers temps et c'est d'ailleurs devenu une des spécialités de JFLAD, il était donc naturel que je contribue à sa promotion. Ces scripts de qualités apportent une véritable valeur ajoutée à une page Web statique! Il permet également de facilité la gestion de donnée dans les back-offices, je pense notamment à la gestion simplifier du glisser déposé. Bref une multitudes d'outils à adapté suivant les besoins!
En plus du glissé déposé, il est également possible de faire des transfert de données en Ajax, des effets graphique sur les objets du Dom, des scroll-bars personnalisées...

Voici quelques exemples qui illustreront plus explicitement ma description:

Finalement l'interactivité ne rime par forcément avec Flash!!! Son utilisation est vraiment très simple et d'une très grande adaptabilité. J'espère que j'aurais contribué à faire de nouveau adeptes.

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

Sortie officielle de la nouvelle version du framework javascript mootools en version 1.2

Core

Native

Class

Element

Utilities

Fx

Request

Plugins

Enrichir vos formulaires avec Fx.Styles de Mootools

Présentation du code source:

Beaucoup d'amalgame dans le mot Ajax

Scriptaculous la librairie javascript tendance