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.

Catégories
FCS FCS3-cours

Utiliser les services gratuits d’Alwaysdata

Nous allons voir pendant ce cours comment procéder pour bénéficier des services gratuits de l’hébergeur Alwaysdata. Notre objectif à court terme est de pouvoir déposer des sites Web simples, personnalisés par nos soins lors des cours précédents.

Nos besoins

Capacités d’hébergement

Si vous compressez convenablement les images utilisées pour les sites personnalisés par vos soin, le poids total de chaque site à héberger ne devrait pas dépasser quelques Mo. Plus tard vous hébergerez votre portfolio sur le même espace. Bien conçu, votre portfolio ne devrait pas dépasser 20 Mo.

Pour la suite de la formation, nous aurons besoin d’héberger un CMS sans base de données (Bludit). Ce CMS, une fois utilisé pour réaliser la maquette d’un site vitrine, ne dépassera pas 50 Mo (images intégrées comprises). 70 Mo à 80 Mo d’espace d’hébergement suffisent donc amplement pour la mise en ligne des publications réalisées en cours de formation FCS.

Si vous envisagez de publier d’autres sites statiques sur le même espace d’hébergement, dans un but d’exercice, prévoir 20 à 30 Mo supplémentaires est réaliste. Cela porte notre besoin maximum à 100 Mo, pour le seul cadre de la formation FCS et la préparation du Titre Pro IMeP.

Base de données

Nous n’avons pas besoin d’accéder à une base de données dans le cadre de la formation actuelle. Nous n’avons pas besoin d’installer le CMS WordPress (ce qui nécessiterait le paramétrage d’une base de données et au moins 100 Mo supplémentaires pour installer sans souci quelques thèmes et extensions appropriés).

Aide en ligne

L’idéal est de pouvoir disposer d’une aide en français et d’une assistance rapide en cas de besoin.

Adresse du site

Les comptes gratuits ne permettent pas d’obtenir des noms de domaines gratuitement. Cependant la plupart des offres proposent de choisir des sous-domaines, dans la mesure où ils sont disponibles. Il s’agit alors de l’intitulé de votre compte

Généralement, l’intitulé de votre compte précède le nom de domaine de l’hébergeur et prend une forme comme moncompte.alwaysdata.net chez Alwaysdata.

Créer un compte chez Alwaysdata

➜ Je vous propose ici de créer un compte gratuit chez l’hébergeur Alwaysdata.

Vous disposerez de 100 Mo pour héberger vos publications, d’une aide en ligne en français, d’un tableau de bord de gestion de votre compte assez clair. L’adresse Web permettant d’accéder à vos sites (dont votre portfolio) se terminera par alwaysdata.net.

La démarche d’inscription est très simple. Si vous avez besoin de consulter l’aide en français, elle est accessible à cette adresse : https://help.alwaysdata.com/fr/

Attention : tous les 4 mois, il vous faudra vous connecter à votre compte en tant qu’administrateur. Si vous ne le faites pas, votre compte sera annulé. Vous serez avertis par mail avant la date butoir.

S’inscrire chez Alwaysdata

➜ La démarche d’inscription est très simple. Choisissez bien la formule gratuite mutualisée et complétez le formulaire d’inscription avec des données valides. L’inscription s’effectue à cette adresse : https://www.alwaysdata.com/fr/

Je vous recommande de saisir d’abord votre mot de passe dans un éditeur de texte. Choisissez un mot de passe fort puis copiez-le pour le coller dans le formulaire d’inscription d’Alwaysdata.

Pensez bien à enregistrer votre fichier de note. Nommez-le de manière explicite. En procédant ainsi vous éviterez les fréquentes erreurs de saisie et de copie qui vous obligeraient à redemander un mot de passe lors de connexions ultérieures infructueuses.

➜ Une fois votre compte créé, vous pouvez accéder à votre espace d’administration, à l’adresse suivante : https://admin.alwaysdata.com/.

Récupérer Les paramètres de connexion FTP

Pour placer vos sites Web en ligne, vous devrez utiliser les fonctionnalités d’un logiciel nommé “client FTP” (je vous propose dans un autre cours d’utiliser le client FTP “Filezilla”).

➜ Pour cela, vous devez noter dès maintenant les données dont vous aurez besoin ultérieurement. Sans ces données vous ne pourrez rien transférer chez Alwaysdata avec Filezilla ! Attention, vous en aurez besoin plusieurs fois…

Dans la colonne de gauche de votre espace d’administration, repérer l’onglet “Web”, ouvrez-le puis repérez l’onglet “Accès distant”. Ouvrez-le à son tour puis cliquez sur FTP. Toutes les informations dont vous avez besoin sont sur cette page…

Il s’agit donc de noter les informations suivantes :

  • l’adresse d’hôte FTP (sous la forme ftp-moncompte.alwaysdata.net)
  • votre identifiant de connexion FTP (nom d’utilisateur… c’est généralement le même que le nom du compte)
  • votre mot de passe de connexion FTP (c’est le même que votre mot de passe de connexion à l’espace d’administration)

Contrairement à ce que vous pourriez entendre sur certains tutoriels, je vous demande (dans un premier temps) de ne pas créer de nouvel utilisateur FTP.

Vous disposez maintenant de toutes les données de paramétrage pour pouvoir mettre votre site en ligne en utilisant le client FTP Filezilla.

➜ Si ce logiciel n’est pas installé sur votre poste de travail, je vous invite à l’installer dès maintenant, en veillant à installer Filezilla-client depuis l’adresse https://filezilla-project.org/download.php?type=client.

Attention, soyez très vigilants : l’adresse filezilla.org (sans le ”-project”…) est un site malveillant ! N’essayez même pas d’y aller !

Rendez vous ensuite sur le cours Utiliser Filezilla.