Allez & Cie
15 avril 2023
Le plus gros projet que j’ai effectué pendant ce stage de trois mois a été de faire un site entier à partir d’une maquette. Allez & Cie est un expert en performance énergétique, ils aménagent des bâtiments afin de réduire leurs dépenses énergétiques.
En effet, à travers ce long projet, j’ai eu plusieurs missions sous forme d’étapes que je vais vous détailler ci-dessous :
– Analyse de la maquette sur Figma (logiciel de design)
– Setup/paramétrage du site web
– Création des menus
– Création des différentes pages à partir du design de la maquette
– Ajout d’objets dynamiques
– Responsive Design
– Politique de cookie
– Vérification du site par le maître de stage
En effet, à travers ce long projet, j’ai eu plusieurs missions sous forme d’étapes que je vais vous détailler ci-dessous :
– Analyse de la maquette sur Figma (logiciel de design)
– Setup/paramétrage du site web
– Création des menus
– Création des différentes pages à partir du design de la maquette
– Ajout d’objets dynamiques
– Responsive Design
– Politique de cookie
– Vérification du site par le maître de stage
Analyse :
Avant de me lancer dans la création du site, j’ai analysé la maquette dans son entièreté, c’est à dire chaque page avec ses divers éléments sur celles-ci ainsi que les menus « header » et « footer ».
Cette étape est l’une des plus importantes. Elle m’a permis de voir où j’aurais potentiellement des problèmes dans la réalisation et donc de pouvoir poser à mon maître de stage diverses questions avant de me lancer. Si toutefois d’autres problèmes arrivaient plus tard, j’essayais dans un premier temps de les régler en réfléchissant seul, ou en m’aidant d’internet en recherchant les solutions (Wordpress est énormément développé au niveau communautaire et ressources) sinon Quentin était là pour résoudre le problème.
Avant de me lancer dans la création du site, j’ai analysé la maquette dans son entièreté, c’est à dire chaque page avec ses divers éléments sur celles-ci ainsi que les menus « header » et « footer ».
Cette étape est l’une des plus importantes. Elle m’a permis de voir où j’aurais potentiellement des problèmes dans la réalisation et donc de pouvoir poser à mon maître de stage diverses questions avant de me lancer. Si toutefois d’autres problèmes arrivaient plus tard, j’essayais dans un premier temps de les régler en réfléchissant seul, ou en m’aidant d’internet en recherchant les solutions (Wordpress est énormément développé au niveau communautaire et ressources) sinon Quentin était là pour résoudre le problème.
Setup :
Après que Wordpress soit installé sur l’hébergeur, sur le bon nom de domaine, il faut commencer par paramétrer le plus de choses possibles pour gagner du temps plus tard.
Après que Wordpress soit installé sur l’hébergeur, sur le bon nom de domaine, il faut commencer par paramétrer le plus de choses possibles pour gagner du temps plus tard.
Dans un premier temps, on va installer les extensions principales et le thème. Pour les extensions de base, j’ai utilisé Elementor pro qui est l’extension la plus connu pour faciliter le design des pages et CPT UI qui permet de créer des objets dynamiques (ici des services). Et pour le thème (fonctionnalités du panneau administrateur), le thème Astra/Astra Child (pour des modifications en PHP) est l’un des plus connu et donc une valeur sûre.
Dans un deuxième temps, il faut paramétrer les typographies et les couleurs afin de les centraliser. Cela permet de les utiliser plus facilement mais aussi, en cas de changement, de pouvoir remplacer une couleur ou une typographie en quelques clics et de gagner beaucoup de temps.
Pour finir, on réalise la création des pages et des menus que l’on utilisera plus tard.
Après que Wordpress soit installé sur l’hébergeur, sur le bon nom de domaine, il faut commencer par paramétrer le plus de choses possibles pour gagner du temps plus tard.
Après que Wordpress soit installé sur l’hébergeur, sur le bon nom de domaine, il faut commencer par paramétrer le plus de choses possibles pour gagner du temps plus tard.
Dans un premier temps, on va installer les extensions principales et le thème. Pour les extensions de base, j’ai utilisé Elementor pro qui est l’extension la plus connu pour faciliter le design des pages et CPT UI qui permet de créer des objets dynamiques (ici des services). Et pour le thème (fonctionnalités du panneau administrateur), le thème Astra/Astra Child (pour des modifications en PHP) est l’un des plus connu et donc une valeur sûre.
Dans un deuxième temps, il faut paramétrer les typographies et les couleurs afin de les centraliser. Cela permet de les utiliser plus facilement mais aussi, en cas de changement, de pouvoir remplacer une couleur ou une typographie en quelques clics et de gagner beaucoup de temps.
Pour finir, on réalise la création des pages et des menus que l’on utilisera plus tard.
Design des pages :
J’ai commencé la création du site avec le design du header (en-tête de page) pour pouvoir avoir le menu déjà opérationnel. J’ai continué avec le design de la page d’accueil puis avec les différentes pages du site. Mon maître de stage était là si j’avais besoin d’aide pour la création des différents éléments. Tout au long du projet il a supervisé mon travail et m’a donné des conseils ou des éléments à modifier. Je suis donc repassé plusieurs fois sur chaque page pour les rendre conformes à la maquette. Cette étape a été la plus longue mais la plus intéressante du projet. On sous-estime toujours le temps de travail sur chaque page notamment à cause des problèmes que l’on peut rencontrer.
Pendant la création du design des pages, j’ai dû faire de l’optimisation pour rendre le site plus rapide (cela participe à la partie du référencement du site web), comme par exemple optimiser les images grâce à Photoshop afin qu’elles soient moins lourdes ou, essayer de créer le moins de containers/section (selon la technologie Elementor utilisé) car ils participent à la création de « Div » et ralentissent le site (il y plus d’éléments).
J’ai commencé la création du site avec le design du header (en-tête de page) pour pouvoir avoir le menu déjà opérationnel. J’ai continué avec le design de la page d’accueil puis avec les différentes pages du site. Mon maître de stage était là si j’avais besoin d’aide pour la création des différents éléments. Tout au long du projet il a supervisé mon travail et m’a donné des conseils ou des éléments à modifier. Je suis donc repassé plusieurs fois sur chaque page pour les rendre conformes à la maquette. Cette étape a été la plus longue mais la plus intéressante du projet. On sous-estime toujours le temps de travail sur chaque page notamment à cause des problèmes que l’on peut rencontrer.
Pendant la création du design des pages, j’ai dû faire de l’optimisation pour rendre le site plus rapide (cela participe à la partie du référencement du site web), comme par exemple optimiser les images grâce à Photoshop afin qu’elles soient moins lourdes ou, essayer de créer le moins de containers/section (selon la technologie Elementor utilisé) car ils participent à la création de « Div » et ralentissent le site (il y plus d’éléments).
Les objets dynamiques :
Les derniers éléments que j’ai rajoutés sur sur ce projet sont les services. Pourquoi utiliser des objets dynamiques pour les services ?
Les objets dynamiques sont des pages qu’on ajoutes au fil du temps (les articles) et qui grâce à des modules dynamiques comme Loop Grid( Elementor) permettent de les afficher avec des filtres comme du plus ou moins récent, par éléments, etc. Et si on ajoute un article, il s’affichera automatiquement.
Dans ce projet, j’ai utilisé les objets dynamiques sur la page d’accueil pour que l’on puisse voir les différents services mais aussi sur la page « Services » afin de pouvoir voir les autres services proposés en excluant celui sur lequel on est.
Ce module Elementor agit comme un modèle dynamique et donc si on ajoute un produit, il se met automatiquement à jour.
Les derniers éléments que j’ai rajoutés sur sur ce projet sont les services. Pourquoi utiliser des objets dynamiques pour les services ?
Les objets dynamiques sont des pages qu’on ajoutes au fil du temps (les articles) et qui grâce à des modules dynamiques comme Loop Grid( Elementor) permettent de les afficher avec des filtres comme du plus ou moins récent, par éléments, etc. Et si on ajoute un article, il s’affichera automatiquement.
Dans ce projet, j’ai utilisé les objets dynamiques sur la page d’accueil pour que l’on puisse voir les différents services mais aussi sur la page « Services » afin de pouvoir voir les autres services proposés en excluant celui sur lequel on est.
Ce module Elementor agit comme un modèle dynamique et donc si on ajoute un produit, il se met automatiquement à jour.
Responsive design (adaptation du site au format tablette / portable) :
C’est l’une des parties les plus importantes et aujourd’hui énormément négligée par les entreprises mais elle est importante pour deux raisons :
– si le responsive n’est pas fait, le site peut être sanctionné par Google au niveau du référencement naturel (SEO), c’est à dire qu’il est moins mis en avant sur Google.
– Sur un ordinateur, on veut que le site soit fonctionnel, beau (UI) et facile d’utilisation pour les visiteurs (UX). C’est la même chose sur un téléphone et une tablette. Si un site ne fonctionne pas, n’est pas beau ou pas facile d’utilisation, les visiteurs auront tendance à fuir le site en question.
C’est l’une des parties les plus importantes et aujourd’hui énormément négligée par les entreprises mais elle est importante pour deux raisons :
– si le responsive n’est pas fait, le site peut être sanctionné par Google au niveau du référencement naturel (SEO), c’est à dire qu’il est moins mis en avant sur Google.
– Sur un ordinateur, on veut que le site soit fonctionnel, beau (UI) et facile d’utilisation pour les visiteurs (UX). C’est la même chose sur un téléphone et une tablette. Si un site ne fonctionne pas, n’est pas beau ou pas facile d’utilisation, les visiteurs auront tendance à fuir le site en question.
Politique de cookies :
J’ai dû mettre en place une bannière de cookies afin de montrer aux visiteurs les données que le site récupère. Ils sont en droit d’accepter ou non cette politique, mais cela peut amener à des restrictions dans l’accès à certaines pages du sites Cette étape est obligatoire avec le RGPD (Règlement Général sur la Protection des Données) qui est une directive européenne qui s’impose depuis quelques années et il est donc nécessaire de prévenir le visiteur avec une bannière sinon des sanctions peuvent être prises par la CNIL (Commission Nationale Informatique et Liberté) notamment.
J’ai dû mettre en place une bannière de cookies afin de montrer aux visiteurs les données que le site récupère. Ils sont en droit d’accepter ou non cette politique, mais cela peut amener à des restrictions dans l’accès à certaines pages du sites Cette étape est obligatoire avec le RGPD (Règlement Général sur la Protection des Données) qui est une directive européenne qui s’impose depuis quelques années et il est donc nécessaire de prévenir le visiteur avec une bannière sinon des sanctions peuvent être prises par la CNIL (Commission Nationale Informatique et Liberté) notamment.
Vérification :
Quand j’ai eu fini le site, mon maître de stage l’a regardé le site et testé entièrement et notamment au niveau des boutons (liens), du design et des fonctionnalités. Après la modification de quelques éléments, il me l’a validé et l’a fait valider par le client. Une fois ce contrôle effectué par le client, le site est envoyé à une autre personne de l’entreprise pour faire du SEO (référencement naturelle). Cette étape correspond à mettre en place diverses stratégies de mots clés et d’optimisations des textes pour que le site soit mis en avant dans les recherches de Google.
Quand j’ai eu fini le site, mon maître de stage l’a regardé le site et testé entièrement et notamment au niveau des boutons (liens), du design et des fonctionnalités. Après la modification de quelques éléments, il me l’a validé et l’a fait valider par le client. Une fois ce contrôle effectué par le client, le site est envoyé à une autre personne de l’entreprise pour faire du SEO (référencement naturelle). Cette étape correspond à mettre en place diverses stratégies de mots clés et d’optimisations des textes pour que le site soit mis en avant dans les recherches de Google.
