X-Git-Url: http://git.nguyen.vg/gitweb/?a=blobdiff_plain;f=prog_internet%2Fprog_internet_05.xhtml;fp=prog_internet%2Fprog_internet_05.xhtml;h=91d1ff453ca7c4b7b87c1911f45d88828993115e;hb=7cce5c3a37a866072108aedf85ee3b06272dac81;hp=0000000000000000000000000000000000000000;hpb=9262e1c26fe53f5c68167eadbda074c5ddbb2658;p=hacks%2FsimpleWebSlides.git
diff --git a/prog_internet/prog_internet_05.xhtml b/prog_internet/prog_internet_05.xhtml
new file mode 100644
index 0000000..91d1ff4
--- /dev/null
+++ b/prog_internet/prog_internet_05.xhtml
@@ -0,0 +1,531 @@
+
+
+
+
+ Programmation Internet
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Plan
+
+
+ - Systèmes d'exploitation
+ - Réseaux et Internet
+ - Le Web
+ - CSS
+
+ - 4.1 Introduction
+ - 4.2 Boîtes
+ - 4.3 Selecteurs
+
+
+
+
+
+
+
+
Cascading Style Sheets (CSS)
+
+
+ CSS |
+ Langage permettant de décrire le style graphique
+ d'une page HTML
+ |
+
+
+
On peut appliquer un style CSS
+
+ - à un élément en
+ utilisant l'attribut
style
+ - Ã une page en utilisant
+ l'élément
... ]]>
+ dans l'en-tête
+ du document (dans la
+ balise ...]]>
).
+
+ - à un ensemble de pages en référençant un fichier de style
+ dans chacune des pages
+
+
+
+
+
L'attribut style
+
Un lien]]>
+
+
Apperçu:
+
+ Un lien
+
+
Inconvénient: il faut copier l'attribut
+ style pour tous les liens de la page.
+
+
+
+
+
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
+
+
![](cours_4.svg)
+
+
+
+
+
+
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.
+
+
+
+ ]]>
+
+
+
+