--- /dev/null
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
+ >
+<html xmlns="http://www.w3.org/1999/xhtml" >
+ <head>
+ <title>Programmation Internet</title>
+
+ <meta http-equiv="Content-Type"
+ content="text/html; charset=utf-8" />
+ <meta name="copyright"
+ content="Copyright © 2013 Kim Nguyễn" />
+
+ <!-- Load jQuery -->
+ <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
+ <!-- Load the library -->
+ <script src="../simpleWebSlides.js" type="text/javascript" ></script>
+
+ <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
+ <!-- Load a custom Theme, the class-element marks this style-sheet
+ a "theme" that can be swtiched dynamicaly -->
+ <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
+
+ <!-- Customize some templates and initialize -->
+
+ <script type="text/javascript">
+ SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
+ SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
+ SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
+
+ //Ensures that we load SWS at the very end, after MathJax has
+ //been initialized
+
+ $(window).load(SWS.Presentation.init);
+ </script>
+ </head>
+ <body>
+
+ <div class="sws-slide sws-cover sws-option-nofooter">
+ <h1>Programmation Internet</h1>
+ <h1>Cours 5</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>
+ <div>
+ <ol >
+ <li class="done"> Systèmes d'exploitation</li>
+ <li class="done"> Réseaux et Internet</li>
+ <li class="done"> Le Web </li>
+ <li > CSS
+ <ul class="empty">
+ <li class="hl">4.1 Introduction</li>
+ <li>4.2 Boîtes</li>
+ <li>4.3 Selecteurs</li>
+ </ul>
+ </li>
+ </ol>
+ </div>
+ </div>
+
+ <div class="sws-slide">
+ <h1>Cascading Style Sheets (CSS)</h1>
+ <table class="desc">
+ <tr>
+ <td >CSS</td> <td>
+ Langage permettant de décrire le <em>style graphique</em>
+ d'une page HTML
+ </td>
+ </tr>
+ </table>
+ <p>On peut appliquer un style CSS</p>
+ <ul>
+ <li> À un élément en
+ utilisant <em>l'attribut <code>style</code></em></li>
+ <li> À une page en utilisant
+ l'élément <em><code><![CDATA[ <style>...</style> ]]></code></em>
+ dans l'en-tête
+ du document (dans la
+ balise <code><![CDATA[<head>...</head>]]></code>).
+ </li>
+ <li>À un ensemble de pages en référençant un fichier de style
+ dans chacune des pages
+ </li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1> L'attribut <tt>style</tt></h1>
+ <code> <![CDATA[ <a href="http://www.u-psud.fr" style="color:red">Un lien</a>]]>
+ </code>
+ <p>Apperçu: </p>
+ <p style="width:80%; margin-left:5%; border-style:solid;border-width:1pt;border-color:gray;">
+ <a href="http://www.u-psud.fr" style="color:red;text-decoration:underline;">Un lien</a>
+ </p>
+ <p class="sws-pause">Inconvénient: il faut copier l'attribut
+ style pour tous les liens de la page.
+ </p>
+ </div>
+
+ <div class="sws-slide">
+ <h1> Internet </h1>
+ <ul>
+ <li> Ensemble de logiciels et protocoles basés sur <em>TCP/IP</em>
+ </li>
+ <li> Modèle Client/Serveur</li>
+ <li> Un serveur fournit un service:
+ <ul>
+ <li>courriel</li>
+ <li>transfert de fichier (ftp)</li>
+ <li>connexion à distance (ssh)</li>
+ <li>Web (http)</li>
+ </ul>
+ </li>
+ <li> Plusieurs services peuvent être actifs sur la même
+ machine (serveur). Un <em>port (identifiant numérique)</em>
+ est associé à chaque service. Sur Internet, un service est
+ identifié par:
+ <ul>
+ <li>L'adresse IP de la machine sur lequel il fonctionne</li>
+ <li>Le numéro de port sur lequel le programme attend les
+ connexions</li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1> Exemples de services </h1>
+ <table class="simple" style="width:100%">
+ <tr><th style="width:10%">Service</th>
+ <th style="width:40%">Protocole</th>
+ <th style="width:5%">Port</th>
+ <th style="width:45%;">Description</th>
+ </tr>
+ <tr>
+ <td>ftp</td> <td >File Transfer Protocol</td> <td>
+ 20,21 </td> <td>Transfert de fichiers</td> </tr>
+ <tr> <td>telnet</td> <td>Network Virtual
+ Terminal</td> <td>23</td> <td>Shell à distance</td></tr>
+ <tr> <td>ssh</td> <td>Secure Shell</td> <td>22</td><td>Shell à
+ distance crypté</td></tr>
+ <tr> <td>mail</td><td>Simple Mail Transfer
+ Protocol</td> <td>25</td> <td>Envoi de mail</td></tr>
+ <tr><td>pop</td> <td>Post Office
+ Protocol</td> <td>110</td><td>Récupération de mail</td></tr>
+ <tr><td>imap</td> <td>Internet Message Access
+ Protocol</td> <td>143</td><td>Synchronisation de mails</td></tr>
+ <tr><td>nslookup</td> <td>Domain Name
+ System</td> <td>42</td> <td>Serveur de noms</td></tr>
+ <tr ><td><em>http</em></td> <td>Hyper Text Transfer Protocole</td><td>80</td><td>Web</td></tr>
+
+ </table>
+ </div>
+ <div class="sws-slide">
+ <h1> World Wide Web (1/2)</h1>
+ <ul>
+ <li>Service de distribution de page <em>hypertexte</em></li>
+ <li>Une page <em>hypertexte</em> contient des références
+ immédiatement accessibles à d'autres pages (pointeurs
+ ou <em>liens hypertextes</em>)</li>
+ <li>Les pages sont décrites dans le
+ langage <em>HTML</em> (HyperText Markup Language) </li>
+ <li>Architecture client/serveur:
+ <ul>
+ <li>Les pages sont stockées sur le serveur</li>
+ <li>Les pages sont envoyées au client (navigateur Web) qui
+ en assure le rendu</li>
+ </ul>
+ </li>
+ <li>Utilise le protocole <em>HTTP</em> pour les échanges entre
+ le client et le serveur</li>
+ </ul>
+ </div>
+
+ <div class="sws-slide">
+ <h1> World Wide Web (2/2)</h1>
+ <p>Concepts clé:</p>
+ <table class="desc">
+ <tr><td>URL</td> <td>localisation d'une page Web (« adresse de
+ la page »)</td> </tr>
+ <tr><td>HTTP</td> <td>protocole de communication entre un
+ client et un serveur Web</td> </tr>
+ <tr><td>HTML</td> <td>langage de description des pages
+ Web</td> </tr>
+ </table>
+ <p>Évolutions récentes (Web 2.0, internet mobile, <i>Cloud</i>, …)</p>
+ <ul>
+ <li>Standardisation du contenu multimédia (images, vidéos et
+ sons en <i>streaming</i>)</li>
+ <li>Contenu interactif avancé (stockage de fichier coté
+ client, rendu 3D, …)</li>
+ <li>Uniformisation de nombreuses extensions <i>ad-hoc</i>: HTML5</li>
+ </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="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>
+
+ <div class="sws-slide">
+ <h1>Fonctionnement du Web</h1>
+ <div style="text-align:center;">
+ <img style="width:90%;height:50%;" src="cours_4.svg"
+ type="image/svg+xml" />
+ </div>
+
+ </div>
+
+ <div class="sws-slide">
+ <h1>Côté client</h1>
+ <p>Le navigateur :</p>
+ <ul>
+ <li>Analyse l'URL demandée</li>
+ <li>Obtient l'adresse IP auprès du serveur DNS</li>
+ <li>Établit une connexion (potentiellement sécurisée) avec le serveur</li>
+ <li>Envoie une <em>requête HTTP</em> au serveur</li>
+ <li>Récupère la page envoyée par le serveur dans
+ sa <em>réponse</em></li>
+ <li>Analyse la page et récupère les éléments référencés :
+ images, sons, …</li>
+ <li>Effectue le traitement du code client</li>
+ <li>Met en forme le contenu et l'affiche dans la fenêtre</li>
+ </ul>
+ </div>
+
+ <div class="sws-slide">
+ <h1>Côté serveur</h1>
+ <ul>
+ <li>Un <i>listener</i> (<i>thread</i> particulier) attend les
+ connexions sur un port par défaut (80 dans le cas de HTTP)</li>
+ <li>À chaque nouvelle connexion, le <i>listener</i> crée
+ un <i>thread</i> de traitement et se remet en attente
+ </li>
+ <li>Le <i>thread</i> de traitement vérifie la validité de la
+ requête :
+ <ul>
+ <li>le document demandé existe ?
+ </li>
+ <li>le client est autorisé à accéder au document ?
+ </li>
+ <li>…</li>
+ </ul>
+ </li>
+ <li>Le <i>thread</i> de traitement répond à la requête :
+ <ul>
+ <li>Exécution de code côté serveur, récupération de
+ données dans une BD, …
+ </li>
+ <li>Envoi de la page au client
+ </li>
+ </ul>
+ </li>
+ </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>
+ <div class="sws-slide">
+ <h1>Adressage des documents Web (1/3)</h1>
+ <table class="desc">
+ <tr><td>URL</td><td> <i>Uniform Resource Locator</i>
+ identifie un document sur internet</td></tr>
+ </table>
+ <p>Une URL se décompose en 3 partie</p>
+ <ul><li><em>protocole</em> (comment ?)</li>
+ <li><span style="color:orange;">adresse</span> (où ?)</li>
+ <li><span style="color:blue;">document</span> (quoi ?)</li>
+ </ul>
+ <p>Syntaxe (simplifiée) :</p>
+ <code> <em>protocole</em>://<span style="color:orange">adresse</span>/<span style="color:blue;">document</span></code>
+ <p>Exemple :</p>
+ <code> <em>http</em>://<span style="color:orange">www.lri.fr</span>/<span style="color:blue;">~kn/teach_fr.html</span></code>
+ </div>
+
+ <div class="sws-slide">
+ <h1>Adressage des documents Web (2/3)</h1>
+ <p>On peut aussi préciser <span style="color:purple;">un numéro
+ de port</span>, des <span style="color:black;">paramètres</span>
+ et un <span style="color:red;">emplacement</span> :
+ </p>
+ <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>&<span style="color:black;">p2=v2</span>#<span style="color:red">empl</span></code>
+ <p class="sws-pause" >Exemple :</p>
+ <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>
+ <p>Le serveur utilise les paramètres passés par le client dans
+ l'URL pour <i>calculer</i> le contenu de la page (changer la
+ chaîne « <code>tbbt</code> » ci-dessus et essayer)</p>
+ </div>
+ <div class="sws-slide">
+ <h1>Adressage des documents Web (3/3)</h1>
+ <p>
+ La <em>racine</em> d'un site Web
+ (ex: <em><code>http://www.lri.fr/</code></em>) correspond
+ à un répertoire sur le disque du serveur
+ (ex: <em><code>/var/www</code></em>). Le fichier</p>
+ <code> http://www.lri.fr/index.html</code>
+ <p>se trouve à l'emplacement</p>
+ <code> /var/www/index.html</code>
+ <p>Le serveur Web peut aussi effectuer des <em>réécritures
+ d'adresses</em> :</p>
+ <code> http://www.lri.fr/~kn/index.html</code>
+ <p>devient</p>
+ <code> /home/kn/public_html/index.html</code>
+ </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="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>
+ <li>Sans connexion permanente:
+ <ul>
+ <li>Le client se connecte au serveur, envoie sa requête,
+ se déconnecte</li>
+ <li>Le serveur se connecte au client, envoie sa réponse,
+ se déconnecte</li>
+ </ul>
+ </li>
+ <li>Indépendant du contenu : permet d'envoyer des documents
+ (hyper) texte, du son, des images, …</li>
+ <li>Sans <em>état</em>: chaque paire requête/réponse est
+ indépendante (le serveur ne maintient pas d'information sur le
+ client entre les requêtes)</li>
+ <li>Protocole en mode <em>texte</em></li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>Format des messages HTTP</h1>
+ <p>Les messages ont la forme suivante</p>
+ <ul><li>Ligne initiale CR LF</li>
+ <li>zéro ou plusieurs lignes d'option CR LF</li>
+ <li>CR LF</li>
+ <li>Corp du message (document envoyé, paramètres de la
+ requête, …)</li>
+ </ul>
+ <ul><li><em>Requête</em> la première ligne contient un nom
+ de <em>méthode</em> (GET, POST, HEAD, …), le paramètre de la
+ méthode et la version du protocole</li>
+ <li><em>Réponse</em> la version du protocole, le code de la
+ réponse (200, 404, 403, …) et un message informatif
+ </li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>Démo</h1>
+ </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="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>
+ <em>HyperText Markup Language</em> : langage de mise en forme
+ de documents hypertextes (texte + liens vers d'autres
+ documents). Développé au CERN en 1989.<br/>
+ <em>1991</em> : premier navigateur en mode texte<br/>
+ <em>1993</em> : premier navigateur graphique (mosaic)
+ développé au NCSA (National Center for Supercomputing
+ Applications)
+ </p>
+ </div>
+ <div class="sws-slide">
+ <h1>Document HTML</h1>
+ <ul><li> est un document <em>semi-structuré</em></li>
+ <li> dont la structure est donnée par
+ des <em>balises</em></li>
+ </ul>
+ <div>
+ <table class="btable simple" style="width:90%;margin-left:5%">
+ <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
+ 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;"
+ href="http://www.u-psud.fr">Un lien</a></td></tr>
+ <tr><td><code><![CDATA[<ul>
+ <li>Premièrement</li>
+ <li>Deuxièmement</li>
+</ul> ]]></code></td> <td><ul>
+<li>Premièrement</li>
+<li>Deuxièmement</li>
+</ul>
+</td></tr>
+ </table>
+ </div>
+<p>On dit que <em><tt><![CDATA[<toto>]]></tt></em> est une balise <em>
+ ouvrante</em> et <em><tt><![CDATA[</toto>]]></tt></em> une
+ balise <em>fermante</em>. On peut
+ écrire <em><tt><![CDATA[<toto/>]]></tt></em> comme raccourci pour
+ <tt><![CDATA[<toto></toto>]]></tt>.
+</p>
+ </div>
+ <div class="sws-slide">
+ <h1>Historique du langage HTML</h1>
+<table class="desc">
+ <tr><td style="width:3em;">1973</td> <td>GML, Generalised Markup Language développé chez
+IBM. Introduction de la notion de balise.</td></tr>
+<tr><td>1980</td><td> SGML, Standardised GML, adopté par l'ISO</td></tr>
+<tr><td>1989</td><td> HTML, basé sur SGML. Plusieurs entreprises (microsoft,
+netscape, ... ) interprètent le standard de manière
+différente</td></tr>
+<tr><td>1996</td> <td>XML, eXtensible Markup Language norme pour les
+documents semi-structurés (SGML simplifié)</td></tr>
+<tr><td>2000</td><td> XHTML, version de HTML suivant les conventions
+ XML</td></tr>
+<tr><td>2008</td><td> Première proposition pour le nouveau standard,
+ HTML5</td></tr>
+<tr><td>2014</td><td>Standardisation de HTML5</td></tr>
+</table>
+ </div>
+
+ <div class="sws-slide">
+ <h1>XHTML <i>vs</i> HTML</h1>
+ <p>On utilise XHTML dans le cours. Différences avec HTML:</p>
+ <ul>
+ <li>
+ Les balises sont <em>bien parenthésées</em>
+ (<tt><![CDATA[<a> <c> </c> ]]> <span style="color:red"></b></span></tt> est interdit)
+ </li>
+ <li>Les balises sont en minuscules</li>
+ </ul>
+ <p>Les avantages sont les suivants</p>
+ <ul><li>HTML autorise les mélanges majuscule/minuscule, de ne
+ pas fermer certaines balise … Les navigateurs corrigent ces
+ erreurs de manières <em>différentes</em></li>
+ <li>Le document est <em>structuré</em> comme un programme
+ informatique (les balises ouvrantes/fermantes correspondent à
+ { et }). Plus simple à débugger.</li>
+ </ul>
+ </div>
+<div class="sws-slide">
+ <h1>Rôle d'(X)HTML</h1>
+ <p>Séparer la <em>structure</em> du document de
+ son <em>rendu</em>. La structure donne une <em>sémantique</em> au
+ document :</p>
+ <ul>
+ <li>ceci est un titre</li>
+ <li>ceci est un paragraphe</li>
+ <li>ceci est un ensemble de caractères importants</li>
+ </ul>
+ <p>Cela permet au navigateur d'assurer un rendu en fonction de la
+ sémantique. Il existe différents types de rendus:</p>
+ <ul>
+ <li>graphique interactif (Chrome, Firefox, Internet Explorer,
+ …)</li>
+ <li>texte interactif (Lynx, navigateur en mode texte)</li>
+ <li>graphique statique (par ex: sur livre électronique)</li>
+ <li>rendu sur papier</li>
+ <li>graphique pour petit écran (terminal mobile)</li>
+ </ul>
+</div>
+<div class="sws-slide">
+ <h1>Exemple de document</h1>
+ <p style="text-align:center;font-size:smaller;">(liste des balises
+ données sur la feuille de TD 4!)</p>
+<div style="margin-left:10%;">
+<code style="font-size:smaller;"><![CDATA[ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
+ <head>
+ <title>Un titre</title>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+ </head>
+ <body>
+ <h1>Titre de section</h1>
+ <p> premier paragraphe de texte. On met
+ un <a href="http://www.lri.fr">lien</a> ici.
+ </p>
+ <!-- on peut aussi mettre des commentaires -->
+ </body>
+ </html>]]></code>
+</div>
+</div>
+ </body>
+</html>