Documentation de l'interface d'édition des skins Zwook

Qu'est ce qu'un skin ?

Un skin correspond à l'habillage graphique d'un site. Il comprend habituellement la bannière, la navigation principale, le login manager, ....
Nous pouvons comparer un skin à la coque du téléphone portable..Ainsi, il est possible de le changer sans pour autant affecter le contenu de la zone d'édition. Ceux-ci étant indépendants il est donc possible d'affecter un skin différent pour n'importe qu'elle page.

Qu'est ce que la Zone d'édition ?

La zone d'édition du contenu correspond à la zone de contenu éditorial qui sera mise à jour. Celui-ci ne fait pas partie du skin. Il est donc très important lors de la création d'un skin de définir sa zone d'emplacement. Cette Zone d'édition de contenu, correspond à l'interface de gestion de contenu Zwook.

Dans cette zone d'édition du contenu ,vous allez pouvoir :
- ajouter de nouveaux éléments (login manager, navigation, titre, images, liens, ...)
- Mettre en page ces éléments en agissant sur les propriétés du tableau et des ses cases.
- Lors de la création d'un nouveau skin, après avoir défini les propriétés du tableau et de ses cases, vous devez impérativement placer la zone d'édition avant de pouvoir y insérer des éléments.

L'édition des skins dans Zwook :

Pour y accéder cliquer sur cette icône :
Vous arrivez sur la page "LISTE DES SKINS"

Pour affecter un skin à une page précise, cocher le skin (en bas dans cette interface) et cliquer sur "OK"

Pour modifier un skin et/ou le personnaliser cliquer sur le skin dans la liste du haut : Exemple "Blue moon"
Nous arrivons donc dans une interface : Le mode d'édition d'un skin

Description de l'interface :

- Le "Mode Mise en Page"

En passant en mode mise en page, vous pouvez gérer les paramètres de présentation de votre skin, ajouter et supprimer des lignes et des colonnes, spécifier leur taille (largeur et hauteur), les marges (internes et externes), faire des sous-tableaux,...
Pour cela cliquer sur "sélectionner la case", celle-ci s'affiche en rose, puis donner lui les paramètres choisis (couleur, hauteur, largeur,...)
Une fois les paramètres de chacune des cellules établies, n'oubliez pas de cliquer sur "VALIDER PRIOPRIETES", pour que les modifications soient prises en compte.

Vous pouvez également mettre une image de fond. Celle-ci se cale en haut à gauche. Attention cette image se répète sur l'ensemble du fond (un peu comme le wallpaper en mosaïque ou fond d'écran sur un PC)

- : ajouter une ligne
- : supprimer une ligne
- : ajouter colonnes
- : supprimer une colonne

Il est également possible de fusionner deux cellules. Pour cela il vous suffit de sélectionner deux cellules (ou plus) et de cliquer sur "Fusion de cases"

De façon générale vous apercevrez que l'éditeur de Skin Zwook, fait aparaître des actions quand il est possible de les faire. Par exemple, l'option "Fusion de cases" n'apparaît que si vous n'avez coché qu'au minimum deux cases (adjacentes). De même pour pouvoir ajouter un sous-tableau, il faut avoir au préalable sélectionné une case.

- "Ajout Element"
Voici la liste des modules qui sont le plus souvent utilisés dans le skin lors de la création du site.

	- Login manager : module qui permet l'inscription et la connexion au back office Zwook
	- Navigation : module de navigation
	- Texte brut : éditeur de texte, et html
	- Module Epoz : éditeur WYSIWIG
	- Module Image : souvent utilisé pour placer la bannière dans le skin
	- Module Titre : pour des slogans
	- Module Lien
	- Module fichier à télécharger
	- Module article
	- Module afficher une animation flash :
	- Module mini calendrier, et mes évnènements
	- Module messages personnels
	- Module Locate bar : pour des navigations horizontale en mode texte
	- Module Liste des dossiers contenus dans le dossier
	- Module Plan des sous dossiers
	- Module trait
	- Module Script Python
	- Module Forum Monitor
	- Module Dernier message dans les forums
	- Module Speedblog

MODIFIER UN SKIN :

