Avec Grumble, l'aide en ligne devient ludique

Par Stéphane Bordage le jeudi 30 janvier 2014

Créé par Tom Moor, Grumble est un code javascript conçu pour présenter les fonctionnalités d'une application ou réaliser des aides en ligne.

La syntaxe, basée sur une liste ordonéne HTML, est très simple :

<ol id="tour" style="display: none;">
  <li data-target="#one" data-angle="130">
    The first step in the tour
  </li>
  <li data-target=".two" data-options="distance:20">
    This is the second step in the tour
  </li>
</ol>

Paramètres principaux :

• data-target: selecteur vers lequel pointer la bulle (obligatoire)
• data-angle: angle de la bulle 0-360
• data-options: liste d'options séparées par un ";"

Options :

• scrollSpeed: vitesse du scroll pour rejoindre une position qui est en dehors de l'écran
• onStep: callback déclenché à chaque fois que l'utilisateur avance dans la présentation
• onStart: callback déclenché au début de la présentation
• onFinish: callback déclenché à la fin de la présentation
• grumble: objet incluant les options citées ci-dessus -et d'autres-, passé directement à grumble.js

Ne pas manquer la page d'exemples, très utile pour se faire une idée des possibilités.

Dans le même genre, il y a Joyride, créé par Zurb, l'éditeur de Foundation. Il existe même un module Drupal idoine (pas encore eu le temps de tester).