Résumé de l'atelier en quelques lignes
Cet atelier exige une maîtrise préalable du code HTML. Ces bases peuvent être assimilées en suivant le début du Cours Openclassroom Créez votre site web avec HTML5 et CSS3 ou en parcourant la partie sur le HTML du site site d’auto-formation Apprendre HTML et CSS.
Au cours de cet atelier, les participants seront placés en groupes et chaque groupe bénéficiera d’un Moodle de test pour expérimenter. La formation prendra appui sur la dernière version 4.3.5 de Moodle. Les participants qui le souhaitent peuvent travailler sur un Moodle local ou un Moodle de test lié à leur institution. Nous déconseillons vivement de réaliser des tests de CSS sur un Moodle en production.
La formation s’articulera autour d’apports théoriques et d’exercices pratiques qui ciblent les éléments clés des CSS pour Moodle:
le principe des Cascaded Style Sheets
l’utilisation des classes et ids
la mise en forme du texte via CSS
la mise en forme des blocs via CSS
- le squelette des blocs Moodle
Les participants seront tous amenés à réaliser les exercices suivants à titre d’application:
- Personnaliser la présentation du titre de la page
- Personnaliser la couleur des blocs latéraux
- Cacher un bloc non désiré
- Limiter l'espace autour des éléments de cours
- Personnaliser la couleur des liens visités dans le menu de navigation de cours
Ils pourront en outre approfondir un volet au choix parmi les suivants:
- Revoir la présentation de la page d'accueil d'un cours pour que le contenu soit plus ramassé (élargir le contenu et limiter l'espace vertical autour des éléments)
- Personnalisez la présentation des éléments de menu et icônes (bouton d'édition, bouton de collapse, menus, icône d'activité)
- Personnaliser la page de connexion
- Proposer un habillage élégant pour les sections (section avec texte blanc sur fond foncé, section cachée en grisé, section mise en évidence en jaune)
Les participants repartiront avec un correctif des exercices proposés.
L’intérêt des thèmes Boost Union et LearnR sera aussi abordé.
Le site Apprendre HTML et CSS servira de support de formation et quelques supports de référence seront pointés:
le mémo css de Eric Bellot au format pdf et partagé sous licence Creative Commons
les exercices CSS Diner pour s’entraîner à la maîtrise des sélecteurs
le site W3School CSS qui référence tous les éléments CSS et leurs valeurs possibles
le site Paletton.com qui permet de construire des jeux de couleurs élégants pour un site
le site GetBootstrap qui propose des modèles de composants CSS originaux qui peuvent être facilement intégrés à Moodle
Maximum 16 participants, répartis en 4 groupes
Intervenant: Profile: Zabelle Motte
Intervenant: Profile: Luiggi Sansonetti
