# Atelier 3 - Affichage web du texte

Floriane Chiffoleau

► To cite this version:

Floriane Chiffoleau. Atelier 3 - Affichage web du texte. 2025. hal-05088772

HAL Id: hal-05088772

https://hal.science/hal-05088772v1

Submitted on 28 May 2025

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>

Distributed under a Creative Commons Attribution 4.0 International License
# Atelier 3 - Affichage web du texte

Atelier "Créer une édition scientifique numérique"

Floriane Chiffoleau

Ingénieure en humanités numériques à l'ObTIC
DataLab - BNF (Salle 70)

16 mai 2025

<figure><img src="image_2.png" /></figure>

ObTIC

OBSERVATOIRE DES TEXTES, DES IDÉES ET DES CORPUS
# Sommaire

- ☐ **Publier** son corpus : Partage ≠ Affichage

- ☐ **Publier** son corpus : Partage

- ☐ **Publier** son corpus : Affichage

- ☐ **Éléments nécessaires** à l'affichage

- ☐ **Panorama** de divers moyens de publication

- ☐ **Ressources**
PUBLIER SON CORPUS :
PARTAGE ≠ AFFICHAGE
# Partage ≠ Affichage

## Données brutes = partage

- Mettre à disposition le corpus pour réutilisation

- Pérenniser et identifier numériquement pour citation son corpus

- Centraliser ses documents

## Données enrichies = affichage

- Observer le texte de manière lisible pour l'humain

- Faire ressortir l'enrichissement

- Exploiter les liens entre les documents
PUBLIER SON CORPUS : PARTAGE
# Partage de données brutes : Exemples

* **Vérités de terrain** pour la reconnaissance automatique de texte (ATR) : HTR-United pour les métadonnées, GitHub pour les fichiers XML et les images, Zenodo pour les modèles

* **Éditions scientifiques numériques**, projet DAHN et EHRI : GitHub pour les fichiers XML, Zenodo ou GitHub pour les modèles, Nakala pour les images

<figure><img src="image_3.png" /></figure>

Digital
Scholarly
Editions

<figure><img src="image_4.png" /></figure>

<figure><img src="image_5.png" /></figure>
# Partage de données brutes : HTR-United

<figure><img src="image_6.png" /></figure>

## Métadonnées

<figure><img src="image_7.png" /></figure>

## Modèle

<figure><img src="image_8.png" /></figure>

## Images et XML
# Partage de données enrichies : Projet DAHN

<figure><img src="image_9.png" /></figure>

## Transcription model for Paul d'Estournelles de Constant French
typewritten letters (1914-1924)

Chiffroleau, Floriane (Data manager)¹,²

## Contributors

**Data collector:** Tison, Stéphane¹

**Supervisors:** Baillot, Anne¹; Romary, Laurent²

This model was trained on the dahncorpus dataset, using the NFC Unicode normalization.

The dahncorpus dataset contains documents written in French by Paul d'Estournelles de Constant (1852-1924), a French Senator and diplomat, to Nicholas Murray Butler (1862-1947), an American University President and diplomat, written during World War I and after (1914-1924), to keep him informed about the affairs of the war, the nation, his family, his political endeavor, etc.

This dataset and model were created as part of the DAHN project. For more details on the DAHNProject.

<figure><img src="image_10.png" /></figure>

## Correspondance de Paul d'Estournelles de Constant FR | EN

ID: 10.34847/nkl.adeb801d

<figure><img src="image_11.png" /></figure>

Publique

Créée le 21/10/2021

Ces papiers regroupent la correspondance de Paul d'Estournelles de Constant, destiné à Nicholas Murray Butler et rédigé durant toute la Première Guerre mondiale et ensuite, jusqu'à la mort de Paul d'Estournelles en 1924.

<figure><img src="image_12.png" /></figure>

### README

## Correspondence of Paul d'Estournelles de Constant

<figure><img src="image_13.png" /></figure>

**Description:** This collection is a correspondence by Paul d'Estournelles de Constant (1852-1924), a French Senator and diplomat, to Nicholas Murray Butler (1862-1947), an American University President and diplomat, written during World War I and after (1914-1924), to keep him informed about the affairs of the war, the nation, his family, his political endeavor, etc.

**Content:** This collection contains a corpus of letters (519 as of now) and indexes giving extra information about the places, persons, organizations and works/books mentioned in the letters.

There is also an XML file, referencing all the letters from the collection, meant for corrrespSearch, that help search for scholarly editions of letters, as well as an XML file, referencing the date of each letter from the corpus, to create a timeline of the collection.

**Website:** This collection can be seen displayed in the publication platform of this organization here.

### de la collection

<figure><img src="image_14.png" /></figure>

fr

Correspondance de Paul d'Estournelles de Constant

en

Paul d'Estournelles de Constant correspondence

