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.

---------

!!! question "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 ?

!!! question "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 ?

!!! question "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é ?

!!! question "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.

!!! question "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 ?

!!! question "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 ?

!!! question "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 ?

---------

!!! question "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>.