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

Sujet

Vous devez réaliser le site Web présentant votre controverse sociotechnique de la SAÉ 1.6. Pour rendre ce site web accessible vous utiliserez le dossier public_html de l’un des membres du groupes comme vu en TD. La date limite de rendu est le dimanche 3/12 à 23h59. Le rendu se fera sur moodle, 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.

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 necessaire de donner les droits au serveur avec les commandes suivantes:

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

Le contenu de votre site :

Il y aura un menu de navigation avec sous-menus commun à toutes vos pages: une entrée du menu dédiée à chaque page avec au moins un sous-menu déroulant qui permet d’accéder directement à différents points d’ancrage de la page. Comme vu en TD, ce menu devra être responsive et donc être remplacé par un menu burger équivalent si la zone d’affichage est petite. On demandera aussi de distinguer l’entrée du menu correspondant à la page actuellement affichée (par exemple, en utilisant des couleurs). Pour cela, on pourra simplement modifier légèrement le code HTML du menu d’une page à l’autre en donnant une classe à certains éléments.

Voici une liste minimale de pages que vous devez avoir :

1. Une page d’accueil introduisant le sujet.
2. Au moins deux autres pages regroupant chacune certains aspects du sujets (ça peut être 3 ou 4 pages si cela permet un découpage plus pertinent pour couvrir les différents aspects à traiter). Vous pourrez vous baser sur votre synopsis et votre PESTEL pour le contenu de votre site. Vous pourrez aussi faire un lien vers le fichier de votre podcast. Si besoin vous pourrez completer avec du Lorem Lipsum.

3. Contact : Une page formulaire ”contactez nous”, avec

   1. les informations sur le demandeur (nom, prénom, adresse email, code postal, champs de sélection du pays),
   2. une question “vous avez entendu parlé de nous via ?” avec plusieurs choix possibles
   3. un champ “date à laquelle vous souhaitez être recontacté”
   4. un champ texte libre de plusieurs lignes d’expression libre

   Pour chacun des champs, un exemple sera donné, une vérification du format sera faite à l’aide des types prédéfinis en HTML5 (l’utilisation d’expressions régulières est optionnelle).

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:

1. les codes CSS et HTML seront lisibles et correctement indentés. L’utilisation de CSS de style inline est interdit.
2. le visuel du site (charte graphique) doit être cohérent sur toutes les pages du site.
3. l’utilisation de framework tels que bootstrap, foundation, etc. n’est pas autorisée.
4. 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 … Par contre, on peut bien sûr se servir de float pour son usage historique : entourer une image de texte.
5. l’utilisation des <br\> n’est pas autorisée pour la mise en page.
6. le site sera responsive. Au minimum le menu s’adaptera à la taille de la page.

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

1. Valider vos fichiers HTML et CSS avec les validateurs HTML5 et CSS3 déjà utilisés en TD.
2. Déclarer l’encodage UTF8 des caractères.
3. Plusieurs fontes importés avec fonte de secours (fallback).
4. Maîtrise des différentes propriétés de flex.
5. Variété des balises utilisées.

Pour l’évaluation, nous serons particulièrement attentifs aux critères que nous n’avons pas évalués pour le site précédent (en particulier responsive design et formulaires).