Créer son skin

Un article de OviWiki.

Les skins sont des thèmes graphiques pouvant être appliqués aux sites créés avec Ovidentia. Ils sont personnalisables afin de pouvoir correspondre au mieux à vos attentes pour l'apparence de vos pages et de leurs structures.

Un skin est principalement constitué de fichiers HTML, OvML, JavaScript et d'images.

Sommaire

Gestion

Il est possible pour un site de posséder plusieurs skins administrables via l'interface d'Ovidentia.

Administrateur

Installer un skin

Pour installer un skin, rendez-vous dans le menu Administration > Ajouter/Supprimer des programmes > Skins puis cliquez sur Charger un nouveau skin. Sélectionnez le fichier au format .zip contenant le skin puis cliquez sur Déposer.

Si l'opération s'est bien déroulée, le skin est désormais utilisable sur le site web.

Liste des skins installés

Pour accéder à la liste des skins installés, rendez-vous dans le menu Administration > Ajouter/Supprimer des programmes > Skins.

Skin appliqué au site

Skin non modularisé

Afin de modifier le skin appliqué au site web, rendez-vous dans le menu Administration > Sites, choisissez le site dont vous souhaitez modifier le skin dans la liste de vos sites puis cliquez sur Configuration du site. Vous pourrez alors, à la ligne Skin, sélectionner celui qui doit être appliqué au site pour les utilisateurs non connectés ou les utilisateurs connectés n'ayant pas modifié le style appliqué au site.

La première liste contient les noms des différents skins disponibles sur le site. La seconde permet de choisir quel fichier CSS doit être utilisé comme feuille de style principale.

Modification du skin appliqué au site

Skin modularisé

Si votre skin est un module, il est possible de le sélectionner depuis la liste des modules. Rendez-vous dans le menu Administration > Ajouter / Supprimer des programmes > Skins puis cliquez sur le lien Etoile Utiliser ce thème de la ligne correspondant au skin que vous souhaitez appliquer.

Skin modularisé

Attention, ce lien n'apparaît pas si l'utilisateur sur lequel vous êtes connecté utilise le skin de la ligne concernée. Il vous faut alors changer le skin de l'utilisateur, sachant qu'il est préférable de conserver le skin du site.

Droit de modification de skin aux utilisateurs

Afin d'autoriser ou d'interdire aux utilisateurs connectés de choisir le skin qu'ils souhaitent appliquer au site web, rendez-vous dans le menu Administration > Sites, choisissez le site dont vous souhaitez modifier le skin dans la liste de vos sites puis cliquez sur Options de l'utilisateur. Vous pourrez alors, à la ligne L'utilisateur peut choisir son skin, choisir d'autoriser ou non l'utilisateur à choisir le skin qu'il souhaite voir appliqué au site web lorsqu'il est connecté.

La modification du skin effectuée par un utilisateur n'est visible que par celui-ci quand il est connecté.

Utilisateur

La modification du style pour un utilisateur n'est possible que si l'administrateur l'a permis.

Afin de modifier le skin appliqué au site web lorsque vous êtes connecté, rendez-vous dans le menu Utilisateur > Options. Vous pourrez alors, à la section Mise à jour du skin, sélectionner celui qui doit être appliqué au site lorsque vous êtes connecté. Cliquez sur Mise à jour du skin afin de valider la modification.

La modification du skin effectuée n'est visible que par vous quand vous êtes connecté.

Modification du skin pour l'utilisateur connecté

Créer un skin

Structure

Les skins disponibles sur votre site internet sont stockés dans le dossier skins, enfant direct du dossier contenant votre site créé avec Ovidentia.

Attention à ne pas confondre le dossier skins à la racine de votre site avec le dossier ovidentia > skins. Ce dernier contient le skin de base d'Ovidentia. Vos skins personnalisés sont placés à la racine du site pour ne pas être supprimés à chaque mise à jour du noyau.

Les skins sont composés de trois sous-dossiers obligatoires :

  • ovml : ce dossier contient les fichiers OvML (Ovidentia Markup Language) permettant la génération dynamique de contenu. Il contient également parfois les styles spécifiques des "modules" OvML afin de pouvoir être exportés plus facilement. Ces styles peuvent également être indiqués directement dans le fichier OvML.
  • styles : ce dossier contient les feuilles de style de votre site web.
  • templates : ce dossier contient les templates personnalisés.

D'autres sous-dossiers facultatifs peuvent également apparaître dans le skin comme les dossiers :

  • images : ce dossier contient les images nécessaires à la personnalisation du skin (et non pas les images de contenu).
  • scripts : ce dossier contient les fichiers JavaScript.

