CMS – Tic & Net https://blog.datacargo.fr Le blog notes de Fred Tue, 04 Feb 2020 09:20:09 +0000 fr-FR hourly 1 https://wordpress.org/?v=6.4.7 https://blog.datacargo.fr/wp-content/uploads/2019/05/cropped-bannière-ticnet-3-32x32.png CMS – Tic & Net https://blog.datacargo.fr 32 32 Monétiser votre site avec Snipcart https://blog.datacargo.fr/2020/02/04/monetiser-votre-site-avec-snipcart/ https://blog.datacargo.fr/2020/02/04/monetiser-votre-site-avec-snipcart/#comments Tue, 04 Feb 2020 08:00:00 +0000 http://tic-et-net.org/?p=6372 Snipcart est un gestionnaire de panier prenant en charge le paiement par carte bancaire. L’inscription est gratuite, une commission de 2% est retenue sur chaque opération ce qui est modeste.

C’est une solution est idéale pour monétiser un contenu en ligne tout en évitant les grosses usines comme Prestashop.

Pour ce tutoriel, le CMS support sera l’excellent Zwii en version 9.  J’irai un peu vite sur certains aspects, le tutoriel ne s’adresse donc pas à de grands débutants.

Rendez-vous chez Snipcart  et ouvrez un compte, validez le mail reçu et complétez l’écran de profil.

Votre tableau de bord est en mode test, nous activerons le mode live une fois la configuration terminée.

Configuration de Snipcart :

Rendez-vous dans les paramètres du compte
Dans Domain & URLs / Protocol : indiquez https:
Dans Domain & URLs / Regional Settings : réglez la devise, sa position et son symbole ainsi que le fuseau horaire. Enfin la liste des continents/pays où vous vendrez.

Dans Account / Api key sont listées les lignes à inclure dans l’en-tête <head> de votre page. La mention du jquery est inutile  pour Zwii.

Configuration du CMS :

Dans Zwii, accédez à la gestion du site et dans le champ Insérer un script dans header, collez les 3 lignes contenants les clés d’API.

Vérification de la liaison avec Snipcart : dans le tableau de bord Snipcart, cliquez sur le message en forme de panneau d’avertissement, puis sur validation, c’est le moyen de vérifier que votre installation est conforme. Tapez l’adresse de votre site et cliquez sur Check My Website. Un message confirme la prise en compte des scripts.

Inclure les boutons d’achat dans le CMS :

Ce bouton permet d’ajouter un article au panier. Pour cela, il faut inclure dans la page en mode code source :

<button
class="snipcart-add-item"
data-item-id="référence"
data-item-name="Nom du produit"
data-item-price="100.00"
data-item-weight="dimension"
data-item-url="/"
data-item-description="Description du produit">
Ajouter au panier
</button>

Évidemment, il faut insérer et paramétrer ce bouton sous un descriptif avec une image, etc..

Pour afficher un bouton vers le panier :

<a href="#" class="snipcart-checkout">Payer</a>

Malheureusement la dernière version de Zwii ne propose pas une configuration de l’éditeur correcte et les balises <span> seront effacées même si saisies en mode code source. Pour y remédier, il faut éditer /core/vendor/tinymce/init.js et remplacer  :

extended_valid_elements: "script[language|type|src]",

par

extended_valid_elements: "script[language|type|src],span[!class]",

Automatisation de l’insertion d’un bouton :

Pour ce faire, on utilise le module Template de l’éditeur TinyMCE déjà installé.

Dans /core/vendor/tinymce/templates, créez un fichier html avec le code du bouton, nommez le snipcart.html

Ensuite ouvrez à nouveau /core/vendor/tinymce/init.js et ajoutez dans le bloc Templates :

{
     title: "Bouton Snipcart",
     url: baseUrl + "core/vendor/tinymce/templates/snipcart.html",
     description: "Ajoute un bouton de paiement."
},

