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

Google lance son navigateur Web

julien lavault — Tue, 02 Sep 2008 12:34:00 +0000

C'est officiel, Google à confirmé le lancement aujourd'hui, de la version bêta de son propre navigateur web open source: Google Chrome. Vous vous demandez quels sont les avantages de Google Chrome ? Voici quelques caractéristiques qui mériterons d'être testées:

Interface du navigateur très simple et dépouillé,
Navigateur très propre et rapide,
Amélioration de la vitesse et des temps de réponse,
Moteur javascript plus puissant: V8,
Etc...

Google pense apporter une valeur ajoutée aux utilisateurs et participer au développement de l'innovation sur le Web. Ses concurrents directement, je cite Mozilla et Microsoft Internet Explorer, qui dominent le marché, risque de se voir grignoter des parts de marché !
Seul petit bémol, le navigateur en version bêta ne sera disponible que pour windows ! Les utilisateurs de Mac OS et Linux devront est patient.

J'attends vos avis sur cette solution !

Google Ad Manager la solution idéal pour gérer ses campagnes e-pub

julien lavault — Fri, 29 Aug 2008 13:28:00 +0000

Google a encore élargi son offre avec l'arrivée de Google Ad Manager, un outil en ligne de gestion de bannière. Encore en version bêta, l'outil permet aux éditeurs de gérer leur inventaire publicitaire et les commandes. Bien entendu, google en a profité pour proposer son programme adSense dans les cas d'espace invendu. Avantageux pour tout le monde non ? Enfin surtout pour google, car cela simplifie fortement l'affichage de pub google sur son site, vue que cela est fait automatique en absence de pub !

Les fonctionnalités intéressantes à mes yeux sont:

La partie rapport très complète et particulièrement les Ventes réalisées par le commercial et les Ventes de l'annonceur,
La gestion des espaces publicitaire très complète et très simple d'utilisation (je pense notamment à openX très complexe),
La gestion des commandes avec la possibilité d'importer directement des fichiers de commande dans l'outil,
L'ergonomie intuitive,
Le didacticiel qui permet de prendre l'outil en main très rapidement.

Pour ma part, je trouve que cet outil est une vraie réussite à tous les niveaux. Reste plus qu'à le tester dans la durée pour réellement juger de sa performance. Ses concurrents directs comme OpenX, Microsoft Atlas ou Smart Adserver vont devoir s'accrocher pour réussir à concurencer la machine google !

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 !

Effet de survol sur vos éléments avec mootools

julien lavault — Mon, 16 Jun 2008 10:15:00 +0000

Pour enrichir vos sites internet, il peut être sympa d'ajouter des effets de survol progressif à vos liens, boutons, images, illustrations... Pour cela, mootools est parfaitement adapter et permet très facilement d'ajouter un gestionnaire d'évènement sur certains éléments !

Prenons l'exemple d'un effet de changement de couleur progressif de la couleur d'un texte d'un lien au survol de celui ci:

var fx = new Fx.Styles($('idElement'), {duration:200, wait:false});

$('idElement').addEvent('mouseenter', function(){
fx.start({
'background-color': '#666'
});
});

$('idElement').addEvent('mouseleave', function(){
fx.start({
'background-color': '#333'
});
});

Voila, l'exemple est assez simple, il ne reste plus qu'a paramétrer le Fx.Styles et le tour est joué !

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!

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
               });
           });
       });
   });

Création de fichier RTF avec PHPRTF

julien lavault — Sun, 21 Oct 2007 21:11:00 +0000

Suite à une problématique rencontré sur un projet qui était la nécessité de créer des fichiers au format RTF à la volé, j'ai effectué un travail de veille pour trouver les solutions qui existaient à l'heure actuelle.
Pour information, le Rich Text Format (« format de texte enrichi »), ou RTF, est un format de fichier développé par la société Microsoft. Ce format descriptif non compressé est reconnu par la plupart des logiciels de traitement de texte. Sa vocation initiale est d'être un format pivot entre logiciels et plates-formes hétérogènes (source wikipedia).

