</script>
</head>
<body>
- <a class="sws-previous" href="prog_internet_03.xhtml" />
+ <a class="sws-previous" href="unix_prog_web_03.xhtml" />
<div class="sws-slide sws-cover sws-option-nofooter">
- <h1>Programmation Internet</h1>
+ <h1>Unix et Programmation Web</h1>
<h1>Cours 4</h1>
<a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
<a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
</div>
-
- <div class="sws-slide" >
- <h1> Plan </h1>
- <ol >
- <li> Systèmes d'exploitation ✔</li>
- <li> Réseaux et Internet ✔ </li>
- <li> Le Web
- <ul class="empty">
- <li class="hl">3.1 Internet et ses services</li>
- <li>3.2 Fonctionnement du Web</li>
- <li>3.3 Adressage des documents Web</li>
- <li>3.4 Le protocole HTTP</li>
- <li>3.5 HTML, le format des documents</li>
- </ul>
- </li>
- </ol>
- </div>
- <h1>Internet et ses services </h1>
+ <h1>Internet et ses services</h1>
<div class="sws-slide">
<h1> Bref historique d'Internet (1/2)</h1>
<table class="desc">
</div>
- <div class="sws-slide" >
- <h1> Plan </h1>
- <ol >
- <li class="done" > Systèmes d'exploitation</li>
- <li class="done" > Réseaux et Internet </li>
- <li> Le Web
- <ul class="empty">
- <li class="done">3.1 Internet et ses services</li>
- <li class="hl" >3.2 Fonctionnement du Web</li>
- <li class="">3.3 Adressage des documents Web </li>
- <li>3.4 Le protocole HTTP</li>
- <li>3.5 HTML, le format des documents</li>
- </ul>
- </li>
- </ol>
- </div>
<h1> Fonctionnement du Web </h1>
<div class="sws-slide">
<h1>Fonctionnement du Web</h1>
</ul>
</div>
- <div class="sws-slide" >
- <h1> Plan </h1>
- <ol >
- <li class="done" > Systèmes d'exploitation</li>
- <li class="done" > Réseaux et Internet </li>
- <li> Le Web
- <ul class="empty">
- <li class="done">3.1 Internet et ses services</li>
- <li class="done" >3.2 Fonctionnement du Web</li>
- <li class="hl">3.3 Adressage des documents Web </li>
- <li>3.4 Le protocole HTTP</li>
- <li>3.5 HTML, le format des documents</li>
- </ul>
- </li>
- </ol>
- </div>
<h1> Adressage des documents Web </h1>
<div class="sws-slide">
<h1>Adressage des documents Web (1/3)</h1>
</div>
<h1>Le protocole HTTP</h1>
- <div class="sws-slide" >
- <h1> Plan </h1>
- <ol >
- <li class="done" > Systèmes d'exploitation</li>
- <li class="done" > Réseaux et Internet </li>
- <li> Le Web
- <ul class="empty">
- <li class="done">3.1 Internet et ses services</li>
- <li class="done" >3.2 Fonctionnement du Web</li>
- <li class="done">3.3 Adressage des documents Web </li>
- <li class="hl">3.4 Le protocole HTTP</li>
- <li>3.5 HTML, le format des documents</li>
- </ul>
- </li>
- </ol>
- </div>
-
<div class="sws-slide">
<h1>Caractéristiques du protocole HTTP</h1>
<ul>
<h1>Démo</h1>
</div>
<h1>HTML, le format des documents</h1>
- <div class="sws-slide" >
- <h1> Plan </h1>
- <ol >
- <li class="done" > Systèmes d'exploitation</li>
- <li class="done" > Réseaux et Internet </li>
- <li> Le Web
- <ul class="empty">
- <li class="done">3.1 Internet et ses services</li>
- <li class="done" >3.2 Fonctionnement du Web</li>
- <li class="done">3.3 Adressage des documents Web </li>
- <li class="done">3.4 Le protocole HTTP</li>
- <li class="hl">3.5 HTML, le format des documents</li>
- </ul>
- </li>
- </ol>
- </div>
<div class="sws-slide">
<h1>HTML</h1>
<p>
<thead>
<tr><th style="width:65%;">Exemple</th> <th>Rendu par défaut</th></tr>
</thead>
- <tr><td ><tt><![CDATA[Un texte <b>en gras</b> ]]></tt></td><td>Un
+ <tr><td ><tt><![CDATA[Un texte <b>en gras</b>
+ ]]></tt></td><td style="font-family:serif;color:black;">Un
texte <b>en gras</b></td></tr>
<tr><td ><code><![CDATA[<a href="http://www.u-psud.fr">Un lien</a> ]]></code></td>
- <td><a style="color:blue;text-decoration:underline;"
+ <td><a style="color:blue;text-decoration:underline;font-family:serif;"
href="http://www.u-psud.fr">Un lien</a></td></tr>
- <tr><td><code><![CDATA[<ul>
+ <tr><td><code><![CDATA[<ul >
<li>Premièrement</li>
<li>Deuxièmement</li>
-</ul> ]]></code></td> <td><ul>
+</ul> ]]></code></td> <td><ul style="font-family:serif;color:black;">
<li>Premièrement</li>
<li>Deuxièmement</li>
</ul>
</html>]]></code>
</div>
</div>
+<div class="sws-slide">
+ <h1>Structure d'un document XHTML</h1>
+ <p>Pour être <i>valide</i> un document XHTML contient <a>au
+ moins</a> les balises suivantes : </p>
+ <ul> <li>Une balise <tt>html</tt> qui est la <a>racine</a> (elle
+ englobe toutes les autres balises). La balise <tt>html</tt>
+ contient deux balises filles: <tt>head</tt> et <tt>body</tt></li>
+ <li>La balise <tt>head</tt> représente l'en-tête du document.
+ Elle peut contenir diverses informations (feuilles de styles,
+ titre, encodage de caractères, …). La seule
+ balise <a>obligatoire</a> dans <tt>head</tt> est le titre
+ (<tt>title</tt>). C'est le texte qui est affiché dans la barre
+ de fenêtre du navigateur ou dans l'onglet.
+ </li>
+ <li>la balise <tt>body</tt> représente le contenu de la page. On y
+ trouve diverses balises (<tt>div</tt>, <tt>p</tt>, <tt>table</tt>,
+ …) qui formattent le contenu de la page</li>
+ </ul>
+</div>
+<h1>Encodage des caractères (UTF-8) (digression)</h1>
+ <div class="sws-slide">
+ <h1>Représentation des textes</h1>
+ <p>Avant de représenter des documents complexes, on s'intéresse
+ aux textes (sans structure particulière)</p>
+ <p class="sws-pause">Problématique: comment représenter du texte
+ réaliste ?</p>
+ <p>Exemple de texte réaliste:<br/>
+ <tt>"</tt> و عليكم السلام,Здравей,¡Hola!, 你好,Góðan daginn,…
+ <tt>"</tt>
+ </p>
+ </div>
+ <div class="sws-slide">
+ <h1>Historiquement…</h1>
+ <p>Encodage 1 caractère = 1 octet (8 bits) : </p>
+ <ul><li>Encodage ASCII sur 7 bits (128 caractères)</li>
+ <li>ASCII étendu 8 bits (256 caractères, dont 128 de «
+ symboles »</li>
+ <li>Latin 1 : ASCII 7 bits + 128 caractères « ouest-européens »
+ (lettres accentuées française, italienne, …)</li>
+ <li>Latin 2 : ASCII 7 bits + 128 caractères « est-européens »
+ (Serbe, Hongrois, Croate, Tchèque, …)</li>
+ <li>Latin 3 : ASCII 7 bits + 128 caractères turques, maltais,
+ esperanto, </li>
+ <li>Latin 4 : ASCII 7 bits + 128 caractères islandais,
+ lituanien, …</li>
+ <li class="sws-pause"> … </li>
+ <li >Latin 15 : Latin 1 avec 4 caractères « inutiles »
+ remplacés (par exemple pour « € » à la place de « ¤ »)</li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>… et pendant ce temps là, ailleur dans le monde </h1>
+ <p>Encodage multi-octets:</p>
+ <ul>
+ <li>Encodages spécifiques pour le Chinois (Big5, GB, …)</li>
+ <li>Encodages spécifiques pour le Japonais (Shift-JIS, EUC, …)</li>
+ </ul>
+ <p>Impossibilité de mettre plusieurs « alphabets » dans un même
+ texte</p>
+ <p>Chaque logiciel « interprétait » les séquences d'octet de
+ manière prédéfinie</p>
+ </div>
+ <div class="sws-slide">
+ <h1>UTF-8</h1>
+ <p>Universal (Character Set) Transformation Format 8 bit</p>
+ <ul><li>Encodage à taille variable « universel » (contient tous
+ les alphabets connus)</li>
+ <li>Un organisme (ISO) donne un code à chaque symbole</li>
+ <li>Compatible avec ASCII 7 bits</li>
+ </ul>
+ <p>Encodage</p>
+ <table class="withborder" style="position:relative;left:8%;">
+ <tr ><td>Nombre d'octets</td><td>Octet 1</td><td>Octet
+ 2</td><td>Octet 3</td><td>Octet 4</td><td>Octet 5</td><td>Octet 6</td></tr>
+ <tr ><td>1</td><td><tt>0xxxxxxx</tt></td><td></td><td></td><td></td><td></td><td></td></tr>
+
+ <tr ><td>2</td><td><tt>110xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td><td></td><td></td><td></td></tr>
+ <tr ><td>3</td><td><tt>1110xxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td><td></td><td></td></tr>
+ <tr ><td>4</td><td><tt>11110xxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td><td></td></tr>
+
+ <tr ><td>5</td><td><tt>111110xxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td></tr>
+ <tr ><td>6</td><td><tt>1111110xx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td></tr>
+
+ </table>
+ </div>
+ <div class="sws-slide">
+ <h1>Exemples</h1>
+ <p><tt style="font-size:200%">A</tt> ⟶ 65<sub>10</sub>
+ ⟶ 0100 1010<sub>2</sub> (représenté sur un
+ seul octet)</p>
+
+ <p><tt style="font-size:200%">ễ</tt> ⟶ 7877<sub>10</sub>
+ ⟶ 0001 1110 1100 0101<sub>2</sub> (représenté
+ 3 octets) : <br/>
+ <s>1110</s><em>0001</em> <s>10</s><em>11 10
+ 11</em> <s>10</s><em>00 0101</em>≡ 225 187 133
+</p>
+ <p><tt style="font-size:200%">🐵</tt>
+ ⟶ 128053<sub>10</sub> ⟶ …
+ ≡ 240 237 220 181</p>
+ <p>Avantages</p>
+ <ul><li>compatible ASCII 7 bits (d'anciens documents texte en
+ anglais sont toujours lisibles)</li>
+ <li>pas d'espace gaspillé (à l'inverse d'UTF-32 ou tous les
+ caractères font 32 bits)</li>
+ </ul>
+ <p>Inconvénients</p>
+ <ul>
+ <li>Caractères à taille variable: il faut parcourir le texte
+ pour trouver le n<sup>ème</sup> caractère</li>
+ <li>Les vieux logiciels doivent être adaptés</li>
+ </ul>
+ </div>
</body>
</html>
projects / hacks / simpleWebSlides.git / commitdiff