@kiubi/mcp-designer 1.0.0

package/storage/documents/generated/integration/01_theme_perso.md

@@ -0,0 +1,182 @@
+# Généralités
+
+## Personnaliser un thème
+
+Kiubi permet de personnaliser à 100% un site, grâce à son accès aux templates 
+de mise en page. Vous pourrez donc personnaliser le design d'un site.
+Aucune limitation graphique particulière n'est imposée !
+
+Kiubi vous permettent d'intégrer une ligne graphique réalisée sur mesure pour 
+un site Internet. Cependant, comme tout système destiné à créer des sites 
+professionnels et respectueux des standards du Web, concevoir un thème graphique 
+sur mesure requiert la maîtrise du HTM, des CSS et du Javascript, **un thème graphique 
+personnalisé est donc réservé aux utilisateurs expérimentés !**
+
+### Activer le thème graphique personnalisé
+
+Pour créer un thème graphique personnalisé, rendez-vous dans la rubrique Thèmes graphiques de la Console
+d'administration. Par défaut, un des thèmes graphiques 
+fournis en standard par Kiubi (appelé thème graphique par défaut) est utilisé. 
+Il suffit de cliquer sur le bouton <kbd class="kbd kbd-btn">Passer en thème personnalisé</kbd> et 
+de compléter et valider le formulaire. Dès cet instant, le thème graphique 
+personnalisé a été créé et initialisé à partir du thème par défaut choisi.
+
+Vous pouvez vous connecter à votre espace FTP avec les informations fournis dans
+la rubrique Thèmes graphiques pour accéder à l'intégralité des fichiers du thème graphique. 
+Une fois connecté à votre espace FTP, deux répertoires sont disponibles :
+
+- le répertoire `mediatheque` : nécessaire à la Médiathèque pour y publier
+des fichiers de plus de 7Mo.
+- le répertoire `theme` : **contenant les fichiers de votre thème graphique
+personnalisé**
+
+### Déclarer un thème graphique
+
+Afin de déclarer un thème graphique personnalisé, il est indispensable de bien
+configurer les fichiers suivants :
+
+- `illustration.jpg` : Image d'illustration du thème graphique personnalisé
+destinée à être affichée dans la gestion des thèmes afin d'identifier plus
+facilement le thème en question. Il est recommandé d'utiliser une image de 300px
+par 225px.
+- `theme.xml` : Ce fichier contient des informations descriptives du thème
+graphique. **Il est indispensable pour déclarer le thème graphique personnalisé.**
+
+### Le fichier `theme.xml`
+
+	<?xml version="1.0" encoding="iso-8859-1"?>
+	<theme img="illustration.jpg" intitule="Thème d'exemple" javascripts="none">
+		<auteur nom="Exemple" contact="contact@example.org" site="www.example.org" />
+	</theme>
+
+Ce fichier contient une seule balise principale `<theme>` qui possède 5 attributs :
+
+ - `img` : nom du fichier image qui est utilisé dans la console d'administration
+pour représenter ce modèle (correspond au fichier image nommé ci-dessus),
+ - `intitule` : intitule du thème qui est affiché dans la console
+d'administration,
+ - `style` : le style du thème (moderne, classique, etc...),
+ - `version` : la version du thème qui est affiché dans la console
+d'administration,
+ - `date` : la date de la dernière mise à jour du thème.
+ - `javascripts` : contrôle l'inclusion par défaut de bibliothèques
+javascript dans les templates. Indiquer `kiubi` pour inclure les scripts utilisés par
+les thèmes par défaut ou `none` pour désactiver cette fonctionnalité.
+
+A l'intérieur, nous avons une seule balise `<auteur>` qui permet d'ajouter des
+informations sur l'auteur du thème. Cette balise contient les attributs suivants :
+
+ - `nom` : le nom de l'auteur qui est affiché dans la console d'administration,
+ - `contact` : l'email de l'auteur,
+ - `site` : l'adresse du site internet de l'auteur.
+
+### L'arborescence des fichiers
+
+L'arborescence d'un thème graphique personnalisé contenu dans le répertoire 
+`theme` de votre espace FTP est organisée de la sorte :
+
+<pre class="arbo" style="overflow-x:auto;">
+fr/                                       <b>Répertoire de langue</b>
+&#x251C;&#x2500;&#x2500; assets/                               <b>Répertoire des ressources</b>
+&#x2502;   &#x251C;&#x2500;&#x2500; css/                              Chaque répertoire correspond à un type, de ressources 
+&#x2502;   &#x251C;&#x2500;&#x2500; fonts/                            hors contenu de la médiathèque
+&#x2502;   &#x251C;&#x2500;&#x2500; img/
+&#x2502;   &#x2514;&#x2500;&#x2500; js/
+&#x251C;&#x2500;&#x2500; billets/                              <b>Répertoire des types de billets</b>
+&#x2502;   &#x251C;&#x2500;&#x2500; image/                            Chaque répertoire correspond à un type de billet et
+&#x2502;   &#x251C;&#x2500;&#x2500; jumbotron/                        contient ses propres fichiers                   
+&#x2502;   &#x2514;&#x2500;&#x2500; simple/
+&#x2502;       &#x251C;&#x2500;&#x2500; config.xml 
+&#x2502;       &#x251C;&#x2500;&#x2500; index.html 
+&#x2502;       &#x2514;&#x2500;&#x2500; styles.css
+&#x251C;&#x2500;&#x2500; billets_blog/                         <b>Répertoire des types de billets du blog</b>
+&#x2502;   &#x2514;&#x2500;&#x2500; simple/
+&#x2502;       &#x2514;&#x2500;&#x2500; config.xml
+&#x251C;&#x2500;&#x2500; compostants/                          <b>Répertoire des types de composants</b>
+&#x2502;       &#x2514;&#x2500;&#x2500; galerie/                      Chaque répertoire correspond à un type de
+&#x2502;           &#x251C;&#x2500;&#x2500; config.xml                composant
+&#x2502;           &#x2514;&#x2500;&#x2500; index.html
+&#x251C;&#x2500;&#x2500; includes/                             <b>Répertoire des fichiers includes</b>
+&#x251C;&#x2500;&#x2500; layouts/                              <b>Répertoire des layouts</b>
+&#x2502;       &#x251C;&#x2500;&#x2500; 4_4_4.html
+&#x2502;       &#x251C;&#x2500;&#x2500; 4_8.html
+&#x2502;       &#x251C;&#x2500;&#x2500; 6_6.html
+&#x2502;       &#x2514;&#x2500;&#x2500; 8_4.html
+&#x251C;&#x2500;&#x2500; modules/                              <b>Répertoire des modules</b>
+&#x2502;   &#x251C;&#x2500;&#x2500; 404/                              Chaque répertoire correspond à un module et contient 
+&#x2502;   &#x251C;&#x2500;&#x2500; chemin/                           ses propres fichiers
+&#x2502;   &#x2514;&#x2500;&#x2500; fermeture/              
+&#x251C;&#x2500;&#x2500; produits/                             <b>Répertoire des types de produits</b>
+&#x2502;   &#x2514;&#x2500;&#x2500; simple/                           Chaque répertoire (ici <em>simple</em>) correspond à un
+&#x2502;       &#x251C;&#x2500;&#x2500; config.xml                    type de produit et contient ses propres fichiers
+&#x2502;       &#x2514;&#x2500;&#x2500; index.html
+&#x251C;&#x2500;&#x2500; symboles/                             <b>Répertoire des modèles de symboles</b>
+&#x2502;       &#x2514;&#x2500;&#x2500; defaut/                       Chaque répertoire correspondant à un template
+&#x2502;           &#x251C;&#x2500;&#x2500; desc.xml                  de symbole.
+&#x2502;           &#x251C;&#x2500;&#x2500; index.html
+&#x2502;           &#x2514;&#x2500;&#x2500; structure.xhtml
+&#x251C;&#x2500;&#x2500; templates/                            <b>Répertoire des templates principaux</b>
+&#x2502;   &#x251C;&#x2500;&#x2500; barre_laterale/                   Chaque répertoire correspondant à un template principal  
+&#x2502;   &#x251C;&#x2500;&#x2500; sans_barre_lateral/               du thème et contient ses propres fichiers           
+&#x2502;   &#x2502;   &#x251C;&#x2500;&#x2500; desc.xml                      
+&#x2502;   &#x2502;   &#x251C;&#x2500;&#x2500; index.html
+&#x2502;   &#x2502;   &#x251C;&#x2500;&#x2500; structure.xhtml
+&#x2502;   &#x2502;   &#x2514;&#x2500;&#x2500; styles.css
+&#x2502;   &#x251C;&#x2500;&#x2500; print.css
+&#x2502;   &#x2514;&#x2500;&#x2500; styles.css
+&#x2514;&#x2500;&#x2500; widgets/                              <b>Répertoire de tous les widgets</b>
+    &#x251C;&#x2500;&#x2500; blog/                             <b>Répertoire des widgets du service Blog</b>
+    &#x2502;   &#x251C;&#x2500;&#x2500; archives/                     Chaque widget à son propre répertoire principal et 
+    &#x2502;   &#x251C;&#x2500;&#x2500; categories                    contient ses propres fichiers.
+    &#x2502;   &#x251C;&#x2500;&#x2500; derniers_billets_postes/
+    &#x2502;   &#x251C;&#x2500;&#x2500; detail_billet/
+    &#x2502;   &#x251C;&#x2500;&#x2500; les_plus_commentes/
+    &#x2502;   &#x251C;&#x2500;&#x2500; liens/
+    &#x2502;   &#x251C;&#x2500;&#x2500; liste_billets/
+    &#x2502;   &#x251C;&#x2500;&#x2500; listes_commentaires/
+    &#x2502;   &#x2514;&#x2500;&#x2500; poster_commentaires/
+    &#x251C;&#x2500;&#x2500; catalogue/                        <b>Répertoire des widgets du service Catalogue</b>
+    &#x2502;   &#x251C;&#x2500;&#x2500; categories/                   Chaque widget à son propre répertoire principal et 
+    &#x2502;   &#x251C;&#x2500;&#x2500; liste_categories/             contient ses propres fichiers.
+    &#x2502;   &#x251C;&#x2500;&#x2500; listes_commentaires/
+    &#x2502;   &#x251C;&#x2500;&#x2500; listes_produits/
+    &#x2502;   &#x251C;&#x2500;&#x2500; poster_commentaire/
+    &#x2502;   &#x251C;&#x2500;&#x2500; produits_associes/
+    &#x2502;   &#x251C;&#x2500;&#x2500; produits_egalement_achetes/
+    &#x2502;   &#x251C;&#x2500;&#x2500; produits_plus/
+    &#x2502;   &#x251C;&#x2500;&#x2500; produits_vedettes/
+    &#x2502;   &#x2514;&#x2500;&#x2500; tags/
+    &#x251C;&#x2500;&#x2500; commandes/                        <b>Répertoire des widgets du service Commandes</b>
+    &#x2502;   &#x251C;&#x2500;&#x2500; livraison/                    Chaque widget à son propre répertoire principal et 
+    &#x2502;   &#x251C;&#x2500;&#x2500; paiement/                     contient ses propres fichiers.
+    &#x2502;   &#x251C;&#x2500;&#x2500; panier/
+    &#x2502;   &#x2514;&#x2500;&#x2500; panier_detail/
+    &#x251C;&#x2500;&#x2500; communication/                    <b>Répertoire des widgets du service Communication</b>
+    &#x2502;   &#x251C;&#x2500;&#x2500; contact/                      Chaque widget à son propre répertoire principal et 
+    &#x2502;   &#x251C;&#x2500;&#x2500; formulaires/                  contient ses propres fichiers.
+    &#x2502;   &#x251C;&#x2500;&#x2500; newsletter/
+    &#x2502;   &#x2514;&#x2500;&#x2500; syndication_blog/
+    &#x251C;&#x2500;&#x2500; compte/                           <b>Répertoire des widgets du service Compte</b>
+    &#x2502;   &#x251C;&#x2500;&#x2500; identification/               Chaque widget à son propre répertoire principal et 
+    &#x2502;   &#x251C;&#x2500;&#x2500; identification_rapide/        contient ses propres fichiers.
+    &#x2502;   &#x251C;&#x2500;&#x2500; inscription/
+    &#x2502;   &#x2514;&#x2500;&#x2500; tableau_bord/
+    &#x251C;&#x2500;&#x2500; recherche/                        <b>Répertoire des widgets du service Recherche</b>
+    &#x2502;   &#x2514;&#x2500;&#x2500; simple/                       Chaque widget à son propre répertoire principal et 
+    &#x2502;                                     contient ses propres fichiers.
+    &#x2514;&#x2500;&#x2500; site_web/                         <b>Répertoire des widgets du service Site Web</b>
+        &#x251C;&#x2500;&#x2500; bloc_extrait/                 Chaque widget à son propre répertoire principal et  
+        &#x2502;   &#x251C;&#x2500;&#x2500; avec_lien_vers_page/      contient ses propres fichiers.
+        &#x2502;   &#x251C;&#x2500;&#x2500; sans_image/
+        &#x2502;   &#x251C;&#x2500;&#x2500; slideshow/                Chaque widget peut avoir plusieurs templates secondaires
+        &#x2502;   &#x251C;&#x2500;&#x2500; index.html                différents (ici : avec_lien_vers_page, sans_image et
+        &#x2502;   &#x2514;&#x2500;&#x2500; styles.css                slideshow) contenant leurs propres fichiers correspondant 
+        &#x251C;&#x2500;&#x2500; contenu_page_libre/           chacun à un sous-répertoire du répertoire principal 
+        &#x251C;&#x2500;&#x2500; menu_h/                       du widget
+        &#x2514;&#x2500;&#x2500; menu_v/
+illustration.jpg                          <b>Fichier de description et de déclaration du thème</b>
+theme.xml                                 Ces fichiers définissent les informations affichées dans la 
+                                          gestion des thèmes de la console d'administration.
+</pre>
+
+

