le Projet Quéribus
un peu de technique ...
notes techniques : programmation, ...
 


Quelques notes sur les
Technologies mises en œuvre sur ce site

Projet Quéribus

Produit du Projet Quéribus, deux objectifs sont à l'origine de ce site :

1- Créer une application à FORTE VALEUR AJOUTÉE par son contenu et l'interactivité, en ligne (sur l'Internet) et hors-ligne (version CD-ROM)

2- Présenter les «châteaux cathares» et leur histoire sous forme d'une encyclopédie interactive (base de connaissances)

Dans le cadre du premier axe, ce site est devenu un véritable laboratoire. Les développements techniques y sont périodiquement apportés de telle manière qu'il est aujourd'hui possible de déterminer quelles sont les avantages et inconvénients de chaque technique à la portée des concepteurs et webmestres de site. Nous vous proposons ainsi,en parcourant ces quelques notes, de partager cette expérience unique. Des conférences et formations sont régulièrement effectuées par Philippe Contal, à l'origine de ce site (pcontal@cathares.org).

Bonne lecture ...


Programmation HTML, DHTML, ...

Pour mieux maîtriser les codes hypertextes, aucun générateur n'a été utilisé. L'ensemble des pages de codes a été écrit à partir des éditeurs de textes NotePad et WordPad de Windows. Ceci nous a permis notamment de garantir une compatibilité pour les anciens navigateurs, ce qui n'est pas toujours facile.

programmation en HTML, JavaScript, ...
- programmation en HTML, JavaScript, ... -

Les principales technologies de programmation reposent sur de l'hypertexte (HyperText Markup Language) et le DHTML (Dynamic HTML). Cette dernière technologie est en fait la réunion des feuilles de style (CSS : Cascading Style Sheets) et du JavaScript.


dessin réalisé à la main
- dessin réalisé à la main -
Images et dessins

Les dessins ont été réalisés à la main puis numérisés avec un scanner à plat. Deux logiciels ont été sélectionnés : Paint Shop Pro et PhotoImpact. Un budget logiciel inférieur à 2 000 France est donc tout à fait réaliste pour créer et animer un site ! Cependant, il ne faut pas négliger le travail entrepris : plus de 2 000 heures ont été consacrées à ce jour pour le développement de cette application ... De plus, un budget important a été consacré à la littérature technique : Dynamic HTML - the definitive reference (O'Reilly), CSS2 - feuilles de style HTML (Daniel Glazman, éditions Eyrolles), Internet : programmer avec JavaScript (Danny Goodman, éditions Sybex), Le guide du programmeur JavaScript (Nigel Mc Farlane, éditions Etrolles), ... pour les plus pertinents.

Aucune banque d'icônes ou d'images n'a été exploitée sur ce site. Chaque icône, chaque photographie, chaque dessin, ... a été réalisé spécifiquement dans le cadre de ce site.


Flash, Java, ...

Volontairement, ces technologies n'ont pas été utilisées sur ce site. La programmation Java offre de grandes possibilités mais possède le dramatique inconvénient de ralentir considérablement le chargement des pages. Le Flash quant à lui est très agréable pour le concepteur de site, mais peu de visiteurs sont aujourd'hui équipés du programme nécessaire à la navigation Flash. De plus, les animations réalisées avec la technologie des couches donnent d'excellents résultats en matière d'animation.


Frames (cadres)

Aucun frame n'est utilisé dans ce site ... et pour cause. C'est probablement la plus stupide invention des concepteurs de navigateur. En effet, non seulement, vous perdez alors de l'espace visuel utile mais vous êtes en outre fortement pénalisés dans les moteurs de recherche (un utilisateur trouvant votre site au travers d'une sous-page, cadre-enfant, ne comprendra pas la logique de navigation, figurant normalement dans une fenêtre parallèle).

Les seules applications utilisant des cadres (NetVision, la chaîne interactive, ...) le font de manière totalement transparente pour les moteurs de recherche. Un seul programme existe alors et c'est lui qui injecte les lignes de code dans les différentes fenêtres ou cadres-enfants.


version CD-ROM
- version CD-ROM -
Adaptation au lieu d'hébergement :
les versions sur CD-ROM et sur l'Internet


Les mêmes programmes hypertextes sont utilisés sur l'Internet et sur le CD-ROM. Cependant, ceux-ci s'adaptent en fonction du lieu d'hébergement : en ligne ou hors ligne. Le site aspiré ne fonctionne pas correctement car il lui manque de nombreux fichiers, notamment les images en haute définition qui ne sont présentent que sur le CD-ROM. L'application NetVision par exemple ne fonctionne pas si vous téléchargez la totalité du site en ligne.

