tutorials: french translation (FR)

_config.yml

@@ -118,6 +118,9 @@ collections:
   tutorials-ES:
     output: true
     permalink: /:collection/:name
+  tutorials-FR:
+    output: true
+    permalink: /:collection/:name
   conferences:
     output: true
     permalink: /:collection/:name

_layouts/tutorials-FR.html

@@ -0,0 +1,119 @@
+---
+layout: default
+---
+<div class="columns">
+    <div class="column col-8 col-sm-12 tutorialBox">
+
+        {% if page.type != 'tutorial-FR' %}
+
+            {{ content }}
+
+        {% else %}
+
+            <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="sólo permitido cuando sea válido">mostrar codificación completa</button>
+                    <button id="btn-toggleHint" class="btn btn-link float-right disabled" title="engaño o trampa">mostrar pista</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>
+            <button id="nextStepButton" class="btn btn-primary btn-sm float-right">Continúa <i class="icon icon-forward"></i></button>
+
+            <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 Aurelien Balland-Chatignon et Félix Poullet-Pagès</p>
+            </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éccupérer  ', page.data);
+                        })
+                        .then(function(data) {
+                            setupTutorial(data, "FR");
+                        });
+                } catch(err) {
+                    console.log('Erreur lors de la réccupé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>

_tutorials-FR/100_structure/100_Structure.md

@@ -0,0 +1,7 @@
+---
+layout: tutorials-FR
+type: tutorial-FR
+name: "BEGINNERS: XML basics and minimal MEI structure"
+fullname: "A short tutorial about the basics of XML & MEI"
+data: "100_structure.json"
+---

_tutorials-FR/100_structure/100_structure.json

@@ -0,0 +1,81 @@
+{
+  "steps": [
+    {
+      "label":"Welcome to MEI",
+      "descFile": "100_structure_step-00-desc.html"
+    },
+    {
+      "label": "The MEI root element",
+      "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": "You need one mei element."}
+      ]
+    },
+    {
+      "label": "The MEI namespace",
+      "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": "You need one mei element."},
+        {"rule": "*[local-name()='mei' and namespace-uri()='http://www.music-encoding.org/ns/mei']", "renderanyway": true, "hint": "You need a @xmlns declaration with the mei namespace 'http://www.music-encoding.org/ns/mei'."}
+      ]
+    },
+    {
+      "label": "Two basic child elements",
+      "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": "You need one mei element."},
+        {"rule": "*[local-name()='mei' and namespace-uri()='http://www.music-encoding.org/ns/mei']", "renderanyway": true, "hint": "You need a @xmlns declaration with the mei namespace 'http://www.music-encoding.org/ns/mei' in the mei element."},
+        {"rule": "count(//*[local-name()='meiHead']) = 1", "renderanyway": false, "hint": "You need one meiHead element."},
+        {"rule": "//*[local-name()='mei']/*[local-name()='meiHead']", "renderanyway": false, "hint": "meiHead has to a be child of the mei element."},
+        {"rule": "count(//*[local-name()='music']) = 1", "renderanyway": false, "hint": "You need one music element."},
+        {"rule": "//*[local-name()='mei']/*[local-name()='music']", "renderanyway": false, "hint": "music has to a be child of the mei element."},
+        {"rule": "//*[local-name()='mei']/*[local-name()='meiHead']/following-sibling::*[local-name()='music']", "renderanyway": false, "hint": "music has to follow the meiHead element."}
+      ]
+    },
+    {
+      "label": "The minimum MEI header",
+      "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": "You need one mei element."},
+        {"rule": "*[local-name()='mei' and namespace-uri()='http://www.music-encoding.org/ns/mei']", "renderanyway": true, "hint": "You need a @xmlns declaration with the mei namespace 'http://www.music-encoding.org/ns/mei' in the mei element."},
+        {"rule": "count(//*[local-name()='meiHead']) = 1", "renderanyway": false, "hint": "You need one meiHead element."},
+        {"rule": "//*[local-name()='mei']/*[local-name()='meiHead']", "renderanyway": false, "hint": "meiHead has to be a child of the mei element."},
+        {"rule": "count(//*[local-name()='music']) = 1", "renderanyway": false, "hint": "You need one music element."},
+        {"rule": "//*[local-name()='mei']/*[local-name()='music']", "renderanyway": false, "hint": "music has to be a child of the mei element."},
+        {"rule": "//*[local-name()='mei']/*[local-name()='meiHead']/following-sibling::*[local-name()='music']", "renderanyway": false, "hint": "music has to follow the meiHead element."},
+        {"rule": "count(//*[local-name()='fileDesc']) = 1", "renderanyway": false, "hint": "You need one fileDesc element."},
+        {"rule": "//*[local-name()='meiHead']/*[local-name()='fileDesc']", "renderanyway": false, "hint": "fileDesc has to be a child of the meiHead element."},
+        {"rule": "count(//*[local-name()='titleStmt']) = 1", "renderanyway": false, "hint": "You need one titleStmt element."},
+        {"rule": "//*[local-name()='fileDesc']/*[local-name()='titleStmt']", "renderanyway": false, "hint": "titleStmt has to be a child of the fileDesc element."},
+        {"rule": "count(//*[local-name()='pubStmt']) = 1", "renderanyway": false, "hint": "You need one pubStmt element."},
+        {"rule": "//*[local-name()='fileDesc']/*[local-name()='pubStmt']", "renderanyway": false, "hint": "pubStmt has to be a child of the fileDesc element."},
+        {"rule": "//*[local-name()='fileDesc']/*[local-name()='titleStmt']/following-sibling::*[local-name()='pubStmt']", "renderanyway": false, "hint": "pubStmt has to follow the titleStmt element."},
+        {"rule": "count(//*[local-name()='title']) = 1", "renderanyway": false, "hint": "You need one title element."},
+        {"rule": "//*[local-name()='titleStmt']/*[local-name()='title']", "renderanyway": false, "hint": "title has to be a child of the titleStmt element."}
+      ]
+    }
+  ],
+  "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"
+    }
+  ]
+}

