C’est le 14 février. Le reste de l’année, nous avons un peu (trop ?) l’habitude de dire « y’a un beuuuuug » aux personnes passionnées qui créent des logiciels libres. Mais aujourd’hui, c’est différent.

Aujourd’hui, on dit juste « merci ». On leur dit juste combien on les aime, combien on aime leur travail.

Car aujourd’hui, le 14 février, c’est le I Love Free Software Day : le jour où on partage du #ilovefs et du datalove de partout.

Créez une Page Framasite à la gloire d’une création de l’esprit libre !

Aujourd’hui aussi, nous venons d’ajouter un nouvel outil à notre service d’hébergement et de conception de sites web : les Pages Framasite. Comme nous le disons sur ce blog, cet outil est très simple à utiliser, et permet de créer un site en quelques clics.

Du coup, nous nous sommes dit qu’on allait vous lancer un défi, juste pour le fun :

1. Connectez-vous sur Frama.site (nécessite d’avoir un compte)
2. Cliquez sur « créer un site » puis sur « Page »
3. Créez un site à la gloire d’un logiciel, un blog, un roman, une asso, une ressource libre que vous aimez
4. Quand vous avez fini, partagez-le sur vos réseaux sociaux préférés avec le hashtag #Ilovefs (et mentionnez @framasoft au passage, si vous voulez qu’on le voie !)

Si vous êtes suffisamment nombreuses et nombreux à relever le défi, on fera un petit florilège ici même sur ce blog !

Comme nous aussi on aime faire des choses pour la beauté du geste, on s’est prêté à l’exercice, histoire de vous faire un mini-tuto !

Pouhiou déclare son amour à VLC

Pouhiou, il aime VLC, le lecteur de vidéos tout terrain à l’emblématique cône de chantier. Alors il va lui dédier une page web. Pour cela, il se rend sur Frama.site, se connecte à son compte (il sait déjà comment on le crée !) et choisit de faire une Page Framasite

 

Là, notre Pouhiou tombe sur un formulaire assez explicite demandant l’adresse web souhaitée, le nom du site, ses mots-clés… Alors il le remplit comme ça :

Une fois qu’il a cliqué sur Créer un site page, cela le renvoie sur son compte général Framasite, où il trouve le nouveau site qu’il vient de créer… Il ne lui reste plus qu’à choisir Modifier mon site et de se connecter avec l’identifiant et le mot de passe qu’il a choisis dans le formulaire précédent !

#gallery-1 { margin: auto; } #gallery-1 .gallery-item { float: left; margin-top: 10px; text-align: center; width: 50%; } #gallery-1 img { border: 2px solid #cfcfcf; } #gallery-1 .gallery-caption { margin-left: 0; } /* see gallery_shortcode() in wp-includes/media.php */

Et voici son site vierge, avec quelques modules (les « bandes » du site web) déjà pré-installées !

Première étape, Pouhiou veut modifier l’image et le texte du module image d’en haut. Il lui suffit de cliquer sur les éléments, puis de sauvegarder !

Pouhiou se souvient encore, avant VLC, donc dans la préhistoire de la vidéo numérique, qu’il lui fallait avoir installé un obscur pack de codecs sur WindowsMediaPlayer (beuuuurk), et avoir RealMediaPlayer ou Quicktime pour certaines vidéos… Il en parle donc dans le module de texte suivant ! En quelques clics, il passe de ça :

À ça  :

Tiens, la disquette orange « sauvegarder » pulse : Pouhiou se dit qu’il doit régulièrement cliquer dessus pour enregistrer ses avancées…
C’est le moment ou jamais de mettre un bouton de téléchargement vers le site de VLC… Pouhiou clique donc entre deux modules pour pouvoir en ajouter un, et choisit d’ajouter un module « bouton ».

Après quelques clics pour changer l’image de fond, le texte et le lien du bouton, voici ce que ça donne !

