Un site web, comment ça marche ?

Vous êtes ici:|||Un site web, comment ça marche ?

Tout site web se compose d’un ensemble de couches techniques, esthétiques et fonctionnelles.  Chaque strate, visible ou non, a son importance et contribue au développement d’un site efficace.

Un site web se construit comme une maison

Créer et développer un site web, c’est un peu comme construire une maison :

  • Un architecte conçoit les plans en fonction des besoins et souhaits du maître d’œuvre (mais celui-ci peut aussi acheter un maison clé en main dont il n’aura pas défini lui-même toutes les caractéristiques).
  • Un entrepreneur construit l’édifice en choisissant les meilleurs matériaux et accessoires (pour créer un site web dynamique, on privilégie l’utilisation d’un CMS ou Content Management System)
  • Différents corps de métier habillent et mettent en valeur le bâtiment brut (dans le cadre d’un projet web on pense au webdesign, à l’ergonomie, au référencement ou à la gestion des contenus).
  • Enfin, vous aurez à cœur d’améliorer et entretenir votre habitation pour qu’elle dure longtemps.

Le résultat final et le niveau de finition dépendront bien sûr du budget alloué à l’ensemble du projet mais aussi de la qualité de l’exécution de chaque étape du projet.

Attention au jargon des pro. En discutant avec les différents intervenants de votre projet web, vous aurez sans doute l’impression, tout comme lors d’une visite de chantier, que les professionnels vous parlent chinois. Pour éviter cela, je vous propose de passer en revue quelques concepts clés de la construction d’un site web.

Côté client et côté serveur

Un site web nécessite deux composants clés pour fonctionner : un client et un serveur web.

  • Du côté client on retrouve les navigateurs web et tout dispositif utilisé par les internautes pour afficher et interagir avec un site web. De ce côté client, on parle de développement Front-End. Les langages qui y sont utilisés sont un mix de HTML, CSS et JavaScript. C’est la partie émergée de votre site web.
  • Avec le côté serveur, on entre dans les coulisses de votre site web. C’est là que sont stockés tous les fichiers et données associés à l’affichage d’un site web. On parle du Back-End qui se compose au minimum d’un serveur, d’une application et d’une base de données. La programmation de cette partie repose sur des langages de tels que PHP, Ruby, Python, Java, SQL ou .Net.

Clients et serveurs sont connectés au réseau Internet et communiquent entre eux.

Les 4 couches techniques d’un site web

Tout site web repose sur 4 couches essentielles : les données du côté serveur et un trio incontournable du côté client : structure, style et comportement.  C’est le soin apporté au développement de chacune de ces couches qui assurera la qualité du site.

Les données brutes (data)

Un site internet repose sur un ensemble de données brutes stockées dans des bases de données, voire dans des fichiers XML traités côté serveur chaque fois que quelqu’un veut y accéder. Ces données constituent les fondations de votre construction web. Si elles sont médiocres, un joli design ou une technique impeccable n’y changeront rien : votre site sera peu performant.

Cette couche invisible mais essentielle implique un système de gestion de base de données (le plus souvent MySQL) et un langage de programmation, généralement PHP (utilisé par plus de 75% des sites web) qui permet au serveur de gérer les pages en fonction de la situation.

La structure

Toute page web repose sur une base HTML (HyperText Markup Language), c’est-à-dire un ensemble d’instructions que n’importe quel navigateur web est capable de comprendre.

Ce langage universel structure sémantiquement et logiquement les données brutes et permet de mettre en forme le contenu des pages, d’inclure des ressources multimédias, des formulaires et des programmes informatiques.  Il est utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (CSS).

Le style (design)

La couche de style définit la manière dont les données sont présentées. C’est l’aménagement intérieur de votre maison web.  Le style dicte la façon dont un document HTML structuré sera vu par les visiteurs d’un site. On parle de couche CSS (Cascading Style Sheets). C’est elle qui permet de modifier la présentation et la mise en page des éléments X/HTML : couleur, taille, police de caractères, mais aussi position sur la page, largeur, hauteur, empilement. Elle peut également inclure des requêtes modifiant l’affichage en fonction de tailles d’écran et des périphériques.

Les bons concepteurs soulignent toutefois que le travail sur le style ne peut aboutir que si la couche structurale est correctement configurée. Cela renforce donc l’idée que la structure est indispensable pour que le style soit efficace. Or, trop souvent c’est surtout le design d’un site qui retient toute l’attention.

Le comportement (interaction)