Une fois le site prêt, il ne reste plus qu’à passer le tableau de bord en mode live et à engranger des commandes…

]]> https://blog.datacargo.fr/2020/02/04/monetiser-votre-site-avec-snipcart/feed/ 2 ZwiiCMS, le CMS sans base de donnée passe en version 9.2 https://blog.datacargo.fr/2019/07/12/zwiicms-le-cms-sans-base-de-donnee-passe-en-version-9-2/ https://blog.datacargo.fr/2019/07/12/zwiicms-le-cms-sans-base-de-donnee-passe-en-version-9-2/#respond Fri, 12 Jul 2019 12:29:24 +0000 https://blog.datacargo.fr/?p=6512 ZwiiCMS est un gestionnaire de contenu français qui fonctionne sans aucune base de donnée ce qui simplifie l’installation, la sauvegarde et la migration, les données étant stockées dans des fichiers json.

En plus de l’édition de pages classique, ZwiiCMS propose des modules supplémentaires blog, news, galerie, formulaire (avec de nombreux types de champs, texte, texte long, mail, liste, case à cocher et date) et redirection.

Cette nouvelle version apporte de nouvelles fonctionnalités et des améliorations de l’expérience utilisateur :

  • Un module de recherche interne développé par les membres du forum
  • La gestion des mentions légales
  • Un nouveau gabarit de pied de page
  • Une nouvelle présentation asymétrique des gabarits de page (page de contenu et barres latérales)
  • Les pages “rechercher” et” site map” sont listées dans la boite de dialogue Liens de l’éditeur de pages.
  • Homogénéisation des masque de d’édition des pages et du thème (footer et header)
  • Correction d’un défaut d’alignement du menu avec le contenu.
Site par défaut proposé à l’installation

La mise à jour s’effectue automatiquement sur les sites déjà installés, il suffit d’activer le procédure en cliquant sur le bouton de mise à jour.

Téléchargement : https://zwiicms.com/
Forum d’assistance : https://forum.zwiicms.com/
Suivi du développement : https://github.com/fredtempez/ZwiiCMS/

]]> https://blog.datacargo.fr/2019/07/12/zwiicms-le-cms-sans-base-de-donnee-passe-en-version-9-2/feed/ 0 Comment animer une image PNG pour une bannière https://blog.datacargo.fr/2018/03/12/comment-animer-une-image-png-pour-une-banniere/ https://blog.datacargo.fr/2018/03/12/comment-animer-une-image-png-pour-une-banniere/#respond Mon, 12 Mar 2018 10:31:46 +0000 http://tic-et-net.org/?p=6366 Le PNG est juste génial, c’est un format d’image libre proposant des fonctionnalités intéressantes comme la transparence, la translucidité, tout ce que propose GIF et même en mieux.

Dans ce tutoriel, je vais aborder les animations des images PNG dans le but de préparer la bannière animée d’un site Web.

Préparation : toutes vos images doivent logiquement disposer de la même dimension pour cela il faut les redimensionner ou les recadrer.

Lorsque c’est fait, rendez-vous sur le site AnimatedPNGs.com cliquez sur Parcourir et transférez vos images. Le delay est fixé à 64ms, il s’agit du temps d’affichage de chaque image. Ce délai est réservé au mini-animation, pour une bannière chaque image doit être affichée quelques secondes, on indiquera un multiple de 1000 par exemple 4000.

2018-03-09_10h18_21
Le délai peut être paramétré différemment pour chaque image :

2018-03-09_10h20_46

