portail/site/index.html
2019-08-24 17:12:05 +08:00

424 lines
24 KiB
HTML

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Les Crapauds fous</title>
<meta name="description" content="La Fable Moderne d'un Monde Libre et juste un peu Fou">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="HandheldFriendly" content="True">
<meta name="twitter:title" content="Les Crapauds fous">
<meta name="twitter:domain" content="crapaud-fou.org">
<meta name="twitter:description" content="La Fable Moderne d'un Monde Libre et juste un peu Fou">
<meta property="og:locale" content="fr_FR">
<meta property="og:type" content="article">
<meta property="og:title" content="Les Crapauds fous">
<meta property="og:description" content="La Fable Moderne d'un Monde Libre et juste un peu Fou">
<meta property="og:url" content="https://crapaud-fou.org/index.html">
<meta property="og:site_name" content="Les Crapauds Fous">
<meta property="og:image" content="images/crapaud_fou_sourire.jpg">
<meta property="og:video" content="https://www.youtube.com/embed/ZV4zuepujSc">
<link rel="canonical" href="https://crapaud-fou.org/">
<link rel="shortcut icon" href="images/crapovecto_small.svg">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#50ac45">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="crapaud-fou.css" type="text/css">
</head>
<body>
<div class="container-fluid p-0 header">
<div class="container">
<div class="row pt-2 pb-2">
<div class="col-12">
<img src="images/crapovecto_small.svg" height="64" class="float-left" />
La mare des crapauds fous est un lieu de rencontre et de collaboration sur des sujets divers comme: écologie réelle, neurodiversité, éducation alternative, dégafamisation, logiciel libre, végétalisation urbaine, intelligence collective, parentalité responsable, monnaies libres, gouvernances partagées, open hardware, lutte contre l'obsolecense, permaculture, santé raisonnée, inclusion sociale, et beaucoup d'autres sujets.
</div>
</div>
</div>
</div>
<div class="container-fluid entete pt-2 pb-2 mb-3">
<div class="container">
<div class="row">
<div class="col-12 col-md-8 col-lg-4">
<h2 class="card-title mt-0">Les crapauds fous</h4>
<p>Face aux dangers qui pèsent sur notre avenir, seul un grain de folie peut nous sortir de l'ornière (et de la déprime passive).</p>
<p>En avril 2017, une trentaine de personnes se reunissent aux Treilles et donnent naissance au manifeste des Crapauds Fous.</p>
</div>
<div class="col-12 col-md-4 col-lg-3">
<h2 class="d-sm-none d-xs-none d-md-block">&nbsp;</h2>
<ul>
<li><a href="https://crapaud-fou.org/manifeste_du_crapaud/">Le manifeste</a></li>
<li><a href="https://crapaud-fou.org/treilles_cr/">Compte Rendu des Treilles</a></li>
<li><a href="https://crapaud-fou.org/principes_crapaud/">Les principes</a></li>
<li><a href="https://crapaud-fou.org/cercles/">9 cercles de reflexion</a></li>
<li><a href="https://framalistes.org/sympa/info/crapauds-fous">la liste de diffusion</a></li>
<li><a href="https://crapaud-fou.org/news/2017-10-12-le_bouquin/">Le manifeste en librairie</a></li>
</ul>
</div>
<div class="col-12 col-lg-5 align-middle">
<div class="embed-responsive embed-responsive-16by9">
<iframe width="420" height="240" sandbox="allow-same-origin allow-scripts" src="https://thinkerview.video/videos/embed/5417c4b5-38ce-4e69-bbc7-19335ade44e4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4 mb-4">
<div class="card idees">
<div class="card-body">
<div class="link">
<h5 class="card-title text-center">
Avoir des idées ...<br>
<a href="https://idees.crapaud-fou.org" class="badge badge-success stretched-link">https://idees.crapaud-fou.org</a>
</h5>
<p>Les idées folles ne sont que des rêves tant qu'on ne les explique pas. Notre boite à idées part du principe qu'il n'y a pas d'idée stupide.</p>
</div>
<div class="row mb-3">
<div class="col stats">
<div class="stats-title">Depuis novembre 2017</div>
<div class="total">
<div title="Nombre de comptes ouverts"><span class="nombre crapauds">0</span> crapauds</div>
<div title="Nombre d'idées proposées"><span class="nombre idees">0</span> idées</div>
<div title="Nombre de commentaires sur les idées proposées"><span class="nombre commentaires">0</span> commentaires</div>
</div>
</div>
<div class="col stats">
<div class="stats-title">30 derniers jours</div>
<div class="recent">
<div title="Nombre d'utilisateurs s'étant connecté au moins une fois"><span class="nombre crapauds">0</span> crapauds actifs</div>
<div title="Nombre d'idées récentes"><span class="nombre idees">0</span> nouvelles idées</div>
<div title="Nombre de nouveaux commentaires"><span class="nombre commentaires">0</span> commentaires</div>
</div>
</div>
</div>
<div>
<div>Les dernières idées ajoutées</div>
<div>
<ul>
</ul>
</div>
</div>
<div>
<button type="button" class="btn btn-outline-primary btn-outline btn-block" data-toggle="modal" data-target="#helpid">Comment proposer une idée</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-4">
<div class="card chat">
<div class="card-body">
<div class="link">
<h5 class="card-title text-center">
... en discuter ...<br>
<a href="https://coa.crapaud-fou.org" class="badge badge-success stretched-link">https://coa.crapaud-fou.org</a>
</h5>
<p>Cet espace de discussion en temps réel est un vrai espace social, pour débattre et partager. C'est là qu'on trouve la force du lien avec les autres crapauds.</p>
</div>
<div class="row mb-3">
<div class="col stats">
<div class="stats-title">Depuis novembre 2017</div>
<div class="total">
<div><span class="nombre crapauds">0</span> crapauds</div>
<div><span class="nombre canaux">0</span> canaux</div>
<div><span class="nombre messages">0</span> messages</div>
</div>
</div>
<div class="col stats">
<div class="stats-title">30 derniers jours</div>
<div class="recent">
<div><span class="nombre crapauds">0</span> crapauds actifs</div>
<div><span class="nombre canaux">0</span> canaux actifs</div>
<div><span class="nombre messages">0</span> messages</div>
</div>
</div>
</div>
<div>
<div>Canaux les plus actifs sur 30 jours</div>
<div>
<ul class="list">
</ul>
</div>
</div>
<div>
<button type="button" class="btn btn-outline-primary btn-outline btn-block" data-toggle="modal" data-target="#helpchat">Les premiers pas dans le Chat</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-4">
<div class="card wiki">
<div class="card-body">
<div class="link">
<h5 class="card-title text-center">
... et agir!<br>
<a href="https://wiki.crapaud-fou.org" class="badge badge-success stretched-link">https://wiki.crapaud-fou.org</a>
</h5>
<p>Le wiki permet de formaliser des plans d'action mais aussi et surtout de partager les méthodes pour que tout le monde puisse en profiter.</p>
</div>
<div class="row mb-3">
<div class="col stats">
<div class="stats-title">Depuis mars 2018</div>
<div class="total">
<div><span class="nombre crapauds">0</span> crapauds</div>
<div><span class="nombre pages">0</span> pages</div>
<div><span class="nombre photos">0</span> photos</div>
</div>
</div>
<div class="col stats">
<div class="stats-title">30 derniers jours</div>
<div class="recent">
<div><span class="nombre crapauds">0</span> crapauds actifs</div>
<div><span class="nombre pages">0</span> pages modifiées</div>
<div><span class="nombre photos">0</span> nouvelles photos</div>
</div>
</div>
</div>
<div>
<div>Les dernières pages modifiées</div>
<ul>
</ul>
</div>
<div>
<button type="button" class="btn btn-outline-primary btn-outline btn-block" data-toggle="modal" data-target="#helpwiki">Mode d'emploi du wiki</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-4">
<div class="card">
<img src="images/cohortes.jpg" class="card-img-top" alt="">
<div class="card-body">
<h4>Cohortes de crapauds fous</h4>
<p>Les cohortes de crapauds sont des regroupements locaux, pour se voir dans la vraie vie.</p>
<p>Suivez leur activité sur la <a href="https://wiki.crapaud-fou.org/Cohortes">page wiki des cohortes</a> ou rejoignez-les sur leurs canaux de discussion:</p>
<p class="cohortes">
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-4">
<div class="card">
<img src="images/rencontres.jpg" class="card-img-top" alt="Rencontre des Treilles, avril 2017">
<div class="card-body">
<h4>Rencontres et evenements</h4>
<p>Les crapauds participent parfois à des évènements, des rencontres ou des conférences.</p>
<p>Rencontres a venir:</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-4">
<div class="card tube">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="lastvideo" width="348" height="196" sandbox="allow-same-origin allow-scripts" src="" frameborder="0" allowfullscreen></iframe>
</div>
<div class="card-body">
<div class="link">
<h5 class="card-title text-center">
Reportages et videos<br>
<a href="https://tube.crapaud-fou.org" class="badge badge-success stretched-link">https://tube.crapaud-fou.org</a>
</h5>
<p>Le serveur peertube des crapauds fous, avec divers reportages et videos, plutot bruts.</p>
</div>
<ul>
</ul>
<div>
<button type="button" class="btn btn-outline-primary btn-outline btn-block" data-toggle="modal" data-target="#helptube">A propos de Cratube</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="helpid" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Comment proposer une idée</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-warning clearfix">
Le <b><a href="https://idees.crapaud-fou.org">forum des idées</a></b> permet de partager des projets, des points de vue, des questions, sans forcément vouloir plonger directement dans la mare et son bouillonement.
</div>
<div class="alert alert-secondary clearfix">
<img src="images/idees-connexion.png" alt="panneau de connexion" class="float-left mr-5">
<p>Pour poster une nouvelle idée, vous devrez d'abord créer un compte (ce compte est distinct de celui des autres espaces comme le chat ou le wiki). Cliquez sur le bouton "Inscription" dans la boite de dialogue "Connexion".</p>
<p>Vous aurez à fournir un nom, une adresse email (utilisée pour vous envoyer des notifications si votre idée suscite des réactions) et un mot de passe.</p>
</div>
<div class="alert alert-secondary clearfix">
<img src="images/idees-proposer.png" alt="proposer une idee" class="mb-2">
<p>Ensuite cliquez en haut sur "Proposer une idée". Choisissez
<ul>
<li>un titre (court si possible),</li>
<li>une categorie (optionnellement)</li>
<li>et détaillez l'idée ou la question aussi precisemment que possible.</li>
</ul>
Il est toujours de bon ton d'ajouter les url des choses que vous citez, si vous incluez des références.<p>
<p>Dans les mots-clés, le premier mot-clé est supposé être un type: suggestion, action, idee ou information. Vous pouvez ajouter d'autres mots clé mais il est toujours plus efficace de choisir des <a href="https://idees.crapaud-fou.org/tags">mots-clés qui existent deja</a>. A noter que les <a href="https://wiki.crapaud-fou.org/jardiniers">jardiniers</a> pourront être amenés a reclassifier vos mots-clé pour des raisons de consistence avec le reste des questions.</p>
</div>
<div class="alert alert-secondary clearfix">
<img src="images/idees-vote.png" alt="vote sur idees" class="float-left mr-5">
<p>Quand vous êtes connecté vous pouvez du coup voter pour ou contre les idées proposées par les autres, mais aussi proposer des réponses ou ajouter des commentaires.</p>
</div>
<div class="alert alert-light clearfix technique text-monospace">
<h5>Note technique</h5>
<p>Le forum des idées utilise le logiciel libre <a href="https://www.question2answer.org/">question2answer</a> qui suit le modèle fonctionnel de ce qu'on peut trouver sur Stack Overflow.</p>
<p>Le serveur qui héberge le forum des idées des crapauds fous est situé dans le datacenter parisien de <a href="https://scaleway.com">Scaleway</a>, son financement est pris en charge par mose. L'administration système du serveur est assurée par mose, aidé par les autres <a href="https://wiki.crapaud-fou.org/jardiniers">plombiers</a> Trenty et 12b.</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Fermer</button>
<a href="https://idees.crapaud-fou.org/" class="btn btn-sm btn-success idees">Aller sur <b>https://idees.crapaud.fou-org</b></a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="helpchat" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Les premiers pas dans le Chat</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-warning clearfix">
Le <b><a href="https://coa.crapaud-fou.org">chat</a></b> (comme un tchate, pas comme un minou) est l'espace central de la mare des crapauds fous. On y discute en temps réel de tout et de rien (mais surtout de tout ce qui relève de la folie des crapauds).
</div>
<div class="alert alert-secondary clearfix">
<img src="images/chat-inscription.png" alt="trouver la liste des canaux" class="float-left mr-5">
<p>Pour pouvoir accéder à cet espace de discussion il va falloir, encore une fois, créer un compte. Ce compte est distinct des autres comptes ouverts sur le site des idées et le wiki. Quand votre compte aura été crée vous atterirez dans deux canaux par défaut, #accueil et #general.</p>
<p>Comme dans tout espace public, quand vous arrivez, les gens font attention à vous. Il y aura toujours quelqu'un pour vous souhaiter la bienvenue, vous demander d'où vous venez et ce qui vous intéresse. Parlez un peu de vous, c'est un endroit social, et ceux qui sont la depuis longtemps savent peut-être quels canaux correspondent à vos centres d'interêt.</p>
</div>
<div class="alert alert-secondary clearfix">
<img src="images/chat-canaux.png" alt="trouver la liste des canaux" class="float-left mr-5">
<p>Les canaux, ce sont comme des zones thématiques, on peut y entrer pour papoter, voir ce qui se disait avant qu'on arrive, partager des infos liées au thème du canal. Pour voir la <a href="https://coa.crapaud-fou.org/directory">liste des canaux disponibles</a>, il y a ce globe en haut a gauche, mais vous pouvez aussi chercher par mot-clé en utilisant la loupe qui est juste a coté.</p>
</div>
<div class="alert alert-secondary clearfix">
<img src="images/chat-compte.png" alt="trouver la liste des canaux" class="float-left mr-5">
<img src="images/chat-profil.png" alt="trouver la liste des canaux" class="mb-5"><br>
<p>Ca vaut le coup que vous preniez le temps de choisir un avatar, qui vous representera auprés des autres dans les fils de discussion. Pour ce faire, vous pouvez éditer votre compte et changer les choses dans votre profil.</p>
<p>Si vous manquez d'inspiration, regardez un peu alentours les avatars que les autres ont choisi, ca peut aider.</p>
</div>
<div class="alert alert-secondary clearfix">
<img src="images/chat-install.png" alt="trouver la liste des canaux" class="float-left mr-5">
<p>Si vous vous plaisez dans cet espace, vous voudrez peut-être <a href="https://rocket.chat/install">installer l'application RocketChat</a>, sur votre ordi ou sur mobile.</p>
<p>Sur mobile, au moment de la connexion, il suffira d'utiliser l'adresse de serveur <tt>https://coa.crapaud-fou.org</tt> et les identifiants que vous avez crées lors de l'ouverture de votre compte.</p>
</div>
<div class="alert alert-light clearfix technique text-monospace">
<h5>Note technique</h5>
<p>L'espace de discussion utilise le logiciel libre <a href="https://rocket.chat/">RocketChat</a>. A noter que les mises à jour sont automatiques (par le biais de snap), donc nous utilisons toujours la dernière version.</p>
<p>Le serveur qui héberge le chat des crapauds fous est situé dans le datacenter parisien de <a href="https://scaleway.com">Scaleway</a>, et c'est mose qui paye avec ses sous perso. L'administration système du serveur est assurée par mose, aidé par les autres <a href="https://wiki.crapaud-fou.org/jardiniers">plombiers</a> Trenty et 12b.</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Fermer</button>
<a href="https://coa.crapaud-fou.org/" class="btn btn-sm btn-success idees">Aller sur <b>https://coa.crapaud.fou-org</b></a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="helpwiki" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Mode d'emploi du Wiki</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-warning clearfix">
<p>Le <b><a href="https://wiki.crapaud-fou.org">wiki</a></b> est l'endroit où on construit l'échange et le partage du savoir, des projets, des rencontres issus de l'activité des crapauds fous.</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Fermer</button>
<a href="https://wiki.crapaud-fou.org/" class="btn btn-sm btn-success idees">Aller sur <b>https://wiki.crapaud.fou-org</b></a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="helptube" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">A propos de Cratube</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Fermer</button>
<a href="https://tube.crapaud-fou.org/" class="btn btn-sm btn-success idees">Aller sur <b>https://tube.crapaud.fou-org</b></a>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid footer mt-5">
<div class="container pt-5 pb-3">
<div class="row mb-4">
<div class="col technique">
Les crapauds fous sont une catégorie de gens qui font des pas de coté. Ce n'est pas une association, ni une organisation. La mare aux crapauds fous, que constitue l'agglomération d'outils en ligne comme le chat, les idees, le wiki, le pad, le serveur jitsi, etc, est une collection des services hébergés par des particuliers en leur nom propre. Leur contribution donne vie à un espace d'échange et de partage. Mais à aucun moment la mare des crapauds fous ne porte de projets, ni les crapauds fous en tant qu'entité. Au mieux, en tant que réseau, ils les accompagnent, les infiltrent, les influencent, les nourrissent ou les cherissent. Tous les projets cités dans la mare des crapauds fous sont portés par des individus ou des organisations indépendantes.
</div>
</div>
<div class="row">
<div class="col">
<a href="https://degooglisons-internet.org/fr/">Les crapauds fous ne sont pas sur fesse-bouc, ni sur touiteur.</a><br>
Pour contacter les jardiniers de la mare des crapauds fous: contact a crapaud-fou.org
</div>
<div class="col-2 text-right">
<a href="https://gitlab.com/crapaud-fou/portail">Fait avec les doigts</a>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="crapaud-fou.js"></script>
</body>
</html>