Catégorie:Développement de skins

Description

Un skin est le terme utilisé dans OVIDENTIA pour désigner un thème graphique. On dit d'un skin qu'il est l'habillage d'un site (skin = peau en anglais), c'est à dire une couche graphique qui n'influe pas sur le traitement des données. Il rassemble tous les éléments graphiques et les règles d'affichage : images, mises en forme (fichiers CSS), templates, modèles d’affichage...

Structure d'un skin

Afin d'être reconnu comme un skin dans l'administration du site et afin de personnaliser les templates, les pages d'accueil et les styles, un skin doit contenir les répertoires suivants :

• images : par convention, ce répertoire rassemble toutes les images (bandeau, puces...)
• ovml : rassemble tous les fichiers du langage OVML (private.html, public.html...)
• styles : contient les fichiers css styles (ovidentia.css)
• templates : contient les fichiers templates personnalisés (page.html, sectiontemplate.html...)

Le skin peut être inclu dans un fichier compressé de module. Dans ce cas, les répertoires du skin doivent se trouver sous le répertoire "theme". Voir la documentation : Structure des répertoires d'un module et l'article Développer un skin.

Remarque : seuls les répertoires ovml, styles et templates sont nécessaires au fonctionnement d'un skin, d'autres répertoires peuvent être ajoutés pour séparer les applications flash des librairies javascript, etc...

Administration des skins dans OVIDENTIA

Administration

Il est préférable que le skin soit intégré en tant que module. Si c'est la cas, il est visible dans la liste des modules de la section administration. Il peut être chargé avec un fichier zip ou alors supprimé directement à partir de la liste.

L'administrateur définit dans la configuration du site (Section Administration/Sites/nom du site/Configuration du site) le skin qui sera utilisé par les utilisateurs anonymes.

Les skins présents sur le serveur apparaissent dans la liste déroulante ainsi qu'une liste des styles css associés à chaque skin. En effet, un skin peut proposer plusieurs feuilles css afin de gérer des modifications minimes de couleurs, des tailles de polices différentes...

Remarque :

