Merge pull request #10 from cnoss/slides

Slides
cnoss · Oct 9, 2023 · 2cd7af5 · 2cd7af5
2 parents 592593a + a921546
commit 2cd7af5
Show file tree

Hide file tree

Showing 1,366 changed files with 31,018 additions and 148 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
diff --git a/.nojekyll b/.nojekyll
diff --git a/docs/index.html b/docs/index.html
@@ -15,7 +15,7 @@
       <main>
       <h1>Slides</h1>
       <h2>Screendesign</h2>
-<ul><li><a href="/presentations/screendesign/about-screendesign/">About Screendesign</a></li><li><a href="/presentations/screendesign/eindeutigkeit/">Eindeutigkeit</a></li><li><a href="/presentations/screendesign/linie/">Die Linie</a></li><li><a href="/presentations/screendesign/punkt/">Der Punkt</a></li><li><a href="/presentations/screendesign/raeumlichkeit/">Räumlichkeit</a></li><li><a href="/presentations/screendesign/semiotik/">Semiotik</a></li><li><a href="/presentations/screendesign/wahrnehmungsarbeit/">Wahrnehmungsarbeit</a></li></ul>
+<ul><li><a href="/presentations/screendesign/about-screendesign/">About Screendesign</a></li><li><a href="/presentations/screendesign/design-in-der-medieninformatik/">Design in der Medieninformatik (DONE)</a></li><li><a href="/presentations/screendesign/eindeutigkeit/">Eindeutigkeit</a></li><li><a href="/presentations/screendesign/farben/">Farben (DONE)</a></li><li><a href="/presentations/screendesign/figur-und-grund/">Figur &amp; Grund (DONE)</a></li><li><a href="/presentations/screendesign/flaeche-und-form/">Fläche &amp; Form (DONE)</a></li><li><a href="/presentations/screendesign/flow-and-transition/">Flow &amp; Transistion (WIP)</a></li><li><a href="/presentations/screendesign/gestaltgesetze/">Gestaltgesetze (WIP)</a></li><li><a href="/presentations/screendesign/interface-inventar/">Interface Inventar aufbauen und dokumentieren (DONE)</a></li><li><a href="/presentations/screendesign/layout/">Layout (WIP)</a></li><li><a href="/presentations/screendesign/linie/">Linie</a></li><li><a href="/presentations/screendesign/proportionen-und-abstaende/">Proportionen und Abstände (WIP)</a></li><li><a href="/presentations/screendesign/punkt/">Punkt</a></li><li><a href="/presentations/screendesign/raeumlichkeit/">Räumlichkeit</a></li><li><a href="/presentations/screendesign/semantisches-diff-axis-maps-moodboards/">Semantisches Differential, Axis Maps und Moodboards (WIP)</a></li><li><a href="/presentations/screendesign/semiotik/">Semiotik</a></li><li><a href="/presentations/screendesign/textsatz/">Textsatz (WIP)</a></li><li><a href="/presentations/screendesign/typographie/">Typographie (WIP)</a></li><li><a href="/presentations/screendesign/wahrnehmungsarbeit/">Wahrnehmungsarbeit</a></li></ul>
 <h2>Others</h2>
 <ul><li><a href="/presentations/misc/demo/">Demo</a></li><li><a href="/presentations/misc/pen-and-paper/">Pen &amp; Paper</a></li></ul>
       </main>

diff --git a/docs/presentations/misc/demo/000-intro/index.html b/docs/presentations/misc/demo/000-intro/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
   <html lang="de">
     <head>
-      <title>Wahrnehmungsarbeit // Christian Noss</title>
+      <title>Demo // Christian Noss</title>
       <meta name="robots" content="noindex">
     <meta name="googlebot" content="noindex">
     <meta name="googlebot-news" content="noindex">
@@ -24,12 +24,69 @@
       <section data-slide-class="intro" class="mi-slide 
       intro " data-background-color="#9313ce"   data-transition="zoom">
       <div class="is-full-width">
