SCENARIstyler - Documentation Scenari

SCENARIstyler
Guide utilisateur SCENARIstyler
8 mars 2016
Version : 4.2 Kelis SCENARIstyler
Guide utilisateur SCENARIstyler
Nom :
SCENARIstyler
Version :
4.2
Date :
8 mars 2016
Editeur :
Kelis
Auteur(s) :
Auteurs : Mickaël Duclercq, Julie Wojcicki
Contributions : Antoine Pourchez, Samuel Monsarrat
Copyright :
Kelis
Licence :
Cette œuvre est mise à disposition selon les termes de la Licence Creative Commons Attribution 4.0
International [http://creativecommons.org/licenses/by/4.0/deed.fr ] .
2
Table des matières
Chapitre 1 - SCENARIstyler .................................................................................................................................... 4
Chapitre 2 - Pour commencer... .............................................................................................................................. 5
1. Créer un Jeu de skins
5
2. Sélectionner la publication à personnaliser
6
Chapitre 3 - Tester, diffuser et utiliser .................................................................................................................... 8
1. Tester les modifications
8
2. Compiler un pack
8
3. Activer une extension
9
4. Utiliser le nouveau stylage
10
Chapitre 4 - Styles .................................................................................................................................................. 11
1. Styles LibreOffice
11
1.1. Comprendre
1.2. Éléments LibreOffice
1.3. Conseils
1.4. Maintenance
2. Styles Xhtml
2.1. CSS
2.2. JS
2.3. Conseils : Firebug
11
11
18
18
18
19
21
22
Chapitre 5 - Pour en savoir plus... ........................................................................................................................ 23
Glossaire ................................................................................................................................................................... 24
3
SCENARIstyler
SCENARIstyler
Chapitre 1
SCENARIstyler
= SCstyler
SCENARIstyler est une extension à SCENARIchain qui permet de créer de nouveaux styles de
publication (skins) à un modèle documentaire déjà installé, sur la base d'un générateur de
référence.
Un nouveau style est :
Utilisable par le modèle associé dans SCENARIchain ou dans SCENARIclient /
SCENARIserver ;
Exportable, sous la forme d'une extension .skinpack , pour permettre l'échange et la diffusion
des personnalisations.
8 mars 2016
Version : 4.2
Kelis
SCENARIstyler
4
SCENARIstyler
Pour commencer...
Chapitre 2
Pour commencer...
1. Créer un Jeu de skins
Prérequis
1. Télécharger l'extension SCENARIstyler [https://download.scenari.org/scenari/files/SCENARIchain/scstyler/ - Télécharger SCENA
RIstyler 4.2]
et installer le pack dans SCENARIchain.
2. Créer un atelier
SCENARIstyler .
Dans l'atelier SCENARIstyler, créer un espace portant le nom de la nouvelle charte.
Le code choisi pourra être réutilisé pour le nom de l’item Jeu de skin et l’identifiant du pack.
Créer un item Jeu de Skin à l'intérieur du nouvel espace.
Une fenêtre vous guide pas à pas dans le paramétrage de l'item.
Sélectionner 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 de l'outil.
Cliquer sur le bouton Suivant…
Compléter les informations du package.
Intitulés du jeu de skin :
Renseigner les différentes traductions du nom du skin à l'aide des balises Langues , si le
5
8 mars 2016
Version : 4.2
SCENARIstyler
Kelis
Pour commencer...
SCENARIstyler
Renseigner les différentes traductions du nom du skin à l'aide des balises Langues , si le
skin doit être utilisé par des localisations du pack initial.
Icône :
Lier l'icône qui apparaîtra au niveau du générateur, une fois la diffusion du stylage effectuée.
Cliquer sur
Enregistrer .
Résultat
Le Jeu de skins est prêt ; une publication peut être sélectionnée et personnalisée.
2. Sélectionner la publication à personnaliser
Prérequis
Créer et paramétrer l'item Jeu de skins .
Cliquer sur Sélectionner la publication…
La liste des publications disponibles s'affiche.
Sélectionner la
Publication à personnaliser et cliquer sur Sélectionner .
La fenêtre Sélection d'un skin s'affiche.
Sélectionner le skin à partir duquel démarrer le stylage et cliquer sur Valider .
Lorsque plusieurs skins sont installés sur SCENARIchain, il est possible de choisir n'importe
lequel de ces skins comme base de stylage. Il est conseillé de sélectionner le plus proche du
design souhaité.
Résultat
Le skin de base a été importé ; il est prêt à être modifié.
8 mars 2016
Version : 4.2
Kelis
SCENARIstyler
6
SCENARIstyler
Pour commencer...
Numéro de version
Un message apparaît pour indiquer que le numéro de version est automatiquement incrémenté,
ceci pour garantir la présence de cette nouvelle variante dans votre prochaine compilation. Vous
pouvez cependant modifier le numéro de version à la main pour gérer à votre manière la diffusion
de votre skin.
7
8 mars 2016
Version : 4.2
SCENARIstyler
Kelis
Tester, diffuser et utiliser
SCENARIstyler
Chapitre 3
Tester, diffuser et utiliser
1. Tester les modifications
Prérequis
Un atelier utilisant le modèle documentaire à personnaliser et contenant du contenu de test doit
être présent sur votre application.
Sélectionner la vue Tests de l'item Jeu de skins .
Dans le menu Atelier , sélectionner l'atelier de test.
Faire un clic-droit sur l'icône d'insertion
et choisir Sélectionner un item...
L'atelier de test sélectionné s'ouvre en sur-fenêtre ; le nom des items compatibles avec le test
apparaît en gras dans l'explorateur.
Cliquer sur l'item souhaité pour réaliser le test, puis sur Sélectionner .
La sur-fenêtre se referme.
Cliquer sur Générer , puis sur Consulter .
Si ce n’est pas encore fait, modifier le skin.
Cliquer sur Générer à nouveau, puis sur Consulter afin de visionner vos modifications.
2. Compiler un pack
Cette procédure explique comment compiler la personnalisation réalisée ( .skinpack ) afin de la
diffuser (installation et utilisation sur un SCENARIchain ou SCENARIserver).
Auto-incrémentation
Le numéro de version s'incrémente automatiquement après certaines modifications (ajout d'une
personnalisation d'une publication, par exemple). Il est toutefois important de vérifier qu'il est
8 mars 2016
Version : 4.2
Kelis
SCENARIstyler
8
SCENARIstyler
Tester, diffuser et utiliser
personnalisation d'une publication, par exemple). Il est toutefois important de vérifier qu'il est
bien modifié entre deux diffusions.
Sélectionner la vue Compilation de l'item Jeu de skins .
Cliquer sur Compiler .
Le jeu de skins est compilé ; il est possible de :
Télécharger une archive du jeu de skins créé ;
Révéler le .skinpack généré afin de le récupérer directement sur votre disque dur.
Installer le pack sur un SCENARIchain ou SCENARIserver.
3. Activer une extension
Cette procédure explique comment activer une extension [p.24] (un skin, dans le cas présent) sur un
atelier afin de l'utiliser pour les publications.
*
Prérequis
1. Installer le modèle documentaire principal.
2. Installer l'extension à activer.
Sélectionner l'onglet Édition des propriétés de la fenêtre Propriétés d'un atelier .
Sélectionner le
9
8 mars 2016
modèle documentaire concerné via l'onglet Modèle .
Version : 4.2
SCENARIstyler
Kelis
Tester, diffuser et utiliser
SCENARIstyler
Sélectionner le
skin à activer dans l'onglet Skin(s) .
Cliquer sur Enregistrer pour sauvegarder les modifications.
Résultat
Le skin est activé sur l'atelier ; il est disponible pour les publications.
Commentaires généraux
Une extension est rattachée à un seul modèle documentaire.
Par exemple, une extension pour OpaleSup Advanced n'est pas automatiquement disponible pour
les ateliers Opale Advanced.
4. Utiliser le nouveau stylage
Prérequis
Installer et activer le skin concerné sur SCENARIchain.
Sélectionner la vue Pub. (ou Gen. , selon votre modèle) de l'item de publication concerné.
Au niveau du générateur, sélectionner le
skin à utiliser .
Cliquer sur Générer , puis sur Consulter .
8 mars 2016
Version : 4.2
Kelis
SCENARIstyler
10
SCENARIstyler
Styles
Chapitre 4
Styles
1. Styles LibreOffice
1.1. Comprendre
Chaque modèle a ses spécificités graphiques. Plutôt que de les documenter de manière exhaustives
(informations trop rapidement obsolètes), nous avons choisi de vous expliquer comment comprendre les
styles d’un document de type LibreOffice.
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.
Voir :
Éléments LibreOffice [p.11]
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.
Entraide
N’hésitez pas à contacter la communauté (pour les modèles libres disponibles sur scenari.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 LibreOffice.
1.2. Éléments LibreOffice
Cadres
Frame (OD)
= Cadre
Élément flottant qui peut être attaché à la page ou à un paragraphe.
11
8 mars 2016
Version : 4.2
SCENARIstyler
Kelis
Styles
SCENARIstyler
Élément flottant qui peut être attaché à la page ou à un paragraphe.
Position
Les frames 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 contenu.
Couleurs
Définir une palette de couleurs dans LibreOffice
Outils > Options...
Ajouter un nom ;
Modifier les paramètres RVB ;
Cliquer sur Ajouter ;
Cliquer sur OK .
Résultat
La couleur ajoutée apparaît en bas de la liste déroulante.
8 mars 2016
Version : 4.2
Kelis
SCENARIstyler
12
SCENARIstyler
Styles
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 Styles de liste
;
Faire un clic-droit sur le nom du style et sélectionner Modifier... ;
Selon les besoins, changer les espacements et le type de numérotation.
Commentaires généraux
Onglet Options
Cliquer sur Caractère ... pour changer le type de puce correspondant au niveau indiqué dans la
colonne de gauche.
13
8 mars 2016
Version : 4.2
SCENARIstyler
Kelis
Styles
SCENARIstyler
Titres des chapitres
Personnaliser la numérotation des niveaux de titre
Menu Outils > Numérotations des chapitres :
L'onglet Position définit les marges et espaces autour de la puce ;
L'onglet Numérotation permet de changer le style de niveau de titre (numéro ou lettre).
Commentaires généraux
Changer la numérotation
On peut vérifier le style de paragraphe qui sera influencé par le changement.
8 mars 2016
Version : 4.2
Kelis
SCENARIstyler
14
SCENARIstyler
Styles
Sections
Styler une Section
Ouvrir la fenêtre de paramétrage.
Se placer dans une Section et sélectionner le menu Format > Sections... .
Une sur-fenêtre de paramétrage s'affiche.
Modifier les marges gauches et droites.
Dans l'onglet Indentation , changer la valeur de Avant la section / Après la section .
Séparer la section en colonnes.
Dans l'onglet Colonnes :
Définir le nombre de colonnes ;
Définir l'espacement entre les colonnes ;
Pour définir manuellement la largeur des colonnes, décocher
changer les valeurs de Largeur pour chaque colonne.
Largeur automatique et
Commentaires généraux
Marges hautes et basses
Il n'est pas possible de définir de marges hautes et basses pour les Sections. Il convient de
paramétrer les éléments qui précèdent et suivent la Section.
15
8 mars 2016
Version : 4.2
SCENARIstyler
Kelis
Styles
SCENARIstyler
Tableaux
Styler un tableau
Ouvrir la fenêtre de paramétrage.
Se placer dans le tableau et sélectionner le menu Tableau > Propriétés du tableau .
Une sur-fenêtre de paramétrage s'affiche.
Modifier les bordures.
On peut définir un style et une couleur de bordure pour les tableaux ; ainsi que des marges
intérieures.
Définir la taille du tableau.
Dans l'onglet Tableau , peuvent être définis :
une largeur de tableau, relative, en % ;
des espacements haut-bas-gauche-droite ;
l'alignement du tableau dans le contenu.
Définir le fractionnement du tableau.
L'onglet Enchaînements permet d'
Autoriser le fractionnement des tableaux sur plusieurs
pages et colonnes , afin que le tableau soit coupé en bas de page.
8 mars 2016
Version : 4.2
Kelis
SCENARIstyler
16
SCENARIstyler
Styles
pages et colonnes , afin que le tableau soit coupé en bas de page.
Définir le fond du tableau.
L'onglet Arrière-plan permet d'ajouter un fond au tableau, image ou couleur.
Tables des matières et index
Styler une table des matières
Ouvrir la fenêtre de paramétrage.
Se placer dans la TOC (Table Of Contents) et sélectionner le menu Insertion > Index et tables
> Index et tables...
Une sur-fenêtre de paramétrage s'affiche.
Définir le nombre de niveaux à afficher.
Dans l'onglet Index/Table , changer la valeur d' Évaluer jusqu'au niveau...
Définir un fond.
Dans l'onglet Arrière-plan , sélectionner une image ou une couleur de fond.
17
8 mars 2016
Version : 4.2
SCENARIstyler
Kelis
Styles
SCENARIstyler
1.3. Conseils
Lancer un test avec le fichier d'origine puis ouvrir l'odt généré.
Si le test sort directement en PDF, il faut trouver les styles directement dans le skin.odt et générer
à chaque fois pour tester la publication.
Pour repérer les styles, ouvrir la fenêtre Styles et formatage en appuyant sur F11 ou dans
Format/Styles et formatage .
Se placer sur la zone à modifier (paragraphe, inline ou caractère, cadre, page ou liste) et
regarder quel est le style à modifier.
Faire des tests puis recopier le style dans le skin.odt de l'atelier SCENARIstyler.
1.4. Maintenance
Pour maintenir un skin au fil des mises à jour de la chaîne éditoriale, il est nécessaire de se
renseigner d'abord sur les modifications effectuées.
Modifications mineures
1. Mettre à jour le style (via le bouton adequat) dans l’interface de votre skinset .
2. Comparer visuellement le nouveau skin.odt avec le vôtre.
3. Réaliser les ajustements souhaités.
Modifications majeures (cas assez rare)
1. Repartir du nouveau skin.odt.
2. Ré-appliquer vos personnalisations une à une.
3. Tester et corriger.
2. Styles Xhtml
Le dossier de skin site.skin.doss contient différents dossiers selon le modèle à personnaliser :
css qui contient tout les fichiers de type css
img qui contient toutes les images utilisées par le skin
js qui permet de rajouter une fonction javascript à la publication
Il est possible de rajouter des dossiers à l'intérieur de cette arborescence.
Par exemple, s'il n'existe pas déjà il est possible d'ajouter un dossier font contenant des polices
8 mars 2016
Version : 4.2
Kelis
SCENARIstyler
18
SCENARIstyler
Styles
Par exemple, s'il n'existe pas déjà il est possible d'ajouter un dossier font contenant des polices
d'écritures à intégrer au skin.
Le dossier css peut contenir plusieurs fichiers de type css. Certains sont spécifiques au navigateur
Internet Explorer tandis que d'autres pourront séparer le fond et la forme du skin.
ie7.css sera par exemple spécifique à Internet Explorer 7.
struct.css contiendra les propriétés spécifiques à la structure de la page web (position,
dimension etc.)
S'il est possible de supprimer (à ses risques et périls) un fichier css, il est en revanche plus
difficile d'en ajouter car les css sont déclarés depuis SCENARIbuilder. Pour en ajouter, il est
possible d'utiliser l'attribut @import à placer en première ligne d'un fichier css existant qui
permettra d'importer un autre css présent dans le dossier.
Maintenance du skin
Certains modèles proposeront un fichier css vierge ( skin.css ) ne servant uniquement à
surcharger le css principal ( main.css ). Ainsi, lors d'une mise à jour de la chaîne éditoriale, il sera
possible de ne modifier que le css principal afin de profiter d'éventuelles modifications de style du
modèle.
Si cette méthode est intéressante pour surcharger un skin, elle est en revanche moins utile pour
modifier intégralement le skin. Dans ce cas, il vaut mieux modifier directement le css principal, lors
d'une mise à jour du modèle, 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.
2.1. CSS
em
= cadratin
En typographie, em désigne une 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.
19
8 mars 2016
Version : 4.2
SCENARIstyler
Kelis
Styles
SCENARIstyler
Toutes les polices d'1em ont la même taille, mais ne la remplissent pas de la même manière.
Remarques
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).
Accessibilité
Les problèmes d'accessibilité ne se résument pas à la taille de caractère mais à la 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.
Il vaut donc mieux 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.
Il est très difficile de modifier ce flux ; pour se faire, deux solutions :
Avec la propriété position : absolute , il est possible de positionner un widget avec les
attributs top, left, right, bottom .
Attention toutefois à ce que les widgets ne se chevauchent pas !
En ajoutant la propriété display : flex à un parent, il est possible de changer l'ordre
d'apparition de ses fils grâce à l'attribut order .
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
Par exemple, pour ajouter des guillemets à la française avec espace insécable autour d'une
balise Citation , on peut procéder comme suit :
8 mars 2016
Version : 4.2
Kelis
SCENARIstyler
20
SCENARIstyler
Styles
citation::before{content :"« ";}
citation::after{content :" »";}
Fonticon
Désigne une police d'écriture ne contenant que des icônes.
Il est possible de créer une police d’icônes pouvant être utilisée dans le CSS grâce à une
pseudo classe.
La fonticon se déclare dans le CSS de la même façon qu'une police d'écriture standard.
Fontello
Le site fontello.com [http://fontello.com/] propose de télécharger sa propre police d'icônes en utilisant
des icônes libres ou alors en important ses propres icônes au format .svg .
Responsive design
Un site web est dit responsive lorsqu'il s'adapte sur tout support (tablette, smartphone...).
Il est possible de déclarer dans un fichier CSS des règles spécifiques aux petits écrans.
Dans le cas d'une vue adaptée aux écrans d'une largeur maximale de 800px et dans la position
portrait, insérer à la dernière ligne du CSS :
@media (max-device-width:800px) and (orientation: portrait){
/*inscrire ici les règles css spécifiques*/}
2.2. JS
Favicon
Icône s'affichant dans l'onglet du navigateur internet.
Ajouter une favicon
Il est possible d'ajouter une favicon à une publication web en modifiant (s'il est présent) le fichier
js/skin.js .
1. Ajouter les lignes de codes suivantes dans le fichier :
(function() {
var link0 = document.createElement('link');
link0.type = 'image/png';
21
8 mars 2016
Version : 4.2
SCENARIstyler
Kelis
Styles
SCENARIstyler
link0.rel = 'icon';
link0.href = '../skin/img/favicon.png';
document.getElementsByTagName('head')[0].appendChild(link0);})()
2. Déposer l'icône, nommée favicon.png , dans le dossier img .
2.3. Conseils : Firebug
Firebug est une extension gratuite à Firefox ou Chrome qui permet de sélectionner et modifier les
CSS de la publication.
Méthodologie
Il est conseillé de commencer à travailler et faire ses tests sous Firefox ou Chrome, à l'aide de
l'outil Firebug.
Lorsque votre charte graphique est prête, testez-la sous Internet Explorer et apportez les
modifications nécessaires dans les fichiers CSS correspondants.
Effectuer les modifications d'un élément d'une page web avec Firebug.
Attention à ne pas changer de page car Firebug ne conserve pas ces modifications !
Reporter les modifications décidées sur le(s) CSS associé(s).
Générer et consulter la publication de test afin de tester ces modifications sur les différentes
pages du contenu.
Si besoin, reprendre à l'étape 1 pour effectuer de nouvelles modifications.
8 mars 2016
Version : 4.2
Kelis
SCENARIstyler
22
SCENARIstyler
Pour en savoir plus...
Chapitre 5
Pour en savoir plus...
Pour toute assistance ou conseil concernant votre projet de personnalisation graphique, vous pouvez
poser vos questions sur forums.scenari.org [https://forums.scenari.org/] .
23
8 mars 2016
Version : 4.2
SCENARIstyler
Kelis
Glossaire
SCENARIstyler
Glossaire
em
En typographie, em désigne une unité de mesure proportionnelle à la
largeur de la lettre capitale "M".
= cadratin
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.
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).
Favicon
Icône s'affichant dans l'onglet du navigateur internet.
Flux (HTML)
Ordre d'affichage des éléments par le navigateur.
Fonticon
Désigne une police d'écriture ne contenant que des icônes.
Frame (OD)
Élément flottant qui peut être attaché à la page ou à un paragraphe.
= Cadre
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.
Responsive design
8 mars 2016
Un site web est dit responsive lorsqu'il s'adapte sur tout support
(tablette, smartphone...).
Version : 4.2
Kelis
SCENARIstyler
24