diff --git a/.gitignore b/.gitignore index 36a416f..e43b0f9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1 @@ .DS_Store -dist diff --git a/Makefile b/Makefile index 4f1c389..4c8ea2e 100644 --- a/Makefile +++ b/Makefile @@ -10,6 +10,7 @@ dist: website: dist cp -f website/style.css dist/website/style.css cp -f dist/slides.pdf dist/website/slides.pdf + cp -f imgs/favicon.png dist/website/favicon.png pandoc website/site.md -o dist/website/index.html -c style.css -s qrcode: diff --git a/dist/slides.pdf b/dist/slides.pdf new file mode 100644 index 0000000..c30781e Binary files /dev/null and b/dist/slides.pdf differ diff --git a/dist/website/favicon.png b/dist/website/favicon.png new file mode 100644 index 0000000..4aa5101 Binary files /dev/null and b/dist/website/favicon.png differ diff --git a/dist/website/index.html b/dist/website/index.html new file mode 100644 index 0000000..f0f75d3 --- /dev/null +++ b/dist/website/index.html @@ -0,0 +1,89 @@ + + + + + + + Coding Art - Workshop für die KEW 2022 + + + + + +
+

Coding Art - Workshop für die KEW 2022

+
+

Ergebnisse des Workshops

+

Hier ist noch nichts… wenn ihr mögt, können wir im Anschluss an +den Workshop eure Ergebnisse hier “ausstellen”!

+ + +

Downloads

+ +

Weiterführendes

+

Danke für eure Teilnahme am Coding Art-Workshop in +der KEW 2022! Wenn euch die AG interessiert, schaut gerne bei einem +unserer Plena vorbei. Schreibt uns dafür gerne eine Mail an ag-link@riseup.net.

+

Am Donnerstag, dem 13.10.2022, findet um 19:00 Uhr im Hörsaal 17 des +Hörsaalgebäudes noch die letzte Veranstaltung der AG Link in der KEW +statt. Beim Vortrag “Toxischer Optimismus” erklärt uns Timo Daum, wie Tech-Konzerne +gesellschaftliche Probleme mit Technologie lösen möchten und wie das +(nicht) möglich ist.
+Mehr +Informationen findet ihr hier.

+

Zuletzt findet ihr hier noch eine Liste mit weiterführenden +Links:

