From 250f904946ec3debe5cd95cb6cdc9d5ae31373f0 Mon Sep 17 00:00:00 2001 From: LUXEY Adrien Date: Tue, 2 Feb 2021 22:36:36 +0100 Subject: branches et canopee --- README.md | 32 ++++ images/backtotop.jpg | Bin 5326 -> 0 bytes images/backtotop.png | Bin 14850 -> 0 bytes images/contributopia.jpg | Bin 191017 -> 0 bytes images/docker.jpg | Bin 108735 -> 0 bytes images/docker1.jpg | Bin 54911 -> 0 bytes images/docker2.jpg | Bin 43407 -> 0 bytes images/docker3.jpg | Bin 39685 -> 0 bytes images/domainepublic.jpg | Bin 811911 -> 0 bytes images/duchesse.png | Bin 28543 -> 0 bytes images/filament.png | Bin 30128 -> 0 bytes images/geocities.jpg | Bin 221819 -> 0 bytes images/glitch_rose.jpg | Bin 451707 -> 0 bytes images/indie.png | Bin 664574 -> 0 bytes images/mastodon.jpg | Bin 88865 -> 0 bytes images/mastodon2.jpg | Bin 121650 -> 0 bytes images/mobilizon.jpg | Bin 140265 -> 0 bytes images/nomagic.jpg | Bin 107271 -> 0 bytes images/peertube.jpg | Bin 107897 -> 0 bytes images/spritely.jpg | Bin 81919 -> 0 bytes images/tila.png | Bin 229094 -> 0 bytes images/zaclys.png | Bin 270551 -> 0 bytes inspirations/images/backtotop.jpg | Bin 0 -> 5326 bytes inspirations/images/backtotop.png | Bin 0 -> 14850 bytes inspirations/images/contributopia.jpg | Bin 0 -> 191017 bytes inspirations/images/docker.jpg | Bin 0 -> 108735 bytes inspirations/images/docker1.jpg | Bin 0 -> 54911 bytes inspirations/images/docker2.jpg | Bin 0 -> 43407 bytes inspirations/images/docker3.jpg | Bin 0 -> 39685 bytes inspirations/images/domainepublic.jpg | Bin 0 -> 811911 bytes inspirations/images/duchesse.png | Bin 0 -> 28543 bytes inspirations/images/filament.png | Bin 0 -> 30128 bytes inspirations/images/geocities.jpg | Bin 0 -> 221819 bytes inspirations/images/glitch_rose.jpg | Bin 0 -> 451707 bytes inspirations/images/indie.png | Bin 0 -> 664574 bytes inspirations/images/mastodon.jpg | Bin 0 -> 88865 bytes inspirations/images/mastodon2.jpg | Bin 0 -> 121650 bytes inspirations/images/mobilizon.jpg | Bin 0 -> 140265 bytes inspirations/images/nomagic.jpg | Bin 0 -> 107271 bytes inspirations/images/peertube.jpg | Bin 0 -> 107897 bytes inspirations/images/spritely.jpg | Bin 0 -> 81919 bytes inspirations/images/tila.png | Bin 0 -> 229094 bytes inspirations/images/zaclys.png | Bin 0 -> 270551 bytes lab/README.md | 32 ---- lab/assets/css/branches-et-canopee.css | 111 +++++++++++++ lab/assets/css/deuxfleurs-chato-fullwidth.css | 132 ---------------- lab/assets/css/deuxfleurs-chato.css | 111 ------------- lab/branches-et-canopee.html | 121 ++++++++++++++ .../branches-et-canopee/branches-et-canopee.png | Bin 0 -> 3980572 bytes .../branches-et-canopee/branches-et-canopee.xcf | Bin 0 -> 14167250 bytes .../branches-et-canopee_commentaire-ronce.png | Bin 0 -> 1041783 bytes lab/gimp/idee_adrien.png | Bin 3980572 -> 0 bytes lab/gimp/idee_adrien.xcf | Bin 14167250 -> 0 bytes lab/gimp/idee_adrien_commentaire_ronce.png | Bin 1041783 -> 0 bytes lab/index-fullwidth.html | 122 --------------- lab/index.html | 123 --------------- lab/notes/framework_html.md | 43 ----- lab/parallax.html | 70 +++++++++ lab/sandbox/assets | 1 - lab/sandbox/parallax.html | 70 --------- notes/framework_html.md | 43 +++++ ronce/README.md | 174 +-------------------- ronce/reunions/pitch.md | 173 ++++++++++++++++++++ 63 files changed, 554 insertions(+), 804 deletions(-) create mode 100644 README.md delete mode 100644 images/backtotop.jpg delete mode 100644 images/backtotop.png delete mode 100644 images/contributopia.jpg delete mode 100644 images/docker.jpg delete mode 100644 images/docker1.jpg delete mode 100644 images/docker2.jpg delete mode 100644 images/docker3.jpg delete mode 100644 images/domainepublic.jpg delete mode 100644 images/duchesse.png delete mode 100644 images/filament.png delete mode 100644 images/geocities.jpg delete mode 100644 images/glitch_rose.jpg delete mode 100644 images/indie.png delete mode 100644 images/mastodon.jpg delete mode 100644 images/mastodon2.jpg delete mode 100644 images/mobilizon.jpg delete mode 100644 images/nomagic.jpg delete mode 100644 images/peertube.jpg delete mode 100644 images/spritely.jpg delete mode 100644 images/tila.png delete mode 100644 images/zaclys.png create mode 100644 inspirations/images/backtotop.jpg create mode 100644 inspirations/images/backtotop.png create mode 100644 inspirations/images/contributopia.jpg create mode 100644 inspirations/images/docker.jpg create mode 100644 inspirations/images/docker1.jpg create mode 100644 inspirations/images/docker2.jpg create mode 100644 inspirations/images/docker3.jpg create mode 100644 inspirations/images/domainepublic.jpg create mode 100644 inspirations/images/duchesse.png create mode 100644 inspirations/images/filament.png create mode 100644 inspirations/images/geocities.jpg create mode 100644 inspirations/images/glitch_rose.jpg create mode 100644 inspirations/images/indie.png create mode 100644 inspirations/images/mastodon.jpg create mode 100644 inspirations/images/mastodon2.jpg create mode 100644 inspirations/images/mobilizon.jpg create mode 100644 inspirations/images/nomagic.jpg create mode 100644 inspirations/images/peertube.jpg create mode 100644 inspirations/images/spritely.jpg create mode 100644 inspirations/images/tila.png create mode 100644 inspirations/images/zaclys.png delete mode 100644 lab/README.md create mode 100644 lab/assets/css/branches-et-canopee.css delete mode 100644 lab/assets/css/deuxfleurs-chato-fullwidth.css delete mode 100644 lab/assets/css/deuxfleurs-chato.css create mode 100644 lab/branches-et-canopee.html create mode 100644 lab/gimp/branches-et-canopee/branches-et-canopee.png create mode 100644 lab/gimp/branches-et-canopee/branches-et-canopee.xcf create mode 100644 lab/gimp/branches-et-canopee/branches-et-canopee_commentaire-ronce.png delete mode 100644 lab/gimp/idee_adrien.png delete mode 100644 lab/gimp/idee_adrien.xcf delete mode 100644 lab/gimp/idee_adrien_commentaire_ronce.png delete mode 100644 lab/index-fullwidth.html delete mode 100644 lab/index.html delete mode 100644 lab/notes/framework_html.md create mode 100644 lab/parallax.html delete mode 120000 lab/sandbox/assets delete mode 100644 lab/sandbox/parallax.html create mode 100644 notes/framework_html.md create mode 100644 ronce/reunions/pitch.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..52461b2 --- /dev/null +++ b/README.md @@ -0,0 +1,32 @@ +# Laboratoire du futur site web de Deuxfleurs + +## Objectifs techniques + +* Responsive mobile-first design. +* [Media queries CSS](https://www.w3schools.com/css/css_rwd_mediaqueries.asp) : Des images envoyées adaptées à la taille des viewports. +* Pas besoin de Javascript : Le CSS3 ça déchire, on peut faire des infobulles, des animations, de la parallax. (Navigateurs compatibles depuis 7 ans ou plus.) + +## 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. +* 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 ? + + +## Inspirations + +* [MDN - Création de tooltips et remarques sur l'accessibilité du contenu](https://developer.mozilla.org/en-US/docs/Web/CSS/::after#tooltips) + + On peut faire tout ce qu'il faut avec CSS3 ! + + Néanmoins, *rendre un site accessible sans outils a l'air compliqué*. + +* [W3C Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp) + + Utiliser des bannières qui donnent du sens au contenu. + +* [Semantic CSS] (https://adamwathan.me/css-utility-classes-and-separation-of-concerns/) + + Le fait de ne pas donner d'éléments de graphisme dans notre markup HTML, mais seulement dans le CSS. Par exemple, mettre une classe "text-center" à un <p> est considéré une mauvaise pratique. + + diff --git a/images/backtotop.jpg b/images/backtotop.jpg deleted file mode 100644 index 66e47b6..0000000 Binary files a/images/backtotop.jpg and /dev/null differ diff --git a/images/backtotop.png b/images/backtotop.png deleted file mode 100644 index 8db7252..0000000 Binary files a/images/backtotop.png and /dev/null differ diff --git a/images/contributopia.jpg b/images/contributopia.jpg deleted file mode 100644 index a32498a..0000000 Binary files a/images/contributopia.jpg and /dev/null differ diff --git a/images/docker.jpg b/images/docker.jpg deleted file mode 100644 index f7c3bc4..0000000 Binary files a/images/docker.jpg and /dev/null differ diff --git a/images/docker1.jpg b/images/docker1.jpg deleted file mode 100644 index caa66b1..0000000 Binary files a/images/docker1.jpg and /dev/null differ diff --git a/images/docker2.jpg b/images/docker2.jpg deleted file mode 100644 index 11b904c..0000000 Binary files a/images/docker2.jpg and /dev/null differ diff --git a/images/docker3.jpg b/images/docker3.jpg deleted file mode 100644 index 5b515ce..0000000 Binary files a/images/docker3.jpg and /dev/null differ diff --git a/images/domainepublic.jpg b/images/domainepublic.jpg deleted file mode 100644 index 8ceac74..0000000 Binary files a/images/domainepublic.jpg and /dev/null differ diff --git a/images/duchesse.png b/images/duchesse.png deleted file mode 100644 index 77086dc..0000000 Binary files a/images/duchesse.png and /dev/null differ diff --git a/images/filament.png b/images/filament.png deleted file mode 100644 index b03e7a6..0000000 Binary files a/images/filament.png and /dev/null differ diff --git a/images/geocities.jpg b/images/geocities.jpg deleted file mode 100644 index 41f7b48..0000000 Binary files a/images/geocities.jpg and /dev/null differ diff --git a/images/glitch_rose.jpg b/images/glitch_rose.jpg deleted file mode 100644 index 0b4f6a5..0000000 Binary files a/images/glitch_rose.jpg and /dev/null differ diff --git a/images/indie.png b/images/indie.png deleted file mode 100644 index 1a202a7..0000000 Binary files a/images/indie.png and /dev/null differ diff --git a/images/mastodon.jpg b/images/mastodon.jpg deleted file mode 100644 index 4cbf719..0000000 Binary files a/images/mastodon.jpg and /dev/null differ diff --git a/images/mastodon2.jpg b/images/mastodon2.jpg deleted file mode 100644 index 8a1aae5..0000000 Binary files a/images/mastodon2.jpg and /dev/null differ diff --git a/images/mobilizon.jpg b/images/mobilizon.jpg deleted file mode 100644 index c845dc5..0000000 Binary files a/images/mobilizon.jpg and /dev/null differ diff --git a/images/nomagic.jpg b/images/nomagic.jpg deleted file mode 100644 index 9c58fc2..0000000 Binary files a/images/nomagic.jpg and /dev/null differ diff --git a/images/peertube.jpg b/images/peertube.jpg deleted file mode 100644 index cc1ce81..0000000 Binary files a/images/peertube.jpg and /dev/null differ diff --git a/images/spritely.jpg b/images/spritely.jpg deleted file mode 100644 index ca953db..0000000 Binary files a/images/spritely.jpg and /dev/null differ diff --git a/images/tila.png b/images/tila.png deleted file mode 100644 index dafe6d9..0000000 Binary files a/images/tila.png and /dev/null differ diff --git a/images/zaclys.png b/images/zaclys.png deleted file mode 100644 index 8ef4ba5..0000000 Binary files a/images/zaclys.png and /dev/null differ diff --git a/inspirations/images/backtotop.jpg b/inspirations/images/backtotop.jpg new file mode 100644 index 0000000..66e47b6 Binary files /dev/null and b/inspirations/images/backtotop.jpg differ diff --git a/inspirations/images/backtotop.png b/inspirations/images/backtotop.png new file mode 100644 index 0000000..8db7252 Binary files /dev/null and b/inspirations/images/backtotop.png differ diff --git a/inspirations/images/contributopia.jpg b/inspirations/images/contributopia.jpg new file mode 100644 index 0000000..a32498a Binary files /dev/null and b/inspirations/images/contributopia.jpg differ diff --git a/inspirations/images/docker.jpg b/inspirations/images/docker.jpg new file mode 100644 index 0000000..f7c3bc4 Binary files /dev/null and b/inspirations/images/docker.jpg differ diff --git a/inspirations/images/docker1.jpg b/inspirations/images/docker1.jpg new file mode 100644 index 0000000..caa66b1 Binary files /dev/null and b/inspirations/images/docker1.jpg differ diff --git a/inspirations/images/docker2.jpg b/inspirations/images/docker2.jpg new file mode 100644 index 0000000..11b904c Binary files /dev/null and b/inspirations/images/docker2.jpg differ diff --git a/inspirations/images/docker3.jpg b/inspirations/images/docker3.jpg new file mode 100644 index 0000000..5b515ce Binary files /dev/null and b/inspirations/images/docker3.jpg differ diff --git a/inspirations/images/domainepublic.jpg b/inspirations/images/domainepublic.jpg new file mode 100644 index 0000000..8ceac74 Binary files /dev/null and b/inspirations/images/domainepublic.jpg differ diff --git a/inspirations/images/duchesse.png b/inspirations/images/duchesse.png new file mode 100644 index 0000000..77086dc Binary files /dev/null and b/inspirations/images/duchesse.png differ diff --git a/inspirations/images/filament.png b/inspirations/images/filament.png new file mode 100644 index 0000000..b03e7a6 Binary files /dev/null and b/inspirations/images/filament.png differ diff --git a/inspirations/images/geocities.jpg b/inspirations/images/geocities.jpg new file mode 100644 index 0000000..41f7b48 Binary files /dev/null and b/inspirations/images/geocities.jpg differ diff --git a/inspirations/images/glitch_rose.jpg b/inspirations/images/glitch_rose.jpg new file mode 100644 index 0000000..0b4f6a5 Binary files /dev/null and b/inspirations/images/glitch_rose.jpg differ diff --git a/inspirations/images/indie.png b/inspirations/images/indie.png new file mode 100644 index 0000000..1a202a7 Binary files /dev/null and b/inspirations/images/indie.png differ diff --git a/inspirations/images/mastodon.jpg b/inspirations/images/mastodon.jpg new file mode 100644 index 0000000..4cbf719 Binary files /dev/null and b/inspirations/images/mastodon.jpg differ diff --git a/inspirations/images/mastodon2.jpg b/inspirations/images/mastodon2.jpg new file mode 100644 index 0000000..8a1aae5 Binary files /dev/null and b/inspirations/images/mastodon2.jpg differ diff --git a/inspirations/images/mobilizon.jpg b/inspirations/images/mobilizon.jpg new file mode 100644 index 0000000..c845dc5 Binary files /dev/null and b/inspirations/images/mobilizon.jpg differ diff --git a/inspirations/images/nomagic.jpg b/inspirations/images/nomagic.jpg new file mode 100644 index 0000000..9c58fc2 Binary files /dev/null and b/inspirations/images/nomagic.jpg differ diff --git a/inspirations/images/peertube.jpg b/inspirations/images/peertube.jpg new file mode 100644 index 0000000..cc1ce81 Binary files /dev/null and b/inspirations/images/peertube.jpg differ diff --git a/inspirations/images/spritely.jpg b/inspirations/images/spritely.jpg new file mode 100644 index 0000000..ca953db Binary files /dev/null and b/inspirations/images/spritely.jpg differ diff --git a/inspirations/images/tila.png b/inspirations/images/tila.png new file mode 100644 index 0000000..dafe6d9 Binary files /dev/null and b/inspirations/images/tila.png differ diff --git a/inspirations/images/zaclys.png b/inspirations/images/zaclys.png new file mode 100644 index 0000000..8ef4ba5 Binary files /dev/null and b/inspirations/images/zaclys.png differ diff --git a/lab/README.md b/lab/README.md deleted file mode 100644 index 7ee5c11..0000000 --- a/lab/README.md +++ /dev/null @@ -1,32 +0,0 @@ -# Laboratoire du futur site web de Deuxfleurs - -## Objectifs techniques - -* Responsive mobile-first design. -* [Media queries CSS](https://www.w3schools.com/css/css_rwd_mediaqueries.asp) : Des images envoyées adaptées à la taille des viewports. -* Pas besoin de Javascript : Le CSS3 ça déchire, on peut faire des infobulles, des animations, de la parallax. (Navigateurs compatibles depuis 7 ans ou plus.) - -## 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. -* Exploiter l'illustration au maximum. En la laissant fixée en fond de page tandis que les éléments graphiques défilent ? - - -## Inspirations - -* [MDN - Création de tooltips et remarques sur l'accessibilité du contenu](https://developer.mozilla.org/en-US/docs/Web/CSS/::after#tooltips) - - On peut faire tout ce qu'il faut avec CSS3 ! - - Néanmoins, *rendre un site accessible sans outils a l'air compliqué*. - -* [W3C Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp) - - Utiliser des bannières qui donnent du sens au contenu. - -* [Semantic CSS] (https://adamwathan.me/css-utility-classes-and-separation-of-concerns/) - - Le fait de ne pas donner d'éléments de graphisme dans notre markup HTML, mais seulement dans le CSS. Par exemple, mettre une classe "text-center" à un <p> est considéré une mauvaise pratique. - - diff --git a/lab/assets/css/branches-et-canopee.css b/lab/assets/css/branches-et-canopee.css new file mode 100644 index 0000000..1e34f0c --- /dev/null +++ b/lab/assets/css/branches-et-canopee.css @@ -0,0 +1,111 @@ +@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-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; +} + +header>nav { + background-color: var(--bg-canopee-color); + padding-left: 1rem; + padding-right: 1rem; +} + +#logo { + font-size: 3.2rem; + color: var(--color-text-light); +} + +section div { + padding-left: 4rem; + padding-right: 4rem; + margin-top: 2rem; +} + +section p { + padding-left: 2rem; + padding-right: 2rem; + font-size: 2rem; +} + +section .canopee { + border-radius: 3rem; + background-color: var(--bg-canopee-color); + color: var(--color-canopee); + margin-bottom: 4rem; +} + +section .canopee.left { + margin-left: 0; + padding-left: 6rem; + border-top-left-radius: 0rem; + border-bottom-left-radius: 0rem; +} + +section .canopee.right { + margin-right: 0; + border-top-right-radius: 0rem; + border-bottom-right-radius: 0rem; +} + +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); +} \ No newline at end of file diff --git a/lab/assets/css/deuxfleurs-chato-fullwidth.css b/lab/assets/css/deuxfleurs-chato-fullwidth.css deleted file mode 100644 index dbec9b6..0000000 --- a/lab/assets/css/deuxfleurs-chato-fullwidth.css +++ /dev/null @@ -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); -} \ No newline at end of file diff --git a/lab/assets/css/deuxfleurs-chato.css b/lab/assets/css/deuxfleurs-chato.css deleted file mode 100644 index 1e34f0c..0000000 --- a/lab/assets/css/deuxfleurs-chato.css +++ /dev/null @@ -1,111 +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-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; -} - -header>nav { - background-color: var(--bg-canopee-color); - padding-left: 1rem; - padding-right: 1rem; -} - -#logo { - font-size: 3.2rem; - color: var(--color-text-light); -} - -section div { - padding-left: 4rem; - padding-right: 4rem; - margin-top: 2rem; -} - -section p { - padding-left: 2rem; - padding-right: 2rem; - font-size: 2rem; -} - -section .canopee { - border-radius: 3rem; - background-color: var(--bg-canopee-color); - color: var(--color-canopee); - margin-bottom: 4rem; -} - -section .canopee.left { - margin-left: 0; - padding-left: 6rem; - border-top-left-radius: 0rem; - border-bottom-left-radius: 0rem; -} - -section .canopee.right { - margin-right: 0; - border-top-right-radius: 0rem; - border-bottom-right-radius: 0rem; -} - -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); -} \ No newline at end of file diff --git a/lab/branches-et-canopee.html b/lab/branches-et-canopee.html new file mode 100644 index 0000000..e4be0a4 --- /dev/null +++ b/lab/branches-et-canopee.html @@ -0,0 +1,121 @@ + + + + + + + + + Deuxfleurs + + + + + +
+ +
+ + + +
+ +
+
+
+

