Support de cours PUB/MMI

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 :

le code HTML qui structure la page web
le code HTML des modules et widgets qui composent des sous unités de la page
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 :

aux pages de la partie site web
aux pages du blog
aux pages du catalogue
aux pages de l'extranet / partie compte du site ecommerce
à 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 :

identifier la page type à modifier
accéder à la mise en page de la page type
identifier le module qui vous intéresse
par drag and drop mettez en place le widget à l'endroit choisi
enregistrer
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 :

Créer un nouveau formulaire par duplication ou par création
Paramètrer ce formulaire
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

Cf http://aide.kiubi.com/catalogue/Preferences-generales/zone-ftp.html
Ouvrir filezilla
Créer un nouveau site dans filezilla
configurer ce nouveau site à l'aide des informations figurant dans Kiubi dans l'onglet préférences (au niveau de compte ftp)
vous connecter
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
Voici ci après les répertoires et fichiers que vous récupérez (il existe des variantes en fonction des thèmes transmis)
Créer un répertoire avec le nom de votre site sur votre ordinateur
Puis un sous répertoire dans ce premier répertoire avec la date du jour
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 :

avec l'inspecteur web de votre navigateur repérez les lignes CSS et le fichier CSS à modifier
ouvrez le fichier avec votre éditeur de code
modifiez les lignes CSS qui vous intéressent
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 :

de la structure globale de la page web (dans le répertoire templates)
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
- Télécharger le fichier template association
- Télécharger le fichier template construction
- Télécharger le fichier template corsiva
- Télécharger le fichier template gourmet
- Télécharger le fichier template orchestra

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 :

la prise en compte du brief (cibles, objectifs, taches à traiter par les cibles,...)
la qualité du prototype produit
la complexité des modifications que vous aurez opéré entre le template installé et votre prototype finalisé

Séance 4.