+ + + diff --git a/dist/website/slides.pdf b/dist/website/slides.pdf new file mode 100644 index 0000000..c30781e Binary files /dev/null and b/dist/website/slides.pdf differ diff --git a/dist/website/style.css b/dist/website/style.css new file mode 100644 index 0000000..f0c6ccb --- /dev/null +++ b/dist/website/style.css @@ -0,0 +1,51 @@ +:root { + --link-color: #00755e; + --visited-color: #00755e; +} + +html { + font-family: sans-serif; + size: 12px; +} + +body { + width: 80%; + max-width: 800px; + margin: auto; + background-color: #fdf6e3 !important; +} + +footer { + text-align: center; + margin-top: 4em; + padding-bottom: 1em; +} + + +a { + text-decoration: none; + font-weight: bold; + color: var(--link-color); +} + +h2 { + margin-top: 1.5em; +} + +h2:after { + content: ""; + background-image: url("https://ag-link.xyz/assets/img/connection.png"); + background-size: contain; + width: .75em; + height: .75em; + display: inline-block; + margin-left: .3em; +} + +li { + padding: 0.5em 0 0 0; +} + +li li { + padding: 0; +} diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..7bac51a --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,20 @@ +version: '3' + +services: + nginx: + image: nginx + container_name: art.ag-link.xyz + restart: unless-stopped + volumes: + - dist/website:/usr/share/nginx/html:ro + networks: + - proxy + labels: + - "traefik.enable=true" + - "traefik.http.routers.art.rule=Host(`art.ag-link.xyz`)" + - "traefik.http.routers.art.entrypoints=websecure" + - "traefik.http.routers.art.tls.certresolver=art-resolver" + +networks: + proxy: + external: true diff --git a/imgs/favicon.png b/imgs/favicon.png new file mode 100644 index 0000000..4aa5101 Binary files /dev/null and b/imgs/favicon.png differ diff --git a/imgs/logo.png b/imgs/logo.png new file mode 100644 index 0000000..96c090a Binary files /dev/null and b/imgs/logo.png differ diff --git a/slides/slides.md b/slides/slides.md index b87dd8d..b7bd908 100644 --- a/slides/slides.md +++ b/slides/slides.md @@ -4,8 +4,9 @@ subtitle: Workshop für die kritischen Einführungswochen 2022 author: AG Link für kritische Informatik, Marie und Lukas date: "11. Oktober 2022" classoption: "aspectratio=169" +graphics: yes header-includes: - - \usepackage[labelformat=empty]{caption} + - \usepackage[labelformat=empty, textformat=empty]{caption} --- # Hallo Welt! @@ -13,17 +14,21 @@ header-includes: ## Wer sind wir? - Marie und Lukas -- AG Link für kritische Informatik +- AG Link für kritische Informatik + - seit 2018 - **[ag-link.xyz](https://ag-link.xyz)** + - **ag-link@riseup.net** + - Plenum immer Mittwochs 19 Uhr - schreibt uns gerne eine Mail falls ihr Bock habt! + +![AG Link](imgs/logo.png){ width=100px } ## Ablauf 1. -> Einstieg <- -2. Einführung p5js -3. Interaktives Tutorial in Kleingruppe -4. Beispiele generativer Kunst -5. Eigene Kunst in Kleingruppen -6. Abschluss +2. Interaktives Tutorial in Kleingruppe (Kleingruppe) +3. Beispiele generativer Kunst (Plenum) +4. Eigene Kunst in Kleingruppen (Kleingruppe) +5. Abschluss ## Was haben wir heute vor? @@ -31,10 +36,14 @@ header-includes: - keine AI / Neuronale Netze / ... - Erste Erfahrungen mit **p5.js** machen - Nicht: Programmierprofis werden + - Gerade wenn ihr noch nie programmiert habt: Nicht jede Zeile der Beispiele wird verständlich für euch sein. + - Falls ihr schon etwas Erfahrung habt: Nicht wundern, wenn streckenweise von Konventionen abgewichen wird. ## Und wer seid ihr? -![Menti](imgs/menti.png) +![Menti (Code: 4532 6343)](imgs/menti.png){ height=200px } + +- Menti.com (Code: 4532 6343) ## Wie wir heute vorgehen @@ -42,6 +51,4 @@ header-includes: - p5.js - Alle Links und Ressourcen findet ihr unter **art.ag-link.xyz** -## P5.JS - -- **Livedemo!** +# Los geht's! diff --git a/website/site.md b/website/site.md index 9a18404..b14dd0d 100644 --- a/website/site.md +++ b/website/site.md @@ -1,37 +1,45 @@ --- title: Coding Art - Workshop für die KEW 2022 +include-in-header: --- +## Ergebnisse des Workshops + +*Hier ist noch nichts... wenn ihr mögt, können wir im Anschluss an den Workshop eure Ergebnisse hier "ausstellen"!* + ## Links - - [Interaktives Tutorial](https://openprocessing.org/sketch/1642700) - - [p5-Editor](https://editor.p5js.org) - - Code-Beispiele - - Beispiel 1 (Shapes) - - Beispiel 2 (Color) - - Beispiel 3 (Interaktion) - - [Mehr Informationen über die AG Link](https://ag-link.xyz) - - -## Editor - - +- [Interaktives Tutorial](https://openprocessing.org/sketch/1685741) für Kleingruppen +- [p5-Editor auf OpenProcessing](https://openprocessing.org/sketch/create) *oder* auf [der Seite der Processing-Foundation.](https://editor.p5js.org) +- [p5-Cheatsheet mit vielen wichtigen Kommandos auf einen Blick](https://bmoren.github.io/p5js-cheat-sheet/) +- Code-Beispiele für das Plenum + - [Farbkacheln - Unanimiert](https://openprocessing.org/sketch/1686945) + - [Noise Ellipse](https://openprocessing.org/sketch/1687440) +- [Sammlung weiterer Beispiele für die Kleingruppenphase](https://openprocessing.org/curation/81145) +- [Mehr Informationen über die AG Link](https://ag-link.xyz) ## Downloads - - [Vortragsslides](slides.pdf) +- [Vortragsslides](slides.pdf) -## Weiterführende Links +## Weiterführendes - - [p5 Bibliotheksreferenz](https://p5js.org/reference/) - - [Interaktive Paramterübersicht](TODO) - - [Daniel Shiffman - The Coding Train](https://thecodingtrain.com) - - [OpenProcessing](openprocessing.org) +Danke für eure Teilnahme am **Coding Art**-Workshop in der KEW 2022! Wenn euch +die AG interessiert, schaut gerne bei einem unserer Plena vorbei. Schreibt uns +dafür gerne eine Mail an [ag-link@riseup.net](mailto:ag-link@riseup.net). - diff --git a/website/style.css b/website/style.css index 04fffb2..f0c6ccb 100644 --- a/website/style.css +++ b/website/style.css @@ -10,14 +10,15 @@ html { body { width: 80%; - max-width: 1024px; + max-width: 800px; margin: auto; background-color: #fdf6e3 !important; } footer { text-align: center; - margin-top: 3em; + margin-top: 4em; + padding-bottom: 1em; } @@ -27,6 +28,10 @@ a { color: var(--link-color); } +h2 { + margin-top: 1.5em; +} + h2:after { content: ""; background-image: url("https://ag-link.xyz/assets/img/connection.png"); @@ -36,3 +41,11 @@ h2:after { display: inline-block; margin-left: .3em; } + +li { + padding: 0.5em 0 0 0; +} + +li li { + padding: 0; +}