Bienvenue chez Deuxfleurs !

+
+ +
+

+ Nous sommes une association pour
+ une informatique écologique et humaine,
+ et nous sommes en colère.
+ Nous avons donc pris le maquis. +

+
+
+ +
+
+

Nous hébergeons

+

+ Celles et ceux qui ont besoin d'outils libres
+ pour discuter, collaborer, s'organiser, se divertir... +

+
+ +
+ +
+

Sans parasite !

+

+ Toutes nos constructions loufoques
+ sont garanties sans ver espion.
+ Nous préférons le bon goût d'un logiciel bien fait. +

+
+
+ +
+
+

Infrastructure raisonnée

+

+ On essaye d'héberger nos ordinateurs à la maison.
+ Et c'est pas si facile ! +

+
+ +
+ +
+

Nous créons

+

+ Des logiciels pour améliorer
+ et interconnecter nos cabanes. +

+
+
+ +
+
+
+

Nous recrutons

+ +

+ Des bâtisseuses de cabanes ou des évadés... +

+
+
+ +
+
+
+
+

... des mondes d'en bas.

+
+
+
+
+
+ +
+ Tous droits réservés à notre pangolin alcoolique. +
+ +
+ + + \ No newline at end of file diff --git a/lab/gimp/branches-et-canopee/branches-et-canopee.png b/lab/gimp/branches-et-canopee/branches-et-canopee.png new file mode 100644 index 0000000..145afc8 Binary files /dev/null and b/lab/gimp/branches-et-canopee/branches-et-canopee.png differ diff --git a/lab/gimp/branches-et-canopee/branches-et-canopee.xcf b/lab/gimp/branches-et-canopee/branches-et-canopee.xcf new file mode 100644 index 0000000..b25850f Binary files /dev/null and b/lab/gimp/branches-et-canopee/branches-et-canopee.xcf differ diff --git a/lab/gimp/branches-et-canopee/branches-et-canopee_commentaire-ronce.png b/lab/gimp/branches-et-canopee/branches-et-canopee_commentaire-ronce.png new file mode 100644 index 0000000..da0e896 Binary files /dev/null and b/lab/gimp/branches-et-canopee/branches-et-canopee_commentaire-ronce.png differ diff --git a/lab/gimp/idee_adrien.png b/lab/gimp/idee_adrien.png deleted file mode 100644 index 145afc8..0000000 Binary files a/lab/gimp/idee_adrien.png and /dev/null differ diff --git a/lab/gimp/idee_adrien.xcf b/lab/gimp/idee_adrien.xcf deleted file mode 100644 index b25850f..0000000 Binary files a/lab/gimp/idee_adrien.xcf and /dev/null differ diff --git a/lab/gimp/idee_adrien_commentaire_ronce.png b/lab/gimp/idee_adrien_commentaire_ronce.png deleted file mode 100644 index da0e896..0000000 Binary files a/lab/gimp/idee_adrien_commentaire_ronce.png and /dev/null differ diff --git a/lab/index-fullwidth.html b/lab/index-fullwidth.html deleted file mode 100644 index 4eb3282..0000000 --- a/lab/index-fullwidth.html +++ /dev/null @@ -1,122 +0,0 @@ - - - - - - - - - Deuxfleurs - - - - - - - -
- -
- - -
- -
- -
-
-

