Lilapuce
 

supports (lundi 19 janvier 2009)

Page web : les technologies en jeux [1]

Le navigateur

Le nombre d’actions qu’il est possible d’effectuer à l’aide d’un navigateur Web semble être sans limites : gérer des messageries électroniques, consulter et contribuer au contenu d’une encyclopédie de type wiki, lire et administrer un blog, écouter des radios, regarder la télé, échanger des fichiers, acheter toutes sortes d’objets selon de multiples modalités (enchères, achat immédiat, achat groupé, etc.), réserver des billets d’avion, préparer un itinéraire sur une carte interactive, visiter le Louvre en réalité virtuelle, utiliser un tableur ou un gestionnaire d’images en ligne, etc.

Quel rôle joue le navigateur dans ces diverses processus ?

Format HTML

Eh bien mieux vaut considérer que notre fidèle fureteur n’occupe qu’une place – certes – essentielle mais relativement mineure dans la gestion de ces pages époustouflantes : une simple visionneuse, ni plus ni moins.

Ne l’oublions pas, le navigateur est un programme, installé sur votre machine, dont l’objet ne consiste, à la base, qu’à afficher des contenus relativement limités : textes, tableaux, images, formulaires.

Plus précisément, le navigateur web est d’abord conçu pour interpréter un certain type de données : des fichiers au format HTML, qui, comme nous le verrons, se limite à décrire l’organisation générale et le contenu d’une page. L’hypertexte représente le seul niveau d’interactivité pris en charge directement par le format HTML.

Les plugins

Afin de contourner ces limitations, les navigateurs intègrent généralement des modules complémentaires, sous la forme de petits programmes additionnels appelés (plugins). Cela permet de « jouer » à l’intérieur de la fenêtre du navigateur divers formats de fichiers multimédia : Flash (animations), RealPlayer (vidéo), VRML (réalité virtuelle), machine virtuelle Java, etc.

Il est ainsi possible d’ajouter au code HTML des instructions qui embarquent ces fichiers multimédia. Dans ce cas, les plugins interviennent de façon autonome comme de petits programmes, à l’intérieur du navigateur.

Javascript

De plus, tous les navigateurs sont équipés d’un interpréteur Javascript. Cela apporte un niveau d’interactivité bien supérieur à l’affichage « statique » des contenus d’une page Web. Par exemple, avec du Javascript intégré dans du code HTML, il est possible de prévoir que le navigateur retourne un message d’alerte si un visiteur remplit un formulaire avec des caractères erronés (et alors le message ne sera pas expédié). Là encore, le code Javascript est conçu comme module additionnel au HTML, mais cette fois-ci pour intervenir directement au niveau du navigateur afin de déclencher certaines actions en fonction des événements provoqués par l’utilisateur.

Ressources en ligne et ressources locales

Plugins, Javascript : voilà qui devrait quelque peu booster notre bon vieux navigateur et lui permettre de jouer un autre rôle que celui d’une simple visionneuse de contenu en ligne.

Eh bien non, parce que même avec toutes ces ces ressources supplémentaires, le navigateur ne sera jamais chargé, par exemple, de gérer et traiter les diverses actions sur un espace privé de compte bancaire.

De même, la plupart des exemples cités ,ci-dessus, en introduction ne pourraient fonctionner sans l’aide de ressources installées sur le serveur web (l’ordinateur de l’hébergeur, où sont stockés les éléments du site web).

De fait, les sites Web s’apparentent à de véritables programmes en ligne, dont l’essentiel du contenu est recalculé en permanence par le serveur avant de s’afficher sur le navigateur.

Autrement dit, il est important de distinguer deux types de ressources dans le traitement des pages web :

- « ce qui se joue en local », au niveau du navigateur : affichage statique de pages, gestion des liens hypertextes, choix d’actions prévu par du Javascript, embarquement de fichiers multimédia (plugins)...

- « ce qui se joue en ligne », côté serveur ; l’information étant alors construite au niveau du serveur avant de s’afficher dans le navigateur.

