Ressources — enligneici

Fiche 1 · Organisation du site

Un site clair se maintient mieux et évite les liens cassés. Structure attendue et erreurs à ne pas faire.

Arborescence recommandée

portfolio/
├─ index.html         (page d’accueil)
├─ docs/              (rapports, TP, schémas PDF)
├─ img/               (images, captures, croquis)
├─ assets/            (CSS, JS, icônes…)
└─ README.md          (présentation du projet)

index.html page principale et liens vers le reste.
docs/ comptes rendus, cahiers des charges, schémas PDF.
img/ images, captures d’écran, photos du projet.
assets/ styles CSS, scripts JS, icônes.

Toujours utiliser des chemins relatifs dans le site. Exemple: <a href="docs/rapport.pdf">…</a>

Exemple minimal d’index

<!doctype html>
<html lang="fr">
<meta charset="utf-8">
<title>Portfolio SIN</title>
<link rel="stylesheet" href="assets/style.css">
<h1>Mon Portfolio</h1>
<p>Bienvenue dans mon classeur virtuel.</p>
<a href="docs/tp1.pdf">Voir le TP 1</a>

Erreurs fréquentes

Mettre des fichiers sur le Bureau/Mes documents.
Chemins absolus comme C:\Utilisateurs\…
Mélanger images et PDF dans le même dossier.

Exercice rapide

Créez portfolio/ avec docs/, img/, assets/.
Ajoutez index.html et deux liens vers un PDF et une image fictifs.
Testez en double‑cliquant sur index.html.

Source: consignes d’organisation, exemples d’index, erreurs types.

Fiche 2 · Journal de bord

La mémoire du projet. Chaque semaine: faits, temps, preuves. Un jury aime les traces.

Rythme

4h classe

+ 4h perso

Format

Date, classe, maison

+ preuves

Preuves

PDF, images

liens code

Modèle simple (tableau)

Date	Travail en classe	Travail maison	Preuves
16/09	TP capteurs terminé	Recherche datasheet capteur	docs/TP_capteurs.pdf; img/capteur.jpg
23/09	Début cahier des charges	Rédaction introduction	docs/cahier.pdf
30/09	Schémas blocs validés	Essais Arduino (LED)	img/schema_blocs.png; code/led.ino

Carte HTML réutilisable

<article class="card">
  <strong>16/09</strong>
  <p>Travail en classe : TP capteurs terminé</p>
  <p>Travail maison : recherche datasheet du capteur</p>
  <p>Preuves : <a href="docs/TP_capteurs.pdf">PDF</a>,<img src="img/photo.jpg" alt="capteur"></p>
</article>

Anti‑erreurs

Tout remplir la veille: non. Écrire chaque semaine.
Confondre classe et maison: séparer clairement.
Oublier les preuves: au minimum 1 PDF ou 1 capture.

Exercice

Créez journal.html et ajoutez une 1re entrée datée d’aujourd’hui.
Décrivez en 2 lignes classe/maison et liez un PDF + une image fictive.

Conseils de traçabilité et modèle de journal.

Fiche 3 · Lisibilité & Accessibilité

Lisible pour humains et lecteurs d’écran. Structure, contrastes, textes alternatifs, paragraphes courts.

Structure sémantique

<h1>Projet SIN — Système de surveillance</h1>
<h2>Objectif</h2>
<p>Capteur de température avec alarme sonore.</p>
<h2>Architecture</h2>
<h3>Capteurs utilisés</h3>
<p>DS18B20 pour mesurer...</p>

<h1> unique par page.
<h2> sections majeures; <h3> sous‑parties.

Images accessibles

<img src="img/schema.png" alt="Schéma montage DS18B20 + Arduino">

Contrastes & textes

<style>
body{background:#000;color:#fff;font-family:Arial,sans-serif}
h1{color:#7aa2f7}
</style>

Éviter rouge sur vert et gris sur noir trop pâle.
Paragraphes de 3 à 6 lignes. Pas de « murs » de texte.

Avant / Après

Avant: titre criard, texte confus, tout en majuscules.
Après: objectif clair, sections nettes, alt sur images.

Checklist express

H1 unique Titres hiérarchisés Alt sur toutes les images Contraste suffisant Paragraphes courts

Rappels d’accessibilité évalués au Bac et utiles partout.

Fiche 4 · Hébergement

Deux voies: en ligne via GitHub Pages ou hors ligne sur clé USB. Dans tous les cas: chemins relatifs et tests.

GitHub Pages (site statique)

Créer un compte et un dépôt.
Importer index.html, docs/, img/, assets/.
Activer Settings → Pages.
URL générée: https://pseudo.github.io/nom-du-projet/

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/pseudo/mon-site.git
git push -u origin main

Hors ligne (clé USB)

Copier tout le dossier du site avec index.html à la racine.
Tester en double‑cliquant sur index.html.
Utiliser uniquement des liens relatifs ./docs/fichier.pdf.

Checklist avant rendu

✔ L’index s’ouvre et tous les liens fonctionnent.
✔ Images/PDF lisibles sans Internet.
✔ Pas d’espaces ni caractères spéciaux dans les noms.

Exercice

Mettre le site sur une clé et le tester sur un autre PC.
Créer un dépôt GitHub, pousser le site, activer Pages, récupérer l’URL.
Ajouter l’URL dans le journal et générer un QR code vers le site.

Bon lien: <a href="docs/rapport.pdf">Voir le rapport</a>. Éviter les chemins locaux.

Fiche 5 · Auto‑évaluation (sur 20)

Grille synthétique + exemples de niveaux. L’objectif: corriger avant la soutenance, pas après.

Critère	Pts	Exemple attendu
Structure & Navigation	3	Menu clair, liens internes OK, arbo logique.
Qualité du contenu	6	Explications techniques, schémas légendés, données exploitables.
Traçabilité & Rigueur	3	Journal hebdo, dépôt Git avec commits réguliers.
Design & Accessibilité	3	Responsive, contraste, alt images, hiérarchie titres.
Démonstrations & Preuves	3	Vidéos/captures, protocole de test crédible.
Communication synthétique	2	Pitch clair sur l’accueil, objectif en 3 lignes.

Niveaux (exemples)

Structure: Non acquis = liens cassés; En cours = menu partiel; Acquis = tout fonctionne.
Qualité: Non acquis = copier/coller; En cours = explications superficielles; Acquis = complet + schémas commentés.
Traçabilité: Non acquis = pas de journal; En cours = journal incomplet; Acquis = hebdo + Git clair.

Exercice

Notez‑vous sur 20 avec la grille ci‑dessus.
Choisissez le critère le plus faible et proposez 1 amélioration concrète.
Appliquez la correction dans le site avant la prochaine séance.

Erreurs types: journal rempli en retard, pages vides, alt manquants, liens non testés.