Bienvenue chez Deuxfleurs !

-
- -
-

- Nous sommes une association pour
- une informatique écologique et humaine,
- et nous sommes en colère.
- Nous avons donc pris le maquis. -

-
-
- -
-
-

Nous hébergeons

-

- Celles et ceux qui ont besoin d'outils libres
- pour discuter, collaborer, s'organiser, se divertir... -

-
- -
- -
-

Sans parasite !

-

- Toutes nos constructions loufoques
- sont garanties sans ver espion.
- Nous préférons le bon goût d'un logiciel bien fait. -

-
-
- -
-
-

Infrastructure raisonnée

-

- On essaye d'héberger nos ordinateurs à la maison.
- Et c'est pas si facile ! -

-
- -
- -
-

Nous créons

-

- Des logiciels pour améliorer
- et interconnecter nos cabanes. -

-
-
- -
-
-
-

Nous recrutons

- -

- Des bâtisseuses de cabanes ou des évadés... -

-
-
- -
-
-
-
-

... des mondes d'en bas.

-
-
-
-
- -
- Tous droits réservés à notre pangolin alcoolique. -
- -
- - - \ No newline at end of file diff --git a/lab/index.html b/lab/index.html deleted file mode 100644 index 1eb7ecf..0000000 --- a/lab/index.html +++ /dev/null @@ -1,123 +0,0 @@ - - - - - - - - - Deuxfleurs - - - - - - - -
- -
- - - -
- -
-
-
-

