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

Assurez-vous de travailler avec Bootstrap 5.3.3!

Le travail ne sera pas corrigé et la note 0 sera automatiquement attribuée si le projet a été fait avec une version antérieure.

chatGPT

chatGPT 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 chatGPT 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 ou une autre IA.

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

Point 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, etc.) et de les présenter comme siens 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 3 pages, qui permet de créer une liste d'items.

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
* 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 de la mise en page d'un site, mais il n'est pas demandé 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 le TP4 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

• 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 offerts
  • Avoir une page résumé de la liste d'items sélectionnés qui présente 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 de Fontawesome et/ou Bootstrap

• 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 qui se transforme en burger sur petits écrans

  • lien vers l'accueil (index.html)
  • liens vers la ou les pages d'items
  • lien vers la liste de choix (panier d'achat, wishlist ou autre)

• pied de page en deux colonnes

  • Mention sur les droits d'auteurs :

    • reproduction avec 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 :

• des items ou des catégories d'items, cliquables, présentés en groupe de cartes Bootstrap

  • les liens sur ces cartes mènent à la bonne page pour choisir les options et ajouter à la liste

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

Page(s) d'items

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

Choix entre :

• 1 page d'items avec au moins 4 items ou plus
• 2 pages d'items contenant au moins 2 items chaque
• au moins 4 pages de un item par page

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

Chaque item affiche au minimum :

• Image
• Nom / Modèle
• Brève description
• Champs de formulaire
  • Au moins une option à choisir (quantité, couleur, taille, modèle, heure, cote (rating), langue, etc.)
  • Bouton pour ajouter au panier d'achat

Exemple :

Page résumé de liste ou panier d'achats

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

La dernière page doit :

• 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 lorsqu'aucun item n'est ajouté.

Par Javascript, le panier sera construit (balises HTML ajoutées) pour afficher les items sélectionnés (comme au laboratoire 5 et TP2).

Fonctionnalité

1. Sur les pages de description des items, le client indique les options désirées avec les champs de formulaire
2. Lorsque le client appuie sur un bouton "Ajouter au panier/ Ajouter à la liste", on ajoute l'item et les options choisies dans un "sessionStorage" (matière semaine 12)
3. Lorsque l'utilisateur clique sur le lien du menu de navigation qui mène vers la liste ou l'icône dans l'en-tête, on charge la page de liste et on lit le sessionStorage pour afficher :
   • Les items choisis et les options
   • Le nombre total d'items dans la liste

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 3 ou 4 pages demandées	1
Présentation	Présentation professionnelle et esthétique, thème uniforme	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

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