Ce projet consiste à appliquer les outils appris en cours pour faire une mise en page responsive d'un site web.
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. Il y a une version disponible en ligne ici.
Le but de ce site web est d'offrir aux utilisateurs de partager leurs coins préférés de l'ensemble de Mandelbrot. L'ensemble de Mandelbrot est un fractal, une image avec un niveau infini de détails générée par une simple équation mathématique.
Le site web permet aux utilisateurs de créer une nouvelle image (en choisissant un point, un zoom et un niveau de détail) et de la partager avec une description. En partageant une image, les autres utilisateurs peuvent la voir, voter pour elle et laisser un commentaire.
Le site web fourni est fait en PHP avec un peu de HTML et de JavaScript. Vous devrez le modifier pour l'adapter à votre mise en page, mais vous pouvez ajouter aussi d'autres 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 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,6 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 m3206-projet.zip ou m3206-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 12 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ômes sont :