Voir la source de Créer son skin

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.

= 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.

[[Image:1-2-1-1_-_Skin_appliqué_au_site.png|center|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 [[Image:Star_x_orange.gif|top|Etoile]] <strong style="text-decoration:underline">Utiliser ce thème</strong> de la ligne correspondant au skin que vous souhaitez appliquer.

[[Image:Skin_avec_icone.png|center|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 [[#Utilisateur|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é.

[[Image:1-2-1-2_-_Droit_de_modification_de_skin_aux_utilisateurs.png|center]]

== 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é.

[[Image:1-1-2_-_Utilisateur.png|center|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 :

[[Image:Arborescence.png|center|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 :

<source lang="html4strict">
<!--#begin nom_de_mon_patron_d_affichage -->
    Votre code
<!--#end nom_de_mon_patron_d_affichage -->
</source>

'''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.

<source lang="html4strict">
<!--#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 -->
</source>

[[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 [[Liste des variables accessibles depuis tous les templates|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 :

<source lang="ovml">
<!--#if variable -->
    Votre code
<!--#endif variable -->
</source>

'''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 :

<source lang="ovml">
<!--#if variable "== variable2" -->
    Votre code
<!--#endif variable -->
</source>

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

{|class="prettytable"
|+ 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 :

<source lang="ovml">
<!--#if variable "== valeur" -->
    Votre code
<!--#endif -->
</source>

Vous pouvez également tester si une variable est vide :

<source lang="ovml">
<!--#if variable "== " -->
    Votre code
<!--#endif variable -->
</source>

Enfin, il est possible de gérer l'inverse d'une condition grâce au mot-clé ''else'' :
<source lang="ovml">
<!--#if condition -->
    Votre code si la condition est validée
<!--#else condition -->
    Votre code si la condition n'est pas validée
<!--#endif condition -->
</source>

'''Exemples :'''

<source lang="ovml">
<!--#if BAB_SESS_LOGGED -->
    Bienvenue { BAB_SESS_USER }.
<!--#else BAB_SESS_LOGGED -->
    Bienvenue Invité.
<!--#endif BAB_SESS_LOGGED -->
</source>

<source lang="ovml">
<!--#if tg "== " -->
    Vous êtes sur la page d'accueil.
<!--#endif tg -->
</source>

<source lang="ovml">
<!--#if menuitems "&gt; 0" -->
    Menu :
    <!-- Génération du menu -->
<!--#endif menuitems -->
</source>

===== 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 :

<source lang="html4strict">
<!--#in fonction -->
    Votre code
<!--#endin fonction -->
</source>

'''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'' :

<source lang="html4strict">
<!-- Listage des liens d'administration fournis par le noyau d'Ovidentia -->

<ul>
    <!--#in addUrl -->
    <li>
        <a href="{ val }">{ key }</a>
    </li>
    <!--#endin addUrl -->
</ul>
</source>

====== 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'' :

<source lang="html4strict">
<!-- 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 -->
</source>

Une [[Liste des boucles utilisables dans les templates|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 [http://wiki.ovidentia.org/index.php/Liste_des_fichiers_templates_modifiables_dans_les_skins 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'''.

<source lang="html4strict">
<head>
    <!-- Meta d'encodage -->

    <base href="{ babUrlScript }" />

    <!-- Insertion des fichiers JavaScript et CSS -->
</head>
</source>

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

=== 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'''.

<source lang="ovml">
<OFPutVar name="nom_de_la_variable" value="valeur">
</source>

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 ''<nowiki><br /></nowiki>'', ''<nowiki><img src="" alt="" /></nowiki>'', etc.), on ne met pas le slash (/) de fermeture.

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

'''Exemple :'''

<source lang="ovml">
<OFPutVar name="Compteur" value="0">
</source>

====== Affichage ======

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

<source lang="ovml">
<OVnom_de_la_variable>
</source>

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 :'''

<source lang="ovml">
<OVCompteur>
</source>

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.

<source lang="ovml">
<OFPutVar name="Nom" value="Dupont">
<OVNom strcase="upper">
</source>

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|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.

<source lang="ovml">
<OFIfNotIsSet name="nom_de_la_variable" value="valeur">
</source>

Pour une liste complète des fonctions, consultez la [[#Documentation|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 :'''

<source lang="ovml">
<OFAOAddition expr1="valeur" expr2="valeur" saveas="nom_de_la_variable">
</source>

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

<source lang="ovml">
<OFAOAddition expr1="1" expr2="1.5" saveas="Variable">
<OVVariable>
</source>

 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 :'''

<source lang="ovml">
<OFAOAddition expr1="Dupont" expr2="1" saveas="Variable">
<OVVariable>
</source>

 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 :'''

<source lang="ovml">
<OFAOAddition expr1="5Dupont" expr2="1" saveas="Variable">
<OVVariable>
</source>

 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 :'''

<source lang="ovml">
<OFAOAddition expr1="10" expr2="0" saveas="Variable">
<OVVariable>
</source>

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|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 :'''

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

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

{| class="prettytable"
|+ Liste des containers de test
! colspan="3" | Tests de comparaison
|-
! Container !! Condition !! Utilisation
|-
| OCIfEqual || Vrai si expr1 est égal à expr2
| <source lang="ovml">
<OCIfEqual expr1="1" expr2="1">Vrai</OCIfEqual>
<OCIfEqual expr1="0" expr2="1">Faux</OCIfEqual>
</source>
|-
| OCIfNotEqual || Vrai si expr1 est différent expr2
| <source lang="ovml">
<OCIfNotEqual expr1="0" expr2="1">Vrai</OCIfNotEqual>
<OCIfNotEqual expr1="1" expr2="1">Faux</OCIfNotEqual>
</source>
|-
| OCIfLessThan || Vrai si expr1 plus petit strictement que expr2
| <source lang="ovml">
<OCIfLessThan expr1="0" expr2="1">Vrai</OCIfLessThan>
<OCIfLessThan expr1="1" expr2="1">Faux</OCIfLessThan>
<OCIfLessThan expr1="2" expr2="1">Faux</OCIfLessThan>
</source>
|-
| OCIfLessThanOrEqual || Vrai si expr1 plus petit ou égal que expr2
| <source lang="ovml">
<OCIfLessThanOrEqual expr1="0" expr2="1">Vrai</OCIfLessThanOrEqual>
<OCIfLessThanOrEqual expr1="1" expr2="1">Vrai</OCIfLessThanOrEqual>
<OCIfLessThanOrEqual expr1="2" expr2="1">Faux</OCIfLessThanOrEqual>
</source>
|-
| OCIfGreaterThan || Vrai si expr1 plus grande strictement que expr2
| <source lang="ovml">
<OCIfGreaterThan expr1="2" expr2="1">Vrai</OCIfGreaterThan>
<OCIfGreaterThan expr1="1" expr2="1">Faux</OCIfGreaterThan>
<OCIfGreaterThan expr1="0" expr2="1">Faux</OCIfGreaterThan>
</source>
|-
| OCIfGreaterThanOrEqual || Vrai si expr1 plus grande ou égal que expr2
| <source lang="ovml">
<OCIfGreaterThanOrEqual expr1="2" expr2="1">Vrai</OCIfGreaterThanOrEqual>
<OCIfGreaterThanOrEqual expr1="1" expr2="1">Vrai</OCIfGreaterThanOrEqual>
<OCIfGreaterThanOrEqual expr1="0" expr2="1">Faux</OCIfGreaterThanOrEqual>
</source>
|-
! colspan="3" | Tests d'existence
|-
! Container !! Condition !! Utilisation
|-
| OCIfIsSet || Vrai si la variable est déclarée
| <source lang="ovml">
<OFPutVar name="Nom" value="Dupont">

<OCIfIsSet name="Nom">Vrai</OCIfIsSet>
<OCIfIsSet name="Prénom">Faux</OCIfIsSet>
</source>
|-
| OCIfNotIsSet || Vrai si la variable n'est pas déclarée
| <source lang="ovml">
<OFPutVar name="Nom" value="Dupont">

<OCIfNotIsSet name="Prénom">Vrai</OCIfNotIsSet>
<OCIfNotIsSet name="Nom">Faux</OCIfNotIsSet>
</source>
|-
! colspan="3" | Test d'appartenance à un groupe
|-
! Container !! Condition !! Utilisation
|-
| OCIfUserMemberOfGroups || Vrai si la personne fait parti du groupe indiqué
| <source lang="ovml">
<OCIfLessThan groupid="1">Vrai</OCIfLessThan>
</source>
|}

====== 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|documentation OvML]].

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

'''Exemple :'''

<source lang="ovml">
<!-- 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>
</source>

<source lang="ovml">
<!-- 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>
</source>

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

{| class="prettytable sortable"
|+ 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''.

<source lang="ovml">
<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>
</source>

 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.

<source lang="ovml">
<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>
</source>

 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 :'''

<source lang="ovml">
<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>
</source>

 Vous êtes majeur.

Vous pouvez également utiliser des attributs sur ces variables.

'''Exemple :'''

<source lang="ovml">
<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>
</source>

 Bienvenue cher ami !

===== Documentation =====

Une documentation sur les variables, fonctions et containers est disponible sur la page des [http://fr.ovidentia.org/?tg=oml&file=Arborescencefichiers/arborescencefichiers.ovml&idfolder=17&smap_node_id=38 téléchargements] dans ''Downloads > Documentations > Ovidentia-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.

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 '''[[Image:Ovidentia.png|Bouton "Ovidentia" de l'éditeur de texte WYSIWYG]]''' sur l'éditeur WYSIWIG. Une pop-up s'ouvre permettant d'effectuer plusieurs actions, cliquez sur '''[[Image:Insertion_de_fichier_OvML.gif|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.

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

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''.

 <span class="source-ovml">http<span>:</span>//votre-nom-de-domaine.com/<span class="sc2">index.php?''<span class="kw3">tg</span>''='''<span class="st0">oml</span>'''&''<span class="kw3">file</span>''='''<span class="st0">chemin/vers/mon/fichier.ovml</span>'''</span></span>

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

 <span class="source-ovml">http<span>:</span>//votre-nom-de-domaine.com/<span class="sc2">index.php?''<span class="kw3">tg</span>''='''<span class="st0">oml</span>'''&''<span class="kw3">file</span>''='''<span class="st0">chemin/vers/mon/fichier.ovml</span>'''&''<span class="kw3">echo</span>''='''<span class="st0">1</span>'''</span></span>

=== 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 [http://www.w3.org/TR/css3-mediaqueries/ 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.

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

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

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

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

<source lang="html4strict">
<meta charset="iso-8859-15">
<meta charset="utf-8">
</source>

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&amp;eacute;pos&amp;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 [http://wiki.ovidentia.org/index.php?title=Structure_des_r%C3%A9pertoires_d%27un_module 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.

[[Image:Arborescence_skin_module.png|center|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 [http://wiki.ovidentia.org/index.php/Variables_du_fichier_addonini variables du fichier addonini.php] ainsi que ses [http://wiki.ovidentia.org/index.php/Fichiers_sp%C3%A9cifiques_des_modules#addonini.php différentes parties].

'''Exemple :'''

<source lang="ini">
[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"
</source>

==== 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.

[[Image:Skin_avec_icone.png|center|Skin icône]]

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

<source lang="ini">
[general]
...
icon = "icon.png"
</source>

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.

[[Image:Arborescence_images_skin.png|center|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 <code>icon</code> 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.

[[Image:Miniature.png|center|Miniature d'un skin]]

La procédure à suivre est la même que pour l'ajout d'une [[#Ic.C3.B4ne|icône]] à votre skin, mais le nom de la variable à déclarer dans le fichier addonini.php sera <code>image</code> à la place de <code>icon</code>.

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.

[[Image:Skin_avec_icone_configurable.png|center|Skin configurable]]

Pour ce faire, modifiez le fichier [[#addonini.php|addonini.php]] de votre skin en déclarant la variable <code>configuration_page</code> dans la section <b>general</b>, la valeur de cette variable devra correspondre au nom de la page :

<source lang="ini">
[general]
...
configuration_page = "configuration"
</source>

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

Consultez la [http://wiki.ovidentia.org/index.php/Accueil 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é.

[[Image:Arborescence_complète.png|center|Arborescence complète d'un skin modularisé]]