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>
obstetrics
iGor milhit 2023-03-09 11:07:59 +01:00
parent fda67f4c1e
commit 05e5beeca8
Signed by: igor
GPG Key ID: 5785C84B21C88AE6
2 changed files with 147 additions and 20 deletions

View File

@ -8,7 +8,6 @@ tags: [cmu, portail web, documentation]
## Table des matières ## Table des matières
* [Description](#description) * [Description](#description)
* [Liste des fichiers](#liste-des-fichiers)
* [Les blocs HTML](#les-blocs-html) * [Les blocs HTML](#les-blocs-html)
* [Titres](#titres) * [Titres](#titres)
* [Références bibliographiques](#références-bibliographiques) * [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 des fichiers HTML lorsque je crée un bloc HTML dans concrete5 plutôt qu'un bloc
de type contenu. 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 HTML
Les blocs contenus, s'ils facilitent la vie avec leur éditeur WYSIWYG, sont 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> </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 ## Titres
Les titres doivent contenir les classes `o-title--hx` où x correspond au niveau Les titres doivent contenir les classes `o-title--hx` où x correspond au niveau
@ -229,3 +218,14 @@ window.addEventListener("load",function(){
},false); },false);
</script> </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).

View File

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