html, doc: add references for dictionnaries

- Adds the HTML used to display the dictionnaries references, with
  metadata exposed to Zotero.
- Documents how to add:
  - HTML bloc.
  - Bibliographic reference in an UL and how to undo list style.
  - Bibliographic metadata exposed to Zotero.

Co-Authored-by: iGor milhit <igor.milhit@unige.ch>

README.md

@@ -11,3 +11,132 @@ Ce projet a pour objectif de documenter mes méthodes d'édition du portail de
 médecine clinique du site de la bibliothèque de l'UNIGE. Il contient également
 des fichiers HTML lorsque je crée un bloc HTML dans concrete5 plutôt qu'un bloc
 de type contenu.
+
+## Les blocs HTML
+
+Les blocs contenus, s'ils facilitent la vie avec leur éditeur WYSIWYG, sont
+toutefois limités pour réaliser des structures HTML de meilleure qualité et
+surtout permettent moins d'améliorer le rendu, puisqu'il faut utiliser les
+classes disponibles.
+
+Le bloc HTML oblige d'écrire soi-même le HTML, mais à l'inverse, il permet
+d'écrire soi-même le HTML, et ainsi d'avoir plus de liberté, que ce soit pour
+maîtriser les balises utilisée et améliorer ainsi la sémantique, ou pour
+affiner la mise en forme grâce à l'inclusion de règles CSS dans la balise
+`<style>`.
+
+Pour ma part, je procède ainsi :
+
+1. Je rédige le HTML que je désire dans un éditeur de texte, si possible qui
+   soit en mesure d'identifier les erreurs de syntaxe.
+1. J'utilise une balise `<article>` qui contient l'ensemble du code nécessaire,
+   auquel j'ajoute une classe du genre `mc-transversales-bd`, à savoir les
+   initiales de la discipline, le nom de la page, le nom de la section (du
+   bloc). C'est aussi dans cette balise que je place la balise `<style>`
+   contenant les règles CSS, du moins si c'est nécessaire.
+1. J'ajoute un nouveau bloc, un bloc HTML.
+1. Je copie-colle mon code HTML et j'enregistre.
+
+```html
+<article class="mc-transversales-bd">
+<!-- Le code HTML viendra ici -->
+<style>
+// Les règles CSS viennent ici
+.mc-transversales-bd {
+  fonte-size: large;
+}
+</style>
+</article>
+```
+
+## Titres
+
+Les titres doivent contenir les classes `o-title--hx` où x correspond au niveau
+de titre.
+
+```html
+<h2 class="o-title--h2">Titre</h2>
+```
+
+S'il s'agit d'un titre dans un bloc de propriété *Box - Titre - 2017*, alors il
+doit également contenir la classe `c-NewsWall-itemTitle`.
+
+```html
+<h2 class="o-title--h2 c-NewsWall-itemTitle">Titre</h2>
+```
+
+## Références bibliographiques
+
+### Liste à puce sans puce
+
+Pour afficher une référence bibliographique sur plusieurs lignes, on peut
+utiliser la liste non ordonnée. Par contre, il faut annuler la règle de style
+qui affiche des puces d'une manière un peu étonnante.
+
+```html
+<article class="mc-dic-item">
+    <ul>
+      <li>Marroun I. <em>Le nouveau dictionnaire médical</em>. 7<sup>e</sup> éd.</li>
+      <li>Issy-les-Moulineaux : Elsevier Masson, 2018.</li>
+      <li>Cote : REF 1 W 13 14 ed 7</li>
+      <li>
+        <a href="https://www.elsevierelibrary.fr/articledfreader/nouveau-dictionnaire-mdical"
+           lang="en"
+           hreflang="English"
+           ref="nofollow"
+           target="_blank">
+          Livre électronique en ligne
+        </a>.
+      </li>
+      <li>
+        <a lang="fr"
+           dir="ltr"
+           type="html/text"
+           href="https://slsp-unige.primo.exlibrisgroup.com/articleermalink/41SLSP_UGE/l0hvjc/alma991008098789705502"
+           hreflang="français"
+           rel="nofollow"
+           target="_blank">
+          Le document dans le catalogue Swisscovery
+        </a>.
+      </li>
+    </ul>
+    <span class='Z3988' title='url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_id=urn%3Aisbn%3A978-2-294-74357-3&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&amp;rft.genre=book&amp;rft.btitle=Le%20nouveau%20dictionnaire%20m%C3%A9dical&amp;rft.place=Issy-les-Moulineaux&amp;rft.publisher=Elsevier%20Masson&amp;rft.edition=7e&amp;rft.aufirst=Ibrahim&amp;rft.aulast=Marroun&amp;rft.au=Ibrahim%20Marroun&amp;rft.au=Thomas%20Sen%C3%A9&amp;rft.au=Jacques%20Quevauvilliers&amp;rft.au=Abe%20Fingerhut&amp;rft.date=2018&amp;rft.isbn=978-2-294-74357-3&amp;rft.language=fre%3Beng'></span>
+  </article>
+<style>
+.mc-dic-item > ul > li {
+  padding: 0 !important;
+}
+.mc-dic-item li:not([class])::before,
+.mc-dic-item li::before {
+  content: none;
+}
+</style>
+```
+
+La première règle permet de supprimer le *padding*, alors que la deuxième
+« vide » le contenu du `::before` contenant la puce sous forme de police
+d'écriture (fontawesome).
+
+### Exposer les données bibliographiques pour Zotero
+
+Une solution simple est l'ajout de *microdata* directement dans le HTML grâce
+aux [*COinS*][coins]. Et pour se faciliter la vie, il faut utiliser Zotero pour
+générer les données.
+
+**Ne fonctionne qu'au sein d'un bloc HTML, sinon concrete5 va effacer le
+`<span>`, car il est vide**, puisque tout est dans la partie attribut de la
+balise.
+
+1. Ajouter les références nécessaires dans son Zotero.
+1. Clic-droit sur la ou les références et « Exporter le document… ».
+1. Choisir le format « COinS ».
+1. Enregistrer le fichier sur son disque dur, l'extension de fichier `.html`
+   facilite un peu les choses.
+1. Copier le code obtenu (`<span class…></span>`) dans le contenu HTML du bloc.
+
+[L'exemple ci-dessus][liste] montre justement un exemple de référence
+bibliographique content les métadonnées `COinS` reconnues par Zotero.
+
+
+[coins]: https://www.zotero.org/support/dev/exposing_metadata/coins
+[liste]: #liste-à-puce-sans-puce

ressources-transversales-bd-html

@@ -0,0 +1,236 @@
+<article class="mc-bd-main">
+  <!-- Section Pubmed -->
+  <article class="mc-bd-item">
+    <header>
+      <a title="Accès à PubMed"
+         lang="en"
+         hreflang="English"
+         href="https://pubmed.ncbi.nlm.nih.gov/?otool=ichbfmglib">
+        <img class="img-responsive mc-bd-logo"
+             lang="en"
+             src="/biblio/index.php/download_file/view_inline/8526/"
+             alt="Logo de PubMed">
+        <h3 class="o-title--h3">
+          Pubmed
+        </h3>
+      </a>
+    </header>
+    <article>
+      <p>
+        Interface de recherche d’informations biomédicales élaboré par la
+        <em>National Library of Medicine</em> (NLM) aux États-Unis. Contient
+        des références d’articles issues d’environ 5600 journaux indexés dans
+        <em>Medline</em> (<em>Indexed for MEDLINE</em>), correspondant à
+        environ 90% du contenu de <em>PubMed</em>. Des références suivantes
+        sont également proposées : <em>Publisher supplied citations</em>,
+        <em>In-process citations</em>, articles en accès libre de <em>PubMed
+        Central</em> (PMC) et des ouvrages <em>NCBI Bookshelf</em>.
+      </p>
+    </article>
+      <footer>
+        <ul>
+          <li>
+            <a title="Accès à PubMed"
+               lang="en"
+               href="https://pubmed.ncbi.nlm.nih.gov/?otool=ichbfmglib"
+               hreflang="English">
+              Accès à PubMed (libre)
+            </a>.
+          </li>
+        </ul>
+      </footer>
+  </article>
+  <!-- Section Embase -->
+  <article class="mc-bd-item">
+    <header>
+      <a title="Accès à Embase"
+         lang="en"
+         href="https://www.embase.com"
+         hreflang="English">
+        <img class="img-responsive mc-bd-logo"
+             src="/biblio/index.php/download_file/view_inline/6074/"
+             alt="Logo de Embase">
+        <h3 class="o-title--h3">
+          Embase
+        </h3>
+      </a>
+    </header>
+    <article>
+      <p>
+        Base de données en sciences biomédicales et pharmaceutiques produite
+        par <em>Elsevier</em>. Offre une couverture de la littérature
+        biomédicale, indexant environ 8,500 journaux publiés. Propose une bonne
+        couverture des périodiques européens et des médicaments.
+      </p>
+    </article>
+      <footer>
+        <ul>
+          <li>
+            <a title="Accès à Embase"
+                 lang="en"
+                 href="https://www.embase.com"
+                 hreflang="English">
+              Accès à Embase (abonnement)
+            </a>.
+          </li>
+        </ul>
+      </footer>
+  </article>
+  <!-- Cochrane Library -->
+  <article class="mc-bd-item">
+    <header>
+      <a title="Accès à la Cochrane Library"
+         lang="en"
+         hreflang="English"
+         href="https://www.cochranelibrary.com/">
+        <img class="img-responsive mc-bd-logo"
+             src="/biblio/index.php/download_file/view_inline/8544/"
+             alt="Logo de la Cochrane Library">
+        <h3 class="o-title--h3">
+          Cochrane Library
+        </h3>
+      </a>
+    </header>
+    <article>
+      <p>
+        Ensemble de bases de données produites par la collaboration
+        <em>Cochrane</em> signalant des revues systématiques, des
+        méta-analyses, et des essais cliniques.
+      </p>
+    </article>
+    <footer>
+      <ul>
+        <li>
+          <a title="Accès à la Cochrane Library"
+             lang="en"
+             href="https://www.cochranelibrary.com/" hreflang="English">
+            Accès à la Cochrane Library (abonnement)
+          </a>.
+        </li>
+      </ul>
+    </footer>
+  </article>
+  <!-- Dynamed -->
+  <article class="mc-bd-item">
+    <header>
+      <a title="Accès au site web de Dynamed"
+         lang="en"
+         dir="ltr"
+         type="html/text"
+         href="https://www.dynamed.org"
+         hreflang="English"
+         rel="nofollow">
+        <img class="img-responsive mc-bd-logo"
+             src="/biblio/index.php/download_file/view_inline/8900/"
+             alt="Logo de Dynamed">
+        <h3 class="o-title--h3">
+          Dynamed
+        </h3>
+      </a>
+    </header>
+    <article>
+      <p>
+        Dynamed est un outil d'aide à la décision destiné aux corps médical par un
+        accès rapide aux meilleurs pratiques et recommandations. Elles sont mises à
+        jour régulièrement sur la base de la littérature scientifique biomédicale
+        (EBM). Des alertes listent les évolutions récentes et il est possible de
+        suivre un sujet particulier afin d'être notifié lorsqu'il est mis à jour. Des
+        fiches sur les médicaments permettent de vérifier leurs usages ainsi que les
+        interactions entre différentes molécules. Des calculateurs interactifs et des
+        arbres de décisions sont également disponibles.
+      </p>
+      <p>
+        Des applications pour téléphones mobiles facilitent la consultation de
+        Dynamed là où c'est le plus utile.
+      </p>
+    </article>
+    <footer>
+      <ul>
+        <li>
+          <a title="Marche à suivre pour Dynamed"
+             lang="en"
+             dir="ltr"
+             type="html/text"
+             href="{CCM:BASE_URL}/fr/disciplines/medecine-clinique/ressources-documentaires/transversales/procedure-dynamed"
+             hreflang="English"
+             rel="nofollow">
+            Marche à suivre pour l'accès et l'installation de l'application mobile
+          </a>.
+        </li>
+        <li>
+          <a title="Accès au site web de Dynamed"
+             lang="en"
+             dir="ltr"
+             type="html/text"
+             href="https://www.dynamed.org"
+             hreflang="English" rel="nofollow">
+            Accès à Dynamed (abonnement)
+          </a>.
+        </li>
+      </ul>
+    </footer>
+  </article>
+  <!-- UpToDate -->
+  <article class="mc-bd-item">
+    <header>
+      <a title="Accès à UpToDate"
+         lang="en"
+         href="https://www.uptodate.com"
+         hreflang="English">
+        <img class="img-responsive mc-bd-logo"
+             src="/biblio/index.php/download_file/view_inline/8545/"
+             alt="Logo de UptoDate">
+        <h3 class="o-title--h3">
+          UptoDate
+        </h3>
+      </a>
+    </header>
+    <article>
+      <p>Ressource rédigée par des médecins et fondée sur des données probantes (EBM).
+        Des médecins, des éditeurs et des pairs examinateurs utilisent un processus
+        éditorial rigoureux pour synthétiser les informations médicales les plus
+        récentes et des recommandations fondées sur des preuves. C’est un outil par
+        excellence des médecins pour l’obtention des réponses fiables à des questions
+        cliniques pour améliorer les soins aux patients. Contient des informations sur
+        des sujets cliniques touchant plusieurs spécialités médicales telles que :
+        médecine interne, pédiatrie, chirurgie générale, etc.
+      </p>
+    </article>
+    <footer>
+      <ul>
+        <li>
+          <a title="Vidéo expliquant comment créer son compte"
+             lang="en"
+             href="http://vid.uptodate.com/watch/5TwtDspFFQEgQdqmgMEjXR?"
+             hreflang="English">
+            Comment créer son compte (vidéo de 53 sec., en anglais)
+          </a>.
+        </li>
+        <li>
+          <a title="Accès à UpToDate"
+             lang="en"
+             href="https://www.uptodate.com"
+             hreflang="English">
+            Accès à UpToDate (abonnement)
+          </a>.
+        </li>
+      </ul>
+    </footer>
+  </article>
+<style>
+.mc-bd-main {
+  font-size: large;
+}
+.mc-bd-item:not(:last-of-type) {
+  margin-bottom: 3em;
+}
+.mc-bd-item > header > a {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+}
+.mc-bd-logo {
+  width: 100px;
+}
+</style>
+</article>

ressources-transversales-dic.html

@@ -0,0 +1,96 @@
+<article class="mc-dic-main">
+  <article class="mc-dic-item">
+    <ul>
+      <li>Dorland W. <em>Dorland’s illustrated medical dictionary</em>. 33rd ed.</li>
+      <li>Philadelphia: Elsevier, 2020.</li>
+      <li>Cote : REF 1 W 13 9 ed 33</li>
+      <li>
+        <a lang="fr"
+           dir="ltr"
+           type="html/text"
+           href="https://slsp-unige.primo.exlibrisgroup.com/articleermalink/41SLSP_UGE/l0hvjc/alma991008098789705502"
+           hreflang="français"
+           rel="nofollow"
+           target="_blank">
+          Le document dans le catalogue Swisscovery
+        </a>.
+      </li>
+    </ul>
+    <span class='Z3988' title='url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_id=urn%3Aisbn%3A978-1-4557-5643-8&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&amp;rft.genre=book&amp;rft.btitle=Dorland&apos;s%20illustrated%20medical%20dictionary&amp;rft.place=Philadelphia&amp;rft.publisher=Elsevier&amp;rft.edition=33rd%20ed.&amp;rft.aufirst=William%20Alexander%20Newman&amp;rft.aulast=Dorland&amp;rft.au=William%20Alexander%20Newman%20Dorland&amp;rft.date=2020&amp;rft.tpages=2116&amp;rft.isbn=978-1-4557-5643-8&amp;rft.language=eng'></span>
+  </article>
+  <article class="mc-dic-item">
+    <ul>
+      <li>Marroun I. <em>Le nouveau dictionnaire médical</em>. 7<sup>e</sup> éd.</li>
+      <li>Issy-les-Moulineaux : Elsevier Masson, 2018.</li>
+      <li>Cote : REF 1 W 13 14 ed 7</li>
+      <li>
+        <a href="https://www.elsevierelibrary.fr/articledfreader/nouveau-dictionnaire-mdical"
+           lang="en"
+           hreflang="English"
+           ref="nofollow"
+           target="_blank">
+          Livre électronique en ligne
+        </a>.
+      </li>
+      <li>
+        <a lang="fr"
+           dir="ltr"
+           type="html/text"
+           href="https://slsp-unige.primo.exlibrisgroup.com/articleermalink/41SLSP_UGE/l0hvjc/alma991008098789705502"
+           hreflang="français"
+           rel="nofollow"
+           target="_blank">
+          Le document dans le catalogue Swisscovery
+        </a>.
+      </li>
+    </ul>
+    <span class='Z3988' title='url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_id=urn%3Aisbn%3A978-2-294-74357-3&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&amp;rft.genre=book&amp;rft.btitle=Le%20nouveau%20dictionnaire%20m%C3%A9dical&amp;rft.place=Issy-les-Moulineaux&amp;rft.publisher=Elsevier%20Masson&amp;rft.edition=7e&amp;rft.aufirst=Ibrahim&amp;rft.aulast=Marroun&amp;rft.au=Ibrahim%20Marroun&amp;rft.au=Thomas%20Sen%C3%A9&amp;rft.au=Jacques%20Quevauvilliers&amp;rft.au=Abe%20Fingerhut&amp;rft.date=2018&amp;rft.isbn=978-2-294-74357-3&amp;rft.language=fre%3Beng'></span>
+  </article>
+  <article class="mc-dic-item">
+    <ul>
+      <li>Wainsten JP. <em>Larousse médical</em>. Nouv. éd.</li>
+      <li>Paris : Larousse, 2012.</li>
+      <li>Cote : REF 1 W 13 51</li>
+      <li>
+        <a lang="fr"
+           dir="ltr"
+           type="html/text"
+           hreflang="français"
+           rel="nofollow"
+           href="https://slsp-unige.primo.exlibrisgroup.com/permalink/41SLSP_UGE/l0hvjc/alma991002660839705502"
+           target="_blank">
+          Le document dans le catalogue Swisscovery
+        </a>.
+      </li>
+    </ul>
+    <span class='Z3988' title='url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_id=urn%3Aisbn%3A978-2-03-586747-6&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&amp;rft.genre=book&amp;rft.btitle=Le%20Larousse%20m%C3%A9dical&amp;rft.place=Paris&amp;rft.publisher=Larousse&amp;rft.edition=Nouv.%20%C3%A9d.&amp;rft.aufirst=Jean-Pierre&amp;rft.aulast=Wainsten&amp;rft.au=Jean-Pierre%20Wainsten&amp;rft.date=2012&amp;rft.tpages=1113&amp;rft.isbn=978-2-03-586747-6&amp;rft.language=fre'></span>
+  </article>
+  <article class="mc-dic-item">
+    <ul>
+      <li>Stedman TL. <em>Stedman’s medical dictionary</em>. 28th ed.</li>
+      <li>Philadelphia : LWW, 2006.</li>
+      <li>Cote : REF 1 W 13 53 ed 28</li>
+      <li>
+        <a lang="fr"
+           dir="ltr"
+           type="html/text"
+           hreflang="français"
+           rel="nofollow"
+           href="https://slsp-unige.primo.exlibrisgroup.com/permalink/41SLSP_UGE/kjkm12/alma991007638409705502"
+           target="_blank">
+          Le document dans le catalogue Swisscovery
+        </a>.
+      </li>
+    </ul>
+    <span class='Z3988' title='url_ver=Z39.88-2004&amp;ctx_ver=Z39.88-2004&amp;rfr_id=info%3Asid%2Fzotero.org%3A2&amp;rft_id=urn%3Aisbn%3A978-0-7817-3390-8&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&amp;rft.genre=book&amp;rft.btitle=Stedman&apos;s%20medical%20dictionary%3A%20illustrated%20in%20color&amp;rft.place=Philadelphia%2C%20Pa&amp;rft.publisher=Lippincott%20Williams%20%26%20Wilkins&amp;rft.edition=28th%20ed.&amp;rft.aufirst=Thomas%20Lathrop&amp;rft.aulast=Stedman&amp;rft.au=Thomas%20Lathrop%20Stedman&amp;rft.date=2006&amp;rft.tpages=2169&amp;rft.isbn=978-0-7817-3390-8&amp;rft.language=eng'></span>
+  </article>
+<style>
+.mc-dic-item > ul > li {
+  padding: 0 !important;
+}
+.mc-dic-item li:not([class])::before,
+.mc-dic-item li::before {
+  content: none;
+}
+</style>
+</article>