Bienvenue chez Deuxfleurs !

-
- -
-

- Nous sommes une association pour
- une informatique écologique et humaine,
- et nous sommes en colère.
- Nous avons donc pris le maquis. -

-
-
- -
-
-

Nous hébergeons

-

- Celles et ceux qui ont besoin d'outils libres
- pour discuter, collaborer, s'organiser, se divertir... -

-
- -
- -
-

Sans parasite !

-

- Toutes nos constructions loufoques
- sont garanties sans ver espion.
- Nous préférons le bon goût d'un logiciel bien fait. -

-
-
- -
-
-

Infrastructure raisonnée

-

- On essaye d'héberger nos ordinateurs à la maison.
- Et c'est pas si facile ! -

-
- -
- -
-

Nous créons

-

- Des logiciels pour améliorer
- et interconnecter nos cabanes. -

-
-
- -
-
-
-

Nous recrutons

- -

- Des bâtisseuses de cabanes ou des évadés... -

-
-
- -
-
-
-
-

... des mondes d'en bas.

-
-
-
-
-
- -
- Tous droits réservés à notre pangolin alcoolique. -
- -
- - - \ No newline at end of file diff --git a/lab/notes/framework_html.md b/lab/notes/framework_html.md deleted file mode 100644 index 00bdc9a..0000000 --- a/lab/notes/framework_html.md +++ /dev/null @@ -1,43 +0,0 @@ -## Framework HTML - -__OUTDATED__ - -### Pourquoi ? - -Un framework HTML, c'est un include CSS, et parfois du JS. Ca va de Bootstrap/Foundation, qui sont des framworks immenses (avec fonction « carrousel d'images » et une foule de trucs dont on se cogne) à Skeleton/Mini, qui essayent d'être le plus simple possible tout en apportant les fonctionnalités *vitales* à un site web moderne : - -* **responsive design** : les media queries and co, qui permettent de charger du contenu différent par taille de viewport, c'est du pur HTML5/CSS et c'est chiant à écrire à la main). - - Le design par grille de 12 colonnes aide énormément à concevoir un site en pensant *mobile-first* : "Si cette div est vue sur mobile, faites qu'elle prenne toute la largeur. Si un écran PC large, faites qu'elle ne prenne que 4 colonnes sur 12." - - Je constate que certains frameworks vraiment minimalistes ne permettent pas de définir un nombre de colonnes par div en fonction de la taille du viewport. C'est soit le système de colonnes, soit toutes les div font 12 sur petit viewport. Ça suffira ou pas ? - -* **normalisation**: chaque navigateur a sa propre idée de ce que devrait être la taille du corps de texte. Il faut redéfinir tous les défauts pour s'assurer un rendu homogène sur tout navigateur. C'est le taff de [Normalize.css](https://necolas.github.io/normalize.css/), inclut dans la plupart des frameworks HTML. - -* **sucre** : Si la box modale info/warning/error peut être déjà définie clairement une bonne fois pour toutes, on ne sera pas tentés d'en faire une implem par box au lieu de fouiller le CSS. Ce genre de trucs, c'est pas vital et faut pas que ça *bloat*. - -Non-goals : - -* **LESS/SCSS** : CSS avec des variables et des includes, dans l'idée du *Don't Repeat Yourself*. Personnellement ça me saoule d'avoir à compiler du CSS avant de display, ça m'intéresse pas. - -* **Node** : Plus généralement, tout framework HTML qui demande Node, ça me gave. On en aura assez à faire avec le templating Jinja ou autre. - -### Qui sont les candidats ? - -Sources : une recherche web "small html responsive framework" et [Awesome CSS](https://github.com/troxler/awesome-css-frameworks) - -* [mini.css](https://minicss.org/) (dépôt archivé, flexible reponsive grid, CSS variables, flexbox) - - Essayé. Je voudrais un menu header à onglets sur PC qui se transforme en menu « [drawer](https://minicss.org/docs#drawer) » sur le côté pour mobile. - Il y a des briques pour faire à peu près ça, mais la complexité de la doc me décourage. Je préfère essayer quelque chose qui ait moins d'ambitions mais soit plus facile à utiliser. Go Chota. - -* [Skeleton](http://getskeleton.com/) (12 cols grid, but not responsive: either follow the defined number of columns, or full-size for small viewports) -* [Pure](https://purecss.io/) (flexible responsive grid, with shitty class names) -* **[Chota](https://jenil.github.io/chota/)** (flexible reponsive grid, CSS variables means recent browser versions only) -* [Turret.css](https://turretcss.com/) (orienté accessibilité, pas de grille ?) - -### Décision - -On part sur [mini.css](https://minicss.org/), parce qu'il les features que j'aime, est pas verbeux, bien minifié, et est supporté par des navigateurs assez anciens. - - diff --git a/lab/parallax.html b/lab/parallax.html new file mode 100644 index 0000000..f3ab3da --- /dev/null +++ b/lab/parallax.html @@ -0,0 +1,70 @@ + + + + + + + CSS Scrolling Parallax + + + + + + +
+

