introduction aux technologies du webimss-atenciam/itw/1-intro.pdf · construit à la volée la...
TRANSCRIPT
![Page 1: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/1.jpg)
1 1
Introduction aux technologies du web
Objectifs ● Comprendre le fonctionnement du World Wide Web ● Produire des documents web statiques et dynamiques
Manuel ATENCIA ARCAS [email protected]
Ces diapositives ont été faites par : Philippe Genoud, UFR IM2AG, UGA
![Page 2: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/2.jpg)
2
vocabulaire
Internet WWW
Client Web
Serveur web
Pages statiques
HTML Pages Dynamiques
W3C
HTTP
Navigateur Web
Routeur
TCP/IP
Lien hypertexte
Script client
Script serveur
PHP
JavaScript
URL
Nom IP
![Page 3: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/3.jpg)
3
Internet WWW Client Web Serveur web
Pages statiques
HTML Pages Dynamiques
W3C HTTP
Navigateur Web Routeur TCP/IP
Lien hypertexte Script client
Script serveur PHP
JavaScript URL
![Page 4: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/4.jpg)
4
WWW Client Web Serveur web
Pages statiques
HTML Pages Dynamiques
W3C HTTP
Navigateur Web Routeur TCP/IP
Lien hypertexte Script client
Script serveur PHP
JavaScript URL
Internet
![Page 5: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/5.jpg)
5
Internet ● réseau mondial connectant des ordinateurs
● En fait un réseau de réseaux d’ordinateurs
Connexions : Câble coaxial, fibre optique, câble téléphonique, liaison sans fils (infrarouge, satellite, micro-ondes)
5
Réseau local – Carte Ethernet (LAN Local Area Network)
Réseau téléphonique
Modem
Réseau sans fil
![Page 6: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/6.jpg)
6
WWW Client Web Serveur web
Pages statiques
HTML Pages Dynamiques
W3C HTTP
Navigateur Web Routeur TCP/IP
Lien hypertexte Script client
Script serveur PHP
JavaScript URL
Internet
![Page 7: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/7.jpg)
7 7
Internet: TCP/IP ● TCP/IP : Transmission Control Protocol – Internet Protocol
● Le protocole de communication entre les ordinateurs connectés à internet ● Chaque ordinateur identifié par une adresse unique : Numéro IP (Internet
Protocol) ● adresse de la forme : xxx.xxx.xxx.xxx
– Chaque xxx représente un numéro entre 0 et 255
195.221.225.6
195.221.225.125 191.233.187.79
191.233.212.162
Adresse réséau
Numéro de la machine sur le réseau
![Page 8: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/8.jpg)
8
Internet
WWW Client Web Serveur web
Pages statiques
HTML Pages Dynamiques
W3C HTTP
Navigateur Web
TCP/IP
Lien hypertexte Script client
Script serveur PHP
JavaScript URL W3C
Routeur
![Page 9: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/9.jpg)
9
Internet – TCP/IP - Routeur ● Routeurs :
● Relais de l’information ● Passerelles :
● Machines qui interconnectent deux réseaux
195.221.225.6
195.221.225.125 193.48.255.206
193.54.238.59
routeur
routeur
routeur
routeur
routeur
![Page 10: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/10.jpg)
10
Internet – TCP/IP - Routeur
● En cas de rupture d'une connexion . . . ● . . . le réseau peut modifier l'acheminement (le routage) de l'information
195.221.225.6
195.221.225.125 193.48.255.206 routeur
routeur
routeur
routeur
routeur
● TCP/IP ● Packet Switching
https://www.youtube.com/watch?v=vSlcoQowe9I
![Page 11: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/11.jpg)
11
Nom IP
Domaine inrialpes.fr
195.221.225.6
195.221.225.125 194.199.18.79
194.199.22.162
pcnt104-08.e.imag.fr
kernighan.imag.fr
noisetier.inrialpes.fr
baruntse.inrialpes.fr
Serveur DNS (Domain Name Service)
Assure correspondance entre noms des machines du domaine et
numéros IP
● Adresse (numéro) IP peu pratique ● Un nom IP (ou plus) peut être associé à ce numéro :
● de la forme : nomDeMachine.nomDeDomaine
![Page 12: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/12.jpg)
12
WWW Client Web Serveur web
Pages statiques
HTML Pages Dynamiques
W3C HTTP
Navigateur Web Lien hypertexte
Script client
Script serveur PHP
JavaScript URL
Routeur
Routeur
Routeur
Routeur
Internet TCP/IP
![Page 13: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/13.jpg)
13
WWW : World Wide Web
● The World Wide Web (abbreviated as WWW or W3 and commonly known as the Web) is a system of interlinked hypertext documents accessed via the Internet. (wikipedia) ● Qu'est ce que l'hypertexte ?
● Définition : document non linéaire constitué de pages permettant de passer de l’une à l’autre par des liens (liens hypertexte)
● Web = hypertexte + internet
● Web ≠ Internet qui supporte de nombreux autres services ● messagerie électronique (ou e-mail) ● transfert de fichiers : FTP ● listes de discussion : "news" ● forum de discussion en ligne : IRC (Internet Relay Chat) ● connexion sur une machine distante : Telnet, rlogin, ssh (Secure Shell)
![Page 14: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/14.jpg)
14 14
Serveur web
Client web
Butineur
HTML
HTML HTML
HTML
HTML HTML
HTML
http://java.sun.com/jdk1.3/demo/applets/Clock/example1.html
1. Demande de chargement d ’une page web
Example1.html
3. Chargement de la page html
HTML
4. Affichage
2. Recherche locale du document
client et serveur Web
![Page 15: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/15.jpg)
15
= Client Web Serveur web
Pages statiques
HTML Pages Dynamiques
W3C HTTP
Navigateur Web Lien hypertexte
Script client
Script serveur PHP
JavaScript URL
Routeur
Routeur
Routeur
Routeur
Internet TCP/IP WWW
![Page 16: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/16.jpg)
16
HTML ● Web = ensemble de pages hypertextes ● HTML : HyperText Markup Language
Descrip(on textuelle Balises = structure + direc(ves de présenta(on Contenu = textuel + mul(média Liens : un document peut faire référence à d'autres documents
fichier source HTML
![Page 17: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/17.jpg)
17
Client Web Serveur web
Pages statiques Pages Dynamiques
W3C HTTP
Navigateur Web Lien hypertexte
Script client
Script serveur PHP
JavaScript URL
HTML
HTML
HTML HTML
HTML Routeur
Routeur
Routeur
Routeur
Internet TCP/IP WWW
![Page 18: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/18.jpg)
18
HTTP
● HTTP HyperText Transfert Protocol ● Protocole utilisé pour chaque transaction web ● Fourni aux ordinateurs un moyen standardisé pour communiquer entre eux
● Spécifie : – Comment les clients demandent les données – Comment les serveurs répondent à ces requêtes
● Navigateur Web : client HTTP qui se charge de l'affichage d'un document HTML ● FireFox, Google Chrome, Safari, IE, Opera…
● Serveur Web : serveur HTTP qui transmet aux clients web les documents
demandés ● Apache, Microsoft IIS, Tomcat, Jetty……
![Page 19: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/19.jpg)
19 19
Serveur http
Client http
Butineur
HTML
HTML HTML
HTML
HTML HTML
HTML
http://java.sun.com/jdk1.3/demo/applets/Clock/example1.html
1. Demande de chargement d ’une page web
Example1.html
3. Chargement de la page html <HTML> <HEAD> <TITLE>A Clock (1.1)</TITLE> </HEAD> <BODY> <h1>A Clock (1.1)</h1> <hr> <applet code="Clock2.class" width=170 height=150> <param bgcolor="C0C0C0"> </applet> .... </BODY>
HTML
4. Affichage
2. Recherche locale du document
Quelques requêtes HTTP : GET, HEAD, POST, …
navigateur et serveur Web
![Page 20: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/20.jpg)
20
URL ● URL = Uniform Resource Locator ● Localisation d'un document :
● par le nom du protocole permettant d’y accéder, ● le nom de la machine, ● le chemin pour accéder au document (répertoires), ● nom du document.
![Page 21: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/21.jpg)
21
Pages statiques Pages Dynamiques
W3C Script client
Script serveur PHP
JavaScript W3C
HTML
HTML
HTML HTML
HTML
Client Web
Client Web
Client Web
Serveur Web
Serveur Web
Serveur Web
Routeur
Routeur
Routeur
Routeur
Internet TCP/IP WWW
HTTP
Lien hypertexte
URL
![Page 22: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/22.jpg)
22
Pages statiques
● Pages statiques ● Documents HTML sous la forme de fichiers ● Transmis tels quels par le serveur HTTP
● Pages dynamiques ● Documents HTML construits dynamiquement (à la volée) par le
serveur
Serveur http
Client http
Requête HTTP GET url
Résultat de la requête
...
Exemple1 …..
HTML HTML HTML HTML
HTML HTML
HTML
HTML
Système de fichiers :
documents html
![Page 23: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/23.jpg)
23
Pages Dynamiques
W3C Script client
Script serveur PHP
JavaScript W3C
HTML
HTML
HTML HTML
HTML
Client Web
Client Web
Client Web
Serveur Web
Serveur Web
Serveur Web
Routeur
Routeur
Routeur
Routeur
Internet TCP/IP WWW
HTTP
Lien hypertexte
URL Page statique
Page statique
![Page 24: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/24.jpg)
24
Pages dynamiques
● Pages dynamiques ● Documents HTML construits dynamiquement (à la volée) par le
serveur
CGI
Client http
SERVEUR HTTP
Requête HTTP Info utilisateur :
Mots clés, langue, pays, etc ...
Résultat de la requête
<html> bla bla bla </html
Programme(script CGI) :
Ex : moteur de recherche
Demande de recherche
Page résult
at
Serveur http
HTML HTML HTML HTML
HTML HTML
HTML
HTML
Système de fichiers :
documents html
1 - Envoi d'une requête ayant une URL spéciale. 2 - Réception de la requête sur le serveur. 3 - Exécution du programme désigné par l'url (sur le serveur) 4 - Construction d'une page HTML résultat (sur le serveur) => web « dynamique » 5 - Envoi de la page HTML vers le client
![Page 25: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/25.jpg)
25
W3C Script client
Script serveur PHP
JavaScript W3C
HTML
HTML
HTML HTML
HTML
Client Web
Client Web
Client Web
Serveur Web
Serveur Web
Serveur Web
Routeur
Routeur
Routeur
Routeur
Internet TCP/IP WWW
HTTP
Lien hypertexte
URL Page statique
Page statique
Page dynamique
![Page 26: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/26.jpg)
26
Script Serveur
● Script serveur ● Programme s'exécutant du côté serveur HTTP ● Construit à la volée la partie dynamique d'un document HTML
● Exemples de langages et de technologies de script côté serveur : ● PHP: Hypertext Preprocessor ● ASP (Active Server Pages), ASP.NET ● Java, JSP (JavaServer Pages) ● Ruby, Ruby on Rails ● Python, Django ● Server-side JavaScript, Node.js
![Page 27: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/27.jpg)
27
W3C
JavaScript
HTML
HTML
HTML HTML
HTML
Client Web
Client Web
Client Web
Serveur Web
Serveur Web
Serveur Web
Routeur
Routeur
Routeur
Routeur
Internet TCP/IP WWW
HTTP
Lien hypertexte
URL Page statique
Page statique
Page dynamique Script serveur
Ex: PHP
Script client
![Page 28: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/28.jpg)
28
Script Client ● Script client
● Programme s'exécutant du côté client HTTP (dans le navigateur) ● Transmis avec le document HTML lors d'une requête HTTP
● Exemple de technologies client: ● JavaScript ● Flash – Action Script (Adobe)
1 requête http
HTML/hhtp
2
Client Serveur
+ javascript
![Page 29: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/29.jpg)
29
Script Client
Interaction de l'utilisateur
Client
3
Serveur
Certaines requêtes de l'utilisateur sont traitées
localement par le navigateur grâce à la couche d'intelligence qui accompagne la présentation
● Une partie de l'intelligence fonctionnelle de l'application est déportée vers le navigateur
4
![Page 30: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/30.jpg)
30
Script Client
requête http
8
Interaction de l'utilisateur
Client
5
Serveur
D'autres requêtes peuvent nécessiter des échanges avec le serveur (AJAX)
Requête transmise au serveur et la main est rendue à l'utilisateur en attendant le retour des données
7 Le serveur génère une réponse
6
HTML javascript
<valid> true </valid>
XML
communication asynchrone
9
Mise à jour de la description de la page (Arbre DOM)
![Page 31: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/31.jpg)
31
W3C
HTML
HTML
HTML HTML
HTML
Client Web
Client Web
Client Web
Serveur Web
Serveur Web
Serveur Web
Routeur
Routeur
Routeur
Routeur
Internet TCP/IP WWW
HTTP
Lien hypertexte
URL Page statique
Page statique
Page dynamique Script serveur
Ex: PHP
Script clent Ex : javascript
![Page 32: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/32.jpg)
32
W3C
● W3C : World Wide Web Consortium ● organisme de standardisation à but non-lucratif, ● fondé en octobre 1994 ● consortium chargé de promouvoir la compatibilité des
technologies du World Wide Web telles que ● HTML, XHTML, ● XML, ● RDF, ● CSS, ● PNG, SVG ● SOAP…
● standards indispensables au bon fonctionnement du Web
![Page 33: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/33.jpg)
33
Plan du Cours
● HTML et XHTML ● CSS ● Mime, HTTP, Serveur Apache ● Scripts serveurs
● Introduction à PHP ● PHP et les bases de données
● Scripts clients ● Introduction à JavaScript ● JavaScript et la POO ● JavaScript et le DOM
![Page 34: Introduction aux technologies du webimss-atenciam/ITW/1-intro.pdf · Construit à la volée la partie dynamique d'un document HTML Exemples de langages et de technologies de script](https://reader030.vdocument.in/reader030/viewer/2022041106/5f0824697e708231d4208c44/html5/thumbnails/34.jpg)
34
Info du Cours
● cours : le lundi 13h30–15h30 (CM) et le vendredi 14h45–16h45 (TP) ● Deux groupes de TP (français et anglais) ● CM : salle A101 ; TP : salles B1 et B2
● Deux enseignants : ● Manuel ATENCIA ARCAS (CM et TP français) ● Armen INANTS (TP anglais)
● horaires de permanence : sur RDV par e-mail ● support du cours :
http://miashs-www.u-ga.fr/~atenciam/ITW ● évaluation du cours : 100% contrôle continu