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.
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
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 :
- syntaxe étendue :
En tant que concepteur de squelettes
- syntaxe courte :
- syntaxe étendue :
Voici l’ensemble des paramètres disponibles.
Tous ces paramètres sont facultatifs.
Personnalisation
| Paramètres | Explications | Exemple |
|---|---|---|
| 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.
Navigateurs
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;
- }
tagsphere.zip
Vos commentaires
# Le 2 août 2011 à 08:35, par chris
En réponse à : Plugin TagSphère
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
# Le 25 novembre 2011 à 11:06, par Condinguy
En réponse à : Plugin TagSphère
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
# Le 25 novembre 2011 à 15:20, par cvallois
En réponse à : Plugin TagSphère
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.
# Le 28 novembre 2011 à 10:00, par condinguy
En réponse à : Plugin TagSphère
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
# Le 5 janvier à 21:50, par Jérôme
En réponse à : Plugin TagSphère
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 :
Voir le site : http://www.boristourneaccompagnateur.com
Si quelqu’un a une idée ?
Merci
Jérôme
Répondre à ce message
# Le 6 juillet 2011 à 03:42, par erational
En réponse à : Plugin TagSphère
Je viens de mettre à jour le plugin.
On peut maintenant :
<tagsphere9>Répondre à ce message
# Le 31 janvier 2010 à 22:45, par DD
En réponse à : inverser le mouvement
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
# Le 1er février 2010 à 02:59, par cvallois
En réponse à : inverser le mouvement
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
# Le 1er février 2010 à 13:04, par DD
En réponse à : inverser le mouvement
OK merci.
Bon visiblement son blog n’accepte plus les commentaires.
dd
# Le 12 février 2010 à 14:29, par webtice
En réponse à : inverser le mouvement
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 ...
# Le 19 février 2010 à 21:07, par ?
En réponse à : ça marche
super !
je trouve ça beaucoup plus sympa comme ça
# Le 3 août 2010 à 17:52, par spipfactory
En réponse à : inverser le mouvement
Bonjour
peut-être avoir une url pour visionner l’arrêt de la sphère
merci
# Le 3 août 2010 à 17:53, par spipfactory
En réponse à : Plugin TagSphère
adaption sarka réussie a peu prés
mike contact moi
# Le 3 août 2010 à 17:58, par spipfactory
En réponse à : Plugin TagSphère
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
# Le 3 août 2010 à 21:44, par DD
En réponse à : Plugin TagSphère
Voilà un exemple en live : http://www.patatras.eu
# Le 28 octobre 2010 à 19:49, par zaa
En réponse à : Plugin TagSphère
webtice, super le code, c’est beaucoup mieux !
Répondre à ce message
# Le 27 septembre 2010 à 09:53, par François Daniel Giezendanner
En réponse à : Plugin TagSphère
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
# Le 20 décembre 2009 à 14:24, par KMk
En réponse à : Plugin TagSphère
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.
# Le 1er février 2010 à 03:01, par cvallois
En réponse à : Plugin TagSphère
aurais-tu l’adresse de ton site que je zieute. le problème vient souvent du chemin vers le script.
Répondre à ce message
# Le 27 avril 2009 à 16:07, par Kingrise
En réponse à : Plugin TagSphère
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
# Le 1er avril 2009 à 09:03, par mike
En réponse à : ne marche pas pour moi non plus
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
# Le 24 mars 2009 à 19:00, par poongaloo
En réponse à : Plugin TagSphère
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
# Le 19 mars 2009 à 17:37, par f4cxf
En réponse à : Plugin TagSphère
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
# Le 16 mars 2009 à 14:03, par f4cxf
En réponse à : Plugin TagSphère
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
# Le 19 mars 2009 à 13:07, par cvallois
En réponse à : Plugin TagSphère
as-tu essayé de jouer sur les différents paramètre du script dans le fichier tagsphere.html
Répondre à ce message