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 20/10 à 23h59. En plus d’héberger le site, il faudra déposer les fichiers dans une archive sur l’espace moodle du cours. Il faudra rendre dans un dossier compressé:

les sources du site,
un fichier readme.txt ou readme.md précisant les membres du groupes, leurs parts d’implication dans le projet et le lien vers votre site web.

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.

Héberger le site

Vous disposez de votre propre home sur les serveurs de l’IUT. Ce home contient un dossier public_html. Tout ce que vous déposez dans ce dossier est automatiquement servi par le serveur à l’adresse suivante (si votre login était mon_login_IUT et votre fichier était page.html): http://webinfo.iutmontp.univ-montp2.fr/~mon_login_IUT/page.html

Pour pouvoir accéder à votre home à distance et y déposer des fichiers, il faudra d’abord trouver vos identifiants de connexion login et mot de passe (vous les utilisez probablement déjà pour vous connecter à d’autres services de l’IUT).

Vous pourrez utiliser FileZilla (il faudra certainement l’installer) pour déposer vos fichiers dans votre dossier ~/public_html sur le serveur de l’IUT. Pour vous connecter, il faudra choisir comme protocole SFTP, comme hôte ftpinfo.iutmontp.univ-montp2.fr et vous devrez utiliser votre login et mot de passe. Vous pouvez alors facilement déplacer des fichiers de votre machine vers votre home.

Il se peut que tout fonctionne immédiatement, mais il faudra certainement donner les droits au serveur Apache de lire vos fichiers. Pour cela vous pouvez vous connecter en SSH au serveur ce qui vous donnera accès à un terminal. Sous Linux, la commande vous permettant de vous connecter au serveur est la suivante (en remplaçant mon_login_IUT par votre login)

ssh mon_login_IUT@162.38.222.93 -p 6666

Il faudra ensuite entrer votre mot de passe et répondre “yes” à la question “Are you sure you want to continue connecting”. Vous êtes alors connectés en ssh et les commandes que vous tapez sont exécutées sur la machine cible. Il ne vous reste plus qu’à entrer les deux commandes suivantes :

   # On modifie (-m) récursivement (-R) les droits r-x
   # de l'utilisateur (u:) www-data
   setfacl -R -m u:www-data:r-x ~/public_html
   # On fait de même avec des droits par défaut (d:)
   # (les nouveaux fichiers prendront ces droits)
   setfacl -R -m d:u:www-data:r-x ~/public_html

Votre page devrait maintenant être accessible à l’adresse http://webinfo.iutmontp.univ-montp2.fr/~mon_login_IUT/.

Des sources complémentaires sur comment se connecter en FTP et en SSH à public_html (pour y déposer des fichiers) :