Projet de site HTML-CSS

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.

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

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-2024/devoir/premier-rendu/accueil.html

Vous 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 (où trouver son numéro étudiant ?) et LOGIN votre login de connexion) contenant l'ensemble du dossier premier-rendu sera déposé sur ecampus.

Date limite : mercredi 6 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 :

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-2024/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 (où trouver son numéro étudiant ?) et LOGIN votre login de connexion) contenant l'ensemble du dossier site sera déposé sur ecampus.

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

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

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.
• Attention cependant, il doit y avoir a minima un travail personnel de synthèse sur le contenu : vous ne devez pas utiliser une seule source (pas question, par exemple, de prendre la page Wikipédia sur votre sujet et de faire une page par section), ni utiliser une IA pour générer le contenu.
• Il est également interdit de copier du code, que ce soit du code trouvé sur internet ou écrit par un·e autre étudiant·e ou généré par une IA. 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.

• Le HTML et le CSS doivent être correctement indentés. Nous n'imposons pas de format précis, l'important est que le résultat soit lisible et cohérent.
• Il doit y avoir des commentaires dans le CSS, au minimum pour organiser les règles en « parties ». Les commentaires dans le HTML ne sont pas obligatoires, mais seront appréciés si la page est complexe.
• 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.

Conseils

Vous trouverez des conseils complémentaires dans les slides présentés lors du TP 10.

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.