Plugin TagSphère

Nuage de mots clés en 3D

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

24 discussions

  • 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

    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

    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 !

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

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

    • 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.

    • 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