0 commentaire

Sites de démonstration

Tous les Kiubistes pourront ouvrir eux-mêmes des sites de démonstration sur leur compte. Un site de démonstration est 100% gratuit et dispose de toutes les fonctionnalités disponibles sur la plateforme. Son accès public est cependant restreint.

Ces sites peuvent être utilisés à des fins techniques (développements, tests, copies de sites modèles, etc.) ou commerciales (démonstrations clients, maquettage rapide, etc.).

Accès public restreint

Un nouvel écran d’identification, côté front-office, permet aux sites fermés ou disposant d’un accès restreint de rester accessibles par tous les utilisateurs ayant un accès à leurs back-offices.

Un site en cours de création peut donc à présent afficher uniquement sa page d’attente. Son contenu quant à lui, reste consultable une fois l'utilisateur identifié, et cela sans avoir à passer par les boutons de prévisualisation du back-office, comme c’est le cas actuellement.

Gestion des utilisateurs

La gestion des comptes utilisateurs a été entièrement revue. Il n’y a pas de changement apparent pour les Kiubistes, ces changements sont préparatoires aux prochaines évolutions de la plateforme.

À cela s'ajoutent les optimisations et corrections de bugs sans lesquels une bonne release ne serait finalement qu'une simple release.

Cette mise à jour de Kiubi aura lieu mardi 31/05/2016 et nécessitera une interruption de service démarrant à 20 heures qui ne devrait pas excéder une heure.
0 commentaire
Themeforest, Template Monster, Elegant Themes, etc. vous avez l'embarra du choix pour acheter un thème graphique pour vos sites Internet.

Ces thèmes sont généralement disponibles pour un CMS en particulier, comme Wordpress, ou simplement au format HTML.

Kiubi permet l’utilisation de n’importe quel thème graphique, moyennant certains aménagements rapides et simples à mettre en place.

Quelques prérequis sont cependant nécessaires avant de vous lancer. Vous devez disposer :
  • d'un site qui utilise un thème graphique personnalisé (vous trouverez toutes les informations utiles à ce sujet dans l'aide en ligne),
  • d'un accès FTP à votre thème graphique personnalisé (dont les informations de connexion sont disponibles dans la rubrique Préférences / Générales / Compte FTP de votre console d'administration),
  • de connaissances en HMTL, CSS et javascript ; vous n'aurez cependant jamais besoin de manipuler du PHP et des bases de données,
  • de votre Carte Bleue pour acheter un thème ;-)

Acheter un thème

Pour les besoins de cet article, nous utiliserons le thème Wordpress Editor (achetable ici et testable ). Mais vous pouvez utiliser le thème de votre choix, la méthodologie reste la même.

Petit rappel utile concernant l'utilisation des thèmes et de leurs licences : si vous utilisez un thème pour plusieurs sites, vous devez acheter à chaque fois une licence et cela même quand vous modifiez le thème d'un site à l'autre.
1 thème utilisé pour 1 site = 1 licence achetée !
Une fois le thème acquit, vous pouvez télécharger l'ensemble des fichiers sources qui le composent, à savoir : beaucoup (beaucoup) de fichiers PHP, des images, des feuilles de styles et des fichiers javascript.

La méthodologie utilisée

La procédure la plus simple pour adapter un thème Wordpress (TWP) à un thème Kiubi (TK) est de commencer par copier tous les éléments statiques du TWP : images, feuilles de styles, fichiers javascript et structure HTML.

Ces éléments sont alors ajoutés au TK et rendus dynamiques, c’est-à-dire capables d’afficher des informations issues de la console d’administration de Kiubi.

Les différents modules qui composent le thème (le contenu, les menus, les formulaires de contacts, etc.) sont séparés de la structure HTML principale et ajoutés aux widgets de Kiubi qui leur correspondent le mieux.
La structure HTML/CSS du site, les modules fonctionnels et le contenu sont strictement séparés et gérés de manière indépendante.
Pour finir, l’ensemble (template principal, widgets et contenu) est "réassemblé" directement via la console d’administration, par simple glissé-déposé.