Enfin cliquez sur Create Generated Image puis sur Download.
Animatedpng propose d’autres services, la conversion de flash en PNG, de GIF en PNG.
Le code source est visible sur Github : https://github.com/GraFlic/GraFlic
 
 
 

]]> https://blog.datacargo.fr/2018/03/12/comment-animer-une-image-png-pour-une-banniere/feed/ 0 Comment ajouter un effet popup à une miniature dans ZwiiCMS https://blog.datacargo.fr/2018/03/08/comment-ajouter-un-effet-popup-sur-une-miniature-dans-zwii-cms/ https://blog.datacargo.fr/2018/03/08/comment-ajouter-un-effet-popup-sur-une-miniature-dans-zwii-cms/#respond Thu, 08 Mar 2018 17:52:40 +0000 http://tic-et-net.org/?p=6358 Zwii un CMS maintenu par Rémi Jean son auteur, c’est un CMS en français très simple d’emploi destiné à une gamme d’utilisateur variée, de débutants à chevronnés. Les dernières versions sorties début mars 2018 apportent un lot important d’améliorations.  Une série d’articles regroupant ces astuces seront publiés sous cette catégorie.

Pour débuter, les images avec un effet popup, l’idée est de créer  un effet d’affichage lors du clic sur une miniature.
Pour les besoins de la démonstration, j’ai utilisé deux images, une taille réelle (200 pixels de large est un maximum) et une autre en miniature.
Cette démo est basée sur la version 8.2.5 dont l’éditeur de texte par défaut est TINYmce.
Une fois le CMS installé, en FTP, éditez  init.js dans core/vendor/tinymce, recherchez

templates: [
que vous remplacez par :
templates: [
        {
          title:"Image Lightbox",
          url:baseUrl+"core/vendor/tinymce/templates/lightbox.html",
          description:"Une image qui s'ouvre dans une lightbox."
        },

Sauvegardez le fichier.
Dans le dossier Templates, y copiez les fichiers lightbox.html et image_vide.png contenus dans cette archive.
C’est prêt, il n’y a plus qu’à utiliser le plugin, une vidéo valant mieux qu’une longue explication :
[youtube https://www.youtube.com/watch?v=WmgREqKg0Io&w=560&h=315]

Il est aussi possible de se passer de la miniature en réduisant la taille de l’image servant de miniature…

 
 
 
 
 
 

]]> https://blog.datacargo.fr/2018/03/08/comment-ajouter-un-effet-popup-sur-une-miniature-dans-zwii-cms/feed/ 0 J'ai testé HUGO le CMS statique sans vraiment apprécier https://blog.datacargo.fr/2018/02/15/jai-teste-hugo-le-cms-statique-sans-vraiment-apprecier/ https://blog.datacargo.fr/2018/02/15/jai-teste-hugo-le-cms-statique-sans-vraiment-apprecier/#comments Thu, 15 Feb 2018 08:53:07 +0000 http://tic-et-net.org/?p=6333 Il existe sur le Net des pépites, de petits outils méconnus qui facilitent la vie et qui permettent de sortir des sentiers battus en variant un usage, c’est par exemple le cas de MARP qui génère des présentations très rapidement. Dans le monde des CMS, j’ai testé HUGO, un CMS statique hyper léger.

HUGO est un gestionnaire de contenu statique, c’est à dire sans base de données et sans fichier dynamique (php ou autre langage), qui génère des sites Web ou des blogs uniquement constitués de fichiers HTML, un retour au source.

Ce framework (comprendre applicatif) très séduisant se présente sous la forme d’un petit exécutable utilisé en ligne de commande, il génère le squelette du site, transforme les documents Markdown en articles ou en pages, génère le site à la volée et peut le publier sur Github.

Présenté comme le plus rapide et le plus populaire, je l’ai testé avec un bilan mitigé.

Ce n’est pas un outil facile, la ligne de commande avec des tonnes d’options c’est vraiment moyen à utiliser surtout pour un débutant. Heureusement, quelques commandes de base peuvent suffire. HUGO s’utilise avec un éditeur performant notamment pour l’édition des fichiers du site (HTML ou MarkDown), Geany ou reText par exemple.

Il n’existe AUCUN tutoriel digne de ce nom qui aborde réellement la mis en œuvre complète de l’outil, tous les article français et anglais que j’ai lus expliquent en long  et large les nombreux avantages d’HUGO puis listent rapidement 2 ou 3 commandes :

  • création du site
  • création d’un article
  • installation d’un thème
  • lancement du serveur local

sans jamais entrer dans le détails. On a juste l’impression que le rédacteur n’en sait pas plus. La consultation de la doc sur le site officiel est dans la même veine (page QuickStart).

A l’usage, HUGO est assez complexe à paramétrer notamment au niveau du thème. Les réglages y sont toujours spécifiques au thème, n’espérez pas changer de thème rapidement, il faudra se plonger dans la doc du thème.

La gestion de l’arborescence n’est pas non plus évidente pour les sites, étant liée étroitement au thème.

Ce que je critique le plus dans ce genre d’outil, c’est qu’il est créé pour un public réduit  sans qu’un seul tutoriel pédagogique permette une prise en main complète.

Il existe une interface graphique disponible pour Linux (qui n’a pas fonctionné sur Ubuntu 16 lors des essais) et Windows basée sur Java 8, Lipi   permet de mettre en œuvre HUGO sans trop se prendre la tête, idéal pour le tester sur un blog.

Hugo est un logiciel efficace qui n’intéressera que quelques connaisseurs. Pour ma part je persévère dans l’exploration et dans la découverte d’HUGO…

]]> https://blog.datacargo.fr/2018/02/15/jai-teste-hugo-le-cms-statique-sans-vraiment-apprecier/feed/ 8 Zwii le CMS tout terrain facile https://blog.datacargo.fr/2017/10/12/zwii-le-cms-tout-terrain-facile/ https://blog.datacargo.fr/2017/10/12/zwii-le-cms-tout-terrain-facile/#comments Thu, 12 Oct 2017 14:55:32 +0000 http://tic-et-net.org/?p=5794 Adepte du CMS GetSimple, je suis tombé par hasard sur un article de présentation de ce CMS français, j’ai donc immédiatement décidé de  tester Zwii et vous savez quoi ? J’ai viré GetSimple et refait mon site datacargo.fr sous Zwii en quelques dizaines de minutes.

