The artwork is the residue of a process, of a project, rather than something that you see and then have to realize thereafter.

David Shrigley, 2016

T H E O R I E

Projekt Ziel

Jede:r Studierende wird eine eigene kleine Archiv-Website umsetzen. Diese soll gestalterisch, semantisch und interaktiv weiterentwickelt und bis zum Semesterende (22.6.) fertiggestellt werden.

Projekt Umfang (Einzelseiten und Features)

🏠 Start
📋 Übersicht
🪄 Filter
🗜️ Responsive
🧃 Objekt
oder
🎈 Overlay

Projekt Struktur

Diese Ordnung kann als Ausgangspunkt für die Website herangezogen werden.

📂 vorname-bag
  📂 fonts
    📦 beispiel-regular.woff2
  📁 media
    🖼️ beispiel-grafik.png
    📹 beispiel-video.mp4
  📂 objekte
    🧃 beispiel.html (Detailseite)
  📂 scripts
    🪩 vorname.js
  📂 styles
    🎨 vorname.css
  🏠 index.html (Startseite)

Ordnerstruktur

P R A X I S

Projekt anlegen

Ordner „javascript-5“ kopieren, in „javascript-6“ umbenennen und in VS Code öffnen
Datei „index.html“ im Chrome-Browser öffnen

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;

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");
  }
}

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";
  }
}

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

Seitenaufruf als Auslöser

Eine Funktion beim Laden der Website ausführen.

<section>
  <h1 id="zitat" >Im Moment habe ich kein E-lan</h1>
  <img src="media/beispiel-grafik.png" alt="Schwere Füße">
  <button id="wow">WOW</button>
</section>

HTML

function quote() {
  …
  titel.textContent = "That’s hot";
  bild.src = "media/andere-beispiel-grafik.jpg";
}

button.onclick = quote;
window.onload = quote;

Zufallsgenerator

Bei jedem Neuladen der Website ein zufälliges Text-Element einer Liste auswählen.

<section>
  <h1 id="zitat" >Im Moment habe ich kein E-lan</h1>
  <img src="media/beispiel-grafik.png" alt="Schwere Füße">
  <button id="wow">WOW</button>
</section>

HTML

function quote() {
  …
  var randomZahl = Math.floor(Math.random() * zitate.length);
  var zitate = ["Im Moment habe ich kein E-lan", "Cringe", "Zahlen bitte!"];

  titel.textContent = zitate[0]; // Im Moment habe ich kein E-lan
  titel.textContent = zitate[randomZahl]; // ?

  bild.src = "media/andere-beispiel-grafik.jpg";
}

button.onclick = quote;
window.onload = quote;

Bei jedem Neuladen der Website ein zufälliges Bild-Element einer Liste auswählen.

<section>
  <h1 id="zitat" >Im Moment habe ich kein E-lan</h1>
  <img src="media/beispiel-grafik.png" alt="Schwere Füße">
  <button id="wow">WOW</button>
</section>

HTML

function quote() {
  …
  var randomZahl = Math.floor(Math.random() * zitate.length);
  var zitate = ["Im Moment habe ich kein E-lan", "Cringe", "Zahlen bitte!"];
  var bilder = ["media/andere-beispiel-grafik.jpg", "media/foto-2.jpg", "media/foto-3.png"];

  titel.textContent = zitate[0]; // Im Moment habe ich kein E-lan
  titel.textContent = zitate[randomZahl]; // ?

  bild.src = "media/andere-beispiel-grafik.jpg";
  bild.src = bilder[randomZahl]; // ?
}

button.onclick = quote;
window.onload = quote;

Sounds

Audiofiles abspielen und pausieren.

<div id="box">🔊</div>
<audio id="sound" src="media/beispiel-audio.mp3" controls>🥵 Oje</audio>

HTML

#box {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 2;
  font-size: 50px;
}
              
audio {
  display: none;
}

CSS

var audioButton = document.getElementById("box");
var audioFile = document.getElementById("sound");

function audio(sound) {
  console.log(sound);

  if(sound.paused) {
    sound.play();
  } else {
    sound.pause();
  }
}

audioButton.onclick = () => audio(audioFile);

Animation

Die Veränderung von Elementen unabhängig von Interaktionen animieren.

<div id="box">🔊</div>
<audio id="sound" src="media/beispiel-audio.mp3" controls>🥵 Oje</audio>

HTML

@keyframes slide {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(100%);
  }
}

#box {
  …
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;

  animation: slide 2s infinite alternate; // Kurze Schreibweise
}

CSS

Mauszeiger

Das Aussehen vom Cursor anpassen.

* {
  cursor: pointer;
  cursor: help;
  cursor: zoom-in;

  cursor: url("../media/cursor.png") 16 16, auto; // 32x32px
}

CSS

Den Cursor durch ein komplexeres Element ergänzen oder ersetzen.

<body>
  …
  <div id="cursor">🐝</div>
</body>

HTML

* {
  cursor: none;
}

#cursor {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  user-select: none;
}

CSS

var cursorIcon = document.getElementById("cursor");

function cursor(event) {
  console.log("x:", event.clientX, "y:", event.clientY);

  cursorIcon.style.left = event.clientX;
  cursorIcon.style.top = event.clientY;
}

window.onmousemove = cursor;

Light und Dark Mode

Das Design der Website den visuellen Präferenzen des Betriebssystems anpassen.

body {
  background-color: #f0fff0;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: indigo;
    color: ivory;
  }
}

CSS

Theme

Dokument um Farbschema und Icon ergänzen.

<html lang="de">
  <head>
    …
    <meta name="theme-color" content="#ff69b4">
    <link href="media/favicon.png" rel="icon"> // 192x192px
  </head>
  <body>
    …
  </body>
</html>

HTML

Beschreibung

Dokument um erklärendes Snippet ergänzen. Suchmaschinen, Social Media und Messenger zeigen diese Information meistens neben dem Titel und dem Link an.

<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Meine erste Website</title>
    <meta name="description" content="What’s In My Bag Yo!">

    <meta property="og:title" content="Ur cooler Website Spezialtitel für Social Media">
    <meta property="og:description" content="Wer das liest ist schön.">
    <meta property="og:image" content="media/website-thumbnail.jpg">
  </head>
  <body>
    …
  </body>
</html>

HTML

Projekt Abgabe

Die fertige What’s In My Bag-Website muss bis zum Semesterende (22.06.2024) als ein verpackter Ordner mit maximal 100MB inklusive aller relevanten Dateien (HTML, CSS, JS, Medien, Fonts, …) per Slack DM abgegeben werden.

📂 → 🗜️ → 🎁 → 💬 → ✅