Makefile

@@ -10,7 +10,6 @@ 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:

dist/website/index.html

@@ -29,61 +29,42 @@ 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>
+Tutorial</a></li>
-<li><a href="https://openprocessing.org/sketch/create">p5-Editor auf
+<li><a href="https://editor.p5js.org">p5-Editor</a></li>
-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
+<li>Code-Beispiele
 <ul>
-<li><a href="https://openprocessing.org/sketch/1686945">Farbkacheln -
+<li>Beispiel 1 (Shapes)</li>
-Unanimiert</a></li>
+<li>Beispiel 2 (Color)</li>
-<li><a href="https://openprocessing.org/sketch/1687440">Noise
+<li>Beispiel 3 (Interaktion)</li>
-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="editor">Editor</h2>
+<iframe id="p5.js web editor embed" title="p5.js web editor embed" width="100%" height="700" src="https://editor.p5js.org/">
+</iframe>
 <h2 id="downloads">Downloads</h2>
 <ul>
 <li><a href="slides.pdf">Vortragsslides</a></li>
 </ul>
-<h2 id="weiterführendes">Weiterführendes</h2>
+<h2 id="weiterführende-links">Weiterführende Links</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>
+<li><a href="https://p5js.org/reference/">p5
+Bibliotheksreferenz</a><br />
 Eine Übersicht und Erklärungen zu wirklich allen Kommandos die p5js
-bereitstellt.</p></li>
+bereitstellt.</li>
-<li><p><a href="https://thecodingtrain.com">Daniel Shiffman - The Coding
+<li><a href="TODO">Interaktive Paramterübersicht</a></li>
-Train</a> Viele Tutorials und Beispielvideos zu p5js die auf eine sehr
+<li><a href="https://thecodingtrain.com">Daniel Shiffman - The Coding
-sympathische Art und Weise vorgestellt werden.</p></li>
+Train</a><br />
-<li><p><a href="openprocessing.org">OpenProcessing</a> Erkundet Tausende
+Viele Tutorials und Beispielvideos zu p5js die auf eine sehr
-Beispiele von p5js-Sketches</p></li>
+sympathische Art und Weise vorgestellt werden.</li>
-<li><p><a
+<li><a href="openprocessing.org">OpenProcessing</a><br />
-href="https://git.ag-link.xyz/lukaszett/Coding_Art_KEW_22">Repository
+Erkundet Tausende Beispiele von p5js-Sketches</li>
-der Workshopslides und Website</a></p>
-<footer>
-<p><a href="https://ag-link.xyz/impressum/">Impressum /
-Datenschutz</a></p>
-</footer></li>
 </ul>
+<footer>
+<a href="https://ag-link.xyz/impressum/">Impressum / Datenschutz</a>
+</footer>
 </body>
 </html>

dist/website/style.css

@@ -10,7 +10,7 @@ html {
 
 body {
     width: 80%;
-    max-width: 800px;
+    max-width: 1024px;
     margin: auto;
     background-color: #fdf6e3 !important;
 }

website/site.md

@@ -1,6 +1,6 @@
 ---
 title: Coding Art - Workshop für die KEW 2022
-include-in-header: <link rel="icon" type="image/x-icon" href="favicon.png" />
+include-in-header: <link rel="icon" type="image/x-icon" href="https://ag-link.xyz/assets/img/connection.png" />
 ---
 
 ## Ergebnisse des Workshops
@@ -9,37 +9,38 @@ include-in-header: <link rel="icon" type="image/x-icon" href="favicon.png" />
 
 ## Links
 
-- [Interaktives Tutorial](https://openprocessing.org/sketch/1685741) für Kleingruppen
+ - [Interaktives Tutorial](https://openprocessing.org/sketch/1685741)
-- [p5-Editor auf OpenProcessing](https://openprocessing.org/sketch/create) *oder* auf [der Seite der Processing-Foundation.](https://editor.p5js.org)
+ - [p5-Editor](https://editor.p5js.org)
-- [p5-Cheatsheet mit vielen wichtigen Kommandos auf einen Blick](https://bmoren.github.io/p5js-cheat-sheet/)
+ - [p5-Cheatsheet mit vielen wichtigen Kommandos auf einen Blick](https://bmoren.github.io/p5js-cheat-sheet/)
-- Code-Beispiele für das Plenum
+ - Code-Beispiele
-    - [Farbkacheln - Unanimiert](https://openprocessing.org/sketch/1686945)
+   - Beispiel 1 (Shapes)
-    - [Noise Ellipse](https://openprocessing.org/sketch/1687440)
+   - Beispiel 2 (Color)
-- [Sammlung weiterer Beispiele für die Kleingruppenphase](https://openprocessing.org/curation/81145)
+   - Beispiel 3 (Interaktion)
-- [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="700"
+    src="https://editor.p5js.org/">
+</iframe>
 
 ## Downloads
-- [Vortragsslides](slides.pdf)
+ - [Vortragsslides](slides.pdf)
 
-## Weiterführendes
+## Weiterführende Links
 
-Danke für eure Teilnahme am **Coding Art**-Workshop in der KEW 2022! Wenn euch 
+ - [p5 Bibliotheksreferenz](https://p5js.org/reference/)  
-die AG interessiert, schaut gerne bei einem unserer Plena vorbei. Schreibt uns 
+   Eine Übersicht und Erklärungen zu wirklich allen Kommandos die p5js bereitstellt.
-dafür gerne eine Mail an [ag-link@riseup.net](mailto:ag-link@riseup.net).
+ - [Interaktive Paramterübersicht](TODO)
+ - [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
 
-Am Donnerstag, dem 13.10.2022, findet um 19:00 Uhr im Hörsaal 17 des Hörsaalgebäudes 
+<footer>
-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>
     [Impressum / Datenschutz](https://ag-link.xyz/impressum/)
-    </footer>
+</footer>

website/style.css

@@ -10,7 +10,7 @@ html {
 
 body {
     width: 80%;
-    max-width: 800px;
+    max-width: 1024px;
     margin: auto;
     background-color: #fdf6e3 !important;
 }