Copier les éléments statiques

Dans un premier temps, nous allons récupérer les fichiers sources du TWP qui nous intéressent. Tous les fichiers du thème ne sont pas nécessaires, seuls les répertoires images, css, js ainsi que le fichier style.css sont utilisés. Copiez-les dans le répertoire /theme/fr/ du TK.

Pour la structure HTML du thème, inutile de chercher dans les fichiers PHP du TWP, allez simplement sur une page du site de démo. Par exemple sur http://themes.pixelwars.org/editor/typography/. Affichez le code source de la page et copiez tout le contenu de la balise <html>.

Ouvrez maintenant le fichier index.html d'un des templates principaux de votre TK, que vous trouverez dans le répertoire /theme/fr/templates/, et collez le code.

Mettre à jour les URLs

Une fois le code récupéré, nous allons commencer par mettre à jour les URLs qui pointent encore vers le site de démo, c'est-à-dire passer de :
<link href="/editor/wp-content/themes/editor-wp/css/main.css" rel="stylesheet" type="text/css" media="all" />
A des URLs dynamiques propres à Kiubi :
<link href="{racine}/{theme}/{lg}/css/main.css" rel="stylesheet" type="text/css" media="all" />
Et cela pour toutes les URLs des feuilles de styles et des fichiers javascript.

Dynamiser les metas

Pour l'instant, les metas et le contenu du template sont encore parfaitement statiques et n'intègrent aucun élément dynamique nécessaire à Kiubi. Nous allons donc immédiatement y remédier.

Copiez le contenu de la balise <head> de n'importe quel autre template du répertoire /theme/fr/templates/ et collez-le dans votre template principal (en plus des metas déjà présentes).

Ce code doit contenir les metas standards :
<title>{title}</title>
<meta name="description" content="{metaDescription}" />
<meta name="keywords" content="{metaKeywords}" />
Les informations pour les robots et les URLs canoniques :
{metaRobots}
{metaCanonical}
Les données pour Open Graph et les microsformats :
<meta property="og:title" content="{title}"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://{domaine}{canonical}"/>
<meta property="og:image" content="http://{domaine}{illustration_pagecourante}"/>
<meta property="og:site_name" content="{site_nom}"/>
<meta property="og:description" content="{metaDescription}" />
<meta property="og:street-address" content="{SOCIETE.societe_adresse}"/>
<meta property="og:locality" content="{SOCIETE.societe_ville}"/>
<meta property="og:postal-code" content="{SOCIETE.societe_cp}"/>
<meta property="og:country-name" content="{SOCIETE.societe_pays}"/>
<meta property="og:email" content="{SOCIETE.contact_email}"/>
<meta property="og:phone_number" content="{SOCIETE.societe_tel}"/>
<link rel="profile" href="http://microformats.org/profile/hcard" />
Les metas ajoutées via la console d'administration :
{Stylesheet}
{js_head}
Et les éléments ajoutés juste avant la balise </body> :
{js_body}
Prenez soin cependant à ne pas mettre de meta en double et à ne pas copier les liens vers les feuilles styles et les fichiers javascript par défaut, qui sont maintenant inutiles (car remplacés par ceux du TWP).

Dynamiser le contenu

Tous les éléments dynamiques qui composent votre site, comme les menus, le contenu rédactionnel, les slideshows, les articles du blog, les commentaires, le formulaire de contact, les fiches produits, le processus de commande, etc. bref, tout ce qui affiche quelque chose ajouté dans la console d'administration de Kiubi ou contrôlé par Kiubi, est disponible sous la forme de widgets (dont la liste et les fonctions sont disponibles ici).
Les widgets disposent tous de leurs propres paramètres et templates.
Les widgets ne sont pas inclus directement dans le template principal du site, mais ajoutés à une page, par glisser-déposer, directement dans la console d'administration de Kiubi.

Il est donc nécessaire de déclarer dans le template principal de votre site, les zones dans lesquelles des widgets peuvent être placés (avec les explications détaillées disponibles ici et ).