Ces papiers regroupent la correspondance de Paul d'Estournelles de Constant, destiné à Nicholas Murray Butler et rédigé durant toute la Première Guerre mondiale et ensuite, jusqu'à la mort de Paul d'Estournelles en 1924.

### Modèle

<figure><img src="image_15.png" /></figure>

### Images
# Partage de données enrichies : Projet EHRI

<figure><img src="image_16.png" /><figcaption>## Fichiers XML et modèle</figcaption></figure>

<figure><img src="image_17.png" /><figcaption>## Images</figcaption></figure>
PUBLIER SON CORPUS : AFFICHAGE
# Affichage de données enrichies : Se poser les bonnes questions

☐ **Type de contenu** : Le contenu est-il statique ou doit-il être régulièrement mis à jour ?

☐ **Niveau d'interactivité** : Souhaitez-vous que l'utilisateur puisse interagir avec le contenu (cliquer, survoler, filtrer) ?

☐ **Adaptabilité** : L'affichage doit-il être totalement responsive pour s'adapter aux mobiles, tablettes et ordinateurs ?

☐ **Style visuel** : Quel est le style esthétique recherché (minimaliste, coloré, ludique) ?
# Affichage de données enrichies : Se poser les bonnes questions

☐ Hiérarchie et organisation : Comment souhaitez-vous structurer les informations pour qu'elles soient claires et accessibles ?

☐ Performance et fluidité : Souhaitez-vous privilégier une navigation rapide et fluide pour des sites à fort trafic ?

☐ Accessibilité : Y a-t-il des normes d'accessibilité que vous devez respecter ?
ÉLÉMENTS NÉCESSAIRES À
L'AFFICHAGE
# Éléments nécessaires à l'affichage

- Un balisage pour l'affichage de texte dans un navigateur web : HTML

<figure><img src="image_18.png" /></figure>

- Des règles pour préciser le style des diverses balises : CSS

<figure><img src="image_19.png" /></figure>

- Une feuille de transformation pour passer d'un langage de balisage à l'autre : XSL(T)

<figure><img src="image_20.png" /></figure>
# Balisage pour l'affichage de texte dans un navigateur web : HTML

* « HyperText Markup Language » qu'on peut traduire par « langage de balises pour l'hypertexte »

* Créer et représenter le contenu d'une page web et sa structure avec des « balises » pour annoter du texte, des images et d'autres contenus

* Balises insensibles à la casse et peuvent aussi bien être écrites en minuscules, en majuscules, voire avec un mélange des deux

* Trois types différents de catégories de contenu : **principales** qui décrivent un ensemble de règles de contenu partagées par une grande variété d'éléments ; **relatives** aux formulaires qui décrivent les règles de contenu partagées par les éléments en lien avec les formulaires ; **spécifiques** qui décrivent des catégories plus rares et qui s'appliquent à peu d'éléments, parfois dans un contexte particulier
## HTML : Exemple

```html
<div>
  <h1>Bienvenue dans mon cours de HTML</h1>
  <p>
```

Apprendre le HTML est <em>essentiel</em> pour comprendre la structure des pages web.

C'est une compétence <b>indispensable</b> pour tout développeur ou créateur de contenu.

```html
</p>
<p>
```

Avec HTML, vous pouvez créer des titres, des paragraphes, des
<em>listes</em>, des tableaux, et bien plus encore !
```html
</p>
</div>
```

Ce code affiche un titre principal et deux paragraphes. Les balises <em> mettent un texte en italique et <b> le mettent en gras. Tout est organisé dans une balise <div> pour représenter une section.
# Règles pour préciser le style des diverses balises : CSS

* « Cascading Style Sheets », qu'on peut traduire par « feuilles de style en cascade »

* Langage de feuille de style utilisé pour décrire la présentation d'un document écrit en HTML ou XML, soit la façon dont les éléments doivent être affichés à l'écran, sur papier, à l'oral ou sur d'autres médias

* Gestion de la mise en forme, de la police, de la couleur, la position, l'alignement, etc. des éléments

* Différents types de sélecteurs : sélecteur d'élément, d'ID, de classe, d'attribut et de pseudo-classe
## CSS : Exemple

```html
h1 {
    color: blue;
    text-align: center;
    font-size: 32px;
    font-family: Arial, sans-serif;
}
```

Le texte des titres H1 est bleu, centré, en taille 24 et utilise la police Arial ou une alternative sans-serif

```css
p {
    color: darkgreen;
    text-align: justify;
    font-size: 18px;
    font-family: "Times New Roman", serif;
}
```

Le texte des paragraphes est vert foncé, justifié, en taille 13.5 et utilise la police Times New Roman ou une alternative serif
# Feuille de transformation pour passer d'un langage de balisage à l'autre : XSL(T)

