Compare commits

...

12 commits

Author SHA1 Message Date
9954959d5f current dist state 2022-10-11 14:15:05 +02:00
0aba03484e favicon 2022-10-11 14:14:40 +02:00
e44a0b362c final changes to website 2022-10-11 14:03:02 +02:00
5edced6568 update tut link 2022-10-08 13:02:28 +02:00
c6d2f3e447 plenumstermin 2022-10-07 14:47:13 +02:00
f8087e39c3 add 'los gehts' 2022-10-07 14:39:05 +02:00
4910b2e3dc add slides / website 2022-10-07 14:36:27 +02:00
79255c6470 Meeting änderungen 2022-10-07 14:35:33 +02:00
4bfd8615a9 edit docker-compose to work on ag-link.xyz 2022-10-07 13:57:52 +02:00
a3a4e35599 tiny changes to slides 2022-10-07 13:55:13 +02:00
246caf7392 tiny changes to website 2022-10-07 13:54:45 +02:00
3f53ff195d add dockercompose file for static serving 2022-09-11 15:23:09 +02:00
13 changed files with 227 additions and 39 deletions

1
.gitignore vendored
View file

@ -1,2 +1 @@
.DS_Store .DS_Store
dist

View file

@ -10,6 +10,7 @@ dist:
website: dist website: dist
cp -f website/style.css dist/website/style.css cp -f website/style.css dist/website/style.css
cp -f dist/slides.pdf dist/website/slides.pdf 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 pandoc website/site.md -o dist/website/index.html -c style.css -s
qrcode: qrcode:

BIN
dist/slides.pdf vendored Normal file

Binary file not shown.

BIN
dist/website/favicon.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

89
dist/website/index.html vendored Normal file
View file

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>Coding Art - Workshop für die KEW 2022</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
<link rel="stylesheet" href="style.css" />
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]-->
</head>
<body>
<header id="title-block-header">
<h1 class="title">Coding Art - Workshop für die KEW 2022</h1>
</header>
<h2 id="ergebnisse-des-workshops">Ergebnisse des Workshops</h2>
<p><em>Hier ist noch nichts… wenn ihr mögt, können wir im Anschluss an
den Workshop eure Ergebnisse hier “ausstellen”!</em></p>
<h2 id="links">Links</h2>
<ul>
<li><a href="https://openprocessing.org/sketch/1685741">Interaktives
Tutorial</a> für Kleingruppen</li>
<li><a href="https://openprocessing.org/sketch/create">p5-Editor auf
OpenProcessing</a> <em>oder</em> auf <a
href="https://editor.p5js.org">der Seite der
Processing-Foundation.</a></li>
<li><a href="https://bmoren.github.io/p5js-cheat-sheet/">p5-Cheatsheet
mit vielen wichtigen Kommandos auf einen Blick</a></li>
<li>Code-Beispiele für das Plenum
<ul>
<li><a href="https://openprocessing.org/sketch/1686945">Farbkacheln -
Unanimiert</a></li>
<li><a href="https://openprocessing.org/sketch/1687440">Noise
Ellipse</a></li>
</ul></li>
<li><a href="https://openprocessing.org/curation/81145">Sammlung
weiterer Beispiele für die Kleingruppenphase</a></li>
<li><a href="https://ag-link.xyz">Mehr Informationen über die AG
Link</a></li>
</ul>
<h2 id="downloads">Downloads</h2>
<ul>
<li><a href="slides.pdf">Vortragsslides</a></li>
</ul>
<h2 id="weiterführendes">Weiterführendes</h2>
<p>Danke für eure Teilnahme am <strong>Coding Art</strong>-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 <a
href="mailto:ag-link@riseup.net">ag-link@riseup.net</a>.</p>
<p>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 <a
href="http://www.2pir.de">Timo Daum</a>, wie Tech-Konzerne
gesellschaftliche Probleme mit Technologie lösen möchten und wie das
(nicht) möglich ist.<br />
<a
href="https://ag-link.xyz/event/2022/10/13/Toxischer-Optimismus.html">Mehr
Informationen findet ihr hier.</a></p>
<p>Zuletzt findet ihr hier noch eine Liste mit weiterführenden
Links:</p>
<ul>
<li><p><a href="https://p5js.org/reference/">p5 Bibliotheksreferenz</a>
Eine Übersicht und Erklärungen zu wirklich allen Kommandos die p5js
bereitstellt.</p></li>
<li><p><a href="https://thecodingtrain.com">Daniel Shiffman - The Coding
Train</a> Viele Tutorials und Beispielvideos zu p5js die auf eine sehr
sympathische Art und Weise vorgestellt werden.</p></li>
<li><p><a href="openprocessing.org">OpenProcessing</a> Erkundet Tausende
Beispiele von p5js-Sketches</p></li>
<li><p><a
href="https://git.ag-link.xyz/lukaszett/Coding_Art_KEW_22">Repository
der Workshopslides und Website</a></p>
<footer>
<p><a href="https://ag-link.xyz/impressum/">Impressum /
Datenschutz</a></p>
</footer></li>
</ul>
</body>
</html>

