Merge pull request #24 from nadineprigann/dev

Dev

docs/src/.vuepress/components/c-text-block.vue

@@ -1,6 +1,8 @@
 <template>
+  <!-- TODO: make dynamic class names work. it is not possible with pure CSS but preprocessors can be installed. 
+    did not work properly as of 02/23. workaround is using these defined scoped styles as class names within parent -->
   <section class="component">
-    <div v-html="labels.type" class="type"/>
+    <div v-html="label" class="type"/>
     <div v-html="text" class="text"/>
     <!-- <c-base-bodytext :class="$style.body" v-html="item" /> -->
   </section>
@@ -17,37 +19,46 @@ export default {
       required: true,
       default: ""
     },
-    type: {
+    label: {
       type: String,
-      default: 'info' // info, feature, resource, succession
+      // default: 'info' // info, feature, resource, succession
     }
   },
-  data() {
-    return {
-      labels: {
-        type: 'sukzession'
-      }
-    };
-  },
   computed: {
-    classes() {
-      return {
-        component: [this.$style.component]
-      };
-    }
+    // classes() {
+    //   return {
+    //     component: [this.$style.component,
+    //     this.$style['label-' + this.label]
+    //     ]
+    //   };
+    // }
   },
 
 };
 </script>
 
 <style scoped lang="css">
 .component {
-  --highlight-color: rgb(66, 185, 131);
   /* --bg: rgb(113, 168, 255); */
   background-color: rgb(45, 45, 45);
   border-left: solid 0.5rem var(--highlight-color);
   padding: 1em 1.2em;
   margin: 2em 0;
+
+  &.label-succession {
+    --highlight-color: rgb(66, 185, 131);
+  }
+
+  &.label-resource {
+    --highlight-color: rgb(252, 185, 108);
+  }
+
+  &.label-feature {
+    --highlight-color: rgb(228, 164, 255);
+  }
+  &.label-info {
+    --highlight-color: rgb(141, 221, 255);
+  }
 }
 
 .type,

docs/src/.vuepress/config.js