Je suis tout d'abord tombé sur une solution payante RTF Generator, solution très performant, mais il faillait un solution opensource pour développer l'application!
La deuxième solution que j'ai trouvé s'appelle RTF2PHP, une solution gratuite (licence GNU-GPL) mais en version bêta +++ et totalement à l'abandon depuis près de 5 ans!
Après quelques tests peu concluants, je suis tombé par hasard sur une autre librairie, qui répondait, cette fois ci, à toutes les prérogatives imposées. Son nom PHPRTF, originale non ?!
Présentation de PHPRTF: l'origine du projet est assez flou, son auteur est Denis Slaveckij, projet créer en 2007, le code source est clair et très bien construit, il y a eu un réel réflexion dans son élaboration, sa se ressent ! La librairie PHPRTF permet de faire les toutes les mises en forme imaginables, styles de paragraphe, styles de police, styles de caractère, tableaux, images, et même de créer des styles personnalisés ! Jetez un coup d'oeil sur les samples pour voir les possibilités offerte par la librairie PHPRTF, vraiment un très bon outils pour créer vos fichier au format RTF !

Présentation Ext JS - Encore un framework Javascript

julien lavault — Wed, 17 Oct 2007 16:37:00 +0000

Yoann ma fait découvrir un superbe framework Javascript, plus puissant et impressionnant que tous ceux que je connaissais déjà, son nom : Ext JS. Le but de ce framework est de déployer une application riche RIA avec la technologie Javascript rapidement et très simplement.
De grand nom l'utilise déjà comme Adobe, IBM, Dow Jones & Co, Siemens, Sony Online Entertainment, ect...
Le mois de septembre à vue l'arrivée de la version 2.0 avec de nouvelles fonctionnalités présentées dans les démos en ligne sur la page d'accueil de Ext JS. Les exemples sont vraiment très impressionnant. Ce qui ma le plus bluffé est la simplicité des scripts, la clarté et la légèreté des objets de la librairie et sa facilité d'utilisation!

La démonstration la plus impressionnante est l'espace de travail et l'espace de travail type RIA.

Le centre de ressources de Ext JS est très complet, vous trouverez les explications, exemples d'utilisation complet et surtout compréhensible, ce qui est souvent le gros défaut de ce genre de projet ! Autrement, le centre de développement de Ext JS est également très bien pensé, d'ailleurs il utilise de nombreuses fonctionnalités de la librairie, un autre belle exemple d'utilisation !
En résumé, une librairie à découvrir absolument ! Je testerai plus en détail ce framework et je posterai des tutoriels pour présenter certaines fonctionnalités!

Programmation Objet en Javascript

julien lavault — Mon, 03 Sep 2007 16:41:00 +0000

Ce tutoriel vous présente la syntaxe de la programmation Objet en Javascript. Pour la petite histoire, le Javascript était le précurseur des langages orienté Objet pour le Web. Décliner en Action Script pour Flash ou il a connu un très grand succès, il a perdu progressivement de sa notoriété au fil des années, mais heureusement avec le Buzz du Web 2.0 et Ajax, ce langage bénéficie d'une seconde vie !

Voici un exemple qui vous montre comme créer vos propres objet en Javascript et les instancier:

            // Object JS
           var monObjet = {

               // Paramètre
               param1: {"x": 0, "y": 0},    // On constate qu'un variable de paramètre peut aussi être un objet
               param2: 2,
               param3: 333,

               // Méthode
               maMethode1 : function (var1, var2) {
                   this['param1'].x = var1;   // On pointe sur le paramètre objet avec des crochets comme dans Flash!
                   this.param2 = var2;         // Poitage classique sur un paramètre
                    alert('Var1: '+var2);
               },

               maMethode2 : function() {
                   var var2 = this['param1'].x;
                    alert('Var2: '+var2);
               },

               maMethode3 : function() {
                   var var3 = this['param3'];
                    alert('Var3: '+var3);
               }

           }

           // Pour instancier un objet 'monObjet' et lui appliquer des méthode
           monObjet.maMethode1(100,200);
           monObjet.maMethode2();
            monObjet.maMethode3();

Comme vous pouvez le constater, ce n'est pas très compliquer, mais il y a beaucoup de mauvaise utilisation du Javascript qui porte souvent à confusion. Mais cet exemple illustre la véritable syntaxe orienté objet du Javascript, couplé avec Mootools, vous allez vraiment avoir un grande liberté d'action un fois ce principe maitrisé !

