Intégration de skin : Différence entre versions

Version du 2 juin 2009 à 16:15

Cet article guide l'utilisateur dans l'intégration d'un skin en module (à partir de la version 7.0 d'Ovidentia).

Pour commencer l'intégration il faut partir d'un modèle, soit sous forme de fichiers html et css, soit sous forme de charte graphique en images. (On peut trouver des modèles gratuits sur des sites de WebDesign open source)

En premier lieu, il faut créer une archive de skin grâce au module conversion skin/module, télécharger l'archive créée via l'interface d'administration, y créer le répertoire theme comme indiqué ci dessous. Si le module n'est pas installé, on peut créer l'archive manuellement:

Structure d'une archive de module de skin:

racine de l'archive
	|
	|_ theme
	|	|___images
	|	|___ovml
	|	|___scripts
	|	|___styles
	|	|___templates
	|
	|_ programs
	|	|___init.php
	|	|___addonini.php
	|	|___base.php
	|
	|_ skin
		|___images : contient l'image et la miniature utilisées dans le menu d'administration

Theme

Ce dossier est l'équivalent du répertoire racine d'un skin « classique », il contient toute la partie skin du module.

Images

Tous les fichiers d'images utilisées dans le skin doivent être contenus dans ce dossier. Le chemin d'accès à appeler sera '../images/nom de l'image' pour les fichiers CSS et 'skins/{ babSkin }/images/nom de l'image' pour les fichiers html.

Ovml

Ce dossier contient tous les scripts permettant d'accéder au contenu d'Ovidentia comme les menus ou les sections d'actualités.

Scripts

Scripts contient les fichiers javascript. Ces scripts peuvent apporter du dynamisme à la page (menus déroulants, sections cachées etc …)

Styles

Le dossier styles contient les fichiers CSS sélectionnables par l'utilisateur dans la section d'administration. Les fichiers CSS contenant des modifications mineures sont à placer à la racine de l'archive du skin.

Templates

Les fichiers templates sont les patrons structurant la page ou une partie de la page.

Programs

Ce dossier contient les fichiers de configuration du module.

Addonini.php

Ce fichier permet à Ovidentia de configurer, de s'assurer de la compatibilité du module et de gérer les dépendances avec des librairies (Jquery notamment) . Avec le modèle créé par le module de conversion skin/module, le fichier Addonini.php ressemblera à ça. Si vous n'avez pas le module, éditez le fichier et copiez la suite. <source lang="php">

<?php/*

[general] name ="theme_78965413" version ="1.0" description ="Skin Ovidentia" description.fr ="Skin Ovidentia" icon ="ico_<numéro du skin>_<nom du skin>.png" image ="mini_<numéro du skin>_<nom du skin>.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"

[functionalities] jquery="Available"

;*/ ?></source>

Description des variables d'addonini.php utilisées dans les skins

• name="addonname" Nom du module

• version="1.0" Version du module

• description="" Description qui s'affiche dans la liste des modules sur la page réservée à l'administrateur

• description.fr="" La description peut être internationalisée en ajoutant la langue en suffixe : description.en, description.fr ...

• icon="icon.png" icône représentant le module en 48x48px jpg, png ou gif, le chemin de l'image est relatif au répertoire "images" du module

• image="mini.png" image représentant le module en 200x150px jpg, png ou gif, le chemin de l'image est relatif au répertoire "images" du module

• delete="1" 1|0 autoriser la suppression du module (défaut 0)

• addon_access_control="1" 1|0 activer ou désactiver le contrôle d'accès par l'administrateur sur le module (défaut 1)

• ov_version="7.0" Version minimale d'Ovidentia pour que le module fonctionne

• author ="Cantico" Nom de l'auteur du skin (à remplacer)

• encoding="UTF-8" code de caractères du fichier addonini.php

• mysql_character_set_database="latin1" Vérifier le code de caractère par défaut de mysql au niveau de la base, depuis Ovidentia 7.0.0 plusieurs codes de caractères peuvent êtres supportés, on peut les séparer par des virgules

• php_version ="5.1.0" version minimum de php nécessaire pour le fonctionnement du skin

• jquery="Available" n'ajoutez cette ligne que si votre skin utilise la librairie jquery

Init.php