L'arborescence de votre skin ressemblera donc généralement à la suivante :

Arborescence d'un skin

Personnalisation

Partir d'un thème existant semble être un bon moyen de débuter la création d'un nouveau skin. Cela permet de poser une structure proche de celle que l'on souhaite en minimisant le nombre de modifications à effectuer.

Templates

Les fichiers contenus dans le dossier template sont des gabarits pour les différentes pages du site. Ils permettent de créer la structure des pages de votre site internet.

Leur intérêt réside dans la séparation qu'ils permettent entre le traitement des données effectué par PHP et leur affichage.

Un mini-langage de programmation a été créé pour ces templates permettant de dynamiser votre site.

Patrons d'affichage

Les patrons d'affichage permettent de créer plusieurs apparences pour une même page.

Les patrons d'affichage se font sous forme de commentaires HTML.

La création d'un patron d'affichage se fait de la manière suivante :

<!--#begin nom_de_mon_patron_d_affichage -->
    Votre code
<!--#end nom_de_mon_patron_d_affichage -->

Attention, il ne faut pas oublier de ne pas mettre d'espace avant le dièse (#) et d'en mettre un après le nom de la variable.

Certains templates nécessitent deux patrons d'affichage car ils gèrent deux écrans différents. Par exemple, le template topicsdisplay.html contient deux patrons par défaut : un pour lister les différents articles du thème et un pour afficher un article en particulier.

<!--#begin head_nom_de_mon_patron_d_affichage -->
    Votre code
<!--#end head_nom_de_mon_patron_d_affichage -->
 
<!--#begin body_nom_de_mon_patron_d_affichage -->
    Votre code
<!--#end body_nom_de_mon_patron_d_affichage -->

Liste des templates possédant des patrons d'affichage

Mini-langage de templates

Le mini-langage de templates permet de dynamiser le contenu de la page grâce à l'utilisation de variables.

Affichage d'une variable

Les variables qu'il est possible d'afficher dépendent de la classe qui appelle le template.

Néanmoins, il existe des variables accessibles depuis tous les templates :

L'affichage d'une variable dans un template se fait de la manière suivante :

{ variable }

Exemple :

{ babSlogan }
Condition

Les conditions se font sous forme de commentaires HTML.

La vérification de l'existence d'une variable ou du fait qu'elle soit vide se fait de la manière suivante :

<!--#if variable -->
    Votre code
<!--#endif variable -->

Attention, il ne faut pas oublier de ne pas mettre d'espace avant le dièse (#) et d'en mettre un après le nom de la variable.

Il est également possible de comparer la valeur d'une variable avec une autre variable :

<!--#if variable "== variable2" -->
    Votre code
<!--#endif variable -->

Les différents opérateurs de comparaison existant sont les suivants :

Liste des opérateurs utilisables dans le mini-langage de templates
Symbole Signification
==Egal à
!=Différent de
>Supérieur à
<Inférieur à
>=Supérieur ou égal à
<=Inférieur ou égal à

De la même manière, il est possible de comparer la valeur d'une variable avec une chaîne de caractères ou un nombre :

<!--#if variable "== valeur" -->
    Votre code
<!--#endif -->

Vous pouvez également tester si une variable est vide :

<!--#if variable "== " -->
    Votre code
<!--#endif variable -->

Enfin, il est possible de gérer l'inverse d'une condition grâce au mot-clé else :

<!--#if condition -->
    Votre code si la condition est validée
<!--#else condition -->
    Votre code si la condition n'est pas validée
<!--#endif condition -->

Exemples :

<!--#if BAB_SESS_LOGGED -->
    Bienvenue { BAB_SESS_USER }.
<!--#else BAB_SESS_LOGGED -->
    Bienvenue Invité.
<!--#endif BAB_SESS_LOGGED -->
<!--#if tg "== " -->
    Vous êtes sur la page d'accueil.
<!--#endif tg -->
<!--#if menuitems "&gt; 0" -->
    Menu :
    <!-- Génération du menu -->
<!--#endif menuitems -->
Boucle

Les boucles se font sous forme de commentaires HTML.

Dans certains templates, il est possible d'utiliser des boucles, mais pas dans tous.

Les boucles correspondent à des fonctions appelées jusqu'à ce que celles-ci ne renvoient plus rien. Il n'est actuellement pas possible de connaître la liste des fonctions utilisables dans chaque template via une documentation, mais il est possible de voir les fonctions utilisées dans les templates déjà existants.

Utilisation

L'utilisation d'une boucle se fait de la manière suivante :

<!--#in fonction -->
    Votre code
<!--#endin fonction -->

Attention, il ne faut pas oublier de ne pas mettre d'espace avant le dièse (#) et d'en mettre un après le nom de la fonction.

Chaque boucle permet l'utilisation de variables particulières.

Exemple :

Dans le template adminsection.html :

<!-- Listage des liens d'administration fournis par le noyau d'Ovidentia -->
 
<ul>
    <!--#in addUrl -->
    <li>
        <a href="{ val }">{ key }</a>
    </li>
    <!--#endin addUrl -->
</ul>
Dépendance

Certaines boucles sont dépendantes d'une autre boucle et ne peuvent être appelées qu'à l'intérieur de ces boucles dont elles dépendent.

Il suffit pour cela d'imbriquer les deux boucles concernées.

Exemple :

Dans le template topicsdisplay.html :

<!-- Listage des tags / mots-clés d'un article -->
 
<!--#in getnext -->
    Tags :
    <ul>
    <!--#in getnexttag -->
        <li>
            <a href="{ searchurl }">{ tagname }</a>
        </li>
    <!--#endin getnexttag -->
    </ul>
<!--#endin getnext -->

Une liste des boucles et de leurs variables utilisables dans les templates est disponible afin de vous renseigner sur les boucles existantes selon le template.

Templates modifiables

La liste des templates modifiables ainsi que leurs fonctions respectives est disponible dans la liste des fichiers templates modifiables dans les skins.

Pour récupérer les templates originaux, rendez-vous à la racine de votre site. Vous avez normalement un ou plusieurs dossiers nommés ovidentia-numero-de-version, ouvrez celui avec le dernier numéro de version. Rendez-vous ensuite dans skins / ovidentia / templates. De là, vous pourrez récupérer les templates que vous souhaitez modifier.

Les variables utilisables sont généralement indiquées dans des commentaires HTML situés en haut de ces fichiers de template modifiables.

Attention, en réalité, tous les templates sont modifiables, mais il est conseillé de ne modifier que les templates de la liste donnée ci-dessus afin de permettre les améliorations des templates lors des mises à jour d'Ovidentia. Les templates de la liste ci-dessus peuvent en revanche être modifiés sans crainte.

page.html

Rendre son skin compatible avec la réécriture d'URL

Afin de rendre son skin compatible avec la réécriture d'URL, il est nécessaire de modifier la balise head de votre fichier page.html en ajoutant un élément de type base.

<head>
    <!-- Meta d'encodage -->
 
    <base href="{ babUrlScript }" />
 
    <!-- Insertion des fichiers JavaScript et CSS -->
</head>

Cela permet de convertir toutes les chemins relatifs en chemins absolus afin d'éviter les requêtes vers des fichiers inexistants.


Un exemple de <head> complet :

<head>
    <!-- Définition de l'encodage de la page -->
    <meta http-equiv="Content-type" content="{ sContent }"/>
 
    <base href="{ babUrlScript }" />
 
    <title>{ babSiteName }<!--#if pageTitle --> - { pageTitle }<!--#endif pageTitle --></title>
 
    <!--#if pageKeywords -->
    <meta name="keywords" content="{ pageKeywords }" />
    <!--#endif pageKeywords -->
 
    <!--#if pageDescription -->
    <meta name="description" content="{ pageDescription }" />
    <!--#endif pageDescription -->
 
    <meta name="generator" content="Ovidentia" />
 
    <!--#if canonicalUrl -->
    <link rel="canonical" href="{ canonicalUrl }" />
    <!--#endif canonicalUrl -->
 
    <!--#if imageUrl -->
    <link rel="image_src" href="{ imageUrl }" />
    <!--#endif imageUrl -->
 
    <script type="text/javascript" src="{ babOvidentiaJs }"></script>
    <!--#if script -->
    <script type="text/javascript"><!-- { script } --></script>
    <!--#endif script -->
 
    <link rel="stylesheet" type="text/css" href="{ babCssPath }" media="screen" title="Default" />
 
    { babHeadStyleSheets }
 
</head>

OvML

Les fichiers contenus dans le dossier OvML sont des morceaux de pages plus ou moins conséquents qui pourront être intégrés sur différentes pages de votre site. Il permet également de générer du contenu de manière dynamique.

Le langage OvML

L'OvML est, à l'instar du (x)HTML et du XML, un langage à balises. La différence réside dans le fait que c'est un langage compilé par PHP qui permettra par la suite de générer du contenu.

Conventions de nommage

Il existe trois types de composants en OvML : les variables, les fonctions et les containers. Par convention, les composants d'un même type commenceront tous par les même lettres :

  • les variables : OV
  • les fonctions : OF
  • les containers : OC
Variables
Déclaration

