Merge pull request music-encoding#616 from musicEnfanthen/fix-tutoria…

…ls-classes Tutorials: fix tutorials classes
musicEnfanthen · May 7, 2024 · 9487c2b · 9487c2b
2 parents 8d7d2d7 + 048b98b
commit 9487c2b
Show file tree

Hide file tree

Showing 58 changed files with 105 additions and 93 deletions.
diff --git a/_sass/mei.scss b/_sass/mei.scss
@@ -388,26 +388,11 @@ ul.nav li.nav-item:first-child {
     .tutorialGoal{
         margin-top: .5rem;
     }
-    .tutorialGoal:before {
+    .tutorialGoal > span, .tutorialTask > span {
         font-weight: bold;
-        content: "Goal: "
-    }
-
-    .tutorialGoal-ES:before {
-        font-weight: bold;
-        content: "Objetivo: "
-    }
-
-    .task:before {
-        font-weight: bold;
-        content: "Task: "
-    }
-
-    .task-ES:before {
-        font-weight: bold;
-        content: "Tarea: "
     }
 
+
     #stepBox {
         margin: 2rem 0;
     }

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
@@ -1,5 +1,5 @@
 <div>
-    <p class="tutorialGoal-ES">
+    <p class="tutorialGoal">
         Primer paso: familiarizarse con algunos concpetos básicos de XML y aprender sobre el elemento raíz de MEI.
     </p>
     <p>
@@ -9,7 +9,7 @@
         Puedes pensar en un documento XML como si fuera un árbol que se ramifica desde un elemento raíz hasta los elementos hijo anidados. El elemento raíz es el padre de todos los elementos. En los documentos MEI, este elemento raíz se llama, por razones obvias, <code>&lt;mei&gt;</code>.
     </p>
 
-    <p class="task-ES">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 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>).

diff --git a/_tutorials-ES/100_structure/step-02/100_structure_step-02-desc.html b/_tutorials-ES/100_structure/step-02/100_structure_step-02-desc.html
@@ -1,5 +1,5 @@
 <div>
-    <p class="tutorialGoal-ES">
+    <p class="tutorialGoal">
         Segundo paso: conocer la aplicación y el uso de los espacios de nombres.
     </p>
     <p>
@@ -12,5 +12,5 @@
         Siempre que veas una entidad con un signo <code>@</code> antepuesto en el texto (como <code>@xmlns</code> arriba) significa que nos referimos a un atributo XML. (Este tipo de referencia es una práctica común y tiene su origen en el lenguaje <a href="https://es.wikipedia.org/wiki/XPath" target="_blank" rel="noopener, noreferrer">XPath</a>.) Los atributos contienen información específica (llamada valores de atributos) que está relacionada con los elementos. Sin embargo, a diferencia de los elementos, los atributos XML no tienen sus propios corchetes de apertura o cierre, sino que se colocan únicamente dentro de la etiqueta de apertura de un elemento, junto al nombre del mismo. Los atributos se definen utilizando el nombre del atributo, seguido de un signo igual, seguido por el valor del atributo, el cual siempre debe ir entrecomillado (con comillas simples o dobles). Los diferentes atributos de un elemento están separados por espacios en blanco. Ten en cuenta que el signo <code>@</code> solo se utiliza en las descripciones textuales y no en la propia codificación.
     </p>
 
-    <p class="task-ES">En el editor de abajo, añade una declaración de espacio de nombres MEI al elemento raíz <code>MEI</code>.</p>
+    <p class="tutorialTask">En el editor de abajo, añade una declaración de espacio de nombres MEI al elemento raíz <code>MEI</code>.</p>
 </div>
diff --git a/_tutorials-ES/100_structure/step-03/100_structure_step-03-desc.html b/_tutorials-ES/100_structure/step-03/100_structure_step-03-desc.html
@@ -1,5 +1,5 @@
 <div>
-    <p class="tutorialGoal-ES">
+    <p class="tutorialGoal">
         Tercer paso: conocer los principales elementos hijo del elemento raíz <code>&lt;mei&gt;</code>: <code>&lt;meiHead&gt;</code> y <code>&lt;music&gt;</code>.
     </p>
     <p>
