Hello, I’m Vinch

And this is my website.

Comment créer vos gadgets Google et Netvibes ?

04/30/07

This post is more than 10 years old. It might not reflect my current skills and convictions.

Il y a quelques années (ou devrais-je dire quelques mois) est apparue une sorte de sites Web inconnue jusqu’alors : les pages d’accueil personnalisables. Plusieurs ont tenté l’expérience (Protopage, Pageflakes, yourminis, Webwag, etc.) mais seuls quelques privilégiés ont réussi à tirer leur épingle du jeu : Google bien entendu mais également Netvibes, le petit poucet français qui s’est fait une place au soleil dans ce marché très convoité.

Comme vous le savez, ces applications permettent de placer les gadgets (Netvibes les appelle widgets mais j’utiliserai le terme gadget dans la suite de l’article) que vous souhaitez sur votre page afin de la rendre personnelle. Ce que vous savez certainement aussi, c’est que ces applications permettent de créer vos propres gadgets et de les mettre à disposition de tous…

Dans cet article, je vais tenter de vous expliquer comment réaliser vos gadgets Google et Netvibes. Cependant, vous devez savoir qu’il ne couvre pas toutes les possibilités offertes mais vous indique simplement la voie pour réaliser votre premier gadget simple. Si vous voulez aller plus loin, je vous recommande la consultation de la documentation fournie par Google et Netvibes.

Comment créer un gadget Google ?

Un gadget Google se présente sous la forme d’un fichier XML tout à fait classique.

En voici l’exemple ultra simplifié :

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="hello world example" /> 
  <Content type="html">
     <![CDATA[ 
       Hello, world!
     ]]>
  </Content> 
</Module>

Ce n’est pas sorcier à comprendre :

* Module est la balise racine du document.
* ModulePrefs permet de spécifier quelques données liées au gadget. Ici, je ne renseigne que l’attribut title mais beaucoup d’autres existent : description, author, screenshot, etc.
* Content est le contenu proprement dit du gadget. Cela peut être du code HTML (entouré par CDATA pour ne pas que les balises HTML soient interpretées comme des balises XML) si l’attribut type à la valeur html ou une URL vers un fichier HTML si l’attribut type à la valeur url.

Il suffit donc de remplir à votre convenance les attributs de la balise ModulePrefs et le contenu de la balise Content pour créer votre propre gadget Google.

Une fois celui-ci réalisé, vous pouvez l’ajouter à votre Google Homepage grâce à ce lien : http://www.google.com/ig/add?moduleurl=[URL\_DE\_VOTRE\_FICHIER\_XML]

Exemple : ce gadget donne le cours de l’action Emakina Group (ALEMK)

Comment créer un gadget Netvibes ?

Pas plus compliqué pour Netvibes, à la différence près que le format utilisé est XHTML au lieu de XML :

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" type="text/css" href="http://www.netvibes.com/themes/uwa/style.css" />
    <script type="text/javascript" src="http://www.netvibes.com/js/UWA/load.js.php?env=Standalone"></script>
    <title>Title of the Widget</title>
  </head>
  <body>
    <p>Hello world ! </p>
  </body>
</html>

Comme vous le voyez, il s’agit d’un fichier XHTML on ne peut plus classique. La seule chose à faire est d’inclure le fichier JS et le fichier CSS propre à Netvibes. Ce qui est pratique avec Netvibes, c’est qu’il utilise l’Universal Widget API (UWA), qui permet de créer son gadget et de l’ajouter ensuite à Netvibes (of course), mais aussi à votre Google Homepage, au Apple Dashboard, etc.

Exemple : le gadget que nous venons de créer. Remarquez les deux boutons sous le gadget…

Conclusion :

C’est très simple de créer un gadget pour Google ou Netvibes ! Si vous créez un gadget vraiment génial, n’oubliez pas de me le signaler ! A vous de jouer 😉 You can do it !

Petite parenthèse : en fouinant un peu sur The Wayback Machine, je suis tombé sur Netvibes en 2002 qui n’a aucun rapport avec l’application Web 2.0 que nous connaissons aujourd’hui. S’ils avaient su que quelques années plus tard, le nom de domaine netvibes.com vaudrait des milliers (millions ?) d’euros…

Liste des APIs Web les plus populaires

04/28/07