SPIP-Contrib

SPIP-Contrib

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

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

Accueil > Rédaction > Définitions en FAQ > Définitions et FAQ

Définitions et FAQ

14 octobre 2009 – par tetue – 27 commentaires

23 votes

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 :

Voir en ligne : http://plugins.spip.net/faq

P.-S.

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.

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.

Dernière modification de cette page le 1er mai 2015

Retour en haut de la page

Vos commentaires

  • Le 13 avril 2010 à 09:39, par Boll’s En réponse à : Définitions et FAQ

    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 ?

    • Le 13 avril 2010 à 11:23, par tetue En réponse à : Définitions et FAQ

      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.

    • Le 3 février 2015 à 11:22, par Nitram En réponse à : Définitions et FAQ

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

      1. <dl class="faq js">

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

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

      Télécharger

    Répondre à ce message

  • Le 19 février 2014 à 13:02, par ydikoi En réponse à : Définitions et FAQ

    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

  • Le 30 mai 2013 à 10:41, par Shnoulle En réponse à : Définitions et FAQ

    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.
    1. $(document).ready(function(){
    2. $('dl.faq > dt').addClass("close").click(function(){
    3. $(this).toggleClass("close").nextUntil("dt", "dd").toggle('fast');
    4. return false;
    5. }).nextUntil("dt", "dd").hide();
    6. });

    Télécharger

    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

  • Le 9 mai 2013 à 13:17, par jfredd En réponse à : Définitions et FAQ

    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

  • Le 1er septembre 2012 à 15:29, par ? En réponse à : Définitions et FAQ

    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 ...

    • Le 3 septembre 2012 à 10:23, par tetue En réponse à : Définitions et FAQ

      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

  • Le 15 février 2012 à 00:43, par  ??? En réponse à : Définitions et FAQ

    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 !

    • Le 15 février 2012 à 10:20, par  ??? En réponse à : Définitions et FAQ

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

    Répondre à ce message

  • Le 5 décembre 2011 à 19:09, par tetue En réponse à : Définitions et FAQ

    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

  • Le 26 avril 2010 à 08:37, par spipfactory En réponse à : Définitions et FAQ

    Je rencontre un pb avec le plugin faq + nuage.

    nuage m’affiche ceci :

    comment y remédier ?

    merci

    PNG - 10.1 ko
    • Le 26 avril 2010 à 10:05, par tetue En réponse à : Définitions et FAQ

      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.

    • Le 2 juillet 2010 à 14:40, par assobachant En réponse à : Définitions et FAQ

      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

    • Le 2 juillet 2010 à 15:20, par tetue En réponse à : Définitions et FAQ

      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 ?

    • Le 20 septembre 2011 à 10:29, par gilcot En réponse à : Définitions et FAQ

      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)

    • Le 20 septembre 2011 à 10:49, par tetue En réponse à : Définitions et FAQ

      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.

    • Le 20 septembre 2011 à 11:42, par gilcot En réponse à : Définitions et FAQ

      -  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

  • Le 13 septembre 2011 à 14:47, par Joseph En réponse à : Définitions et FAQ

    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

    • Le 13 septembre 2011 à 16:37, par tetue En réponse à : Définitions et FAQ

      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

    • Le 14 septembre 2011 à 10:29, par Joseph En réponse à : Définitions et FAQ

      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

    • Le 20 septembre 2011 à 10:20, par gilcot En réponse à : Définitions et FAQ

      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...

    • Le 20 septembre 2011 à 10:36, par tetue En réponse à : Définitions et FAQ

      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é.

    • Le 20 septembre 2011 à 10:54, par Joseph En réponse à : Définitions et FAQ

      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.

    • Le 20 septembre 2011 à 11:11, par gilcot En réponse à : Définitions et FAQ

      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é)

    • Le 20 septembre 2011 à 11:20, par gilcot En réponse à : Définitions et FAQ

      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)

    • Le 20 septembre 2011 à 11:23, par Maïeul En réponse à : Définitions et FAQ

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

    Répondre à ce message

Répondre à cet article

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 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à