Site Editor - John COLIBRI.

• mots clé: Html - Création de Site Web - Frames - génération de code
  
• logiciel utilisé: Windows 98, Delphi 5.0
  
• matériel utilisé: Pentium 500Mhz, 128 M de mémoire
  
• champ d'application: Delphi 1 à 6 sur Windows, Kylix
  
• niveau: débutant en HTML, moyen en Pascal et Delphi
  
• uses: -
  
• plan:
  
  • intro
    
  • les frames
    
  • la construction du site
    
  • utilisation du logiciel
    
  • programmation
    
  • Améliorations
    
  • télécharger le source
    

1 - Le contexte

1.1 - Découverte HTML

Cet outil m'a permis de faire quelques progrès:

• j'ai du apprendre la syntaxe HTML, y compris les tableaux et les cadres (Frames)
  
• j'ai pu analyser en détail la structure de nombreuses pages, et me faire une idée de ce qui était utilisé par ceux qui ont fait le pas longtemps avant moi.
  

• la plupart des pages ne respectent en rien la syntaxe HTML. Sur les trois semaines à mettre sur pied le renderer, deux ont été consacrées à redresser des syntaxes foireuses (</P>, </TR>, </LI> manquants, <UL> sans le moindre <LI> etc)

• HTML n'est pas une notation "objet": il n'y a pas d'objet "texte en gras" ou "lignes indentées". L'interprète rencontre les tags à la volée et les interprète à cet instant-là. Je croyais qu'il fallait écrire:

  <P> <P><BR> voici <I>un <B>bon</B> exemple</I> d'imbrication<BR> </P><BR>

  pour obtenir:

  voici un bon exemple d'imbrication

  alors que

  <P> <P><BR> voici <I>un <B>bon exemple</I></B> d'imbrication<BR> </P><BR>

  (inversion des terminateurs <B> et <I>) est légale, et fournit:

  voici un bon exemple d'imbrication

  On pourrait même avoir
  (non-imbrication de <B> dans <I>

  <P> <P><BR> voci <I>un <B>bon</I> exemple</B> d'imbrication<BR> </P><BR>

  qui produit:

  voci un bon exemple d'imbrication

  L'interprète utilise donc une foultitude de variables d'état (texte_en_gras, texte_italique etc) qui sont positionnées au fur et à mesure de l'arrivée des tags, et utilisée pour afficher le texte lorsqu'il arrive, en tenant compte de ces variables d'états.

  Techniquement, toute descente récursive est vouée à l'échec. Quelle amère déception. Niklaus WIRTH était réellement en avance sur son temps: la programmation structurée appelait les unités (les modules MODULA), qui préfiguraient les types abstrait (INTERFACE et IMPLEMENTATION, programmation par contrat) et par là même les objets...

  En vérité, mon RENDERER a eu beaucoup de mal à constituer des objets à partir de cette syntaxe "à la volée", afin de pouvoir manipuler la page comme une tForm Delphi, avec les objets prototypes de sa Palette (dans notre cas des objets HTML: tableau, liste etc) et son Inspecteur (contenant ici les attributs d'un tableau, par exemple, ou les polices d'un fragment de texte).

• Plus important encore: la majorité des pages que j'ai analysés étaient statiques. Mais quelle surprise. Les pages statiques étaient censées faire partie d'un passé ringard. Eh bien ma conclusion actuelle est qu'à part la Redoute ou la Fnac, la construction de pages utilisant des bases de données ne constitue pas l'essentiel des pages Web. Cette statistique porte sur les pages que j'avais sauvegardées moi, et qui sont en majorité des pages d'informations sur les techniques de programmation (Soap, Http, Midas etc.). Peut être que cette statistique perso est inexacte pour l'ensemble des pages du Web. En tout cas elle est primordiale pour moi, car c'est exactement le type de pages que je souhaite présenter.
  

1.2 - Le site actuel

• présence d'un menu permanent. La gauche fut préférée au sommet, car les écrans sont en général plus larges que haut
  
• rappel éventuel du titre de la page en haut
  
• texte simples sans fanfreluches (JavaScript ou autre). Pas de son, pas de Bitmap de fond, de boutons animés, de fenêtre annexes... Et en tous cas, jamais ma photo. Comme je vous l'ai déjà dit, pas de sonneries.
  

Je les détestais auparavant, à cause des déboires qu'ils me causaient: impression de la mauvaise fenêtre, sauvegarde partielle etc. Mais pour conserver un menu visible en permanence ils me semblent la seule alternative (dans l'état actuel de mes faibles connaissances en tous cas).

2 - Les frames

2.1 - Origine