Si la version en ligne représente environ 50 Mo, la version sur CD-ROM représente quant à elle plus de 450 Mo ! Avec un bon modem, ceci représente plus de 3 jours de téléchargement ...


Internet Explorer et Netscape, les deux grands navigateurs du web Adaptation au navigateur

Cauchemar des concepteurs de site ... les différentes plates-formes (PC, Mac, stations, ...) et les différents navigateurs. www.cathares.org se caractérise par une adaptation très avancée aux navigateurs, mais transparente pour ceux-ci. En effet, les pages hypertextes injectent ou non les codes en fonction du navigateur utilisé. Vous pouvez le constater en utilisant une version de Netscape 3 en parallèle de Netscape 4 par exemple. Chaque page teste le navigateur que vous utilisez et vous affiche seulement les options dont vous pouvez disposer.

Le plus bel exemple d'adaptation et l'application NetVision, développée en JavaScript. Celle-ci permet de visualiser des images et dessins en adaptant la taille de ceux-ci à votre écran par un système de zoom. Les mêmes pages visualisées sur l'Internet, ou sur CD-ROM ne réagissent pas de le même manière. En effet, la version 2 (utilisant les cookies) fonctionne correctement avec Internet Explorer 4, mais seulement en ligne. Pour utiliser NetVision hors ligne (sur CD-ROM par exemple), c'est la version 3 qui est utilisée. Celle-ci est plus simple d'utilisation (pas de choix zone pour chercher les fichiers images) mais ne fonctionne par exemple pas en ligne avec Internet Explorer 4 ! Mais rassurez-vous, tout ceci est transparent pour l'utilisateur ;-))


Technologie des couches

Les pages hypertextes sont le plus souvent construites en une dimension : une longue page sur laquelle on navigue à l'aide de l'ascenseur. Les graphistes sont très friands du passage en deux dimensions : menus perpendiculaires, utilisation des frames (cadres), ...

La troisième dimension est accessible avec la technologie des couches. Sans plugg-ins ni installation difficile, cette technologie demande seulement au concepteur de site, une bonne dose de patience et de bonnes compétences en programmation !

exemple d'utilisation de la technologie des couches : la page d'accueil

- exemple d'utilisation de la technologie des couches -
(la page d'accueil)
La visite guidée de Guilhabert de Castres, la balade interactive, les puzzles, la colombe de Montségur, ... sont quelques exemples de l'utilisation de cette technologie. Elle permet de superposer des pages de code ou images différentes. De ce fait il est alors possible de créer des animations synchronisées.

La chaîne interactive, évoluant en fonction de l'heure, peut être maintenant considérée comme un véritable espace-temps (quatre dimensions), gérable par le web. Cette technologie a été mise en application au sen du groupe Alpha-C. Chaque poste connecté (plus de 140 aujourd'hui) affiche, en veille d'écran, cette chaîne interactive, gérée par plusieurs services (service qualité, service commercial, cellule de veille, ...). De plus, de grands écrans sont présents dans les ateliers, permettant de diffuser la même information à l'ensemble du personnel de l'entreprise.

La technologie des couches a été aussi utilisée pour les bulles d'aide contextuelle. 40 000 liens hypertextes relient les pages de ce site. Sur environ 80 % d'entre eux, un message apparaît lorsque le curseur passe dessus. Il s'agit d'une technologie très complexe permettant d'injecter du code hypertexte dans une couche et de la rendre visible tant que le lien est actif. Il a fallut débugger ce programme car Internet Explorer a une fâcheuse tendance à planter lorsque les liens sont proches les un des autres. A lui seul, ce développement a nécessité plus de deux jours de développement, tests hors ligne, tests en ligne, ...


Base de connaissances et moteur de recherche intelligent

présentation de la base de connaissances sous forme arborescente

- la base de connaissances -
(sous forme arborescente)
Le concept de base de connaissances s'oppose souvent à celui de base de données. D'un point de vue informatique, il s'agit surtout de différencier :
- une manière très ouverte de présenter des informations, pour la base de connaissances
- d'une manière rigoureuse et très structurée de gérer des données, pour les bases de données.

www.cathares.org a été conçu et réalisé dans une logique de base de connaissances. On retrouve cette notion par le système d'arborescence qui permet à tout internaute de comprendre sa position dans le site, quelque soit sont entrée. Deux principaux avantages sont liés au concept de base de connaissances.

