Cette semaine je vous propose de nouveau quelques plugins jQuery. Au menu : Editeurs de texte innovants, inspiration Apple et graphiques dynamiques.

Editeurs de texte

En matière d’édition de texte, 2 plugins aux approches différentes ont retenu mon attention. Tout d’abord, < markItUp / > qui est destiné à éditer du code et plus précisément tout langage à base de balises comme le XHTML, BBcode, Markdown, Wiki ou autre. En plus d’être très léger (à peine 6.5 Ko), il est extrêment complet, extensible, non intrusif, respectueux des standards… Bref, il a tout pour plaire !

Le second, WYMeditor, est un éditeur dit WYSIWYM (What You See Is What You Mean). Il s’appuie sur un système de couleurs pour différencier les classes ou attributs appliqués sur le texte et d’encadrés permettant d’avoir un réel visuel de l’encapsulation des différents éléments. Cet éditeur XHTML rencontre un succès croissant, pour preuve il est déjà intégré à plus d’une trentaine de projets comme MediaWiki, Drupal, Dotclear mais aussi Byteflow ou encore Django CMS.

Apple inspire les foules

Quand on parle d’expérience utilisateur et d’ergonomie, on site souvent les produits Apple. Ici ce sont 2 plugins inspirés des interfaces de la marque à la pomme que j’ai retenu.

Le premier, iButton, se propose de réinventer le boutont radio. C’est plus agréable et bien plus visuel qu’un simple bouton radio, cela dit je conçois que le design ne se prête pas forcément à toutes les interfaces.

MacOS X inspire beaucoup également et c’est le fameux dock qui a été transcodé pour jQuery. Ce plugin au doux nom de Outside the Box Navigation est très fluide, ce qui le rend agréable à utiliser (contrairement aux quelques tentatives que j’avais vu jusqu’à présent) et peut être affiché dans 4 orientations différents selon les besoins.

Visualisation de données

Un tableau c’est bien pour afficher des données tabulaires, mais pour les analyser, les comparer, rien de tel qu’un bon graphique ! jQuery Visualize tire partie des dernières technologies du web à savoir HTML5 et les canvas pour générer différents types de graphiques selon vos envies (bâtons, camemberts, etc…). Ce qui rend la chose encore plus intéressante est la possibilité de modifier directement les données du tableau et de les voir se répercuter sur les graphiques. Un plugin vraiment bluffant !

C’est tout pour aujourd’hui, n’hésitez pas à partager vos impressions sur l’utilisation de ces plugins (ou d’autres) en commentaire !

Chaque semaine je vous ferai part des récentes découvertes que j’ai faites lors de ma veille technologique hebdomadaire. Cette semaine, je vous propose quelques plugins jQuery qui ont attiré mon attention. Au menu : mots de passe, menus déroulants et validation de formulaire.

Mots de passe

Voici 2 plugins jQuery offrant un aperçu du mot de passe saisit dans un formulaire, sans pour autant l’afficher.

Le premier se nomme Chroma-Hash et se propose d’afficher un code couleur représentant le mot de passe ; ainsi il est possible de remarquer d’un rapide coup d’oeil si l’on ne s’est pas trompé lors de la saisie du mot de passe de confirmation. Astucieux !

Le second, dPassword, affiche le mot de passe à la manière de l’iPhone; C’est à dire qu’il affiche le caractère saisi puis le masque en le remplaçant par un gros point. Cela permet de se rendre compte rapidement d’une faute de frappe.

Menus déroulants et auto-complétion

Un menu déroulant, qu’il soit à choix multiple ou non, c’est bien pratique. Mais parfois, ça manque de convivialité et d’ergonomie. Voici donc pas moins de 4 plugins jQuery pour égayer un peu tout ça !

Commençons par Search Light, un plugin qui a pour but de faire de l’auto-complétion au cours de la frappe dans un champ texte. Là où c’est intéressant, c’est que les résultats sont illustrés par une vignette et regroupés par thème !

Le second, Reinventing Drop Down, permet de personnaliser les menus déroulants à l’aide d’un peu de CSS et de jQuery.

AddIncSearch quant à lui combine liste déroulante et auto-complétion, ce qui permet d’exploiter beaucoup plus efficacement une liste composée d’un grand nombre de choix.

Enfin, jQuery UI Multiselect offre la possibilité de trier et d’effectuer une recherche dans une liste à choix multiple. De plus ce plugin utilise Themeroller pour s’intégrer au mieux avec jQuery UI

Validation

La validation de formulaire côté client permet d’éviter d’inutiles aller-retours avec le serveur. FormValidator est un plugin jQuery permettant une prévalidation de formulaire en javascript agréable et conviviale. Attention, cela n’exclue pas un contrôle du formulaire côté serveur car nul n’est à l’abri d’un petit malin qui contournerait l’exécution du javascript ;)

J’espère que cela vous aidera à offrir aux utilisateurs de vos applications web une interface plus ergonomique et fonctionnelle ! La semaine prochaine je vous présenterai d’autres plugins jQuery.