Nous allons maintenant passer en revue quelques technologies de façon un peu plus précise. Le but du jeu n’étant pas d’en faire une description exhaustive, mais d’essayer de fournir quelques repères indispensables pour comprendre comment fonctionnent (de façon très générale) la plupart des sites web.

HTML et CSS

Le terme « HTML » fait référence à un format générique qui a connu quelques évolutions mais qui est désormais stabilisé (je vous passe le détail des diverses spécifications). Quelle que soit la version, on se heurte toujours aux mêmes limitations du format HTML :

- Le HTML se réalise sous la forme d’un fichier texte, portant l’extension .html lequel est interprété par le navigateur. Vous pouvez l’éditer dans un éditeur spécialisé (éditeur HTML, ou éditeur de programmation) ou dans un simple éditeur texte (Bloc-notes de Windows, par exemple).

- HTML est conçu pour structurer un document en différentes parties logiques (en-tête et corps de document, par exemple), lesquelles répondent théoriquement à des normes strictes.

- On peut insérer des éléments standardisés tels que des titres, des paragraphes, des listes, des tableaux, des champs de formulaires, etc.

- Une instruction du HTML est prévue pour insérer des images dans la page Web (3 formats d’image sont pris en charge par les navigateurs : JPG, PNG et GIF). En fait, cette instruction permet d’indiquer l’adresse web où se trouve le fichier image.

- Toutes les instructions HTML sont rédigées sous la forme de balises. Il s’agit d’éléments prédéfinis qui permettent de structurer votre document. Par exemple le code <h1>Gare au gorille</h1> indique qu’il s’agit « d’un titre de niveau1 » (comme, d’ailleurs, sur votre traitement de texte).

<h1> est la balise ouvrante ; </h1> est la balise fermante. L’instruction sera interprétée par le navigateur de la façon suivante (ci dessous l’apparence du titre « Niveau 1 » sur le présent site) :

Gare au gorille

- Caractéristique importante : comme son nom l’indique (Hypertext Markup Language – langage de balises hypertextes), le HTML est conçu pour traiter les liens hypertextes, le principal mode de navigation d’une page à une autre sur le Web.

- Il est donc possible d’intégrer divers formats de fichiers « propriétaires » non définis comme standards : les fichiers multimédia, pris en charge par des plugins, précisément. On utilisera alors une instruction générique permettant d’inclure dans la page des « objets embarqués » ; à charge pour le navigateur (comme nous l’avons vu) de passer le relais à des applications tierces pour traiter l’exécution de ces formats.

- Dernier aspect essentiel : afin de dépasser les limites du HTML, il existe une balise permettant d’insérer dans la page (ou de relier à cette dernière) des instructions écrites dans d’autres langages informatiques, notamment le Javascript.

Donc, HTML = structuration logique des pages.

Qu’en est-il, alors, de l’apparence détaillée : je veux un titre de telle couleur rouge ; j’aimerais que ma colonne de gauche soit finalement plus grande ; à cet endroit, j’aurai un menu horizontal avec des liens en vert qui passe au gris au survol, etc.

Est-ce que c’est le HTML qui prend en charge les options de mise en forme ?

Réponse : oui… mais enfin, non et encore NON !

Là, il y a un réel problème ; je vais essayer de faire vite : par exemple sur un éditeur HTML vous pouvez effectivement intégrer directement des instructions de mise en forme, tel que vous le feriez avec votre traitement de texte : vous sélectionnez votre titre et paf vous cliquez sur le bouton « couleur » pour le passer en rouge.

Oui, c’est possible, mais il ne faut pas utiliser ça !

En fait, cette possibilité d’intégrer des options de mise en forme dans le code HTML date d’une période où les navigateurs ne pouvaient pas réellement interpréter les styles. Ce n’est plus le cas depuis plusieurs années !

