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

activité sur l'évolution du design web, sept pages de 1995 à 2026

Browse Source
This commit is contained in:
admin
2026-09-18 08:12:21 +02:00
parent ef1766256d
commit 66e3123da8
9 changed files with 1071 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sequences/web/README.md
+1
View File
@@ -6,6 +6,7 @@
|----------|-------------| |----------|-------------|
| [Introduction au Web](INTRODUCTION.md) | Surface Web, Deep Web, Dark Web, navigateurs | | [Introduction au Web](INTRODUCTION.md) | Surface Web, Deep Web, Dark Web, navigateurs |
| [Historique du Web](historique/README.md) | Évolution du Web, archives, Minitel | | [Historique du Web](historique/README.md) | Évolution du Web, archives, Minitel |
| [Trente ans de design web](activite_epoques.md) | La même page d'accueil habillée à sept époques, de 1995 à 2026 |
| [Moteurs de recherche](recherches/README.md) | Google, référencement, alternatives | | [Moteurs de recherche](recherches/README.md) | Google, référencement, alternatives |
--- ---
sequences/web/activite_epoques.md
+98
View File
@@ -0,0 +1,98 @@
# 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>.
sequences/web/epoques/1995.html
+102
View File
@@ -0,0 +1,102 @@
<HTML>
<HEAD>
<TITLE>Cours NSI / SNT / Socio</TITLE>
</HEAD>
<!-- 1995. Il n'existe pas encore de feuille de style : la mise en forme se fait
avec des attributs directement dans les balises. Les couleurs de la page et
des liens sont declarees sur la balise BODY. -->
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000EE" VLINK="#551A8B">
<CENTER>
<H1>Cours NSI / SNT / Socio</H1>
<FONT SIZE="2" FACE="Times New Roman">Lycee Charlotte Perriand</FONT>
</CENTER>
<HR SIZE="2">
<P>
<FONT FACE="Times New Roman" SIZE="3">
Bienvenue sur cette page. Vous trouverez ici les cours, les exercices et les
ressources de NSI, de SNT et d'algorithmes des graphes en L3 de sociologie
quantitative.
</FONT>
</P>
<HR>
<H2><FONT FACE="Times New Roman">Les matieres</FONT></H2>
<!-- Pas de liste a puces stylisee : on utilise UL, et c'est tout. -->
<UL>
<LI><FONT FACE="Times New Roman"><A HREF="#">NSI Premiere</A> - Numerique et Sciences Informatiques</FONT>
<LI><FONT FACE="Times New Roman"><A HREF="#">NSI Terminale</A> - Numerique et Sciences Informatiques</FONT>
<LI><FONT FACE="Times New Roman"><A HREF="#">SNT</A> - Sciences Numeriques et Technologie</FONT>
<LI><FONT FACE="Times New Roman"><A HREF="#">L3 Sociologie</A> - Algorithmes des graphes</FONT>
</UL>
<HR>
<!-- Le tableau sert ici a ce a quoi il sert vraiment : presenter des donnees.
A partir de 1998, on s'en servira pour tout autre chose. -->
<TABLE BORDER="1" CELLPADDING="4">
<TR BGCOLOR="#C0C0C0">
<TD><FONT FACE="Times New Roman"><B>Niveau</B></FONT></TD>
<TD><FONT FACE="Times New Roman"><B>Horaire</B></FONT></TD>
</TR>
<TR>
<TD><FONT FACE="Times New Roman">Seconde</FONT></TD>
<TD><FONT FACE="Times New Roman">1h30 par semaine</FONT></TD>
</TR>
<TR>
<TD><FONT FACE="Times New Roman">Premiere</FONT></TD>
<TD><FONT FACE="Times New Roman">4h par semaine</FONT></TD>
</TR>
<TR>
<TD><FONT FACE="Times New Roman">Terminale</FONT></TD>
<TD><FONT FACE="Times New Roman">6h par semaine</FONT></TD>
</TR>
</TABLE>
<HR>
<CENTER>
<!-- Le compteur de visites, signe distinctif de l'epoque. -->
<FONT FACE="Courier New" SIZE="2">
Cette page a ete visitee
<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="0" BGCOLOR="#000000"><TR>
<TD><FONT COLOR="#00FF00" FACE="Courier New"><B>0&nbsp;0&nbsp;0&nbsp;4&nbsp;2</B></FONT></TD>
</TR></TABLE>
fois
</FONT>
<P>
<FONT FACE="Times New Roman" SIZE="2">
Derniere mise a jour : 14 novembre 1995<BR>
Cette page est optimisee pour une resolution de 640x480<BR>
<A HREF="#">Ecrire au webmestre</A>
</FONT>
</P>
<HR>
<!-- Barre de navigation entre les epoques. En 1995 elle ne peut etre
qu'une suite de liens separes par des barres verticales. -->
<FONT FACE="Times New Roman" SIZE="2">
<B>1995</B> |
<A HREF="1998.html">1998</A> |
<A HREF="2002.html">2002</A> |
<A HREF="2005.html">2005</A> |
<A HREF="2010.html">2010</A> |
<A HREF="2020.html">2020</A> |
<A HREF="2026.html">2026</A>
</FONT>
</CENTER>
</BODY>
</HTML>
sequences/web/epoques/1998.html
+110
View File
@@ -0,0 +1,110 @@
<HTML>
<HEAD>
<TITLE>*** Cours NSI / SNT / Socio - Le site ! ***</TITLE>
</HEAD>
<!-- 1998. Le fond en mosaique est une image minuscule repetee par le navigateur.
Ici elle est dessinee en SVG et integree directement dans la page, pour que
le fichier fonctionne sans aucun telechargement. Le principe, lui, est
exactement celui de l'epoque : une petite image qui se repete a l'infini. -->
<BODY BACKGROUND="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23000066'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='%23ffffff'/%3E%3Ccircle cx='30' cy='26' r='1' fill='%23ccccff'/%3E%3Ccircle cx='20' cy='34' r='1.2' fill='%23ffffcc'/%3E%3C/svg%3E"
TEXT="#FFFF00" LINK="#00FFFF" VLINK="#FF99FF">
<CENTER>
<FONT FACE="Comic Sans MS, Arial" SIZE="6" COLOR="#FFFF00">
<B>~*~ Cours NSI / SNT / Socio ~*~</B>
</FONT>
<BR>
<MARQUEE BEHAVIOR="scroll" DIRECTION="left" SCROLLAMOUNT="4" WIDTH="80%">
<FONT FACE="Comic Sans MS" COLOR="#00FF00" SIZE="4">
Bienvenue sur mon site !!! N'oubliez pas de signer le livre d'or !!! Bonne visite a tous !!!
</FONT>
</MARQUEE>
</CENTER>
<!-- Le grand changement de 1998 : le tableau ne sert plus a presenter des
donnees, il sert a fabriquer la mise en page. Colonne de gauche pour le
menu, colonne de droite pour le contenu. C'est le seul moyen disponible. -->
<TABLE WIDTH="100%" CELLPADDING="10" CELLSPACING="0" BORDER="0">
<TR VALIGN="TOP">
<!-- Colonne de gauche : le menu -->
<TD WIDTH="170" BGCOLOR="#330066">
<FONT FACE="Comic Sans MS" SIZE="3" COLOR="#FFFF00"><B>MENU</B></FONT>
<HR COLOR="#FFFF00">
<FONT FACE="Comic Sans MS" SIZE="2">
&gt; <A HREF="#">Accueil</A><BR><BR>
&gt; <A HREF="#">NSI Premiere</A><BR><BR>
&gt; <A HREF="#">NSI Terminale</A><BR><BR>
&gt; <A HREF="#">SNT</A><BR><BR>
&gt; <A HREF="#">L3 Sociologie</A><BR><BR>
&gt; <A HREF="#">Livre d'or</A><BR><BR>
&gt; <A HREF="#">Mes liens</A>
</FONT>
<HR COLOR="#FFFF00">
<CENTER>
<FONT FACE="Courier New" SIZE="1" COLOR="#00FF00">
Visiteurs<BR><B>0 0 3 8 1 7</B>
</FONT>
</CENTER>
</TD>
<!-- Colonne de droite : le contenu -->
<TD BGCOLOR="#000033">
<FONT FACE="Comic Sans MS" SIZE="4" COLOR="#FF99FF"><B>Bienvenue !!</B></FONT>
<P>
<FONT FACE="Comic Sans MS" SIZE="3" COLOR="#FFFFFF">
Vous trouverez ici les cours, les exercices et les ressources de
<FONT COLOR="#00FF00">NSI</FONT>, de <FONT COLOR="#00FF00">SNT</FONT> et
d'algorithmes des graphes en L3 de sociologie quantitative.
</FONT>
</P>
<P>
<FONT FACE="Comic Sans MS" SIZE="3" COLOR="#FFFFFF">Les matieres :</FONT>
</P>
<TABLE CELLPADDING="6" CELLSPACING="2" BORDER="0">
<TR><TD BGCOLOR="#660099"><FONT FACE="Comic Sans MS" SIZE="2" COLOR="#FFFFFF"><A HREF="#">NSI Premiere</A> - Numerique et Sciences Informatiques</FONT></TD></TR>
<TR><TD BGCOLOR="#660099"><FONT FACE="Comic Sans MS" SIZE="2" COLOR="#FFFFFF"><A HREF="#">NSI Terminale</A> - Numerique et Sciences Informatiques</FONT></TD></TR>
<TR><TD BGCOLOR="#660099"><FONT FACE="Comic Sans MS" SIZE="2" COLOR="#FFFFFF"><A HREF="#">SNT</A> - Sciences Numeriques et Technologie</FONT></TD></TR>
<TR><TD BGCOLOR="#660099"><FONT FACE="Comic Sans MS" SIZE="2" COLOR="#FFFFFF"><A HREF="#">L3 Sociologie</A> - Algorithmes des graphes</FONT></TD></TR>
</TABLE>
<P>
<!-- Le fameux panneau "en construction", dessine ici en SVG. -->
<IMG SRC="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='90'%3E%3Cpolygon points='60,8 112,82 8,82' fill='%23FFCC00' stroke='%23000' stroke-width='4'/%3E%3Crect x='40' y='34' width='40' height='10' fill='%23000' transform='rotate(-20 60 40)'/%3E%3Ccircle cx='60' cy='66' r='6' fill='%23000'/%3E%3C/svg%3E"
WIDTH="120" HEIGHT="90" ALT="En construction" BORDER="0">
<BR>
<FONT FACE="Comic Sans MS" SIZE="2" COLOR="#FFFF00"><B>Page en construction !</B></FONT>
</P>
</TD>
</TR>
</TABLE>
<CENTER>
<HR COLOR="#FFFF00" WIDTH="80%">
<FONT FACE="Comic Sans MS" SIZE="2" COLOR="#FFFFFF">
Site optimise pour Netscape Navigator 4.0 en 800x600<BR>
Derniere mise a jour : 3 mars 1998<BR>
<A HREF="#">webmestre@lycee-perriand.fr</A>
</FONT>
<P>
<FONT FACE="Comic Sans MS" SIZE="2" COLOR="#FFFFFF">
<A HREF="1995.html">1995</A> |
<B><FONT COLOR="#FFFF00">1998</FONT></B> |
<A HREF="2002.html">2002</A> |
<A HREF="2005.html">2005</A> |
<A HREF="2010.html">2010</A> |
<A HREF="2020.html">2020</A> |
<A HREF="2026.html">2026</A>
</FONT>
</P>
</CENTER>
</BODY>
</HTML>
sequences/web/epoques/2002.html
+136
View File
@@ -0,0 +1,136 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cours NSI / SNT / Socio</title>
<!-- 2002. Grande nouveaute : la feuille de style. Les couleurs et les polices
quittent enfin les balises pour se regrouper ici. En revanche la mise en
page repose toujours sur un tableau : les techniques CSS de positionnement
ne sont pas encore fiables d'un navigateur a l'autre.
Largeur fixe de 760 pixels, calee sur les ecrans 800x600 de l'epoque. -->
<style type="text/css">
body {
background-color: #6b7d94;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
margin: 0;
padding: 16px 0;
}
#page {
width: 760px;
margin: 0 auto;
background-color: #ffffff;
border: 1px solid #44536b;
}
#entete {
background-color: #44536b;
color: #ffffff;
padding: 14px 18px;
}
#entete h1 { font-size: 18px; margin: 0; letter-spacing: 1px; }
#entete .sous { font-size: 10px; color: #c3cedd; }
#menu {
background-color: #eef1f5;
border-right: 1px solid #c3cedd;
width: 160px;
padding: 14px;
vertical-align: top;
}
#menu a { display: block; padding: 4px 0; border-bottom: 1px dotted #c3cedd; }
#contenu { padding: 16px 20px; vertical-align: top; }
h2 { font-size: 13px; color: #44536b; border-bottom: 1px solid #c3cedd; padding-bottom: 4px; }
a { color: #1f4e8c; }
a:hover { color: #cc3300; }
ul.matieres { list-style: square; padding-left: 18px; line-height: 1.8; }
#pied {
background-color: #eef1f5;
border-top: 1px solid #c3cedd;
padding: 10px 18px;
font-size: 10px;
color: #666666;
}
.badge {
border: 1px solid #44536b;
padding: 1px 5px;
font-size: 9px;
background-color: #ffffff;
}
</style>
</head>
<body>
<div id="page">
<div id="entete">
<h1>Cours NSI / SNT / Socio</h1>
<span class="sous">Lycee Charlotte Perriand</span>
</div>
<!-- La mise en page reste un tableau, avec les attributs de l'epoque. -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td id="menu">
<a href="#">Accueil</a>
<a href="#">NSI Premiere</a>
<a href="#">NSI Terminale</a>
<a href="#">SNT</a>
<a href="#">L3 Sociologie</a>
<a href="#">Contact</a>
</td>
<td id="contenu">
<h2>Bienvenue</h2>
<p>
Vous trouverez ici les cours, les exercices et les ressources de NSI,
de SNT et d'algorithmes des graphes en L3 de sociologie quantitative.
</p>
<h2>Les matieres</h2>
<ul class="matieres">
<li><a href="#">NSI Premiere</a> : Numerique et Sciences Informatiques</li>
<li><a href="#">NSI Terminale</a> : Numerique et Sciences Informatiques</li>
<li><a href="#">SNT</a> : Sciences Numeriques et Technologie</li>
<li><a href="#">L3 Sociologie</a> : Algorithmes des graphes</li>
</ul>
<h2>Horaires</h2>
<table cellpadding="4" cellspacing="0" border="0" width="100%" style="border: 1px solid #c3cedd;">
<tr style="background-color: #eef1f5;">
<th align="left">Niveau</th><th align="left">Horaire hebdomadaire</th>
</tr>
<tr><td>Seconde</td><td>1h30</td></tr>
<tr style="background-color: #f7f9fb;"><td>Premiere</td><td>4h</td></tr>
<tr><td>Terminale</td><td>6h</td></tr>
</table>
</td>
</tr>
</table>
<div id="pied">
Derniere mise a jour : 12 septembre 2002 &nbsp;|&nbsp;
<span class="badge">XHTML 1.0</span>
<span class="badge">CSS</span>
&nbsp;|&nbsp; Optimise pour 800x600
<div style="margin-top: 8px;">
<a href="1995.html">1995</a> |
<a href="1998.html">1998</a> |
<strong>2002</strong> |
<a href="2005.html">2005</a> |
<a href="2010.html">2010</a> |
<a href="2020.html">2020</a> |
<a href="2026.html">2026</a>
</div>
</div>
</div>
</body>
</html>
sequences/web/epoques/2005.html
+145
View File
@@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>xX-cours-nsi-snt-socio-Xx :: Mon blog</title>
<!-- 2005. L'epoque des blogs personnels et des profils que chacun decorait
lui-meme. Le contraste avec 2002 est brutal : ce n'est plus un site
institutionnel, c'est une page qu'on personnalise a l'extreme.
Les elements caracteristiques : fond a paillettes, texte qui clignote,
musique qui se lance toute seule, module de commentaires, pseudo a
rallonge, et beaucoup, beaucoup de rose. -->
<style>
body {
margin: 0;
padding: 10px;
background-color: #12002b;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23ff66cc' stroke-width='1.2'%3E%3Cpath d='M12 4 L13.5 9 L18 10 L13.5 11 L12 16 L10.5 11 L6 10 L10.5 9 Z'/%3E%3Cpath d='M44 30 L45 33 L48 34 L45 35 L44 38 L43 35 L40 34 L43 33 Z' stroke='%2366ffff'/%3E%3Cpath d='M28 48 L29 51 L32 52 L29 53 L28 56 L27 53 L24 52 L27 51 Z' stroke='%23ffff66'/%3E%3C/g%3E%3C/svg%3E");
font-family: "Comic Sans MS", cursive;
color: #ffffff;
}
#cadre {
max-width: 800px;
margin: 0 auto;
border: 4px double #ff66cc;
background-color: rgba(30, 0, 60, 0.88);
padding: 12px;
}
h1 {
text-align: center;
font-size: 34px;
color: #ff66cc;
text-shadow: 2px 2px 0 #000000, 4px 4px 0 #66ffff;
margin: 6px 0;
}
.pseudo { text-align: center; color: #66ffff; font-size: 13px; }
.clignote { animation: clignote 1s steps(2, start) infinite; color: #ffff66; font-weight: bold; }
@keyframes clignote { to { visibility: hidden; } }
.article {
border: 2px dashed #66ffff;
background-color: #2a0050;
padding: 10px;
margin: 14px 0;
}
.article h2 { color: #ffff66; font-size: 20px; margin: 0 0 6px 0; text-shadow: 1px 1px 0 #ff0066; }
.date { font-size: 11px; color: #ff99dd; }
a { color: #66ffff; }
a:hover { color: #ffff66; }
ul { list-style: none; padding-left: 0; }
ul li { padding: 5px; margin: 4px 0; background-color: #3d0070; border-left: 6px solid #ff66cc; }
#lecteur {
border: 2px solid #ffff66; background-color: #000000;
padding: 8px; text-align: center; margin: 10px 0; font-size: 12px;
}
#lecteur button {
font-family: "Comic Sans MS", cursive; font-size: 13px;
background-color: #ff66cc; color: #12002b; border: 2px outset #ffffff;
padding: 4px 12px; cursor: pointer;
}
#coms { border: 2px solid #ff66cc; padding: 10px; margin-top: 14px; }
#coms h3 { color: #ff66cc; margin: 0 0 8px 0; }
.com { background-color: #2a0050; padding: 6px; margin: 6px 0; font-size: 12px; }
#pied { text-align: center; font-size: 11px; margin-top: 14px; color: #ff99dd; }
marquee { color: #ffff66; font-size: 16px; }
</style>
</head>
<body>
<div id="cadre">
<h1>xX-Cours-NSI-SNT-Socio-Xx</h1>
<p class="pseudo">
Le blog officiel des cours du lycee Charlotte Perriand<br>
<span class="clignote">NOUVEAU !!!</span> 4 matieres en ligne !!
</p>
<marquee scrollamount="5">
Bienvenue sur mon blog !!! Lache tes coms !!! Ajoute-moi dans tes favoris !!! ^^
</marquee>
<!-- En 2005, la musique se lancait toute seule au chargement de la page.
Les navigateurs modernes l'interdisent : il faut desormais une action
de l'utilisateur. Le bouton ci-dessous explique justement pourquoi. -->
<div id="lecteur">
<span style="color:#ffff66;">&#9835; Ma musique &#9835;</span>
<button type="button" onclick="expliquer()">Lecture</button>
<div id="message" style="color:#66ffff; margin-top:6px;"></div>
</div>
<div class="article">
<h2>Bienvenue sur mon blog !!</h2>
<p class="date">Poste le 14 mars 2005 a 22h47</p>
<p>
Vous trouverez ici les cours, les exercices et les ressources de NSI, de SNT
et d'algorithmes des graphes en L3 de sociologie quantitative. Bonne visite
a tous et a toutes :-)
</p>
</div>
<div class="article">
<h2>Les matieres</h2>
<p class="date">Poste le 14 mars 2005 a 22h51</p>
<ul>
<li><a href="#">NSI Premiere</a> :: Numerique et Sciences Informatiques</li>
<li><a href="#">NSI Terminale</a> :: Numerique et Sciences Informatiques</li>
<li><a href="#">SNT</a> :: Sciences Numeriques et Technologie</li>
<li><a href="#">L3 Sociologie</a> :: Algorithmes des graphes</li>
</ul>
</div>
<div id="coms">
<h3>Lache tes coms (3)</h3>
<div class="com"><b>xX_camille_Xx</b> : trop bien ton blog !! passe sur le mien ^^</div>
<div class="com"><b>sofiane62</b> : +1 continue comme ca</div>
<div class="com"><b>anonyme</b> : la musique elle est trop bien</div>
</div>
<div id="pied">
Visiteurs : 0 0 9 3 4 2 &nbsp;|&nbsp; Derniere mise a jour : 14 mars 2005<br>
<a href="#">Livre d'or</a> - <a href="#">Mes amis</a> - <a href="#">Me contacter</a>
<p>
<a href="1995.html">1995</a> |
<a href="1998.html">1998</a> |
<a href="2002.html">2002</a> |
<b style="color:#ffff66;">2005</b> |
<a href="2010.html">2010</a> |
<a href="2020.html">2020</a> |
<a href="2026.html">2026</a>
</p>
</div>
</div>
<script>
function expliquer() {
document.getElementById("message").textContent =
"En 2005, cette musique se lancait toute seule des l'ouverture de la page. " +
"Depuis, les navigateurs le refusent : le son exige une action de votre part.";
}
</script>
</body>
</html>
sequences/web/epoques/2010.html
+164
View File
@@ -0,0 +1,164 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Cours NSI / SNT / Socio</title>
<!-- 2010. L'epoque dite "web 2.0". Les tableaux ont disparu de la mise en page,
remplaces par des blocs flottants. Le CSS3 arrive et apporte enfin, sans
images, ce qu'il fallait auparavant decouper dans Photoshop : coins
arrondis, degrades, ombres portees.
La largeur reste fixe, 960 pixels, parce que le telephone ne sert pas
encore vraiment a naviguer. Les boutons brillants et les badges "beta"
sont la signature visuelle de ces annees. -->
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 0 0 40px 0;
background: #e8ebee url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23e8ebee'/%3E%3Crect width='2' height='2' fill='%23e3e6ea'/%3E%3C/svg%3E");
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #444;
}
#bandeau {
background: linear-gradient(to bottom, #4a7fb5, #2f5c8a);
border-bottom: 3px solid #1d3f61;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
#conteneur { width: 960px; margin: 0 auto; }
#bandeau #conteneur { padding: 18px 0; }
h1 {
margin: 0; color: #fff; font-size: 28px; font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
float: left;
}
.beta {
display: inline-block; margin-left: 10px; vertical-align: 8px;
background: linear-gradient(to bottom, #ffd54a, #e8a712);
color: #6b4700; font-size: 10px; font-weight: bold; text-transform: uppercase;
padding: 3px 8px; border-radius: 10px; border: 1px solid #c98f0a;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
#nav { float: right; padding-top: 10px; }
#nav a {
color: #dce8f4; text-decoration: none; margin-left: 18px; font-size: 13px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
}
#nav a:hover { color: #fff; text-decoration: underline; }
.clear { clear: both; }
#intro {
background: #fff; border: 1px solid #c8cdd3; border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
padding: 22px 26px; margin-top: 26px;
}
#intro p { font-size: 15px; line-height: 1.6; margin: 0; color: #555; }
.cartes { margin-top: 22px; }
.carte {
float: left; width: 228px; margin-right: 16px;
background: #fff; border: 1px solid #c8cdd3; border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
padding: 16px;
}
.carte:last-child { margin-right: 0; }
.carte h2 { margin: 0 0 8px 0; font-size: 15px; color: #2f5c8a; }
.carte p { margin: 0 0 12px 0; color: #777; line-height: 1.5; }
.bouton {
display: inline-block; text-decoration: none;
background: linear-gradient(to bottom, #6ba3d6, #3a6f9f);
border: 1px solid #2c5a86; border-radius: 5px;
color: #fff; font-weight: bold; font-size: 12px; padding: 6px 14px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 2px rgba(0,0,0,0.2);
}
.bouton:hover { background: linear-gradient(to bottom, #7db3e2, #457fb0); }
#partage {
margin-top: 26px; padding: 14px 18px; background: #fff;
border: 1px solid #c8cdd3; border-radius: 8px; color: #888;
}
#partage span {
display: inline-block; margin-right: 8px; padding: 4px 10px;
border: 1px solid #c8cdd3; border-radius: 4px;
background: linear-gradient(to bottom, #ffffff, #eef1f4); font-size: 11px;
}
#pied {
margin-top: 26px; padding-top: 14px; border-top: 1px solid #c8cdd3;
color: #999; font-size: 12px; text-align: center;
}
#pied a { color: #2f5c8a; }
</style>
</head>
<body>
<div id="bandeau">
<div id="conteneur">
<h1>Cours NSI / SNT / Socio <span class="beta">beta</span></h1>
<div id="nav">
<a href="#">Accueil</a><a href="#">Matieres</a><a href="#">Ressources</a><a href="#">Contact</a>
</div>
<div class="clear"></div>
</div>
</div>
<div id="conteneur">
<div id="intro">
<p>
Vous trouverez ici les cours, les exercices et les ressources de NSI, de SNT
et d'algorithmes des graphes en L3 de sociologie quantitative.
</p>
</div>
<div class="cartes">
<div class="carte">
<h2>NSI Premiere</h2>
<p>Numerique et Sciences Informatiques</p>
<a class="bouton" href="#">Acceder</a>
</div>
<div class="carte">
<h2>NSI Terminale</h2>
<p>Numerique et Sciences Informatiques</p>
<a class="bouton" href="#">Acceder</a>
</div>
<div class="carte">
<h2>SNT</h2>
<p>Sciences Numeriques et Technologie</p>
<a class="bouton" href="#">Acceder</a>
</div>
<div class="carte">
<h2>L3 Sociologie</h2>
<p>Algorithmes des graphes</p>
<a class="bouton" href="#">Acceder</a>
</div>
<div class="clear"></div>
</div>
<div id="partage">
Partager cette page :
<span>J'aime</span><span>Tweeter</span><span>Partager</span><span>+1</span>
</div>
<div id="pied">
Lycee Charlotte Perriand &nbsp;|&nbsp; Derniere mise a jour : 4 octobre 2010
&nbsp;|&nbsp; Largeur optimale : 1024 pixels
<p>
<a href="1995.html">1995</a> |
<a href="1998.html">1998</a> |
<a href="2002.html">2002</a> |
<a href="2005.html">2005</a> |
<strong>2010</strong> |
<a href="2020.html">2020</a> |
<a href="2026.html">2026</a>
</p>
</div>
</div>
</body>
</html>
sequences/web/epoques/2020.html
+155
View File
@@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cours NSI / SNT / Socio</title>
<!-- 2020. Le changement le plus important ne se voit pas a l'ecran : c'est la
balise meta viewport, juste au-dessus. Elle indique au telephone de ne pas
faire semblant d'etre un ecran d'ordinateur. Plus de la moitie des visites
se font desormais sur mobile, et la page doit donc s'adapter a la largeur
disponible : c'est ce qu'on appelle le responsive.
Le style change aussi : fini les degrades et les ombres imitant le relief.
On revient au plat, avec beaucoup d'espace vide, peu de couleurs, et des
polices deja installees sur la machine pour eviter un telechargement. -->
<style>
:root {
--fond: #ffffff;
--texte: #1f2933;
--gris: #616e7c;
--trait: #e4e7eb;
--accent: #2f6f4f;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 17px;
line-height: 1.6;
color: var(--texte);
background: var(--fond);
}
header {
position: sticky; top: 0;
background: var(--fond);
border-bottom: 1px solid var(--trait);
padding: 14px 0;
}
.conteneur { width: min(1080px, 92vw); margin: 0 auto; }
header .conteneur { display: flex; align-items: center; justify-content: space-between; }
.marque { font-weight: 600; font-size: 17px; }
nav a {
color: var(--gris); text-decoration: none; margin-left: 22px; font-size: 15px;
}
nav a:hover { color: var(--texte); }
h1 {
font-size: clamp(30px, 5vw, 44px);
line-height: 1.15;
margin: 56px 0 16px 0;
letter-spacing: -0.02em;
}
.chapo { font-size: 19px; color: var(--gris); max-width: 62ch; margin: 0 0 48px 0; }
.grille {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 18px;
margin-bottom: 64px;
}
.carte {
border: 1px solid var(--trait);
border-radius: 10px;
padding: 22px;
text-decoration: none;
color: inherit;
display: block;
transition: border-color 0.15s, transform 0.15s;
}
.carte:hover { border-color: var(--accent); transform: translateY(-2px); }
.carte h2 { font-size: 17px; margin: 0 0 6px 0; }
.carte p { margin: 0; color: var(--gris); font-size: 15px; }
footer {
border-top: 1px solid var(--trait);
padding: 28px 0 48px 0;
color: var(--gris);
font-size: 14px;
}
footer a { color: var(--gris); }
.epoques { margin-top: 12px; }
.epoques a, .epoques strong { margin-right: 6px; }
/* Sous 640 pixels, la barre de navigation passe sous le titre au lieu
de rester a cote : c'est la media query qui le decide. */
@media (max-width: 640px) {
header .conteneur { flex-direction: column; align-items: flex-start; gap: 8px; }
nav a { margin-left: 0; margin-right: 18px; }
}
</style>
</head>
<body>
<header>
<div class="conteneur">
<span class="marque">Cours NSI / SNT / Socio</span>
<nav>
<a href="#">NSI</a>
<a href="#">SNT</a>
<a href="#">L3 Socio</a>
<a href="#">Ressources</a>
</nav>
</div>
</header>
<main class="conteneur">
<h1>Cours, exercices et ressources</h1>
<p class="chapo">
Vous trouverez ici les cours, les exercices et les ressources de NSI, de SNT
et d'algorithmes des graphes en L3 de sociologie quantitative.
</p>
<div class="grille">
<a class="carte" href="#">
<h2>NSI Premiere</h2>
<p>Numerique et Sciences Informatiques</p>
</a>
<a class="carte" href="#">
<h2>NSI Terminale</h2>
<p>Numerique et Sciences Informatiques</p>
</a>
<a class="carte" href="#">
<h2>SNT</h2>
<p>Sciences Numeriques et Technologie</p>
</a>
<a class="carte" href="#">
<h2>L3 Sociologie</h2>
<p>Algorithmes des graphes</p>
</a>
</div>
</main>
<footer>
<div class="conteneur">
Lycee Charlotte Perriand
<div class="epoques">
<a href="1995.html">1995</a>
<a href="1998.html">1998</a>
<a href="2002.html">2002</a>
<a href="2005.html">2005</a>
<a href="2010.html">2010</a>
<strong>2020</strong>
<a href="2026.html">2026</a>
</div>
</div>
</footer>
</body>
</html>
sequences/web/epoques/2026.html
+160
View File
@@ -0,0 +1,160 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cours NSI / SNT / Socio</title>
<!-- 2026. La page s'adapte maintenant a deux choses en plus de la largeur de
l'ecran : la preference d'affichage de la personne, clair ou sombre, et son
eventuel besoin de reduire les animations. Ce ne sont plus des reglages du
site, ce sont des reglages de l'utilisateur, que la page vient lire.
Le reste de la mode : de tres grandes typographies, des tailles fluides qui
n'ont plus de valeur fixe, et des elements qui apparaissent au defilement.
Une question pour la classe : parmi tout ce que vous voyez ici, qu'est-ce
qui sert vraiment a lire le contenu ? -->
<style>
:root {
color-scheme: light dark;
--fond: #0e1116;
--panneau: #161b22;
--texte: #e6edf3;
--gris: #8b949e;
--trait: #262d36;
--accent: #5fd08a;
}
@media (prefers-color-scheme: light) {
:root {
--fond: #fbfcfd; --panneau: #ffffff; --texte: #131820;
--gris: #5b6672; --trait: #e2e6ea; --accent: #1f7a4d;
}
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--fond);
color: var(--texte);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: clamp(16px, 1.1vw + 13px, 19px);
line-height: 1.65;
}
.conteneur { width: min(1120px, 90vw); margin: 0 auto; }
header {
position: sticky; top: 0; z-index: 10;
backdrop-filter: blur(10px);
background: color-mix(in srgb, var(--fond) 80%, transparent);
border-bottom: 1px solid var(--trait);
padding: 12px 0;
}
header .conteneur { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.marque { font-weight: 650; letter-spacing: -0.01em; }
nav a { color: var(--gris); text-decoration: none; margin-left: 20px; font-size: 0.9em; }
nav a:hover { color: var(--accent); }
h1 {
font-size: clamp(38px, 7vw, 76px);
line-height: 1.02;
letter-spacing: -0.035em;
font-weight: 680;
margin: clamp(48px, 9vw, 104px) 0 20px 0;
max-width: 16ch;
}
.chapo { font-size: 1.15em; color: var(--gris); max-width: 58ch; margin: 0 0 clamp(40px, 7vw, 80px) 0; }
.grille {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
margin-bottom: 96px;
}
.carte {
background: var(--panneau);
border: 1px solid var(--trait);
border-radius: 16px;
padding: 26px;
color: inherit; text-decoration: none; display: block;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.carte:hover { border-color: var(--accent); transform: translateY(-3px); }
.carte h2 { font-size: 1em; margin: 0 0 6px 0; }
.carte p { margin: 0; color: var(--gris); font-size: 0.9em; }
/* Apparition au defilement. La preference systeme "reduire les animations"
est respectee juste en dessous : sans cela, la page serait penible pour
les personnes sensibles au mouvement. */
.apparait { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.apparait.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.apparait { opacity: 1; transform: none; transition: none; }
.carte:hover { transform: none; }
}
footer { border-top: 1px solid var(--trait); padding: 30px 0 60px 0; color: var(--gris); font-size: 0.85em; }
footer a { color: var(--gris); }
.epoques { margin-top: 12px; }
.epoques a, .epoques strong { margin-right: 8px; }
</style>
</head>
<body>
<header>
<div class="conteneur">
<span class="marque">Cours NSI / SNT / Socio</span>
<nav>
<a href="#">NSI</a>
<a href="#">SNT</a>
<a href="#">L3 Socio</a>
<a href="#">Ressources</a>
</nav>
</div>
</header>
<main class="conteneur">
<h1 class="apparait">Cours, exercices et ressources</h1>
<p class="chapo apparait">
Vous trouverez ici les cours, les exercices et les ressources de NSI, de SNT
et d'algorithmes des graphes en L3 de sociologie quantitative.
</p>
<div class="grille">
<a class="carte apparait" href="#"><h2>NSI Premiere</h2><p>Numerique et Sciences Informatiques</p></a>
<a class="carte apparait" href="#"><h2>NSI Terminale</h2><p>Numerique et Sciences Informatiques</p></a>
<a class="carte apparait" href="#"><h2>SNT</h2><p>Sciences Numeriques et Technologie</p></a>
<a class="carte apparait" href="#"><h2>L3 Sociologie</h2><p>Algorithmes des graphes</p></a>
</div>
</main>
<footer>
<div class="conteneur">
Lycee Charlotte Perriand
<div class="epoques">
<a href="1995.html">1995</a>
<a href="1998.html">1998</a>
<a href="2002.html">2002</a>
<a href="2005.html">2005</a>
<a href="2010.html">2010</a>
<a href="2020.html">2020</a>
<strong>2026</strong>
</div>
</div>
</footer>
<script>
const observateur = new IntersectionObserver((entrees) => {
for (const e of entrees) {
if (e.isIntersecting) { e.target.classList.add("visible"); observateur.unobserve(e.target); }
}
}, { threshold: 0.15 });
document.querySelectorAll(".apparait").forEach(el => observateur.observe(el));
</script>
</body>
</html>