Plugin TagSphère

Nuage de mots clés en 3D

Publié le : 10 mars 2009 – Dernière modification le 21 décembre 2021 – par christophe vallois – 52 commentaires

1
2
3
4
5
18 votes
Plugin permettant d’afficher les mots clés de votre site sous la forme d’un nuage en 3D à la manière du plugin WP-cumulus.

Pour la petite histoire

Ce plugin permet d’afficher vos mots clés sous la forme d’un sphère animée en 3D.
Le principe du nuage 3D vient du plugin WP cumulus disponible sous wordpress.
Un précédent plugin a déjà été réalisé et documenté sur spip contrib, le plugin WP-cumulus.

Alors pourquoi un second plugin réalisant la même chose, tout simplement pour une histoire de technologie, le plugin WP-cumlus utilisant la technologie javascript, le flash, et le recour au php. J’ai cherché quelques temps une alternative en jquery en vain jusqu’a ce que je tombe sur ce site : http://bidouilleur.com/nuage-de-tags-mots-cles-3d-dynamique-en-jquery/ je me suis donc attelé à la réalisation de ce plugin.

Démonstration en ligne

Un peu de technique

Pourquoi jquery plutôt que flash ?

-  jquery est totalement libre,
-  jquery est beaucoup plus souple, rapide et représente l’avenir du web avec le html5 et le css3,
-  aucune utilisation de php, jquery s’intègre parfaitement au langage de programmation de spip,
-  les plugins reposant sur jquery sont extrèmement simple à réaliser et à personnaliser.

en complément un article détaillant les différences entre les deux technologies :
http://blog.johanbleuzen.fr/comment-jquery-va-tuer-flash

Pour plus d’info sur le script tagsphere :
-  Le code du plugin jQuery original

Installation

Récupérer le zip du plugin sur l’espace de téléchargement de la Zone : http://files.spip.org/spip-zone/. L’installation se déroule ensuite comme pour tous les autres plugins, documentation.

Ensuite il ne vous reste plus qu’a mettre le code

<INCLURE{fond=tagsphere}>

dans votre squelette.

depuis la version 0.3, il est conseillé d’utiliser le modèle qui permet d’indiquer vos paramètres et de spécifier le groupe de mots-clés que vous voulez afficher

En tant que rédacteur
-  syntaxe courte :

<tagsphere9>


-  syntaxe étendue :

<tagsphere9|id_groupe=3|height=800|width=800|timer=45|radius=80>

En tant que concepteur de squelettes
-  syntaxe courte :

#MODELE{tagsphere}


-  syntaxe étendue :

