Sommaire


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>
Editeur d'équation' \sum ^n_{i=1}x^2_i
<equation>
2H_2+O_2\longrightarrow2H_2O
</equation>
Editeur d'équation' 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]
http://www.coursdeprofs.fr
[100x100|QRCode:http://www.coursdeprofs.fr]
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]
Maximus volutpat pretium
[LoremIpsum:1-10]
Integer
[LoremIpsum:5-5]
Per phasellus volutpat, finibus curabitur

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.