Workshop - Comment améliorer le rendu visuel de ma page de cours

Résumé de section

• Sélectionner la section Généralités

  Replier Déplier

  Généralités

  Tout replier Tout déplier
• Sélectionner la section Support de présentation et replay

  Replier Déplier

  Support de présentation et replay

  • Sélectionner l’activité Le support de présentation

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    Le support de présentation
  • Sélectionner l’activité

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé
  • Sélectionner l’activité Télécharger le PDF de la présentation

    

    Télécharger le PDF de la présentation Fichier PDF

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    2.4 Mo · Déposé le 20 août 25, 13:29
• Sélectionner la section Ce qu'il est déjà possible très simplement

  Replier Déplier

  Ce qu'il est déjà possible très simplement

  
  

  • Sélectionner l’activité ...

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    Très Simplement

    Les modèles

    Pour aller plus loin

    Aide-mémoire
  • Sélectionner l’activité Niveaux de titre, couleurs, bold, italic...

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    Niveaux de titre, couleurs, bold, italic...

  • Sélectionner l’activité Ceci est un grand titreCeci est un titre moyenCeci...

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    Ceci est un grand titre

    Ceci est un titre moyen

    Ceci est un petit titre

  • Sélectionner l’activité Ceci est un grand titre de couleur rougeCeci est u...

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    Ceci est un grand titre de couleur rouge

    Ceci est un titre moyen de couleur verte en gras et en italique

    ceci est un petit titre de couleur bleue

    
    

  • Sélectionner l’activité Les retraits

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    Les retraits

  • Sélectionner l’activité Titre de mon chapitre

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    Titre de mon chapitre

  • Sélectionner l’activité Sous-titre de mon chapitre

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    Sous-titre de mon chapitre

  • Sélectionner l’activité 1er paragraphe

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    1er paragraphe

• Sélectionner la section Avec les styles programmés

  Replier Déplier

  Avec les styles programmés

  • Sélectionner l’activité <div class="XXXXXXX">Ceci est mon activité&l...

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    <div class="XXXXXXX">Ceci est mon activité</div>

  • Sélectionner l’activité Classes EncadreRouge; EncadreVert; EncadreBleu; E...

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    Classes EncadreRouge; EncadreVert; EncadreBleu; EncadreGris; EncadreNoir

    Ceci est mon activité

    Ceci est mon activité

    Ceci est mon activité

    Ceci est mon activité

    Ceci est mon activité
  • Sélectionner l’activité Classes FondRouge; FondVert; FondBleu; FondGris; ...

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    Classes FondRouge; FondVert; FondBleu; FondGris; FondNoir

    Ceci est mon activité

    Ceci est mon activité

    Ceci est mon activité

    Ceci est mon activité

    Ceci est mon activité
  • Sélectionner l’activité Classe TexteCentre Ceci est mon activité Ceci e...

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    Classe TexteCentre

    Ceci est mon activité

    Ceci est mon activité
  • Sélectionner l’activité Les Icônes &lt;i class="fa fa-book" aria-h...

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    Les Icônes

    <i class="fa fa-book" aria-hidden="true"></i>

    • fa-book
    • fa-plus-square-o
    • fa-asterisk
    • fa-bullhorn
    • fa-comment-o
    • fa-check-circle-o
    • fa-envelope
    • fa-gift
    • fa-group
    • fa-info
    • fa-lightbulb-o
    • fa-map-marker
    • fa-pencil
    • fa-star
    • fa-tags
    • fa-warning
    • fa-bookmark
    • fa-cogs
    • fa-laptop
    • fa-pencil
    • fa-youtube-play

    <div class="EncadreRouge"><i class="fa fa-book" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreVert"><i class="fa fa-plus-square-o" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreBleu"><i class="fa fa-asterisk" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreGris"><i class="fa fa-bullhorn" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreNoir"><i class="fa fa-comment-o" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="FondRouge"><i class="fa fa-check-circle-o" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="FondVert"><i class="fa fa-envelope" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="FondBleu"><i class="fa fa-gift" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="FondGris"><i class="fa fa-group" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="FondNoir"><i class="fa fa-info" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    Etc...

  • Sélectionner l’activité Mixer les classes et ajouter bold/italic Ceci e...

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    Mixer les classes et ajouter bold/italic

    Ceci est mon activité

    Ceci est mon activité
