Mini-Applications dans KI-Léierbud
Marco Barnig 18.8.2025
Les mini-applications sont le coeur du portail KI-Léierbud. Ils se composent des éléments suivants:
- Une séquence de pages web avec du contenu téléchargé par REST API à partir du serveur WordPress KI-Léierbud pour les mini-applications « connaissances », « quiz » et « polls », respectivement des pages web interactives individuelles pour les applications « hands-on ».
- Un ensemble de fichiers html, css, js, svg et png, structuré de la manière suivante :
project-root/
├─ section/
│ └─ app-name/
│ ├─ index.html
│ └─ assets/ (css/js/svg…)
└─ operations/
├─ login/
│ └─ index.html
└─ search/
└─ index.html
Ces dossiers sont enregistrés de préférence dans le dossier /httpdocs/ du serveur PLESK. Le cas échéant, ils seront installés dans des sous-domaines spécifiques de ki-leierbud.lu pour des raisons techniques.
- Des cartes graphiques avec une illustration et description de la mini-application (à l’instar des prompt cards de LetzAI) qui sont affichée dans le dashboard du portail. Elle sont également utilisées comme première et dernière carte dans les séquences des pages web décrites sous le point 1.
Mise en page et fonctionnalités des mini-applications
La mise en page des mini-applications « connaissances », « quiz » et « polls » est basée sur des modèles. Un seul modèle est suffisant pour les séquences « connaissances » (on peut éventuellement choisir différentes couleurs pour l’arrière-fond en fonction du niveau d’usager visé).
Trois modèles sont nécessaires pour les séquences « quiz » en fonction des types de quiz (oui-non, multi-choix, etc). Le même nombre de 3 me semble également approprié pour standardiser les « polls ».
Mini-application « Connaissances/Visionaires »
La mini-application « Visionaires » sert d’exemple pour présenter la mise en page typique et les fonctionalités d’une mini-application « Connaissances ».
Un protype fonctionnel de cette mini-application est accessible avec le lien
https://ki-leierbud.lu/knowledge/visionaries
Une copie écran détailléé d’une page de la séquence afférente est affichée ci-après.
fig 1
Quelques autres pages sont assemblées sur la deuxième figure ci-après :
fig 2
La figure suivante montre l’enchaînement des pages web affichées sur un mobile dans la séquence « Visionaires ».
fig 3
On peut accéder directement à une page spécifique, par exemple la page française de Harold Cohen avec l’ID=1501, en ajoutant le suffixe ?id=1501 à l’URL :
https://ki-leierbud.lu/knowledge/visionaries/?id=1501
On obtient également une page dans une langue spécifique en ajoutant le suffixe ?lang=xx à l’URL de la page existante dans une autre langue. Si la page n’existe pas dans la langue xx souhaitée, l’ordre des priorités en, fr, de, pt, lb sera appliqué.
Développement du modèle « Connaissances »
Le modèle pour la mini-application « Connaissances » a été développé endéans deux jours avec ChatGPT-5. Le dialogue complet du début jusqu’à la fin est accessible sur le lien partagé suivant :
https://chatgpt.com/share/68a6f4e5-58ac-8005-9db8-74577cd58ba0
La lecture de ce dialogue devrait permettre à des collaborateurs non spécialisés en informatique de se familiariser rapidememnt avec le développement assisté par ChatGPT-5 et de développer eux-mêmes des modèles pour les mini-applications.
Erreurs résiduelles du modèle « Connaissances »
Le modèle de la mini-application « Connaissances » comporte quelques erreurs résiduelles, notamment sur les mobilophones. Un problème est le fait que la largeur du header et du footer dépasse la largeur de l’écran en mode portrait. Un autre problème est que la fonctionn « swipe » n’est pas encore implémentée. En tournant le mobile en positionn paysage pour avancer sur la prochaine page web on peut toutefois tester toutes les fonctionnalités. La gestion des langues pour accéder à une page spécifique nécessite églement encore une modification.
Je me propose de corriger ces erreurs une fois que la mise en page et les fonctionalités ont été approuvées définitivement par les partenaires.