Définitions et FAQ

Ce petit plugin valorise les termes définis (dfn) et les listes de définitions (dl, dt, dd) et transforme celles marquées « faq » en FAQ dépliable.

Mise en valeur des définitions

Ce plugin valorise les éléments HTML dédiés aux définitions, méconnus et trop peu utilisés. Employez ces balises dans la rédaction de vos articles, pour améliorer leur sémantique (et donc leur indexation, leur référencement, leur accessibilité [1], etc).

Terme défini : dfn

Lorsqu’on définit un terme au fil d’un texte, celui-ci est à placer dans l’élément HTML dfn. Exemple :
« Le polatouche est un écureuil volant » s’écrit :
Le <dfn>polatouche</dfn> est un écureuil volant.

Liste de définitions : dl, dt, dd

Très pratiques pour des définitions qui se succèdent, comme dans un glossaire ou une FAQ, les listes de définitions comportent deux parties, un terme et une description. Exemple :

<dl>
    <dt>Grenouille</dt>
    <dd>Truc vert humide</dd>
    <dt>Lapin</dt>
    <dd>Truc chaud et doux</dd>
</dl>

Ce plugin habille ces éléments d’un style minimal par défaut, de façon à les rendre un peu plus visibles, pour vous inviter à les employer. Pour en savoir plus, consultez les documentations HTML de référence, dont cet article traduit sur Pompage.net : « Les listes de définitions : mal utilisées ou mal comprises ? ».

Création de FAQ

Ce plugin permet de réaliser facilement une FAQ, c’est-à-dire une liste de questions fréquentes accompagnées de leurs réponses. Cette FAQ est constituée d’une liste de définitions cliquable open-close : la réponse se déplie lorsque l’internaute clique sur la question, puis se replie s’il la clique à nouveau.

Voici les deux façons de créer une FAQ sur votre site :

* Création d’un article-FAQ (par le rédacteur)

  1. Rédiger les questions et réponses dans un article dédié,
  2. Baliser correctement : les questions entre <dt>, les réponses entre <dd> et l’ensemble entre <dl class="faq"> et </dl>.

* Création d’une rubrique-FAQ (par le webmestre)

  1. Stocker les questions-réponses, à raison d’un couple par article, où la question constitue le titre,
  2. Ranger ces articles dans une rubrique dédiée [2],
  3. Inclure la noisette fournie par le plugin, dans le squelette de rubrique correspondant, de cette façon : <INCLURE{fond=inc-rubrique-faq}{id_rubrique}>.

Ces deux types de FAQ peuvent co-exister au sein d’un même site, où il est possible de créer autant de FAQ que souhaité.

Voici un exemple de FAQ créé avec ce plugin, assortie à la charte graphique du site de l’UPSTI :

Notes

