Le dé­ve­lop­pe­ment Web moderne : bases et outils

Les dé­ve­lop­peurs disposent de nombreux outils pour intégrer du contenu dynamique dans leurs projets Web, dans l’idée de créer des sites sur mesure adaptés à leurs uti­li­sa­teurs. Pour ce faire, un hé­ber­ge­ment Web pro­fes­sion­nel disposant des res­sources adéquates pour le dé­ve­lop­pe­ment Web est né­ces­saire.

Les bases tech­niques d’un site Web

La condition à toute présence sur le Web est de disposer d’un serveur adapté. En règle générale, les offres proposées par les four­nis­seurs d’hé­ber­ge­ment Web incluent souvent des services comme la ré­ser­va­tion d’un nom de domaine propre, de la mémoire vive allouée par un serveur, des bases de données et tous les outils né­ces­saires pour le dé­ve­lop­pe­ment Web. Bien entendu, vous pouvez aussi fournir vous-même les bases tech­niques.

Les domaines

Chaque projet Web a un nom de domaine, c’est-à-dire une adresse Internet unique qui lui est attribuée. Ce nom de domaine fait partie des com­po­sants de base d’un site Web. Les adresses Internet suivent des principes stricts de structure hié­rar­chi­sée du système des noms de domaine (DNS) et sont composées de la manière suivante :

• un Top Level Domain, en français domaine de premier niveau générique. Il s’agit de la partie finale de l’adresse, par exemple .fr ;
• un nom de domaine choisi librement (Second Level Domain, soit un domaine de deuxième niveau), c’est-à-dire ce qui vient avant le « . », comme le mot « exemple » si l’on choisit l’adresse : www.exemple.fr ;
• un sous-domaine fa­cul­ta­tif (qui peut venir avant le SLD, comme ici « blog » dans l’adresse blog.exemple.fr).

L’espace Web

Chaque site Web est composé de données mises à dis­po­si­tion sur un serveur Web pour être chargées sur Internet. C’est pour cela que les packs d’hé­ber­ge­ment Web com­pren­nent toujours un certain espace de stockage pour les documents HTML, les feuilles de style, les images, les vidéos, les bases de données et tous les autres éléments cons­ti­tu­tifs d’un site Web. Le transfert de ces données est gé­né­ra­le­ment effectué par FTP (File Transfer Protocol) ou SFTP (SSH FTP) chiffré à l’aide d’un programme FTP adapté comme FileZilla ou WinSCP. Pour la sca­la­bi­lité du projet, il est important que l’espace Web puisse être étendu à tout moment, si né­ces­saire.

La base de données

Les sites Web modernes font souvent appel à des bases de données pour fournir du contenu de manière dynamique et gérer les données des uti­li­sa­teurs. Au lieu de pages HTML statiques stockées sur un serveur, les projets basés sur des bases de données génèrent dy­na­mi­que­ment les pages Web à chaque con­sul­ta­tion. En fonction de l’objectif, les dé­ve­lop­peurs Web utilisent des bases de données re­la­tion­nelles (SQL) ou NoSQL.

Les bases de données re­la­tion­nelles comme MySQL, MariaDB ou Post­greSQL stockent les in­for­ma­tions sous forme de tableaux et les relient entre elles par des clés uniques (ID). Cela convient par­ti­cu­liè­re­ment aux ap­pli­ca­tions qui né­ces­si­tent des relations clai­re­ment définies entre les données, comme les comptes uti­li­sa­teurs, les commandes ou les ca­ta­logues d’articles. Les bases de données NoSQL telles que MongoDB, Firebase ou Redis offrent des ajus­te­ments de schéma dy­na­miques, ce qui les rend par­ti­cu­liè­re­ment in­té­res­santes pour les ap­pli­ca­tions Web évo­lu­tives, né­ces­si­tant des per­for­mances élevées, notamment en temps réel.

Le serveur Web

Selon le modèle d’hé­ber­ge­ment choisi, le serveur peut être mutualisé (Shared Hosting) ou dédié (matériel propre, serveur virtuel ou Cloud). De plus, les projets Web im­por­tants utilisent souvent des tech­no­lo­gies com­plé­men­taires comme le Load Balancing et les Content Delivery Networks (CDN) pour améliorer les per­for­mances. Les ap­pli­ca­tions modernes s’appuient également sur des tech­no­lo­gies de con­te­neu­ri­sa­tion telles que Docker et Ku­ber­netes pour fournir des ap­pli­ca­tions serveur flexibles et évo­lu­tives.

