COMPÉTENCE B1.

3
SÉQUENCE 1 - ASSURER L’AMÉLIORATION ET L’ÉVOLUTION
DES FONCTIONNALITÉS ACTUELLES DES INTERFACES WEB
DANS LE RESPECT DES BONNES PRATIQUES DE DÉVELOPPEMENT

FICHE SAVOIRS
Fondamental de la conception web : le fonctionnement du
web

Contenu
1. Qu’est-ce que le web ?����������������������������������������������������������������������������������������������������������������������������� 1
2. Comment fonctionne le web ?����������������������������������������������������������������������������������������������������������������� 2
3. Comment s’architecture une application web ?�������������������������������������������������������������������������������������� 3
4. Quelle plateforme de développement utiliser ?�������������������������������������������������������������������������������������� 4

La compréhension du fonctionnement du web est fondamentale pour toute personne qui souhaite
acquérir des compétences en développement web. Il ne s’agit pas seulement de coder, mais bien de
comprendre les dessous du web d’un point technologique. Quels sont les protocoles mis en œuvre, les
applications dites « serveurs », etc.

1. Qu’est-ce que le web ?

Avant tout de chose, il convient de lutter contre une idée reçue : Internet et le web sont deux choses
différentes. Internet, ce n’est pas le web et le web n’est pas Internet !

1A. Internet
Internet, c’est le réseau informatique mondial constitué de réseaux nationaux, continentaux, et
intercontinentaux, d’équipements d’interconnexion physiques tels que les routeurs, les modems des
fournisseurs d’accès, les câbles téléphoniques, les fibres optiques, etc. Ce réseau est public et on utilise
le protocole de communication IP (Internet Protocol) pour accéder aux services qui y sont proposés
(vidéodiffusion, téléphonie, messagerie, partage de fichiers, sites web…).

1B. Le web
Le web est l’abréviation de World Wide Web (qui a donné naissance au « www » encore présent dans de
nombreuses URL de sites web), c’est l’un des services offerts par Internet. Ce service permet d’offrir
des contenus accessibles au travers de navigateurs (Firefox, Chrome, Edge…) qui sont les logiciels de
navigation que l’on trouve sur les postes de travail et sur les périphériques mobiles.

CNED – BTS SIO – BLOC 1 – B1.3 – SÉQUENCE 1– Fiche savoirs – 1

2. Comment fonctionne le web ?

2A. DNS
C’est l’acronyme de « Domain Name System » (système de nom de domaine) qui permet de faire le lien
entre un « nom logique DNS » et une « adresse IP ». C’est sur ce service que repose dans un premier
temps le bon fonctionnement de la quasi-intégralité des services proposés sur le web, car pour accéder
à un service en ligne, notre navigateur a besoin de connaître l’adresse « réelle » du serveur qui héberge
le service en question. Or, personne n’utilise d’URL telles que « https://91.198.174.192 » (adresse IPv4)
ou « https://2620:0:862:ed1a::1 » (adresse IPv6) pour se rendre sur le site web de Wikipédia, mais plutôt
l’URL « https://www.wikipedia.org ».
Le web fonctionne sur des noms logiques pour de multiples raisons pratiques que vous découvrirez dans
les modules orientés « systèmes et réseaux ».

En pratique, comment cette « résolution de nom » se passe-t-elle ?

Comme on vient de le voir, lorsque vous accédez à
https://www.wikipedia.org Internet, vous utilisez un « navigateur », c’est-à-dire
un logiciel qui sert à consulter des applications web.
Sur vos équipements informatiques, vous utilisez en
général les logiciels Mozilla Firefox, Google Chrome
ou encore Microsoft Edge, auxquels vous indiquez la
ressource désirée (par exemple « https://www.
wikipedia.org »). Cette ressource, que l’on appelle
« URL » pour « Uniform Ressource Locator ».
Une fois validé, votre navigateur demande alors à votre ordinateur de trouver l’adresse IP du serveur où
se trouve la ressource à laquelle on souhaite accéder. L’ordinateur fait alors une requête « DNS » afin
d’obtenir l’adresse « IP » d’un serveur à partir d’une URL :