Coucou

+
+
+
+

Cute Kitten

+

Bacon ipsum dolor sit amet chicken pork loin hamburger ball tip, swine tenderloin salami meatball boudin tri-tip fatback shank bacon. Pork salami kevin, brisket spare ribs strip steak ham hock porchetta. Pork belly short loin tail porchetta. Pork pig meatball, beef ribs doner jerky tri-tip hamburger filet mignon strip steak ball tip ham tail tongue corned beef.

+ +

Flank spare ribs capicola, strip steak biltong pancetta bresaola tri-tip cow landjaeger. Short ribs sirloin beef ribs, flank capicola ribeye turducken. Sirloin boudin andouille tail. Ham flank tail sausage t-bone, jerky landjaeger kevin porchetta ground round pork belly.

+
+
+

Boring

+

Bacon ipsum dolor sit amet chicken pork loin hamburger ball tip, swine tenderloin salami meatball boudin tri-tip fatback shank bacon. Pork salami kevin, brisket spare ribs strip steak ham hock porchetta. Pork belly short loin tail porchetta. Pork pig meatball, beef ribs doner jerky tri-tip hamburger filet mignon strip steak ball tip ham tail tongue corned beef.

+
+
+

Fluffy Kitten

+

Bacon ipsum dolor sit amet chicken pork loin hamburger ball tip, swine tenderloin salami meatball boudin tri-tip fatback shank bacon. Pork salami kevin, brisket spare ribs strip steak ham hock porchetta. Pork belly short loin tail porchetta. Pork pig meatball, beef ribs doner jerky tri-tip hamburger filet mignon strip steak ball tip ham tail tongue corned beef.

