Add web content first part

7 files changed, 117 insertions, 34 deletions

diff --git a/content/services/creer-du-contenu.md b/content/services/creer-du-contenu.md
new file mode 100644
index 0000000..304a67f
--- /dev/null
+++ b/content/services/creer-du-contenu.md
@@ -0,0 +1,11 @@
+---
+title: Creer du contenu
+description: Comment creer du contenu pour votre site web
+sort_by: weight
+weight: 40
+extra:
+  parent: services/web.md
+---
+ <!-- TODO -->
+
+# Title
diff --git a/content/services/cryptpad.md b/content/services/cryptpad.md
index 2c1ae66..63c4394 100644
--- a/content/services/cryptpad.md
+++ b/content/services/cryptpad.md
@@ -12,26 +12,22 @@ extra:
 
 # Les différentes utilisation de Cryptpad
 
-
-![Mode Cryptpad](/content/services/cryptpad_mode.png)
-
-
-# Traitement de texte
+## Traitement de texte
 
 Pour du traitement de texte, dans le style de Word, Google Docs ou LibreOffice, il y a l'outil "Texte".
 L'outil permet de taper du texte mais aussi de partager le document avec d'autre utilisateurices afin de taper en simultané. 
 
 Pour du traitement de texte Markdown utilisez plutot l'outil "Code".
 
-# Formulaires
+## Formulaires
 
 Pour des sondages, des enquêtes ou toute forme de fomulaire, dans le style de Google Forms, nous vous conseillons l'outil "Formulaire" de Cryptpad. 
 
-# Gestion de projet / Listes de tâches 
+## Gestion de projet / Listes de tâches 
 
 Pour de la gestion de projet, de l'organisation de tâche et planification, Cryptpad propose un [Kaban Board](https://en.wikipedia.org/wiki/Kanban_board) via l'outil Kanban. 
 
-# Autre
+## Autre
 
 Il existe d'autre mode d'utilisation de Cryptpad que nous ne recommandons pas, soit car nous ne les utilisons pas, soit car ils sont connus pour leurs problèmes de fonctionnement comme le tableur.  
 Utilisez les à vos risques et périls !
