Première découverte
| Site: | JS World |
| Cours: | Web2 |
| Livre: | Première découverte |
| Imprimé par: | Visiteur anonyme |
| Date: | mardi 4 août 2026, 19:40 |
Table des matières
- 1. Créer/supprimer/modifier une section
- 2. Ressources et activités
- 3. Ajouter une ressource dans ma section
- 4. Comment insérer une image dans une zone de texte
- 5. Ajout d'une vidéo dans une zone de texte
- 6. Ajout d'un accordéon
- 7. Comment mettre en forme avec l'éditeur TinyMCE
- 8. Editeur: tableau et mail.
- 9. Ajouter une ressource fichier
- 10. Ajout d'une ressource dossier
- 11. Ajout d'une activité Forum
- 12. Ajout d'une activité "chat"
1. Créer/supprimer/modifier une section
Activer le "mode d'édition"

Renommer la section "Généralités" en "Accueil" et cliquer sur "entrée"

Modifier la section : "Edit Card" Nom et image

2. Ressources et activités
3. Ajouter une ressource dans ma section
Commençons par ajouter une ressource "zone de texte" à la section "Présentation"

4. Comment insérer une image dans une zone de texte
Nous l'avons vu une zone de texte donne accès à un éditeur.
Dans l'éditeur il suffit de mettre en oeuvre le menu "Insérer/image" ou cliquer sur l'image.

Une fenêtre s'ouvre alors: Parcourons les dépôts.

Pour l'instant contentons-nous de "Déposer un fichier" et cliquons sur "Choisir un fichier" pour l'intégrer depuis notre poste.

Sélectionnions le calendrier préparé:

et choisissons de le "déposer"

Enregistrez l'image en ayant pris soin soit de décrire l'image, soit de cocher la case "Cette image ne sert que de décoration".

et nous enregistrons l'image
Puis enregistrons les modifications portées sur la zone de texte
5. Ajout d'une vidéo dans une zone de texte
- Sur une vidéo Youtube, faire un clic droit et "copier l'URL de la vidéo"
- Insérer une zone Texte
- Insérer une vidéo dessus
- Donner son URL et u nom et valider.
- Enregistrer votre zone de texte.
6. Ajout d'un accordéon
Pour présenter la formation, au travers d'une petite vidéo, d'un texte retraçant les objectifs, durée, validation, ainsi que les auteurs, je vous propose d'insérer dans la section "Accueil", d'insérer un Accordéon. A votre mode "Edition"
La ressource est un Unilabel. Voici l'objectif à atteindre:

Première étape: Ajouter la ressource "Unilabel"

Deuxième étape: nommer la ressource et choisir le type d'étiquette. Enregistrer et revenir au cours.

Une fois la ressource crée, il convient de modifier son contenu

