Il y a 10 mois, je vous annonçais dans une dépêche la naissance de la version Beta de Scribouilli. Scribouilli a pour but d’être une solution simple pour réaliser un blog ou un petit site internet de quelques pages utilisable avec des personnes sans grande connaissance informatique.

Depuis lors, on a pu voir sur les réseaux l’annonce d’une version 1.0 pleine d’améliorations par rapport à ce que je vous avais présenté. Pour faire court, toutes les limitations de la version Beta que j’avais pointées dans la dépêche précédente ont été levées.

Sommaire

• Hébergement
• Blog
• Ergonomie
• Modifier l’apparence du site
  • Page d’accueil
  • La page Articles
  • Alignement des images
  • D’autres exemples
  • Réflexions concernant le CSS
• Aider
• Conclusion

Hébergement

Dans sa première version, Scribouilli nécessitait d’avoir un compte GitHub et cela n’est pas du genre à plaire à tout le monde. Désormais, lorsque vous vous lancez avec Scribouilli, vous tombez rapidement sur cet écran :

Il s’agissait d’une évolution qui était envisagée depuis le départ ou quasiment. L’arrivée relativement rapide de cette évolution a clairement été aidée par le fait que Framasoft a choisi d’utiliser Scribouilli pour les mini-sites dans le cadre de la refonte de framalibre.org. L’usage de GitHub par Scribouilli n’était pas trop au goût de Framasoft. Si vous l’ignorez, Microsoft a racheté GitHub en 2018 et même si GitHub est devenu une référence pour trouver les projets open source, GitHub.com lui-même n’est pas open source.

Le caractère non-opensource de GitHub est une des raisons de ne pas être fan d’un outil qui passe par GitHub mais GitHub est aussi un monde intimidant pour une personne lambda sans background spécifique en informatique. Dans la première version de Scribouilli, il fallait aller sauvegarder les images du site dans GitHub et puis revenir à Scribouilli pour insérer l’image avec le code markdown adéquat. Désormais, un lien permet d’uploader les images à partir de Scribouilli qui par ailleurs génère le code markdown qui va bien. Il reste donc à copier ce code et le coller à l’endroit adéquat de la page ou article en rédaction. Il n’est donc plus nécessaire de quitter l’interface de Scribouilli.

L’évolution de l’interface de Scribouilli apporte deux autres améliorations en lien plus ou moins direct avec l’hébergement. Premièrement, dans ses premières versions, le parcours supposait systématiquement que l’on voulait créer un nouveau site. Pour modifier un site, il fallait faire comme si on allait créer un nouveau site et puis cela se passait bien. Désormais, on a explicitement le choix entre créer un nouveau site ou en modifier un existant. La seconde évolution est que pour un même compte GitLab, GitHub ou ScribouGit, il est maintenant possible d’avoir plusieurs sites internet.

Dernier point en lien avec l’hébergement, l’URL qui était générée dans la version Beta était assez particulière et surtout peu parlante. Désormais, lors de la création d’un nouveau mini-site ou blog, on choisit le nom de celui-ci et l’URL prend la forme : adresse du dépôt / nom du site. Si l’on souhaite un nom de site encore plus sur mesure, il y a moyen avec quelques incantations plus ou moins magiques de lier un nom de domaine personnel à son site.

Blog

Dans la dépêche précédente, j’écrivais

Autant Scribouilli me paraît parfaitement utilisable en l’état pour un site simple de quelques pages, autant son utilisation pour un blog me paraît moins évidente. En effet, le menu deviendra vite illisible si l’on crée une page pour chaque nouveau billet.

En parlant du menu, remarquons qu’il n’y a pas vraiment moyen de choisir l’ordre dans lequel les pages apparaissent dans le menu. Il me semble que les pages sont classées par ordre alphabétique avec une exception pour la page accueil qui, indépendamment de son nom, apparaît de manière assez logique en première.

L’absence de création d’un flux RSS est aussi une caractéristique peu gênante pour un site de quelques pages mais qui peut être plus ennuyante dans le cadre d’un blog.