Chaque zone est déclarée grâce à une balise {ZONE.nomdelazone}. Le contenu de la balise <body> de votre template principal devrait donc ressembler à ça :
<div id="page">
	<header role="banner">
		<nav role="navigation">
			{ZONE.menu}
			{FILE "/fr/includes/search.html"}
			{ZONE.entete}
		</nav>
		<!-- BEGIN:logo_site -->
		<h1><a href="{racine}/"><img src="{racine}/media/{logo_site}" alt="{accroche_site}" /></a></h1>
		<!-- END:logo_site -->
	</header>
	<div id="content" role="main">
		{ZONE.contenu}
	</div>
	<footer role="contentinfo">
		{ZONE.piedepage}
		{FILE "/fr/includes/copyright.html"}
	</footer>
</div>
Les balises {FILE "/fr/includes/search.html"} et {FILE "/fr/includes/copyright.html"} agissent comme des includes et permettent donc d'ajouter là où elles sont placées le code du fichier qu'elles déclarent.

Le bloc <!-- BEGIN:logo_site --><!-- END:logo_site --> permet quant à lui d'afficher le logo du site ajouté via la console d'administration de Kiubi.

Nous disposons maintenant d'un template principal dynamique et prêt à recevoir des widgets, qu'il va falloir personnaliser en fonction du thème.

Nous allons illustrer cette opération avec 2 widgets : un menu et un exemple de contenu.

Personnaliser un widget : les billets

Le contenu rédactionnel du site, hors blog et catalogue produit, est présenté sous forme de billets. Chaque billet peut être considéré comme un paragraphe, un bloc de contenu et peut contenir du texte, des images, des liens, des vidéos, etc.
Vous pouvez disposer d'autant de types de billets différents que nécessaires, en fonction du thème et de vos besoins.
Une lecture de l'aide en ligne est utile pour parfaitement comprendre les possibilités offertes par les types de billets.

Pour personnaliser un billet, copiez le code du TWP qui correspond au modèle de contenu qui vous intéresse et collez-le dans le fichier /theme/fr/billets/post_simple/index.html.

Nous allons à nouveau ajouter au code du TWP les éléments propres à Kiubi afin de permettre un affichage dynamique du contenu :
<!-- BEGIN: main -->
<article id="post-{compteur}">
	<!-- BEGIN: titre -->
	<header class="entry-header">
		<h1 class="entry-title">{titre}</h1>
	</header>
	<!-- END: titre -->
	<div class="entry-content">
		<!-- BEGIN: sstitre -->
		<h2>{sstitre}</h2>
		<!-- END: sstitre -->
		<!-- BEGIN: texte10 -->
		<figure class="wp-caption gallery" style="width: {g_miniature_l}px;">
        	<a href="{racine}/media/g_vignette/{texte10}" class="fluidbox">
            <img src="{racine}/media/g_miniature/{texte10}" alt="{titre}"/></a>
			<figcaption class="wp-caption-text">{texte11}</figcaption>
		</figure>
		<!-- END: texte10 -->
		{texte1}
	</div>
</article>
<!-- END: main -->
Les balises {titre}, {sstitre}, {texte1}, {texte10} et {texte11} permettent d'afficher le contenu ajouté via la console d'administration. Chacune de ces balises correspond à un champ du formulaire créé automatiquement par Kiubi pour saisir le contenu.

Les blocs de type <!-- BEGIN: titre --><!-- END: titre --> sont utiles pour gérer un affichage conditionnel de leur contenu : si la balise {titre} est renseignée, le contenu du bloc est affiché, sinon il est masqué.

Pour afficher le contenu dans le site, il vous suffit de placer le widget Contenu d'une page libre dans la zone Contenu de votre page, directement dans la console d'administration :
Widget Contenu d'une page libre

Personnaliser un widget : le menu

Même objectif que précédemment, nous souhaitons associer le code du TWP avec le code du widget.

Copiez la partie du code source du TWP qui correspond au menu déroulant et collez-le dans le fichier /theme/fr/widgets/site_web/menu_v/index.html.

