Augmenter l’ergonomie de ses cours avec des styles
Augmenter l'ergonomie de ses cours avec des styles
Parce que c'est joli (aussi)
Depuis quelques années, nous proposons aux enseignants une méthode pour améliorer la lisibilité de leurs cours avec des éléments graphiques. Ces éléments graphiques permettent d’apporter un visuel, dans les étiquettes, pour que les élèves puissent mieux identifier les types de contenus ou activités qui sont proposées par l’enseignant.
Historiquement, nous avions mis en place quatre styles différents pour les mêmes balises html, permettant ainsi à l’enseignant de personnaliser le visuel de son cours Moodle en changeant uniquement le lien vers la feuille de style css.
Le changement d’éditeur va cependant apporter quelques changements que vous devez prendre en compte.
Si vous avez déjà mis en oeuvre ces éléments de cours
Attention : l’éditeur Atto ne tolère pas l’injection de balise html de type <link>. Elles sont directement supprimées à l’enregistrement, ce qui pose problème pour l’intégration des feuilles de styles externes à MBN.
Ainsi, si vous éditez puis enregistrez l’étiquette contenant l’appel à la feuille de style, la balise sera supprimée, ainsi que le code qu’elle contient et la feuille de style externe ne sera pas prise en compte. Il ne vous est donc plus possible (pour l’instant) de changer votre feuille de style.
Si vous utilisez les feuilles de style proposées par la Dane
Si vous ne touchez pas aux étiquettes contenant les appels à la feuille de style, le lien est donc conservé, le style de vos éléments de cours reste inchangé. Vous pouvez rajouter des balises <div> dans le reste de votre cours et éditer les autres étiquettes (avantage de Atto, vous prévisualisez directement l’affichage dans l’éditeur de texte sans enregistrer).
Si vous supprimez ou modifiez (par mégarde ou volontairement) la référence à votre feuille de style : les styles des éléments que par défaut de MBN vont s’appliquer (nous avons intégré une référence qui permet ce changement). Vos éléments visuels resteront opérationnels, mais vous ne pourrez plus choisir le thème de votre choix.
Vous utilisez vos propres feuiles de styles :
Si vous ne touchez pas aux étiquettes contenant les appels à la feuille de style, le lien est donc conservé, vos styles restent en place. Vous pouvez rajouter des balises <div> dans le reste de votre cours et éditer les autres étiquettes (avantage de Atto, vous prévisualisez directement l’affichage dans l’éditeur de texte sans enregistrer).
Si vous supprimez ou modifiez (par mégarde ou volontairement) la référence à votre feuille de style : vous n’avez plus de solution à l’heure actuelle pour intégrer votre feuille de style, il n’y a pas de correspondance entre vos codes et ceux proposés par la Dane, vous perdez toute customisation visuelle (mais aucun impact sur le contenu).
Nous travaillons à une solution pour vous permettre de retrouver la main sur le choix des feuilles de styles.
Si vous désirez mettre en oeuvre ces éléments de cours.
Vous ne pourrez plus choisir le style visuel que vous désirez, vous utiliserez celui proposé par défaut par MBN.
Voici les éléments proposés :
Attention : la méthode décrite ci-dessous restera valable et fonctionnelle. Cependant, nous serons bientôt en mesure de proposer la mise en oeuvre des éléments de cours directement à partir de l’éditeur Atto, à l’aide d’un menu déroulant.
Les deux méthodes sont différentes l’une de l’autre, et celle via l’éditeur Atto est bien plus simple à réaliser. Ainsi, vous devez peser le pour et le contre entre un besoin urgent de customisation qui vous contraindra à entrer un peu de code html, ou une mise en oeuvre facilitée avec l’éditeur Atto.
Pour mettre en oeuvre les styles, vous devez afficher le code html dans l’éditeur, à l’aide du bouton <>.
Ensuite, dans l’éditeur, en mode html, collez le code du type :
<div id= »fond »>
<div id= »logo_retenir »>
<div id= »retenir »>
Texte à encadrer
</div>
</div>
</div>
Validez les modifications et remplacez le texte à encadrer par le texte de votre choix.
Pour utiliser un autre élément visuel, copiez/collez un autre code.
La liste complète des codes est regroupée dans le fichier txt ci-dessous