@@ -16,5 +16,5 @@
         </li>
     </ul>
 
-    <p class="task-ES">En el editor de abajo, añade un elemento <code>&lt;meiHead&gt;</code> y un elemento <code>&lt;music&gt;</code> dentro del elemento raíz <code>&lt;mei&gt;</code>.</p>
+    <p class="tutorialTask">En el editor de abajo, añade un elemento <code>&lt;meiHead&gt;</code> y un elemento <code>&lt;music&gt;</code> dentro del elemento raíz <code>&lt;mei&gt;</code>.</p>
 </div>
diff --git a/_tutorials-ES/100_structure/step-04/100_structure_step-04-desc.html b/_tutorials-ES/100_structure/step-04/100_structure_step-04-desc.html
@@ -1,5 +1,5 @@
 <div>
-    <p class="tutorialGoal-ES">
+    <p class="tutorialGoal">
         Cuarto paso: proporcionar la menor cantidad de información necesaria para el encabezado del MEI.
     </p>
     <p>
@@ -15,5 +15,5 @@
     <p>
         Ambos elementos forman parte de la descripción del archivo (<code>&lt;fileDesc&gt;</code>), que es un elemento hijo directo de <code>&lt;meiHead&gt;</code> y proporciona una descripción bibliográfica completa de un archivo MEI.</p>
 
-    <p class="task-ES">En el editor de abajo, añade un elemento <code>&lt;fileDesc&gt;</code> dentro del <code>&lt;meiHead&gt;</code> asignado. A continuación, añade los elementos obligatorios <code>&lt;titleStmt&gt;</code> y <code>&lt;pubStmt&gt;</code> a <code>&lt;fileDesc&gt;</code> y un elemento <code>&lt;title&gt;</code> a <code>&lt;titleStmt&gt;</code>.</p>
+    <p class="tutorialTask">En el editor de abajo, añade un elemento <code>&lt;fileDesc&gt;</code> dentro del <code>&lt;meiHead&gt;</code> asignado. A continuación, añade los elementos obligatorios <code>&lt;titleStmt&gt;</code> y <code>&lt;pubStmt&gt;</code> a <code>&lt;fileDesc&gt;</code> y un elemento <code>&lt;title&gt;</code> a <code>&lt;titleStmt&gt;</code>.</p>
 </div>
diff --git a/_tutorials-ES/101_quickstart/step-01/101_quickstart_step-01-desc.html b/_tutorials-ES/101_quickstart/step-01/101_quickstart_step-01-desc.html
@@ -3,7 +3,7 @@
 
     <p>El otro dato importante es, por supuesto, el de la duración (<code>@dur</code>). Aquí se utilizan números enteros para indicar la duración de una nota. A una redonda se le asigna un valor de <code>1</code>, una blanca <code>2</code>, una negra <code>4</code> y así sucesivamente.</p>
 
-    <p class="task-ES">Introduce el siguiente código en el cuadro del editor: <code>&lt;note pname="e" oct="4" dur="4"/&gt;</code>. A continuación, deberías ver la nota renderizada. Puedes jugar un poco con los valores de los atributos para ver cómo influyen en la renderización. También verás consejos sobre cómo escribir el código correcto. Cuando quieras, asegúrate de ingresar el código correcto en el editor y después pulsa el botón de "continuar" en la parte de abajo a la derecha.</p>
+    <p class="tutorialTask">Introduce el siguiente código en el cuadro del editor: <code>&lt;note pname="e" oct="4" dur="4"/&gt;</code>. A continuación, deberías ver la nota renderizada. Puedes jugar un poco con los valores de los atributos para ver cómo influyen en la renderización. También verás consejos sobre cómo escribir el código correcto. Cuando quieras, asegúrate de ingresar el código correcto en el editor y después pulsa el botón de "continuar" en la parte de abajo a la derecha.</p>
 
     <p>
         P.D.: Si no estás muy familiarizado con XML, siempre que nos referimos a los atributos, anteponemos su nombre con el signo @. Se trata de una práctica habitual y tiene su origen en el lenguaje <a href="https://es.wikipedia.org/wiki/XPath" target="_blank" rel="noopener, noreferrer">XPath</a>. Cuando los escribas en XML, no debes incluir el signo @, sino escribir sólo el nombre del atributo. No dudes en echar un vistazo a nuestro <a href="/tutorials-ES/100-structure.html" target="_blank" rel="noopener, noreferrer">tutorial sobre los fundamentos de XML</a>.

