Programmation web

Logo langage HTML version 5

La programmation web est la programmation informatique qui permet d'éditer des sites web. Elle permet la création d'applications destinées à être déployées sur Internet ou en Intranet. Ces applications web sont constituées de pages web pouvant prendre différentes formes telles que :

• Les pages « statiques » : Il s'agit de fichiers. Le contenu n'est pas influencé par l'internaute qui le demande, et il évolue seulement avec une intervention manuelle de son code source. Une fois une page statique chargée sur le navigateur du client, des scripts Javascript peuvent permettre de faire évoluer la page via des appels côté serveur par exemple (Ajax).
• Les pages « dynamiques » : son contenu - ou « réponse » - est dynamiquement généré côté serveur au moment de la demande. Il évolue sans que le code du site web soit modifié manuellement. Le contenu est généré selon l'interaction des utilisateurs (paramètres d'URL, saisi de formulaires..) et selon les données chargées par calcul au moment de l'appel (ex: Pour un blog : les articles du jour, contenu de widgets, etc). C'est le cas de la très large majorité des sites web et blogs entre le début des années 2000 et jusqu'au début des années 2020. Parmi les pages dynamiques, on peut également citer les pages - ou « endpoints » - API : Il s'agit d'une forme de pages dynamiques qui n'ont pas vocations à être affichée sur le navigateur du client mais de retourner de la donnée (XML, JSON, ...) ou de permettre l'envoi d'informations côté serveur (authentification, insertion de données, etc).

Pour un internaute qui fait appel à une URL, la page web correspondante, qu'elle soit statique ou dynamique, consiste en du code « côté client » (HTML, CSS, Javascript, ...) qui est interprété par son navigateur (Google Chrome, Firefox, ...) produisant une interface utilisateur. Ce code, qui est renvoyé par un serveur web, peut ou non avoir été généré par du calcul « côté serveur », via des langages de programmation particuliers, pouvant faire appel à des bases de données, des API...

Il existe différentes techniques et différents langages permettant de construire des sites web par l'intermédiaire de serveurs web, que l'on peut classer selon deux principes : des langages de programmation côté client, ou côté serveur. Cette distinction est faite pour séparer les langages « côté serveur » dont le code est exécuté sur le serveur web avant d'arriver sur le navigateur de l'utilisateur, des langages « côté client » dont l'exécution ne nécessite pas de calcul sur le serveur web mais, seulement après le téléchargement de la page, une interprétation par le navigateur de l'utilisateur.

Programmation web côté client

Principe

Lorsqu'un visiteur demande une page en tapant une adresse ou URL, le serveur web lui renvoie le contenu de la page demandée, le plus souvent en HTML, Javascript ou XML.

C'est ensuite le navigateur web qui interprète le contenu retourné, en utilisant ou non des plug-ins qui interprètent certains objets.

La programmation "côté client" (ou développement web frontal) consiste à produire du code (HTML, CSS, Javascript, ...) qui sera interprété par un navigateur web (ou une fenêtre, pour les logiciels de bureau ou applications mobiles) et produira un rendu visuel : une interface utilisateur (UI), et dont certains éléments permettront une navigation, des liens, avec les autres pages (UX).

Les langages de balisage

Langage HTML ou XHTML

Toute page web comprend une base de langage HTML ou XHTML. Il s'agit d'un langage de balisage qui définit essentiellement la structure de la page web (titres, tableaux, paragraphes, listes, etc.).

Initialement, c'est un langage qui permet de créer des hyperliens, à savoir des liens d'un document à un autre ou d'un endroit d'un document à un autre endroit du même document (identificateur de fragment).

Ce langage ne définissait au départ que la structure de la page, mais très vite se sont rajoutées des balises (ou tags) qui s'occupaient de spécifier les caractéristiques de la page web (hiérarchisation du contenu, attributs donnés aux balises...).

Depuis sa version 4, le langage HTML s'accompagne des CSS qui sont des styles se chargeant de la mise en forme et de l'animation de la page.

Le XHTML est une évolution du HTML basée sur XML.

Insertion d'objets en HTML

Pour rendre une page web plus dynamique en HTML, il est possible d'y insérer des objets, grâce aux tags <object>, <img>, <applet> ou <script> par exemple.

Images

Un premier type d'objet sont les images qu'on intègre dans la page web. Les images sont généralement statiques sauf les gifs animés.

Portabilité

