Catégories
FCS FCS3-cours

Utiliser le CMS Bludit

Dans ce cours nous allons voir comment utiliser Bludit, un CMS simple et fonctionnel, fonctionnant sans base de données. Ce type de CMS est nommé en anglais “CMS flat file”.

Les prérequis sont les suivants :

  • être capable de créer un compte chez un hébergeur et de récupérer les identifiants de connexion FTP de ce compte ;
  • être capable d’utiliser Filezilla pour transférer sur ce compte les données d’un site ;
  • être capable d’installer une extension du navigateur Chrome (Web Developer) ;
  • être capable de compresser une image pour le Web dans Photoshop ;
  • être capable de modifier du code CSS dans un éditeur de code tel que Bracket pour modifier l’apparence d’une page Web.

Bludit va vous permettre de réaliser rapidement un site de présentation d’une activité professionnelle ou associative. Ce site présentera une série d’articles catégorisés, présentés par ordre de publication antéchronologique (un blog), il disposera également de plusieurs pages au contenu permanent (page de type “À propos” ou page “Contact”, par exemple).

Qu’est-ce qu’un CMS flat file ?

Qu’est-ce qu’un CMS ?

Bludit est un système de gestion de contenu ou CMS (Content management System). Vous avez sans doute déjà entendu le terme, probablement au sujet de WordPress, Joomla, ou Prestashop. Un CMS rend la création d’un site Web plus facile en aidant ceux qui n’ont pas une connaissance approfondie de la programmation Web à réaliser des sites Web de qualité professionnelle. Les CMS proposent généralement pour cela d’un interface d’administration (nommé aussi tableau de bord — dashboard, en anglais). C’est en effet le cas avec Bludit.

Notez qu’à un dossier de CMS, téléchargé depuis le site de l’éditeur-développeur, correspond la mise en œuvre d’un seul site. Un CMS n’est pas un programme (logiciel) permettant de créer plusieurs site une fois le programme lancé.

Qu’est-ce qu’un CMS sans base de données ?

Un CMS sans base de donnée est un système de gestion de contenu stockant les données du site dans des fichiers (placés dans des dossiers, situés eux mêmes dans le dossier du site…). Il s’agit donc d’un gros dossier incluant tous les éléments nécessaires au bon fonctionnement du site et de son tableau de bord de gestion (son interface d’administration).

Ce gros dossier (le dossier du CMS flat file) contient généralement des fichiers PHP dont les contenus sont uniquement interprétables par un serveur. Pour faire fonctionner un CMS, il est donc indispensable de placer le dossier du CMS sur un serveur. Il est inutile de vouloir voir le CMS fonctionner en double cliquant simplement sur un fichier (comme on le fait avec le fichier index.html d’un site statique).

L’absence de base de données simplifie la maintenance, la sauvegarde et la portabilité du site créé avec le CMS.

Nous verrons par exemple que les textes d’un site géré avec Bludit sont stockés dans des fichiers index.txt, dans le dossier nommé bl-content

Comment fonctionne Bludit ?

Dossier du CMS et serveurs

Le diaporama ci-dessous illustre certains aspects techniques du fonctionnement du CMS Bludit une fois placé sur un serveur.

Blogs et sites

Bludit est conçu initialement pour construire des sites articulés autour d’un blog. Notez bien qu’un blog est avant tout un mode de présentation de contenus. Il s’agit d’articles (nommés aussi “posts” ou “billets”) présentés sur une même page, en ordre antéchronologique, comme le laisse entendre l’étymologie du mot blog, contraction du terme anglais Web log (journal Web — journal de bord en ligne).

Les CMS opposent en général les articles aux pages. Dans cet optique, les pages présentent leurs contenus dans l’ordre dans lequel ces contenus sont “mis en page”. Or les articles (posts ou billets), en tant que tels, présentent aussi leurs contenus dans l’ordre de leur “mise en page”. Articles et pages sont des pages… et Bludit propose par défaut l’édition de pages présentées sous forme de blog puis il permet de modifier éventuellement le type des pages pour en faire ce qu’il appelle des pages statiques (présentées indépendamment les unes des autres)

Pages dynamiques VS pages statiques

Dans Bludit, les pages sont donc par défaut des articles présentés par ordre antéchronologiques, les unes sous les autres, la plus récente au dessus des plus anciennes. Elles pourraient être nommées pages dynamiques.