+

Bacon ipsum dolor sit amet chicken pork loin hamburger ball tip, swine tenderloin salami meatball boudin tri-tip fatback shank bacon. Pork salami kevin, brisket spare ribs strip steak ham hock porchetta. Pork belly short loin tail porchetta. Pork pig meatball, beef ribs doner jerky tri-tip hamburger filet mignon strip steak ball tip ham tail tongue corned beef.

+
+
+ + + \ No newline at end of file diff --git a/lab/sandbox/assets b/lab/sandbox/assets deleted file mode 120000 index ec2e4be..0000000 --- a/lab/sandbox/assets +++ /dev/null @@ -1 +0,0 @@ -../assets \ No newline at end of file diff --git a/lab/sandbox/parallax.html b/lab/sandbox/parallax.html deleted file mode 100644 index f3ab3da..0000000 --- a/lab/sandbox/parallax.html +++ /dev/null @@ -1,70 +0,0 @@ - - - - - - - CSS Scrolling Parallax - - - - - - -
-

Coucou

-
-
-
-

Cute Kitten

-

Bacon ipsum dolor sit amet chicken pork loin hamburger ball tip, swine tenderloin salami meatball boudin tri-tip fatback shank bacon. Pork salami kevin, brisket spare ribs strip steak ham hock porchetta. Pork belly short loin tail porchetta. Pork pig meatball, beef ribs doner jerky tri-tip hamburger filet mignon strip steak ball tip ham tail tongue corned beef.