Bon, ce vert et cette police, ça lui va pas du tout, à notre Pouhiou. Il décide d’aller voir dans les options du site pour changer tout cela !

Pouhiou surkiffe la nouvelle version majeure de VLC, la 3.0 « Vetinari ». D’une part parce que Vetirani, c’est le nom du Patricien, le tyran bienveillant des romans du Disque-Monde…

Mais surtout parce que cette version 3.0 regorge de fonctionnalités. Il décide donc d’ajouter un module de carrousel d’images (éhontément piquées sur le site officiel de VLC !) pour montrer ces nouvelles fonctionnalités. Ce module fonctionne comme le module image de tout à l’heure, mais avec plusieurs images et textes à remplir !

Une fois son module paramétré, Pouhiou se rend compte qu’il est mal placé, en-dessous du bouton de téléchargement… Et s’il le faisait remonter au dessus ? Pour cela il lui suffit de cliquer sur la clé à molette du module carrousel !

 

Puis de cliquer sur la flèche qui lui permet de remonter le module !

Il profite aussi de ce bouton des paramètres de chaque module pour supprimer ceux qui ne lui serviront à rien ;).

Cela donne un mini site déjà bien sympa :
https://ilovevlc.frama.site

À vous de répandre du datalove !

Que ce soit en faisant une page Framasite, un mot sur vos médias sociaux, un email au personnes qui créent des œuvres de l’esprit libre, un don, un poème, etc… Pensez à faire un petit quelque chose aujourd’hui.

On prend rarement le temps de dire merci, aujourd’hui c’est l’occasion rêvée !

Joyeux I Love Free Software Day à vous,

 

L’équipe de Framasoft.

Pour aller plus loin & Contribuer :

• Tester Frama.site
• Site officiel du I Love Free Software Day
• Lire la présentation des pages Framasite
• Contribuer au code de PrettyNoemieCMS
  • Faire des bisous virtuels à Robin
  • Le soutenir sur Patreon
• Échanger sur notre forum des contributions
• Visiter Contributopia
• Soutenir Framasoft

 

Notre service d’hébergement et de création de sites web s’enrichit d’une belle contribution, pour que quiconque puisse créer une page web en quelques clics seulement.

Framasite, un service que vous avez fait grandir

Dès son lancement en octobre dernier, nous avions annoncé la couleur : le service Framasite était loin d’être « prêt-à-l’emploi ». Notre feuille de route Contributopia est claire : proposer moins d’outils, pour prendre le temps de les imaginer avec vous. Nous avons donc proposé un Framasite tout vert, avec deux options (faire un site web ou faire un wiki). Cette sortie permettait d’avoir une base pour commencer à échanger avec vous, à récolter vos retours et contributions afin de faire évoluer ce service selon vos attentes.

L’option Wiki (propulsée par le logiciel libre Dokuwiki) a très vite trouvé son public : elle est relativement facile à utiliser. De plus, une personne qui crée un wiki sait en général pourquoi elle choisit ce genre de site très particulier. Les options Blog, Page ou Site (propulsées par le logiciel libre Grav), quant à elles, ont plus fait débat : les enthousiastes de la souris les ont vite adoptées, les blogueurs et blogueuses les ont apprivoisées, mais elles ne sont pas vraiment faciles à dompter pour qui n’aime pas mettre les mains dans le cambouis numérique…

 

Robin : développeur en herbe, et pas que

C’est en voulant changer le monde (un octet à la fois) que Robin s’est retrouvé à faire un stage en développement chez Framasoft. Cet aquarelliste à la formation d’éducateur a été fasciné par les modes d’organisations collectives qui naissaient dans les Nuits Debout Nîmoises. Nous reparlerons prochainement, sur ce blog, du projet qui l’a poussé à apprendre à coder… Mais la motivation est bien connue des libristes : « si le logiciel de mes rêves n’existe pas, je m’en vais le coder moi-même ! »