diff --git a/_tutorials-ES/101_quickstart/step-02/101_quickstart_step-02-desc.html b/_tutorials-ES/101_quickstart/step-02/101_quickstart_step-02-desc.html
@@ -3,7 +3,7 @@
         Enhorabuena, <b>acabas de codificar</b> tu primera nota en MEI. Sigamos y añadamos un par de notas más para codificar tu primera secuencia:
         <img style="display: block; margin: .5rem auto; width: 240px;" src="../tutorials/101_note-sequence.png" alt="Secuencia de notas"/>
     </p>
-    <p class="task-ES">
+    <p class="tutorialTask">
         Trata de reproducir la secuencia anterior con MEI (puedes copiar y pegar el primer elemento de la nota según sea necesario). Cada nota necesita un atributo <code>@pname</code>, <code>@oct</code> y <code>@dur</code>. Recuerda que los nombres de los tonos se dan en minúsculas (que van desde <code>la (a)</code> hasta <code>sol (g)</code>) en MEI.
     </p>
 </div>
diff --git a/_tutorials-ES/101_quickstart/step-03/101_quickstart_step-03-desc.html b/_tutorials-ES/101_quickstart/step-03/101_quickstart_step-03-desc.html
@@ -2,7 +2,7 @@
     <p>Enhorabuena, <b>acabas de codificar</b> tu primera secuencia de notas en MEI. Ahora vamos a ajustar algunos valores de duración para codificar tu primera melodía sencilla, seguro que conoces "Mary had a little lamb":
         <img style="display: block; margin: .5rem auto; width: 240px;" src="../tutorials/101_note-little-lamb.png" alt="Mary had a little lamb"/></p>
 
-    <p class="task-ES">
+    <p class="tutorialTask">
         Trata de reproducir la melodía de arriba con MEI. Cada nota necesita <code>@pname</code>, <code>@oct</code> y <code>@dur</code>.
     </p>
 

diff --git a/_tutorials-ES/102_incipit/step-01/102_incipit_step-01-desc.html b/_tutorials-ES/102_incipit/step-01/102_incipit_step-01-desc.html
@@ -1,11 +1,11 @@
 <div>
-    <p class="tutorialGoal-ES">Primer paso: codificar el esqueleto estructural del ejemplo.</p>
+    <p class="tutorialGoal">Primer paso: codificar el esqueleto estructural del ejemplo.</p>
 
     <p>Para codificar la línea melódica de este ejemplo, necesitarás incluir información sobre cómo están organizados la partitura y los pentagramas. En MEI, este tipo de información se ofrece a través de los elementos <code>&lt;scoreDef&gt;</code> (definición de la partitura), <code>&lt;staffGrp&gt;</code> (grupo de pentagramas) y <code>&lt;staffDef&gt;</code> (definición de pentagramas). De esta manera, el <code>&lt;scoreDef&gt;</code> se utiliza para especificar los parámetros comunes de una partitura, el <code>&lt;staffGrp&gt;</code> proporciona información sobre la agrupación de pentagramas, y <code>&lt;staffDef&gt;</code> contiene todo lo relacionado con un pentagrama individual. En conjunto, estos elementos proporcionan el contexto estructural del contenido musical, por ejemplo, información sobre el número, la agrupación o el orden de los pentagramas, sobre la clave, la armadura o el compás.</p>
 
     <!-- TODO: add link to structure tutorial here -->
 
     <p>Por ahora vamos a empezar con el esqueleto de la estructura.</p>
 
