Découvrez les astuces de présentation de la plateforme de cours la plus utilisée au monde!
Les outils "bootstrap" sont inclus dans la plateforme et vous permettent de démultiplier la présentation des pages de cours.
Pour délivrer des instructions précises et des procédures faciles à suivre, utilisez les listes!
Le meilleur moyen de s'initier à bootstrap dans moodle.
C'est très facile comme un copier-coller
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Vos titres sont des phares... laissez-les projeter leur lumière.
Un outil très simple pour continuer à s'initier à Bootstrap.
C'est très facile comme un copier-coller
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>Utilisez les codes couleurs inclus dans Bootsrap pour rapidement donner une idée de vos contenus.
Un élément essentiel pour personnaliser votre page en restant dans la charte graphique de votre école.
La liste du matériel nécessaire
Voici les dangers de cette manipulation
C'est très facile comme un copier-coller
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
This is a dark alert—check it out!
</div>Faites ressortir vos liens et utilisez les techniques des "call to action" pour inciter les étudiants à visiter les ressources.
Tous le marketing d'internet fonctionne avec des incitations à cliquer. Profitez d'années de recherche pour faire progresser vos étudiants.
C'est très facile comme un copier-coller
<button class="btn btn-primary">Réviser</button>
<button class="btn btn-secondary">S'entrainer</button>
<button class="btn btn-outline-success">Solution</button>
Fontawesome est inclus dans Moodle pour permettre l'ajout d'une signalétique simple et comprise par tous.
N'hésitez pas à creuser les codes pour améliorer la taille et la couleur de vos icônes.
C'est très facile comme un copier-coller
<i class="fa fa-file-excel-o"></i>
<span class="fa fa-globe"></span>
Évitez la surcharge mentale. Éveillez l'esprit de découverte. Laissez les étudiants choisir leur rythme.
L'accordéon permet également de masquer des solutions.
C'est très facile comme un copier-coller
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>Les tabs permettent d'afficher différentes options comme un classeur.
Très pratique pour laisser les étudiants choisir l'alternative qui leur correspond le plus.
<p><br></p>
<div class="card-header">
<ul class="nav nav-pills card-header-pills" style="list-style-type: none;">
<li class="nav-item">
<a class="nav-link active show" data-toggle="tab" href="#menu1">Management</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Marketing</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu3">Finance</a>
</li>
</ul>
</div>
<div class="tab-content border-left
border-right border-bottom p-3">
<div id="menu1" class="tab-pane fade in active show">
<h3 class="display-4">Gestion des ventes</h3>
<p class="lead">Un délicieux exercice de suivi
des ventes pour accompagner la direction de votre région.</p>
<button class="btn btn-success">Sujet</button>
<button class="btn btn-border-success">Corrigé</button>
</div>
<div id="menu2" class="tab-pane fade">
<h3 class="display-4">Suivi des followers</h3>
<p class="lead">créez un reporting d'activité sur les réseaux sociaux.</p>
<button class="btn
btn-primary">Sujet</button> <button class="btn btn-border-primary">Corrigé</button>
</div>
<div id="menu3" class="tab-pane fade ">
<h3 class="display-4">Gestion de trésorerie</h3>
<p class="lead">Ton entreprise va-t-elle fonctionner si certaines rentrées d'argent son différées?</p>
<button class="btn btn-secondary">Sujet</button> <button class="btn btn-border-secondary">Corrigé</button>
</div>
</div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Passez votre souris sur les éléments suivants pour afficher des informations complémentaires
Par exemple mettez en avant les chiffres clés de votre cours, comme ci-dessous, avec une description lorsqu'on passe la souris dessus.