Robin a donc commencé son stage avec pour but de faciliter l’utilisation de Grav (le logiciel libre qui permettait, jusqu’à aujourd’hui, de créer une Page, un Blog ou un Site Framasite). Après quelques bidouillages, fausses pistes, et échanges avec d’autres développeurs qui avaient tenté de prendre le même chemin, il arrive au pied du mur. Le logiciel Grav est conçu de manière si élégante, si complète, que modifier un de ses éléments-clés (les modules, le markdown…) reviendrait à devoir le refondre en entier.

Qu’à cela ne tienne, Robin vient nous annoncer : « Il me reste un mois, si je pars de zéro, je peux faire la solution dont j’aurais rêvé pour faire mes sites d’aquarelles, lorsque je n’y connaissais rien au code… » On va vous le dire franchement : vu les délais, nous, on y croyait moyen… Mais si un stage n’est pas l’occasion d’expérimenter (pour la ou le stagiaire) et de faire confiance (pour l’encadrant·e), quand peut-on suivre son enthousiasme, hein ?

Les Pages Framasite : beau, beau, beau et con à la fois

Le moins que l’on puisse dire, c’est que Robin nous a bluffé·e·s ! En un mois, il a conçu PrettyNoémieCMS, un logiciel qui permet de créer hyper simplement une belle page web (un site à page unique pour présenter son association, son CV, ses travaux artistiques ou son artisanat…).

Pourquoi c’est facile ? Parce que c’est limité (ah ben y’a pas de secret, hein…). Bien sûr on peut choisir des thèmes de couleurs, des jeux de polices… Mais tout est déjà pré-mâché pour vous, vous ne pourrez pas trifouiller les bordures, emplacements et autres joies du CSS…

Donc oui : c’est limité et limitant, c’est même conçu comme ça… Car ce sont ces limites qui permettent d’avoir un résultat vraiment joli. C’est donc un outil à réserver aux personnes qui apprécieront un principe fondamental de cet outil…

Le principe est simple : à aucun moment vous ne verrez du code.

Il vous suffit d’aller sur votre site, vous vous connectez à l’interface d’administration, et là des boutons s’affichent par dessus votre Page web.

Vous ? Vous n’avez qu’à cliquer. Vous cliquez pour rajouter un bandeau de titre, des colonnes de textes, un carrousel ou une galerie d’images, un formulaire de contact ou une carte OpenStreetMap… Vous cliquez encore pour changer les textes, les mettre en forme ou pour charger vos images.

Les boutons sont explicites, il y a une aide si jamais vous êtes perdu·e·s, mais franchement… c’est vraiment, vraiment facile. Le résultat, pour la personne qui crée le site comme pour celles qui iront le voir, est franchement sympa.

Tiens, si vous voulez voir, Robin vous a même préparé une vidéo :

cliquez sur l’image pour visionner la vidéo (YouTube)

À vous de créer vos Pages Framasite !

Voici une nouvelle étape dans l’évolution contributive de Framasite. Ce n’est pas fini : le logiciel derrière les Pages Framasite, PrettyNoemieCMS, est vert et frais comme un mojito ! Voyons ensemble, avec vos retours, comment il maturera. Les autres solutions (les Wikis, les Blogs, les Sites complexes) restent bien sûr disponibles et vouées à évoluer. Ces nouvelles Pages Framasite ne sont qu’une corde de plus à cet arc qui vous permet de vous exprimer pour faire vibrer la toile !

Désormais, si vous connectez à votre compte Frama.site et que vous choisissez de « créer un nouveau site », les possibilités seront classées par facilité d’utilisation :

• les Pages Framasite : créer une page unique hyper-facilement (ce dont on vient de parler aujourd’hui)
• les Wikis Framasite : pour faire un site collaboratif assez aisément
• les Blogs Framasite : tenir un journal de bord, nécessite quelques petites connaissances
• (utilisation avancée) : les Sites Framasite, pour qui veut avoir toutes les options 😉