Et bien aujourd’hui, Scribouilli ne possède plus ces limitations. Dans les paramètres, on peut demander l’ajout d’une page Articles.

Comme vous pourrez le voir un peu plus bas dans cette dépêche, la page Article sert comme page menu de tous vos posts de blog qui apparaissent dans l’ordre chronologique de création.

Pour ce qui est du menu général du site qui apparaît à droite dans le bandeau du haut, il y a désormais moyen de modifier l’ordre d’apparition des différentes pages. Une petite exception concerne la page Articles qui apparaît toujours en première dans le menu.

Finalement, associé à la page Articles, un flux RSS est également généré.

Ergonomie

Deux autres évolutions positives que je classifie dans ergonomie concernent la prévisualisation des articles et la possibilité de consulter le code markdown des pages sans devoir relancer tout le cycle de la publication.

Dans la version Beta, même si on n’avait rien changé à une page dont on venait de vérifier le code, il fallait lancer un cycle complet de publication du site. Aujourd’hui, ce n’est plus le cas.

La prévisualisation est déroutante pour une personne habituée à écrire pour Linuxfr.org vu que la prévisualisation se déroule en temps réel, il n’est nul besoin de demander une prévisualisation en actionnant un quelconque bouton. La prévisualisation est toujours disponible et visible quand on tape le markdown.

Modifier l’apparence du site

Dans la dépêche précédente, je notais que le look était à prendre ou à laisser. La vitesse de développement de Scribouilli m’amenait à me contredire rapidement dans les commentaires. En effet, une possibilité de modifier le code CSS avait été ajoutée à Scribouilli.

Je terminais mon commentaire en indiquant que je n’avais plus qu’à apprendre le CSS. LinuxFR n’étant pas à une sournoiserie près, j’étais désigné dans les primés de mars 2023 des meilleures contributions. Je me suis senti obligé de prendre un livre qui se révélera excellent sur le CSS. LinuxFR récidivant quelques mois plus tard, je me sentais de nouveau obligé de choisir un livre en lien avec les sites internet et le CSS (qui s’avérera tout aussi intéressant). Première morale à cette histoire, contribuez à LinuxFR, vous n’êtes jamais à l’abri de recevoir l’opportunité de compléter votre bibliothèque.

Seconde morale à mon histoire, je me sens invité à vous partager quelques adaptations que j’ai faites à mon blog à l’aide du CSS. Vous ne perdrez pas de vue que ma connaissance du CSS reste très récente et relativement limitée. Par ailleurs, étant de base plutôt satisfait du look de Scribouilli, ne vous attendez pas à des modifications radicales. Ces exemples permettront de donner une idée du genre de chose possible à réaliser ainsi que d’illustrer certaines limites de la démarche.

Page d’accueil

Commençons par la page d’accueil. L’image ci-dessous présente à gauche mon blog avec mes adaptations et à droite son look avant transformation.

En haut à gauche, on remarque que j’ai ajouté une sorte de logo à mon blog. Les quelques lignes de CSS qui permettent cela :

