Si le chargement s’est bien passé, Clippy doit s’être affiché en bas à droite de l’écran. D’autres assistants comme Links, le chat (mon préféré), Merlin, le magicien, Bonzi le singe, F1 le robot, etc, existent, mais rassurez-vous, c’est très simple de changer de personnage.
Les autres personnages : Links - Merlin - Bonzi - F1 - Peedy - Rocky - Rover
1. Clippy de Microsoft Word jusqu’à chat GPT
Clippy l’assistant de microsoft fait son grand retour. En effet, chat GPT cherchant un “visage” pour le représenter sur le bureau des ordinateurs, il devrait prendre les traits de Clippy.
Vous vous souvenez de Clippy le petit assitant de Microsoft Word 98. Nostalgie ou découverte selon votre âge.
A la base,le créateur de Clippy est Apple, puisque Clippy vient de Word, une création de Apple.
A l’époque, cet assistant n’étaient pas très performants pour les utilisateurs, mais sa présence sur le bureau de l’ordinateur avait un côté plaisant.
Si Clippy ou un de ses amis vous plaît, vous pouvez l’installer sur votre site web ou sur votre ordinateur. Vous pouvez le déplacer avec la souris ou double cliqer dessus pour déclencher les différentes animations.
Cette prouesse a été rendue possible, grâce au travail de quelques informaticiens nostalgiques et passionnés. Prenant sur leur temps libre, ils ont créé cette application poir redonner vie à ces petits personnages animés que sont Clippy, Links et les autres.
Malheureusement, le site https://www.smore.com/clippy-js, original de cette création, n’est plus actif, mais pas de soucis, j’ai récupéré les codes sources et je vous propose de les installer à votre tour…
2. Mettre Clippy sur son site Web
Tout d’abord, commencez par télécharger les fichiers sources au format “zip” et décompresser le dossier.
Placez ensuite le dossier “clippy” contenant “clippy.html”, à la racine du site. Si vous le placez à un autre emplacement, il faudra bien sûr changer les chemins d’accès en conséquence.
Si vous ouvrez la page “clippy.html” sur votre site, vous devriez voir une page vide avec Clippy en bas à droite.
En local (sur votre ordinateur), il faudra un serveur local pour que les scripts Javascript soient exécutés.Ajouter enfin les codes suivants sur la page où vous voulez afficher Clippy :
1
2
3
4
5
6
7
8
9
10
11
12
13<!-- En haut de page -->
<link href="/clippy/clippy/build/clippy.css" rel="stylesheet" />
<!-- En bas de page -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/clippy/clippy/build/clippy.js"></script>
<!-- script d'initialisation -->
<script type="text/javascript">
clippy.load('Clippy', function(agent) {
agent.show();
});
</script>
Et c’est fini.
Comme vous l’avez constaté, jquery est également requis et charger grâce à un cdn.
3. Changer de personnage
Vous souhaitez peut-être afficher le chat Links, plutôt que Clippy ? (Moi aussi ce petit chat me fait craquer)
Pas de problèmes : pour changer de personnage, il faut modifier la ligne de code suivant :
1 | clippy.load('**Clippy**', function(agent) { |
Par exemple pour avoir Links, remplacez Clippy par Links et le petit chat apparaîtra.
A part Clippy, vous pouvez proposer d’autres personnages : Links, Bonzi, Merlin, F1, Genie, Genius, Peedy, Rocky et Rover
Important !!!
Si vous ne mettez pas le dossier “clippy” à la racine du site ou si la page n’est pas à la racine du site, il faudra changer les chemins d’accès suivant :
/clippy/clippy/build/clippy.css et */clippy/clippy/build/clippy.css
Mais aussi, dans le fichier clippy.js, la ligne : clippy.BASE_PATH = ‘/clippy/clippy/agents/‘;
Pour terminer, si vous voulez afficher Clippy sur votre ordinateur, il vous faudra un serveur local. Vous pouvez par exemple utiliser un éditeur HTML comme VS code,
ouvrir le dossier clippy avec Visuel Sudio Code, afficher le code dufichier html puis lancer le serveur local (live server) en cliquant en bas à droite sur “Go Live”
J’espère que cet article vous aura donné envie de vous amuser avec Clippy.
A bientôt sur Outils-Web.fr