Travail pratique 5 - Projet web

Travail pratique à remettre

Ce travail pratique est à remettre et compte dans le cumul de la note finale du cours.

Pondération : 10% de la session

Détails :
- Bien identifier les noms des coéquipiers dans le champ author de l'en-tête
- Bien lire les instructions
- Valider le code avec le validateur avant la remise
- La date limite de remise est disponible sur LÉA

Bootstrap 5.3.8

Assurez-vous de travailler avec Bootstrap 5.3.8!

chatGPT

L'IA est un outil très utile quand on sait s'en servir et détecter les erreurs qu'il peut faire.

Remettre un travail entièrement effectué par l'IA ne me permet pas d'attester que vous avez acquis la compétence de programmation en web, surtout lorsque le code produit ne fonctionne pas!

La note 0 sera attribuée à tout travail soupçonné d'avoir été produit par chatGPT, Copilot ou une autre IA.

Lien vers la politique du Cégep d'évaluation des apprentissages

Point 8.8.1 :

Est considéré comme plagiat le fait de s’approprier intégralement ou en partie la production de quelqu’un d’autre (texte, image, document audio ou vidéo ou autres), quelle qu’en soit la source (une autre personne, un livre, un site Internet, une intelligence artificielle générative (IAG) etc.) et de la présenter comme sienne sans en indiquer la provenance ou sans la citer

Énoncé

À faire

Vous devez créer un site web sur le sujet de votre choix, d'au moins 2 pages, qui permet de créer une liste de choix.

Exemples de listes possibles :

* Panier d'achat
* Wishlist
* Liste d'épicerie
* Itinéraire de voyage (restaurants, activités, etc.)
* Plan d'entraînement (choix d'exercices à ajouter au plan)
* Playlist de musique
* Horaire d'événements dans une convention (choix des événements à mettre à l'horaire)
* etc...

Attention au choix de liste

Les items à ajouter dans la liste doivent proposer des options.

Exemples :

• Quantité
• Couleur
• Modèle / Variété
• Langue
• Catégorie
• Nombre de répétitions
• Plage horaire
• Etc...

Vous n'avez pas à faire une reproduction de site

Vous pouvez vous inspirer ou tenter de reprodure la mise en page d'un site existant, mais il n'est pas exigé de reproduire un site !

Si vous décidez de reproduire un site, ajouter une mention sur les droits d'auteur dans le pied de page !

Truc

Peut-on utiliser un TP de la session comme début du TP5 Réponse : OUI

Contenu du site

Le site doit inclure :

• Le thème doit être le même sur toutes les pages

  • Même en-tête
  • Même menu de navigation
  • Même pied de page
  • Même choix de couleurs
  • Mise en page uniforme
  • Mobile First et réactif

• Possibilité de se créer une liste de choix

  • Permettre à l'utilisateur d'ajouter des items dans une liste
  • Avoir au moins quatre choix d'items
  • Avoir une page dynamique qui résume la liste d'items sélectionnés (la page doit être construite par Javascript et présenter les choix de l'utilisateur)

• Chaque item offert doit permettre à l'utilisateur de :

  • Choisir au moins une option (quantité, couleur, taille, modèle, heure, cote (rating), langue, etc.)
  • Ajouter au panier

• Utilisation des technologies vues depuis le début de la session (HTML, Bootstrap, JavaScript et CSS pour compléter Bootstrap)

• Icônes

• Au moins une police Google Fonts

• Code validé et sans erreur

• Règles de programmation respectées

  • Pas de variable globale à moins d'absolue nécessité
  • Noms de variables et de fonctions représentatif
  • Indentations aux bons endroits et espacement du code
  • Division du code en fichiers

• Hiérarchie de dossiers respectée

Sur toutes les pages

Sur toutes les pages on a le même :

• en-tête de présentation (header)

  • format au choix
  • présente un logo avec lien vers index.html
  • un nom de compagnie ou de site
  • icône cliquable menant vers la page de la liste de choix (panier, liste, coeur, etc. selon votre site)