Le fichier init.php contient les fonctions php permettant d'installer, de mettre à jour et de supprimer le module, si l'archive du skin a été créée avec le module de conversion skin/module, ne l'éditez pas, sinon copiez et modifiez le code suivant. require_once 'base.php';

<source lang="php"> <?php

function theme_<numéro du skin>_<nom du skin>_upgrade($version_base,$version_ini) { global $babBody, $babInstallPath; include_once $babInstallPath."utilit/eventincl.php"; bab_addEventListener( 'bab_eventPageRefreshed', 'theme_<numéro du skin>_<nom du skin>_onPageRefreshed', 'addons/theme_<numéro du skin>_<nom du skin>/init.php', 'theme_<numéro du skin>_<nom du skin>');

return true; }

function theme_<numéro du skin>_<nom du skin>_onDeleteAddon() { global $babInstallPath; include_once $babInstallPath."utilit/eventincl.php";

	bab_removeEventListener('bab_eventPageRefreshed',

'theme_<numéro du skin>_<nom du skin>_onPageRefreshed', 'addons/theme_<numéro du skin>_<nom du skin>/init.php');

	return true;

}

function theme_<numéro du skin>_<nom du skin>_onPageRefreshed() { global $babSkin; if ('theme_<numéro du skin>_<nom du skin>' === $babSkin) { $jquery = bab_functionality::get('jquery'); if ($jquery !== false) { $jquery->includeCore(); } } } ?> </source>

Base.php

Si le fichier n'est pas créé automatiquement par le module, le créer et l'éditer. Copiez le code suivant : <source lang="php"><?php exit; ?></source>

Skins

Skins contient le répertoire images qui contient la miniature et l'icone du skin utilisées dans la page d'administration et spécifiées dans le fichier addonini.php.

Leur nom doit être "mini_<numéro du skin>_<nom du skin>" et "ico_<numéro du skin>_<nom du skin>".

Les images peuvent être de type .jpg, .png ou .gif. la miniature doit être au format 200x150 et l'icône au format 48x48.

Intégration du CSS

Départ

Le code CSS doit être écrit dans le fichier Ovidentia.css dans le repertoire /theme/styles. Pour intégrer la partie css d'un skin, il faut déterminer plusieurs points:

• la palette de couleurs à utiliser. Un modèle est généralement composé de une à trois couleurs (hors images) dans plusieurs nuances chacunes noter les codes héxa des couleurs et de leurs nuances, en indiquant un nom permettant de les reconnaitre.
• si le skin est plus adapté à un site internet institutionnel ou à un site collaboratif. Dans le cas d'un site institutionnel classique par exemple, il sera préférable de cacher les sections administrateur et utilisateur enregistré à la vue des visiteurs.
• le nombre de colonnes de sections.
• le niveau de profondeur de navigation et le nombre de menus, pour choisir les bons scripts de modules.
• si la page d'accueil est différente de la page de contenu.

Structure

La structure du modèle à intégrer sera presque toujours différente de celle du skin de base d'Ovidentia

structure du skin de base d'Ovidentia

Cependant, la plupart des modèles conservent toujours des colonnes, un corps de page, une entête, une barre d'adresse etc... L'utilisation d'images d'arrière plan pour certains éléments constitue souvent une contrainte dans la construction de la structure de la page. Il faut donc parfois adapter la structure générale de la page avec des conteneurs L'intégration du CSS reviendra à donner aux sections et éléments du skin l'apparence de l'élément correspondant dans le modèle : taille, bordure, fond, police de caractère, titres, apparence des liens ...

Il faut veiller à garder de la place pour le corps de la page; certains éléments d'administration sont très larges et risquent de dépasser de l'espace qui leur est alloué, bousculant ainsi tout les autres éléments du skin. Il est donc préférable d'avoir un #centercontent le plus large possible, ou de n'avoir qu'une colonne à gauche (permettant aux éléments du centercontent de dépasser à droite, sans casser le reste du skin).

Menus

Une fois le niveau de profondeur de navigation et le nombre de menus déterminés, on peut intégrer les menus.

• pour un menu déroulant, on décrit le style de liste imbriquées.
• pour deux menus distincts, on décrit le style de chacun des menus séparément

