Comment créer vos gadgets Google et Netvibes ?

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=%5BURL\_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" />
    http://www.netvibes.com/js/UWA/load.js.php?env=Standalone
    <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…

17 Comments

  1. br1o's avatar br1o says:

    Excellent !!! je n’avais absolument aucune idée de la manière dont ces modules pouvaient bien fonctionner 😉

    Like

  2. Les gadgets Netvibes sont bien plus intéressant 🙂 Le fait qu’il soit ‘Universelle’ est un gage d’intéropérabilité et de longévité.

    Si un jour j’ai une idée de génie pour un gadget, il utilisera UWA.

    Sinon jolie découverte le netvibes de 2002 😀

    Like

  3. chris's avatar chris says:

    j’ai été décu par uwa, lorsque je me suis rendu compte que

    c’est pas si universelle que ça
    il affiche obligatoirement un petit logo uwa qui peut très mal s’intégrer dans certains gadgets.

    ensuite, même si c’est assez simple de créer un widget uwa avec les fonctions de bases. Etant donné que les widgets uwa ne sont (à l’heure actuelle) seulement compatible avec netvibes et google ig (possibilité mac desktop seulement avec plugins), créer un gadget google + un widget netvibes (non uwa) ne prend pas beaucoup plus de temps mais surtout, s’assure de mieux s’intégrer dans les 2 sites. Ensuite, google propose un service de création/test de widget en ligne très pratique.

    En gros, uwa est certes un bonne idée, mais un peu trop nouvelle, et forcer les gens a accepter ce logo est une erreur stratégique.

    Like

  4. tchouf's avatar tchouf says:

    c’est beaucoup plus simple maintenant, allez sur http://www.google.com/ig/directory?synd=open&source=gghp et voilà, j’ai mis par exemple “l’image du jour de la nasa” dans ma barre latérale sur mon site “htpp://frankwuyts.is.dreaming.org”

    Like

  5. tchouf's avatar tchouf says:

    désolé j’ai pas bien lu le titre de l’article, mais mon lien ci-dessus peut être utile aussi, il y a déjà un choix énorme

    Like

  6. Vince's avatar Vince says:

    Cool ça.
    Et si je veux me créer un site qui permet d’afficher des gadgets comme google ou netvibes? Comment je fais?
    Tu sais où je peux trouver de la doc?

    Merci,
    Vince

    Like

  7. Pouchiou64's avatar Pouchiou64 says:

    Tu dis que les gadget de NetVibes laisse un logo, mais les google Gadget aussi!! Il y a toujours le logo de Google!! Serait-il possible de se séparer de ce logo? Peut on créer des gadgets en se séparant de Google?

    Like

  8. DISSO's avatar DISSO says:

    tout les coups sont permis

    Like

  9. Vetement's avatar Vetement says:

    uwa est certes un bonne idée, mais un peu trop nouvelle, et forcer les gens a accepter ce logo est une erreur stratégique

    Like

  10. cgfsdcyui's avatar cgfsdcyui says:

    mhh…alors comme ça on peut créer ses gadgets google… et ben, c’est beau la technologie…

    Like

  11. ffyutyuty's avatar ffyutyuty says:

    fdp ta mere la pute

    Like

  12. ffyutyuty's avatar ffyutyuty says:

    comment creer des gadget pour te tuer pd fdp ta mere la chienne

    Like

  13. essay's avatar essay says:

    LOL not rocket science))

    Like

  14. DSADA DFSADSD mhh…alors comme ça on peut créer ses gadgets google… et ben, c’est beau la technologie…

    Like

  15. mihaf's avatar mihaf says:

    est que je peux creer des widget et de les relier a une base de donnée (par exemple je veux dessiner un graphique ou l’exemple le plus simple c d’afficher une donner dans ce widget ) et si je modifie cette donner la donner va etre modifier dans mon tableau de bord cordiallement

    Like

Leave a reply to Vetement Cancel reply