143 lines
5.2 KiB
Markdown
143 lines
5.2 KiB
Markdown
---
|
||
title: README du projet portail
|
||
date: 2022-11-18T09-20-23+01:00
|
||
id: 20221118T092037
|
||
tags: [cmu, portail web, documentation]
|
||
---
|
||
|
||
## Description
|
||
|
||
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&ctx_ver=Z39.88-2004&rfr_id=info%3Asid%2Fzotero.org%3A2&rft_id=urn%3Aisbn%3A978-2-294-74357-3&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Le%20nouveau%20dictionnaire%20m%C3%A9dical&rft.place=Issy-les-Moulineaux&rft.publisher=Elsevier%20Masson&rft.edition=7e&rft.aufirst=Ibrahim&rft.aulast=Marroun&rft.au=Ibrahim%20Marroun&rft.au=Thomas%20Sen%C3%A9&rft.au=Jacques%20Quevauvilliers&rft.au=Abe%20Fingerhut&rft.date=2018&rft.isbn=978-2-294-74357-3&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
|