Intégration de skin : Différence entre versions

Version actuelle en date du 17 juin 2009 à 09:23

Cet article guide sur l'intégration d'un thème graphique (skin) dans un portail Ovidentia.

Les versions récentes d'Ovidentia (versions 7 et supérieures) assurent de nouvelles possibilités avec l'assemblage des skins dans des modules. Ce document s'adapte donc à ces améliorations.

On utilise le terme 'intégration' pour définir la conversion d'un modèle en un skin Ovidentia.

Les modèles les plus courants sont sous la forme :

• d'une charte graphique en image générée par un logiciel d'édition
• de fichiers (pages HTML, styles CSS et images puces et fonds) permettant d'avoir un aperçu de la navigation dans le site

La méthode d'intégration suggère de prendre pour base un modèle et d'intégrer chacun de ses éléments dans un skin. Pour Ovidentia, le propre d'un skin est de rassembler tous l'aspect graphique, la structure des pages et la navigation : un skin ne contient pas d'actions dans la base de données ni de formulaires, un skin s'adapte comme une deuxième peau (skin) au noyau d'Ovidentia.

Remarque :

Les modèles de site sont courants sur Internet. Des modèles libres et gratuits sont disponibles sur des sites dédiés au WebDesign Open Source : http://www.openwebdesign.org, http://www.oswd.org...

Exemple d'intégration

Modèle de site

Skin

L'image de gauche provient d'un modèle de site sous la forme d'une page HTML et d'une feuille de styles CSS. La page Web contient des textes d'exemples et des liens non cliquables. On dit d'une page dont le texte ne provient pas d'une base de données qu'elle est statique (parralèle avec les pages dynamiques).

L'image de droite montre le skin d'Ovidentia réalisé à partir du modèle. Le skin s'adapte au portail en affichant des textes générées par l'éditeur d'Ovidentia et en affichant des liens qui ont des cibles réelles : la navigation fonctionne.

Fonctionnement des skins dans OVIDENTIA et intégration

Voici un court schéma montrant le mécanisme de fonctionnement des skins et de l'intégration dans OVIDENTIA.

Ovidentia utilise un skin pour gérer son interface graphique. Le skin demande le contenu au noyau grace à des scripts ovml, le noyau renvoie le contenu, qui est alors structuré dans le skin par les templates. Le skin génère un code html complet, interprété par le navigateur internet.

Pour créer un skin, il faut

• écrire ou adapter les feuilles de styles CSS (partie graphique)
• écrire les scripts OVML (requêtes de contenu)
• adapter les templates (structure du contenu)

Charte Graphique

Ergonomie

Un site internet se doit avant tout d'être fonctionnel et intuitif. L'utilisateur doit pouvoir accéder à la fonction ou l'information qu'il recherche de façon très simple et évidente.

Images

Très souvent, on utilise des images, pour donner des effets impossibles à réaliser en CSS ou pour donner vie aux sites. Dans le cas d'un skin Ovidentia, il faut porter une attention particulière à la licence des images; en effet, la plupart des images trouvées sur internet ne sont pas libres de droit.

Structure et contenu d'une archive de module de skin

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:

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

Validation

Pour permettre la réutilisation des skins comme base de travail pour la création d'autres skins, le code CSS doit être le plus lisible et concis possible. Aussi, une fois terminés, les fichiers CSS d'un skin Ovidentia doivent être validés avec les outils de validation du W3C

Intégration des templates

les templates permettent de modifier la présentation de certains éléments d'Ovidentia.Le template le plus important à modifier est page.html : il contient toute la structure statique de la page. Dans ce template:

• on définit l'ordre d'affichage des éléments.
• on affecte leur style aux éléments
• on fait appel aux scripts de menus

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>

Page d'accueil

Pour créer une page d'accueil différente de la page normale il faut modifier le template page.html. On effectue un test sur la page incluse, si il n'y en a pas, on est sur la page d'accueil :

<source lang="xml"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{ babLanguage }" lang="{ babLanguage }">

<head>

...

</head> <body class="page { tg }" class="page home" id="{ idx }">

TEMPLATE DE LA PAGE NORMALE TEMPLATE DE LA PAGE D'ACCUEIL </body> <html> </source>