* « *eXtensible Stylesheet Language* », qu'on peut traduire par « *Langue de feuille de style extensible* »

* Trois parties dans XSL : XSLT (transformation), XPath (navigation), XQuery (interrogation)

* XSLT = Transformer un document XML en un autre document XML, ou un autre type de document reconnu par un navigateur : ajouter/supprimer des éléments et des attributs vers ou depuis le fichier de sortie, réorganiser et trier les éléments, effectuer des tests et prendre des décisions sur les éléments à masquer et à afficher, et bien plus encore.
# XSLT : Exemple

```xml
<?xml version="1.0" encoding="UTF-8"?>
<xsl:heet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="message">
<h1><xsl:apply-templates select="title"/></h1>
</xsl:template>
</xsl:heet>
```

Mettre une balise h1 autour de tous les éléments de titre qui sont des enfants du message

```xml
<xsl:variable name="color">
<xsl:choose>
<xsl:when test="@color">
<xsl:value-of select="@color"/>
</xsl:when>
<xsl:otherwise>green</xsl:otherwise>
</xsl:choose>
</xsl:variable>
```

Déclarer une variable nommée « couleur », définir sa valeur sur l'attribut couleur de l'élément courant et s'il n'a pas d'attribut couleur, la valeur sera « vert »
PANORAMA DE DIVERS MOYENS DE PUBLICATION
# Quel affichage ?

- Création rapide de HTML (et CSS) : Teinte, ChatGPT, DeepSeek

- Simple affichage : GitHub Pages, CETEIcean

- Explorer une édition critique : Edition Visualization Technology (EVT), TEI Critical Apparatus Toolbox

- Exploiter pleinement son corpus : TEI Publisher
# Création rapide de HTML : Teinte

- Outil créé par **Frédéric Glorieux** en **2022** pour l'équipe **ObTIC**

- Plate-forme de **transformation des textes électroniques** en différents **formats**

- Formats pris en compte :

- Input : TEI, DOCX, EPUB, MARKDOWN

- Output : TEI, DOCX, HTML, MARKDOWN
<figure><img src="image_21.png" /></figure>

<figure><img src="image_22.png" /></figure>

<figure><img src="image_23.png" /></figure>

<figure><img src="image_24.png" /></figure>

<figure><img src="image_25.png" /></figure>

## Teinte (développent en cours)

Convertissez vos livres électroniques, de, et vers, plusieurs formats : TEI, DOCX, HTML, EPUB, MARKDOWN.

À gauche, déposez un de vos fichiers ; au centre, prévisualisez le contentu ; à droite, téléchargez un export dans le format de votre choix.

Cette installation est en développement, certains chemins de conversion ne sont pas encore fonctionnels.

<figure><img src="image_26.png" /></figure>

<figure><img src="image_27.png" /></figure>

<figure><img src="image_28.png" /></figure>

<figure><img src="image_29.png" /></figure>

### Votre fichier

Déposer ici votre fichier

ou chercher sur votre disque...

### Téléchargements
# Teinte : Exercice

* Choisissez un des fichiers XML du dossier "xml"

* Déposez-le dans la partie "Votre fichier"

* Téléchargez le HTML qui a été généré

* Ouvrez-le avec un navigateur web

* Observez le résultat
# Création rapide de HTML/CSS : IA Chatbots

* **Chatbot** : "Programme informatique qui simule et traite une conversation humaine (écrite ou parlée), permettant aux humains d'interagir avec des terminaux digitaux comme s'ils communiquaient avec une personne réelle"

* **Large Language Model (LLM)** : "Type de programme d'intelligence artificielle capable, entre autres tâches, de reconnaître et de générer du texte, après avoir été entraînés sur de vastes ensembles de données, qui s'appuient sur l'apprentissage automatique et plus spécifiquement sur un type de réseau neuronal dénommé « modèle transformateur »."

* **Prompt** : "Instruction destinée à une intelligence artificielle générative, ordre adressé à une machine pour qu'elle exécute ce que vous lui demandez"
ChatGPT v

<figure><img src="image_30.png" /></figure>

<figure><img src="image_31.png" /></figure>

Partager

Si je te soumets un fichier XML, pourras-tu me le transformer en page HTML avec CSS et tout ?

Oui, bien sûr ! Si tu me donnes un fichier XML, je peux te le transformer en une page HTML complète avec CSS (intégré ou séparé, comme tu préfères). Je peux aussi :

* interpréter la structure du XML pour en faire une présentation propre (tableaux, titres, paragraphes, etc.),

* styliser le tout pour que ce soit agréable visuellement,

* ajouter des fonctionnalités interactives si besoin (menus, boutons, etc.),

* ou encore te faire un design responsive (adapté aux mobiles).

Tu peux m'envoyer le fichier XML quand tu veux, et me préciser ce que tu veux voir dans la version HTML :