BIN
dist/website/slides.pdf vendored Normal file

Binary file not shown.

51
dist/website/style.css vendored Normal file
View file

@ -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;
}

20
docker-compose.yml Normal file
View file

@ -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

BIN
imgs/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
imgs/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

View file

@ -4,8 +4,9 @@ subtitle: Workshop für die kritischen Einführungswochen 2022
author: AG Link für kritische Informatik, Marie und Lukas author: AG Link für kritische Informatik, Marie und Lukas
date: "11. Oktober 2022" date: "11. Oktober 2022"
classoption: "aspectratio=169" classoption: "aspectratio=169"
graphics: yes
header-includes: header-includes:
- \usepackage[labelformat=empty]{caption} - \usepackage[labelformat=empty, textformat=empty]{caption}
--- ---
# Hallo Welt! # Hallo Welt!
@ -14,16 +15,20 @@ header-includes:
- Marie und Lukas - 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.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 ## Ablauf
1. -> Einstieg <- 1. -> Einstieg <-
2. Einführung p5js 2. Interaktives Tutorial in Kleingruppe (Kleingruppe)
3. Interaktives Tutorial in Kleingruppe 3. Beispiele generativer Kunst (Plenum)
4. Beispiele generativer Kunst 4. Eigene Kunst in Kleingruppen (Kleingruppe)
5. Eigene Kunst in Kleingruppen 5. Abschluss
6. Abschluss
## Was haben wir heute vor? ## Was haben wir heute vor?
@ -31,10 +36,14 @@ header-includes:
- keine AI / Neuronale Netze / ... - keine AI / Neuronale Netze / ...
- Erste Erfahrungen mit **p5.js** machen - Erste Erfahrungen mit **p5.js** machen
- Nicht: Programmierprofis werden - 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? ## 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 ## Wie wir heute vorgehen
@ -42,6 +51,4 @@ header-includes:
- p5.js - p5.js
- Alle Links und Ressourcen findet ihr unter **art.ag-link.xyz** - Alle Links und Ressourcen findet ihr unter **art.ag-link.xyz**
## P5.JS # Los geht's!
- **Livedemo!**

View file

