Historique

Le nouveau site du SAGES (celui que vous consultez) est présent sur la toile depuis octobre 2003. Il succède au premier site, créé par Thierry Kakouridis en 1997.

Ce site, d'une facture assez classique, contenait beaucoup d'information, au dire des internautes, mais pêchait par manque de structure, de lisibilité, d'homogénéité. Il ne s'agit pas d'en faire le reproche au créateur, loin de là, mais on avait atteint la limite du possible avec la technique de construction de site utilisée : un logiciel éditeur relativement peu performant, une ergonomie basée sur les "frames" (cadres), des liens "gravés en dur" dans les pages, des styles définis localement. La décision a donc été prise, au cours d'un séminaire de travail agréable (entrecoupé de pauses baignade sur une plage de Cannes) entre certains membres du bureau et le nouveau webmaster, Jean-Pierre Desmoulins, de le refaire. Le cahier des charges était : reprendre autant que faire se peut la richesse d'information de l'ancien site, mais structurer le site (notamment pour le rendre évolutif) et le rendre plus agréable à consulter.

Principes généraux

L'analyse de l'existant, la réflexion sur les besoins, ont conduit à décomposer le site en deux sous-ensembles de "pages" :

Pour faire simple, une arborescence est ce que l'on voit lorsqu'on explore un disque, des répertoires, des sous-répertoires, ..., des fichiers, sur un support informatique (disque dur, disquette). Pour faire savant et briller dans les discussions, on peut préciser qu'il s'agit d'un graphe orienté, muni d'un noeud particulier nommé "racine", en aval duquel se trouvent un nombre quelconque (éventuellement nul) de noeuds, chacun de ces noeuds étant lui même la racine d'une arborescence. J'avoue que j'ai toujours pris un malin plaisir à observer la tête de mes étudiants lorsque je leur donnais cette définition en amphi. Définir un objet en faisant référence à ce même objet semble à première vue une incongruité logique : en fait il n'en est rien, la subtilité de la chose tenant dans le "éventuellement nul" sans lequel une telle définition, dite "récursive", est vouée à décrire un objet infini. Et ne croyez pas qu'un tel concept soit propre aux informaticiens, les structures du langage, qu'elles soient syntaxiques ou sémantiques, se définissant ainsi : les règles d'une grammaire ressortent souvent de telles structures récursives.

Les "cadres" étant abandonnés, car mal normalisés et trop problématiques à gérer, on a choisi de présenter le site dans deux fenêtres de navigation, avec un plan de navigation assez simple :

En ce qui concerne les styles, il a été décidé de faire appel à des fichiers de style externes aux pages (dits "css" pour "cascading style sheets"). Ainsi par exemple, un seul fichier définit la police et la couleur des caractères pour tout le site. Trois fichiers distincts permettent d'adapter les fonds de page, marges, tailles de caractères, à la résolution d'écran de l'internaute : le site du SAGES n'a en effet pas le même look suivant la résolution de l'écran sur lequel on le lit. Quatre fichiers en tout définissent donc les aspects visuels, ce qui permet de changer rapidement le look du site, en mettant par exemple des caractères vert foncé sur fond d'un papier avec décoration "nouvel an" en fin d'année. On peut dynamiser le site avec ce type de technique : on pourrait permettre, par exemple, à des utilisateurs qui ont la vue un peu basse de grossir la taille des caractères, aux filles de lire sur fond rose et aux garçons sur fond bleu, etc...

Réalisation

Le problème d'un site web, lorsqu'il prend de l'ampleur, est son évolution. L'intégration dans le code des pages (le fameux langage html) des liens qui permettent la navigation, qu'ils soient activables par des éléments de texte ou des icones clickables, devient rapidement quelque chose de très compliqué et source de problèmes (liens cassés ou pervertis, navigation circulaire, ...). Enlever une page particulière d'un endroit donné de l'arborescence pour la mettre ailleurs, chose évidente avec un fichier qu'on déplace dans les répertoires d'un disque, est un casse-tête pour le webmaster qui doit mettre à jour le contenu de ce fichier ainsi que les contenus de tous les autres fichiers qui y font référence. La "toile d'araignée" n'est pas seulement mondiale, mais aussi locale dans le site lui même. Une fonction simple, telle que la présentation de la situation d'une page dans l'arborescence et la mise à disposition de liens pour remonter en arrière, est évidemment réalisable de manière classique, mais difficile à gérer en cas d'évolution du site. Cette situation est la rançon des principes simples qui ont fait le succès du web, à savoir d'une part l'intégration dans les fichiers des contenus et des moyens de navigation, et d'autre part le fait que le protocole http est dit "sans mémoire", ce qui veut dire que ni le navigateur ni le serveur ne conservent la mémoire "structurée" de ce que fait l'internaute.

