Vue lecture

Il y a de nouveaux articles disponibles, cliquez pour rafraîchir la page.

Scribouilli v1.0 : un outil simple pour des petits sites et des blogs

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

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 :

Choix hébergement

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.

Ajouter 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.

Modifier le code CSS

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.

Page d’accueil

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.

Menu Articles

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.

Alignement des images

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é.

Autres exemples de site Scribouilli

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.

Commentaires : voir le flux Atom ouvrir dans le navigateur

Framasoft.org : un site en cohérence avec qui nous sommes et ce que nous faisons

« Ah oui, Framasoft, je connais, c’est les framatrucs ! ». Alors oui, mais pas que. Ces dernières années, notre association a évolué en affirmant ses positions et en étendant ses actions. Il était temps de rendre notre projet associatif clair, fluide et facilement compréhensible. Et quoi de mieux pour cela qu’une refonte de notre site internet principal framasoft.org ? C’est parti pour la visite !

« Collectivisons Internet / Convivialisons Internet 🦆🦆 »

Les actions de notre nouvelle feuille de route étant financées par vos dons (défiscalisables à 66 %), vous pouvez en trouver un résumé complet sur le site Soutenir Framasoft.

➡️ Lire la série d’articles de cette campagne (oct. – déc. 2022)

Nos valeurs affirmées

Après 3 ans de travail, d’ateliers guidés par Marie-Cécile Godwin et de peaufinage par l’association, nous publions aujourd’hui notre manifeste.

Cette publication est particulièrement importante pour nous : elle clarifie notre raison d’être, le cadre de nos actions et les valeurs qui nous poussent à agir.

En cours de route, nous nous sommes dit : « Et si on faisait en sorte que les intentions du manifeste se comprennent dès l’arrivée sur framasoft.org ? ». C’est avec cette idée en tête que nous avons construit ce nouveau site.

 

Accueil framasoft.org

Pourquoi nous faisons tout ça ?

Ce qui nous motive (changer le monde pour plus de justice sociale !), pour qui nous le faisons (celles et ceux qui veulent aussi de ce monde meilleur) et qui nous sommes (une petite association, un groupe d’ami⋅es), c’est en fait essentiel pour bien comprendre notre projet associatif. Alors on le précise !

capture d'écran "Vous avez dit Framasoft ?"

C’est pas un peu politique ?

La politique, dans son sens premier, désigne ce qui est relatif à l’organisation d’une cité. Vouloir changer notre monde actuel pour un monde meilleur, où les Communs sont favorisés, où la justice sociale est une base, où les libertés sont préservées, c’est politique ! L’élaboration de notre manifeste nous permet de mettre en avant une évidence : notre projet associatif est politique.

capture d'écran "C'est pas un peu politique ?"

Remise au point de certaines idées reçues

Framasoft est une petite association, qui n’est pas neutre (et ne souhaite pas l’être), et qui dépend de vous, de vos dons. Cela n’est pas toujours connu par nos bénéficiaires, et le rappeler est toujours utile. On en profite pour glisser une vidéo qui parle un peu plus de l’association. En images, c’est quand même plus sympa !

capture d'écran "Idées reçues"

L’étendue de nos actions éclaircie

En 2021, notre objet social a évolué. Nous sommes passés « d’association de promotion de la culture libre en général et du logiciel libre en particulier » à une « association d’éducation populaire aux enjeux du numérique et des communs culturels ». Réfléchir et mettre en place des actions qui facilitent l’émancipation des citoyens et citoyennes, c’est notre objectif, et les actions qui en découlent peuvent prendre différentes formes, que l’on voulait rendre visibles.

Montrer nos différents axes d’action

Depuis quelques mois, nous présentons ce que nous faisons en 3 catégories : l’éducation populaire, l’émancipation numérique et l’archipélisation. Cette catégorisation nous permet de mieux expliquer nos actions : nous avons ainsi créé des sous-pages, permettant de rentrer dans le détail.

capture d'écran "On agit concrètement pour"

Des exemples concrets, ça parle toujours plus que de longs discours. La page d’accueil est parsemée d’actions concrètes que nous menons : services en ligne, exemples de communs culturels auxquels nous avons contribué ou encore articles et conférences que nous avons réalisées.

capture d'écran "On nous connaît souvent pour"

Trouver ce que nous disons et où nous retrouver

Du contenu que l’on peut actualiser pour rendre le site plus « vivant » ? Nous, on dit oui ! Que ce soit une actualité mise en avant, la vidéo d’une conférence ou des articles de blog dernièrement publiés : nous allons pouvoir faire de notre site internet une vitrine régulièrement renouvelée, pour exposer ce qui se passe dans l’association.