@@ -65,6 +65,7 @@ module.exports = {
           collapsable: false,
           // use file name here without extension and content will be rendered with the first line as title. optional title can be declared. empty string is ref for README
           children: [
+            '',
             {
               title: 'Beobachten',
               collapsable: false,
@@ -99,7 +100,7 @@ module.exports = {
               title: 'Tweak',
               collapsable: false,
               // sidebarDepth: 2,    // optional, defaults to 1
-              children: ['/process/tweaking/intro.md'],
+              children: ['/process/tweaking/intro.md', '/process/tweaking/funding.md'],
             },
             // 'consulting',
             // 'design',

docs/src/.vuepress/styles/index.styl

@@ -27,6 +27,10 @@
 
 body {
   font-family: 'Inter', sans-serif;  
+
+  em {
+    color: $textColorDark;
+  }
 }
 
 html,

docs/src/.vuepress/styles/palette.styl

@@ -7,6 +7,7 @@
 // colors
 $accentColor = #3eaf7c
 $textColor = #bdbdbd
+$textColorDark = darken(#bdbdbd, 35%)
 $borderColor = #eaecef
 $codeBgColor = #282c34
 $arrowBgColor = #ccc

docs/src/process/README.md

@@ -1,7 +1,9 @@
-# Prozess der Entwicklung eines Workflows für permakulturelle Webentwicklung
+# Entwicklung eines permakulturellen Workflows für Webentwicklung
 
-Wo sind aktuell Probleme? Warum möchte ich das tun? Was erhoffe ich mir von der Anwendung der Permakultur auf Webentwicklung? Kurzer Ausblick auf Kapitel.
+Wäre das Internet ein Land, <c-external-link url="https://www.sustainablewebmanifesto.com/" label="wäre es der 7. grösste CO2-Produzent."/> Die digitale Welt ist hiermit ein blind spot, wenn es um Nachhaltigkeit geht. Doch sowohl Digitalität als auch Nachhaltigkeit sind zwei essentielle Konzepte der Zukunft, denn digitale Anwendungen sind ein wichtiger Baustein für die nötige Transformation, da sie extrem viel Potenzial beinhalten, die uns bei dieser komplexen Aufgabe unter die Arme greifen kann. Bereits jetzt werden sehr viele Abläufe von digitalen Optionen ergänzt, erleichtert oder übernommen. In der Landwirtschaft wird teilweise mehr Technik und Sensorik benutzt als in einem Kreuzberger Tech-Start-Up. Auch im urbanen Raum wird digitale Technik erprobt, um im Konzeptkontext Smart City bspw. mit dem Projekt <c-external-link url="https://www.giessdenkiez.de/" label="Giess den Kiez"/> Stadtbäume effizienter zu bewässern und dadurch klima- und ressourcenschonender zu haushalten.
 
-Wäre das Internet ein Land, wäre es der 7. grösste CO2-Produzent. Der Grossteil der Hardware, die benutzt wird, ist fraglichen Ursprungs. Der Grossteil der Webseiten sind nicht zugänglich für Menschen mit Einschränkungen, genau so wenig wie für Menschen mit wenig Datenvolumen oder schlechter Internetverbindung. Die durchschnittliche Webseite beinhaltet deutlich zu viel Medien, die alle heruntergeladen und verarbeitet werden müssen. Dies generiert Daten und verbraucht Strom. Kurzum: die digitale Welt ist ein blind spot, wenn es um Nachhaltigkeit geht, doch sowohl Digitalität als auch Nachhaltigkeit sind zwei essentielle Konzepte der Zukunft. Deshalb ist es extrem wichtiug, dass wir beides vereinen und verantwortungsvoll mit Ressourcen umgehen. Auch dann, wenn man sie nicht sehen kann. Ich möchte mit permakulturellen Methoden meinen bestehenden Arbeitsablauf im Angestelltenverhältnis optimieren und diesen dann in meine selbstständige Praxis übernehmen, wo er kontinuierlich verbessert werden kann. Die Ergebnisse dieser reise halte ich in dieser öffentlich zuägnglichen Doku fest, damit jede interessierte Person sich hiervon das entnehmen kann, was gebraucht wird.
+Weiter werden mehr Webseiten erstellt, weil das die häufigste Art ist, sich digital Gehör zu verschaffen und öffentlichkeitswirksam zu werden. Hierbei wird häufig, meistens aus Budget- und Zeitgründen, ein Baukastensystem benutzt, dessen Funktion man sich für einfache Anwendungsbereiche relativ schnell aneignen kann. Diese Vorgehensweise ist meistens nicht bedürfnisorientiert und langfristig geplant. Schnell muss die Webseite dann doch weitere Funktionen abdecken können, die selbst nicht mehr umgesetzt werden können, weil zu komplex; die zuständige Person verlässt die Gruppe und mit ihr geht alles Wissen hierzu; die Webseite ist nicht mobilgerecht umgesetzt; lädt zu langsam und sollte generell einmal professionell gestaltet werden, um funktionaler, weniger überladen und inklusiver zu sein. Meistens wird zudem weit mehr an Daten auf den Server geladen als eigentlich nötig, sowohl vom Baukastensystem als auch von Erstellenden selbst. Auch werden selten inklusive Frontenddesigns angeboten, die auch bpsw. sehschwachen Personen den Zugang ermöglichen. Gerade für Initiativen und Vereine im Nachhaltigkeitssektor, die an einer enkeltauglichen Zukunft arbeiten möchten, sollte eine bedarfs- und wertegerechte Onlinepräsenz hohe Priorität haben und personell sowie finanziell umsetzbar sein.
 
-Dieser Prozess des Entwickelns dieses Workflows in der Weiterbildung folgt dem Prozessmodell BADUZ. Durch die Methoden und Ergebnisse, die in den einzelnen Schritten erarbeitet wurden, wird auf den nächsten Seiten geführt.
+Um hierzu eine Option zu schaffen, möchte ich mit permakulturellen Methoden meinen bestehenden Arbeitsablauf als Webentwicklerin analysieren und unter Gesichtspunkten der Permakultur eine nachhaltigere Variante erschaffen. Dieser soll langfristig in meine selbstständige Praxis als freie Webentwicklerin übernommen werden, wo er kontinuierlich verbessert werden kann. Durch die Betrachtung meines Berufsfeldes mit den Prinzipien und Werten der Permakultur kann ein in sich stabileres System (der Workflow selbst) geschaffen werden, welches durch Wechselbeziehungen mit anderen Systemen und Akteuren sowie mehreren Sukzessionsplanungsansätzen dynamisch und lebendig wachsen kann. Hierbei können bereits in der Planungsphase verschiedene Bedürfnisse und Qualitäten herausgearbeitet werden, die dann vorgeben, welche Lösung es genau braucht. Diese soll dann soweit flexibel sein, dass eine Anpassung durch Änderung der Bedürfnisse jederzeit möglich ist (bspw. Erweiterung durch Onlineshop, Hinzufügen von einem Blog, etc.). Durch die flexible Planung fallen im besten Fall weitere Ernten wie bspw. ein verzweigteres Netzwerk an, die die Stabilität des Systems weiter stärken.
+
+Die Ergebnisse dieser Reise halte ich in dieser öffentlich zugänglichen Dokumentation fest, damit jede interessierte Person sich hiervon das entnehmen kann, was gebraucht wird. Dieser Prozess des Entwickelns dieses Workflows in der Weiterbildung folgt dem Prozessmodell BADUZ. Durch die Methoden und Ergebnisse, die in den folgenden Schritten erarbeitet wurden, wird auf den nächsten Seiten geführt.

docs/src/process/analysis/io-analysis.md

@@ -1,6 +1,6 @@
 # Input / Output-Analyse
 
-Mit dieser Analyse habe ich 6 Hauptelemente untersucht, um deren Wechselwirkungen in Bezug auf die anderen Elemente herauszuarbeiten. Hierdurch kann man auch fehlende Effekte oder Elemente aufzuspüren. Die Ergebnisse werden im folgenden kurz vorgestellt.
+Mit dieser Analyse habe ich 6 Hauptelemente untersucht, um deren Wechselwirkungen in Bezug auf die anderen Elemente herauszuarbeiten. Hierdurch kann man auch fehlende Effekte oder Elemente aufzuspüren. Die Ergebnisse werden im folgenden kurz vorgestellt. Konkrete Analogie? in Klammern kurz ein gebräuchlicheres Wort?
 
 1. <c-external-link url="https://cloud.nadineprigann.de/index.php/s/ZjdKmRqptRWp4FS" label="Workflow – geplant"/>
 
@@ -24,7 +24,7 @@ Helfen der Codebase und demnach auch mir, effizienter zu arbeiten und Ressourcen
 
 Es gibt bereits eine Boilerplate (Vorlage, Dummyprojekt) auf GitHub, welches den Startpunkt für jedes Projekt darstellt. Hierin gibt es bereits einige Komponenten, die häufig gebraucht werde wie Text und Seitenkopf. Von hier wird individuell umgesetzt. Innerhalb dieses Projekten braucht es also diese Codebase, in der alle Komponenten liegen, die verwendet werden sollen / können, praktisch die komplette Bandbreite. In dieser liegen logisch sortiert die Komponenten, mit denen baukastensystemartig die Anwendung zusammengestellt wird. Diese sollen einen separaten Ort erhalten, um die Struktur nicht zu verkomplizieren und beim build-process und launching systematisch ausgeschlossen werden zu können > verringert Seitengrösse. Weiter soll in einem bestimmten Intervall überprüft werden, ob die Struktur noch dem Styleguide entspricht und die Progressive Enhancement- und Graceful Degradation-Deklarationen angepasst werden können / müssen. Hierzu können Reminder innerhalb des Kanban-Workflows benutzt werden. Diese Base wird also als Repository Teil einer umfassenden Boilerplate, die zur Sicherheit auf GitHub, in der Cloud und lokal gesichert und regelmässig gebackupped wird. Der Backend-Code wird durch die remote-Funktion aktuell gehalten: so wird das Ursprungsrepo meines Chefs, auf welches meines aufbaut, immer als source of truth behandelt > Updates dieses Codes werden direkt angewandt.
 
-<c-text-block text="Zusätzlich soll es eine Liste geben, die beschreibt, wie bestimmte Funktionen umgesetzt werden, bspw. multiplanguage support, launching, etc. Wichtig: wie kann man Dinge wie ein *ScrollTo* oder *ScrollTrigger* als Vorlage einbinden? Gists?" type="feature"/>
+<c-text-block text="Zusätzlich soll es eine Liste geben, die beschreibt, wie bestimmte Funktionen umgesetzt werden, bspw. multiplanguage support, launching, etc. Wichtig: wie kann man Dinge wie ein *ScrollTo* oder *ScrollTrigger* als Vorlage einbinden? Gists?" label="feature" class="label-feature"/>
 
 Relation zu Elementen
 Vorteile sind der zentrale Punkt aller codetechnisch aktuellen Komponenten, die nicht mehr aus andereren Projekten zusammengesucht werden müssen. Hierbei droht die Gefahr, bereits überholte Strukturen zu benutzen, obsoleten Code weiter zu verwenden und Updates nicht zu berücksichtigen. Ausserdem vermeidet es den Zeitaufwand dieses Suchens. Er gliedert sich in die bereits bestehende Struktur (Boilerplate, Initiales Bereitstellen der Daten) ein und ist jederzeitz erweiter- und anpassbar. Dadurch hilft sie mir, meine Arbeit an einem Projekt und dadurch Ressourcen und Kosten zu reduzieren.

docs/src/process/celebration/celebration.md

@@ -0,0 +1,19 @@
+# Feiern
+
+An diesem Punkt, dem Ende der ersten Iteration des Prozesses, ist nun wichtig, einen Moment innezuhalten und wahrzunehmen, was bis jetzt entstanden ist und welche Qualitäten dieses Ergebnis mit sich bringt.
+
+## Workflow erstellt
+
+Ich konnte den bestehenden Workflow soweit vereinfacht darstellen und betrachten, dass mir ein erster Entwurf für eine permakulturelle Variante möglich war
+
+## Erstes Präzedenzprojekt
+
+Meine Tutorin für dieses Projekt Nesrin Caglak betraute  mich mit der Umsetzung ihrer Webseite. Dies passte zeitlich sehr gut zum Projektverlauf und diente mir daher als erstes Projekt zum Evaluieren des erarbeiteten Workflows.
+
+## Workflow mit 3 Säulen
+
+Es wurde im Verlauf des Projektes klar, dass der Workflow nicht nur die eigentliche Umsetzung der Webseite beinhalten sollte, sondern bereits viel früher angesetzt werden muss, um wirklich nachhaltige und bedarfsgerechte Ideen und Konzepte zu entwickeln, die im weiteren Verlauf umgesetzt werden können.
+
+##  Weitere Zusammenarbeit perspektivisch möglich
+
+Ich konnte in der Planungsphase des Projektes bereits erste Gespräche mit meinem Chef darüber führen, wie eine weitere Zusammenarbeit aussehen kann, wenn ich selbstständig arbeite. Dies hatte ursprünglich den Hintergrund, die (teils) backend- und serverseitige Entwicklung sowie die Wartung des Codes auf dessen Template die neuen Projekte basieren, sicherzustellen. Bei näherer Betrachtung ergab sich aus diesen Gedanken aber ein relativ stabile Idee der Zusammenarbeit: er könnte nicht nur die (komplexeren) Backends erstellen, für die mir (noch) die Kompetenz fehlt, sondern kann auch als beratende Instanz ansprechbar bleiben. Dies kann ebenfalls vergütet werden. Ausserdem können wir wechselseitig Projekte in die Zusammenarbeit einbringen, in denen ich weiterhin den Frontend-Teil übernehme und er weiterhin das Backend.

docs/src/process/design/principle-sets.md

@@ -61,4 +61,4 @@ Im Weiteren Verlauf, besonders im Design- und Umsetzungsschritt wurden allerding
 
 Dieses Prinzipienset muss noch genauer beobachtet werden, um konkretere Aussagen treffen zu können. Generell lässt sich aber sagen, dass die Ökosystemkriterien meines Erachtens umfassender und tiefer zu meinem Projekt passen und dieses rahmen. Zudem sehe ich diesen Workflow als Art eigenständigen Ablauf an, welcher sich selbst erhalten und tragen muss und dadurch durchaus Sytemcharakter hat, auf welches diese Kriterien zutreffen.
 
-<c-text-block text="Ziel kann ausserdem sein, ein Prinzipienset für nachhaltige Webentwicklung zusammenzutragen, welches bestehende PK-Prinzipiensets sowie Fagen aus dem Bereich des Sustainable Webdesigns vereint." />
+<c-text-block text="Ziel kann ausserdem sein, ein Prinzipienset für nachhaltige Webentwicklung zusammenzutragen, welches bestehende PK-Prinzipiensets sowie Fagen aus dem Bereich des Sustainable Webdesigns vereint." label="Sukzession" class="label-succession"/>