Bienvenue dans le monde fascinant du web et de ses milliards de sites à travers le monde ! Que tu sois un novice curieux ou un non-informaticien désireux de comprendre les bases, cet article est fait pour toi. Nous allons explorer ensemble quelques notions absolument essentielles à connaître pour bien comprendre comment fonctionnent les sites internet. Notamment, le front-end vs. le back-end et le contenu statique vs. le contenu dynamique. J’utiliserai des analogies simples pour que tu puisses facilement comprendre ces notions.

Le but de cet article n’est pas de t’enseigner en détail comment fonctionnent les sites web, mais plutôt de t’apprendre des bases communes sur lesquelles tous les sites web, sans exception, sont bâtis.

La quantité d’information et de concepts à absorber pour maîtriser le monde du web est tout simplement gigantesque et ça a été un grand challenge pour moi de savoir par où commencer. J’ai pu toutefois identifié quelques concepts-clés qui reviennent souvent dans les discussions autour du web et nous allons donc commencé par ceux-ci.

C’est partiiiii, LET’S GO!!! 🚀

Derrière chaque site web : des fichiers sur un serveur et du code magique 🪄

Les différents sites web que tu consultes, que ce soit Facebook, Google, le site de l’Association de la Protection des Ballons de Baudruche de Casablanca, ou encore celui sur lequel tu lis cet article, ne sont en fait rien d’autre que des fichiers 🗎 hébergés sur un serveur. Dans ce contexte, un serveur est un ordinateur superpuissant conçu pour pouvoir afficher un site web à un grand nombre d’internautes en même temps.

Ces fichiers contiennent des formules magiques ✨ écrites en différents langages, qui sont interprétées par le serveur hébergeant le site et par ton navigateur web pour afficher le site à l’écran. En informatique, ces formules magiques sont appelées le code.

L’hébergeur

Un hébergeur est une entreprise ou un service qui fournit l’infrastructure nécessaire pour rendre un site web accessible sur Internet. Voici une analogie simple :

Imagine que tu as construit une maison (ton site web). Pour que d’autres personnes puissent la visiter, tu as besoin d’un terrain (l’infrastructure) où construire ta maison. Un hébergeur te fournit ce terrain sous forme de serveurs et de connexions réseau.

Fonctionnement de l’hébergement web

1. Serveurs : Les hébergeurs possèdent des serveurs puissants où les fichiers de ton site sont stockés.
2. Connexion : Ils assurent une connexion Internet rapide et stable pour que les visiteurs puissent accéder à ton site web sans interruption.
3. Gestion : Certains hébergeurs offrent des services de gestion, comme les sauvegardes automatiques, la sécurité renforcée, et le support technique.

Types d’hébergement

Il existe plusieurs types d’hébergement :

• L’hébergement partagé : Plusieurs sites web partagent les mêmes ressources serveur, ce qui est économique mais peut affecter les performances si un site utilise beaucoup de ressources. C’est un peu comme une colocation où chaque colocataire partage le même logement. 🏠👥
• Le VPS (Serveur Privé Virtuel) : Un serveur est divisé en plusieurs environnements virtuels, offrant plus de contrôle et de ressources dédiées par rapport à l’hébergement partagé. « Environnement virtuel » est une notion assez abstraite. Imagine que le serveur est un immeuble, chacun de ses appartements est un environnement virtuel. Chaque appartement (environnement virtuel) est indépendant des autres, mais ils partagent tous le même immeuble. 🏙️
• Serveur dédié : Un serveur entier est dédié à ton site web, offrant les meilleures performances et le plus de contrôle, mais c’est aussi le plus cher. Dans ce cas, c’est comme si tu avais une maison pour toi tout seul ! 🏡👤
• Hébergement cloud : Utilise plusieurs serveurs connectés pour offrir une scalabilité et une flexibilité maximales. Idéal pour les sites à fort trafic. Alors là, imagine que tu possèdes un domaine avec un château composé de centaines de pièces rien que pour toi ! 🏰👤🤩

