Walk

Aufgabe

Wir entwerfen gemeinsam einen Walk, mit dem wir unsere Umgebung anders betrachten, erleben und kennenlernen wollen.
Der Walk besteht aus einzelnen Webseiten, die in einer zufälligen Reihenfolge miteinander verlinkt sind (per Randomizer von Sebastian).

Jede Seite enthält mindestens:

• Eine Anweisung
• Den Link zum Randomizer (und damit zur nächsten, zufällig ausgewählten Anweisung)

Hier die Folien zum Einstieg.

Zeitplan (tbd.)

• hochladen bis:
  5.1.2026, 10 Uhr
• ausführen:
  ab 5.1.2026, 15 Uhr, bis vor Treffen am 8.1.2026
• Auswertung am:
  8.1.2026

Vorbereitung

Führt (mindestens) einen der Audio-Walks aus der App The Walks von Rimini Protokoll aus:

• Ampel: A
• Spielplatz: A & B
• Straße: A
• Supermarkt: A & B

Zugang für die Audio-Dateien: Benutzer*innenname und Passwort

Ort = Startpunkt (Ampel, Spielplatz, usw.)
A = für eine Person
A & B = für zwei Personen

Hilfreiche Fragen

• Wie kann ich jemanden dazu bringen, die Umgebung anders zu sehen oder zu hören?
• Wie kann eine Anweisung Neugier wecken oder Irritation erzeugen?
• Wie kann die Umgebung selbst Teil der Anweisung werden (z. B. Architektur, Spuren, Gerüche, Geräusche, Menschen, Wetter)?
• Was passiert, wenn die Sinne fokussiert/beschränkt werden (z. B. nur hören, nur tasten)?
• Welche Veränderungen im Verhalten (Tempo, Art zu gehen, etc.) können die Wahrnehmung beeinflussen
• Wie offen/präzise ist die Anweisung?
• Tonalität: poetisch, sachlich, …?
• Wie können Nutzer*innen mitbestimmen, was sie tun?
• Wie lange dauert die Ausführung der Anweisung?

Beispiele, ungestaltet

• Bsp. 1
• Bsp. 2
• Bsp. 3

Beispiele, gestaltet

• Bsp. 1 (Handy-Ansicht wählen!)
• Bsp. 2 (Handy-Ansicht wählen!)
• Bsp. 3 (Handy-Ansicht wählen!)
• Bsp. 4 (hier ein Video, in dem ich den Code erkläre)

CSS-Eigenschaften

Farbe

• (Textfarbe)
  color: red;
• (Hintergrundfarbe)
  background-color: yellow;
• Liste aller Farbnamen

Typografische Grundeinstellungen

• (Font family)
  font-family: sans-serif;
  font-family: monospace;
  font-family: serif;
• (Schriftgröße)
  font-size: 30px;
• (Zeilenhöhe)
  line-height: 0;
  line-height: 40px;
• (Buchstabenabstand / Spationierung)
  letter-spacing: 10px;
  letter-spacing: -10px;
• (Textausrichtung)
  text-align: center;
  text-align: right;
• (Schriftstil)
  font-style: italic;
• (Schriftstärke)
  font-weight: bold;
• (Text-Decoration)
  text-decoration: underline;

Font „genauer“ festlegen

• Modern Font Stacks
• Google Fonts
• Video How to use Google Fonts

Margin / Abstände: außen

• Außenabstand oben
  margin-top: 30px;
• Außenabstand unten
  margin-bottom: 30px;
• Außenabstand links
  margin-left: -50px;
• Außenabstand rechts
  margin-left: -50px;

Padding / Abstände: innen

• Innenabstand oben
  padding-top: 130px;
• Innenabstand unten
  padding-bottom: 130px;
• Innenabstand links
  padding-left: 250px;
• Innenabstand rechts
  padding-left: 250px;

Border

• Border
  border: 1px solid blue;
• Border-Radius
  border-radius: 20px;

Extra

• Rotate
  rotate: 20deg;

Hochladen

• stellt sicher, dass eure „Weiter-Links“ auf diese Adresse / diese URL verweisen!
• benennt eure drei HTML-Dateien so: vor_nac_1.html (für Vorname Nachname, Datei 1). In meinem Fall wären das
  seb_sch_1.html, seb_sch_2.html, seb_sch_3.html
• per drag & drop hier jede der drei Anweisungen (HTML-Dateien) einzeln hochladen