Mode d'emploi des balises dynamiques
L'éditeur de pages Cours De Profs permet d'inclure des parties dynamiques et externes à vos publications pour les rendre plus interactives.
Le nombre de ces balises est à ce jour limité car en tant qu'enseignant, c'est vous qui serez le plus compétent pour nous suggérer les outils à intégrer.
Pour son lancement, Cours de Profs intègre les balises suivantes proposées par quelques enseignants avant de bénéficier de vos suggestions :
Spoiler,
Flou,
Réservé profs,
Commentaires,
Equation,
Desmos,
GeoGebra,
Scratch,
Youtube,
DailyMotion,
OpenStreetMap,
GoogleMap,
QRCode,
Lien de page,
Lien de publication,
LoremIpsum,
Image aléatoire
Les balises dynamiques
Spoiler
La balise spoiler permet de remplacer ce qu'elle contient par un petit bouton qui lorsque on clique dessus laisse apparaitre le contenu original.
Un exemple concret :
Permettre aux lecteurs de la publication de retrouver les dates clefs d'un cours d'histoire. Le code suivant cache la réponse sous un bouton.
Louis XIV est né à quelle date ? Réponse : <spoiler>5 septembre 1638</spoiler>
L'affichage dans l'editeur laisse apparaitre la réponse entourée d'un cadre délimitant ce qui sera masqué
Le rendu dans la page de publication sera la suivante :
Louis XIV est né à quelle date ? Réponse : 5 septembre 1638
Flou (blur)
La balise blur permet de flouter son contenu et lui rendre sa netteté au moment du survol de la souris.
Un exemple concret :
Reprenons l'exemple du spoiler ci-dessus avec un flou
Louis XIV est né à quelle date ? Réponse : <blur>5 septembre 1638</blur>
L'affichage dans l'éditeur laisse apparaître la réponse entourée d'un cadre délimitant ce qui sera flouté
Le rendu dans la page de publication sera la suivante :
Louis XIV est né à quelle date ? Réponse : 5 septembre 1638
Réservé profs (reserved)
La balise reserved, permet de réserver l'affichage d'une partie de la publication uniquement aux enseignants.
Ainsi, le code suivant affichera deux phrases différentes selon le profil de la personne connectée :
Ce contenu est visible par tous
<reserved>
, alors que ce contenu n'est visible
que par les enseignants
</reserved>.
L'affichage dans l'éditeur laisse apparaitre le contenu entouré d'un cadre délimitant ce qui sera masqué
Le rendu dans la page de publication sera la suivante :
| Enseignant |
Affichage |
| Non |
Ce contenu est visible par tous. |
| Oui |
Ce contenu est visible par tous, alors que ce contenu n'est visible que par les enseignants. |
Commentaires (comments)
La balise commentaires permet de placer un petit bouton info-bulle et afficher le texte au moment du clic sur ce bouton.
|
Affichage |
| html |
<comments>Saisissez ici votre commentaire</comments> |
| Editeur |
 |
| Publication |
|
Balise Equation
Les formules mathématiques sont un incontournable pour bon nombre de matières, et cette possibilité de les intégrer au sein des publications a été rendue possible grâce à la formidable librairie javascript MathLive
La balise equation permet d'afficher des équations mathématiques ou des notations scientifiques en s'appuyant sur les standards MathML et LaTex.
Leurs saisies dans l'éditeur peuvent s'effectuer en mode laTex ou grêce à un éditeur d'équations.
| code html |
éditeur (latex) |
éditeur (maths) |
rendu |
<equation>
\sum ^n_{i=1}x^2_i
</equation>
|
 |
|
\sum ^n_{i=1}x^2_i |
<equation>
2H_2+O_2\longrightarrow2H_2O
</equation>
|
 |