Un protocole est le langage utilisé par deux machines pour communiquer entre elles à travers un réseau. Dans la navigation sur la toile, une machine est dite "serveur" et l'autre "client". Sur le poste client on utilise un logiciel dit "navigateur" (par exemple "Mozilla") pour consulter les sites. Sur le poste serveur on utilise un logiciel, dit aussi "serveur" (par exemple "Apache") pour répondre aux requêtes des clients et envoyer les données demandées. Attention à la polysémie du terme "serveur". "http" (hyper text transfer protocol) est le protocole qui normalise les échanges entre un navigateur et un logiciel serveur web.

Pour palier ce problème d'évolutivité des sites, on voit de plus en plus souvent des solutions dans lesquelles les contenus des pages (textes, images) sont séparés de la structure qui lie les pages entre elles (classiquement une arborescence). Les contenus sont des éléments de texte (en fait, du code html simplifié) et les liens correspondent à des références relatives entre ces éléments, le tout étant stocké dans une "base de données". Cette approche nécessite de mettre sur le serveur un logiciel de gestion de base de données, et un serveur web un peu spécial, où chaque accès de l'internaute déclenche des programmes dits "scripts cgi" qui, au lieu d'aller simplement chercher des fichiers dans les répertoires du serveur, comme le fait un serveur web tel qu'Apache, vont chercher des éléments de contenus (textes, images) ainsi que des éléments de navigation (liens) dans la base de données, et composent dynamiquement les pages qui sont envoyées à l'internaute. Ces solutions, lourdes à mettre en oeuvre, aussi bien au niveau des serveurs que des équipes qui réalisent les sites, sont plutôt réservés à des sites professionnels importants, ou encore mises en oeuvre par des prestataires de service qui réalisent des sites à la demande en réemployant de tels outils.

La programmation

Le site du SAGES a été construit sur la base d'une innovation informatique destinée à donner souplesse et évolutivité, sans toutefois travailler au niveau du serveur (ni script cgi ni base de données). Le principe est simple, même si la réalisation l'est moins. On peut, dans des pages en langage html intégrer des "scripts", le langage d'écriture le plus populaire pour ce faire se nommant "javascript". Ces scripts ne s'exécutent pas sur le serveur, comme dans les solutions définies précédemment, mais sur le poste client : c'est donc l'internaute qui fournit la puissance de calcul, laquelle ne dépend évidemment que de ses moyens financiers. On peut définir un script localement, dans la partie dite "en-tête" d'une page html (non visible par l'internaute), et utiliser ce script plus bas dans le "corps de la page", afin qu'il affiche un visuel particulier. On peut aussi, ce qui est largement fait dans le site du SAGES, mettre dans chaque page la référence à un fichier particulier qui contient tous les scripts utilisés dans le site. Par exemple, en haut et en bas de chaque page du site du SAGES se trouve un visuel (logo, icones de navigation), dont la composition est définie une fois pour toutes, dans des script particuliers. Par exemple :


  <SCRIPT LANGUAGE=JavaScript src="../general.js"></SCRIPT>
  <SCRIPT LANGUAGE=JavaScript src="../sages.js"></SCRIPT>
  <SCRIPT LANGUAGE=JavaScript src="http://perso.estat.com/js/m.js"></SCRIPT>
  <SCRIPT>nomPage ("act-site")</SCRIPT>
  <SCRIPT>pageEnCours.enTete ()</SCRIPT>
  <SCRIPT>pageEnCours.pied () </SCRIPT>

Les lignes ci-dessus, que l'on peut retrouver dans le code de la présente page en cherchant dans le menu du navigateur la fonction "affichage"-"source", servent respectivement à définir le fichier de scripts, à nommer la page pour l'intégrer dans l'arborescence, à présenter l'en-tête normalisé avec le logo du SAGES et le titre, à présenter le pied de page normalisé. On voit déjà que composer une nouvelle page pour le site du SAGES se fera simplement en copiant un modèle de page que l'on personnalise et auquel on ajoute des contenus : grosse facilité pour les rédacteurs de pages qui n'ont pas à se soucier de la mise en forme.