capture d'écran "à voir et à lire"

Nous avons aussi envie de mieux valoriser nos participations à différents événements. Après quelques réflexions, il nous a semblé plus que judicieux d’utiliser le logiciel de gestion de groupes et d’événements que nous développons, Mobilizon, pour valoriser nos interventions. Nous avons ainsi mis en place un groupe sur notre instance Mobilizon.fr, où nous ajoutons au fur et à mesure les prochains événements auxquels nous participerons. Nous avons ensuite relié ces événements à notre nouveau site internet : tadaaa, la partie « On se voit bientôt » s’actualise « toute seule ». Pratique, non ?

capture d'écran "On se voit bientôt ?"

Nos actions réalisables grâce à vos dons

Dès le haut de page, nous avons voulu mettre en avant que si tout cela est possible, c’est bien grâce à vous, grâce à vos dons. Le budget de notre association repose en effet à plus de 98 % sur des dons (dont 86 % sont des dons de particuliers). En bas de page, un formulaire de dons permet d’apporter plus de précisions (quelques chiffres, comment nous utilisons les dons et des réponses à des questions plus générales).

Soutenir Framasoft

Un joli coup de pinceau

Notre image a bien évolué au fil des ans

Tout comme nos actions ont évolué ces dernières années, notre image a, elle aussi, quelque peu changé. Entre 2014 et 2016 (lors du lancement de la campagne « Dégooglisons Internet »), nos illustrations étaient plutôt humoristiques, voire satiriques, notre but étant de dénoncer les dérives des géants du web (vous trouverez quelques archives par ici).

Depuis 2017 (avec le lancement de Contributopia), nous avons commencé à travailler avec David Revoy, dans un univers plus poétique. Nous avons, au fil des années, poursuivi cette ligne plus optimiste, où nous voyons qu’une co-construction est possible. Nous voulons montrer des imaginaires où nous ne nous prenons pas au sérieux, où nous essayons des choses et où nous avons le droit à l’erreur. Quelque chose qui représente aussi nos valeurs, quoi !

Illustration de David Revoy – Licence : CC-By 4.0

Une mise en pratique progressive

L’année dernière, nous avons entamé une grande mise à jour des pages d’accueil de nos services en ligne. Le but ? Comprendre rapidement comment accéder au service, informer de ce qu’il fait, ses conditions, et préciser qui est derrière tout ça… tout en actualisant la page à notre image.

Nous avons ensuite entamé un travail de mise à jour de nos contenus imprimés (que vous pouvez retrouver par ici) et l’identité visuelle de Framasoft s’est peu à peu peaufinée : couleurs, illustrations, polices… Nous avons recherché plus d’unité dans nos différents supports pour mieux nous représenter.

Documents imprimés de Framasoft - octobre 2022

Dépliants, affiche et stickers de Framasoft

 

Nous avons ensuite, durant l’été, remis en beauté notre site degooglisons-internet.org. Un nouveau pas pour appliquer l’évolution de notre image à nos outils en ligne.

Illustration « Quittons la planète GAFAM NATU BATX », CC BY David Revoy

Illustration de David Revoy – Licence : CC-By 4.0

 

C’est maintenant la figure de proue de notre association, framasoft.org que nous avons mise à jour, en reprenant tous ces éléments qui nous représentent plus sincèrement. De quoi mieux comprendre ce que fait, ce que veut mais aussi qui est cette association Framasoft.

Un travail à plusieurs mains

Nous avons fait à nouveau appel à Marie-Cécile Godwin pour travailler la trame de la page d’accueil, et nous permettre d’y intégrer le manifeste (et que nos valeurs puissent transparaître entre les lignes). Notre équipe salariée s’est mobilisée pour rendre tout cela pertinent, agréable à utiliser, et agréable à regarder tandis que l’équipe bénévole s’évertuait à peaufiner et préciser notre manifeste.

On espère que le site vous sera utile, que ce soit pour chercher du contenu, comprendre ce que l’on fait ou creuser certains sujets. En tout cas, on prend le temps de vous remercier encore une fois de votre soutien, qui a rendu cette refonte possible !

 

 

À l’heure où nous publions ces lignes, nous estimons qu’il nous manque 184 500 € pour boucler notre budget annuel et nous lancer sereinement dans nos actions en 2023.

Si vous le pouvez (eh oui, en ce moment c’est particulièrement compliqué), et si vous le voulez, merci de soutenir les actions de notre association.

 

Soutenir Framasoft

 

Ressources à consulter :

❌