[ Refonte BSC ]
[ Le Projet ]
Intégration web complète
Refonte Baie-Sainte-Catherine est un projet réalisé dans le cadre du cours Web 4 en Techniques d'intégration multimédia. Le mandat consistait à reproduire fidèlement des maquettes fournies en un site web fonctionnel, responsive et animé.
Contexte
N'ayant pas suivi le cours de design préalable, les maquettes m'ont été fournies par Charles Bernier. Mon rôle était exclusivement l'intégration web.
Objectif
Réaliser une copie conforme des maquettes en desktop, tablette et mobile, avec des animations CSS et des composants JavaScript réutilisables.
[ Le Défi ]
Fidélité et adaptabilité
Le défi principal était de reproduire les maquettes au pixel près tout en assurant une adaptation fluide sur trois formats : desktop, tablette et mobile. Chaque breakpoint devait respecter l'intention du design original.
[ Solution ]
Architecture par composants
J'ai structuré le projet autour d'une Component Factory en JavaScript, permettant d'instancier dynamiquement les composants selon les attributs data présents dans le HTML. Cette approche modulaire facilite la maintenance et la réutilisation du code.
Les composants développés incluent : Header (navigation responsive), Scrolly (animations au défilement), Carousel (galerie d'images), YouTube (intégration vidéo), Form (validation de formulaire) et Tabs (navigation par onglets).
[ Résultat ]
Ce que j'en retiens
Ce projet m'a permis de solidifier mes compétences en intégration web et de comprendre l'importance d'une architecture JavaScript bien pensée. La Component Factory est devenue un pattern que je réutilise dans mes projets personnels.
Structure
- HTML sémantique
- CSS modulaire
- BEM naming
Composants JS
- Header
- Carousel
- Scrolly
- YouTube
- Form
- Tabs
Responsive
- Desktop
- Tablette
- Mobile
[ Crédits ]
Maquettes réalisées par Charles Bernier. Ce projet a été développé dans le cadre du cours Web 4 en Techniques d'intégration multimédia (TIM).