-    <p class="task-ES">En el editor siguiente, introduce un elemento <code>&lt;scoreDef&gt;</code> (definición de partitura) que contenga un elemento hijo <code>&lt;staffGrp&gt;</code> (grupo de pentagramas) y su elemento hijo <code>&lt;staffDef&gt;</code> (definición de pentagramas). Para obtener una representación visual de la codificación, hay que proporcionar más información en los siguientes pasos.</p>
+    <p class="tutorialTask">En el editor siguiente, introduce un elemento <code>&lt;scoreDef&gt;</code> (definición de partitura) que contenga un elemento hijo <code>&lt;staffGrp&gt;</code> (grupo de pentagramas) y su elemento hijo <code>&lt;staffDef&gt;</code> (definición de pentagramas). Para obtener una representación visual de la codificación, hay que proporcionar más información en los siguientes pasos.</p>
 </div>
diff --git a/_tutorials-ES/102_incipit/step-02/102_incipit_step-02-desc.html b/_tutorials-ES/102_incipit/step-02/102_incipit_step-02-desc.html
@@ -1,5 +1,5 @@
 <div>
-    <p class="tutorialGoal-ES">Segundo paso: añadir algunos atributos al esqueleto estructural que has creado en el paso anterior. Estos atributos porporcionan información básica sobre el pentagrama, clave y tonalidad del ejemplo.</p>
+    <p class="tutorialGoal">Segundo paso: añadir algunos atributos al esqueleto estructural que has creado en el paso anterior. Estos atributos porporcionan información básica sobre el pentagrama, clave y tonalidad del ejemplo.</p>
 
     <p>En el paso anterior has aprendido que el elemento <code>&lt;scoreDef&gt;</code> se usa para especificar los parámetros comunes de una partitura, y <code>&lt;staffDef&gt;</code> contiene todos los metadatos relacionados con un pentagrama individual. Por supuesto, solo hay un pentagrama en este íncipit del ejemplo, así que se puede especificar la armadura (3 bemoles) y el tiempo (alla breve) en<code>&lt;staffDef&gt;</code>. Pasemos esta información a <code>&lt;scoreDef&gt;</code>, asumiendo que la armadura y tiempo son los mismos para todos los instrumentos o partes de toda la partitura del Opus 1 de Halvorsen. Para especificar una cierta armadura o tiempo, se necesita usar los siguientes atributos de<code>&lt;scoreDef&gt;</code> y añadirlos al elemento <code>&lt;scoreDef&gt;</code>:</p>
     <ul>
@@ -17,7 +17,7 @@
         <li><code>@clef.line</code> – la línea del pentagrama donde se sitúa la clave (contando desde abajo), utiliza <code>“2”</code>.</li>
     </ul>
 
-    <p class="task-ES">Añade los atributos descritos anteriormente y sus respectivos valores a <code>&lt;scoreDef&gt;</code> y <code>&lt;staffDef&gt;</code> en el editor de abajo. (Todavía hace falta algo de información para ejecutarlo. ¡Vamos!)</p>
+    <p class="tutorialTask">Añade los atributos descritos anteriormente y sus respectivos valores a <code>&lt;scoreDef&gt;</code> y <code>&lt;staffDef&gt;</code> en el editor de abajo. (Todavía hace falta algo de información para ejecutarlo. ¡Vamos!)</p>
 
     <p>P.D.: Aunque en el texto nos refiramos a los atributos con el signo @ antepuesto, no es necesario (ni siquiera está permitido) en la codificación.</p>
 </div>
diff --git a/_tutorials-ES/102_incipit/step-03/102_incipit_step-03-desc.html b/_tutorials-ES/102_incipit/step-03/102_incipit_step-03-desc.html
@@ -1,13 +1,13 @@
 <div>
