mockup-b

Baie-Sainte-Catherine

Projet scolaire | Design et intégration web

Tester le site

Un résumé

Le but de ce projet était d'intégrer en site web une maquette visant à faire la refonte du site de la Baie-Sainte-Catherine. C'est donc un projet fictif, ayant pour but de nous introduire aux différentes composantes JavaScript et aux diverses difficultés possibles dans l'intégration HTML et CSS, car nous avons travaillé avec beaucoup de nouveaux concepts que nous ne connaissions pas avant ce travail.

Informations

Créateur du projet

Rito José Blandon Pinzon

Logiciels utilisés

Vs code, Figma

Compétences utilisés

Design et intégration web

Démo du projet

Création de la maquette

Le design du site en version desktop m'a été fourni par les professeurs dans le cadre du projet, mais c'est moi qui ai organisé le contenu et créé le design de la maquette mobile lors de l'intégration du responsive.

De maquette à intégration

Pour commencer ce projet, j'ai directement intégré le header et le footer, ce qui a été plus complexe que je ne le pensais, car c'était l'une des premières fois que j'utilisais le composant JavaScript Header. Par la suite, la majorité de l'intégration s'est bien exécutée, et j'ai pu en apprendre plus sur les formulaires, ainsi que sur l'intégration d'accordéons avec JavaScript. C'était également la première fois que nous utilisions des composants JavaScript, notamment un composant factory qui crée les éléments dans un seul document JavaScript, au lieu de le faire dans chaque script.

image-integration
image-integration
image-integration
image-integration
Image en grand

Exemple de code

image-code

Script Accordion

image-code

Script Component Factory

image-code

Script Form

image-code

Script Form(suite)

image-code

Script Youtube

image-code

Script Youtube(suite)

Image en grand

Compétences acquises

Intégration de la composante Swiper JS
C'était la première fois que nous utilisions un composant JavaScript dans un projet plus important, et cela m'a permis de découvrir les différentes fonctionnalités et modifications possibles sur les carrousels fournis par Swiper JS.
Première ittération du Component Factory
Dans ce projet, j'ai dû utiliser différentes composantes JavaScript, ce qui m'a amené à utiliser un composant factory qui boucle à travers tous nos data-components, afin que je n'aie pas à ajouter chaque composant manuellement chaque fois que j'en crée un. Cette méthode rend donc l'intégration des composants techniquement plus facile et permet d'avoir des fichiers JavaScript organisés et moins bordéliques.
Création d'un forms en html,css et javascript
Pour la première fois, j'ai dû intégrer un formulaire dans le site afin de pouvoir entrer des informations. Malgré le fait que le formulaire ne soit pas fonctionnel, j'ai appris à en intégrer un, à le rendre interactif grâce à JavaScript et à le styliser avec CSS.
Intégration de vidéo youtube
J'ai également appris, pour la première fois, à intégrer des vidéos YouTube dans ma page, ainsi qu'à explorer les différentes fonctionnalités de l'API YouTube.