• la mécanique a été introduite, me semble-t-il par Netscape. Le but était de pouvoir faire défiler certaines parties de l'écran (comme dans tout tableur où certaines lignes et colonnes peuvent être figées, alors que les autres cellules peuvent défiler)
  
• les frames sont donc constituées par:
  
  • une page servant uniquement à spécifier la subdivision de l'écran
    
  • des pages de contenu HTML ordinaires, lesquelles sont placées dans l'une ou l'autre partie de l'écran.
    

2.2 - Présentation sans Frames

L'utilisateur verra donc en premier la page index contenant les 3 liens vers les autres pages:

Et alors:

• lorsque l'utilisateur sélectionne à l'aide de son exportateur Web le site "JCOLIBRI.FREE.FR", le serveur de FREE affichera la page "INDEX.HML"
  
• lorsque l'utilisateur clique ensuite le lien "LIVRES" dans cette page INDEX, la page "LIVRES.HTML" sera chargée à la place de "INDEX.HTML".
  
• il peut alors reculer par la touche "arrière" de son explorateur, et cliquer le lien "STAGES", pour regarder "STAGES.HTML" etc.
  

Le code HTML de nos pages de contenu est:

Pour visualiser cet exemple, cliquez ici.

2.3 - Frames à un niveau

Une solution est de fournir un "Plan_du_site.Html" qui présente une liste exhaustive de toutes les pages du site avec les liens correspondants. Dans notre cas simple, notre page "INDEX.HTML" jouait ce rôle. Si on ne souhaite pas encombrer la page d'accueil avec les liens vers la plus petite page, il faut donc recourrir à un plan du site, avec donc des aller-retours entre le plan et les pages de contenu.

Une autre solution est de laisser l'index visible en permanence, exactement comme les menus dans une application Windows normale.

La fenêtre de l'explorateur est alors divisée en plusieurs zones:

• des zones fixes visibles en permanence
  
• des zones dans lesquelles seront chargées d'autres pages Html
  

• la partie gauche, fixe, contiendra un menu consistant en liens vers les pages LIVRES, PASCALISSIME et STAGES
  
• la partie de droite contiendra soit "LIVRES.HTML", "PASCALISSIME.HTML" et "STAGES.HTML"
  

Pour obtenir ce résultat, il faut cinq HTML:

• la page principale qui définit essentiellement la subdivision de l'écran. Elle ne content aucun contenu affichable, mais indique où seront les autres pages (position, taille, défilement, bordures...)
  
• les 4 pages de contenu:
  
  • la page de Menu qui sera placée à gauche
    
  • les trois pages de contenu qui seront placées successivement dans la partie de droite
    

Notez que:

• les tags <BODY> ... </BODY"> ont été remplacés par <FRAMESET> ... </FRAMESET>, ce qui indique que ce code ne contient rien d'affichable, mais uniquement les instructions qui organisent l'écran
  
• l'attribut COLS permet de spécifier la subdivision verticale (naturellement ROWS permettrait de subdiviser horizontalement)
  
