Concepts du web

Concepts Web

Pr. Aimad QAZDAR

Table des matières
Objectifs 3
I - Le web et ses origines 4
1. Qu'est ce que le Web ?...................................................................................... 4
2. World Wide Web................................................................................................ 5
3. Différentier entre le web et l'internet................................................................ 5
4. Qu'est ce que le cloud ? .................................................................................... 6
5. Un peu d'histoire du web .................................................................................. 7
6. Résumé.............................................................................................................. 8
II - Les langages du web 9
1. Les langages client ........................................................................................... 9
2. Les langages serveurs.................................................................................... 10
3. Le rôle du langage serveur ............................................................................. 11
4. Les bases de données .................................................................................... 11
5. Communication Client, Serveur et Base de Données ................................... 12
6. Résumé............................................................................................................ 13
III - Les serveurs 14
1. Qu'est ce qu'un serveur ?................................................................................ 14
2. Communication entre serveurs et clients ..................................................... 16
3. Carte réseau, câbles reseau et connectiques ............................................... 17
4. Les adresses IP et les noms d'hôtes ............................................................. 18
5. Le DNS ............................................................................................................. 19
6. Les protocoles ................................................................................................ 19
7. Résumé............................................................................................................ 20
IV - Les métiers du web 21
1. Les métiers du web......................................................................................... 21
2. Les développeurs ............................................................................................ 21
3. Les UX / UI designer ....................................................................................... 22
4. Les techniciens informatiques....................................................................... 22
5. Résumé............................................................................................................ 22

2
 Objectifs
Connaître l'historique du web
Introduire les langages de programmation
Rappeler les principes de base des réseaux informatiques
Différentier entre les métiers du web

3
I Le web et ses origines
1. Qu'est ce que le Web ?
Souvent quand on parle du web, on dit "Naviguer sur le web" ou "Surfer sur le web".
Un surfeur passe d'une vague à une autre vague, comme dans le web on saute d'une page en page
en cliquant sur des liens.

Le lien hypertexte ( ou tout simplement lien ) est une invention importante dans le Web. Voues
êtes sur une page et vous sautez à une autre en cliquant tout simplement sur un mot, vous paraît
peut-être aujourd'hui évidente et basique, mais c'est le départ d'une vraie révolution !

4
 Le web et ses origines

2. World Wide Web

Plutôt qu'une image de surfeur, garder en tête une image de toile d'araignée. En effet, "World Wide
Web" en anglais (à l'origine du "www") signifie littéralement "Toile d'araignée mondiale" .
Le Web se ressemble plutôt une toile d'araignée.

Image 1
Dans cette toile, les pages d'un site web sont relié entre elles par des liens hypertextes.
Du même principe qu'on relie aussi les sites web entre eux.

3. Différentier entre le web et l'internet

Souvent les gents confondent le Web et Internet. Pourtant, Internet a été crée 30 ans avant le Web.
On peut considérer que le Web comme un service à l'intérieur d'Internet.
Internet est le réseau qui permet aux ordinateurs de communiquer entre eux.
Ce réseau offre plusieurs services :
Le Web : vous ouvrez un navigateur web pour y accéder, comme Google Chrome, Firefox,
Internet Explorer, Edge, Safari.... D'ailleurs c'est le plus connu d'entre eux
Les e-mails : pour échanger des messages. Il s'agit tout simplement de courrier
électronique.
Les newsgroups : moins connus, ils sont l'ancêtre des forums et permettent de discuter à
plusieurs en postant des messages.
Le FTP : un moyen d'échanger des fichiers entre ordinateurs.
Etc.

5
Le web et ses origines

Actuellement, la plupart des services présenté par Internet converge vers le web. Par exemple, pour
consulter votre boite mail Gmail de google, vous y accéder en ouvrant le site web
[Link] et derrière vous utilisez le service e-mails.
Le faite que les services d'Internet passent à travers un intermédiaire qu'est le site web represente
une grande tendance sur Internet.
Cette tendance que nous appelons aujourd'hui Cloud.

4. Qu'est ce que le cloud ?

Cloud est un terme anglais qui signifie Nuage.
En informatique, le cloud représente un ensemble de solutions qui permettent de fournir différents
services à la demande au moyen d'Internet.
Le cloud est aussi appelé cloud computing , vous pouvez aussi trouver d'autres termes tels que
nuage informatique, informatique en nuage ou bien encore informatique nuagique.
Par exemple, en utilisant le cloud toutes vos données sont enregistrées sur une machine distante
au lieu qu'elles soient sur le disque dur de votre ordinateur.

6
 Le web et ses origines

Voici les principaux types de cloud computing:

5. Un peu d'histoire du web

Le Web a une longue histoire à raconter. Mais en voici tout de même les principaux moments forts
:
1969 : création de l'ancêtre d'Internet, appelé alors ARPAnet. C'est un réseau militaire qui se
veut décentralisé (il n'a pas de lieu de commande central). Le réseau a ensuite évolué pour
devenir un lieu d'échange universitaire avant de devenir progressivement grand public sous
le nom d'Internet
1972 : apparition des e-mails pour échanger des messages
1991 : apparition du Web, pour afficher des pages d'information.
Voici le lien pour visiter le premier site web [Link]

Le père du Web ? C'est Tim Berners-Lee2, un scientifique britannique qui a travaillait en 1991 au
CERN.3
Tim Berners-Lee est le premier à inventer le concept de "page web" avec des "liens hypertextes"
pour naviguer d'une page à une autre.

1. [Link]
2. [Link]
3. [Link]

7
Le web et ses origines

Il est aussi considéré comme l'inventeur du langage HTML que l'on utilise toujours aujourd'hui pour
développer des pages web.
Il a par la suite créé le W3C4 (World Wide Web Consortium) en 1994.
Le W3C est un organisme international qui a pris le relais pour faire évoluer les technologies du
web (HTML, CSS, PNG, XML, etc).

6. Résumé
En résumé :
Le Web n'est qu'une partie d'Internet.
Internet a été créé avant le Web pour permettre d'échanger des informations entre les
machines.
Le Cloud est un terme assez vaste. Il signifie essentiellement "un service fourni à travers le
Web".
Le W3C est l'organisme qui guide aujourd'hui l'évolution du Web.

4. [Link]

8
II Les langages du web
1. Les langages client
Tout d'abord, il faut savoir qu'il existe deux différents types d'ordinateurs connectés au Web :
Des ordinateur qui sert à aller consulter des sites web que nous appelons des Clients.
Des ordinateurs généralement très puissants qui envoient les sites web aux clients. Ce que
nous appelons des Serveurs. Les serveurs sont des ordinateurs "possèdent" les sites web et
les distribuent aux clients qui veulent les visiter.

Pour développer un site web, on utilise à des langages.

Ils servent en quelque sorte à établir les plans d'architecte dont on a besoin pour construire les
sites.
Ces langages sont principalement :
HTML
CSS
JavaScript
Tous ces langages sont désormais indispensables à la réalisation de tous les sites web. On dit que
ce sont des langages client ou encore des langages frontend, car ils sont lus par les machines des
clients.
D'ailleurs ces trois langages que nous allons voir dans les chapitres suivants.
Pour accéder aux sites web, vouas avez besoin de navigateurs web. Il existe notamment :
Google Chrome
Mozilla Firefox
Internet Explorer, et son successeur appelé Edge

9
Les langages du web

Opera
Safari

Le rôle principale des navigateurs est de traduire les langages HTML, CSS et JavaScript sous la
forme de sites web.

2. Les langages serveurs

En plus des langages client (HTML, CSS et JavaScript), il y a un nombre important de langages
serveur.
Les langages serveur sont, comme leur nom l'indique, gérés par les serveurs. Les clients n'y
touchent pas.
Leur rôle est un peu différent :
Les langages client décrivent comment le site web doit s'afficher.
Les langages serveur décrivent comment le site web doit se comporter.
Par exemple avec un langage client, vous pouvez afficher une image à l'endroit de la page que vous
voulez en haut, à gauche, au centre , etc. Avec un langage serveur, vous pouvez préciser que
l'affichage de l'image n'est pas possible que si cette personne dispose d'un compte dans votre site.
Voici quelques exemples de langages serveurs:
PHP
Java (à ne pas confondre avec JavaScript)
Python
C#
... Etc

10
 Les langages du web

On trouve tous ces langages parmi les sites web les plus connus. On trouve par exemple du PHP

»
chez Facebook et OpenClassrooms, du Python et du Java chez Google, etc.

« Sachez bien que il n'y a pas de meilleur langage

3. Le rôle du langage serveur

Le rôle d'un langage serveur est de générer une page web.
Le schéma suivant résume l'interaction entre le client et le serveur comme ceci :
1. Le client demande une page au serveur.
2. Le serveur génère la page (à l'aide du langage serveur).
3. Le serveur envoie la page (sous forme de code HTML et CSS)

4. Les bases de données

Les sites web ont besoin d'enregistrer des informations, comme la liste de leurs visiteurs, des
messages qui ont été posté, etc.
C'est là qu'une base de données intervient.
Une base de données appelé aussi Système de Gestion de Base de Données (SGBD) c'est un
logiciel utilisé pour le stockage de données.
Il existe plusieurs SGBD, parmi les les plus célèbres on peut citer :
MySQL
PostgreSQL
SQL Server
Oracle
SQLite
Etc.

11
Les langages du web

Pour communiquer avec ces systèmes, nous avons besoin d'un langage appelé SQL (Structured
Query Language).
Le SQL est un langage qui permet de communiquer avec une base de données via des requêtes
SQL.
Par exemple, vous pouvez de demander à votre base de données : "Je veux la liste des derniers
utilisateurs inscrits sur mon site" ou "Je veux stocker ce message".
Voici un exemple d'une requête SQL :
SELECT id, name, login FROM users ORDER BY id DESC

5. Communication Client, Serveur et Base de Données

Le schéma suivant présente la communication entre l'ordinateur du client, le serveur et la base de
données.

1. Le client demande une page web.

2. Le serveur web va grener cette page, mais pour la générer le serveur a besoins de consulter
des informations stockées dans la base de donnée.
3. Le serveur envoie une requête SQL au SGBD pour récupérer ces informations.
4. Le SGBD transmettre les données au serveur
5. Le serveur génère la page web et la transmettre au client

12
 Les langages du web

6. Résumé
En résumé :
Le Web fonctionne à l'aide de nombreux langages informatiques.
HTML, CSS et JavaScript sont des langages client : ils sont lus par votre ordinateur,
l'ordinateur d'un visiteur. Ils décrivent l'apparence du site web.
PHP, Java, Ruby et Python sont des langages serveur. Ils sont utilisés par l'ordinateur qui
distribue le site web, appelé... serveur. Leur rôle est de décrire le comportement du site web.
Les frameworks sont des boîtes à outils qui facilitent l'usage des langages serveur.
Les données (telle que la liste des utilisateurs) sont stockées dans des bases de données.
On communique avec elles en effectuant des requêtes SQL.
Si les langages client sont tous obligatoires et incontournables, il n'y a en revanche pas de
meilleur langage côté serveur. Choisissez celui qui vous parle le plus.

13
III Les serveurs
1. Qu'est ce qu'un serveur ?
Les serveurs sont des machines très puissantes qui possèdent les sites web et qui les distribuent
aux clients.
Les serveurs sont sont situés habituellement les datacenter.
Les datacenter sont des grande salles très sécurisés (accès autorisé seulement aux
administrateurs du réseaux)
Les serveurs sont entassés les uns sur les autres dans des baies de serveurs

Les serveurs sont souvent des machines "plates", pour pouvoir les entasser plus facilement.
Il n'y a pas d'écran, car personne ne les utilise directement en général. Ils se contentent de
transmettre le contenu des sites web sur le réseau.

14
Les serveurs

15
Les serveurs

2. Communication entre serveurs et clients

A l'arrière des serveurs, il y a des cartes réseau relié à des câbles réseau.

Ces câbles sont reliés à un câble de fibre optique permettant un échange ultrarapide.
Les fibres optiques sont souvent enterrée sous terre ou au fond de la mer.
En fait, la majorité du trafic d'Internet passe par des câbles sous-marins comme celui-ci :

16
 Les serveurs

3. Carte réseau, câbles reseau et connectiques

Cartes réseau
Chaque carte réseau possède une adresse unique qui est intégrée aux puces qu'elle
contient. Cette adresse est appelée adresse physique ou adresse MAC (Media Access
Control).
L'IEEE (Institute of Electrical and Electronics Engineers) est un organisme américain qui
attribue des plages d'adresses à tous les fabricants de cartes réseaux dans le monde.
L'adresse MAC est composé de 6 octets. Les trois premiers octets sont réservés pour
identifier le constructeur de la carte réseau, tandis que les trois derniers octets sont gérés
par le constructeur.
Exemples
3 COM, 08 00 03
HP, 08 00 09
IBM, 08 00 5A
DEC, AA 00 00

Câble réseau

17
Les serveurs

Connectique

4. Les adresses IP et les noms d'hôtes

Chaque téléphone possède d'un numéro de téléphone.
De même tout ordinateur connecté à un réseau possède une adresse se forme d'une suite de
nombres comme [Link]. Ce que nous appelons : adresse IP (@IP)
A tout moment vous pouvez contacter votre ami en composant son numéro de téléphone. Pareille
pour les ordinateurs, vous pouvez aller sur un site web en tapant directement l'adresse IP du
serveur dans votre barre d'adresse.
Mais pour aller au site de Google vous ne tapez pas son adresse IP. Vous tapez juste [Link]
sur la barre d'adresse. C'est ce que nous appelons Nom d’hôte.
Et pour associer le nom d’hôte à l'adresse IP du serveur nous faisons appel au service de DNS.
A retenir que chaque serveur sur la toile a une IP et un nom d'hôte.

18
 Les serveurs

5. Le DNS
DNS signifie "Domaine Name Service" en anglais, en français c'est le service de noms de domaine.
Dans votre téléphone vous avez une liste des contacts qui permet d'associer chaque nom de
contact à son numéro de téléphone.
De même, le DNS permet de relier chaque nom d’hôte à son adresse IP.

Le DNS permet de traduire le nom d'hôte en adresse IP.

Tout ceci fonctionne heureusement automatiquement. Vous tapez juste "[Link]" dans notre
navigateur, et le site web s'affiche.

6. Les protocoles
Jusque-là, nous avons vue comment les ordinateurs sont reliés physiquement pour communiquer.
Mais comment les ordinateurs communiquent-ils entre eux ? quelle langue utilisent-ils ?
Certes, ils n'utilisent pas les langages que nous avons déjà présenté (HTML, CSS, PHP...), car ceux-
ci servent à développer les sites web.
Donc il existe des langages qui permettent aux ordinateurs de communiquer entre-eux : C'est le
protocole.
Nous pouvons distinguer deux type de protocoles : Protocoles bas niveau et Protocoles haut
niveau
Protocoles bas niveau
À la base d'Internet, nous avons des protocoles de bas niveau. nous les retrouvons dans
toutes les communications : TCP (Transmission Control Protocol) et UDP (User Datagram
Protocol)
TCP en particulier est très important. Il a été inventé par Vint Cerf, considéré aujourd'hui
grâce à cela comme le père d'Internet. Sans TCP, pas de communication réseau... et Tim
Berners-Lee n'aurait jamais pu inventer le Web.
TCP est utilisé pour un peu tout : faire transiter des pages web, des e-mails, des vidéos...

Protocoles haut niveau

19
Les serveurs

Les protocoles dits "haut niveau" sont généralement basés sur TCP (ou UDP). Ils forment
une surcouche qui englobe TCP.
Parmi ces protocoles que vous avez déjà , peut-être, entendre :
HTTP : le protocole qui permet d'échanger des pages web entre le client et le serveur.
En plus du langage HTML, Tim Berners-Lee a inventé les bases du protocole HTTP qui
permet d'échanger les pages. C'est ce que signifie le "[Link] que vous voyez au début
des adresses web.
HTTPS : identique à HTTP, avec le "S" en plus qui signifie "Secure". Les pages sont
chiffrées, pour garantir que personne ne peut les lire.
FTP : permet d'échanger des fichiers.
SMTP : permet d'envoyer des e-mails.
Etc.
Exemple de protocole : une requête HTTP :
Voici comment un client demande une page web à un serveur :
1 GET /[Link] HTTP/1.0 Host:GET /[Link] HTTP/1.0
2 Host: [Link]
3 Referer: [Link]
4 User-Agent: CERN-LineMode/2.15 libwww/2.17b3 [Link] Referer: [Link]
User-Agent: CERN-LineMode/2.15 libwww/2.17b3

Ce code nous pouvons le traduire par : "Hello, le serveur de [Link], peux-tu m'envoyer
[Link] ? S'il te plaît ?"
Le serveur va ensuite génère la page (en utilisant un langage serveur), puis renvoyer la page HTML
avec une réponse comme ceci :
1 HTTP/1.0 200 OK
2 Date: Fri, 31 Dec 1999 [Link] GMT
3 Server: Apache/0.8.4
4 Content-Type: text/html
5 Content-Length: 59
6 Expires: Sat, 01 Jan 2000 [Link] GMT
7 Last-modified: Fri, 09 Aug 1996 [Link] GMT

Ceci signifie : "Hello, j'ai bien la page que tu veux, elle fait cette taille et elle a été modifiée pour la
dernière fois à cette date".
Ensuite, le serveur transmet le code HTML de la page.
Cette réponse contient un code "200 OK" signifie que la page existe et que le serveur peut la
renvoyer.
Il existe de nombreux codes, mais il y en a un autre au moins que vous connaissez déjà
probablement : 404. Il signifie que la page n'a pas pu être trouvée sur le serveur.

7. Résumé
En résumé
Les serveurs distribuent les sites web depuis les datacenters.
Les ordinateurs sont tous reliés entre eux par des câbles (souvent sous-marins !).
L'adresse IP permet de retrouver un ordinateur sur la planète.
Le nom d'hôte (ex : [Link]) est plus facile à retenir que l'IP. C'est pour cela que l'on fait
une traduction via un annuaire, appelé le DNS.
Les protocoles indiquent comment les machines doivent communiquer entre elles.

20
IV Les métiers du web
1. Les métiers du web
Quand on parle de création d'un projet site web, on a l'impression au départ qu'il y a un seul métier
celui du développeur.
Par contre la réalisation d'un tel projet nécessite plusieurs compétences que nous allons les
présenté sous forme de famille de métiers.
Parmi les grandes familles de métiers associés aux web nous citons:
Les développeurs : qui développent les sites web. Ils utilisent les langages de
programmation que nous avons déjà présenté, pour coder le site ou l'application.
Les product owners appelé aussi les product managers, les chefs de projets digitaux : ce
sont eux qui coordonnent la production ou l'évolution d'un produit web. Ils ne codent pas
directement, mais sont en lien direct avec les équipes techniques. Ils ont une vision globale
du produit et des fonctionnalités à développer, et assurent la bonne gestion du projet.
Les UX / UI designers ce sont les professionnels du design et de l'ergonomie des pages web
ou des applications. Ces sont des professionnels qui font en sorte que le site soit le plus
simple d'utilisation possible.
les professionnels des SI (systèmes d'information) qui gèrent l'infrastructure du web. Ils ont
la responsabilité des serveurs, de leur configuration. Sans eux les développeurs et chefs de
projets ne pourraient pas travailler, et le site web ne répondrait tout simplement pas. Parmi
eux, on trouve par exemple le technicien informatique, qui paramètre les équipements et le
réseau, et qui intervient en cas de question ou de problème.

2. Les développeurs
Le développeur est une personne qui réalise, teste, documente et maintient des applications, des
sites Internet ou des logiciels.
Quelques spécialités possibles :
Le développeur front-end : le développeur front-end travaille sur toute la partie apparente du
site, ce que nous voyons lorsque nous allons sur une page web. Il crée l'interface utilisateur
de telle sorte qu'elle soit la plus adaptée au besoin, et la plus simple possible. Il utilise les
langages client tels que HTML, CSS ou JavaScript ;
Le développeur back-end : le développeur back-end travaille au contraire sur toutes les
composantes cachées d'un site. Il crée l'infrastructure adaptée, et coordonne toutes les
relations entre le site et les bases de données. Il gère la “logique” du site web. Il connaît bien
un ou plusieurs langages de programmation (PHP, Ruby, Python, Java) et le langage des
bases de données (SQL), ainsi que les frameworks qui lui facilitent la tâche ;
Le développeur mobile : il développe des applications Android ou iOS, parfois même les
deux. Il travaille sur toutes les étapes de la conception : depuis le cahier des charges jusqu'à
la correction des bugs. Quand on développe sur mobile, on travaille en général aussi bien sur
l'interface (front-end) que sur la logique (back-end).
Le développeur ne passe pas tout son temps à taper des codes sources. Quelle que soit sa
spécialité, il passe beaucoup de temps à tester son code, à chercher à optimiser ses méthodes de
développement, et à travailler avec les autres.
Parmi les plus grands challenges d'un développeur est l'analyse du besoin initial du client ou de
l'utilisateur : le développeur doit comprendre ce besoin pour le traduire en langage de
programmation.

21
Les métiers du web

3. Les UX / UI designer
L'UX designer (User eXperience designer) :
Il travaille à ce que l'internaute (ou le mobinaute) s'oriente aisément et trouve ce qu'il est
venu chercher de manière efficace
Il fait en sorte que l'utilisation d'un site ou d'une application soit la plus simple possible, que
la navigation soit fluide et intuitive.
L'UX designer doit s'assurer que le site ou l'application réponde aux attentes et besoins de
ses utilisateurs, qu'il procure des émotions positives.
L'UX designer s'intéresse à l'expérience globale de l'utilisateur
L'UI designer (User Interface designer) :
Il se concentrer sur l'interface du site web
Il mixe les éléments graphiques et les éléments fonctionnels, de telle sorte que le produit
soit le plus attractif, agréable et accessible possible
Remarque :
Dans certaines structures, on ne différencie pas les deux métiers et on parle de “Product
Designer”.
C'est souvent le cas dans les petites entreprises, qui vont chercher des profils généralistes
capables de travailler sur toutes les dimensions du design d'un produit.

4. Les techniciens informatiques

Tous les métiers cités précédemment ont besoin de soutien. Par exemple, les développeurs et UX
designers ont besoin de postes de travail qui fonctionnent correctement, avec les bons outils
installés et configurés.
Les techniciens informatiques s'occupent de cela. Ils font partie de la grande famille des métiers
liés aux systèmes d'information (SI).
Le rôle du technicien informatique au sein d'une entreprise est d'assurer le bon fonctionnement du
parc informatique, et de fournir aux utilisateurs des solutions pour pallier les éventuelles pannes
ou difficultés qu'ils peuvent rencontrer.

5. Résumé
Pour réaliser un projet web on fait appel à plusieurs professionnels
Les développeurs, qui se chargent du développement du site web
Les products designer, ce sont des profils généralistes capables de travailler sur toutes les
dimensions du design d'un projet de site web
Les techniciens informatiques qui assurent le bon fonctionnement du parc informatique

22