SCENARIstyler - Documentation Scenari

SCENARIstyler
(c) Kelis
Date
9 janvier 2013
Editeur
Kelis
Rédacteurs
Auteur : Julie Wojcicki
Contributions : Antoine Pourchez, Samuel Monsarrat
(c) Kelis
2
Sommaire
Sommaire
Préambule...............................................................................................................................4
I Pour commencer.................................................................................................................5
1 Préparation............................................................................................................................................ 5
2 Personnalisation.................................................................................................................................... 9
II Tester, utiliser et diffuser.................................................................................................12
1 Test de la personnalisation.................................................................................................................. 12
2 Compilation du pack............................................................................................................................ 14
3 Diffusion aux utilisateurs...................................................................................................................... 15
4 Utilisation de la nouvelle charte........................................................................................................... 17
III Les styles avec Scenari..................................................................................................18
1 Styles OpenDocument......................................................................................................................... 18
1.1. Comprendre........................................................................................................................... 18
1.2. Éléments OD......................................................................................................................... 19
2 Styles Xhtml......................................................................................................................................... 28
2.1. CSS....................................................................................................................................... 29
IV Maintenance.....................................................................................................................31
V Conseils.............................................................................................................................32
1 Web, Xhtml.......................................................................................................................................... 32
2 OD....................................................................................................................................................... 33
Copies d'écran.....................................................................................................................34
(c) Kelis
3
Préambule
Préambule
SCENARIstyler
Extension à SCENARIchain permettant de créer des nouveaux styles de publication (skin) à un modèle
documentaire déjà installé, sur la base d'un générateur de référence.
Complément
Le nouveau style est
●
utilisable par le modèle associé dans SCENARIchain ou dans SCENARIclient /
SCENARIserver,
●
exportable sous la forme d'une extension pour permettre l'échange et la diffusion des
personnalisations.
Version de Scenari
SCENARIstyler est disponible à partir de Scenari 3.7.
Il ne permet pas de styler les modèles documentaires des frameworks précédents (3.6, 3.5, etc.)
Environnement
SCENARIstyler s’utilise en local uniquement, dans un atelier SCENARIchain. L’extension ne
fonctionne pas sur SCENARIserver.
Modèles en 3.7
SCENARIstyler n’est compatible qu’avec des modèles utilisant le framework 3.7+ de Scenari.
Contactez le responsable du modèle que vous souhaitez personnaliser si vous avez un doute
quant à sa compatibilité avec Styler.
(c) Kelis
4
Pour commencer
I
Pour commencer
1 Préparation
Préparer son poste de travail
Au préalable
Télécharger l'extension SCENARIstyler1 et installer le pack dans SCENARIchain.
Préparation pour skin d'OptimOffice
1 - http://build.kelis.fr/nightly/sc4.0/styler/J-0/
(c) Kelis
5
Pour commencer
Écran 1
Créer un atelier SCENARIstyler, attention de bien choisir le modèle
SCENARIstyler
(c) Kelis
6
Pour commencer
Créer un premier espace du nom choisi pour la nouvelle charte.
À l'intérieur de ce dernier, créer un item Jeu de Skin
Vous êtes guidé pas à pas pour paramétrer l'item : choisir le modèle à
personnaliser
Attention
Si le modèle souhaité n'est pas présent dans la liste, c'est qu'il n'est pas installé
dans l'application (ou que tous les ateliers SCENARIchain n’ont pas été
préchargés une première fois). Installer le modèle souhaité, puis reprendre la
procédure de configuration.
Paramétrer la définition du skin en suivant les consignes indiquées dans l'outil
(c) Kelis
7
Pour commencer
Faire Suivant…
Si le skin sera utilisé par des localisations du pack initial, renseigner les différentes
traductions du nom du skin.
Exemple
(c) Kelis
8
Pour commencer
Icône de Skin
Il s'agit de l'icône qui apparaîtra devant votre publication une fois la diffusion de votre modèle
effectuée.
2 Personnalisation
Personnaliser une des publications
Écran 2
Cliquer sur Sélectionner la publication…
(c) Kelis
9
Pour commencer
Choisir le support à personnaliser
Choisir le skin à personnaliser
Exemple
(c) Kelis
10
Pour commencer
Conseil
Il est possible de partir de n'importe quel skin disponible. Quand plusieurs sont
proposés, il est conseillé de choisir celui qui ressemble le plus au design
souhaité.
Le skin de base a été importé, le modifier à votre convenance.
(c) Kelis
11
Tester, utiliser et diffuser
II
Tester, utiliser et
diffuser
1 Test de la personnalisation
Tester les modifications effectuées
Attention
Vous devez avoir un atelier suivant le modèle que vous souhaitez personnaliser et contenant du
contenu de test.
Aller sur l'item Jeu de skins, vue Tests
Choisir l'atelier possédant le contenu de base pour le test
(c) Kelis
12
Tester, utiliser et diffuser
Choisir l'item à utiliser pour le test par clic droit sur l’icône d’insertion d’item.
Générer et consulter
Si ce n’est pas fait, modifier le skin
Générer et consulter.
Exemple
(c) Kelis
13
Tester, utiliser et diffuser
2 Compilation du pack
Compiler la personnalisation
Auto incrémentation
Le numéro de version s'incrémente automatiquement entre certaines modifications (ajout d'une
personnalisation d'une publication par exemple). Il est toutefois important de vérifier qu'il est bien
modifié entre deux diffusions.
Aller sur l'item Jeu de skins, vue Diffusion
Compiler le jeu créé.
Il est possible alors d' installer le jeu créé ou de diffuser le résultat que l’on trouve
en cliquant sur révéler
Diffuser le pack à la communauté Scenari-platform
(c) Kelis
14
Tester, utiliser et diffuser
3 Diffusion aux utilisateurs
extension d'un modèle
Une extension d’un modèle documentaire se présente sous forme de wsppack, elle peut être un simple Skin
(créé avec SCENARIstyler) qui surcharge le stylage d’un générateur, ou peut être une augmentation du
modèle comme de nouveaux générateurs (créée avec SCENARIbuilder).
Nommage du fichier extension de type Skin
Son nommage physique se présente sous la forme suivante : codeModelePrincipal-X_Y-codeExtensionu_v_u.v.w.wsppack avec X et Y les numéros de version majeur et médium du modèle documentaire
principal, et u v w les numéros de version majeur médium et mineur de l'extension.
Exemple
Optim-1_1-Village-0_2_0.2.1.wsppack
OpaleSup-3_2-Bulles-0_1_0.1.10.wsppack
Pour télécharger des extensions aux principaux modèles disponibles sur scenari-platform.org :
http://scenari-platform.org/addons/
Activer une extension
Pré-requis
1. Le modèle documentaire principal doit être installé
2. L’extension doit être installée
Dans les propriétés de l’atelier, une fois le modèle principal sélectionné, vous
pouvez choisir votre skin fraîchement installé.
(c) Kelis
15
(c) Kelis
16
Tester, utiliser et diffuser
Tester, utiliser et diffuser
Cocher la case correspondant à l’extension voulue.
Valider la création/modification.
4 Utilisation de la nouvelle charte
Utiliser la personnalisation
Se placer sur un item de publication
Ouvrir la vue publication contenant un générateur personnalisé
Sélectionner la skin à utiliser
Exemple
Générer et consulter.
(c) Kelis
17
Les styles avec Scenari
III
Les styles avec
Scenari
1 Styles OpenDocument
1.1. Comprendre
Chaque modèle a ses spécificités graphiques. Plutôt que de les documenter de manière exhaustives (et
donc probablement rapidement obsolètes), nous avons choisi de vous expliquer comment comprendre les
styles d’un document de type OpenDocument.
Vocabulaire
Section, Frame ou Cadre, Paragraphe, Styles de caractère… représentent des éléments graphiques
pouvant être stylés. Il est nécessaire de maîtriser ce vocabulaire pour aller plus loin dans la
personnalisation graphique.
> "cf Éléments OD", page 19.
Méthodologie
Il est conseillé de partir d’un document existant, généré avec le modèle à personnaliser. Utilisez la
fenêtre de styles ([F11]) pour repérer les noms des styles appliqués sur ce que vous souhaitez
personnaliser.
Entre-aide
N’hésitez pas à contacter la communauté (pour les modèles libres disponibles sur scenariplatform.org) ou le responsable du modèle à personnaliser pour vous débloquer. Il peut arriver
parfois que plusieurs éléments soient imbriqués pour obtenir un certain effet, et cette imbrication
est difficile à détecter lorsque l’on n’a pas une forte expérience du stylage OpenDocument.
(c) Kelis
18
Les styles avec Scenari
1.2. Éléments OD
Cadres
Frame (OD)
une frame est un élément flottant qui peut être attaché à la page ou à un paragraphe.
Position
Les frame se déplacent à la main lorsqu'elles sont attachées à la page.
Idem pour leurs tailles.
Fenêtre de paramétrage
Par la fenêtre de style :
●
changer le fond de la frame ;
●
changer les bordures de la frame.
Par double clic sur la frame :
●
tailles particulières : centrer, aligner en haut, à droite...
●
ancrage ;
●
mise en arrière plan ;
●
intégration par rapport au reste du conteu.
Couleurs
Définir une palette de couleurs dans OpenOffice
► Tools > Options...
► ajouter un nom ;
► modifer les paramètres RVB ;
► cliquer sur Add;
► cliquer sur OK ;
► la couleur ajoutée apparaîtra tout en bas de la liste déroulante.
(c) Kelis
19
Les styles avec Scenari
Listes
Personnaliser les puces d'une liste
► rechercher une liste à puce (itemizedListTag) dans le fichier de styles ;
► se placer dans cette liste ;
► dans la fenêtre de styles, choisir l'onglet List Style
;
► faire clic-droit sur le nom du style > Modifiy ...
► on peut changer les espacements et le type de numérotation.
Onglet Options
(c) Kelis
20
Les styles avec Scenari
Cliquer sur Character ... pour changer le type de puce correspondant au niveau indiqué dans la colonne
de gauche.
Titres des chapitres
Personnaliser la numérotation des niveaux de titre
► Menu Tools > Outline Numbering ;
► l'onglet Position définit les marges et espaces autour de la puce ;
► l'onglet Numbering permet de changer le type de numéro de puce (ou lettre).
Changer la numérotation
(c) Kelis
21
Les styles avec Scenari
On peut vérifier le style de paragraphe qui sera influencé par le changement.
Sections
Styler une Section
Ouvrir la fenêtre de paramétrages
●
se placer dans une section ;
●
menu Format > Sections... ;
●
une surfenêtre de paramétrage s'ouvre.
Modifier les marges gauches et droites
(c) Kelis
22
Les styles avec Scenari
Dans l'onglet Indents, changer la valeur d' Before Section / After Section .
Séparer la section en colonnes
Dans l'onglet Columns,
●
définir le nombre de colonnes ;
●
cocher ou non
Evenly distribute contents to all columns pour équilibrer ou
non le contenu entre les colonnes ;
●
définir l'espacement entre les colonnes Spacing (marge intérieure) ;
●
pour définir manuellement la largeur des colonnes, décocher
AutoWidth et changer les valeurs de Width pour chaque colonne qui nous
intéresse.
(c) Kelis
23
Les styles avec Scenari
Marges hautes et basses
On ne peut pas définir de marges hautes et basses pour les sections.
Il faut paramétrer les éléments qui précèdent et suivent cette section.
SCENARIbuilder
Dans SCENARIbuilder, il est d'usage d'ajouter un paragraphe vide dans les transformers pour
contourner ce manque.
Tableaux
Styler un tableau
Ouvrir la fenêtre de paramétrages
●
se placer dans le tableau ;
●
menu Table > Properties ;
●
une surfenêtre de paramétrage s'ouvre.
Modifier les bordures
(c) Kelis
24
Les styles avec Scenari
On peut définir un style et une couleur de bordure pour les tableaux ; ainsi que
des marges intérieures.
Taille du tableau
Dans l'onglet Table, peuvent être définis :
●
une largeur de tableau, relative, en % ;
●
des espacements haut-bas-gauche-droite ;
●
l'alignement du tableau dans le contenu.
Organisation
Dans l'onglet Text Flow, on peut permettre au tableau de se découper lorsqu'on
arrive en bas de page, avec l'option
Allow table to split across pages and
columns.
Fond
(c) Kelis
25
Les styles avec Scenari
Dans l'onglet Background, il est possible de donner un fond au tableau, image ou
couleur.
SCENARIbuilder
Lorsqu'il y a
●
trop de tableaux ;
●
qu'ils sont imbriqués ;
●
ou qu'ils ont toujours l'option
●
et l'option
Allow table to split across pages and columns décochée ;
Keep with next paragraph cochée ;
la génération dans SCENARIbuilder peut conduire à un échec.
Tables des matières et index
Styler une table des matières
Ouvrir la fenêtre de paramétrages
(c) Kelis
26
Les styles avec Scenari
●
se placer dans la TOC (Table Of Contents) ;
●
menu insert > index and tables > index and tables ;
●
une surfenêtre de paramétrage s'ouvre ;
Identifier le nombre de niveaux à afficher
Dans l'onglet Index/Table, changer la valeur d' Evaluate up to level .
Définir un fond
Dans l'onglet Background, sélectionner une image ou une couleur de fond.
(c) Kelis
27
Les styles avec Scenari
2 Styles Xhtml
widgetClass (Web)
Définit un code de base qui va servir au générateur pour construire un objet HTML correspondant au widget
spécifié, possédant une classe dont le nom est dérivé de la valeur de widgetClass.
Code HTML généré pour le WHeadingBlock
Un bloc <div class="maClasse"> encadre deux blocs :
●
un titre <hx class="maClasse_ti"> , notons le suffixe _ti ;
●
un contenu <div class="maClasse_co">, notons le suffixe _co.
Le transformer
(c) Kelis
28
Les styles avec Scenari
Le transformer à l'origine de ce code HTML déclare un widget possédant un attribut de classe.
Conseil
L'attribut de classe n'est pas obligatoire, on peut le renseigner au fur et à mesure du stylage.
alpha
Couche de transparence pour les images. Exemple de format concerné : PNG
2.1. CSS
em
En typographie, unité de mesure proportionnelle à la largeur de la lettre capitale "M". Dans le web, un
élément dont la police fait x em aura un texte dont la hauteur fera x fois celle de son élément parent.
Toutes les polices d'1em ont la même taille, mais ne la remplissent pas de la même manière.
Exemples
d'affichages
selon
différents
navigateurs :
http://www.thenoodleincident.com/tutorials/box_lesson/font/singles/index.html
Complément
Le px est une unité relative, comme l'em.
●
px : relatif à l'écran.
●
em : relatif à la police.
Les polices absolues sont par exemple pt, cm et in.
●
1 in = 2,54 cm = 25,4 mm = 72 pt = 6 pc
●
elles sont utiles si les propriétés physiques du média sont connues (ce qui n'est jamais le cas
pour les écrans).
(c) Kelis
29
Les styles avec Scenari
Les problèmes d'accessibilité ne se résument pas à la taille de caractère mais à conception même du
graphisme.
Il faut donc au moment où le graphisme est étudié "placer le curseur" vers plus ou moins d'accessibilité, à
prendre en compte la navigation, les éléments de stylage, etc.
Unité : à étudier en fonction du rendu voulu, garder les em et % pour des éléments qui dépendent
réellement de leurs conteneurs.
Flux (HTML)
ordre d'affichage des éléments par le navigateur.
Les éléments sont affichés selon leur ordre d'apparition dans le code source.
Pseudo classe
:before et :after sont des pseudo classes.
couplées à l'attribut content, elles permettent de rajouter un contenu récurrent avant ou après des balises.
:hover est une pseudo classe souvent utilisée sur les liens, pour leur donner un autre aspect au survol.
Citation
Pour ajouter des guillemets à la française avec espace insécable autour d'une balise citation.
Pseudo élément
Styler des éléments non balisés, comme la première lettre, ou la première ligne.
Attention
A tester impérativement sur plusieurs navigateurs.
(c) Kelis
30
Maintenance
IV
Maintenance
Pour maintenir un skin au fil des mises à jour de la chaîne éditoriale, il est tout d’abord nécessaire de se
renseigner sur les modifications effectuées.
genWeb et genPrint
Les styles de ces types de publications étant un ensemble de fichiers CSS, il vous suffit d’utiliser un outil de
diff pour comparer les différentes versions :
1. différentiel entre l’ancien style et le nouveau : pour voir les modifications effectuées par les
développeurs de la chaîne éditoriale de référence
2. différentiel entre l’ancien style et votre skin : pour voir les modifications que vous avez effectuées
pour personnaliser la publication.
Appliquez ensuite les bonnes modifications, testez et corrigez au besoin.
genOD
Dans le cas de modifications mineures, vous devez mettre à jour votre style (via le bouton adequat dans
l’interface de votre skinset ), et comparer visuellement le nouveau skin.odt avec le votre.
Dans le cas de modifications majeures (cas assez rare) par les développeurs, vous devez repartir du
nouveau skin.odt et réappliquer vos personnalisations une à une.
Testez et corrigez.
(c) Kelis
31
Conseils
V
Conseils
1 Web, Xhtml
Travailler avec Internet Explorer
Dans le dossier css, d'autres fichiers css sont présents, il s'agit de fichiers spécifiques à internet
explorer qui ne réagit pas comme les autres navigateurs :
1. ie7.css sera spécifique à Internet Explorer 7
2. ie6js.css sera spécifique à Internet Explorer 6 quand le javascript est présent
3. ie6.css sera spécifique à Internet Explorer 6 quand le javascript n'est pas présent
4. ie.css s'occupera de tout ce qui est valable pour Internet Explorer en général
Complément
La meilleure façon de travailler pour commencer est d'ignorer Internet Explorer en faisant les test
sous Firefox. Faites donc votre Charte Graphique pour Firefox, puis quand elle vous plaît, regardez
ce que cela donne sous Internet Explorer et faites les modifications nécessaires dans les fichiers
css correspondants.
Pour les utilisateurs Windows : si vous voulez tester et débugger Internet Explorer n'hésitez pas à
vous procurer ietester.2
► Les modifications sont tout d'abord effectuées sur firebug. Cela permet de choisir les css
souhaitées pour un élément précis.
► Puis, comme firebug ne conserve pas les css rentrés si on recharge la page, recopier ces
modifications dans le skin.css de test ouvert dans l'éditeur de css.
► Une fois les modifications terminées, recopier ce qu'il y a dans le skin.css de test dans le skin.css
de l'atelier SCENARIstyler. D'où l'intérêt qu'il soit ouvert lui aussi dans l'éditeur.
► Enfin, modifier les fichiers css spécifiques à Internet Explorer ou à tout autre navigateur cible de
vos futurs utilisateurs.
2 - http://www.my-debugbar.com/wiki/IETester/HomePage
(c) Kelis
32
Conseils
2 OD
Lancer un test avec le fichier d'origine puis dans le générateur, révéler le contenu et ouvrir l'odt généré.
Si le test sort directement en PDF, il faut essayer de trouver les style directement dans le skin.odt et
générer à chaque fois pour tester la publication.
Pour les repérer, ouvrri la fenêtre Styles et formatage en appuyant sur [F11] ou dans
Format/Styles et formatage.
Se placer sur la zone (paragraphe, inline ou caractère, cadre, page ou liste) à modifier et regarder quel est
le style à modifier.
Faire des tests puis recopier le style dans le skin.odt de l'atelier scenariStyler.
(c) Kelis
33
Copies d'écran
Copies d'écran
Écran 1 - p. 6
Écran 2 - p. 9
(c) Kelis
34