puis renseigner les segments (ci dessous, le premier segment que l'on va nommer "Comprendre ma formation" et pour lequel on va insérer une vidéo.)

Enregistrer et reproduire les modifications sur les segments
Vous savez d'ores et déjà, insérer du texte, une image, une vidéo dans une zone de texte. Vous êtes donc à même de reproduire même partiellement le contenu de votre Trame Type Formation.
7. Comment mettre en forme avec l'éditeur TinyMCE
Tout d'abord, conservons dans un coin de notre esprit qu'il existe plusieurs éditeurs de texte sur Moodle et que nous utilisons, par défaut, l'éditeur "TinyMCE". Il se présente sous cette forme:

On retrouve peu ou prou des fonctions déjà vues dans des éditeurs de texte classiques.
Sur cette ligne, je souhaite mettre mon texte comme un titre. Il suffit de le sélectionner et le menu contextuel apparaît, comme ci dessous:

Et un essai de copier/coller depuis word,montre que le "coller" supprime beaucoup de la mise en forme, naturellement. Le mieux est d'utiliser l'éditeur en l'état, assez riche néanmoins:
- Liste à puces,
- Alignement
- Titre
- Insertion d'images, liens, contenus multimédia, tableaux
- etc...
8. Editeur: tableau et mail.
Objectif: Présenter l'équipe proprement et sur un clic sur le nom, déclencher un mail

Insérer un tableau de 2 lignes et 2 colonnes:

Menu contextuel du tableau (jouer sur les lignes et les colonnes)

Jouer sur les propriétés du tableau

Mettre une photo en ligne 1/ colonne 1 (L1C1) et le texte en L1C2 et le mettre en forme
![]() |
Carole PETULIACoordinatrice de formation |
Insérer un lien hypertexte de cette façon (mailto: )

Pour mettre un sujet automatique au mail:
"mailto:carole.petulia@creps-dijon.sports.gouv.fr?Nom du Sujet du mail"
Allons tester cela en dehors du mode édition.
9. Ajouter une ressource fichier
Voilà une ressource bien facile à mettre en oeuvre.
Dans votre section et toujours en mode édition, choisissez "Ajouter une activité ou ressource".
Dans les "Ressources", choisissez "Fichier".

Nommer votre "ressource fichier" et ajouter le fichier PDF à afficher

Régler les paramètres d'apparence: intégrer. mais vous pouvez tester les autres options d'affichage.

Enregister et afficher
Dans l'état actuel des choses, pour revenir sur la page précédente, vous pouvez
- utiliser le sommaire
- utiliser le fil d'Arianne
- utiliser les boutons de navigation de votre navigateur
Ajouter un lien
Récupérer à partir (par exemple) du fil d'Arianne le lien hypertexte de la section
Clic droit et menu contextuel: Copier le lien

Choisir l'icône de création de lien

Copier le lien dans la zone "Saisir l'URL" et taper le "Texte à afficher"

Coquetterie: en mode "Afficher le code"
Dans le lien hyperxte, preciser une classe btn btn-secondary
Dans le code ci-dessous, on voit le lien hypertexte avec l'affichage bouton, et le lien sans le bouton. La différence est la class qui est précisée comme bouton, bouton secondaire.

10. Ajout d'une ressource dossier
Simple comme
bonjour
. A savoir, quand vous créez une ressource "Dossier", attendez-vous à obtenir cela:

et vous pouvez soit télécharger la totalité du dossier en tant qu'étudiant, soit sélectionner un fichier à télécharger, et cliquant dessus.
Pour réaliser une arborescence de dossier et sous-dossier éventuellement, il faut le réaliser avec les objets de Moodle. Impossible de télécharger un dossier complet avec son arborescence et les fichiers contenus.

Une fois votre arborescence constituée, il faut intégrer les fichiers 1 à 1 si vous utilisez l'icône ou par lot si vous utilisez le Drag and Drop (si vous qui voyez).

Voilà. Votre arborescence est constituée, vos fichiers déposés. Il ne reste plus qu'à penser la présentation.

J'aime bien sur la page en cours, les dossiers dépliés, avec le bouton de téléchargement et sur clic sur le fichier, lancer automatiquement le téléchargement.
Le résultat:

oh la la, mais on a déjà fini avec le cours et les ressources. On jette un oeil rapide aux activités pour finir?
11. Ajout d'une activité Forum
On l'a compris les activités sont bien plus interactives que les ressources. Elles n'en sont pas moins riches dans leur forme.
Il existe plusieurs types de forum. Lorsque vous "ajoutez une activité ou ressource", sur la liste des activités, vous pouvez choisir le "i d'information" pour consulter l'aide adjointe et parcourir également l'aide Moodle.
Il en existe 5 types:
- une seule discussion simple: un seul sujet de deiscussion sur lequel chacun peut s'exprimer.
- Chaque personne comme une seule discussion: chaque étudiant ne peut emtamer qu'une seule discussion à laquelle chacun peut répondre.
- Forum Questions/réponses: un étudiant doit poster une réponse à la question d'un enseignant avant de pouvoir consulter les messages des autres étudiants.
- Forum Standard affiché comme un blog: un forum ouvert où chacun peut entamer une nouvelle discussion à tout instant.
- Forum Standard pour utilisation générale: un forum où chacun peut entamer une nouvelle discussion à tout instant
Vous trouverez dans les paramètres, le type de paramètres à choisir. Le mieux reste de faire des essais avec un compte éditeur et enseignant sur le même cours.
12. Ajout d'une activité "chat"
Ca y est, nous arrivons au bout. Insérer une activité "Chat", inutile de vous tenir la main pour cela.
Vous l'avez compris le chat contrairement au Forum est synchrône. C'est donc une activité pertinente sur des temps de formation partagés par les stagiares dans un calendrier imposé.
Le paramétrage se fera sur le nom, la description, les dates et heures de session.
Ci dessous, une capture écran d'un chat lancé:

