Français
Anglais

Documentations
Programmes

Liens
Comment ce site est généré

Retour à la page principale


Valid HTML 4.01!

Valid CSS!

Best Viewed With Any Browser

Comment ce site est généré

Ce site est généré à l'aide du préprocesseur m4. Cela permet d'avoir une page réduite au minimum au niveau de l'aspect, m4 se chargeant de construire chaque page pour qu'elles aient toutes le même aspect visuel. Cela permet aussi d'éviter l'emploi de cadres pour avoir en permanance le menu du site visible, ou l'emploi de PHP qui n'est pas portable et lent à exécuter.

Un exemple basique

Voici une utilisation basique de ce préprocesseur pour générer un petit site, avec un meme en-tete et pied de page. Cette version marche avec une version native de m4 (ie. que l'on peut trouver sous FreeBSD, par exemple). Chacune des pages contient une instruction pour inclure l'en-tete, le texte de la page et une instruction pour inclure le pied de page. Voici un exemple de page :

include(tete.m4)
<h1> Vous etes dans la page Abricot</h1>
<h2> mmmmh , tu sens bon, c un shampooing aux abricots ?</h2>
include(pied.m4)

Ce fichier, abricot.m4, est ainsi réduit au strict minimum. Voici le contenu du fichier tete.m4 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
                     charset=ISO-8859-1">
<title>Site des halles de Rungis</title>
</head>
<body bgcolor="#FFFFFF">
<table>
<tr>
  <td>
    <a href="peche.html">Peche</a><br>
    <a href="pomme.html">Pomme</a><br>
    <a href="poire.html">Poire</a><br>
    <a href="abricot.html">Abricot</a><br>
  </td>
  <td>
  <!-- Fin de l'en tete -->

et le fichier pied.m4 :

<!-- Debut du pied de page -->
  </td>
</tr>
</table>
</body>
</html>

Pour générer les pages HTML, il faut exécuter la commande suivante :

m4 abricot.m4 > abricot.html 

Pour transférer les pages HTML sur le serveur Web, on peut utiliser un outil comme ncftp. Afin de ne pas devoir rentrer le mot de passe du compte FTP, on peut remplir un fichier comme le fichier .localhost.cfg par exemple :

host localhost
user mdecore
pass <secret>

et le protéger en lecture des utilisateurs peu scrupuleux :

$ chmod 600 .localhost.cfg
$

Il ne reste plus qu'à tranférer le fichier :

ncftpput -f ./.localhost.cfg $HOME/public_html abricot.html

L'emploi d'un Makefile peut automatiser les tâches de génération de page HTML et transfert sur le serveur FTP :

#
# Liste des suffixes pour les regles non standard
#

.SUFFIXES: .m4 .html .put

#
# Tous les fichiers sources
#

SRC = index.m4 poire.m4 pomme.m4 abricot.m4 peche.m4

#
# Les regles non standard
#

#
# Liste des fichiers de destination : prendre le prefixe de
# chaque fichier source et substituer l'exetention .m4 par
# .html
#

DEST = $SRC:.m4=.html

#
# Liste des fichiers de transfert : prendre le prefixe de
# chaque fichier source et substituer l'exetention .m4
# par .put
#

PUT = $SRC:.m4=.put

all : $DEST

transfert : $PUT

clean :
        rm -f $DEST $(PUT)

.m4.html:
        m4 $< > $@ 

.html.put:      
        ncftpput -f ./.localhost.cfg $HOME/public_html $<
        touch $@

On n'a plus dès lors qu'à éditer les fichier .m4 et à taper make pour construire des pages HTML ayant toutes le même aspect visuel et les mettre en ligne.

Un exemple un peu plus sofistiqué

Pour ce site, c'est le même principe que précédemment qui est employé, avec quelque petits ajouts pour traiter deux versions (une en français, une en anglais), avoir toutes les pages avec un titre, avoir la date de compilation de la page en bas, etc.

La version de m4 utilisée ici est la version GNU, disponible en standart sous GNU/Linux, et téléchargable pour les autres systèmes (gm4 sour FreeBSD, par exemple). Pour les Makefile, c'est aussi la version de make qui sera utilisée (gmake sous FreeBSD, par exemple).

Cette version a largement été inspirée de la doc de John Perr sur http://fr.linuxfocus.org/Francais/September1999/article111.html.

Voici un exemple de fichier source, le fichier index-fr.m4 :


TITRE(Bienvenue sur la page perso de Mathieu DECORE)


ENTETE(Bienvenue sur la page perso de Mathieu DECORE)


    <p>La page d'accueil de tarsier


PIED

Le même fichier en version anglaise, index-en.m4, donne :

TITRE(Welcome on Mathieu DECORE's home page)
ENTETE(Welcome on Mathieu DECORE's home page)

    <p>This is my page...

PIED

Voici le fichier de look, look.m4, qui sera passé au préprocesseur m4 :

divert(-1)
Fichier contenant les definitions des macros
divert(0)
changequote({,})
ifdef({LANG},,{define({LANG},{fr})})
include({lang-}LANG{.m4})
ifdef({_BASE_URL_},,{define({_BASE_URL_},
      http://mdecore.free.fr/linux)})
define({_ANNEE_},esyscmd(date +%Y)) dnl ANNEE=date +%Y
define({_DATE_},esyscmd(date +%d/%m/%y))
define({_USER_},esyscmd(echo $USER))
define({_HOSTNAME_},esyscmd(hostname --fqdn))
define({TITRE},{define(_TITRE_, $1)})
define({ENTETE},{
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>$1</title>
<meta http-equiv="Content-Type"
      content="text/html; charset=ISO-8859-1">
<meta name="generator" content="m4">
<LINK REL="STYLESHEET" HREF="_BASE_URL_/look.css">
</head>
 
<body bgcolor="#FFFFFF">
<!-- Fichier généré par m4 le _DATE_ par _USER_ sur
     _HOSTNAME_ -->
<table width="100%" border="0">
  <tr><td align="center" colspan="2">
    <h1>_TITRE_</h1>
  <tr><td align="left" valign="top" width="15%">
    <a href="./index-fr.html">_FRANCAIS_</a><br><br>
    <a href="./index-en.html">_ANGLAIS_</a><br>
    <a href="_BASE_URL_/doc/index-LANG.html">_DOC_</a><br>
    <a href="_BASE_URL_/prog/index-LANG.html">_PROG_</a><br>
    <a href="_BASE_URL_/prog/link-LANG.html">_LINK_</a><br>
    <a href="_BASE_URL_/divers-LANG.html">_DIVERS_</a><br>
    <a href="_BASE_URL_/comment-LANG.html">_COMMENT_</a><br><br>
    <a href="_BASE_URL_/index-LANG.html">_HOME_</a><br>
  <p>
    <a href="http://validator.w3.org/check/referer">
    <img border="0"
         src="http://www.w3.org/Icons/valid-html401"
         alt="Valid HTML 4.01!" height="31" width="88"></a>
  </p>
  <p>
    <a href="http://jigsaw.w3.org/css-validator/">
    <img style="border:0;width:88px;height:31px"
         src="http://jigsaw.w3.org/css-validator/images/vcss" 
         alt="Valid CSS!"></a>
  </p>
  <P>
    <A HREF="http://www.hertgen.com/anybrowser/" >
    <IMG SRC="_BASE_URL_/ab-white.gif"
         ALT="Best Viewed With Any Browser" BORDER="0"></A>
  </P>
    <td align="left">
})
define({PIED},{
</table>
<hr size="0">
<font size="-1">
<em>_MOI_<br>
_MAJ_
esyscmd(date +%d/%m/%y)
- &copy
<a href="mailto:mdecore@linux-france.org">
      mdecore@linux-france.org</a>
_ANNEE_
</em></font>
</body>
</html>
})

Pour plus de détails sur la signification de ces instructions, voir la documentation citée précedemment.

Les fichiers lang-fr.m4 et lang-en.m4, inclus par look.m4, contiennent les textes du menus dans chacune de leur langue respective. Le fichier lang-fr.m4 contient :

define({_ANGLAIS_},{Anglais})
define({_FRANCAIS_},{Français})
define({_DOC_},{Documentations})
define({_PROG_},{Programmes})
define({_DIVERS_},{Divers})
define({_LINK_},{Liens})
define({_COMMENT_},{Comment ce site est généré})
define({_HOME_},{Retour à la page principale})
define({_MOI_},{Page maintenue par Mathieu DECORE})
define({_MAJ_},{Dernière mise à jour :})

et le fichier lang-en.m4 contient :

define({_ANGLAIS_},{English})
define({_FRANCAIS_},{French})
define({_DOC_},{Documentations (in French)})
define({_PROG_},{Software})
define({_DIVERS_},{Misc})
define({_COMMENT_},{How this site is generated})
define({_LINK_},{Links})
define({_HOME_},{Home page})
define({_MOI_},{Page maintained by Mathieu DECORE})
define({_MAJ_},{Last update :})

Une feuille de style est utilisée, look.css, en partie recopiée de la feuille de style générée par LaTeX2HTML (pour pouvoir ensuite utiliser la même feuille de style pour tous les fichiers HTML, y compris ceux générés par LaTeX2HTML) :

BODY {color: black; background: white}

/*
 * Ce qui suit vient de la feuille de style utilisee par les
 * document generes pas LaTeX2HTML
 */

.MATH { font-family: "Century Schoolbook", serif; }
.MATH I { font-family: "Century Schoolbook", serif;
          font-style: italic }
.BOLDMATH { font-family: "Century Schoolbook", serif;
            font-weight: bold }

/* implement both fixed-size and relative sizes */
SMALL.XTINY             { font-size : xx-small }
SMALL.TINY              { font-size : x-small  }
SMALL.SCRIPTSIZE        { font-size : smaller  }
SMALL.FOOTNOTESIZE      { font-size : small    }
SMALL.SMALL             {  }
BIG.LARGE               {  }
BIG.XLARGE              { font-size : large    }
BIG.XXLARGE             { font-size : x-large  }
BIG.HUGE                { font-size : larger   }
BIG.XHUGE               { font-size : xx-large }

/* heading styles */
H1              {  }
H2              {  }
H3              {  }
H4              {  }
H5              {  }

/* mathematics styles */
DIV.displaymath         { }     /* math displays */
TD.eqno                 { }     /* equation-number cells */


/* document-specific styles come next */

Enfin, un Makefile permet de compiler les pages HTML ou de les transférer sur le serveur FTP :

#
# Le preprocesseur utilise
#

M4=gm4

#
# Liste des fichiers (sans l'extension -fr.html)
#

FICHIERS=index

#
# Liste des fichiers a generer (rajout des extensions
# -fr.html, -en.html)
#

FICHIERS_HTML=$FICHIERS:=-fr.html $FICHIERS:=-en.html \
doc/index-fr.html prog/index-fr.html \
prog/monLinux/index-fr.html comment-fr.html

#BASE_URL=http://localhost/~mdecore
#BASE_URL=http://www.linux-france.org/~mdecore/html
BASE_URL=$(shell pwd)
BASE_URL=http://mdecore.free.fr/linux

all : $(FICHIERS_HTML) look.m4 lang-en.m4 lang-fr.m4 #transfert

%-fr.html : %-fr.m4
        $(M4) -D_BASE_URL_=$(BASE_URL) -DLANG=fr look.m4 $< > $@
        ln -sf index-fr.html index.html
#       ncftpput -f $$HOME/.free.cfg /linux/`dirname $@` $@

%-en.html : %-en.m4
        $(M4) -D_BASE_URL_=$(BASE_URL) -DLANG=en look.m4 $< > $@

transfert : $(FICHIERS_HTML)
        ncftpput -R -f $$HOME/.free.cfg /linux *

clean :
        rm -f $(FICHIERS_HTML) index.html

Les scripts utilisés

Plusieurs scripts shell sont utilisée pour effectuer un traitement post-m4.

css.sh

todocbook.sh

generepage-prog.sh

sh2html

ftp.sh : transfert par ftp des fichiers. L'idée de ce script m'est venue en essayant de transférer le contenu complet de mon site sur un serveur FTP. Voici les temps que j'ai obtenus avec ncftp :

$ time -p ncftpput -R -f $HOME/.free.cfg /linux *
real 2517.40
user 0.43
sys 1.58
$

soit plus de 40 minutes, pour un site faisant environ 9 Mo :

$ du -ksh public_html/
9M     public_html
$

J'ai alors écrit un script qui parcourt récursivement un répertoire et écrit les commandes à passer au ferveur FTP pour y copier un fichier ou y créer un répertoire. Une fois terminé, le contenu de ce fichier est passé à la commande ftp qui se charge de transférer tout le site. Le temps alors mis est surprenant :

$ time -p ftp.sh -f ~/.free /linux *
real 151.39
user 0.62
sys 5.80
$
soit 2 mn 30 !

Les liens utiles

Une fois le site mis en ligne, il faut vérifier que le code HTML est valide et qu'aucun lien n'est défectueux. Pour cela on peut s'aider du validateur du w3c http://validator.w3.org/, et du validateur de feuilles de styles http://jigsaw.w3.org/css-validator/. Pour les liens défectueux, rendez-vous à cette adresse : http://linkchecker.stacken.kth.se/.
Page maintenue par Mathieu DECORE
Dernière mise à jour : 25/03/06 - © mdecore@linux-france.org 2006