Quelques exemples d’hébergeurs populaires

• OVHcloud : Un des plus grands fournisseurs d’hébergement en Europe, offrant des services de cloud, VPS, et serveurs dédiés.
• Gandi : Connu pour ses services de nom de domaine et d’hébergement, avec une forte emphase sur la sécurité et la confidentialité.
• Infomaniak : Hébergeur basé en Suisse avec une forte présence en France, offrant des services d’hébergement web, cloud, et e-mail.
• PlanetHoster : Propose des services d’hébergement partagé, VPS, et dédié avec une infrastructure en France et au Canada.

Contenu statique vs. contenu dynamique

Une notion fondamentale à connaître dans le monde du web est la distinction entre le contenu statique (fixe) et le contenu dynamique.

Un site web est composé de pages web. Ces pages web incluent du contenu sous différentes formes : du texte, des images, des vidéos, etc.

Ce contenu peut être soit rédigé à l’avance et fixe 📄 soit généré automatiquement, à la volée, en fonction de ce que demandent les visiteurs du site 🔄.

Voici quelques exemples :

• 📄 Contenu statique :
  • Texte de présentation du site
  • Adresse et informations de contact
  • Photos
  • Page « À propos », biographie
  • Formulaires PDF téléchargeables
• 🔄 Contenu dynamique :
  • Informations personnalisées comme un nom de l’utilisateur
  • Messages et notifications
  • Résultats d’une recherche sur le site
  • Nombre de visiteurs
  • Liste des articles du site mise à jour en temps réel

Grosso modo, le contenu statique est le contenu qui est fixe et le contenu dynamique est le contenu qui change.

On parle aussi de sites web statiques et de sites web dynamiques.

Dans le cas d’un site web statique, le nombre de pages qu’il pourra afficher correspond au nombre de pages web qu’il contient. Pour mieux comprendre cela, imagine que tu as créé un site web perso avec les pages suivantes :

• Une page d’accueil, où on voit ta photo, ton nom et ton mantra
• Une page « Bio » où tu racontes ta vie
• Une page « CV » qui contient ton parcours professionnel

On appelle typiquement ce genre de site, un « site vitrine« , car il permet de présenter quelque chose, que ça soit une personne, une organisation ou encore une entreprise sans offrir des fonctionnalités avancées telles qu’un forum de discussion, inscription en ligne, chat, etc. Bref, ton site web contient donc 3 pages et peut afficher 3 pages. Son contenu est fixe. C’est donc un site statique.

Maintenant, imagine que tu te trouves sur Google et que tu lances une nouvelle recherche avec les mots-clés « recette facile tiramisu ». Une page web sera automatiquement générée avec la liste des résultats de recherche.

Tu lances ensuite une nouvelle recherche avec des mots-clés différents et une nouvelle page web est générée avec le nouveau résultat de recherche.

Sur le serveur de Google, cette page des résultats de recherche est en fait la même page, mais pour l’internaute, ça sera une page différente avec un contenu différent. On peut ainsi générer une infinité de pages à la volée. Ces pages seront affichées dans ton navigateur web, mais sur le serveur de Google, ça sera correspondra toujours à la même page de résultats de recherche. Il s’agit donc d’un site web dynamique.

Autre exemple : Diana s’inscrit sur un shop en ligne qui vend de la nourriture pour chat et suite à la création de son profil, une page web s’affiche où elle peut lire :

Merci pour ton inscription, Diana ! 🎉

Tu devrais recevoir un e-mail de confirmation dans quelques minutes…

Tu penses bien que les créateurs du site web n’ont pas écrit cette page web spécialement pour Diana ! Imagine tout le taff que ça représenterait s’ils devaient écrire une page avec tous les prénoms possibles ! 🤯

