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: • Nom_prenom@yahoo.fr • Nom.prenom@gmail.com • prenom12345@hotmail.com

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, …