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

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


 Discussion forum

Le , par vermine, Responsable JavaScript & AJAX

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 :
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 :
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
http://www.developpez.com
Membre confirmé
le 07/11/2012 12:41
Voilà qui m'ouvre des perspectives insoupçonnées !
Avatar de Muchos Muchos
http://www.developpez.com
Expert Confirmé
le 08/11/2012 11:34
IL ne mourra donc jamais ?
Avatar de Bovino Bovino
http://www.developpez.com
Responsable Développement Web
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
http://www.developpez.com
Responsable JavaScript & AJAX
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
http://www.developpez.com
Expert Confirmé
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
CONCEPTEUR DEVELOPPEUR WEB MAGENTO H/F
CDI
MENWAY - Nord Pas-de-Calais - Lille
Parue le 06/11/2014
Consultant business transformation
Stage
SOLUCOM - Ile de France - Paris (75000)
Parue le 24/10/2014
Ingénieur étude et développement C++/Qt H/F
CDI
Sogeti HT - Région Est - Provence Alpes Côte d'Azur - Aix en Provence (13000)
Parue le 31/10/2014

Voir plus d'offres Voir la carte des offres IT
 
 
 
 
Partenaires

PlanetHoster
Ikoula