[(#MODELE{tagsphere}{id_groupe=3,height=800,width=800,timer=45,slower=0.9})]

Voici l’ensemble des paramètres disponibles.
Tous ces paramètres sont facultatifs.

Personnalisation

ParamètresExplicationsExemple
id_groupe groupe de mots-clés à afficher. si ce paramètre n’est pas renseigné, on prend tous les mots-clés du site id_groupe=4
height hauteur en pixels height=400*
width largeur en pixels width=400*
radius rayon de la sphère radius=150*
speed vitesse de rotation speed=3*
slower ralenti slower=0.99*
timer délai entre deux positions en ms timer=5*
fontMultiplier valeur d’agrandissement de la police fontMultiplier=15*

* indique les valeurs par défault su script.

testé avec succès sous :
-  firefox 3.0
-  explorer 8
-  chrome 2.0
-  opera

Mise à jour

Depuis le 20/10/2011 le comportement par défaut du plugin à été modifié, la sphère tourne désormais au chargement de la page et s’arrête lors du survol de la souris.
Pour retrouver le comportement originel il faut remplacer à la ligne 131 dans le fichier tagsphere/js/jquery.tagSphere.js

if (curState.mouseOver) {
 fy = curState.lastFy * options.slower;
 fx = curState.lastFx * options.slower;
}  
else {
 fy = options.speed - forCalcs.speedY * curState.mouseY;
 fx = forCalcs.speedX * curState.mouseX - options.speed;
}

par

if (curState.mouseOver) {
 fy = options.speed - forCalcs.speedY * curState.mouseY;
 fx = forCalcs.speedX * curState.mouseX - options.speed;
} else {
 fy = curState.lastFy * options.slower;
 fx = curState.lastFx * options.slower;
}

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

24 discussions

  • RealET

    Des fois que quelqu’un veuille faire marcher ça avec les navigateurs modernes : https://wordpress.org/plugins/html5-cumulus/ est une piste.

    Répondre à ce message

  • Lael

    Bonjour,

    Pour inclure 2 groupes de mots-clés, j’ai essayé cette syntaxe :

    <tagsphere9|id_groupe=4,5|height=150|width=150|timer=100|radius=35>

    mais seul le premier groupe de mots-clés (4) est pris en compte, pas le second.
    J’ai essayé avec un point-virgule en séparateur, ça ne marche pas non plus.
    Et contrairement à Christian, dans mon cas, c’est important de distinguer les 2 groupes.
    Il doit bien y avoir une solution...
    Merci,

    Répondre à ce message

  • obLqwQaa

    BONNE NOUVELLE ANEE à tous

    MERCI de votre aide

    Spip 3.0.21 SarkaSpip 3.2.46 TagSphere 0.4.1

    je cherche à avoir autre chose qu’une page non fonctionnelle, lorsque je clique dans la colonne de gauche , dans mon menu de Sarkaspip (modifié par Tagsphere) sur le bouton « Mots-Clés »....

    Le lien appelé par un clic dans le bouton de mon menu « Mots-clés » est : http://www.amitie-france-madagascar.org/site/spip.php?page=mot

    Un clic dans le bouton du menu « Mots-clés » lance bien l’affichage d’une nouvelle page
    dont le titre est « Recherche par mots-clés »

    Cette page existe donc et son code existe bien

    Cette page « Recherche par mots-clés » ne comporte qu’un seul bouton RECHERCHER et AUCUN champ ou déposer un nom de mot clé

    Un clic dans ce bouton « Rechercher » affiche un texte d’erreur « Choisir un critère de recherche » encadré dans un rectangle borduré de rouge et de fond rose

    AUCUN champ ou déposer un nom de mot clé n’est visible dans cette page

    je répète aucun champ où déposer un nom de mot clé

    En cherchant dans les fichiers disponibles dans TOUT le site web .. je me rappelle avoir lu, une fois, à un endroit d’un fichier ... dont je n’ai PAS noté ni la place ni le nom (QUEL CON je suis)
    .... comme commentaire du code du fichier
    ... que le bouton « Mots-clés » ... donne une valeur Env NULLE si l’on clique sur le bouton « Mots-clés »

    Donc il semble NORMAL, pour le développeur, que le bouton « Mots-clés » de mon menu...soit inopérant.. et ne donne PAS accès à une recherche POSSIBLE

    j’aurais plaisir
    1/ soit à faire un lien du bouton « Recherche par mots-clés » vers une page où je ferai la liste de mes mots clefs ... avec le Plugins Nuage par exemple... pour compenser ce comportement que je trouve aberrant....... mais dans quel fichier et où est situé le fichier appelé .... dans mon site

    2/ soit demander GENTIMENT au développeur de modifier SON code .. pour que ce bouton « Mots-clés » de SON tagsphere 0.4.1..... aboutisse à une recherche de mots clefs fonctionnelle dans une installation classqiue de Spip 3.0.21 et SarkaSpip 3.2.46

    MERCI d’avoir eu la patience de lire jusqu’ici
    Espérant avoir été compréhensible

    Espérant dans votre aide

    MB

    Répondre à ce message

  • 1
    Muxort

    Hello,

    Même problème que Christian
    A savoir, quelle syntaxe adopter lorsque l’on veut exclure des groupes de mot clé avec le #MODELE ?
    Je tourne en rond ...
    Cordialement

    • Pga

      Sans doute depuis le temps, une réponse à votre question a été apportée.
      Autrement, cela peut se faire ainsi :
      Modifier le fichier tagsphere.html en remplaçant :

       <li>[<a href="#URL_MOT">(#TITRE)</a>]</li>

      par

      li>(#TITRE)</li>

    Répondre à ce message

  • Pga

    Bonjour,
    Merci pour la mise à disposition de ce plugin.
    Fonctionne-t-il encore avec SPIP 3.0.16 ?
    Pour le site sur lequel je tente de le placer, il n’apparait pas.
    Malgré le placement de <tagsphere9> dans un article et dans le squelette (en même temps, il semble que le fichier tagsphere.html est trouvable ici : /plugins/auto/SPIP-3-0/modeles et non dans /squelettes-dist/inclure).

    Autrement, serait-il possible d’utiliser ce script directement en passant par un article, c’est à dire en insérant dans cet article la balise à laquelle le rédacteur ajoute les mots clés qu’il souhaite voir apparaître ?

    Merci :)

    Répondre à ce message

  • xav

    Bonjour,

    Comment enlever les liens sur les mots clés de tagsphère ?

    Merci beaucoup pour votre réponse

    Répondre à ce message

  • 2
    Christian

    Bonjour,

    Est il possible de spécifier plusieurs groupes de mots clefs à afficher au lieu d’un seul ou d’en exclure 1 ou 2 ?

    En effet, j’ai 4 groupes dont 2 que je ne souhaite pas afficher (groupe de mots pour le glossaire et groupe pour la gestion du slider en haut de page)

    • christophe vallois

      Logiquement cette syntaxe devrait fonctionner <tagsphere9|id_groupe=3,4,5|height=800|width=800|timer=45|radius=80>

      Bonne année

    • Christian

      Bonjour et merci pour la réponse.
      Ma question ne concernait pas la partie rédacteur, mais la partie conception du squelette. Je n’ai pas été assez précis et je vous prie de m’en excuser.

      J’ai finalement résolu le problème en mettant tous les mots que je voulais « voir » sur le site dans un seul groupe. Cela n’a pas trop d’importance vis à vis des visiteurs, cela facilitait plutôt la recherche du mot par le rédacteur.

      Merci

    Répondre à ce message

  • 3
    f4cxf

    Bonjour,
    j’ai installé et activé le plugin, j’ai collé dans la page site.html du squelette AHUNTSIC, Site réalisé avec SPIP 1.9.2e ( http://news95.perso.neuf.fr ).

    je n’ai pas le moindre nuage à l’horizon, me serais-je trompé de page dans laquelle écrire  ????

    Amigalitiés

    • sisi il est bien là http://news95.perso.neuf.fr/spip.php?page=site, pour l’avoir sur ta page t’accueil il faut placer le code dans ton fichier sommaire.html.

      J’ai tésté avec opéra (ça marche) et ie (ça marche), pense à faire la modif décrite plus bas dans le forum pour éviter le bug avec ie.

      reste le problème de la sur-impression de la sphère sur la colonne ; je ne connais pas le squelette ahunstic, mais je pense qu’il doit suffire de mettre le code dans une boite en d’en fixer la hauteur du style :

      <div id="boite">
<INCLURE{fond=tagsphere}>
</div>

      dans sommaire.html et

      #boite{height:300px}

      dans la feuille de style ou alors tu peux essayer de ajoutant dans tagsphere.html ce code :

      <style>
#tagsphere{height:300px}
</style>
    • jpa25

      bonjour
      j essaie d installer tagspere dans mon site sous spip 3 avec squelette globenews.
      ds quel fichier sommaire mettre le code ?
      dans le sommaire de squelette -dist ou dans le sommaire du plugin globenews ?
      ou dans un autre fichier sommaire mais où se situe t il ?
      faut il installer le plug nuage aussi ?
      merci

    • jpa25

      Pb réglé

      désolé et merci

    Répondre à ce message

  • 2
    Amaury Adon

    Petite précision, le plugin tagsphere fonctionne très bien en spip3. Il suffit de changer l’intervalle de compatibilité en le faisant terminer par 3.0.* à la place de 2.1.99.

    • YannX

      Attention, la dernière correction interdit de l’utiliser en SPIP 2.1
      car spip2 ne reconnait pas encore le * de
      _  <necessite id='SPIP' version='[1.9.2;3.0.*]' />
      (injecté par la SVN 62608)

      Il faudrait remettre
       <necessite id='SPIP' version='[1.9.2;3.0.99]' />
      et peut-etre créer le paquet.xml correspondant !

      Merci pour les spip2

      YannX

    • Amaury Adon

      Oups ! Vraiment désolé...

      J’ai fait la correction indiquée, ça devrait maintenant passer avec les spip2. Je commite sous peu le paquet.xml

    Répondre à ce message

  • Regis92

    Je suis sur Spip 1.9.2 (dernière version) et ce plugin ne fonctionne pas sur mon site : il affiche toute la liste des mots-clés sur une colonne...

    Sans-doute un pbm de Jquery (c’est le bordel...).

    Répondre à ce message

  • 4
    chris

    Bonjour, bravo pour ce superplug qui marche trés bien. Je cherche juste comment faire pour que tous mes mots-clefs soient toujours présent dans le nuages. J’ai une dizaine de mots-clefs mais dans le nuage il n’y en a que 4ou5 de visible et 4ou5 qui disparaissent complètement. Je préfèrerais les voir tous. Est-ce possible ? Merci

    • Condinguy

      Bonjour,

      Mon TagSphere ne marche pas sur Internet Explorer 8. Quelq’un a-t-il une idée

      Voici lien sur le site

      http://www.ressources-de-la-formation.fr/

      Merci à vous

      Condinguy

    • christophe vallois

      J’ai fais quelques test et le plugin fonctionne très bien sous IE, en revanche je suis allé voir le code de ton site et il semblerai que cela soit plutôt lié à ton code.
      De plus tu n’utilises pas le plugin mais seulement un script tagsphere qui n’est pas celui utilisé par ce plugin.
      N’étant pas développeur jquery je ne peux en l’état t’apporter aucune aide. Je te conseille de te tourner vers l’auteur du script ou t’utiliser ce plugin qui est lui compatible IE.

    • condinguy

      Bonjour,

      L’auteur du script n’arrive pas à corriger le problème. Par contre tuu dis d’utiliser ce plugin qui est compatible IE. Quel est ce plugin ?

      merci beaucoup

    • Jérôme

      Bonjour,

      j’ai le même soucis que Condinguy, mon Tagsphere marche très bien sous firefox mais ne tourne pas sous IE8.

      J’ai pourtant bien installé le plugin et appelé le modèle par :

      [(#MODELE{tagsphere}{id_groupe=2,height=150,width=200,radius=75,timer=0.05,speed=0.04,slower=0.1,fontMultiplier=30})]

      Voir le site : http://www.boristourneaccompagnateur.com

      Si quelqu’un a une idée ?

      Merci
      Jérôme

    Répondre à ce message

  • erational

    Je viens de mettre à jour le plugin.
    On peut maintenant :

    • utiliser le plugin via le raccourci rédacteur <tagsphere9>
    • passer les paramètres que l’on veut (taille, largeur, ...)
    • choisir le groupe de mots-clés que l’on veut afficher

    Répondre à ce message

  • 9
    DD

    Bonjour,

    Sur mon Firefox 3.5.7 (pas testé ailleurs) le nuage est immobile et se met en mouvement lorsque l’on passe la souris sur les mots clés.

    Je suis peux être Parkinson (ou alors c’est mon navigateur) mais je trouve qu’il serait beaucoup plus facile de stopper le mouvement en faisant un mouse over, sinon c’est pas facile du tout pour cliquer sur un lien..

    J’ai essayé de modifier le fichier jquery.tagSphere.js sans succès

    dd

    • christophe vallois

      c’est pas faux, mais cela concerne plus le script que le plugin. il faudrait plutôt voir du côté de l’auteur du script (les reférences sont dans l’article) mais à mon avis cela suppose une bonne ré-écriture du script

    • DD

      OK merci.
      Bon visiblement son blog n’accepte plus les commentaires.
      dd

    • webtice

      Pour inverser le comportement c’est tout simple, dans le fichier jquery.tagSphere.js modifier dans la fonction updateTags() comme ceci :

       if (curState.mouseOver) {
  fy = options.speed - forCalcs.speedY * curState.mouseY;
  fx = forCalcs.speedX * curState.mouseX - options.speed;
 } else {
  fy = curState.lastFy * options.slower;
  fx = curState.lastFx * options.slower;
 }

      A remplacer par le bloc ci-dessous ...

      // Pour inverser le comportement, arret si over, rotation si out ...
 if (curState.mouseOver) {
  fy = curState.lastFy * options.slower;
  fx = curState.lastFx * options.slower;
 }  else {
  fy = options.speed - forCalcs.speedY * curState.mouseY;
  fx = forCalcs.speedX * curState.mouseX - options.speed;
 }

      Il est vrai que sinon c’est difficile d’attraper un tag quand la sphère est petite ...

    • super !
      je trouve ça beaucoup plus sympa comme ça

    • spipfactory

      Bonjour

      peut-être avoir une url pour visionner l’arrêt de la sphère

      merci

    • spipfactory

      adaption sarka réussie a peu prés

      mike contact moi

    • spipfactory

      Bonjour

      j’ai installé la sphére sur le squelette sarka ; cela fonctionne presque a 100%

      mais la je ne comprend pas pourquoi je n’ai qu’une lise de mot quand je suis dans un article et non pas la sphére

      une idée
      avec un article

    • DD

      Voilà un exemple en live : http://www.patatras.eu

    • DesignWeb

      webtice, super le code, c’est beaucoup mieux !

    Répondre à ce message

  • François Daniel Giezendanner

    Bonjour,

    Bravo pour ce plugin, je l’ai essayé sur un site en DEV et décrit pour SARKA-SPIP, le résultat est excellent.

    J’ai essayé en parallèle wp-cumulus pour SARKA-SPIP décrit ici

    et j’y apprécie le fait que l’épaisseur (la graisse : l’épaisseur d’un trait ou d’un caractère) varie également en fonction de la profondeur dans la sphère, ce qui augmente considérablement l’effet 3D.

    Cet effet est-il « ajoutable » à TagSphere ?

    Cordialement

    FDG

    Répondre à ce message

  • 1
    KMk

    Bonjour,

    J’ai testé le plugin avec un spip 2.0.10, avec et sans ahuntsic, avec Firefox (dernière version) : sans résultat. J’obtiens la liste des mots-clefs, comme déjà décrit parfois dans le forum.

    Snif !

    Je vais tenter de suivre les actus... pour voir si des solutions sont apportées.

    Cordialement,

    KMk.

    Répondre à ce message

  • Kingrise

    Pour ceux qui n’ont pas la sphère mais uniquement la liste des mots clés : il suffit d’ajouté dans votre squelette l’appel à la librairie jquery comme ceci : #INSERT_HEAD dans la page de votre squelette.

    Pour ma part, le mouvement de la sphère ne suit pas le curseur mais défile du bat vers le haut ??... une solution pour y remédier ?

    Merci.

    Répondre à ce message

  • mike

    Avec spip 2 et sarkaspip 3 je n’ai que la liste mais pas de nuage.

    Le js est activé et autorisé sur le navigateur !
    Le résultat est le meme avec ie7 et firefox3

    Si quelqu’un a une idée !

    merci

    Répondre à ce message

  • poongaloo

    Bonjour,
    Dans le fichier tagsphere.html, à la ligne script language=javascript, il y a écrit :

    src="plugins/tagsphere/js/jquery.tagSphere.js"

    En écrivant à la place :

    src="#EVAL{_DIR_PLUGIN_TAGSPHERE}js/jquery.tagSphere.js"

    Cela pourrait expliquer pourquoi le plugin ne fonctionne pas chez certain puisqu’ils mettent le plugin dans le répertoire auto.

    Répondre à ce message

  • f4cxf

    J’ai testé différents reglages.
    Je me suis aperçu qu’au bureau(W2K et firefox) le nuage tournait beaucoup plus vite que ma machine de course à la maison qui tourne sous Ubuntu 8.10 et firefox. Quoique au bureau avec MIE il n’y a carrement pas de nuage la version en est au niveau 6.0 et pas de MAJ possible...
    De ce fait c’est l’emplacement du nuage qui me chagrine, je l’aurais préféré à droite sous les brèves.
    Je me plongerai dans les pages du squelette une autre fois...
    Merci de vos réponses et à +

    Amigalitiés

    Répondre à ce message

  • 1
    f4cxf

    Bonjour suite à ma dernière intervention, et sa réponse, j’ai collé ddans le sommaire et le nuage est tout en bas, tourne très vite et n’arrive pas à sélectionner un mot clé ...

    http://f5kes.perso.neuf.fr/

    amigalitiés

    Répondre à ce message

  • christophe vallois

    Après quelques petits tests, il faut règler la fonction « timer » avec un multiple de 100 dans le fichier tagsphere.html pour corriger le bug avec internet explorer.
    Je mofifie ça sur la zone dès que possible

    Répondre à ce message

  • 1
    Jules

    Bonjour,

    J’utilise SPIP 2.0.5 [13790] hébergé chez Free. J’ai récupéré le tagsphere.zip et activé le plugin comme indiqué. J’ai implanté le code <INCLURE{fond=tagsphere}>
    dans mon squelette et vidé le cache. Pourtant pas de sphère mais ma longue liste de mots-clés.

    Est-ce que j’ai oublié quelque chose ?

    Merci pour ce plugin très prometteur.

    Répondre à ce message

  • 3
    Alex

    Cool ! je n’ai jamais réussi à faire tourner wp-cumulus avec spip 2. Enfin un nuage animé qui fonctionne, ou presque...

    Retour de test :

    -  Firefox 3 : ok

    -  IE 7 : l’animation ne fonctionne pas (testé aussi avec ta demo) - précision : la fonction java est bien activée sur mon navigateur (j’utilise d’autres scripts qui tournent sans prob sous IE7)

    Merci pour le taff !

    • Alex

      Au fait : je n’ai pas trouvé le plugin à l’adresse que tu donnes

    • christophe vallois

      il faut attendre un petit que le zip soit généré automatiquementn ça devrait être bon mercredi

    • Alex

      IE 7 ok juste eu un bug avec

      <script type="text/javascript">
$(document).ready(function(){
		$('#tagsphere').tagSphere({
				height: 280,
				width: 280,
				slower: 0.65,
				radius: 120,
				timer: 50
		});
	});

  
</script>

    Répondre à ce message

  • 1

    Bonjour,

    Ca ne marche que pour Spip 2.0... pas 1.9.2 ?

    Merci.

    • christophe vallois

      j’ai pas testé sous 1.9 mais à priori il n’y aucune raison que celea ne marche pasn c’est à tester dans le pire des cas ça affichera jsute la liste des mots clés

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom