Concepts du web

Table des
matières
Objectifs 4

I - Le web et ses origines 5

1. Qu'est ce que le Web ? .................................................................................................................................... 5

2. World Wide Web ............................................................................................................................................ 6

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

4. Qu'est ce que le cloud ? .................................................................................................................................. 7

5. Un peu d'histoire du web ................................................................................................................................ 8

6. Résumé ........................................................................................................................................................... 9

II - Les langages du web 11

1. Les langages client ........................................................................................................................................ 11

2. Les langages serveurs .................................................................................................................................... 12

3. Le rôle du langage serveur ............................................................................................................................ 13

4. Les bases de données .................................................................................................................................... 14

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

6. Résumé ......................................................................................................................................................... 15

III - Les serveurs 16

1. Qu'est ce qu'un serveur ? .............................................................................................................................. 16

2. Communication entre serveurs et clients ...................................................................................................... 17

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

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

5. Le DNS ......................................................................................................................................................... 21

6. Les protocoles ............................................................................................................................................... 22

7. Résumé ......................................................................................................................................................... 23

IV - Les métiers du web 24

1. Les métiers du web ....................................................................................................................................... 24

2. Les développeurs .......................................................................................................................................... 24

3. Les UX / UI designer .................................................................................................................................... 25

4. Les techniciens informatiques ...................................................................................................................... 25

5. Résumé ......................................................................................................................................................... 25
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

4
 Le web et ses origines

Le web et ses origines

I
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.

Surfeur

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 !

5
 World Wide Web

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.

Toile d'araignée

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

6
 Qu'est ce que le cloud ?

- 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.

Navigateurs web

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 http://www.gmail.com/ 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.

Cloud : source https://plantrustler.com/cloud-computing-a-win-for-everyone/

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.

7
 Un peu d'histoire du web

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.

Stockage des données en local ou en cloud. source https://coludtechupddates.blogspot.com/2019/09/cloud-

computing-is-delivery-of-on.html

Voici les principaux types de cloud computing:

Les principaux types de cloud selon le modèle de deploiment et le modèle de service

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 http://info.cern.ch/hypertext/WWW/TheProject.html

8
 Résumé

Premier site web

Le père du Web ? C'est Tim Berners-Lee, un scientifique britannique qui a travaillait en 1991 au CERN.

Tim Berners-Lee est le premier à inventer le concept de "page web" avec des "liens hypertextes" pour naviguer
d'une page à une autre.

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 W3C (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).

Tim Berners-Lee, le père du Web

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.

9
 Résumé

- 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.

10
 Les langages du web

Les langages du web

II
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.

Échange client / serveur

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

11
 Les langages serveurs

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
- Opera
- Safari

Navigateurs web

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

Schéma représentant la traduction des langages HTML et CSS par l'ordinateur

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.

12
 Le rôle du langage serveur

- 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

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)

13
 Les bases de données

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.

Quelques exemples de SGBD

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.

14
 Résumé

Schéma représentant les interactions entre le 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

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.

15
 Les serveurs

Les serveurs
III
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

Un datacenter, où sont stockés les 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.

16
 Communication entre serveurs et clients

Plusieurs serveurs les uns sur les autres, dans une baie

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.

17
 Communication entre serveurs et clients

Plusieurs serveurs les uns sur les autres, dans une baie

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 :

Un câble sous-marin

18
 Carte réseau, câbles reseau et connectiques

Carte des câbles sous marines source : https://www.submarinecablemap.com/

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

Cartes réseau

19
 Les adresses IP et les noms d'hôtes

Câble réseau

Câbles reseau

Connectique

Connectiques

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

Chaque téléphone possède d'un numéro de téléphone.

20
 Le DNS

De même tout ordinateur connecté à un réseau possède une adresse se forme d'une suite de nombres comme
205.89.177.26. 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 google.com 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.

Toile représentant les serveurs avec leur adresse IP et nom d'hôte

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.

La traduction DNS du nom d'hôte en adresse IP

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

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

21
 Les protocoles

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...

Vincent Cerf, l'inventeur du protocole TCP

Protocoles haut niveau

- 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 "http://" 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 :

22
 Résumé

Voici comment un client demande une page web à un serveur :

1 GET /page.html HTTP/1.0 Host:GET /page.html HTTP/1.0

2 Host: serveur.com
3 Referer: http://serveur.com/
4 User-Agent: CERN-LineMode/2.15 libwww/2.17b3 serveur.com Referer: http://serveur.
com/ User-Agent: CERN-LineMode/2.15 libwww/2.17b3
Ce code nous pouvons le traduire par : "Hello, le serveur de serveur.com, peux-tu m'envoyer page.html ? 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 23:59:59 GMT 
3 Server: Apache/0.8.4
4 Content-Type: text/html
5 Content-Length: 59
6 Expires: Sat, 01 Jan 2000 00:59:59 GMT
7 Last-modified: Fri, 09 Aug 1996 14:21:40 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 : google.com) 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.

23
 Les métiers du web

Les métiers du web

IV
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 ;

24
 Les UX / UI designer

- 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.

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

25
 Résumé

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

26