- -

Flank spare ribs capicola, strip steak biltong pancetta bresaola tri-tip cow landjaeger. Short ribs sirloin beef ribs, flank capicola ribeye turducken. Sirloin boudin andouille tail. Ham flank tail sausage t-bone, jerky landjaeger kevin porchetta ground round pork belly.

-
-
-

Boring

-

Bacon ipsum dolor sit amet chicken pork loin hamburger ball tip, swine tenderloin salami meatball boudin tri-tip fatback shank bacon. Pork salami kevin, brisket spare ribs strip steak ham hock porchetta. Pork belly short loin tail porchetta. Pork pig meatball, beef ribs doner jerky tri-tip hamburger filet mignon strip steak ball tip ham tail tongue corned beef.

-
-
-

Fluffy Kitten

-

Bacon ipsum dolor sit amet chicken pork loin hamburger ball tip, swine tenderloin salami meatball boudin tri-tip fatback shank bacon. Pork salami kevin, brisket spare ribs strip steak ham hock porchetta. Pork belly short loin tail porchetta. Pork pig meatball, beef ribs doner jerky tri-tip hamburger filet mignon strip steak ball tip ham tail tongue corned beef.

-

Bacon ipsum dolor sit amet chicken pork loin hamburger ball tip, swine tenderloin salami meatball boudin tri-tip fatback shank bacon. Pork salami kevin, brisket spare ribs strip steak ham hock porchetta. Pork belly short loin tail porchetta. Pork pig meatball, beef ribs doner jerky tri-tip hamburger filet mignon strip steak ball tip ham tail tongue corned beef.

