branches et canopee
LUXEY Adrien
|
|
@ -9,7 +9,7 @@
|
|||
## Idées graphiques
|
||||
|
||||
* Des bouts de branches et de canopée qui défilent lors du scroll, contenant des éléments de texte ou autre contenu.
|
||||
* Un header avec des onglets sur PC et un « menu-sandwich » sur le côté sur téléphone.
|
||||
* S'il faut un menu : barre d'onglets sur PC, menu « sandwich » qui révèle une colonne d'onglets sur smartphone.
|
||||
* Exploiter l'illustration au maximum. En la laissant fixée en fond de page tandis que les éléments graphiques défilent ?
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 186 KiB After Width: | Height: | Size: 186 KiB |
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 106 KiB |
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 793 KiB After Width: | Height: | Size: 793 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 217 KiB After Width: | Height: | Size: 217 KiB |
|
Before Width: | Height: | Size: 441 KiB After Width: | Height: | Size: 441 KiB |
|
Before Width: | Height: | Size: 649 KiB After Width: | Height: | Size: 649 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 137 KiB After Width: | Height: | Size: 137 KiB |
|
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 105 KiB |
|
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 105 KiB |
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 224 KiB After Width: | Height: | Size: 224 KiB |
|
Before Width: | Height: | Size: 264 KiB After Width: | Height: | Size: 264 KiB |
|
|
@ -1,132 +0,0 @@
|
|||
@import 'normalize.css';
|
||||
@import 'chota.min.css';
|
||||
|
||||
/* font-size:
|
||||
* HTML font size is 16px on most browsers, sometimes 14px.
|
||||
* Chota sets `font-size: 62.5%;`, that is 10px on most browsers.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Blanc cassé (offset autour de #main-page) */
|
||||
--bg-color: #f4f4f4;
|
||||
/* Bleu turquoise du ciel au lion */
|
||||
--bg-secondary-color: #cafaef;
|
||||
/* Gris violet du sol */
|
||||
--bg-ternary-color: #c7c9e2;
|
||||
--bg-canopee-color: #151a05;
|
||||
--color-canopee: #a0c43c;
|
||||
--bg-branche-color: #381e02;
|
||||
--color-primary: #14854F;
|
||||
--color-text-light: #fafafa;
|
||||
--color-lightGrey: #d2d6dd;
|
||||
--color-grey: #747681;
|
||||
--color-darkGrey: #3f4144;
|
||||
--color-error: #d43939;
|
||||
--color-success: #28bd14;
|
||||
/*--grid-maxWidth: 120rem;*/
|
||||
--grid-maxWidth: 100%;
|
||||
--grid-gutter: 0rem;
|
||||
--font-size: 1.6rem;
|
||||
--font-color: #333333;
|
||||
--font-family-sans: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next",
|
||||
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
|
||||
"Droid Sans", "Helvetica Neue", sans-serif;
|
||||
--font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
#main-page {
|
||||
background-color: var(--bg-secondary-color);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: 4rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#logo {
|
||||
font-size: 3.2rem;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
header>nav {
|
||||
background-color: var(--bg-canopee-color);
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
#illustration {
|
||||
background-image: url("../images/illustration-ronce_800x510px.png");
|
||||
height: 100%;
|
||||
/* Create the parallax scrolling effect */
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
@media screen and (min-width: 800px) {
|
||||
#illustration {
|
||||
background-image: url("../images/illustration-ronce_1200x765px.png");
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1200px) {
|
||||
#illustration {
|
||||
background-image: url("../images/illustration-ronce_2400x1531px.png");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
section div {
|
||||
padding-left: 4rem;
|
||||
padding-right: 4rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
section p {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
section .canopee {
|
||||
background-color: var(--bg-canopee-color);
|
||||
color: var(--color-canopee);
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
section .canopee.left {
|
||||
margin-left: 0;
|
||||
padding-left: 6rem;
|
||||
border-top-right-radius: 3rem;
|
||||
border-bottom-right-radius: 3rem;
|
||||
}
|
||||
section .canopee.right {
|
||||
margin-right: 0;
|
||||
border-top-left-radius: 3rem;
|
||||
border-bottom-left-radius: 3rem;
|
||||
}
|
||||
|
||||
section .canopee p {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
section .branche {
|
||||
background-color: var(--bg-branche-color);
|
||||
color: var(--color-text-light);
|
||||
padding-bottom: 4rem;
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
section .branche p {
|
||||
font-size: 2.6rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 4rem;
|
||||
border-top: 1px solid var(--bg-color);
|
||||
}
|
||||
|
|
@ -8,9 +8,7 @@
|
|||
|
||||
<title>Deuxfleurs</title>
|
||||
|
||||
<!--<link rel="stylesheet" href="assets/css/chota.min.css">-->
|
||||
<link rel="stylesheet" href="assets/css/deuxfleurs-chato.css">
|
||||
<!--<link rel="stylesheet" href="assets/css/mini-default.min.css">-->
|
||||
<link rel="stylesheet" href="assets/css/branches-et-canopee.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
Before Width: | Height: | Size: 3.8 MiB After Width: | Height: | Size: 3.8 MiB |
|
Before Width: | Height: | Size: 1017 KiB After Width: | Height: | Size: 1017 KiB |
|
|
@ -1,122 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>Deuxfleurs</title>
|
||||
|
||||
<!--<link rel="stylesheet" href="assets/css/chota.min.css">-->
|
||||
<link rel="stylesheet" href="assets/css/deuxfleurs-chato-fullwidth.css">
|
||||
<!--<link rel="stylesheet" href="assets/css/mini-default.min.css">-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main-page" class="container">
|
||||
|
||||
<header>
|
||||
<nav class="nav">
|
||||
<div class="nav-left">
|
||||
<a id="logo" href="#">Deuxfleurs</a>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<div class="tabs">
|
||||
<a>Services</a>
|
||||
<a class="active">Infrastructure</a>
|
||||
<a>Logiciels</a>
|
||||
<a>Vision</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="illustration"></div>
|
||||
<!--<img src="assets/images/illustration-ronce_1200x765px.png">-->
|
||||
</header>
|
||||
|
||||
<section class="row">
|
||||
<div class="col-12">
|
||||
<h1>Bienvenue chez Deuxfleurs !</h1>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<p>
|
||||
Nous sommes une association pour<br>
|
||||
une informatique <b>écologique</b> et <b>humaine</b>,<br>
|
||||
et nous sommes en <b>colère</b>.<br>
|
||||
<small>Nous avons donc pris le maquis.</small>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="row">
|
||||
<div class="col-12-sm col-6-md">
|
||||
<h2>Nous hébergeons</h2>
|
||||
<p>
|
||||
Celles et ceux qui ont besoin d'<b>outils libres</b><br>
|
||||
pour discuter, collaborer, s'organiser, se divertir...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-2-md"></div> <!-- vertical space -->
|
||||
|
||||
<div class="canopee right col-12-sm col-4-md">
|
||||
<h2><small>Sans parasite !</small></h2>
|
||||
<p>
|
||||
Toutes nos constructions loufoques<br>
|
||||
sont garanties <b>sans ver espion</b>.<br>
|
||||
<small>Nous préférons le bon goût d'un logiciel bien fait.</small>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="row">
|
||||
<div class="canopee left col-12-sm col-4-md">
|
||||
<h2><small>Infrastructure raisonnée</small></h2>
|
||||
<p>
|
||||
On essaye d'héberger nos ordinateurs <b>à la maison</b>.<br>
|
||||
<small>Et c'est pas si facile !</small>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-2-md"></div> <!-- vertical space -->
|
||||
|
||||
<div class="col-12-sm col-6-md">
|
||||
<h2>Nous créons</h2>
|
||||
<p>
|
||||
Des logiciels pour améliorer<br>
|
||||
et <b>interconnecter nos cabanes</b>.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="row">
|
||||
<div class="col-2-md"></div> <!-- vertical space -->
|
||||
<div class="col-12-sm col-10-md">
|
||||
<h2>Nous recrutons</h2>
|
||||
|
||||
<p>
|
||||
Des bâtisseuses de cabanes ou <b>des évadés</b>...
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="branche row">
|
||||
<div class="col-3-md"></div> <!-- vertical space -->
|
||||
<div class="col-12-sm col-6-md">
|
||||
<p>... des mondes d'en bas.</p>
|
||||
</div>
|
||||
<div class="col-3-md"></div> <!-- vertical space -->
|
||||
</div> <!-- .branche -->
|
||||
</section>
|
||||
|
||||
<footer class="is-right">
|
||||
<small>Tous droits réservés à notre pangolin alcoolique.</small>
|
||||
</footer>
|
||||
|
||||
</div> <!-- #main-page -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1 +0,0 @@
|
|||
../assets
|
||||
174
ronce/README.md
|
|
@ -1,173 +1,7 @@
|
|||
Illustration Deuxfleurs
|
||||
=======================
|
||||
# Illustration de Ronce
|
||||
|
||||
Nos réflexions sur l'illustration par Ronce, plus quelques vieilleries en queue de README.
|
||||
**Ces images ne sont pas libres de droit.**
|
||||
|
||||
# Notre budget
|
||||
Janvier 2021
|
||||
|
||||
~200 euros (à préciser)
|
||||
|
||||
# Questions pratiques
|
||||
|
||||
Quel serait la license de tes illustrations ? Qu'aurions-nous le droit de faire ? de ne pas faire ? qu'est ce que tu aimerais/préferais qu'on fasse ? qu'on te prévienne avant de faire quoi ? te créditer comment ? etc. Nous ne savons pas :(
|
||||
|
||||
# Que faisons-nous ?
|
||||
|
||||
On est critique des entreprises informatiques et de leurs dérives comme le "capitalisme de surveillance".
|
||||
On souhaite créer notre internet loin des logiques des grandes entreprises, en faisant au maximum nos choix, en gardant un maximum notre autonomie : objectif pas de cloud, pas de datacenter.
|
||||
À la place, chaque personne vient contribuer à l'infrastructure avec quelques ordinateurs chez lui pour créer notre petit refuge sur internet.
|
||||
Dans ce petit refuge, on fait ensemble de l'email, des conversations, heberger des sites webs, etc. mais à notre manière.
|
||||
|
||||
# À qui nous adressons nous ?
|
||||
|
||||
> Et après la question de "a quel imaginaire faire appel" elle est jumelée à "quels points communs culturel ont les gens à qui le site s'adresse"
|
||||
|
||||
Pour l'instant, on a communiqué auprès de deux cibles :
|
||||
|
||||
**Des personnes politisées** Des personnes qui en ont marre de tout le baratin autour du numérique mais qui ont besoin d'internet comme moyen d'expression ou juste d'une adresse email car c'est nécessaire pour eux. Ces gens là sont déjà plus ou moins au fait des organisation alternatives comme les AMAP, les initiatives de la société civiles, etc. Des gens qui sont capables de comprendre le mode associatif et qui accepteront que non, c'est pas un copy cata de Google qui deviendrait d'un coup éthique et cool. C'est différent et ouai il y a des trucs qui vont être moins bien.
|
||||
|
||||
**Des libristes** C'est à dire les informaticiens politisés, en faveur du logiciel libre. Eux non plus ne sont pas nécessairement convaincus de notre approche collective : souvent ils pronent un gestion indivualiste (YUNOHOST) ou par des structures très institutionalisées. Quand bien même l'approche collective est retenue, nos choix techniques les laissent perplexes : il leur semble souvent plus judicieux de centraliser la technologie au sein d'un datacenter.
|
||||
|
||||
À mon sens, il faut axer notre communication sur les personnes politisées et laisser de côté les libristes : de toute manière ils peuvent faire leur truc dans leur coin.
|
||||
|
||||
# Quel message souhaitons-nous transmettre ?
|
||||
|
||||
> Et une série de terme sur les emotions que vous voulez dégager (confiance, classe, rustique, confortable, impressionant, etc, voilà des exemples dont certains qui vont probablement pas vous convenir)
|
||||
|
||||
Du coup je partirais bien du concept du "refuge", donc :
|
||||
- rustique, sobre : l'humain est la finalité, la technique reste un outil
|
||||
- confortable mais dans le sens cosy, on vient se réchauffer autour du feu : on prend les décisions ensembles
|
||||
|
||||
Un truc que j'aimerais bien intégrer c'est de rendre visible les infrastructures : les emails, le chat, les sites web ce sont des ordinateurs comme le votre qui sont connectés à un réseau 24/7. Arretons de les cacher dans des usines et assumons qu'on fait ça pour ensuite choisir collectivement comment on gère ça. J'ai aucune idée de comment faire ça mais c'est un peu comme si chacun venait avec son petit bagage dans le refuge et on met en commun : bagage materiel ou connaissance d'ailleurs. En gros pour le matériel qu'on met en commun c'est cette page : https://deuxfleurs.fr/Technique/Infra/
|
||||
|
||||
# Que souhaitons-nous ?
|
||||
|
||||
> Ouais bah c'est sûr que c'est cool si vous avez une idée de comment vous comptez l'utiliser (pour avoir de mon côté une idée de la compo et de la taille de visionnage)
|
||||
|
||||
Nous souhaitons une ou plusieurs illustrations pour intégrer à notre page web, particulièrement la page d'accueil, qui sera complètement refondue, et à des supports de communication.
|
||||
Nous avons pensé à des petites mascottes illustrant ce que l'on veut faire et qui pourraient se glisser partout (voir "références graphiques").
|
||||
Cependant, rien n'est arrêté et nous faisons confiance à l'expertise de notre illustrateurice :)
|
||||
|
||||
Évidemment, nous reconnaissons qu'une charte graphique, qu'un logo et qu'une personne en charge de la communication globale serait un grand plus.
|
||||
Mais nous pensons que nous n'avons pas les moyens de soutenir un tel travail à sa juste valeur.
|
||||
Nous attachons une grande importance à rémunérer correctement et professionnellement le travail de notre illustrateurice :)
|
||||
|
||||
# Des références graphiques
|
||||
|
||||
> Le côté "fait maison" ça renvoie instinctivement à un contraste avec des trucs ultra clean labellisés "corpo" dans notre culture visuelle. Et un aspect confiance plus forte dans les aspects style vie privée et tout. Par contre, un truc trop fourni et peu ergonomique, loin des habitudes de navigation, cest un blocage aussi. Du coup un truc clair mais ambiance "de bric et de broc" ça colle assez au côté AMAP tout en évitant de faire fuire par la complexité (si on veut du complexe incomprehsible dans l'informatique, y a déjà LinkindeIn, Facebook, la suite Adobe, etc huhuhu)
|
||||
|
||||
## Design végétal
|
||||
|
||||
* http://www.studiopaysan.net/
|
||||
* http://oiadeco.com/
|
||||
* Art Nouveau Font
|
||||
* [Futuracha](https://www.webdesignerdepot.com/2013/02/futuristic-typeface-echoes-art-nouveau-designs/)
|
||||
* [Decoracha](https://decoracha.holy.gd/)
|
||||
* [A cool selecta](https://thedesignest.net/art-nouveau-fonts/)
|
||||
* [Another selecta](https://hipfonts.com/art-nouveau-fonts/)
|
||||
|
||||
|
||||
## GeoCities
|
||||
|
||||
|
||||
|
||||
* [Heroic fantasy](https://www.theguardian.com/books/gallery/2017/nov/22/the-art-of-terry-pratchetts-discworld-in-pictures)
|
||||
* Cyberpunk ! [Ghost in the Shell](https://www.youtube.com/watch?v=m1bCAxHExWI), Matrix, ...
|
||||
* [NeoCities](https://neocities.org/browse) contient plein de designs bizzares/trop cool ([Big Gulp Supreme](https://biggulpsupreme.neocities.org/))
|
||||
|
||||
## Docker
|
||||
|
||||
|
||||
|
||||
Docker est une entreprise qui a lancé un logiciel à destination des informaticiens dont les concepts étaient un peu novateurs.
|
||||
Pour expliquer son fonctionnement, ils ont un personnage principal Moby la baleine et plein d'autres représentants les composants annexes.
|
||||
Ci-dessus, des [dessins de Laurel](https://bloglaurel.com/post/illustrations-for-docker./36).
|
||||
|
||||
## Contributopia
|
||||
|
||||
|
||||
|
||||
Framasoft a décidé de lancer un projet sur 3 ans pour inspirer des changements profonds dans l'informatique nommé [Contributopia](https://contributopia.org/fr/).
|
||||
Ils se sont beaucoup basés sur des illustrations sur le thème de l'aventure et de l'utopie
|
||||
|
||||
## Logiciels Fédérés
|
||||
|
||||
Ici, notre "refuge" correspondrait à une des planètes présentées : on a notre petite planète.
|
||||
Là où ça devient compliqué, c'est que notre planète, on la gère collectivement, elle est composée de plusieurs ordinateurs appartenant à des personnes différentes mais on agit selon des règles communes.
|
||||
Notre refuge/planète n'est pas complètement isolé, comme le montre ces images on peut "s'interconnecter" avec le reste du monde :)
|
||||
This is la fédération !
|
||||
|
||||
### Peertube
|
||||
|
||||
|
||||
|
||||
[PeerTube](https://joinpeertube.org/)
|
||||
|
||||
### Mastodon
|
||||
|
||||
|
||||
|
||||
|
||||
[Mastodon](https://joinmastodon.org/)
|
||||
|
||||
### Mobilizon
|
||||
|
||||
|
||||
|
||||
[Roman Photo lancement de Mobilizon](https://framablog.org/2020/10/27/roman-photo-visite-guidee-de-mobilizon/)
|
||||
|
||||
### Spritely
|
||||
|
||||
|
||||
|
||||
[Spritely](https://spritelyproject.org/)
|
||||
|
||||
|
||||
## Collectif des Hébergeurs Alternatifs, Transparents, Ouverts, Neutres et Solidaires (CHATONS)
|
||||
|
||||
Eux, ce sont les petits refuges/planètes concurrentes.
|
||||
En fait CHATONS c'est un label qui est donné à plein d'associations comme la notre.
|
||||
Pour info, nous n'avons pas encore le label parce que c'est compliqué !
|
||||
Ça nous empêche pas de regarder comment ils communiquent et de communiquer avec eux, pas besoin du label pour être une petite planète.
|
||||
|
||||
### Domaine Public
|
||||
|
||||
|
||||
|
||||
[Domaine Public](https://www.domainepublic.net/)
|
||||
|
||||
### Duchesse.chat (n'existe plus)
|
||||
|
||||
|
||||
|
||||
[Ancien CHATON nantais](https://framapiaf.org/@duchesse)
|
||||
|
||||
### Indie Hosters
|
||||
|
||||
|
||||
|
||||
### NoMagic
|
||||
|
||||
|
||||
|
||||
### Le Filament
|
||||
|
||||
|
||||
|
||||
[Le Filament](https://le-filament.com/) : j'adhère pas forcément à leur charte graphique mais ils ont l'air cool x)
|
||||
|
||||
### Tila
|
||||
|
||||
|
||||
|
||||
### Zaclys
|
||||
|
||||
|
||||
|
||||
[Zaclys](https://www.zaclys.com/) je ne suis pas fan pour le coup
|
||||
|
||||
<<<<<<< HEAD
|
||||
* [NeoCities](https://neocities.org/browse) contient plein de designs bizzares/trop cool ([Big Gulp Supreme](https://biggulpsupreme.neocities.org/))
|
||||
* Graphistes libristes : [Marie & Julien](https://mariejulien.com/)
|
||||
=======
|
||||
>>>>>>> 5e9b6111ee012d3f659cda71afceffbd5142c4c2
|
||||
La dernière version est celle qu'il faut utiliser.
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
Illustration Deuxfleurs
|
||||
=======================
|
||||
|
||||
Nos réflexions sur l'illustration par Ronce, plus quelques vieilleries en queue de README.
|
||||
|
||||
# Notre budget
|
||||
|
||||
~200 euros (à préciser)
|
||||
|
||||
# Questions pratiques
|
||||
|
||||
Quel serait la license de tes illustrations ? Qu'aurions-nous le droit de faire ? de ne pas faire ? qu'est ce que tu aimerais/préferais qu'on fasse ? qu'on te prévienne avant de faire quoi ? te créditer comment ? etc. Nous ne savons pas :(
|
||||
|
||||
# Que faisons-nous ?
|
||||
|
||||
On est critique des entreprises informatiques et de leurs dérives comme le "capitalisme de surveillance".
|
||||
On souhaite créer notre internet loin des logiques des grandes entreprises, en faisant au maximum nos choix, en gardant un maximum notre autonomie : objectif pas de cloud, pas de datacenter.
|
||||
À la place, chaque personne vient contribuer à l'infrastructure avec quelques ordinateurs chez lui pour créer notre petit refuge sur internet.
|
||||
Dans ce petit refuge, on fait ensemble de l'email, des conversations, heberger des sites webs, etc. mais à notre manière.
|
||||
|
||||
# À qui nous adressons nous ?
|
||||
|
||||
> Et après la question de "a quel imaginaire faire appel" elle est jumelée à "quels points communs culturel ont les gens à qui le site s'adresse"
|
||||
|
||||
Pour l'instant, on a communiqué auprès de deux cibles :
|
||||
|
||||
**Des personnes politisées** Des personnes qui en ont marre de tout le baratin autour du numérique mais qui ont besoin d'internet comme moyen d'expression ou juste d'une adresse email car c'est nécessaire pour eux. Ces gens là sont déjà plus ou moins au fait des organisation alternatives comme les AMAP, les initiatives de la société civiles, etc. Des gens qui sont capables de comprendre le mode associatif et qui accepteront que non, c'est pas un copy cata de Google qui deviendrait d'un coup éthique et cool. C'est différent et ouai il y a des trucs qui vont être moins bien.
|
||||
|
||||
**Des libristes** C'est à dire les informaticiens politisés, en faveur du logiciel libre. Eux non plus ne sont pas nécessairement convaincus de notre approche collective : souvent ils pronent un gestion indivualiste (YUNOHOST) ou par des structures très institutionalisées. Quand bien même l'approche collective est retenue, nos choix techniques les laissent perplexes : il leur semble souvent plus judicieux de centraliser la technologie au sein d'un datacenter.
|
||||
|
||||
À mon sens, il faut axer notre communication sur les personnes politisées et laisser de côté les libristes : de toute manière ils peuvent faire leur truc dans leur coin.
|
||||
|
||||
# Quel message souhaitons-nous transmettre ?
|
||||
|
||||
> Et une série de terme sur les emotions que vous voulez dégager (confiance, classe, rustique, confortable, impressionant, etc, voilà des exemples dont certains qui vont probablement pas vous convenir)
|
||||
|
||||
Du coup je partirais bien du concept du "refuge", donc :
|
||||
- rustique, sobre : l'humain est la finalité, la technique reste un outil
|
||||
- confortable mais dans le sens cosy, on vient se réchauffer autour du feu : on prend les décisions ensembles
|
||||
|
||||
Un truc que j'aimerais bien intégrer c'est de rendre visible les infrastructures : les emails, le chat, les sites web ce sont des ordinateurs comme le votre qui sont connectés à un réseau 24/7. Arretons de les cacher dans des usines et assumons qu'on fait ça pour ensuite choisir collectivement comment on gère ça. J'ai aucune idée de comment faire ça mais c'est un peu comme si chacun venait avec son petit bagage dans le refuge et on met en commun : bagage materiel ou connaissance d'ailleurs. En gros pour le matériel qu'on met en commun c'est cette page : https://deuxfleurs.fr/Technique/Infra/
|
||||
|
||||
# Que souhaitons-nous ?
|
||||
|
||||
> Ouais bah c'est sûr que c'est cool si vous avez une idée de comment vous comptez l'utiliser (pour avoir de mon côté une idée de la compo et de la taille de visionnage)
|
||||
|
||||
Nous souhaitons une ou plusieurs illustrations pour intégrer à notre page web, particulièrement la page d'accueil, qui sera complètement refondue, et à des supports de communication.
|
||||
Nous avons pensé à des petites mascottes illustrant ce que l'on veut faire et qui pourraient se glisser partout (voir "références graphiques").
|
||||
Cependant, rien n'est arrêté et nous faisons confiance à l'expertise de notre illustrateurice :)
|
||||
|
||||
Évidemment, nous reconnaissons qu'une charte graphique, qu'un logo et qu'une personne en charge de la communication globale serait un grand plus.
|
||||
Mais nous pensons que nous n'avons pas les moyens de soutenir un tel travail à sa juste valeur.
|
||||
Nous attachons une grande importance à rémunérer correctement et professionnellement le travail de notre illustrateurice :)
|
||||
|
||||
# Des références graphiques
|
||||
|
||||
> Le côté "fait maison" ça renvoie instinctivement à un contraste avec des trucs ultra clean labellisés "corpo" dans notre culture visuelle. Et un aspect confiance plus forte dans les aspects style vie privée et tout. Par contre, un truc trop fourni et peu ergonomique, loin des habitudes de navigation, cest un blocage aussi. Du coup un truc clair mais ambiance "de bric et de broc" ça colle assez au côté AMAP tout en évitant de faire fuire par la complexité (si on veut du complexe incomprehsible dans l'informatique, y a déjà LinkindeIn, Facebook, la suite Adobe, etc huhuhu)
|
||||
|
||||
## Design végétal
|
||||
|
||||
* http://www.studiopaysan.net/
|
||||
* http://oiadeco.com/
|
||||
* Art Nouveau Font
|
||||
* [Futuracha](https://www.webdesignerdepot.com/2013/02/futuristic-typeface-echoes-art-nouveau-designs/)
|
||||
* [Decoracha](https://decoracha.holy.gd/)
|
||||
* [A cool selecta](https://thedesignest.net/art-nouveau-fonts/)
|
||||
* [Another selecta](https://hipfonts.com/art-nouveau-fonts/)
|
||||
|
||||
|
||||
## GeoCities
|
||||
|
||||
|
||||
|
||||
* [Heroic fantasy](https://www.theguardian.com/books/gallery/2017/nov/22/the-art-of-terry-pratchetts-discworld-in-pictures)
|
||||
* Cyberpunk ! [Ghost in the Shell](https://www.youtube.com/watch?v=m1bCAxHExWI), Matrix, ...
|
||||
* [NeoCities](https://neocities.org/browse) contient plein de designs bizzares/trop cool ([Big Gulp Supreme](https://biggulpsupreme.neocities.org/))
|
||||
|
||||
## Docker
|
||||
|
||||
|
||||
|
||||
Docker est une entreprise qui a lancé un logiciel à destination des informaticiens dont les concepts étaient un peu novateurs.
|
||||
Pour expliquer son fonctionnement, ils ont un personnage principal Moby la baleine et plein d'autres représentants les composants annexes.
|
||||
Ci-dessus, des [dessins de Laurel](https://bloglaurel.com/post/illustrations-for-docker./36).
|
||||
|
||||
## Contributopia
|
||||
|
||||
|
||||
|
||||
Framasoft a décidé de lancer un projet sur 3 ans pour inspirer des changements profonds dans l'informatique nommé [Contributopia](https://contributopia.org/fr/).
|
||||
Ils se sont beaucoup basés sur des illustrations sur le thème de l'aventure et de l'utopie
|
||||
|
||||
## Logiciels Fédérés
|
||||
|
||||
Ici, notre "refuge" correspondrait à une des planètes présentées : on a notre petite planète.
|
||||
Là où ça devient compliqué, c'est que notre planète, on la gère collectivement, elle est composée de plusieurs ordinateurs appartenant à des personnes différentes mais on agit selon des règles communes.
|
||||
Notre refuge/planète n'est pas complètement isolé, comme le montre ces images on peut "s'interconnecter" avec le reste du monde :)
|
||||
This is la fédération !
|
||||
|
||||
### Peertube
|
||||
|
||||
|
||||
|
||||
[PeerTube](https://joinpeertube.org/)
|
||||
|
||||
### Mastodon
|
||||
|
||||
|
||||
|
||||
|
||||
[Mastodon](https://joinmastodon.org/)
|
||||
|
||||
### Mobilizon
|
||||
|
||||
|
||||
|
||||
[Roman Photo lancement de Mobilizon](https://framablog.org/2020/10/27/roman-photo-visite-guidee-de-mobilizon/)
|
||||
|
||||
### Spritely
|
||||
|
||||
|
||||
|
||||
[Spritely](https://spritelyproject.org/)
|
||||
|
||||
|
||||
## Collectif des Hébergeurs Alternatifs, Transparents, Ouverts, Neutres et Solidaires (CHATONS)
|
||||
|
||||
Eux, ce sont les petits refuges/planètes concurrentes.
|
||||
En fait CHATONS c'est un label qui est donné à plein d'associations comme la notre.
|
||||
Pour info, nous n'avons pas encore le label parce que c'est compliqué !
|
||||
Ça nous empêche pas de regarder comment ils communiquent et de communiquer avec eux, pas besoin du label pour être une petite planète.
|
||||
|
||||
### Domaine Public
|
||||
|
||||
|
||||
|
||||
[Domaine Public](https://www.domainepublic.net/)
|
||||
|
||||
### Duchesse.chat (n'existe plus)
|
||||
|
||||
|
||||
|
||||
[Ancien CHATON nantais](https://framapiaf.org/@duchesse)
|
||||
|
||||
### Indie Hosters
|
||||
|
||||
|
||||
|
||||
### NoMagic
|
||||
|
||||
|
||||
|
||||
### Le Filament
|
||||
|
||||
|
||||
|
||||
[Le Filament](https://le-filament.com/) : j'adhère pas forcément à leur charte graphique mais ils ont l'air cool x)
|
||||
|
||||
### Tila
|
||||
|
||||
|
||||
|
||||
### Zaclys
|
||||
|
||||
|
||||
|
||||
[Zaclys](https://www.zaclys.com/) je ne suis pas fan pour le coup
|
||||
|
||||
<<<<<<< HEAD
|
||||
* [NeoCities](https://neocities.org/browse) contient plein de designs bizzares/trop cool ([Big Gulp Supreme](https://biggulpsupreme.neocities.org/))
|
||||
* Graphistes libristes : [Marie & Julien](https://mariejulien.com/)
|
||||
=======
|
||||
>>>>>>> 5e9b6111ee012d3f659cda71afceffbd5142c4c2
|
||||