Blog arrow Technologie arrow Créer facilement un widget pour Webwag avec Joomla!


Créer facilement un widget pour Webwag avec Joomla!

Version imprimable Suggérer par mail
Technologie - widget
Écrit par Serge Boué   
25-05-2008

Mercatic a son premier widget !
En réalité, le développement d'un widget  pour un site utilisant Joomla! demande peu d'effort. Le livre "Widgets & gadgets" de Christopher Maneu explique tous les mécanismes de la création des widgets.
Cet article illustre une petite mise en application de la définition d'un widget pour le gestionnaire de page de démarage Webwag.

Qu'est-ce qu'un widgets ?
Le terme widget est une contraction des mots « Window» et « Gadget ». Les widget sont des petites applications interactives  apportant à l'utilisateur des informations ciblées.
Les widgets s'intègrent à l'espace graphique de l'utilisateur. Cela peut être l'espace « bureau » de l'odinateur (exemple : windows. vista..),  un site web (exemple : un agrégateur de flux RSS), une application mobile...

    Les widgets trouvent leurs applications dans de nombreux domaines ludiques ou professionnels :Information (actualité,  météo...),
  • Accès aux emails ou messagerie instantanée,
    Moteur de recherche,
  • Interaction avec les applications d'entreprises (CRM, intranet...),
  • Alerte (vente flash, compte à rebous d'un lancement de produits...).


Les widgets sont surtout devenus des outils de marketing relationnel. Leur intégration au sein des applications des utilisateurs a créé  un ouvel espace d'interactivité entre le consommateur et l'annonceur. Le widget est  un canal de communication permettant d'instaurer  un dialogue convivial entre la marque et le consommateur. Le widget se met à jour et s'adapte aux demandes de l'utilisateur.
Ces qualités font du widget un élément à part entière dans une campagne marketing en ligne d'une marque.


Techniquement, il existe plusieurs types de widgets. Les widgets reposent sur un moteur qui leur fournit l'environnement nécessaire à leur éxéctution. Au moins une vingtaine de moteurs de widgets existent.
    Il existe deux principales catégories :
  • Les moteurs web pour une utilisation depuis une page d'accueil personnalisable, un lecteur de flux RSS, un blog ou un site web...
  • Les moteurs desktop pour utilisation sur le bureau.

Livre Widgets & Gadgets - C. Maneu
Christopher Maneu , dans son livre Gadgets et Widgets (édition Micro Application), présente les techniques de  développement pour 5 moteurs de widgets.
    Trois moteurs webs :
  • Netvibes Universal Widget API
  • iGoogle
  • Windows Live Home
    Deux moteurs desktop :
  • Windows Vista
  • Yahoo! Widgets

Ce livre très didactique explique étape par étape comment mettre en oeuvre un widget pour chacune de ces plateformes.
Les premiers chapitres sont consacrés à la présentation des concepts et à la mise en place de l'environnement de développement SVN, XML Notepad, Aptana....).

Les autres chapitres sont abondamment illustrés d'exemples à la compléxité croissante. Pour chacun des moteurs cités, l'auteur présente l'API ou le moteur et accompagne le lecteur pendant tout le développement de son premier widget.

Gadgets et Widgets est un livre facile d'accès qui donne réellement envie de se lancer dans le développement de widgets.

Mercatic se devait donc d'avoir son widget !
Plutôt que de suivre à la lettre un exemple de ce livre, le widget sera développé pour la plateforme Webwag .Webwag

Webwag est une page de démarage personnalisable. Webwag se compose d'onglets dans lesquels l'utilisateur positionne et paramètre des widgets.
    Webwag propose déjà de nombreux widgets :
  • lecteur de flux RSS,
  • agenda,
  • bloc note,
  • eMail....


Webwag a développé sa propre technologie « wod » permettant de capturer un morceau d'une page web pour l'ajouter à sa page personnelle.

Webwag propose aussi une déclinaison « mobile ».

Pour le développement d'un widget, l'API webwag « web » repose principalement sur un fichier XML contenant une partie « déclaration » et une partie « code ».

La partie « déclaration » permet notamment de préciser la nature du widget : web ou mobile.

La partie « code » est scindée en 3. La première balise pour l'affichage avant le chargement du widget, la seconde contient la feuille de style du widget et la dernière est le script du widget.

Le coeur du widget doit être écrit en javascript. Des méthodes permettent d'interagir avec un site web pour envoyer ou récupérer de l'information.
Ce fichier XML et l'icône du fichier doivent être déposés sur un site web.
Sur webwag, il faut déclarer l'url du fichier XML pour insérer le nouveau widget sur son espace personnel.

Le widget Mercatic s'inspire fortement des tutoriels proposés sur le site développeur de Webwag .

L'équipe webwag est très réactive et répond avec de nombreuses explications aux questions posées.
Ainsi, il m'a été conseillé d'utiliser l'objet global pour sauvegarder des variables à des fins de visualisation via firebug mais aussi de placer le widget dans un onglet dédié pendant la phase développement pour pouvoir rafraîchir plus facilement l'affichage.

La réalisation d'un widget « web » pour webwag est assez proche du développement pour Netvibes qui est abondamment décrit dans le livre de Christopher Maneu.

Widget MercaticLe widget Mercatic est composé de deux onglets. Le premier est un simple lecteur de flux RSS présentant les derniers articles.
Coté serveur, les flux RSS sont une fonctionnalité native de Joomla!.

Le deuxième onglet est un moteur de recherche dans le glossaire de mercatic.
L'utilisateur saisit le terme recherché et la définition apparaît dans le widget.

Cette fonctionnalité a nécessité quelques aménagements et développements coté serveur.

Le glossaire est un composant proposé par Remository . Un module pour Joomla! a déjà été créé à partir de cette brique fonctionnelle.

Les aménagements cotés serveur ont consisté à écrire une page PHP supplémentaire.
Cette page prend en paramètre dans l'url, un mot, et renvoie dans un fichier XML la définition correspondante. La définition est encapsulée dans une section CDATA.

En fait, cette page ne fait qu'une requête sur la base de donnée. Les pages globals.php,  configuration.php et joomla.php doivent faire l'objet de « include ».

Le widget Mercatic pour Webwag sera bientôt disponible sur Webwag.

Une version « Mobile » sera peut être bientôt créée...

Ce petit développement a montré que la réalisation d'un widget était simple. Mais l'absence  de norme entre les différents moteurs impose un développement spécifique pour chaque plateforme.  Il montre également que Joomla! est un CMS adapté pour servir de support à un widget.

Pour ajouter le widget mercatic à votre espace webwag :
- Cliquez sur le bouton "+" d'ajout de contenu
- Choisissez "Widget externe" dans "Widget spéciaux"
- Copier l'url suivante http://www.mercatic.fr/widget/mercatic.xml dans le champ "ajouter un widget par son url"

 

 

 
< Précédent