dernière mise à jour : 9.10.2025
1. Introduction
Au printemps 2025, j’ai réalisé un prototype du portail web interactif KI-Léierbud.
L’architecture de ce portail avait été présentée dans un document transmis au Ministère de la Digitalisation, et elle conserve aujourd’hui toute sa pertinence. Ce document a d’ailleurs servi de référence pour le développement du prototype.
Même si ce projet n’a finalement pas été retenu par mes partenaires pour la mise en œuvre du portail KI-Léierbud, je souhaite en présenter ici les principes techniques et structurels.
Cette description pourra intéresser d’autres programmeurs ou concepteurs d’applications éducatives interactives.
Pour ma part, je vais réutiliser cette architecture afin de développer une application en ligne dédiée à ma tétralogie Qubit Lëtzebuerg.
Cette nouvelle application qubit-mini-app va devenir le dénominateur commun des anciennes applications knowledge-mini-app, quiz-mini-app, poll-mini-app et hands-on-mini-app.
Elle utilise deux méthodes d’affichage du contenu et une méthode commune d’affichage des barres fixes “Header” et “Footer” :
JSON to HTML
Le contenu JSON statique, téléchargé à partir d’un CMS WordPress par REST API, est converti en code HTML au format “Mobile First”.
<iframe>
Le contenu dynamique interactif, téléchargé à partir de la plateforme IA publique HuggingFace ou à partir d’un conteneur Docker hébergé sur un serveur privé, est intégré dans une balise <iframe>, insérée dans une page statique WordPress.
Barres fixes
Les barres fixes en haut (header) et en bas (footer) de la fenêtre, affichée dans le navigateur, contiennent les éléments de gestion de l’application (par exemple le changement de langue, le login, etc) et de navigation à travers le contenu.
2. Interface graphique
L’interface visuelle du portail s’adapte aux différents types d’appareils : mobile, tablette et ordinateur portable. Elle repose sur une structure claire composée de trois zones principales :
a. Une barre supérieure fixe (header) comprenant :
- le logo du portail,
- un bouton de recherche,
- un menu déroulant pour le choix de la langue,
- et un bouton de connexion (login).
b. Une zone centrale dynamique (main) affichant les pages associées à un module.
c. Une barre inférieure fixe (footer) indiquant :
- les initiales de l’auteur du contenu principal,
- une flèche de retour à la page précédente,
- un bouton “Home”,
- un indicateur de progression (page courante / total du module),
- un bouton “TOC” (table des matières),
- et une flèche d’avancement vers la page suivante.
Un clic sur le logo ou sur un bouton ouvre une fenêtre modale avec des informations associées.
Les flèches de navigation sont contextuelles : la flèche de retour est cachée sur la première page, celle d’avancement sur la dernière.
Le menu déroulant permet de changer la langue du contenu.
L’ordre de préférence linguistique est : en → fr → de → pt → lb.
Si une page n’est pas disponible dans une langue, celle-ci est exclue du menu. Lors d’une navigation en avant ou en arrière, si la langue choisie n’existe pas pour la page suivante, le système affiche automatiquement la version disponible selon l’ordre de préférence défini.
La barre de titre du navigateur n’est pas affichée sur les mobiles et tablettes des nouvelles générations.
3. Modules
Le portail distingue quatre types de modules, chacun ayant une palette de couleurs spécifique pour différencier les contextes d’informations.
- Modules “knowledge”
- Chargés à partir du CMS WordPress via REST API.
- Composés d’une série d’articles WordPress, avec une page d’introduction et une page de conclusion.
- Chaque article peut contenir du texte, des médias et du code.
- À des fins pédagogiques, la séquence d’articles ne dépasse généralement pas quelques dizaines de pages.
- Modules “quiz”, “poll” et “hands-on”
- Ils comportent également trois pages : introduction, contenu principal et conclusion.
- Le contenu principal est un article WordPress intégrant une balise
<iframe>qui charge du contenu interactif depuis un serveur externe.
4. CMS WordPress
Le CMS WordPress constitue le cœur du portail.
- Il bénéficie d’un écosystème robuste avec des mises à jour régulières, de nombreux thèmes, plugins et outils développés par une large communauté.
- Son éditeur intégré et ses blocs prédéfinis facilitent la rédaction et la mise en page des articles.
- Le plugin Polylang permet la traduction du contenu dans les cinq langues (en, fr, de, pt, lb).
Bien que certains jeunes développeurs considèrent WordPress comme dépassé ou vulnérable, cette réputation est injustifiée lorsqu’il est correctement configuré et entretenu.
Un CMS WordPress sécurisé, mis à jour régulièrement et accompagné de sauvegardes ou exportations XMLfréquentes reste une solution fiable.
Je l’utilise personnellement depuis plus de vingt ans sur divers systèmes (ordinateurs personnels, serveurs Synology, hébergements mutualisés) sans incident majeur.
WordPress forme ainsi un élément essentiel du backend du portail interactif.
5. React
Le frontend du portail repose sur la technologie React, développée par Meta (Facebook).
Cette bibliothèque JavaScript est aujourd’hui l’une des plus performantes pour créer des interfaces dynamiques et réactives, particulièrement adaptées aux approches “Mobile First”.
6. Mini-applications et intégration
La connexion entre le CMS WordPress et le frontend React est assurée par une série de mini-applications qui échangent des données via des fichiers JSON basés sur l’API REST de WordPress. Elles sont toutes basées sur le même code qubit-mini-app.
La personnalisation d’une mini-application repose sur un fichier de configuration JSON, généré automatiquement par un outil que j’ai développé en Python.
Deux exemples de code illustrent la commande de génération et la structure typique d’un tel fichier de configuration. Le premier est extrait de mon prototype pour le portail KI-Léierbud.
Knowledge : KI-Léierbud. What?
"sequence": {
"posts": [
{
"en": 12,
"fr": 71,
"de": 73,
"pt": 114,
"lb": 76
},
{
"en": 14,
"fr": 451,
"de": 471,
"pt": 0,
"lb": 473
},
{
"en": 18,
"fr": 456,
"de": 0,
"pt": 0,
"lb": 0
},
{
"en": 16,
"fr": 454,
"de": 477,
"pt": 0,
"lb": 0
},
{
"en": 479,
"fr": 0,
"de": 0,
"pt": 0,
"lb": 0
},
{
"en": 3059,
"fr": 0,
"de": 0,
"pt": 0,
"lb": 0
}
]
},
"color": {
"header": "#003366",
"main": "#E6F2FF",
"footer": "#004080",
"header-font": "#FFFFFF",
"main-font": "#000000",
"footer-font": "#FFFFFF"
},
"login": "https://www.web3.lu/ki-leierbud/login.html",
"about": "https://www.web3.lu/ki-leierbud/about.html",
"welcome": "https://www.web3.lu/ki-leierbud/welcome.html",
"search": "https://www.web3.lu/ki-leierbud/search.html",
"landing": "https://www.web3.lu/ki-leierbud/landing.html",
"dashboard": "https://www.web3.lu/ki-leierbud/dashboard.html",
"faq": "https://www.web3.lu/ki-leierbud/faq.html",
"user": "https://www.web3.lu/ki-leierbud/user.html",
"author": "https://www.web3.lu/ki-leierbud/author.html",
"favicon": "assets/logo.svg",
"logo": "assets/logo.svg",
"category_id": 574,
"category_name": "Introduction"
}
Birds Quiz
{
"sequence": {
"posts": [
{
"en": 0,
"fr": 3090,
"de": 0,
"pt": 0,
"lb": 0
},
{
"en": 0,
"fr": 3104,
"de": 0,
"pt": 0,
"lb": 0
},
{
"en": 0,
"fr": 3097,
"de": 0,
"pt": 0,
"lb": 0
}
]
},
"color": {
"header": "#1B4332",
"main": "#D8F3DC",
"footer": "#2D6A4F",
"header-font": "#FFFFFF",
"main-font": "#000000",
"footer-font": "#FFFFFF"
}
}
La génération de fichiers statiques d’un module est assurée par un programme Next.js que j’ai développé avec l’assistance d’une IA.
Une fois la génération terminée, le dossier contenant les fichiers HTML, CSS et JS est importé dans le répertoire /httpdocs du serveur Plesk, qui héberge mon blog web3.lu.
7. Serveurs externes
Les contenus interactifs intégrés dans les balises <iframe> proviennent de serveurs externes tels que :
- les sites de uni.lu (par exemple pour Lux-ASR),
- éventuellement liesmachinn.lu du ZLS,
- et surtout Hugging Face, utilisé comme principal fournisseur de ressources IA.
Les contenus hébergés sur des serveurs dédiés sont de préférence conteneurisés avec Docker, afin d’assurer portabilité et sécurité.
8. Démonstrations et perspectives
Une liste de mini-applications de démonstration accompagne le prototype et illustre les différentes fonctionnalités interactives du portail.
- Mini App KI-Léierbud. What? Cette application permet de tester la gestion des langues.
- Mini App Qubit Lëtzebuerg : Histoire IA. Cette application permet de tester l’affichage des textes et médias.
- Mini App Quiz Oiseaux réels ou virtuels. Cette application permet de tester l’intégration d’un quiz développé sur la plateforme HuggingFace dans mon prototype du portail KI-Léierbud.
- Mini App Quiz Style images champion Judo. Cette application montre l’utilisation de menus déroulants pour la sélection par choix multiples
- Mini App Poll Thumbs Up/Down. Cette application montre une série de vidéos de courte durée que l’usager peut aimer ou désapprouver.
- Mini App Poll AI Slop. Cette application permet aux participants d’exprimer leurs sentiments (joie, tristesse, surprise, peur, colère, dégoût, indifférence) et de se comparer aux autres participants au sondage.
- Mini App My Hands-on AI image. Cett application permet aux usagers de voir la génération progressive d’une image IA moyennant le processus de diifusion.
D’autres applications vont suivre.
Le logo “KI-Léierbud” sera remplacé prochainement par “Qubit Lëtzebuerg”, marquant ainsi la transition vers un nouvel écosystème éducatif numérique.