Utilisez donc plutôt les CSS (Cascading Style Sheet) pour gérer vos styles indépendamment des codes HTML, sur un seul fichier et de façon centralisée ! Je ne rentre pas dans les détails mais, CSS c’est vraiment mille fois plus pratique, productif, respectueux des standards, etc. Bref, grâce au CSS, vous serez épanouis et aimés sur le Web ! La prise en main des CSS n’étant pas, toutefois, d’une simplicité à toute épreuve, je vous propose de consulter ces quelques exercices et supports consacrés à ce sujet.

Donc pour résumer :

- HTML pour réaliser des gabarits, la structuration générale des pages, la façon dont elles se décomposent en parties logiques (titre, encadré, etc.).

- CSS pour paramétrer de façon centralisée les options de mise en forme précises des tous les éléments qui constituent les pages Web (dimension, couleur, police, alignement, etc.)

Bien entendu, il est tout à fait envisageable de réaliser un site en employant uniquement ces deux technologies de base (HTML+CSS). Dans ce cas, vous devrez réaliser vos pages entièrement, les unes après les autres, un peu comme vous le faîtes pour rédiger vos courriers sur votre traitement de texte.

Chaque page prévue pour s’afficher dans le site étant alors entièrement construite à l’avance : à la fois les éléments communs à toutes les pages (logo, menus, etc.) ainsi que le contenu spécifique à chaque page. On parle alors de site « statique ».

L’intérêt d’un site statique (à base de HTML et CSS) réside essentiellement dans le fait qu’il s’agit de technologies relativement accessibles. Comme nous l’avons déjà indiqué, HTML n’est pas un langage de programmation, contrairement, par exemple à Javascript ou PHP (des langages nécessitant une culture de programmation qui ne s’improvise pas). Une personne curieuse et ayant un minimum de culture pratique de l’informatique pourra assez rapidement réaliser quelques pages statiques HTML et les mettre en ligne.

Il y a une dizaine d’années, la plupart des sites persos étaient réalisés en pur HTML. C’est une excellente méthode pour apprendre des techniques plus complexes. Dans mon atelier du lundi soir, beaucoup de projets ont été réalisés en simple HTM + CSS.

Mais disons-le clairement : aucun site moderne, aucun blog n’est plus construit de nos jours en pages statiques.

Cette disparition des « pages persos à la mode de papa » tient essentiellement à deux raisons :

- Comme nous l’avons constaté, le HTML n’est pas prévu pour prendre en charge les fonctionnalités qu’exigent le type de sites auxquels nous nous sommes habitués (gestion de comptes, forums, interface de mise à jour en ligne, flux RSS, etc.). Plus personne, à moins de passer pour un attardé (bloody punk), n’oserait aujourd’hui recommander à son entourage d’aller visiter son site perso construit à base de HTML 3,2 avec frame, animations GIF ringardes et papier peint criard... Non, maintenant ce serait plutôt : Comment s’ fait... t’as pas encore ton FaceBook, toi ?

- Plus fondamentalement, dès lors que le site prend un minimum de consistance (nombre de pages et fréquence de mise à jour), la maintenance de pages statiques devient extrêmement lourde et pénible à mettre en œuvre. Nous verrons que les technologies permettant de gérer des sites dynamiques permettent – à première vue - d’améliorer cela.

Mais avant d’aborder les technologies « côté serveur », revenons encore un instant sur les autres ressources mises en jeu par le navigateur.

Javascript - AJAX

Reprenons l’exemple du formulaire en ligne : le HTML permet de définir les paramètres d’affichage génériques du formulaire, mais il faut l’aide du Javascript pour vérifier si tout est correctement rempli avant de passer à l’étape suivante, par exemple : l’affichage avant l’envoi, l’expédition proprement dite et la confirmation au visiteur que le message a bien été envoyé (toutes ces opérations étant généralement effectuées, comme nous le verrons, par encore d’autres ressources que le Javascript).

Une des façons d’utiliser le Javascript consiste à lui faire jouer le rôle d’un petit programme qui décompose, étape après étape, les actions possibles du visiteur en fonction du contenu de la page. Le programmeur (celui qui réalise la page) prévoit ainsi à l’avance, différents comportements du visiteur et intègre au fichier HTML le code Javascript qui permettra de fournir à chaque fois l’événement du navigateur adapté au contexte.