Pour fêter l’arrivée de ce charmant petit outil, on vous a concocté un exemple doublé d’un défi : êtes-vous prêt·e à créer une Page Framasite déclarant votre amour pour un logiciel libre ?

Si oui, rendez-vous sur cet article du blog !

Et quoi qu’il en soit, n’hésitez pas à nous dire ce que vous pensez de cette nouvelle solution !

Pour aller plus loin & Contribuer :

• Tester Frama.site
• Re-lire le principe de Framasite
• Contribuer au code de PrettyNoemieCMS
  • Faire des bisous virtuels à Robin
  • Le soutenir sur Patreon
• Échanger sur notre forum des contributions
• Visiter Contributopia
• Soutenir Framasoft

 

Lorsque l’on veut créer sa première page web, on se heurte très vite à la problématique de l’apprentissage du code. Si l’on n’est pas développeur, on cherchera donc à avoir une solution permettant de créer sa première page via des menus et des clics au sein d’une interface graphique. Les plus anciens d’entre nous se rappelleront feu Frontpage, la solution propriétaire de Microsoft incluse dans Office dans les années 2000. Les libristes eux se rappelleront Nvu… Ces solutions visuelles sont souvent maladroites et limitées, mais voici le logiciel en ligne Silex, qui vous permettra de vous initier au web design mais aussi d’aller jusqu’au code CSS quand vous aurez progressé, grâce à l’éditeur avec visualisation instantanée.

À savoir : Silex est issu du monde associatif, Silex Labs est une association à but non lucratif, qui organise régulièrement des ateliers sur des langages et des logiciels libres, luttant contre la fracture numérique. L’association maintient le logiciel libre Silex pour permettre à ses membres d’initier des novices au web design, afin qu’ils puissent réaliser des sites internet sans savoir coder et aussi pour qu’ils s’initient aux langages du Web (HTML5, CSS3, Javascript). Des vidéos et des tutoriels sont disponibles gratuitement sur le blog de l’association et sur la chaîne YouTube de l’association.

À l’occasion de leur campagne de financement participatif, nous avons interviewé le président de l’association, Alex, pour en savoir un peu plus sur Silex Labs l’association, sur Silex le logiciel et ses évolutions à venir.

Q : Bonjour Alex, peux-tu nous présenter l’association Silex Labs?

Silex Labs est née en 2009 en banlieue parisienne, nous étions un groupe informel d’indépendants, professionnels du web. Nous avions créé Silex ensemble pour nos activités de designer, développeurs et chefs de projet. L’outil s’est avéré tellement efficace que nous avons décidé d’en faire quelque chose d’utile pour d’autres professionnels, mais aussi pour la communauté. Nous avons commencé par organiser des ateliers pour former les gens à Silex et au fur et à mesure une communauté de professionnels s’est formée, ça nous a donné envie d’organiser davantage d’ateliers pour initier le plus grand nombre aux logiciels et langages libres.

Q : Le tour du Web en 50 ateliers, c’est quoi tout ça ?

C’est un programme de 50 ateliers organisés dans toute l’île de France que nous avons mis en place en 2015, pour permettre à tous de comprendre ce que sont les métiers et les technologies du web, les communautés qui font un web libre, et découvrir les nombreuses opportunités professionnelles qui existent dans ce domaine. Nous souhaitons donner des perspectives professionnelles à des personnes qui pensent que c’est un secteur inaccessible. Le réseau et la collaboration sont au centre du programme, autant que le bien commun et la vie privée.

Q : Et sinon Silex, c’est quoi? En quoi ça consiste?

Silex c’est un logiciel libre, gratuit et accessible en ligne pour permettre au plus grand nombre de réaliser des sites internet en fonction des niveaux de chacun. Les débutants pourront réaliser leur site sans faire une ligne de code mais ceux qui connaissent déjà un peu de HTML de CSS ou de JS pourront aussi utiliser leurs connaissances pour améliorer le design ou l’interactivité de leur site.

