html: improves ressources transversales markup

- Prettify the existing HTML.
- Start a structure proposition.
- Adds documentation about heading in the README.

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

README.md

@@ -11,3 +11,19 @@ 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.
+
+## 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>
+```

ressources-transversales-structure.html

@@ -0,0 +1,7 @@
+<article class="mc-transversales">
+  <article class="mc-transversales-bd"><a name=""></a>
+    <header></header>
+    <article></article>
+    <footer></footer> 
+  </article>
+</article>

ressources-transversales.html

@@ -0,0 +1,166 @@
+<article class="mc-bd-main">
+  <!-- Section Pubmed -->
+  <article class="mc-bd-item">
+    <a title="Accès à PubMed" lang="en"
+                                href="https://pubmed.ncbi.nlm.nih.gov/?otool=ichbfmglib"
+                                hreflang="English">
+      <header>
+        <img class="img-responsive" lang="en"
+             src="/biblio/index.php/download_file/view_inline/8526/"
+             alt="Logo de PubMed" longdesc="Acc%C3%A8s%20%C3%A0%20PubMed"
+             width="100">
+        <h3 class="o-title--h3">
+          Pubmed
+        </h3>
+      </header>
+    </a>
+    <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>
+      <a title="Accès à PubMed" lang="en"
+         href="https://pubmed.ncbi.nlm.nih.gov/?otool=ichbfmglib"
+         hreflang="English">
+      <footer>
+        Accès à PubMed (libre).
+      </footer>
+      </a>
+  </article>
+  <!-- Section Embase -->
+  <article class="mc-bd-item">
+    <a title="Accès à Embase" lang="en"
+       href="https://www.embase.com" hreflang="English">
+      <header>
+        <img class="img-responsive" style="margin: 2em 0 1em 0;"
+             src="/biblio/index.php/download_file/view_inline/6074/"
+             alt="Logo de Embase" width="100" height="21">
+        <h3 class="o-title--h3">
+          Embase
+        </h3>
+      </header>
+    </a>
+    <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>
+    <a title="Accès à Embase" lang="en"
+       href="https://www.embase.com" hreflang="English">
+      <footer>
+        Accès à Embase (abonnement).
+      </footer>
+    </a>
+  </article>
+  <!-- Cochrane Library -->
+  <article class="mc-bd-item">
+    <a title="Accès à la Cochrane Library" lang="en"
+       href="https://www.cochranelibrary.com/" hreflang="English">
+      <footer>
+        <img class="img-responsive" style="margin: 2em 0 1em 0;"
+             src="/biblio/index.php/download_file/view_inline/8544/"
+             alt="cochrane-library-logo-vector.svg" width="100">
+        <h3 class="o-title--h3">
+          Cochrane Library
+        </h3>
+      </footer>
+    </a>
+    <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>
+    <a title="Accès à la Cochrane Library" lang="en"
+       href="https://www.cochranelibrary.com/" hreflang="English">
+      <footer>
+        Accès à la Cochrane Library (abonnement)
+      </footer>
+    </a>
+  <!-- Dynamed -->
+  <article class="mc-bd-item">
+    <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">
+      <header>
+        <img class="img-responsive" style="margin: 2em 0 1em 0;"
+             src="/biblio/index.php/download_file/view_inline/8900/"
+             alt="Logo de Dynamed" width="100">
+        <h3 class="o-title--h3">
+          Dynamed
+        </h3>
+      </header>
+    </a>
+    <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>
+      <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>
+      <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>
+  </article>
+  <!-- UpToDate -->
+  <p style="font-size: large;">
+    <a title="Accès à UpToDate" lang="en"
+                                  href="https://www.uptodate.com" hreflang="English">
+      <img class="img-responsive" style="margin: 2em 0 1em 0;"
+                                  src="/biblio/index.php/download_file/view_inline/8545/"
+                                  alt="UptoDate-logo-transparent.png" width="100" height="29">
+    </a>
+    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>
+  <p style="font-size: large;">
+    <span style="font-size: medium;">
+      <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>
+    </span>
+  </p>
+  <p style="font-size: large;">
+    <a title="Accès à UpToDate" lang="en"
+                                  href="https://www.uptodate.com" hreflang="English">
+      Accès à UpToDate (abonnement)
+    </a>
+  </p>
+<style>
+.mc-bd-main {
+  font-size: large;
+}
+</style>
+</article>