www.wikipedia.org ?

Requête DNS :
Navigateur www.wikipedia.org

91.198.174.192 Réponse DNS :

91.198.174.192
Poste de travail Serveur DNS

2B. HTTP
C’est l’acronyme de « HyperText Transfer Protocol » qui est le protocole de communication utilisé
pour transférer des ressources web. On le retrouve dans la première partie de la plupart des URL
(« https:// »), HTTPS est la version qui sécurise (« Secured ») la communication par chiffrement (système
cryptographique que vous découvrirez dans le module orienté « cybersécurité »).

En pratique, comment cet « accès web » se passe-t-il ?

À l’étape précédente, grâce au DNS, le navigateur a récupéré l’adresse IP du serveur hébergeant
le service auquel on souhaite accéder. Le navigateur se connecte ensuite au serveur et demande à
récupérer la ressource en question en effectuant ce que l’on appelle une requête « HTTP » :

CNED – BTS SIO – BLOC 1 – B1.3 – SÉQUENCE 1– Fiche savoirs – 2

 Requête HTTP :
www.wikipedia.org

Réponse HTTP

Navigateur
Serveur web

Et pour finir, le navigateur affiche à l’écran la ressource ainsi

récupérée après l’avoir interprétée, car les pages web sont écrites en
« HTML » (pour « HyperText Markup Language ») qui est un langage
propre aux navigateurs (et que vous découvrirez dans une prochaine
fiche-savoir).

3. Comment s’architecture une application web ?

Pour l’instant nous avons vu le côté client, c’est-à-dire le point de vue depuis le navigateur. Intéressons-
nous maintenant davantage à la partie « serveur ».

3A. Serveur web

Pour « servir » des ressources web, on a besoin d’un serveur web, c’est-à-dire un serveur qui réponde à
des demandent HTTP. Les ressources web servies peuvent être :
— statiques : le serveur se contente de transmettre des fichiers préalablement stockés lorsqu’on les lui
demande (pages web en HTML, photos, vidéos, sons…) ;
— dynamiques : le serveur sert des ressources qu’il construit avant de les servir en fonction d’informa-
tions diverses (date, identité de l’utilisateur, documents contenant des données issues d’une base de
données ou d’un autre service en ligne, audio/vidéo en direct…).
Pour ce dernier cas, le serveur doit disposer d’interpréteurs de langages dynamiques qui permettent au
serveur web de ne plus uniquement servir du contenu, mais d’être capable de lancer des programmes
écrits dans des langages de programmation web pour construire « à la volée » des contenus.

Quelques exemples de logiciels de serveurs web : Apache, NginX, IIS…

3B. Programmation web

L’avantage des langages de programmation web c’est qu’ils permettent de construire dynamiquement
des ressources à partir :
— d’informations issues du navigateur : pays d’origine de l’utilisateur, langue paramétrée dans son
navigateur, fuseau horaire, système d’exploitation utilisé…
— de contenus locaux : fichiers multimédias stockés sur le serveur web, date et heure, noms des
ressources…
— de contenus distants : données stockées dans une base de données, données d’un service en ligne
distant (météo, cotations boursières, informations bancaires, données géographiques…), fichiers
hébergés sur d’autres serveurs web…
Quelques exemples de langages de programmation web : PHP, Python, Java, C#...

CNED – BTS SIO – BLOC 1 – B1.3 – SÉQUENCE 1– Fiche savoirs – 3