• menu de navigation Bootstrap (au moins 3 liens cliquables)

  • lien vers l'accueil (index.html)
  • liens vers un ancrage plus bas sur la page ou vers une 3e page du site
  • lien vers la liste de choix (panier d'achat, wishlist ou autre)

• pied de page en deux colonnes (une colonne sur mobile)

  • Mention sur les droits d'auteurs :

    • Si c'est une reproduction, fournir un lien vers le site original
    • OU mention "libre de droits d'auteurs" et origine des images (pixabay, pexels, etc.)

  • Nom(s) de l'auteur ou des auteurs (vous et vos co-équipier)

Page d'accueil (index.html)

En plus des éléments de base (header, nav, footer) , la page d'accueil (index.html) contient au minimum :

• un groupe de cartes Bootstrap (les produits, catégories de produits, produit vedette, nouvelles, promo des fêtes, etc.)

• un carrousel d'au moins 2 diapositives (spéciaux de Noël, nouveautés, articles à venir, promotion d'un item, etc...)

Les items

Les items se trouvent soit sur la page d'accueil, soit sur une page spécifique aux items.

Total de 4 items minimum que l'utilisateur peut ajouter à sa liste.

Chaque item affiche au minimum :

• Image
• Nom / Modèle / Description
• Champs de formulaire
  • Au moins une option à choisir (quantité, couleur, taille, modèle, heure, cote (rating), langue, etc.)
  • Bouton pour ajouter aux choix de l'utilisateur

Exemple :

Page résumé des choix de l'utilisateur

En plus des éléments de base (header, nav, footer) :

La page de liste de choix :

• Par défaut, afficher "Liste vide" ou "Panier vide" ou autre mention en lien avec la liste

• Si l'utilisateur a choisi des items, afficher la liste des items choisis avec au minimum

  • une image du produit
  • la ou les options choisies

• Afficher le nombre total d'items dans la liste ou le prix total des items

• L'option de supprimer tout le contenu de la liste

Exemple :

ATTENTION La liste ne contient rien par défaut!

Il y a une zone d'affichage vide (une div vide) lorsqu'aucun item n'est ajouté.

Par Javascript, le panier sera construit (balises HTML ajoutées avec appendChild() ) pour afficher les items sélectionnés, comme nous le verrons en classe et dans les notes de cours.

Fonctionnalité

1. Lors de l'ajout d'un item dans les choix, le client indique les options désirées avec les champs de formulaire
2. Lorsque le client appuie sur un bouton "Ajouter", on ajoute l'item et les options choisies dans un "sessionStorage" (matière semaine 13)
3. Lorsque l'utilisateur se rend sur la page de liste, on lit le sessionStorage pour afficher :
   • Les items choisis et les options
   • Le nombre total d'items dans la liste
4. Puis on génère le HTML nécessaire par script pour afficher la liste complète à l'utilisateur

BONUS 1

Pour obtenir un point bonus :

À chaque ajout d'item, ajouter le nombre total d'items à côté de l'icône représentant la liste ou le panier (ou autre) au haut de la page. Lorsqu'on change de page sur le site, s'assurer que ce nombre s'affiche toujours à côté de l'élément de navigation.

Exemple:

BONUS 2

Un point bonus est accordé si chaque produit de la page de liste offre un bouton ou un icône pour supprimer cet item uniquement du panier.

Barème de correction

Critère	Description	Points
Règles de programmation	Imbrication, commentaires, noms représentatifs (id, classes, variables, fonctions), division du code dans leurs fichiers respectifs, hiérarchie des dossiers	2
Code sans erreur	Validation du code à l'aide du validateur	1
Nombre de pages	Avoir au moins les 2 pages demandées	1
Présentation	Présentation professionnelle et esthétique, thème uniforme, réactif	3
Tous les éléments demandés	Revoir la liste des éléments demandés par page dans l'énoncé ci-haut	5
Fonctionnalité	Options d'achat, ajout au panier, création de la page, afficher le panier, suppression du contenu du panier	5
Technologies	HTML, Bootstrap, Javascript utilisés correctement, CSS uniquement pour compléter Bootstrap	3
TOTAL		20 points
BONUS	Affichage du nombre total d'items dans le panier à côté de l'icône	+1 point
BONUS	Possibilité de supprimer un item du panier, pour chaque item	+1 point

La liste de vérification

VOici une liste des éléments exigés en abrégé, que tu pourras cocher selon ce qui est fait.

Liste à cocher version web

Pour en télécharger une copie :

1. Options du navigateur
2. Imprimer
3. Imprimer en tant que PDF

Remise

La date limite pour la remise est indiquée sur LÉA.

Pour la remise :

• Remettre un dossier ZIP contenant tout votre site sur LÉA
• Une remise par équipe

Aucun retard permis !

Aucun retard permis dans la remise de ce travail, car la correction est très longue et s'étire souvent jusqu'à la fin décembre.