Projet de site HTML-CSS

Année universitaire 2021-2022

Licence Informatique/Maths 1ère année

Alexandre Niveau — Jean-Marc Lecarpentier

Enseignement des technologies du Web

 

Ce document constitue le sujet du projet de site HTML/CSS de l'unité Technologies web 1.

N.B. : les étudiant·es en Mathématiques et en LAS ne sont pas concerné·es par tout ce qui est lié à l'enseignement de Méthodologie.

Présentation

Au cours du semestre vous devez réaliser individuellement un projet HTML/CSS. Ce projet consiste à créer un site internet sur un thème donné (qui dépend de votre groupe de TP) . Votre site devra être réalisé individuellement.

L'évaluation sera la suivante :

  • Dans le cadre de l'enseignement Technologies Web, une évaluation technique de la qualité de votre site sera réalisée. Ce projet constitue les deux tiers de la note de contrôle continu, le dernier tiers étant l'évaluation sur les travaux réalisés lors des séances de TP.
  • Dans le cadre de l'enseignement de Méthodologie, vous devrez réaliser un rapport écrit et effectuer une présentation orale de votre travail qui seront évalués par le responsable de cet enseignement pour votre groupe (ne concerne pas les Mathématiques et les LAS).

Le site doit traiter un sujet dans le cadre du thème défini pour votre groupe (tableau ci-dessous). Attention ces titres sont indicatifs, les thèmes ont été exposés en TP et vous devez si besoin vérifier avec votre enseignant que votre choix de sujet est bien dans le thème.

Groupe Chargé·e de TP Thème
Info 1A A. Niveau Engin spatial
Info 1B ?? Une peluche célèbre
Info 2A G. Richard Une station balnéaire ou thermale
Info 2B S. Schüpp Le monde du Seigneur des Anneaux
Info 3A+C F. Lambert Espèce(s) disparue(s) (animal, plante…)
Info 3B Y. Chahir Film d'animation
Info 4A J.-M. Lecarpentier Un sport nautique
Info 4B A. Baledent Période et/ou évènement historique
Info 5A A. Mortelier E-sport
Info 5B J.-M. Lecarpentier Architecture moderne (20/21e siècles)
Maths B1 P. Vaudorne Pâtisserie
Maths B2 S. Schüpp Les fortifications de Vauban

Contenu de votre site

Votre site devra comporter une page d'accueil et 4 autres pages.

Vous pouvez récupérer du texte ou des images sur internet, à condition de respecter les règles de propriété intellectuelle et de citer vos sources, que ce soit pour les textes ou pour les images, vidéos, etc.

Des conseils sur les aspects techniques ou sur le contenu des pages pourront être donnés en TP de Technologies Web et/ou de Méthodologie. Des conseils et informations sur le rapport et la soutenance vous seront donnés lors des TP de Méthodologie. N'hésitez pas à consulter votre responsable de TP sur votre travail en cours, que ce soit pour avoir son avis ou pour avoir de l'aide. N'attendez pas la dernière minute pour cela.

Calendrier de réalisation

Le calendrier est le suivant (1 TP = 1 séance de 2h).

Date Événement
Semaine du 18/10 Présentation du thème dans les groupes de TP.
Semaine du 8/11 Une séance de TP consacrée au travail sur votre site. Attention, ce n'est pas une séance pour choisir son sujet et les textes/images que vous utiliserez. Vous devez arriver avec cette étape déjà faite afin de pouvoir commencer la structure de votre site et le codage HTML/CSS de la page d'accueil.
Semaine du 15/11 Page d'accueil du site à rendre en ligne et sur ecampus (voir ci-après) avant le mercredi 17 novembre à 23:00. Aucun retard ne sera toléré.
Semaine du 29/11 Retours des enseignants sur votre page d'accueil. Suite à ces retours vous pouvez faire des modifications et améliorations sur votre page d'accueil.
Mercredi 15/12 Version finale du site à rendre en ligne et sur ecampus (voir ci-après) avant le mercredi 15 décembre à 23:00. Tout retard sera pénalisé.

Modalités de rendu et évaluation

Partie 1: page d'accueil