Transformées en pages présentées indépendamment les unes des autres elle deviennent des pages statiques. Ces pages présentent généralement des contenus plus pérennes (durables) que les contenus des pages dynamiques.

Un site comprend le plus souvent les 2 types de pages. Les pages statiques les plus courantes sont la page À proposAbout — et la page Contact. Les pages dynamiques sont regroupées automatiquement sur une page généralement nommée ActualitésNews — ou Blog. Cette page est très souvent la page d’accueil par défaut d’un site construit avec un CMS.

Une démonstration de site réalisé avec Bludit est consultable à cette adresse : https://demo.bludit.com/. Elle présente un blog avec plusieurs articles, ainsi qu’une page “About”.

Les catégories et les thèmes

Les catégories sont un système de classement des articles (pages dynamiques). Les thèmes sont non seulement un système graphique de présentation des contenus mais aussi un système de gestion de la présentation de ces contenus et de leur classement.

Consultez ce site de démonstration, réalisé avec Bludit. Les articles (pages dynamiques) sont regroupées en 3 catégories (design, programming et typography) accessibles directement dans le menu principal. Une seule page statique (Information) est présentée, accessible par le menu situé dans le footer. Dans ce site, la façon dont les menus fonctionnent et la manière dont ils sont disposés est propre au thème utilisé (DevTheme).

Se procurer et installer Bludit

Le dossier du CMS Bludit est disponible en ligne sur le site de son éditeur : https://www.bludit.com/

La version disponible janvier 2021 est la 3.13.1

Transférer le dossier du CMS sur un serveur

➜ Une fois l’archive « bludit-3-xx-x.zip » décompressée (les xx figurent le numéro de version), il est nécessaire de transférer le dossier « bludit » sur un serveur. Vous êtes invités à utiliser Filezilla pour effectuer ce transfert.

En fonction de l’hébergeur chez qui vous envisagez de transférer le dossier du CMS, celui-ci fonctionnera plus ou moins bien. Nous avons déjà testé l’hébergement gratuit de PlanetHoster… et nous avons rencontré de nombreuses difficultés !

La solution gratuite de Alwaysdata semble bien s’accorder avec Bludit… attention toutefois à la limite des 100 Mo de données hébergées.

➜ Pour des précisions concernant une solution d’hébergement chez Alwaysdata, voyez le cours : Utiliser les services gratuits de Alwaysdata

Le concepteur du CMS Bludit propose l’hébergement gratuit chez 000webhost.com (voir vidéo ci-dessous). Notez que dans la vidéo, les fichiers du dossier « bludit » sont placés à la racine du dossier « public-html ». L’url de l’espace d’hébergement conduit directement au site. Vous pouvez envisager de renommer le dossier « bludit » comme vous le souhaitez et choisir de laisser les fichiers du CMS dans ce dossier. Il vous faudra alors simplement saisir « /nomdudossier », après l’url, pour parvenir au site.

Consulter la documentation de Bludit

Le CMS Bludit est assez bien documenté sur le Web, en anglais, en espagnol, en arabe… mais pas en français. Il vous faudra donc utiliser la traduction automatique de Chrome pour lire la documentation dans la langue de Molière !

Voici quelques adresses où trouver une documentation détaillée (dont celles d’un forum et d’une chaîne YouTube) :

Quelque soit la richesse de la doc en ligne, vous pouvez aussi suivre ce cours… Attention les vidéos datent un peu et l’interface du tableau de bord a évolué depuis 😉

Effectuer les premiers paramétrages

Une fois le transfert du dossier ou des fichiers effectué, connectez-vous à l’adresse de votre hébergement. Vous devriez voir la page suivante (avec peut-être une autre langue sélectionnée)…

La suite est très simple, le temps de saisir un mot de passe et de cliquer sur le bouton installer !

Vous êtes sur votre nouveau site Bludit et vous pouvez vous connecter au tableau de bord d’administration du site. L’installation du CMS en elle-même n’est pas plus compliquée que cela

Notez que si vous souhaitez installer 2 sites construits avec Bludit sur le même serveur, vous devrez renouveler l’installation à partir d’un autre dossier « vierge » puis choisir un nouveau mot de passe d’administration, etc.