• les tags <FRAME> ayant les attributs
  
  • SRC: permet de spécifier quel fichier sera affiché par défaut lorsque le Frame sera chargé (il faut bien avoir une page HTML normale pour présenter des informations, et, si elle doit permettre la navigation, contenir des liens qui chargeront les autres pages dans les diverses parties de l'écran
    
  • NAME: permet de donner un nom à une partie de l'écran, ce qui permettra aux liens de dire dans quelle partie de l'écran la page doit être chargée (voir ci-dessous)
    

Notez:

• les liens qui chargent chaque page spécifient par le biais de l'attribut TARGET dans quelle zone de l'écran la page doit être chargée. Le nom figurant après TARGET est l'un de ceux que vous avez choisi dans <FRAME> à l'aide de l'attribut NAME pour donner un nom à chaque partie de l'écran.
  

Pour visualiser cet exemple, cliquez ici.

2.4 - Frames emboîtés

Cela peut se faire:

• en présentant dans le menu l'arborescence (comme un tTreeView). Cette présentation n'est pas prévue en HTML standard, et nous ne l'avons pas examinée actuellement
  
• en plaçant en haut de la page de contenu au autre Frame.

  Dans ce cas, la partie de gauche est un cadre emboité, contenant

  • le titre en haut
    
  • le contenu en bas
    
  Schématiquement, nous avons:
  

Dans notre cas, nous aurons donc

• "INDEX.HTML" qui est le cadre principal organisant la fenêtre en partie droite et gauche
  
• "MENU.HTML" qui contient les liens vers les trois possibilités de droite
  
• pour le contenu de LIVRES, par exemple:
  
  • le cadre que nous avons appelé "LIVRES_FRAME.HTML" qui organise la parie de droite en titre en haut et contenu en bas
    
  • le titre que nous avons appelé "LIVRES_TOP.HTML"
    
  • le contenu que nous avons appelé "LIVRES.HTML"
    
• idem pour "PASCALISSIME" et "STAGES"
  

• "INDEX.HTML"

  <HTML> <HEAD> <TITLE>John COLIBRI</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME SRC="menu3.html"> <FRAME SRC="livres3_frame.Html" NAME="titre_et_contenu"> </FRAMESET> </HTML>

  Nous avons simplement changé le nom de NAME pour refléter la nouvelle organisation.

• pour "MENU.HTML":

  <HTML> <HEAD> </HEAD> <BODY> <P> J Colibri <P> <A HREF="livres3_frame.html" target="titre_et_contenu">Livres</A><BR> <A HREF="pascalissime3_frame.html" target="titre_et_contenu">Pasacalissime</A><BR> <A HREF="stages3_frame.html" target="titre_et_contenu">Stage</A> <P> </BODY> </HTML>

  Ici aussi la zone destionation est changée en "titre_et_contenu".

• pour "LIVRES_FRAME.HTML"

  <HTML> <HEAD> </HEAD> <FRAMESET ROWS="40,*"> <FRAME SRC="livres3_top.html"> <FRAME SRC="livres3.html" NAME="contenu"> </FRAMESET> </HTML>

  Le frame de la partie droite désigne donc les deux parties: le titre en haut et le contenu en bas.

• pour "LIVRES_TOP.HTML"

  <HTML> <HEAD> </HEAD> <BODY> <P> Livres Colibri<BR> </BODY> </HTML>

• quant à "LIVRES.HTML", rien de changé:

  <HTML> <HEAD> </HEAD> <BODY> <P> Les livres Colibri: Delphi et Pascal<BR> </BODY> </HTML>

  
  

3 - La construction du site actuel

3.1 - La construction

• Index.Html qui est un FRAMESET pour le MENU et le CONTENU
  
• le MENU permet de charger les pages. Chaque page est constituée:
  
  • par un FRAMESET qui contiendra le titre du sommet de la page
    
  • le sommet qui contient le titre
    
  • le contenu réel de la page
    

3.2 - Les problèmes rencontrés

Le problème majeur fur la synchronisation des pages de contenu. Prenons un menu avec 3 pages "Livres", "Stages", "CV". Pour une telle architecture, il fallait comme indiqué plus haut, armer les fichiers suivants:

• "Index.Html"
  
• "Menu.Html"
  
• pour chaque page:
  
  • "Livres_frame.Html", "Livres_top.Html", "Livres.Html"
    
  • "Stages_frame.Html", "Stages_top.Html", "Stages.Html"
    
  • "CV_frame.Html", "CV_top.Html", "CV.Html"
    

Ces manipulations se faisaient en chargeant le texte dans un explorateur, en passant en mode texte pour voir le source HTML, le modifier, sauvegarder, puis retester l'ensemble.

3.3 - L'Objectif de l'utilitaire Site_Editor

• de pouvoir charger le texte HTML avec le minimum de clics
  
• de sauvegarder le texte modifié pour examiner le résultat
  
• de générer éventuellement toutes les pages (<HTML>, <HEAD> etc) et leurs attributs (couleur, emboîtement...), sans leur contenu (ce qu'il y a entre <BODY> et </BODY>). En gros, générer de façon cohérente toute l'architecture, le contenu réel des pages étant aspiré depuis d'autres fichiers (.TXT dans notre article, .ED en ce qui nous concerne).
  

4 - Utilisation du logiciel

Par conséquent:

• dézippez dans un répertoire
  
• chargez le DPR
  
• compilé
  
• Une fois compilé, cliquez "generate_save_all": les répertoires et les pages HTML corresponant aux boutons du sommet de la page sont générés.
  
• allez dans votre répertoire et cliquez "INDEX.HTML": une mécanique similaire à l'exemple "nested frames" devrait apparaître.
  

• pour l'Index ou pour le Menu:
  
  • cliquez sur l'onglet "Index" ou "Menu" du NoteBook, et le texte HTML sera chargé. Vous pouvez modifier le code HTML dans le mémo, puis le sauver
    
• pour les pages "Livres", "Stages" etc, il faut d'abord sélectionner la page:
  
  • sélectionnez un bouton du haut, comme "Livres" par exemple
    
  • cliquez sur l'un des onglets de NoteBook:
    
  • cliquez sur "Load"
    
  Normalement il aurait fallu créer des onglets "Livres", "Stages" etc, et ensuite des sous-onglets "Frame", "Top" et "Content". Il faut dire que ces opérations manuelles sont moins soignées, car c'est la génération automatique globale qui fut très vite prioritaire.
  

Mais nous avons prévu que lorsque les répertoires des pages ("Livres" etc) existent déjà, si vous placez des fichiers .txt dans ces répertoires ils sont intégrés au fichiers .HTML types. Ces fichiers doivent:

• avoir un nom formé par "i_", le nom de la page
  
• avoir l'extension .txt
  

Les livres disponibles sont:
Delphi dBase
Programmation Objet

ce texte sera inclus entre <BODY> et </BODY> du fichier "LIVRES.HTML", qui devient alors:

Pour créer une nouvelle page de contenu, il suffit:

• de poser sur le Panel du haut un tButton ayant le nom de la base (par exemple "CV")
  
• recompiler et exécuter.
  

• le menu comportera un lien vers cette page "VC"
  
• le répertoire "CV" sera créé
  
• les trois fichiers "CV_Frame.HTML", "CV_TOP.HTML" et "CV.HTML" seront créés.
  

5 - Fonctionnement du programme

5.1 - Le chargement des codes HTML

5.2 - La génération du code

devint simplement:

Vielle technique de génération de programmes...

Jusqu'ici rien que du classique. Mais, à part la consistence du code HTML, Site_Editor m'a surtout permis d'expérimenter à peu de frais différents styles et looks. Prenons la procédure qui génère les Frames de titres:

Cette procédure centralise en un seul lieu les attributs de ces frames de la page de droite. Je peux donc à présent expériementer en modifiant à un seul endroit, dans le code Pascal FRAMEBORDER ou SCROLLING, et après génération, quasi-instantannée de toutes mes pages, évaluer le résultat.

5.3 - Techniques de programmation

• DirectoryExists, FileExists, ForceDirectories et autres permettent la création des répertoires
  
• l'inclusion de fichiers .TXT se fait en lisant le texte dans une tStringList et en le concaténant au fichier standard
  
• l'itération sur les pages se fait en testant les Captions des tButtons déposés sur le tPanel du haut
  
• display est une procédure qui me permet simplement d'afficher des messages de mises au point dans le tMemo "debug". En somme des Writeln améliorés...
  

5.4 - Ce qui n'est pas fourni

Vous avez ici l'essentiel du programme.

Actuellement j'utilise la version 2 qui permet:

• la conversion de .ED
  
• ajout de liens de retour de bas de page
  
• inclusion de figures
  
• insertions de fichiers HTML natifs dans les textes ED, insertions de fichiers HTML en source, avec ou sans les prologues (HEAD) etc.
  

• 44 pages .HTML (sans compter les pages d'exemple de cet article)
  
• 39 ancres
  
• 180 références à ces ancres
  

De plus j'ai rédigé un petit transformateur .PAS en .HTML (utilisé pour quelques inclusions dans cet article).

6 - Améliorations

• l'utilisation d'un tTreeView pour représenter l'arborescence du site
  

7 - Conclusion

Il a en tout cas eu le mérite de me forcer à ajouter une pierre à mon usine à gaz: celle qui transforme un programme Pascal (avec gras et italique) en HTML.

Si la présentation du site vous parait perfectible (et comment ne le serait-elle pas, après deux jours d'essais !), vous êtes les bienvenus de me transmettre vos appréciations

8 - Téléchargez le projet en source

• site_editor.zip: qui contient:
  
  • le projet avec sa forme
    
  • l'esquisse .TXT de page Web pour "stages"
    
  (4 K)
  

• nous vous remercions de nous signaler toute erreur, inexactitude ou problème de téléchargement en envoyant un e-mail à jcolibri@jcolibri.com. Les corrections qui en résulteront pourront aider les prochains lecteurs
  
• tous vos commentaires, remarques, questions, critiques, suggestion d'article, ou mentions d'autres sources sur le même sujet seront de même les bienvenus à jcolibri@jcolibri.com.
  
• plus simplement, vous pouvez taper (anonymement ou en fournissant votre e-mail pour une réponse) vos commentaires ci-dessus et nous les envoyer en cliquant "envoyer" :

  Nom :
  E-mail :
  Commentaires * :

• et si vous avez apprécié cet article, faites connaître notre site, ajoutez un lien dans vos listes de liens ou citez-nous dans vos blogs ou réponses sur les messageries. C'est très simple: plus nous aurons de visiteurs et de références Google, plus nous écrirons d'articles.
  

L'auteur