Creative Technologies Lab | dokuWiki

Repository of academic adventures, experimental technology, accidental brilliance, and collaborative nerdery.

User Tools

Site Tools


teaching:ma:courses:media-installations:wise24-25:homework

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
teaching:ma:courses:media-installations:wise24-25:homework [2024/12/13 14:33] – [Teilaufgabe 2] Felix Hardmood Beckteaching:ma:courses:media-installations:wise24-25:homework [2025/01/11 13:20] (current) – [Teilaufgabe 7] Felix Hardmood Beck
Line 28: Line 28:
 Auf Basis der im Unterricht besprochenen Themen und der im Museum existierenden Ausstellungsstücke ist es Ihre Aufgabe zu schauen, wie letztendlich ein von Ihnen identifiziertes Thema auf unterschiedlich Art und Weise mit verschiedenen Technologien umgesetzt werden könnte. Um ein Beispiel zu nennen: Gehen wir einmal davon aus, dass Sie sich eine bestimmte Skulptur ausgesucht haben mit der Sie sich beschäftigen wollen. Diese Skulptur könnte beispielsweise durch Aufprojektion mit bestimmten erklärenden Informationen (Texte, Bilder, Filme, etc) versehen werden (möglicher Ansatz 1). Ein anderer Ansatz könnte aber auch sein stattdessen eine AR-Anwendung zu entwickeln, die die selben zusätzlichen Informationen anstatt in einer Projektion auf einem Mobiltelefon erscheinen lassen (möglicher Ansatz 2). Eine andere Variante könnte es sein weder Projektion noch ein Mobiltelefon zu benutzen. Stattdessen könnte man die Skulptur ja auch berühren und durch Schaltflächen, die an unterschiedlichen Positionen angebracht sind, könnten entsprechende Informationen per Audio abgespielt werden (möglicher Ansatz 3). Sie sehen also, das ein Objekt/Thema mit unterschiedlichen technologischen Komponenten realisiert werden könnte. Auf Basis der im Unterricht besprochenen Themen und der im Museum existierenden Ausstellungsstücke ist es Ihre Aufgabe zu schauen, wie letztendlich ein von Ihnen identifiziertes Thema auf unterschiedlich Art und Weise mit verschiedenen Technologien umgesetzt werden könnte. Um ein Beispiel zu nennen: Gehen wir einmal davon aus, dass Sie sich eine bestimmte Skulptur ausgesucht haben mit der Sie sich beschäftigen wollen. Diese Skulptur könnte beispielsweise durch Aufprojektion mit bestimmten erklärenden Informationen (Texte, Bilder, Filme, etc) versehen werden (möglicher Ansatz 1). Ein anderer Ansatz könnte aber auch sein stattdessen eine AR-Anwendung zu entwickeln, die die selben zusätzlichen Informationen anstatt in einer Projektion auf einem Mobiltelefon erscheinen lassen (möglicher Ansatz 2). Eine andere Variante könnte es sein weder Projektion noch ein Mobiltelefon zu benutzen. Stattdessen könnte man die Skulptur ja auch berühren und durch Schaltflächen, die an unterschiedlichen Positionen angebracht sind, könnten entsprechende Informationen per Audio abgespielt werden (möglicher Ansatz 3). Sie sehen also, das ein Objekt/Thema mit unterschiedlichen technologischen Komponenten realisiert werden könnte.
     * Was sind Ihre Gedanken zu möglichen Lösungsansätzen zu dem von Ihnen identifizierten Thema?     * Was sind Ihre Gedanken zu möglichen Lösungsansätzen zu dem von Ihnen identifizierten Thema?