Pour mon activité professionnelle et moi-même, j’ai besoin d’un CMS simple, sans base de données (dont les données sont stockées dans des fichiers plats xml ou json), facile à prendre en main et à configurer, très loin de Joomla ou de WordPress.

J’anime un TD de multimédia pour des étudiants littéraires, je veux donc éviter le coté trop cambouis.

Pourquoi Zwii ?
C’est un CMS fait par un petit français, Rémi Jean, avec un support en français.

L’installation est très simple et les prérequis presque inexistants, pas de module exotique dans le php,  ça marche même chez des hébergeurs très restrictifs comme Free grâce à deux fichiers à remplacer téléchargeables sur le forum (dont htaccess).

Pas de thème à installer, la personnalisation s’effectue directement élément par élément et elle s’applique au site. Sous Getsimple, la personnalisation s’effectue grâce à des thèmes, même si les effets visuels sont parfois intéressants, la modification d’une simple couleur s’avère complexe car liée à la modification d’un fichier CSS.

L’édition des pages est particulièrement efficace, en effet, Zwii propose des modèles en plus de la page standard.

2017-10-12_16h41_05
Et oui tout ça en natif sans avoir besoin de rajouter de plugin… C’est juste excellent.
Pour en terminer, on peut ajouter que l’interface d’administration de Zwii est très complète au niveau des paramètres.
2017-10-12_16h42_37

  • Gestion native multi-utilisateurs avec 3 catégories de droit : membre, modérateur et administrateur.
  • Favicon,
  • Code Google Analytics
  • Réseaux sociaux
  • Message de consentement des cookies
  • Réécriture d’URLs

A mes yeux, c’est le meilleur CMS pour des débutants.

 
 
 
 
 

]]> https://blog.datacargo.fr/2017/10/12/zwii-le-cms-tout-terrain-facile/feed/ 4