Concevoir : un Carrousel avec Ext JS

Au détour de mes lectures Webistiques, je suis tombé sur ce tutoriel pour la mise en place d'un carrousel avec la librairie de Sencha (voir ma précédente présentation).

C'est bien écrit et le rendu est sympa alors je ne peux que vous en conseiller la lecture sur BlogNT.

Concevoir : Ext JS, un framework impressionnant !

Voici un petit billet sur une technologie que nous mettons en œuvre depuis quelques temps chez Logi-Tech Informatique pour présenter des applications légères ergonomiquement efficace et agréable pour nos clients.

Ext JS est une bibliothèque Javascript Open Source (en GPLv3) qui propose de nombreux composants de RIA (Rich Internet Application).
A l’origine c’est une branche de la bibliothèque JavaScript développée par Yahoo! sous l'appellation YUI. Dès sa version 1.0, Jack Slocum, cherche à en faire un produit industrialisé. Ext-JS s'est ainsi rapidement retrouvé au rang des meilleures bibliothèques JavaScript Open Source. Elle est d’ailleurs utilisé par de grands noms comme Adobe, IBM ou encore Sony.

La version 4 vient d'être diffusée en version finale (avril 2011).
Les composants proposés par le framework Ext JS sont nativement hautement paramétrables. Malgré cela, il arrive que nos clients aient des besoins non couverts... aucun soucis, la mise à disposition du code nous permet de réaliser les évolutions nécessaires rapidement.

Avantages :

• Un nombre impressionnant de composants paramétrables à loisir
• Une "facilitation" de la mise en œuvre d'une architecture MVC
• Compatibilité avec les principaux navigateurs du marché
• Des graphiques ne nécessitant pas de plugins
• Une haute adaptabilité à votre charte graphique
• Une interopérabilité avec des références du marché comme Google Maps

Je n'avance pas que ce framework est LA librairie à utiliser mais notre retour d'expérience nous permet de confirmer sa haute valeur ajoutée pour qui souhaite réaliser des outils WEB ergonomiques et graphiquement réussis.
Pour plus d’informations sur les possibilités de la librairie Ext JS 4 : http://www.sencha.com/products/extjs/examples/

Concevoir : Fancy Zoom, un script de zoom très réussi !

Pour faciliter la lecture d'une page tout en la rendant plus agréable à lire, nous l'agrémentons d'images en miniature.
Il est alors souvent nécessaire de permettre à l'utilisateur de visualiser ces illustrations en plus grand (voire en taille réelle).

La solution basique est d'insérer un lien href sur l'image, pour ouvrir l'image dans une nouvelle fenêtre. Vous avouerez que, même si c'est efficace, ce n'est pas très sexy. Il faut, de plus, gérer une à une toutes les images de vos sites... fastidieux !

C'est là qu'intervient Fancy Zoom, un script développé par Cabel.name.
Il va vous permettre de créer sur tous les liens pointants vers des images présentes sur votre site, un effet de Zoom du plus bel effet, positionnant l'image sélectionnée au centre de la page en surimpression.

Sa mise en oeuvre est très simple :

• Télécharger le fichier suivant : FancyZoom 1.1.zip
• Déclarer les deux scripts suivants avant la balise de fin de header "/head" :
• < script src="/js-global/FancyZoom.js" type="text/javascript">< /script>
• < script src="/js-global/FancyZoomHTML.js" type="text/javascript">< /script>
• Réaliser l'appel à la méthode d'initialisation du composant setupZoom() au chargement de votre page : onload="setupZoom()"

Voilà, vous pouvez tester !!
Pour les images que vous ne voulez pas zoomer, ajoutez dans votre balise href : rel=”nozoom”

Ce script est offert gracieusement par son auteur, uniquement pour les sites à but non commercial. Rapprochez vous de lui si votre utilisation n'est pas dans ce cadre !

Il existe aussi une version JQuery : http://www.dfc-e.com/metiers/multimedia/opensource/jquery-fancyzoom/