Web Design

réutiliser son code

Lors de la création d'un site web où les pages ont une organisation et des visuels semblables, on se retrouve souvent à devoir dupliquer son code. Cependant, nous savons que cette pratique, même si elle fonctionne bien au début, mène invariablement à des erreurs, des oublis et à une incohérence des informations présentes sur les différentes parties du site.

Pour éviter cela, nous donnons ici quelques recettes simples pour bien commencer et penser ses pages de manière modulaire.

Nous abordons également les précompilateurs CSS qui permettent de programmer des feuilles de style.

Écrire pour le futur

Dans le cadre de pages statiques telles que nous les concevons ici, il n'est pas possible de se reposer sur des mécanismes côté serveur pour pouvoir factoriser son code. Il n'est, par exemple, pas possible de se servir d'inclusions de fichiers dans d'autres comme on peut le faire en PHP.

À partir de ce constat, il faut imaginer d'autres solutions permettant de simuler ce mécanisme. Une piste est de voir le processus de création d'un site comme un ensemble d'étapes dans lesquelles il y a écriture, puis publication.

L'écriture va se concentrer sur le contenu qui est à intégrer dans une structure. C'est sur cette structure que devons travailler et créant des fichiers modèles et des petits scripts permettant de fusionner structure et contenu au moment de la publication.

Par exemple, nous pouvons imaginer un squelette de page qui ressemblerait au fichier présenté ci-dessous. Il faudra le copier et le remplir avec le contenu de la page.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <!-- $HEAD$ commun -->
  </head>
  <body>
    <nav id="navTop">
      <ul>
        <li></li>
      </ul>
    </nav>
    
    <header id="title">
      <h1></h1>
      <p class="subtitle"></p>
    </header>
    
    <!-- contenu propre a la page -->
    
    <!-- $FOOTER$ commun -->
  </body>
</html>
template.html, exemple de fichier HTML générique.

Avec deux fichiers annexes pour compléter le head et ajouter un footer qui pourraient ressembler à ceci :

<meta content="Xavier Serpaggi" name="author" />
<meta content="Vim" name="generator" />
<link rel="stylesheet" href="/styles/general.css" />
<meta charset="utf-8" />
HEAD.inc, exemple de code commun à la balise head.
<footer>
<ul>
<li><a href="legal.html">Mentions légales</a></li>
<li><a href="plan.html">Plan du site</a></li>
<li><a href="about.html">À propos</a></li>
<li><a href="mailto:contact@domaine.tld">Nous contacter</a></li>
</ul>
</footer>
FOOTER.inc, exemple de code pour un footer

Et pour fusionner le tous, avant la publication proprement dite, on pourrait utiliser un script comme celui présenté ci-dessous :

#!/bin/bash
#
# File:		pre-publish.sh
# Author:	Xavier Serpaggi <serpaggi at emse point fr>
# Date:		12/07/2013
#
# Description:	Exemple of script to merge several HTML files before publishing.
#
################################################################################

# Path to perl binary. Please change to the correct location on your
# system.
PERL=/usr/bin/perl


## You shouldn't change anything below this line unless you know what you do.
FORCE=0

usage() {
	echo $(basename $0) " [options] <file-in> <file-out>"
	echo "OPTIONS"
	echo "  -h	This help."
	echo "  -f	Force overwrite destination file."
}

## Parse options if present
while getopts "hf" arg ; do
	case $arg in
		h) usage $0 ; exit 1 ;;
		f) FORCE=1 ;;
	esac
done

shift $((OPTIND - 1))

## Do we still have enough args?
if [ $# -lt 2 ];
then
	echo "Missing arguments\n"
	exit 2
fi

## We're not able to work on non existing file...
if [ ! -f "$1" ];
then
	echo "Error: file $1 not found"
	exit 3
fi

## Should we overwrite destination file if it exists?
if [ $FORCE -ne 1 ] && [ -f "$2" ];
then
	echo "Warning: $2, file already exists. Use -f to force overwrite."
	exit 4
fi

## This Perl script replaces every comment in in-file that looks like
# <!-- $NAME$ -->
# with the content of the file "NAME.inc" which must be in the same folder.
# It then writes the output to stdout, which is redirected to out-file.
$PERL -p -e 's/<!-- \$([^\$]*)\$ -->/do{open F,"$1.inc" ; $T=join("",<F>); close F ; $T ; }/e' $1 > $2
pre-publish.sh, exemple de script permettant de remplacer les commentaires particuliers par les contenus des fichiers associés. Si ça ne vous parle pas ou que vous ne disposez pas de Perl sur votre système, vous pouvez toujours vous lancer dans l'écriture d'un petit programme qui fait la même chose. Quel que soit le langage que vous utilisez, c'est un programme simple à réaliser.

Une fois ceci réalisé pour tous les fichiers, il ne reste plus qu'à les mettre à disposition sur le serveur web. On pourra bien entendu s'assurer que tout est correctement fait avant la publication en mettant en place un serveur local (souvent déjà présent sur votre système d'exploitation).

Tout ceci n'est qu'un ensemble d'exemples qu'il peut être intéressant d'avoir en tête lorsque l'on va se lancer dans l'écriture d'un site. Bien entendu, il serait plus simple d'écrire du PHP par exemple, et de laisser faire tout ça au serveur. C'est un choix. Tous les sites ne nécessitent pas d'être dynamiques et, même s'il y a un mécanisme de cache, c'est à chaque consultation que le serveur devra faire l'inclusion. Dans la méthode proposée, c'est vous qui la faite une seule fois, le serveur n'a ensuite qu'un travail minimal à fournir.

Feuilles des style adaptables

Lors de l'écriture de feuilles des style, même si ce n'est que pour un site donné, il est courant de devoir réécrire les valeurs de certaines propriétés, de vouloir faire des calculs sur des dimensions en fonction de paramètres tels que le média, la largeur de la page, la taille de la police, ... Tout ceci est long et fastidieux et nous avons tous eu envie d'avoir des variables ou des opérateurs mathématiques en CSS. Le W3C commence à introduire les calculs sur les dimensions, mais il n'y a encore rien sur la notion de variables ou de fonctions.

Voilà pourquoi des pré-processeurs de CSS ont vu le jour, permettant de faire tout ça. Ce sont des programmes ou ensembles de programmes qui s'utilisent au moment de la création du site, mais qui n'existent plus lors de la mise en production.

Nous vous invitons à découvrir leurs fonctionnalités et à utiliser celui qui vous conviendra le mieux :