Faire une requête en Ajax avec Mootools

julien lavault — Tue, 28 Aug 2007 16:58:00 +0000

Ce tutoriel vous montre comment faire des requêtes en Ajax avec la librairie Javascript Mootols, c'est à dire comment afficher des données provenant d'une base de données en fonction d'une requête SQL sans rechargement de la page et en apportant une touche d'interactivité. Cette application Ajax se greffera sur un site traditionnel, car comme je l'ai déjà expliqué dans un précédent billet, une application Ajax se greffe sur un site déjà existant afin de bénéficier de son référencement et d'une structure stable dans le cas où le client a désactivé le Javascript de son navigateur.

Avant de commencer, il est important de comprendre deux choses qui sont essentielles dans le développement d'un application Ajax: les conteneurs et les gestionnaires d'évènements (je parle aux non initiés !!!).

Les conteneurs

Les conteneurs vont vous permettre de délimiter les zones d'affichage des données, ce sont des 'div' que l'on identifie grâce à leur 'id'. Il est important de bien les nommer afin de pourvoir les retrouver facilement !

Les gestionnaires d'évènements

Les gestionnaires d'évènements vont vous permettre de récupérer les évènements de la page suivant les actions de l'utilisateur. Exemple: quand l'utilisateur 'click' sur un bouton, quand les données sont chargées avec succès 'onSucces' ...
Mootools dispose de puissants gestionnaires d'évènements qui vont vous permettre de contrôler l'ensemble des actions de l'utilisateur et des différents états de la page.

Dans un premier temps il faut développer le site normalement pour qu'il fonctionne en totale indépendance du Javascript et pour être référencé sous Google. Conservez vos méthodes et outils traditionnels pour concevoir votre site, il faut juste bien définir le nom des 'id' des éléments qui seront utilisés par nos scripts Ajax, par exemple le conteneur qui affiche les données, le menu qui déclenche les requêtes Ajax, etc...
Une fois le site construit, nous allons développer notre applications Ajax, pour se faire nous aurons besoin de:

Notre page XHTML avec un menu en liste,
La librairie Javascript Mootools à inclure dans l'entête de la page,
Un fichier Javascript qui exécute la requête Ajax,
Un fichier PHP qui traite la requête et retourne les données à afficher.

Comme le développement de l'application Ajax est indépendant de votre site, elle peut être déployée sur un site déjà existant sans nécessité de modification sur la structure du site! Il vous faudra alors uniquement inclure vos librairies Javascript et Mootools et créer vos fichiers PHP qui effectueront vos traitements coté serveur.

Débutons désormais le développement de l'application Ajax, tout d'abord il faut inclure dans l'entête la librairie Mootools que vous pouvez télécharger sur le site de Mootools.net, et le script Javascript que nous allons développer. Le principe de base est de déclencher la requête Ajax lorsque l'on 'click' sur un lien du menu. Voici le code XHTML de notre page, comme vous pouvez le constater, il n'y a aucun script ou gestionnaire d'évènements dans notre document XHTML, juste des balises! Tout le contrôle des évènements va se faire depuis notre script Javascript !

<ul id="myElement">
<li><a href="http://blog.jflad.com/post/test/voila1/">Test1</a></li>
<li><a href="http://blog.jflad.com/post/test/voila2/">Test2</a></li>
<li><a href="http://blog.jflad.com/post/test/voila3/">Test3</a></li>
<li><a href="http://blog.jflad.com/post/test/voila4/">Test4</a></li>
<li><a href="http://blog.jflad.com/post/test/voila5/">Test5</a></li>
<li><a href="http://blog.jflad.com/post/test/voila6/">Test6</a></li>
</ul>

Maintenant, nous allons récupérer l'évènement 'click' avant de déclencher notre requête Ajax, et bloquer le pointage naturel du lien vers la page correspondante avec Event(E).stop().

// On applique le gestionnaire d'évènement à tous les liens du menu liste
var list = $$('ul#myElement li a');
list.each(function(element) {
    // Gestionnaire d'évènement 'click'
    element.addEvent('click', function(e){

        // On stoppe le pointage naturel du lien pour ne pas recharger la page
        e = new Event(e).stop();

       // Ici notre requête Ajax décrite plus bas
   });
});