Test sur la connexion

Pour afficher des informations uniquement à un utilisateur enregistré, on peut utiliser le code suivant : <source lang="xml"> AFFICHÉ SI L'UTILISATEUR EST ENREGISTRÉ AFFICHÉ SI L'UTILISATEUR N'EST PAS ENREGISTRÉ </source>

Intégration de l'OVML

Les menus

scripts

Les menus en OVML s'appuient sur le module sitemap. Il permet de décrire une arborescence de navigation avec plusieurs niveaux. L'arborescence utilisée par un skin doit être de même niveau que son modèle; un skin ne présentant qu'un seul niveau de navigation ne permettra pas d'accéder à un second niveau d'arborescence sitemap.

Attention: Les noeuds du sitemap doivent obligatoirement pointer sur un article, un thème ou une URL, sans quoi ils ne seraient pas affichés dans le skin.

Un menu est identifié par le numéro (id) et le nom (identifier) de son noeud parent. Il est recommandé de donner un identifier explicite aux noeuds parents des principaux menu ("menu_navigation" ou "menu_bas_de_page" par exemple).

exemple le plus simple script de menu de niveau 1 : <source lang="html4strict"> <OFPutVar name="menuIdentifier" value="menu_haut_de_page_niv1">

<OFGet name="smap_node_id" default="" saveas="MapNodeId">

<OCAddon name="sitemap" action="getChildren" nodeIdentifier="<OVmenuIdentifier>"> <OCIfNotEqual expr1="<OVNodeObjectFullUrl>" expr2=""> <a href="<OVNodeObjectFullUrl>"><OVNodeName></a> </OCIfNotEqual> </OCAddon> </source>

exemple de menu à trois niveau (affiché dans une section) <source lang="html4strict"> <OFPutVar name="menuId" value=" numéro du noeud parent de votre menu dans votre navigation">

<OFGet name="smap_node_id" default="" saveas="MapNodeId">

<ul class="niv1" id="liste<OVNodeId>">

<OCAddon name="sitemap" action="getChildren" nodeId="<OVmenuId>" c1>

<OFPutVar name="idnoeudniveau2" value="<OVNodeId>">

<OCIfNotEqual expr1="<OVNodeObjectFullUrl>" expr2="" i1>

</OCAddon c3> </ul>

</OCIfNotEqual i2> </OCAddon c2> </ul>

</OCIfNotEqual i1> </OCAddon c1> </ul> </source>

Notez l'utilisation d'étiquettes à la fin des balises <OC...>, elles sont obligatoires lorsqu'on imbrique plusieurs de ces balises.

JQuery

Pour naviguer dans les arborescences de deuxième et troisième niveau, les menus ont besoin de la librairie JQuery pour générer et traiter des cookies (pour se rappeler de la position courante dans le site). Jquery est disponible sous forme de module de librairie pour ovidentia téléchargeable sur le site d'Ovidentia

Les articles

Dans le cas d'un site institutionnel, on voudra afficher des textes et d'images pointés par l'arborescence de plan du site. Pour permettre la rédaction et la modification de ces articles d'un simple clic en mode connecté, on créée des articles sur lesquels pointent des scripts ovml.

exemple de script ovml affichant les 3 derniers articles d'un thème <source lang="html4strict"> <OCArticles topicid="le numéro de votre thème d'article" last="3">

<OCIfNotEqual expr1="<OVArticleEditUrl>" expr2="">

<a href="<OVArticleEditUrl>" target="_blank">Modifier</a>

</OCIfNotEqual>

</OCArticles> </source>

Installation d'un skin dans Ovidentia

Une fois le skin intégré dans un module, il ne reste plus qu'à l'installer pour l'appliquer à Ovidentia. En mode connecté, allez dans l'interface d'administration, choisissez "Ajouter/Supprimer des programmes", choisissez l'onglet skin, puis "Charger un nouveau skin".

Choisissez l'archive de votre skin avec le selecteur, puis installez. Le skin devrait être disponible dans la page d'administration du site, il ne reste plus qu'a le selectionner pour l'appliquer à Ovidentia.