## Introduction

Dans le cadre d'une mission de ma micro-entreprise, j'ai été chargé de la refonte du site de l’Abbaye de Cercanceaux. Avec mon client, nous avons dû résoudre plusieurs problèmes liés à un site vieillissant, notamment en matière de sécurité, d’accessibilité et de performance. L’abbaye, riche de son histoire, avait besoin d’un site reflétant sa valeur tout en garantissant une expérience utilisateur moderne et sécurisée. En plus des failles fonctionnelles, l'ancien site affichait des scores faibles dans les évaluations de performance et d’accessibilité, limitant son potentiel de référencement et d’engagement.

## Un site ancien et manquant de sécurité

L’ancien site de l’abbaye présentait plusieurs problèmes critiques :
- **Failles de sécurité** : Pas de protocole HTTPS, formulaires de contact non protégés, et une grande vulnérabilité aux spams 

> Avec plus de 1800 messages reçus de novembre 2019 à janvier 2024, soit plus d’un par jour !

- **Contenu et images dépassés** : Des visuels vieillissants et un contenu peu optimisé limitaient l’attrait du site et son référencement.
- **Navigation limitée** : L’arborescence et la structure du site ne permettaient pas une découverte aisée des informations importantes, notamment sur l’histoire de l’abbaye et les services de réservation.
- **Scores faibles Lighthouse** : Le site affichait de mauvais scores dans les domaines de :
  - **Performance** : Faible à cause de l’optimisation limitée des ressources et de l’absence de mises à jour.
  - **Accessibilité** : Aucun texte alternatif (balises "alt") pour les images, ce qui impacte l’expérience des utilisateurs ayant des déficiences visuelles et le SEO.
  - **Best Practices** : Utilisation injustifiée de cookies tiers, notamment pour le lecteur vidéo tiers, posant des risques en matière de confidentialité.
  - **SEO** : L’absence de balises "meta" et de structure de contenu optimisée limitait la visibilité du site dans les moteurs de recherche.

> Les score Google Lighthouse ou Google PageSpeed Insights, sont importants pour le référencement naturel, et pour l'expérience des utilisateurs.

## Objectifs de la Refonte

La refonte visait à transformer l’image numérique de l’abbaye pour répondre aux enjeux suivants :
- **Renforcer la Sécurité et la Fiabilité** : Sécuriser les formulaires et mettre en place HTTPS.
- **Moderniser l’Expérience Utilisateur et les Visuels** : Avec mon client, nous avons enrichi les pages avec des images actuelles et un contenu pertinent.
- **Optimiser la Structure et la Navigation** : Simplifier l’accès aux informations clés et guider les visiteurs de manière intuitive.
- **Augmenter les Scores Lighthouse en SEO, Performance et Accessibilité** : En intégrant des _alt_ pour les images, des balises _meta_, et en réduisant l’utilisation de cookies tiers.

## Solutions Apportées

### Sécurisation et Optimisation des Formulaires

**Mise en place du HTTPS sur l'ensemble du site** : Cela assure la sécurité des données envoyées et reçues, notamment à travers le formulaire.

Le formulaire de contact a été refondu pour inclure :
- **hCaptcha** : Un CAPTCHA protège désormais l'envoi de formulaire et empêche le spam.
> hCaptcha est reconnu pour être soucieux des données des utilisateurs.
- **Formulaire de réservation détaillé** : Permet aux visiteurs de préciser leurs besoins (type d’événement, nombre de personnes, prestations souhaitées), facilitant la gestion des demandes.

### Choix de WordPress et Thème Personnalisé

