# README - ennery.fr/
## 1. Construction du site
Le site est en production depuis février 2025. Il y a évolué et ce document est nécessaire pour structurer son évolution... et accéder facilement aux endroits du code qui vont bien.
### a. Paramètre généreaux dans le dashboard
Dans l'onglet Divi / Options du Thème du dashboard se trouve quelques éléments intéressant comme les couleurs utilisées pour le site :
- blanc : #ffffff
- noir : #000000
- blanc cassé : #f2f2f2 (pour les fonds de couleurs et distinguer deux blocs).
- gris : #666666 (pour la couleur de police)
- bleu : #0C71C3 (pour le fond du pied de plage, les liens visible, ... couleur générale)
- jaune : #ffc300 (pour un survol de lien ou de bouton).
Le bleu et le jaune font référence au blason de la commune.
En premier lieu le CSS personnalisé permet de définir la police d'écriture de manière générale : texte simple, texte lien, texte lien survolé. Pour plus de cohérence sur l'ensemble du site avec les balises p, h2 et li (liste désordonnée).
Il y a une partie qui décrit le comportement de balises utilisé sur la page des partenaires (amené à disparaitre). C'est doinc du futur code mort.
La partie du planning du samedi est un bloc rajouté pour alerté sur les horaires et date d'ouverture du samedi matin. Comme cela est amené à changer régulièrement et que l'information est affiché ) plusieurs endroits, une seule source avec une pop-up est une solution plus élégante.
Dans l'onglet Intégration se trouve le code javascript utilisé pour le site.
Il y a deux fonctions de présentent. Le premier concerne la gestion du planning avec notamment les dates à afficher (dans le body) et l'appel des fonctions (dans le head).
La deuxième fonctions permet d'afficher des articles à la même hauteur malgré des commentaires de longueurs différentes (il est nécessaires de rajouter une balise dans les articles concernés sur la page du site souhaité).
### b. Paramètre généreaux sur les pages de sites
Des outils sont disponibles pour ajouter des éléments de manière à être cohérent avec l'existant. En fonction de l'action d'ajout, voici comment rajouter :
1. Les boutons : Il y a un bouton générique ainsi que 5 boutons spécifiques qui existent en fonction de l'action voulu :
- Télécharger un document disponible sur le site
- Visualiser un docuement disponible depuis le site
- Consulter une page du site
- Appeler le numéro de téléphone affiché
- Envoyer un mail à l'adresse indiquée
Chaque types de bouton à une icone particulière, mais tous ont une structure commune : border de 2px, radius de 40px, border et texte en bleu, fond et blanc et en cas de survol fond et border en jaune avec texte en bleu (et icone).
L'ajout se fait plus facilement : ajouter un bouton et dans la pop-up de caractéristique, séléctionner l'action qui convient (visualiser, télécharger, téléphone, mail, ...).
2. Les bascules : les bascules est un contenu permettant d'afficher un titer puis son détail après le clic de l'utilisateur.
Il y a deux types de bascules : la première spécifique à la page Ennery Info et la description générale.
3. Les liens : par constructions et afin de faciliter l'accessibilité. Un lien s'écrit avec un texte en gras, bleu, surligné et suivi d'une icone pour suggérer l'action :
<i class="material-symbols-outlined link_ennery">phone_enabled</i>
<i class="material-symbols-outlined link_ennery">cloud_download</i>
<i class="material-symbols-outlined link_ennery" >open_in_new</i>
<i class="material-symbols-outlined link_ennery">mail</i>
Lorsque le texte est survolé, les élèments passent en jaune. Ce sont des paramètres généreaux qui peuvent être modifié sur la page pour répondre à une spécificité (menu, fond de couleur, ...)
## 2. Reste à faire
1. Passer les images au webP pour alléger le poids des images.
2. Enregistrer toutes les images avec une description
3. Faire une belle page de présentation pour mettre en avant les évènements et articles
4. Ajouter le bloc divi pour la gestion des évènements "mineurs" (passage des poubelles, matchs associations, food-truck).
5. Ajout d'une page civisme
6. Ajout d'une page sur l'histoire des noms de rues
7. Structuration des pages sur l'environnement
8. Structuration des pages sur l'urbanisme (question réponse notamment).
## 3. Ajout de page
Une page commende traditionnellement par une image de header, le blason de la commune, un titre.
Les accès rapides dans ce header a été supprimé.
Un titre de bloc est préféréable.
## 4. Ajout d'article
La fin de la 3ème page d'accueil doit permettre de rendre la place des article splus importants (avec notamment un historique).
## 5. Ajout d'évènements
## 6. Ajout contenu multimédia
Chaque fichier multimédia peut contenir un texte alternatif (en cas d'incapacité à afficher l'image), un titre, une légende et une description.
Le texte alternatif est une description exhaustive de l'image qui sera lu si l'image ne sera pas chargé ou par accésibilité (public mal voyant par ex).
La légende sera utilisé en cas d'ajout d'une légende sur la page.
Le titre est utilisé lors du survol du document.
La description (à confirmer) permet de faciliter la recherche des documents. C'est pourquoi avoir une régle appliqué avec beaucoup de discipline est important.
Pour la description, voici les régles d'écriture. Définir le type d'usage (PAGE, EVENT, ARTICLE).
Pour PAGE, ajouter le page concernée, ou GLOBAL si plusieurs usages, mettre HEADER pour les images de Didier MASSE, puis une description de l'image.
POUR EVENT et ARTICLE, rajouter l'année et une description de l'image ou de l'article.
Pour les documents (PDF), la règle s'apprécie de la manière suivante :
Pour la partie documentation, DOCUMENTATION - PAGE - une description.
Pour un document qui doit se trouver sur une page : PAGE - description et pour un article ou événement : EVENT (ARTICLE) - description.