Un fois que l'on a récupéré l'évènement 'click', il est temps de déclencher notre requête en Ajax! Pour ce faire nous allons créer un objet 'Ajax' de Mootools avec comme paramètre l'url du fichier PHP qui va traiter notre requête, la méthode de transfert (post ou get), l'encodage des données (uft-8, iso ...), le cadre du conteneur dans lequel vont être affichées les données transférées (update) qui doit être renseigné par le nom de l'id du conteneur. Et enfin, un gestionnaire d'évènements 'onComplete' qui prend en paramètre une fonction, cela permet par exemple de mettre un effet d'apparition sur le conteneur qui affiche les données. Dans un deuxième temps il faut paramètrer la requête Ajax grâce à la méthode 'request' avec les variable à envoyer au fichier PHP de traitement. Voici le code Javascript de la requête Ajax:

            // Requête ajax
            var url = 'ajax.php';

            var ajaxRequest = new Ajax(url, {

                method: 'post',
                encoding: 'uft-8',
                onComplete: showSucces(),
                update: log

            });

            var requestVar = {
                var1: 'voila la variable numéro1',
                var2: 'voila la variable numéro1',
                var3: 'voila la variavle numéro1',
                var4: 'voila la variable numéro1',
                var5: 'Tutoriel par JFLAD'
            };

            ajaxRequest.request(requestVar);

Il faut maintenant traiter la requête Ajax avec un fichier PHP qui va retourner le contenu à afficher:

<?php

    // On récupère les données
    $var1 = $_POST['var1'];
    ...

    // Traitement des données
// Içi vous effectuez vos requêtes SQL et traitement divers

   // On retourne le contenu a affiché
   if(isset($_POST['var1']))

   {

        print '<p>Votre contenu à afficher...</p>';

   }

?>

Le traitement en PHP doit être développé comme à l'habitude, à la différence près que vous allez envoyer votre contenu à afficher à votre page XHTML plutôt que de l'afficher directement. Néanmoins je vous conseille de sécuriser vos fichiers PHP de traitement avec par exemple une session de tests surtout lorsqu'il exécute des requêtes insert/delete dans vos bases de données afin d'éviter des injections SQL!

Dans un prochain tutoriel, je vous montrerai comment apporter une touche d'interactivité à vos évènements grâce à Mootools et l'utilisation de sa class Fx !

Le validator W3C utilise Mootools

julien lavault — Wed, 15 Aug 2007 20:09:00 +0000

Mootools n'en finit plus de convaincre, je viens en effet de me rendre compte que le nouveau site du validator W3C utilise la librairie Javascript Mootools, encore un exemple de plus qui illustre les performances des ce framework !

Les plugins Mootools indispensable

julien lavault — Wed, 15 Aug 2007 17:25:00 +0000

La communauté de Mootools se développe à vive allure et l'on voit déjà émerger de nombreuses extensions et plugins bien pratiques. J'ai essayé de faire un concentré des meilleurs scripts que j'ai trouvé. Voici une sélection des meilleurs liens dans différents domaines d'utilisation:

Slimbox : Galerie d'image comme LightBox mais beaucoup plus léger que lightBox pour le même résultat.
Slimbox_ex: Extension de Slimbox pour ouvrir une page dans un Iframe.
Moodalbox: Extension de Slimbox pour ouvrir un formulaire en Ajax.
Slideshow: Galerie d'image en Ajax très sympa et totalement paramétrable.
Mootable: Création d'un tableau en Ajax avec tri sur les elements et affichage multiple.
SortableTable: Même principe que Mootable mois complet mais mieux fini.
Fisheye: Création d'un menu 'dock'.
Phatfusion: Pour faire des cadres arrondies sans image de background comme Niffty.
MooTabs: Menu à onglet original et interactif.
FormValidation: Validation de formulaire en Ajax.
DraggableTree: Arbre de navigation éditable en glisser déposer.
DatePicker V2: Insertion d'une date vie un calendrier, interactif et totalement modulable.

Mootools et DomReady