Pour déclarer une variable ou pour affecter une nouvelle valeur à une variable existante, on utilise la fonction PutVar.

<OFPutVar name="nom_de_la_variable" value="valeur">

Vous remarquerez que bien qu'il s'agit d'un élément auto-fermant (il n'a pas besoin de balise de fermeture comme pour <br />, <img src="" alt="" />, etc.), on ne met pas le slash (/) de fermeture.

Les variables peuvent contenir des nombres ou bien des chaînes de caractères.

Exemple :

<OFPutVar name="Compteur" value="0">
Affichage

Pour afficher une variable, il suffit de l'appeler dans une balise avec le préfixe des variables OV.

<OVnom_de_la_variable>

Comme pour la fonction de déclaration, l'affichage d'une variable est un élément auto-fermant ne nécessitant pas de slash (/) de fermeture.

Exemple :

<OVCompteur>

Quelques opérations de traitement peuvent être utilisées sur les variables, par exemple l'attribut strcase permet de modifier la casse d'une variable.

<OFPutVar name="Nom" value="Dupont">
<OVNom strcase="upper">

Ce code affichera la chaîne de caractère suivante :

DUPONT

Pour une liste complète des attributs utilisables sur les variables, consultez la documentation OvML.

Fonctions

Les fonctions permettent de réaliser diverses opérations autonomes ou liées aux variables. Bien qu'étant auto-fermantes, elles ne nécessitent pas de slash (/) lors de leur utilisation.

Elles peuvent prendre divers attributs obligatoires ou optionnels selon la fonction appelée.

Par exemple, la fonction IfNotIsSet permet d'affecter une valeur à une variable si celle-ci n'est pas déclarée. Toutes les fonctions sont précédées du préfixe OF et contenues dans une balise lors de leur appel.

<OFIfNotIsSet name="nom_de_la_variable" value="valeur">

Pour une liste complète des fonctions, consultez la documentation OvML.

Opérations arithmétiques

Un type de fonctions couramment utilisé concerne les opérations arithmétiques sur les variables. Ces fonctions possèdent toutes le préfixe AO (pour Arithmetic Operator).

Exemple :

<OFAOAddition expr1="valeur" expr2="valeur" saveas="nom_de_la_variable">

Pour effectuer des opérations sur des nombres décimaux, la virgule doit être remplacée par un point.

<OFAOAddition expr1="1" expr2="1.5" saveas="Variable">
<OVVariable>
2.5

Si l'une des valeurs envoyée au paramètre expr1 ou expr2 est une chaîne de caractères ne démarrant pas par un nombre, alors sa valeur sera substituée par 0.

Exemple :

<OFAOAddition expr1="Dupont" expr2="1" saveas="Variable">
<OVVariable>
1

"Dupont" n'étant pas une chaîne de caractères débutant par un nombre, il a été remplacé par la valeur 0, Variable valait donc 0 + 1 = 1.

Si la chaîne de caractères envoyée débute par un nombre, alors ce nombre substituera la chaîne de caractères.

Exemple :

<OFAOAddition expr1="5Dupont" expr2="1" saveas="Variable">
<OVVariable>
6

"5Dupont" débutant étant une chaîne de caractères débutant par un nombre, elle a été remplacée par la valeur 0, Variable valait donc 5 + 1 = 6.

Une opération impossible renverra un résultat vide. Cela peut arriver lors d'une division par 0 ou lors du calcul d'un nombre modulo un nombre décimal.

Exemple :

<OFAOAddition expr1="10" expr2="0" saveas="Variable">
<OVVariable>

Ce code n'affichera rien car l'opération n'est pas valide.

Containers

Les containers sont des éléments à balises ouvrantes et fermantes. Ils sont précédés par le préfixe OC lors de leur appel.

Les containers possèdent deux fonctions principales : ils permettent de gérer les conditions dans un code et de lister des éléments issus de la base de données.

Pour une liste complète des containers, consultez la documentation OvML.

Condition

Les conditions permettent de générer du code si une condition est réalisée. Ils sont tous précédés du préfixe If. Par exemple, le container IfEqual permet de vérifier l'égalité entre deux valeurs.

Exemple :

<OCIfEqual expr1="0" expr2="1">
    Ce code sera affiché si 0 et 1 sont égaux, c'est à dire jamais.
</OCIfEqual>

Il existe ainsi neuf containers permettant d'effectuer des tests. Voici la liste de ceux-ci.