diff --git a/content/services/initialiser-votre-acces.md b/content/services/initialiser-votre-acces.md
new file mode 100644
index 0000000..0287b13
--- /dev/null
+++ b/content/services/initialiser-votre-acces.md
@@ -0,0 +1,46 @@
+---
+title: Initialiser votre accès 
+description: Comment initialiser votre accès pour l'hébergement
+sort_by: weight
+weight: 20
+extra:
+  parent: services/web.md
+---
+De par l'utilisation de son logiciel Garage, Deuxfleurs conserve et sert les sites web en recourant au stockage objet. Pour chaque site, on a un bucket (seau en français), partageant le même nom que lui. On peut voir un bucket comme un récipient dans lequel on va mettre tout nos fichiers à publier. Créer un bucket ne prend que quelques clics depuis votre compte DeuxFleurs.
+
+# Créer un bucket pour héberger son site web
+
+* En bas de l'[interface de votre compte](https://guichet.deuxfleurs.fr), cliquez sur "Mes sites Web".
+* Cliquez sur "Nouveau site web".
+* Spécifiez le nom de domaine pour votre site (l'identifiant du site qu'on tape dans la barre URL d'un navigateur pour y accéder) :
+	* Si vous n'avez pas votre propre nom de domaine, votre site peut être rendu accessible dans un sous-domaine de `web.deuxfleurs.fr`. Dans l'onglet "Je n'ai pas de nom de domaine", entrez le sous domaine de votre choix.
+	* Si vous avez votre propre nom de domaine, entrez-le dans l'onglet "Utiliser mon propre nom de domaine". Il faudra alors [configurer votre serveur DNS pour pointer sur l'adresse d'hébergement chez DeuxFleurs](@/services/mettre-place-DNS.md).
+* Cliquez sur "Créer un nouveau site web" pour confirmer la création du bucket dans Garage.
+
+Pour copier les fichiers du site web dans le bucket et [publier le site web](@/services/publier-le-contenu.md), vous aurez besoin des clefs d'accès et des propriétés du bucket accessibles en cliquant sur "Mes identifiants".
+
+Les clefs d'accès permettent d'assurer que vous seul·e·s (ou celleux à qui vous partagez les clefs) peuvent modifier le contenu du site.
+ - L'identifiant de votre clé d'accès ressemble par exemple à `cSGcEQoInTVgkxPIzzF6IyU7C7`. Même s'il vaut mieux ne pas le crier sur tous les toits, il n'y a pas de risque de sécurité si vous le dévoilez à des gens.
+ - La clé d'accès secrète qui ressemble à `rCE6vzSVkll54FNd0Jvx7uoRsNqAXexxX1b3rm2BofquQKln6bdnDLRRli1dZbSS`, elle, comme son nom l'indique, doit absolument rester secrète. Si elle est dévoilée par accident, contactez un·e administrateur·rice immédiatement !
+
+# Du point de vue des administrateur·ice·s
+
+Pour les administrateur·ice·s, le bucket correspondant au site web apparaît comme :
+
+```
+$ sudo docker exec -ti 78e6b7e53241 /garage bucket list|grep -P 'exemple-un.fr|exemple-deux.eu'
+                                           4bdce6:exemple-un.fr                  56a0f10929f0d63d0177415a22a0b636cf1efe92845f2b00e04b91298656e78e
+  exemple-deux.eu                                                                941956ebfffa8fd564ad6b40e4bb5ac2f2b93bdbba1d1bf88fe6daff2cf4df6c
+```
+Si `exemple-un.fr` n'est pas à gauche dans la même colonne que `exemple-deux.eu`, c'est parce qu'il n'est pas réglé en global. L'administrateur·rice va corriger ça en faisant la commande suivante : 
+
+```
+garage bucket alias 56a0f10929f0d63d0177415a22a0b636cf1efe92845f2b00e04b91298656e78e exemple-un.fr
+``` 
+
+On obtient le résultat suivant :
+```
+  exemple-un.fr                                4bdce6:exemple-un.fr              56a0f10929f0d63d0177415a22a0b636cf1efe92845f2b00e04b91298656e78e
+  exemple-deux.eu                                                                941956ebfffa8fd564ad6b40e4bb5ac2f2b93bdbba1d1bf88fe6daff2cf4df6c
+```
+
diff --git a/content/services/mettre-place-DNS.md b/content/services/mettre-place-DNS.md
index b056a1e..03be7fa 100644
--- a/content/services/mettre-place-DNS.md
+++ b/content/services/mettre-place-DNS.md
@@ -2,7 +2,7 @@
 title: "Mettre en place le DNS"
 description: "Mise en place du nom de domaine"
 date: 2022-09-01
-weight: 3
+weight: 30
 extra:
   parent: "services/web.md"
 ---
diff --git a/content/services/publier-le-contenu.md b/content/services/publier-le-contenu.md
new file mode 100644
index 0000000..eea5371
--- /dev/null
+++ b/content/services/publier-le-contenu.md
@@ -0,0 +1,11 @@
+---
+title: Publier du contenu
+description: Comment publier votre contenu en ligne 
+sort_by: weight
+weight: 50
+extra:
+  parent: services/web.md
+---
+ <!-- TODO -->
+
+# Title 
diff --git a/content/services/statique-comment-ça.md b/content/services/statique-comment-ça.md
new file mode 100644
index 0000000..cafca9a
--- /dev/null
+++ b/content/services/statique-comment-ça.md
@@ -0,0 +1,18 @@
+---
+title: Statique,  comment ça ? 
+description: Qu'est ce qu'un site web statique et pourquoi
+sort_by: weight
+weight: 10
+extra:
+  parent: services/web.md
+---
+
+Au commencement du web (au début des années 90), le contenu présent en ligne était statique : quand un client veut un fichier ou une page, il spécifie le chemin via un URL, et le serveur répond tout le temps la même chose. Dès le milieu des années 90 ont apparu au sein du web des pages dynamiques, avec [CGI](https://fr.wikipedia.org/wiki/Common_Gateway_Interface) et [PHP](https://fr.wikipedia.org/wiki/PHP). Pour une même page, le serveur peut répondre un contenu différent, variant selon des paramètres rajoutés en fin de chemin URL, selon des données dans la mémoire du serveur, ou selon n'importe quel facteur qui passe par la tête du développeur.
+
+Avec Javascript, qui date de la même époque, une confusion se pose souvent : beaucoup de contenus statiques passent pour du dynamique aux yeux de l'internaute. Il faut alors rappeler une distinction importante : le code Javascript livré avec un site s'exécute côté client, c'est-à-dire sur l'ordinateur ou le téléphone de l'internaute. À contrario, le CGI ou PHP s'exécute côté serveur, c'est-à-dire sur la machine administrée par le propriétaire du site. Selon ce qu'on veut faire, il faut choisir l'un ou l'autre.
+
+Quelques exemples pour comprendre cette dichotomie : je gère une boutique en ligne, et je veux que le stock de mes produits s'affiche quand un client consulte mon site ? Il faut faire ça côté serveur, car seul lui connaît les stocks. Je veux mettre en place des décors interactifs avec la souris ? Il faut faire ça côté client, car seul lui connaît la position du curseur. Là où le bât blesse, c'est que certaines choses peuvent être faites des deux côtés, par exemple afficher l'heure sur une page.
+
+En proposant un site statique on réduit fortement le besoin d'infrastructure du côté serveur en déplacant le calcul sur des terminaux déjà existant : votre téléphone ou ordinateur. De ce fait on réduit le besoin de nouveaux matériel qui est très couteux d'un point de vue environnemental (la vidéo de [François Jarrige / Fanny Lopez | La Manufacture d'idées 2022](https://www.youtube.com/watch?v=wwFFWPK-CF8) à ce sujet).
+
+En conclusion, une page statique peut proposer des interactions et des effets quelconques, et même se comporter comme une application, car l'interactivité est gérée uniquement par votre ordinateur. Dans ce modèle, par contre, le serveur web se contente simplement de vous envoyer les données que vous lui demandez, sans exécuter de logique complexe, réduisant ainsi l'impact environnemental du site. 
diff --git a/content/services/web.md b/content/services/web.md
index e5ee945..3b7c16c 100644
--- a/content/services/web.md
+++ b/content/services/web.md
@@ -9,31 +9,32 @@ extra:
 
 <!-- TODO -->
 
-<!-- Vous en avez marre de faire toute votre communication associative via Facebook ? Vous voulez créer votre propre site pour raconter vos dernières vacances ou publier vos poèmes ? Bref, publier en indépendance ? Deuxfleurs peut vous aider en vous fournissant l'hébergement. Suivez le guide ! -->
-
-<!-- 1. [Statique ? Comment ça ?](@/prise_en_main/statique-comment-ça.md) -->
-<!-- 1. [Initialiser votre accès](@/prise_en_main/initialiser-votre-accès.md) -->
-<!-- 1. [Mettre en place le DNS](@/prise_en_main/mettre-place-DNS.md) -->
-<!-- 1. [Créer du contenu](@/prise_en_main/creer-du-contenu.md) -->
-<!-- 1. [Publier le contenu](@/prise_en_main/publier-le-contenu.md) -->
-
-<!-- # Ils nous font confiance pour leur site web -->
-
-<!-- - [declic-lelivre.com](https://declic-lelivre.com) - _Exploitation des données privées, surveillance généralisée, addiction au smartphone, disparition de pans entiers de l'économie... Les critiques du monde du numérique ne cessent de s'amplifier ; difficile d'ignorer les conséquences de l'utilisation d'Amazon, Facebook, Google, Instagram ou Netflix. Et s'il existait un autre Internet, respectueux de nos libertés ?_ -->
-<!-- - [envieappartagee.fr](https://www.envieappartagee.fr) - _Association Envie Appart'Agée, projet de coloc Alzheimer pour habiter et être accompagné autrement en Vendée._ -->
-<!-- - [wanderearth.fr](https://wanderearth.fr/) - _Blog voyage à vélo low-tech._ -->
-<!-- - [www.osuny.org](https://www.osuny.org/) - _Osuny est une solution technique spécialement conçue pour les universités, laboratoires de recherches et écoles supérieures permettant de créer des sites Web entièrement personnalisés, les plus sobres, les plus accessibles et les plus sécurisés possibles_. -->
-<!-- - [giraud.eu](https://giraud.eu) - _Site d'un ingénieur en informatique_ -->
-<!-- - [anneprudhomoz.fr](https://anneprudhomoz.fr) - _De la terre, du fer, de l'eau, beaucoup de feu, un peu d'huile, encore du béton et du plâtre ! ... sans oublier le crayon à papier et les carnets._ -->
-<!-- - [courderec.re](https://courderec.re) - _Groupe de musique. De la pop synthé qui décoiffe._ -->
-<!-- - [colineaubert.com](https://colineaubert.com) - _D'un côté graphiste, illustratrice et conceptrice d'outils pédagogiques, je mets en images et en mots différents sujets scientifiques et culturels._ -->
-<!-- - [estherbouquet.com](https://estherbouquet.com) - _Esther Bouquet questions how narratives—both historical and literary—are being built by creating tangible experiences ranging from the size of the sheet of paper to the volume of a space; somewhere between writing, archiving, drawing, designing, and programming._ -->
-<!-- - [quentin.dufour.io](https://quentin.dufour.io) - _Portfolio et blog d'un ingénieur en informatique_ -->
-<!-- - [erwan.dufour.io](https://erwan.dufour.io) - _Portfolio et blog d'un passionné d'électronique_ -->
-<!-- - [luxeylab.net](https://luxeylab.net) - _Site d'un prof en informatique_ -->
-<!-- - [eric.dufour.io](https://eric.dufour.io) _- Appui au montage de projets de bioéconomie circulaire._ -->
-<!-- - [www.clairebernstein.photo](https://www.clairebernstein.photo/) - _Portfolio photographique._ -->
-<!-- - et de nombreux autres! -->
+Vous avez toujours souhaitez avoir votre propre site web ? Que ça soit pour communiquer pour une association, à propos de vous ou simplement publier ce qui vous intéresse de manière indépendante ? 
+Deuxfleurs peut vous aider en vous fournissant l'hébergement. Suivez le guide !
+
+1. [Statique ? Comment ça ?](@/services/statique-comment-ça.md)
+2. [Initialiser votre accès](@/services/initialiser-votre-acces.md)
+3. [Mettre en place le DNS](@/services/mettre-place-DNS.md)
+4. [Créer du contenu](@/services/creer-du-contenu.md)
+5. [Publier le contenu](@/services/publier-le-contenu.md)
+
+# Ils nous font confiance pour leur site web
+
+- [declic-lelivre.com](https://declic-lelivre.com) - _Exploitation des données privées, surveillance généralisée, addiction au smartphone, disparition de pans entiers de l'économie... Les critiques du monde du numérique ne cessent de s'amplifier ; difficile d'ignorer les conséquences de l'utilisation d'Amazon, Facebook, Google, Instagram ou Netflix. Et s'il existait un autre Internet, respectueux de nos libertés ?_
+- [envieappartagee.fr](https://www.envieappartagee.fr) - _Association Envie Appart'Agée, projet de coloc Alzheimer pour habiter et être accompagné autrement en Vendée._
+- [wanderearth.fr](https://wanderearth.fr/) - _Blog voyage à vélo low-tech._
+- [www.osuny.org](https://www.osuny.org/) - _Osuny est une solution technique spécialement conçue pour les universités, laboratoires de recherches et écoles supérieures permettant de créer des sites Web entièrement personnalisés, les plus sobres, les plus accessibles et les plus sécurisés possibles_.
+- [giraud.eu](https://giraud.eu) - _Site d'un ingénieur en informatique_
+- [anneprudhomoz.fr](https://anneprudhomoz.fr) - _De la terre, du fer, de l'eau, beaucoup de feu, un peu d'huile, encore du béton et du plâtre ! ... sans oublier le crayon à papier et les carnets._
+- [courderec.re](https://courderec.re) - _Groupe de musique. De la pop synthé qui décoiffe._
+- [colineaubert.com](https://colineaubert.com) - _D'un côté graphiste, illustratrice et conceptrice d'outils pédagogiques, je mets en images et en mots différents sujets scientifiques et culturels._
+- [estherbouquet.com](https://estherbouquet.com) - _Esther Bouquet questions how narratives—both historical and literary—are being built by creating tangible experiences ranging from the size of the sheet of paper to the volume of a space; somewhere between writing, archiving, drawing, designing, and programming._
+- [quentin.dufour.io](https://quentin.dufour.io) - _Portfolio et blog d'un ingénieur en informatique_
+- [erwan.dufour.io](https://erwan.dufour.io) - _Portfolio et blog d'un passionné d'électronique_
+- [luxeylab.net](https://luxeylab.net) - _Site d'un prof en informatique_
+- [eric.dufour.io](https://eric.dufour.io) _- Appui au montage de projets de bioéconomie circulaire._
+- [www.clairebernstein.photo](https://www.clairebernstein.photo/) - _Portfolio photographique._
+- et de nombreux autres!