Remplacer les cadres par des pseudo-frames

Webmastering

En surfant sur le net, je constate encore trop souvent que des sites utilisent des cadres (frames). Je ne vais pas vous refaire le coup de "les cadres, c'est pas bien", si vous voulez savoir pourquoi il vaut mieux éviter de les utiliser, je vous renvoie vers l'article d'Open Web. Les cadres ont souvent été utilisés pour séparer le menu du contenu du document, facilitant ainsi les mises à jour. Avec le développement de langages tel que le PHP, ce principe est obsolète. Mais je ne dirais pas que les cadres sont complètement inutiles, pour ma part je les utilise encore, mais dans un seul cas bien précis : l'affichage de publicité. À cela deux raisons :

  • Les codes fournis par les régies publicitaires sont, pour la plupart, invalides XHTML (excepté AdSense).
  • Les images publicitaires ne sont pas forcément hébergées sur le même serveur que votre site. Si celui-ci tombe en panne, l'affichage de votre site va s'arrêter à l'emplacement de votre bannière et vous aller devoir patienter jusqu'à ce que le délai d'attente soit dépassé. Imaginez une bannière 468x60 en haut de page, l'internaute n'aura pas la patiente d'attendre.

Webmasters confirmés, je pense que vous avez intégrés la notion de pseudo-frame depuis longtemps, ce post s'adresse surtout aux débutants. Pour ne plus utiliser les cadres sans avoir besoin de modifier toutes les pages de votre site lorsque vous changer une information de votre menu, l'utilisation des pseudo-frames avec la fonction include de PHP vous rendra la vie plus facile. Ici, c'est un script de base que je vous propose sans variable dans l'URL. En PHP, c'est le serveur qui génère la page, ce que vous voyez dans votre navigateur n'existe pas réellement. Ce langage permet de créer des pages à la demande, ce principe va nous permettre d'inclure un bout de la page dans une autre comme si vous l'aviez composée avec votre éditeur HTML favori. Prenons un exemple tout à fait classique : un en-tête (header), le contenu et le bas de page (footer).

Emplacement des pseudo-frames

Et voici le code source associé :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titre de la page</title>
<meta name="Description" content="Description de la page." /> 
<meta name="Keywords" content="mot1, mot2, mot3" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>
<body>

<!-- Debut de la page-->
<div id="page">

<!-- Header-->
<div id="header">
	<p>En-tête de page (Header)</p>

</div>
<!-- Fin header-->

<!-- Contenu de la page-->
<div id="contenu">
<h1>Titre de la page</h1>
<p>contenu de la page.</p>
</div>
<!-- Fin contenu de la page-->

<!-- Footer-->
<div id="footer">
	<p>Texte du bas de page</p>
</div>
<!-- Fin Footer-->


</div>
<!-- Fin de la page-->

</body>
</html>

On va donc créer 3 fichiers en PHP, puis découper le code ci-dessus comme suit : header.php :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titre de la page</title>
<meta name="Description" content="Description de la page." /> 
<meta name="Keywords" content="mot1, mot2, mot3" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>
<body>

<!-- Debut de la page-->
<div id="page">

<!-- Header-->
<div id="header">
	<p>En-tête de page (Header)</p>

</div>
<!-- Fin header-->

footer.php :


<!-- Footer-->
<div id="footer">
<p>Texte du bas de page</p>
</div>
<!-- Fin Footer-->

</div>
<!-- Fin de la page-->

</body>
</html>

mapage.php : 

<?php include('header.php'); ?>
<!-- Contenu de la page-->
<div id="contenu">
<h1>Titre de la page</h1>
<p>Contenu de la page.</p>
</div>
<!-- Fin contenu de la page-->
<?php include('footer.php'); ?>

Le serveur va injecter le contenu de header et de footer lorsqu'un internaute voudra visualiser la page en question. Il va littéralement la créer.

Meta dynamique

Pour aller un peu plus loin, on peut parfaitement avoir des balises meta dynamiques. Un exemple avec la balise title :

<title><?php
if(isset($meta_title)) 
echo $meta_title;
else
echo 'Titre du site';
?></title>

Et au début de votre page, avant d'inclure le header :

<?php
$meta_title = 'Titre de ma page';
include('header.php'); 
?>

Évidemment il est possible d'aller très loin dans la personnalisation. Si vous utilisez une base de donnée, il suffit de faire l'appel des informations à votre base avant d'inclure le fichier header.