X-Git-Url: http://git.nguyen.vg/gitweb/?a=blobdiff_plain;f=prog_internet%2Fprog_internet_04.xhtml;fp=prog_internet%2Fprog_internet_04.xhtml;h=beb1272ec130fe86e758ae5ef96eeb2edaeed010;hb=7cce5c3a37a866072108aedf85ee3b06272dac81;hp=0000000000000000000000000000000000000000;hpb=9262e1c26fe53f5c68167eadbda074c5ddbb2658;p=hacks%2FsimpleWebSlides.git
diff --git a/prog_internet/prog_internet_04.xhtml b/prog_internet/prog_internet_04.xhtml
new file mode 100644
index 0000000..beb1272
--- /dev/null
+++ b/prog_internet/prog_internet_04.xhtml
@@ -0,0 +1,544 @@
+
+
+
+
+ Programmation Internet
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Plan
+
+ - Systèmes d'exploitation ✔
+ - Réseaux et Internet ✔
+ - Le Web
+
+ - 3.1 Internet et ses services
+ - 3.2 Fonctionnement du Web
+ - 3.3 Adressage des documents Web
+ - 3.4 Le protocole HTTP
+ - 3.5 HTML, le format des documents
+
+
+
+
+
Bref historique d'Internet (1/2)
+
+
+ | 1959-1968 | ARPA
+ (Advanced Research Project Agency) crée un réseau
+ de quelques machines capable de résister à une attaque. |
+
+
+ | 1969 | ARPANET. Interconnexion des ordinateurs
+ centraux des grandes universités et institutions
+ américaines. Première utilisation du concept de paquet d'information. |
+
+
+ | 1970-1982 |
+ Interconnexion avec la Norvège et le Royaume-Uni.
+ |
+
+
+ | 1982 |
+ Passage au protocole TCP/IP. Naissance de l'Internet actuel. |
+
+
+
+
Bref historique d'Internet (2/2)
+
+
+ | 1986 | « Autoroutes de
+ l'information ». Des super-ordinateurs et les premières
+ connexions à fibres optiques sont utilisées pour accélérer
+ le débit d'Internet. |
+
+
+ | 1987-1992 | Apparition des premiers fournisseurs
+ d'accès. Les entreprises se connectent. |
+
+
+ | 1993-2000 |
+ Avènement du Web. Démocratisation du haut-débit (vers
+ 2000 pour la France).
+ |
+
+
+ | 2000-présent |
+ Explosion des services en ligne, arrivée des réseaux
+ sociaux, internet mobile, Cloud (stockage et calcul
+ mutualisés accessible depuis internet). |
+
+
+
+
Internet
+
+ - Ensemble de logiciels et protocoles basés sur TCP/IP
+
+ - Modèle Client/Serveur
+ - Un serveur fournit un service:
+
+ - courriel
+ - transfert de fichier (ftp)
+ - connexion à distance (ssh)
+ - Web (http)
+
+
+ - Plusieurs services peuvent être actifs sur la même
+ machine (serveur). Un port (identifiant numérique)
+ est associé à chaque service. Sur Internet, un service est
+ identifié par:
+
+ - L'adresse IP de la machine sur lequel il fonctionne
+ - Le numéro de port sur lequel le programme attend les
+ connexions
+
+
+
+
+
Exemples de services
+
+ | Service |
+ Protocole |
+ Port |
+ Description |
+
|---|
+
+ | ftp | File Transfer Protocol |
+ 20,21 | Transfert de fichiers |
+ | telnet | Network Virtual
+ Terminal | 23 | Shell à distance |
+ | ssh | Secure Shell | 22 | Shell Ã
+ distance crypté |
+ | mail | Simple Mail Transfer
+ Protocol | 25 | Envoi de mail |
+ | pop | Post Office
+ Protocol | 110 | Récupération de mail |
+ | imap | Internet Message Access
+ Protocol | 143 | Synchronisation de mails |
+ | nslookup | Domain Name
+ System | 42 | Serveur de noms |
+ | http | Hyper Text Transfer Protocole | 80 | Web |
+
+
+
+
World Wide Web (1/2)
+
+ - Service de distribution de page hypertexte
+ - Une page hypertexte contient des références
+ immédiatement accessibles à d'autres pages (pointeurs
+ ou liens hypertextes)
+ - Les pages sont décrites dans le
+ langage HTML (HyperText Markup Language)
+ - Architecture client/serveur:
+
+ - Les pages sont stockées sur le serveur
+ - Les pages sont envoyées au client (navigateur Web) qui
+ en assure le rendu
+
+
+ - Utilise le protocole HTTP pour les échanges entre
+ le client et le serveur
+
+
+
World Wide Web (2/2)
+
Concepts clé:
+
+ | URL | localisation d'une page Web (« adresse de
+ la page ») |
+ | HTTP | protocole de communication entre un
+ client et un serveur Web |
+ | HTML | langage de description des pages
+ Web |
+
+
Ãvolutions récentes (Web 2.0, internet mobile, Cloud, â¦)
+
+ - Standardisation du contenu multimédia (images, vidéos et
+ sons en streaming)
+ - Contenu interactif avancé (stockage de fichier coté
+ client, rendu 3D, â¦)
+ - Uniformisation de nombreuses extensions ad-hoc: HTML5
+
+
+
Plan
+
+ - Systèmes d'exploitation
+ - Réseaux et Internet
+ - Le Web
+
+ - 3.1 Internet et ses services
+ - 3.2 Fonctionnement du Web
+ - 3.3 Adressage des documents Web
+ - 3.4 Le protocole HTTP
+ - 3.5 HTML, le format des documents
+
+
+
+
+
Fonctionnement du Web
+
+
+
+
+
+
Côté client
+
Le navigateur :
+
+ - Analyse l'URL demandée
+ - Obtient l'adresse IP auprès du serveur DNS
+ - Ãtablit une connexion (potentiellement sécurisée) avec le serveur
+ - Envoie une requête HTTP au serveur
+ - Récupère la page envoyée par le serveur dans
+ sa réponse
+ - Analyse la page et récupère les éléments référencés :
+ images, sons, â¦
+ - Effectue le traitement du code client
+ - Met en forme le contenu et l'affiche dans la fenêtre
+
+
+
Côté serveur
+
+ - Un listener (thread particulier) attend les
+ connexions sur un port par défaut (80 dans le cas de HTTP)
+ - à chaque nouvelle connexion, le listener crée
+ un thread de traitement et se remet en attente
+
+ - Le thread de traitement vérifie la validité de la
+ requête :
+
+ - le document demandé existe ?
+
+ - le client est autorisé à accéder au document ?
+
+ - â¦
+
+
+ - Le thread de traitement répond à la requête :
+
+ - Exécution de code côté serveur, récupération de
+ données dans une BD, â¦
+
+ - Envoi de la page au client
+
+
+
+
+
+
Plan
+
+ - Systèmes d'exploitation
+ - Réseaux et Internet
+ - Le Web
+
+ - 3.1 Internet et ses services
+ - 3.2 Fonctionnement du Web
+ - 3.3 Adressage des documents Web
+ - 3.4 Le protocole HTTP
+ - 3.5 HTML, le format des documents
+
+
+
+
+
Adressage des documents Web (1/3)
+
+ | URL | Uniform Resource Locator
+ identifie un document sur internet |
+
+
Une URL se décompose en 3 partie
+
- protocole (comment ?)
+ - adresse (où ?)
+ - document (quoi ?)
+
+
Syntaxe (simplifiée) :
+
protocole://adresse/document
+
Exemple :
+
http://www.lri.fr/~kn/teach_fr.html
+
+
Adressage des documents Web (2/3)
+
On peut aussi préciser un numéro
+ de port, des paramètres
+ et un emplacement :
+
+
protocole://adresse:port/document?p1=v1&p2=v2#empl
+
Exemple :
+
http://www.youtube.com:80/results?search_query=tbbt#search-results
+
Le serveur utilise les paramètres passés par le client dans
+ l'URL pour calculer le contenu de la page (changer la
+ chaîne « tbbt » ci-dessus et essayer)
+
+
Adressage des documents Web (3/3)
+
+ La racine d'un site Web
+ (ex: http://www.lri.fr/) correspond
+ à un répertoire sur le disque du serveur
+ (ex: /var/www). Le fichier
+
http://www.lri.fr/index.html
+
se trouve à l'emplacement
+
/var/www/index.html
+
Le serveur Web peut aussi effectuer des réécritures
+ d'adresses :
+
http://www.lri.fr/~kn/index.html
+
devient
+
/home/kn/public_html/index.html
+
+
Plan
+
+ - Systèmes d'exploitation
+ - Réseaux et Internet
+ - Le Web
+
+ - 3.1 Internet et ses services
+ - 3.2 Fonctionnement du Web
+ - 3.3 Adressage des documents Web
+ - 3.4 Le protocole HTTP
+ - 3.5 HTML, le format des documents
+
+
+
+
+
Caractéristiques du protocole HTTP
+
+ - Sans connexion permanente:
+
+ - Le client se connecte au serveur, envoie sa requête,
+ se déconnecte
+ - Le serveur se connecte au client, envoie sa réponse,
+ se déconnecte
+
+
+ - Indépendant du contenu : permet d'envoyer des documents
+ (hyper) texte, du son, des images, â¦
+ - Sans état: chaque paire requête/réponse est
+ indépendante (le serveur ne maintient pas d'information sur le
+ client entre les requêtes)
+ - Protocole en mode texte
+
+
+
Format des messages HTTP
+
Les messages ont la forme suivante
+
- Ligne initiale CR LF
+ - zéro ou plusieurs lignes d'option CR LF
+ - CR LF
+ - Corp du message (document envoyé, paramètres de la
+ requête, â¦)
+
+
- Requête la première ligne contient un nom
+ de méthode (GET, POST, HEAD, â¦), le paramètre de la
+ méthode et la version du protocole
+ - Réponse la version du protocole, le code de la
+ réponse (200, 404, 403, â¦) et un message informatif
+
+
+
+
Démo
+
+
+
Plan
+
+ - Systèmes d'exploitation
+ - Réseaux et Internet
+ - Le Web
+
+ - 3.1 Internet et ses services
+ - 3.2 Fonctionnement du Web
+ - 3.3 Adressage des documents Web
+ - 3.4 Le protocole HTTP
+ - 3.5 HTML, le format des documents
+
+
+
+
+
HTML
+
+ HyperText Markup Language : langage de mise en forme
+ de documents hypertextes (texte + liens vers d'autres
+ documents). Développé au CERN en 1989.
+ 1991 : premier navigateur en mode texte
+ 1993 : premier navigateur graphique (mosaic)
+ développé au NCSA (National Center for Supercomputing
+ Applications)
+
+
+
Document HTML
+
- est un document semi-structuré
+ - dont la structure est donnée par
+ des balises
+
+
+
+
+ | Exemple | Rendu par défaut |
|---|
+
+ | en gras ]]> | Un
+ texte en gras |
+ Un lien ]]> |
+ Un lien |
+
+ Premièrement
+ Deuxièmement
+ ]]> |
+- Premièrement
+- Deuxièmement
+
+ |
+
+
+
On dit que ]]> est une balise
+ ouvrante et ]]> une
+ balise fermante. On peut
+ écrire ]]> comme raccourci pour
+ ]]>.
+
+
+
Historique du langage HTML
+
+ | 1973 | GML, Generalised Markup Language développé chez
+IBM. Introduction de la notion de balise. |
+| 1980 | SGML, Standardised GML, adopté par l'ISO |
+| 1989 | HTML, basé sur SGML. Plusieurs entreprises (microsoft,
+netscape, ... ) interprètent le standard de manière
+différente |
+| 1996 | XML, eXtensible Markup Language norme pour les
+documents semi-structurés (SGML simplifié) |
+| 2000 | XHTML, version de HTML suivant les conventions
+ XML |
+| 2008 | Première proposition pour le nouveau standard,
+ HTML5 |
+| 2014 | Standardisation de HTML5 |
+
+
+
XHTML vs HTML
+
On utilise XHTML dans le cours. Différences avec HTML:
+
+ -
+ Les balises sont bien parenthésées
+ ( ]]> </b> est interdit)
+
+ - Les balises sont en minuscules
+
+
Les avantages sont les suivants
+
- HTML autorise les mélanges majuscule/minuscule, de ne
+ pas fermer certaines balise ⦠Les navigateurs corrigent ces
+ erreurs de manières différentes
+ - Le document est structuré comme un programme
+ informatique (les balises ouvrantes/fermantes correspondent Ã
+ { et }). Plus simple à débugger.
+
+
+
Rôle d'(X)HTML
+
Séparer la structure du document de
+ son rendu. La structure donne une sémantique au
+ document :
+
+ - ceci est un titre
+ - ceci est un paragraphe
+ - ceci est un ensemble de caractères importants
+
+
Cela permet au navigateur d'assurer un rendu en fonction de la
+ sémantique. Il existe différents types de rendus:
+
+ - graphique interactif (Chrome, Firefox, Internet Explorer,
+ â¦)
+ - texte interactif (Lynx, navigateur en mode texte)
+ - graphique statique (par ex: sur livre électronique)
+ - rendu sur papier
+ - graphique pour petit écran (terminal mobile)
+
+
+
Exemple de document
+
(liste des balises
+ données sur la feuille de TD 4!)
+
+
+
+
+ Un titre
+
+
+
+ Titre de section
+ premier paragraphe de texte. On met
+ un lien ici.
+
+
+
+ ]]>
+
+