Pour autant qu'on se limite aux formats de fichiers standards pour le web (.gif, .jpg ou .jpeg et .png), les images sont sans doute un des objets les plus multiplateforme du web : la majorité des navigateurs web savent afficher les images.

Mise en place

Les images numériques deviennent un média très "grand public" et sont assez aisées à implémenter dans un site web au travers de la balise img.

Multimédia

L'intégration de documents multimédia (son ou vidéo).

Mise en place

Une fois le fichier son ou vidéo produit, le placement dans la page HTML peut se faire, en HTML5, via des balises <audio> ou <video>.

Performance

Les fichiers multimédia sont souvent lourds et donc longs à télécharger. Ils peuvent réduire les performances (temps de chargement) de la page web. Cependant il existe des techniques permettant la lecture en flux (streaming).

Jusqu'au début des années 2010

Animation Flash

Flash (de Adobe Systems - Macromedia) est un programme qui permet de créer des animations dans un format vectoriel propriétaire relativement léger. Le programme génère un fichier avec l'extension .fla qui est le fichier de travail et qui sera 'compilé' en un fichier avec l'extension .swf. Swift est un autre programme générant des fichiers swf hors de la sphère Macromedia.

Dans une page web, une animation Flash (fichier avec extension .swf) peut être intégrée comme partie de la page (une publicité, un menu, ...) ou l'ensemble de la page peut être en flash mais il y aura toujours un squelette HTML.

Flash permet de créer des animations de qualité, permet une certaine interaction avec l'utilisateur grâce au langage de programmation ActionScript (dérivé de ECMAScript comme JavaScript). Les dernières versions de Flash permettent également l'interfaçage avec une base de données.

Adobe Flash Player sera officiellement abandonné en décembre 2020, ainsi que son support dans les navigateurs web.

Applet Java (appliquette)

Il est également possible de créer des petits programmes avec interface dans un langage de programmation comme Java. Ces petits programme sont appelés Applets ou appliquettes. Ils sont complètement autonomes mais éventuellement paramétrables et s'intègrent dans une page web. Ils sont téléchargés avec la page web et exécutés par l'ordinateur client.

Le code est indépendant de la plate forme grâce à la machine virtuelle Java.

ActiveX

Les ActiveX sont une solution de création d'applications développée par Microsoft. Les principes de fonctionnement sont très semblables au fonctionnement des applets. Voir aussi Component Object Model

Limites du HTML

Une page web créée en HTML est totalement statique et n'offre qu'une faible possibilité d'interaction avec le visiteur. Chaque page doit être créée au préalable et doit être manuellement mise à jour.

Le langage HTML est multiplateformes. Tous les navigateurs web reconnaissent le langage HTML de base, seuls certaines balises ou attributs sont propres à certains navigateurs. Les CSS, même s'ils sont standardisés par le W3C, ne sont pas toujours reconnus de la même manière par les différents navigateurs web.

Mise en place

Le langage HTML a l'avantage d'être facile à mettre en place, et ne demande pas de compétences techniques très poussées. Ses pages sont d'un traitement très léger et rapide par le serveur.

XML (eXtended Markup Language)

Le langage de balisage XML peut également servir de base à une page web. Le fichier XML contiendra le contenu de la page web.

Ce fichier peut être lié à un fichier XSL (Feuilles de style XML) qui mettra en forme les données du fichier XML.

La plupart du temps, la page web ne sera pas basée sur un fichier XML natif mais celui-ci sera généré dynamiquement par un des langages de programmation web ci-dessous.

Langages de mise en forme (CSS)

Le CSS (cascading style sheets) est un langage de programmation permettant la mise en forme d'une page web. L'HTML et le CSS sont complémentaires.

Langages de Script

La programmation côté client utilise des langages de scripts. À la différence des langages de programmation côté serveur, ces langages ne sont pas compilés. Ils sont interprétés par le navigateur web du visiteur.

Les langages de script sont utilisés au départ dans le cas de validation de formulaires (champs obligatoires, petits calculs, ...) et dans la création d'animations sur le navigateur de l'utilisateur (menus déroulants, rafraîchissement du contenu sans rechargement de la page, …). Ils permettent toutefois, aujourd'hui, de faire beaucoup plus, tels que la création de jeux vidéo (API Canvas), la création d’environnements sonores (API Web Audio), la communication en temps réel (API RTC), etc.