julien lavault — Mon, 13 Aug 2007 12:51:00 +0000

La librairie Mootools possède un gestionnaire d'évènement DomReady très puissant qui détecte avec précision le moment ou le DOM est opérationnel à la différence des framework concurrent ! Cela peut paraitre inutile à certain vu l'existence du gestionnaire d'évènement 'onload'. Néanmoins, ce gestionnaire est beaucoup plus puissant, et permet de tester non pas si tout les éléments constitutif d'une page Internet sont chargés (documents hypertexte, feuille de style, images ...) ce qui est effectué par le gestionnaire 'onload' mais de vérifier que le Dom est prêt !

Utilisation du gestionnaire:

window.addEvent('domready', function(){
alert('the dom is ready');
});

Nouveau blog JFLAD

julien lavault — Sat, 11 Aug 2007 12:31:00 +0000

Nous sommes heureux de vous présentez le nouveau blog de l'agence JFLAD! Sa vocation première s'orientera dorénavant vers l'exposition des travaux de R&D de l'agence, avec comme centre d'intérêt les nouvelles technologies de l'Internet et notamment le Web 2.0 et Ajax!

A noté que les Flux RSS ont également changer d'adresse, cliquez içi pour vous ré-abonnez.

Ce blog sera compléter d'un centre de ressource public qui devra voir le jour d'içi la fin de l'année.

Utilisation du Flash Player à discuter

julien lavault — Sat, 11 Aug 2007 11:27:00 +0000

Avec l'arrivée des nouveaux venu en plus de Flash, je pense à Flex et ses dérivés; l'utilisation du Flash Player semble relancé grâce à l'amélioration du player et des outils de travail. J'ai toujours suivi de très prêt l'évolution de ces outils afin de me mètre à jour et pouvoir déployer des solutions de pointe sur ces derniers langage.

Hors l'une de mes dernières réalisations témoigne d'un problème majeur dans l'utilisation de Flash Player dans les navigateurs des clients et notamment du player9.
En effet, j'ai pu constater que les chiffres annoncés de 83,4% pour le player9 (source blog google) était pour le moins exagéré ! Certes il faut prendre en conte la cible touché et la géo-localisation, mais le retour d'expérience pour le secteur public présent un pourcentage d'installation bien inférieur à 50% pour la Flash Player 9! On me répondra qu'il suffit d'installer le Flash Player chez Macromedia et le tour est joué ! Mais cela n'est pas si simple, car dans les grandes structures, les systèmes d'exploitation sont bien souvent bridé au maximum pour raison de sécurité ! Cela est vrai pour le secteur public, mais on retrouvera le même problème dans les entreprises de grande envergure !

A partir de cette constatation, on peut faire le choix de la qualité de l'application au détriment de certains utilisateurs, soit on ce consacre à rendre l'application accessible à tout le monde.

Même si ces nouvelles technologies sont vraiment novatrice et performante, nous sommes encore dans un pays qui ne permet pas de déployés ces solutions Web récentes (Actionscript 3, Flash CS3, Flex ...) à cause d'un manque cruel de mise à jour des plateformes ! Il devient donc intéressant de ce tourner vers des technologies alternatives, qui ont peut être des possibilités plus limités, mais si elles sont déployées correctement, elles permettent déjà de faire des application riches et interactive. Je pense bien évidement aux technologies XHTML/CSS couplé au Javascript sous la dénomination d'Ajax.

Je suis impatient de voir l'évolution de ces technologies tant au niveau de leurs utilisation professionnel que par les utilisateurs...

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.

PHPcollab, le top des groupeWares pour projet web

julien lavault — Tue, 07 Aug 2007 18:34:00 +0000

PHPcollab est l'un des GroupWare open source les plus pratique pour la gestion de projet Web. Il regroupe toutes les fonctionnalités indispensable au managemanent de projet tout en s'évitant les gadgets innutile. Très bien codé, un développeur non confirmé peut très aisément le modifié et le personnaliser. Simple, efficace et même ergonomique; il facilite enormément la mise en place d'un procecuss applicatif de gestion de projet au sein d'une entreprise. De la gestion des projets et des taches à l'interface avec le client jusqu'a la facturation, il permet de tout gérer. De plus sa prise en main et sa configuration sont très rapide.