Le troisième calque indispensable touche au comportement. C’est lui qui permet de modifier une page en fonction d’un ensemble de conditions. L’objectif de cette troisième couche est d’améliorer l’expérience utilisateur.  À ce stade, on teste comment chaque page interagit avec les autres et on détermine comment le site réagit aux actions de l’utilisateur sur la page.  Javascript est le langage le plus couramment utilisé pour cette couche. En gros il permet de créer des variables et des fonctions qui pourront influencer codes html et CSS.

Il permet de créer des réactions en réponse à des événements sur la page ou à des actions de l’utilisateur (clic sur un lien pour afficher un texte masqué, défilement d’un compteur, apparition d’actualités, etc.)

HTML vs CSS vs JS

Source : Biblipole

Il est important de bien séparer les trois couches HTML5 + CSS3 + JS : la structure est confiée au HTML, les styles visuels aux CSS et les comportements à tous les scripts utilisés par le site. Pourquoi ?

  • Pour optimiser le partage des ressources : en cas de modification d’un fichier CSS, chaque page qui l’utilise sera modifiée.
  • Pour améliorer la vitesse de chargement : un script ou une feuille de style téléchargé une première fois, est mis en cache par le navigateur web, ce qui améliore les performances de la page.
  • Pour le référencement : Un site qui a une séparation claire de style et de structure est susceptible d’avoir un meilleur rendement pour les moteurs de recherche.
  • Pour l’accessibilité : en cas de séparation nette entre style et structure, les logiciels comme les lecteurs d’écran peuvent plus facilement traiter le contenu à partir de la couche de structure.

Le CMS ou la gestion du contenu

De très nombreux sites utilisent désormais un CMS (Content Management System) ou système de gestion de contenu. Il s’agit d’un système prêt à l’emploi, qui permet de créer rapidement un site dynamique ainsi que l’interface d’administration pour gérer son contenu. Composé d’un module d’édition de texte, associé à un module de téléchargement d’images et/ou de pièces jointes, c’est la solution la plus flexible pour mettre à jour un site, sans perturber l’organisation générale du site.

Plus besoin de prestataire extérieur pour mettre à jour son site, il suffit de se connecter à l’interface de gestion et de modifier ou ajouter du contenu. Les pages créées seront instantanément prises en compte et visibles sur le web.

A lire : Quel CMS choisir pour un contenu web au top

WordPress est le CSM le plus populaire (il propulse 25% des sites web de la planète). Il permet de créer rapidement un site très flexible et évolutif et d’en gérer le contenu en toute autonomie.

By | 2018-08-17T09:30:38+00:00 18 octobre 2017|Categories: Web|1 commentaire

Un commentaire

  1. Kelvin GUEZOU 2017-10-22 à 8 h 46 min ␣- Répondre

    Bonjour Christiane,

    Merci beaucoup pour cet article. A notre époque, il devient nécessaire d’être visible en ligne pour chaque projet, commerçant et artisan. Cette nécessité grandit chaque jour.
    Il existe 2 manières d’être présent online (sur internet) :
    – Passer par un annuaire (équivalent au page jaune) ou un site existant (journal, blog, etc.)
    – Créer sa propre vitrine en ligne (site internet)

    Il est important d’avoir de bonnes notions, même si on ne connait pas exactement comment ça fonctionne. Pour illustrer ce que je viens de dire, prenons l’exemple d’une voiture. Dans le fond, il vous suffit de tourner la clé dans le contact, manoeuvrer 3 pédales (pour les anciennes) et de tourner le volant !
    Mais si l’on ne sait pas remettre du liquide de frein, changer les essuies glaces, remettre du lave glace ou que l’on ne sait pas ce que signifie ce voyant ROUGE allumé depuis 2 semaines… Que se passe-t-il ? Des risques de pannes et d’être dépassé pour la moindre question.

    Dans cet article, vous présentez les sites internet de la même manière, ce qui est vraiment bien. Les ingénieurs informatiques ont parfois des termes, des langages, des idées que leurs clients ne connaissent pas. Le fait que chacun connaisse les rudiments du web permet d’être déjà 50 % autonome, un gain de temps et d’argent pour le moindre besoin. Et un gain énorme pour discuter avec un prestataire si besoin.

    Merci pour cette introspection du monde du web ! Au passage : WordPress est une excellente référence pour rentrer dans la matière.

    Excellente journée !
    Kelvin GUEZOU

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Un site web, comment ça marche ?

Send this to a friend