Projet & Missions réalisées
Comme mentionné dans le rapport de lancement, le projet consiste à faire évoluer le site internet de la mairie de Bourg-Saint-Maurice avant de préparer sa migration vers le nouveau CMS.
Évolution visuelle
Amélioration de l'ergonomie et du responsive design sur Typo3 (Campus Alpin, Urbanisme, Sécurité).
Arborescence
Restructuration complète de 167 pages vers la nouvelle architecture préparée pour la migration.
CMS Drupal & Maquettes
Création de maquettes personnalisées et développement de modules spécifiques avec TWIG et YML.
Première phase du projet
La première phase avait pour but d'améliorer l'ergonomie des pages et le responsive design de tout le site internet, ainsi que de mettre à jour du contenu lorsque les services furent demandeurs :
- Le campus alpin
- Le service urbanisme
- La sécurité publique
Contrainte technique
Pour réaliser ces modifications, je me suis familiarisé avec Typo3 afin de modifier le texte, d'ajouter des images, des vidéos, de nouvelles pages etc...
Évolution visuelle ergonomique
Campus Alpin : Avant / Après
AVANT :
APRES :
Service urbanisme : Avant / Après
AVANT :
APRES :
Sécurité publique : Avant / Après
AVANT :
APRES :
Évolution visuelle responsive
Page de présentation de la commune : Avant / Après
Correction du inline-CSS en style plus propre et correction du responsive
AVANT :
APRES :
Deuxième phase : Refonte & CMS Drupal / Structuration de l'arborescence
Après quelques semaines, j'ai commencé la deuxième phase qui a plutôt concerné la prise en main du nouveau CMS Drupal, ainsi que l'organisation de la nouvelle arborescence des pages.
Par ailleurs, j'ai pu assister à une réunion entre Marjorie (la responsable de projet), le service de communication de Bourg-Saint-Maurice et l'agence Absolu (l'entreprise qui va s'occuper de la mise en place et de la migration du site).
En amont, le CCTP leur a été fourni. Il s'agit d'un "Cahier des Clauses Techniques Particulières (CCTP) qui est un document contractuel qui précise les dispositions techniques particulières nécessaires à l'exécution des prestations d'un marché spécifique" deets.gouv.fr.
Lors de la réunion, divers points ont été évoqués concernant le planning du projet :
Avant projet
- L'audit de l'existant, avec ce qui fonctionne et les points d'amélioration à apporter.
- Analyse des besoins des citoyens et des employés de la commune.
- L'arborescence proposée par Luna Web a été relue et vérifiée.
Conception et design
UX (Expérience utilisateur) : Définir les réels besoins, mais aussi profils des citoyens (accès rapide et efficace à l'information sur tout appareil) et des employés (les mêmes besoins auxquels s'ajoutent l'utilisation simplifiée des outils les concernant). Pour cela, création des wireframe (une maquette brouillon de l'interface le plus souvent sans couleurs).
UI (Interface utilisateur) : Il n'y a pas besoin de changement majeur de ce coté.
Accessibilité RGAA : Il s'agit d'un point très important, qui n'est quasiment pas présent sur le site actuellement. Il faut s'assurer que celui-ci soit accessible pour tous. Pour cela il existe un RGAA c'est à dire le "Référentiel général d'amélioration de l'accessibilité".
Stratégie de contenu
- Le contenu écrit, les images, les vidéos etc.. sont déjà présents ou en cours de modification par mes soins.
Développement technique
- La création du thème qui sera utilisé sur Drupal et le développement du front-end (ce qui sera visible par les utilisateurs) et du back-end (l'infrastructure qui fera fonctionner le site).
- La configuration du nouveau CMS (l'intégration du thème, et d'outils / modules pour une utilisation plus simple par le service informatique).
Recettes et tests
- Il est nécessaire de vérifier le fonctionnement global du nouveau CMS de façon avancée (liens cliquables, formulaires, boutons etc).
- Puis il faut s'assurer de l'accessibilité du site de par le RGAA
- Enfin il faut réaliser un audit de sécurité concernant la fiabilité face aux piratages, mais également le RGPD afin de protéger les données des citoyens.
Formation du personnel
Formation des employés de la commune à l'utilisation du nouveau CMS.
Mise en ligne et maintenance
Ceci sera réalisé par l'entreprise Absolu qui reste disponible pour toute éventualité.
J'ai trouvé cette réunion très intéressante même si elle ne concernait pas directement ce que j'allais faire moi car elle m'a permis de comparer et d'approfondir ce que j'ai pu voir en cours, notamment en UEL 202. De plus, j'ai pu me rendre compte comment ce que j'ai appris se concrétise au sein d'une entreprise, que ce soit au niveau de ce plan, mais aussi de la communication entre l'agence et son client.
J'ai également découvert une nouvelle notion concernant le CCTP, qui m'était inconnu.
Deuxième phase : Excel et Drupal
1. Retranscription des pages sur la nouvelle arborescence
Ma tutrice m'a demandé de réaliser un tableau Excel afin de placer/organiser chaque page du site actuel vers la nouvelle arborescence (fournie par Luna Web). Cela m'a pris environ une semaine et demie étant donné le nombre de pages (167) et la difficulté à réfléchir sur la meilleure organisation possible.
Aperçu du tableau :
2. Les maquettes
Maquette standard
- Utilisation des modules présents dans les thèmes gratuits
- Évaluation des limites et restrictions techniques
Maquette personnalisée
- Flexibilité totale
- Base CSS réutilisable pour le site une fois migré
3. Partie technique
Je lui ai proposé ces deux maquettes afin de lui montrer dans un premier temps les restrictions des modules gratuits. Puis en second de lui fournir une base d'exemple de code CSS qui lui permettra de personnaliser de façon simple et rapide les futurs modules.
Voici comment j'ai procédé pour la deuxième maquette : j'ai commencé par regarder les fichiers de code des modules existants afin de pouvoir reprendre des éléments et voir ce que j'allais devoir créer. Le langage TWIG m'était familier puisque je l'avais déjà étudié en cours. Mais j'ai pu davantage le pratiquer. Au contraire, le langage YML m'était totalement nouveau, mais je n'ai pas eu besoin de beaucoup de temps pour le comprendre, car il est plutôt simple d'utilisation pour ce dont j'avais besoin.
J'ai principalement créé les champs voulus par dessus ce qui existait déjà, pour cela j'ai ajouté un champ permettant d'ajouter une classe personnalisée à l'élément, afin d'avoir une personnalisation complète via le CSS.
Aperçu visuel
Le développement
J'ai également créé un module pour construire une div, afin d'y glisser les éléments souhaités à l'intérieur. Il possède lui aussi un champ pour ajouter une classe personnalisée, mais il contient une zone de drag and drop (glisser déposer), afin d'y déposer les éléments.
Aperçu visuel
Le développement
Une fois terminé, j'ai présenté le résultat à Marjorie, qui a apprécié les personnalisations apportées et qui va s'en servir pour le futur site.
Planning
Phase 1: Découverte & Initialisation
S1: Intégration
- Découverte et présentation aux collègues (cf : rapport de lancement). Explication globale du déroulé du projet.
- Prise en main de Typo3 et première modification sur le site.
Découverte des locaux du service informatique et de l'agence AB Tourisme dans le même bâtiment.
S2: Coordination
- Modification du contenu des pages du site actuel, selon les demandes des services (urbanisme / campus alpin)
- Réunion avec l'agence Absolu (décrite ci-dessus)
Phase 2: Analyse et développement
S3: Communication
- Explication des besoins et projets du service informatique aux nouveaux élus par l'équipe.
- Poursuite des modifications (Urbanisme / Campus Alpin).
- Introduction au CMS Drupal.
S4: Audit responsive
- Finalisation des modifications des pages des services.
- Audit complet et travail sur le responsive global de l'ensemble du site.
S5: Arborescence
- Travail sur Excel : retranscription des pages sur la nouvelle arborescence.
- Retard de l'agence sur le projet, concentration sur la rédaction des rapports.
Bonne avancée sur le tableau Excel de la nouvelle arborescence malgré les retards.
Phase 3: Déploiement
S6-8: Contenu
- Travail sur Drupal
- Mise à jour du contenu des pages du service de la sécurité publique et autres...
Analyse du travail réalisé
Points positifs
Partie technique
- Dans la première partie du stage j'ai principalement travaillé avec des choses que je connaissais, comme les divers langages HTML et CSS.
- Bonne adaptation et prise en main de Typo3.
- J'ai aimé apprendre un nouveau langage, en approfondir un autre, tout en découvrant un nouveau CMS.
Expérience profressionnelle
- J'ai apprécié le côté concret de la réunion avec l'agence Absolu.
- J’ai réussi à prendre l’initiative (ce qui est pour moi plutot compliqué) de faire une deuxième maquette, parce que je trouvais ça un peu dommage de s’arrêter là sans avoir réellement pu avoir fait une maquette plus personnalisée.
Points d'amélioration
Défis techniques
- Quelques difficultés avec le fonctionnement et l'organisation de Typo3. Le CSS et le HTML doivent se faire au même endroit, donc le code peut facilement se mélanger. Or je n'ai pas eu le choix, car le CSS original du site n'est pas accessible ni modifiable.
- J'ai séparé les deux langages et ajouté des commentaires d'explication. De plus je devais prendre en compte le fait que les autres membres du service informatique devaient pouvoir modifier simplement ce que je venais de réaliser.
- Découvrir Drupal m'a pris du temps, car c'était nouveau pour moi mais j'ai aussi dû travailler sur une machine virtuelle, afin que les autres membres du service puissent y accéder.
Compétences supplémentaires
- La création du tableau Excel fut longue et répétitive. Connaitre davantage Excel et ses formules aurait potentiellement pu m'aider à être plus efficace. Néanmoins ce tableau est très utile et après l'avoir terminé j'en suis satisfait.
- Enfin, expliquer le fonctionnement de Drupal et présenter mon travail n'a pas été forcément simple pour moi car je ne suis pas très à l'aise pour m'exprimer à l'oral. Mais cela me permet de travailler ce point, afin de m'améliorer.
Bilan personnel
Découverte de la vie municipale
Ce stage a été une bonne expérience au sein de la vie d'une mairie. De plus, pendant mon stage, la commune était en plein changement de maire et j'ai pu notamment assister au pot de l'ancien maire et à la visite des nouveaux élus. J'ai trouvé intéressante la vie d'une ville et de ses différents services.
Un stage différent mais complémentaire
Ce stage de deuxième année a été complètement différent de celui de l'année passée, car il était concentré sur un objectif principal, à savoir la refonte et migration du site web. Lors de mon stage à l'hopital j'avais découvert une grande variété de tâches différentes tout en travaillant en équipe. Quant à cette année, je me suis consacré à des missions plus restrictives, mais j'ai pu approfondir et mettre en pratique des choses que je connaissais déjà. Pour autant, je ne me suis pas trouvé limité dans mes actions et j'ai pu apprécier ces deux mois.
L'application concrète de mes connaissances
J'ai aimé pouvoir observer et appliquer concrètement ce que j'ai vu dans mes cours comme lors de la réunion avec l'agence Absolu et l'amélioration du site web.
J'ai également pu travailler sur deux CMS que je ne connaissais pas, ce qui m'a permis de m'ouvrir à cette manière de faire un site web. En effet, personnellement, je préfère coder une page de A à Z, car j'ai l'impression d'être plus libre ainsi. Cependant, je sais maintenant que si les CMS peuvent paraitre limitants, il suffit de creuser et fouiller afin de personnaliser un site comme je le souhaite. Dans le même temps, j'ai découvert un nouveau langage et j'en ai approfondi d'autres.
Mes axes de progression
Malgré tout, je sens qu'il me reste beaucoup à apprendre pour être plus efficace et rapide mais aussi dans les langages utilisés et dans ma communication avec une équipe et une hiérarchie.
Mon apport au sein des services
Enfin, j'ai pu me sentir utile directement auprès des services qui m'ont fait leurs demandes tout en proposant une vision un peu plus d'actualité sans toutefois en faire trop. J'ai aussi réussi à prendre des initiatives dans mon travail avec mon tuteur de stage.