[1Notons toutefois que, contrairement aux listes de définitions, dfn n’améliore pas l’accessibilité. Cf. cette discussion : « Synthèse vocale et dfn ».

[2Rappel : il est possible de créer des variantes de squelettes, en dupliquant rubrique.html en rubrique-11.html si votre Rubrique de FAQ a le numéro 11.

Remarque : ce plugin n’apporte qu’une surcouche (stylistique et comportementale) sans grande incidence. En l’absence du plugin, votre contenu reste correctement structuré et exploitable.

Remarque 2 : les dl, dt, dd sont nativement utilisés par SPIP pour l’insertion des documents dans les articles, ce qui complique leur habillage CSS en vue d’un usage simple en tant que... liste de définition (voir ticket #1934). Ce plugin les rend à nouveau disponible à la rédaction. Cependant soyez bien précis lorsque vous essayerez de personnaliser leur habillage via CSS : cela reste délicat.

L’icône choisie pour ce plugin est de Harwen Zhang.

Discussion

9 discussions

  • 2
    Boll’s

    Bonjour,

    Je viens d’installer le plugin et créer une première FAQ sans difficultés. Pas contre, je ne saisis pas comment utiliser les dfn et les dl/dt/dd :o(
    J’ai besoin de faire apparaitre une infobulle avec la définition du mot. L’option dfn est-elle la bonne avec ce plugin et si oui comment l’utiliser ?

    • Ce plugin n’apporte rien de plus aux infobulles, qui se font comme d’ordinaire, en HTML, par l’ajout de l’attribut title="..." sur les éléments ad hoc.

      Attention à ne pas confondre : <dfn> signale un terme défini dans le texte environnant, pas ailleurs.

    • Pour que les css s’appliquent en SPIP 3.0.17 + sarka 3.4.5, il faut rédiger les FAQ en précisant

      <dl class="faq js">

      il me semble. Sinon, les boutons plier/déplier ne s’affichent pas devant les questions entre autre.
      Exemple :

      <dl class="faq js">
         <dt>Quel est la couleur du cheval blanc d'henri IV ?</dt>
         <dd>Dur de se prononcer - étude en cours .... </dd>
         <dt>Lapin</dt>
         <dd>Truc chaud et doux.</dd>
      </dl>

    Répondre à ce message

  • Bonjour,

    Après une mise à jour de la dernière version du plugin, il semblerait que les fichiers « inc-rubrique-faq.html » et « inclure/rubrique-faq.html » aient disparu … ou alors est-ce la deuxième méthode de création de F.A.Q. qui a vocation à disparaître du plugin (ce qui serait dommage AMHA).

    Pour ceux qui utilisaient -comme moi- cette méthode de création de F.A.Q., il est possible de rapatrier ces deux fichiers de la version du plugin pour SPIP 2.

    Y

    Répondre à ce message

  • Bonjour,

    2 petites remarques sur cet excellent plugin :

    • Avec la version 3 + zpip (peut etre selon le thème) : pas de CSS incluses
    • Le javascript ne masque que le premier dd, or on peut utiliser plusieurs dd (j’en utilise une pour l’introduction + une pour les meta de publication et le lien ’voir la suite’) : J’ai donc modifié le javascript comme ci dessous.
    $(document).ready(function(){
    	$('dl.faq > dt').addClass("close").click(function(){
    		$(this).toggleClass("close").nextUntil("dt", "dd").toggle('fast');
    		return false;
    	}).nextUntil("dt", "dd").hide();
    });

    D’ailleurs : cela serait peut être intéressant de remplacer le click par un delegate. Il semble que delegate soit plus performant.
    (je peux envoyer sur la zone si tu m’en donne la permission)

    Denis

    Répondre à ce message

  • Bonjour,

    j’avais utilisé le plugin sur un spip 2.xx version rubrique avec des artcilces dedans et ça avait bien marché voir ici

    Là j’essaie d’utiliser le plugin sur un Spip 3.08 mais en version article, en fait j’aimerais pourvoir mettre des témoignages utilisateurs sous la même forme en fin d’un article normal est-ce possible ?

    Sinon dois-je faire une article exprès ? Et que dois-je faire extaement au niveau, squelettes, mots-clefs etc.

    Merci

    Répondre à ce message

  • 1

    De quoi nécéssite ce plugin pour fonctionner ?

    Je l’avais installé sur un site il y a deux ans, ça marchait parfaitement.
    Maintenant ça ne marche plus :
    Quand je clic sur la question la réponse s’ouvre et se referme aussi tôt et je n’ai pas les images devant les questions.

    J’ai fais un test en mettant uniquement
    La question et la réponse apparaissent bien, mais en simple texte brut.

    Je ne sais pas quoi faire, je vois pas d’où ça vient ...

    • Un problème de CSS ? Qu’avez-vous modifié sur le site avant que ça dysfonctionne ? Ce plugin ne nécessite rien de particulier (à part le jQuery nativement inséré par SPIP).

    Répondre à ce message

  • 1

    Bonjour,
    j’utilise ce plugin sur un de mes sites, je met un formulaire a lintérieure

    <dl class="faq">
    <dt>Formulaire d'envoie</dt>
    <dd>#FORMULAIRE_CONTACT</dd>
    </dl>

    quand j’arrive sur l’article je dois voir juste la ligne formulaire d’envoie et aprés clique le formulaire se déroule (jusque là c’est bon). Mais je veux garder le formulaire ouvert jusqu’à confirmation de l’envoie de message et ensuite fermer la ligne. Mais là impossible quand je clique sur le bouton envoyer le fênêtre se ferme sans que je termine. Merci de votre aide !

    • Bonjour,
      ya vraiment pas quelqu’un qui peut m’aider ?? Merci

    Répondre à ce message

  • Suite à vos retours (merci @spipfactory @gilcot et @Joseph), j’ai allégé les styles pour qu’ils soient moins intrusifs, cf. : 54915. Le plugin dévie donc légèrement de son rôle initial et passe en version 2.

    Répondre à ce message

  • 6

    Je rencontre un pb avec le plugin faq + nuage.

    nuage m’affiche ceci :

    comment y remédier ?

    merci

    • Votre « nuage » hérite du style des listes de définition car il est construit en dl, dt, dd... Il suffit de restyler par dessus. Voir le PS de cet article.

    • assobachant

      J’ai lu le PS ; j’ai fait des essais mais bon je suis un piétre codeur
      donc remy si tu peu m’en dire plus pour remedier au problémes je t’en serai gré

      @micalement

    • Je ne connais pas le plugin nuage ni les squelettes du site concerné. Il faudrait examiner le code et voir les fichiers impliqués pour faire ce débug CSS... Si vous ne savez pas vous-même, faites-vous aider d’un bon intégrateur, non ?

    • Je n’ai pas regardé le code de ce plugin avant de répondre et je n’utilise pas Nuages non plus... Mais je pense que les styles de ce plugin devraient s’appliquer à .contenu dl (car « contenu » est la classe par défaut de la zone de texte principale de « -dist » et donc cela n’impacterait pas sur l’usage du « tag DL » ailleurs —enfin, je ne pense pas que Nuage soit mis dans la « DIV de classe contenu » mais je peux me tromper) ainsi qu’à dl.spip (car si un jour on a des raccourcis natifs ils porteront la classe « spip » comme les autres d’une part, et les concepteurs de squelettes qui veulent les mêmes styles en dehors de « contenu » sauront le rajouter)

    • je pense que les styles de ce plugin devraient s’appliquer à .contenu dl

      Euh non, mauvaise idée :
      -  ce sélecteur est différent selon les squelettes utilisés
      -  on peut afficher une faq ailleurs que dans la « zone de texte principale »
      -  nuage peut être utilisé dans la « DIV de classe contenu »
      -  etc.

      La bonne approche serait de ne pas styler par défaut ou de pouvoir désactiver la feuille de style, ce que je ferais prochainement.

    • -  J’ai précisé que je raisonnais par rapport à squelette-dist ;) Après il faut de toute façon une css adaptée avec un squelette spécifique... Mais le plugin ne paraitra pas intrusif.
      - Utilisé ailleurs que dans la zone de texte principale, il est toujours possible de sélectionner les styles du plugin (j’ai proposé la classe spip pour cela, par rapport au Spip par défaut)
      - Comme je le disais, je n’utilise pas nuage, et dans le cas de spipfactory ça avait l’air d’être une noisette

      Pour désactiver la feuille de style, c’est déjà le cas en désactivant le plugin ; et celui-ci perd beaucoup de son intérêt si on ne style pas par défaut (en même temps mes proposition allaient presque dans ce sens : ne pas tout styler par défaut... mais permettre de styler le max, les cas non pris en compte permettant de réduire les effets de bords)

      En tout cas j’aime bien les styles proposés par ce plugin (que j’ai découvert en me demandant comment habiller mes listes de définitions qui n’avaient même plus les styles par défaut du navigateur, du fait du reset de Sarkaspip qu j’utilise

    Répondre à ce message

  • 8

    Bonjour Romy,

    ce plugin est très intéressant mais je me demande s’il ne devrait pas être moins invasif, je veux dire styler uniquement les dl dd et dt contenus dans une balise dl ayant la classe faq ?

    En effet, en stylant toutes les balises, cela interfère d’une part avec ce qui a pu être prévu par un thème et, d’autre part, avec les modèles d’incrustation de documents qui utilisent eux aussi les balises dl, dd, dt.

    Amicalement

    • Oui, ce serait mieux. Mais on ne peut pas demander au rédacteur de saisir le code HTML doté des sélecteurs CSS discriminants (par exemple : <dl class="spip faq"><dt>Terme à définir</dt><dd>etc.). Il faudrait proposer un raccourci de saisie. En attendant, ce plugin a le fait le choix de simplifier la vie du rédacteur, plus que celle du codeur, oui.

      Les raccourcis SPIP dédiés pourraient être :

      -? Titre
      -! Définition

      ou plutôt, en adoptant la jolie syntaxe Markdown :

      Pomme
      :   Fruit charnu, de forme quasi sphérique, déprimée au 
          sommet et à la base, à pulpe homogène.
      :   Une compagnie d'ordinateur américaine.
      
      Orange
      :   Fruit de l'oranger, arbre de la famille des Rutacées.

      Voir ce ticket : http://core.spip.org/issues/1934

    • C’est en lisant le ticket que j’ai découvert ce plugin. Effectivement, des raccourcis nativement pris en compte par SPIP seraient un plus. Et permettraient de cibler différemment les listes du texte et celles du squelette.

      Amicalement

    • Personnellement, la syntaxe

      -? quoi donc
      -? quoi d'autre
      -! ceci et cela

      me plait mieux... (et ça reste cohérent avec ce qui se fait déjà)
      Mais je rajouterai quand même une paire de « tags » englobants :

      • <faq>...</faq> qui produirait <dl class="spip faq">...</dl> (que l’on pourra mettre directement aussi)
      • <gloss>...</gloss> qui produirait <dl class="spip glossaire">...</dl> (que l’on pourra mettre directement aussi)

      Soit dit en passant, rien n’interdit que ce plugin rajoute des raccourcis (et les intègre au porte-plume ?) ; le seul risque étant de se retrouver avec des « - ? » et « - ! » à la désactivation du plugin (pour ceux qui auraient fait usage de ces raccourcis) mais bon...

    • Les raccourcis à la mode SPIP — avec un tiret : « -? » et « -! » — sont assez limitatifs : ils présupposent qu’on n’a jamais qu’un ligne en face... Or j’ai souvent plusieurs paragraphes à caser dans le <dd> (dans les <li> aussi) !

      La syntaxe Markdown est éprouvée et offre plus de possibilités. Quoiqu’il en soit, il faudra essayer : il n’y a qu’à l’usage qu’on saura quel raccourci est le plus approprié.

    • Avec l’arrivée de Textwheel dans SPIP 3 je suppose qu’il devrait être possible de tester, de manière expérimentale, un support complet ou quasi-complet de la syntaxe Markdown.

    • En effet, j’ai souvent de longs paragraphes en terme (de définition et de liste non ordonnée) mais jamais plusieurs paragraphes... (mais je comprends ce que tu veux)
      Et si cela devrait arriver je préfère baliser directement en HTML, ce que je fais pour tout balisage que je juge complexe (contrairement à ce qu’on pense, distribuer des tags-html n’est pas plus compliqué que de faire du BB-code —fortement inspiré du précédent— tant qu’on n’a pas à rajouter des attributs bien sur... et qu’on n’oublie pas de refermer —là, outre d’être plus court, les raccourcis sont plus simples) ; comme une fois sur une page de DL qui imbriquait deux autres DL (ici ça ferait parait en utilisant un tag englobant sinon il faudrait quelque chose comme « - ?? » ?) et des UL (jusqu’à deux niveaux aussi).
      Ma proposition (et ressenti) était par rapport aux usagers (et aux usages assez simples de la majorité des rédacteurs) de Spip, sinon je suis plutôt Textile (un cousin de Markdown) pour les mêmes raisons que toi (plus puissant et éprouvé)

    • L’évolution idéale de SPIP serait que le coeur ait un mécanisme plus souple et paramétrable permettant de choisir (configuration globale pour le site) la syntaxe à utiliser (donc on active le moteur frontal dédié) : Spip-traditionnel, Wiki, Markdown, BBCode, XHTML-simple, etc. il faudra bien entendu adapter les plugins pour préciser quel moteur de syntaxe ils complètent (et que leurs nouvelles syntaxe ne soit prise en compte que si le dit moteur est actif)

    • a priori la prochaine version de SPIP fonctionerra à base de Textwheel, donc on peut faire évoluer « facielement » la syntaxe

    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