Discussion :

[vermine]

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 - Visualiser dans une fenêtre à part

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 - Visualiser dans une fenêtre à part

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.

[MaitreKaio]

Voilà qui m'ouvre des perspectives insoupçonnées !

[Muchos]

IL ne mourra donc jamais ?

[Bovino]

Moi je trouve ça plutôt sympa

Ca me rappelle un autre truc d'ailleurs :

[vermine]

Je trouve ça sympa aussi. Comme l'a dit MaitreKaio, ça ouvre de nouvelles perspectives. Surtout qu'ici, nous sommes maitres de son apparition et de sa gestion. C'était ça le gros élément négatif à l'époque.

[Muchos]

Comme l'a dit MaitreKaio, ça ouvre de nouvelles perspectives.

Je crois que c'était de l'ironie (j'espère...)