Liste des containers de test
Tests de comparaison
Container Condition Utilisation
OCIfEqual Vrai si expr1 est égal à expr2
<OCIfEqual expr1="1" expr2="1">Vrai</OCIfEqual>
<OCIfEqual expr1="0" expr2="1">Faux</OCIfEqual>
OCIfNotEqual Vrai si expr1 est différent expr2
<OCIfNotEqual expr1="0" expr2="1">Vrai</OCIfNotEqual>
<OCIfNotEqual expr1="1" expr2="1">Faux</OCIfNotEqual>
OCIfLessThan Vrai si expr1 plus petit strictement que expr2
<OCIfLessThan expr1="0" expr2="1">Vrai</OCIfLessThan>
<OCIfLessThan expr1="1" expr2="1">Faux</OCIfLessThan>
<OCIfLessThan expr1="2" expr2="1">Faux</OCIfLessThan>
OCIfLessThanOrEqual Vrai si expr1 plus petit ou égal que expr2
<OCIfLessThanOrEqual expr1="0" expr2="1">Vrai</OCIfLessThanOrEqual>
<OCIfLessThanOrEqual expr1="1" expr2="1">Vrai</OCIfLessThanOrEqual>
<OCIfLessThanOrEqual expr1="2" expr2="1">Faux</OCIfLessThanOrEqual>
OCIfGreaterThan Vrai si expr1 plus grande strictement que expr2
<OCIfGreaterThan expr1="2" expr2="1">Vrai</OCIfGreaterThan>
<OCIfGreaterThan expr1="1" expr2="1">Faux</OCIfGreaterThan>
<OCIfGreaterThan expr1="0" expr2="1">Faux</OCIfGreaterThan>
OCIfGreaterThanOrEqual Vrai si expr1 plus grande ou égal que expr2
<OCIfGreaterThanOrEqual expr1="2" expr2="1">Vrai</OCIfGreaterThanOrEqual>
<OCIfGreaterThanOrEqual expr1="1" expr2="1">Vrai</OCIfGreaterThanOrEqual>
<OCIfGreaterThanOrEqual expr1="0" expr2="1">Faux</OCIfGreaterThanOrEqual>
Tests d'existence
Container Condition Utilisation
OCIfIsSet Vrai si la variable est déclarée
<OFPutVar name="Nom" value="Dupont">
 
<OCIfIsSet name="Nom">Vrai</OCIfIsSet>
<OCIfIsSet name="Prénom">Faux</OCIfIsSet>
OCIfNotIsSet Vrai si la variable n'est pas déclarée
<OFPutVar name="Nom" value="Dupont">
 
<OCIfNotIsSet name="Prénom">Vrai</OCIfNotIsSet>
<OCIfNotIsSet name="Nom">Faux</OCIfNotIsSet>
Test d'appartenance à un groupe
Container Condition Utilisation
OCIfUserMemberOfGroups Vrai si la personne fait parti du groupe indiqué
<OCIfLessThan groupid="1">Vrai</OCIfLessThan>
Listage d'éléments

Les containers permettant de lister des éléments sont beaucoup plus nombreux. Ce sont eux qui vont permettre de récupérer du contenu dans la base de données.

Généralement, on distingue ceux qui récupèrent plusieurs éléments de ceux qui n'en récupèrent qu'un seul grâce à leur nom. Les containers récupérant plusieurs éléments sont souvent au pluriel et ceux ne récupérant qu'un seul élément sont souvent au singulier.

Comme pour les fonctions, des paramètres peuvent être nécessaires aux containers pour pouvoir fonctionner comme vous le souhaiter. Ces paramètres sont indiqués dans la documentation OvML.

Chaque container permet d'accéder à des variables selon l'élément courant. Ces variables sont définies dans la documentation OvML et dépendent du container utilisé.

Exemple :

<!-- Ce code permet de récupérer les articles d'un thème d'articles donné. -->
<ul>
    <OCArticles topicid="1" rows="5">
        <!--
            ‹OVArticleTitle› est une variable accessible depuis le container ‹OCArticles›.
            Elle récupère le titre de l'article couramment parcouru.
        -->
        <li><OVArticleTitle></li>
    </OCArticles>
</ul>
<!-- Ce code permet de récupérer un article précis. -->
<ul>
    <OCArticle articleid="1">
        <!-- ‹OVArticleTitle› est une variable accessible depuis le container ‹OCArticle›. -->
        <li><OVArticleTitle></li>
    </OCArticle>
</ul>

Voici une liste des "familles" de containers ainsi que de courtes descriptions sur leurs fonctions.

