Differences

This shows you the differences between two versions of the page.

--- teaching:ma:courses:media-objects:sose25:hausaufgaben [2025/05/21 04:21] – [Teilaufgabe 6] Felix Hardmood Beck
+++ teaching:ma:courses:media-objects:sose25:hausaufgaben [2025/07/06 07:34] (current) – ↷ Links adapted because of a move operation Felix Hardmood Beck
@@ Line 32: / Line 32: @@
 Conceptual Design/Konzeptentwicklung (Wochen 5-6)
-  * Führen Sie mit Ihrer Gruppe ein **Brainstorming** zu dem von Ihren Kommiliton*innen im Seminar ausgewählten Thema durch. Das Ziel ist es eine Anzahl von darauf aufbauenden Ideen für mögliche Umsetzungen zu generieren. Hier können Sie gegebenenfalls wieder auf ein [[about:kreativitaetstechniken:mind-mapping|Mind-Map]] zurückgreifen. Nehmen Sie sich für diesen Prozess ausreichend Zeit. Nicht die erste Idee ist auch immer die beste Idee! Denken Sie an die Regel //Kill your Darlings// ((https://www.masterclass.com/articles/what-does-it-mean-to-kill-your-darlings)).
+  * Führen Sie mit Ihrer Gruppe ein **Brainstorming** zu dem von Ihren Kommiliton*innen im Seminar ausgewählten Thema durch. Das Ziel ist es eine Anzahl von darauf aufbauenden Ideen für mögliche Umsetzungen zu generieren. Hier können Sie gegebenenfalls wieder auf ein [[extras:wissikon:kreativitaetstechniken:mind-mapping|Mind-Map]] zurückgreifen. Nehmen Sie sich für diesen Prozess ausreichend Zeit. Nicht die erste Idee ist auch immer die beste Idee! Denken Sie an die Regel //Kill your Darlings// ((https://www.masterclass.com/articles/what-does-it-mean-to-kill-your-darlings)).
-  * Fertigen Sie **//diverse [[about:quick-and-dirty-prototyping|Quick- and Dirty Prototypen]]//** an und evaluieren Sie anhand dieser Ihre Ideen.
+  * Fertigen Sie **//diverse [[extras:wissikon:prototyping-and-modelmaking:quick-and-dirty-prototyping|Quick- and Dirty Prototypen]]//** an und evaluieren Sie anhand dieser Ihre Ideen.
-  * Entscheiden Sie sich für einen Ihrer Ansätze. Erstellen Sie für diesen ein **[[about:konzeptstatement|Konzept Statement]]**, das die ausgewählte Projektidee kurz und knackig beschreibt. Ergänzen Sie die Beschreibung mit einem **[[about:kreativitaetstechniken:moodboard|Moodboard]]** und falls notwendig mit weiteren **skizzenhaften Visualisierungen, Renderings, oder andersartigen Darstellungen** (bspw. mit Hilfe von Dall-E).
+  * Entscheiden Sie sich für einen Ihrer Ansätze. Erstellen Sie für diesen ein **[[extras:wissikon:design-development:konzeptstatement|Konzept Statement]]**, das die ausgewählte Projektidee kurz und knackig beschreibt. Ergänzen Sie die Beschreibung mit einem **[[extras:wissikon:kreativitaetstechniken:moodboard|Moodboard]]** und falls notwendig mit weiteren **skizzenhaften Visualisierungen, Renderings, oder andersartigen Darstellungen** (bspw. mit Hilfe von Dall-E).
   * **Dokumentieren Sie Ihren Prozess** und die Ergebnisse. Achten Sie darauf, dass parallel zu Ihrer Arbeit in allen Bearbeitungsphasen die einzelnen Schritte gut und ausreichend dokumentiert werden. Vergessen Sie nicht zwischenzeitig Scans wichtiger analoger Dokumente, wie etwa Zeichnungen, Scribbles oder Diagrammen anzufertigen, oder fotografieren Sie diese. Denken Sie jetzt schon daran, dass diese Dokumente später auch in Ihrer Präsentation am Semesterende gezeigt werden sollen und dementsprechend sauber gestaltet/nachbearbeitet sein sollen.
