Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Jean-Marc PUJOS © CNAM - Interaction Homme-Machine Les technologies du Web Diap

Jean-Marc PUJOS © CNAM - Interaction Homme-Machine Les technologies du Web Diapositive 1 / 117 1ère Partie : Introduction au Web 1- Introduction à l'Hypertexte 2- Présentation du protocole HTTP 3- Principes de bases des CGI 4- Présentation du WEB2 (AJAX) 2ème Partie : Présentation de HTML & XHTML 3ème Partie : Présentation de Javascript 4ème Partie : Introduction à PHP 5ème Partie : Introduction à XML & XSLT LES TECHNOLOGIES DU WEB Jean-Marc PUJOS © CNAM - Interaction Homme-Machine Les technologies du Web Diapositive 2 / 117 LE WEB - Introduction (1) Introduction : du livre à l’hypertexte Note de bas de page début fin Une organisation essentiellement séquentielle (seul déroutement : la note de bas de page, à priori, on lit dans l’ordre... Un journal: rôle de la première page, sommaire… une documentation technique: organisation arborescente, avec accès variés Jean-Marc PUJOS © CNAM - Interaction Homme-Machine Les technologies du Web Diapositive 3 / 117 A B Tables Annexe Glossaire Dictionnaire A-Z Index Entrée Chapitres Entrée Entrée Entrée LE WEB - Introduction (2) Jean-Marc PUJOS © CNAM - Interaction Homme-Machine Les technologies du Web Diapositive 4 / 117 LE WEB - Introduction (3) D'une façon générale, on peut dire qu'un hypertexte est un document numérique constitué de nœuds d'informations reliables entre eux par des liens. Les définitions sont multiples car le mot désigne à la fois: un concept : l'ensemble des potentialités d'association de divers nœuds d'informations, association réalisée par des liens interactifs, un outil informatique, un logiciel : le générateur d'hypertexte, qui permet de produire aussi bien les nœuds que les liens, un produit : le document hypertextuel, dans lequel le lecteur/utilisateur pourra naviguer au travers des nœuds d'informations, et construire ses propres liens, chaque lien est mis en relation à partir d’un point d’ancrage (une ancre est un objet informatique de type pointeur, adresse …). Jean-Marc PUJOS © CNAM - Interaction Homme-Machine Les technologies du Web Diapositive 5 / 117 LE WEB - Introduction (4) Un document : une adresse : URL "Uniform Ressource Locator" sdf sdf Fdjhjch dffg bfg hb gb d g v vdgvg fgbvhb gjfykjfjèyjh vxhncj,htxf jhchn dv gvdcv fdcbw Fhb fgx image Fhb fgx Fhb fgx Fhb fgx Fhb fgx Fhb fgx Fhb fgx Fhb fgx Hypertexte : liens entre concepts Toile d'araignée mondiale : World Wide Web Stockage et représentation des connaissances : réseaux sémantiques, graphes conceptuels,.... Jean-Marc PUJOS © CNAM - Interaction Homme-Machine Les technologies du Web Diapositive 6 / 117 LE WEB - Architecture client-serveur sdf sdf Fdjhjch dffg bfg hb gb d g v vdgvg fgbvhb gjfykjfjèyjh vxhncj,htxf jhchn dv gvdcv fdcbw Fhb fgx image Un document: du texte structuré, des images fixes ou animés, du son, de la vidéo, des liens vers d’autres documents ou lien interne ou lien vers programmes et encore d’autres choses (comportement, boutons, zones a remplir,…) image Autre lien Le programme client (browser) demande un document situé sur un serveur (httpd) Protocole http Document html Jean-Marc PUJOS © CNAM - Interaction Homme-Machine Les technologies du Web Diapositive 7 / 117 LE WEB - Les standards Service Protocole Langage • FTP FTP (File Transfert Protocol) • Messagerie SMTP (Simple Mail Transfert Protocol) • News NNTP (Network News Transfert Protocol) • WWW HTTP HTML (HyperText Transfert Protocol) (HyperText Markup Language) • D'autres standards : SGML (XML) , Acrobat (Adobe), VRML (3D) et MIME (Multipurpose Internet Mail Extension) Jean-Marc PUJOS © CNAM - Interaction Homme-Machine Les technologies du Web Diapositive 8 / 117 • HyperText Transfert Protocol : définit comment le browser envoie une requête et comment le serveur Web répond. • HTTP : au dessus de TCP/IP (transport fiable) • 1990 : HTTP/0.9: établissement de connexions, messages de type requête ou réponse en retour. Une réponse est un flot de caractères ASCII (méthode GET + réponse). • HTTP 1.0 (RFC 1945) • Permet de transférer des messages avec des en-têtes décrivant le contenu du message en utilisant un codage de type MIME • HTTP 1.1 (RFC 2068 & 2616) LE WEB - Le protocole HTTP Jean-Marc PUJOS © CNAM - Interaction Homme-Machine Les technologies du Web Diapositive 9 / 117 • Permet de coder à l’intérieur d’un message plusieurs types de données à caractère multimédia (graphique, voix, etc …) • Pour la description du type d’objet transféré et son traitement à la réception • Nombre limité de média : types divisé en sous types ex : video/mpeg, video/quicktime • Coté serveur : objet relié à un type/sous-type MIME : c’ est l’extension du nom de fichier qui définit l’étiquette • Coté client : le type MIME récupéré est comparé avec la liste des types MIME connus du client: • certains sont traités directement ex: text/html, • d’autres par des logiciels plug-in , • d’autres par des applications externes, • enfin, le client peut simplement sauvegarder sur le disque l’objet. LE WEB – MIME (1) Jean-Marc PUJOS © CNAM - Interaction Homme-Machine Les technologies du Web Diapositive 10 / 117 TEXT .HTML TEXT * text/html BINARY .GIF GIFf * image/gif CGI .CGI APPL * text/html ACGI .ACGI APPL * text/html SCRIPT .SCRIPT TEXT * text/html SCRIPT * TEXT ToyS text/html APPL .EXE APPL * text/html TEXT .TEXT TEXT * text/plain TEXT .TXT TEXT * text/plain TEXT .HQX TEXT * application/mac-binhex40 BINARY .JPG JPEG * image/jpeg BINARY .JPEG JPEG * image/jpeg Les MIME contents-types se définissent par un type et un sous type Exemple de fichier de configuration serveur Machhtp (extrait) BINARY .PICT PICT * image/pict BINARY .AU * * audio/basic BINARY .AIFF * * audio/x-aiff BINARY .XBM * * image/x-xbm BINARY .MOV MOOV * video/quicktime BINARY .MPEG MPEG * video/mpeg BINARY .XL XLS3 * application/excel BINARY .SIT SITD * application/x-stuffit BINARY .PDF PDF * application/pdf BINARY .DIR TEXT * application/x-director BINARY .DCR TEXT * application/x-director BINARY .DXR TEXT * application/x-director LE WEB – MIME (2) Jean-Marc PUJOS © CNAM - Interaction Homme-Machine Les technologies du Web Diapositive 11 / 117 client WEB (browser) : demandant un document hypertexte pouvant contenir d'autres liens hypertexte ou des liens sur des sessions TELNET ou FTP,... serveur WEB serveur WEB serveur WEB lien Hypertexte lien Hypertexte port TCP:80 port TCP:80 LE WEB - HTTP/1.0 - les bases Jean-Marc PUJOS © CNAM - Interaction Homme-Machine Les technologies du Web Diapositive 12 / 117 Établissement de la connexion : IP + port Requête d’un document (URL) : Entête + [données] Envoi du document.html : Entête + [données] Fermeture de la connexion Si le document comporte des images, un nouveau transfert complet est à faire pour chaque image….sauf si….connexion persistante LE WEB - HTTP/1.0 - schéma de base Jean-Marc PUJOS © CNAM - Interaction Homme-Machine Les technologies du Web Diapositive 13 / 117 • RFC 2068 puis 2616 (Janvier 1997) • proposé comme standard Internet • prise en compte des effets de hiérarchie de cache, proxy et connexion persistante • 3 niveaux de recommandations MUST: obligatoire SHOULD MAY • méthodes nouvelles: PUT, DELETE, TRACE,OPTIONS • Entête host:www.host.com:80 (obligatoire si le client utilise http1.1) LE WEB - HTTP/1.1 - Introduction Jean-Marc PUJOS © CNAM - Interaction Homme-Machine Les technologies du Web Diapositive 14 / 117 origin server : serveur WWW sur lequel réside la ressource user agent : qui envoie les requêtes(browser, éditeur, spider,..) proxy : programme intermédiaire(relais)qui agit à la fois comme serveur et client. Les requêtes sont servies soit directement (interne) soit passées à d'autres serveurs gateway : relais qui agit comme serveur à la place d'un autre. Le client faisant la requête n'a pas à être averti qu'il communique avec la gateway (différence de proxy) tunnel : agit comme un relais aveugle entre deux connexions. une fois activé (initié par une requête http, il ne doit plus être considéré comme un élément de la communication) cache : stock local de messages réponses et système de gestion de ceux-ci. tout client ou serveur peut être cache (sauf un tunnel) LE WEB - HTTP/1.1 - Définitions (1) Jean-Marc PUJOS © CNAM - Interaction Homme-Machine Les technologies du Web Diapositive 15 / 117 requête réponse connexion modèle http/1.0 user agent serveur d'origine modèle http/1.1 requête réponse connexion connexion connexion connexion relais (sans cache) LE WEB - HTTP/1.1 - Définitions (2) Jean-Marc PUJOS © CNAM - Interaction Homme-Machine Les technologies du Web Diapositive 16 / 117 modèle http/1.1 requête réponse connexion connexion relais (avec cache) CACHE user agent serveur d'origine 1 2 3 LE WEB - HTTP/1.1 - Définitions (3) Jean-Marc PUJOS © CNAM - Interaction Homme-Machine Les technologies du Web Diapositive 17 / 117 Le Serveur WEB CLIENT navigateur Internet http Pages html DEMON httpd statique En fait : Le navigateur effectue une requête HTTP (envoi d’entêtes HTTP) Le serveur traite la requête puis envoie une réponse HTTP (envoi des entêtes HTTP de réponses) Jean-Marc PUJOS © CNAM - Interaction Homme-Machine Les technologies du Web Diapositive 18 / 117 METHOD : ressource demandée, version du protocole GET : télécharger le contenu d’un document HEAD : récupérer uniquement l’entête d’un document uploads/Science et Technologie/ html-http-cgi-ajax-javascript.pdf