All design is necessarily contextual and therefore reflective, in the sense that it reflects the culture in which it is created.


Jay David Bolter & Diane Gromala, 2005

V O R T R A G

Willi Wills Wissen Logo

Was wird gezeigt?

Wie wird es gezeigt?

Warum wird es gezeigt?

Filmstills

Snowden und ein Arbeitskollege blicken auf eine Wand voller Monitore
Snowden (2016)
Zucks Finger berühren die Tastatur seines Laptops
The Social Network (2010)
FaceTime findet gleichzeitig zur Spielzeit statt
Bad Neighbours (2014)
Groupchat Nachrichten während einer Party
Bad Neighbours 2 (2016)
Closeup vom gebrochenen Handybildschirm
Eighth Grade (2018)
Closeup vom Bildschirm auf den Begriff XKEYSCORE
Snowden (2016)
Come Rush Kappa Nu
Bad Neighbours 2 (2016)
Want Friends for Life?
Bad Neighbours 2 (2016)
Der Laptop erleuchtet das gemütliche Kinderzimmer
Eighth Grade (2018)
Der Computer blickt zurück
The Fifth Estate (2013)
Browsing Tumblr
Eighth Grade (2018)
Eine abstrakte Collage an Text- und Codefragmenten
The Fifth Estate (2013)
Zuck sitzt alleine im gläsernen Kasten
The Social Network (2010)

Mockups

A film is made three times. Once when its written, once it is directed and once when it is edited.


Robert Bresson (Filmemacher)

Empfehlungen

The Net Plakat
The Net, 1995.
The Social Network Plakat
The Social Network, 2010.
Citizenfour Plakat
Citizenfour, 2014.
Eighth Grade Plakat
Eighth Grade, 2018.

T H E O R I E

Arrays

Ein Speicher für mehrere Werte in Form einer Liste. Diese Werte können durch automatisch erzeugte Listennummern (= Index, beginnend bei 0) gezielt ausgelesen und überschrieben werden.

JavaScript Variablen (Idee)
var sitz1 = ""; var sitz2 = ""; sitz1 = "Girlboss"; sitz2 = "Strolch"; console.log("Sitz Nr. 1 reserviert für " + sitz1); // Sitz Nr. 1 reserviert für Girlboss
JS
JavaScript Arrays (Idee)
var sitz1 = ""; var sitz2 = ""; sitz1 = "Girlboss"; sitz2 = "Strolch"; var wagon1 = [sitz1, sitz2]; console.log(wagon1); // ["Girlboss", "Strolch"] console.log(wagon1[0]); // Girlboss wagon1[0] = "Yogi"; console.log(wagon1[0]); // Yogi
JS

Objekte

Ein Speicher für Elemente mit komplexeren Eigenschaften (mehrere Werte) in Form einer Liste. Diese Werte können durch selbst festgelegte Bezeichnungen gezielt ausgelesen und überschrieben werden.

JavaScript Variablen (Idee)
var sitz1 = ""; var sitz2 = ""; var sitz1 = { nr: 1, name: "Girlboss", reservierung: true, abfahrt: "08:02", start: "Wien Hbf", ziel: "St. Pölten Hbf", } var sitz2 = { nr: 2, name: "Strolch", reservierung: false, abfahrt: "16:40", start: "St. Pölten Hbf", ziel: "Wien Meidling Bahnhof", } var wagon1 = [sitz1, sitz2]; console.log(wagon1[0].name); // Girlboss console.log(wagon1[1].reservierung); // false
JS

P R A X I S

Projekt anlegen

Responsive Navigation

Ein Overlay, das abhängig von der Fenstergröße und dem Klicken sichtbar oder versteck ist.

<header> <button id="nav-button">MENU</button> <nav id="nav-menu" class="hidden"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/about">My Bag</a></li> </ul> </nav> </header>
HTML
header, #nav-menu ul { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 20px; } header { padding: 30px; background-color: goldenrod; } .hidden { display: none; }
CSS

Die Navigation beim Klicken sichtbar machen oder verstecken.

<header> <button id="nav-button">MENU</button> <nav id="nav-menu" class="hidden"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/about">My Bag</a></li> </ul> </nav> </header>
HTML
var navMenu = document.getElementById("nav-menu"); var navButton = document.getElementById("nav-button"); function menu() { navMenu.classList.toggle("hidden"); } navButton.onclick = menu;
JS

Hinter der Logik von .toggle verbirgt sich eine if-Bedingung.

<header> <button id="nav-button">MENU</button> <nav id="nav-menu" class="hidden"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/about">My Bag</a></li> </ul> </nav> </header>
HTML
… function menu() { navMenu.classList.toggle("hidden"); if(navMenu.classList.contains("hidden")) { navMenu.classList.remove("hidden"); } else { navMenu.classList.add("hidden"); } } …
JS

Den Button-Text beim Klicken abhängig vom Zustand (sichtbar oder versteckt) verändern.

<header> <button id="nav-button">MENU</button> <nav id="nav-menu" class="hidden"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/about">My Bag</a></li> </ul> </nav> </header>
HTML
… function menu() { navMenu.classList.toggle("hidden"); if(navMenu.classList.contains("hidden")) { navButton.textContent = "MENU"; } else { navButton.textContent = "X"; } } …
JS

Den Button abhängig von der Fenstergröße sichtbar machen oder verstecken.

<header> <button id="nav-button">MENU</button> <nav id="nav-menu" class="hidden"> <ul> <li><a href="/">Übersicht</a></li> <li><a href="/about">My Bag</a></li> </ul> </nav> </header>
HTML
.hidden { display: none; } @media (min-width: 768px) { .hidden { display: block; } #nav-button { display: none; } }
CSS

Listen

Den standardmäßigen Style von Aufzählungspunkten anpassen oder entfernen.

… #nav-menu ul { list-style: none; list-style: square; /* disc, circle, … */ list-style: "—"; list-style: "🌻"; list-style: url("../media/list-icon.svg"); }
CSS

Abgabe

Übung so gut wie möglich fertig machen (vollständig und sauber) und bis zum nächsten Termin per Slack DM abgeben.

📂 → 🗜️ → 🎁 → 💬 → ✅