Par contre, il y a quand même des parties statiques qui ont été pré-écrites : « Merci pour ton inscription, « , « ! 🎉 » et « Tu devrais recevoir un e-mail de confirmation dans quelques minutes… ». Toute personne qui s’inscrit sur ce site verra ces mêmes textes.

Eh non, le « Nous sommes heureux de te compter parmi nos membres ! 😃 » ou encore le « Tu es vraiment sûr-e de vouloir de désabonner ?? Tu vas nous manquer ! 😢 » n’ont pas été spécialement été écrits pour toi ! Mais ça, tu le savais déjà… enfin, je l’espère pour toi ! 😄

Tous les sites web où l’on peut s’inscrire, effectuer des recherches, échanger sur des forums de discussion ou des chats, etc. sont des sites web dynamiques.

Retiens bien cette distinction car elle est fondamentale ! 🧐

Front-end vs. back-end

Deux autres notions essentielles à connaître dans le monde du web sont le front-end et le back-end.

Un site web est composé de plusieurs parties bien distinctes : des parties que l’on peut voir et interagir avec et des parties que l’on ne voit pas. Et pour chacune de ces parties, un langage différent est utilisé.

Mais c’est quoi ces parties visibles et invisibles ??

Pour bien comprendre ces différentes parties d’un site web, utilisons une analogie parlante : une maison 🏠.

L’analogie de la maison

Imagine que tu entres dans une maison. Tu ouvres la porte d’entrée, tu arrives dans le hall, tu te balades de pièce en pièce, tu ouvres et fermes les portes, tu ouvres et fermes les fenêtres, tu cognes les murs, etc. Tous ces éléments sont visibles et tangibles.

Jusqu’à maintenant, cette maison te paraît tout à fait normal. C’est une très grande maison et il t’a fallu du temps pour la parcourir. D’ailleurs, tu es essoufflé-e et tu décides d’aller te servir un verre d’eau au robinet. Mais lorsque tu ouvres ce dernier, rien ne se passe, aucune eau ne coule ! Il commence même à faire sombre et tu aimerais allumer la lumière. Mais lorsque tu appuies sur l’interrupteur de la cuisine, la lumière ne s’allume pas et tu es peu à peu plongé-e dans l’obscurité ! 🌑

Le problème avec cette maison, c’est que seuls ses éléments extérieurs, c’est-à-dire sa structure et ses aménagements, ont été installés mais pas ses installations techniques (eau, sanitaire, électricité, chauffage, plomberie, etc.). Les installations techniques sont des éléments vitaux d’une maison mais que l’on ne voit pas (à moins de les chercher). Les installations techniques sont censées faire tourner la maison silencieusement sans qu’on s’en aperçoive. Ce sont comme des travailleuses de l’ombre.

Mais revenons à notre site web !

Un site web est construit de la même manière. Il comprend des parties visibles comme la page d’accueil, d’autres pages, le design, des menus, des boutons, des liens, des images, des vidéos, etc. On appelle cette partie que les internautes voient et avec laquelle ils interagissent, le front-end (= au front, directement visible).

A contrario, les parties de l’ombre qui font que le site web fonctionne — c’est-à-dire que quand on clique sur un bouton, ça fasse quelque chose ou encore que lorsqu’on entre ses informations de connexion, le site web nous authentifie et charge notre session — ces parties constituent le back-end (= à l’arrière, en coulisse).

Interaction entre le front-end et le back-end

Il existe une autre différence fondamentale entre le front-end et le back-end.

Le code écrit pour le front-end est exécuté par ton navigateur web alors que le code écrit pour le back-end est exécuté par le serveur qui héberge le site.

Front-end et back-end communiquent via des requêtes. Par exemple, pour afficher une page web, le navigateur envoie une requête au serveur. Si la page web contient des éléments dynamiques, le serveur exécute du code back-end pour produire (ou compléter) le code front-end de la page qui sera envoyé au navigateur web. Ce dernier se chargera de produire, tout seul comme un grand, la page web à partir du code front-end qui lui a été retourné par le serveur et de te l’afficher. Si, au contraire, il s’agit d’une page statique, le serveur retournera directement le code front-end pré-écrit au navigateur sans passer par le back-end. Si tu interagis avec la page, le front-end peut envoyer des requêtes supplémentaires au serveur pour mettre à jour l’information affichée.