Pour modifier un skin, cliquer sur le nom du skin choisi. Puis ajouter, remplacer ,supprimer ou modifier les modules existants à vote guise.
Il est possible de configurer certains modules (ex , navigation) d'un simple clic sur les modules.
De façon générale, pour personnaliser un skin il vous suffit de modifier la bannière, changer les couleurs des cases,...

CREER UN SKIN :

Par où commencer ?
1ère étape :
- Définir l'objectif du site
- Définir la cible

2ème étape : Définir l'arborescence
Voici un exemple :
Home
- Présentation
-- Sous rubrique 1
-- Sous rubrique 2
- Produits
-- Légumes
---- Patates
---- Haricots
-- Fruits
---- Pommes
---- Abricots
- Références
- Partenaires
- Contact

Légende :
Home = Page d'accueil (niveau 0)
- Rubrique principale (niveau 1)
-- Sous rubrique (niveau 2)
--- Sous sous rubrique (niveau 3)
---- etc...

3ème étape : Faire la maquette
Voici un exemple :

Description de la maquette :
- Cette maquette contient 2 lignes et 2 colonnes. Elle est optimisée pour un affichage à 760 pixels de largeur.
- La hauteur sera spécifiée à 100%.
- Une bannière de 585 pixels de large et 79 pixels de hauteur
- Une navigation verticale automatisée
- Le bouton se connecter dans la bannière du haut qui sera lui-meme inclus dans une case du sous-tableau contenant la bannière.
- la largeur de la bande navigation à gauche sera de 140 pixels de large avec une hauteur à 100%
- La bande gauche a pour fond de couleur hexadécimale : #F4F2F2 (un bleu gris)
- La maquette est construite sur un fond blanc #FFFFFF
- La zone d'édition de contenu à une largeur de 620 pixels

A la bannière du haut est ajouté un sous-tableau afin d'avoir les deux éléments alignés.

Intégration du skin dans l'éditeur ZWOOK :

1. Cliquer sur l'interface d'édition des skins
2. Dans "Actions Skins" (à gauche, en violet), ajouter le nom de votre skin, puis cliquer sur "OK"
Exemple : Je donne le nom de "mon skin"
3. J'arrive sur l'interface "Mode Mise en page de l'éditeur de skin"

4. En fonction de la maquette, créer les colonnes et les lignes, puis déterminer les propriétés de chacune des cases (lignes et colonnes). Attention ne pas oublier de cliquer sur "VALIDER PROPRIETES"
Conseil : pour chacune des cellules, mettre le contenu en haut pour l'alignement vertical, et à gauche pour l'alignement horizontal.
Dans ce cas ici présent, nous créons un sous-tableau que nous divisons en deux colonnes.

Voici les différentes étapes :
Créez 2 colonnes, puis 2 lignes

Sélectionner les 2 colonnes du haut, puis les fusionner
Voici le résultat après fusion des cases

Sélectionner la case du haut, puis ajouter un sous-tableau

Le sous-tableau a été rajouté

Je sépare le sous-tableau en deux colonnes

Puis placer la Zone d'édition de contenu

Voici donc le résultat

5. Place la zone d'édition de contenu. Pour cela aller dans le menu à gauche "ACTION TABLEAU" puis cliquer sur "Placer la zone d'édition"

6. Passer en "MODE EDITION", puis placer les éléments.
Dans le "MODE EDITION" les sous-tableaux n'apparaîssent pas.
Exemple :

- Je place donc Login Manager en haut à droite dans le sous-tableau
- Puis je place le module de navigation dans la bande à gauche
- Je place ma bannière, en cliquant sur le module image, que je place en haut à gauche dans le sous-tableau. Dans l'interface du module image, nous vous conseillons de remplir l'option "Lien" par ceci : $URL. Ceci fera un lien sur la bannière, vers la page d'accueil.

7. Je valide mon skin en cliquant sur "VALIDATION DU SKIN", situé en bas de "ACTION ELEMENTS"
8. Nous arrivons sur la "LISTE DES SKINS", affecter le skin "mon skin" en cochant la petite case à gauche, puis cliquer sur "OK" pour voir le résultat.

9. Sortir du Back Office (en haut à droite) en cliquant sur le bouton jaune "Exit"
10. Voici donc le résultat.

Il ne reste plus qu'à définir l'arborescence et imaginer un contenu.

A vous maintenant de faire preuve d'imagination !