Personnalisation des habillages Easyquizz et Epistudio
Un article de EpistemaWiki.
Sommaire |
Installation du logiciel
Téléchargez la dernière version de Skinpress sur le site d’Epistema.
Double-cliquez sur le programme d'installation puis suivez les instructions.
Le logiciel Skinpress est un logiciel en ligne de commande. Il n'y a pas d'icône associée. Pour l'invoquer, il faut soit préparer un fichier batch (.bat) soit ouvrir une fenêtre de commandes DOS (cmd.exe).
Création d’habillages
Fonctionnement de Skinpress
Pour générer un habillage, Skinpress utilise des modèles au format HTML dans lesquels on insère des mots-clés.
Lors de la phase de compilation, Skinpress se charge de remplacer les mots-clés par les fonctionnalités spécifiques du questionnaire ou du cours.
Après la compilation, l'habillage est créé sous la forme d'un fichier zip. Il vous suffira simplement d’importer ce répertoire depuis Easyquizz ou Epistudio pour obtenir votre nouvel habillage.
Structure des dossiers et fichiers d'un habillage
Quand vous créez un habillage, celui-ci doit avoir la forme suivante :
DossierDeVosHabillages \ Habillage1 \ Sources \ DossierDeVosHabillages \ Habillage1 \ HTML \ DossierDeVosHabillages \ Habillage1 \ PHP \
Le dossier Sources est le dossier dans lequel vous placerez les modèles HTML des différentes pages, et les dossiers HTML et PHP sont des dossiers qui seront générés par Skinpress pendant la compilation. Une fois compilé, l'habillage compressé est placé dans le dossier DossierDeVosHabillages.
Dans le dossier Sources doivent se trouver les fichiers suivants :
| Nom du fichier | Utilisation |
|---|---|
| description.ini | Fichier contenant la description de l'habillage (voir plus loin) |
| introduction.htm, preview.htm, ... | Pages de modèle |
| _images | Dossier avec les images utilisées par le modèle |
| _ressources | Dossier les ressources de l'habillage (en particulier la feuille css) |
| _lang | Dossier avec les fichiers de traduction spécifiques de l'habillage |
Dans la majorité des cas, le plus simple est de partir d'un habillage existant et de le modifier. Les habillages livrés avec Easyquizz et Epistudio peuvent être modifiés avec Skinpress. Vous les trouverez dans le dossier xsl\skin\ du dossier d'installation de chaque produit (par exemple C:\Program Files\Epistema\Easyquizz Pro 2006\xsl\skin)
Le fichier description.ini
Ce fichier contient le nom de l'habillage et le nom du logiciel pour lequel l'habillage est prévu. Par exemple, pour un habillage pour Easyquizz, le contenu du fichier description.ini sera :
[GENERAL] template_name=Habillage1 template_type=Easyquizz
Note : template_name doit être exactement le nom du dossier qui contient le dossier Sources. C'est le nom qui s'affichera dans la liste déroulante des habillages dans Easyquizz ou Epistudio. Si le nom du dossier de l'habillage et template_name ne correspondent pas, vous aurez l'erreur : Erreur : the ini file could not be found!
Edition du modèle HTML
A présent utilisez votre éditeur HTML préféré et modifiez le contenu du modèle afin qu’il corresponde à ce que vous désirez. Il n'y a pas de restriction sur la structure des pages, Il s'agit juste de réserver de la place pour les différents composants du questionnaire (le résumé sur la page d'introduction, le score sur la page de résultats, ou le texte des questions dans les pages de question).
Vous pouvez déplacer les mots-clés comme bon vous semble, à l'exception des mots-clés {start_form} et {end_form} qui doivent se trouver en tout début de la page et en toute fin (de part et d'autre du contenu de la page).
Attention aux éditeurs HTML qui rajoutent automatiquement un Doctype en début de fichier. La présence d'un doctype empêche l'habillage de fonctionner correctement.
Edition de la feuille de style CSS
Chaque habillage dispose d’une feuille de style permettant de modifier l’apparence des éléments HTML de l’habillage. Elle se trouve dans le répertoire « _ressources » et porte l’extension .css. Vous êtes libre de la modifier à l’aide de votre logiciel de traitement de texte ou votre éditeur HTML.
Attention si vous utilisez des couleurs de fond identiques à certains contenus. Il peut arriver qu'un bouton soit affiché en blanc sur fond blanc...
Utilisation des mots-clés
Les mots-clés se présentent sous la forme suivante : {mot-clé}. Certains peuvent être optionnels comme {modif_date} qui permet d’insérer la date de génération du questionnaire dans une page. D’autres fonctionnent par paires ({start_form} et {end_form}). Dans tous les cas les mots-clés sont insensibles à la casse, c'est-à-dire que l’on peut les écrire avec des majuscules ou des minuscules.
Voici un exemple de modèle d’habillage :
La référence complète des mots clés pour les produits Epistema peut être consultée ici :
Note : Le logo ainsi que quelques éléments peuvent être configurés depuis Easyquizz, comme nous le verrons plus loin.
Compilation de l'habillage
Une fois le modèle d’habillage terminé, il vous faut le compiler à l’aide de Skinpress.
Pour cela démarrer une fenêtre de commande DOS depuis le menu « Démarrer->Accessoires » puis cliquez sur « invite de commande ». Il vous suffit ensuite d’exécuter la ligne de commande suivante :
skinpress.exe -zip –i "c:\...\VosHabillages\Habillage1\Sources\"
Voici les différents paramètres de la ligne de commande :
- -zip (optionnel) indique que l'habillage doit être compressé, pour l'import dans Easyquizz ou Epistudio.
- -i "c:\...\VosHabillages\Habillage1\Sources\" indique le dossier dans lequel se trouve le fichier ini de description de la template.
Note : le chemin du dossier de destination et le chemin du fichier .ini doivent être indiqués intégralement. Il peut être indiqué entre guillemets (") si le chemin contient des espaces.
Note : il est préférable d’utiliser l’argument optionnel –zip afin d’obtenir une archive directement importable depuis Easyquizz ou Epistudio.
Traduction d'un habillage
Fichiers de traduction
Les traductions des habillages Easyquizz et Epistudio sont faites gràce aux fichiers qui se trouvent dans le dossier _default_lang d'Easyquizz et d'Epistudio, ajoutés à ceux qui se trouvent (optionnellement) dans le dossier _lang de l'habillage.
Pour chaque chaine de caractère à traduire dans un habillage, Easyquizz ou Epistudio commence par chercher sa traduction dans le fichier JavaScript présent dans _default_lang, et s'il ne trouve pas la traduction, ira le chercher dans le fichier JavaScript du même nom se trouvant dans le dossier _lang de l'habillage.
Un fichier de traduction porte un nom correspondant au code ISO de la langue à traduire (par exemple fr pour Français, es pour espagnol). Ce sont des fichiers Javascript encodés en UTF-8. La première ligne du fichier indique le nom de la langue (tel qu'il sera affiché dans la liste déroulante des langues d'habillage d'Easyquizz ou d'Epistudio).
Voici un exemple de fichier de traduction :
// Name : Français // Epistema Easyquizz // language file // Encoding : UTF-8 // Language : fr_FR (French) EpiLang.TopOfPage = 'HAUT PAGE'; EpiLang.DescriptionFieldString = 'Description :'; EpiLang.BuildWithEasyquizzStart = 'Généré par <a title="Easyquizz - Epistema" href="http://www.epistema.com/" target="_blank">Easyquizz</a> le '; EpiLang.BuildWithEasyquizzEnd = '.'; EpiLang.AuthorFieldString = 'Auteur :';
Si une chaine de caractère se trouve dans les deux fichiers JavaScript, alors la version se trouvant dans le fichier de l'habillage est gardée.
Utilisation des traductions dans les modèles de l'habillage
Si vous souhaitez insérer un texte qui puisse être traduit dans votre modèle d'habillage, vous devez encadrer ce texte par des balises span comportant un attribut epiLang pointant vers le nom de la chaine à traduire dans les fichiers de traduction.
On trouvera donc quelque chose proche de ceci :
<span epiLang="AuthorFieldString">Author:</span>
Comme dans le fichier fr.js qui se trouve dans le dossier _default_lang on a :
... EpiLang.AuthorFieldString = 'Auteur :'; ...
Alors Author: sera traduit par Auteur : si la langue sélectionnée est le français.
Note : les fichiers de traduction sont des fichiers JavaScript, qui sont sensibles à la syntaxe. En particulier, les guillemets doivent encadrer chaque chaine de caractères. Si vous désirer insérer un guillemet dans une traduction, vous pouvez la précéder par un \, ou inverser les guillemets par des apostrophes droites comme dans l'exemple suivant :
EpiLang.ExempleText1 = 'c\'était un "bel" artichaud'; // valide EpiLang.ExempleText2 = "c'était un \"bel\" artichaud"; // valide EpiLang.ExempleText3 = "c'était un "bel" artichaud"; // invalide !
Utilisation et paramétrage de l’habillage par l'utilisateur final
Utilisation de l’habillage
Une fois que vous êtes en possession de votre fichier zip, lancez Easyquizz ou Epistudio, puis rendez-vous dans la section « choix de la présentation ». Cliquez sur « Importer », une boîte de dialogue s’ouvre, sélectionnez le fichier zip du nouvel habillage puis validez.
Le nouvel habillage se trouvera alors disponible dans la liste déroulante.
Paramétrage de l'habillage au sein d'Easyquizz ou d'Epistudio
Comme indiqué plus haut dans ce document certains paramètres de l’habillage sont directement modifiables depuis Easyquizz ou Epistudio. Pour cela cliquez dans la section « choix de la présentation », sélectionnez l’habillage que vous désirez paramétrer puis cliquez sur le bouton « éditer l’habillage ».
Une nouvelle fenêtre s’ouvrira et vous permettra de modifier :
- le nom de l’habillage
- le texte du copyright
- le lien sur le copyright
- les couleurs de l’habillage
- le logo
Une fois vos modifications apportées vous pourrez exporter le nouvel habillage créé ou le sauvegarder.
Dans le cas où vous désireriez retrouver les couleurs d’origines de l’habillage, il vous suffira de cliquer sur le bouton « reprendre les couleurs par défaut »
Note : la récupération des couleurs par défaut ne peut se faire qu’avant une éventuelle sauvegarde de votre part de l’habillage modifié.
Couleurs modifiables dans un habillage
Dans l'éditeur d'habillage d'Easyquizz ou d'Epistudio, les couleurs disponibles à la modification sont issues de la feuille de style de l'habillage. Pour apparaître dans l'éditeur, celles-ci doivent être déclarées dans la feuille de style sous la forme suivante :
/* SKIN NAME = Classique Bleu SKIN COLOR = Couleur du fond | #E9EDFA | #E9EDFA SKIN COLOR = Couleur plus foncée | #00639C | #00639C */
- SKIN NAME représente le nom de l'habillage
- Chaque SKIN COLOR correspond à une couleur que l'utilisateur pourra modifier dans l'éditeur d'habillage. Les couleurs doivent préciser le nom de la couleur, la couleur par défaut, puis la couleur telle qu'elle a été choisie par l'utilisateur (au départ la même chose que la couleur par défaut).
Lorsque l'utilisateur change une couleur dans l'éditeur, celle-ci est remplacée dans la feuille de style. Il est donc important qu'à tout endroit de la feuille de style celle-ci soit indiquée toujours de la même façon (par exemple ne pas utiliser white et #FFFFFF, mais toujours #FFFFFF).
Vous pouvez spécifier autant de couleurs que vous le souhaitez. D'évidence, si vous voulez que votre habillage se prette aux changements de couleurs, il faudra penser le design de l'habillage pour éviter l'utilisation d'images colorées, etc.
Les styles réservés par Epistudio et Easyquizz
Epistudio et Easyquizz utilisent les styles cascadables pour contrôler la façon dont s'affichent les éléments récurrents de chaque questionnaire et cours.
Pratiquement toutes les clés sont remplacées par des balises HTML stylées du nom de la clé.
Par exemple, la clé {Author} sera remplacée par :
<a id="author" class="author" href="mailto:vous@votresociete.com">Votre nom</a>
Ainsi, pour préciser la façon dont s'affiche chaque élément de page, vous pouvez simplement définir le style correspondant à la clé (dans l'exemple précédent, soit la règle .author, soit la règle #author). Si la clé est remplacée par un tableau, les balises <table>, <tr> et <td> sont elles aussi stylées.
Vous pouvez alors définir les styles suivants :
.Correction { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }
table.Correction { margin: 0px; padding: 3px; background-color: #EDEDB5; }
td.Correction { font-size: 12px; }
Les différentes balises qui remplaceront la clé {Correction} seront alors stylées indépendamment. En plus de ces styles, sont définis les styles suivants :
| Style | Description |
|---|---|
| .page_title | Style des titres de paragraphe dans les pages de cours générées par Epistudio. |
| .page_legend | Style des légendes des éléments multimédia dans les pages de cours. |
| .page_paragraph | Style des paragraphes des pages de cours. |
| .page_list | Styles des balises <ol> ou <ul> dans les listes des pages de cours. |
