Programmation web

Un article de Wikipédia, l'encyclopédie libre.
Sauter à la navigation Sauter à la recherche
Logo langage HTML
Logo langage HTML

La programmation web est la programmation informatique qui permet d'éditer des sites web. Elle permet la mise en place d'applications constituées de pages pouvant prendre différentes formes, notamment :

  • Un ensemble de pages « statiques », c'est-à-dire dont le contenu n'est pas influencé par l'internaute qui la demande, et qui n'évolue pas sans une intervention manuelle sur le code.
  • Un ensemble de pages « dynamiques », c'est-à-dire dont le contenu évolue sans que le code du site web ne soit modifié, soit via l'interaction des utilisateurs, soit par du calcul. C'est le cas de la très large majorité des sites web depuis le début des années 2000.

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 technologies et différents langages permettant de construire des sites web par l'intermédiaire de serveurs web, que l'on peut donc 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[modifier | modifier le code]

Principe[modifier | modifier le code]

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 (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[modifier | modifier le code]

Langage HTML ou XHTML[modifier | modifier le code]

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[modifier | modifier le code]

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[modifier | modifier le code]

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[modifier | modifier le code]

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 technologies permettant la lecture en flux (streaming).
Jusqu'au début des années 2010[modifier | modifier le code]

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.

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[modifier | modifier le code]

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[modifier | modifier le code]

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)[modifier | modifier le code]

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)[modifier | modifier le code]

Langages de Script[modifier | modifier le code]

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, tel 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, é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[modifier | modifier le code]

Principe[modifier | modifier le code]

Lorsque 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 technologies[modifier | modifier le code]

Javascript[modifier | modifier le code]

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[modifier | modifier le code]

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[modifier | modifier le code]

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

Ruby[modifier | modifier le code]

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

Java[modifier | modifier le code]

  • JSP (JavaServer Pages) : Technologie 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++[modifier | modifier le code]

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.

Technologies Microsoft[modifier | modifier le code]

  • ASP (Active Server Pages) : Technologie 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 technologie 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 : Technologie 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 technologies, 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 technologie 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[modifier | modifier le code]

ColdFusion est une technologie 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[modifier | modifier le code]

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.

Technologie Ajax : Communication sans rechargement entre « serveur » et « client »[modifier | modifier le code]

Ajax (Asynchronous JavaScript And XML) est une technologie, avec ses avantages et inconvénients[1], 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 technologie 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, celle-ci pouvant contenir des informations ou du code pour mettre à jour la page HTML.

« Bonnes pratiques »[modifier | modifier le code]

Sécurité[modifier | modifier le code]

Tests[modifier | modifier le code]

Travail en équipe[modifier | modifier le code]

Notes et références[modifier | modifier le code]

Voir aussi[modifier | modifier le code]

Sur les autres projets Wikimedia :

Articles connexes[modifier | modifier le code]