Le terme « serveur Web » désigne aussi le composant logiciel central qui délivre les sites Web et les ap­pli­ca­tions Web. Les serveurs Web traitent les requêtes des na­vi­ga­teurs via le protocole HTTP(S) et renvoient le contenu cor­res­pon­dant. Les solutions les plus connues sont Apache, NGINX et LiteSpeed.

Les prin­ci­paux outils de la pro­gram­ma­tion Web moderne

Une fois que les bases de votre projet Web sont en place, vous disposez de plusieurs options pour créer votre site. Cela va du logiciel de site Web intuitif avec des pos­si­bi­li­tés de con­cep­tion limitées au code source écrit par l’uti­li­sa­teur, aux sites Web plus flexibles grâce à des CMS, ou encore à ceux dont le code source a été développé in­dé­pen­dam­ment. Les éditeurs de sites Web utilisent souvent le principe du What You See Is What You Get (sig­ni­fiant lit­té­ra­le­ment en français « ce que vous voyez est ce que vous obtenez »), pratique pour les débutants sans ex­pé­rience préalable en pro­gram­ma­tion Web. Enfin, les dé­ve­lop­peurs s’assurent une liberté maximale dans la création de leur projet en pro­gram­mant avec l’aide d’un éditeur (souvent avec un framework). Mais il est pour cela né­ces­saire de maîtriser les bases de la pro­gram­ma­tion Web et des langages tels que HTML, CSS, Ja­vaS­cript ou PHP, bien que des solutions pratiques comme du code prêt à l’emploi ou des outils pour la pro­gram­ma­tion par IA sim­pli­fient désormais con­si­dé­ra­ble­ment le travail.

HTML

HTML (Hypertext Markup Language) structure de manière basique l’écriture de contenus digitaux avec des balises de formatage (balises et éléments meta). De cette manière les éléments de texte, les titres, les gra­phiques ou encore les hy­per­liens peuvent être mis en place et c’est le code source qui constitue la structure d’un site Web. Par exemple, un site Web statique est tout sim­ple­ment composé d’une sélection de documents HTML reliés entre eux. Le standard actuel, HTML5, étend le langage de balisage aux éléments audio et vidéo.

CSS

La pré­sen­ta­tion des contenus est définie par le langage de formatage CSS (Cascading Style Sheets) : il s’agit du langage standard pour les documents HTML, qui permet leur mise en page. Les dé­ve­lop­peurs Web utilisent CSS pour attribuer des règles qui per­met­tront à un na­vi­ga­teur d’in­ter­pré­ter des éléments définis dans le code en éléments visuels concrets qui seront re­pré­sen­tés sur un site Web. CSS3, le standard actuel, comprend des fonc­tion­na­li­tés per­met­tant de struc­tu­rer la mise en page, les couleurs, la ty­po­gra­phie, les effets d’ombre ou encore les ani­ma­tions.

Ja­vaS­cript/Ty­peS­cript

Les in­ter­nautes in­te­ra­gis­sent avec les sites Web modernes via des champs de saisie, des menus en accordéon ou encore des dia­po­ra­mas. Ja­vaS­cript et son extension Ty­peS­cript sont utiles pour intégrer des contenus dy­na­miques à une page HTML. Ces langages de script élar­gis­sent la structure de base HTML et CSS car ils per­met­tent d’intégrer, de modifier ou de mettre à jour des éléments dy­na­miques.

PHP

Si les pages Web statiques sont toujours prêtes à être envoyées via le serveur Web, il n’en va pas de même pour les pages Web dy­na­miques, qui ne sont générées que sur demande du na­vi­ga­teur Web. Ce sont les langages de script tels que PHP qui per­met­tent cela. Une pro­gram­ma­tion PHP est in­ter­pré­tée côté serveur. Au lieu de fournir le code source des sites Web dy­na­miques di­rec­te­ment au na­vi­ga­teur, le serveur Web transmet le fichier à un in­ter­prète PHP. Celui-ci génère le site Web demandé, souvent sur la base d’in­for­ma­tions stockées dans des bases de données, et le renvoie au serveur Web, d’où la sortie de l’in­ter­pré­teur est alors envoyée au na­vi­ga­teur. Les autres langages de script utilisés pour dé­ve­lop­per des sites Web dy­na­miques sont Perl et Python.