Ajoutez les éléments propres à Kiubi afin de passer de ça :
<div class="nav-menu">
	<ul id="nav" class="menu-custom">
		<li id="menu-item-859"><a href="/editor/">Home</a>
			<ul>
				<li id="menu-item-1063"><a href="/editor/home-alternate/">Home Alternate</a></li>
			</ul>
		</li>
	</ul>
</div>
A ça :
<!-- BEGIN: main -->
<!-- BEGIN: menu -->
<div class="nav-menu">
	<!-- BEGIN: niveau -->
	<ul id="nav" class="menu-custom">
		<!-- BEGIN: pagetype -->
		<!-- BEGIN: page -->
		<li id="menu-item-{compteur}"><a href="{lien}"  class="{actif}" target="{cible}">{page}</a>
		<!-- END: page -->
		<!-- BEGIN:sspage -->
		{sspage}
		<!-- END:sspage -->
		<!-- END: pagetype -->
		</li>
	</ul>
	<!-- END: niveau -->
</div>
<!-- END: menu -->
<!-- BEGIN: nomenu -->
<!-- END: nomenu -->
<!-- END: main -->
L'ensemble des blocs et des balises utilisés par le widget Menu vertical sont décrits ici.

Une fois l'opération effectuée, placez le widget dans la zone Menu de la page, via la console d'administration, avec les bons paramètres de configuration :
Paramètres widget Menu vertical

Pour aller plus loin

L’intégration complète d’un thème Wordpress, avec le blog, les formulaires de contact et 2 ou 3 modèles de mise en page supplémentaires, prend d'une demi-journée à une journée complète, une fois les mécanismes de Kiubi maitrisés. Comptez une à deux journées supplémentaires pour l’e-commerce. Bien entendu cela peut varier en fonction du thème utilisé.

Si vous souhaitez en savoir plus sur le sujet, un tutoriel très complet est disponible à cette adresse.

Et si vous cherchez à gagner du temps en utilisant des thèmes déjà adaptés à Kiubi, rendez-vous sur www.theme-and-co.fr.

 
0 commentaire
En ce début d’année, nous sommes beaucoup (re)interrogés sur comment Kiubi évolue, à quel rythme, comment nous choisissons les fonctionnalités à ajouter, comment se déroulent les mises à jour, etc. Pour tous les nouveaux venus sur les CMS en SaaS (et pour les plus anciens aussi), voici comment nous fonctionnons chez Kiubi.
 
Depuis plusieurs années maintenant, nous essayons d’alterner des mises à jour qui améliorent des fonctionnalités existantes, avec des mises à jour qui apportent de toutes nouvelles fonctionnalités aux sites.