|
2H_2+O_2\longrightarrow2H_2O |
Avec un peu de pratique, l'utilisation de la forme laTex se révélera redoutablement efficace, en permettant les copier/coller et les modifications ou compositions de contenus. Il existe de nombreux éditeurs laTex gratuits sur toutes les plateformes qui vous permettront de saisir vos formules encore plus rapidement. Un simple copier/coller dans la balise "equation" de l'éditeur et le tour est joué ;)
Un exemple concret :
Vous pourrez aussi combiner les mises en forme et autres balises actives entre-elles. Prenons par exemple une équation dans une balise "flou" (blur) pour ne la rendre visible qu'au passage de la souris et permettre ainsi de réviser les dérivées...
Le contenu suivant :
Sur <equation>\R</equation>*, si <equation>n\in\N</equation>,
la dérivée de <equation>\frac{1}{x^n}</equation>
est égale à <blur><equation>-\frac{n}{x^{n+1}}</equation></blur>
Ce contenu sera affiché comme suit dans l'éditeur :
| Mode |
Affichage |
| html |
 |
| laTex |
 |
| Maths |
 |
Le rendu dans la page de publication sera alors le suivant :
Sur \R*, si n\in\N, la dérivée de \frac{1}{x^n} est égale à -\frac{n}{x^{n+1}}
Les fragments
Lien de publication
Pour lier les publications entre-elles ou faire référence à la publication d'un collègue, vous pouvez créer des liens de navigation vers une publication en disposant de son numéro unique. Si le titre n'est pas spécifié, c'est le titre de la publication qui sera affiché. Le formalisme est le suivant :
[publication:(code de la publication):(texte du lien)]
Exemple :
| Fragment |
Affichage |
[publication:cdp-345] |
Système de numération romaine |
[publication:cdp-345:Consulter la fiche d'activité] |
Consulter la fiche d'activité |
Lien de page
Pour lier les pages d'une publication entre-elles, vous pouvez créer des liens de navigation avec le numéro de page souhaité. Le formalisme est le suivant :
[PAGE:(numéro de page):(texte du lien)]
Exemple :
| Fragment |
Affichage |
[PAGE:2] |
2 |
[PAGE:2:rendez-vous en page 2] |
rendez-vous en page 2 |
Youtube
Pour inclure une vidéo Youtube dans votre publication, il suffit de placer l'url de la vidéo entre crochets. Vous pouvez spécifier ou non la taille du cadre de la vidéo.
[(largeur x hauteur)|(url de la vidéo youtube)]
Exemple :
| Fragment |
Affichage |
[https://www.youtube.com/watch?v=9MGGAZyq1Mw] |
|
[160x100|https://www.youtube.com/watch?v=9MGGAZyq1Mw] |
|
Google forms
Pour inclure un formulaire google dans votre publication, il suffit de placer l'url raccourcie de partage du formulaire entre crochets. Vous pouvez spécifier ou non la taille du cadre du formulaire.
[(largeur x hauteur)|(url du formulaire)]
Exemple :
| Fragment |
Affichage |
[https://forms.gle/TeRidma9svC5R6Ki8] |
|
[100%x600|https://forms.gle/TeRidma9svC5R6Ki8] |
|
DailyMotion
Pour inclure une vidéo Dailymotion dans votre publication, il suffit de placer l'url de la vidéo entre crochets. Vous pouvez spécifier ou non la taille du cadre de la vidéo.
[(largeur x hauteur)|(url de la vidéo dailymotion)]
Exemple :
| Fragment |
Affichage |
[https://www.dailymotion.com/video/x80v4vl] |
|
[160x100|https://www.dailymotion.com/video/x80v4vl] |
|
OpenStreetMap
Pour inclure un plan OpenStreetMap, il suffit de placer l'url de la vue entre crochets. Vous pouvez spécifier ou non la taille du cadre de la carte.
[(largeur x hauteur)|(url de la vue OpenStreetMap)]
Exemple :
| Fragment |
Affichage |
[https://www.openstreetmap.org/#map=18/46.29390/4.82187] |
|
[300x50|https://www.openstreetmap.org/#map=18/46.29390/4.82187] |
|
GoogleMap
Pour inclure un plan GoogleMap, il suffit de placer l'adresse désirée entre crochets précédée de "googlemap". Vous pouvez spécifier ou non la taille du cadre de la carte.
[(largeur x hauteur)|(adresse)]
Exemple :
| Fragment |
Affichage |
[GoogleMap:200 Boulevard de la resistance, 71000 MACON] |
|
[400x90|GoogleMap:200 Boulevard de la resistance, 71000 MACON] |
|
Desmos
Pour intégrer un graphique Desmos (https://www.desmos.com/calculator) à une publication, il suffit de placer le lien de partage entre crochets. Vous pouvez spécifier ou non la taille du cadre du d'affichage.
[(largeur x hauteur)|(url de la calculatrice graphique)]
Exemple :
| Fragment |
Affichage |
[https://www.desmos.com/calculator/rwipul7h8p] |
|
[400x90|https://www.desmos.com/calculator/rwipul7h8p] |
|
GeoGebra
Pour intégrer une appliquette GeoGebra (https://www.geogebra.org) à une publication, il suffit de placer le lien de partage entre crochets. Vous pouvez spécifier ou non la taille du cadre d'affichage.
[(largeur x hauteur)|(url de l'appliquette GeoGebra)]
Exemple :
Essayez de déplacer les points I et S :)
| Fragment |
Affichage |
[https://www.geogebra.org/m/cna4dsqn] |
|
[150x150|https://www.geogebra.org/m/cna4dsqn] |
|
Scratch
Pour intégrer un projet Scratch (https://scratch.mit.edu/) à une publication, il suffit de placer le lien du projet entre crochets. Vous pouvez spécifier ou non la taille du cadre d'affichage.
[(largeur x hauteur)|(url du projet scratch)]
Exemple :
| Fragment |
Affichage |
[https://scratch.mit.edu/projects/520623142] |
|
[150x150|https://scratch.mit.edu/projects/520623142n] |
|
QRCode
Pour intégrer un QRCode dans une publication, saisissez l'url à la suite du mot clef QRCode entre crochets.Vous pouvez spécifier ou non la taille du QRCode souhaité.
[(largeur x hauteur)|QRCode:(url)]
Exemple :
| Fragment |
Affichage |
[QRCode:http://www.coursdeprofs.fr] |
 |
[100x100|QRCode:http://www.coursdeprofs.fr] |
 |
Texte aléatoire (LoremIpsum)
Pour inclure un texte aléatoire dans votre publication et rédiger un brouillon de mise en forme par exemple, vous pouvez inclure le fameux "LoremIpsum". Saisissez entre crochets le mot clef "LoremIpsum" suivi du nombre de mots aléatoires souhaités.
[LoremIpsum:(min)-(max)]
Exemple :
| Fragment |
Affichage |
[LoremIpsum:10] |
Nec, porttitor |
[LoremIpsum:1-10] |
Nibh imperdiet bibendum et sit maecenas |
[LoremIpsum:5-5] |
Bibendum eu augue dignissim morbi |
Image aléatoire (RandomImage)
Pour afficher une image prise au hasard parmi une liste, saisissez entre crochets le mot clef "RamdomImage", suivi de la liste des url des images séparées par le caractère "|". Vous pouvez spécifier ou non la taille des images.
[(largeur x hauteur)|RandomImage:(url1|url2|url3|...)]
Exemple :
| Fragment |
Affichage |
[384x216|RandomImage:
https://cdn.pixabay.com/photo/2017/07/07/12/31/lime-2481346__340.jpg
|https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg
|https://cdn.pixabay.com/photo/2019/10/15/14/47/nature-4551933__340.jpg
|https://cdn.pixabay.com/photo/2019/07/01/18/42/water-lily-4310676__340.jpg]
|
|
Exemple d'application
Encore des maths en exemple me direz-vous ? Oui, mais pas que... et n'hésitez pas à nous contacter pour proposer vos propres exemples que nous pourrons mettre dans une galerie ;-)
Voici donc deux petits exemples qui mêlent quelques balises présentées ci-dessus : Identifier une fonction et Verbes irréguliers.