-    <p class="tutorialGoal-ES">Tercer paso: la configuración de una única <code>&lt;measure&gt;</code> (medida) con un <code>&lt;staff&gt;</code> (pentagrama) y <code>&lt;layer&gt;</code> (capa) vacíos.</p>
+    <p class="tutorialGoal">Tercer paso: la configuración de una única <code>&lt;measure&gt;</code> (medida) con un <code>&lt;staff&gt;</code> (pentagrama) y <code>&lt;layer&gt;</code> (capa) vacíos.</p>
 
     <p>¡Buen trabajo! Has declarado los metadatos necesarios sobre la partitura y la organización del pentagrama. Durante la codificación de la primera nota del ejemplo, tendrás que preparar el "entorno" para ella, es decir, el compás, el pentagrama y la capa (voz).</p>
 
     <p>En MEI, el elemento <code>&lt;section&gt;</code> es el contenedor de los elementos <code>&lt;measure&gt;</code> y se sitúa directamente después de la definición de la partitura (<code>&lt;scoreDef&gt;</code>). Los elementos <code>&lt;measure&gt;</code> pueden contener varios pentagramas (<code>&lt;staff&gt;</code>) que pueden tener varias capas (<code>&lt;layer&gt;</code>). El elemento <code>&lt;layer&gt;</code> será el elemento padre de los elementos <code>&lt;note&gt;</code> en el siguiente paso.</p>
 
     <p>Para indicar la posición numerada de los compases, pentagramas o capas, se puede utilizar el atributo <code>@n</code>.</p>
 
-    <p class="task-ES">Para configurar la medida de recogida, inserte en el editor un elemento <code>&lt;section&gt;</code>. Dentro de <code>&lt;section&gt;</code>, añade un elemento <code>&lt;measure&gt;</code> vacío y establece el número del compás de anacrusa como <code>"0"</code>. Añade un elemento hijo <code>&lt;staff&gt;</code> al elemento <code>&lt;measure&gt;</code> y establece su número como <code>"1"</code> (primer pentagrama en el compás 0). A continuación, añade un elemento hijo <code>&lt;layer&gt;</code> no numerado al elemento <code>&lt;staff&gt;</code>.</p>
+    <p class="tutorialTask">Para configurar la medida de recogida, inserte en el editor un elemento <code>&lt;section&gt;</code>. Dentro de <code>&lt;section&gt;</code>, añade un elemento <code>&lt;measure&gt;</code> vacío y establece el número del compás de anacrusa como <code>"0"</code>. Añade un elemento hijo <code>&lt;staff&gt;</code> al elemento <code>&lt;measure&gt;</code> y establece su número como <code>"1"</code> (primer pentagrama en el compás 0). A continuación, añade un elemento hijo <code>&lt;layer&gt;</code> no numerado al elemento <code>&lt;staff&gt;</code>.</p>
 
     <p>P.D.: Teniendo la información necesaria proporcionada por scoredef y section/measure, el renderizador es ahora capaz de visualizar la codificación. Puedes jugar un poco con los valores de los atributos de <code>&lt;scoreDef&gt;</code> y <code>&lt;staffDef&gt;</code> para ver cómo influyen en el renderizado.</p>
 </div>
diff --git a/_tutorials-ES/102_incipit/step-04/102_incipit_step-04-desc.html b/_tutorials-ES/102_incipit/step-04/102_incipit_step-04-desc.html
@@ -1,5 +1,5 @@
 <div>
-    <p class="tutorialGoal-ES">Cuarto paso: codificación de la primera nota de este ejemplo.</p>
+    <p class="tutorialGoal">Cuarto paso: codificación de la primera nota de este ejemplo.</p>
 
     <p>Una vez preparada la estructura del compás de anacrusa en el paso anterior, estás listo para codificar la primera nota del ejemplo. En MEI, las notas describen eventos de un solo tono que se codifican en, elementos <code>&lt;note&gt;</code>, por lo que se permite que los elementos <code>&lt;note&gt;</code> sean hijos de <code>&lt;layer&gt;</code>. Puedes definir las principales características de las notas, como el tono y la duración, utilizando los siguientes atributos en <code>&lt;note&gt;</code>:</p>
 
