Site web

Laboratoire DAVID

Miniature du projet
Icone représentant l'état du projet

Terminé


Langues :

Français Anglais

Début du projet :

01/04/2025

Fin du projet :

23/06/2025

Langages

t HTML

u CSS

K-SUP

Hugo

Equipe

Matthieu FARANDJIS

Karine ZEITOUNI

DSI de l'UVSQ

Direction du labo DAVID

Webmaster de l'UVSQ

plus

Présentation

Exemple d'utilisation de K-SUP.

J’ai réalisé mon stage de troisième année de B.U.T. Informatique au sein du laboratoire DAVID (« Données et Algorithmes pour une Ville Intelligente et Durable ») de l’UVSQ.
Le laboratoire DAVID est un laboratoire en informatique hébergé au sein du campus des Sciences de l’UVSQ, situé à Versailles.
J’étais chargé de mettre en place un nouveau site web pour le laboratoire avec K-SUP, et un nouveau site pour les pages personnelles des membres avec Hugo.
J’ai procédé par différentes étapes : étude des solutions, création et tests. J’ai également échangé avec d’autres collègues pour mener à bien le projet. Cette expérience a été très enrichissante.
J’ai appris à utiliser un CMS : K-SUP, à créer un site web composé de pages Markdown grâce à Hugo, et j’ai pu travailler sur mes compétences en communication orale.
Je suis très heureux d’avoir effectué mon dernier stage de BUT Informatique au sein du laboratoire DAVID. Cette expérience m’a fait découvrir le monde de la recherche en informatique. J’ai pu connaître leur fonctionnement, comprendre leurs enjeux et leurs besoins.
Avec le soutien de ma maître de stage, de la DSI, de la webmaster de l’UVSQ, j’ai su utiliser mes compétences comme tremplin pour faire de nouvelles choses.

Cette page web est fondée sur mon rapport et mon diaporama de stage, qui ont été lus et validés par ma maître de stage.

Laboratoire DAVID

Le bâtiment de où se trouve le laboratoire.

Le laboratoire DAVID (« Données et Algorithmes pour une Ville Intelligente et Durable ») de l’UVSQ est une équipe d'Accueil (7431) créé en juillet 2015 est un laboratoire d'Informatique de l'UFR des Sciences de l'université de Versailles Saint-Quentin-en-Yvelines.

S'appuyant sur l'expertise de trois équipes de recherche, dont l'une commune avec Inria Saclay, le laboratoire mène un projet scientifique alliant des activités de recherche concernant les données et les algorithmes, avec un domaine d'application majeur, la ville intelligente et durable.
Une de ses caractéristiques est un forte interdisciplinarité, en particulier avec les Sciences Humaines et Sociales au sein de la fédération SIHS du CNRS.
Le laboratoire DAVID succède au laboratoire PRiSM.

Présentation du travail accompli

Mon stage au laboratoire DAVID avait pour objectif de gérer et d’améliorer le site web du laboratoire, indispensable pour sa visibilité et la présentation des travaux de ses membres.
À mon arrivée, le site existant sous WordPress était en panne, avec des erreurs lors de l’accès aux pages et à phpMyAdmin, dues à un manque d’espace mémoire nécessaire au bon fonctionnement de la base de données.
La DSI a procédé à une réparation en nettoyant la base de données, mais cela a entraîné certaines pertes : la bannière a disparu, plusieurs liens sont devenus inactifs et certaines pages généraient des erreurs au chargement, ce qui a affecté la lisibilité et la fonctionnalité du site.

Après analyse, trois solutions ont été envisagées pour résoudre ces problèmes :

• Maintenir le site existant en corrigeant les problèmes, en achetant les licences nécessaires et en ajoutant les fonctionnalités manquantes, notamment le multi-site pour séparer le site principal des pages des membres.
• Créer un tout nouveau site WordPress, en conservant la même technologie mais en recommençant à zéro pour bénéficier d’une structure plus propre.
• Créer un site web avec une autre technologie, plus moderne et stable, qui serait facile à maintenir et sécurisée pour le laboratoire et ses membres.


La première solution a été écartée par la DSI en raison de la complexité de maintenance et des risques liés aux mises à jour de WordPress, ainsi que des problèmes de sécurité, car les membres pouvaient modifier les pages de tout le monde de manière anonyme.
La deuxième option a été écartée à cause de la complexité de mise en place d’un nouveau site WordPress et de la gestion des licences et plugins payants.
La solution retenue a donc été de créer un site web avec une autre technologie, offrant une infrastructure stable, simple à maintenir, sécurisée et adaptée aux besoins du laboratoire ainsi qu’aux pages personnelles des membres, permettant de valoriser leurs travaux tout en garantissant une meilleure lisibilité et fiabilité.

Description de l'avancé du projet

Dans le cadre de mon stage au laboratoire DAVID, nous avons choisi différentes solutions pour moderniser et sécuriser le site web du laboratoire ainsi que les pages personnelles de ses membres.

Pour le site principal, nous avons utilisé K-SUP, un CMS et ENT développé par Kosmos Éducation et utilisé par l’UVSQ pour ses sites internet. K-SUP permet de créer, gérer et publier du contenu sans coder, tout en offrant la possibilité de modifier certains éléments via HTML.
Il fonctionne avec :

Java, un langage orienté objet largement utilisé pour développer des applications d’entreprise.
Apache HTTP Server, un serveur web open source qui répond aux requêtes HTTP.
Tomcat, un serveur d’applications léger pour exécuter les applications web Java.
Elasticsearch, un moteur de recherche distribué pour indexer et rechercher de grandes quantités de données.
MariaDB, un système de gestion de base de données relationnelle fiable et performant.


