Début de la phase de développement – page About

La première page qu’il m’a été demandé de développer est la page présentée comme intention graphique : la page À Propos. De la même manière que dans le design, cette page est la plus dense au niveau du nombre de composants (entre autres, de sections présentes sur la page) que j’ai eu à développer. Ainsi, il était judicieux pour moi d’entamer le développement de ce site sur cette page.

Mise en place de la navigation secondaire

Une des si,gularité du site de Binet Associates est sa navigation secondaire, présente à gauche de toutes les pages et suivant la navigation de l’utilisateur (son positionnement sur la page, notamment lorsque ce dernier scroll.)

Cette navigation, étant héritée sur la majorité des pages du site, j’ai pris la décision de créer un composant que je pourrais importer sur chaque View des pages nécessitant cette navigation. Ainsi, au lieu de dupliquer mon code et devoir repasser sur toutes les pages correspondantes si une erreur se révèle, je n’ai qu’un seul fichier importé sur différentes views qui sera responsable de ces possibles erreurs. Cette méthode m’a permis de gagner du temps de développement et d’efficacité lors des phases de debbug, sachant d’où venait l’erreur et puisque la correction était automatiquement appliquée sur toutes les pages enfants.

De cette même manière, j’ai créé par la suite deux autres composants qui fonctionneront sur le même principe d’include, mais qui sont des versions modifiées de l’aside (lorsque ce dernier est composé d’autres informations que celles d’origine, sur des pages spécifiques).

Animation « fixée » de l’aside au scroll avec GSAP

Afin que cet aside soit ‘ »fixé » à gauche de l’écran peu importe la position de l’utilisateur sur la page, j’ai utilisé une fonctionnalité de GSAP : ScrollTrigger. Comme son nom l’indique, cet élément permet de créer un nouveau comportement au scroll.

Dans le cas énoncé, j’ai localisé le bloc contenant l’aside, que j’ai fixé en précisant d’arrêter ce comportement une fois arrivée au footer. L’avantage d’utiliser cette librairie a été sa rapidité dans la compréhension et l’écriture des fonctions, grâce à une communauté réactive et une documentation accessible.

Responsive de l’aside

Un autre des nombreux avantages de cette librairie est la gestion comportement au responsive. En réalité, la navigation secondaire fait 100% de la taille de l’écran avec un background transparent, ce à quoi, j’ai soustrait la hauteur du header, pour ne pas avoir un décalage.

La fin de l’animation est gérée par un arrêt au scroll en end « top bottom », autrement dit : quand le bas de l’aside touche le haut du footer.

J’ai, dans le même temps, utilisé un simple media query détectant la taille de l’écran de l’utilisateur. Sous un certain nombre de pixels, à la taille tablette, j’ai simplement eu à changer la hauteur de l’aside, le positionnement des éléments de colonne à ligne et la couleur du background.

Ce dernier, étant toujours positionné en bas, s’arrêtera au scroll quand il rentrera en contact avec le footer : sans ajouter de code superflu, j’ai réussi à tirer parti du comportement de mon élément pour ne pas générer de duplicate content en développement et gagner du temps. Cela favorise, aussi, la fluidité de navigation.

Avancée et mise en pré-production

La page À Propos de l’agence présente certains biens immobiliers récents en carrousel, sous forme de swiper. Sur les conseils de mon tuteur, j’ai utilisé la librairie SwiperJS, qui permet d’automatiser et de créer très rapidement ce genre de slider.

Comme nous pouvons le noter, ci-dessus, la personnalisation des sliders est quasi complète. La seule obligation est de garder une nomenclature précise entre la déclaration javascript du slider et les classes utilisées en HTML pour localiser les éléments (ici, les cartes et le parent qui contient toutes ces dernières).

J’ai pu aussi associer le comportement de clic à droite/gauches à des icônes personnalisées, ce qui rend cette librairie très puissante par sa flexibilité et la simplicité d’utilisation que j’ai pu expérimenter en découvrant cette librairie, traduit pas un gain de temps conséquent sur le développement de cette fonctionnalité.

Select2, à la même manière de SwiperJS, est une librairie javascript qui permet aussi une grande personnalisation des éléments de formulaire; par exemple les éléments selects. Lors du chemin d’utilisation logique du site internet, l’utilisateur est amené à trier différents biens par certains filtres, que j’ai pu styliser par cette librairie, afin de correspondre au plus avec les maquettes fournies.

En effet, il n’est pas encore possible de personnaliser en CSS certains éléments des formulaires, par exemple les champs de sélection dans des balises select.

Afin de permettre une personnalisation complète, Select2 (dans sa configuration) localise par une classe libre l’élément à modifier. Passera ce dernier en display : none, autrement dit, il ne sera pas affiché à l’écran mais toujours dans le corps html de la page. Select2 duplique ensuite cet élément sous la forme de « faux » selects à l’aide de balises div qui sont, elles, complètement modifiables.

L’avantage considérable est de pouvoir garder une architecture qui communique avec le back-end pour rendre les données dynamiques : puisque le « vrai » select n’est que caché, nous avons encore accès aux attributs comme la value ou le name de ce dernier, importante dans la récupérations des éléments en back-end afin de filtrer dynamiquement les biens en fonction des choix de l’utilisateur. Cela n’est pas possible autrement, puisque les éléments div ne peuvent pas avoir d’attributs value, ou name.

Deux semaines avant la fin de mon stage, j’ai pu assister à la mise en préproduction du site Binet Associates, qui conclut pour moi ce projet. J’ai pu tant apprendre techniquement qu’humainement, dans l’importance de la communication afin de mener à bien le développement front-end d’un site.

Malgré certaines difficultés au début dans la découverte de l’environnement logiciel du projet, j’ai su grâce à l’accompagnement de mes collègues, leur patience, ma curiosité et ma détermination rendre un projet d’une qualité quasi professionnelle. Même si, au vu des dates de fin de stage, je ne pourrai pas intervenir lors des dernières modifications et debbug, une fois la couche back-end réalisée.