Les rubriques (actu, forums, tutos) de Développez
Tags
Réseaux sociaux
4   0


 Discussion forum

Clippy.js : le retour en JavaScript du célèbre trombone
Qui fut l'assistant Office, il s'immisce dans vos pages Web

Le , par vermine, Responsable JavaScript & AJAX
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.


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de MaitreKaio MaitreKaio - Membre confirmé http://www.developpez.com
le 07/11/2012 à 12:41
Voilà qui m'ouvre des perspectives insoupçonnées !
Avatar de Muchos Muchos - Expert Confirmé http://www.developpez.com
le 08/11/2012 à 11:34
IL ne mourra donc jamais ?
Avatar de Bovino Bovino - Responsable Développement Web http://www.developpez.com
le 08/11/2012 à 11:39
Moi je trouve ça plutôt sympa

Ca me rappelle un autre truc d'ailleurs :
[ATTACH]105236d1/a/a/a" />
Avatar de vermine vermine - Responsable JavaScript & AJAX http://www.developpez.com
le 08/11/2012 à 12:18
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.
Avatar de Muchos Muchos - Expert Confirmé http://www.developpez.com
le 08/11/2012 à 16:35
Citation Envoyé par vermine
Comme l'a dit MaitreKaio, ça ouvre de nouvelles perspectives.

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


Offres d'emploi IT
Conseiller Clientèle Privée - H/F - Bourg Saint Maurice
Alternance
Banque Populaire des Alpes - Rhône Alpes - Savoie
Analyste d'études informatiques AS400 adelia RPG h/f
CDI
Crédit Agricole - Ile de France - Paris (75000)
Développeur front-end javascript / html 5
CDI
Silkhom - Rhône Alpes - Grenoble (38000)

Voir plus d'offres Voir la carte des offres IT
Responsables bénévoles de la rubrique JavaScript : Xavier Lecomte - Didier Mouronval -