package/storage/documents/generated/integration/02_modeles.md

@@ -0,0 +1,220 @@
+##  Templates principaux
+
+Les templates principaux constituent les squelettes du site
+dans lesquels vont s'intégrer les Widgets. Chaque template
+contient **une structure HTML complète** qui lui est propre, des feuilles de styles,
+des codes javascripts, etc. et également **la position de chaque zone où vont se
+placer les Widgets**.
+
+Chaque template peut être utilisé pour configurer une page type dans la rubrique Mises en page de la console d'administration.
+Il est donc possible d'utiliser plusieurs templates différents pour personnaliser un site Internet et cela page par page, si nécessaire.
+
+**Si vous utilisez un thème graphique personnalisé, vous pouvez modifier et créer de nouveaux templates.**
+
+### Paramètres d'un template
+
+Une fois connecté à votre espace FTP, tous les templates sont
+regroupés dans le répertoire `theme/fr/templates/`. Chacun de ces sous-
+répertoires est un template. Un template contient les fichiers
+suivants :
+
+ - `desc.xml` : permet de décrire le template et déclarer les
+zones. **Ce fichier est obligatoire**
+ - `index.html` : contient le code HTML du template. **Ce fichier
+est obligatoire**
+ - `structure.xhtml` : permet de définir la structure du template
+utilisée dans l'édition d'une page type. Ce fichier n'a aucun lien avec le rendu
+du site internet et n'est utilisé que pour la console d'administration. **Ce
+fichier est obligatoire**
+
+D'autres fichier facultatifs peuvent être présents dans le répertoire `theme/fr/templates/`,
+comme par exemples :
+
+- `apple-touch-icon.png`
+- `favicon.ico`
+- `favicon.png`
+
+### Le fichier `desc.xml`
+
+Ce fichier contient des informations descriptives du template. Il
+permet principalement de déclarer les zones du template dans lesquelles pourront
+être insérés des Widgets.
+
+#### Exemple de code source
+
+	<?xml version="1.0" encoding="iso-8859-1"?>
+	<modele intitule="Modèle par défaut">
+	  <zones defaut="contenu">
+		<zone id="entete" colmax="1" intitule="Entete" defaut="1"/>
+		<zone id="menu" colmax="1" intitule="Menu" defaut="1"/>
+		<zone id="sidebar" colmax="1" intitule="Barre latérale" defaut="1" type="contenu"/>
+		<zone id="contenu" colmax="3" intitule="Contenu" defaut="1" type="contenu"/>
+		<zone id="piedepage" colmax="3" intitule="Pied de page" defaut="1"/>
+	  </zones>
+	</modele>
+
+#### Description
+
+Ce fichier contient une seule balise principale `<modele>` qui possède 2 attributs :
+
+ - `intitule` : intitule du template qui est utilisé dans la
+console d'administration
+ - `img` (déprécié) : nom du fichier image qui était utilisé dans la console d'administration
+pour représenter ce template.
+
+A l'intérieur, nous avons une seule balise `<zones>` qui contient tout un ensemble
+de balises `<zone>`. L'attribut `defaut` permet de désigner la zone dans laquelle
+seroont placés par défaut tous les contenus ajoutés dans la page. La zone désignée est
+alors automatiquement considérée comme étant de type "contenu". 
+                     
+La balise `<zone>` sert à déclarer une zone où vont pouvoir
+être inséré les Widgets. **L'id des zones devra être repris dans les fichiers
+`structure.xhtml` et `index.html`.** 
+
+Elles contiennent les attributs suivants :
+
+ - `id` : code alphanumérique qui sera réutilisé pour identifié la zone dans les
+fichiers `index.html` et `structure.xhtml`.
+ - `colmax` : nombre maximum de colonnes des blocs de présentation qui peuvent
+être insérés dans cette zone (de 1 à 3). Les colonnes correspondant sont gérées 
+via les fichiers du répertoire `theme/fr/layouts/`
+ - `intitule` : intitulé de la zone qui sera repris dans la console
+d'administration dans l'édition d'une page type.
+ - `defaut` : nombre de colonnes des blocs de présentation insérées par défaut
+dans la zone.
+ - `type` : si la valeur est "contenu", la zone pourra accepter des billets, symboles et
+ composants dans la console d'administration.
+
+### Le fichier `structure.xhml`
+
+Ce fichier est une représentation schématique de la disposition des zones dans
+le template (les zones déclarées dans le fichier `desc.xml`).
+Il est utilisé pour générer la page d'édition d'une page type dans la console
+d'administration. Il n'est en aucun cas utilisé pour effectuer un rendu du site
+Internet.
+
+#### Exemple de code source
+
+	<table>
+	  <tr>
+		<td colspan="2">{entete}</td>
+	  </tr>
+	  <tr>
+		<td colspan="2">{menu}</td>
+	  </tr>
+	  <tr>
+		<td width="30%">{sidebar}</td>
+		<td>{contenu}</td>
+	  </tr>
+	  <tr>
+		<td colspan="2">{piedepage}</td>
+	  </tr>
+	</table>
+
+#### Description
+
+Les zones sont appelées directement en mettant leurs ID entre accolade.
+
+**Il est obligatoire d'utiliser un code HTML simple, sans script ni style. Seules les balises TABLE, TD et TR sont autorisées.**
+
+### Le fichier `index.html`
+
+Alors que le fichier `structure.xhtml` est une vue abstraite de la page
+utilisée seulement dans la console d'administration, le fichier `index.html`
+contient le code HTML concret du template qui sera affiché dans le
+site Internet.
+
+#### Exemple de code source
+
+```
+<!-- BEGIN:main -->
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
+<head>
+  <title>{title}</title>
+  <meta name="description" content="{metaDescription}" />
+  <meta name="keywords" content="{metaKeywords}" />
+  {metaRobots}
+  {metaCanonical}
+  <!-- Charges les scripts des Options avancées du Back-office -->
+  {js_head}
+</head>
+<body>
+
+<!-- BEGIN:logo_site -->
+<h1>
+  <a href="{racine}/" title="{accroche_site} - Retour &agrave; l'accueil">
+    <img src="{racine}/media/{logo_site}" alt="{accroche_site|htmlentities}" />
+  </a>
+</h1>
+<!-- END:logo_site --> 
+
+<!-- BEGIN:accroche_site-->
+<h2><a href="{racine}/" title="{accroche_site|htmlentities}">{accroche_site}</a></h2>
+<!-- END:accroche_site--> 
+
+<!-- BEGIN:desc_site-->
+<h3>{desc_site}</h3>
+<!-- END:desc_site--> 
+
+<div>{ZONE.menu}</div>
+<div>{ZONE.contenu}</div>
+<div>{ZONE.piedepage}</div>
+
+<!-- Charges les scripts des Options avancées du Back-office --> 
+{js_body}
+</body>
+</html>
+<!-- END:main -->
+```
+
+
+#### Description
+
+Les balises `{ZONE.*}` servent à indiquer où insérer les Widgets. Les noms des
+zones sont déclarés dans le fichier `desc.xml`.
+
+#### Balises disponibles
+
+
+|Balise|Description|
+|---|---|
+| `{metaCanonical}` | Insère la balise `<meta name="canonical">` correspondant à l'url canonique de la page courante |
+| `{metaRobots}` | Insère la balise de désindexation automatique des pages sans valeur sémantique comme les résultats de recherche ou les paginations `<meta name="robots" content="noindex, follow">`. |
+| `{title}` | Insère le titre de la page `<title>`. A configurer dans "Mon compte / Préférences / Metas par défaut" ou dans les options avancées de la page. |
+| `{metaKeywords}` | Insère les mots clés de la page `<meta keywords>`. A configurer dans "Mon compte / Préférences / Metas par défaut" ou dans les options avancées de la page. |
+| `{metaDescription}` | Insère la description de la page `<meta description>`. A configurer dans "Mon compte / Préférences / Metas par défaut" ou dans les options avancées de la page. |
+| `{modele}` | Affiche le nom du répertoire du modèle de mise en page utilisé. |
+| `{service}` | Affiche le code du service en cours. Cette balise sert, par exemple, au moteur de recherche pour qu'il fasse des recherches dans le service en cours.<br />Affiche cms si le service en cours est le Site web, Contact et Gestion de compte.<br />Affiche blog si le service en cours est le Blog.<br />Affiche catalogue si le service en cours est le Catalogue et E-commerce (Commandes). |
+| `{js_head}` | Insère du javascript destiné à être exécuté dans la balise `<head>` de la page. A configurer dans "Mon compte / Préférences / Metas par défaut" ou dans les options avancées de la page. |
+| `{js_body}` | Insère du javascript destiné à être exécuté juste avant la fermeture de la balise `<body>` de la page. A configurer dans "Mon compte / Préférences / Metas par défaut" ou dans les options avancées de la page. |
+| `{Stylesheet}` | Insère les feuilles de styles des Widgets et des modules, si besoin. |
+| `{Javascripts}` | Insère les javascripts nécessaires au bon fonctionnement de Kiubi avec d'anciens thèmes par défaut de Kiubi |
+| `{ZONE.xxx}` | Insère les Widgets de la zone "xxx" telle qu'ils ont été configurés dans l'édition d'une page type. Les noms (identifiants) des zones sont définis dans le fichier "structure.xhtml" propre au modèle de mise en page. |
+
+
+
+	<!-- BEGIN:accroche_site--> <!-- END:accroche_site-->
+
+Le bloc s'affiche si l'option "Afficher le nom" est activée dans
+le Bloc-marque des Préférences du site.
+
+	<!-- BEGIN:desc_site--> <!-- END:desc_site-->
+
+Le bloc s'affiche si l'option "Afficher la signature" est activée dans
+le Bloc-marque des Préférences du site.
+
+	<!-- BEGIN:logo_site--> <!-- END:logo_site-->
+
+Le bloc s'affiche si l'option "Afficher le logo" est activée dans
+le Bloc-marque des Préférences du site.
+
+### Ajouter un nouveau template
+
+Pour ajouter un nouveau template, il suffit de créer un nouveau
+sous-répertoire au répertoire `theme/fr/templates/` et d'y copier tous les
+fichiers correspondant à votre nouveau template. Le nouveau template sera alors
+automatiquement proposé dans l'édition d'une page type de la
+console d'administration.
+
+

