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:39] – [Teilaufgabe 5] Felix Hardmood Beckteaching:ma:courses:media-installations:wise24-25:homework [2025/01/11 13:20] (current) – [Teilaufgabe 7] Felix Hardmood Beck
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? \\ \\ {{:teaching:ma:media-installations:wise24-25:beispiel_ui01_sose21_teresa_gerard.png?direct&200 |}} {{:teaching:ma:media-installations:wise24-25:beispiel_ui02_sose21_teresa_gerard.png?direct&200 |}}\\ //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.1734100755.txt.gz · Last modified: 2024/12/13 14:39 by Felix Hardmood Beck