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 :
  • révéler des fonctionnalités ignorées (fonction attach, flux RSS, syndication...)
  • afficher des fonctionnalités jusque là cachées (afficher un footer jusque là invisible, mettre un lien vers la page s'identifier...)
  • installer de nouvelles extensions non comprises dans les "Yeswiki de base" (tools tags, tools syndication...)
  • inclure des fonctionnalités proposées par des sites tiers par le biais de widgets (carto google, afficheur de documents pdf (issuu)...)

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
  • widget embed
  • code à embarquer
  • Get widget
  • embed code
  • ajouter à votre page web
  • obtenir le code
  • copiez-collez le code HTML ci-dessous pour inclure ce gadget dans votre page Web
  • Copy this code Click below & press Ctrl+C
  • ... Les standards ne sont pas encore passés par là


Principe pour embarquer un widget sur votre CMS

2 Coller le code dans votre CMS


  • pour les utilisateurs de YesWiki : en édition, encadrer par deux guillemets (afin que le langage html soit reconnu) le code html du widget
  • pour les utilisateurs de SPIP : en ayant pris soin de l'encadrer par <html> rtyrtyry </html> afin que le langage du logiciel html soit reconnu (Voir également cet article pour autoriser l'affichage de certains Widget dans Spip).

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.
  • customize this widget
  • personnaliser
  • ...

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 oublié de mettre deux guillemets avant et après le code

Vous avez mis les guillemets or c'est toujours du code qui s'affiche :
  • Souvent à regarder attentivement le code que vous avez collé, il y a deux guillemets qui "traînent" dans le corps du code. il suffira alors de mettre un espace entre ces deux guillemets et tout devrait s'afficher normalement.

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 :

  • un site plus joli
  • de nouvelles fonctionnalités
  • ça fait moderne

Les moins :

  • lorsque la page est éditée, les contributeurs sont souvent effrayés par le code
  • trop de fonctions noient les contributeurs pour qui simplicité rime avec implication
  • il faut souvent s'identifier sur le site tiers qui propose le widget pour modifier le contenu qui s'affiche (google calendar par exemple), vous proposez alors un service coopératif qui est plus complexe.

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
 Produire et gérer du contenu tutoriel