SNT/sequences/web/activite_epoques.md

# Trente ans de design web

> Voici la page d'accueil de votre site de cours. La même, sept fois.

> Le texte ne change jamais : même titre, même phrase de présentation, mêmes quatre matières. Seul l'habillage change, selon l'année où la page aurait été écrite.

Ouvrez-les dans l'ordre, et gardez cette page de questions à côté.

| Année | Page |
|-------|------|
| 1995 | [Ouvrir la page de 1995](https://florianmathieu.prof/hub-docs/snt/sequences/web/epoques/1995.html) |
| 1998 | [Ouvrir la page de 1998](https://florianmathieu.prof/hub-docs/snt/sequences/web/epoques/1998.html) |
| 2002 | [Ouvrir la page de 2002](https://florianmathieu.prof/hub-docs/snt/sequences/web/epoques/2002.html) |
| 2005 | [Ouvrir la page de 2005](https://florianmathieu.prof/hub-docs/snt/sequences/web/epoques/2005.html) |
| 2010 | [Ouvrir la page de 2010](https://florianmathieu.prof/hub-docs/snt/sequences/web/epoques/2010.html) |
| 2020 | [Ouvrir la page de 2020](https://florianmathieu.prof/hub-docs/snt/sequences/web/epoques/2020.html) |
| 2026 | [Ouvrir la page de 2026](https://florianmathieu.prof/hub-docs/snt/sequences/web/epoques/2026.html) |

**Pour chaque page, faites deux choses** : regardez-la, puis affichez son code source avec **Ctrl + U**, comme au TP 1. Les commentaires laissés dans le code vous aideront.

---------

### 1. 1995

1. Ouvrez le code source. Cherchez une balise `<style>` ou un fichier `.css`. Que constatez-vous ?
2. Puisqu'il n'existe pas de feuille de style, où sont écrites les couleurs et les polices ? Donnez un exemple précis tiré du code.
3. Le bas de page annonce « optimisee pour une resolution de 640x480 ». Mesurez la largeur de votre écran. Que cela vous dit-il des écrans de 1995 ?
4. Cette page contient un tableau. À quoi sert-il ici ?

### 2. 1998

5. Ouvrez le code source. Combien de balises `<table>` trouvez-vous ? À quoi servent-elles cette fois ?
6. Le fond de la page est une seule petite image, répétée automatiquement. En 1998, la plupart des gens se connectaient avec un modem à 56 kbit/s, soit environ 7 ko par seconde. Expliquez pourquoi on préférait une petite image répétée plutôt qu'une grande image de fond.
7. Repérez la balise `<marquee>`. Que fait-elle ? Cette balise est aujourd'hui abandonnée : à votre avis, pourquoi ?
8. La page se dit « optimise pour Netscape Navigator 4.0 ». Que pensez-vous d'un site qui ne fonctionne bien que dans un seul navigateur ?

### 3. 2002

9. Cherchez de nouveau la balise `<style>`. Elle existe cette fois. Qu'est-ce que cela change pour la personne qui écrit le site ?
10. Malgré cette nouveauté, la mise en page repose toujours sur un tableau. Retrouvez-le dans le code.
11. La page fait 760 pixels de large, et pas davantage. Comparez avec 1995 : qu'en déduisez-vous sur les écrans de 2002 ?
12. Comparez visuellement 1998 et 2002. Quel mot choisiriez-vous pour décrire ce qui a changé ?

### 4. 2005

13. Cette page n'est plus un site officiel, mais un blog personnel. Relevez trois éléments qui le montrent.
14. Cliquez sur le bouton « Lecture ». Lisez le message affiché. Pourquoi les navigateurs ont-ils fini par interdire ce comportement ?
15. Combien de couleurs différentes comptez-vous, à vue d'œil ? Et combien sur la page de 2002 ?
16. Cette page est-elle agréable à lire ? Justifiez, en distinguant ce qui vous amuse de ce qui vous gêne.

### 5. 2010

17. Les coins arrondis, les dégradés et les ombres de cette page ne sont pas des images : ils sont écrits en CSS. Retrouvez dans le code les mots `border-radius`, `gradient` et `shadow`.
18. Avant 2010, ces effets s'obtenaient en découpant des images dans un logiciel de retouche. Quel avantage voyez-vous à les écrire en CSS ?
19. Cherchez la balise `<table>`. Combien en trouvez-vous ? Comparez avec 1998.
20. Réduisez la largeur de la fenêtre du navigateur, jusqu'à la moitié de l'écran. Que se passe-t-il ? Pourquoi, à votre avis ?

### 6. 2020

21. Tout en haut du code, repérez la ligne qui commence par `<meta name="viewport"`. D'après le commentaire qui la précède, à quoi sert-elle ?
22. Refaites le test de la question 20 sur cette page. Qu'observez-vous de différent ?
23. Quel événement, entre 2010 et 2020, explique cette évolution ?
24. Comparez la quantité de couleurs et d'effets avec la page de 2010. La tendance vous semble-t-elle aller vers le plus ou vers le moins ?

### 7. 2026

25. Cette page s'adapte à un réglage de votre ordinateur. Changez le thème de votre système, ou de votre navigateur, de clair à sombre. Que se passe-t-il ?
26. Le code contient une règle `prefers-reduced-motion`. Cherchez le commentaire qui l'accompagne et expliquez à qui elle sert.
27. En quoi est-ce différent de toutes les époques précédentes, où c'était le site qui décidait de tout ?

---------

### Pour finir

28. Rangez les sept pages de la plus lisible à la moins lisible, selon vous. Comparez votre classement avec celui de votre voisin.
29. Sur les sept, laquelle fonctionnerait encore correctement sur un téléphone ? Justifiez.
30. Une seule chose n'a pas changé en trente ans sur ces pages. Laquelle ? Que pouvez-vous en conclure ?

---------

### Synthèse

À recopier et compléter.

- De 1995 à 2002, la mise en page se fabrique avec des ........................, détournés de leur usage normal.
- L'arrivée du ................ permet de séparer le contenu de sa mise en forme.
- La largeur des pages augmente au fil du temps parce que les .................... deviennent plus grands.
- À partir de ................, la page doit s'adapter à la taille de l'écran : c'est ce qu'on appelle le ..........................
- Aujourd'hui, la page s'adapte aussi aux ............................ de la personne qui la consulte, comme le thème sombre.
- Ce qui n'a jamais changé, c'est ..............................

---------

Auteur : Florian Mathieu

Licence CC BY-SA

<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a> <br />Ce cours est mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International</a>.