Voici le tout résumé en un seul schéma (si l’image ci-dessous est trop petite pour ton écran, clique/tapote dessus pour l’agrandir) :

Ainsi, le contenu dynamique des sites web est généré par le back-end.

Développeur front-end vs. développeur back-end

Pour le front-end comme pour le back-end, des langages spécifiques sont utilisés par les développeurs pour coder (= construire en écrivant du code) un site web.

Ces langages sont très différents les uns des autres et n’accomplissent pas les mêmes choses. Ainsi, un développeur aura souvent une préférence entre le développement du front-end ou du back-end. C’est pour cette raison qu’on parle de développeurs front-end et de développeurs back-end.

Un développeur front-end s’occupe de créer la structure du site, son design ainsi que quelques éléments interactifs. Il s’agit de quelqu’un avec un profil plus artistique 🎨, cerveau droit, qui a le sens du détail et de l’expérience utilisateur. Il mettra typiquement l’accent sur les éléments visuels et interactifs du site web.

Le développeur back-end, quant à lui, se charge de créer le « moteur » qui fait tourner le site. Ce « moteur » désigne tous les mécanismes qu’on ne voit pas mais qui font que le site fonctionne. Le développeur back-end aura un profil plus ingénieur ⚙️, cerveau gauche, rigoureux et méthodique.

Voici quelques exemples de ces mécanismes invisibles aux internautes :

• L’authentification des utilisateurs (quand tu te connectes avec ton nom d’utilisateur/e-mail et mot de passe sur un site).
• La gestion des sessions des utilisateurs
• L’enregistrement des données saisies dans les formulaires dans la base de données du site
• La récupération de données de la base de données
• Les mécanismes de sécurité du site qui empêchent les pirates informatiques d’infiltrer le site
• La communication avec des sites tiers dans le cas d’un paiement en ligne, par exemple
• etc.

Dans tous les cas, le front-end et le back-end devront communiquer ensemble pour satisfaire aux demandes des internautes, afficher les pages web et exécuter les actions qu’ils demandent.

Il existe aussi une autre créature qui possède le super-pouvoir de développer le front-end ET le back-end ET se charge aussi de l’infrastructure (serveur) sur lequel se trouve le site web ainsi que de la base de données, j’ai nommé, le développeur full stack. Si un jour tu en croises un ou une… sous ta Pokéball et capture-le/la !

Résumé

Pour résumer, voici les points-clés abordés dans cet article :

1. Un site web est constitué de fichiers hébergés sur un serveur.
2. Ces fichiers contiennent du code qui est interprété par le serveur et le navigateur pour afficher le site.
3. Un hébergeur fournit l’infrastructure nécessaire pour rendre un site web accessible sur Internet.
4. Les hébergeurs possèdent des serveurs puissants, assurent une connexion rapide et offrent des services de gestion.
5. Le contenu statique d’un site est un contenu qui est fixe, préécrit et identique pour tout le monde.
6. Le contenu dynamique d’un site est généré en temps réel en fonction des interactions des utilisateurs (ex : résultats de recherche sur Google).
7. Le front-end est la partie visible et interactive du site web. Son code est exécuté par le navigateur.
8. Le back-end est la partie invisible qui gère la logique, les mécanismes et les bases de données. Son code est exécuté par le serveur.
9. Le front-end et le back-end communiquent via des requêtes pour afficher et mettre à jour le contenu du site.
10. Le développeur front-end crée la structure et le design du site.
11. Le développeur back-end crée et gère le « moteur » du site, les bases de données et les logiques serveur.
12. Le développeur full stack possède des compétences à la fois en front-end et en back-end, capable de gérer l’ensemble du développement web.