_tutorials-FR/100_structure/100_structure_end.html

@@ -0,0 +1,31 @@
+<div>
+    <h3>Congratulations!</h3>
+    <p>
+        You have just written a valid MEI file and successfully finished this tutorial. You should be able now</p>
+    <ul>
+        <li>to understand the basic principles of XML and how it is the basis for MEI</li>
+        <li>to identify and to write the outermost basic structure of an MEI-conformant document
+            including its title</li>
+        <li>to differentiate between two main sections of a MEI file responsible for metadata information
+            (<code>&lt;meiHead&gt;</code>) or information about the musical content (<code>&lt;music&gt;</code>).</li>
+    </ul>
+    <p>
+        Since the topics addressed in this tutorial referred to the chapter <a href="https://music-encoding.org/guidelines/v4/content/shared.html#sharedStructuralElements" target="_blank" rel="noopener, noreferrer">Structural Elements</a> of the MEI Guidelines,
+        we recommend to consult this chapter whenever you need more detailed information.
+    </p>
+    <p>
+        Of course, a lot more is needed for a comprehensive MEI file – we left out all information about any musical
+        content like measures, staves, or notes, and you also need to learn how to set up meter, key, and clefs.
+        Here are some other tutorials we would like to recommend as next steps with MEI. Of course, you can always come
+        back to these (or even this one) when you would like to remind yourself how to do certain things in MEI.
+    </p>
+    <p>
+        As soon as you have familiarized yourself with MEI to some degree, we invite you to share your
+        experience with the <a href="/community/community-contacts.html" target="_blank" rel="noopener, noreferrer">MEI Community</a>
+        and write a tutorial on an aspect of MEI that you're particularly interested in. You don't have to be an expert
+        for this – it's good to have tutorials on different levels, and very often a tutorial written by other beginners
+        which just mastered a task is easier to follow than a guide written by someone who's not seeing the problem at all.
+        We do have a <a href="./tutorials.html" target="_blank" rel="noopener, noreferrer">tutorial on how to write tutorials</a>,
+        and there are templates to follow. It's that easy to become an active member of the MEI Community :-)
+    </p>
+</div>

_tutorials-FR/100_structure/step-00/100_structure_step-00-desc.html

@@ -0,0 +1,19 @@
+<div>
+    <p>
+        Dans ce tutoriel, vous vous familiariserez avec l'organisation de base 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'issu de ce tutoriel ne pourra pas être rendu car il ne contiendra pas d'information musical.
+    </p>
+    <p>
+        À la fin de ce dernier, vous pourrez poursuivre avec d'autres tutoriaux pour explorer d'autres aspects important de MEI.
+        Ces tutoriaux 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>

_tutorials-FR/100_structure/step-01/100_structure_step-01-desc.html