Tu n’as qu’à aller sur silex.me et tu peux insérer, modifier, déplacer des textes, des images et des vidéos, tu crées des liens et BIM : tu as ton site !

C’est un bon outil pour faire un site vitrine, c’est-à-dire un site visuellement attractif, qui n’a pas un contenu énorme et changeant tous les jours. Tout est fait pour aider les gens à s’initier au web design mais ça peut aussi être un bon choix pour un pro qui veut un moyen efficace de créer puis de maintenir des sites pour des clients.

Bon c’est aussi un logiciel qui respecte ta vie privée, tes données et une communauté internationale qui grandit.

Q : C’est tout en logiciel libre?

Oui, la licence est GPL, les contributions sont les bienvenues et la gouvernance se fait en discutant sur Github et Gitlab

Toutes les contributions sont les bienvenues même si tu n’as jamais codé tu peux contribuer à ton niveau par exemple en faisant un rapport de bug, ou en proposant des templates quand tu auras utilisé un peu plus Silex !

Q : Donc la famille Dupuis-Morizeau va pouvoir créer son site web en ligne? Et le mettre où elle veut?

Eh oui mon bon Monsieur, on ne fait pas payer, on n’utilise pas vos données à votre insu, et en plus on vous laisse aller où vous voulez avec, vous restez propriétaire de vos données ! Un site fait avec Silex c’est une simple page HTML et quelques fichiers CSS et Javascript. Il suffit de le coller sur un hébergement et c’est en ligne. On peut aussi s’auto-héberger, utiliser un hébergement à la netlify (simple glissé / déposé de vos fichiers sur leur site pour mettre en ligne) ou encore faire appel à des gens sympas et militants comme les Indiehosters pour vous garantir un service rapide et toujours disponible.

Q : On approche des 8 ans des toutes premières lignes de code du logiciel. Comment le logiciel a-t-il évolué au cours du temps?

Beaucoup de choses ont changé depuis la première version qui était un logiciel qu’il fallait installer et qui était plus complexe à prendre en main et avec un code source beaucoup plus lourd et surtout basé sur des vieilles technos. Nous avons décidé pour cette nouvelle version d’utiliser des technos innovantes pour gagner en performance et surtout de simplifier au maximum l’interface pour permettre au plus grand nombre de réaliser son site internet et de laisser beaucoup de liberté aux utilisateurs pour décider d’utiliser les éditeurs de code ou non.

Q : Pourquoi lancer une campagne de Crowdfunding, à quoi va servir l’argent?

Un sondage récent a montré que les utilisateurs attendent un éditeur de version mobile (responsive), pour offrir une expérience personnalisée aux visiteurs sur téléphone ou tablette.

Ils attendent aussi et surtout plus de docs, plus de « templates » – des sites prêts à l’emploi pour ne pas démarrer d’une page vide. Il y en a déjà mais pas suffisamment.

L’éditeur de version mobile (responsive) est déjà en route et même si un peu d’argent nous permettrait d’accélérer le mouvement, c’est une certitude on y va ! Par contre les templates / sites prêts à l’emploi, il va nous falloir un budget pour nous payer les services de designers. Et la doc aussi, un budget nous permettra de mobiliser quelqu’un dessus à plein temps pour mettre en place les bases que la communauté maintiendra ensuite.

Une partie de la somme récoltée sera dédiée à la réalisation d’ateliers dans des banlieues parisiennes défavorisées pour accompagner des jeunes déscolarisés et des chômeurs à réaliser leurs sites internet CV avec Silex.

Q : Le mot de la fin?

Venez nous rencontrer aux apéros de l’asso chaque mois à Paris, dans un bar pour discuter ou dans une salle pour contribuer.

Merci à Alexandre d’avoir bien voulu se prêter au jeu de l’interview et souhaitons à leur campagne de financement participatif de réussir.

Pour aller plus loin :

• Faire son site web avec Silex.me
• Le site de l’association SilexLabs
• Participer au financement collaboratif