-<h1>Räumlichkeit</h1>
-<h2>Wie funktioniert visuelle Tiefenstaffelung?</h2>
+<h1>Demo Präsentation</h1>
+<h2>Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz</h2>
+</div>
+
+
+
+      </section>
+
+
+      <section data-slide-class="intro" class="mi-slide 
+      intro " data-background-color="#9313ce"   data-transition="zoom">
+      <div class="is-full-width">
+<h1>About Screendesign</h1>
+<h2>Worum geht es in diesem Modul?</h2>
+</div>
+
+
+      </section>
+
+
+      <section data-slide-class="intro" class="mi-slide 
+      intro " data-background-color="#9313ce"   data-transition="zoom">
+      <div class="is-full-width">
+<h1>Design in der Medieninformatik</h1>
+<h2>---</h2>
 </div>
 
 
 
+      </section>
+
+
+      <section data-slide-class="intro" class="mi-slide 
+      intro " data-background-color="#9313ce"   data-transition="zoom">
+      <div class="is-full-width">
+<h1>Eindeutigkeit</h1>
+<h2>Ordnen Sie Elemente so eindeutig wie möglich an.</h2>
+</div>
+
+
+      </section>
+
+
+      <section data-slide-class="intro" class="mi-slide 
+      intro " data-background-color="#9313ce"   data-transition="zoom">
+      <div class="is-full-width">
+<h1>Figur und Grund</h1>
+<h2>---</h2>
+</div>
+
+
+
+      </section>
+
+
+      <section data-slide-class="intro" class="mi-slide 
+      intro " data-background-color="#9313ce"   data-transition="zoom">
+      <div class="is-full-width">
+<h1>Fläche und Form</h1>
+<h2>--</h2>
+</div>
+
+
       </section>
 
 
@@ -47,8 +104,8 @@ <h2>Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz</h2>
       <section data-slide-class="intro" class="mi-slide 
       intro " data-background-color="#9313ce"   data-transition="zoom">
       <div class="is-full-width">
-<h1>About Screendesign</h1>
-<h2>Worum geht es in diesem Modul?</h2>
+<h1>Demo Präsentation</h1>
+<h2>Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz</h2>
 </div>
 
 
@@ -58,7 +115,8 @@ <h2>Worum geht es in diesem Modul?</h2>
       <section data-slide-class="intro" class="mi-slide 
       intro " data-background-color="#9313ce"   data-transition="zoom">
       <div class="is-full-width">
-<h1>Wahrnehmungsarbeit</h1>
+<h1>Demo Präsentation</h1>
+<h2>Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz</h2>
 </div>
 
 
@@ -68,8 +126,8 @@ <h1>Wahrnehmungsarbeit</h1>
       <section data-slide-class="intro" class="mi-slide 
       intro " data-background-color="#9313ce"   data-transition="zoom">
       <div class="is-full-width">
-<h1>Eindeutigkeit</h1>
-<h2>Ordnen Sie Elemente so eindeutig wie möglich an.</h2>
+<h1>Demo Präsentation</h1>
+<h2>Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz</h2>
 </div>
 
 
@@ -79,8 +137,19 @@ <h2>Ordnen Sie Elemente so eindeutig wie möglich an.</h2>
       <section data-slide-class="intro" class="mi-slide 
       intro " data-background-color="#9313ce"   data-transition="zoom">
       <div class="is-full-width">
-<h1>Semiotik</h1>
-<h2>Lehre von Zeichen und Zeichensystemen</h2>
+<h1>Linie</h1>
+<h2>zusammenhängendes, eindimensionales geometrisches Gebilde ohne Querausdehnung 😀</h2>
+</div>
+
+
+      </section>
+
+
+      <section data-slide-class="intro" class="mi-slide 
+      intro " data-background-color="#9313ce"   data-transition="zoom">
+      <div class="is-full-width">
+<h1>Demo Präsentation</h1>
+<h2>Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz</h2>
 </div>
 
 
@@ -101,11 +170,78 @@ <h2>Das kleinste und einfachste Gestaltungselement</h2>
       <section data-slide-class="intro" class="mi-slide 
       intro " data-background-color="#9313ce"   data-transition="zoom">
       <div class="is-full-width">
