Résumé de section

  • Pour proposer le contenu de son cours en plusieurs langues, il faut faire plusieurs choses en plus de la traduction elle-même :

    1. un filtre de cours spécifique doit être activé (en général, il l’est par défaut), et
    2. les différentes versions linguistiques du texte doivent être enregistrées en conséquence.

    • 2.1 Activer le filtre

       Le filtre est indispensable pour le multilinguisme dans les cours Moodle. Il en existe deux :
      un ancien appelé « Contenu multilingue », nécessaire pour la variante HTML (voir section 2.3), et un autre appelé « Contenu multilingue v2 », requis pour les plugins d’éditeur (voir section 2.2). Les deux sont activés par défaut.

      Si vous avez les droits de modification, vous trouverez ces filtres sous Plus > Filtres > Contenu multilingue ou Contenu multilingue (v2) :

      Filter im "Mehr"-Menü
      Les filtres dans le menu « Plus »
      Der Filter muss aktiviert sein
      Le filtre doit être activé
       

    • 2.2 Plugins d’éditeur

      Une fois les filtres activés, les éditeurs disponibles proposent une fonction pour saisir du contenu multilingue. Les éditeurs Atto ...

      Multilang-Button (2.) in der zweiten Editorzeile des Editors "Atto". Ggf. muss diese erst eingeblendet werden (1.)
      Bouton multilangue (2) dans la deuxième ligne d’outils de l’éditeur « Atto ». Il faut éventuellement d’abord afficher cette ligne (1).

      ... et TinyMCE affichent alors un bouton correspondant :

      Multilang-Button im Editor "TinyMCE"
      Bouton multilangue dans l’éditeur « TinyMCE »

      À l’aide de ces boutons, on peut marquer des zones de texte pour les différentes langues :

      Sprachkennzeichnung im WYSIWYG-Editor
      Marquage des langues dans l’éditeur WYSIWYG

      Ces zones linguistiques peuvent être créées vides, en cliquant simplement sur le bouton puis en choisissant la langue souhaitée, ou bien être appliquées à un texte déjà existant. Dans ce cas, il faut sélectionner le texte au préalable ; après un clic sur une langue, le texte sélectionné est alors encadré par les marqueurs jaunes.

      Le filtre « comprend » le shortcode et l’indication de langue {m lang de | en | fr}, de sorte que

      • lors de l’utilisation du sélecteur de langue,
      • lorsqu’une préférence utilisateur est définie, ou
      • lorsqu’une langue de navigateur différente est détectée,

      la langue choisie / souhaitée est affichée et toutes les autres sont masquées.

    • 2.3 Mode HTML

      Une variante plus ancienne et un peu plus compliquée consiste à saisir directement les différents textes dans le code de la page.
      Cela nécessite toutefois des connaissances de base en HTML.

    • Au fond, Moodle n’est rien d’autre qu’un site web écrit en HTML (HyperText Markup Language, info). Il s’agit d’un langage de balisage, c’est-à-dire d’une façon de structurer des documents dans laquelle le contenu lui-même, mais aussi les propriétés, relations et formats, sont décrits dans un seul et même document.

      Exemple :

      <h3>&Uuml;berschrift</h3>
      <p>Dies ist der Text, mache Worte sind <strong>speziell formatiert</strong>.</p>

      Dans l’extrait HTML ci-dessus, on crée un élément de type titre (headline) de niveau hiérarchique 3 (= h3). Son début est marqué par une balise ouvrante (<h3>) et sa fin par la balise fermante correspondante (</h3>). Le contenu de l’élément est « Überschrift », les umlauts allemands pouvant, selon l’encodage du document, être écrits ici sous forme d’entité (ancienne notation) (Ü = &Uuml;). 

      Vient ensuite un paragraphe (<p>...</p>), dans lequel une autre chaîne de caractères est mise en gras (<strong>).

      Tous les sites web que vous voyez dans votre navigateur fonctionnent exactement comme cela. Votre navigateur a simplement la gentillesse de rendre le code HTML, c’est-à-dire de ne pas afficher le HTML brut, mais d’afficher les titres, paragraphes et textes en gras comme tels.

      Les éditeurs de Moodle fonctionnent toutefois en mode WYSIWYG, c’est-à-dire qu’ils essaient de générer en arrière-plan un HTML conforme à partir du texte saisi. Donc, si vous mettez un texte en forme comme liste à l’aide des boutons de l’éditeur, par exemple :

      • Élément de liste 1
      • Élément de liste 2
      • Élément de liste 3

      la liste s’affiche telle quelle dans la zone de saisie de l’éditeur. En arrière-plan, cependant, elle est enregistrée comme liste non ordonnée (<ul>...</ul>) avec plusieurs éléments de liste (<li>...</li>) :

      <ul>
         <li>Élément de liste 1</li>
         <li>Élément de liste 2</li>
         <li>Élément de liste 3</li>
      </ul>
    • Tous les éditeurs de texte disponibles peuvent être basculés en mode HTML : dans l’éditeur Atto, utilisez le bouton </> dans la ligne inférieure de la barre d’outils ; dans l’éditeur TinyMCE, passez par > Afficher > Code source.

      HTML-Button (2.) in der zweiten Editorzeile des Editors "Atto". Ggf. muss diese erst eingeblendet werden (1.)
      Bouton HTML (2) dans la deuxième ligne d’outils de l’éditeur « Atto ». Il faut éventuellement d’abord afficher cette ligne (1).

      HTML-Ansicht im TinyMCE-Editor
      Vue HTML dans l’éditeur « TinyMCE »

      Dans le mode HTML ainsi affiché, les différentes langues se notent comme suit : chaque langue doit être placée dans un élément <span> dans lequel on indique

      • que le filtre "multilang" doit être appliqué, et
      • dans quelle langue est rédigé le texte contenu dans l’élément.

      Un texte en anglais devra donc être écrit comme suit :

      <span class="multilang" lang="en">
      ... texte anglais ici
      </span>

      un texte en allemand comme suit :

      <span class="multilang" lang="de">
      ... texte allemand ici
      </span>

      et un texte en français, de manière correspondante :

      <span class="multilang" lang="fr">
      ... texte français ici
      </span>

      Le filtre « comprend » l’attribut class="multilang" et l’indication de langue (lang="de | en | fr"), de sorte que

      • lors de l’utilisation du sélecteur de langue,
      • lorsqu’une préférence utilisateur est définie, ou
      • lorsqu’une langue de navigateur différente est détectée,

      la langue choisie / souhaitée est affichée et toutes les autres sont masquées.

      Une méthode de travail pratique semble être la suivante :
      1. commencer par rédiger tout le texte (en mode source ou WYSIWYG),
      2. puis le copier et le recoller avec suffisamment d’espace (lignes vides) entre les versions,
      3. et n’insérer les balises <span> qu’à la fin, dans le code source.

      Ce n’est pas vraiment très convivial, mais ça fonctionne 😏