# uqo-imm1033 — Méthodes du coût en évaluation immobilière

Notes de cours interactives du cours IMM1033 (IMM1033-20, Hiver 2026) de l'Université du Québec en Outaouais (UQO). Site statique généré à partir des sources LaTeX du manuel, servi par le cluster MacLustr.

# Sommaire

1. Présentation
2. Ce que contient le site
3. Fonctionnalités interactives
4. Structure du cours publiée
5. Contenu du dépôt
6. Arborescence du site généré (dist/)
7. Le serveur server.mjs
8. Chaîne de génération LaTeX → HTML
9. Déploiement sur le cluster MacLustr (mld)
10. Exploitation au quotidien
11. Mettre à jour le contenu
12. Données personnelles, sécurité, performance
13. Identité visuelle
14. Historique
15. Droits et licence
16. Contact

# 1. Présentation

uqo-imm1033 est la version web, interactive et « mobile-first » des notes de cours de IMM1033 — Méthodes du coût en évaluation immobilière (IMM1033-20, Hiver 2026, 3 crédits · premier cycle · 14 séances), enseigné à l'UQO par Simon-Pierre Boucher.

La méthode du coût en évaluation immobilière : évaluation du terrain, coût de reproduction et de remplacement, estimation des coûts de construction et ventilation complète de la dépréciation.

Le site n'est pas une application avec base de données : c'est un site statique (HTML, CSS, JavaScript, JSON, SVG, PDF) produit par un générateur maison à partir des sources LaTeX du manuel (uqo-notes.sty) et du rapport Le marché de l'habitation au Québec. Toute l'interactivité (quiz, entraînement, jeux, progression, notes, recherche, synthèse vocale, explorateurs) s'exécute dans le navigateur ; la progression est conservée localement (localStorage) et exportable en JSON. Aucun compte, aucune collecte côté serveur.

Le rendu est optimisé pour le téléphone (375 px) autant que pour l'ordinateur, installable comme PWA (manifest.webmanifest, icônes 192/512), et indexable (sitemap.xml, robots.txt, balises Open Graph).

Source de vérité du contenu = les fichiers .tex du dépôt de cours UQO_COURS. On ne modifie jamais le HTML généré à la main : on modifie le LaTeX, on reconstruit, on redéploie (voir §11).

# 2. Ce que contient le site

Statistiques du build publié (dist/data/meta.json, build 2026-09-24 14:23:05) :