header div.container {
  background-image: url(https://github.com/t-isaac/test-website-repo-3796/raw/main/images/logo.avif);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

Lignes que j’ai dû compléter afin de gérer plus ou moins correctement l’affichage sur des petits écrans (tablettes, ordiphone,…) par une série d’instructions du type:

@media only screen and (max-width:430px) {
  header div.container{
      background-size: 40%; }
}

Les personnes les plus attentives auront remarqué que contrairement à ce que j’ai écrit plus haut dans cet article, j’ai réussi à modifier l’ordre d’apparition dans le menu en haut à droite de la page Articles. C’est une petite astuce permise avec le CSS, il suffit de demander d’afficher ce menu dans le sens inverse (de gauche à droite plutôt que de droite à gauche). J’en profite aussi pour légèrement réduire l’écartement entre les deux éléments du menu.

header ul {
  flex-direction: row-reverse;
  gap: 0.45rem;
}

Ce petit truc a ses limites. Par exemple, il ne fonctionnera pas si vous souhaitez avoir une section contact et que les pages apparaissent dans l’ordre suivant : Accueil – Articles – Contact. Systématiquement, la page Articles devra apparaître soit en premier, soit en dernier.

Jusqu’à présent, nous avons parlé du bandeau supérieur qui en fait n’est pas spécifique à la page d’accueil et que l’on retrouvera également sur toutes les autres pages. Le bateau est par contre un élément spécifique de la page d’accueil. Il s’agit d’une image svg. Au niveau du CSS, il faut gérer deux éléments : la couleur pour que le bateau soit toujours de la même couleur que le reste du site et l’alignement de l’image qui par défaut apparaîtrait au-dessus du texte de la page d’accueil.

svg {
   fill: var(--couleur-primaire);
   stroke: var(--couleur-primaire);
}

#Voilier {
   float: left;
   margin-left: 0rem;
}    

Vous pouvez aller vérifier, depuis les captures d'écran, j’ai changé la couleur de mon site et le voilier a suivi le mouvement.

La page Articles

Continuons par la page Articles. De nouveau, l’image ci-dessous présente à gauche mon blog avec mes adaptations et à droite son look avant transformation.

L’apparition du flux RSS n’a rien à voir avec mes transformations mais est liée au fait que l’image de droite a été prise avant l’introduction de cet élément dans Scribouilli.

Je ne suis pas trop fan de la présentation par défaut de Scribouilli. J’ai donc fait pas mal de modifications ici. D’autant plus que j’y ai ajouté quelques modifications pour le fun d’essayer certaines des fonctionnalités du CSS. Reconnaissons que le point négatif de mes modifications est sans doute une moindre lisibilité.

La première chose que j’ai faite, c’est de supprimer les Lire l’article et les lignes de séparation:

hr, article.blog-item > a {
  display: none;
}

Ensuite, je diminue la taille des titres, je les souligne et je prévois une transition pour quand on les survole:

.blog-item h2 a {
  font-size: 1.25rem;
  text-decoration: underline;
  transition: 0.1s;
}

Je réduis drastiquement l’espace entre les différents titres de post:

.blog-item, .blog-item h2 {
  margin-top: 0rem;
  margin-bottom: 0rem;
}

Ce n’est pas hyper utile et cela donne des trucs bizarres avec les écrans tactiles, mais j’agrandis les titres quand on les survole avec la souris:

.blog-item h2 a:hover {
  font-size: 1.5rem;
}

Je termine mes modifications en prévoyant un changement de couleur quand le lien a été visité:

.blog-item h2 a:visited {
  color: silver;
}

Alignement des images

Le dernier type de modification que j’ai apporté concerne l’alignement des images. Ci-dessous, de nouveau à gauche le blog après mes modifications et à droite, le même blog mais sans modification du code CSS de Scribouilli. Par défaut, les images sont alignées sur la gauche et il n’y a aucun texte autour de l’image.

En quelque sorte, j’ai dû tricher. En effet, en se limitant juste au CSS, il n’est pas vraiment possible d’obtenir des alignements différents pour les différentes images. Pour y arriver, je dois introduire mes images non pas avec du markdown mais avec du code HTML. Je définis différentes classes qui sont gérées par du code spécifique dans mon CSS. Par exemple, j’utilise une classe GF pour laquelle j’écris le code CSS suivant qui aligne l’image sur la gauche et prévoit une légère marge pour le texte qui viendra se placer à côté de l’image:

.GF {
   float: left;
   margin-right: 3rem;
}

D’autres exemples

On peut retrouver ici une liste de sites utilisant Scribouilli. Parmi ceux-ci, certains ont également effectué des modifications à l’aide de CSS. Ci-dessous, deux exemples. À gauche, le site de La Frontale qui obtient une impression très différente avec très peu de modification au niveau du CSS. À droite, le site de lahminewski qui est un exemple de modifications plus visibles mais qui restent très simples. On retrouve ici le code CSS qui y est utilisé.

Réflexions concernant le CSS

Les quelques exemples présentés ci-dessus démontrent qu’il n’y a pas besoin de beaucoup de code CSS pour obtenir des effets forts différents les uns des autres. Tout n’est cependant pas possible, Scribouilli apporte une structure de base qui impose parfois quelques contraintes (par exemple concernant la place de la page Articles dans le bandeau supérieur). Si l’on est prêt à utiliser du code HTML dans ses pages, les possibilités de personnalisation augmentent. Comme pour l’alignement des images, le HTML est un passage parfois obligé si l’on a un but précis.

Même si le CSS (ainsi que le HTML) n’est pas très compliqué, on s’éloigne de l’objectif d’avoir un outil simple et facile pour des personnes non versées en informatiques. Rappelons d’abord qu’il n’y a aucune obligation d’ainsi adapter son propre site Scribouilli. Par ailleurs, rien qu’en jouant avec la couleur du site et avec des images, on peut déjà imprimer une personnalité propre à son site. Finalement, si vous accompagnez une personne sans connaissance informatique mais que vous, vous possédez la compétence pour coder le CSS, il est très simple d’écrire quelques règles CSS qui apporte une identité propre au site et puis de laisser la personne se débrouiller par elle-même pour la gestion du contenu proprement dit du blog ou du site.

Il est appréciable que Scribouilli soit à la base utilisable de manière très simple mais que cela n’empêche pas des personnalisations assez importantes pour les personnes qui maîtrisent le CSS et le HTML.

Aider

Scribouilli reste un outil jeune même s’il a quitté son statut de version Beta. La première chose que vous pouvez faire est de tester l’outil et de faire des retours à l’équipe derrière ce sympathique outil. À en croire le site officiel, l’équipe est toujours preneuse de ces retours.

J’imagine que si vous êtes sympathiques et un poil compétents, il y a sans doute moyen de collaborer avec les créateurs de Scribouilli. Contactez-les le cas échéant.

Pour le moment, Scribouilli est développé de manière bénévole. Ce n’est pas prévu pour le moment mais si vous avez très envie de les soutenir financièrement, je suis convaincu que si vous les contactez, il y aura moyen de trouver une possibilité de le faire de manière utile (mais bon, là, je m’avance peut-être un peu).

Conclusion

Désormais, Scribouilli est un outil fonctionnel pour réaliser un site de quelques pages ou pour bloguer. Sans rien y connaître, il est simple de mettre en place son blog ou son site. En s’y connaissant un peu, Scribouilli offre pas mal de possibilités de personnalisation rien qu’avec le CSS. Travailler avec le HTML permet d’aller par ailleurs encore plus loin dans la personnalisation de son site ou blog.

Dans les différentes activités menées par l’association de promotion et de défense du logiciel libre April, on retrouve le groupe Transcriptions qui publie sur le site Libre à lire ! des transcriptions d’enregistrements audios et des vidéos traitant du logiciel libre et, plus généralement, des libertés informatiques. Cette dépêche se propose de vous présenter les transcriptions qui ont été publiées le mois dernier, décembre 2023.

Sommaire

• À propos de Libre à lire !
• Les transcriptions de Libre à vous !
• Intelligence Artificielle
• Avant l’IA, Internet
• Et encore

À propos de Libre à lire !

Si vous ne connaissez pas le groupe Transcriptions, voici sa présentation que l’on retrouve sur le site de Libre à lire !

Libre à lire ! est le site du groupe Transcriptions de l’April, qui s’est donné pour mission de transformer des vidéos et des fichiers audio concernant le logiciel libre et les libertés numériques en général, en texte avec ajout d’une illustration et ajout de liens vers certains sites jugés pertinents.

Ces textes sont alors rendus accessibles aux personnes porteuses de handicap et, quand c’est jugé nécessaire, certains détails tels que gestuelle ou mimiques des intervenants sont indiqués dans le texte. Ces transcriptions sont repérées puis indexées dans les moteurs de recherche, il est alors possible de retrouver les propos exacts des intervenants voire de les utiliser en citant fidèlement la source.

Accessibilité, indexation, réutilisation sont les maîtres mots du groupe Transcriptions.

Les transcriptions de Libre à vous !

L’April assure chaque semaine une émission radio - Libre à vous ! - sur Cause Commune. Il est assez naturel que le groupe s’attelle à la transcription de ces émissions, également disponibles sous forme de podcasts.

Au mois de décembre 2023, quatre émissions ont été transcrites.

• Émission Libre à vous ! diffusée mardi 21 novembre 2023 sur radio Cause Commune Sujet principal : Au café libre, actualités chaudes, ton relax, débat autour de l’actualité du logiciel libre et des libertés informatiques.
• Émission Libre à vous ! diffusée mardi 28 novembre 2023 sur radio Cause Commune Sujet principal : Au cœur de l’April.
• Émission Libre à vous ! diffusée mardi 12 décembre 2023 sur radio Cause Commune Sujet principal : Au café libre, actualités chaudes, ton relax, débat autour de l’actualité du logiciel libre et des libertés informatiques.
• Émission Libre à vous ! diffusée mardi 19 décembre 2023 sur radio Cause Commune Sujet principal : Framasoft, un an de coin coin.

Intelligence Artificielle

Aujourd’hui, il est compliqué d’échapper à cette thématique. Cela transparaît dans les transcriptions du mois de décembre.

On débute par une conférence donnée par Hervé Le Crosnier à l’Université de Caen dans le cadre du cours de Culture numérique. Il y a deux vidéos : la première et la deuxième heure de la conférence. Il y a donc deux transcriptions.

• Paniques morales
• Quelques repères sur l’intelligence artificielle

Début de la conférence pour vous mettre un peu l’eau à la bouche :

Elle est intitulée « Paniques morales », mais il y a une deuxième partie sur l’intelligence artificielle où on se demandera, justement, si nous ne sommes pas en train de vivre une panique morale, ou bien s’il y a un réel changement dans la société, un basculement du même ordre et du même type que celui qui a eu lieu il y a maintenant 25 ans autour du passage de l’Internet grand public.

Mods & Rockers

L’idée de « Paniques morales » est née il y a 50 ans quand un sociologue anglais, Stanley Cohen, va faire une étude sur deux groupes de jeunes, deux bandes rivales qui existaient dans les années 60, qu’on appelait les Mods & Rockers, les Rockers étaient tout habillés de cuir et les Mods étaient habillés de vestons italiens, pratiquaient les scooters et non pas la moto, ce qui entraînait entre eux des bagarres, des agressions, des choses comme ça, donc des phénomènes de bandes comme il en existait en France, on appelait ça les blousons noirs, etc. La société anglaise, d’un seul coup, s’est mise à paniquer, a créé une réaction disproportionnée face à ces jeunes qui étaient considérés comme marginaux ou déviants, qui ne se comportaient pas comme la bonne société british. On a donc appelé ça des paniques morales

Il n’y a que l’avis des stars qui vous intéresse ? Nous avons peut-être ce qu’il vous faut : le All Star. Le All Star, c’est 3 invités qui pitchent en 3 minutes leur GRANDE IDÉE pour une IA de confiance avant de partir en grand débat avec le public. Pour cet épisode intitulé Des IA et des Idées, les invités sont :

• Françoise Soulié-Fogelman, pionnière de l’iA et membre du conseil scientifique du Hub France IA,
• Gilles Babinet, co-président du Conseil National du Numérique CNNum,
• Laurence Devillers, professeure à l’université Paris-Sorbonne et directrice de recherche au CNRS.

Mais le monde de l’IA, ce n’est pas que des stars. Loin de là. C’est aussi (et surtout ?) beaucoup de petites mains qui sont le sujet de Les travailleurs invisibilisés de l’Intelligence Artificielle. C’est une transcription du podcast Imaginaires de Gérald Holubowicz. Imaginaires part à la rencontre de chercheuses et de chercheurs, de journalistes et d’intellectuels qui observent l’effet de l’intelligence artificielle sur nos vies et son influence sur nos imaginaires.

Dans cet épisode, l’invité est Antonio Casilli. Antonio Casilli, est professeur de sociologie à Télécom Paris, grande école composante de l’Institut Polytechnique de Paris. En 2019, il a écrit un livre intitulé « En attendant les robots – Enquête sur le travail du clic » et son travail l’a récemment conduit, avec quelques-uns de ses étudiants à Madagascar sur les traces des travailleurs de l’intelligence artificielle auxquels font appel certaines entreprises françaises.

Avant l’IA, Internet

Avant l’IA, bien avant, il y avait internet. Il y a d’ailleurs toujours internet. C’est le sujet de la conférence-débat de Stéphane Bortzmeyer dans le cadre de l’évènement « Entrée Libre #3 » organisé par et au Centre des Abeilles de Quimper.

• Au tout début était Internet - 1/2
• Au tout début était Internet - 2/2

Et encore

Le monde du numérique et le monde du Libre en particulier ont énormément de progrès à faire pour l’inclusion et le respect des femmes et de nombreuses minorités. Dans cette perspective, écouter ou lire Mathilde Saliou est toujours intéressant. Comment le numérique limite les libertés des femmes et des minorités …et ce qu’on peut faire pour l’en empêcher est une transcription d’une conférence présentée dans le cadre de Mixit 2023.

Les journalistes ne sont pas une minorité dans le sens utilisé ci-dessus mais sont aussi des personnes que les libristes ont parfois du mal à comprendre. La retranscription suivante aidera peut-être à combler le gap : Les journalistes se moquent des logiciels libres, je vous explique pourquoi

Présentation de la conférence dont nous avons déjà débattu sur LinuxFr.org:

Pourquoi les médias spécialisés et rubriques tech des grands médias sont-ils souvent énamourés envers les nouveautés et modes technologiques, parfois jusqu’à l’absurde ? Pourquoi les chefferies des rédactions généralistes n’y comprennent souvent rien, mais ça va un peu mieux ? Et surtout, pourquoi, mais pourquoi les groupes de presse, de télé et de radio détestent-ils autant en privé les grandes plateformes de l’Internet contemporain, tout en leur faisant les yeux doux en public, et en ignorant copieusement les alternatives logicielles libres ? Une conférence pour mieux comprendre cette étrange espèce que sont les journalistes, leurs œillères, leurs contraintes… et leurs patrons.

La dernière transcription - L’Erg, le choix du Libre - Peggy Pierrot - est celle d’une interview de Peggy Pierrot, enseignante en Théorie des médias et de la communication, et préposée technique et logistique à l’Erg - école de recherche graphique à Bruxelles. On retrouve dans cette interview des questions sur le télétravail, sur le fonctionnement de l’Erg sous logiciels libres, et les raisons de ce choix collectif. Cette interview fait partie d’un série d’interview dans le cadre d'une campagne de sensibilisation dans le contexte du télétravail du GSARA.

Crédits des images

• Visualisation des multiples chemins à travers une portion d’Internet - Licence Creative Commons Attribution 2.5 Générique
• Bonhomme blanc 3d images gratuites : ouvriers hommes chantier, Fotomelia - Licence Creative Commons CC0
• Femme, fond blanc, point d‘ interrogation, Fotomelia - Licence Creative Commons CC0
• Artificial intelligence,computer science, image by Gerd Altmann - Licence Pixabay, Free for commercial use - No attribution required
• Affiche « les logiciels libres : à partager sans compter ! » - Licence Art Libre version 1.3 ou ultérieure, licence Creative Commons By Sa version 2.0 ou ultérieure et licence GNU FDL3 version 1.3 ou ultérieure.