-
-
- - - \ No newline at end of file diff --git a/notes/framework_html.md b/notes/framework_html.md new file mode 100644 index 0000000..00bdc9a --- /dev/null +++ b/notes/framework_html.md @@ -0,0 +1,43 @@ +## Framework HTML + +__OUTDATED__ + +### Pourquoi ? + +Un framework HTML, c'est un include CSS, et parfois du JS. Ca va de Bootstrap/Foundation, qui sont des framworks immenses (avec fonction « carrousel d'images » et une foule de trucs dont on se cogne) à Skeleton/Mini, qui essayent d'être le plus simple possible tout en apportant les fonctionnalités *vitales* à un site web moderne : + +* **responsive design** : les media queries and co, qui permettent de charger du contenu différent par taille de viewport, c'est du pur HTML5/CSS et c'est chiant à écrire à la main). + + Le design par grille de 12 colonnes aide énormément à concevoir un site en pensant *mobile-first* : "Si cette div est vue sur mobile, faites qu'elle prenne toute la largeur. Si un écran PC large, faites qu'elle ne prenne que 4 colonnes sur 12." + + Je constate que certains frameworks vraiment minimalistes ne permettent pas de définir un nombre de colonnes par div en fonction de la taille du viewport. C'est soit le système de colonnes, soit toutes les div font 12 sur petit viewport. Ça suffira ou pas ? + +* **normalisation**: chaque navigateur a sa propre idée de ce que devrait être la taille du corps de texte. Il faut redéfinir tous les défauts pour s'assurer un rendu homogène sur tout navigateur. C'est le taff de [Normalize.css](https://necolas.github.io/normalize.css/), inclut dans la plupart des frameworks HTML. + +* **sucre** : Si la box modale info/warning/error peut être déjà définie clairement une bonne fois pour toutes, on ne sera pas tentés d'en faire une implem par box au lieu de fouiller le CSS. Ce genre de trucs, c'est pas vital et faut pas que ça *bloat*. + +Non-goals : + +* **LESS/SCSS** : CSS avec des variables et des includes, dans l'idée du *Don't Repeat Yourself*. Personnellement ça me saoule d'avoir à compiler du CSS avant de display, ça m'intéresse pas. + +* **Node** : Plus généralement, tout framework HTML qui demande Node, ça me gave. On en aura assez à faire avec le templating Jinja ou autre. + +### Qui sont les candidats ? + +Sources : une recherche web "small html responsive framework" et [Awesome CSS](https://github.com/troxler/awesome-css-frameworks) + +* [mini.css](https://minicss.org/) (dépôt archivé, flexible reponsive grid, CSS variables, flexbox) + + Essayé. Je voudrais un menu header à onglets sur PC qui se transforme en menu « [drawer](https://minicss.org/docs#drawer) » sur le côté pour mobile. + Il y a des briques pour faire à peu près ça, mais la complexité de la doc me décourage. Je préfère essayer quelque chose qui ait moins d'ambitions mais soit plus facile à utiliser. Go Chota. + +* [Skeleton](http://getskeleton.com/) (12 cols grid, but not responsive: either follow the defined number of columns, or full-size for small viewports) +* [Pure](https://purecss.io/) (flexible responsive grid, with shitty class names) +* **[Chota](https://jenil.github.io/chota/)** (flexible reponsive grid, CSS variables means recent browser versions only) +* [Turret.css](https://turretcss.com/) (orienté accessibilité, pas de grille ?) + +### Décision + +On part sur [mini.css](https://minicss.org/), parce qu'il les features que j'aime, est pas verbeux, bien minifié, et est supporté par des navigateurs assez anciens. + + diff --git a/ronce/README.md b/ronce/README.md index c25cad1..97474de 100644 --- a/ronce/README.md +++ b/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 - -![Geocities](images/geocities.jpg) - - * [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 Laurel](images/docker.jpg) - -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 - -![Contributopia](images/contributopia.jpg) - -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](images/peertube.jpg) - -[PeerTube](https://joinpeertube.org/) - -### Mastodon - -![Mastodon](images/mastodon.jpg) -![Mastodon2](images/mastodon2.jpg) - -[Mastodon](https://joinmastodon.org/) - -### Mobilizon - -![](images/mobilizon.jpg) - -[Roman Photo lancement de Mobilizon](https://framablog.org/2020/10/27/roman-photo-visite-guidee-de-mobilizon/) - -### Spritely - -![Spritely](images/spritely.jpg) - -[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 - -![](images/domainepublic.jpg) - -[Domaine Public](https://www.domainepublic.net/) - -### Duchesse.chat (n'existe plus) - -![](images/duchesse.png) - -[Ancien CHATON nantais](https://framapiaf.org/@duchesse) - -### Indie Hosters - -![](images/indie.png) - -### NoMagic - -![](images/nomagic.jpg) - -### Le Filament - -![](images/filament.png) - -[Le Filament](https://le-filament.com/) : j'adhère pas forcément à leur charte graphique mais ils ont l'air cool x) - -### Tila - -![](images/tila.png) - -### Zaclys - -![Zaclys](images/zaclys.png) - -[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. \ No newline at end of file diff --git a/ronce/reunions/pitch.md b/ronce/reunions/pitch.md new file mode 100644 index 0000000..c25cad1 --- /dev/null +++ b/ronce/reunions/pitch.md @@ -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 + +![Geocities](images/geocities.jpg) + + * [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 Laurel](images/docker.jpg) + +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 + +![Contributopia](images/contributopia.jpg) + +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](images/peertube.jpg) + +[PeerTube](https://joinpeertube.org/) + +### Mastodon + +![Mastodon](images/mastodon.jpg) +![Mastodon2](images/mastodon2.jpg) + +[Mastodon](https://joinmastodon.org/) + +### Mobilizon + +![](images/mobilizon.jpg) + +[Roman Photo lancement de Mobilizon](https://framablog.org/2020/10/27/roman-photo-visite-guidee-de-mobilizon/) + +### Spritely + +![Spritely](images/spritely.jpg) + +[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 + +![](images/domainepublic.jpg) + +[Domaine Public](https://www.domainepublic.net/) + +### Duchesse.chat (n'existe plus) + +![](images/duchesse.png) + +[Ancien CHATON nantais](https://framapiaf.org/@duchesse) + +### Indie Hosters + +![](images/indie.png) + +### NoMagic + +![](images/nomagic.jpg) + +### Le Filament + +![](images/filament.png) + +[Le Filament](https://le-filament.com/) : j'adhère pas forcément à leur charte graphique mais ils ont l'air cool x) + +### Tila + +![](images/tila.png) + +### Zaclys + +![Zaclys](images/zaclys.png) + +[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 -- cgit v1.2.3