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.
Sommaire
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.)
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.
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.
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
Bonjour Christiane et merci pour cet article qui vulgarise assez bien le fonctionnement de sites web.
C’est important d’ « éduquer » les clients..
En revanche, un point sur lequel je souhaite rebondir : vous dites que le CMS permet une maintenance simple, je pense que c’est faux.
Cela demande à minima des connaissances en gestion des CMS. Qui plus est WordPress est une solution excellente mais dont les plugins buguent régulièrement entre eux (car fait par des développeurs indépendants qui n’ont pas travaillé de concert à la compatibilité de leurs plugins).
Chez ABVSM nous sommes sûrs que la meilleure solution reste le sur-mesure, car le développeur peut rapidement corriger un bug en touchant au code..
Belle journée à vous 😉
Killian Gorin – ABVSM Productions
Bonjour Killian. Merci pour votre commentaire.
Chacun prêche pour sa chapelle 🙂 Vous parlez manifestement au nom d’une agence web qui vend sans doute des sites sur mesure. Si vos clients ont les moyens de se payer ce genre de site, tant mieux pour votre agence !
Pour ma part, je m’adresse souvent à de petites PME ou à des auto-entrepreneurs qui recherchent des solutions professionnelles peu onéreuses, qu’ils pourront ensuite gérer en interne.
L’inconvénient du sur mesure est de lier une entreprise à un fournisseur. Ce n’est pas ma philosophie (je ne me considère d’ailleurs pas comme une agence web).
Si j’ai choisi WordPress, c’est parce qu’il dispose d’une communauté en ligne très active qui permet de trouver assez rapidement réponse à la plupart de ses questions.
Quant aux éventuels problèmes causés par les plugins, je vous assure qu’en les choisissant avec soin, ils posent peu de problèmes. C’est en tout cas mon expérience.
Je vous souhaite une belle année 2019, pleine de nouveaux projets et de succès.
Bonjour Christiane,
Oui je prêche en effet pour ma paroisse.
Néanmoins ce n’est pas une critique de votre travail ou même une pub sans fondement pour mon agence.
Je trouve que WordPress est une très bonne solution que j’utilise moi-même à titre perso.
Je souhaitais juste apporter un point de vigilance à des bugs qui peuvent être problématiques sur le CMS..
Mais je reste convaincu de l’intérêt de l’outil en tant que tel. Surtout sur un simple site vitrine, c’est idéal.
Pour des projets un peu plus complexes, je recommande plutôt le sur-mesure et le codage « en dur » pour éviter de mauvaises surprises…
Je vous souhaite également tout le succès possible 😉