-    * Skizzieren Sie  __fünf__  unterschiedliche technologische Ansätze zu dem selben von Ihnen identifiziertem Objekt/Thema. Stellen Sie diese auf {{:teaching:ma:media-installations:wise24-25:beispiel_thumbnails_ideensammlung.jpg?linkonly|einem DIN A3 Chart}} jeweils mit einer kurzen Beschreibung dar. Die im Bild dargestellten Layout Beispiele können dabei der Inspiration dienen. \\ \\ {{:ba_design_basics:beispiel_thumbnails_ideensammlung.jpg?direct|}} \\ //Beispiele aus vergangenen Semestern.// \\ \\ Ergänzen Sie Ihre Ansätze, wie im oberen Beispiel durch **Ideenscribbles** – also Handzeichnungen oder auch KI-Generierten Bildinhalten, die dabei helfen sollen den Kontext Ihres Ansatzes zu erklären.  +    * Skizzieren Sie  __fünf__  unterschiedliche technologische Ansätze zu dem selben von Ihnen identifiziertem Objekt/Thema. Stellen Sie diese auf {{:teaching:ma:media-installations:wise24-25:beispiel_thumbnails_ideensammlung.jpg?linkonly|einem DIN A3 Chart}} jeweils mit einer kurzen Beschreibung dar. Die im Bild dargestellten Layout Beispiele können dabei der Inspiration dienen. \\ \\ {{:teaching:ma:media-installations:wise24-25:beispiel_thumbnails_ideensammlung.jpg?direct|}} \\ //Beispiele aus vergangenen Semestern.// \\ \\ Ergänzen Sie Ihre Ansätze, wie im oberen Beispiel durch **Ideenscribbles** – also Handzeichnungen oder auch KI-Generierten Bildinhalten, die dabei helfen sollen den Kontext Ihres Ansatzes zu erklären.  
-    * Erstellen Sie ein PDF mit den fünf von Ihnen ausgedachten Ansätzen. Teilen Sie Ihr Dokument vor der nächsten Sitzung im [[https://mattermost.fh-muenster.de/media-objects-ma-kurs/channels/sose-2024|Mattermost Kanal der Klasse]]+    * Erstellen Sie ein PDF mit den fünf von Ihnen ausgedachten Ansätzen. Teilen Sie Ihr Dokument vor der nächsten Sitzung im Mattermost Kanal der Klasse. 
   * Mit Hilfe Ihres DIN A3 Charts präsentiert jeder Student die fünf ausformulierten Ansätze. Die Unterschiede werden besprochen und die //eleganteste// Variante identifiziert. Was in diesem Falle elegant auszeichnet werden wir im Seminar diskutieren.   * Mit Hilfe Ihres DIN A3 Charts präsentiert jeder Student die fünf ausformulierten Ansätze. Die Unterschiede werden besprochen und die //eleganteste// Variante identifiziert. Was in diesem Falle elegant auszeichnet werden wir im Seminar diskutieren.
  
-Es kann sein, dass ähnliche Ansätze oder auch gleiche Themen vorgeschlagen werden. Dies ist nicht schlimm und kann eventuell dazu führen, dass sich [[ma:wise24-25:gruppen|Teams]] bilden in dem man gemeinsam am Thema weiter arbeiten wird. +Es kann sein, dass ähnliche Ansätze oder auch gleiche Themen vorgeschlagen werden. Dies ist nicht schlimm und kann eventuell dazu führen, dass sich Teams bilden in dem man gemeinsam am Thema weiter arbeiten wird. 
  
  
Line 80: Line 80:
     * Starten Sie damit sich zu überlegen, wie dieses bedient werden soll: Einhändig oder beidhändig?, über einen kleinen Touchscreen, physikalische Knöpfe, oder vielleicht sogar unsichtbare Sensorik? Was wäre für Sie am sinnvollsten? Vielleicht ist es ja auch eine Kombination mehrerer Faktoren oder Sie bemerken, dass eine Sprachsteuerung viel sinnvoller wäre? Wie oft bedient man es? … **Entwerfen Sie Ihren eigenen Fragenkatalog!**     * Starten Sie damit sich zu überlegen, wie dieses bedient werden soll: Einhändig oder beidhändig?, über einen kleinen Touchscreen, physikalische Knöpfe, oder vielleicht sogar unsichtbare Sensorik? Was wäre für Sie am sinnvollsten? Vielleicht ist es ja auch eine Kombination mehrerer Faktoren oder Sie bemerken, dass eine Sprachsteuerung viel sinnvoller wäre? Wie oft bedient man es? … **Entwerfen Sie Ihren eigenen Fragenkatalog!**
     * Schauen Sie sich im Rahmen einer **Recherche Interfaces** an und überlegen was vermutlich ein gutes und was eines schlechtes User-Interface ist. Übertragen Sie Ihre Erkenntnisse in die nächsten Arbeitsschritte.     * Schauen Sie sich im Rahmen einer **Recherche Interfaces** an und überlegen was vermutlich ein gutes und was eines schlechtes User-Interface ist. Übertragen Sie Ihre Erkenntnisse in die nächsten Arbeitsschritte.
-    * Spielen Sie an einem **Papiermodell** dessen Bedienung durch und überprüfen Sie ob alle Bedienelemente vorhanden sind. Sinnvoll kann es sein **verschiedene Alternativen** auf Papier anzuscribbeln, auszuschneiden und an temporär an Ihr Objekt zu kleben. Sind die Knöpfe groß genug? Stoße ich bei der Bedienung an andere Elemente? Bekomme ich ein Feedback (auditiv oder visuell?) darüber, ob ich etwas verändert habe und/oder das Objekt richtig bediene? \\ \\ {{:ma:sose24:beispiel_ui01_sose21_teresa_gerard.png?direct&400|}} {{:ma:sose24:beispiel_ui02_sose21_teresa_gerard.png?direct&400|}} \\ //Beispiele von Teresa Gerard (SoSe2021)// \\ \\+    * Spielen Sie an einem **Papiermodell** dessen Bedienung durch und überprüfen Sie ob alle Bedienelemente vorhanden sind. Sinnvoll kann es sein **verschiedene Alternativen** auf Papier anzuscribbeln, auszuschneiden und an temporär an Ihr Objekt zu kleben. Sind die Knöpfe groß genug? Stoße ich bei der Bedienung an andere Elemente? Bekomme ich ein Feedback (auditiv oder visuell?) darüber, ob ich etwas verändert habe und/oder das Objekt richtig bediene? \\ \\ {{:teaching:ma:media-installations:wise24-25:beispiel_ui01_sose21_teresa_gerard.png?direct&400|}} {{:teaching:ma:media-installations:wise24-25:beispiel_ui02_sose21_teresa_gerard.png?direct&400|}}\\ //Beispiele von Teresa Gerard (SoSe2021)// \\ \\
     * Aus den verschiedenen Versionen nehmen Sie die besten Elemente heraus und machen eine //Reinzeichnung// – d.h. **eine sehr saubere Darstellung des Interfaces**. Diese Darstellung kann beispielsweise sehr sauber mit einem Feinliner erfolgen, oder auch mit Hilfe eines Zeichenprogramms (z.B. Illustrator). Wichtig ist, das die Zeichnung in Originalgröße (1:1) stattfindet. Montieren Sie Ihr Interface auf Ihrem Papiermodell.      * Aus den verschiedenen Versionen nehmen Sie die besten Elemente heraus und machen eine //Reinzeichnung// – d.h. **eine sehr saubere Darstellung des Interfaces**. Diese Darstellung kann beispielsweise sehr sauber mit einem Feinliner erfolgen, oder auch mit Hilfe eines Zeichenprogramms (z.B. Illustrator). Wichtig ist, das die Zeichnung in Originalgröße (1:1) stattfindet. Montieren Sie Ihr Interface auf Ihrem Papiermodell. 
     * Es kann sein, dass Sie bei der Bearbeitung merken, dass Sie einige Aspekte in Ihrem Flow-Chart Diagram vergessen haben oder anpassen müssen. Das ist nicht schlimm. Sehen Sie dies als normalen Arbeitsprozess in dem man in iterativen Schleifen einem Ergebnis Schritt für Schritt näher kommt.     * Es kann sein, dass Sie bei der Bearbeitung merken, dass Sie einige Aspekte in Ihrem Flow-Chart Diagram vergessen haben oder anpassen müssen. Das ist nicht schlimm. Sehen Sie dies als normalen Arbeitsprozess in dem man in iterativen Schleifen einem Ergebnis Schritt für Schritt näher kommt.
Line 108: Line 108:
   - Zur Erstellung von Text und Bild Inhalten damit diese auf der kurseigenen [[https://sandstein.ct-lab.info|Sandstein Webseite]] angezeigt werden können:   - Zur Erstellung von Text und Bild Inhalten damit diese auf der kurseigenen [[https://sandstein.ct-lab.info|Sandstein 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:     - 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. Der Inhalt dieser Datei sieht [[radiogaga_grav_template|wie folgt]] aus+      * 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.       * 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//       * 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:     - 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. \\ {{:ba:save_for_web_1400x800px.jpg?direct&960|}}+      * 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!       * 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.       * Kontrollieren Sie, dass die verwendeten Bildnamen auch richtig in Ihrer *.md-Datei verwendet werden.
/var/www/vhosts/ct-lab.info/wiki.ct-lab.info/data/attic/teaching/ma/courses/media-installations/wise24-25/homework.1734100381.txt.gz · Last modified: 2024/12/13 14:33 by Felix Hardmood Beck