3C. Pile applicative la plus fréquente
Lorsque l’on parle d’une application qui repose sur de multiples technologies, on parle de « pile
applicative » (on entend aussi parfois parler de « stack » en référence au terme anglais). La pile
applicative la plus courante est celle qui consiste à avoir :
— un navigateur : il interprète le HTML (qui permet de structurer le contenu d’une page web), le CSS
(qui permet de faire de la mise en forme) et le JavaScript (qui permet de lancer des programmes dans
le navigateur). Le navigateur sait également gérer les différentes ressources multimédias présentes
sur les serveurs web (photos, audios, vidéos, documents…) ;
— un serveur web dynamique : détails donnés ci-dessus.
Un serveur de gestion de base de données : abrégé « SGBD », c’est un logiciel serveur qui permet
de stocker et d’exploiter de grands volumes de données. On utilise un langage particulier pour
interagir avec ce type de serveur appelé le « SQL » pour « Structured Query Language » (que vous
vous découvrirez dans le module orienté « bases de données »).
Quelques exemples de SGBD utilisés sur le web : MariaDB, MySQL, PostgreSQL, Oracle Database, SQL
Server…
En pratique, comment se présente cette pile applicative ?

Requête HTTP Requête SQL

HTML/CSS/JS/
Fichiers multimédias Donées

Navigateur
Serveur Web
SGDB
+ interpreteur dynamique

4. Quelle plateforme de développement utiliser ?

L’une des plateformes de tests et de développement web les plus utilisées sur Windows est WampServer.
Cette plateforme regroupe une pile applicative web complète pour les développeurs web.
Le nom de la plateforme est d’ailleurs basé sur la pile applicative proposée :
— W : Windows, qui est le système d’exploitation cible de ce logiciel. Vous noterez que l’on retrouve
cet acronyme pour la même pile applicative sous Linux (« LAMP »), sous macOS (« MAMP »), sous
FreeBSD (« FAMP »)…
— A : Apache, qui est l’un des deux serveurs web les plus populaires sur Internet (l’autre c’est NginX,
que l’on prononce « Engine-X ») ;
— M : MariaDB et MySQL, qui sont les deux SGBD fournis. Pour information MariaDB est un SGBD libre
basé sur MySQL et qui tend à le remplacer : Google qui est contributeur de MariaDB l’utilise sur des
milliers de serveurs, Wikipedia est passé à MariaDB en 2013 et beaucoup de distributions Linux sont
également passées à MariaDB comme SGBD par défaut (Debian 9, Fedora 19, Suse 12.3, Red Hat
7…) ;
— P : PHP, qui est le langage de développement web le plus utilisé sur Internet (dans certains logiciels
de type « …AMP », on trouve également pour le « P » Perl et Python).

CNED – BTS SIO – BLOC 1 – B1.3 – SÉQUENCE 1– Fiche savoirs – 4

Quelques outils en plus sont également fournis avec WampServer :
— phpMyAdmin : c'est une application web écrite en PHP qui permet de gérer MySQL ou MariaDB
depuis un navigateur (son nom est également issu d'un acronyme : « PHP MySQL Administrator ») ;
— Adminer : c'est un outil équivalent à phpMyAdmin, mais qui a été créé comme une alternative plus
légère (d’où son premier nom : phpMinAdmin) où l’intégralité de l’application est basée sur un seul
fichier ;
— PhpSysInfo : également une application web, elle permet d'obtenir simplement toutes les informa-
tions concernant le système et le matériel sur lequel elle est installée.
Pour voir l’écosystème actuel de logiciels de type « …AMP », vous pouvez jeter un œil à cet article :
https://fr.wikipedia.org/wiki/Comparaison_de_WAMP.

CNED – BTS SIO – BLOC 1 – B1.3 – SÉQUENCE 1– Fiche savoirs – 5

Les cours du CNED sont strictement réservés à l’usage privé de leurs destinataires et ne sont pas destinés à une utilisation collec-
tive. Les personnes qui s’en serviraient pour d’autres usages, qui en feraient une reproduction intégrale ou partielle, une traduc-
tion sans le consentement du CNED, s’exposeraient à des poursuites judiciaires et aux sanctions pénales prévues par le Code de la
propriété intellectuelle. Les reproductions par reprographie de livres et de périodiques protégés contenues dans cet ouvrage sont effec-
tuées par le CNED avec l’autorisation du Centre français d’exploitation du droit de copie (20, rue des Grands-Augustins, 75006 Paris).
CNED, BP 60200, 86980 Futuroscope Chasseneuil Cedex, France
© CNED 2020 87611TEWB3420