Ce document constitue le sujet du projet de site HTML/CSS de l'unité Technologies web 1.
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.
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.
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é / vont être exposés en TP et vous devez si besoin vérifier avec votre enseignant·e que votre choix de sujet est bien dans le thème.
| Groupe | Chargé·e de TP | Thème |
|---|---|---|
| Info 1A | Y. Jacquier | Un groupe de musique |
| Info 1B | G. Richard | Lieux ou légende celtiques |
| Info 2A | S. Schüpp | Les déserts de sable – géographie et représentations culturelles |
| Info 2B | A. Hammamouche | Les fruits et légumes et leurs bienfaits |
| Info 3A | A. Hammamouche | Plantes médicinales |
| Info 3B | K. Milintsevich | Site d'un restaurant |
| Info 4A | S. Schüpp | Les étoiles et les objets stellaires |
| Info 4B | A. Niveau | Insectes et arthropodes célèbres |
| Info 5A | J.-M. Lecarpentier | Une ville |
| Info 5B | J.-M. Lecarpentier | Un style de musique |
| Maths CUPGE | F. Jurie | Un jeu vidéo |
| Maths 3A | J.-L. Lamotte | Les bateaux |
| Maths 3B | Y. Jacquier | Un film ou une série |
| Maths 4A+4B | A. Hammamouche | Cascade célèbre |
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. 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 9 oct. | Présentation du thème dans les groupes de TP. |
| Semaine du 16 oct. | 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 6 nov. | Page d'accueil du site à rendre en ligne et sur ecampus (voir ci-après) avant le mardi 7 novembre à 23:00. Aucun retard ne sera toléré a posteriori (note de 0 non négociable). |
| Semaine du 13 nov. | Retours des enseignants sur votre page d'accueil. Suite à ces retours vous pouvez faire des modifications et améliorations sur votre page d'accueil. |
| Semaine du 11 déc. | Version finale du site à rendre en ligne et sur ecampus (voir ci-après) avant le mercredi 13 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-2023/devoir/premier-rendu/accueil.htmlVous pourrez vérifier que l'URL est correcte avec evalweb, comme pour les exercices à rendre des TP. Le dossier premier-rendu 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 premier-rendu sera déposé sur ecampus.
Date limite : mardi 7 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ées | 1 |
|---|---|
| Code HTML | |
| Validation W3C page d'accueil | 1,5 |
| Pertinence des balises utilisées | 1 |
| Code CSS | |
| Pertinence des sélecteurs utilisés | 1,5 |
| Richesse des propriétés et sélecteurs utilisés | 1 |
| Global | |
| Lisibilité du code et commentaires | 1 |
| Pertinence des contenus par rapport au sujet choisi | 1 |
| Aspect global de la page | 1 |
| Adaptabilité basique à 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-2023/devoir/site/accueil.htmlVous 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 13 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 | 1,5 |
| Richesse des balises utilisées | 1,5 |
| 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 et sélecteurs utilisés | 2 |
| Global | |
| Organisation des dossiers et fichiers | 1 |
| Lisibilité du code et commentaires | 2 |
| Pertinence des contenus par rapport au sujet choisi | 2 |
| Aspect global du site | 2 |
| Variété des pages | 2 |
| 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, ni évidemment par une IA.
- 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 (relativement) 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. - 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.
- Il est en revanche interdit de copier du code, que ce soit du code trouvé sur internet ou écrit par un·e autre étudiant·e. Si nous suspectons une fraude, nous saisirons la commission de discipline, qui tranchera. Si vous vous inspirez d'un tutoriel sur internet, ne le reprenez pas tel quel, et surtout citez la source en commentaire pour montrer votre bonne foi.
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 et dans le tutoriel sur la factorisation du 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ériquesdivetspan, à 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.