par exemple, si certains éléments doivent a|↓ aître en gras, comme titres, ou s'il y a des

Poser une question
<figure><img src="image_32.png" /></figure>

<figure><img src="image_33.png" /></figure>

<figure><img src="image_34.png" /></figure>

## Transformation XML en HTML avec CSS

Si je te soumets un fichier XML, pourras-tu me le transformer en page HTML avec CSS et tout ?

<figure><img src="image_35.png" /></figure>

<figure><img src="image_36.png" /></figure>

<figure><img src="image_37.png" /></figure>

Absolument ! Je peux vous aider à transformer un fichier XML en une page HTML stylisée avec CSS. Voici comment nous pouvons procéder :

1. Vous me fournissez :

* Votre fichier XML (ou son contenu)

* Vos préférences de mise en page (si vous en avez)

* Le type de rendu souhaité (tableau, cartes, liste, etc.)

2. Je vous propose :

* Une structure HTML adaptée à votre XML

* Un style CSS propre et moderne

<figure><img src="image_38.png" /></figure>

Message DeepSeek

<figure><img src="image_39.png" /></figure>
IA Chatbots : Exercice

☐ Choisissez un des fichiers XML du dossier "xml"

☐ Choisissiez votre IA Chatbot ChatGPT ou DeepSeek

☐ Fournissez le prompt de la slide suivante en complétant les blancs selon vos envies

☐ Lancer le prompt

☐ Récupérez le fichier HTML qui a été généré

☐ Ouvrez le fichier dans un navigateur web

☐ Observez le résultat
IA Chatbot : Prompt

Voici un fichier écrit en XML-TEI. Je veux que tu le transformes en un HTML que je pourrais télécharger. Le titre de l'onglet doit être le suivant "Titre Exemple". Je veux également que tu me fournisses du CSS, que tu intègres directement dans le document. Je veux un style "sobre et classique|moderne et coloré" dans les tons "bleu|rouge|jaune" avec une foliation qui apparaît "souligné|barré", en taille "10|20|30" et en "rose|orange|vert". Intègres et transforme l'entièreté du contenu de l'arbre XML.
## Simple affichage : CETEIcean

* Outil créé par **Raffaele Viglianti** et **Hugh Cayless** en 2016

* Bibliothèque **JavaScript** permettant d'afficher des **documents TEI** dans un **navigateur Web** sans les transformer au préalable en HTML

* Test possible depuis le GitHub : https://github.com/TEIC/CETEIcean
# Introducing CETEIcean

<figure><img src="image_40.png" /></figure>

CETEIcean is a Javascript library that lets you display Text Encoding Initiative (TEI) or other XML files directly in your browser. You can style them using ordinary CSS or add behaviors to them. CETEIcean does not throw away any information in the source file, meaning you can take full advantage of the TEI (or DocBook, etc.) data model to add useful features to your document.

## Getting Started

Check out the examples. Most of these are based on the `testTEI.xml` file.

* A simple test.

* `addBehaviorTest` shows how to add your own behaviors.

* `EEBOTest` imports a remote TEI File from the `EEBO project` and styles it. If you can log in to the Chadwyck EEBO site, then you will be able to see page images.

* `TCW22` is an example of a TEI Technical Council Working Paper, pulling from the live source on GitHub.

* A DocBook example. Our 2018 `Balisage` paper.

Note that if you want to display remote XML documents, the server where they are located must support `CORS`. Otherwise, you're stuck with documents on the same server. Fortunately and usefully, GitHub does enable `CORS`, so you can use CETEIcean with any TEI file in a GitHub repo!

The GitHub repo lives at `TEIC/CETEIcean`. Please let us know if you find bugs or think of new features you'd like to see!
# Simple affichage : GitHub Pages

* Outil créé par l'équipe GitHub en 2008

* Service d'hébergement de sites statiques qui récupère les fichiers HTML, CSS et JavaScript directement à partir d'un référentiel sur GitHub, exécute éventuellement les fichiers via un processus de construction et publie un site Web

* Pour en créer une : **Settings > Pages > Branch** (choisir sa branche et son dossier de documents à publier)
# Websites for you and your projects.

Hosted directly from your **GitHub repository**. Just edit, push, and your changes are live.

<figure><img src="image_41.png" /></figure>
<figure><img src="image_42.png" /></figure>

Baudet, Louis (1845)
# Mythologie de la jeunesse

[Frontispice]

## mythographie

## Mythographie, corpus

* adams_myths-old-greece_1900

* anonyme_heathen-mythology_1842

* baude_mythologie-jeunesse_1845

* benucci_ristretto-analitico-01_1874

* bertoux_histoire-poétique_1806

* bres_mythologie-dames_1823

* brunel_cours-mythologie_1800

* brunel_cours-mythologie_1807

* bulfinch_age-of-fable_1855

* darlington_catechism-mythology_1832

* drioux_precis-elementaire_1850

* durante_compendio-della-mitologia-01_1855

* edom_mythologie-elementaire_1883

* edwards_hand-book-mythology_1883

## Le Chaos. — Formation du monde. — Les quatre âges.

Avant la formation du monde, il n'existait que le Chaos, assemblage confus de tous les éléments. Le soleil et la lune n'éclairaient pas ; la terre n'était point suspendue au milieu de l'espace, et la mer était sans rivages. Le froid et le chaud, le sec et l'humide, les corps pesants et les corps légers se livraient une guerre perpétuelle. Un dieu inconnu mit fin à ce désordre, en marquant à chaque élément la place qu'il devait occuper et en assujettissant la nature aux lois d'une immuable harmonie. Le Chaos cessa d'exister³.

C'est alors que parurent le soleil, la lune, les étoiles, les animaux de l'air, de la terre et des mers, et enfin l'homme.

On vit d'abord fleurir l'innocence et la justice. La terre produisait sans culture, et des fleuves de lait et de miel coulaient de toutes parts. C'était l'âge d'or⁴ [Fig. 7].

<figure><img src="image_43.png" /></figure>
Explorer son édition critique : EVT

☐ Outil créé en **2013** par des étudiants de l'**Université de Pise** dans le contexte du **Digital Vercelli Book project**

☐ Outil léger et **open source** spécialement conçu pour créer des **éditions numériques** à partir de textes codés en **XML**, permettant à l'utilisateur final de **parcourir, d'explorer et d'étudier** les éditions numériques au moyen d'une interface conviviale.

☐ Deux versions existent : **EVT 1** et **EVT 2**
A light-weight, open source tool specifically designed to create digital editions from XML-encoded
texts, freeing the scholar from the burden of web programming and enabling the final user to browse,
explore and study digital editions by means of a user-friendly interface.

<figure><img src="image_44.png" /></figure>

EVENT 1

<figure><img src="image_45.png" /></figure>

<figure><img src="image_46.png" /></figure>

EVENT 2

<figure><img src="image_47.png" /></figure>
# Explorer son édition critique : TEI CAT

* Outil créé par **Marjorie Burghart** en **2016**

* Visualisation aisée pour les éditions critiques XML TEI, particulièrement pour des éditions nativement numériques, dont l'objectif principal est de fournir aux éditeurs un moyen simple de visualiser leur travail en cours avant sa finalisation, et d'effectuer des contrôles qualité automatiques sur leur encodage

* Tâches disponibles : Afficher l'édition, effectuer des contrôles de qualité sur l'encodage, afficher le texte d'un ou plusieurs témoins spécifiques, obtenir un PDF imprimable et/ou un fichier LaTeX à partir d'un fichier XML TEI, annoter une image en XML TEI, obtenir des statistiques de base sur votre fichier TEI
<figure><img src="image_48.png" /></figure>

Critical
Apparatus
Toolbox

# TEI Critical Apparatus Toolbox

Home

Check your encoding

Display parallel versions

Print an edition

Annotate an image

Get statistics

Help

Download

Credits

The TEI Critical Apparatus Toolbox is a tool for people preparing a natively digital TEI critical edition.

The Toolbox lets you

* **Check your encoding:** offers facilities to display your edition while it is still in the making, and check the consistency of your encoding

* **Display parallel versions:** choose the sigla of the witnesses, and the different versions of the text, following each chosen witness, will be displayed in parallel columns.

* **Print an edition** of a TEI XML edition, with a TEI-to-Latex and PDF transformation

* **Annotate an image:** lets you easily trace zones on an image to prepare a documentary edition

* **Get statistics** on the XML tags effectively used in different parts of your edition, and some word count.
# TEI CAT : Exercice

* **Afficher les versions parallèles** : Récupérer le fichier <u>Lucain.xml</u>, le soumettre, cocher <u>Critical Text</u> et 3 témoins, le soumettre, observer le résultat

* **Imprimer une édition** : Adapter le <u>layout</u> (10pt, 0.5), la langue (français), les titres <u>tei:head</u> (LARGE, 0.5, center), ajouter un fichier XML du dossier "xml", appuyer sur <u>Envoyer</u>, ouvrir le dossier zippé et le PDF dedans, observer le résultat

* **Obtenir des statistiques** : Ajouter un fichier XML depuis le dossier "xml", le soumettre, observer le résultat
Exploiter pleinement son corpus : TEI Publisher

☐ Outil initié en **2015** et concrétisé à partir de **2020** par l'équipe **e-editiones**

☐ Fournir un outil qui permet aux chercheurs et aux éditeurs de **publier leurs documents sans devenir des programmeurs**, mais qui ne les force pas non plus à adopter un cadre unique

☐ Proposition de **templates HTML** et de **fichier ODD de transformation** pour des collections de fichiers XML, et possibilité de générer une **instance personnalisée**
<figure><img src="image_49.png" /></figure>

<figure><img src="image_50.png" /></figure>

<figure><img src="image_51.png" /></figure>

# The Instant Publishing Toolbox 9.1.0

Log in as tei-demo with password demo to experiment with your own files and ODDs

## Documents

Trier par

Default

<figure><img src="image_52.png" /></figure>

Query scope

Search content

<figure><img src="image_53.png" /></figure>

rechercher...

<figure><img src="image_54.png" /></figure>

## RECHERCHE

Place

<figure><img src="image_55.png" /></figure>

Montrer les 50 premiers

☐ Délos

2

☐ Berlin

3

☐ Délos

7

☐ London

2

<figure><img src="image_56.png" /><figcaption>Image by Chris Lawton</figcaption></figure>

## Collection de démonstration de TEI Publisher

Documents présentant diverses caractéristiques. Cette sélection n'est en aucun cas exhaustive mais représente un sous-ensemble de ce qu'il est possible de faire. Vous êtes invités à proposer vos propres cas d'utilisation pour compléter cette liste.

<figure><img src="image_57.png" /><figcaption>Image by Nick Monica</figcaption></figure>

## Aire de jeux

Une collection accessible en écriture dans laquelle vous pouvez télécharger vos propres documents à tester.

<figure><img src="image_58.png" /></figure>

## Fichiers ODD

Alexanderlied

<figure><img src="image_59.png" /></figure>

<figure><img src="image_60.png" /></figure>

Annotations

<figure><img src="image_61.png" /></figure>

<figure><img src="image_62.png" /></figure>

ODD used by the web-based annotation editor. Contains special rules to mark entities with the correct CSS classes

Bogactwa mowy polskiej

<figure><img src="image_63.png" /></figure>

<figure><img src="image_64.png" /></figure>

Polish dictionary example

DOCX Import

<figure><img src="image_65.png" /></figure>

<figure><img src="image_66.png" /></figure>

Import transformation to convert DOCX to TEI.
# Instances réalisées par l'équipe TEI Publisher à titre d'exemples

<figure><img src="image_67.png" /></figure>

Hébergé par TEI Publisher sur leur serveur

<figure><img src="image_68.png" /></figure>

## Diversité des documents

<figure><img src="image_69.png" /></figure>

Lettres

<figure><img src="image_70.png" /></figure>

Pièces de théâtre

<figure><img src="image_71.png" /></figure>

Rapports

<figure><img src="image_72.png" /></figure>

Livres

<figure><img src="image_73.png" /><figcaption>When the Wall Came Down</figcaption></figure>

<figure><img src="image_74.png" /><figcaption>Van Gogh Letters</figcaption></figure>

<figure><img src="image_75.png" /></figure>

## Design générique, aucune autre page d'accueil

<figure><img src="image_76.png" /></figure>

Deux avec un CSS par défaut

<figure><img src="image_77.png" /></figure>

Deux avec un CSS personnalisé

<figure><img src="image_78.png" /></figure>

## Accès à des options intéressantes

<figure><img src="image_79.png" /></figure>

Langage

<figure><img src="image_80.png" /></figure>

Filtres

<figure><img src="image_81.png" /><figcaption>Shakespeare's Plays</figcaption></figure>

<figure><img src="image_82.png" /><figcaption>Early English Books</figcaption></figure>
# Instances créées par des DH et autres

<figure><img src="image_83.png" /></figure>

## Hébergé par un serveur externe (Huma-Num ou l'University de Genève)

<figure><img src="image_84.png" /></figure>

## Diversité de documents

<figure><img src="image_85.png" /></figure>

Lettres

<figure><img src="image_86.png" /></figure>

Chapbooks

<figure><img src="image_87.png" /></figure>

Écrits

<figure><img src="image_88.png" /></figure>

## Design personnalisée

<figure><img src="image_89.png" /></figure>

## Accès à des options intéressantes

<figure><img src="image_90.png" /></figure>

Plusieurs collections dans la même instance

<figure><img src="image_91.png" /></figure>

Informations complémentaires fournies
(ressources, à propos, etc.)

<figure><img src="image_92.png" /></figure>

Digital Scholarly Editions

<figure><img src="image_93.png" /></figure>

Antonomaz

<figure><img src="image_94.png" /></figure>

Desenrollando el cordel
View

Original text

<figure><img src="image_95.png" /></figure>

<figure><img src="image_96.png" /></figure>

Mon cher Gauguin,

ce matin j'ai reçu votre excellente lettre que j'ai derechef envoyé à mon frère; Ⓓ votre conception de l'impressioniste en général, dont votre portrait Ⓔ est un symbole, est saisissante. Je suis on ne peut plus intrigué de voir cela – mais il me semblera j'en suis sûr d'avance que cette oeuvre soit trop importante pour que j'en veuille en echange.

Mais si vous voulez la garder pour nous,
mon frère la vous prendra, ce que je lui ai
immédiatement demandé, si vous voulez à la
première occasion et esperons que cela sera
sous bien peu.

Car nous chercherons encore une fois à
presser la possibilité de votre venue.

Je dois vous dire que même pendant le

View

Translation

<figure><img src="image_97.png" /></figure>

<figure><img src="image_98.png" /></figure>

My dear Gauguin,

This morning, I received your excellent letter, which I've immediately sent to my brother; Ⓓ your conception of the Impressionist in general, of which your portrait Ⓔ is a symbol, is striking. I couldn't be more intrigued to see it — but it will seem to me, I'm already sure, that this work is too important for me to wish to have it as an exchange.

But if you wish to keep it for us, my
brother will buy it from you, as I immediately
asked him, at the first opportunity if you
wish, and let's hope that will be very soon.

Because we'll try once again to urge the
possibility of your coming.

I must tell you that even while working I

<figure><img src="image_99.png" /></figure>

View

Notes

<figure><img src="image_100.png" /></figure>

<figure><img src="image_101.png" /></figure>

1. The letter from Gauguin was 692; Vincent sent it on to Theo with letter 694.

2. For Gauguin, *Self-portrait with portrait of Bernard, 'Les misérables', see letter 692, n. 1.*

3. Gauguin left Paris for Brittany on 26 January. See Merlhès 1989, p. 61.

4. See letter 589, n. 19, for Vincent and Theo's visit to Seurat's studio.

<figure><img src="image_102.png" /></figure>

ADD VIEW
My dear Butler,

I think it is necessary that, before sailing, I give you a short
"résumé" of the conclusions I have arrived at here, after many conferences,
visits and meditations, concerning some of the principal questions we have
at heart.

First of all, here is what I told, with the most deep conviction, to
our friends about the question of the organisation of our respective French,
British and American great private Associations for helping and controlling
the official creation or development of a League or Société of Nations.

Your American Association is the "LEAGUE TO ENFORCE PEACE",
presided by Mr W. TAFT. - The British is the Association for a LEAGUE OF
NATIONS presided by Lord GREY. The French is the Association for a
SOCIÉTÉ des NATIONS presided by M. Léon BOURGEOIS. They have all
three, one same aim : fundation and organ-ization of a durable and just
peace. Each of them is supported by the most important personalities in
their respective countries;

<figure><img src="image_103.png" /></figure>

<figure><img src="image_104.png" /></figure>

<figure><img src="image_105.png" /></figure>

ADD

## Persons

### Butler, Nicholas Murray

Born 02 April 1862 in Elizabeth (New Jersey)
Died 07 December 1947 in New York City (New York)

Nationality: American

Gender: Male

Occupation: philosopher/diplomat/educator

Education:

* Columbia University

Affiliation:

* President of the Columbia University (1902-1945)

* President of the Carnegie Endowment for International Peace (1925-1945)

Main event(s):

○ Nobel Peace Prize (1931)

### Bourgeois, Léon

Born 29 May 1851 in Paris
Died 29 September 1925 in Épernay

Nationality: French

Gender: Male

Occupation: politician/diplomat/judge

Education:

* Paris Law Faculty

Affiliation:

* Member of the French National Assembly
  Senator of the French Third Republic

* President of the Council

* Prefect of Police of Paris

* Member of the Académie des Sciences Morales et Politiques and the

<figure><img src="image_106.png" /></figure>
<figure><img src="image_107.png" /></figure>

<figure><img src="image_108.png" /></figure>

<figure><img src="image_109.png" /></figure>

kształt drobnych kamyczków, dziarstwisty:/

t. 867 p. 3/31

Głina kamyczkowatą Eligner

Piasek kamyczkowaty Trzeci And

Kamyk, im. zdrob. kamienia /:mały kamień:/

Chrusił kamyk między zębami Birkow

Trze nogę kamyk Tenże

Uciska nogę kamyk Tenże

Wlazł w trzewik kamyk Tenże

Kamyk biały Bud Szy

— cisnięty na wodę Feliń

<figure><img src="image_110.png" /></figure>

probierny Niemoio Jan

Kamyszczek, im. zdrob kamienia /:kamyczek:/

Licyża pacierze swé kamyszczkami Skarga

Wtrącać sobie kamyszczek w oko Skarga

Kamzans, u, r. m /:gzems nade drzwiami:/

Włodek

Kamzans na wieszchu słupów marmurowych Starow

Kanaan, a, m, i. /:Chanaan, syn Chama:/

2. Kanaan, u, r. m /:kráy Chanaana, Palestyna Channanea Kanaan: /:królestwo

<figure><img src="image_111.png" /></figure>
<figure><img src="image_112.png" /></figure>

<figure><img src="image_113.png" /></figure>

<figure><img src="image_114.png" /></figure>

DiScholEd - Digital Scholarly Editions

1914-08-01 - 1920-01

<figure><img src="image_115.png" /></figure>

<figure><img src="image_116.png" /></figure>

Sort by
Title

<figure><img src="image_117.png" /></figure>

Filter by
Title

<figure><img src="image_118.png" /></figure>

Filter

<figure><img src="image_119.png" /></figure>

<figure><img src="image_120.png" /></figure>

<figure><img src="image_121.png" /></figure>

<figure><img src="image_122.png" /></figure>

Found 519 items

↑ GO TO PARENT

Letter number 1 from Paul d'Estournelles de Constant to Nicholas Murray Butler (August 15, 1914)

Lettre n°1 de Paul d'Estournelles de Constant à Nicholas Murray Butler (15 août 1914)

Written in Clermont-Créans.

Status: Annotation in progress

Letter number 102 from Paul d'Estournelles de Constant to Nicholas Murray Butler (November 16, 1915)

Lettre n°102 de Paul d'Estournelles de Constant à Nicholas Murray Butler (16 novembre 1915)

Written in Paris.

Status: Annotation in progress

Letter number 103 from Paul d'Estournelles de Constant to Nicholas Murray Butler (November 14, 1915)

Filters

From

<figure><img src="image_123.png" /></figure>

Show top 50

<figure><img src="image_124.png" /></figure>

Paul d'Estournelles de Constant Show top 50

Genre

<figure><img src="image_125.png" /></figure>

Show top 50

<figure><img src="image_126.png" /></figure>

Letters Show top 50

Language

Show top 50

<figure><img src="image_127.png" /></figure>

English 1

<figure><img src="image_128.png" /></figure>

French 518

Date

<figure><img src="image_129.png" /></figure>

Show top 50

<figure><img src="image_130.png" /></figure>

1915 14

<figure><img src="image_131.png" /></figure>

1916 92

<figure><img src="image_132.png" /></figure>

1917 137

<figure><img src="image_133.png" /></figure>

1918 116

<figure><img src="image_134.png" /></figure>

1919 148
# TEI Publisher : Exercice

* Se connecter avec les identifiants suivants : tei-demo et demo

* Aller dans **Aire de jeux** > Ajouter un fichier XML > Une fois dans le fichier, appuyer sur les trois lignes horizontales en haut en droite > Choisir diverses ODD/HTML et observer le résultat

* Créer une ODD dans "Fichiers ODD" > Ajouter l'élément *persName* et mettre dans Renditions "color: red;" et faire de même avec *placeName* mais en vert

* Aller dans Fonctions avancées > **Générateur d'application** > Observer ce qui est proposé
RESSOURCES
## Resources : Sites Web

* ChatGPT : https://chatgpt.com/

* DeepSeek : https://chat.deepseek.com/

* Edition Visualization Technology : http://evt.labcd.unipi.it/

* GitHub Pages : https://pages.github.com/

* TEI Publisher : https://teipublisher.com/exist/apps/tei-publisher/index.html

* TEI Critical Apparatus Toolbox : http://teicat.huma-num.fr/

* Teinte : https://obtic.huma-num.fr/teinte/
Ressources : Sites Web

☐ CETEIcean : https://teic.github.io/CETEIcean/

☐ CSS : https://developer.mozilla.org/fr/docs/Web/CSS

☐ GitHub : https://github.com/

☐ HTML : https://developer.mozilla.org/fr/docs/Web/HTML

☐ Nakala : https://www.nakala.fr/

☐ XSLT : https://www.w3schools.com/xml/xsl_intro.asp

☐ Zenodo : https://zenodo.org/
Ressources : Publications

☐ Alix Chagué, Floriane Chiffoleau, Matthias Gille Levenson, Hugo Scheithauer, Ariane Pinche. Chaînes d'acquisition, de traitement et de publication du texte. Consortium Ariane - Axe 1. 2024 : https://hal.science/hal-04734959

☐ Floriane Chiffoleau. TEI Publisher, a platform for sustainable digital editions. 2023 : https://hal.science/hal-04247980

☐ Elena Pierazzo, What future for digital scholarly editions? From Haute Couture to Prêt-à-Porter, International Journal of Digital Humanities, 2019, https://doi.org/10.1007/s42803-019-00019-3
Merci de votre attention

*Des questions ?*

https://github.com/FloChiff/
AtelierObTIC-creer-une-edition-scientifique-numerique
chiffoleau.floriane[at]gmail.com