Dans cette séance de TP vous commencerez à travailler sur votre projet d'intégration multimédia.
Juste avant, je vous présente quelques classes de Bootstrap pour régler les marges extérieures (margin) et intérieures (padding) des boîtes.
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 une liste d'articles sur l'importance de l'espace dans le design : [ 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, ..., 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 inférieur (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.
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 courts avec peu ou pas de contenu. Maintenant vous allez faire une vraie mise en page avec du contenu pour un site web complet.
Pour cela, vous allez concevoir une mise en page responsive et ergonomique pour un site web dynamique tout fait.
Vous trouverez sur AMeTICE le lien pour télécharger le code source et la base de données d'un site web simple fait en PHP qui permet d'enregistrer des dates et de voir le temps écoulé.
Le but de ce site web est d'offrir aux utilisateurs des dates à fêter. Nous fêtons tous notre anniversaire chaque année, et normalement on fait une fête spéciale pour les décennies. Mais pourquoi ne pas fêter les 250 mois, les 1000 semaines ou les 10 000 jours ? Et on peut fêter d'autres événements, comme les 40 mois depuis la sortie de Fortnite ou les 250 jours depuis le premier confinement.
Le site web permet aux utilisateurs de s'inscrire, d'ajouter des événements (avec un titre, une description optionnelle et une date) et de les supprimer. Chaque utilisateur enregistré retrouve sur la page d'accueil la liste de ces événements, avec le nombre d'années, de mois, de semaines et de jours passés depuis la date renseignée. Le code PHP est volontairement très simple et il contient des failles de sécurité. Vous êtes libres de modifier le code PHP pour le réorganiser ou pour ajouter plus de fonctionnalités.
L'objectif principal de ce projet est de faire un site web dynamique responsive et élégant. Concrètement :
Le projet est à réaliser en binôme. Choisissez de préférence un collègue du même groupe de TP.
La date de rendu de ce projet est le . Chaque heure de retard vous enlèvera 5% de la note de ce projet (donc 0,5 points dans ce module).
Le projet est à soumettre par deux voies : sur AMeTICE et sur le serveur web du département.
AMeTICE Vous devrez rendre une archive appelée m2202-projet.zip ou m2202-projet.rar. Le fichier compressé ne doit pas dépasser 50 Mo. L'archive doit contenir :
Serveur web En même temps, vous déposerez aussi votre site web sur le serveur web de l'IUT, dans un répertoire appelé m3206/projet/. La page d'accueil doit donc être https://a-pedagoarles-mmi.aix.univ-amu.fr/identifiant/m3206/projet/index.php
J'évaluerai votre site web à partir de cette URL, donc il doit marcher correctement.
La note de ce projet, qui vaut 10 points sur la note de ce module, sera calculée en fonction de ce barème :
| Partie | Barème |
|---|---|
| Qualité du code HTML Le code HTML doit être valide. Utilisez les éléments sémantiques et séparez bien la forme du contenu avec CSS et les classes de Bootstrap. | 3 |
| Grille responsive Utilisez correctement le modèle de grille de Bootstrap pour faire la mise en page responsive du site web, avec des points de rupture. | 5 |
| Mise en page avancée Appliquez les techniques vues en cours pour faire une mise en page riche, avec imbrication et changement d'ordre des colonnes. | 3 |
| Composants Utilisez les composants vus en TD pour donner un aspect professionnel à votre site web. | 5 |
| Ergonomie, cohérence esthétique Le résultat est visuellement agréable, avec une harmonie de formes et couleurs. | 2 |
| Créativité Ajoutez d'autres fonctionnalités ou détournez le but du site web. | 2 |
Bien que le rapport n'apparaisse pas directement dans le barème d'évaluation, il est un support essentiel pour évaluer votre travail. Étant donné qu'il n'y a pas de soutenance, un bon projet avec un rapport médiocre sera difficilement bien noté. C'est votre opportunité de valoriser le travail que vous avez accompli.
Sa longueur doit être de 5 à 15 pages et il doit bien présenter les différentes parties du travail, de la conception de la mise en page jusqu'à l'implantation technique de vos fonctionnalités les plus avancées en développement front-end. Parmi les sections, on doit trouver une introduction, une conclusion avec les points forts et les points faibles et une bibliographie ou webographie précisant les ressources que vous avez utilisées.
Vous travaillez en binôme, donc présentez bien les deux membres, comment vous avez travaillé ensemble et ce que chacun ou chacune a fait.
Enfin, soignez l'orthographe et la grammaire, ce rapport doit montrer un niveau de maturité propre à des étudiants en deuxième année d'études universitaires. Faites aussi très attention au plagiat et aux fortes conséquences académiques qu'il aurait sur vous.
Les binôme sont :