Module TWB_020 — TSRS1 · 2026
Un portail unique pour l’ensemble du module : supports de cours, travaux pratiques réalisés et validés, et supervision des connexions en temps réel.
En collaboration avec François Dewolf, formateur du module et auteur des cours et des TP — ce portail retranscrit les supports fournis au fil des journées et les activités réalisées.
DevWeb Portal centralise tout le module TWB_020 (Développement Web Adaptatif) : les supports de cours en PDF, des fiches de synthèse par journée, et les énoncés des travaux pratiques — consultables directement dans l’application, sans rien télécharger.
Chaque TP s’ouvre dans un atelier inspiré de VS Code : explorateur de fichiers, onglets, volets redimensionnables, aperçu en direct, import d’images et export en zip. Chaque utilisateur a ses propres espaces de travail et ses propres fichiers — votre code n’appartient qu’à vous. Un espace « Code libre » permet aussi de tester dix langages à la volée.
Chaque utilisateur ne voit que son propre travail : ses fichiers d’atelier, sa progression dans les cours et les corrections qu’il a débloquées. Rien n’est partagé entre comptes — votre code, vos avancées et vos corrections restent privés.
Une FAQ complète couvre les cas courants, des aides activables assistent la rédaction du code dans l’atelier, et un système de tickets à trois niveaux permet de signaler tout problème à l’administrateur, avec suivi de résolution.
Créez un compte local ou connectez-vous avec Google pour déverrouiller l’ensemble du portail.
Les supports du module classés par journée, lisibles directement dans l’application — sans quitter la page.
Les travaux pratiques avec leurs énoncés, consultables et modifiables dans l’atelier.
Un éditeur type VS Code embarqué : modifiez le code des TP, ajoutez CSS et images, aperçu en direct.
L’historique de vos connexions tracé façon TradingView, avec le détail de chaque session.
Chaque TP répond exactement à l’énoncé, sans superflu : sémantique HTML5, mise en page Grid et Flexbox, responsive et bien plus.
Post-mortem d’incident serveur rédigé en HTML5 strictement sémantique : header, nav, main, section, article, aside, footer.
Interface de monitoring type Grafana : CSS Grid auto-adaptative (auto-fit / minmax) pour la macro-structure, Flexbox pour les composants internes. Aucune media query.
Console de traitement des alertes de sécurité : panneau de filtrage en aside, tableau SIEM, grille 300px / 1fr, header Flexbox space-between.
Portail d’authentification Infratech-Guest : deux colonnes sur desktop, illustration masquée sur mobile (display: none), zones tactiles de 44px minimum, typographie fluide via clamp().
Gabarit d’e-mail d’alerte critique en tableaux HTML et CSS inline (max-width 600px) : compatible tous clients mail, résilient sans images, bandeau rouge et bouton de remédiation.
Mise en conformité du dashboard NOC : comportement application native en WebView (user-select, touch-action, safe-area), accessibilité ARIA et double codage des statuts, préparation au déploiement GitHub Pages.
Chaque authentification est historisée en base : méthode, adresse IP, navigateur, horodatage. Le tableau de bord restitue l’activité sous forme de graphique financier — zoom, survol, échelle temporelle — grâce à la librairie de graphiques de TradingView.
Compte local avec mot de passe haché en bcrypt, ou connexion en un clic via Google OAuth 2.0. Verrouillage automatique après cinq échecs.
SQLite en mode WAL : utilisateurs, sessions et journal des connexions persistés sur le VPS, sans service externe.
Image Node.js Alpine, volume dédié aux données, variables sensibles isolées dans un fichier d’environnement jamais versionné.