Liste des familles de containers
Famille Sujet
OCArticle* Articles, les thèmes d'articles et les catégories
OCDbDirectory* Annuaires stockés en base de données
OCDelegation* Délégations des utilisateurs
OCCalendar* Agendas
OCFaq* Faqs
OCFolder*, OCFile* Fichiers uploadés
OCForum*, OCThread, OCPost* Posts, sujets et forums
OCRecent* Dernières modifications sur le site internet
OCSitemap* Arborescence du site
OCWaiting* Éléments en attendant d'approbation
Emboîtement de containers

Il peut arriver d'avoir besoin d'emboîter deux containers du même type. Dans ce cas, il est nécessaire de bien identifier chaque container à l'aide d'un paramètre qui servira d'identifiant, sans quoi, des problèmes peuvent survenir.

Le problème apparu va être montré à l'aide d'un exemple. Je souhaite afficher un message en fonction du nom et du prénom de quelqu'un. Je fais un test pour comparer son nom puis un autre dedans pour comparer son prénom (dans la pratique, ce cas de figure n'apparaîtra sûrement jamais, mais c'est à vous de voir ce que vous souhaitez faire !).

Avec le code ci-dessous, je m'attends à voir s'afficher Ah ! Vous êtes de la famille ! étant donné que le nom est bien Dupont mais que le prénom n'est pas Michel.

<OCIfEqual expr1="Dupont" expr2="Dupont">
    <OCIfEqual expr1="Jean" expr2="Michel">
        Bonjour Michel ! Comment vas-tu ?<br />
    </OCIfEqual>
    <OCIfNotEqual expr1="Jean" expr2="Michel">
        Ah ! Vous êtes de la famille !<br />
    </OCIfNotEqual>
</OCIfEqual>
<OCIfNotEqual expr1="Dupont" expr2="Dupont">
    Mais qui êtes-vous ?<br />
</OCIfNotEqual>
Bonjour Michel ! Comment vas-tu ?
Ah ! Vous êtes de la famille !

Comme vous le voyez, le premier message s'est affiché, malgré le fait que le prénom ne soit pas Michel. Pour résoudre ce problème, il suffit, comme dit précédemment, d'ajouter un attribut aux containers emboîtés pour permettre de les distinguer.

<OCIfEqual expr1="Dupont" expr2="Dupont" i10>
    <OCIfEqual expr1="Jean" expr2="Michel" i20>
        Bonjour Michel ! Comment vas-tu ?<br />
    </OCIfEqual i20>
    <OCIfNotEqual expr1="Jean" expr2="Michel" i20>
        Ah ! Vous êtes de la famille !<br />
    </OCIfNotEqual i20>
</OCIfEqual i10>
<OCIfNotEqual expr1="Dupont" expr2="Dupont" i10>
    Mais qui êtes-vous ?<br />
</OCIfNotEqual i10>
Ah ! Vous êtes de la famille !

Grâce à l'ajout de ces attributs, seul le message attendu apparaît. Par sécurité, il est conseillé de toujours rajouter un attribut d'identification à un container.

Note de l'auteur : Pour ma part, les containers de tests (OCIf*) ont un identifiant commençant par i et les autres commencent par c. Ensuite, j'incrémente de 10 unités à chaque nouveau sous-container. Cela me permet de différencier rapidement les tests des données et d'introduire facilement un nouveau container entre deux si besoin.

Utilisation des variables dans les fonctions et containers

Il est possible d'utiliser la valeur d'une variable comme paramètre pour une fonction ou un container. Il suffit pour cela de mettre le code permettant d'afficher la variable à la place de la valeur du paramètre.

Exemple :

<OFPutVar name="Age" value="20">
 
<OCIfLessThan expr1="&lt;OVAge&gt;" expr2="18" i10>
    Vous êtes mineur.
</OCIfLessThan i10>
<OCIfGreaterThanOrEqual expr1="&lt;OVAge&gt;" expr2="18" i10>
    Vous êtes majeur.
</OCIfGreaterThanOrEqual i10>
Vous êtes majeur.

Vous pouvez également utiliser des attributs sur ces variables.

Exemple :

<OFPutVar name="Nom" value="Dupont">
 
<OCIfEqual expr1="&lt;OVNom strcase="upper"&gt;" expr2="DUPONT" i10>
    Bienvenue cher ami !
</OCIfEqual i10>
<OCIfNotEqual expr1="&lt;OVNom strcase="upper"&gt;" expr2="DUPONT" i10>
    Imposteur !
</OCIfNotEqual i10>
Bienvenue cher ami !
Documentation

Une documentation sur les variables, fonctions et containers est disponible sur la page de documentation sur l'OvML.

Fichiers OvML

Pages d'accueil

Il existe deux fichiers OvML importants. Il s'agit des pages d'accueil. Ovidentia possède deux pages d'accueil, une publique accessible aux utilisateurs non connectés et une privée accessible aux utilisateurs connectés.

