Clippy.js, le célèbre trombone qui fut l'assistant Office s'immisce dans vos pages Web
Clippy, c'est lui, le trombone qui vous parlait tout d'abord dans Microsoft Office pour vous assister de manière interactive dans l'utilisation de l'outil. Il s'est alors propagé dans les autres outils de la suite Office. Dans les versions Office de 1997 à 2004, vous avez pu le voir souvent de manière intrusive. D'abord apparaissant par défaut, Microsoft l'a finalement désactivé suite aux nombreuses critiques afin que l'utilisateur le fasse apparaitre selon sa propre envie.
Ce trombone doté de mouvements prédéfinis vous aide à la recherche ou vous conseille sur l'utilisation des fonctionnalités de bureau. Il présente des astuces et raccourcis clavier. Par exemple, en tapant une adresse postale puis le mot « Cher » vous faites réagir Clippy. Il vous dit alors dans une pop up aux allures de bloc notes : "On dirait que vous écrivez une lettre. Voulez-vous de l'aide ?".
Clippy le trombone a plusieurs amis (agents) comme par exemple le génie, le chien, le chat, le logo Office, le globe terrestre et bien d'autres.
Que les nostalgiques se rassurent, Clippy est à nouveau présent grâce à l'implémentation JavaScript Clippy.js. Suite à un constat assez simple disant que les gens aiment deux choses : l'échec des technologies Microsoft et l'obscurantisme des bibliothèques JavaScript, l'équipe de Smore, spécialisée dans le design, a eu l'idée saugrenue d'implémenter Clippy dans une page Web.
Il vous permet donc de :
- jouer des animations ;
- « parler » à l'utilisateur ;
- se déplacer ;
- utilisez plusieurs agents en même temps.
Les agents sont composés de plusieurs jeux d'animations. Cependant, contrairement à votre dessin animé du samedi matin, l'animation n'est pas linéaire. Par exemple, lorsque le chat est inactif, un jeton est renversé dans les coulisses et alors le chat tournera sur lui-même d'ennui ou se grattera derrière les oreilles. Il n'est jamais réellement inactif.
Pour intégrer Clippy.js à votre page, vous aurez besoin de ce code :
| Code html : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!-- Add the stylesheet to the head --> <link rel="stylesheet" type="text/css" href="clippy.css" media="all"> ... <!-- Add these scripts to the bottom of the page --> <!-- jQuery 1.7+ --> <script src="jquery.1.7.min.js"></script> <!-- Clippy.js --> <script src="clippy.min.js"></script> <!-- Init script --> <script type="text/javascript"> clippy.load('Merlin', function(agent) { // Do anything with the loaded agent agent.show(); }); </script> |
Ensuite, vous aurez accès à des actions. Par exemples :
| Code javascript : | Sélectionner tout |
1 2 | agent.Play('Searching'); // Lance l'animation de recherche agent.speak("Voulez-vous de l'aide ?"); // Affiche une pop up |
Page officielle avec les explications et les exemples. Téléchargement. 
Envoyé par vermine
(j'espère...)