Les menus restent vides pour l'instant; ils seront remplis grâce à des scripts OVML

Colonnes

Si les sections d'administration et d'utilisateur doivent être cachées de la vue des visiteurs non connectés, on utilise un script pour cacher la colonne de gauche copier le code suivant dans le fichier leftmenu.js dans le repertoire /theme/scripts. La colonne doit dans ce cas impérativement conserver son id="leftcontent" <source lang="javascript"> var zInterval = null; var SLIDE_STEP = 8;

function doSlide(dX) { var slideObj = document.getElementById('leftcontent'); x = slideObj.offsetLeft; if(x+SLIDE_STEP<dX) { x+=SLIDE_STEP; slideObj.style.left = x + "px"; } else if (x-SLIDE_STEP>dX) { x-=SLIDE_STEP; slideObj.style.left = x + "px"; } else { slideObj.style.left = dX + "px"; clearInterval(zInterval); zInterval = null; } }

function handlePanelClick() { clearInterval(zInterval);

var leftpanel = document.getElementById('leftcontent'); if (leftpanel.style.left == '0px') { intervalMethod = function() { doSlide(-161); } } else { intervalMethod = function() { doSlide(0); } } zInterval = setInterval(intervalMethod,10); }

function setLeftPanel() {

if (document.getElementById('leftcontent')) { var leftpanel = document.getElementById('leftcontent'); leftpanel.style.position = 'absolute'; leftpanel.style.display = 'block'; leftpanel.style.left = '-161px'; leftpanel.style.top = '20px'; leftpanel.onclick = handlePanelClick; var left_menu_btn = document.createElement("a"); left_menu_btn.id = "left_menu_btn"; leftpanel.appendChild(left_menu_btn); } }

window.onload = function() { setLeftPanel(); }; </source>

Inclusions

Il est recommandé d'inclure, au début du fichier, le fichier homepage.css. Ce fichier, situé dans /theme est la feuille de style du corps de la page d'accueil. <source lang="css">@import url('homepage.css');</source>

Pour créer une feuille de style facilement modifiable, ont peu créer une seconde feuille de style dans /theme/styles (appelée couleurs.css par exemple). Dans cette nouvelle feuille de style, on inclura ovidentia.css. <source lang="css">@import url('ovidentia.css');</source> ce fichier regroupera tous les éléments par couleurs, pour leur en affecter de nouvelles. Ainsi, on pourra changer la couleurs de tous ces éléments d'un seul coup, sans éditer le fichier ovidentia.css (beacoup plus lourd). Pour utiliser les modifications faites dans la nouvelle feuille de style, il suffit de la sélectionner dans le menu d'administration (après le nom du skin).

Intégration de l'OVML

Intégration des templates

les templates permettent de modifier la présentation de certains éléments d'Ovidentia.

Templates modifiables

• adminsection.html section administrateur
• articlestemplate.html modèle d'articles pour les thèmes d'articles
• config.html balises méta
• forumssection.html section qui liste les forums
• mailtemplate.html mails de notification
• montha.html section calendrier
• page.html page principale lançant les sections et le corps d'OVIDENTIA
• sectiontemplate.html sections, patrons d'affichages des sections
• topcatsection.html section de catégories de thèmes
• topicsdisplay.html liste des articles (introduction + lien "lire la suite"), corps des articles, patrons d'affichage des thèmes d'articles
• topicssection.html section de catégories de thèmes si thèmes existants, patrons d'affichages de section pour les catégories
• usersection.html section utilisateur
• warning.html n'est plus utilisé dans OVIDENTIA (gérait les 2 variables Titre et Message d'erreur)
• topcatdisplay.html liste des thèmes dans une catégorie, patrons d'affichage pour les catégories
• entry.html affichage des articles en page d'accueil lorsque les fichiers private.html ou public.html sont absents du skin

Syntaxe des templates

Les templates utilisent le langage du moteur de template, pour effectuer des tests ou aller chercher des informations. Les tests et les boucles sont contenus dans des commentaires. Les variables sont contenues dans des accolades.

<source lang="xml">

</source>

<source lang="xml">

</source> On peut également faire appel à des scripts OVML de cette façon : <source lang="xml">{ $OVML(nom du fichier.ovml) }</source>