Templates

Le template est une des pièces les plus importantes d'un site Web. Il donne l'apparence, le design. Il encourage les nouveaux visiteurs à rester sur votre site et à l'explorer. Les visiteurs réguliers et les utilisateurs apprécient d'être sur un site avec un design superbe et pratique. Pensez à d'autres produits, par exemple. Une voiture a besoin d'un bon moteur et de pneus, mais l'une des motivations les plus importantes à l'achat est souvent le design. Même si la conception n'est pas la raison principale, c'est souvent un élément déclencheur pour envisager d'acheter et peut faire considérer à un acheteur des raisons plus tangibles. Si le design est bien fait, les gens s'attendent à ce que le reste, aussi, soit bien fait. (Figure 1, Figure 2)!

Figure 1: Voiture avec stickers (Richardmasoner)

Figure 2: Voiture rouge (FotoSleuth)

Ces deux voitures sont faites pour différents groupes cibles. Ce sont des exemples de différentes approches dans la conception.

La conception de sites Web est un peu comme de l'artisanat. Posséder des compétences techniques comme HTML, CSS, JavaScript, PHP, retouche d'image et autres est impératif. Joomla n'est qu'un outil de plus dans votre boîte à outils.

Un bon template n'est pas seulement des couleurs et du graphisme. La forme et le positionnement du contenu est tout aussi important. Le site doit être convivial et fiable. Pour tout dire, ce défi me rappelle encore les deux voitures.

La conception de site Web est encore une profession jeune. Un web designer doit souvent faire face à une faible bande passante, des navigateurs incompatibles, des éditeurs de contenu inexpérimentés et d'autres personnes impliquées dans le processus de création d'un «bon» site. La création d'un site web Joomla! est souvent un processus dans lequel toute personne impliquée apprend beaucoup. La bonne conception web est un travail difficile. :-)

Joomla! et les templates

Joomla! est connu pour sa qualité et sa simplicité. Dans Joomla! une page simple est générée par le résultat en HTML d'un composant, plusieurs modules et le template. Chaque page est accessible via une URL unique. Prenez la page d'accueil comme exemple. Le composant com_content produit la sortie en HTML pour les articles dans le milieu (Figure 3). Les blocs à côté des articles sont différents modules. Vous pouvez combiner la sortie HTML d'un composant avec la sortie HTML de n'importe quel nombre de modules. Des modules existants peuvent également être réutilisés sur d'autres pages.

Figure 3: Page d'accueil Joomla!

Positions

Vous devez savoir, bien sûr, à quel point vous pouvez assigner des modules à tout. A cet effet, chaque template fournit ce qu'on appelle des positions . Pour voir ces positions, vous devez activer le bouton: Prévisualisez la position des modules (Extension → Gestion des templates → Paramètres). Après cela, vous pouvez accéder à votre site Web en utilisant le paramètre tp=1 (http://localhost/index.php?tp=1). Vous verrez les positions de module soulignés et leurs noms (Figure 4). Sinon, vous les apercevrez aussi en cliquant sur l'icone qui a maintenant changée à côté du nom du template dans (Extension → Gestion des templates → Paramètres) Dans Extensions → Gestion des modules vous pouvez assigner une de ces positions à un module. Si vous avez besoin du module à différentes positions, vous pouvez également le copier (Figure 5).

Figure 4: positions des Modules

Figure 5: Icone de prévisualisation

Templates de Base

Joomla! est livré avec trois templates de sites et deux templates d'administration. Vous pouvez en avoir un aperçu dans Extensions → Gestion des templates → Onglet Templates (Figure 5).

Figure 6: Templates pour le site

Le Template Atomic est un exemple de ce à quoi ressemble un template de base. Dans le chapitre Créer un nouveau template à partir d'Atomic, Nous utiliserons ce template comme base pour créer notre propre template. Le template Beez5 est la Version html 5 de Beez2. Pour l'Administration, aussi, un autre template est disponible. (Figure 6)

Figure 7: Templates admin

Styles

Les styles sont une nouvelle fonctionnalité depuis Joomla ! 1.6. Ils offrent la possibilité de créer et d'utiliser des versions différentes d'un template. Un template a un style au minimum. Dans ce style, des configurations peuvent être faites selon le template, comme changer les couleurs ou le téléchargement de logo d'en-tête. Vous pouvez définir le style de votre site par défaut dans Extensions → Gestionnaire de template → Styles. Vous pouvez filtrer entre les Styles site et administration en choisissant l'emplacement. Le template par défaut Beez2 est livré avec deux styles prédéfinis: default et Parks Site.

Vous pouvez créer des styles supplémentaires en les copiant. Chaque style peut être assigné à un élément de menu. Si vous souhaitez un fond vert sur votre site lorsque les utilisateurs cliquent sur l'élément de menu A, par exemple, et un fond bleu quand ils cliquent sur l'élément de menu B, vous pouvez assigner les styles correspondants (Figure 7).

Figure 8: Attribuer un style à un élément de menu

Vous en trouverez d'avantage sur les templates dans le chapitre Travailler avec les  templates.