Florian/SNT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refonte des TP Web pour SNT seconde

Browse Source 
- Corrige les erreurs CSS (radius-border, prefixes vendeur obsoletes)
- Corrige la typo "La ciel" et les balises dt→dl dans index.html
- Ajoute les vrais liens Wikipedia pour les grands noms
- Harmonise les references au lycee Charlotte Perriand
- Met a jour l'annee dans INTRODUCTION.md (2024→2025)
- Remplace les anciens TP (PDFs niveau NSI/BTS) par 3 nouveaux TP adaptes :
  - TP1 : Decouverte du HTML (structure, balises, CSS)
  - TP2 : Experience utilisateur (analyse UX, bonnes pratiques)
  - TP3 : Ma premiere page web en CSS (mini-projet progressif)
- Ajoute le schema client/serveur et les templates de demarrage TP3
- Supprime les anciens TP 2/3/4 et intro.pdf (gardes en NSI)
- Met a jour le README avec le nouveau sommaire

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Florian Mathieu
2026-03-02 10:11:03 +01:00
parent 1dac9d0ba9
commit 0e649c1adf
48 changed files with 953 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
sequences/web/tp/tp2_experience_utilisateur.md Normal file
View File

@@ -0,0 +1,251 @@
# TP 2 : L'experience utilisateur (UX)
---
## Objectifs
- Comprendre ce qu'est l'experience utilisateur (UX)
- Savoir evaluer la qualite d'un site web
- Identifier les bonnes et mauvaises pratiques de conception web
- Developper un regard critique sur les interfaces numeriques
---
## Partie 1 : Qu'est-ce que l'UX ? (10 min)
### Definition
**L'experience utilisateur** (en anglais *User eXperience*, abregee **UX**) designe la qualite de l'experience vecue par une personne lorsqu'elle utilise un site web, une application ou un produit numerique.
Une bonne UX, c'est quand :
- On trouve facilement ce qu'on cherche
- Le site est agreable a utiliser
- On n'est pas perdu dans la navigation
- Le site fonctionne bien sur tous les appareils
### Les 4 criteres essentiels
| Critere | Question a se poser | Exemple |
|---------|---------------------|---------|
| **Lisibilite** | Le texte est-il facile a lire ? | Taille de police suffisante, contraste texte/fond |
| **Navigation** | Trouve-t-on facilement ce qu'on cherche ? | Menu clair, fil d'Ariane, liens visibles |
| **Rapidite** | Le site charge-t-il vite ? | Pas d'attente excessive, images optimisees |
| **Adaptabilite** | Le site s'affiche-t-il bien sur mobile ? | Design responsive, boutons assez grands |
### Exercice 1.1
Repondez aux questions suivantes :
1. Citez un site web que vous trouvez agreable a utiliser. Pourquoi ?
2. Citez un site web que vous trouvez penible a utiliser. Pourquoi ?
3. Parmi les 4 criteres ci-dessus, lequel vous semble le plus important ? Justifiez.
---
## Partie 2 : Analyse de sites web (25 min)
### Consigne
Vous allez evaluer **3 sites web** en utilisant la grille d'evaluation ci-dessous. Pour chaque site, attribuez une note de 1 a 5 pour chaque critere.
**Echelle de notation :**
- 1 = Tres mauvais
- 2 = Mauvais
- 3 = Moyen
- 4 = Bon
- 5 = Tres bon
### Sites a evaluer
| N. | Site | Adresse |
|----|------|---------|
| 1 | Wikipedia | https://fr.wikipedia.org |
| 2 | Site du lycee | https://charlotteperriand.etab.ac-lille.fr |
| 3 | Un site de votre choix | (jeu video, sport, musique...) |
### Grille d'evaluation
Recopiez et completez ce tableau pour **chacun des 3 sites** :
**Site 1 : Wikipedia**
| Critere | Note /5 | Justification |
|---------|---------|---------------|
| Lisibilite | | |
| Navigation | | |
| Rapidite | | |
| Adaptabilite (testez en redimensionnant la fenetre) | | |
| **Total** | **/20** | |
**Site 2 : Site du lycee**
| Critere | Note /5 | Justification |
|---------|---------|---------------|
| Lisibilite | | |
| Navigation | | |
| Rapidite | | |
| Adaptabilite | | |
| **Total** | **/20** | |
**Site 3 : ..................**
| Critere | Note /5 | Justification |
|---------|---------|---------------|
| Lisibilite | | |
| Navigation | | |
| Rapidite | | |
| Adaptabilite | | |
| **Total** | **/20** | |
### Questions de synthese
4. Quel site a obtenu la meilleure note ? Pourquoi selon vous ?
5. Pour le site le moins bien note, proposez **2 ameliorations concretes**.
6. Pour tester l'adaptabilite mobile, vous avez redimensionne la fenetre. Connaissez-vous une autre methode ? (Indice : outils de developpement du navigateur, touche F12)
---
## Partie 3 : Bonnes et mauvaises pratiques (15 min)
### Comparaison avant/apres
Voici des exemples de **mauvaises pratiques** courantes et comment les corriger :
#### Exemple 1 : La lisibilite
**Mauvais** :
```
Texte jaune sur fond blanc, police taille 10px, pas d'espacement.
Tout est colle, illisible, fatigant pour les yeux.
```
**Bon** :
```
Texte sombre sur fond clair, police taille 16px, interlignes aeres.
Le texte respire, on a envie de lire.
```
**Regle** : Toujours avoir un bon **contraste** entre le texte et le fond. La taille minimale recommandee est **16px**.
#### Exemple 2 : La navigation
**Mauvais** :
- Pas de menu visible
- Liens caches ou non cliquables
- On ne sait pas ou on est dans le site
**Bon** :
- Menu toujours visible en haut de page
- Liens soulignes ou en couleur
- Fil d'Ariane ("Accueil > Rubrique > Page")
**Regle** : L'utilisateur doit toujours savoir **ou il est** et **comment revenir en arriere**.
#### Exemple 3 : L'adaptabilite mobile
**Mauvais** :
- Le site deborde de l'ecran sur telephone
- Il faut zoomer pour lire le texte
- Les boutons sont trop petits pour etre cliques au doigt
**Bon** :
- Le contenu s'adapte a la taille de l'ecran
- Le texte reste lisible sans zoom
- Les boutons sont assez grands (minimum 44x44 pixels)
**Regle** : Plus de la moitie du trafic web se fait sur mobile. Un site **doit** s'adapter a toutes les tailles d'ecran.
### Exercice 3.1
Pour chaque situation, indiquez s'il s'agit d'une **bonne** ou **mauvaise** pratique :
| Situation | Bonne / Mauvaise ? |
|-----------|---------------------|
| Un menu de navigation avec 25 liens | |
| Un bouton "Retour en haut" sur une longue page | |
| Du texte gris clair sur fond blanc | |
| Des images qui mettent 10 secondes a charger | |
| Un formulaire qui indique clairement les erreurs en rouge | |
| Un site qui fonctionne uniquement sur ordinateur | |
| Un lien qui change de couleur quand on l'a deja visite | |
| Une page d'accueil avec 3 pop-ups publicitaires | |
---
## Partie 4 : Quiz recapitulatif (10 min)
Repondez aux questions suivantes :
**Question 1** : Que signifie UX ?
- a) Universal eXchange
- b) User eXperience
- c) Ultra eXpress
- d) Unified eXtension
**Question 2** : Quelle taille de police minimale est recommandee pour le texte d'un site web ?
- a) 8px
- b) 12px
- c) 16px
- d) 24px
**Question 3** : Pourquoi est-il important qu'un site s'adapte aux mobiles ?
- a) Parce que c'est plus joli
- b) Parce que plus de la moitie du trafic web est sur mobile
- c) Parce que Google l'exige
- d) Ce n'est pas important
**Question 4** : Lequel de ces elements ameliore la navigation ?
- a) Supprimer le menu
- b) Ajouter un fil d'Ariane
- c) Mettre tous les liens en noir sans soulignement
- d) Cacher le bouton retour
**Question 5** : Un bon contraste signifie :
- a) Texte et fond de la meme couleur
- b) Texte clair sur fond clair
- c) Texte sombre sur fond clair (ou inversement)
- d) Utiliser uniquement du noir et blanc
**Question 6** : Quel outil du navigateur permet de simuler un affichage mobile ?
- a) Le gestionnaire de telechargements
- b) Les outils de developpement (F12)
- c) Le mode navigation privee
- d) Le gestionnaire de favoris
---
## Correction
<details>
<summary><strong>Correction Exercice 3.1</strong></summary>
| Situation | Reponse |
|-----------|---------|
| Un menu de navigation avec 25 liens | **Mauvaise** - Trop de choix, le menu doit etre simplifie |
| Un bouton "Retour en haut" sur une longue page | **Bonne** - Facilite la navigation |
| Du texte gris clair sur fond blanc | **Mauvaise** - Contraste insuffisant, illisible |
| Des images qui mettent 10 secondes a charger | **Mauvaise** - Trop lent, les images doivent etre optimisees |
| Un formulaire qui indique clairement les erreurs en rouge | **Bonne** - L'utilisateur comprend ce qu'il doit corriger |
| Un site qui fonctionne uniquement sur ordinateur | **Mauvaise** - Doit etre adaptatif (responsive) |
| Un lien qui change de couleur quand on l'a deja visite | **Bonne** - L'utilisateur sait ou il est deja alle |
| Une page d'accueil avec 3 pop-ups publicitaires | **Mauvaise** - Intrusif et desagreable |
</details>
<details>
<summary><strong>Correction Quiz</strong></summary>
1. **b) User eXperience**
2. **c) 16px**
3. **b) Parce que plus de la moitie du trafic web est sur mobile**
4. **b) Ajouter un fil d'Ariane**
5. **c) Texte sombre sur fond clair (ou inversement)**
6. **b) Les outils de developpement (F12)**
</details>
---
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a> <br />Ces cours sont mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>.