Voici les différents modules présents:

Accueil:

Tableau de bord global qui permet l'accès à l'ensemble des modules du logiciel.

Projets:

Listing des différents projets, c'est le coeur du logiciel. On y retrouve la gestion des tâches, des fichiers, discusions, équipes, signets et les notes. La gestion des tâches est très bien exploité avec un diagramme de Gantt et un répartition suivant les dates de fin de tâches, l'importance des tâches et leurs évolutions en pourcentage. Tout les éléments constitutif de la rubrique projet sont publiable sur le site client, c'est un gros avantage comparé à ses principaux concurents!

Clients:

Création des listings clients pour être utilisé dans les autres modules en compléments d'information et paramétrage.

Rapports

Il permette de faire des exports de données précises, en choisissant différents paramètres tel-que client, projet, assignation, date de début, date de fin, état et priorités.

Recherche:

Pour faire de recherches ciblées dans une rubrique précise.

Calendrier:

Le calendrier reprends l'ensemble des tâches dans les quelles l'utilisateurs fait partie de l'équipe de réalisation. Possibilité de mettre des notes et des alertes.

Actualités:

Permet de mettre à jours des actualités qui peuvent être consultées depuis un flux RSS.

Signets:

Gestion de signet intérne et avec le client.

Admin:

Gestion des administrateurs du GroupeWare et du site client.

PHPcollab bénéficie d'un interface client/projet simple à modifier et totalement paramétrable ! Il suffit de publier les éléments de phpcolab (fichiers, tâches, discusion ...) que l'on souhaite rendre public pour le client; ainsi il est très facile de faire apparaitre sur le site client un plannings avec le tâches importantes. De plus il est possible de paramétrer des demandes de validation directement depuis l'interface de gestion de fichiers, ce qui facilite amplement les étapes de validation avec le client.

Pour information, phpcollab a été élue en 2004 meilleur GroupWare opensource par l'agence de conseil en management AVANE qui a publié gratuitement un comparatif des principaux GroupWare opensource existants sur le marché à ce jour.

Mootools confirme ses bonnes performance

julien lavault — Mon, 25 Jun 2007 15:34:00 +0000

Mootools, la librairie Javacript Web 2.0, confirme ses très bonnes performances.

En effet, l'application slickspeed permet de tester les librairies Javascript bien connues: prototype, jQuery 1.1.2, MooTools 1.2, ext1.1b1, cssQuery 2.02 et dojo query. Les tests permettent de tester la vitesse d'exécution et la validités des scripts. Les résultats obtenus sont très favorable à Mootools, ce qui confirme le sérieux et la qualité de cette librairie.

Dans un prochain billet, un exemple d'utilisation avec Ajax.

Mootools, LA librairie Web 2.0

julien lavault — Mon, 18 Jun 2007 21:18:00 +0000

Mootools est une librairie Javascript comme je les aime… Elle repose sur le framework de scriptaculus, dont j’avais déjà fait l’éloge sur le blog il y a quelques mois. De plus, on retrouve également les fonctions de Penner qui sont à l’origine des effets de déplacement élastique dans Flash et maintenant en Javascript. Le plus de cette librairie est d’être mieux structuré, optimisé et plus légère. L'ensemble des fonctions graphique 'FX' est particulièrement sympathique et très simple d'utilisation.

Elle présente un vaste éventail de possibilités :

Transfert de données en Ajax
Transfert de données en Ajax avec Json
Effet graphique divers avec l'interface MX combiné avec la suite de Penner
Une gestion des éléments de la page simplifié, par exemple: $('nomId') = document.getElementById('monId')
Légèreté de fonctionnement vraiment étonnante

Je vais m’arrête la car il y a vraiment trop de fonctionnalité disponible et je vous invite à les tester par vous-même sur la démos en ligne.

Ajaxload préchargement en AJAX

julien lavault — Fri, 09 Feb 2007 10:11:00 +0000

Pour faire des pré-chargements en Ajax à la sauce Web 2.0. La méthode est très simple, faire une barre de progression en gif animé! Le site ajaxload propose un générateur de divers gif de pré-chargement bien pratique. A vous de créer !