@ -1,36 +1,44 @@
--- ---
title: Coding Art - Workshop für die KEW 2022 title: Coding Art - Workshop für die KEW 2022
include-in-header: <link rel="icon" type="image/x-icon" href="favicon.png" />
--- ---
## Ergebnisse des Workshops
*Hier ist noch nichts... wenn ihr mögt, können wir im Anschluss an den Workshop eure Ergebnisse hier "ausstellen"!*
## Links ## Links
- [Interaktives Tutorial](https://openprocessing.org/sketch/1642700) - [Interaktives Tutorial](https://openprocessing.org/sketch/1685741) für Kleingruppen
- [p5-Editor](https://editor.p5js.org) - [p5-Editor auf OpenProcessing](https://openprocessing.org/sketch/create) *oder* auf [der Seite der Processing-Foundation.](https://editor.p5js.org)
- Code-Beispiele - [p5-Cheatsheet mit vielen wichtigen Kommandos auf einen Blick](https://bmoren.github.io/p5js-cheat-sheet/)
- Beispiel 1 (Shapes) - Code-Beispiele für das Plenum
- Beispiel 2 (Color) - [Farbkacheln - Unanimiert](https://openprocessing.org/sketch/1686945)
- Beispiel 3 (Interaktion) - [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) - [Mehr Informationen über die AG Link](https://ag-link.xyz)
## Editor
<iframe id="p5.js web editor embed"
title="p5.js web editor embed"
width="100%"
height="800"
src="https://editor.p5js.org/">
</iframe>
## Downloads ## Downloads
- [Vortragsslides](slides.pdf) - [Vortragsslides](slides.pdf)
## Weiterführende Links ## Weiterführendes
- [p5 Bibliotheksreferenz](https://p5js.org/reference/) Danke für eure Teilnahme am **Coding Art**-Workshop in der KEW 2022! Wenn euch
- [Interaktive Paramterübersicht](TODO) die AG interessiert, schaut gerne bei einem unserer Plena vorbei. Schreibt uns
- [Daniel Shiffman - The Coding Train](https://thecodingtrain.com) dafür gerne eine Mail an [ag-link@riseup.net](mailto:ag-link@riseup.net).
- [OpenProcessing](openprocessing.org)
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](http://www.2pir.de), wie Tech-Konzerne
gesellschaftliche Probleme mit Technologie lösen möchten und wie das (nicht) möglich ist.
[Mehr Informationen findet ihr hier.](https://ag-link.xyz/event/2022/10/13/Toxischer-Optimismus.html)
Zuletzt findet ihr hier noch eine Liste mit weiterführenden Links:
* [p5 Bibliotheksreferenz](https://p5js.org/reference/) Eine Übersicht und Erklärungen zu wirklich allen Kommandos die p5js bereitstellt.
* [Daniel Shiffman - The Coding Train](https://thecodingtrain.com) Viele Tutorials und Beispielvideos zu p5js die auf eine sehr sympathische Art und Weise vorgestellt werden.
* [OpenProcessing](openprocessing.org) Erkundet Tausende Beispiele von p5js-Sketches
* [Repository der Workshopslides und Website](https://git.ag-link.xyz/lukaszett/Coding_Art_KEW_22)
<footer> <footer>
[Impressum / Datenschutz](https://ag-link.xyz/impressum/) [Impressum / Datenschutz](https://ag-link.xyz/impressum/)

View file

@ -10,14 +10,15 @@ html {
body { body {
width: 80%; width: 80%;
max-width: 1024px; max-width: 800px;
margin: auto; margin: auto;
background-color: #fdf6e3 !important; background-color: #fdf6e3 !important;
} }
footer { footer {
text-align: center; text-align: center;
margin-top: 3em; margin-top: 4em;
padding-bottom: 1em;
} }
@ -27,6 +28,10 @@ a {
color: var(--link-color); color: var(--link-color);
} }
h2 {
margin-top: 1.5em;
}
h2:after { h2:after {
content: ""; content: "";
background-image: url("https://ag-link.xyz/assets/img/connection.png"); background-image: url("https://ag-link.xyz/assets/img/connection.png");
@ -36,3 +41,11 @@ h2:after {
display: inline-block; display: inline-block;
margin-left: .3em; margin-left: .3em;
} }
li {
padding: 0.5em 0 0 0;
}
li li {
padding: 0;
}