Arnaud Georgin

Pour fêter dignement son 4ième anniversaire JQuery passe en version 1.4. Un site a d’ailleurs été développé pour l’évènement : http://jquery14.com/.

Au menu de cette nouvelle version on retrouve :

• des performances améliorées notamment pour les méthodes dites “populaires ” telles que .addClass(), .removeClass(), .css(), .append(), .html(), …
• la sérialisation des tableaux a la mode PHP pour les appels ajax
• détection automatique du content-type lors de retour d’un appel ajax (j’imagine que bon objet doit être instancié JSON, XML, text, ..)
• une nouvelle syntaxe : la “Quick Element Construction” pour ajouter des élements à une page (au passage je trouve cette nouvelle fonctionnalité énorme, nous y reviendrons plus loin dans cet article)
• le “multi-binding” d’évènement. Vous pouvez abonner un élément à plusieurs event (click, mousenter, …) en une seule ligne
• …

Je vous laisse découvrir la suite sur le site de JQuery mais ce n’est que du bon.

présentation de Quick Element Construction

C’est une nouvelle syntaxe qui permet en une seule instruction de créer et de qualifier complètement un élément du DOM (un div par exemple). Maintenant en une instruction vous pourrez :

• créer l’élément,
• rattacher l’élément à un parent,
• définir ses paramètres de style
• définir ses évènements et les callback associés

plus qu’un long discours un exemple est plus parlant :

Pour finir sur cette sortie de JQuery 1.4, voici mon avis personnel. Cette bibliothèque hausse encore son niveau que je trouve pour ma part excellent et offre encore plus de souplesse et de robustesse pour les développeurs web. Toutes les évolutions apportées par cette nouvelle version vont, à mon avis, dans la bonne direction en conservant la philosophie de base de JQuery : simplicité et rapidité.

C’est dans des jours comme aujourd’hui que je me dis quelle joie de faire du développement

developpement bibliothèque, framework, javascript, JQuery

“Je vous parle d’un temps que les moins de 20 ans ne peuvent pas connaitre…”. Et oui aujourd’hui, je fais appel à votre mémoire de joueur.

Souvenez vous lorsque vous maltraitiez la manette de votre console Nintende NES pour essayer d’arriver au bout de vos jeux favoris. C’était difficile voir impossible (en tout cas beaucoup plus que maintenant).

Heureusement votre voisin vous sauvait la mise en vous montrant une botte secrête qui se transmettait de joueur en joueur : le konami code.

Le konami code est un cheat code existant dans les jeux produits par Konami qui permettait d’activer des options secrètes (vie supplémentaires, personnage invincible, passage secret, …). Ce code a connu son heure de gloire dans les année 1980 avec des jeux comme Graduis (1986) ou bien encore Contrat (1988). On le retrouve aussi dans Metal Gear solid 2 sur PS2.

Pour activer le code, le joueur devait durant le jeu exécuter sur la manette la combinaison suivante :

Haut, Haut, Bas, Bas, Gauche, Droite, Gauche, Droite, B, A

De nos jour ce code est toujours “vivant” notamment sous forme d’easter eggs. Et que ne fut pas ma suprise ce matin d’apprendre que le code fonctionne sur le site de jquery.

Pour cela rendez-vous sur le site de jquery : http://jquery.com/ et appliquer le Konami code en exécutant la séquence présentée plus haut, vous aurez une belle surprise

Suite à cette découverte j’ai poussé un peu mes recherche et on apprend sur la page wikipédia du konami Code que le code fonctionne aussi sur facebook et google reader.

Enfin, il existe un site http://konamicodesites.com/ qui référence tous les sites internet réagissant au code. Mais saurez-vous rentrez sur ce site

General, Jeux vidéo JQuery

JQuery est de plus en plus à la mode. Résultat nombreux sont ceux qui veulent l’utiliser pour des développements futur.

Mais quid de l’existant.

En effet, il peut être parfois fastidieux de recoder toutes les fonctions javascript d’un site qui utilisait un autre framework javascript tel que prototype.

Inclure JQuery en même temps que prototype par exemple génère des conflits. Dans ce cas par exemple, il résultera un conflit à cause de la fameuse fonction $ qui existe dans en JQuery et en Prototype.

Heureusement, JQuery répond à la problématique en introduisant le mode de fonctionnement “No Conflict“. Pour cela, il suffit d’invoquer la méthode jQuery.noConflict(); à la suite du chargement de l’ensemble des frameworks.

Ainsi, en reprenant l’exemple de la fonction $, celle-ci n’utilisera pas JQuery mais un autre fremewok (ou une fonction propriétaire) définissant cette fonction.

ATTENTION, pour utiliser les fonctions de JQuery, il faut utiliser l’operateur jQuery.xxx et non plus l’opérateur $.xxx.

developpement framework, javascript, JQuery, prototype

Utilisant comme framework javascript de plus en plus JQuery (comparaison des frameworks javascript) j’ai été amené à développer des interfaces utilisateur à base de “popup ajax”.

