html: crée une page pour les revues transversales

- Crée une page HTML pour les revues transversales, afin d'ajouter NEJM. Il faudrait refaire cette section sans l'usage de la balise `figure`. - Ajoute à la documentation un passage sur les pages HTML complètes. - Supprime du README la liste des fichiers, difficile à maintenir et inutile. Co-Authored-by: iGor milhit <igor.milhit@unige.ch>
html: crée une page pour les séries d'ebooks
2023-03-09 11:10:41 +01:00 · 2023-03-09 11:09:52 +01:00
3 changed files with 402 additions and 20 deletions
--- a/README.md
+++ b/README.md
@ -8,7 +8,6 @@ tags: [cmu, portail web, documentation]
 ## Table des matières
 * [Description](#description)
 * [Liste des fichiers](#liste-des-fichiers)
 * [Les blocs HTML](#les-blocs-html)
 * [Titres](#titres)
 * [Références bibliographiques](#références-bibliographiques)
@ -23,25 +22,6 @@ médecine clinique du site de la bibliothèque de l'UNIGE. Il contient égalemen
 des fichiers HTML lorsque je crée un bloc HTML dans concrete5 plutôt qu'un bloc
 de type contenu.
 ## Liste des fichiers
 ````bash
 .
 ├── README.md
 ├── acces-ressources-externes.html
 ├── cmu-commande-article.html
 ├── infos-hug
 │   ├── acces-distance-expanded.html
 │   ├── acces-distance.html
 │   ├── appartenance.html
 │   ├── commande-article.html
 │   └── html-vanilla.html
 ├── procedure-dynamed.html
 ├── proposition-achat.html
 ├── ressources-transversales-bd.html
 └── ressources-transversales-dic.html
 ````
 ## Les blocs HTML
 Les blocs contenus, s'ils facilitent la vie avec leur éditeur WYSIWYG, sont
@ -79,6 +59,15 @@ Pour ma part, je procède ainsi :
 </article>
 ```
 Les fichiers `*.html` de ce dépôt sont des blocs entièrement créés en HTML. Il
 peuvent contenir plus de balises que nécessaires, afin de pouvoir les afficher
 de manière indépendante au site de l'UNIGE.
 C'est le cas du bloc `ebooks-series.html` par exemple. Dans ces cas-là, il ne
 faut copier que le contenu, le plus souvent dans une balise `article` avec une
 classe dont le nom correspond au bloc (`mc-es-main`, pour médecine clinique,
 ebooks-series, section principale).
 ## Titres
 Les titres doivent contenir les classes `o-title--hx` où x correspond au niveau
@ -229,3 +218,14 @@ window.addEventListener("load",function(){
 	},false);
 </script>
 ```
 ## Blocs créés en HTML
 Les exemples ci-dessous sont des blocs entièrement créés en HTML. Il peuvent
 contenir plus de balises que nécessaires, afin de pouvoir les afficher de
 manière indépendante au site de l'UNIGE.
 C'est le cas du bloc `ebooks-series.html` par exemple. Dans ces cas-là, il ne
 faut copier que le contenu, le plus souvent dans une balise `article` avec une
 classe dont le nom correspond au bloc (`mc-es-main`, pour médecine clinique,
 ebooks-series, section principale).
--- a/ebooks-series.html
+++ b/ebooks-series.html
@ -0,0 +1,255 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ebooks Series | MC Portal</title>
  <meta name="description" content="Page description">
  <meta property="og:title" content="Unique page title - My Site">
  <meta property="og:description" content="Page description">
  <meta property="og:image" content="https://www.mywebsite.com/image.jpg">
  <meta property="og:image:alt" content="Image description">
  <meta property="og:locale" content="en_GB">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  <meta property="og:url" content="https://www.mywebsite.com/page">
  <link rel="canonical" href="https://www.mywebsite.com/page">
  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/my.webmanifest">
  <meta name="theme-color" content="#FF00FF">
 </head>
 <body>
  <!-- Content -->
  <article class="mc-es-main">
    <!-- AccessMedicine -->
    <article class="mc-es-item">
      <article>
        <header class="mc-es-item-header">
          <img class="mc-es-item-logo"
               src="https://www.unige.ch/biblio/files/3216/7774/6836/AccessMedicine-logo.png"
               alt="Logo d'AccessMedicine">
        </header>
        <article class="mc-es-item-description">
          AccessMedicine contient&nbsp;:
          <ul>
            <li>160 livres et <em>textbooks</em>,</li>
            <li>sur toutes les disciplines de la médecine</li>
            <li>en anglais,</li>
            <li>consultables en ligne ou téléchargeables.</li>
          </ul>
          Sont également à disposition des&nbsp;:
          <ul>
            <li><em>Quick references.</em></li>
            <li><em>Infographics.</em></li>
            <li><em>Multimedia.</em></li>
            <li><em>Cases.</em></li>
            <li><em>Flash Cards.</em></li>
          </ul>
        </article>
      </article>
      <a href="https://accessmedicine.mhmedical.com/"
         title="AccessMedicine website"
         class="mc-es-item-footer">
        <footer>
          AccessMedicine
        </footer>
      </a>
    </article>
    <!-- AccessNeurology -->
    <article class="mc-es-item">
      <header class="mc-es-item-new">new&nbsp;!</header>
      <article>
        <header class="mc-es-item-header">
          <img class="mc-es-item-logo"
               src="https://www.unige.ch/biblio/files/5716/7775/2239/AccessNeurology_logo.png"
               alt="Logo d'AccessNeurology">
        </header>
        <article class="mc-es-item-description">
          AccessNeurology contient&nbsp;:
          <ul>
            <li>25 livres et <em>textbooks</em>,</li>
            <li>spécifiques à la neurologie</li>
            <li>en anglais,</li>
            <li>consultables en ligne ou téléchargeables.</li>
          </ul>
          Sont également à disposition des&nbsp;:
          <ul>
            <li><em>Quick references.</em></li>
            <li><em>Infographics.</em></li>
            <li><em>Multimedia.</em></li>
            <li><em>Cases.</em></li>
            <li><em>Flash Cards.</em></li>
          </ul>
        </article>
      </article>
      <a href="https://neurology.mhmedical.com/"
         title="AccessNeurology website"
         class="mc-es-item-footer">
        <footer>
          AccessNeurology
        </footer>
      </a>
    </article>
    <!-- DSM-5 Library -->
    <article class="mc-es-item">
      <header class="mc-es-item-new">new&nbsp;!</header>
      <article>
        <header class="mc-es-item-header">
          <img class="mc-es-item-logo"
               src="https://www.unige.ch/biblio/files/1616/7785/5111/PsychiatryOnline-DSM-5-library-colored-logo.png"
               alt="Logo de DSM-5 Library">
        </header>
        <article class="mc-es-item-description">
          La DSM-5 Library de PsychiatryOnline vous donne accès à&nbsp;:
          <ul>
            <li>Au DSM-5 et au DSM-5-TR.</li>
            <li>Et à 4 autres livres se rapportant au DSM-5.</li>
            <li>En anglais.</li>
            <li>Consultables en ligne.</li>
          </ul>
        </article>
      </article>
      <a href="https://dsm.psychiatryonline.org"
         title="PsychiatryOnline Premium Books"
         class="mc-es-item-footer">
        <footer>
          DSM-5 Library
        </footer>
      </a>
    </article>
    <!-- Premium Books -->
    <article class="mc-es-item">
      <header class="mc-es-item-new">new&nbsp;!</header>
      <article>
        <header class="mc-es-item-header">
          <img class="mc-es-item-logo"
               src="https://www.unige.ch/biblio/files/4516/7784/7532/PsychiatryOnline-logo.png"
               alt="Logo de PsychiatryOnline">
        </header>
        <article class="mc-es-item-description">
          La collection Premium Books de PsychiatryOnline vous donne accès à&nbsp;:
          <ul>
            <li>Environ 20 livres et <em>textbooks</em>.</li>
            <li>En psychiatrie.</li>
            <li>En anglais.</li>
            <li>Consultables en ligne.</li>
          </ul>
        </article>
      </article>
      <a href="https://psychiatryonline.org/premium-books"
         title="PsychiatryOnline Premium Books"
         class="mc-es-item-footer">
        <footer>
          Premium Books
        </footer>
      </a>
    </article>
    <!-- Springer Link -->
    <article class="mc-es-item">
      <article>
        <header class="mc-es-item-header">
          <img class="mc-es-item-logo"
               src="https://www.unige.ch/biblio/files/5616/7784/2695/Springerlinklogo.jpg"
               alt="Logo de SpringerLink">
        </header>
        <article class="mc-es-item-description">
          Via la plateforme Springer Link, vous accéder à&nbsp;:
          <ul>
            <li>Près de 7000 livres électroniques.</li>
            <li>Couvrant l'ensemble des disciplines médicales.</li>
            <li>Publiés entre 1996 et 2022.</li>
            <li>Principalement en anglais.</li>
            <li>Téléchargeable au format PDF.</li>
          </ul>
        </article>
      </article>
      <a href="https://link.springer.com/search?facet-content-type=%22Book%22&sortOrder=newestFirst&showAll=false&facet-discipline=%22Medicine+%26+Public+Health%22&date-facet-mode=between&facet-start-year=1996&facet-end-year=2022"
         title="Livres en médecine de Springer Link"
         class="mc-es-item-footer">
        <footer>
          Springer Link
        </footer>
      </a>
    </article>
    <!-- Karger Fast Facts -->
    <article class="mc-es-item">
      <article>
        <header class="mc-es-item-header">
          <img class="mc-es-item-logo"
               src="https://www.unige.ch/biblio/files/5716/7776/3825/karger-logo.png"
               alt="Logo de Karger">
        </header>
        <article class="mc-es-item-description">
          Karger, éditeur suisse, propose sur sa plateforme Fast Facts&nbsp;:
          <ul>
            <li>Plus de 170 ebooks.</li>
            <li>Dont 150 à destination des professionnel-les.</li>
            <li>Et 20 à destination du grand public.</li>
            <li>Au format PDF ou ePub.</li>
          </ul>
        </article>
      </article>
      <a href="https://www.karger.com/FastFacts#fastfactstitles"
         title="Liste des livres Karger Fast Facts"
          class="mc-es-item-footer">
        <footer>
          Fast Facts
        </footer>
      </a>
    </article>
  </article>
 <style>
 .mc-es-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  row-gap: 1em;
  margin: 1em 0;
 }
 .mc-es-item {
  flex-basis: 30%;
  border: .2em solid grey;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 }
 .mc-es-item > article {
  flex-grow: 2;
 }
 .mc-es-item-new {
  color: white;
  background-color: #d80669;
  text-align: center;
  font-size: 125%;
  font-weight: bold;
  font-variant: small-caps;
  padding: .1em;
 }
 .mc-es-item-header {
  display: flex;
  flex-direction: column;
 }
 .mc-es-item > article {
  padding: .5em;
 }
 .mc-es-item-logo {
  max-width: 90%;
  max-height: 2.5em;
  margin: 0 auto .5em auto;
 }
 .mc-es-item-footer {
  text-align: center;
  border-top: 1px solid grey;
  font-weight: bold;
  font-size: 125%;
  color: #d80669;
 }
 </style>
 </body>
 </html>
--- a/ressources-transversales-revues.html
+++ b/ressources-transversales-revues.html
@ -0,0 +1,127 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Unique page title - My Site</title>
    <link rel="stylesheet" href="/assets/css/styles.css">
    <link rel="stylesheet" href="/assets/css/print.css" media="print">
    <meta name="description" content="Page description">
    <meta property="og:title" content="Unique page title - My Site">
    <meta property="og:description" content="Page description">
    <meta property="og:image" content="https://www.mywebsite.com/image.jpg">
    <meta property="og:image:alt" content="Image description">
    <meta property="og:locale" content="en_GB">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta property="og:url" content="https://www.mywebsite.com/page">
    <link rel="canonical" href="https://www.mywebsite.com/page">
    <link rel="icon" href="/favicon.ico">
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <link rel="manifest" href="/my.webmanifest">
    <meta name="theme-color" content="#FF00FF">
  </head>
  <body>
    <style>
 .figure-block-flex {
  display: flex;
  flex-wrap: wrap;
 }
 .figure-block {
  flex-basis: 22%;
 }
 .figure-block figure {
  display: flex;
  flex-flow: column;
 }
 .figure-block img {
  width: 200px;
 }
 .figure-block figcaption {
  text-align:center;
  font-size: large;
 }
    </style>
    <article class="figure-block-flex">
      <article class="figure-block">
        <a href="https://nature.com">
          <figure>
            <img src="/biblio/index.php/download_file/view_inline/6037/" alt="Couverture de la revue Nature">
            <figcaption>Nature</figcaption>
          </figure>
        </a>
      </article>
      <article class="figure-block">
        <a href="https://science.sciencemag.org/">
          <figure>
            <img src="/biblio/index.php/download_file/view_inline/6038/" alt="Couverture de la revue Science">
            <figcaption>Science</figcaption>
          </figure>
        </a>
      </article>
      <article class="figure-block">
        <a href="https://www.sciencedirect.com/journal/the-lancet">
          <figure>
            <img src="/biblio/index.php/download_file/view_inline/6039/" alt="Couverture de la revue The Lancet">
            <figcaption>The Lancet</figcaption>
          </figure>
        </a>
      </article>
      <article class="figure-block">
        <a href="https://www.revmed.ch/">
          <figure>
            <img src="/biblio/index.php/download_file/view_inline/6040/" alt="Couverture de la Revue médicale suisse">
            <figcaption>Revue médicale suisse</figcaption>
          </figure>
        </a>
      </article>
      <article class="figure-block">
        <a href="https://www.nejm.org/">
          <figure>
            <img src="/biblio/index.php/download_file/view_inline/6041/" alt="Couverture du New England Journal of Medicine">
            <figcaption>New England Journal of Medicine</figcaption>
          </figure>
        </a>
      </article>
      <article class="figure-block">
        <a href="https://evidence.nejm.org/">
          <figure>
            <img src="https://www.unige.ch/biblio/files/5516/7819/2864/nejm-evidence-logo.svg"
                 alt="Couverture du NEJM Evidence">
            <figcaption>NEJM Evidence</figcaption>
          </figure>
        </a>
      </article>
      <article class="figure-block">
        <a href="https://jamanetwork.com/journals/jama">
          <figure>
            <img src="/biblio/index.php/download_file/view_inline/6042/" alt="Couverture du JAMA">
            <figcaption>JAMA</figcaption>
          </figure>
        </a>
      </article>
      <article class="figure-block">
        <a href="https://www.bmj.com/archive">
          <figure>
            <img src="/biblio/index.php/download_file/view_inline/6043/" alt="Couverture de The BMJ">
            <figcaption>The BMJ</figcaption>
          </figure>
        </a>
      </article>
      <article class="figure-block">
        <a href="https://smw.ch/">
          <figure>
            <img src="/biblio/index.php/download_file/view_inline/6044/" alt="Couverture de Swiss Medical Weekly">
            <figcaption>Swiss Medical Weekly</figcaption>
          </figure>
        </a>
      </article>
    </article>
  </body>
 </html>