cours programmation web - … · 26/09/2017 Borchani Anis 1 Institut Supérieur des études...
Transcript of cours programmation web - … · 26/09/2017 Borchani Anis 1 Institut Supérieur des études...
26/09/2017
Borchani Anis 1
Institut Supérieur des études technologiques de Sfax
Cours Programmation
Web
Borchani Anis 2017-2018
1
Objectif:
Introduire des terminologies liées aux développements web
Chapitre 1 Introduction au développement web
2
26/09/2017
Borchani Anis 2
Internet ?
• Un réseau de réseaux
• Un ensemble de logiciels et de protocoles
• Basé sur l'architecture TCP/IP
• Fonctionne en mode Client/serveur
• Offre un ensemble de services (e-mail, transfert de fichiers, connexion
à distance, WWW, ... )
• Une somme « d'inventions» qui s'accumulent
o mécanismes réseau de base (TCP/IP)
o gestion des noms et des adresses (DNS)
o des outils et des protocoles spécialisés
o le langage HTML 3
Internet ?
• Une construction à partir du « bas»
o réseau local (laboratoire, institut, département)
o réseau local (campus, entreprise)
o réseau régional
o réseau national
o réseau mondial
• 3 niveaux d'interconnexion
o postes de travail (ordinateur, terminal ... )
o liaisons physiques (câbles, fibres optiques, RTC ... )
o routeurs (équipement spécialisé, ordinateur ... )
4
26/09/2017
Borchani Anis 3
historique d'Internet
1959-1968 : Programme ARPA ministère américain de la défense :
lancer un réseau capable de supporter les conséquences d'un
conflit nucléaire.
1969 : ARPANET, l'ancêtre d'Internet : les universités américaines
s'équipent de gros ordinateurs et se connectent au réseau
ARPANET
1970-1982 : Ouverture sur le monde : premières connexions avec la
Norvège et Londres.
1983 : Naissance d'Internet : protocole Tcp/IP -> tous les réseaux
s'interconnectent, les militaires quittent le navire.
5
historique d'Internet
1986 : Les autoroutes de l'Information : la National Science Fondation
décide de déployer des super-ordinateurs pour augmenter le débit
d'Internet.
1987-1992: Les années d'expansion : les fournisseurs d'accès
apparaissent, les entreprises privées se connectent au réseau.
1993-2003 : L'explosion d'Internet : ouverture au grand public
avènement du WEB et du courrier électronique.
-> marché considérable
6
26/09/2017
Borchani Anis 4
Intranet et Extranet
• Intranet
o utilisation des protocoles, outils et services de l'Internet dans un
cadre privé (établissement, entreprise, état...)
o intégration des services existants: accès aux BD, messageries,
forums ...
• Extranet : ouverture vers des partenaires (fournisseurs, clients ... )
7
Internet : Réseaux de Réseaux
8
26/09/2017
Borchani Anis 5
Internet : Réseaux de Réseaux
9
Les adresses IP
Sur le réseau internet chaque ordinateur ou équipement possède
une adresse unique, qui lui permet d'être identifié de manière
spécifique sur le réseau, quelle que soit sa situation géographique.
Par analogie, on peut comparer cette adresse à un numéro de
téléphone, qui identifie de manière absolument unique un abonné
dans le monde entier.
Les adresses Internet « IP » se composent de quatre nombres (4
octets), chacun étant compris entre 0 et 255.
Les quatre nombres sont séparés par des points, par exemple:
138.48.38.67
192.168.1.1
10.10.10.10 10
26/09/2017
Borchani Anis 6
Le système de nom de domaine « DNS »
La désignation des ordinateurs par une adresse numérique (adresse IP)
est une bonne chose pour une machine communiquant avec d'autres
machines, mais elle est nettement moins pratique pour des humains.
Pour cela on donne des noms aux machines d'Internet.
Prenons un exemple, celui d'une machine appelée "hp" au Département
Informatique de ISET Sfax.
Cette machine appartient au domaine "depinfo" (Département Informatique),
Qui lui-même appartient au domaine "isetsf" (ISET Sfax),
Qui lui-même appartient au domaine "rnu" (Réseau National Univesitaire),
Qui lui-même appartient au domaine "tn" (Tunisie).
Le DNS de cette machine est donc "hp.depinfo.isetsf.rnu.tn".
11
Le système de nom de domaine « DNS »
Les machines préfèrent les chiffres, adresse IP (exemple :
138.48.38.67), les hommes préfèrent les noms (exemple :
hp.depinfo.isetsf.rnu.tn). Qui fait la transformation des noms en adresse
IP ? Un ordinateur bien sûr, appelé serveur DNS
Client Serveur DNS
hp.depinfo.isetsf.rnu.tn
138.48.38.67
12
26/09/2017
Borchani Anis 7
Les services Internet
Les principaux services d’Internet sont les suivants:
• Le web « WWW »
• Messagerie électronique « email »
• Transfert de fichiers « FTP »
• Le chat « IRC »
• Peer-to-Peer « P2P »
• Visiophonie
• Téléphonie
• …
13
Le service Web
World Wide Web : Ce service permet d'accéder à des pages Web.
Une page Web est écrite en langage HTML (Hyper Text Mark-up
Language) et peut contenir :
• Texte
• Images (statiques ou animées)
• Séquences vidéos
• Son
• Liens hypertexte
Chaque page web est caractérisé par une adresse unique appelée
URL (par exemple www.yahoo.com | www.mes.tn) 14
26/09/2017
Borchani Anis 8
Le service Web : URL
URL (Uniform Resource Locator) est un format de nommage universel
pour désigner une ressource sur Internet.
URL se décompose en cinq parties :
• Le nom du protocole
• Identifiant et mot de passe (Facultatif)
• Le nom du serveur
• Le numéro de port (Facultatif si 80)
• Le chemin d'accès à la ressource
Une URL a donc la structure suivante :
http://www.inscription.tn/index.html
protocole Le nom du serveur Le chemin d'accès à la ressource
15
Le service Web : page web
Adresse de la page : URL
Nav
igat
eu
r
16
26/09/2017
Borchani Anis 9
Le service Web : Fonctionnement
Client Navigateur Web Serveur Web
17
Le service messagerie électronique
Le service permet d’envoyer et de recevoir des emails et des
documents avec toute personne possédant une adresse électronique.
Exemples d’adresses électronique: • [email protected] • [email protected] • [email protected]
Le service se base sur deux protocoles:
SMTP : « Simple Mail Transfer Protocol » pour l’envoie des courriers
POP3 : « Post Office Protocol » pour la réception des courriers
18
26/09/2017
Borchani Anis 10
Le service messagerie électronique
19
Le service Transfert de Fichier
20
Ce service, comme son nom l’indique, permet de transférer directement
des fichiers d’une machine à une autre.
FTP « File Transfer Protocol » est le Protocole utilisé dans ce service.
Le service est efficace surtout en matière de transfert de gros volumes
de données.
Pour utiliser le service, on peut utiliser le navigateur ou un logiciel FTP
26/09/2017
Borchani Anis 11
Le service Transfert de Fichiers
21
Le service Chat
22
Le chat est un service Internet basé sur le protocole IRC « Internet
Relay Chat » (en français, « discussion relayée par Internet »).
Le service permet la communication textuelle sur Internet, Cela se
présente sous forme de messages qui s'affichent en temps réel et
permettent donc une réponse immédiate de l'interlocuteur.
26/09/2017
Borchani Anis 12
Le service Chat
23
Architecture Client / Serveur
24
Serveur
On appelle logiciel serveur un programme qui offre un service sur le
réseau.
Le serveur accepte des requêtes, les traites et renvoie le résultat au
demandeur.
Le terme serveur s'applique à la machine sur laquelle s'exécute le
logiciel serveur.
Pour pouvoir offrir ces services en permanence, le serveur doit avoir
un accès permanent et s'exécuter en permanence.(Adresse IP
Statique).
26/09/2017
Borchani Anis 13
Architecture Client / Serveur
25
Client
On appelle logiciel client un programme qui utilise le service offert par
un serveur.
Le client envoie une requête et reçoit la réponse.
Le terme client s'applique à la machine sur laquelle s'exécute le
logiciel client.
Le client peut-être raccordé par une liaison temporaire (Adresse IP
Dynamique).
Architecture Client / Serveur
26
Client Serveur
Client
Client
Client
Client
26/09/2017
Borchani Anis 14
Architecture 3 tiers
27
Le langage HTML
28
Le langage HTML « HyperText Markup Language » a été développé
initialement par Tim Berners-Lee, au CERN
HTML est fondamentalement un langage très simple, dans lequel des
balises (tag) définissent un élément et ses propriétés.
Exemple : la balise <P> définit un paragraphe.
<P align=center>HTML emploie des balises (comme <H1> et </H1>)
pour structurer un texte en en-têtes, paragraphes, listes, liens
hypertextes, etc.</P>
Nouveau paragraphe
Paragraphe centré
26/09/2017
Borchani Anis 15
Le langage HTML
29
Une page HTML se présente fondamentalement comme suit :
<HTML>
<HEAD>
….Entête...
</HEAD>
<BODY>
….contenu...
</BODY>
</HTML>
Nous reviendrons bien sûr plus en détail par la suite sur cette structure.
Le langage HTML
30
Versions HTML
• HTML 1.0 en 1991
• HTML 2.0 en 1995
• HTML 3.2 en 1997
• HTML 4.01 en 1999
• HTML 5 en 2009
26/09/2017
Borchani Anis 16
FEUILLES DE STYLES EN CASCADES : CSS
31
Garantir une présentation homogène des pages HTML et de modifier
cette présentation en ne modifiant qu’un seul document.
Assurer une compatibilité multi-navigateurs (contrairement aux
arrangements réalisés en HTML) et fournissent une facilité de
maintenance pour les sites.
Les CSS : « Cascading Style Sheets »
permettent de définir les styles à appliquer
aux documents HTML, tels que les couleurs,
les alignements, les tailles des polices,
l’aspect des tableaux, etc.
FEUILLES DE STYLES EN CASCADES : CSS
32
H1 { font-family: Arial; /* changer le style de la police */ font-size: 14px; /* changer la taille de la police */ color: #00ff00; /* changer la couleur de la police */ }
Exemple
Dern
ière
vers
ion
26/09/2017
Borchani Anis 17
FEUILLES DE STYLES EN CASCADES : CSS
33
Le langage JavaScript
34
JavaScript est un langage de scripts qui est incorporé aux balises HTML.
Permet d’améliorer la présentation et l’interactivité des pages Web (tel
que la communication avec les navigateurs).
Un code JavaScript permet de :
• Contrôler la saisie dans un formulaire.
• Accéder aux objets de navigateur.
• Exécuter des commandes du coté client (date système, gestion de la
fenêtre, gestion de navigateur).etc.
26/09/2017
Borchani Anis 18
Les langages Dynamiques
35
• La premier historiquement, appelé CGI
(Common Gateway Interface) consistait à
interpréter des programmes (généralement
écrits en perl ou en langage C), puis de
leur faire renvoyer un contenu compatible
avec le protocole HTTP.
• Le langage ASP.net (Active Server Pages)
de Microsoft a permis de simplifier l'écriture
de tels scripts en manipulant des objets en
VBScript.
Les langages Dynamiques
36
• Le langage PHP (Hypertext preprocessor)
emploie son propre langage (dérivé du C++
et de Perl) et permet de nombreuses
fonctionnalités (équivalentes à celles de la
technologie ASP).
• Le langage JSP (Java Server Pages) est la
plus récent parmi ces technologies. il
permet d'utiliser toute la puissance de Java
pour créer des pages web dynamiques.
26/09/2017
Borchani Anis 19
Les langages Dynamiques
37
Les éditeurs de sites
38
Un éditeur de site est un logiciel conçu pour faciliter la préparation et
la modification de documents écrits en HTML, PHP,…
Il existe deux catégories d'éditeur :
• Les éditeurs WYSIWYG « What You See Is What You Get »,
signifiant littéralement en français « ce que vous voyez est ce que
vous obtenez »
• Les éditeurs de texte (bloc note, notepad++, sublime text).
26/09/2017
Borchani Anis 20
Les éditeurs de sites
39
Les Systèmes de gestion de contenu (CMS)
40
CMS est l’acronyme de content management system, soit, en
français, « système de gestion de contenu ». Il s’agit d’un
programme informatique utilisant une base de données et permettant
de gérer de A et Z l’apparence et le contenu d’un site web.
Il permet, à des individus ou à des groupes hiérarchisés, de mettre à
jour le contenu d’un site web à partir d’un panneau d’administration.
Exemples : WordPress, Joomla, presta shop, …