• Sélectionner la section Accès au workshop

  Replier Déplier

  Accès au workshop

  • Sélectionner l’activité Replay Workshop 15/10/2021

    

    Replay Workshop 15/10/2021 URL

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé
  • Sélectionner l’activité Le replay

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    Le replay
  • Sélectionner l’activité Le code secret pour accéder au replay : 44X=sJA9

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    Le code secret pour accéder au replay : 44X=sJA9
    

    
    

  • Sélectionner l’activité Annonces

    

    Annonces Forum
• Sélectionner la section Avec quelques connaissances

  Replier Déplier

  Avec quelques connaissances

  • Sélectionner l’activité Sous-titre 1 Section 1 de niveau 2 &lt;h2 style...

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    Sous-titre 1 Section 1 de niveau 2

    <h2 style="background-color:#46b29d; color:#fff; text-align:center; padding:0.5rem">Sous-titre 1 Section 1 de niveau 2</h2>

    Sous-titre 1 Section 1 de niveau 3

    <h3 style="background-color:#46b29d; color:#fff; text-align:center; padding:0.5rem">Sous-titre 1 Section 1 de niveau 3</h3>

    Sous-titre 1 Section 1 de niveau 4

    <h4 style="background-color:#46b29d; color:#fff; text-align:center; padding:0.5rem">Sous-titre 1 Section 1 de niveau 4</h4>

  • Sélectionner l’activité Pour l'usage de ce code :&nbsp; h2 h3 h4 -&gt; ni...

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    Pour l'usage de ce code : 

    h2 h3 h4 -> niveau de titre (taille de police)
    background-color -> couleur de l'arrière-plan de l'étiquette
    color -> couleur du texte (blanc : #fff  - noir : #000)
    padding -> espace autour du texte

    Pour les couleurs le format est hexadécimal. Vous pouvez consulter ce site pour trouver la couleur qui vous convient : htmlcolorcodes.com/fr/

    Si vous voulez reprendre une couleur d'une page Internet : l'extension Colorzilla pour Chrome  https://www.colorzilla.com/chrome/ et pour firefox : https://addons.mozilla.org/fr/firefox/addon/colorzilla/ est très pratique.

• Sélectionner la section Aide-mémoire

  Replier Déplier

  Aide-mémoire

  • Sélectionner l’activité Ceci est mon activit...

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    Ceci est mon activité

    <div class="EncadreRouge">Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreVert">Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreBleu">Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreGris">Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreNoir">Ceci est mon activité</div>

    Ceci est mon activité

    <div class="FondRouge">Ceci est mon activité</div>

    Ceci est mon activité

    <div class="FondVert">Ceci est mon activité</div>

    Ceci est mon activité

    <div class="FondBleu">Ceci est mon activité</div>

    Ceci est mon activité

    <div class="FondGris">Ceci est mon activité</div>

    Ceci est mon activité

    <div class="FondNoir">Ceci est mon activité</div>

    Les Icônes

    Je choisis mon style : EncadreRouge, EncadreVert, EncadreBleu, EncadreGris, EncadreNoir, FondRouge, FondVert, FondBleu, FondGris, FondNoir puis mon icône.

    Ici, pour l'exemple, EncadreRouge. Il suffit lors du copier-coller de remplacer "EncadreRouge" par le nom du style qui vous convient.

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-book" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-plus-square-o" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-asterisk" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-bullhorn" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-comment-o" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-check-circle-o" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-envelope" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-gift" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-group" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-info" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-lightbulb-o" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-map-marker" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-pencil" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-star" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-tags" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-warning" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-bookmark" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-cogs" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-laptop" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-pencil" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge"><i class="fa fa-youtube-play" aria-hidden="true"></i> Ceci est mon activité</div>

    Bonus: TexteCentre

    Je choisis mon style : EncadreRouge, EncadreVert, EncadreBleu, EncadreGris, EncadreNoir, FondRouge, FondVert, FondBleu, FondGris, FondNoir puis UN ESPACE et TexteCentre.

    Ici, pour l'exemple, EncadreRouge. Il suffit lors du copier-coller de remplacer "EncadreRouge" par le nom du style qui vous convient.

    Ceci est mon activité

    <div class="EncadreRouge TexteCentre"><i class="fa fa-youtube-play" aria-hidden="true"></i> Ceci est mon activité</div>

    Ceci est mon activité

    <div class="EncadreRouge TexteCentre">Ceci est mon activité</div>

• Sélectionner la section Blocs de navigation

  Replier Déplier

  Blocs de navigation

  • Sélectionner l’activité ...

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    Très Simplement

    Les modèles

    Pour aller plus loin

    Aide-mémoire
  • Sélectionner l’activité &lt;div class="conta...

    Achèvement

    Les étudiants doivent

    

    Marquer comme terminé

    <div class="container" id="scolarite">

      <div class="row">

            <div class="col-xs-12 col-md-6">

                <div class="card">

                    <div class="titre">

                        <h2>Très Simplement</h2>

                    </div>

    
    

                    <div class="icone">

                        <a href="/moodle/upjv/course/view.php?id=8975#section-3" style="color:#46b29d;"><span class="fa fa-circle-o"></span></a>

                    </div>

                    <div class="bouton" style="background-color: #46b29d;">

                        <a href="/moodle/upjv/course/view.php?id=8975#section-3"><span class="fa fa-plus-circle"></span></a>

                    </div>

                </div>

            </div>

            <div class="col-xs-12 col-md-6">

                <div class="card">

                    <div class="titre">

                        <h2>Les modèles</h2>

                    </div>

                    <div class="icone">

                        <a href="/moodle/upjv/course/view.php?id=8975#section-4" style="color:#e37b40;"><span class="fa fa-cogs"></span></a>

                    </div>

                    <div class="bouton" style="background-color: #e37b40;">

                        <a href="/moodle/upjv/course/view.php?id=8975#section-4"><span class="fa fa-plus-circle"></span></a>

                    </div>

                </div>

            </div>

    
    

            <div class="col-xs-12 col-md-6">

                <div class="card">

                    <div class="titre">

                        <h2>Pour aller plus loin</h2>

                    </div>

    
    

                    <div class="icone">

                        <a href="/moodle/upjv/course/view.php?id=8975#section-5" style="color:#f53855;"><span class="fa fa-plus-square-o"></span></a>

                    </div>

                    <div class="bouton" style="background-color: #f53855;">

                        <a href="/moodle/upjv/course/view.php?id=8975#section-5"><span class="fa fa-plus-circle"></span></a>

                    </div>

                </div>

            </div>

            <div class="col-xs-12 col-md-6">

                <div class="card">

                    <div class="titre">

                        <h2>Aide-mémoire</h2>

                    </div>

                    <div class="icone">

                        <a href="/moodle/upjv/course/view.php?id=8975#section-6" style="color:#2e83a9;"><span class="fa fa-graduation-cap"></span></a>

                    </div>

                    <div class="bouton" style="background-color: #2e83a9;">

                        <a href="/moodle/upjv/course/view.php?id=8975#section-6"><span class="fa fa-plus-circle"></span></a>

                    </div>

                </div>

            </div>

        </div>

    </div>

    Pour utiliser les blocs de navigation :

    1) Copier-coller ce code dans une étiquette située de préférence dans la première partie du cours c'est-à-dire là où il y a le forum "Annonces";

    2) Modifier les titres (en rouge);

    3) Modifier les liens (en vert) avec l'identifiant de votre cours (dans la barre d'adresse de votre navigateur : id=....) ainsi que le numéro de la section en comptant 1 à partir de votre première section avec l'en-tête bleu;

    4) Modifier les icônes  (en bleu): choisissez celles qui vous conviennent sur le site Font awesome et copier coller le nom de l'icône (fa-XXXX).