@@ -0,0 +1,28 @@
+<div>
+    <p class="tutorialGoal">
+        Première étape: S'habituer avec la structure XML et découvrir l'élement racine de MEI.
+    </p>
+    <p>
+        MEI utilise le <a href="https://fr.wikipedia.org/wiki/XML" target="_blank" rel="noopener, noreferrer">XML</a> pour representer la notation musicale. 
+        Le XML est un système d'encodage hierarchisé centré sur les éléments. Ils sont représentés par des balises. la plupart du temps, ces balises se composent
+        d'une "balise ouvrante" (Il s'agit d'un nom entouré de chevrons comme <code>&lt;element&gt;</code>) et de sa balise fermante correspondante 
+        (<code>&lt;/element&gt;</code>), mais s'il n'y a aucun contenu entre ces deux balises (comme du texte ou un autre élément) l'élément peut être raccourci
+        dans une balise autofermante sous la forme <code>&lt;element /&gt;</code>. Quoiqu'il en soit, chaque balise ouverte doit être refermé.
+    </p>
+    <p>
+        Vous pouvez voir un document XML comme un arbre dont les branches 
+        You can think of an XML document like a tree that branches from one (outer) root element to nested (inner) child
+        elements. The root element is the parent of all other elements. In MEI documents, this root element is called –
+        for obvious reasons – <code>&lt;mei&gt;</code>, but it could have been any arbitrary name.
+    </p>
+
+    <p class="task">Enter a <code>&lt;mei&gt;</code> root element in the editor below. Do not forget to close the opening tag by a corresponding closing tag.</p>
+
+    <p>
+        PS: We will cover some more basic XML principles in the next steps. For more detailed information consider to have a
+        look at the dozens of materials available on the web, e.g. the
+        <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> of the
+        Text Encoding Initative (<a href="https://tei-c.org/" target="_blank" rel="noopener, noreferrer">TEI</a>).
+    </p>
+
+</div>

_tutorials-FR/100_structure/step-01/100_structure_step-01-prefill.xml

@@ -0,0 +1 @@
+<!-- Your encoding should replace this line -->

_tutorials-FR/100_structure/step-01/100_structure_step-01.xml

@@ -0,0 +1,4 @@
+<!-- CAUTION: This is not a valid MEI document yet -->
+<?edit-start?>
+<mei></mei>
+<?edit-end?>

_tutorials-FR/100_structure/step-02/100_structure_step-02-desc.html

@@ -0,0 +1,29 @@
+<div>
+    <p class="tutorialGoal">
+        Step two: learn about the application and use of namespaces.
+    </p>
+    <p>
+        Fine! As mentioned in the previous step, the name of the root element of an XML document is basically an arbitrary
+        name that provides no meaning in itself for machine-processing. To make clear in which context an element is
+        defined and to avoid name conflicts with elements, XML makes use of so called
+        <a href="https://en.wikipedia.org/wiki/XML_namespace" target="_blank" rel="noopener, noreferrer">namespaces</a>.
+        Namespaces can be declared by adding an <code>@xmlns</code> namespace declaration to the root element.
+    </p>
+    <p>
+        For example, the MEI namespace is <code>http://www.music-encoding.org/ns/mei</code> and can be declared
+        as follows: <code>xmlns="http://www.music-encoding.org/ns/mei"</code>
+    </p>
+    <p>
+        Whenever you see an entity with a prepended <code>@</code>-sign in the text (like <code>@xmlns</code> above),
+        this means we refer to an XML attribute. (This kind of reference is common practice and originates in the
+        <a href="https://en.wikipedia.org/wiki/XPath" target="_blank" rel="noopener, noreferrer">XPath</a> language.)
+        Attributes contain specified information (attribute values) that are related to elements. However, unlike
+        elements, XML attributes do not have their own opening or closing brackets, but are placed solely inside the
+        opening tag of an element, next to the element's name. They consist of the plain attribute's name connected by
+        an equal sign to an attribute's value which must always be quoted (with single or double quotes). Multiple
+        attributes are separated by blank spaces. Be aware that the <code>@</code>-sign is only prepended in textual
+        descriptions, not in the encoding itself.
+    </p>
+
+    <p class="task">In the editor below, add a MEI namespace declaration to the <code>MEI</code> root element.</p>
+</div>

_tutorials-FR/100_structure/step-02/100_structure_step-02-prefill.xml

@@ -0,0 +1 @@
+<mei></mei>

_tutorials-FR/100_structure/step-02/100_structure_step-02.xml

@@ -0,0 +1,4 @@
+<!-- CAUTION: This is not a valid MEI document yet -->
+<?edit-start?>
+<mei xmlns="http://www.music-encoding.org/ns/mei"></mei>
+<?edit-end?>