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 groupe comme vu en TD. La date limite de rendu est le mercredi 04/12 à 23h59. Le rendu se fera 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 groupe, leurs parts d’implication dans le projet et le lien vers votre site web.

Héberger le site

Le site devra être hébergé page.html sur le serveur webinfo. Les indications se trouvent dans les consignes de la SAÉ 1.05

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 sujet (vous pouvez aller jusqu’à 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 compléter avec du Lorem Ipsum.

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 parler 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). Le formulaire devra envoyer les données à la page https://webinfo.iutmontp.univ-montp2.fr/~eturosenfeld/php_pour_TD5/exempleTraitement.php. Vous vérifierez notamment que le formulaire envoie correctement les informations de la question à réponses multiples quand plusieurs réponses sont sélectionnées.

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 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. En particulier, le menu s’adaptera à la taille de la page. Le site doit s’afficher correctement sur ordinateur, tablette et petit smartphone (pas besoin de se soucier des smartwatch).
7. Le site doit fonctionner aussi bien sous Chrome, Edge, Firefox, Safari…

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ées 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).