La définition de l'arborescence est faite dans le fichier (sages.js) qui définit tous les scripts. On y trouve par exemple les lignes :


  ap (1, 1, "D", "actions",        "Agenda du SAGES, analyses et actions en cours") ;  
  ap (2, 2, "F", "act-agenda",     "Agenda du SAGES") ;
  ap (2, 2, "F", "act-contaud",    "Contacts et audiences") ;
  ap (2, 2, "F", "act-jurid",      "Action juridique") ;
  ap (2, 2, "F", "act-analyses",   "Analyses") ; 
  ap (2, 2, "F", "act-site",       "Le site web du SAGES") ; 

Ces lignes définissent une partie de l'arborescence du site, chaque ligne définissant une page, à savoir le chapitre "actions", lequel contient les rubriques act-agenda ... act-site. Une fois compris le principe et les paramètres (profondeur dans l'arborescence, numéro de répertoire, type d'icone associée à la page dans les listes, nom de la page, titre de la page), ajouter une page dans l'arborescence, supprimer, déplacer une page, sont des jeux d'enfant : cela revient à ajouter, supprimer, déplacer une ligne dans ce fichier. N'importe qui sachant utiliser un éditeur de texte pourrait donc mettre la page "contact et audiences" en fin de rubrique "actions" dans le site du SAGES : il suffit de déplacer la ligne correspondante par couper - coller.

Au chargement de chaque page du site du SAGES, après lecture (dans le cache en mémoire du navigateur dès le second accès) du fichier "sages.js" et donc des lignes ci-dessus, on constitue dans la mémoire du poste client un modèle de l'arborescence du site (une mini base de données). Ainsi donc, palliant le manque de mémoire du navigateur ou encore du serveur, toute page du site "connait la structure de l'ensemble de l'arborescence", ce qui permet d'offrir des fonctions de navigations évoluées. On constatera sur les pages du site la présence de petits visuels d'aide à la navigation, le listage des pages filles d'une page donnée et, innovation récente, ce que peu de sites web offrent sur l'ensemble de leurs pages, la navigation par menus déroulants !

Les techniques de programmation utilisées dans les scripts de gestion des arborescences sont assez évoluées : programmation orientée objet, récursivité. Ainsi par exemple pour la recherche des pages (mère, grand-mère, ...) situées en amont d'une page donnée (sans commentaire) :

  function ancetre (rang) {
    if (rang <= 0) return this ;
    if (this.mere == null) alert ('ancetre de '+this.nom+' inexistant') ;
    return this.mere.ancetre (rang-1) ;
  }

  function eve () {
    if (this.mere != null) return this.mere.eve () ;
    return this ;
  }

Ce qui pourrait s'exprimer en français par :

"Pour chercher mon ancètre de rang n,
si ce rang est inférieur ou égal à 0, c'est moi même,
sinon, si je n'ai pas de mère, c'est qu'il y a un problème,
et sinon cet ancètre est l'ancètre de rang n-1 de ma mère."

"Pour trouver mon eve,
Si j'ai une mère, trouver l'eve de ma mère,
Sinon, c'est moi même."

La vie du site

Le site du SAGES est donc évolutif, par construction. Encore faut il qu'il le soit à l'usage. Les habitués savent que nous mettons à jour régulièrement le site, notamment :

L'engagement de Virginie Hermant sur le site, pour un travail long et fastidieux de remise en forme stylistique des pages de l'ancien site et pour faire vivre la rubrique "actualités" doit être souligné.

Vous noterez aussi, sur la page d'accueil, le logo de la société Estat. Ce prestataire de service comptabilise des statistiques sur l'utilisation du site. Leur service est gratuit, mais oblige à avoir des "popups", fenêtres qui s'ouvrent de manière intempestive. A l'avenir, si le budget du SAGES le permet, nous pourrions faire supprimer ces "popups".

La technologie "Extrusion"

Ce qui est décrit sommairement plus haut, concernant la réalisation du site du SAGES, n'a peut être l'air de rien, mais cela représente un travail important et une avancée technologique certaine. Cette technologie, baptisée "extrusion" pour "Externally structured navigasion" a été protégée par copyright : voir le logo cyber-protection situé sur la page d'accueil du site du SAGES.

A l'usage, le site se révèle pratique à maintenir. Virginie Hermant, qui n'est pas du tout informaticienne, a acquis la maîtrise la technologie d'Extrusion et met à jour elle même la partie de l'arborescence (actualités) dont elle a la responsabilité. A l'avenir, d'autres personnes pourraient se charger de rubriques diverses.

Avec l'accord de la direction du SAGES cette technologie peut être réemployée sur des sites web qui ne feraient pas "ombrage" au SAGES. Contacter le développeur pour en savoir plus.