-<h1>Linie</h1>
-<h2>zusammenhängendes, eindimensionales geometrisches Gebilde ohne Querausdehnung 😀</h2>
+<h1>Räumlichkeit</h1>
+<h2>Wie funktioniert visuelle Tiefenstaffelung?</h2>
+</div>
+
+
+
+      </section>
+
+
+      <section data-slide-class="intro" class="mi-slide 
+      intro " data-background-color="#9313ce"   data-transition="zoom">
+      <div class="is-full-width">
+<h1>Demo Präsentation</h1>
+<h2>Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz</h2>
 </div>
 
 
+      </section>
+
+
+      <section data-slide-class="intro" class="mi-slide 
+      intro " data-background-color="#9313ce"   data-transition="zoom">
+      <div class="is-full-width">
+<h1>Semiotik</h1>
+<h2>Lehre von Zeichen und Zeichensystemen</h2>
+</div>
+
+
+      </section>
+
+
+      <section data-slide-class="intro" class="mi-slide 
+      intro " data-background-color="#9313ce"   data-transition="zoom">
+      <div class="is-full-width">
+<h1>Demo Präsentation</h1>
+<h2>Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz</h2>
+</div>
+
+
+      </section>
+
+
+      <section data-slide-class="intro" class="mi-slide 
+      intro " data-background-color="#9313ce"   data-transition="zoom">
+      <div class="is-full-width">
+<h1>Demo Präsentation</h1>
+<h2>Hier sieht man die verschiedenen Slidetypen und Shotcodes im Einsatz</h2>
+</div>
+
+
+      </section>
+
+
+      <section data-slide-class="intro" class="mi-slide 
+      intro " data-background-color="#9313ce"   data-transition="zoom">
+      <div class="is-full-width">
+<h1>Wahrnehmungsarbeit</h1>
+</div>
+
+
+      </section>
+
+
+      <section data-slide-class="intro" class="mi-slide 
+      intro " data-background-color="#9313ce"   data-transition="zoom">
+      <div class="is-full-width">
+<h1>Farbe</h1>
+<h2>---</h2>
+</div>
+
+
+
       </section>
 
         </div>

diff --git a/docs/presentations/misc/demo/010-cite/index.html b/docs/presentations/misc/demo/010-cite/index.html
@@ -27,6 +27,60 @@
 <cite>Max Mustermann, Beispiel</cite></blockquote>
 
 
+      </section>
+
+
+      <section data-slide-class="cite" class="mi-slide 
+      cite "    data-transition="convex">
+      <blockquote class="has-whitener"><p>Hier wird ein Zitat hübsch angezeigt.</p>
+<cite>Max Mustermann, Beispiel</cite></blockquote>
+
+
+      </section>
+
+
+      <section data-slide-class="cite" class="mi-slide 
+      cite "    data-transition="convex">
+      <blockquote class="has-whitener"><p>Hier wird ein Zitat hübsch angezeigt.</p>
+<cite>Max Mustermann, Beispiel</cite></blockquote>
+
+
+      </section>
+
+
+      <section data-slide-class="cite" class="mi-slide 
+      cite "    data-transition="convex">
+      <blockquote class="has-whitener"><p>Hier wird ein Zitat hübsch angezeigt.</p>
+<cite>Max Mustermann, Beispiel</cite></blockquote>
+
+
+      </section>
+
+
+      <section data-slide-class="cite" class="mi-slide 
+      cite "    data-transition="convex">
+      <blockquote class="has-whitener"><p>Hier wird ein Zitat hübsch angezeigt.</p>
+<cite>Max Mustermann, Beispiel</cite></blockquote>
+
+
+      </section>
+
+
+      <section data-slide-class="cite" class="mi-slide 
+      cite "    data-transition="convex">
+      <blockquote class="has-whitener"><p>Hier wird ein Zitat hübsch angezeigt.</p>
+<cite>Max Mustermann, Beispiel</cite></blockquote>
+
+
+      </section>
+
+
+      <section data-slide-class="cite" class="mi-slide 
+      cite "    data-transition="convex">
+      <blockquote class="has-whitener"><p>Hier wird ein Zitat hübsch angezeigt.</p>
+<cite>Max Mustermann, Beispiel</cite></blockquote>
+
+
       </section>
 
         </div>