@@ Line 53: / Line 53: @@
       * Wie kann ich eine Funktion auswählen?
       * etc.
-  * Es folgen weitere **Varianten Ihres Prototypen**. Erstellen Sie beispielsweise einen //[[about:funktions-prototyp|Funktions Prototyp]]// (Dieser vermittelt auf technische Art und Weise, wie Ihr Medien-Objekt funktionieren soll. Dabei muss es aber noch nicht wie ein solches aussehen. Es geht nur um die Demonstration bestimmter Funktionen und deren Weiterentwicklung.) und //[[about:look-like-prototyp|Look-Like Prototypen]]// (Dieser wird angefertigt, um die formalen Aspekte eines Produktes, also bspw. Größe, Materialität, Oberflächenbeschaffenheit, Farbe usw. besser vorstellbar zu machen. Solch ein Prototyp braucht keine Technologie zu enthalten und muss keine Funktionen demonstrieren können.). Sehen Sie jeden Arbeitsschritt als ein Puzzleteil, das dazu führt, dass bei der Präsentation am Semesterende ein Gesamtbild präsentiert werden kann. Am Ende dieser Arbeitsphase haben Sie einen genauen Überblick darüber, wie Ihr finaler Prototyp aussehen und funktionieren soll.
+  * Es folgen weitere **Varianten Ihres Prototypen**. Erstellen Sie beispielsweise einen //[[extras:wissikon:prototyping-and-modelmaking:funktions-prototyp|Funktions Prototyp]]// (Dieser vermittelt auf technische Art und Weise, wie Ihr Medien-Objekt funktionieren soll. Dabei muss es aber noch nicht wie ein solches aussehen. Es geht nur um die Demonstration bestimmter Funktionen und deren Weiterentwicklung.) und //[[extras:wissikon:prototyping-and-modelmaking:look-like-prototyp|Look-Like Prototypen]]// (Dieser wird angefertigt, um die formalen Aspekte eines Produktes, also bspw. Größe, Materialität, Oberflächenbeschaffenheit, Farbe usw. besser vorstellbar zu machen. Solch ein Prototyp braucht keine Technologie zu enthalten und muss keine Funktionen demonstrieren können.). Sehen Sie jeden Arbeitsschritt als ein Puzzleteil, das dazu führt, dass bei der Präsentation am Semesterende ein Gesamtbild präsentiert werden kann. Am Ende dieser Arbeitsphase haben Sie einen genauen Überblick darüber, wie Ihr finaler Prototyp aussehen und funktionieren soll.
   * **Dokumentieren Sie Ihren Prozess** und die Ergebnisse, sodass Sie diese im Seminartreffen vorstellen können.
@@ Line 84: / Line 84: @@
 ==== Teilaufgabe 7 ====
