Programmation web

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).

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.

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.

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.

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).

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[1], 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

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.

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.

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.

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.

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.

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".

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: 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

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

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

• 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.

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.

• 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 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.

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.

Aujourd'hui, le codage est devenu un métier et un travail d'équipe, beaucoup sont les entreprises qui vivent grâce aux créations de sites web ou de jeux vidéo. Dans les entreprises ou les boîtes, souvent chaque personne a un rôle différent dans le codage, c'est-à-dire une personne qui va s'occuper du design, une autre des interactions, des bugs ou autres.

• Site web
• Conception de site Web

• Portail de la programmation informatique
• Portail d’Internet