Ce tutoriel, conçu avant tout pour les développeurs web, présente une méthode de conception de modèle de page pour Automne. C'est une étape incontournable, puisque à l'heure actuelle aucun thème n'est encore disponible en téléchargement.
La démarche sera familière pour ceux qui travaillent selon les recommandations du W3C : elle consiste à transformer un modèle de page XHTML en modèle Automne à l’aide de balises XML.
Nous verrons donc dans cette première partie comment convertir un modèle de page XHTML en modèle Automne.
Les balises XML d’Automne vont permettre notamment de :
- gérer les différents balises présentes dans l’entête de page (méta-données, appels des différents fichiers CSS, JS et RSS) ;
- définir les différentes zones de contenus modifiables, également appelés espaces clients ;
- gérer les éléments de navigations (menus, plan de site, fil d’ariane) ;
On peut donc au choix partir de rien et concevoir sa page à l’aide des langages XHTML, CSS et JS ou bien adapter un thème existant - sous peine de disposer de fonctionnalités équivalentes dans Automne.
Dans ce tutoriel, nous prendrons un exemple qui se limite aux modules polymod livrés par défaut avec Automne, à savoir le module Actualités et le module Médiathèque.
Modèle Automne = XHTML + XML
Partons d’un code XHTML tout ce qu’il y a de plus classique :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Titre de page - Site Web</title>
<meta charset="UTF-8"/>
<meta name="description" content="The description of the content of the present page may be used by search engines" />
<meta name="keywords" content="CMS, Automne, template, example, tutoriel, XHTML" />
<link rel="stylesheet" href="/css/reset.css" type="text/css" media="all" />
<link rel="stylesheet" href="/css/base.css" type="text/css" media="all" />
<link rel="stylesheet" href="/css/fonts.css" type="text/css" media="all" />
<!--[if IE 7]>
<link rel="stylesheet" href="/css/ie7.css" type="text/css" media="all" />
<![endif]-->
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="/css/mobile.css" type="text/css" media="handeld" />
<script type="text/javascript" src="/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/js/myscript.js"></script>
<link rel="alternate" type="application/rss+xml" title="Actualités" href="http://www.automne-cms.org/rss/rss.php?id=1" />
</head>
<body>
<div id="header">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Produits</a></li>
<li><a href="#">Services</a></li>
<ul>
<li><a href="#">Support</a></li>
<li><a href="#">Téléchargements</a></li>
<li><a href="#">Espace Client</a></li>
</ul>
</ul>
</div>
<div id="main-content">
<p>Vous êtes ici : <a href="/">Accueil</a> > Actualités</p>
.....mon contenu....
</div>
<div class="aside">
.....mon contenu....
</div>
<div id="footer">
<ul class="links">
<li><a href="#">Plan du site</a></li>
<li><a href="#">Mentions légales</a></li>
<li><a href="#">Accessibilité</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
Nous avons ici plusieurs éléments statiques, que nous allons devoir rendre dynamique comme le titre de la page, la description et les mots-clefs associés. Nous avons aussi des listes de liens de navigations qui devront pouvoir se mettre à jour en cas de changement de libellé ou de structure de l’arborescence. Enfin nous avons des zones dans lesquelles du contenu devra pouvoir être inséré par les rédacteurs du site.
A l’aide de balises XML, nous allons pouvoir transformer ce fichier XHTML en modèle de page pour Automne.
English