• Support de formation 2018-2019

Séance 4

1. Le brief 

En tant qu'agence web vous êtes sollicités par un prospect propriétaire du site https://www.lauregeorgedanse.com/ qui souhaite procéder à la refonte de son site.

Ce prospect a un budget limité mais a de grandes ambitions il souhaite par cette refonte : 
  • améliorer sa visibilité sur les moteurs de recherche et donc son audience qualifiée
  • générer plus de prise de contact et d'inscription 
  • faciliter la mise en avant des évènements et opérations spéciales
  • favoriser la fidélisation des clients actuels
  • disposer d'un outil simple à utiliser pour mettre à jour son site en totale autonomie 
Vous allez devoir comme une agence web/webmarketing répondre à la demande de ce client : 
  • en l'aidant à identifier des éléments de réponse face à ses objectifs (identification des cibles, des opérations webmarketing à mener)
  • en évaluant son projet (notions de couts et délais)
  • en développant un prototype de son futur site avec le CMS en SAAS Kiubi. 

2. Votre avancement 

Lors et depuis la dernière séance vous avez : 
  • installé un modèle de design (template) dans le CMS Kiubi 
  • Mis en place l'arborescence du site 
  • Tenté de modifier les contenus et modèles de mise en page.

3. Contenu de la séance 

Au cours de cette séance vous allez découvrir : 
  • Comment se gère les modèles de mise en page et pourquoi vous n'avez pas forcément controler le mise en page que vous obtenez
  • Comment modifier l'organisation des pages et leurs contenus 
  • Comment intervenir sur la mise en forme en récupérant en ftp les fichiers CSS du site

4. Modifier/customiser le prototype 

Après avoir passé en revue vos différents prototypes et répondus à vos questions nous allons voir ensemble comment aller plus loin dans la personnalisation / customisation / modification du prototype 

4.1. Principe des modèles de mise en page et widgets

L'ensemble des pages web délivrées par le CMS Kiubi et consultables par les internautes sont produites par "l'assemblage" de plusieurs éléments :

  1. le code HTML qui structure la page web
  2. le code HTML des modules et widgets qui composent des sous unités de la page
  3. le contenu saisi dans Kiubi dans les "espaces" : "site web", "blog" ou "catalogue"

Ces éléments sont fusionnés d'après la trame définie par des pages types qui se gèrent individuellement dans l'onglet "mise en page" de Kiubi. Ainsi la page d'accueil du template Nevia est constituée de plusieurs modules : 


L'assemblage des différents modules composant les différentes pages types se gère donc dans l'onglet "mise en page" de Kiubi. En dehors des contenus gérés dans les onglets dédiés et de la mise en page, le 3ème élément dont vous avez besoin correspond aux fichiers HTML CSS et images auxquels vous pourrez accéder en ftp (avec filezilla). 

Les différents modèles de mise en page 

L'onglet mise en page vous permet d'accéder à différents modèles de mise en page qui s'appliquent : 
  1. aux pages de la partie site web
  2. aux pages du blog
  3. aux pages du catalogue 
  4. aux pages de l'extranet / partie compte du site ecommerce
  5. à la page de contact
Plusieurs pages types peuvent partager le même modèle de mise en page. 
Plus d'infos sur les modèles de mise en page http://doc.kiubi.com/generalites.html#bloc8​


4.2. Ajouter un widget existant à une page type 

Pour ajouter un widget existant vous devez : 
  1. identifier la page type à modifier 
  2. accéder à la mise en page de la page type 
  3. identifier le module qui vous intéresse 
  4. par drag and drop mettez en place le widget à l'endroit choisi 
  5. enregistrer 
  6. vérifier sur le site l'apparition du module (qu'il faudra peut être modifier pour caler l'affichage) 
Plus d'infos : http://aide.kiubi.com/catalogue/Apparence/integrer-les-widgets.html​

4.3. Exemple : ajouter un widget de type formulaire 

