title	date	id	tags
README du projet portail	2022-11-18T09-20-23+01:00	20221118T092037	cmu portail web documentation

Table des matières

• Description
• Les blocs HTML
• Titres
• Références bibliographiques
  • Liste à puce sans puce
  • Exposer les données bibliographiques pour Zotero
• Ancres dans les expand/collapse

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.
2. 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.
3. J'ajoute un nouveau bloc, un bloc HTML.
4. Je copie-colle mon code HTML et j'enregistre.

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

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 de titre.

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

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

<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. 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.
2. Clic-droit sur la ou les références et « Exporter le document… ».
3. Choisir le format « COinS ».
4. Enregistrer le fichier sur son disque dur, l'extension de fichier .html facilite un peu les choses.
5. Copier le code obtenu (<span class…></span>) dans le contenu HTML du bloc.

L'exemple ci-dessus montre justement un exemple de référence bibliographique content les métadonnées COinS reconnues par Zotero.

Ancres dans les expand/collapse

Afin de pouvoir utiliser un ancre qui puisse ouvrir un composant qui s'ouvre ou se ferme (bloc expand/collapse), il faut :

1. Insérer l'ancre au sein du contenu du bloc.
2. Modifier les propriétés de la page :
   1. Menu Éditer/Édition, puis propriétés.
   2. Onglet Attributs personnalisés.
   3. Contenu d'entête supplémentaire.
   4. Coller le contenu suivant :

<script type="text/javascript">
function getAnchor() {
	return (document.URL.split('#').length > 1) ? document.URL.split('#')[1] : null;
}

function getOffsetTop(elem){
	var offsetTop = 0;
	do {
		if(!isNaN(elem.offsetTop)){
			offsetTop += elem.offsetTop;
		}
	} while( elem = elem.offsetParent );
	return offsetTop;
}

function getOffsetLeft(elem){
	var offsetLeft = 0;
	do {
		if(!isNaN(elem.offsetLeft)){
			offsetLeft += elem.offsetLeft;
		}
	} while( elem = elem.offsetParent );
	return offsetLeft;
}


window.addEventListener("load",function(){
	var monanchor = getAnchor();
	if (typeof monanchor !== 'undefined' && monanchor !== null) {
		substring = "-title-";
		if (monanchor.indexOf(substring) !== -1) {
			monanchor = monanchor.replace("-title-","-content-");
			var parentDiv = document.getElementById(monanchor);
		} else {
			var pDoc = document.getElementsByName(monanchor)[0];
			var parentDiv = pDoc.parentNode.parentNode;
		}
		parentDiv.style.display = "block";
		var offsetTop = getOffsetTop(parentDiv);
		var offsetLeft = getOffsetLeft(parentDiv);
		window.scrollTo(offsetLeft, offsetTop - 200);
		}
	},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).