Nous déployons donc 2 à 3 mises à jour majeures par an, que vous pouvez retrouver ici, complétées par une dizaine de correctifs mineurs. L’objectif étant de vous faire bénéficier d’évolutions régulières et cela, avantage du SaaS oblige, sans vous contraindre aux lourdes opérations de déploiement et de maintenance qu’elles imposent généralement (utilisateur de Wordpress, si tu m'entends ;-)).

La dernière mise à jour de Kiubi nous permet d’illustrer pourquoi et comment nous faisons évoluer certains modules.

Les bons de commande personnalisables ou comment être à l'écoute des utilisateurs

La première raison qui nous pousse à faire évoluer une fonctionnalité de Kiubi est bien entendu les demandes de nos utilisateurs.

Historiquement, les bons de commande générés par Kiubi lors d’un achat sur un site e-commerce étaient au format PDF. Cependant, ils restaient difficiles à personnaliser aux couleurs du site, ce qui était devenu parfaitement contradictoire avec la philosophie de Kiubi.
Bons de commande personnalisables
Là où nous aurions pu ajouter des options de personnalisation aux PDF, nous avons privilégié une solution bien plus simple (on aime quand c’est simple) : l’utilisation de bons de commande au format HTML.
 
Ces derniers sont donc maintenant beaucoup plus légers à manipuler et bénéficient en plus de toutes les options de personnalisation spécifiques au format et à Kiubi.

So Colissimo ou comment intégrer les évolutions d’un module tiers

Le système de livraison de La Poste est disponible sur Kiubi depuis 2011 et a constamment évolué en fonction des mises à jour apportées par La Poste. En effet, ce module étant proposé par un éditeur tiers, nous devons intégrer à Kiubi ses évolutions au fur et à mesure qu’elles sont proposées par La Poste.
 
So Colissimo

So Colissimo s’est donc vu ajouter au fil des ans plusieurs modes et options de livraisons supplémentaires, l’expédition vers la Belgique, l’expédition vers des points relais, etc.

Nous profitons également de ces nouveautés pour améliorer l’intégration de So Colissimo aux sites e-commerce avec, par exemple, l’export vers Expeditor INET (pour la gestion de bons de livraison), le calcul optimisé des frais de port dans le panier, l’ajout du choix des options de livraison pendant le processus de commande, etc.

So Colissimo évolue donc principalement en fonction des nouveautés proposées par La Poste et intégrées par nos soins à Kiubi, sans aucune intervention de nos utilisateurs.

Avis vérifiés ou comment faire profiter à tous d’un développement spécifique

L’API de Kiubi permet de s’interconnecter à presque n’importe quels services Web et donc d’ajouter vous même de nouvelles fonctionnalités à vos sites.

Utiliser un service comme Avis Vérifiés est donc tout à fait possible sur un site Kiubi, un développement API plus ou moins important étant éventuellement nécessaire en fonction de l’usage souhaité.
 
Avis vérifiés

Ce type de service représente cependant un intérêt certain pour nos utilisateurs. Dans ce cas, afin d’en faire bénéficier le plus grand nombre, nous proposons une intégration native d’Avis Vérifiés sur Kiubi. Inutile donc d’avoir recourt à un développement API, Avis Vérifiés devient disponible pour tous, immédiatement et simplement.

~~

Les mises à jour évolutives, qui améliorent ou optimisent des fonctionnalités déjà disponibles sur Kiubi, sont donc intégrées progressivement en fonction :
  • Des retours d’expérience des utilisateurs (et de notre équipe)
  • Des évolutions proposées par les éditeurs tiers
  • Des développements réalisés pour un site spécifique
Quant à l’ajout de toutes nouvelles fonctionnalités (comme l’API par exemple), ces dernières suivent un processus de développement différent, axé autour de l’innovation, dont nous vous reparlerons d’ici peu.
0 commentaire
Cette semaine, nous allons mettre à jour Kiubi avec quelques nouvelles fonctionnalités et plusieurs mises à jour de services partenaires.

So Colissimo

Après la prise en charge de l'expédition vers la Belgique, nous avons ajouté au service So Colissimo la gestion de l’expédition vers des points relais. Par défaut, les tarifs sont identiques à ceux de la livraison à domicile mais, à présent, vous pouvez paramétrer des tarifs spécifiques à ce nouveau mode de livraison.

Bon de commande personnalisable

Le bon de commande passée sur un site e-commerce est maintenant également disponible en format HTML, en plus du traditionnel PDF. Par la même occasion, le bon de commande devient entièrement personnalisable, aussi bien au niveau de la présentation, des couleurs, du logo, ou des textes.

Module d’édition de texte

L’éditeur de texte a également reçu un petit lifting. Cette nouvelle version intègre une meilleure ergonomie, un respect amélioré des standards d’accessibilité, une gestion des copier/coller depuis Words optimisée, etc. Les navigateurs les plus récents sont également mieux pris en charge.

API

De nouveaux points d'entrée pour l'API Frontoffice ont été intégrés dans la gestion du catalogue produits.

À cela s'ajoutent les optimisations et corrections de bugs sans lesquels une bonne release ne serait finalement qu'une simple release.

Cette mise à jour de Kiubi aura lieu jeudi 17/12/2015 et nécessitera une interruption de service démarrant à 20 heures qui ne devrait pas excéder une dizaine de minutes.

EDIT du 17/12/2015 : La mise à jour est terminée et la plateforme est opérationnelle. Vous trouverez les fichiers nécessaires à la mise en place des bons de commande personnalisés sur la page dédiée à cet effet.