Nuage (de mots-clés)

L’article «Afficher les mots-clés en faisant varier la taille de la police» de BoOz et Fil permettait déjà d’afficher un nuage de mot-clés.

Le présent article reproduit exactement les mêmes résultats, puisqu’il s’agit de son adaptation sous forme de modèles, le tout sous forme de plugin pour faciliter l’installation.

Contenu du plugin

Il contient deux fichiers html, les modèles nuage.html et nuage_popularite.html. Les fichiers php, quant à eux, définissent un filtre |nuage ou |nuage_pop. On insère aussi quelques styles css dans l’entête de la page, ce qui nécessite l’emploi de la balise #INSERT_HEAD.

Utilisation

Une fois le plugin activé, vous pouvez faire appel aux modèles selon les deux méthodes classiques:

  • dans un squelette html
    • [(#MODELE{nuage})]
    • [(#MODELE{nuage_popularite}{id=4})]
  • dans un article:
    • <nuage1>
    • <nuage1|popularite>
    • <nuage|> (notation permettant d’afficher un nuage sans sélectionner de groupe de mots-clés)

La valeur passée en paramètre est facultative et correspond à l’identifiant d’un groupe de mots-clés, si on souhaite réduire le nuage à un seul groupe de mots.

De plus, [(#MODELE{nuage}{id_article=10})], ou <article10|nuage> affichent le nuage en exposant les mots-clés associés à l’article passé en paramètre.

Personnalisations

Cadeau de Noël ou Oeuf de Pâques

Pour faire une sélection de plusieurs groupes de mots-clés et générer un seul nuage, on profite du fait que le critère de sélection dans le modèle est une expression régulière. On peut alors écrire {id=4|10} pour sélectionner les mots des groupes 4 et 10. Attention, ça marche seulement pour l’appel depuis un squelette.

A l’inverse on peut exclure certains groupes de mots clés en utilisant le critère de sélection notid. Celui-ci fonctionnant également selon une expression régulière, la syntaxe permettant de ne pas prendre en compte les groupes 5 et 11 est donc de la forme: {notid=5|11}

Discussion

130 discussions

  • jpbastien

    Bonjour et merci à nouveau pour ce superbe plugin !

    Je rencontre cette fois un petit soucis... je pose donc ma question.

    Comment faire en sorte qu’un mot clef affilié à un seul article soit présent dans mon nuage ? Et si possible, comment faire en sorte que ce mot clef soit plus important que les autres (taille plus importante voir couleur différente) ?

    Merci de votre aide

    Jean-Philippe
    Cybercentre de Guérande

    Reply to this message

  • 8

    Bonjour à tous et merci à l’auteur pour cette contribution.

    J’ai un soucie quant à l’alignement des mots clés sur le sous doué Internet Explorer (Pas de problème sur Firefox) à partir de la balise [(#MODELEnuage)]:


    Comment faire pour que les mots clés retournent à la ligne en fin de DIV, actuellement ceux ci s’allonge sur une seule ligne sur le très médiocre IE?

    Je suis certain qu’il s’agit d’un problème de CSS sur un DIV aussi j’en appelle aux connaisseurs...j’ai eu beau chercher sans résultats probants...

    Merci d’avance, j’ai sincèrement pas envie de me priver d’une si belle contrib à cause de Bill!

    • on peut avoir une adresse pour regarder ? as-tu fait des modifications de css ou autre pour ce plugin ?

    • Le screen shot ci contre

      La portion HTML + CSS ci contre

      Même avec un “width” ou encore un “list-style-position: inside;” ça ne fonctionne pas sur IE alors que la propriété est Ok sur Fox..:-(

      Merci !

    • Ton code:

      <div class="tags">
      <h5>Tags</h5>
        <ul >
           <li>[(#MODELE{nuage})]</li>
        </ul>
      </div>

      le modele nuage produit lui aussi une liste non-enumérée (ul/li) tu te retrouves donc avec une imbication inutile je crois

      essaie plutôt :

      <div class="tags">
      [<h5>Tags</h5>
      (#MODELE{nuage})
      </div>]

      en aménageant le css en conséquence :

      .tags ul.nuage {...}
      
      .tags ul.nuage li {...}
      
      .tags ul.nuage span.frequence {...}

      ps: avec l’url de la page que tu testes, on aurait eu accès au code source et c’est plus simple pour débugguer ;)

    • Merci bien “Jessy James” ! ça marche au poil !

    • Bonjour,

      Excellent plugin, que je viens de mettre sur mon site. Mais lorsque je le teste sur explorer j’ai le même problème qui apparait : tout s’affiche sur une seule et même ligne. Quel fichier CSS faut il modifier ? le spip_style.css ?

      Cordialement,

      JB

      PS : sinon c’est impec sous firefox et la version 1.9.2 de spip

    • une url du site, pour aider, c’est mieux :) Sinon, j’ai pas IE, faut que tu demandes un peu d’aide sur la liste des utilisateurs (spip @ rezo.net)

      Bonne chance,

    • Salut,

      Oui j’aurai bien voulu te donner un url, mais le site est en local. je peux te donner le code (mais je pense pas que dans ce cas cela t’avancera) :

      <td bgcolor="#FFFF99"><div class="nuage">[(#MODELE{nuage})]</div></td>

      La modification que tu proposes plus haut, c’est quel fichier CSS que tu modifies ? car ça semble être exactement le même problème.
      En tous les cas merci de ton aide, dommage que ce soit toujours IE qui foute ça m****

      JB

    • ça peut être n’importe quel fichier css qui est appelé dans ta page.

      par exemple, on peut copier dist/habillage.css dans squelettes/ et modifier la copie, si bien sur, tu utilses les styles de spip par défaut...

      mais procéder en aveugle et par tatonnement risque d’être très long : ouvre un compte chez free, et fait appel aux compétences des spipeurs utilisant windows, comme je te l’ai conseillé, sinon, tu t’en sortiras pas.

    Reply to this message

  • 3

    Bonjour,

    Excellent, enfin un plugin sur les Tag Clouds.

    Il fonctionne à la perfection en intégrant « les modèles » dans dans un squelette html, par contre je n’ai pas obtenu de résultat en intégrant « des modèles » dans un article.

    Bravo et merci

    FDG

    • En effet, mes tests sur une version de developpement confirment ce que tu dis: <nuage> ne semble pas fonctionner alors que <nuage1> et <nuage1|popularite> oui... ça marchait pourtant bien à l’époque de la publication de cet article... à suivre...

      J’ai pas réussi de la journée à lire ton article, la page ne s’affiche pas, ça mouline, ça mouline et... rien !

    • J’ai corrigé la doc. En fait, on ne peut pas utiliser un raccourci de modele sans paramètres ou identifiant.

    • Si on tient vraiment à utiliser un nuage de mots-clés sans paramètre dans un #TEXTE spip, on peut ecrire <nuage|>. Certes, la notation n’est pas très élégante nin d’une logique transcendante, mais ça marche.

      à noter que dans un squelette #MODELE{nuage} fonctionne sans problème.

    Reply to this message

  • 1
    Perline

    Très joli plugin.
    Mais comme on en veut toujours plus, comment faire pour ajouter des infos annexes ?

    -  D’une part, par exemple une info au survol (un title avec des infos, par exemple la description du mot ou le nombre d’objets auxquels il est associé, etc.),
    -  d’autre part changer la graisse, la couleur, la police, etc. Directement dans le pipeline (nuage_pipelines_public.php) ?
    Merci beaucoup.

    • les fichiers à modifier pour cela sont plutôt modeles/nuage_fonctions.php et ses éventuels voisins :)

    Reply to this message

  • quelqu’un a t’il essayé de valider l’une de ses pages utilisant le plugin avec le modèle “nuage_popularite”?
    ici

    il paraît qu’il faut déclarer le style par un div (en css) et non plus par une balise <font>
    mais dans le cas de ce plugin cela me semble compliqué à réaliser

    du coup je ne peut pas valider ma page en XHTML 1.0
    même si c’est pas un fin en soit...

    Reply to this message

  • 6

    C’est génial ! Merci. Après utilisation, il manque certaines choses : pouvoir passer l’id_article (nuage de mots d’un article) ou d’une rubrique ou d’un auteur etc.

    Merci

    A+

    • il manque certaines choses

      Je ne pense pas. Pour faire ce pour quoi il a été conçu, il ne manque rien. :)

      Je ne me représente pas ce que pourrait-être un nuage de mots d’un article, par exemple... S’il s’agit d’une liste de mots-clés associés à l’article, le modèle article_mots ou la balise #LESMOTS existent déjà, soit en standard, soit en contribution sur ce site. Et dans ce cas, tenter de faire varier la taille d’un mot-clé serait vain, me semble-t-il. Ou alors, je n’ai pas compris.

      Les nuages pour une rubrique ou un auteur, éventuellement, pourquoi pas... Tu peux toujours essayer et quand tu auras réussi, soumet-le sur la liste de discussion ou sur le dépôt svn de la zone. Bref, t’as plus qu’à ;)

    • est t’il possible d’utiliser ce plug’in en utilisant la base de mots du plug in “recherche étendue” (utilisant la table spip_index_dico) via la boucle INDEX fourni avec ce même plug’in.

    • Bravo et merci pour le plugin!
      Nous l’utilisons sur notre site http://www.letre.fr

      Corto

    • Merci pour cette contribution, nous sommes en train de le tester. Néanmoins, nous ne sommes pas trop sûr de la bonne manière de mettre en valeur le nuage de mots. Pour tous les visiteurs, n’hésitez pas à nous faire par de votre avis. Toute critique, tant qu’elle est constructive, est toujours la bienvenue ;o)

    • pour avoir un nuage des tags comme sur yahoo on m’a conseillé d’installer le plugin nuages sur mon site spip, ce que j’ai fait; le plugin est bien activé ; en utilisant je n’obtiens rien et je dois passer par [(#MODELEnuage_populariteid=6)]; effectivement avec modele ca affiche bien mon groupe de mots clés; en revanche je n’obtiens pas un nuage comme sur yahoo mais une liste de mots clés avec des puces et dont la taille police ne varie pas ; comment faire pour afficher un nuage classique avec les mots les uns à la suite des autres? et serait il possible que la prochaine version du plugin soit par defaut un nuage classique pour ceux qui n’y connaissent rien en programmation ca n’est pas simple...

      2e question/ je souhaiterai limiter l’affichage aux 10 / 20 mots les plus populaires, car mon groupe de mots clés fait entre 200 et 500 mots, donc l’intégralité du groupe prend trop de place pour etre affiché dans la colonne de droite en bas de page.

      Le resultat pas terrible j’en conviens est visible actuellement ici : http://www.quenechdu.com/spip ; cela fait plusieurs semaines que j’essaie de resoudre ce probleme d’affichage sans succes.

      j’ai essayé différents filtres derriere [(#MODELEnuage_populariteid=6)] par popularité etc pour tenter de limiter l’affichage aux mots les plus populaires mais sans succes

      Merci d’avance pour votre aide.

    • j’ai repris le css du dessus et effectivement les puces et les sauts à ligne disparaissent ainsi que la fréquence ce qui donne un nuage;

      en revanche si sous firefox l’affichage est nickel , il est degueulace sur internet explorer 7. comment se fait il que le plugin plante sous ie7 mais pas firefox ?

      2e question je viens de m’apercevoir que le plugin nuage plante le plugin thickbox qui est implanté dans le squelette blip quand j’affiche le nuage dans un article ; j’ai donc du supprimé laffichage du nuage sur tout le site, et le limiter aux pages sommaires du site.

      Si qqn a une idée du pkoi ca ne saffiche pas sous ie et pkoi le plugin nuage plante le plugin thickbox (alors que les nuages nont aucun rapport avec la gestion des images!) thanx

    Reply to this message

  • Good job !
    Comment faire pour afficher les n mots clés les plus “populaires” ?

    Reply to this message

  • 4
    JpBastien

    D’autres que moi rencontrent-ils ce soucis...

    J’utilise [(#MODELEnuageid=5)] pour afficher les mots contenu dans le groupe 5. Jusque là tout va bien. Il affiche bien ce que je lui demande à une exception prêt... il m’indique un message de ce type NOMDUTAG(xx/xx).
    Merci du coup de main.

    • on cache cette partie du texte par le style ’frequence’ que l’on cache. la classe css frequence est définie dans la partie entete de la page si tu utilise la balise #INSERT_HEAD. Cette balise est-elle dans ton squelette ?

    • Euh... non, je n’ai pas de balise #Insert_head... et comment puis-je faire sans ?

      Je peux la class=“frequence” apparaît dans quel css de spip pour que je m’en inspire ?

      Merci

      Jean-Philipp

    • Dans cet article :

      On insère aussi quelques styles css dans l’entête de la page, ce qui nécessite l’emploi de la balise #INSERT_HEAD.

      dans la doc :

      #INSERT_HEAD : une balise a insérer dans la zone

      ...

      de vos squelettes pour permettre aux plugins d’ajouter automatiquement des css ou des javascript.

      Sinon, tu peux toi-même définir la classe frequence dans un fichier css, en effet. à noter que le nuage est une liste non-enumérée en html (ul class=nuage/li), mais ça dépasse le cadre de cet article

    • Apparaît donc dans le fichier nuage_pipelines_public.php du plugin.

      Merci à tous de votre aide.

      Jean-Philippe

    Reply to this message

  • chris28

    Pour ceux qui cherchent à faire une présentation des tags comme avec dotclear voici le code CSS que j’utilise :

    ul.nuage { 
    font-size:  80%; 
    list-style-type: none;
    margin: 0 ;
    padding : 0;
    }
    
    ul.nuage li{
    text-decoration: none;
    display: inline;
    padding-right: 5px ;
    }
    
    ul.nuage li a{
    text-decoration: none;
    }

    Reply to this message

  • 2
    Chili Palmer

    y’a t’il un myen de modifier la taille des tags pour qu’il ne soient pas aussi gros ?

    • Oui, il y a un moyen, jouer avec les styles CSS, les tags sont affichés sous forme de liste non ordonnées ( <ul class='nuage'> <li> ) et un style “inline” font-size pour chaque tag, exprimé en em.

      Si on ajoute dans sa propre feuille de style css, ul.nuage { font-size: 60%; } on réduit la taille globale du nuage et proportionnellement de chaque mot clé. Attention quand-même à la réduction, on risque de ne plus pouvoir lire.

    • Chili Palmer

      excellent, ça marche impec !

      c’est vrai que pour les css, j’ai pas trop l’habitude des “em” mais plus des “%” ou des “px”...

    Reply to this message

Add a comment

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 / PostgreSQL
  • 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 apparait.

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.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom