music-encoding · felix-commits · Mar 10, 2026 · Mar 12, 2026
diff --git a/_config.yml b/_config.yml
@@ -16,6 +16,9 @@ repository: "music-encoding/music-encoding.github.io"
 plugins:
   - jekyll-redirect-from
 
+gems:
+  - public_suffix: 5.0.0
+
 menu:
     - id: about
       label: 'About'
@@ -134,6 +137,9 @@ collections:
   tutorials-ES:
     output: true
     permalink: /:collection/:name
+  tutorials-FR:
+    output: true
+    permalink: /:collection/:name
   conferences:
     output: true
     permalink: /:collection/:name
diff --git a/_layouts/tutorials-FR.html b/_layouts/tutorials-FR.html
@@ -0,0 +1,126 @@
+---
+layout: default
+---
+<div class="columns">
+    <div class="column col-8 col-sm-12 tutorialBox">
+
+        {% if page.type != 'tutorial-FR' %}
+
+            {{ content }}
+
+        {% else %}
+
+        <h1><a href="{{ site.baseurl }}/resources/tutorials.html" title="Back to Tutorials main page">←</a> MEI Tutorials</h1>
+
+        <h2>{{ page.fullname }}</h2>
+
+            {% if content %}
+                {{ content }}
+            {% endif %}
+
+            <h3 id="stepLabel">
+                <!-- step label goes in here -->
+            </h3>
+
+            <div id="instruction">
+                <!-- instruction texts go in here -->
+            </div>
+
+            <div id="editorContainer" style="display: none;">
+                <h3>Editeur MEI
+                    <button id="btn-openFullFileModal" class="btn btn-link float-right disabled" title="uniquement permis lors au moment de la validation">afficher le code complet</button>
+                    <button id="btn-toggleHint" class="btn btn-link float-right disabled" title="tromperie ou ruse">afficher l'indice</button>
+                </h3>
+                <div id="editorBox">
+                    <div id="editor">
+                        <!-- editor content goes in here -->
+                    </div>
+                </div>
+
+                <div id="hints" style="display: none;">
+                    <!-- validation hints go in here -->
+                </div>
+
+                <h3>Rendu</h3>
+                <div id="rendering">
+                    <!-- verovio rendering goes in here -->
+                </div>
+            </div>
+            <div id="acknowledgments" style="display: none;">
+                <h3>Remerciements</h3>
+                <p>Ce tutoriel a été créé par :</p>
+                <ul id="ackList"></ul>
+                <p>Traductions réalisées par Aurélien Balland Chatignon et Félix Poullet-Pagès sous la supervision de Kévin Roger.</p>
+            </div>
+
+             <div id="navigationButtons" style="width: 100%;">
+                <button id="previousStepButton" style="display: none;" class="btn btn-primary btn-sm float-left" ><i class="icon icon-back"></i>Retour</button>
+                <button id="nextStepButton" style="display: none;" class="btn btn-primary btn-sm float-right">Continuer<i class="icon icon-forward"></i></button>
+            </div>  
+
+            <ul id="stepBox" class="step">
+                <!-- tutorial step list goes in here -->
+            </ul>
+
+            <div class="modal modal-lg" id="fullFileModal"><a id="fullFileModalCloseBack" class="modal-overlay" href="#modals-sizes" aria-label="Close"></a>
+                <div class="modal-container" role="document">
+                    <div class="modal-header"><a id="fullFileModalCloseTop" class="btn btn-clear float-right" href="#modals-sizes" aria-label="Close"></a>
+                        <div id="fullFileTitle" class="modal-title h5"></div>
+                    </div>
+                    <div class="modal-body">
+                        <div id="fullFileContent" class="content">
+
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <a id="fullFileDownloadBtn" class="btn btn-primary"><i class="icon icon-download"></i>Télécharger</a>
+                        <a id="fullFileModalCloseBottom" class="btn btn-link" href="#modals-sizes">Fermer</a>
+                    </div>
+                </div>
+            </div>
+
+            <script src="/js/ace-src-noconflict/ace.js"></script>
+            <script src="/js/verovio-toolkit.js"></script>
+            <script src="/js/mei-tutorials.js"></script>
+            <script>
+
+                try {
+                    fetch("./{{page.data}}")
+                        .then(function(response) {
+                            if (response.ok) {
+                                return response.json()
+                            }
+                            throw new Error('Erreur réseau en essayant de récupérer  ', page.data);
+                        })
+                        .then(function(data) {
+                            setupTutorial(data, "FR");
+                        });
+                } catch(err) {
+                    console.log('Erreur lors de la récupération des données : ' + err)
+                }
+
+            </script>
+        {% endif %}
+    </div>
+
+    <!-- side menu -->
+    <div class="column col-4 col-sm-12">
+        <h2>Tutoriels disponibles</h2>
+        {% assign t = site.collections | where: "label","tutorials-FR" | first %}
+        {% for tutorial in t.docs %}
+        {% if tutorial.name != page.name %}
+        <div class="tile">
+            <div class="tile-icon">
+                <div class="arrow-tile-icon">
+                    <a href="{{ tutorial.url }}.html" class="icon icon-message centered"></a>
+                </div>
+            </div>
+            <div class="tile-content">
+                <div class="tile-title"><a href="{{ tutorial.url }}.html">{{ tutorial.name }}</a></div>
+                <div class="tile-subtitle text-gray">{{tutorial.fullname}}</div>
+            </div>
+        </div>
+        {% endif %}
+        {% endfor %}
+    </div>
+</div>
diff --git a/_tutorials-ES/100_structure/step-01/100_structure_step-01-desc.html b/_tutorials-ES/100_structure/step-01/100_structure_step-01-desc.html
@@ -12,7 +12,12 @@
     <p class="tutorialTask">Introduce un elemento raíz <code>&lt;mei&gt;</code> en el editor de abajo. No olvides cerrar la etiqueta de apertura con la correspondiente etiqueta de cierre.</p>
 
     <p>
-        P.D.: En los próximos pasos trataremos algunos principios básicos de XML. Para más información, puedes consultar las muchas fuentes disponibles en la web, por ejemplo, la <a href="https://www.tei-c.org/release/doc/tei-p5-doc/en/html/SG.html" target="_blank" rel="noopener, noreferrer">Gentle Introduction to XML</a> (<i>Ligera introducción al XML</i>) de la Text Encoding Initative (<a href="https://tei-c.org/" target="_blank" rel="noopener, noreferrer">TEI</a>).
+        P.D.: En los próximos pasos trataremos algunos principios básicos de XML. 
+        Para más información, puedes consultar las muchas fuentes disponibles en 
+        la web, por ejemplo, la 
+        <a href="https://www.tei-c.org/release/doc/tei-p5-doc/en/html/SG.html" target="_blank" rel="noopener, noreferrer">
+            Gentle Introduction to XML</a> (<i>Ligera introducción al XML</i>) de la Text Encoding Initative (
+                <a href="https://tei-c.org/" target="_blank" rel="noopener, noreferrer">TEI</a>).
     </p>
 
 </div>
diff --git a/_tutorials-FR/100_structure/100_Structure.md b/_tutorials-FR/100_structure/100_Structure.md
@@ -0,0 +1,7 @@
+---
+layout: tutorials-FR
+type: tutorial-FR
+name: "DÉBUTANT : Les bases de XML et la structure minimale de la MEI"
+fullname: "Un court tutoriel sur les bases XML de la MEI"
+data: "100_structure.json"
+---
diff --git a/_tutorials-FR/100_structure/100_structure.json b/_tutorials-FR/100_structure/100_structure.json
@@ -0,0 +1,81 @@
+{
+  "steps": [
+    {
+      "label":"Bienvenue dans la MEI",
+      "descFile": "100_structure_step-00-desc.html"
+    },
+    {
+      "label": "L'élément racine de la MEI",
+      "editorLines": 1,
+      "descFile": "100_structure_step-01-desc.html",
+      "prefillFile": "100_structure_step-01-prefill.xml",
+      "xmlFile": "100_structure_step-01.xml",
+      "xpaths": [
+        {"rule": "count(//mei) = 1", "renderanyway": true, "hint": "Vous avez besoin d'un élément mei."}
+      ]
+    },
+    {
+      "label": "Le namespace MEI",
+      "editorLines": 1,
+      "descFile": "100_structure_step-02-desc.html",
+      "prefillFile": "100_structure_step-02-prefill.xml",
+      "xmlFile": "100_structure_step-02.xml",
+      "xpaths": [
+        {"rule": "count(*[local-name()='mei']) = 1", "renderanyway": true, "hint": "Vous avez besoin d'un élément mei."},
+        {"rule": "*[local-name()='mei' and namespace-uri()='http://www.music-encoding.org/ns/mei']", "renderanyway": true, "hint": "Vous avez besoin d'une déclaration @xmlns avec l'espace de nom mei \"http://www.music-encoding.org/ns/mei<music>\"."}
+      ]
+    },
+    {
+      "label": "Les deux éléments enfants de base",
+      "editorLines": 4,
+      "descFile": "100_structure_step-03-desc.html",
+      "prefillFile": "100_structure_step-03-prefill.xml",
+      "xmlFile": "100_structure_step-03.xml",
+      "xpaths": [
+        {"rule": "count(//*[local-name()='mei']) = 1", "renderanyway": false, "hint": "Vous avez besoin d'un élément mei."},
+        {"rule": "*[local-name()='mei' and namespace-uri()='http://www.music-encoding.org/ns/mei']", "renderanyway": true, "hint": "Vous avez besoin d'une déclaration @xmlns avec l'espace de nom mei \"http://www.music-encoding.org/ns/mei<music>\" dans l'élément <mei>."},
+        {"rule": "count(//*[local-name()='meiHead']) = 1", "renderanyway": false, "hint": "Vous avez besoin d'un élément meiHead."},
+        {"rule": "//*[local-name()='mei']/*[local-name()='meiHead']", "renderanyway": false, "hint": "L'élément meiHead doit être un enfant de mei."},
+        {"rule": "count(//*[local-name()='music']) = 1", "renderanyway": false, "hint": "Vous avez besoin d'un élément music."},
+        {"rule": "//*[local-name()='mei']/*[local-name()='music']", "renderanyway": false, "hint": "L'élément music doit être un enfant de mei."},
+        {"rule": "//*[local-name()='mei']/*[local-name()='meiHead']/following-sibling::*[local-name()='music']", "renderanyway": false, "hint": "L'élément music doit être à la suite de meiHead."}
+      ]
+    },
+    {
+      "label": "L'en-tête MEI minimal",
+      "editorLines": 11,
+      "descFile": "100_structure_step-04-desc.html",
+      "prefillFile": "100_structure_step-04-prefill.xml",
+      "xmlFile": "100_structure_step-04.xml",
+      "xpaths": [
+        {"rule": "count(//*[local-name()='mei']) = 1", "renderanyway": false, "hint": "Vous avez besoin d'un élément mei."},
+        {"rule": "*[local-name()='mei' and namespace-uri()='http://www.music-encoding.org/ns/mei']", "renderanyway": true, "hint": "Vous avez besoin d'une déclaration @xmlns avec l'espace de nom mei \"http://www.music-encoding.org/ns/mei<music>\" dans l'élément <mei>."},
+        {"rule": "count(//*[local-name()='meiHead']) = 1", "renderanyway": false, "hint": "Vous avez besoin d'un élément mei."},
+        {"rule": "//*[local-name()='mei']/*[local-name()='meiHead']", "renderanyway": false, "hint": "L'élément meiHead doit être un enfant de mei."},
+        {"rule": "count(//*[local-name()='music']) = 1", "renderanyway": false, "hint": "Vous avez besoin d'un élément music."},
+        {"rule": "//*[local-name()='mei']/*[local-name()='music']", "renderanyway": false, "hint": "L'élément music doit être à un enfant de mei."},
+        {"rule": "//*[local-name()='mei']/*[local-name()='meiHead']/following-sibling::*[local-name()='music']", "renderanyway": false, "hint": "L'élément music doit être à la suite de meiHead."},
+        {"rule": "count(//*[local-name()='fileDesc']) = 1", "renderanyway": false, "hint": "Vous avez besoin d'un élement fileDesc."},
+        {"rule": "//*[local-name()='meiHead']/*[local-name()='fileDesc']", "renderanyway": false, "hint": "L'élément fileDesc doit être un enfant de meiHead."},
+        {"rule": "count(//*[local-name()='titleStmt']) = 1", "renderanyway": false, "hint": "Vous avez besoin d'un élement titleStmt."},
+        {"rule": "//*[local-name()='fileDesc']/*[local-name()='titleStmt']", "renderanyway": false, "hint": "L'élément titleStmt doit être un enfant de fileDesc."},
+        {"rule": "count(//*[local-name()='pubStmt']) = 1", "renderanyway": false, "hint": "Vous avez besoin d'un élement pubStmt."},
+        {"rule": "//*[local-name()='fileDesc']/*[local-name()='pubStmt']", "renderanyway": false, "hint": "L'élément pubStmt doit être un enfant de fileDesc."},
+        {"rule": "//*[local-name()='fileDesc']/*[local-name()='titleStmt']/following-sibling::*[local-name()='pubStmt']", "renderanyway": false, "hint": "pubStmt doit être à la suite de l'élément de titleStmt."},
+        {"rule": "count(//*[local-name()='title']) = 1", "renderanyway": false, "hint": "Vous avez besoin d'un élement title."},
+        {"rule": "//*[local-name()='titleStmt']/*[local-name()='title']", "renderanyway": false, "hint": "L'élement title doit être un enfant de titleStmt."}
+      ]
+    }
+  ],
+  "end": "100_structure_end.html",
+  "resp":[
+    {
+      "name":"Stefan Münnich",
+      "affiliation":"Anton Webern Gesamtausgabe | University of Basel"
+    },
+    {
+      "name":"Johannes Kepper",
+      "affiliation":"Beethovens Werkstatt | Universität Paderborn"
+    }
+  ]
+}
diff --git a/_tutorials-FR/100_structure/100_structure_end.html b/_tutorials-FR/100_structure/100_structure_end.html
@@ -0,0 +1,28 @@
+<div>
+    <h3>Félicitations !</h3>
+    <p>
+        Vous venez d'écrire un fichier MEI valide et avez terminé avec succès ce tutoriel. Vous devriez maintenant être en mesure de :</p>
+    <ul>
+        <li>comprendre les principes de base de XML et comment il sert de base à MEI</li>
+        <li>identifier et rédiger la structure de base la plus extérieure d'un document conforme à MEI, y compris son titre</li>
+        <li>différencier les deux principales sections d'un fichier MEI, celle responsables des informations de métadonnées
+            (<code>&lt;meiHead&gt;</code>) et celle responsable des informations sur le contenu musical (<code>&lt;music&gt;</code>).</li>
+    </ul>
+    <p>
+        Étant donné que les sujets abordés dans ce tutoriel renvoient au chapitre <a href="https://music-encoding.org/guidelines/v4/content/shared.html#sharedStructuralElements" target="_blank" rel="noopener noreferrer">Éléments structurels</a> des directives MEI,
+        nous vous recommandons de consulter ce chapitre dans le cas de besoin d'informations plus détaillées.
+    </p>
+    <p>
+        Bien sûr, ce tutoriel n'étant qu'une introduction, il vous manque encore beaucoup d'informations pour créer un fichier MEI complet - nous avons omis toutes les informations sur le contenu musical telles que les mesures, les portées ou les notes, et vous devez 
+        également apprendre à configurer la mesure, la tonalité et les clefs.
+        Vous trouverez ci-contre d'autres tutoriels que nous aimerions vous recommander comme prochaines étapes dans votre apprentissage. Vous pourrez toujours y revenir (et même à celui que vous lisez actuellement) lorsque vous souhaiterez vous rappeler comment faire certaines choses en MEI.
+    </p>
+    <p>
+        Dès que vous vous serez bien familiarisé avec la MEI, nous vous invitons à partager votre expérience avec la <a href="/community/community-contacts.html" target="_blank" rel="noopener noreferrer">Communauté MEI</a>
+        et, pourquoi pas, à rédiger vous-même un tutoriel sur un aspect de la MEI qui vous intéresse particulièrement. Vous n'avez pas besoin d'être un expert pour cela - il est bon d'avoir des tutoriels à différents niveaux. Très souvent un tutoriel rédigé par d'autres débutants qui viennent de maîtriser une tâche 
+        est plus facile à suivre qu'un guide écrit par une personne plus experimentée qui, ayant complètement assimilé certains éléments, peut oublier à quel point ils étaient difficiles à comprendre au début.
+        Nous avons un <a href="./tutorials.html" target="_blank" rel="noopener noreferrer">tutoriel sur la rédaction de tutoriels</a>,
+        et nous proposons des modèles à suivre. C'est facile de devenir un membre actif de la Communauté MEI ! ☺
+    </p>
+    </div>
+
diff --git a/_tutorials-FR/100_structure/step-00/100_structure_step-00-desc.html b/_tutorials-FR/100_structure/step-00/100_structure_step-00-desc.html
@@ -0,0 +1,32 @@
+<div>
+  <p>
+    Dans ce tutoriel, vous vous familiariserez avec l'organisation d'un
+    langage XML et apprendrez à concevoir la structure d'un fichier MEI valide.
+    Vous apprendrez à en identifier les différentes parties et le type
+    d'informations que chacune peut contenir.
+  </p>
+  <p>
+    Les sujets de ce tutoriel sont documentés dans le chapitre
+    <a
+      href="https://music-encoding.org/guidelines/v4/content/shared.html#sharedStructuralElements"
+      target="_blank"
+      rel="noopener, noreferrer"
+      >Structural Elements</a
+    >
+    du guide MEI. Nous vous invitons à consulter ce chapitre pour de plus amples
+    informations.
+  </p>
+  <p>
+    Gardez à l'esprit que le code que vous écrirez à l'issue de ce tutoriel ne
+    pourra pas être rendu, car il ne contiendra pas d'information musicale.
+  </p>
+  <p>
+    À la fin de ce dernier, vous pourrez poursuivre avec d'autres tutoriels pour
+    explorer d'autres aspects importants de la MEI. Ces tutoriels peuvent également
+    servir de références - vous pourrez y retourner.
+  </p>
+  <p>
+    Afin de commencer, appuyez sur le bouton "continuer" en bas à droite de ce
+    paragraphe.
+  </p>
+</div>
diff --git a/_tutorials-FR/100_structure/step-01/100_structure_step-01-desc.html b/_tutorials-FR/100_structure/step-01/100_structure_step-01-desc.html
@@ -0,0 +1,56 @@
+<div>
+  <p class="tutorialGoal">
+  Première étape : découvrez quelques notions simples d'XML et
+    apprenez à reconnaître l'élément racine de MEI.
+  </p>
+  <p>
+    MEI utilise
+    <a
+      href="https://fr.wikipedia.org/wiki/XML"
+      target="_blank"
+      rel="noopener, noreferrer"
+      >XML</a
+    >
+    pour représenter la notation musicale. XML est un système d'encodage
+    hiérarchique dans lequel les éléments sont les objets centraux. Ils sont
+    représentés à l'aide de ce qu'on appelle des « balises ». La plupart du temps,
+    ces balises consistent en une balise d'ouverture (c'est-à-dire un nom
+    compris entre des crochets angulaires comme <code>&lt;element&gt;</code>) et
+    sa balise de fermeture correspondante (<code>&lt;/element&gt;</code>). S'il
+    n'y a aucun contenu entre ces deux balises (comme du texte ou d'autres
+    éléments), l'élément peut être raccourci en une balise autofermante de la
+    forme <code>&lt;element /&gt;</code>. Dans tous les cas, chaque balise
+    ouverte doit être fermée plus tard.
+  </p>
+  <p>
+    Vous pouvez penser à un document XML comme à un arbre qui se ramifie d'un
+    élément racine vers des éléments enfants imbriqués.
+    L'élément racine est le parent de tous les autres éléments. Il peut porter n'importe quel nom arbitraire, mais dans les
+    documents MEI, cet élément racine est simplement nommé 
+    <code>&lt;mei&gt;</code>. 
+  </p>
+
+  <p class="task">
+    Entrez un élément racine <code>&lt;mei&gt;</code> dans l'éditeur ci-dessous.
+    N'oubliez pas de fermer la balise d'ouverture par une balise de fermeture
+    correspondante.
+  </p>
+
+  <p>
+    PS : Nous aborderons quelques principes XML de base supplémentaires dans les
+    prochaines étapes. Pour des informations plus détaillées, vous pouvez
+    consulter les nombreuses ressources disponibles sur le web, par exemple l'
+    <a
+      href="https://www.tei-c.org/release/doc/tei-p5-doc/en/html/SG.html"
+      target="_blank"
+      rel="noopener, noreferrer"
+      >Introduction détaillée à XML</a
+    >
+    de l'Initiative d'encodage de texte (<a
+      href="https://tei-c.org/"
+      target="_blank"
+      rel="noopener, noreferrer"
+      >TEI</a
+    >).
+  </p>
+</div>
diff --git a/_tutorials-FR/100_structure/step-01/100_structure_step-01-prefill.xml b/_tutorials-FR/100_structure/step-01/100_structure_step-01-prefill.xml
@@ -0,0 +1 @@
+<!-- Votre code doit remplacer cette ligne -->
diff --git a/_tutorials-FR/100_structure/step-01/100_structure_step-01.xml b/_tutorials-FR/100_structure/step-01/100_structure_step-01.xml
@@ -0,0 +1,4 @@
+<!-- ATTENTION: Ceci n'est pas encore un document MEI valide -->
+<?edit-start?>
+<mei></mei>
+<?edit-end?>