unix_prog_web/unix_prog_web_04.xhtml

   1 <?xml version="1.0" encoding="utf-8" ?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   3           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
   4           >
   5 <html xmlns="http://www.w3.org/1999/xhtml" >
   6   <head>
   7     <title>Web et HTML</title>
   8
   9     <meta http-equiv="Content-Type"
  10           content="text/html; charset=utf-8" />
  11     <meta name="copyright"
  12           content="Copyright &#169; 2013 Kim Nguyễn" />
  13
  14     <!-- Load jQuery -->
  15     <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
  16     <!-- Load the library -->
  17     <script src="../simpleWebSlides.js" type="text/javascript" ></script>
  18
  19     <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"  media="all" />
  20     <!-- Load a custom Theme, the class-element marks this style-sheet
  21          a "theme" that can be swtiched dynamicaly -->
  22     <link class="sws-theme" rel="stylesheet"  title="U-Psud style"  href="../themes/uPsud.css" type="text/css" />
  23
  24     <!-- Customize some templates and initialize -->
  25
  26     <script type="text/javascript">
  27       SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
  28       SWS.Config['sws-object-deactivate'] =  SWS.Effects.objectDeactivateFadeOut;
  29       SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
  30
  31       //Ensures that we load SWS at the very end, after MathJax has
  32       //been initialized
  33
  34       $(window).load(SWS.Presentation.init);
  35     </script>
  36   </head>
  37   <body>
  38     <a class="sws-previous" href="unix_prog_web_03.xhtml" />
  39     <div class="sws-slide sws-cover sws-option-nofooter">
  40       <h1>Unix et Programmation Web</h1>
  41       <h1>Cours 4</h1>
  42       <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
  43       <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
  44     </div>
  45     <h1>Internet et ses services</h1>
  46     <div class="sws-slide">
  47       <h1> Bref historique d'Internet (1/2)</h1>
  48       <table class="desc">
  49         <tr>
  50           <td style="width:6.5em;">1959-1968</td> <td>ARPA
  51             (<i>Advanced Research Project Agency</i>) crée un réseau
  52             de quelques machines capable de résister à une attaque.</td>
  53         </tr>
  54         <tr>
  55           <td>1969</td> <td>ARPANET. Interconnexion des ordinateurs
  56             centraux des grandes universités et institutions
  57             américaines. Première utilisation du concept de paquet d'information.</td>
  58         </tr>
  59         <tr>
  60           <td>1970-1982 </td>
  61           <td>Interconnexion avec la Norvège et le Royaume-Uni.
  62           </td>
  63         </tr>
  64         <tr>
  65           <td>1982</td>
  66           <td> Passage au protocole TCP/IP. Naissance de l'Internet actuel.</td>
  67         </tr>
  68       </table>
  69     </div>
  70     <div class="sws-slide">
  71       <h1> Bref historique d'Internet (2/2)</h1>
  72       <table class="desc">
  73         <tr>
  74           <td style="width:6.7em;">1986</td> <td>« Autoroutes de
  75             l'information ». Des super-ordinateurs et les premières
  76             connexions à fibres optiques sont utilisées pour accélérer
  77             le débit d'Internet.</td>
  78         </tr>
  79         <tr>
  80           <td>1987-1992</td> <td>Apparition des premiers fournisseurs
  81             d'accès. Les entreprises se connectent.</td>
  82         </tr>
  83         <tr>
  84           <td>1993-2000 </td>
  85           <td>Avènement du Web. Démocratisation du haut-débit (vers
  86           2000 pour la France).
  87           </td>
  88         </tr>
  89         <tr>
  90           <td>2000-présent</td>
  91           <td> Explosion des services en ligne, arrivée des réseaux
  92           sociaux, internet mobile, <i>Cloud</i> (stockage et calcul
  93           mutualisés accessible depuis internet).</td>
  94         </tr>
  95       </table>
  96     </div>
  97
  98     <div class="sws-slide">
  99       <h1> Internet </h1>
 100       <ul>
 101         <li> Ensemble de logiciels et protocoles basés sur <em>TCP/IP</em>
 102           </li>
 103         <li> Modèle Client/Serveur</li>
 104         <li> Un serveur fournit un service:
 105           <ul>
 106             <li>courriel</li>
 107             <li>transfert de fichier (ftp)</li>
 108             <li>connexion à distance (ssh)</li>
 109             <li>Web (http)</li>
 110           </ul>
 111           </li>
 112         <li> Plusieurs services peuvent être actifs sur la même
 113         machine (serveur). Un <em>port (identifiant numérique)</em>
 114         est associé à chaque service. Sur Internet, un service est
 115         identifié par:
 116           <ul>
 117             <li>L'adresse IP de la machine sur lequel il fonctionne</li>
 118             <li>Le numéro de port sur lequel le programme attend les
 119             connexions</li>
 120           </ul>
 121         </li>
 122       </ul>
 123     </div>
 124     <div class="sws-slide">
 125       <h1> Exemples de services </h1>
 126       <table class="simple" style="width:100%">
 127         <tr><th  style="width:10%">Service</th>
 128           <th style="width:40%">Protocole</th>
 129           <th  style="width:5%">Port</th>
 130           <th style="width:45%;">Description</th>
 131         </tr>
 132         <tr>
 133           <td>ftp</td> <td >File Transfer Protocol</td> <td>
 134           20,21 </td> <td>Transfert de fichiers</td> </tr>
 135         <tr> <td>telnet</td> <td>Network Virtual
 136         Terminal</td> <td>23</td> <td>Shell à distance</td></tr>
 137         <tr> <td>ssh</td> <td>Secure Shell</td> <td>22</td><td>Shell à
 138         distance crypté</td></tr>
 139         <tr> <td>mail</td><td>Simple Mail Transfer
 140         Protocol</td> <td>25</td> <td>Envoi de mail</td></tr>
 141         <tr><td>pop</td> <td>Post Office
 142         Protocol</td> <td>110</td><td>Récupération de mail</td></tr>
 143         <tr><td>imap</td> <td>Internet Message Access
 144         Protocol</td> <td>143</td><td>Synchronisation de mails</td></tr>
 145         <tr><td>nslookup</td> <td>Domain Name
 146         System</td> <td>42</td> <td>Serveur de noms</td></tr>
 147         <tr ><td><em>http</em></td> <td>Hyper Text Transfer Protocole</td><td>80</td><td>Web</td></tr>
 148
 149       </table>
 150     </div>
 151     <div class="sws-slide">
 152       <h1> World Wide Web (1/2)</h1>
 153       <ul>
 154         <li>Service de distribution de page <em>hypertexte</em></li>
 155         <li>Une page <em>hypertexte</em> contient des références
 156           immédiatement accessibles à d'autres pages (pointeurs
 157           ou <em>liens hypertextes</em>)</li>
 158         <li>Les pages sont décrites dans le
 159           langage <em>HTML</em> (HyperText Markup Language) </li>
 160         <li>Architecture client/serveur:
 161           <ul>
 162             <li>Les pages sont stockées sur le serveur</li>
 163             <li>Les pages sont envoyées au client (navigateur Web) qui
 164               en assure le rendu</li>
 165           </ul>
 166         </li>
 167         <li>Utilise le protocole <em>HTTP</em> pour les échanges entre
 168           le client et le serveur</li>
 169       </ul>
 170     </div>
 171
 172     <div class="sws-slide">
 173       <h1> World Wide Web (2/2)</h1>
 174       <p>Concepts clé:</p>
 175       <table class="desc">
 176         <tr><td>URL</td> <td>localisation d'une page Web (« adresse de
 177         la page »)</td> </tr>
 178         <tr><td>HTTP</td> <td>protocole de communication entre un
 179         client et un serveur Web</td> </tr>
 180         <tr><td>HTML</td> <td>langage de description des pages
 181         Web</td> </tr>
 182       </table>
 183       <p>Évolutions récentes (Web 2.0, internet mobile, <i>Cloud</i>, …)</p>
 184       <ul>
 185         <li>Standardisation du contenu multimédia (images, vidéos et
 186         sons en <i>streaming</i>)</li>
 187         <li>Contenu interactif avancé (stockage de fichier coté
 188         client, rendu 3D, …)</li>
 189         <li>Uniformisation de nombreuses extensions <i>ad-hoc</i>: HTML5</li>
 190       </ul>
 191     </div>
 192
 193
 194     <h1> Fonctionnement du Web </h1>
 195     <div class="sws-slide">
 196       <h1>Fonctionnement du Web</h1>
 197       <div style="text-align:center;">
 198         <img style="width:90%;height:50%;" src="cours_4.svg"
 199         type="image/svg+xml" />
 200       </div>
 201
 202     </div>
 203
 204     <div class="sws-slide">
 205       <h1>Côté client</h1>
 206       <p>Le navigateur :</p>
 207       <ul>
 208         <li>Analyse l'URL demandée</li>
 209         <li>Obtient l'adresse IP auprès du serveur DNS</li>
 210         <li>Établit une connexion (potentiellement sécurisée) avec le serveur</li>
 211         <li>Envoie une <em>requête HTTP</em> au serveur</li>
 212         <li>Récupère la page envoyée par le serveur dans
 213         sa <em>réponse</em></li>
 214         <li>Analyse la page et récupère les éléments référencés :
 215         images, sons, …</li>
 216         <li>Effectue le traitement du code client</li>
 217         <li>Met en forme le contenu et l'affiche dans la fenêtre</li>
 218       </ul>
 219     </div>
 220
 221     <div class="sws-slide">
 222       <h1>Côté serveur</h1>
 223       <ul>
 224         <li>Un <i>listener</i> (<i>thread</i> particulier) attend les
 225         connexions sur un port par défaut (80 dans le cas de HTTP)</li>
 226         <li>À chaque nouvelle connexion, le <i>listener</i> crée
 227         un <i>thread</i> de traitement et se remet en attente
 228         </li>
 229         <li>Le <i>thread</i> de traitement vérifie la validité de la
 230         requête :
 231           <ul>
 232             <li>le document demandé existe ?
 233               </li>
 234             <li>le client est autorisé à accéder au document ?
 235               </li>
 236             <li>…</li>
 237           </ul>
 238         </li>
 239         <li>Le <i>thread</i> de traitement répond à la requête :
 240           <ul>
 241             <li>Exécution de code côté serveur, récupération de
 242             données dans une BD, …
 243               </li>
 244             <li>Envoi de la page au client
 245               </li>
 246           </ul>
 247         </li>
 248       </ul>
 249     </div>
 250
 251     <h1> Adressage des documents Web </h1>
 252     <div class="sws-slide">
 253       <h1>Adressage des documents Web (1/3)</h1>
 254       <table class="desc">
 255         <tr><td>URL</td><td> <i>Uniform Resource Locator</i>
 256         identifie un document sur internet</td></tr>
 257       </table>
 258       <p>Une URL se décompose en 3 partie</p>
 259       <ul><li><em>protocole</em> (comment ?)</li>
 260         <li><span style="color:orange;">adresse</span> (où ?)</li>
 261         <li><span style="color:blue;">document</span> (quoi ?)</li>
 262       </ul>
 263       <p>Syntaxe (simplifiée) :</p>
 264       <code>            <em>protocole</em>://<span style="color:orange">adresse</span>/<span style="color:blue;">document</span></code>
 265       <p>Exemple :</p>
 266       <code>            <em>http</em>://<span style="color:orange">www.lri.fr</span>/<span style="color:blue;">~kn/teach_fr.html</span></code>
 267     </div>
 268
 269     <div class="sws-slide">
 270       <h1>Adressage des documents Web (2/3)</h1>
 271       <p>On peut aussi préciser <span style="color:purple;">un numéro
 272       de port</span>, des <span style="color:black;">paramètres</span>
 273       et un <span style="color:red;">emplacement</span> :
 274       </p>
 275       <code>            <em>protocole</em>://<span style="color:orange">adresse</span>:<span style="color:purple">port</span>/<span style="color:blue;">document</span>?<span style="color:black;">p1=v1</span>&amp;<span style="color:black;">p2=v2</span>#<span style="color:red">empl</span></code>
 276       <p class="sws-pause" >Exemple :</p>
 277       <code>    <a style="color:gray" href="http://www.youtube.com:80/results?search_query=tbbt#search-results"><em>http</em>://<span style="color:orange">www.youtube.com</span>:<span style="color:purple">80</span>/<span style="color:blue;">results</span>?<span style="color:black;">search_query=tbbt</span>#<span style="color:red">search-results</span></a></code>
 278       <p>Le serveur utilise les paramètres passés par le client dans
 279       l'URL pour <i>calculer</i> le contenu de la page (changer la
 280       chaîne « <code>tbbt</code> » ci-dessus et essayer)</p>
 281     </div>
 282     <div class="sws-slide">
 283       <h1>Adressage des documents Web (3/3)</h1>
 284       <p>
 285         La <em>racine</em> d'un site Web
 286         (ex: <em><code>http://www.lri.fr/</code></em>) correspond
 287         à un répertoire sur le disque du serveur
 288         (ex: <em><code>/var/www</code></em>). Le fichier</p>
 289       <code>      http://www.lri.fr/index.html</code>
 290       <p>se trouve à l'emplacement</p>
 291       <code>      /var/www/index.html</code>
 292       <p>Le serveur Web peut aussi effectuer des <em>réécritures
 293       d'adresses</em> :</p>
 294       <code>      http://www.lri.fr/~kn/index.html</code>
 295       <p>devient</p>
 296       <code>      /home/kn/public_html/index.html</code>
 297     </div>
 298
 299     <h1>Le protocole HTTP</h1>
 300     <div class="sws-slide">
 301       <h1>Caractéristiques du protocole HTTP</h1>
 302       <ul>
 303         <li>Sans connexion permanente:
 304           <ul>
 305             <li>Le client se connecte au serveur, envoie sa requête,
 306             se déconnecte</li>
 307             <li>Le serveur se connecte au client, envoie sa réponse,
 308               se déconnecte</li>
 309           </ul>
 310         </li>
 311         <li>Indépendant du contenu : permet d'envoyer des documents
 312         (hyper) texte, du son, des images, …</li>
 313         <li>Sans <em>état</em>: chaque paire requête/réponse est
 314         indépendante (le serveur ne maintient pas d'information sur le
 315           client entre les requêtes)</li>
 316         <li>Protocole en mode <em>texte</em></li>
 317       </ul>
 318     </div>
 319     <div class="sws-slide">
 320       <h1>Format des messages HTTP</h1>
 321       <p>Les messages ont la forme suivante</p>
 322       <ul><li>Ligne initiale CR LF</li>
 323         <li>zéro ou plusieurs lignes d'option CR LF</li>
 324         <li>CR LF</li>
 325         <li>Corp du message (document envoyé, paramètres de la
 326         requête, …)</li>
 327       </ul>
 328       <ul><li><em>Requête</em> la première ligne contient un nom
 329       de <em>méthode</em> (GET, POST, HEAD, …), le paramètre de la
 330       méthode et la version du protocole</li>
 331         <li><em>Réponse</em> la version du protocole, le code de la
 332         réponse (200, 404, 403, …) et un message informatif
 333         </li>
 334       </ul>
 335     </div>
 336     <div class="sws-slide">
 337       <h1>Démo</h1>
 338     </div>
 339     <h1>HTML, le format des documents</h1>
 340     <div class="sws-slide">
 341       <h1>HTML</h1>
 342       <p>
 343         <em>HyperText Markup Language</em> : langage de mise en forme
 344         de documents hypertextes (texte + liens vers d'autres
 345         documents). Développé au CERN en 1989.<br/>
 346         <em>1991</em> : premier navigateur en mode texte<br/>
 347         <em>1993</em> : premier navigateur graphique (mosaic)
 348         développé au NCSA (National Center for Supercomputing
 349         Applications)
 350       </p>
 351     </div>
 352     <div class="sws-slide">
 353       <h1>Document HTML</h1>
 354       <ul><li> est un document <em>semi-structuré</em></li>
 355         <li> dont la structure est donnée par
 356         des <em>balises</em></li>
 357       </ul>
 358       <div>
 359       <table class="btable simple" style="width:90%;margin-left:5%">
 360         <thead>
 361           <tr><th style="width:65%;">Exemple</th> <th>Rendu par défaut</th></tr>
 362         </thead>
 363         <tr><td ><tt><![CDATA[Un texte <b>en gras</b>
 364         ]]></tt></td><td style="font-family:serif;color:black;">Un
 365         texte <b>en gras</b></td></tr>
 366         <tr><td ><code><![CDATA[<a href="http://www.u-psud.fr">Un lien</a> ]]></code></td>
 367           <td><a style="color:blue;text-decoration:underline;font-family:serif;"
 368         href="http://www.u-psud.fr">Un lien</a></td></tr>
 369         <tr><td><code><![CDATA[<ul >
 370   <li>Premièrement</li>
 371   <li>Deuxièmement</li>
 372 </ul> ]]></code></td> <td><ul style="font-family:serif;color:black;">
 373 <li>Premièrement</li>
 374 <li>Deuxièmement</li>
 375 </ul>
 376 </td></tr>
 377       </table>
 378       </div>
 379 <p>On dit que <em><tt><![CDATA[<toto>]]></tt></em> est une balise <em>
 380     ouvrante</em> et <em><tt><![CDATA[</toto>]]></tt></em> une
 381     balise <em>fermante</em>. On peut
 382     écrire <em><tt><![CDATA[<toto/>]]></tt></em> comme raccourci pour
 383     <tt><![CDATA[<toto></toto>]]></tt>.
 384 </p>
 385     </div>
 386     <div class="sws-slide">
 387       <h1>Historique du langage HTML</h1>
 388 <table class="desc">
 389   <tr><td style="width:3em;">1973</td> <td>GML, Generalised Markup Language développé chez
 390 IBM. Introduction de la notion de balise.</td></tr>
 391 <tr><td>1980</td><td> SGML, Standardised GML, adopté par l'ISO</td></tr>
 392 <tr><td>1989</td><td> HTML, basé sur SGML. Plusieurs entreprises (microsoft,
 393 netscape, ... ) interprètent le standard de manière
 394 différente</td></tr>
 395 <tr><td>1996</td> <td>XML, eXtensible Markup Language norme pour les
 396 documents semi-structurés (SGML simplifié)</td></tr>
 397 <tr><td>2000</td><td> XHTML, version de HTML suivant les conventions
 398     XML</td></tr>
 399 <tr><td>2008</td><td> Première proposition pour le nouveau standard,
 400     HTML5</td></tr>
 401 <tr><td>2014</td><td>Standardisation de HTML5</td></tr>
 402 </table>
 403     </div>
 404
 405     <div class="sws-slide">
 406       <h1>XHTML <i>vs</i> HTML</h1>
 407       <p>On utilise XHTML dans le cours. Différences avec HTML:</p>
 408       <ul>
 409         <li>
 410           Les balises sont <em>bien parenthésées</em>
 411           (<tt><![CDATA[<a> <c> </c> ]]> <span style="color:red">&lt;/b&gt;</span></tt> est interdit)
 412         </li>
 413         <li>Les balises sont en minuscules</li>
 414       </ul>
 415       <p>Les avantages sont les suivants</p>
 416       <ul><li>HTML autorise les mélanges majuscule/minuscule, de ne
 417       pas fermer certaines balise … Les navigateurs corrigent ces
 418       erreurs de manières <em>différentes</em></li>
 419         <li>Le document est <em>structuré</em> comme un programme
 420         informatique (les balises ouvrantes/fermantes correspondent à
 421         { et }). Plus simple à débugger.</li>
 422       </ul>
 423     </div>
 424 <div class="sws-slide">
 425   <h1>Rôle d'(X)HTML</h1>
 426   <p>Séparer la <em>structure</em> du document de
 427   son <em>rendu</em>. La structure donne une <em>sémantique</em> au
 428   document :</p>
 429   <ul>
 430     <li>ceci est un titre</li>
 431     <li>ceci est un paragraphe</li>
 432     <li>ceci est un ensemble de caractères importants</li>
 433   </ul>
 434   <p>Cela permet au navigateur d'assurer un rendu en fonction de la
 435   sémantique. Il existe différents types de rendus:</p>
 436   <ul>
 437     <li>graphique interactif (Chrome, Firefox, Internet Explorer,
 438     …)</li>
 439     <li>texte interactif (Lynx, navigateur en mode texte)</li>
 440     <li>graphique statique (par ex: sur livre électronique)</li>
 441     <li>rendu sur papier</li>
 442     <li>graphique pour petit écran (terminal mobile)</li>
 443   </ul>
 444 </div>
 445 <div class="sws-slide">
 446   <h1>Exemple de document</h1>
 447   <p style="text-align:center;font-size:smaller;">(liste des balises
 448   données sur la feuille de TD 4!)</p>
 449 <div style="margin-left:10%;">
 450 <code style="font-size:smaller;"><![CDATA[  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 451     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 452   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 453     <head>
 454       <title>Un titre</title>
 455       <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 456     </head>
 457     <body>
 458       <h1>Titre de section</h1>
 459       <p> premier paragraphe de texte. On met
 460       un <a href="http://www.lri.fr">lien</a> ici.
 461       </p>
 462       <!-- on peut aussi mettre des commentaires -->
 463     </body>
 464   </html>]]></code>
 465 </div>
 466 </div>
 467 <div class="sws-slide">
 468   <h1>Structure d'un document XHTML</h1>
 469   <p>Pour être <i>valide</i> un document XHTML contient <a>au
 470   moins</a> les balises suivantes&nbsp;: </p>
 471   <ul> <li>Une balise <tt>html</tt> qui est la <a>racine</a> (elle
 472   englobe toutes les autres balises). La balise <tt>html</tt>
 473   contient deux balises filles: <tt>head</tt> et <tt>body</tt></li>
 474     <li>La balise <tt>head</tt> représente l'en-tête du document.
 475       Elle peut contenir diverses informations (feuilles de styles,
 476       titre, encodage de caractères, …). La seule
 477       balise <a>obligatoire</a> dans <tt>head</tt> est le titre
 478       (<tt>title</tt>). C'est le texte qui est affiché dans la barre
 479       de fenêtre du navigateur ou dans l'onglet.
 480     </li>
 481     <li>la balise <tt>body</tt> représente le contenu de la page. On y
 482     trouve diverses balises (<tt>div</tt>, <tt>p</tt>, <tt>table</tt>,
 483     …) qui formattent le contenu de la page</li>
 484   </ul>
 485 </div>
 486 <h1>Encodage des caractères (UTF-8) (digression)</h1>
 487     <div class="sws-slide">
 488       <h1>Représentation des textes</h1>
 489       <p>Avant de représenter des documents complexes, on s'intéresse
 490       aux textes (sans structure particulière)</p>
 491       <p class="sws-pause">Problématique: comment représenter du texte
 492       réaliste ?</p>
 493       <p>Exemple de texte réaliste:<br/>
 494         <tt>&quot;</tt> و عليكم السلام,Здравей,¡Hola!, 你好,Góðan daginn,…
 495         <tt>&quot;</tt>
 496       </p>
 497     </div>
 498     <div class="sws-slide">
 499       <h1>Historiquement…</h1>
 500       <p>Encodage 1 caractère = 1 octet (8 bits) : </p>
 501       <ul><li>Encodage ASCII sur 7 bits (128 caractères)</li>
 502         <li>ASCII étendu 8 bits (256 caractères, dont 128 de «
 503         symboles »</li>
 504         <li>Latin 1 : ASCII 7 bits + 128 caractères « ouest-européens »
 505         (lettres accentuées française, italienne, …)</li>
 506         <li>Latin 2 : ASCII 7 bits + 128 caractères « est-européens »
 507         (Serbe, Hongrois, Croate, Tchèque, …)</li>
 508         <li>Latin 3 : ASCII 7 bits + 128 caractères turques, maltais,
 509         esperanto, </li>
 510         <li>Latin 4 : ASCII 7 bits + 128 caractères islandais,
 511         lituanien, …</li>
 512         <li class="sws-pause"> … </li>
 513         <li >Latin 15 : Latin 1 avec 4 caractères « inutiles »
 514         remplacés (par exemple pour « € » à la place de « ¤ »)</li>
 515       </ul>
 516     </div>
 517     <div class="sws-slide">
 518       <h1>… et pendant ce temps là, ailleur dans le monde </h1>
 519       <p>Encodage multi-octets:</p>
 520       <ul>
 521         <li>Encodages spécifiques pour le Chinois (Big5, GB, …)</li>
 522         <li>Encodages spécifiques pour le Japonais (Shift-JIS, EUC, …)</li>
 523       </ul>
 524       <p>Impossibilité de mettre plusieurs « alphabets » dans un même
 525       texte</p>
 526       <p>Chaque logiciel « interprétait » les séquences d'octet de
 527       manière prédéfinie</p>
 528     </div>
 529     <div class="sws-slide">
 530       <h1>UTF-8</h1>
 531       <p>Universal (Character Set) Transformation Format 8 bit</p>
 532       <ul><li>Encodage à taille variable « universel » (contient tous
 533       les alphabets connus)</li>
 534         <li>Un organisme (ISO) donne un code à chaque symbole</li>
 535         <li>Compatible avec ASCII 7 bits</li>
 536       </ul>
 537       <p>Encodage</p>
 538       <table class="withborder" style="position:relative;left:8%;">
 539         <tr ><td>Nombre d'octets</td><td>Octet 1</td><td>Octet
 540         2</td><td>Octet 3</td><td>Octet 4</td><td>Octet 5</td><td>Octet 6</td></tr>
 541         <tr ><td>1</td><td><tt>0xxxxxxx</tt></td><td></td><td></td><td></td><td></td><td></td></tr>
 542
 543         <tr ><td>2</td><td><tt>110xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td><td></td><td></td><td></td></tr>
 544         <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>
 545         <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>
 546
 547         <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>
 548         <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>
 549
 550       </table>
 551     </div>
 552     <div class="sws-slide">
 553       <h1>Exemples</h1>
 554       <p><tt style="font-size:200%">A</tt> &nbsp;&#10230;&nbsp; 65<sub>10</sub>
 555       &nbsp;&#10230;&nbsp; 0100 1010<sub>2</sub> (représenté sur un
 556       seul octet)</p>
 557
 558       <p><tt style="font-size:200%">ễ</tt> &nbsp;&#10230;&nbsp; 7877<sub>10</sub>
 559       &nbsp;&#10230;&nbsp; 0001 1110 1100 0101<sub>2</sub> (représenté
 560         3 octets) : <br/>
 561         <s>1110</s><em>0001</em>&nbsp;<s>10</s><em>11 10
 562         11</em>&nbsp;<s>10</s><em>00 0101</em>≡ 225 187 133
 563 </p>
 564       <p><tt style="font-size:200%">&#x1f435;</tt>
 565       &nbsp;&#10230;&nbsp; 128053<sub>10</sub> &nbsp;&#10230;&nbsp; …
 566       ≡ 240 237 220 181</p>
 567       <p>Avantages</p>
 568       <ul><li>compatible ASCII 7 bits (d'anciens documents texte en
 569       anglais sont toujours lisibles)</li>
 570         <li>pas d'espace gaspillé (à l'inverse d'UTF-32 ou tous les
 571         caractères font 32 bits)</li>
 572       </ul>
 573       <p>Inconvénients</p>
 574       <ul>
 575         <li>Caractères à taille variable: il faut parcourir le texte
 576         pour trouver le n<sup>ème</sup> caractère</li>
 577         <li>Les vieux logiciels doivent être adaptés</li>
 578       </ul>
 579     </div>
 580   </body>
 581 </html>