Comme pour d’autres [projets de refonte](https://axelgodefroy.fr/projet/transports-jamet), WordPress a été choisi pour sa flexibilité et sa facilité d’usage :
- **Thème personnalisé** : Un thème sur mesure permet de minimiser les plugins, ce qui améliore la performance et réduit les failles de sécurité.
- **Édition simplifiée** : L’équipe peut désormais facilement mettre à jour le contenu et les visuels.

### Modernisation Visuelle et Expérience Utilisateur

Pour rendre le site plus attrayant :
- **Vidéo en bannière et images actualisées** : Ces éléments visuels donnent une première impression immersive aux visiteurs.
- **Nouvelle arborescence** : L’organisation en sections telles que _/decouvrir_ (informations sur l’histoire et les salles), _/reserver_, _/evenements_, et _/diaporama_ permet une navigation simple et intuitive.

### Optimisation SEO et Scores Lighthouse

Pour maximiser la visibilité et améliorer l’expérience utilisateur, des optimisations SEO avancées ont été mises en œuvre :
- **Images avec texte alternatif (balises "alt")** : Toutes les images sont désormais accompagnées de descriptions pour améliorer l’accessibilité et le SEO.
- **Balises Meta et données structurées** : Ajout de balises _meta_ et de données structurées pour permettre un meilleur affichage dans les moteurs de recherche et une meilleure indexation.
- **Fil d’Ariane et témoignages** : Ces éléments renforcent la crédibilité du site et sa navigation.
- **Réduction des cookies tiers** : Suppression du lecteur vidéo utilisant des cookies tiers.

> **📎 Accès**
> Application accessible à l'adresse suivante : [www.abbaye-cercanceaux.fr](https://www.abbaye-cercanceaux.fr)


Ancienne page accueil de Page accueil du site de l'Abbaye de cercanceaux

abbaye_OLD_THUMB.webp

Page accueil du site de l'Abbaye de cercanceaux

abbaye_FULL_HOME.webp

large_abbaye_THUMB.webp

medium_abbaye_THUMB.webp

small_abbaye_THUMB.webp

thumbnail_abbaye_THUMB.webp

abbaye_THUMB.webp

L'Abbaye De Cercanceaux

Développement Web

Webdesign

## Introduction
J'ai eu l'opportunité durant mes activités de freelance de entreprendre la refonte du site web des Transports Jamet, une entreprise spécialisée dans le transport de marchandises en vrac dans le sud de la Seine et Marne. L'objectif principal était de moderniser le site existant datant de 2008, afin d'améliorer la visibilité en ligne de l'entreprise, renforcer son image de marque et attirer de nouveaux clients.

## Contexte
L'entreprise, spécialisée dans le transport de marchandises en vrac telles que les bennes TP, agricoles, gravats, etc., avait besoin de se démarquer dans un secteur concurrentiel en exploitant les avantages du monde numérique. La refonte du site s'est avérée cruciale pour rester compétitif et répondre aux attentes d'une clientèle de plus en plus connectée.

## Objectifs de la Refonte
1. **Améliorer la Présence en Ligne:** La refonte du site visait à augmenter la visibilité de l'entreprise sur le web, attirant ainsi de nouveaux clients et renforçant sa position sur le marché.

2. **Moderniser l'Image de Marque:** Avec un site datant de 2008, l'entreprise avait besoin d'une image moderne pour inspirer confiance et crédibilité à ses clients potentiels.

3. **Faciliter le Recrutement:** La création de pages dédiées aux offres d'emploi avec des formulaires de candidature en ligne devait simplifier le processus de recrutement et attirer des profils qualifiés / motivés.

## Maquette sur Figma
Avant même de commencer le développement, j'ai créé des maquettes détaillées de chaque page du site en utilisant l'outil Figma. Cela a permis à l'entreprise de visualiser le futur site, de s'impliquer dans le processus de conception, et de faire des ajustements en amont.

## Pourquoi wordpress ?
Le choix de WordPress pour la refonte a été stratégique. Le développement d'un thème sur mesure a permis d'assurer un site plus sécurisé, avec une personnalisation avancée, tout en limitant l'utilisation de plugins pour réduire les vulnérabilités potentielles.

L'ancien site, inaccessible aux modifications par l'équipe, sera désormais facilement mis à jour grâce à WordPress, offrant une interface conviviale. Sur le plan SEO, WordPress offre une structure optimisée, des balises méta gérables, et des fonctionnalités facilitant le référencement. Ainsi, ce choix vise à renforcer la visibilité en ligne de l'entreprise et à améliorer son classement dans les moteurs de recherche.

## Fonctionnalités Clés
1. **Formulaire de Contact pour Devis:** Un formulaire de contact intuitif a été intégré pour simplifier le processus de demande de devis, encourageant ainsi l'interaction entre l'entreprise et ses prospects.

2. **Formulaire de Candidature en Ligne:** Pour faciliter le recrutement, un formulaire dédié a été ajouté, permettant aux candidats de postuler en ligne de manière efficace.

## Conclusion
La refonte du site pour l'entreprise de transport de marchandises en vrac a été bien plus qu'une simple mise à jour visuelle. Elle a permis d'atteindre les objectifs cruciaux tels que l'amélioration de la présence en ligne, la modernisation de l'image de marque et la simplification du processus de recrutement. Ce projet témoigne de l'importance de l'adaptation continue dans un environnement numérique en constante évolution.

> **📎 Accès**
> Site des transports jamet accessible à l'adresse suivante : [https://transports-jamet.fr](https://transports-jamet.fr)

TJ_FULL-min.webp

Ancienne page du site des transports jamet

chrome-capture-2024-0-9 (1).webp

Bannière du site transports jamet - Plusieurs Camions Jamet

large_TJ_THUMB.webp

medium_TJ_THUMB.webp

small_TJ_THUMB.webp

thumbnail_TJ_THUMB.webp

TJ_THUMB.webp

Transports Jamet

## Introduction

Lorsque mon frère, architecte de profession, a décidé de se lancer en freelance, il m'a confié la création de son site internet pour présenter ses projets. Son objectif était de se démarquer dans un secteur compétitif en mettant en valeur ses réalisations et son expertise auprès de clients potentiels. Le défi principal de ce projet était de concevoir une plateforme à la fois élégante et fonctionnelle, **pour mettre en valeur ses projets** tout en offrant une expérience utilisateur optimal.

Dans cet article, je vais vous guider à travers les étapes clés de la création du site, en commençant par la phase de design et de conception. Nous avons effectué un benchmark approfondi, en nous inspirant de plateformes comme **Pinterest** et **Dribbble** pour identifier les meilleures pratiques en matière de design d’architecture. Nous avons ensuite utilisé **Figma** pour créer une maquette visuelle intuitive, adaptée aux besoins spécifiques d'un architecte freelance.

Ensuite, je vous parlerai des choix technologiques que nous avons faits, en particulier l'utilisation de **React JS** pour développer un site performant, réactif et facilement maintenabl. Ainsi que l'utilisation du CMS Headless Strapi pour faciliter l'édition du site. Vous découvrirez également les raisons derrière ces choix et comment ils ont permis d’offrir une expérience utilisateur fluide et moderne.

## Conception 
### Recherches et benchemark
Lorsque j'ai commencé la conception du site web pour mon frère, architecte freelance, il n'y avait pas de charte graphique définie, ce qui m'a offert une grande liberté créative. Pour définir une direction claire, j'ai d'abord réalisé un benchmark sur des plateformes comme Pinterest et Dribbble, à la recherche d'inspirations visuelles adaptées aux sites de présentation de projets d'architecture. Mon objectif était de concevoir un site épuré et professionnel, mettant en valeur les réalisations de mon frère.

Je me suis rapidement rendu compte que la clé était un design sobre et sombre, afin de faire ressortir les visuels des projets architecturaux. Les images de ses réalisations devaient être l’élément central du site, permettant aux visiteurs de se concentrer sur le travail sans être distraits par une interface trop chargée. À partir des exemples analysés, j’ai vu que les designs minimalistes donnaient un résultat plus percutant, en particulier dans les secteurs créatifs comme l’architecture.

### Choix esthétiques et fonctionnels

Sans charte graphique imposée, j’ai décidé qu’il n'était pas nécessaire de créer un UI kit détaillé, estimant que cela prendrait trop de temps sans apporter de réelle valeur ajoutée au projet. L'important était d’aller à l’essentiel : un site simple, mais élégant, où les images des projets sont au cœur de l'expérience utilisateur.

J’ai opté pour une palette de couleurs sombres, principalement des tons gris foncé et noir avec une legère touche de bleu clair, offrant un contraste sophistiqué avec les images des projets. Ce choix permet de faire ressortir les visuels tout en conservant un aspect professionnel et moderne.

### Animations et interactivité

Pour rendre le site plus agréable a utilisé, j'ai ajouté quelques animations légères. Celles-ci incluent des transitions douces lors du défilement ou des effets subtils de survol sur les images. L’idée était d’apporter un dynamisme discret, créant une expérience agréable sans détourner l’attention de l’essentiel : les projets architecturaux.

### Maquettes visuelles

J’ai ensuite réalisé les maquettes visuelles sur Figma, ce qui m’a permis de formaliser ces idées en une structure concrète. Les maquettes illustrent la disposition des éléments, la hiérarchie des contenus, et l’aspect visuel général des différentes pages. Cela a permis d’assurer une cohérence dans le design avant de passer à la phase de développement. Vous pouvez consulter les maquettes complètes en annexe pour avoir une idée précise de la mise en forme finale du site.

![Vignette page accueil site d'architecture](https://api.axelgodefroy.fr/uploads/Aymeric_737970b847_9dd936975e.png)

## Développement

Pour ce projet j'ai décider d'utiliser React, j'étais plutôt a l'aise avec cette technologie, a ce moment j'utilisais

### Front-end (React JS) 
Le front-end en React est responsable de l'affichage et de l'interaction utilisateur. Il envoie des requêtes HTTP GET pour obtenir les données nécessaires à la présentation des projets architecturaux.
Ces requêtes sont adressées à l'API exposée par Strapi pour récupérer les informations sur les projets, les images, les descriptions, et d’autres contenus associés.

### API de Strapi
Strapi reçoit les requêtes HTTP du front-end et gère ces demandes en effectuant des opérations sur la base de données.
Les opérations incluent la récupération, la mise à jour, ou l'ajout de nouvelles informations. Strapi renvoie les données au front-end sous forme de réponses JSON.
L'avantage de CMS c'est qu'il est totalement personnalisable, on créer chaque entité à travers une interface simple d'utilisation. De la meme façon l'API peut être surchargée et personnalisée à souhait.

### Base de données
J'ai utiliser une base de donnée SQLite, en effet le projet ne nécessite pas vraiment de performance énorme, ni fonction spécial. Disponible sur d'autres SGBD.

### Déploiement avec Docker
Pour le déploiement, j’ai utilisé Docker pour conteneuriser les applications front-end et back-end. Docker ma permis de déployer très rapidement le projet sur un serveur peronnel sans impacté les autres projets que j'avais dèjà mis en place.

![diagram_archi_infra.webp](https://api.axelgodefroy.fr/uploads/diagram_archi_infra_d3321bdf20.webp)

> **📎 Liens utiles**
> [La conteneurisation c'est quoi ?](https://www.redhat.com/fr/topics/cloud-native-apps/what-is-containerization)
> 
> [Headless CMS : Le futur de la gestion du contenu](https://www.sortlist.fr/blog/headless-cms)

## Conclusion

La réalisation de ce projet m'a offert l'opportunité de développer de nouvelles compétences en matière de mise en place d'une architecture de développement moderne. J'ai particulièrement apprécié l'utilisation de CMS headless tels que Strapi, qui a facilité la gestion du site pour mon frère. Grâce à Strapi, j'ai pu proposer une interface de gestion simplifiée pour permettre à mon frère de mettre à jour facilement son site, sans avoir à se préoccuper de la complexité du backend.

La mise en place de l'environnement Docker pour le déploiement du site a été un véritable défi, mais cela m'a permis d'acquérir des compétences essentielles en matière de conteneurisation et de déploiement d'applications modernes.

> **Accès**
> Application terminé mais pour l'instant non public, disponible lors d'un entretien.


Maquette page accueil du site d'architecture

maquette_page_home_archi

Vignette page accueil site d'architecture

large_Aymeric_737970b847.png

medium_Aymeric_737970b847.png

small_Aymeric_737970b847.png

thumbnail_Aymeric_737970b847.png

thumbnail_home_archi_project_thumb

Portfolio Web Architecte

_Travail de groupe :  Mathis A. Erwan L. & Marie M._

## Introduction
Le projet tutoré que nous avons mené durant les semestres S3/S4 avait pour objectif de refaire entièrement le site de l'agence école. Cette association offre des services professionnels à des clients réels, permettant ainsi aux étudiants du DUT MMI de mettre en pratique leurs compétences. Pour répondre aux besoins de l'agence école, nous avons élaboré un site vitrine avec des fonctionnalités de prise de commande et de contact. Cette vitrine offre aux clients de l'agence la possibilité de passer commande pour leur entreprise, tout en présentant les projets réalisés par l'association.

## Conception
Afin de concevoir la maquette du site, nous avons respecté la charte graphique adoptée par les étudiants de notre école. Nous avons choisi d'utiliser un thème sombre pour mettre en valeur les éléments cliquables, tout en ajoutant des couleurs vives qui contrastent avec le fond sombre pour une expérience utilisateur optimale.

## Développement
Pour le développement du site, nous avons fait appel à plusieurs technologies, dont PHP pour le backend. Cette technologie nous a permis de créer un ORM personnalisé, facilitant ainsi la mise à jour des données dynamiques du site et l'envoi des différents formulaires.

Concernant le frontend, nous avons opté pour JavaScript et avons utilisé quelques librairies telles que Slick pour les carrousels des projets et Mapbox JS pour la carte interactive de la page de contact. Notre objectif était de fournir une expérience utilisateur fluide et intuitive pour les visiteurs du site.

> **📎 Liens utiles**
> [Qu'est ce que Mapbox JS ?](https://www.mapbox.com/mapbox-gljs)
> 
> [Intégrer simplement des sliders responsive avec Slick JS](https://kenwheeler.github.io/slick/)
> 
> [Qu'est ce qu'un ORM](https://dev.to/honorablecon/quest-ce-quun-orm--1fne)

## Devops

Nous avons établi une infrastructure de développement opérationnel pour une gestion efficace du site, y compris la mise en place d'un système automatisé d'envoi d'e-mails pour permettre à l'agence école de communiquer avec ses clients de manière professionnelle. En utilisant le protocole FTP, nous avons transféré les fichiers du site sur le serveur distant et les avons mis en ligne pour une diffusion optimale.

L'hébergement web a été choisi en fonction des besoins spécifiques de l'agence école, ce qui a conduit à la sélection d'une solution d'hébergement mutualisé pour garantir une disponibilité du site 24/7. En ce qui concerne la sécurité du site, nous avons mis en place des mesures de protection contre les attaques malveillantes, notamment la protection par mot de passe et le chiffrage SSL. Ces mesures ont été essentielles pour garantir la sécurité et la fiabilité du site. 

## Conclusion
En tant que développeur sur ce projet, j'ai acquis de nombreuses compétences dans la conception et le développement d'un site web professionnel. J'ai notamment pu mettre en place une infrastructure de développement opérationnel, en gérant l'hébergement mutualisé, la sécurisation du site contre les attaques malveillantes et la mise en place d'un système d'envoi d'e-mails automatisé. De plus, l'utilisation d'un ORM personnalisé a été un défi intéressant, qui m'a permis d'approfondir mes connaissances en PHP et en gestion de données dynamiques. Je suis fier d'avoir participé à ce projet qui a permis de répondre aux besoins de l'agence école tout en me permettant d'acquérir de nouvelles compétences dans le développement web.

> **Accès**
> Application accessible à l'adresse suivante : [https://agence-ecole-senart.fr](https://agence-ecole-senart.fr)

Menu

Godefroy
Axel

Mes services

L'Abbaye De Cercanceaux

L'Abbaye De Cercanceaux

Transports Jamet

Transports Jamet

Portfolio Web Architecte

Portfolio Web Architecte

Agence École MMI sénart

Agence École MMI sénart

A propos

Axel Godefroy

🌟 Mes valeurs

🎯 Mon parcours

Menu

GodefroyAxel

Mes services

L'Abbaye De Cercanceaux

L'Abbaye De Cercanceaux

Transports Jamet

Transports Jamet

Portfolio Web Architecte

Portfolio Web Architecte

Agence École MMI sénart

Agence École MMI sénart

A propos

Axel Godefroy

🌟 Mes valeurs

🎯 Mon parcours

Godefroy
Axel