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

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 !

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!

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 !

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.

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.

JSON l'avenir des transferts de données en AJAX

julien lavault — Fri, 09 Feb 2007 08:25:00 +0000

JSON (JavaScript Object Notation) est un format de structure de données générique qui utilise la notation des objects Javascript. Il peut être utilisé pour transmettre de l'information structurée du client au serveur dans des applications Ajax, c'est d'ailleur sa plus grosse utilisation à l'heure actuel. Il s'agit d'un format de fichier alternatif à XML.

Voilà un modèle de structure de donnée JSON:

{"menu": {
    "id": "file",
    "value": "File",
    "popup": {
        "menuitem": [
            {"value": "New", "onclick": "CreateNewDoc()"},
            {"value": "Open", "onclick": "OpenDoc()"},
            {"value": "Close", "onclick": "CloseDoc()"}
        ]
    }
}}

Coté serveur il vous faudra simplement encoder et décoder la chaine, je vous conseil d'utiliser la class Zend_Json du framework zend pour effectuer cette opération.

// Récupérer les valeurs
$phpNative = Zend_Json::decode($encodedValue);

// Encoder les valeurs
$json = Zend_Json::encode($phpNative);

Par ailleurs, il n'est plus nécessaire de faire appel à un parseur XML pour gérer les données, étant donné qu'elles sont directement prises en compte par Javascript via la fonction eval(). Les tests actuels montrent un gain significatif en vitesse de traitement pour Json.

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

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

Core

Native

Class

Element

Utilities

Fx

Request

Plugins

Présentation Ext JS - Encore un framework Javascript

Le validator W3C utilise Mootools

Beaucoup d'amalgame dans le mot Ajax

Mootools, LA librairie Web 2.0

JSON l'avenir des transferts de données en AJAX