SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 293 visiteurs en ce moment

Accueil > Navigation > Nuage de mots (tagcloud) > Nuage de mots-clés > Habillage graphique du plugin nuage

Habillage graphique du plugin nuage

28 juillet 2007 – par Cerdic, James – commentaires

7 votes

Profitant des nouveautés de SPIP1.9.3, le plugin nuage évolue aussi du coté intégration graphique.

Changements de l’intégration graphique de la version 1.3 du plugin

  • On peut "exposer" des mots-clés,
  • l’habillage du nuage est maintenant géré par un fichier nuage.css surchargeable pour faciliter la vie des infographistes.
  • le différenciation graphique de l’importance des mots les uns par rapport aux autres se fait par classe css.

Explications

Dans le modèle par défaut de ce plugin, si on lui fournit un identifiant d’article en paramètre, on va collecter les mots-clés associés à cet article pour les « colorer » différemment des autres mots-clés du nuage en leur ajoutant la classe « on » qui, dans le cadre standard de SPIP est utilisée via la balise #EXPOSE. On peut ainsi trouver une certaine unité graphique sur le site.

La logique du nuage est d’imbriquer des balises html comme suit :

ul > li > a > span

Pour différencier la présentation du nuage des autres listes de type ul dans le site, on définit une classe « nuage » dans le fichier de feuilles de style nuage.css de la façon suivante :

  • ul.nuage : Le nuage est une liste non-ordonnée de class "nuage",
  • ul.nuage li : chaque mots-clés est entièrement inclus dans un des éléments de cette liste non-ordonnée (<li>...</li>),
  • ul.nuage a : chaque élément de liste contient un lien cliquable, l’habilllage de ce lien n’est pas définit par défaut,
  • ul.nuage a.on : les mots-clés exposé peuvent être habillé d’une manière particulière, ce n’est pas le cas par défaut, et on bénéficie de l’habillage standard des éléments exposé de SPIP que cette class définit dans les feuilles de styles distribuées avec le logiciel,
  • ul.nuage span.frequence : afin de fournir un nuage accessible, et ainsi restituer l’information pour des interfaces ne tenant pas compte de l’effet visuel du plugin, on affiche aussi un rapport numérique entre chaque mot-clé et le mot-clé le plus important. Ce texte est "caché" pour les navigateurs "graphiques" les plus courants grâce à la définition de la classe « frequence ». [1]

Personnalisation

Pour modifier l’aspect graphique du nuage sur votre site, copiez ce fichier dans votre dossier squelettes/ et faites vos modifications.

Par exemple, le code suivant affiche le nuage dans un fond noir, les liens sont blancs et les mots-clés « exposés » sont en rouge :

Ce fichier est chargé automatiquement dans l’entête de tous squelettes intégrant la balise #INSERT_HEAD. Dans le cas contraire (pas de balise #INSERT_HEAD), deux solutions :

  • ajouter un lien manuellement dans vos squelettes : <link rel="stylesheet" href="#CHEMIN{nuage.css}" type="text/css" media="all" />,
  • ajouter ces définitions de style dans vos propres fichiers css.

Différenciation des mots-clés les uns par rapport aux autres - Janvier 2008

Le plugin propose une dizaine de classes CSS, notées .nuage0 à .nuage10, afin de personnaliser, comme ci-dessus, la distinction entre les mots selon leur fréquence. Par défaut, elles changent la taille (de 0.9em à 1.9em). Mais on peut les changer puisque le style ne dépend plus du calcul, mais d’une feuille de style. Ces classes s’appliquent aux liens.

  • ul.nuage a.nuage0 : la classe des mots-clés les moins fréquents du nuage.
  • ul.nuage a.nuage10 : la classe des mots-clés les plus fréquents du nuage.

Voir la revue Politique à titre d’exemple d’application.

Voir en ligne : L’article de présentation du « Nuage (de mots-clés) »

Notes

[1Ce qui rend ce plugin accessible, grâce aux efforts conjoints de Messieurs Goetsu & Olivier Gendrin, qu’ils soient par là-même remerciés de leur patience et de leur compétence.

Dernière modification de cette page le 18 février 2013

Retour en haut de la page

Vos commentaires

  • Le 18 février 2013 à 10:18, par pierbou En réponse à : Habillage graphique du plugin nuage

    Dans l’exemple de personnalisation ci-dessus :

    /*chaque mot-cle, element de liste*/
    ul.nuage li {
            display: inline;
            white-space: nowrap;
    }

    Il serait plus judicieux d’associer la propriété white-space: nowrap; à la balise <a> plutôt qu’à la balise <li>.

    /*chaque mot-cle, element de liste*/
    ul.nuage li {
            display: inline;
    }

    /*chaque mot-cle, lien*/
    ul.nuage li a {
            white-space: nowrap;
     /*ajout perso */
            color: white;
     /*fin ajout perso */
    }

    Dans le cas contraire, le moteur webkit de Safari et Chrome interprète mal les césures entre les mots-clés. On risque fort d’outre-passer les propriétés de largeur d’un élément parent et casser la mise en page !

    (testé sous Chrome 24.0.1312.57 - Safari 5.0.5)

    Répondre à ce message

  • Le 26 mars 2011 à 18:29, par Horst En réponse à : Habillage graphique du plugin nuage

    -  sur notre site http://indignezvous.de (en francais) le systè,e nuage présente bien les mots-clès
    -  sur le site identique http://empoerteuch.de (en allemand) et
    -  sur le même site http://time-for-outrage.net (en anglais)
    les thèmes sont uniquement indiqués par des chiffres

    Comment faire pour avoir le même effet qu’en version francaise ?

    Répondre à ce message

  • Le 10 août 2010 à 11:30, par Bahi En réponse à : Habillage graphique du plugin nuage

    J’essaye de développer un site sous Multiflex3, Spip 2.0.10. Quelqu’un pourrait m’éclairer sur la procédure à suivre pour afficher un nuage (qui fonctionne très bien) toujours en haut et à droite de chaque article ? J’ai essayé avec nuage.css en vain. Merci d’avance.

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Mailsubscribers

    16 janvier 2013 – 274 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • noiZetier v2

    9 novembre 2012 – 36 commentaires

    Le noiZetier offre une interface d’administration permettant d’insérer au choix des éléments modulaires de squelettes (noisettes) et de les ajouter ainsi à ses squelettes. Compatibilité La version 2 du noizetier fonctionne sous SPIP 3. Elle est (...)

  • cirr : plugin « rédacteur restreint »

    29 octobre 2010 – 60 commentaires

    Ce plugin « cirr : rédacteur restreint » permet d’affecter des rubriques aux rédacteurs et modifie les droits afin qu’un rédacteur restreint (ou un administrateur restreint) voit dans l’espace privé uniquement les rubriques qui lui sont affectées (et leur (...)

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

Ça spipe par là