Je vais vous guider pas à pas pour mettre en place un formulaire sur une page type spécifique : 
  1. Créer un  nouveau formulaire par duplication ou par création 
  2. Paramètrer ce formulaire 
  3. Mise en place du formulaire dans une page type (un modèle de mise en page).
 

4.4. Se connecter à votre espace FTP pour récupérer les fichiers 

Si l'on souhaite créer des variantes de billets et de widgets, modifier les textes de certains widgets, modifier la mise en forme du site en CSS, nous devons systématiquement récupérer en ftp les fichiers concernés, les modifier sur votre ordinateur, les renvoyer sur le serveur FTP. 

Récupération des fichiers en ftp

  1. Cf http://aide.kiubi.com/catalogue/Preferences-generales/zone-ftp.html
  2. Ouvrir filezilla 
  3. Créer un nouveau site dans filezilla
  4. configurer ce nouveau site à l'aide des informations figurant dans Kiubi dans l'onglet préférences (au niveau de compte ftp)
  5. vous connecter 
  6. une fois connecté vous verrez apparaitre dans la zone de droite de filezilla 2 répertoires correspondant au sommaire du contenu ftp et en ouvrant ces répertoires l'ensemble des dossiers et fichiers suivants 
  7. Voici ci après les répertoires et fichiers que vous récupérez (il existe des variantes en fonction des thèmes transmis) 
  8. Créer un répertoire avec le nom de votre site sur votre ordinateur
  9. Puis un sous répertoire dans ce premier répertoire avec la date du jour
  10. Récupérer tous les fichiers en ftp 
fr/                                       Répertoire de langue
├── billets/                              Répertoire des types de billets
│   ├── post_2_col/                       Chaque répertoire correspond à un type de billet et
│   ├── post_img_left/                    contient ses propres fichiers
│   ├── post_img_right/                    
│   └── post_simple/
│       ├── config.xml 
│       └── index.html 
├── images/                               Répertoire des images (hors médiathèque)
├── css/                                  Répertoire des fichiers CSS 
├── includes/                             Répertoire des fichiers includes
├── modules/                              Répertoire des modules
│   ├── 404/                              Chaque répertoire correspond à un module et contient 
│   ├── chemin/                           ses propres fichiers
│   └── fermeture/              
├── produits/                             Répertoire des types de produits
│   └── simple/                           Chaque répertoire (ici simple) correspond à un
│       ├── config.xml                    type de produit et contient ses propres fichiers
│       ├── index.html
│       └── style.css
├── templates/                            Répertoire des templates principaux
│   ├── 1_colonne/                        Chaque répertoire contient tous les templates principaux
│   ├── 2_colonnes_droite/                du thème. Chaque répertoire (ici: 2_colonnes_droite et 
│   ├── 2_colonnes_gauche/                2_colonnes_gauche) correspond à un template et 
│   │   ├── desc.xml                      contient ses propres fichiers.
│   │   ├── illustration_2col.gif
│   │   ├── index.html
│   │   ├── layout.css
│   │   ├── structure.xhtml
│   │   └── styles.css
│   ├── print.css
│   └── styles.css
└── widgets/                              Répertoire de tous les widgets
    ├── blog/                             Répertoire des widgets du service Blog
    │   ├── archives/                     Chaque widget à son propre répertoire principal et 
    │   ├── categories                    contient ses propres fichiers.
    │   ├── derniers_billets_postes/
    │   ├── detail_billet/
    │   ├── les_plus_commentes/
    │   ├── liens/
    │   ├── liste_billets/
    │   ├── listes_commentaires/
    │   └── poster_commentaires/
    ├── catalogue/                        Répertoire des widgets du service Catalogue
    │   ├── categories/                   Chaque widget à son propre répertoire principal et 
    │   ├── liste_categories/             contient ses propres fichiers.
    │   ├── listes_commentaires/
    │   ├── listes_produits/
    │   ├── poster_commentaire/
    │   ├── produits_associes/
    │   ├── produits_egalement_achetes/
    │   ├── produits_plus/
    │   ├── produits_vedettes/
    │   └── tags/
    ├── commandes/                        Répertoire des widgets du service Commandes
    │   ├── livraison/                    Chaque widget à son propre répertoire principal et 
    │   ├── paiement/                     contient ses propres fichiers.
    │   ├── panier/
    │   └── panier_detail/
    ├── communication/                    Répertoire des widgets du service Communication
    │   ├── contact/                      Chaque widget à son propre répertoire principal et 
    │   ├── formulaires/                  contient ses propres fichiers.
    │   ├── newsletter/
    │   └── syndication_blog/
    ├── compte/                           Répertoire des widgets du service Compte
    │   ├── identification/               Chaque widget à son propre répertoire principal et 
    │   ├── identification_rapide/        contient ses propres fichiers.
    │   ├── inscription/
    │   └── tableau_bord/
    ├── recherche/                        Répertoire des widgets du service Recherche
    │   └── simple/                       Chaque widget à son propre répertoire principal et 
    │                                     contient ses propres fichiers.
    └── site_web/                         Répertoire des widgets du service Site Web
        ├── bloc_extrait/                 Chaque widget à son propre répertoire principal et  
        │   ├── avec_lien_vers_page/      contient ses propres fichiers.
        │   ├── sans_image/
        │   ├── slideshow/                Chaque widget peut avoir plusieurs templates secondaires
        │   ├── index.html                différents (ici : avec_lien_vers_page, sans_image et
        │   └── styles.css                slideshow) contenant leurs propres fichiers correspondant 
        ├── contenu_page_libre/           chacun à un sous-répertoire du répertoire principal 
        ├── menu_h/                       du widget
        └── menu_v/
