Pour chaque modèle de page, pensez à mettre un titre explicite pouvant être lisible depuis les propriétés de page, une description compréhensible et utile et une vignette illustrative.
Langue de la page
- Gérer dynamiquement la langue dans le modèle de page
Plutôt que de fixer la langue en dur dans le modèle, vous pouvez utiliser la variable {page:self:language}, ainsi la langue sera définie en fonction des propriétés de la page.
<html lang="{page:self:language}">
Titre de la page
- Créer un titre de page optimisé pour le référencement naturel
La construction d’un titre d’une page dans un modèle doit être pensée en accord avec l’optimisation du référencement. la balise <atm-title /> est à placer en premier. Il est gérable depuis les propriétés de page et permet aux rédacteurs d’intervenir facilement. Ce title peut être complété voire remplacé dans le cas de page dynamique.
Exemple : sur une page actualités, la liste des actualités aura pour titre de page, la valeur fournie par <atm-title /> par contre, sur le détail d’une actualité, le titre de la page doit être le titre de l’actualité pour conserver une pertinence en matière de référencement.
N.B : Depuis la 4.1, on peut faire des recherches polymod dans les modèles de page. Voir l’exemple pour les actualités.
Pour compléter le title de la page, on préférera <atm-website name=”title” />, qui peut être géré et personnalisé de façon plus spécifique que la constante APPLICATION_LABEL qui est commune a tous les sites se définies dans une instance d’Automne.
<title><atm-title /> - <atm-website name="title" /></title>
Si le titre des pages (attention pas le lien) est trop long et peu explicite dans l’arborescence des pages d’Automne, car optimisé pour le référencement, vous pouvez faire apparaître les liens à la place depuis les paramètres Automne.
Jeux de caractères
- Définir le jeu de caractères
Il est très important de définir le bon jeu de caractère sans quoi des navigateurs comme IE feront leur propre interprétation, souvent erronée, de la page.
Toute nouvelle installation d’Automne (4.x) se fait en utf-8, si vous avez mis à jour depuis Automne 3.x, le jeu de caractère sera généralement en ISO par défaut.
Pour déclare le jeu de caractère dans votre modèle de page, il suffit d'écrire dans votre entête (head) :
HTML 4.01/XHTML 1.0
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
HTML5/XHTML5
<meta charset="utf-8" />
Compression des fichier
- Utiliser atm-css-tags
- Utiliser atm-js-tags
- Protéger les commentaires de copyright des librairies avec //<< ... //!>>
En production, pensez à utiliser ces deux outils qui vous permettent de gagner en rapidité d’affichage en compressant les fichiers et en limitant le nombre de requêtes HTTP. Penser à respecter un ordre d’appel cohérent pour vous éviter des surprises ;)
Afin de conserver les crédits des librairies tierces, veuillez utiliser //<< .. crédit... //!>> cela peut aussi permettre d’éviter les problèmes de compression dans le cas ou le code de la librairie est déjà minifié.
atm-meta-tags
- Placer l’<atm-meta-tags /> juste avant la fin de votre head.
Ce doit être la dernière balise avant votre </head>.
A partir de la version 4.2, vous pouvez passer en attribut les meta que vous souhaitez gérer vous même dans le modèle.
Exemple si je veux définir moi même la description en récupérant la valeur d'un module, je peux écrire :
<atm-meta-tags description="0">
Codename
- Utiliser des noms de code à la place des identifiants de page
Lors de la conception des appels aux noeuds d’arborescence dans les modèles, il faut préférer l’usage des noms de code (codename) à celui des identifiants de page. Cette solution est plus souple, car facilement gérable dans l’interface d’Automne en cas de changement et ce sans intervenir dans les modèles de page.
<atm-linx type="direct" nodespec="2"><a href="{{href}}">{{title}}</a></atm-linx>
Si vous voulez faire un lien vers la page d'accueil en faisant référence au nom de code de la page, on écrira plutôt :
<atm-linx type="direct" codename="home"><a href="{{href}}">{{title}}</a></atm-linx>
De plus en cas d’internationalisation, le site sera facilement duplicable en l’état.
Attention, les codenames ne sont pas utilisable dans tous les cas, il faut qu’ils se trouvent dans l’arborescence d’Automne pour pouvoir être employés. Par exemple les flux RSS ne les supportent pas.
Google Analytics
- Placer le code Google Analytics entre <atm-noadmin>...</atm-noadmin>
Placer le code Google Analytics entre les balises atm-noadmin afin de ne pas fausser les statistiques de visites du site lors de l’intervention dans l’administration.
<atm-noadmin>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</atm-noadmin>
Rangée par défaut
- Placer les rangées par défaut
Vous avez la possibilité de placer des rangées par défaut dans les propriétés de votre modèle de page. Cela peut accélèrer la création de page et facilite grandement la prise en main pour les nouveaux utilisateurs.
Activation/Désactivation
- Désactiver le modèle de page d’Accueil
Pensez à désactiver les modèles de page n’ayant plus de raison d'apparaître dans la création des nouvelles pages comme le modèle de page d'accueil s'il est uniquement prévu pour.
Aide à l’édition
N’hésitez pas à placer des textes d’aide dans des tags <atm-edit> pour aider les personnes qui éditent les contenus de pages.
Exemple d'aide à l'utilisateur pour l'utilisation d'une rangée formulaire :
<row>
<atm-edit>Aide : cliquez sur le crayon et sélectionner un formulaire à afficher</atm-edit>
<div class="cms_forms">
<block module="cms_forms" id="form">{{data}}</block>
</div>
</row>
English