La mairie de Graissessac

Exemple de réalisation récente : le site officiel de la mairie de Graissessac (34).

L’équipe municipale élue en 2020 s’y était engagé : la commune avait besoin de se doter d’un nouveau site pour faciliter la communication avec ses habitants .

C’est chose faite avec l’aide de Technologie Web.

Le site précédent après de longues années de loyaux services était en fin de carrière :

  • pas conçu pour les mobiles donc peu ergonomique sur smartphones et tablettes.
  • codé directement en HTML donc trop technique à tenir à jour pour qui n’aime pas éditer du code via une connexion FTP
  • hébergé sans certificat SSL à une adresse de page perso Orange qui pouvait faire douter de son sérieux.

Refonte WordPress

Après recueil du besoin une configuration a pu être assemblée qui réponde aux souhaits de l’équipe municipale :

  • Actualités en bonne place pour communiquer, en complément des affichages municipaux, les informations importantes (mesures de confinement) ou utiles (collectes de vêtement, travaux sur la commune, pièges à frelons)
  • Système d’agenda propre à la commune : permet d’annoncer les événements exceptionnels (célébrations, fêtes, randonnées) mais aussi plus courants (jours de marché, ouverture bibliothèque)
  • Une part belle aux photos, dès la page d’accueil : la faune, la flore et les paysages environnants étant exceptionnels, et plusieurs administrés doués en photographie, ce serait dommage de s’en priver
Boutons d’accès rapide
  • Un site pratique.
    Avec 4 accès rapides, dès la page d’accueil : ainsi les internautes pressés qui sont là pour règler la cantine ne perdent pas de temps.
  • Infos pratiques : horaires de la mairie, liste des associations de la commune, transport scolaires, horaires de l’école, de la garderie, de la déchetterie… tout est là. Le site redirige lorsque possible vers la communauté des communes, la régie des transports départementaux, l’office de tourisme afin de garantir au mieux la fiabilité des informations plutôt que de les copier-coller !
  • Des formulaires de réservation : il est désormais possible de faire sa demande de réservation en ligne : la mairie gère en effet plusieurs gîtes communaux, ainsi que des salles qu’il est possible de louer. Dans les 2 cas des formulaires avancés permettent de recueillir les coordonnées complètes ainsi que les dates souhaitées
  • Beaucoup de contenu : que ce soit pour son patrimoine historique, ses musées ou ses sentiers de randonnée, le village a des informations à mettre en ligne : c’est chose faite, sous forme de pages et sous-pages mises en forme avec Gutenberg, l’outil d’édition intégré à WordPress.

La prise en main

Tout comme un véhicule, un site Internet a besoin de quelqu’un aux manettes, autrement il n’est que décoratif, et prend rapidement la poussière.

Sur chaque projet mené par Technologie Web est intégrée une partie formation, afin de permettre au client de prendre en main son nouveau site.

Le mode d’emploi fourni imprimé ou au format pdf, adapté sur mesure au projet, sert de support de formation, en présentiel ou distanciel.

Culture gé : le piège du fil à couper le beurre

Ce piège, c’est la tentation de réinventer ce qui existe déjà.

C’est valable en informatique en général, ça l’est encore plus en matière de création de site web.

Ainsi, si un projet de site nécessite par exemple un système de calendrier pour gérer des événements, il est très vraisemblable que d’autres projets ont déjà eu le même besoin, et qu’une solution a été trouvée, testée, validée, améliorée, tenue à jour.

Le conseil le plus professionnel qui puisse être donné dans une telle situation est bien entendu d’utiliser en priorité cette solution, et de ne surtout pas se lancer bille en tête dans le développement d’un système sur mesure : ce sera coûteux – en temps et/ou en argent – et aboutirait à la glorieuse réinvention du fil à couper le beurre, puisque le nécessaire existe déjà, et probablement en mieux après plusieurs d’années de validation et amélioration.

Bref, le développement from scratch de nouvelles fonctionnalités est à éviter : vérifier d’abord, plutôt 3 fois qu’une, que le nécessaire n’est pas déjà disponible.

Dans le vaste monde de WordPress, la foule d’extensions disponibles fait que, sauf besoin vraiment très particulier, un plugin ou une combinaison de plugins peut sûrement résoudre la problèmatique.

Dans ces cas-là, la prestation de Technologie Web va consister à trouver les modules adaptés, à les installer, les configurer puis s’assurer que les fonctionnalités sont opérationnelles et s’intègrent à l’identité graphique du projet.

Exemple de réalisation : Carrefour des Sciences et des Arts

carrefour-sciences-arts.org : Aperçu de la page d’accueil

L’association “Carrefour des Sciences et des Arts” existe depuis 1994, et possède comme il se doit un site Internet depuis un bon moment.
En 2020 l’heure de la refonte du site a sonné, car le web change vite, et qu’il manquait au site quelques outils à sa panoplie :

  • Adaptativité aux supports mobiles,
  • Système de calendrier pratique pour les internautes et l’équipe de l’association
  • Optimisation pour les réseaux sociaux
  • Relooking graphique : mise en avant d’images

En partenariat avec le studio graphique Leturcq (46 Cahors) qui s’est chargé de l’identité graphique de l’association, l’entreprise Technologie web s’est chargé de la mise en oeuvre du projet.

