Projet #5
SiteWeb
Baie saint Catherine
Ce site a été conçu pour valider ma maîtrise du HTML, du CSS et du JavaScript. Il démontre mes compétences techniques et propose une structure réutilisable pour d'autres projets, offrant une base adaptable pour des développements futurs. Ce projet m’a également permis de perfectionner mon approche de la conception web.
- Html, css & javaScript
- Wordpress
Méthode
Ce projet vise à développer un site web pour promouvoir la Baie Saint-Catherine et ses attractions touristiques. Sur le plan technique, j’ai mis en place un carrousel dynamique en section héro, permettant de présenter plusieurs contenus clés de manière fluide. Un carrousel d’actualités à défilement infini a également été intégré, avec une fonctionnalité qui affiche des informations supplémentaires lorsque l’utilisateur passe la souris dessus, offrant ainsi une expérience interactive.
Le site inclut une section sur l’histoire de la Baie, une présentation de sa mission, ainsi qu’une mise en avant des lieux touristiques à visiter. Une page de contact permet aux visiteurs de prendre facilement contact avec les responsables. Le développement s’est appuyé sur HTML, CSS et JavaScript, garantissant une navigation fluide et une expérience utilisateur optimisée, tout en restant flexible pour de futurs ajouts.
- Design réalisé par Jean-François Leblanc et Matthieu Parent, professeurs.
- Programmation et intégration: Antoine Breton
Crédit
La méthodologie de ce projet était centrée sur la réutilisation rapide d’éléments pré-préparés. Après avoir planifié les fonctionnalités principales, j’ai structuré le contenu avec HTML et stylisé les sections à l’aide de CSS. JavaScript a été utilisé pour ajouter des interactions dynamiques, comme les carrousels et les effets au survol. Chaque composant du site a été développé avec l’idée qu’il puisse être facilement réutilisé dans d’autres projets, offrant ainsi une grande flexibilité et une rapidité d’intégration pour de futurs développements. La phase finale comprenait des tests pour assurer la fluidité et la compatibilité.
Le principal défi a été la section des questions sur la page de contact. L’objectif était de rendre les interactions dynamiques en fonction des actions des utilisateurs. Par exemple, certaines questions devaient se fermer dès qu’on cliquait dessus, tandis que d’autres se fermaient automatiquement lorsqu’une nouvelle question était sélectionnée, avec une limite sur le nombre de questions ouvertes simultanément. Cela a nécessité de prévoir toutes ces éventualités. J’ai donc mis en place plusieurs attributs de données, chacun avec des fonctionnalités spécifiques adaptées à ces comportements.
Résolution
Pour résoudre ce problème, il n’y a pas de secret : quand on ne sait pas, on cherche. J’ai consulté de nombreux tutoriels et forums en ligne pour comprendre les solutions possibles. Ensuite, j’ai adapté le code à mon propre style de développement afin qu’il fonctionne correctement dans le contexte de mon projet.
Apprentissage
Cette expérience m’a appris à aborder les défis de manière méthodique, en effectuant des recherches approfondies et en adaptant les solutions à mes besoins spécifiques. Elle a également renforcé mes compétences en gestion des interactions dynamiques via les attributs de données et en intégration de fonctionnalités personnalisées dans une interface utilisateur.