Par exemple : si le visiteur clique sur le bouton « Envoyer » alors que le champ de formulaire « e-mail » est vide, alors je lui envoie tel message d’erreur.

Il est très important de rappeler que le Javascript, étant un langage spécialement - et uniquement - prévu pour le navigateur, est toujours interprété « en local » par ce dernier, sur l’ordinateur du visiteur. Cela signifie que l’utilisateur a la possibilité de désactiver le Javascript sur son navigateur, ce qui l’empêchera d’avoir accès à certaines fonctionnalités mais, surtout, qu’il n’est pas possible de faire passer uniquement par ce langage, des procédures de contrôle liées à la sécurité (accès à un espace privé, transactions, etc.)

Les possibilités du Javascript vont bien au-delà de mon exemple de contrôle du formulaire. Depuis quelques années, est apparue une appellation générique très prisée par les Webmasters : AJAX.

Le terme AJAX désigne en fait une méthode de travail permettant de combiner Javascript, ainsi que d’autres technologies (HTML, CSS, XML, Dom, etc.) afin de permettre une plus grande souplesse dans l’interactivité du site.

Pour résumer, avec AJAX, il est possible d’afficher des portions de pages directement à l’intérieur de la page active. Cela permet d’éviter de recharger l’intégralité de la page depuis le serveur au moindre clic. Des composants, stockés sur le serveur, sont intégrés de façon sélective à l’aide d’instructions utilisant notamment le Javascript (donc gérés par le navigateur). Cette méthode offre l’avantage d’une interactivité plus fluide en réduisant le temps de chargement global.

On évoque souvent le Webmail de Google (Gmail) comme l’un des exemples les plus significatifs de ce que permet AJAX : on y trouve des menus qui ressemblent à s’y méprendre à ceux que nous trouvons sur les applications classiques (installées sur les ordinateurs). La ressemblance ne tient pas tant à l’apparence de ces menus (CSS permet déjà cela) que par leur réactivité.

L’illusion que nous pourrions avoir affaire à une application locale et non un Webmail provient du fait que le temps de réaction entre le clic et l’actualisation du menu est extrêmement bref : c’est uniquement le code nécessaire qui est chargé et non l’intégralité de la page.

Récapitulons à nouveau :

- HTML permet de définir la structuration générale des pages

- CSS pour la mise en forme

- Javascript pour anticiper les réponses par rapport à certaines actions de l’utilisateur, notamment lors de la vérification de formulaires

- AJAX pour afficher « à la volée » des contenus partiels sur une page, sans être obligé de tout recharger au moindre clic sur un lien hypertexte.

Le problème c’est que, malgré Javascript et même AJAX, il est impossible de gérer le traitement d’un système de messagerie tel Gmail, d’un site de commerce du type Amazon et même d’un blog, tel que Blogger en ayant uniquement recours aux ressources locales de l’utilisateur ; c’est à dire : son navigateur, voire les divers plugins.

C’est là qu’interviennent les ressources en ligne.

Ressources en ligne, par exemple : PHP / MySQL

Toutes les technologies présentées jusqu’à présent (HTML, CSS, Javascript et dérivé), nous l’avons constaté, se présentent sous la forme de codes qui sont interprétés directement par le navigateur. Cela offre l’intérêt, par exemple, de préparer complètement son site à la maison, puis de le vérifier « en local » sans autres complication, avant de télécharger les fichiers sur le serveur pour qu’il soit joué à l’identique depuis ce dernier.

Pour autant, dès qu’il faut ajouter un minimum d’interactivité, tel qu’un simple formulaire de contact, nous avons vu que se posent déjà quelques problèmes :

- comment expédier le formulaire ?

- comment s’assurer qu’il ne soit pas détourné ?

Plus généralement, si l’on reprend les exemples de sites évoqués jusqu’à présent, on se rend compte que les ressources locales exécutées par le navigateur ne suffisent pas pour mettre en œuvre les fonctionnalités d’un site moderne.

