uclab-potsdam · coftob · Jul 6, 2024
diff --git a/README.md b/README.md
@@ -1,151 +1,189 @@
-# Syllabus Site
+# »Mit dem roten Keil schlage die Weißen«
 
-This is an experiment in documenting design courses and a template for rendering Markdown files as one-page websites.
+Das Plakat „Mit dem roten Keil schlage die Weißen“ (Original auf russisch: „Клином красным бей белых“) von El Lissitzky aus dem Jahr 1920 ist ein Propagandaplakat für die rote Armee zu Zeiten der politischen Umstrukturierung und des Bürgerkriegs in Russland nach der Oktoberrevolution. Es entstand in Witebsk, damals Russland – heute Weißrussland – und hat dessen Titel von dem Schriftzug, welcher sich auf dem Plakat befindet, übernommen.
 
 
-Design is all about process, yet we tend to focus on results when documenting design courses. This is an attempt to shift the focus from the latter to the former.
 
 
-Scroll along to find out  
-[why](#why), [what](#what), [how](#how) & [who](#who).  
+![](img/parts/Einzelteile-13.png)
 
 
----
+![](img/parts/Einzelteile.png)
 
 
-## Why 
+### Leitfaden
+Der Leitfaden meiner Narration ist der Aufsatz von Prof. Dr. Verena Krieger 
+„El Lissitzkys "Roter Keil" - 4 Kontexte und 3 Bildlektüren.  Die Semantik der Form in Ikonologischer Perspektive“ (2015). [<sup>&lbrack;1&rbrack;</sup>](#quellen) 
 
-In the realm of design education and research, there's a common emphasis on outcomes—be it presentations, prototypes, or papers. This focus, while essential, tends to sideline the  exploratory and dynamic process leading to these results. The journey to the final projects is marked by twists, turns, and tangents. This is where much of the learning and discovery occurs. 
 
 
-*Syllabus Site* was conceived as a tool to highlight and document these critical but frequently overlooked aspects of design projects. It serves as a dynamic interface chronicling the voyage through readings, workshops, and discussions.
+Darin stellt sie zu Beginn die Ausgangsfrage in den Raum, warum dieses Werk von der Kunsthistorik so wenig erforscht sei und zeigt mit ihrer Narration die Vielseitigkeit und Komplexität dieses Werks auf.
 
 
-This approach not only retains but celebrates the meandering nature of design as an intellectual journey, ensuring that the wealth of inspirations—from historical examples and theoretical frameworks to contemporary projects and research studies—is preserved and made accessible. 
 
+![](img/parts/Einzelteile-12.png)
 
----
+
+![](img/parts/Einzelteile-11.png)
 
 
-## What
+ Ich baue meine Auseinandersetzung prinzipiell auf ihre Argumentation auf, während sie jedoch versucht, die Komplexität des Plakats zu belegen, nehme ich in meiner Narration diesen Fakt bereits als gegeben an und beschäftige mich stattdessen mit der Frage nach der Dualität des „Roten Keils“, welche sich durch die verschiedenen Deutungen wie ein roter Faden durchzieht.
 
-A *Syllabus Site* is a one-page website arranging its elements along sections that can be scrolled vertically.
 
+Was damit gemeint ist, erkläre ich im Folgenden.
 
-### Design
 
-The webpage is designed with the aim to open an evocative information space, where the sources that foster creativity, dialogue, and learning can be gathered, recapitulated, and appreciated. The monolithic structure of conventional documents is broken up, by introducing a relational quality to the connections between sections and items.
+![](img/parts/Einzelteile-10.png)
+
+
+---
 
 
-### Structure
+## Dualität von Krieg & Kunst
 
-There are two main types of elements:
+„Mit dem roten Keil schlage die Weißen“ stellt auf vielen Ebenen einen Zustand der Ambivalenz dar!
+![](img/artwork/Bild_mit_untertitel_01.png)
 
-- **Sections** – Larger blocks gather the material for weekly course sessions.
-- **Items** – Smaller elements feature images, text, and other content.
 
-Each item is connected with its section by a thin line. The navigation (≡) gives access to all sections.
 
-The last section acts as the footer, where the typical array of logos and links belongs.
 
+![](img/parts/Einzelteile-15.png)
 
-### Examples
 
-The template is in use to document the following [Interface Design](https://interface.fh-potsdam.de) courses offered at [FH Potsdam](https://www.fh-potsdam.de/):
+Ob in der Komposition, welche sich konsequent in Form, Farbe und Kontrast einer Zweiteilung bedient, oder in der Darstellung der polarisierten Bevölkerung im Bürgerkrieg, welche sich lediglich als eine fragmentierte Gesellschaft zwischen den Fronten begegnet. 
 
-- **[Decolonizing Data Visualization – Visualizing Postcolonies](https://infovis.fh-potsdam.de/decolonizing/)** (Summer 2022)
-- **[Organigrams for/from the future](https://infovis.fh-potsdam.de/organigrams/)** (Summer 2023)
 
+### Ausgangsfrage
+Wie es die Ironie so will, ist auch das Werk selber genau in der Position gelandet, die es abbildet, nämlich in einem Zustand der Zerrissenheit, jedoch in einem anderen Kontext, als man vielleicht annehmen mag. 
 
-<img src='img/decolonizing.webp' class='noresize'>
 
-[Decolonizing Data Visualization – Visualizing Postcolonies](https://infovis.fh-potsdam.de/decolonizing/)
+Gemeint ist der kunsthistorische Diskurs um das Werk, oder besser gesagt, der Mangel an diesem. Obwohl sich der „Rote Keil“, sowohl in der Erforschung politischer Plakatkunst, als auch im kunsthistorischen Raum, einer durchaus großen Bekanntheit erfreut, sieht sich keine dieser Disziplinen für die Erforschung dieses Plakats zuständig. 
 
 
-<img src='img/organigrams.webp' class='noresize'>
+So scheint die Propagandaforschung das Fehlen einer gegenständlichen Ikonographie, was sich im politischen Plakat nicht durchgesetzt hatte, als Ausschlusskriterium für einen potentiellen Forschungswert anzusehen, während die Kunsthistorik die offensichtliche Lesbarkeit der Aussage als Qualitätsmangel im künstlerischen Wert belächelt. Währenddessen findet sich der „Rote Keil“ erneut im Zentrum des Konflikts ein, bei welchem von beiden Parteien leider mal wieder nur in schwarz-weiß gedacht wird.
 
-[Organigrams for/from the future](https://infovis.fh-potsdam.de/organigrams/)
+
+Dabei ist gerade das Zusammenwirken von Abstraktion und Kommunikation – Propagandaplakat und Kunstwerk – so spannend in der Fragestellung nach der Semantik der gegenstandslosen Formsprache und der Erforschung diverser kultureller und wahrnehmungspsychologischer Einflüsse.
+
+
+### Mein roter Faden
+Ich stellte mir die Frage, ob sich neben dem Offensichtlichen auch andere Formen der Dualität in den Deutungen finden lassen, was im Folgenden auch zum zentralen Punkt meiner Auseinandersetzung wird.
 
 
 ---
 
+# Kultureller Kontext
+Bevor ich in die tatsächliche Bildanalyse gehe, ist es wichtig, einen grundlegenden historischen, politischen und künstlerischen Kontext zu etablieren, sowohl zur russischen Gesellschaft zur damaligen Zeit, als auch zu Lissitzky und seinem Werk, um später die Zusammenhänge in den Deutungen besser nachzuvollziehen. 
+
+
+
+ ![](img/parts/Einzelteile-8.png)
+
+
+
+### Russische Bevölkerung verstehen
+Keine Kultur existiert ohne ihre Bevölkerung. Um die Kohärenz hinter den Propagandainstrumenten als Gesamtbild zu verstehen, muss man die russische Mentalität und ihren gesellschaftlichen Kontext zumindest in Grundzügen verstehen. 
+
+
+### Russland im Krieg
+Angefangen bei dem zeitgenössischen Bürgerkrieg, welcher die Gesellschaft stark fragmentiert hatte, wodurch die Menschen besonders anfällig für eine Radikalisierung durch Propaganda waren. 
+
+
+### Christlich-orthodoxe Prägung
+Jedoch waren zuvor schon starke Einflüsse aus der orthodox-christlichen Kirche tief in der Mentalität Russlands verankert, wodurch ihnen eine fast schon metaphysische Symbolik aus dem Ikonenkult durchaus vertraut war. Das bedeutet, dass die Menschen bereits eine Bildsprache in ihrer Kultur praktiziert hatten, wodurch das Bild als solches in der Bevölkerung einen besonderen Stellenwert einnahm.
+
+
+### Analphabetische Bevölkerung
+Der entscheidende Faktor war jedoch vermutlich, dass der Großteil der Bevölkerung analphabetisch und dementsprechend bereits auf eine Symbolsprache in der nicht-verbalen Kommunikation angewiesen war, nachdem der Bildungsstand der Mehrheitsbevölkerung nach dem ersten Weltkrieg eher niedrig war. Dies wurde selbstverständlich von der Propaganda aufgegriffen, welche enorme Wirkung darin zeigte, das Volk in die politisch-militärische Positionierung zu locken und miteinzubeziehen.
+
 
-## How
+---
+
+## Wer war El Lissitzky?
+![](img/artwork/Bild_mit_untertitel_02.png)
 
-The *Syllabus Site* template can be easily used with minimal technical requirements.
 
 
-![](img/sidebyside.webp)  
-Page content and source side by side
+![](img/artwork/Bild_mit_untertitel.png)
 
 
-### Get started
 
-1. Download or clone the [GitHub repository](https://github.com/uclab-potsdam/syllabus-site/)
-2. Give your page a title, fill out open graph fields, and adjust theme color in `index.html`
-3. Add your content into `README.md` and `img/`
 
 
-### Files
 
-The template has the following file structure:
+![](img/artwork/Bild_mit_untertitel_06.png)
 
-      img/
-      index.html
-      src/
-      README.md
 
-The `README.md` file contains all the textual content of your page and references the images that you need to add to the `img/` directory. 
+---
 
-The `index.html` file connects template and your content; here you need to make a few edits to add title, description, and preview of your webpage. 
+## Suprematismus
 
-You do not need to change anything within `src/`, which contains the internal files of the template.
 
+---
 
-### Syntax
+## Gegenstandslosigkeit
 
-The `README.md` uses the [Markdown](https://en.wikipedia.org/wiki/Markdown) format, a markup language used by many platforms including GitHub.
 
-There are two conventions we introduce to distinguish and connect sections and items:
+---
 
-- **Sections** are delineated by a horizontal rule `---` 
-- **Items** are separated by two empty consecutive lines
 
-Each section should contain a heading:
-`#` for primary, `##` for secondary, and so on.
+# Formsemantische Analyse
+## Vor-ikonografische Beschreibung
 
-To exclude a section from the navigation menu, include `<!--skipnav-->` at the start of the section.
 
+![](img/Formsemantik.gif)
 
 
-### Things to consider
+---
 
-- Include an expressive preview image `img/cover.png` so that your page can be previewed on social media and messaging apps.
-- Given that your webpage might be accessed from a mobile device with a slow connection make sure to optimize image file sizes.
+## Dualität der feindlichen Fronten
 
 
 ---
 
+## Visuelle Sprache
 
-## Who
 
-*Syllabus Site* was put together by [Philipp Proff](https://philippproff.eu) and [Marian Dörk](https://mariandoerk.de) with the helping hands from many people.
+![](img/Dualität-b.png)
 
 
-**Markdown munching**: [Marked](https://marked.js.org) by Christopher Jeffrey
 
+### Dualität von Tradition & Innovation
+
+
+
+---
+
+# Wahrnehmungspsychologische Analyse
 
-**Terrific typeface**: [HK Grotesk](https://github.com/HankenDesignCo/HK-Grotesk) by Alfredo Marco Pradil
 
+---
 
-**Friendly feedback**: Myriel Milicevic, Lamin Manneh, Fidel Thomet, Mark-Jan Bludau, Sabine de Günther and Francesca Morini
+## Dualität von Kampf & Sieg
 
 
-**Yes, you!**: Syllabus Site is [made available](https://github.com/uclab-potsdam/syllabus-site/) under the liberal MIT license. Feel free to reuse and revise it!
+---
 
+## Fazit
 
 ---
 
+## Quellen
+
+Scrollen für Literaturverzeichnis und Bildnachweise!
+<br>
+<br>
+[Hier klicken](#start), um zum Anfang zu springen!
+
+
+
+![](img/pfeil2.png)
+
+
+
+![](img/pfeil3.png)
+
+---
 
 [<img src='img/fhp.svg' style='height:2.25em'>](https://www.fh-potsdam.de/) 
 [<img src='img/id.svg' style='height:1.75em'>](https://interface.fh-potsdam.de/) 

diff --git a/fonts/AllertaStencil-Regular.ttf b/fonts/AllertaStencil-Regular.ttf
diff --git a/fonts/AvenirNext-Bold.ttf b/fonts/AvenirNext-Bold.ttf
diff --git a/fonts/AvenirNext-BoldItalic.ttf b/fonts/AvenirNext-BoldItalic.ttf
diff --git a/fonts/AvenirNext-Italic.ttf b/fonts/AvenirNext-Italic.ttf
diff --git a/fonts/AvenirNext-Regular.ttf b/fonts/AvenirNext-Regular.ttf
diff --git a/fonts/AvenirNext-UltraLight.ttf b/fonts/AvenirNext-UltraLight.ttf
diff --git a/fonts/AvenirNext-UltraLightItalic.ttf b/fonts/AvenirNext-UltraLightItalic.ttf
diff --git a/fonts/SairaStencilOne-Regular.ttf b/fonts/SairaStencilOne-Regular.ttf
diff --git a/fonts/hkgrotesk-bold.woff b/fonts/hkgrotesk-bold.woff
diff --git a/fonts/hkgrotesk-bolditalic.woff b/fonts/hkgrotesk-bolditalic.woff
diff --git a/fonts/hkgrotesk-italic.woff b/fonts/hkgrotesk-italic.woff
diff --git a/fonts/hkgrotesk-regular.woff b/fonts/hkgrotesk-regular.woff
diff --git a/img/Bild_1.jpeg b/img/Bild_1.jpeg
diff --git a/img/Bild_2.jpeg b/img/Bild_2.jpeg
diff --git a/img/Bild_3.jpeg b/img/Bild_3.jpeg
diff --git a/img/Bild_4.jpeg b/img/Bild_4.jpeg
diff --git a/img/Bild_5.jpeg b/img/Bild_5.jpeg
diff --git a/img/Bild_6.jpg b/img/Bild_6.jpg
diff --git a/img/Bild_7.jpeg b/img/Bild_7.jpeg
diff --git a/img/Dualität-b.png b/img/Dualität-b.png
diff --git a/img/Dualität_2.png b/img/Dualität_2.png
diff --git a/img/Form.gif b/img/Form.gif
diff --git a/img/Formsemantik.gif b/img/Formsemantik.gif
diff --git a/img/Hintergrund.png b/img/Hintergrund.png
diff --git a/img/Keil.jpg b/img/Keil.jpg
diff --git a/img/Keil.png b/img/Keil.png
diff --git a/img/Klinom_krasnym_bej_belych_Schlag_die_Weissen_mit_dem_roten_Keil_91a8a805.jpg b/img/Klinom_krasnym_bej_belych_Schlag_die_Weissen_mit_dem_roten_Keil_91a8a805.jpg
diff --git a/img/Selbstbildnis.png b/img/Selbstbildnis.png
diff --git a/img/artwork/Bild_mit_untertitel.png b/img/artwork/Bild_mit_untertitel.png
diff --git a/img/artwork/Bild_mit_untertitel_01.png b/img/artwork/Bild_mit_untertitel_01.png
diff --git a/img/artwork/Bild_mit_untertitel_02.png b/img/artwork/Bild_mit_untertitel_02.png
diff --git a/img/artwork/Bild_mit_untertitel_03.png b/img/artwork/Bild_mit_untertitel_03.png
diff --git a/img/artwork/Bild_mit_untertitel_04.png b/img/artwork/Bild_mit_untertitel_04.png
diff --git a/img/artwork/Bild_mit_untertitel_05-2.png b/img/artwork/Bild_mit_untertitel_05-2.png
diff --git a/img/artwork/Bild_mit_untertitel_05.png b/img/artwork/Bild_mit_untertitel_05.png
diff --git a/img/artwork/Bild_mit_untertitel_06.png b/img/artwork/Bild_mit_untertitel_06.png
diff --git a/img/artwork/Bild_mit_untertitel_08.png b/img/artwork/Bild_mit_untertitel_08.png
diff --git a/img/favicon.ico b/img/favicon.ico
diff --git a/img/favicon.png b/img/favicon.png
diff --git a/img/favicon.svg b/img/favicon.svg
diff --git a/img/malewitsch.png b/img/malewitsch.png
diff --git a/img/parts/Einzelteile-1.png b/img/parts/Einzelteile-1.png
diff --git a/img/parts/Einzelteile-10.png b/img/parts/Einzelteile-10.png
diff --git a/img/parts/Einzelteile-11.png b/img/parts/Einzelteile-11.png
diff --git a/img/parts/Einzelteile-12.png b/img/parts/Einzelteile-12.png
diff --git a/img/parts/Einzelteile-13.png b/img/parts/Einzelteile-13.png
diff --git a/img/parts/Einzelteile-14.png b/img/parts/Einzelteile-14.png
diff --git a/img/parts/Einzelteile-15.png b/img/parts/Einzelteile-15.png
diff --git a/img/parts/Einzelteile-2.png b/img/parts/Einzelteile-2.png
diff --git a/img/parts/Einzelteile-3.png b/img/parts/Einzelteile-3.png
diff --git a/img/parts/Einzelteile-4.png b/img/parts/Einzelteile-4.png
diff --git a/img/parts/Einzelteile-5.png b/img/parts/Einzelteile-5.png
diff --git a/img/parts/Einzelteile-6.png b/img/parts/Einzelteile-6.png
diff --git a/img/parts/Einzelteile-7.png b/img/parts/Einzelteile-7.png
diff --git a/img/parts/Einzelteile-8.png b/img/parts/Einzelteile-8.png
diff --git a/img/parts/Einzelteile-9.png b/img/parts/Einzelteile-9.png
diff --git a/img/parts/Einzelteile.png b/img/parts/Einzelteile.png
diff --git a/img/pfeil.png b/img/pfeil.png
diff --git a/img/pfeil2.png b/img/pfeil2.png
diff --git a/img/pfeil3.png b/img/pfeil3.png
diff --git a/img/suprematismus.png b/img/suprematismus.png
diff --git a/img/unowis1.png b/img/unowis1.png
diff --git a/img/unowis2.png b/img/unowis2.png
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no" />
@@ -10,17 +10,32 @@
     <link rel="icon" type="image/png" href="src/img/favicon.png">
     <link rel="icon" type="image/svg" href="src/img/favicon.svg">
 
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Saira+Stencil+One&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Text:[email protected]&family=Saira+Stencil+One&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Text:[email protected]&family=Josefin+Slab:[email protected]&family=Saira+Stencil+One&display=swap" rel="stylesheet">
+
     <!-- adjust open graph fields -->
-    <title>Syllabus Site · FH Potsdam</title>
-    <meta property="og:url" content="https://infovis.fh-potsdam.de/syllabus-site/">
+    <title>El Lissitzky – Mit dem roten Keil schlage die Weißen</title>
+    <meta property="og:url" content="http://127.0.0.1:8080">
+
     <meta property="og:title" content="Syllabus Site · FH Potsdam">
     <meta property="og:description" content="An experiment in documenting design courses and a template for rendering Markdown files as one-page websites.">
     <meta property="og:image" content="https://infovis.fh-potsdam.de/syllabus-site/img/cover.png">
     <meta property="og:image:width" content="1200">
     <meta property="og:image:height" content="630">
 
     <!-- adjust theme color -->
-    <style> body { --theme-color: hsl(320, 0%, 60%); } </style>
+    <style> body { --theme-color:   #8c857fbf; } </style>
 
 </head>
 <body>
@@ -41,6 +56,36 @@
             <div id="content"></div>
         </div>
     </div>
+    <div class="verzeichnis">
+        <h3>Literaturverzeichnis</h3>
+        <hr>
+
+        <ol type="1">
+            <li>Krieger, V. (2015). El Lissitzkys „Roter Keil“ - 4 Kontexte und 3 Bildlektüren. Die Semantik der Form in Ikonologischer Perspektive. In M. Schulz & K. Marek (Hrsg.), Kanon Kunstgeschichte 3: Einführung in Werke, Methoden und Epochen – Moderne (S. 172–213). Wilhelm Fink.</li>
+
+          </ol>  
+    </div>
+
+    <div class="verzeichnis" id="bildnachweise">
+          <h3>Bildnachweise</h3>
+          <hr>
+
+          <ol type="1">
+              <li> Lissitzky, E. (1920). Клином красным бей белых (Mit dem roten Keil schlage die Weißen). El Lissitzky 1890 - 1941, Retrospektive, hrsg. v.Norbert Nobis, Sprengel Museum, Hannover, 24. Januar bis 10. April 1988 S. 85 / Abb. 47.</li>
+              <li> Lissitzky, E. (1924). Der Konstrukteur (Selbstbildnis) [Fotomontage]. Eindhoven, Stedelijk Van Abbemuseum, Pfisterer, Ulrich/ von Rosen, Valeska (Hrsg.): Der Künstler als Kunstwerk. Selbstporträts vom Mittelalter bis zur Gegenwart, Stuttgart 2005 S. 161.</li>
+              <li> Malewitsch, K. (1916). Dynamischer Suprematismus. ML 1294. Köln, Museum Ludwig, Kasimir Malewitsch. Suprematismus, Ausst.Kat. hrsg. v. Matthew Drutt, Berlin: 2003, Deutsche Guggenheim Berlin: 14. Januar - 27. April 2003 S. 176.</li>
+              <li> Lissitzky, E. (1920). Proun 1E – Die Stadt. Baku, Mustafajew - Museum der Künste, Kat. III/17, Berlin-Moskau.1900-1950, hrsg. von Irina Antonowa, Jörn Merkert (Kat. der Ausstellungen, Berlin und Moskau, 1996), München: Prestel, 1995, S. 249.</li>
+              <li> Nakov, A., & Malewitsch, K. (1920). Gruppe UNOWIS auf dem Weg nach Moskau zur Gesamtrussischen Konferenz der Kunstlehrer und -schüler [Fotografie]. Archiv des Instituts für Kunstgeschichte der LMU München, Bahnhof in Vitebsk, Mai 1920. Im Zentrum: Malewitsch mit einer Mütze und einem suprematistischen Teller in der linken Hand. Unter seinem rechten Arm: El Lissistzky (mit Mütze), links: Nina Kogan (mit Hut). Unter der Linken von Malewitsch: Ilia Tchachnik (mit Mütze); im Zentrum: Lazare Hidekel. Hinter ihm: Lev Judin und Evguenia Magaril.</li>
+              <li> UNOWIS. (1920). Flugblatt Nr.1 des Witebsker „Tworkom“ [Lithographie, Papier]. Sankt Petersburg, Archiv des Instituts für Kunstgeschichte der LMU München.</li>
+              <li> </li>
+              <li> Unbekannt. (1889). Traditionell besticktes Küchentuch. https://flomaster.top/67960-tkani-slavjanskie-uzory.html</li>
+              <li> </li>
+              <li> </li>
+              <li> </li>
+              <li> </li>
+
+            </0l>  
+    </div>
     <footer></footer>
 </body>
 </html>