Comment fonctionne un site internet, expliqué à ta grand-mère

Comment fonctionne un site internet, expliqué à ta grand-mère
Avez-vous déjà essayé d’expliquer ce qu’est internet à votre grand-mère ? Pas facile hein ? Avouez que vous-même n’êtes pas tout à fait sûr de comment fonctionne un site web et des technologies qui se cachent derrière. Alors voici une explication simple, qui vous permettra de briller à votre prochain repas du dimanche !
 

Chapitre 1 : Internet est un village

Il était une fois le World Wide Web, ou le web pour les intimes, un grand village qui réunit de nombreux établissements, ceux-ci sont l’équivalent des sites web ! Certaines habitations hébergent des commerçants qui vendent des produits (que l'on appelle eCommerce), d’autres sont des fournisseurs de services comme une banque ou un service de livraison par exemple (que l’on nomme applications web), ou encore des entreprises ou associations qui présentent leurs produits et services (ce sont les sites vitrines). Les internautes sont tout simplement des villageois qui se rendent dans tel ou tel établissement en fonction de leur besoin.

C’était pas compliqué hein ? Alors on passe au chapitre suivant !

Chapitre 2 : Un site web est une maison

Chaque maison possède une façade et plusieurs pièces, tout comme un site possède une page d’accueil et plusieurs pages. Celles-ci contiennent des informations spécifiques à l’activité de la maison, et possèdent un nom et une adresse unique (ou URL : Uniform Resource Locator en langage web) qui permet aux internautes de s’y rendre.

Attention, C’est à ce moment là que mamie risque de décrocher. Mais grâce au chapitre suivant, vous pourrez surprendre et épater Julien, votre cousin développeur.

Chapitre 3 : Comment construire un site internet ?

Pour la création de site internet , on utilise différents langages de programmation. Nous avons sélectionné les 4 principaux. Tout comme un architecte, un décorateur, un électricien, un ouvrier, chaque langage a une fonction précise et travaille main dans la main avec les autres pour que la maison soit solide, pratique, esthétique. Tout cela dans le but qu’on ait envie d’y entrer et d’y rester ! 

L’architecte du site : le langage HTML

Le langage HTML (Hypertext Markup Language) est ce qu’on appelle un langage de balisage. Il s’exprime par des lignes de code encadrées de différentes balises html (qui commencent par un < et finissent par un > ). Cela permet d’avoir des données structurées et d’indiquer si le contenu de votre site est :

  • un titre (encadré des balises <h1>),
  • un paragraphe (encadré des balises <p>)
  • une image (encadrée des balises <img>),
  • une vidéo (encadrée des balises <video> )
  • un lien pour naviguer entre chaque page (encadré des balises <a>)

Voici ce que cela donne en vue développeur et son équivalent dans un navigateur web.

Le contenu d’un site internet c’est sa base. S’il peut être mis en valeur, c’est encore mieux ! Ainsi, c’est là qu’intervient le CSS.

Le décorateur du site : le langage CSS

Le langage CSS (Cascading Style Sheet) définit le style en s'appuyant sur la charte graphique  de votre site. En effet, c’est ce qui déterminera l’emplacement, la couleur et la taille de votre porte et de vos fenêtres.

Ce langage permet de choisir  une couleur de fond, de changer la couleur du texte, de modifier les polices d’écriture ou encore d’ajouter des bords arrondis à vos boutons par exemple. En bref, d'améliorer la mise en forme et retranscrire votre identité visuelle. Stylé, non ?

Au fil du temps, le langage a évolué et permet désormais de créer de véritables interfaces ergonomiques, d’adapter l’affichage du site aux smartphones et tablettes (on parle d’affichage “responsive“ ou “mobile friendly”).

Et hop une visualisation de l’HTML + le CSS

Maintenant qu’on a une page stylisée, ajoutons-y un peu de mouvement !

L'électricien du site : le langage JavaScript


Le langage JavaScript est un langage de script qui ajoute des effets et de l’interactivité à un site. Il apporte l’énergie pour ouvrir les portes et les fenêtres et animer les éléments de votre maison.

Cela vous permet par exemple de faire apparaître une pop-up interactive (vous savez les petites cases de pub qui s’ouvrent automatiquement !). Mais aussi, de faire tourner un carrousel d’images, d’ajouter des animations sur des éléments ou même de contrôler le son et les vidéos qui sont diffusés sur les pages de votre site. 

En bref, ce langage de programmation permet de développer le côté vivant d’un site, de le rendre intuitif, et améliore donc grandement l’expérience utilisateur !

Le fournisseur du site : le langage PHP


Le langage PHP (Hypertext Preprocessor) c’est le fournisseur qui va vous permettre de changer de porte, de fenêtres et le contenu de votre maison quand c’est nécessaire. C’est celui qui va venir “dynamiser” le site internet. 

Ainsi, ce langage open source permet de communiquer avec une base de données, dans le but d’y stocker des informations sur le long terme et de les récupérer de manière dynamique. C’est ainsi qu’on crée des fonctionnalités avancées telles qu’une partie e-commerce, un espace membre ou d’autres services web.

Ce langage est utilisé par de nombreuses boîtes à outils pour développeurs. Par exemple WordPress, un CMS (Content Management System) qui est un système de gestion de contenu populaire avec une interface d’administration, et par les frameworks modernes du type Laravel, Symfony ou CakePHP.

Ca y’est tout devient limpide ? Les connexions se font ? Je vois votre air de “ce n’était pas si compliqué que ça” ! Tant mieux, vous avez passé le plus dur. Alors, on continue !

 

Chapitre 4 : Où se trouvent les sites internet ?

Le terrain de votre site : le serveur web

L’hébergement de votre site, à savoir le serveur web, représente le terrain sur lequel votre maison est construite. Techniquement, cet hébergeur ressemble plus à un gros ordinateur constamment relié à Internet. Tout ce qui constitue votre site, le code, les images, etc. sont stockés sur ce serveur.

Sachez qu’il existe plusieurs types d’hébergement web :

 

  • Le serveur dédié 

On parle de serveur dédié lorsque le terrain vous appartient à 100%, autrement dit, il sagit d’une machine qui est entièrement à votre disposition. Toute la puissance de celle-ci permet de faire fonctionner votre site internet ou votre application. Il permet de gérer une très forte demande et de faire de gros calculs sans broncher. Cependant il s’agit d’une solution plutôt coûteuse.

 

  • Le serveur mutualisé

C’est un terrain que vous partagez avec d’autres maisons. Le serveur vous est dédié mais il est divisé entre plusieurs sites web en même temps. Chaque site se partage les ressources utilisées par le serveur. Bien que ce soit une solution bien moins coûteuse, le partage n’est pas toujours équitable. Si un site internet consomme plus de puissance que les autres, tout le monde en pâtis.

 

  • Le serveur cloud ou VPS (Virtual Private Server) 

Il s’agit d’un compromis entre le serveur dédié et le serveur mutualisé. C’est un serveur dédié qui crée des serveurs plus petits (ce qu’on appelle plus communément des instances). L’avantage comparé aux serveurs mutualisés est que chaque instance possède ses propres limites.

 

L’adresse de votre site : Le nom de domaine

Le nom de domaine est en quelque sorte l’adresse de votre site internet. Il s’agit de la traduction de l’adresse IP du serveur web, en général une succession de chiffres pas facile à retenir, en quelque chose de plus facilement lisible. C’est grâce à cette adresse que le navigateur va pouvoir retrouver le serveur sur lequel sont hébergés vos pages web. 

Un nom de domaine est composé d’une chaîne de caractères : 

Le préfixe (le plus connu est “www”) + le nom de votre business + extension (“.com” ou “.be” par exemple si vous voulez indiquer que vous êtes en Belgique)

Il est important de choisir un nom de domaine simple, et facile à retenir par vos prospects visiteurs. De plus un nom explicite vous permettra d’améliorer  votre référencement naturel (Search engine optimization (SEO).

 

Comment accéder à votre site ?

Lorsque vous voulez accéder à une page web, votre navigateur va alors parcourir Internet jusqu’à trouver le serveur qui la contient. Ce serveur va ensuite envoyer une page sous forme de fichier texte (html, css, javascript, php que vous connaissez déjà) à votre navigateur. Après le chargement de ces fichiers, votre page web apparaît comme par magie !

 

Chapitre 5 : Comment sécuriser un site ? 

Le verrou de votre site : Le protocol HTTPS (HyperText Transfer Protocol Secure) Le certificat SSL (Secure Sockets Layer)

Votre maison peut être fermée à clé pour plus de sécurité. Dans ce cas, elle utilisera le protocol HTTPS couplé au certificat SSL. Le certificat SSL c’est une sorte de clé de vérification pour attester que votre site internet est sécurisé. Cela signifie que les informations transmissent entre le navigateur des visiteurs et le serveur web sont encodées de façon à ce que personne ne puisse les lire entre les deux. 

Un site internet sécurisé peut se reconnaître via le petit cadenas dans la barre d’adresse de votre navigateur.

Néanmoins, même si le certificat SSL reste optionnel, il tend à être de plus en plus utilisé afin de maintenir la sécurité sur les sites visités. Toutefois, sachez que les moteurs de recherche attribuent une plus grande importance aux sites qui disposent d’un certificat. Ces derniers apparaissent donc plus haut dans les résultats lors des recherches. Ainsi, cela permet d’améliorer le référencement.

 

Faites appel à des experts 

Vous avez tout lu, bravo ! Vous pouvez à présent prononcer  html, css, php, javascript sans rougir ! 

Mais, si vous êtes passé directement à la conclusion, on ne vous en veut pas. 

La  conception d’un site, (tout comme celle d’une maison), nécessite les compétences techniques d’une agence web, d’un webdesigner, d’un développeur, d’un webmaster et d’un chef de projet. Bref, d'experts à l’écoute des besoins du client et qui maîtrisent les technologies web  Mais vous savez quoi ? Cela tombe bien, on est juste à un clic de vous :

Et si vous vous demandez combien coûte un site internet, venez lire notre article !

Voir l'article

Partager