Terminale STI2D-SIN — Site perso “Classeur & Portfolio”
Deux séances, zéro drama. Tu montes un dépôt propre, un squelette solide, puis tu sors une Accueil lisible, un À propos crédible et un Journal qui ne ressemble pas à “on a cherché des idées”.
S1 → 12/09/2025 (Setup & Squelette)
S2 → 19/09/2025 (Accueil · À propos · Journal)
Contrastes OK · Mobile OK
S1 — Ce que tu présentes en début de séance
3 minutes chrono par binôme. 1 poste branché au vidéoprojecteur. Pas de roman, des faits.
-
Dépôt Git accessible · URL publique ou partage (lecteur). Commits signifiants, pas “update”.branche
mainREADME.md.gitignore -
Site local ou en ligne qui ouvre sur
index.html. Arborescence imposée visible. -
Arborescence :
portfolio/→src/·docs/·img/·index.html·README.md -
QR-code vers la page d’accueil (ou lien de prévisualisation). Collé dans le README.
-
README synthétique : objectif du site, techno choisie, “comment ouvrir”, auteurs, licence si besoin.
Format de présentation
- Pitch 20 secondes : objectif du site en 1 phrase claire.
- Arborescence à l’écran + ouverture
index.html. - QR-code testé en direct.
- 2 commits montrés avec messages propres.
S1 — À faire pendant la séance (livrable minimal)
Créer le dépôt + structure
portfolio/
├─ src/ # CSS/JS si besoin
├─ docs/ # PDF, schémas, BOM
├─ img/ # images (≤ 200 Ko conseillé)
├─ index.html # page d’accueil
└─ README.md # infos projet
README express (modèle)
# Classeur & Portfolio — Terminale STI2D-SIN
But : Site statique (cours, TP/TD, preuves, projets).
Ouvrir : double-cliquer index.html (ou URL).
Auteurs : Nom1 Nom2 (1STI2D)
Techno : HTML/CSS + (option) JS. Générateur : —
Licence : —
QR : <image insérée ici>
Index squelette (couleurs du site)
<!doctype html>
<html lang="fr"><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Mon classeur & portfolio</title>
<style>body{margin:0;background:#0b1020;color:#eaf1ff;font:16px/1.5 system-ui}
a{color:#7dd3fc} header,main{max-width:980px;margin:auto;padding:24px}
.card{background:linear-gradient(180deg,#121a34,#0f1530);border:1px solid #243157;border-radius:14px;padding:16px}</style>
<header><h1>Classeur & Portfolio — 1STI2D</h1></header>
<main class="card">
<h2>Journal de bord</h2><p>Entrées datées + preuves.</p>
<h2>Projet</h2><p>Besoins, contraintes, architecture.</p>
<h2>À propos / Contact</h2><p>Qui sommes-nous ? Liens utiles.</p>
</main></html>
Commits à montrer
init: structure dépôt
feat: index squelette
docs: README + QR
Critères S1 validés si: dépôt accessible, arborescence OK, index ouvre sans erreur, README présent, 2+ commits propres.
S2 — Exécution guidée : Accueil, À propos, Journal
Objectif: rendre la page d’accueil lisible, publier un À propos crédible et démarrer un journal fonctionnel avec preuves.
Accueil — contenu minimum
- Pitch en 3 lignes (pourquoi, quoi, pour qui).
- Image libre de droits < 200 Ko + attribut
alt. - Liens vers Journal, Projet, Dossier technique, Réalisations, À propos.
<section class="card">
<h2>Bienvenue</h2>
<p>Notre site sert de classeur (cours/TP) et de portfolio projet.</p>
<img src="img/hero.jpg" alt="Photo illustrative du projet" width="100%">
<nav><a href="journal.html">Journal</a> · <a href="projet.html">Projet</a> · <a href="docs/">Dossier tech</a> · <a href="realisations.html">Réalisations</a> · <a href="apropos.html">À propos</a></nav>
</section>À propos — contenu minimum
- Noms, classe, rôles (2–3 compétences chacun).
- Liens: GitHub (si public), contact école.
<section class="card">
<h2>À propos</h2>
<p>Binôme : Nom1 (réseau/Arduino) · Nom2 (web/capteurs). Classe 1STI2D.</p>
<ul><li>Compétences : HTML/CSS, C/Arduino, capteurs.</li><li>Contact : prenom.nom@lycee.fr</li></ul>
</section>Journal — format imposé
date ISOobjectifactionspreuves (liens/images)prochaines étapes
<article class="card">
<h2>Journal de bord</h2>
<h3>2025-09-19</h3>
<ul>
<li><b>Objectif:</b> Page d’accueil + À propos.</li>
<li><b>Actions:</b> rédaction du pitch, insertion image 160 Ko, liens nav.</li>
<li><b>Preuves:</b> commit <code>feat: accueil</code>, capture <code>img/accueil-v1.png</code>.</li>
<li><b>Suite:</b> journal.html, optimisation images.</li>
</ul>
</article>
Rappels S2 · Accessibilité: titres hiérarchisés, textes alternatifs, contrastes. Performance: images ≤ 200 Ko conseillé. Traçabilité: 2+ commits S2 avec messages clairs.
Barème ciblé (S1/S2)
- Structure & navigation — arborescence + liens Accueil → pages clés (+3)
- Qualité du contenu — pitch clair, À propos crédible, journal factuel (+6)
- Traçabilité & rigueur — commits propres, QR, README (+3)
- Design & accessibilité — thème sombre lisible, alt, titres (+3)
- Communication — synthèse sans blabla (+2)
Malus classiques: plagiat, images obèses, liens morts, README fantôme.