illustration.jpg                          Fichier de description et de déclaration du thème
theme.xml                                 Ces fichiers définissent les informations affichées dans la 
                                          gestion des thèmes de la console d'administration.


4.5. Modifier des fichiers HTML ou CSS et les publier sur le site 

Si vous souhaitez certains éléments de mise en forme de votre site, vous pouvez suivre les étapes suivantes : 
  1. ​avec l'inspecteur web de votre navigateur repérez les lignes CSS et le fichier CSS à modifier 
  2. ouvrez le fichier avec votre éditeur de code 
  3. modifiez les lignes CSS qui vous intéressent 
  4. publiez le fichier CSS en le transférant à distance en ftp via filezilla 
De la même manière vous pourrez modifier le code HTML :
  1. de la structure globale de la page web (dans le répertoire templates)
  2. de l'ensemble des widgets utilisables sur le site 

Et vous procéderez selon les mêmes principes pour créer de nouveaux modèles de mise en page, de nouveaux widgets,...
 

4.6. Travail par groupe 

Le reste de la séance permettra à chaque groupe de me faire un point d'avancement et de compléter cette prise en main de l'outil Kiubi côté développement.
 

4.7 Pour la prochaine séance (16 février)

Maintenant que nous avons éclairci les modalités de mise en page et de mise en forme CSS vous avez 2 solutions : 
  • Si vous êtes satisfait du travail réalisé et que vous n'avez plus qu'à le prolonger, nous vous invitons à avancer au maximum en personnalisant les contenus, arborescence et fonctionnalités pour coller au mieux aux cibles, objectifs et fonctionnalités que nous avons défini ensemble
  • Si vous n"êtes pas satisfaits du travail effectué vous pouvez réinstaller le modèle de design de base (ou un autre modèle) et recommencer la mise en place de l'arborescence et des contenus (en étant plus vigilant sur les notions de mise en page par exemple) de manière à produire un site plus qualitatif 

Une dernière séance de travail commun aura lieu le 16 février avec pour contenu la finalisation de chaque prototype par chaque groupe, et des éléments sur les véritables suites à donner dans le cas d'un vrai projet web.

Une quinzaine de jours près cette dernière séance je noterai votre travail par groupe en jugeant : 
  1. la prise en compte du brief (cibles, objectifs, taches à traiter par les cibles,...)
  2. la qualité du prototype produit 
  3. la complexité des modifications que vous aurez opéré entre le template installé et votre prototype finalisé