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
<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è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;
}
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
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.
Suivre les commentaires : |