Si le résultat de la refonte est une réussite, c’est le fruit d’un travail d’équipe :

  • L’association a su exprimer son besoin clairement, ce qui a pu se traduire en une liste de fonctionnalités.
  • Le cahier des charges correspondant a pu être traduit en une configuration [WordPress + extensions] stable, pratique à gérer, grâce à l’écosystème de plugins logiciels existant autour du CMS WP
  • Une fois le site au point sur un serveur de développement (voir + bas), une formation a pu avoir lieu pour que les membres de l’association comprennent le fonctionnement du nouveau site, et puissent s’approprier ce nouvel outil de communication
  • Enfin, une fois le nouveau site lancé, l’asso a su s’investir dans sa gestion : mise en ligne d’actus, tenue à jour du calendrier des activités, et bel effort au niveau de l’iconographie : chaque contenu s’accompagne d’images à la fois pertinentes et splendides, ce qui est un réel plus pour les jeunes publics auxquels s’adressent les contenus.
  • le tout se fait en articulation étroite avec des comptes sur les réseaux sociaux grand public, et des newsletters bien rédigées, via la plateforme Sendinblue.

La bataille du spam

Formulaire d’inscription “Douple opt in” à la newsletter

Tout formulaire en ligne se retrouve inondé de spam par des robots qui ont plein de bons plans à proposer et …sont de plus en plus doués pour franchir les captcha et autres mécanismes anti-spam !

En complément d’un captcha, le site a été équipé d’une inscription à la newsletter en deux temps (“double opt in“) : un email demandant confirmation est envoyé à tout nouvel inscrit.

Budget maîtrisé : le bon thème, et du code CSS

Si au final le résultat est sur mesure et que le budget est raisonnable, c’est grâce à la richesse des thèmes WordPress existants : qu’il soient gratuits ou non, la mise au point du projet consiste à opter pour un thème respectant “l’esprit graphique” recherché. Si ce choix est judicieux, alors une fois les couleurs et le logo en place, une première percée est faite vers le résultat final. On peut alors passer aux détails, en ajustant sur mesure, via du code CSS intégré au thème, les aspects graphiques souhaités.

Exemple d’ajustement CSS sur mesure pour le Carrefour des Sciences et des Arts : mini-barre flottante à droite

Culture gé’ : qu’est-ce qu’un
serveur de dév” ?

Un serveur de développement, plus familièrement appelé “dév” (aucun lien avec le chanteur de Vanina-a-aaaa), est un lieu sur Internet qui va permettre de construire un futur site ailleurs qu’à son emplacement final, ce qui offre un certain nombre d’avantages :

  • le site précédent, peut rester en place le temps qu’il faudra, jusqu’à ce que le nouveau soit au point.
  • ça évite de laisser un panneau “en travaux” durant plusieurs mois, ce qui finit par être inquiétant et écroule totalement un bon référencement.
  • c’est consultable en ligne, même si c’est à une adresse improbable, donc on peut tester, échanger, collaborer.
  • Le “dév” peut se loger quelque part sur votre nom de domaine, ex: mondomaine.fr/nouveausite/ ou encore sur celui du prestataire technique.

Savoir refondre son site

Que ce soit pour une association ou une entreprise, un site internet c’est comme un véhicule pro : ça se renouvelle de temps en temps si on veut que ça continue à faire pro !
En l’occurrence il n’y a pas d’usure mécanique des pièces, mais l’usure logicielle est une réalité : certains systèmes tiers modifient leur conditions d’utilisation, certains outils cessent d’être supportés par les hébergeurs en raison de leur obsolescence, enfin dans le code d’un site vieillissant peuvent apparaître des failles de sécurité… Ne gardez pas indéfiniment votre “site Windows XP” même si vous y êtes attaché !

Si vous pensez être concerné, n’hésitez pas à nous contacter pour toute question :

Exemple de réalisation : UPTC

L’association UPTC ( Université Pour Tous Cahors ) souhaitait un site clair et pratique, qui puisse être mis à jour aisément, afin de présenter ses activités, ses actualités, les événements qu’elle organise ; et répondre aux questions les plus courantes de ses adhérents et sympathisants.

Le budget devait rester dans les limites qui sont celles d’une jeune association.

Continuer la lecture de Exemple de réalisation : UPTC

Exemple de réalisation: www.ep46.fr

Le site de l’association Etre Parent 46 a été mis au point avec le système de gestion de contenu WordPress, afin de répondre au besoin des deux membres fondateurs de cette jeune association :

  • Pouvoir communiquer en ligne en toute autonomie avec leurs adhérents.
  • Plus spécifiquement, pouvoir héberger en ligne de longs articles, en complément de leur page Facebook très vivante.
  • Disposer d’un outil de mise en forme ergonomique et puissant pour leurs publications.
  • Rester dans une fourchette de budget à leur portée.

Continuer la lecture de Exemple de réalisation: www.ep46.fr

Exemple de réalisation : www.oleasolutions.fr

OLEA Solutions - capture d'écranLe site OLEA Solutions ( www.oleasolutions.fr ) a été mis en place en juin 2015.

L’entreprise OLEA Solutions propose à ses clients du conseil, de la gestion et de l’assistance pour leurs progiciels. Elle souhaitait un site qui lui permette à la fois de présenter ses services, tout en proposant à ses clients réguliers un accès à des ressources privées : une base de données regroupant conseils et techniques, ainsi qu’une page réservée. Continuer la lecture de Exemple de réalisation : www.oleasolutions.fr