Tout d'abord, l'information n'est pas aussi cadrée que dans une base de données et ceci permet en particulier de conserver une architecture globale tout en donnant la possibilité à chaque section de se différencier. Ainsi, la présentation des châteaux, villes, grottes, ... est très cohérente mais chaque lieu présenté possède ses propres particularités : banques d'images, liens vers les plates-formes, ... Cette structure à géométrie variable permet une adaptation du site en fonction de son évolution et de son contenu de manière beaucoup plus souple que ne pourrait le faire une base de données classique.

D'autre part, la base de connaissances se traduit par des pages statiques parfaites pour les moteurs de recherche. Rêve des informaticiens, les pages dynamiques générées par des bases de données, sont un véritable leurre pour les outils de recherche. Ces pages, n'ayant pas d'existence en dehors de l'écran sur lequel les requêtes ont été effectuées, ne sont donc pas référencées ...

Seul point noir au tableau des bases de connaissances, l'impossibilité de traiter des données quantitatives à des fins de calculs statistiques. Mais vous en conviendrez, pour présenter l'histoire et des lieux culturels, point besoin de statistiques de haut niveau ...

Le concept de base de connaissances a été largement développé sur ce site, mais il y manquait un outil très efficace le moteur de recherche interne (propre au site). Celui-ci a été mis au point, avec une particularité fort différenciatrice : le moteur de recherche intelligent. Réalisé en JavaScript, celui-ci fonctionne aussi bien en ligne (sur l'Internet) qu'hors ligne (sur CD-ROM ou disque dur). L'approche est non plus faite par des simples mots-clés comme dans les moteurs de recherche traditionnels mais en spécifiant le champ d'intérêt que vous avez. Ceci permet de mieux cerner les pages qui vous intéresse : passionné par l'histoire ? vous voulez seulement trouver des tables d'hôtes dans la région ? ... toutes les questions se retrouvent au travers d'un véritable tableau de contrôle sur lequel vous pouvez sélectionner ce que vous souhaitez.


Techniques de référencement

Être présent sur le web c'est bien ... être visible sur le web c'est mieux ! En effet, la position dans les moteurs de recherche est stratégique pour permettre aux internautes de trouver une site. Outre la promotion habituelle (mention des adresses sur les cartes de visite, sur les papiers à en-tête, affiches, ...), il est important d'être facilement trouvé par une recherche au travers de différents moteurs de recherche, par les mots-clés qui correspondent au site.

les matrices de positionnement

- -
Après plusieurs années de navigation sur le web, de création de sites, nous avons mis au point une méthodologie de référencement assez pertinente sur les 15 principaux moteurs de recherche. Il n'est en effet pas indispensable d'être référencé sur 2 000 moteurs de recherche. Il est plus judicieux d'être bien positionné sur les 15 moteurs les plus utilisés sur la planète : AltaVista, HotBot, Infoseek, ... En deux mots, il s'agit de créer chaque page du site avec les bons mots-clés et les astuces de description (méta-commandes) puis de référencer périodiquement chaque page dans les moteurs de recherche. Avec 1 000 pages, www.cathares.org requière plus de 96 heures de référencement ... Avec les 35 heures, cela nous fait presque 3 semaines !!!

Pour vous convaincre, allez faire un tour dans . Elles indiquent les positions du site, selon les mots-clés et les moteurs de recherche. Cette présentation unique figure aujourd'hui parmi le savoir-faire d'@drénalyne, l'agence interactive du groupe Alpha-C.

Le positionnement dans les moteurs de recherche est très important mais les liens croisés avec d'autres sites sont indispensables. L'indicateur de popularité, nombre de liens pointant sur un site, est particulièrement pertinent pour déterminer le degré d'intérêt des webmestres vis à vis d'un site. Plus d'un millier de liens pointent aujourd'hui vers www.cathares.org (test effectué avec AltaVista).



 
  cathares.org, voyage virtuel en Terres Cathares
IDDN Certification
IDDN
cathares.org ®, voyage virtuel en Terres Cathares

 
Responsable de la publication : Philippe Contal, pcontal{at}cathares.org | Éditeur : Histophile®
Vente sur Internet : samouraï et katana, templier et épée, Occitanie et cathare, dragon et légende celtique, Antiquité égyptienne et gréco-romaine, Franc-Maçonnerie...
Partenaires cathares.org® : Club cathares.org® |  Khetemet  | Château de Peyrepertuse | Hypocras® | Hypocras.fr | metalis.fr