Installer des widgets (ou gadget)


pour customiser son site coopératif


Suivons l'inspecteur Widget !
Inspecteur Widget


Pourquoi customiser son YesWiki (ou autre CMS) ?


Les YesWiki (et autres applications permettant de coopérer) sont souvent limités dans leurs fonctionnalités. A la demande du groupe des usagers, en fonction de la maturité du groupe, de nouveaux besoins apparaissent qui méritent que l'on puisse rajouter des fonctionnalités au YesWiki. Il existe plusieurs solutions pour cela :

C'est sur l'ajout de widgets dans YesWiki que se concentrera ce cours.

Vous avez dit Widget ?

D'après Wikipédia, un widget est un petit outil qui permet d'obtenir des informations (météo, actualité, dictionnaire, carte routière, pense-bête (en anglais post-it), traducteur etc.).
Pour widgetOlab, un widget est un petit module de syndication, paramétrable et personnalisable, qui me permet d’embarquer et de re-publier dynamiquement des contenus et fonctions issus de services tiers.

Certains sites parlent plutôt de gadgets
La liste des fonctionnalités proposées par Widget est longue et se rallonge de jour en jour.

Ces widgets peuvent être installés sur un blog, un espace myspace, netvibes... un YesWiki.

inspecteur widget

Et pour comprendre plus facilement ce dont il s'agit, quelques exemples de widgets :

Exemples

Widget de cartographie

Openstreetmap générale


Afficher une carte plus grande

Widgets de cartographie

Openstreetmap d'un point précis


Afficher une carte plus grande

Widget Pearltrees

Cliquez ici pour voir cette boite à outils sur une page dédiée, par tiriad

Widget Calendrier particulier (google)




Widget de visualisation de PDF (issuu)



Widget pour regarder une vidéo (youtube)


Et l'on va s'arrêter là, la liste est potentiellement colossale !!!


Comment trouver widget à son pied ?
La plupart des services 2.0 proposent des codes pour intégrer un widget.
Chercher un bouton ou un menu "Partager" (ou "Share") puis le mot "intégrer" ou "embarquer" ou "Embed" : cela vous fournira un code à copier-coller dans votre site.

Principe pour embarquer un widget sur votre CMS

1 Récupérer le code

Les sites qui proposent des widgets vous proposent d'embarquer un bout de code du style :
Widget embed : <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/XFAy84Pesb0&hl=fr_FR&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/XFAy84Pesb0&hl=fr_FR&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Donc recherchez ces termes


Principe pour embarquer un widget sur votre CMS

2 Coller le code dans votre CMS



ainsi

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/XFAy84Pesb0&hl=fr_FR&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/XFAy84Pesb0&hl=fr_FR&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

s'affichera



Principe pour embarquer un widget sur votre CMS

3 personnalisez le widget


De nombreux sites qui proposent des widgets vous permettent de personnaliser la forme de leurs gadgets.

Ces fonctions vous permettent de changer la taille, la couleur, certains liens au niveau de ce qui s'affichera sur votre site...
Le code sera souvent modifié automatiquement. Certaines fois, il faudra "rafraîchir" le code.

Problèmes courants...

dans YesWiki

C'est un code bizarre qui s'affiche plutôt qu'un joli widget :

Vous avez mis les guillemets or c'est toujours du code qui s'affiche :

dans spip

vous avez oublié les balises <html> code embarqué </html>

Et quand on n'a pas trouvé widget à son pied

Et bien il est possible d'afficher une page internet au sein de votre CMS en utilisant le code suivant :

<iframe width="100%" height="1000" src="http://www.test.fr" border="0" style="border:0;">
</iframe>

En remplaçant http://www.test.fr par l'adresse du site qui vous intéresse et en mettant des guillemets devant et derrière ce code...

...et voilà comment mettre un blog, un forum, une galerie d'images... dans votre wiki ou autre cms !


Les widgets et la coopération


Les plus :


Les moins :


En résumé, les widgets sont à manier avec précaution, ils doivent arriver lorsque le groupe en a vraiment besoin et rester simples d'utilisation.

Inspecteur Widget