L’UVSQ a choisi d’externaliser ses sites auprès de Kosmos, qui assure la maintenance système. K-SUP utilise un système de blocs : certains sont prédéfinis pour les pages d’accueil, d’autres entièrement configurables appelés *« blocs libres »*, éditables en HTML. Il permet aussi d’ajouter des formulaires de contact, de mettre en place un intranet et d’automatiser certaines tâches comme la répertorisation des actualités et des membres.

Pour les pages personnelles des membres, nous avons choisi Hugo, développé en Go, qui permet de créer des sites statiques consultables par tous sans base de données. Hugo convertit les documents *Markdown* en HTML, ce qui facilite la création de pages pour des utilisateurs non experts en HTML. Il fonctionne avec :

Go, le langage de programmation utilisé.
Linux, système d’exploitation sur lequel il s’exécute.
Nginx, pour sécuriser le site avec *HTTPS* et gérer l’accès des visiteurs.


Cette solution présente plusieurs avantages : faible maintenance, sécurité accrue (*absence d’injection SQL*) et peu de dépendances limitant les incompatibilités. Hugo a été préféré à *Jekyll*, plus lent, avec plus de dépendances et utilisant *Ruby*, un langage moins populaire. Tous les membres du laboratoire peuvent être hébergés sur un serveur Hugo unique, ce qui a nécessité la création d’une version adaptée inspirée de Jekyll.

Le suivi et la gestion des fichiers sont assurés via GitLab, qui permet de travailler en équipe, de suivre les modifications et de gérer les dépôts en toute sécurité. GitLab sert d’interface pour Hugo afin de simplifier l’édition et l’ajout de pages pour les membres, tout en offrant un IDE en ligne et en évitant SSH ou SFTP. Le dépôt est hébergé sur le profil GitLab de madame ZEITOUNI et la passation est documentée dans le guide utilisateur.

Pour récupérer les pages personnelles existantes sous WordPress avant la migration, j’ai utilisé WebCopy, qui crée des copies statiques des sites web et permet l’archivage des anciens contenus. L’outil nécessite parfois une vérification manuelle pour s’assurer que toutes les ressources ont bien été récupérées.

Concernant ma formation et autoformation, j’ai été formé à l’utilisation de K-SUP par la webmaster de l'UVSQ via Zoom, avec accès au guide utilisateur pour rester autonome. J’ai également appris à utiliser GitLab et Hugo, tandis que mes compétences préexistantes en HTML, CSS, JavaScript et Git ont facilité la prise en main des outils. Enfin, j’ai dû comprendre les besoins et les usages des chercheurs afin de concevoir un site web fonctionnel, sécurisé et adapté aux usages du laboratoire.

Résultat obtenu, qualité de la solution proposée.

Pour m’organiser, j’ai réutilisé la méthode du document Excel découverte lors de mon stage précédent, ce qui permettait de suivre l’avancement semaine par semaine. Cette méthode est plus simple et rapide que celle avec MindView.

Planning personnel pour mon avancement :

Création et évolution de la page d’accueil : plusieurs prototypes testés avant finalisation sur la page libre inspirée de l’ancienne page WordPress.
Modification du carrousel : personnalisation du format des actualités via HTML et CSS injectés.
Page d’équipe : mise en place d’une page présentant les membres (exemple : équipe ADAM).
Documentation : rédaction d’un rapport de test et d’un guide pour le futur webmaster.
Pages personnelles (Hugo – GitLab) : installation, configuration GitLab et Hugo, création de templates « Page Académique » et mise à disposition flexible pour chaque membre.
Présentations et assistances : démonstration des solutions au laboratoire, réponses aux questions, accompagnement des membres pour la création de leurs pages.


Ces actions ont permis de finaliser le site K-SUP et les pages personnelles dans un temps limité, en offrant une solution flexible, facile à maintenir, et adaptée aux besoins des membres. L’installation de Hugo et GitLab a assuré une mise à jour automatique du contenu, et les templates ont simplifié la création de pages académiques. Les présentations et l’accompagnement des membres ont garanti la bonne adoption des outils.

Bilan et conclusion

Pour moi, ce site représente bien plus que de simples pages HTML : c’est la vitrine des travaux du laboratoire et le reflet du sérieux de mes collègues. Je suis fier de ce que j’ai accompli et d’avoir contribué à l’histoire du laboratoire DAVID.

Cette expérience m’a permis de découvrir le monde de la recherche, son fonctionnement et ses besoins. J’ai appris à utiliser le CMS K-SUP, à développer un site statique via des pages Markdown, et à mettre en pratique mes compétences en bash, Linux et installation de sites web. J’ai également renforcé mes compétences en communication à travers les présentations et l’assistance apportée aux membres.

Les deux projets assurent au laboratoire des solutions web durables, même si certaines questions, comme la mise à jour des pages, restent à définir. Cette expérience a été unique et précieuse, et je garderai en mémoire tout ce que j’ai appris sur le monde de la recherche.

Conclusion : cette expérience a été une réussite !

D'autres images

Exemple d'utilisation de K-SUP. Démonstration de Gitlab : on voit la liste des répertoires et fichiers, ainsi que le mode éditeur pour éditer le code markdown des pages 3 images : la page wordpress de Madame Karine ZEITOUNI avec sa convertion exacte en Hugo, et la nouvelle version avec la template academic spécial Hugo Comparaison adapté en Hugo de la page académique. Il y a un emplacement pour la photo, la bio et les liens des réseaux de la personne. On remarque des onglets et un exemple de contenu de page d'accueil. Historique du site web du laboratoire PRiSM et DAVID, on remarque l'évolution du web. Démonstration de K-SUP avec ses différentes fonctionnalités pour modifier et gérés des pages..