Utiliser le tableau de bord de Bludit

L’un des principaux avantages d’un CMS est de permettre la modification d’un site Web par l’intermédiaire d’un tableau de bord (a priori sans avoir à manipuler le code source).

Accéder à l’espace d’administration du site ?

➜ Pour vous connecter au tableau de bord de votre site Bludit, rajoutez « /admin » à l’URL de votre site ou cliquer sur le lien indiqué sur la page d’accueil. Prenez le temps de bien noter votre login d’administrateur (« admin ») et votre mot de passe.

Contrairement à la personnalisation d’un site construit en HTML-CSS qui s’effectue à l’aide d’un éditeur de code, la personnalisation d’un site basé sur un CMS s’effectue principalement par le biais d’un tableau de bord (et parfois un petit peu dans un éditeur de code). Les tableaux de bord sont plus ou moins complexes selon les CMS. Celui de Bludit est assez sobre et vous allez voir qu’il est très facile à prendre en main.

Modifier la traduction du tableau de bord (optionnel)

Pour améliorer l’ergonomie du tableau de bord, je vous propose de modifier la traduction en français des intitulés de quelques sous-onglets. En effet, par défaut Bludit intitule “Pages” l’onglet qui liste pages dynamiques (nommées aussi articles, billets ou posts, selon les terminologies et les CMS).

Dans Bludit, sont nommés “Statique”, au singulier, les pages statiques du site… et “Planifiée”, au féminin, le contenu dont la publication est différée. Tout cela est grandement perfectible !

➜ Pour effectuer des modifications dans la traduction en français des termes utilisés dans Bludit, il faut ouvrir dans un éditeur de code (Bracket, par exemple) le fichier “fr_FR.json” qui se trouve dans le dossier du site, dans le dossier “bl-languages”.

Vous pouvez effectuer cette modification sur le fichier indiqué directement dans le dossier initialement téléchargé. Vous actualiserez le dossier du site en ligne en remplaçant le fichier fr_FR.json dans le dossier bl-langages (en utilisant Filezilla).

Vous en profiterez pour alléger le dossier du site en supprimant les fichiers de langue que vous n’utiliserez jamais (conservez les fichiers en.json et fr_FR.json).

Les modifications à apporter se trouvent notamment aux lignes 234, 263, 268 et 310. Une fois les modifications effectuées et le fichier enregistré, votre tableau de bord affichera de nouveaux intitulés dans l’onglet “Contenu”.

L’onglet “Articles” pourrait s’intituler “Pages dynamiques” et l’onglet “Contenu planifié” s’intituler “Publication programmée” ou “Publication différée”.

Publier des contenus avec Bludit

Personnaliser un site avec Bludit

Changer le thème par défaut

Vous êtes désormais outillés pour adapter le site de démonstration fourni lors de l’installation du CMS. Le thème utilisé par défaut se nomme “Alternative”. Un second thème est installé d’office, nommé “Blog X”. Vous pouvez l’activer d’un clic en allant dans l’onglet “Thèmes” du tableau de bord de Bludit.

La disposition des contenus est différente. Comme l’indique le nom du thème, ce dernier est conçu pour la publication d’un blog.

Télécharger et installer d’autres thèmes

Bludit propose de nombreux thèmes sur son site officiel : https://themes.bludit.com/. Plusieurs thèmes disposent d’un site de démonstration afin de voir concrètement comment le thème permet de structurer des contenus.

Comme nous l’avons vu plus haut, chaque thème gère les contenus du site à sa manière (menus, colonne latérale, images d’accroches, catégories, pages dynamiques et statiques, etc.). Dans un premier temps, il est recommandé de composer avec le thème tel qu’il est et de voir si en activant tel ou tel plugin il est possible d’en améliorer les fonctionnalités.

La personnalisation d’un thème nécessite de modifier des fichiers CSS et des fichiers PHP. pour les seconds, soyez prudents et suivez bien les consignes que vous pourrez trouver pour effectuer ces modifications.

Le choix d’un thème dépend en fait du type de lecture que nous souhaitons proposer aux internautes. Un thème offre une expérience utilisateur particulière, non pas au concepteur du site mais au lecteur du site !

Pour en savoir davantage sur l’usage potentiel de quelques thèmes adaptés à Bludit, je vous propose de consulter la fiche intitulée personnalisation de Bludit

➜ Prenez le temps d’explorer les sites de démonstration. Activez les onglets du menu pour voir comment chaque thème fonctionne.

Les thèmes conçus par Diego Najar, le créateur de Bludit, sont particulièrement soignés ! Vous disposez donc de nombreuses opportunités pour structurer visuellement vos contenus. Pour tester plusieurs thèmes, le plus simple est d’en installer plusieurs pour pouvoir, d’un clic, comme indiqué précédemment, changer le look et le fonctionnement du site.

➜ J’ai sélectionné 12 thèmes que je vous propose de télécharger en une seule archive. Vous décompresserez l’archive zip et vous placerez les 12 dossiers dans le dossier “bl-themes” de Bludit (sur votre serveur…). Vous pourrez ainsi les tester.

Vous disposez maintenant de 14 thèmes pour répondre à différents besoins. Cliquez sur l’onglet Thèmes du tableau de bord. Ceux qui sont signés “Bludit” sont conçus par Diego Najar. Activez le thème que vous souhaitez tester et cliquez sur le bouton “Site” (ou rafraîchissez la page du site dans votre navigateur). Vous pouvez installer d’autres thèmes en téléchargeant leur dossier depuis la page “Themes” du site officiel.

Pour se rendre vraiment compte du potentiel d’un thème, il est nécessaire de disposer de contenus plus riches que les simples textes proposés par défaut lors de l’installation du CMS.

➜ Créez plusieurs articles (pages dynamiques) et plusieurs pages statiques, catégorisez-les, insérez des images d’accroches sur certaines pages et pas sur d’autres. Insérez des images dans vos pages. Tout cela vous permettra de mieux évaluer le fonctionnement d’un thème et de faire des comparaisons utiles entre un thème et un autre.

Compléter la traduction d’un plugin

Traduire la mention “Home page”

Si vous utilisez un thème disposant d’une colonne latérale, vous aurez certainement envie d’activer les plugins Navigation et Pages Statiques. Le premier permet d’afficher automatiquement la liste des n dernières pages dynamiques publiées et le second la liste de toutes les pages statiques. Cela crée une sorte de menu pour chaque type de pages éditées.

Le problème rencontré est la mention en anglais de la page d’accueil en tête de liste, dans les deux plugins. Un assez gênant Home page inaugure les deux listes ! Il faut donc intervenir dans le fichier fr_FR.json des plugins en question. Pour ma part j’ai constaté qu’en effectuant la modification dans un seul fichier, le changement était effectif pour les deux listes ! Vous vérifierez si c’est aussi le cas pour vous 😉

➜ Voici le changement à effectuer (ici dans le fichier de traduction du plugin Navigation) :

Améliorer l’utilisation d’un plugin

Améliorer les plugins “Navigation” et “Pages Statiques

Si vous utilisez un thème disposant d’une colonne latérale, vous aurez certainement envie d’activer les plugins Navigation et Pages Statiques. Le premier permet d’afficher automatiquement la liste des dernières pages dynamiques publiées. Le second permet d’afficher la liste de toutes les pages statiques. Ces extensions créent dans la colonne latérale du site une sorte de menu pour chaque type de pages éditées.

Le problème rencontré est la mention en anglais de la page d’accueil en tête de liste, dans les deux plugins. Un assez gênant Home page inaugure les deux listes ! Il faut donc intervenir dans le fichier fr_FR.json des plugins en question. Pour ma part j’ai constaté qu’en effectuant la modification dans un seul fichier, le changement était effectif pour les deux listes ! Vous vérifierez si c’est aussi le cas pour votre site 😉

➜ Voici le changement à effectuer (ici dans le fichier de traduction du plugin Navigation) :

Personnaliser un thème

La prise en main d’un thème nécessite beaucoup de pratique. Rien de tel que de réaliser un site avec tel ou tel thème pour découvrir le potentiel typographique et iconographique du thème.

➜ Je vous propose, pour terminer la formation FCS, de réaliser un site en utilisant le thème Massively. Vous trouverez de nombreux conseils et astuces pour créer un superbe site vitrine sur Personnaliser le thème Massively.

Par Yves Goguely

Formateur au GRETA Clermont-Auvergne