package/storage/documents/generated/integration/03_widgets.md

@@ -0,0 +1,139 @@
+##  Widgets
+
+Les Widgets de Kiubi forment la base des différents modules fonctionnels qui
+composent le site Internet. Dans la gestion de la Mise en page, chaque Widget peut
+être glissé/déposé dans une zone d'une page type et configuré selon un certain
+nombre de paramètres qui lui sont propres. **Afficher un menu, une liste de
+produits ou même un formulaire de contact, tout ceci est possible grâce aux
+Widgets**.
+
+Le guide du Webdesigner décrit et explique en
+détail les différents paramètres et configurations possibles pour tous les
+Widgets. De plus, vous y trouverez toutes les balises disponibles dans les templates des Widgets 
+et dans quelles conditions les utiliser. **La compréhension de ces différentes
+informations (template + balise + paramètre + configuration) vous permettra de
+personnaliser l'intégralité des Widgets de Kiubi.**
+
+### Listes des Widgets
+
+Les widgets sont classés selon leur service et leur type :
+
+##### Site Web
+
+ - [Contenu d'une page](/design-site-web.html#contenus-d-une-page) <span class="badge badge-primary ml-1">Nouveau</span>
+ - [Symbole](/design-site-web.html#symbole) <span class="badge badge-primary ml-1">Nouveau</span>
+ - [Bloc d'extraits](/design-site-web.html#bloc-d-extrait) 
+ - [Menu horizontal](/design-site-web.html#menu-horizontal)
+ - [Menu vertical](/design-site-web.html#menu-vertical)
+ - [Liste des billets](/design-site-web.html#liste-de-billets) (Anciennement Contenu d'une page libre) <span class="badge badge-secondary ml-1">Déprécié</span>
+
+##### Blog
+
+ - [Derniers billets postés](/design-blog.html#derniers-billets-postes)
+ - [Détail d'un billet](/design-blog.html#detail-billet)
+ - [Billets les plus commentés](/design-blog.html#billets-les-plus-commentes)
+ - [Liens](/design-blog.html#liens)
+ - [Liste des billets](/design-blog.html#liste-des-billets)
+ - [Liste des commentaires](/design-blog.html#liste-des-commentaires)
+ - [Poster un commentaire](/design-blog.html#poster-un-commentaire)
+ - [Archives](/design-blog.html#archives)
+ - [Catégories](/design-blog.html#categories)
+ - [Derniers commentaires postés](/design-blog.html#derniers-commentaires-postes)
+ 
+##### Catalogue
+
+ - [Catégories](/design-catalogue.html#categories)
+ - [Tags](/design-catalogue.html#tags)
+ - [Liste des catégories](/design-catalogue.html#liste-des-categories)
+ - [Liste des produits](/design-catalogue.html#liste-des-produits)
+ - [Détail d'un produit](/design-catalogue.html#detail-d-un-produit)
+ - [Poster un commentaire](/design-catalogue.html#poster-un-commentaire)
+ - [Liste des commentaires](/design-catalogue.html#liste-des-commentaires)
+ - [Produits vedettes](/design-catalogue.html#produits-vedettes)
+ - [Produits les plus](/design-catalogue.html#produits-les-plus)
+ - [Produits également achetés](/design-catalogue.html#produits-egalement-achetes)
+ - [Produits associés](/design-catalogue.html#produits-associes)
+
+##### Commandes
+
+ - [Panier](/design-commandes.html#panier)
+ - [Détail du panier](/design-commandes.html#detail-du-panier)
+ - [Livraison](/design-commandes.html#livraison)
+ - [Paiement](/design-commandes.html#paiement)
+ - [Validation](/design-commandes.html#validation)
+
+##### Gestion de compte
+
+ - [Identification rapide](/design-comptes.html#identification-rapide)
+ - [Identification](/design-comptes.html#identification)
+ - [Formulaire d'inscription](/design-comptes.html#formulaire-d-inscription)
+ - [Tableau de bord](/design-comptes.html#tableau-de-bord)
+
+##### Modules (Communication)
+
+ - [Dismoi? (générateur de formulaires)](/design-modules.html#dismoi-)
+ - [Inscription à la newsletter](/design-modules.html#newsletter)
+ - [Syndication du blog](/design-modules.html#syndication)
+ - [Formulaire de contact](/design-modules.html#formulaire-de-contact)
+
+##### Recherche
+
+ - [Recherche simple](/recherche.html#recherche-simple)
+
+##### Boite à outils
+
+Ces Widgets permettent de faire de l'inclusion de code et n'ont donc ni de configuration, ni de modèle graphique qui leurs sont propres. 
+
+ - Fragment de code : le code (HTML, CSS, JS, etc.) est éditable dans les paramètres du widget et directement ajouté dans une mise en page, à la position du widget 
+ - Fragment de template : le widget liste les fichiers includes disponibles dans le répertoire `theme/fr/includes/` et sont directement ajoutés dans une mise en page, à la position du widget 
+
+### Personnalisé un Widget
+
+Chaque Widget de Kiubi peut être personnalisé de deux manières différentes :
+
+ - Dans tous les cas, en modifiant ses paramètres et sa configuration,
+directement dans la console d'administration lors de l'édition du Widget dans la gestion de la mise en page
+ -  Dans le cas de l'utilisation d'un thème graphique personnalisé, en modifiant
+le template qui le compose.
+
+Si vous utilisez un thème graphique personnalisé, vous pouvez éditer et modifier
+le template, c'est-à-dire les fichiers HTML qui composent et
+définissent l'apparence d'un Widget. Le paramétrage et la configuration d'un
+Widget seront cependant toujours à faire lors de l'édition du Widget dans la
+gestion de la mise en page de la console d'administration de Kiubi.
+
+Dans votre espace FTP, tous les Widgets sont regroupés dans le répertoire 
+`theme/fr/widgets/` et classés dans leur propre répertoire, selon leur service
+(un répertoire par Widget classé dans un répertoire par service).
+
+Chaque répertoire principal d'un Widget contient :
+
+ - un fichier `index.html` structuré de manière différente en fonction du Widget. **Ce fichier** `index.html` **est obligatoire.**
+ - un fichier `styles.css` peut être ajouté au Widget afin de contrôler sa mise en forme. Ce fichier est automatiquement 
+ chargé dans la balise `<head>` si le widget est présent dans la page. **Ce fichier** `styles.css` **n'est pas obligatoire.**
+
+### Ajouter des templates supplémentaires à un Widget
+
+Un même Widget peut avoir plusieurs templates, c'est-à-dire qu'il peut
+avoir plusieurs apparences différentes.
+
+Pour ajouter un templates à un Widget, il suffit de créer un sous-
+répertoire au répertoire principal du Widget et d'y copier/coller le fichier
+`index.html` (et `styles.css`) correspondant au Widget.
+
+Si les deux fichiers sont présents, ce nouveau modèle graphique utilisera les
+deux fichiers.
+
+Si un seul des deux fichiers est présent, ce nouveau modèle graphique utilisera
+le fichier présent et complètera par celui présent à la racine du répertoire
+principal du Widget.
+
+Il suffit de choisir ensuite le modèle graphique correspondant lors de l'édition
+d'un Widget dans la gestion de la mise en page de la console d'administration de
+Kiubi.
+
+Il est donc possible, avec le même Widget, d'avoir non seulement plusieurs paramétrages possibles mais en plus, chaque 
+Widget peut avoir une infinité d'apparences différentes. **En fonction de son template et de ses paramètres, un même
+Widget peut répondre à des usages complètement différents et donc s'adapter parfaitement à vos besoins.**
+
+

package/storage/documents/generated/integration/04_blocs.md

@@ -0,0 +1,45 @@
+## Blocs
+
+Les blocs sont des portions de HTML encadrés par des codes spécifiques qui vont
+pouvoir être affichés ou masqués selon le besoin, et même dupliqués. Ils se
+présentent toujours de cette façon :
+
+	<!-- BEGIN:bloc --> <!-- END:bloc -->
+
+Les blocs sont pour la plupart du temps imbriqués dans d'autres blocs. La
+documentation ci-après précise toujours dans quel bloc placer tel autre bloc (ou
+telle balise).
+Si rien n'est précisé c'est qu'il faut au moins placer le bloc
+dans le bloc `<!-- BEGIN:main -->` `<!-- END:main -->`.
+
+Voici un exemple de blocs correctement imbriqués :
+
+	<!-- BEGIN:main -->
+		<!-- BEGIN:bloc -->
+			<!-- BEGIN:bloc2 -->
+			<!-- END:bloc2 -->
+			<!-- BEGIN:bloc3 -->
+			<!-- END:bloc3 -->
+		<!-- END:bloc -->
+	<!-- END:main -->
+L'exemple suivant est faux et amènera à des comportements imprévisibles. **Les blocs `bloc2` et `bloc3` sont mélangés 
+l'un dans l'autre, ce qui est incorrect :**
+
+	<!-- BEGIN:main -->
+		<!-- BEGIN:bloc2 -->
+			<!-- BEGIN:bloc3 -->
+			<!-- END:bloc2 -->
+		<!-- END:bloc3 --> // cette fermeture de bloc ne devrait pas se trouver ici !!!
+	<!-- END:main -->
+
+Certaines balises ne sont accessibles qu'à l'intérieur de blocs spécifiques. Si
+c'est le cas, cette documentation le précisera.
+
+**Avertissements :**
+
+- **un même bloc ne peut pas être répété deux fois dans le même fichier**
+- **un bloc qui est utilisé dans un widget, n'est pas forcément utilisable dans un autre ou dans tous les widgets, à chaque widget ses blocs**
+- **tous les modèles graphiques doivent commencer par `<!-- BEGIN:main -->` et se terminer par `<!--END:main -->` oublier ce bloc est une erreur très courante, pensez à vérifier ce bloc si rien ne s'affiche dans votre site**
+- **tout ce qui est en dehors du bloc `<!-- BEGIN:main -->` `<!-- END:main -->` est ignoré par Kiubi**
+
+

package/storage/documents/generated/integration/05_balises.md

@@ -0,0 +1,43 @@
+## Balises
+
+Les balises de Kiubi sont de petits codes que vous pouvez inclure un peu partout
+et qui servent à afficher toutes les informations que vous avez saisies à l'aide
+de votre console d'administration dans les pages de votre site. On reconnaît
+facilement ces balises car elles sont composées d'un mot entouré d'accolades : `{titre}`.
+
+Kiubi utilise des ensembles de fichiers HTML (des templates) pour
+mettre en forme votre site. Ils composent le squelette du site. Les balises
+servent à donner vie au squelette en indiquant à Kiubi où injecter exactement le
+titre de la page, le contenu des billets, la date de création du dernier billet
+de votre blog, etc. Elles sont pour ainsi dire omniprésentes. Tous les templates ont besoin
+ de balises pour fonctionner et vous pouvez également saisir certaines balises 
+ dans les éditeurs de texte visuels (éditeurs "Wysiwyg").
+
+Il existe trois grandes familles de balises :
+
+- les balises globales sont utilisables partout (modèles graphiques, éditeurs de
+texte visuels, champs d'information, etc.)
+- les balises des modèles de mise en pages qui ne fonctionnent que dans les
+templates principaux
+- les balises des widgets qui ne fonctionnent que dans leur widget
+
+### Exemple d'utilisation d'une balise
+
+Prenons un exemple d'un template tel qu'on pourrait en trouver dans
+les sous-répertoires de `/fr/template/`.
+
+	<head>
+		<meta name="keywords" content="{metaKeywords}" />
+		<meta name="description" content="{metaDescription}" />
+		<title>{title}</title>
+	</head>
+
+On voit ici que le titre de la page, la description et les mots clés de l'entête
+du fichier HTML sont définis à l'aide de balises et seront remplis
+automatiquement avec les valeurs configurées dans la console d'administration.
+
+**Une balise utilisée dans un widget, n'est pas forcément utilisable dans un autre ou dans tous les widgets. A chaque widget ses balises !** 
+
+
+
+