ELAN accompagne de nombreux projets, dont des projets de doctorant·e·s de Litt&Arts. Dans ce cas, plutôt que de faire pour, nous guidons dans l’apprentissage des outils nécessaires. Objectif : autonomie maximale ! Par exemple, j’ai transmis à une doctorante comment être 100% autonome sur un Omeka hébergé par Huma-Num (quand l’offre Nakalona existait encore). Il y a quelques temps, une doctorante est venue vers nous pour produire une édition numérique à partir de données TEI. Elle est en tout début de thèse et à déjà des notions en informatique et technos XML. Je ne vous refais pas la réunion, ni les échanges mais vous trouverez ci-après le parcours de formation « vers l’autonomie » que je lui ai concocté : il permet de produire des sites “du type” de ceux qu’ELAN créé en utilisant XSLT, Symfony/Twig, Bootstrap, etc.
Et pourquoi pas EVT, TEIPuplisher ou autres ?
Oui, il existe d’autres solutions ; oui, il existe des outils dédiés… Cela dit, et à mon plus grand plaisir, nous recevons régulièrement des compliments sur les interfaces web que nous produisons. Il s’agit de sites qui combinent plusieurs technologies et, pour la grande majorité, sont construits selon les besoins spécifiques d’un projet de recherche à partir de ses données. Le but de ce billet n’est pas de débattre de la meilleure solution (y en a-t-il une ?) mais simplement de donner une idée générale de ce qu’il faut savoir pour créer sa propre édition numérique de base à la ELAN.
Je crois aussi que tout simplement, il me semble bon de connaitre les bases du web avant de se lancer dans la production d’un site web. Alors, quitte à faire vieillotte, je préfère lancer sur des choses de très bas niveau avant de mettre dans les mains de personnes non formées des Rolls-Royce qui font tout mais dont ils ou elles ne comprendront pas grand chose. Ce n’est que mon point de vue, bien sûr 😉
Enjoy !
Introduction
Voici plus ou moins un ordre à suivre, qui devrait permettre d’apprendre progressivement à utiliser les différentes techno pour créer un site tels que ceux que nous créons à ELAN. On part plutôt sur un site statique (c’est-à-dire d’un ensemble de page HTML, avec éventuellement du javascript mais sans php). Il ne s’agit que de conseils bien sûr. J’ai mis beaucoup de choses alors je le répète : il ne s’agit pas de tout faire tout de suite, mais plutôt une sorte de feuille de route. A priori, c’est plus ou moins ordonné.
Pour la création d’une page web
- Dessiner le résultat que l’on souhaite sur une feuille de papier, sans aller dans les détails, au crayon à papier pour se corriger, etc. Cela permet de savoir où l’on va puis de construire le résultat pas à pas (je vais d’abord m’occuper de telle zone de la page, puis de telle autre, etc.)
- Se former ou réactualiser ses connaissances en HTML (les tuto de la W3School sont plutôt pas mal, en anglais mais simples et puis ça entraîne à lire dans la langue de Shakespeare : https://www.w3schools.com/html/. Sinon celui-ci me semble pas mal : https://tutorialehtml.com/fr/html-tutoriel-html-complet ; on en trouve des tas en ligne y compris en version vidéo)
- Se former ou réactualiser ses connaissances en CSS (sans pousser trop loin, mais ça permet de mieux s’approprier Bootstrap selon moi ; idem, chercher sur internet ou bien sur la W3School)
- S’initier à Bootstrap (https://getbootstrap.com/) : framework CSS qui permet de créer des jolies pages facilement (W3School aussi mais je le trouve fort bof, sinon sur le site officiel de Bootstrap ou encore ce tuto complet qui date de 2020 mais devrait quand même faire l’affaire : https://www.udemy.com/course/bootstrap-5-le-guide-complet/) Dans l’ensemble, penser à bien utiliser la dernière version de Bootstrap (qui évolue souvent alors… autant se mettre à la page dès le début)
- Savoir inclure des icônes (type fontawesome) dans une page pour illustrer les menus, liens hypertextes, etc. (comprendre le principe : https://alticreation.com/comment-utiliser-font-awesome/ ; se perdre dans la quantité hallucinante d’icônes existantes : https://fontawesome.com/icons?d=gallery&s=brands&m=free [idéal pour une pause procrastinatrice])
Pour la transformation de l’XML-TEI vers l’HTML
- Réactualiser ses connaissances en XSLT
- Savoir “lancer” une transformation (en l’associant à un fichier XML, en ligne de commande ou dans un logiciel tel qu’Oxygen)
- Utiliser le modèle XSL ci-joint
- Conseils d’utilisation : commencer par créer un XSL pour chaque partie spécifique de la page, puis un XSL qui produira le squelette général de celle-ci. Par exemple, commencer par créer un XSL avec un ensemble de templates pour créer la zone qui montre une entrée de dictionnaire, ensuite créer un XSL qui ne fait que créer la zone des facsimilés, etc. Une fois fait, on pourra s’attaquer à créer un XSL qui va s’occuper de mettre tout cela en scène, c’est-à-dire générer la structure de la page et faire appel aux autres XSL pour inclure les bons contenus au bons endroits.
- NB. Il y aurait d’autres façons de faire bien sûr.
Hygiène de travail : passer par Git pour les développements informatique
- S’initier à Git (cf. billet de blog : https://elan.hypotheses.org/343 + Flashs OLIO Gitlab + Git
- Créer un dépôt et se lancer
S’inspirer d’exemples… et observer le code HTML
- Il y en a sur le site de Bootstrap, mais aussi partout sur Internet
Pour des exemples ELAN, en voici un ou deux :- On montre les facsimilés (juste la ou les zones + un lien vers la page dans son intégralité) : http://tacitus.elan-numerique.fr/index.php?page=livre1
- Ici, on a une liste des miniatures et le facsimilé sélectionné qui s’affiche en grand : http://proust.elan-numerique.fr/letter/02992
- Et fouiller aussi sur carres.elan-numeriques.fr
Sources TEI, corrections/amélioration
- documenter les choix d’encodage (en passant par ODD) et générer un manuel html grâce à ce XSL par exemple
- réfléchir à l’organisation générale des données, créer un TEI “prinicipal” (éventuellement un TEI Corpus), faire des références entre les fichiers, etc.
Création d’un site web, qui met ensemble les pages HTML générées
- réfléchir à l’aspect éditorial (menus, logos, couleurs, pages d’informations diverses, etc.)
- rédiger (ou adapter) la page “mentions légales”
Gérer les données
- Rédiger le plan de gestion de données du projet sur DMP Opidor
Dépôt des facsimilés sur un entrepôt de données
- plutôt Nakala car institutionnel et serveur IIIF mais sans obligation
- à faire quand la source des scans et les licences associées seront connues
- soigner les métadonnées avant dépôt
- récupérer les identifiants Nakala : ils devront être utilisé dans les fichiers TEI (
<facsimiles/>)
Dépôt des données XML sur un entrepôt
- à prévoir quand les fichiers seront finalisés
Pour aller plus loin…
- Openseadragon : visualiseur d’images
- javascript : s’initier, savoir utiliser un javascript déjà prêt (plus que savoir en écrire un soi-même)
- si site dynamique (suivre une ou plusieurs des pistes suivantes) : s’initier à twig, composer ou autre ; s’initier à des outils “clefs en main” comme EVT ou TEIPublisher ; s’initier aux bases de données XML pour créer un site depuis cela ; fouiller du côté de Heurist ; etc. etc.
OpenEdition vous propose de citer ce billet de la manière suivante :
Anne Garcia-Fernandez (17 février 2023). Ils sont bien les « sites ELAN » ! Comment je m’y mets ? ELAN - L'élan littératures, arts et numériques de Litt&Arts (UMR 5316). Consulté le 15 mai 2026 à l’adresse https://doi.org/10.58079/o5fe