@@ -11,7 +11,7 @@
 
     <p>Aquí hay un ejemplo de cómo codificar una redonda C4: <code>&lt;nota pname="c" oct="4" dur="1"&gt;&lt;/nota&gt;</code>.</p>
 
-    <p class="task-ES">En el editor de abajo, introduce la codificación de la primera nota del ejemplo dentro del elemento <code>&lt;layer&gt;</code>.</p>
+    <p class="tutorialTask">En el editor de abajo, introduce la codificación de la primera nota del ejemplo dentro del elemento <code>&lt;layer&gt;</code>.</p>
 
     <p>P.D.: Si estás interesado en un tutorial sólo sobre <code>&lt;note&gt; (notas)</code>, consulta nuestro tutorial <a href="./101-quickstart.html">Breve iniciación</a>.</p>
 </div>
diff --git a/_tutorials-ES/102_incipit/step-05/102_incipit_step-05-desc.html b/_tutorials-ES/102_incipit/step-05/102_incipit_step-05-desc.html
@@ -1,7 +1,7 @@
 <div>
-    <p class="tutorialGoal-ES">Quinto paso: combinar lo aprendido en los dos últimos pasos, codificando a la vez la estructura del siguiente compás y la segunda nota del ejemplo.</p>
+    <p class="tutorialGoal">Quinto paso: combinar lo aprendido en los dos últimos pasos, codificando a la vez la estructura del siguiente compás y la segunda nota del ejemplo.</p>
 
-    <p class="task-ES">En el editor de abajo, añade otro elemento <code>&lt;measure&gt;</code> (<code>@n="1"</code>) con staff (también <code>@n="1"</code>) y con layer junto al compás de anacrusa existente. Añade la segunda nota del ejemplo (una negra mi bemol 4) a este nuevo compás. No te preocupes si el contenido del compás es demasiado corto en el compás dado, ya lo completarás en los siguientes pasos.</p>
+    <p class="tutorialTask">En el editor de abajo, añade otro elemento <code>&lt;measure&gt;</code> (<code>@n="1"</code>) con staff (también <code>@n="1"</code>) y con layer junto al compás de anacrusa existente. Añade la segunda nota del ejemplo (una negra mi bemol 4) a este nuevo compás. No te preocupes si el contenido del compás es demasiado corto en el compás dado, ya lo completarás en los siguientes pasos.</p>
 
     <p>P.D.: La codificación se realizará tan pronto como hayas introducido la nueva nota.</p>
 </div>
diff --git a/_tutorials-ES/102_incipit/step-06/102_incipit_step-06-desc.html b/_tutorials-ES/102_incipit/step-06/102_incipit_step-06-desc.html
@@ -1,7 +1,7 @@
 <div>
-    <p class="tutorialGoal-ES">Sexto paso: codificación de un grupo de notas con barra de unión.</p>
+    <p class="tutorialGoal">Sexto paso: codificación de un grupo de notas con barra de unión.</p>
 
     <p>¡Genial! Has codificado la primera nota del primer compás completo. Las dos notas siguientes del ejemplo se agrupan bajo una barra. Para expresar esto en MEI, se debe utilizar el elemento <code>&lt;beam&gt;</code>. <code>&lt;beam&gt;</code> es un contenedor para una serie de eventos explícitamente unidos por barras (como notas, silencios o acordes) que comienza y termina completamente dentro del mismo compás.</p>
 
-    <p class="task-ES">En el editor de abajo, añade un elemento <code>&lt;beam&gt;</code> en la posición especificada antes de añadir los dos hijos <code>&lt;note&gt;</code> por separado (mi bemol y sol). No olvides incluir los valores de los atributos correspondientes en los elementos <code>&lt;note&gt;</code>.</p>
+    <p class="tutorialTask">En el editor de abajo, añade un elemento <code>&lt;beam&gt;</code> en la posición especificada antes de añadir los dos hijos <code>&lt;note&gt;</code> por separado (mi bemol y sol). No olvides incluir los valores de los atributos correspondientes en los elementos <code>&lt;note&gt;</code>.</p>
 </div>