Dès le milieu des années 2010, la programmation Script est devenue très courante pour le développement d'applications web complètes avec l'arrivée de plateformes logicielles et de frameworks open-source basés sur JavaScript, très documentés et largement recommandées par la communauté des développeurs, tels que le programme Node.js, mais également les frameworks et librairies Vue.js (indépendant), ReactJS (Facebook) ou encore AngularJS (Google).

Il existe historiquement plusieurs langages de script :

• JavaScript, qui est compatible sur tous les navigateurs. Il se base sur le langage normalisé ECMAScript.
• Au début des années 2000, les langages suivants étaient parfois utilisés :
  • le JScript, fort proche du JavaScript est simplement une adaptation de celui-ci par Microsoft.
  • le VBScript est le langage de script développé par Microsoft sur base du Visual Basic. Ce langage n'est interprété que par les navigateurs basés sur ceux développés par Microsoft (soit Internet Explorer et Maxthon). Il est donc peu utilisé sur l'Internet, mais utilisé parfois sur des intranets.
  • le DHTML, qui n'est pas un langage de script mais simplement la combinaison, dans une page web, de JavaScript, de HTML 4 ou de XHTML et de CSS.

Programmation web côté serveur

Principe

Lorsqu'un visiteur demande (ou requête) le chargement d'une URL sur son navigateur, un appel (le plus souvent via HTTP ou HTTPS) est effectué sur le serveur web qui héberge le site correspondant. Le serveur web va ensuite identifier le ou les scripts (écrits dans un langage « côté serveur ») correspondant à cette URL, et demander leur exécution. L'exécution va alors résulter en un contenu HTML, qui va ensuite être expédié en réponse au visiteur, lisible par son navigateur.

La programmation "côté serveur" consiste donc à produire du code dont l'exécution, du calcul et de la récupération de données externes (bases de données, API, ...), va résulter en un contenu qui sera envoyé au client. Ce contenu peut être du code "côté client".

Différents langages et techniques

Javascript

Il est possible de mettre en place un serveur web en utilisant le programme Node.js, exposant des URL, via notamment Express.js, à un projet de code développé en Javascript.

PHP