Ne voulant pas réinventer la roue, j’ai cherché quels étaient les plugin JQuery qui offraient cette fonctionnalité. Mon choix s’est arrêté sur Thickbox.

Thickbox est plugin JQuery permettant d’afficher à l’écran du contenu en sur-impression de la page courante.

Ce plugin est très léger : 20ko en version compressée et 58ko en version normale. De plus son mode de fonctionnement est l’un des plus simple que j’ai utiliser et certainement le moins intrusif.

En effet pour ouvrir un contenu dans une “popup ajax”, il suffit (une fois le script chargé dans la page évidemment) de définir un lien HTML portant l’attribut class=”thickbox”. Thickbox se charge donc d’ouvrir la cible du lien dans une popup en sur-impression de la page courante.

La puissance de la bibliothèque ne s’arrête pas là. En effet, le comportement de la popup est paramétrable. Vous pouvez très simplement déterminer par exemple la hauteur ou la largeur de la popup à afficher. Pour cela, rien de plus simple il suffit d’ajouter à la suite de l’url du lien à charger en popup les paramètres height et/ou width.

Par exemple, si nous voulons charger la home de google dans une popup de largeur 200 pixels et de hauteur 300 pixels il suffit de définir un lien dont l’attribut href aura la valeur http://google.fr?height=300&width=200.

de la même manière si nous voulons que notre popup soit modale il nous suffit d’ajouter le paramètre d’url &modal=true.

Je conseille vivement à tous les utilisateurs de JQuery de tester cette bibliothèque très utile et tellement simple d’utilisation qu’elle rendra vos développement javascript encore plus joyeux. Vous remarquerez au passage que le système d’affichage des photos de ce blog utilise thickbox

developpement ajax, javascript, JQuery

Le web 2.0 étant la nouvelle tendance actuelle il existe une multitude de framework javascript nous faciltant la tache dans nos développements (ajax, manipulation du DOM, widgets, modalbox…).

En faisant un état des lieux des projets web dont j’ai la charge, je me suis rendu compte que nous utilisons pas moins de trois frameworks différents par projet. En effet, chaque développeur a ses habitudes, ses bibliothèques et utilise par conséquent le framework qu’il connait le mieux pour gagner du temps.

Résultat, les sites embarquent un nombre de javascript important : les différents frameworks ainsi que nos codes les utilisant.

Tous les frameworks font globalement la même chose, nous avons donc décidé d’uniformiser nos projets afin d’utiliser un framework unique.

Il s’est alors posé la question du choix du framework : prototype, jquery, yui, mootols… avec deux préocupations majeures : les performances et les fonctionnalités natives du framework.

En cherchant de la documentation sur le net, je suis tombé sur la page suivante :

http://mootools.net/slickspeed/

Cette page permet de tester sur son propre navigateur les performances ainsi que les différentes fonctionnalités des framework javascript les plus connus. Pour cela il vous suffit de cliquer sur le bouton “start test” et d’attendre la fin de l’exécution des tests.

Résultats des tests sur ma machine (windows XP, 2Go de RAM)

Avec Firefox 3.0.4

1. Dojo 1.1.1
2. JQuery 1.2.6
3. Mootools 1.2
4. Yui (Yahoo User Interface) 2.5.2
5. prototype 1.6.0.2

Avec Internet Explorer 6.0.2

1. Dojo 1.1.1
2. JQuery 1.2.6
3. Yui (Yahoo User Interface) 2.5.2
4. prototype 1.6.0.2
5. Mootools 1.2

Conclusions

Les deux grands gagnants sont et de loin Dojo et JQuery.

Nous concernant, nous avons choisi JQuery framework plus connu que Dojo avec une communauté de développeurs importante et ayant une syntaxe proche de prototype qui était très utilisé chez nous.

Projets professionnels, developpement dojo, framework, javascript, JQuery, mootools, prototype, yui

Voici la dernière extension ezPublish que j’ai développé.

Cette extension modifie l’interface d’édition et de création des classes de contenu ezPublish en évitant de poster et recharger la page à chaque modification.

Tous les traitements se font en AJAX ce qui rend la gestion des classes plus facile et surtout plus rapidement (notamment lorsqu’il faut déplacer des attributs).

L’extension utilise la framework javascript JQuery dans sa version 1.2.6 et fonctionne à partir de la version 4.0 d’Ez Publish.

vous pouvez télécharger l’extension à l’adresse suivante : http://ez.no/developer/contribs/applications/ajax_class_edit

Installation de l’extension

Pour l’installation il suffit de suivre les étapes suivantes :

1. décompresser l’archive zip dans le répertoire extension de votre installation ezPublish
2. activer l’extension dans le backoffice (onglet administration)
3. regénérer les autoloads

N’hésitez pas à laisser vos commentaires si vous rencontrez un problème un bug ou si vous désirez des améliorations

Projets professionnels, developpement, ezPublish ezPublish, JQuery, php