An Introduction to Distributed Applications and Ecommerce
Download
Report
Transcript An Introduction to Distributed Applications and Ecommerce
Le Web
Section 3: Le Web, le http et le HTML
1
Les clients et serveurs
Web
Clients utilisant des fouineurs
Serveur Web
Requêtes émises
pages reçues
Section 3: Le Web, le http et le HTML
2
Le langage de balise
HTML
• Les pages sont écrites en HTML
• HyperText Mark-up Language
• HTML est basé sur SGML, un standard
développé par IBM
• Le texte est entrelacé avec des balises
• Les pages peuvent être dynamiques ou
statiques
• Des formulaires de saisie de données
peuvent être inclus dans les pages
Section 3: Le Web, le http et le HTML
3
Balises HTML
• Formatage de base
• <b>Présentez en gras cette section</b>
• Gras, Italique, Titre, couleur
• Liste
• Énumérations, puces
• Tableau
• Graphiques et images
• Champs non visible pour les engins
de recherche
Section 3: Le Web, le http et le HTML
4
Un exemple de HTML
<HTML>
<HEAD>
<TITLE> Darrel’s Rudimentary Home Page </TITLE>
</HEAD>
<BODY>
<H1> Darrel Ince </H1>
Hi I am Darrel Ince. I am a Professor at the Open University.
There are a number of things worth knowing about me:
<UL>
<LI> I own a psychotic cat. </LI>
<LI> My youngest daughter is named after Dylan Thomas’s
late wife. </LI>
<LI> I am a fanatical Welsh rugby supporter. </LI>
<LI> I am very tall. </LI>
<LI> I am a proficient Java programmer. </LI>
</UL>
</BODY>
</HTML>
Section 3: Le Web, le http et le HTML
5
Les liens
• HTML permet d’exprimer les liens
d’un document à un autre document.
• Les liens peuvent référer à un
document sur le même ordinateur ou
sur un autre ordinateur
• En cliquant sur un lien, la nouvelle
page est présentée.
Section 3: Le Web, le http et le HTML
6
Les liens (ii)
<a href= "http://www.iro.umontreal.ca/index.html">
Le département IRO
</a>
• Les hyperliens peuvent être relatifs
<a href="../chapitre2/index.html">Chapitre suivant</a>
• Les hyperliens relatifs facilitent
la gestion d'un ensemble de
contenu
Section 3: Le Web, le http et le HTML
7
Une ancre
• Un lien peut adresser une ancre à
l’intérieur d’un document.
• Dans ce cas, la section identifiée par l’ancre est
présentée.
• Exemple
• Ancre définit à l'intérieur d'un document
• <a name="section2">Titre de la section II</a>
• Exemple d'hyperlien le ciblant
•
<a href= "http://www.iro.umontreal.ca/cours/plan.html#section2"> </a>
Section 3: Le Web, le http et le HTML
8
URL
• “Uniform Resource Locator” ou
“Universal Resource Locator”
• Est l’adresse d’une page Web ou
de d’autres ressources
• Un URL peut identfier une page
Web, un fichier FTP, etc..
Section 3: Le Web, le http et le HTML
9
Un exemple d’URL
http://www.open.ac.uk/staff/Darrel
Spécifie le protocole
Section 3: Le Web, le http et le HTML
Spécifie le chemin
d’accès à la page
Web
Spécifie l’ordinateur
10
Définition URL
•
•
Uniform Ressource Location – URL
URI: Uniform Ressource Identifier (ISDN, autre)
• Exemple: http://www.iro.umontreal.ca/index.html
•
•
scheme://host:port/path/extra-path-info?query-info
Scheme
• Protocole utilisé: file, http, ftp, smtp, telnet, autres
•
Host
• Nom internet de l'ordinateur ou adresse IP
•
Path
• Chemin d'accès à la ressource
• Extra-path-info
• Chemin d'accès additionnel
•
Query-info
• Suite de paramètres additionnels, nom=valeur
Section 3: Le Web, le http et le HTML
11
Les formulaires
• HTML permet d’inclure des
formulaires
• Les formulaires contiennent des
objets visuels comme les bouttons,
les boîtes de sélection, les champs
de texte
• Quand une forme est complétée, les
données sont retournées au serveur
Web et un programme y est exécuté
Section 3: Le Web, le http et le HTML
12
Définition succinte d’un
formulaires
• <form action=url> ....</form>
• Affiche un champ de saisie d'un formulaire
• <input type=text name=string>
• Différents type de champ de saisie
•
•
•
•
•
•
Texte court ou long
Boutton de choix (un ou plusieurs de la liste)
Boutton radio (actif, inactif)
Mot de passe
Boutton personnalisé, image, coordonnées x et y
Menu déroulant
Section 3: Le Web, le http et le HTML
13
Formulaire
• Le client transmet tous les champs d'un
formulaire à l'URL d'action lorsque un
bouton input de type submit est activé
• <input type=submit>
• Les données du formulaire sont transmises
avec la requête
• Une liste de tuples
• <name>=valeur
Section 3: Le Web, le http et le HTML
14
Exemple d’un formulaire
HTML(i)
<FORM METHOD=”POST” ACTION=”/cgi-bin/Form1process”>
<P>
Please type your name below
</P>
<P>
<INPUT TYPE=”TEXT” NAME=”nameField” MAXLENGTH=”30”>
</P>
<P>
Please type your address below
</P>
<P>
<TEXTAREA NAME=”addField” ROWS=”5” COLS=”40”>
</TEXTAREA>
</P>
<P>
Male<INPUT TYPE=”RADIO”
NAME=”maleButton”
VALUE=”mButt”>
</P>
Section 3: Le Web, le http et le HTML
15
Exemple d’un formulaire
HTML(ii)
<P>
Female<INPUT TYPE=”RADIO”
NAME=”femaleButton”
VALUE=”fButt”>
</P>
<P>
<INPUT TYPE=”SUBMIT”
VALUE=”Submit”>
</P>
</FORM>
Ce formulaire contient 2 bouttons radio,
un champ de saisi de texte et un texte
Section 3: Le Web, le http et le HTML
16
HTTP
• HyperText Transfer Protocol
• Protocole utilisé pour la
communication entre le serveur
et le client Web
• Un protocole de type
requête/réponse
Section 3: Le Web, le http et le HTML
17
Un exemple d’une
requête
Nom de la commande
Je veux cette page
GET /index.html HTTP/1.1
User-Agent: Lynx/2.4
Connection: Keep-Alive
Host: www.openaccess.com
Accept: text/html
J’utilise ce
logiciel
Garder la connection
TCP/IP
Accepte une réponse
En text/HTML
Section 3: Le Web, le http et le HTML
Le nom de l’ordinateur à qui la
requête s’adresse
18
Un exemple d’une
réponse
Version 1.1 de HTTP
La requête du client réussi
HTTP/1.1 200 OK
Date: Thu, 22 July 1998 18:40:55 GMT
Server: Apache 1.3.5 (Unix) PHP/3.0.6
Last-Modified: Mon, 19 July 1997 16:03:22 GMT
Content-Type: text/html
Content-Length: 12987
...
Type de
contenu
Longueur du
contenu (octets)
Section 3: Le Web, le http et le HTML
Date de la réponse
Date de la
dernière
modification à
la page
Logiciel
Serveur
19
Réponse (ii)
•
Contiennent les paramètre d'en-tête, suivi du document
•
•
•
•
•
•
•
•
•
•
•
HTTP 1.1 200 Document follows
Date: Fri, 31 August
HTTP/1.1 200 OK
Date: Thu, 30 Aug 2001 20:12:15 GMT
Server: Apache/1.3.14 (Unix) (Red-Hat/Linux)
mod_fastcgi/2.2.10
Last-Modified: Wed, 20 Dec 2000 16:18:33 GMT
Content-Length: 697
Connection: close
Content-Type: text/html
<html> <head> <title>CIRANO</title>
....
Section 3: Le Web, le http et le HTML
20
Commandes HTTP
GET
HEAD
Obtenir une page
Comme GET, mais sans contenu,
seulement les entêtes
POST
Appeler un programme sur un formulaire
PUT
Conserver le fichier sur le serveur
OPTIONS Liste des options de communications
Section 3: Le Web, le http et le HTML
21
Commandes
GET Vs POST
• GET
• Les paramètres sont dans l’URL
• POST
• Les paramètres du formulaire
suivent dans le fil d’entrée après
les en-têtes
Section 3: Le Web, le http et le HTML
22
Requête Get
• GET /index.html HTTP/1.0
• Paramètres du formulaire d'action
• GET /mescripts/monscript?nom=Robert+GerinLajoie&adresse=2020+University HTTP/1.1
• Champs d'information additionnelle suivent le GET
•
•
•
•
•
•
Connection: Keep-Alive
User-Agent: String
Mozilla/2.02Gold (WintNT; I)
Host: www.iro.umontreal.ca
Authorization: scheme credentials
BASIC username:password
• username:password encodé en base64
• 16 autres de possibles
Section 3: Le Web, le http et le HTML
23
Requête Post
• POST mescripts/monscript HTTP/1.1
• Les paramètres du formulaire suivent sur le fil
après les en-têtes et une ligne blanche
• nom=Robert+Gerin-Lajoie&adresse=2020+University
• Pourquoi une requête Post?
• Pas de limite à la longueur et au nombre des
paramètres
Section 3: Le Web, le http et le HTML
24
Codes de status
• Indiques le résultat d’une requête
• Commençant par 2xx indique une réponse
correcte
• Commençant par 3xx indique que le
logiciel fouineur doit faire une autre action
• Redirection (Redirect) sur une autre ressource
• Location: <URL de la ressource>
• Commençant par 4xx indique un
problème, souvent que la page est absente
(404)
• Commençant par 5 indique un problème
sérieux du côté du serveur
Section 3: Le Web, le http et le HTML
25
Témoins-Cookies
• Le serveur demande à ses clients de
conserver les témoins.
• Le client retourne le témoin à toutes
les requêtes
• Ceci est fait dans l'en-tête d'une
réponse et d'une requête.
• Limite:
• Au moins 300 témoins par client
• 4 Ko par cookies
• 20 témoins par serveur
Section 3: Le Web, le http et le HTML
26
Témoins
• Set-Cookie: name=String; expires=date;
path=pathname; domain=domain-name
• Le témoin lui-même
• name=String (sauf blanc, point virgule ou
tabulateur)
• La date d'expiration
• Le domaine et le chemin d'accès pour
lesquels le jeton sera retransmis lors d'une
prochaine requête par le client
Section 3: Le Web, le http et le HTML
27
Exemples
• domain=mondomaine.com
• path= /
• Ce témoin sera retourné à tous les
serveurs hhtp du domaine
mondomaine.com,
• Sur toutes les ressources
Section 3: Le Web, le http et le HTML
28
Retourner le témoin sur tous
les ordinateurs du domaine!
• Attention!
• Only hosts within the specified domain can set a cookie for a
domain and domains must have at least two (2) or three (3)
periods in them to prevent domains of the form: ".com",
".edu", and "va.us". Any domain that fails within one of the
seven special top level domains listed below only require two
periods. Any other domain requires at least three. The seven
special top level domains are: "COM", "EDU", "NET", "ORG",
"GOV", "MIL", and "INT".
• La valeur par défaut est le nom de
l’ordinateur qui a généré le témoin.
Section 3: Le Web, le http et le HTML
29
Témoins tiers (cookies
tiers)
• Fournis par le serveur des
images insérées dans vos pages
(IMG)
• Cette image peut être invisible
(1X1)
• Permet à un site tiers de suivre
vos sessions de furetage
• Marketing, tracking, autres
Section 3: Le Web, le http et le HTML
30
Durée des témoins
• Permanent
• Selon la date fournie
• Session de furetage
• Jusqu’à ce que votre fureteur soit
fermé
• Prolème:
• Fureteur dans les lieux publics
Section 3: Le Web, le http et le HTML
31
Scénarios complexes
•
•
•
•
Redirections invisibles
Images invisibles
Témoins sur des images
Utilisations
• Pour un serveur commun d’identité
• Pour suivre à la trace les utilisations du
site
• WebBeacons
• http://www.allaboutcookies.org/web-beacons/
Section 3: Le Web, le http et le HTML
32