-Dokumentation – Erstellung Plakat und Webseite (Woche 14)
+Dokumentation – Erstellung Webseite und Plakat (Woche 14)
-  - Webseite
+=== Webseite ===
-    * Sie
+Sie haben dieses Semester bereits sehr fleissig gearbeitet und Ihre einzelnen Arbeitsschritte immer gut dokumentiert. Nutzen Sie die bisher erstellten **Visualisierungen, Grafiken, Renderings, Dokumentationsfotos, etc.** und wählen Sie die aussagekräftigsten aus. Es folgt die Aufbereitung und Optimierung dieser Daten, sodass diese in Auflösung (einheitliches Bildformat und gleiche Bildauflösung) und Qualität Ihrem hohen Anspruch gerecht werden. Ordnen Sie die von Ihnen ausgewählten Bilder den Projektphasen zu. Schreiben Sie zu jedem Bild einen **kurzen Text**. Vermeiden Sie die ich-Form. Schreiben Sie möglichst neutral.
-    * Sie haben dieses Semester bereits sehr fleissig gearbeitet und Ihre einzelnen Arbeitsschritte immer gut dokumentiert. Nutzen Sie die bisher erstellten **Visualisierungen, Grafiken, Renderings, Dokumentationsfotos, etc.** und wählen Sie die aussagekräftigsten aus. Es folgt die Aufbereitung und Optimierung dieser Daten, sodass diese in Auflösung (einheitliches Bildformat und gleiche Bildauflösung) und Qualität Ihrem hohen Anspruch gerecht werden.
-    * Ordnen Sie die von Ihnen ausgewählten Bilder den Projektphasen zu. Schreiben Sie zu jedem Bild einen **kurzen Text**. Vermeiden Sie die ich-Form. Schreiben Sie möglichst neutral.
-    * Fügen Sie Ihr
+  - Verschaffen Sie sich einen Überblick zu [[https://learn.getgrav.org/16/basics/what-is-grav|GRAV]]
+  - Zur Erstellung von Text und Bild Inhalten damit diese auf der kurseigenen [[https://medienobjekte.ct-lab.info|Medienobjekte Webseite]] angezeigt werden können:
+    - Alle **Textinhalte** (Namen der teilnehmenden StudentInnen der Gruppe, Text zu Recherche, Konzeptentwicklung, etc.) müssen in eine einzige Textdatei kopiert werden. Dafür wird keine //Word-Datei// benutzt, sondern eine sogenannte [[https://de.wikipedia.org/wiki/Markdown|Markdown-Datei]]. //Markdown// ist eine vereinfachte Auszeichnungssprache dessen Ziel es ist einen möglichst lesbaren Code zu erstellen. Viele der Auszeichnungselemente, die verwendet werden, kennt man etwa von //Plain Text// Dateien oder //E-Mails//. Eine Markdown-Konvertierungssoftware – in unserem Fall GRAV – wandelt unseren Text, der mit entsprechender Syntax editiert werden kann, in XHTML um, damit dieser von einem Webbrowser dargestellt werden kann. Gehen Sie wie folgt vor:
+      * Laden Sie das //Grav Template// (//default.de.md//) [[http://hardmood.info/download/GRAV_template.zip|hier]] herunter.
+      * Die heruntergeladene Textdatei kann mit einem [[https://github.com/collections/text-editors|Texteditor]] geöffnet und bearbeitet werden. Fügen Sie alle Ihre Textinhalte durch //copy & paste// ein. Halten Sie sich dabei an die vorgegebene //Markdown Syntax// ([[https://learn.getgrav.org/16/content/markdown|siehe Tutorial]]). Achten Sie speziell auf die Dateinamen Ihrer JPGs und dass diese richtig verlinkt werden.
+      * Speichern Sie Ihre Datei als //default.de.md//
+    - Es dürfen nur **Bilder** im __JPG Dateiformat__ verwendet werden. Diese müssen __eine Größe von 1400 x 800 px (72 dpi)__ haben und müssen für das Web optimiert sein. Gehen Sie dafür wie folgt vor:
+      * Benutzen Sie beispielsweise in Photoshop die "Safe for Web"-Option ("Für Web Speichern"). Achten Sie dabei auf die unten hervorgehobenen Punkte 1 (Bildformat: JPG), 2 (Bildqualität: 80%) und 3 (Bildgröße: 1400x800 px). Achten Sie darauf, das die Dateigröße, wie bei Punkt 4 hervorgehoben, 800k (Kilobyte) nicht überschreitet. \\ {{:teaching:ma:media-installations:wise24-25:save_for_web_1400x800px.jpg?direct&960|}}
+      * Speichern Sie dann die Bilddatei. Benutzen Sie im Namen __keine__ Majuskeln (nur Kleinbuchstaben), __keine__ Leerzeichen (stattdessen einen Unterstrich, wie im Beispiel: test_bild_1400x800px.jpg), __keine__ Sonderzeichen und __keine__ Umlaute!
+      * Kontrollieren Sie, dass die verwendeten Bildnamen auch richtig in Ihrer *.md-Datei verwendet werden.
+    - Inhaltliche Struktur:
+      - Konzeptdesign Phase
+      - Schematisches Design/Design Entwicklung
+      - Ausformulierung/Entwicklung und Gestaltung von Details
+    - Wenn die Textdatei sowie alle Bilder final und richtig benannt abgespeichert sind, werden diese als*.zip-datei (Benennung der Datei: //nachname_nachname.zip//). Prof. Beck wird diese dann via FTP in ein entsprechendes Verzeichnis auf einem Webserver laden. Ihre Dokumentation zur Vertiefungsübung sollte dann automatisch auf der **Webseite** https://medienobjekte.ct-lab.info erscheinen.
+=== Plakat ===
+Die Studierenden sollen ihr Projekt auf einem Plakat dokumentieren. Als Basis dient dabei [[https://drive.google.com/drive/folders/1KEXjDWoMN02Lt2ffY8ayXpCQsBruhCa6?usp=sharing|folgende Vorlage]]. Sie können im Rahmen des vorgegebenen Rasters (siehe Fig. 1: zwei Spalten, Rand 3cm) gestalterisch bewegen. D.h. Sie können Bilder und Textblöcke (siehe Fig. 2) frei anpassen und verschieben. Die zu verwendende Schrift ist [[https://fonts.google.com/specimen/Roboto|Roboto]]. Das Mengengerüst der Textlänge sollte erhalten bleiben. Es sollten nicht mehr als 3-4 Bilder integriert werden.
+Fig.1 {{:teaching:ba:courses:mediadesign-project:wise24-25:250104_projekt_poster_dina2.1.jpeg?direct&200|}}
+Fig.2 {{:teaching:ba:courses:mediadesign-project:wise24-25:250104_projekt_poster_dina2.2.jpeg?direct&200|}}
+Fig.3 {{:teaching:ba:courses:mediadesign-project:wise24-25:250104_projekt_poster_dina2.3.jpeg?direct&200|}}
+Passen Sie die Vorlage (Fig. 3) entsprechend der eigenen Bedürfnisse an und befüllen Sie diese mit Ihren Text- und Bildinhalten. Achten Sie dabei auf klar und prägnante Formulierungen. Benutzen Sie kein Fachjargon, sondern beschreiben die Inhalte eher in allgemeiner Form.
+  * In einem ersten Absatz mit ca. 680 Zeichen, soll die Ausgangsbasis in Form einer Einleitung beschrieben werden. Der Kontext soll beschrieben werden. Kurze Darstellung des Themas oder der Herausforderung: Worum geht es? Was ist Ihr Thema? Was ist der Hintergrund des Projektes?
+  * In einem zweiten Absatz mit ca. 970 Zeichen soll die Bearbeitung und das Ergebnis in Form einer //Executive Summary// zusammengefasst werden: Beschreiben Sie darin Ihre Vorgehensweise, die iterative Überarbeitung Ihres Kurzeitprojektes und
+  * In einem dritten Absatz beschreiben Sie die wichtigsten Erkenntnisse und Schlussfolgerungen, die sich für eine mögliche zukünftige Realisierung ergeben.
-  - Plakat
-    * Erstellung von **[[about:keyvisual|Keyvisual]]/[[about:money-shot|Moneyshot]]**: Fertigen Sie ein oder zwei Bilder an, die Ihre entstandene Arbeit bestmöglich in Szene setzen.
-    * Erstellen Sie einen kurzen und prägnanten Text, der Ihr Projekt beschreibt (**Konzeptbeschreibung**)