Commit 65f8eb79 authored by JosephK's avatar JosephK
Browse files

Scrumblr + images ombrées et centrées systématiquement

parent fa830cdb
Pipeline #18378 passed with stages
in 1 minute and 5 seconds
......@@ -17,6 +17,7 @@
* [Framagit / Gitlab](cultiver-son-jardin/gitlab.md)
* [Framalink / LSTU](cultiver-son-jardin/lstu.md)
* [Framaestro](cultiver-son-jardin/framaestro.md)
* [Framemo / Scrumblr](cultiver-son-jardin/scrumblr.md)
* [Framindmap / Wisemapping](cultiver-son-jardin/wisemapping.md)
* [Framinetest / Minetest](cultiver-son-jardin/minetest.md)
* [Framapic / Lutim](cultiver-son-jardin/lutim.md)
......
......@@ -129,6 +129,13 @@
<p><b class="violet">Fra</b><b class="vert">maestro</b></p>
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="scrumblr.html" class="btn btn-lg btn-block btn-default">
<p><i class="fa fa-2x fa-object-group" aria-hidden="true"></i></p>
<p><b class="violet">Fra</b><b class="vert">memo</b></p>
<p><b>Scrumblr</b></p>
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="wisemapping.html" class="btn btn-lg btn-block btn-default">
<p><i class="fa fa-2x fa-sitemap" aria-hidden="true"></i></p>
......
......@@ -30,9 +30,7 @@ et peut même être installé sur un serveur mutualisé.
### 1 - Préparer la terre
<p class="text-center">
<img src="images/icons/preparer.png" alt="" />
</p>
![](images/icons/preparer.png)
Tout d’abord, il faut préparer le catalogue Calibre localement.
Si vous utilisez déjà Calibre pour votre usage personnel, créez une
......@@ -42,25 +40,19 @@ votre installation : ce sera le nom du répertoire dans lequel se trouve
votre bibliothèque actuelle.
Si vous n'avez pas le bouton, ajoutez-le via *Préférences* > *Barre d'outils*
<p class="text-center">
<img src="images/bicbucstriim/calibre_barre_outils.png" alt="" />
</p>
![](images/bicbucstriim/calibre_barre_outils.png)
Choisissez un dossier ou créez-en un et choisissez l'option
*Créer une bibliothèque vide à cet emplacement*.
<p class="text-center">
<img src="images/bicbucstriim/calibre_creer_bibliotheque.png" alt="" />
</p>
![](images/bicbucstriim/calibre_creer_bibliotheque.png)
Si vous souhaitez utiliser la bibliothèque que vous avez créée à la
première utilisation de Calibre, le dossier des <span lang="en">ebooks</span>
se trouve à l’emplacement que vous avez choisi lors de la première
utilisation (on peut le retrouver dans *Préférences* > *Démarrer l'Assistant de bienvenue*).
<p class="test-center">
<img class="ombre" src="images/bicbucstriim/calibre-assistant.jpg" alt="" />
</p>
![](images/bicbucstriim/calibre-assistant.jpg)
Ajoutez ensuite l’ensemble des ouvrages que vous voulez publier dans
votre catalogue et fusionnez les doublons si vos ouvrages existent dans
......@@ -68,15 +60,11 @@ plusieurs formats (sélectionnez les doublons puis clic-droit
*Modifier les métadonnées* > *Fusionner les enregistrements de livres* >
*Fusionner seulement les formats dans le premier livre sélectionné - supprimer les autres* (ou `Alt+Shift+M`)).
<p class="text-center">
<img class="ombre" src="images/bicbucstriim/calibre-catalogue.jpg" alt="" />
</p>
![](images/bicbucstriim/calibre-catalogue.jpg)
### 2 - Semer
<p class="text-center">
<img src="images/icons/semer.png" alt="" />
</p>
![](images/icons/semer.png)
Une fois le catalogue prêt, téléchargez la dernière version du logiciel BicBucStriim sur le
[dépôt Github officiel][4] (liens .zip ou .tar.gz).
......@@ -93,18 +81,14 @@ Exemple : `/var/www/votre-site.org/calibre/`
Pour consulter l'interface mobile, il suffit de vous rendre sur `http://votre-site.org/bbs/`.
Le flux <abbr>OPDS</abbr> se trouve sur `http://votre-site.org/bbs/opds/`
<p class="text-center">
<img class="ombre" src="images/bicbucstriim/bicbucstriim.jpg" alt="" />
</p>
![](images/bicbucstriim/bicbucstriim.jpg)
Pour finir, juste une remarque : lorsque vous mettez à jour le catalogue
Calibre, les aperçus des livres peuvent être mal attribués ou cassés.
Pour les recréer, il suffit de supprimer les fichiers `thumb_*.png`
du dossier `bbs/data/titles/`.
<p class="text-center"">
<i class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></i>
</p>
<i class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></i>
[1]: http://framabookin.org
[2]: http://www.bibebook.com/
......
# Installation de Framadate
<p class="text-center">
<img src="images/framadate/logo-framadate.png" alt="" />
</p>
![](images/framadate/logo-framadate.png)
[Framadate][1] est le logiciel de création de sondages que nous
développons et proposons comme service en ligne.
Il est initialement basé sur le logiciel Studs développé par
l’université de Strasbourg et que nous avons largement remanié.
<p class="text-center">
<img src="images/framadate/framadate.png" alt="" class="ombre" />
</p>
![](images/framadate/framadate.png)
Voici un tutoriel pour vous aider à l’installer sur votre serveur.
......@@ -30,9 +26,7 @@ Voici un tutoriel pour vous aider à l’installer sur votre serveur.
### 1 - Préparer la terre
<p class="text-center">
<img src="images/icons/preparer.png" alt="" />
</p>
![](images/icons/preparer.png)
Tout d’abord, connectez-vous en tant que `root` sur votre serveur et
créez un compte utilisateur `framadate` ainsi que le dossier `/var/www/framadate`
......@@ -45,9 +39,7 @@ dans lequel seront copiés les fichiers avec les droits d’accès correspondant
### 2 - Semer
<p class="text-center">
<img src="images/icons/semer.png" alt="" />
</p>
![](images/icons/semer.png)
Connectez-vous avec l’utilisateur `framadate` : `su framadate -s /bin/bash`
......@@ -71,15 +63,11 @@ et importez les librairies nécessaires
./composer.phar install
<p class="text-center">
<img src="images/framadate/composer.png" alt="" class="ombre" />
</p>
![](images/framadate/composer.png)
### 3 - Arroser
<p class="text-center">
<img src="images/icons/arroser.png" alt="" />
</p>
![](images/icons/arroser.png)
#### MySQL
......@@ -104,9 +92,7 @@ Une fois créée, cliquez sur « Privilèges » et « Créer un utilisateur ».
Remplissez les champs Serveur `localhost`, Utilisateur `framadate`,
Mot de passe, Privilèges `` `framadate`.* `` et cochez la case `All privileges`.
<p class="text-center">
<img src="images/framadate/framadate-adminer.gif" alt="" class="ombre" />
</p>
![](images/framadate/framadate-adminer.gif)
Par sécurité, vous pouvez supprimer le fichier `adminer.php` qui n’est plus nécessaire.
......@@ -126,9 +112,7 @@ et le mot de passe tel que vous l’avez défini à l'étape précédente.
suffisant.
</p>
<p class="text-center">
<img src="images/framadate/framadate-install.png" alt="" class="ombre" />
</p>
![](images/framadate/framadate-install.png)
À l’installation, les tables de la base de données et le fichier
`app/inc/config.php` sont créés.
......@@ -140,9 +124,7 @@ contrôler que les tables et données sont dans le bon format.
Pour les mises à jour ultérieures, il faudra passer par cette page après
remplacement des fichiers.
<p class="text-center">
<img src="images/framadate/framadate-migration.png" alt="" class="ombre" />
</p>
![](images/framadate/framadate-migration.png)
#### Espace admin
......@@ -187,9 +169,7 @@ le fichier `/var/www/framadate/htaccess.txt` en `/var/www/framadate/.htaccess`
Et voilà ! Normalement, ça pousse tout seul ;)
<p class="text-center">
<i class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></i>
</p>
<i class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></i>
<p class="alert alert-info">
<span class="label label-primary">Informations</span><br /> En complément,
......
......@@ -10,9 +10,7 @@ En pratique, Framaestro n’enregistre aucune donnée sur nos serveurs (à part
## Installation
<p class="text-center">
<img src="images/icons/bonzai.png" alt="" />
</p>
![](images/icons/bonzai.png)
Framaestro est donc comme un bonsaï : on le pose quelque part et il pousse tout seul. L’installation sur un serveur est extrêmement simple puisqu’il ne stocke rien en ligne et n’est constitué que de CSS, HTML et JavaScript.
......@@ -24,9 +22,7 @@ Pour utiliser le logiciel, il suffit de vous rendre sur `http://votre-site.org/f
## Tailler
<p class="text-center">
<img src="images/icons/tailler.png" alt="" />
</p>
![](images/icons/tailler.png)
### Framanav
......@@ -248,9 +244,7 @@ Une fois les certificats créés, dé-commentez les lignes `listen […] 443 ssl
Voilà normalement le hub est fonctionnel et vous pouvez remplacer l’url dans le fichier `config.js` de Framaestro.
<p class="text-center">
<i class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></i>
</p>
<i class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></i>
[1]: https://framaestro.org
[2]: images/framaestro/slide-framaestro02.jpg
......
......@@ -6,18 +6,14 @@ On ne présente plus [Gitlab][1] aux barbus qui font du développement...
l'alternative la plus populaire à github pour gérer le versionnement de
son code via un site web, que nous utilisons pour… [Framagit][2] (surprise !).
<p class="text-center">
<img src="images/gitlab/framagit-screenshot.png" alt="" class="ombre" />
</p>
![](images/gitlab/framagit-screenshot.png)
[Mattermost][3] est un logiciel de chat en groupe, alternative au service
privateur Slack. Voyez-le comme une alternative plus moderne à IRC :
on peut y créer des groupes de discussion facilement, en y incluant des médias.
Du coup, nous nous appuyons sur celui-ci pour offrir [Framateam][4].
<p class="text-center">
<img src="images/gitlab/mattermost-framateam-screen.png" alt="" class="ombre" />
</p>
![](images/gitlab/mattermost-framateam-screen.png)
[Depuis Août 2015 et la version 7.22][5], Gitlab intègre directement
Mattermost dans ses versions. Nous allons pouvoir faire d'une pierre deux coups !
......@@ -58,9 +54,7 @@ En option, vous pourriez avoir besoin :
### 1 - Préparer la terre
<p class="text-center">
<img src="images/icons/preparer.png" alt="" />
</p>
![](images/icons/preparer.png)
Commençons par installer l'indispensable (certains packages devraient
être installés par défaut, mais rien ne coûte de vérifier) :
......@@ -93,9 +87,7 @@ Vous devriez avoir une réponse de ce genre:
### 2 - Semer
<p class="text-center">
<img src="images/icons/semer.png" alt="" />
</p>
![](images/icons/semer.png)
Passons aux choses sérieuses avec l'installation :
......@@ -283,9 +275,7 @@ Ouf ! Ça en fait des choses à configurer. :-)
### 3 - Arroser
<p class="text-center">
<img src="images/icons/arroser.png" alt="" />
</p>
![](images/icons/arroser.png)
#### Un petit mot à propos de gitlab-ctl
......@@ -318,9 +308,7 @@ les sources de paquets celui de gitlab. Il est donc très simple de mettre
### 4 - Pailler
<p class="text-center">
<img src="images/icons/pailler.png" alt="" />
</p>
![](images/icons/pailler.png)
#### IPv6
......@@ -432,10 +420,9 @@ URL de la forme suivante :
http://127.0.0.1:4242/<github_username>/<github_repo>
<p class="text-center">
<img src="images/gitlab/framagit-webhookmenu.png" alt="" class="ombre" /><br>
<img src="images/gitlab/framagit-webhookfield.png" alt="" class="ombre" />
</p>
![](images/gitlab/framagit-webhookmenu.png)
![](images/gitlab/framagit-webhookfield.png)
#### Recherches sur giphy depuis Mattermost
......@@ -493,10 +480,9 @@ Jetez tout d'abord un œil à la [documentation Mattermost sur les slash command
Il faut créer avec un compte administrateur la slash command.
Clic sur le nom d'équipe (coin haut gauche), puis "Integrations" et "Slash commands"
<p class="text-center">
<img src="images/gitlab/mattermost-integrationsmenu.png" alt="" class="ombre" /><br>
<img src="images/gitlab/mattermost-slashcommandsmenu.png" alt="" class="ombre" />
</p>
![](images/gitlab/mattermost-integrationsmenu.png)
![](images/gitlab/mattermost-slashcommandsmenu.png)
Créez ensuite votre commande slash en renseignant l'URL de l'installation
(par exemple https://giphy.example.org), puis laissez par défaut la
......
......@@ -3,9 +3,7 @@
[Kanboard][1] est le logiciel de gestion de projets que nous proposons
sur [framaboard.org][2]. Voici un tutoriel pour l’installer sur votre serveur.
<p class="text-center">
<img src="images/kanboard/framaboard.png" alt="" />
</p>
![](images/kanboard/framaboard.png)
<div class="alert alert-info">
Nous considérerons dans la suite de ce tutoriel que vous disposez d’un
......@@ -28,9 +26,7 @@ pour fonctionner correctement (ou vous assurer qu’ils le sont) :
### Semer
<p class="text-center">
<img src="images/icons/semer.png" alt="" />
</p>
![](images/icons/semer.png)
Téléchargez la dernière version de Kanboard sur [kanboard.net/downloads][3]
(le lien « Stable version »).
......@@ -42,9 +38,7 @@ est accessible en écriture par le serveur web.
### Tailler et désherber
<p class="text-center">
<img src="images/icons/tailler.png" alt="" />
</p>
![](images/icons/tailler.png)
Par défaut, les identifiants sont `admin` / `admin` :
il n’est pas recommandé de les laisser tels quels !
......@@ -52,9 +46,7 @@ Une fois connecté, rendez-vous dans « Gestion des utilisateurs > admin > Chan
Vous pouvez aussi changer le nom d’utilisateur en allant sur « Modifier le profil ».
Vous pouvez désormais commencer à utiliser Kanboard !
<p class="text-center">
<i class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></i>
</p>
<i class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></i>
[1]: http://kanboard.net/
[2]: http://framaboard.org
......
# Installation de Loomio
<p class="text-center">
<img src="images/loomio/logo.png" alt="" />
</p>
![](images/loomio/logo.png)
[Loomio][1] est le logiciel de prise de décision collective que nous
proposons comme service en ligne sur [Framavox][2].
<p class="text-center">
<img src="images/loomio/loomio.png" alt="" class="ombre" />
</p>
![](images/loomio/loomio.png)
Voici un tutoriel pour vous aider à l’installer sur votre serveur.
Il s’appuie sur [la procédure officielle][3].
......@@ -24,9 +20,7 @@ Il s’appuie sur [la procédure officielle][3].
### 1 - Préparer la terre
<p class="text-center">
<img src="images/icons/preparer.png" alt="" />
</p>
![](images/icons/preparer.png)
#### DNS
......@@ -54,9 +48,7 @@ Docker et Docker Compose.
### 2 - Semer
<p class="text-center">
<img src="images/loomio/semer.png" alt="" />
</p>
![](images/loomio/semer.png)
Depuis le dossier `/root`, téléchargez les fichiers du dépôt officiel pour un déploiement *en production*.
......@@ -182,9 +174,7 @@ reste actif après un redémarrage du serveur, vous pouvez créer
### 3 - Arroser
<p class="text-center">
<img src="images/loomio/arroser.png" alt="" />
</p>
![](images/loomio/arroser.png)
#### PostgreSQL
......@@ -220,9 +210,7 @@ Voici une liste de tâches à effectuer pour s’assurer que tout fonctionne bie
### 4 - Pailler
<p class="text-center">
<img src="images/icons/pailler.png" alt="" />
</p>
![](images/icons/pailler.png)
#### Personnalisation
......@@ -238,9 +226,7 @@ et d’ajouter le dossier à la liste des « volumes » dans `docker-compose.yml
La redirection se fera ainsi sur `votre-domaine.org/marketing`
et vous pourrez en personnaliser le contenu.
<p class="text-center">
<img src="images/loomio/loomio_org.jpg" alt="" class="ombre" />
</p>
![](images/loomio/loomio_org.jpg)
Vous pouvez ensuite vous inspirer de [ce que nous avons fait pour Framavox][6].
Nous avons créé un dossier `framavox/template` dans lequel se trouvent
......@@ -281,9 +267,7 @@ au fichier `env`, pensez à supprimer proprement les containers
* `docker-compose pull` pour mettre à jour tous les containers
(après un `docker-compose down`)
<p class="text-center">
<i class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></i>
</p>
<i class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></i>
[1]: http://framadate.org
[2]: https://framavox.org
......
......@@ -2,9 +2,7 @@
[<abbr>LSTU</abbr>][1] est le logiciel raccourcisseur d’<abbr>URL</abbr> que nous proposons sur [Frama.link][2]/[Huit.re][3].
<p class="text-center">
<img class="ombre" src="images/lstu/framalink.jpg" alt="" />
</p>
![](images/lstu/framalink.jpg)
Voici un tutoriel pour vous aider à l’installer sur votre serveur.
......@@ -27,9 +25,7 @@ nécessaire d’installer Carton, un gestionnaire de modules Perl.
### 1 - Préparer la terre
<p class="text-center">
<img src="images/icons/preparer.png" alt="" />
</p>
![](images/icons/preparer.png)
Tout d’abord, connectez-vous en tant que `root` sur votre serveur et
créez un compte utilisateur `lstu`.
......@@ -41,9 +37,7 @@ créez un compte utilisateur `lstu`.
### 2 - Semer
<p class="text-center">
<img src="images/icons/semer.png" alt="" />
</p>
![](images/icons/semer.png)
Téléchargez les fichiers de la dernière version sur le [dépôt officiel][4]
(« Download zip » en haut à droite ou bien en ligne de commande avec `git`),
......@@ -54,9 +48,7 @@ des fichiers à l’utilisateur `lstu`
git clone https://framagit.org/luc/lstu.git
chown lstu:lstu -R /var/www/lstu
<p class="text-center">
<img class="ombre" src="images/lstu/lstu-fichiers.jpg" alt="" />
</p>
![](images/lstu/lstu-fichiers.jpg)
Connectez-vous avec l’utilisateur `lstu` : `su lstu -s /bin/bash`
et lancez la commande d’installation des dépendances depuis le
......@@ -106,18 +98,14 @@ le chemin préconisé par ce tutoriel)
### 4 - Pailler
<p class="text-center">
<img src="images/icons/pailler.png" alt="" />
</p>
![](images/icons/pailler.png)
À ce stade, si tout s’est bien passé, lorsque vous exécutez la commande
`service lstu start`, <abbr>LSTU</abbr> est pleinement fonctionnel.
Vous n’avez qu’à vous rendre sur l’<abbr>URL</abbr>`http://127.0.0.1:8080`
pour pouvoir l’utiliser.
<p class="text-center">
<img class="ombre" src="images/lstu/lstu-web.jpg" alt="" />
</p>
![](images/lstu/lstu-web.jpg)
Nous allons maintenant configurer <abbr>LSTU</abbr> pour le rendre
accessible depuis un nom de domaine avec Nginx (vous pouvez également
......@@ -170,9 +158,7 @@ Enfin, relancez Nginx : `service restart nginx`
### 5 - Tailler et désherber
<p class="text-center">
<img src="images/icons/tailler.png" alt="" />
</p>
![](images/icons/tailler.png)
La personnalisation de votre instance de <abbr>LSTU</abbr> passe par
l’édition à la main des fichiers du dossier `templates` ou `public`
......@@ -190,9 +176,7 @@ passer par Nginx pendant votre développement :
carton exec morbo script/lstu --listen=http://127.0.0.1:8080
<p class="text-center">
<i class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></i>
</p>
<i class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></i>
[1]: https://lstu.fr
[2]: https://frama.link
......
......@@ -33,9 +33,7 @@ Lufi est codé en Perl, pour le faire fonctionner il est nécessaire d’install
### 1 - Préparer la terre
<p class="text-center">
<img src="images/icons/preparer.png" alt="" />
</p>
![](images/icons/preparer.png)
Tout d’abord, connectez-vous en tant que `root` sur votre serveur et
créez un compte utilisateur `lufi` ainsi que le dossier `/var/www/lufi`
......@@ -48,9 +46,7 @@ dans lequel seront copiés les fichiers avec les droits d’accès correspondant
### 2 - Semer
<p class="text-center">
<img src="images/icons/semer.png" alt="" />
</p>
![](images/icons/semer.png)
Téléchargez les fichiers de la dernière version sur le [dépôt officiel][3]
(« Download zip » en bas à droite ou bien en ligne de commande avec `git`),
......@@ -130,9 +126,7 @@ Et qu'il le lance à chaque démarrage
### 4 - Pailler
<p class="text-center">
<img src="images/icons/pailler.png" alt="" />
</p>
![](images/icons/pailler.png)
À ce stade, si tout s’est bien passé, lorsque vous exécutez la commande
`service lufi start`, Lufi est pleinement fonctionnel.
......@@ -201,9 +195,7 @@ Enfin, relancez nginx :
### 5 - Tailler et désherber
<p class="text-center">
<img src="images/icons/tailler.png" alt="" />
</p>
![](images/icons/tailler.png)
Pour personnaliser votre instance de Lufi, il faut lancer la commande
`carton exec script/lufi theme votre-theme`, ce qui créera un nouveau
......
# Installation de Lutim
<p class="text-center">
<img src="images/lutim/lutim.jpg" alt="" />
</p>
![](images/lutim/lutim.jpg)
[Lutim][1] est le logiciel d’hébergement d’image que nous proposons sur [Framapic][2].
<p class="text-center">
<img src="images/lutim/framapic.jpg" class="ombre" alt="" />
</p>
![](images/lutim/framapic.jpg)
Voici un tutoriel pour vous aider à l’installer sur votre serveur.
......@@ -36,9 +32,7 @@ d’installer le logiciel ImageMagick et le module Perl qui correspond.
### 1 - Préparer la terre
<p class="text-center">
<img src="images/icons/preparer.png" alt="" />
</p>
![](images/icons/preparer.png)
Tout d’abord, connectez-vous en tant que `root` sur votre serveur et
créez un compte utilisateur `lutim` ainsi que le dossier `/var/www/lutim`
......@@ -51,9 +45,7 @@ dans lequel seront copiés les fichiers avec les droits d’accès correspondant
### 2 - Semer
<p class="text-center">
<img src="images/icons/semer.png" alt="" />
</p>
![](images/icons/semer.png)
Téléchargez les fichiers de la dernière version sur le [dépôt officiel][3]
(« Download zip » en bas à droite ou bien en ligne de commande avec `git`),
......@@ -64,9 +56,7 @@ les droits des fichiers à l’utilisateur `lutim`
git clone https://framagit.org/luc/lutim.git
chown lutim:lutim -R /var/www/lutim
<p class="text-center">
<img src="images/lutim/lutim-fichiers.jpg" class="ombre" alt="" />
</p>
![](images/lutim/lutim-fichiers.jpg)
Connectez-vous avec l’utilisateur `lutim` : `su lutim -s /bin/bash`
et lancez la commande d’installation des dépendances depuis le dossier `/var/www/lutim`
......@@ -115,17 +105,13 @@ d’installation de notre Lutim
### 4 - Pailler
<p class="text-center">
<img src="images/icons/pailler.png" alt="" />
</p>
![](images/icons/pailler.png)