PHP (PHP: Hypertext Preprocessor) est un langage de script interprété côté serveur. Le code PHP est lu par le serveur et interprété pour produire une page HTML (ou d'autres types de fichier comme des images ou des documents PDF) à chaque fois que la page sera demandée. Ce langage a été créé initialement dans le cadre des logiciels Open Source. De nombreux développeurs ont ensuite profité de l'Open Source pour développer de nombreux modules prêts à l'usage et paramétrables à volonté.

Les modules serveurs de PHP sont implémentés sur les serveurs Apache et Unix mais PHP peut être implémenté sur d'autres plates-formes via des CGI.

La syntaxe, relativement simple, part d'une base de C.

Frameworks notables : Symfony, Laravel

Python

Django : Framework open-source largement répandu pour construire et déployer une application côté serveur en Python.

Ruby

Ruby on Rails : Framework open-source largement répandu pour construire et déployer une application côté serveur en Ruby.

Java

• JSP (JavaServer Pages) : technique développée par Sun Microsystems dans le but de créer des pages dynamiques avec le langage Java. Les JSP permettent d'ajouter du code Java dans la page HTML qui sera interprété par le serveur. On peut distinguer trois ensembles d'instructions JSP :
  • Les instructions de programmation permettent d’insérer des bouts de code Java directement dans la page web, et donnent accès à une grande partie de la bibliothèque de programmation de la version standard de Java (composants JavaBeans, accès aux bases de données via JDBC etc.)
  • Les directives qui permettent de spécifier certaines propriétés de la page, l’inclusion du contenu d’autres fichiers et l’utilisation d’autres classes et bibliothèques de balises personnalisées.
  • Les actions permettent essentiellement d’utiliser des composants JavaBeans existants.
  • Portabilité : très grande portabilité grâce à Java : serveurs Apache mais aussi IIS, etc.
  • Mise en place : utilisation de Java comme langage de programmation.
  • Performance : très variable en fonction de l'implémentation utilisée.
  • Utilisation : tout type de fonctionnalités.

• Servlets : le nom vient d'une analogie possible à faire avec les applets. Il s'agit donc de programmes créés en Java et tournant sur le serveur web. L'exécution du programme génère les pages web renvoyées au client.
  • Langages utilisés : Java.
  • Portabilité : Très grande portabilité grâce à Java : serveurs Apache mais aussi IIS, etc.
  • Mise en place : Utilisation de Java comme langage de programmation.
  • Performance : Très variable en fonction de l'implémentation utilisée.
  • Utilisation : Tout type de fonctionnalités.

C++

Il est possible de développer un site web « côté serveur » en C++, notamment avec des framework tels que Wt, ou CppCMS par exemple.

Techniques Microsoft

• ASP (Active Server Pages) : technique développée par Microsoft à partir de 1996 dans le but de créer des pages dynamiques. ASP permet d'ajouter du code dans la page HTML qui sera interprété par le serveur. La partie ADO (ActiveX Data Object) de ASP permet de se connecter à une base de données.
  • Langages utilisés : VBScript (langage par défaut) ou JScript.
  • Portabilité : La technique est implémentée sur les serveurs web de Microsoft (IIS et PWS).
  • Mise en place : Utilisation de langage de Script donc d'accès relativement aisé (mais se complexifie vite).
  • Performance : Bonne performance surtout si l'on utilise du code compilé (dll).
  • Utilisation : Tout site web dynamique peut être créé en ASP.
  • Dernière version : ASP 3.0.

• ASP.NET : technique développée par Microsoft sur base du Framework.Net. L'évolution est importante par rapport à ASP et les possibilités deviennent quasi infinies. ASP.NET a le gros avantage, par rapport à d'autres techniques, de bien séparer le contenu de la page web, sa mise en forme et la programmation des aspects dynamiques (travail en Code Behind).
  • Langages utilisés : C#, VB.Net, JavaScript.Net... et de nombreux autres langages partageant le Common Runtime Language du Framework.Net.
  • Portabilité : la technique est implémentée sur les serveurs web de Microsoft (IIS 2003).
  • Mise en place : Utilisation de langage de programmation et nécessite donc de bonnes bases en programmation mais le langage importe peu (plusieurs langages possibles). Avec la version 2 (ASP.NET 2.0) et un outil de développement comme Visual Studio, le développement d'applications peut déjà aller très loin sans programmation : beaucoup de contrôles sont gérés par leurs propriétés.
  • Performance : excellentes performances car tout le code est compilé (soit précompilé, soit compilé à la volée).
  • Utilisation : Tout type d'application web peut être créé avec ASP.NET.

ColdFusion

ColdFusion est une technique de création de pages dynamiques développée par Macromedia. Les pages d’application sont des pages web contenant des instructions de programmation écrite à l’aide d’un langage propriétaire, le CFML (ColdFusion Markup Language). Le CFML est un langage simple basé sur des balises dont la syntaxe est similaire à celles du langage HTML mais interprétées par le serveur.

Base de données

Chacun de ces langages, pour permettre de construire des pages dont le contenu et les données sont construits dynamiquement en fonction de l'usage des utilisateurs ou d'autres paramètres externes, peut faire appel à une ou plusieurs bases de données.

Il en existe de nombreuses sortes : dBase, filePro, Firebird/InterBase, FrontBase, IBM DB2, Cloudscape, Informix, Ingres, EDBC, Enterprise Access, Mssql, MySQL, PostgreSQL, SQLite, SQLite3, SQLSRV, Sybase, MariaDB.

Technique Ajax : communication sans rechargement entre « serveur » et « client »

AJAX (Asynchronous JavaScript And XML) est une technique, avec ses avantages et inconvénients, qui combine plusieurs éléments :

• du XHTML pour la structure de la page,
• les CSS pour la mise en forme de la page,
• du JavaScript et le DOM pour la partie dynamique,
• XML, XSLT et XMLHttpRequest pour la manipulation des données (ou d'autres formats de fichiers de données).

Cette technique permet d'effectuer une requête HTTP asynchrone (en parallèle) depuis un client au serveur web (effectuer une action, mettre à jour une information...). Le serveur renvoie la ressource demandée, pouvant contenir des informations ou du code permettant de jour la page HTML.

Depuis le milieu des années 2010, avec l'arrivée de standards plus modernes du web, AJAX (dont la définition est associée à l'API XMLHttpRequest) est progressivement remplacé par de nouvelles fonctions telle que fetch() (API Fetch) qui repose sur un principe de « promesse » et d'appel d'une ressource réseau en tâche de fond. Ou encore les communications serveur vers client comme le protocole Mercure. Le principe reste le même : faire communiquer, sans rechargement, une interface client avec une ressource sur un serveur.

Voir aussi

Articles connexes

• Site web
• Conception de site Web