• Support de cours 2015-2016

1. Bilan page d'attente 

2. Point d'avancement par équipe 

Durant la séance de TP je consacrerai 10 minutes par groupe pour réaliser un point projet permettant de passer en revue : 
  • Partie cadrage
    • cibles 
    • fonctionnalités 
    • expressions clés stratégiques 
    • arborescence envisagée 
    • charte rédactionnelle 
    • choix du CMS
    • éventuellement choix du modèle de design
Notre temps étant limité vous devez me mettre à disposition un ou plusieurs documents servant de support à ces éléments dans votre espace partagé sur le drive. 

3. Principes de fonctionnement du CMS Kiubi 

Pour les équipes ayant choisi ce CMS nous allons travailler pendant le temps restant à une initiation aux principes techniques du CMS.
Les autres équipes peuvent travailler sur leur projet en autonomie. 

3.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​

 

3.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​

3.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).
 

3.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.

 

3.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,...
 

3.6. Pour la prochaine séance (12/12/2016)

Si vous utilisez Kiubi
  1. Consultez l'ensemble du module d'aide de "pré-requis" http://doc.kiubi.com/generalites.html#bloc1 jusqu'à "Les fonctionnalités et les balises communes des widgets" http://doc.kiubi.com/generalites.html#bloc10
  2. Appliquez l'ensemble de ces principes pour modifier votre prototype (structure, design et fonctionnalités,...)
Au cours de la prochaine séance nous travaillerons ensemble sur les développements de votre prototype. 
Si vous utilisez un autre CMS 
Veuillez préparer pour le 12/12/2016 un document présentant : 
  • vos choix concernant les technologies et CMS
  • les avantages de la solution retenue 
  • les contraintes de la solution retenue 
  • les principales fonctionnalités que vous devrez développer
  • vos préconisations en termes d'hébergement