Cette configuration n'a d'effet que sur les pages en mode anonyme. En mode authentifié, chaque utilisateur a la possibilité de choisir son skin depuis ces options personnelles (voir ci-dessous). Pour supprimer cette option et ainsi empêcher le choix du skin par les utilisateurs, l'administrateur peut désactiver l'option 'L'utilisateur peut modifier son skin dans la configuration du site (Section Administration/sites/nom du site/Options de l'utilisateur).

Options de l'utilisateur

En section Utilisateur, lien Options, l'utilisateur a la possibilité de définir le skin qui sera utilisé pendant sa navigation sur le site en mode authentifié. Cette possibilité est rendue active par l'administrateur.

Créer son skin

Conseils

OVIDENTIA utilise la norme XHTML et le doctype 'XHTML 1.0 Transitional' pour toutes ces pages Web. Veuillez à respecter cette norme ; des outils peuvent valider vos pages (ex. : http://validator.w3.org). Veuillez à ne mettre aucune référence en absolue dans vos pages Web : le nom de votre skin ou l'adresse Web de votre site ne doit pas figurer dans votre code. Dans le cas contraire, la modification future du nom de domaine de votre site ou du nom du skin causerait des problèmes.

Exemple avec une image :

Syntaxe correcte : <source lang="xml">

<img src="skins/{ babSkin }/images/bandeau.jpg" alt="" title="">

</source>

Syntaxe incorrecte : <source lang="xml">

<img src="skins/monskin/images/bandeau.jpg" alt="" title="">

</source>

Ici, la variable globale babSkin est utilisée pour remonter le nom du skin courant dans un fichier template.

Afin de rester compatible avec les dernières évolutions d'OVIDENTIA, les fichiers templates dits "non modifiables" ne doivent pas être modifiés. Voir la liste des fichiers templates pour plus de détails.

Fonctionnement dans le noyau

Le noyau d'OVIDENTIA contient un skin de base. Ce skin se nomme 'ovidentia' et rassemble la feuille de styles principale et les fichiers templates gérant toutes les interfaces.

Pour que les skins personnalisés ne soient pas supprimés après chaque mise à jour du noyau OVIDENTIA, ces skins sont placés à la racine du site.

Remarque : faites attention à ne pas confondre les répertoires 'skins' à la racine du site et dans le noyau.

Le moteur de templates

OVIDENTIA utilise un moteur de templates pour gérer toutes ses interfaces. Son principal avantage est de séparer le traitement des données (codes PHP, requêtes SQL...) de leurs visualisations (balises html, styles css...). Ainsi un écran d'OVIDENTIA correspond généralement à un fichier template. Un mini-langage de programmation permet de faire la liaison entre les fichiers PHP et les fichiers HTML.

Le langage OVML

Le langage OVML est propre à OVIDENTIA. Il est rarement utilisé dans le noyau car il est destiné au webmaster afin de lui permettre de dynamiser ses pages. Le noyau fournit une librairie complète sur le contenu d'OVIDENTIA (articles, faqs, forums, fichiers...). Ainsi les pages d'accueil peuvent être dynamiques en affichant par OVML la liste des 10 derniers articles publiés.

• Introduction à l'OVML

Méthode de personnalisation d'un skin

Le webmaster a la possibilité de modifier les styles css et les fichiers templates (interfaces). Sans personnalisations, OVIDENTIA utilise le skin de base contenu dans son noyau.

Personnaliser une interface d'OVIDENTIA revient donc à modifier le fichier template concerné. Afin qu'aucune modification ne soit perdue après mise à jour du noyau, le fichier template du noyau doit être copié dans le skin présent à la racine du site. Avant chaque affichage, OVIDENTIA vérifie donc si le fichier template concerné existe dans le skin choisi par l'utilisateur dans quel cas ce fichier sera utilisé comme affichage. Dans le cas contraire, OVIDENTIA utilisera le fichier template présent dans le noyau.

Modifier la feuille de styles

Il est conseillé de prendre comme base la feuille de styles 'ovidentia.css' du skin 'ovidentia_sw' car elle contient les styles les plus couramment utilisés. La feuille de styles CSS doit être placée dans le répertoire 'styles' de votre skin.

Remarque :

• Vous pouvez imbriquer des feuilles de styles. Cependant, évitez de placer tous les fichiers css dans le répertoire 'styles' de votre skin car dans les interfaces d'administration, OVIDENTIA liste et propose tous les fichiers css de ce répertoire.
• Évitez d'appliquer des styles trop généraux sur les éléments HTML afin de ne pas perturber l'affichage des interfaces.

Modifier un fichier template

Pour des raisons logiques d'évolution du portail, il n'est pas possible de modifier toutes les interfaces d'OVIDENTIA (fichiers templates). Ainsi, seuls quelques fichiers templates sont modifiables par le webmaster. La structure de ces fichiers ne change pas au fur et à mesure des versions d'OVIDENTIA ce qui garantit au webmaster que son skin restera compatible avec les futures versions d'OVIDENTIA.

Pour exemple, le fichier template sectiontemplate.html gère l'affichage des sections. Si vous désirez modifier l'apparence des sections, vous pouvez simplement modifier la feuille de styles du skin. Si vous avez besoin de modifier le balisage HTML des sections, procédez aux opérations suivantes :

• copier le fichier sectiontemplate.html du noyau (racine d'Ovidentia/noyau/skins/ovidentia/templates/) dans votre skin (racine d'Ovidentia/skins/votreskin/templates)
• modifiez le fichier sectiontemplate.html de votre skin

Compatibilité UTF-8 ou ISO-8859-15

Pour qu'un skin soit compatible avec plusieurs encodages, il est nécessaire que celui-ci ne contienne que des caractères ASCII. Exemple : toutes les chaînes de caractères écrites directement dans le skin ne doivent pas contenir de caractères accentués. Ainsi la chaîne "Déposé par Cantico" sera remplacée par "Déposé par Cantico"

Exemples dans CVS

Dans le server CVS d'Ovidentia, il existe plusieurs skins sous forme de modules qui peuvent être utilisés comme exemple. On y retrouve le module "theme_default" qui contiens le skin par défaut d'Ovidentia.

cvs.ovidentia.org:/home/src/public/skins

Mettre un ancien skin dans un module

Avant la version 6.7.92, un skin était un simple répertoire sous le répertoire skins/ à la racine du site. Pour être compatible avec les futures versions, les skins doivent être convertis en modules. Pour le moment seules les installations d'Ovidentia en UTF-8 nécessites obligatoirement que les skins soient dans des modules.

Terminologie

Dans Ovidentia les modules sont constitués de plusieurs répertoires répartis à plusieurs endroits dans l'arborescence. Le répertoire du skin est l'un d'entre eux. Pour les autres répertoire voir l'article Structure des répertoires d'un module

Le nom du skin devient le nom du module. Généralement, les modules contenant un skin ont un nom préfixé par theme_. Le noyau est maintenant distribué avec le module "theme_default" en cas de nouvelle installation.

Le nom donné au répertoire du skin sera le nom du module. Prenons comme exemple "theme_myskin"

Créer le module

Pour créer le module il faut ajouter un répertoire du même nom que le skin dans le répertoire "ovidentia/addons" ou ovidentia est le répertoire du noyau.

 |
 +-Ovidentia
 | +-addons
 |   +-theme_myskin
 |
 +-skins
   +-theme_myskin

Dans le nouveau répertoire, créer les fichiers nécessaires du module :

• addonini.php
• init.php

voici un contenu exemple pour le fichier addonini du module theme_myskin :

<source lang="ini">

<?php/*

[general] name ="theme_myskin" version ="1.0.1" description ="My skin" description.fr ="Ma charte graphique" delete ="1" addon_access_control ="0" ov_version ="6.6.92" author ="Cantico" encoding ="UTF-8" mysql_character_set_database ="latin1,utf8" php_version ="5.1.0"

• / ?>

</source>

Pour plus d'informations sur le fichier ini : Fichiers spécifiques des modules#addonini.php

Si le module ne doit pas effectuer de traitements particuliers en PHP, le fichier init.php peut être vide

Rendre compatible un skin avec l'encodage choisit par l'administrateur (ISO-8859-15 ou UTF-8)

Cette fonctionnalité est disponible à partir de la version 7 d'Ovidentia

Ajouter sous la balise head du fichier page.html :

<source lang="xml"> <meta http-equiv="Content-type" content="{ sContent }" /> </source>

qui sera remplacé par le html suivant :

<source lang="xml"> <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-15" /> </source>

ou

<source lang="xml"> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> </source>