Requis client

Attention, le pointage que vous voyez en jaune sur chaque requis ci-bas va être révisé. Ne pas en tenir compte. Voici la nouvelles liste des pages à monter suite au retrait de quelques éléments le 7 octobre :
  1. Accueil : index.html
  2. Liste des nouvelles : news-hub.html
  3. Article d'une nouvelle : news-article.html
  4. Liste des services : services-hub.html
  5. Page d'un seul des services : service.html
  6. Page de l'équipe : team.html
  7. À propos de nous : about.html
  8. Nous joindre: contact-us.html
  9. Page erreur 404: 404.html
 Généraux Bannière en haut de chaque page du site annonçant que c'est un travail scolaire. Cette bannière devra aussi inclure un bouton menant au vrai site web. Cette bannière devra contenir un X pour fermer celle-ci. Si le X est cliqué, cette action devra être stockée en local storage. Au prochain chargement de n'importe quelle page du site, vérifiez le storage afin d'éviter d'afficher cette bannière si elle a déjà été fermée par l'utilisateur. [3pts] Commenter tout votre code (HTML, CSS, et JS). [10pts] Toutes les pages du site doivent-être responsive: 375px, 768px et 1400px. [10pts] Les pages du site doivent s'afficher correctement sur les navigateurs: Chrome, Firefox et Edge. [4pts] Site bilingue sur toutes les pages. Si un contenu n'est pas disponible en anglais sur le site, traduisez-le via Google traduction ou DeepL Translator. [4pts] Permettre de populer les og:title, og:description et og:image de chaque page. [2pts] Création d’un fichier variables.scss contenant minimalement 5 variables. Chaque variable doit être utilisée au moins 2 fois.[1pts] Chaque composante doit avoir son propre fichier SCSS.
Minimum de 10 composantes (voir des exemples de composantes ici). [2pts] Création d'un composante héros générique contenant au minimum une image et un titre. [0,5pts] Création d'une composante qui affiche le contenu du champ description d'une page (contenu textuel principalement). [0,5pts] Entête Le logo du client doit être cliquable et pointer vers l'accueil. [1pts] Navigation vers les 6 pages (nouvelles, services, équipe, à propos, faq, nous joindre). Ordonnez les comme vous le souhaitez et nommez les comme vous le souhaitez, il faut que ce soit pertinent au contenu de votre site. [1pts] Possibilité de modifier la navigation à partir de WordPress. [3pts] Effet de survol pour chacun des liens dans la navigation. [1pts] Inclure un bouton d'appel-à-l'action (CTA) de dons qui se démarque des liens de la navigation et menant vers une page externe de dons. [1pts] Tous les liens de la navigation doivent être masqués dans un menu de type hamburger 🍔 par défaut et devenir visibles en tout temps à partir de la résolution tablette ou ordinateur classique (à votre discrétion). [3pts] Avoir un bouton de changement de langue fonctionnel. [1pts] Animer le menu hamburger au survol avec GSAP. [1pts] Pied de page Le logo du client doit être cliquable et pointer vers l'accueil. [1pts] Logo des partenaires. [1pts] Pouvoir contrôler les logos des partenaires via WordPress et permettre l'ajout de lien sur chacun d'eux. [2pts] Bouton de dons menant sur la page externe de dons. [1pts] Inclure les liens vers les pages de réseaux sociaux du client. [1pts] Informations de contact du client [1pts]:
- Téléphone
- Courriel
- Adresse physique
- etc. Lorsque cliquée, l'adresse physique du client doit ouvrir Google Map et afficher le bon endroit. [1pts] Affichez un symbole de droits d'auteur suivi de l’année (ex: ©2024), du nom du client et de votre équipe. [1pts] Accueil Création d'un héros contenant un carrousel. Présenter l'information principale en première diapositive, celle qui présente l'organisme, ses objectifs, ses luttes de façon imagée et quelques mots. Ne pas y déposer les dernières nouvelles qui font office d'information secondaire et donc destinées à être présentées dans une section plus bas. [2pts] Section affichant un aperçu des services offerts se populant à partir du contenu de ces pages. [2pts] Section affichant les 3 plus récentes nouvelles se populant à partir du contenu de ces pages. [2pts] Section affichant au moins 3 témoignages. [1pts] Animation GSAP 1 (faire un seul choix parmi les 3) - Section de dons contenant une animation GSAP élaborée utilisant une timeline. Animation GSAP 2 (faire seul un choix parmi les 3) - Ajout d'un minimum de 1 effet parallax au défilement de la page (GSAP et ScrollTrigger). Cet effet peut-être réutilisé sur plusieurs sections et dans différentes pages pour uniformiser l'aspect du site. Mais il doit être minimalement visible sur l'accueil du site. [2pts] Donner ($) ou devenir membre Texte explicatif des apports et bénéfices de donner (ou devenir membre). Voir arborescence pour le contenu. Formulaire web à remplir pour faire un don. Bouton soumettre. Liste des nouvelles / actualité Utilisez la composante de héros générique. [0,5pts] Affichez 4 cartes d'aperçu des nouvelles les plus récentes à l'aide d'un fetch au REST API de WordPress. Ces cartes doivent-êtres cliquables et pointer vers la page de nouvelle en question. [3pts] Ajoutez un effet de survol aux cartes. [1pts] Permettre de choisir l'ordre d'affichage des nouvelles (des + récentes aux + anciennes et vice-versa) via un menu déroulant. [2pts] Bouton "Voir plus de nouvelles" permettant d'aller chercher les 6 nouvelles suivantes. Ce bouton doit disparaitre lorsqu'il ne reste plus de nouvelle à aller chercher. [2pts] La 1re nouvelle doit avoir une apparence différente des autres nouvelles afin de la faire ressortir du lot. [1pts] Page d'une nouvelle Créez un héros de nouvelle contenant un titre, une image, une date et une catégorie. Chaque héros de nouvelle doit changer légèrement d'apparence en fonction de sa catégorie.