Vous devez d'abord rendre seulement la page d'accueil. Celle-ci doit avoir un contenu et le menu de navigation dans le site (même si les liens pointent vers des pages qui n'existent pas encore). Vous pourrez par la suite continuer à l'améliorer pour la version finale du site.

La page d'accueil est à mettre en ligne sur votre serveur personnel à l'URL suivante :

https://dev-LOGIN.users.info.unicaen.fr/TW1-2021/devoir/accueil/accueil.html

Vous pourrez vérifier que l'URL est correcte avec evalweb, comme pour les exercices à rendre des TP. Le dossier accueil doit contenir les images, styles, etc. nécessaires à l'affichage de la page, éventuellement dans des sous-dossiers afin que l'ensemble soit « bien rangé ».

Un fichier zip nommé NUMETU-LOGIN-nom-prenom.zip (sans accents ou caractères spéciaux, avec NUMETU votre numéro étudiant et LOGIN votre login de connexion) contenant l'ensemble du dossier accueil sera déposé sur ecampus.

Date limite : mercredi 17 novembre à 23:00. Aucun retard toléré (dépôt sur ecampus impossible passé cette date et note 0/10 automatique).

L'évaluation sur 10 points portera sur les aspects suivants :

Dépôt du travail
Consignes de rendu respectées1
Code HTML
Validation W3C page d'accueil 1,5
Pertinence des balises utilisées 1,5
Code CSS
Pertinence des sélecteurs utilisés 1,5
Richesse des propriétés utilisées 1,5
Global
Lisibilité du code et commentaires 1
Pertinence des contenus par rapport au sujet choisi 1
Aspect global de la page dans diverses tailles de navigateur 1

Partie 2 : site complet

Le site complet est à mettre en ligne sur votre serveur personnel à l'URL suivante :

https://dev-LOGIN.users.info.unicaen.fr/TW1-2021/devoir/site/accueil.html

Vous pourrez vérifier que l'URL est correcte avec evalweb, comme pour les exercices à rendre des TP. Le dossier site doit contenir les fichiers HTML, styles, images, etc. nécessaires à l'affichage du site, éventuellement dans des sous-dossiers afin que l'ensemble soit « bien rangé ».

Un fichier zip nommé NUMETU-LOGIN-nom-prenom.zip (sans accents ou caractères spéciaux, avec NUMETU votre numéro étudiant et LOGIN votre login de connexion) contenant l'ensemble du dossier site sera déposé sur ecampus.

Date limite mercredi 15 décembre à 23:00. Tout retard sera pénalisé.

L'évaluation sur 30 points portera sur les aspects suivants :

Dépôt du travail
Consignes de rendu respectées 1
Code HTML
Validation W3C de toutes les pages 4
Pertinence des balises utilisées 2
Menus de navigation et liens 2
Code CSS
Factorisation du code CSS pour tout le site 2
Pertinence des sélecteurs utilisés 2
Richesse des propriétés utilisées 3
Global
Organisation des dossiers et fichiers 1
Lisibilité du code et commentaires 2
Pertinence des contenus par rapport au sujet choisi 3
Aspect global du site 3
Adaptabilité à diverses tailles de navigateur 3
Citation des sources (textes, images, etc) 2

Consignes complémentaires

Précisions sur les attendus — FAQ

  • Le HTML et le CSS doivent être écrits « à la main » : par exemple vous ne devez pas utiliser de frameworks, ou rendre du code qui a été généré par un éditeur visuel.
  • Vous ne devez pas utiliser de JavaScript, uniquement du HTML et du CSS. Cela est valable pour du JavaScript que vous auriez écrit vous-mêmes ou récupéré sur le web. C'est une bonne pratique d'éviter le JS quand c'est possible, et ce DM est une opportunité de vous obliger à vous en passer. CSS permet de faire de nombreuses choses, y compris des animations et des éléments un minimum interactifs.
  • La taille de l'archive à déposer sur ecampus est limitée à 100 Mo, ce qui suffit largement pour le code et les images, mais peut s'avérer trop peu si vous y mettez des vidéos. La solution la plus simple est de ne pas mettre les vidéos dans l'archive : nous n'en avons pas besoin pour évaluer votre travail (votre site est en ligne de toute façon). Vous pouvez ajouter un fichier README.txt à la racine de votre archive pour préciser quelles vidéos ont été supprimées.

Qualité du code

Les points suivants seront pris en compte lors de l'évaluation de la qualité du code (certains items de la grille d'évaluation portent directement dessus). Ceux qui portent sur le CSS sont abordés lors du cours sur les bonnes pratiques CSS.

  • La page HTML doit être bien structurée, c'est-à-dire qu'elle doit utiliser les éléments sémantiques de structuration autant que possible (nav, main, header, footer, article, aside, section…). Il n'est pas interdit d'utiliser les éléments génériques div et span, à condition que ce soit justifié : vérifiez qu'il n'existe pas d'élément HTML plus approprié !
  • Les sélecteurs CSS doivent être pertinents : il doit y avoir un bon équilibre entre l'utilisation de la structure du HTML et l'utilisation de classes.
  • Identifiants : ils ne sont pas interdits, mais leur utilisation doit être justifiée. Normalement ils doivent servir pour modifier le style d'un élément précis, sans qu'il y ait de catégorie/sémantique associée. Typiquement, pour styler le menu principal, une classe est a priori plus appropriée (même s'il n'y a bien sûr qu'un seul menu principal sur la page). Mais ici encore c'est très subjectif (encore davantage que l'équilibre structure/classes). Les correcteurs/trices sont libres d'interdire les identifiants ou au contraire de les autoriser un peu plus largement.
  • Le code CSS doit être bien factorisé, c'est-à-dire que (1) les règles communes à toutes les pages doivent être centralisées, et (2) les règles contenant les mêmes propriétés doivent être « fusionnées » au maximum.

Questions

N'hésitez pas à contacter l'enseignant (alexandre.niveau@unicaen.fr) si quelque chose n'est pas clair ou s'il manque des informations.