Les fra­me­works

Le dé­ve­lop­pe­ment Web moderne fait de plus en plus appel aux fra­me­works, qui ac­cé­lè­rent les processus de dé­ve­lop­pe­ment et offrent des struc­tures éprouvées. Les fra­me­works frontend comme Angular ou React fa­ci­li­tent la création d’in­ter­faces uti­li­sa­teur dy­na­miques et in­te­rac­tives. Ils per­met­tent une ar­chi­tec­ture basée sur des com­po­sants et amé­lio­rent les per­for­mances grâce à des DOM virtuels.

Les fra­me­works backend tels que Flask ou Django vous aident dans le dé­ve­lop­pe­ment côté serveur en four­nis­sant, entre autres, le routage, les con­nexions aux bases de données, la gestion des API ainsi que les fonctions de sécurité. La com­bi­nai­son de fra­me­works frontend et backend permet de créer des ap­pli­ca­tions Web évo­lu­tives avec un temps de dé­ve­lop­pe­ment optimisé.

Les API

Les API (Ap­pli­ca­tion Pro­gram­ming In­ter­faces) sont des in­ter­faces per­met­tant aux projets Web de com­mu­ni­quer avec d’autres ap­pli­ca­tions. Ainsi, un site Web peut récupérer des données d’un serveur ou se connecter à des services tiers tels que des four­nis­seurs de paiement ou des services de car­to­gra­phie. Il existe dif­fé­rents types d’API, notamment REST et GraphQL, qui four­nis­sent des données dans un format défini. De nom­breuses ap­pli­ca­tions Web modernes utilisent des API pour le contenu dynamique ou la mise en œuvre de fonc­tion­na­li­tés sup­plé­men­taires.

Le Webdesign res­pon­sive et l’op­ti­mi­sa­tion des per­for­mances

Les sites Web modernes doivent s’adapter de manière flexible aux dif­fé­rentes tailles d’écran. Le Webdesign res­pon­sive veille à ce que le contenu s’affiche de manière optimale sur les smart­phones et tablettes autant que sur les or­di­na­teurs de bureau. Cette technique utilise pour cela des mises en page flexibles, des Media Queries (CSS) et une approche de con­cep­tion mobile-first. Toutefois, en fonction du projet, il peut être utile de se demander quelle approche est la plus adaptée entre le Webdesign res­pon­sive classique, un site mobile ou encore une ap­pli­ca­tion.

Outre l’affichage, le temps de char­ge­ment est également crucial. L’op­ti­mi­sa­tion des per­for­mances est l’une des dis­ci­plines les plus im­por­tantes du dé­ve­lop­pe­ment Web moderne. Elle comprend entre autres les tech­niques suivantes :

• La com­pres­sion d’images
• La mise en cache
• La com­pres­sion de CSS
• La mi­ni­fi­ca­tion de Ja­vaS­cript/Ty­peS­cript
• Le lazy loading

Les mesures de sécurité et les tests

La sécurité est un aspect central d’un projet Web réussi, qui doit être pris en compte dès le dé­ve­lop­pe­ment Web. Les sites doivent être protégés par un chif­fre­ment SSL/TLS, des mots de passe sécurisés et des mé­ca­nismes de pro­tec­tion contre les attaques, par exemple de type XSS ou in­jec­tions SQL. Des mises à jour et des sau­ve­gardes ré­gu­lières sont également es­sen­tielles.

Les tests sont également une étape cruciale pour vous assurer de la qualité de votre projet, en par­ti­cu­lier si vous pro­gram­mez vous-même un site complexe. Dif­fé­rents outils de test sont dis­po­nibles pour le dé­ve­lop­pe­ment Web. Si seuls certains éléments doivent être testés, vous pouvez avoir recours à des tests unitaires. Il existe à ces fins dif­fé­rents cadres de test, comme PHPUnit pour PHP ou JSUnit pour Ja­vaS­cript.