99 lines
6.4 KiB
Markdown
99 lines
6.4 KiB
Markdown
# 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>.
|