Par exemple, avoir un élément changeant de couleur, une icône différente, etc. [2pts] Importez le contenu de 13 pages de nouvelles minimum. [2pts] Affichez la composante de description de base. [0,5pts] Incorporez au moins 6 microdonnées de nouvelle. [1pts] Bloc en fin de page permettant de voir un aperçu de la prochaine nouvelle. [1pts] Liste des services offerts Utilisez la composante de héros générique. [0,5pts] Affichez la composante de description de base. [0,5pts] Affichez des cartes d'aperçu des différents services offerts. Ces cartes doivent-êtres cliquables et mener vers la page de service en question. [2pts] Page d'un service Utilisez la composante de héros générique. [0,5pts] Affichez la composante de description de base. [0,5pts] Bloc cliquable en fin de page permettant de voir un aperçu du prochain service. [1pts] Équipe

Pour cette étape, limitez vous à la création de 6 membres de l'équipe.

Utilisez la composante de héros générique. [0,5pts] Affichez la composante de description de base. [0,5pts] Chaque membre d'équipe doit avoir un post séparé dans WordPress [1pts] Affichez tous les membres d'équipe: [1pts]
- Nom
- Poste
- Portrait photo (si absent, utilisez une photo de ThisPersonDoesNotExist.com) Chaque membre d'équipe doit-être cliquable afin d'ouvrir un modal contenant plus d'information sur cette personne. Par exemple, une biographie. Si aucune information supplémentaire n'est disponible, affichez un paragraphe de Lorem Ipsum. [2pts] À propos Utilisez la composante de héros générique. [0,5pts] Affichez la composante de description de base. [0,5pts]

Histoire

Ce n'est pas une page, mais une section de la page à propos.

Affichez la composante de description de base. [0,5pts] Créez une ligne du temps verticale et affichez les grands événements de leur histoire. [1pts] La ligne du temps verticale doit se dessiner graduellement en même temps que le défilement de la page. Les grands événements doivent appraitre à mesure qu'on arrive à son point dans le dessin de la ligne du temps. Utilisez GSAP et les extensions nécessaires réaliser cette animation. Ne pas utiliser drawSVG car il est payant. [3pts] Nous joindre Addresse physique Courriel Formulaire de contact Nom, Courriel, Message, Bouton Envoyer (submit) FAQ Création et utilisation d'une composante de question/réponse en accordéon (s'ouvre et ferme). Minimum 4 question-réponse. [2pts] Erreur 404 Affichez le texte “Erreur 404”. [0,5pts] La page 404 doit présenter un clin d'oeil drôle/sympatique en lien avec le sujet du site. Animation GSAP 3 (faire un seul choix parmi les 3) - Incorporez une animation GSAP élaborée utilisant la timeline soulignant que la page n'a pas été trouvée. [1pts]