diff --git a/docs/presentations/misc/demo/020-watzlawick/index.html b/docs/presentations/misc/demo/020-watzlawick/index.html
@@ -30,6 +30,60 @@
       </section>
 
 
+      <section data-slide-class="cite" class="mi-slide 
+      cite "  data-background-image="./images/paul.jpg"  data-transition="convex">
+      <blockquote class="has-whitener"><p>Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.</p>
+<cite>Max Mustermann, Beispiel</cite><div class="src">Watzlawick, Paul (2016): Man kann nicht nicht kommunizieren. Das Lesebuch. 2., unveränderte Auflage. Hg. v. Trude Trunk. Bern: Hogrefe. Online verfügbar unter http://d-nb.info/1079675604/04.</div></blockquote>
+
+
+      </section>
+
+
+      <section data-slide-class="cite" class="mi-slide 
+      cite "  data-background-image="./images/paul.jpg"  data-transition="convex">
+      <blockquote class="has-whitener"><p>Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.</p>
+<cite>Max Mustermann, Beispiel</cite><div class="src">Watzlawick, Paul (2016): Man kann nicht nicht kommunizieren. Das Lesebuch. 2., unveränderte Auflage. Hg. v. Trude Trunk. Bern: Hogrefe. Online verfügbar unter http://d-nb.info/1079675604/04.</div></blockquote>
+
+
+      </section>
+
+
+      <section data-slide-class="cite" class="mi-slide 
+      cite "  data-background-image="./images/paul.jpg"  data-transition="convex">
+      <blockquote class="has-whitener"><p>Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.</p>
+<cite>Max Mustermann, Beispiel</cite><div class="src">Watzlawick, Paul (2016): Man kann nicht nicht kommunizieren. Das Lesebuch. 2., unveränderte Auflage. Hg. v. Trude Trunk. Bern: Hogrefe. Online verfügbar unter http://d-nb.info/1079675604/04.</div></blockquote>
+
+
+      </section>
+
+
+      <section data-slide-class="cite" class="mi-slide 
+      cite "  data-background-image="./images/paul.jpg"  data-transition="convex">
+      <blockquote class="has-whitener"><p>Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.</p>
+<cite>Max Mustermann, Beispiel</cite><div class="src">Watzlawick, Paul (2016): Man kann nicht nicht kommunizieren. Das Lesebuch. 2., unveränderte Auflage. Hg. v. Trude Trunk. Bern: Hogrefe. Online verfügbar unter http://d-nb.info/1079675604/04.</div></blockquote>
+
+
+      </section>
+
+
+      <section data-slide-class="cite" class="mi-slide 
+      cite "  data-background-image="./images/paul.jpg"  data-transition="convex">
+      <blockquote class="has-whitener"><p>Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.</p>
+<cite>Max Mustermann, Beispiel</cite><div class="src">Watzlawick, Paul (2016): Man kann nicht nicht kommunizieren. Das Lesebuch. 2., unveränderte Auflage. Hg. v. Trude Trunk. Bern: Hogrefe. Online verfügbar unter http://d-nb.info/1079675604/04.</div></blockquote>
+
+
+      </section>
+
+
+      <section data-slide-class="cite" class="mi-slide 
+      cite "  data-background-image="./images/paul.jpg"  data-transition="convex">
+      <blockquote class="has-whitener"><p>Cite. Diesmal mit Bild, was im Front Matter angegeben werden kann. Gleiches gilt für die Quelle.</p>
+<cite>Max Mustermann, Beispiel</cite><div class="src">Watzlawick, Paul (2016): Man kann nicht nicht kommunizieren. Das Lesebuch. 2., unveränderte Auflage. Hg. v. Trude Trunk. Bern: Hogrefe. Online verfügbar unter http://d-nb.info/1079675604/04.</div></blockquote>
+
+
+      </section>
+
+
       <section data-slide-class="cite" class="mi-slide 
       cite "  data-background-image="./images/paul.jpg"  data-transition="convex">
       <blockquote class="has-whitener"><p>Man kann nicht nicht kommunizieren.</p>