Modalités du site de la SAÉ 1.5 Planning et cahier des charges

Sujet

Vous devez réaliser la page d’accueil du site Web présentant votre escape room de la SAÉ 1.5. Pour rendre ce site web accessible vous utiliserez le dossier public_html de l’un des membres du groupe. La date limite de rendu est le dimanche 22/10 à 23h59.

Héberger le site

En déposant une page page.html dans votre dossier public_html cette page devrait être accessible à l’adresse http://webinfo.iutmontp.univ-montp2.fr/~mon_login_IUT/page.html. Si la page ne s’affiche pas, il est peut-être nécessaire de donner les droits au serveur avec les commandes suivantes :

setfacl -m u:www-data:--x nom_du_répertoire pour chaque répertoire menant à votre page Web,
setfacl -m u:www-data:r-- nom_du-fichier pour chaque fichier de votre page web.

Si besoin, plus de détails sur comment se connecter en FTP à public_html (pour y déposer des fichiers):

Le contenu de votre site

Il faut réaliser en HTML/CSS une page simple présentant l’escape room. La présentation de la page suivra “librement” la maquette qu’on peut trouver ici. Le site contiendra donc :

un menu déroulant,
une série d’articles décrivant plusieurs aspects de l’escape room,
un pied de page en bas (visible uniquement si l’on fait défiler la page tout en bas).

Au moins l’un des articles contiendra un texte à gauche et une illustration à droite (ou le contraire) et au moins l’un des articles contiendra un texte suivi de 3 illustrations (comme dans la maquette). Deux interprétations du sujet sont disponibles là et là. Il faudra utiliser flex pour arriver à ce résultat. On vous demande d’utiliser au moins une propriété CSS ou balises HTML non étudiées en TD (quelques exemples : box-shadow, border-radius, details). Finalement, vous devrez rendre le menu toujours visible en haut de la page même quand on fait défiler la page (pour cela vous pourrez utiliser la position sticky et pour que les ancres fonctionnent correctement la propriété CSS un peu spéciale scroll-padding-top).

Certains liens du menu pointeront vers des ancres dans la page (puisqu’on ne réalise qu’une page les autres liens seront “morts” on pourra simplement mettre href=""). On ne demande pas que la page soit responsive. On pourra utiliser des illustrations libres de droits (par exemple, ici ou là) et le Lorem ipsum pour remplir le texte si vous manquez de texte.

Consignes générales

Vous devrez mettre en application les techniques que vous avez apprises lors des TDs. Voici donc les critères techniques sur lesquels vous serez notés :

Les codes CSS et HTML seront lisibles et correctement indentés. L’utilisation de CSS de style inline est interdit.
L’utilisation de framework tels que bootstrap, foundation, etc. n’est pas autorisée.
L’utilisation des float ou des tableaux n’est pas autorisée pour la mise en page, c’est-à-dire par exemple pour mettre une colonne à côté d’une autre …
L’utilisation des <br> n’est pas autorisée pour la mise en page. Si vous voulez sauter à la ligne dans un texte, cela correspond sûrement à un paragraphe <p>. Si vous voulez espacer des blocs, il faut mettre des marges en bas.

Quelques points supplémentaires que nous vérifierons pour l’évaluation :

Valider vos fichiers HTML et CSS avec les validateurs HTML5 et CSS3 déjà utilisés en TD.
Déclarer l’encodage UTF8 des caractères.
Utilisation de quelques propriétés de flex.
Variété des balises utilisées.
Ne faites pas un site trop laid.