Ces deux pages sont personnalisables et sont générées grâce à l'OvML, elles sont donc logiquement situées dans le dossier ovml du skin, il s'agit des fichiers private.html et public.html, respectivement associées à la page d'accueil privée et à la page d'accueil publique.

Si vous supprimez ces deux fichiers, alors ce sera le template entry.html qui sera utilisé.

Insertion dans une page

Pour pouvoir être utilisé, un fichier OvML doit être situé dans le dossier ovml de votre skin, sans quoi il ne sera pas possible de l'utiliser.

Bien que l'insertion d'un fichier OvML depuis un article à l'aide de l'interface graphique filtre les fichiers selon leur extension, un fichier OvML peut toutefois posséder n'importe quelle extension (ou aucune) sans altérer son interprétation.

Mini langage de templates

L'insertion d'un fichier OvML dans un template se fait de la manière suivante :

{ $OVML(chemin/vers/mon/fichier.ovml) }

Le chemin est relatif au dossier ovml de votre skin (et non pas au template qui l'appelle). Le fichier appelé ci-dessus sera donc situé dans le dossier ovml/chemin/vers/mon/fichier.ovml de votre skin.

Exemple :

{ $OVML(carrousel.ovml) }
Article

L'insertion d'un fichier OvML dans un article peut se faire de deux façons différentes.

Soit en insérant le code suivant dans l'article :

$OVML(chemin/vers/mon/fichier.ovml)

Le chemin est relatif au dossier ovml de votre skin.

Soit en cliquant sur le bouton Bouton "Ovidentia" de l'éditeur de texte WYSIWYG sur l'éditeur WYSIWIG. Une pop-up s'ouvre permettant d'effectuer plusieurs actions, cliquez sur Bouton d'insertion d'un fichier OvML dans un article Insérer un fichier OvML. L'arborescence du dossier ovml de votre skin apparait alors listant ses dossiers et la liste des fichiers .ovml, .oml, .html et .htm. Il suffit alors de cliquer sur le fichier souhaité.

Fichier OvML

L'insertion d'un fichier OvML dans un second fichier OvML se fait à l'aide de la fonction Include du langage OvML.

<OFInclude file="chemin/vers/mon/fichier.ovml">

Le chemin est relatif au dossier ovml de votre skin (et non pas au fichier OvML qui l'appelle).

Appel direct

Il est également possible d'appeler un fichier OvML directement grâce à une URL particulière.

L'URL suivante permet d'afficher un fichier OvML inclu dans le template page.html.

http://votre-nom-de-domaine.com/index.php?tg=oml&file=chemin/vers/mon/fichier.ovml

Pour n'afficher que le contenu du fichier OvML sans template, il faut rajouter un paramètre à l'URL.

http://votre-nom-de-domaine.com/index.php?tg=oml&file=chemin/vers/mon/fichier.ovml&echo=1

Feuilles de style

Les feuilles de style doivent être situées dans le dossier styles de votre skin. Pour des raisons de performance, il est préférable de regrouper toutes les règles dans une seule feuille de style.

Attention, toutes les feuilles de style situées dans à la racine du sous-dossier style de votre skin seront listées lors de la modification du skin par l'administrateur ou un utilisateur. Il est donc préférable de créer une seule feuille de style à la racine puis de les mettre dans un sous-dossier du dossier style (à moins que vous ne souhaitiez proposer plusieurs variantes de votre skin, comme plusieurs largeurs différentes).

Différents médias

Il est important pour certains sites de gérer plusieurs types de médias. Pour ce faire, l'utilisation de media queries devient indispensable.

Certains sites auront besoin d'être responsive et d'autres devront pouvoir être imprimés correctement. Il vous revient donc le choix de regrouper toutes les feuilles de style en une seule prenant en compte tous les médias ou de les diviser en plusieurs feuilles de style. Dans le second cas, il est conseillé de créer un sous-répertoire medias dans le dossier styles de votre skin afin de ne pas proposer aux utilisateurs du site internet dans les options les feuilles de styles liées à d'autre médias.

Encodage du skin

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

Dans le fichier templates / page.html de votre skin, situez la balise meta définissant le type de contenu.

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

Modifiez sa valeur pour qu'elle corresponde à l'encodage utilisé.

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

Si vous utilisez HTML5, la définition de la balise meta pour préciser l'encodage est désormais raccourcie.

<meta charset="iso-8859-15">
<meta charset="utf-8">

Pour qu'un skin soit compatible avec plusieurs encodages, il est nécessaire que celui-ci ne contienne que des caractères ASCII.

Exemple :

Déposé par Cantico

doit être remplacé par

D&eacute;pos&eacute; par Cantico

Créer un module depuis son skin

Depuis la version 6.7.92 d'Ovidentia, un skin doit être converti en module afin d'être compatible avec les futures versions.

Terminologie

Dans Ovidentia, les modules sont constitués de plusieurs répertoires situés à divers endroits de l'arborescence. Le répertoire du skin est l'un d'entre eux.

Les différents répertoires composant un module sont listés dans l'article sur la structure des répertoires d'un module.

Le nom du skin devient le nom du module. Par convention, 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.

Créer le module

Pour créer le module, rendez-vous à la racine de votre site. Vous avez normalement un ou plusieurs dossiers nommés ovidentia-numero-de-version, ouvrez celui avec le dernier numéro de version. Rendez-vous ensuite dans addons et créez un dossier ayant le même nom que votre skin.

Arborescence d'un skin/module

Dans ce répertoire, deux fichiers sont obligatoires, il s'agit de addonini.php et init.php.

addonini.php

Le fichier addonini.php permet de donner des informations sur votre skin qui pourront être exploitées par Ovidentia, telles que son nom, sa version, son auteur, ses dépendances, etc.

N'hésitez pas à aller voir la liste des variables du fichier addonini.php ainsi que ses différentes parties.

Exemple :

[general]
name                            = "ovidentia_sw"
version                         = "1.0"
description                     = "Ovidentia skin base"
description.fr                  = "Base de skin Ovidentia"
icon                            = "icon.png"
image                           = "thumbnail.png"
delete                          = "1"
addon_access_control            = "0"
ov_version                      = "7.0"
author                          = "Cantico"
encoding                        = "UTF-8"
mysql_character_set_database    = "latin1,utf8"
php_version                     = "5.1.0"

ini.php

Si aucun traitement PHP ne doit être effectué par le module, alors le fichier init.php peut rester vide.

Aperçu du skin

Il est possible de créer un aperçu de votre skin dans la liste des modules en l'illustrant par une icône ainsi qu'un aperçu miniature.

Icône

L'icône ajoutée à votre skin sera affichée dans la liste des skins accessibles depuis Administration > Ajouter / Supprimer des programmes > Skins.

Cela permet notamment de retrouver votre skin plus rapidement parmi une longue liste de skins.

Skin icône

Pour ce faire, modifiez le fichier addonini.php de votre skin en déclarant la variable icon dans la section general, la valeur de cette variable devra correspondre au nom de l'image représentant votre skin :

[general]
...
icon = "icon.png"

Rendez-vous ensuite à la racine de votre site. Vous avez normalement un ou plusieurs dossiers nommés ovidentia-numero-de-version, ouvrez celui avec le dernier numéro de version. Rendez-vous ensuite dans skins / ovidentia / images / addons et créez un dossier ayant le même nom que votre skin.

Arborescence des images représentant un skin

Il vous suffit ensuite d'enregistrer votre image dans le dossier que vous venez de créer en la nommant avec la valeur affectée à la variable icon dans le fichier addonini.php.

Dans un souci d'ergonomie, nous vous conseillons de ne pas dépasser une taille de 50*50 pixels pour votre icône.

Aperçu miniature

L'aperçu miniature ajouté à votre skin sera affiché dans les détails de votre skin accessibles depuis Administration > Ajouter / Supprimer des programmes > Skins puis en cliquant sur le nom de votre skin.

Cela permet à l'utilisateur d'avoir un aperçu du skin.

Miniature d'un skin

La procédure à suivre est la même que pour l'ajout d'une icône à votre skin, mais le nom de la variable à déclarer dans le fichier addonini.php sera image à la place de icon.

Dans un souci d'ergonomie, nous vous conseillons de ne pas dépasser une taille de 200*150 pixels pour votre miniature.

Configuration du skin

Il est possible lorsque votre skin est un module d'ajouter une page de configuration pour celui-ci qui sera accessible depuis Administration > Ajouter / Supprimer des programmes > Skins sur la ligne de votre skin.

Skin configurable

Pour ce faire, modifiez le fichier addonini.php de votre skin en déclarant la variable configuration_page dans la section general, la valeur de cette variable devra correspondre au nom de la page :

[general]
...
configuration_page = "configuration"

Ici, configuration_page valant "configuration", la page appelée sera configuration.php. Vous pouvez y mettre le code PHP que vous souhaitez.

Consultez la page d'accueil du wiki d'Ovidentia pour accéder aux documentations des différentes API disponibles.

Arborescence complète

Voici un aperçu récapitulant l'arborescence complète d'un skin modularisé.

Arborescence complète d'un skin modularisé