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=0000000000000000000000000000000000000000;hb=0a552a95e70324a04e9d06bd30ac5bc96b2a58b5;hp=b0264bd6a792d6dda6701dae0a30e82becd0a032;hpb=171bd61f3e4cf06638c6a90fdc053efbec9623ff;p=hacks%2FsimpleWebSlides.git
diff --git a/prog_internet/prog_internet_04.xhtml b/prog_internet/prog_internet_04.xhtml
deleted file mode 100644
index b0264bd..0000000
--- a/prog_internet/prog_internet_04.xhtml
+++ /dev/null
@@ -1,549 +0,0 @@
-
-
-
-
- Web et 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
-
-
-
-
Internet et ses services
-
-
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
-
-
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
-
-
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
-
Le protocole HTTP
-
-
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
-
- HTML, le format des documents
-
-
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.
-
-
-
- ]]>
-
-