Publié : notes intégrales des 14 séances, annexes, bibliographie, plan de cours (PDF), notes complètes (PDF), diapositives (PDF), énoncés des TP et gabarits Excel, rapport marché (HTML + PDF + données HPI ACI xlsx + script Python d'analyse).

Jamais publié (règle absolue du projet) : solutionnaires des TP, questionnaires d'examen, grilles de correction. Le générateur ne les copie pas ; ne pas les ajouter à la main dans dist/.

# 3. Fonctionnalités interactives

# 3.1 Séances (/seance/01 … /seance/14)

• Notes intégrales converties depuis LaTeX : boîtes pédagogiques (définition, formule, exemple, exercice, attention, à retenir), notes marginales façon Tufte, mathématiques KaTeX pré-rendues au build, tableaux, figures TikZ rendues en SVG, références auteur-année (references.bib).
• Stepper de sections (précédent / suivant), sommaire latéral avec sections déjà lues, objectifs cochables, mode révision (masque les exemples, met en avant définitions et formules).
• Explorateurs SVG insérés à la fin de la première sous-section ciblée (9 par cours, voir §4) : curseurs et graphiques recalculés en direct.
• Surlignage + notes personnelles (sélection de texte → surligner / annoter ; export Markdown), lecture audio (synthèse vocale du navigateur, section par section), quiz de fin de séance intégré.
• Infobulles de glossaire sur les termes définis.

# 3.2 Réviser

• /aide-memoire : toutes les formules et règles clés par séance.
• /glossaire et /definitions : glossaire alphabétique, définitions intégrales avec lien vers la séance.
• /fiches : fiches recto-verso (question / réponse) mélangeables, filtrables par séance.
• /carte : carte du cours (SVG radial : parties → séances → objectifs).
• /exercices : banque de tous les exercices avec lien vers le contexte.

# 3.3 S'exercer

• /quiz : quiz par séance ou examen blanc (tirage aléatoire multi-séances, correction commentée, score).
• /entrainement : problèmes à données aléatoires (13 générateurs, data/entrainement.js) avec solution détaillée recalculée à chaque tirage.
• /jeux : association (terme ↔ définition), vrai / faux, remise en ordre (6 séquences du cours).
• /outils : calculateurs spécialisés (data/outils.js).
• /progression : tableau de bord (séances lues, objectifs cochés, quiz réussis, fiches maîtrisées) ; export / import JSON pour changer d'appareil.

# 3.4 Ressources

• /diapositives : 14 PDF (files/slides/), /ressources : téléchargements (plan, notes PDF, TP, gabarits).
• /rapport : rapport Le marché de l'habitation au Québec en 21 sections HTML (rapport/0 … rapport/15, annexes A … F), 67 figures SVG, 28 tableaux, valeurs clés, explorateurs HPI ACI (data/hpi.json) et FRED (data/fred.json), PDF complet et données sources dans files/rapport/.
• /bibliographie : bibliographie fusionnée du manuel et du rapport.
• /recherche : recherche plein texte côté client (data/search.json, 2 587 entrées).

# 3.5 Transversal

• Thème clair UQO par défaut, thème sombre, taille de texte réglable, navigation clavier.
• PWA installable, 404.html personnalisée, redirections propres (/glossaire → /glossaire/).

# 4. Structure du cours publiée

Parties et séances

Évaluations affichées sur le site (la pondération et le calendrier viennent de courses.py) :

Travaux pratiques publiés (files/tp/) :

Explorateurs interactifs (widget → emplacement dans la séance) :

Séquences du jeu de remise en ordre :

• L’ordre de ventilation de la dépréciation (5 étapes) → /seance/13/#s-13-10
• Les quatre critères du PHMU (4 étapes) → /seance/03/#s-3-1
• Le processus de la méthode du coût en cinq étapes (5 étapes) → /seance/14/#s-14-1
• L’assemblage du coût neuf (5 étapes) → /seance/08/#s-8-7
• La hiérarchie normative de l’aménagement (4 étapes) → /seance/04/#s-4-3
• Les huit étapes de l’estimation du coût neuf (8 étapes) → /seance/05/#s-5-8

# 5. Contenu du dépôt

uqo-imm1033/
├── README.md                 ← ce document
├── server.mjs                ← serveur statique Node ≥ 20, zéro dépendance (déployé tel quel)
├── package.json              ← {"start": "node server.mjs"} (aucune dépendance npm)
├── dist/                     ← LE SITE GÉNÉRÉ, identique octet pour octet à ce qui tourne sur le nœud
├── deploy/
│   └── uqo-imm1033.manifest.json   ← copie du manifeste mld (M1M32:~/dispatch/apps/uqo-imm1033.json) — sans secret
└── generator/                ← instantané du générateur au moment du build (lecture seule, voir ci-dessous)
    ├── README.md             ← README du générateur (_Site_web)
    ├── package.json          ← dépendance KaTeX pour le rendu des maths au build
    ├── build/                ← build.py, latex2html.py, rapport.py, tikz.py, render_math.mjs, bib.py,
    │                            brand.py, templates.py, courses.py, test_convert.py
    ├── data/                 ← quiz-*.json, outils-*.js, entrainement-*.js (les deux cours)
    └── assets/               ← css/site.css, js/app.js, brand/ (logos UQO sources)

⚠️ generator/ est un instantané. Le générateur canonique vit dans le dépôt de cours UQO_COURS/_Site_web/ (GitHub spboucher-ai/UQO_COURS, dossier partagé par les deux cours). Il est copié ici pour que le dépôt de l'app soit auto-suffisant et lisible, mais toute modification doit se faire dans UQO_COURS, puis être reconstruite et resynchronisée (§11). Les sources LaTeX (.tex) ne sont pas dans ce dépôt : elles contiennent aussi les solutionnaires et examens, qui ne doivent jamais sortir de UQO_COURS.

Ce qui est volontairement exclu : cache/ du générateur (SVG TikZ et figures rendues, régénérables), node_modules/, .DS_Store.

# 6. Arborescence du site généré (dist/)

dist/data/ en détail : meta.json (statistiques + chapitres), quiz.json (103 questions en 14 chapitres), cards.json (174 fiches), glossaire.json, search.json (index plein texte), outils.js, entrainement.js, hpi.json (indice HPI ACI mensuel, désaisonnalisé et brut), fred.json (séries FRED).

dist/files/ en détail : IMM1033_notes_de_cours.pdf, IMM1033_plan_de_cours.pdf, slides/ (14 PDF), tp/ (3 énoncés PDF + 3 gabarits .xlsx), rapport/ (rapport_immobilier_quebec.pdf, HPI_ACI_mensuel_desaisonnalise.xlsx, HPI_ACI_mensuel_non_desaisonnalise.xlsx, analyse_hpi_quebec.py).

# 7. Le serveur server.mjs

Serveur HTTP statique en Node.js pur (node:http, node:fs, node:zlib), aucune dépendance npm, ≈ 170 lignes.

node server.mjs <port> <dossier-dist>
# en production : node server.mjs 8161 /Users/simon-pierreboucher/apps/uqo-imm1033/dist

Comportement :

Les SVG des figures matplotlib du rapport font ≈ 300 Ko chacun ; la compression Brotli/gzip les ramène à quelques dizaines de Ko sur le fil.

# 8. Chaîne de génération LaTeX → HTML

Le pipeline (generator/build/build.py, ≈ 1 s par cours grâce aux caches) :

1. Lecture des métadonnées (courses.py) : identité, parties et couleurs, calendrier, évaluations, TP à publier, widgets et séquences.
2. Conversion LaTeX → HTML (latex2html.py, ≈ 1 500 lignes) : dialecte uqo-notes.sty (boîtes, notes marginales, \oe avec avalement d'espace TeX, tableaux, listes, références croisées) et article du rapport. 0 avertissement sur les 32 fichiers de séances + le rapport.
3. TikZ → SVG (tikz.py) : chaque tikzpicture est compilé en standalone avec pdflatex, converti par pdftocairo, mis en cache dans cache/tikz/ (clé = hachage du source).
4. Mathématiques (render_math.mjs) : KaTeX exécuté en lot par Node au build → HTML statique, aucun JS mathématique côté client.
5. Bibliographie (bib.py) : references.bib → citations auteur-année + page /bibliographie.
6. Rapport (rapport.py) : découpage en 21 sections, tableaux \input, valeurs clés, figures PDF → SVG (cache/rapport-fig/), extraction HPI (xlsx → hpi.json) et FRED (json).
7. Identité (brand.py, Pillow + Fira Sans OTF de TeX Live) : logo UQO recoloré, favicons, apple-touch-icon, image Open Graph 1200 × 630 par cours.
8. Gabarits (templates.py) : accueil, séance, carte, rapport, jeux, entraînement, progression, recherche…
9. Données : quiz-<code>.json, outils-<code>.js, entrainement-<code>.js copiés dans dist/data/, index de recherche et fiches générés.
10. Client : assets/css/site.css (Fraunces / Source Serif 4 / Fira Sans, couleur par partie, mobile) et assets/js/app.js (recherche, quiz, fiches, widgets SVG, entraînement, jeux, progression, notes, TTS, explorateurs HPI/FRED).

Prérequis : Python ≥ 3.12 (Pillow, openpyxl), Node ≥ 20 (npm install pour KaTeX), TeX Live (pdflatex, FiraSans, fontawesome5, pgfplots), poppler (pdftocairo, pdfinfo).

cd ~/Desktop/Academique/UQO/UQO_COURS/_Site_web
npm install                              # KaTeX, une fois
python3 build/build.py imm1033            # → dist/imm1033
node server/server.mjs 8161 dist/imm1033 # test local : http://localhost:8161
python3 build/test_convert.py            # test de conversion complet

Pièges connus : Python 3.14 refuse \" dans les expressions de f-strings imbriquées (utiliser des variables intermédiaires) ; un widget doit être inséré en fin de première sous-section, jamais dans une boîte ; \oe suivi d'un espace doit avaler l'espace (sémantique TeX).

# 9. Déploiement sur le cluster MacLustr (mld)

L'app est orchestrée par maclustr-dispatch (mld) depuis la passerelle M1M32 : elle choisit le nœud le plus efficient, synchronise par rsync, démarre les processus PM2, ouvre le tunnel ngrok, vérifie la santé et met à jour le registre (M1M32:~/dispatch/registry.json, copie laptop ~/Desktop/cluster-skill/cluster-registry.json).

Manifeste (deploy/uqo-imm1033.manifest.json, copie de M1M32:~/dispatch/apps/uqo-imm1033.json) :

Procédure complète depuis le laptop :

# 1. (re)construire le site
cd ~/Desktop/Academique/UQO/UQO_COURS/_Site_web && python3 build/build.py imm1033

# 2. rafraîchir le dossier d'app (= ce dépôt) et versionner
rm -rf stage/uqo-imm1033/dist && cp -R dist/imm1033 stage/uqo-imm1033/dist
cd stage/uqo-imm1033 && git add -A && git commit -m "build $(date +%F)" && git push origin main

# 3. laptop → passerelle M1M32 (staging), puis déploiement sur le nœud choisi par score
~/Desktop/cluster-skill/mld stage ~/Desktop/Academique/UQO/UQO_COURS/_Site_web/stage/uqo-imm1033 uqo-imm1033
~/Desktop/cluster-skill/mld deploy uqo-imm1033            # --node X pour imposer un nœud

# 4. vérifier
~/Desktop/cluster-skill/mld status --live | grep uqo-imm1033
curl -s https://www.uqo-imm1033.app/api/health

Autres commandes utiles : mld move uqo-imm1033 --to <nœud> (migration à chaud avec rollback), mld plan uqo-imm1033 (placement simulé), mld apps (manifestes). Le nœud n'a pas de dépôt git : c'est mld qui synchronise depuis le staging de M1M32 ; ce dépôt spbgit est la référence versionnée de ce qui est déployé.

# 10. Exploitation au quotidien

NODE=$(~/Desktop/cluster-skill/mld status | awk '/uqo-imm1033 /{print $2}')   # ou lire mld status
ssh $NODE 'pm2 ls | grep uqo-imm1033; pm2 logs uqo-imm1033 --lines 50 --nostream'
ssh $NODE 'pm2 restart uqo-imm1033'                 # redémarrage du serveur Node
ssh $NODE 'pm2 restart uqo-imm1033-ngrok'           # tunnel
curl -sI https://www.uqo-imm1033.app/ | head -5           # 200 + en-têtes
curl -s  https://www.uqo-imm1033.app/api/health           # uptime

• PM2 est configuré au démarrage (pm2 startup) sur tous les nœuds d'apps : l'app revient après un redémarrage.
• Le site est aussi surveillé par l'app MacLustr (macOS / iOS) via le registre mld (santé loopback + PM2).
• Emplacement disque sur le nœud : ~/apps/uqo-imm1033/ (server.mjs, package.json, README.md, dist/, ≈ 454 Mo).
• Si mld status montre stale/offline : ssh <nœud> pm2 ls, puis mld deploy uqo-imm1033 (idempotent).

# 11. Mettre à jour le contenu

Après un rebuild des notes, penser à ré-ingérer le site dans UQO-Chat (tuteur IA, dépôt uqo-chat) : il indexe le HTML de dist/<cours>/seance/NN pour son RAG.

# 12. Données personnelles, sécurité, performance

• Aucune donnée côté serveur : pas de compte, pas de base, pas de formulaire, pas de cookie de suivi. La progression, les notes, les surlignages et les préférences sont dans le localStorage du navigateur de l'étudiant·e (export/import JSON depuis /progression).
• Polices servies localement ou via le CSS du site ; KaTeX pré-rendu (pas de CDN mathématique au chargement).
• En-têtes de sécurité posés par server.mjs (§7) ; ngrok termine le TLS (https://www.uqo-imm1033.app).
• Performance : HTML < 300 Ko par séance avant compression, SVG compressés à la volée, cache long sur /assets/ et /files/, ETag/304. Un site complet pèse ≈ 454 Mo dont ≈ 18 Mo de PDF.
• Accessibilité : contrastes du thème UQO vérifiés, navigation clavier, lang="fr-CA", lecture audio.

# 13. Identité visuelle

• Couleur principale UQO teal #0F6180, or #cca424, couleur par partie (part_colors), accent du cours #cca424.
• Typographies : Fraunces (titres), Source Serif 4 (texte), Fira Sans (interface).
• Logo : mot-symbole UQO (source Wikimedia + sources LaTeX, generator/assets/brand/) recoloré par brand.py ; favicons, apple-touch-icon, icônes PWA 192/512 et image OG 1200 × 630 générés au build.
• Le logo et le nom UQO appartiennent à l'Université du Québec en Outaouais ; usage dans le cadre du cours.

# 14. Historique

# 15. Droits et licence

Contenu pédagogique © Simon-Pierre Boucher, UQO — usage réservé aux étudiant·es du cours ; toute reproduction hors de ce cadre requiert une autorisation écrite. Code du générateur et du serveur : © Simon-Pierre Boucher, tous droits réservés (dépôt privé). Données externes : ACI (HPI), FRED, sources citées dans la bibliographie du rapport.

# 16. Contact

Simon-Pierre Boucher Courriel : contact@spboucher.ai Git personnel : https://git.spboucher.ai (spbgit, dépôt uqo-imm1033) Cours : https://www.uqo-imm1033.app · cours jumeau : https://www.uqo-imm1003.app · tuteur IA : https://www.uqo-chat.app