prog_internet/prog_internet_05.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>Programmation Internet</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
  39     <div class="sws-slide sws-cover sws-option-nofooter">
  40       <h1>Programmation Internet</h1>
  41       <h1>Cours 5</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
  46     <div class="sws-slide" >
  47       <h1> Plan </h1>
  48       <div>
  49       <ol >
  50         <li class="done"> Systèmes d'exploitation</li>
  51         <li class="done"> Réseaux et Internet</li>
  52         <li class="done"> Le Web </li>
  53         <li > CSS
  54           <ul class="empty">
  55             <li class="hl">4.1 Introduction</li>
  56             <li>4.2 Boîtes</li>
  57             <li>4.3 Selecteurs</li>
  58           </ul>
  59         </li>
  60       </ol>
  61       </div>
  62     </div>
  63
  64     <div class="sws-slide">
  65       <h1>Cascading Style Sheets (CSS)</h1>
  66       <table class="desc">
  67         <tr>
  68           <td >CSS</td> <td>
  69             Langage permettant de décrire le <em>style graphique</em>
  70             d'une page HTML
  71           </td>
  72         </tr>
  73       </table>
  74       <p>On peut appliquer un style CSS</p>
  75       <ul>
  76         <li> À un élément en
  77         utilisant <em>l'attribut <code>style</code></em></li>
  78         <li> À une page en utilisant
  79         l'élément <em><code><![CDATA[ <style>...</style> ]]></code></em>
  80                                                           dans l'en-tête
  81         du document (dans la
  82         balise <code><![CDATA[<head>...</head>]]></code>).
  83                                                  </li>
  84         <li>À un ensemble de pages en référençant un fichier de style
  85         dans chacune des pages
  86         </li>
  87       </ul>
  88     </div>
  89     <div class="sws-slide">
  90       <h1> L'attribut <tt>style</tt></h1>
  91       <code> <![CDATA[ <a href="http://www.u-psud.fr" style="color:red">Un lien</a>]]>
  92       </code>
  93       <p>Apperçu:      </p>
  94       <p style="width:80%; margin-left:5%; border-style:solid;border-width:1pt;border-color:gray;">
  95        <a href="http://www.u-psud.fr" style="color:red;text-decoration:underline;">Un lien</a>
  96       </p>
  97       <p class="sws-pause">Inconvénient: il faut copier l'attribut
  98       style pour tous les liens de la page.
  99       </p>
 100     </div>
 101
 102     <div class="sws-slide">
 103       <h1> Internet </h1>
 104       <ul>
 105         <li> Ensemble de logiciels et protocoles basés sur <em>TCP/IP</em>
 106           </li>
 107         <li> Modèle Client/Serveur</li>
 108         <li> Un serveur fournit un service:
 109           <ul>
 110             <li>courriel</li>
 111             <li>transfert de fichier (ftp)</li>
 112             <li>connexion à distance (ssh)</li>
 113             <li>Web (http)</li>
 114           </ul>
 115           </li>
 116         <li> Plusieurs services peuvent être actifs sur la même
 117         machine (serveur). Un <em>port (identifiant numérique)</em>
 118         est associé à chaque service. Sur Internet, un service est
 119         identifié par:
 120           <ul>
 121             <li>L'adresse IP de la machine sur lequel il fonctionne</li>
 122             <li>Le numéro de port sur lequel le programme attend les
 123             connexions</li>
 124           </ul>
 125         </li>
 126       </ul>
 127     </div>
 128     <div class="sws-slide">
 129       <h1> Exemples de services </h1>
 130       <table class="simple" style="width:100%">
 131         <tr><th  style="width:10%">Service</th>
 132           <th style="width:40%">Protocole</th>
 133           <th  style="width:5%">Port</th>
 134           <th style="width:45%;">Description</th>
 135         </tr>
 136         <tr>
 137           <td>ftp</td> <td >File Transfer Protocol</td> <td>
 138           20,21 </td> <td>Transfert de fichiers</td> </tr>
 139         <tr> <td>telnet</td> <td>Network Virtual
 140         Terminal</td> <td>23</td> <td>Shell à distance</td></tr>
 141         <tr> <td>ssh</td> <td>Secure Shell</td> <td>22</td><td>Shell à
 142         distance crypté</td></tr>
 143         <tr> <td>mail</td><td>Simple Mail Transfer
 144         Protocol</td> <td>25</td> <td>Envoi de mail</td></tr>
 145         <tr><td>pop</td> <td>Post Office
 146         Protocol</td> <td>110</td><td>Récupération de mail</td></tr>
 147         <tr><td>imap</td> <td>Internet Message Access
 148         Protocol</td> <td>143</td><td>Synchronisation de mails</td></tr>
 149         <tr><td>nslookup</td> <td>Domain Name
 150         System</td> <td>42</td> <td>Serveur de noms</td></tr>
 151         <tr ><td><em>http</em></td> <td>Hyper Text Transfer Protocole</td><td>80</td><td>Web</td></tr>
 152
 153       </table>
 154     </div>
 155     <div class="sws-slide">
 156       <h1> World Wide Web (1/2)</h1>
 157       <ul>
 158         <li>Service de distribution de page <em>hypertexte</em></li>
 159         <li>Une page <em>hypertexte</em> contient des références
 160           immédiatement accessibles à d'autres pages (pointeurs
 161           ou <em>liens hypertextes</em>)</li>
 162         <li>Les pages sont décrites dans le
 163           langage <em>HTML</em> (HyperText Markup Language) </li>
 164         <li>Architecture client/serveur:
 165           <ul>
 166             <li>Les pages sont stockées sur le serveur</li>
 167             <li>Les pages sont envoyées au client (navigateur Web) qui
 168               en assure le rendu</li>
 169           </ul>
 170         </li>
 171         <li>Utilise le protocole <em>HTTP</em> pour les échanges entre
 172           le client et le serveur</li>
 173       </ul>
 174     </div>
 175
 176     <div class="sws-slide">
 177       <h1> World Wide Web (2/2)</h1>
 178       <p>Concepts clé:</p>
 179       <table class="desc">
 180         <tr><td>URL</td> <td>localisation d'une page Web (« adresse de
 181         la page »)</td> </tr>
 182         <tr><td>HTTP</td> <td>protocole de communication entre un
 183         client et un serveur Web</td> </tr>
 184         <tr><td>HTML</td> <td>langage de description des pages
 185         Web</td> </tr>
 186       </table>
 187       <p>Évolutions récentes (Web 2.0, internet mobile, <i>Cloud</i>, …)</p>
 188       <ul>
 189         <li>Standardisation du contenu multimédia (images, vidéos et
 190         sons en <i>streaming</i>)</li>
 191         <li>Contenu interactif avancé (stockage de fichier coté
 192         client, rendu 3D, …)</li>
 193         <li>Uniformisation de nombreuses extensions <i>ad-hoc</i>: HTML5</li>
 194       </ul>
 195     </div>
 196
 197
 198     <div class="sws-slide" >
 199       <h1> Plan </h1>
 200       <ol >
 201         <li class="done" > Systèmes d'exploitation</li>
 202         <li class="done" > Réseaux et Internet </li>
 203         <li> Le Web
 204           <ul class="empty">
 205             <li class="done">3.1 Internet et ses services</li>
 206             <li class="hl" >3.2 Fonctionnement du Web</li>
 207             <li class="">3.3 Adressage des documents Web </li>
 208             <li>3.4 Le protocole HTTP</li>
 209             <li>3.5 HTML, le format des documents</li>
 210           </ul>
 211         </li>
 212       </ol>
 213     </div>
 214
 215     <div class="sws-slide">
 216       <h1>Fonctionnement du Web</h1>
 217       <div style="text-align:center;">
 218         <img style="width:90%;height:50%;" src="cours_4.svg"
 219         type="image/svg+xml" />
 220       </div>
 221
 222     </div>
 223
 224     <div class="sws-slide">
 225       <h1>Côté client</h1>
 226       <p>Le navigateur :</p>
 227       <ul>
 228         <li>Analyse l'URL demandée</li>
 229         <li>Obtient l'adresse IP auprès du serveur DNS</li>
 230         <li>Établit une connexion (potentiellement sécurisée) avec le serveur</li>
 231         <li>Envoie une <em>requête HTTP</em> au serveur</li>
 232         <li>Récupère la page envoyée par le serveur dans
 233         sa <em>réponse</em></li>
 234         <li>Analyse la page et récupère les éléments référencés :
 235         images, sons, …</li>
 236         <li>Effectue le traitement du code client</li>
 237         <li>Met en forme le contenu et l'affiche dans la fenêtre</li>
 238       </ul>
 239     </div>
 240
 241     <div class="sws-slide">
 242       <h1>Côté serveur</h1>
 243       <ul>
 244         <li>Un <i>listener</i> (<i>thread</i> particulier) attend les
 245         connexions sur un port par défaut (80 dans le cas de HTTP)</li>
 246         <li>À chaque nouvelle connexion, le <i>listener</i> crée
 247         un <i>thread</i> de traitement et se remet en attente
 248         </li>
 249         <li>Le <i>thread</i> de traitement vérifie la validité de la
 250         requête :
 251           <ul>
 252             <li>le document demandé existe ?
 253               </li>
 254             <li>le client est autorisé à accéder au document ?
 255               </li>
 256             <li>…</li>
 257           </ul>
 258         </li>
 259         <li>Le <i>thread</i> de traitement répond à la requête :
 260           <ul>
 261             <li>Exécution de code côté serveur, récupération de
 262             données dans une BD, …
 263               </li>
 264             <li>Envoi de la page au client
 265               </li>
 266           </ul>
 267         </li>
 268       </ul>
 269     </div>
 270
 271     <div class="sws-slide" >
 272       <h1> Plan </h1>
 273       <ol >
 274         <li class="done" > Systèmes d'exploitation</li>
 275         <li class="done" > Réseaux et Internet </li>
 276         <li> Le Web
 277           <ul class="empty">
 278             <li class="done">3.1 Internet et ses services</li>
 279             <li class="done" >3.2 Fonctionnement du Web</li>
 280             <li class="hl">3.3 Adressage des documents Web </li>
 281             <li>3.4 Le protocole HTTP</li>
 282             <li>3.5 HTML, le format des documents</li>
 283           </ul>
 284         </li>
 285       </ol>
 286     </div>
 287     <div class="sws-slide">
 288       <h1>Adressage des documents Web (1/3)</h1>
 289       <table class="desc">
 290         <tr><td>URL</td><td> <i>Uniform Resource Locator</i>
 291         identifie un document sur internet</td></tr>
 292       </table>
 293       <p>Une URL se décompose en 3 partie</p>
 294       <ul><li><em>protocole</em> (comment ?)</li>
 295         <li><span style="color:orange;">adresse</span> (où ?)</li>
 296         <li><span style="color:blue;">document</span> (quoi ?)</li>
 297       </ul>
 298       <p>Syntaxe (simplifiée) :</p>
 299       <code>            <em>protocole</em>://<span style="color:orange">adresse</span>/<span style="color:blue;">document</span></code>
 300       <p>Exemple :</p>
 301       <code>            <em>http</em>://<span style="color:orange">www.lri.fr</span>/<span style="color:blue;">~kn/teach_fr.html</span></code>
 302     </div>
 303
 304     <div class="sws-slide">
 305       <h1>Adressage des documents Web (2/3)</h1>
 306       <p>On peut aussi préciser <span style="color:purple;">un numéro
 307       de port</span>, des <span style="color:black;">paramètres</span>
 308       et un <span style="color:red;">emplacement</span> :
 309       </p>
 310       <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>
 311       <p class="sws-pause" >Exemple :</p>
 312       <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>
 313       <p>Le serveur utilise les paramètres passés par le client dans
 314       l'URL pour <i>calculer</i> le contenu de la page (changer la
 315       chaîne « <code>tbbt</code> » ci-dessus et essayer)</p>
 316     </div>
 317     <div class="sws-slide">
 318       <h1>Adressage des documents Web (3/3)</h1>
 319       <p>
 320         La <em>racine</em> d'un site Web
 321         (ex: <em><code>http://www.lri.fr/</code></em>) correspond
 322         à un répertoire sur le disque du serveur
 323         (ex: <em><code>/var/www</code></em>). Le fichier</p>
 324       <code>      http://www.lri.fr/index.html</code>
 325       <p>se trouve à l'emplacement</p>
 326       <code>      /var/www/index.html</code>
 327       <p>Le serveur Web peut aussi effectuer des <em>réécritures
 328       d'adresses</em> :</p>
 329       <code>      http://www.lri.fr/~kn/index.html</code>
 330       <p>devient</p>
 331       <code>      /home/kn/public_html/index.html</code>
 332     </div>
 333     <div class="sws-slide" >
 334       <h1> Plan </h1>
 335       <ol >
 336         <li class="done" > Systèmes d'exploitation</li>
 337         <li class="done" > Réseaux et Internet </li>
 338         <li> Le Web
 339           <ul class="empty">
 340             <li class="done">3.1 Internet et ses services</li>
 341             <li class="done" >3.2 Fonctionnement du Web</li>
 342             <li class="done">3.3 Adressage des documents Web </li>
 343             <li class="hl">3.4 Le protocole HTTP</li>
 344             <li>3.5 HTML, le format des documents</li>
 345           </ul>
 346         </li>
 347       </ol>
 348     </div>
 349     <div class="sws-slide">
 350       <h1>Caractéristiques du protocole HTTP</h1>
 351       <ul>
 352         <li>Sans connexion permanente:
 353           <ul>
 354             <li>Le client se connecte au serveur, envoie sa requête,
 355             se déconnecte</li>
 356             <li>Le serveur se connecte au client, envoie sa réponse,
 357               se déconnecte</li>
 358           </ul>
 359         </li>
 360         <li>Indépendant du contenu : permet d'envoyer des documents
 361         (hyper) texte, du son, des images, …</li>
 362         <li>Sans <em>état</em>: chaque paire requête/réponse est
 363         indépendante (le serveur ne maintient pas d'information sur le
 364           client entre les requêtes)</li>
 365         <li>Protocole en mode <em>texte</em></li>
 366       </ul>
 367     </div>
 368     <div class="sws-slide">
 369       <h1>Format des messages HTTP</h1>
 370       <p>Les messages ont la forme suivante</p>
 371       <ul><li>Ligne initiale CR LF</li>
 372         <li>zéro ou plusieurs lignes d'option CR LF</li>
 373         <li>CR LF</li>
 374         <li>Corp du message (document envoyé, paramètres de la
 375         requête, …)</li>
 376       </ul>
 377       <ul><li><em>Requête</em> la première ligne contient un nom
 378       de <em>méthode</em> (GET, POST, HEAD, …), le paramètre de la
 379       méthode et la version du protocole</li>
 380         <li><em>Réponse</em> la version du protocole, le code de la
 381         réponse (200, 404, 403, …) et un message informatif
 382         </li>
 383       </ul>
 384     </div>
 385     <div class="sws-slide">
 386       <h1>Démo</h1>
 387     </div>
 388     <div class="sws-slide" >
 389       <h1> Plan </h1>
 390       <ol >
 391         <li class="done" > Systèmes d'exploitation</li>
 392         <li class="done" > Réseaux et Internet </li>
 393         <li> Le Web
 394           <ul class="empty">
 395             <li class="done">3.1 Internet et ses services</li>
 396             <li class="done" >3.2 Fonctionnement du Web</li>
 397             <li class="done">3.3 Adressage des documents Web </li>
 398             <li class="done">3.4 Le protocole HTTP</li>
 399             <li class="hl">3.5 HTML, le format des documents</li>
 400           </ul>
 401         </li>
 402       </ol>
 403     </div>
 404     <div class="sws-slide">
 405       <h1>HTML</h1>
 406       <p>
 407         <em>HyperText Markup Language</em> : langage de mise en forme
 408         de documents hypertextes (texte + liens vers d'autres
 409         documents). Développé au CERN en 1989.<br/>
 410         <em>1991</em> : premier navigateur en mode texte<br/>
 411         <em>1993</em> : premier navigateur graphique (mosaic)
 412         développé au NCSA (National Center for Supercomputing
 413         Applications)
 414       </p>
 415     </div>
 416     <div class="sws-slide">
 417       <h1>Document HTML</h1>
 418       <ul><li> est un document <em>semi-structuré</em></li>
 419         <li> dont la structure est donnée par
 420         des <em>balises</em></li>
 421       </ul>
 422       <div>
 423       <table class="btable simple" style="width:90%;margin-left:5%">
 424         <thead>
 425           <tr><th style="width:65%;">Exemple</th> <th>Rendu par défaut</th></tr>
 426         </thead>
 427         <tr><td ><tt><![CDATA[Un texte <b>en gras</b> ]]></tt></td><td>Un
 428         texte <b>en gras</b></td></tr>
 429         <tr><td ><code><![CDATA[<a href="http://www.u-psud.fr">Un lien</a> ]]></code></td>
 430           <td><a style="color:blue;text-decoration:underline;"
 431         href="http://www.u-psud.fr">Un lien</a></td></tr>
 432         <tr><td><code><![CDATA[<ul>
 433   <li>Premièrement</li>
 434   <li>Deuxièmement</li>
 435 </ul> ]]></code></td> <td><ul>
 436 <li>Premièrement</li>
 437 <li>Deuxièmement</li>
 438 </ul>
 439 </td></tr>
 440       </table>
 441       </div>
 442 <p>On dit que <em><tt><![CDATA[<toto>]]></tt></em> est une balise <em>
 443     ouvrante</em> et <em><tt><![CDATA[</toto>]]></tt></em> une
 444     balise <em>fermante</em>. On peut
 445     écrire <em><tt><![CDATA[<toto/>]]></tt></em> comme raccourci pour
 446     <tt><![CDATA[<toto></toto>]]></tt>.
 447 </p>
 448     </div>
 449     <div class="sws-slide">
 450       <h1>Historique du langage HTML</h1>
 451 <table class="desc">
 452   <tr><td style="width:3em;">1973</td> <td>GML, Generalised Markup Language développé chez
 453 IBM. Introduction de la notion de balise.</td></tr>
 454 <tr><td>1980</td><td> SGML, Standardised GML, adopté par l'ISO</td></tr>
 455 <tr><td>1989</td><td> HTML, basé sur SGML. Plusieurs entreprises (microsoft,
 456 netscape, ... ) interprètent le standard de manière
 457 différente</td></tr>
 458 <tr><td>1996</td> <td>XML, eXtensible Markup Language norme pour les
 459 documents semi-structurés (SGML simplifié)</td></tr>
 460 <tr><td>2000</td><td> XHTML, version de HTML suivant les conventions
 461     XML</td></tr>
 462 <tr><td>2008</td><td> Première proposition pour le nouveau standard,
 463     HTML5</td></tr>
 464 <tr><td>2014</td><td>Standardisation de HTML5</td></tr>
 465 </table>
 466     </div>
 467
 468     <div class="sws-slide">
 469       <h1>XHTML <i>vs</i> HTML</h1>
 470       <p>On utilise XHTML dans le cours. Différences avec HTML:</p>
 471       <ul>
 472         <li>
 473           Les balises sont <em>bien parenthésées</em>
 474           (<tt><![CDATA[<a> <c> </c> ]]> <span style="color:red">&lt;/b&gt;</span></tt> est interdit)
 475         </li>
 476         <li>Les balises sont en minuscules</li>
 477       </ul>
 478       <p>Les avantages sont les suivants</p>
 479       <ul><li>HTML autorise les mélanges majuscule/minuscule, de ne
 480       pas fermer certaines balise … Les navigateurs corrigent ces
 481       erreurs de manières <em>différentes</em></li>
 482         <li>Le document est <em>structuré</em> comme un programme
 483         informatique (les balises ouvrantes/fermantes correspondent à
 484         { et }). Plus simple à débugger.</li>
 485       </ul>
 486     </div>
 487 <div class="sws-slide">
 488   <h1>Rôle d'(X)HTML</h1>
 489   <p>Séparer la <em>structure</em> du document de
 490   son <em>rendu</em>. La structure donne une <em>sémantique</em> au
 491   document :</p>
 492   <ul>
 493     <li>ceci est un titre</li>
 494     <li>ceci est un paragraphe</li>
 495     <li>ceci est un ensemble de caractères importants</li>
 496   </ul>
 497   <p>Cela permet au navigateur d'assurer un rendu en fonction de la
 498   sémantique. Il existe différents types de rendus:</p>
 499   <ul>
 500     <li>graphique interactif (Chrome, Firefox, Internet Explorer,
 501     …)</li>
 502     <li>texte interactif (Lynx, navigateur en mode texte)</li>
 503     <li>graphique statique (par ex: sur livre électronique)</li>
 504     <li>rendu sur papier</li>
 505     <li>graphique pour petit écran (terminal mobile)</li>
 506   </ul>
 507 </div>
 508 <div class="sws-slide">
 509   <h1>Exemple de document</h1>
 510   <p style="text-align:center;font-size:smaller;">(liste des balises
 511   données sur la feuille de TD 4!)</p>
 512 <div style="margin-left:10%;">
 513 <code style="font-size:smaller;"><![CDATA[  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 514     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 515   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 516     <head>
 517       <title>Un titre</title>
 518       <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 519     </head>
 520     <body>
 521       <h1>Titre de section</h1>
 522       <p> premier paragraphe de texte. On met
 523       un <a href="http://www.lri.fr">lien</a> ici.
 524       </p>
 525       <!-- on peut aussi mettre des commentaires -->
 526     </body>
 527   </html>]]></code>
 528 </div>
 529 </div>
 530   </body>
 531 </html>