Dans cette séance de TP on va apprendre comment régler les marges extérieures (margin) et intérieures (padding) des boîtes avec les classes de Bootstrap.
Ensuite, vous commencerez à travailler sur votre projet d'intégration multimédia.
Présenter un contenu sur un petit dispositif n'est pas une excuse pour enlever tous les espaces. Bien au contraire, il est préférable d'utiliser des espaces pour mettre en évidence l'importance des différents éléments. Un exemple facile : on sépare un texte en paragraphes pour marquer des idées différentes. Voici plein d'articles sur ceci : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Bootstrap propose plusieurs classes pour régler le margin (espace extérieur entre le bord d'une boîte et et les autres boîtes) et le padding (espace intérieur entre le bord d'une boîte et son contenu).
Pour le margin, on a les classes m-0, m-1 (par défaut), ..., m-5 et m-auto pour avoir des margins de plus en plus grands.
On peut aussi régler le margin de chaque coté séparément avec les classes suivantes :
mt-* |
margin supérieur (margin-top) |
mb-* |
margin inferieur (margin-bottom) |
ml-* |
margin gauche (margin-left) |
mr-* |
margin droite (margin-right) |
mx-* |
margins horizontaux (margin-left et margin-right) |
my-* |
margins verticaux (margin-top et margin-bottom) |
En plus, toutes ces classes ont des versions responsives : m-sm-0, mt-md-1, mb-lg-2, ml-xl-3, etc.
Donc il y a 7*7*5 = 245 classes différentes pour régler le margin.
Pour le padding, c'est pareil mais avec "p" à la place de "m" : p-0, pt-sm-1, pb-md-2, pl-lg-3, pr-xl-4, etc.
Jusqu'à présent vous n'avez utilisé Bootstrap que pour faire des exemples. Maintenant vous allez faire une vraie mise en page avec du contenu.
Pour cela, vous allez concevoir une nouvelle mise en page, responsive et ergonomique, pour le site web dynamique que vous avez fait l'année dernière pour le projet de M2202/M2206, en utilisant Bootstrap.
L'objectif principal de ce projet et de faire un site web dynamique responsive. Concrètement :
La date de rendu de ce projet est le . Chaque heure de retard vous enlèvera 10% de la note de ce projet (donc 0,6 points dans ce module).
Le projet est à soumettre par deux voies :
https://a-pedagoarles-mmi.aix.univ-amu.fr/votre-identifiant/m3206/projet/index.php
Vous pouvez aussi ajouter un court rapport pour expliquer votre travail et m'aider à l'évaluer : difficultés rencontrées, références proprement citées, subtilités dans le code, etc.
La note de ce projet, qui vaut 6 points sur la note de ce module, sera calculée en fonction de ce barème :
| Partie | Points |
|---|---|
| Qualité du code HTML | 3 |
| Grille responsive, avec points de rupture | 5 |
| Grille avancée, avec imbrication et réarrangement des colonnes | 3 |
| Utilisation des composants | 5 |
| Ergonomie, cohérence esthétique | 2 |
| Créativité | 2 |
Le non-respect des consignes (date de rendu, citations, structure, URL) vous fera perdre des points.