Roch Delannay | Préparation du cours Identités numériques avec Quarto

Pour ce billet je vais présenter l’environnement d’écriture que j’utilise pour le cours sur les identités numériques dispensé à l’Université Paris Nanterre.

Un peu de contexte

Depuis un peu plus de deux ans je teste différents dispositifs numérique d’écriture allant d’interface de gestion sur le Web aux éditeurs de texte intégrés au terminal comme vi ou emacs.

Un fait intéressant est que pour la plupart des solutions qui me conviennent, je les garde installées sur ma machine (ou je garde un accès avec un compte en ligne) et elles me servent pour un usage spécifique.

Par exemple pour saisir des notes ou des ébauches d’idées je me sert souvent de l’application Stylo (quelques notes collaboratives y trainent depuis que la fonctionnalité a été déployée). Alors que pour saisir des notes de réunion ou pouvoir les partager rapidement (tout en sachant que le contenu est complètement accessible pour qui a l’URL) j’utilise Hedgedoc.

À l’occasion de la coécriture du rapport de recherche sur les forges de publication avec Antoine, j’ai pu tester assez longuement Quarto.

C’est un système que j’ai laissé tomber pour mon carnet personnel (je préfère de loin celui-ci). Cependant, je continue pour l’instant de l’utiliser pour créer de petites pages Web pour mes cours comme c’est le cas pour le cours sur les identités numériques (cf https://identites-numeriques.en-cours-de.construction).

Le site web est hébergé via le service gitpage sur GitHub. Le répertoire du site se trouve ici : https://github.com/RochDLY/identite_numerique

Environnement d’écriture

En plus d’installer Quarto sur son ordinateur, on a la possibilité de l’utiliser dans différents environnements qui intègrent un plugin (pour faciliter son usage). Dans mon cas je pourrais très bien l’utiliser dans Neovim (il s’agit de mon environnement d’écriture le plus régulier), toutefois je me suis heurté à un problème qu’il me semble difficile de contourner alors je l’utilise plutôt dans VSCodium qui a l’avantage d’intégrer des boutons pour la transformation des documents (et surtout pour la prévisualisation !).

Le problème rencontré dans Neovim (avec Quarto) est le suivant : étant sous une distribution dont la fréquence de mise à jour des paquets est relativement basse pour des raisons de stabilité, je me retrouve régulièrement avec une version de Quarto qui nécessite une version de Neovim qui n’est pas encore disponible dans le gestionnaire de paquet de Devuan.

(J’ai d’ailleurs un peu le même problème avec la version de LazyVim.)

En conséquence, je suis obligé de compiler manuellement Neovim pour avoir une version compatible avec l’utilisation de Quarto dans cet environnement.

Étant donné que l’objectif est de ne pas aller à l’encontre du fonctionnement de Devuan (si je dois faire la même chose pour tous les logiciels que j’utilise il deviendrait nécessaire de se poser la question de la pertinence du choix du système d’exploitation), je préfère utiliser VSCodium.

Configuration de Quarto

Le site web

Du côté de Quarto c’est assez simple à mettre en oeuvre.

Dans l’éditeur VSCodium, il suffit de créer un nouveau projet (website) et de remplir les entrées du fichiers de configuration YAML _quarto.yml.

Pour ce site, les informations sont les suivantes :

project:
+  type: website
+
+website:
+  title: "Identités numériques"
+  sidebar:
+    style: "floating"
+    search: true
+    contents:
+      - index.qmd
+      - posts/bibliographie.qmd
+      - section: "Séances de cours"
+        contents:
+          - posts/170124.qmd
+      - section: "Outils"
+        contents:
+          - tools/gephi.qmd
+          - tools/redaction.qmd
+          - tools/stylo.qmd
+          - tools/terminal.qmd
+  page-footer:
+    left: "© 2024 WTFPL, Roch Delannay"
+    right: "Ce site a été réalisé avec [Quarto](https://quarto.org)"
+
+format:
+  html:
+    theme: flatly
+    css: styles.css
+    toc: true

Le thème flatly utilisé n’est pas du tout modifié à l’exception de l’affichage des balises <iframe> que je voulais un peu plus large pour y insérer les slides prévues pour le cours.

En plus de l’index.qmd, on trouve toutes les ressources que j’utilise pour mon cours dans des dossier séparés à la racine du projet :

les billets (posts/)
les images/
les slides/
des fiches d’aide (tools/)

Chaque nouvelle séance de cours fait l’objet d’un document qui est inséré dans posts/ auquel j’adjoins 3 entrées YAML en en-tête :

---
+title: "17 janvier 2024"
+bibliography: chemin/vers/la/bibliographie.bib
+nocite: false
+---

Je donne pour titre du document la date du cours. Ce titre est récupéré et apparaît dans le menu de navigation à gauche de l’écran.

Étant donné que je travaille seul à l’édition de ce site web, j’utilise une petite astuce pour mettre à jour facilement mon fichier de références bibliographiques. Ce document est créé depuis l’application Zotero (avec le plug-in Better BibTeX) en exportant une bibliographie au format BibTeX avec l’option “Garder à jour”. De cette manière, je n’exporte la bibliographie qu’une seule fois et lorsque je fais des mises à jour sur Zotero, le document exportés est également mis à jour. Ainsi, je n’ai plus qu’à reconstruire le site avec Quarto pour modifier les références bibliographiques du site web.

Les slides

Je ne suis pas friand d’utiliser des slides pendant les cours, surtout lorsque je prépare un site web pour rendre disponible les différentes ressources. Vu que c’est une demande récurrente des étudiants, c’est quelque chose que j’ai intégré à leur demande (bien que mes slides soient bien pauvres en contenu).

J’ai essayé de m’inspirer de ce que propose Antoine Fauchié a ses étudiants. Il leur met à disposition un site web qui contient tous les supports de cours, y compris les slides. La beauté de l’environnement proposé par Antoine est de n’écrire qu’une seule fois ses contenus qui approvisionnent ensuite les slides et le site web.

Néanmoins, je n’avais pas forcément besoin d’un tel système (avec la redondance du contenu des notes dans les slides et dans les pages web).

Par contre, et c’est là que Quarto devient très pratique, je peux très facilement intégrer des slides générées avec Quarto (en surcouche à RevealJS via Pandoc) et les encapsuler dans le site du cours puisque les deux supports sont au même format HTML !

(La suite devient un peu crade)

Plutôt que d’avoir tout une configuration RevealJS (c’est prévu pour plus tard), je peux pour l’instant créer un simple document avec Quarto auquel je passe le YAML suivant :

---
+title: "Titre de la séance"
+author: "Roch Delannay"
+date: "17 janvier 2024"
+bibliography: /chemin/vers/la/bibliographie.bib
+suppress-bibliography: true
+format: 
+    revealjs: 
+        incremental: false
+        scrollable: true
+        theme: [simple, custom.scss]
+        footer: "4L4IC01P - Université Paris Nanterre - Hiver 2024"
+        embed-resources: true
+---

Le gros tips de ce document là est le dernier paramètre passé au YAML, le embed-resources permet de ne produire qu’un seul fichier HTML qui contient absolument toutes les ressources nécessaire pour faire tourner les slides correctement (images, scripts, styles, etc.).

Une fois produit, je déplace ce fichier dans le répertoire du projet du cours dans le dossier slides/ et je l’encapsule dans la page de mon cours au moyen d’une <iframe>. Comme le document HTML est également disponible à sa propre URL, il est aussi très simple d’y accéder en plein écran pour naviguer facilement entre les différents supports.