Comment, par exemple, peut-on envisager de créer un catalogue en ligne, avec gestion de comptes utilisateurs, sans que le site soit connecté à un système de base de données ?

Or Javascript est irrémédiablement incapable de gérer une base de données. Il n’est pas prévu pour cela. Vous imaginez très bien qu’une liste de clients ou un catalogue ne peuvent être pilotés que « côté serveur », avec un maximum de procédures de sécurité.

En fait, très rapidement, dès le début du Web, les développeurs ont essayé de mettre en place des programmes qui permettent de faire appel à ce type de fonctionnalités en développant des routines à l’aide d’un réel langage de programmation couplé avec un système de gestion de base de données. Il fallait, évidemment que les technologies soient disponibles sur les serveurs Web.

Un standard s’est imposé de fait depuis une dizaine d’années (je passe l’historique) autour du couple PHP / MySQL, tous deux logiciels libres, tout comme Apache, le serveur Web ainsi que Linux, le système d’exploitation. On évoque d’ailleurs souvent à ce sujet le terme de LAMP pour désigner la plate-forme logicielle complète sur laquelle repose ce standard. Loin de représenter la seule solution possible (ce n’est pas l’objectif de ce support), le langage PHP et le système de base de données MySQL sont quasiment incontournables pour toutes les solutions abordées dans cet atelier. En fait, dans la pratique, vous n’aurez même pas à vous en soucier, car tous les hébergeurs proposent un environnement de ce type.

Alors, à quoi ça sert PHP ?

Disons, pour simplifier, qu’il s’agit d’un véritable langage de programmation spécialisé pour créer des sites sur Internet. C’est, en quelques sortes, un générateur de pages HTML.

PHP est un langage interprété. Vous pouvez donc créer vos fichiers au format .php ; ces derniers peuvent contenir, en plus de toutes les instructions classiques HTML, des programmes écrit en PHP. Rien ne vous empêche, non plus, de créer des fichiers qui ne comportent que du code PHP.

Dans tous les cas, ces instructions en PHP permettront d’ajouter les fonctions interactives (structures de contrôle sur des processus, connexion à une base de données, etc.) à vos pages HTML.

Une fois que les programmes en PHP sont écrits, il suffit alors de télécharger ces fichiers chez l’hébergeur. Lorsqu’on demande d’afficher une page écrite en PHP cette dernière est exécutée par le serveur Web (le plus souvent Apache) de l’hébergeur avant d’être transmise au client (navigateur).

Si l’on reprend notre exemple du formulaire, voilà l’intérêt du PHP :

- Il effectue un second contrôle sur le formulaire, à partir du serveur et non plus du navigateur, ce qui permet d’interrompre la procédure en cas de problème.

- Il expédie le message.

- Il affiche un récapitulatif du message envoyé avec, le cas échéant, une formule de remerciement.

- En faisant tout cela, il continue d’envoyer des pages HTML au navigateur. Il n’y a plus de trace des instructions en PHP, puisque ces dernières ont été interprétées par le serveur.

Mais l’intérêt du PHP va bien au-delà de cet exemple. Grâce à cette technologie, on peut considérablement réduire les tâches de maintenance. Généralement l’usage de ce langage permet de construire des « sites dynamiques », selon le principe suivant : au lieu de réaliser toutes les pages intégralement, les unes après les autres (comme en HTML), on crée, d’un côté quelques gabarits, comportant les éléments HTML (la structure) et les programmes en PHP, et d’un autre côté, on stocke toutes les informations (le contenu) dans une base de données MySQL stockée en ligne.

Les programmes en PHP permettent donc de construire dynamiquement les contenus à partir d’éléments initialement dissociés : gabarits HTML et diverses variables stockées dans la base.
Cette possibilité offre beaucoup de souplesse et répond aux contraintes des pages « statiques » évoquées plus haut à propos des pages HTML.

Beaucoup d’avantages mais également beaucoup de contraintes.

Ce que nous examinerons la prochaine fois.