Entwicklung interaktiver Softwareanwendungen

Stefan Franke · Daniel Schiffner

Entwicklung interaktiver Softwareanwendungen

Sitzung 3 — SoSe 2026

Übersicht

Wiederholung: Was war beim letzten Mal?
Stolperfallen: Browser-Cache, Konflikte, Unterordner
Versionsverwaltung mit Git — nochmal von vorne
Forgejo — Projektplattform der PH
Dynamik durch JavaScript
Aufgaben heute — Schritt für Schritt mit Fortschrittsanzeige

Heute holen wir alle ab und gehen langsam vor. Wer schon weiter ist, hat Bonus-Aufgaben.

Wiederholung: Was war beim letzten Mal?

Einführung in Terminal & Kommandozeile
SSH-Schlüsselpaar (Public/Private Key)
SSH-Verbindung zum Server (Port 2222, nur via mbm-WLAN)
Eigene Landing Page (HTML, CSS)
Erste Dateien auf dem Server in /home/isa##/public_html
Versionsverwaltung mit Git & Forgejo (theoretisch)
JavaScript & DOM (Einführung)

Rückblick & Beobachtungen

Manche Tandems sind mit Git/JavaScript noch nicht gestartet
Andere Tandems haben schon Dark-Mode-Toggle, Form-Validierung, Lightbox … gebaut
Heute: alle abholen, einheitlicher Stand bis Ende der Sitzung

Mantra: nicht weiter, bis alle Schritte erledigt sind.

Stolperfallen aus der Praxis

Browser-Cache — "meine Änderung ist nicht da!"
Dateien in verschiedenen Unterordnern — "warum findet er die nicht?"

1. Browser-Cache

Der Browser speichert HTML, CSS und Bilder — und zeigt euch oft die alte Version, obwohl ihr eine neue hochgeladen habt.

Hard Reload:
- Windows/Linux: Strg + F5 oder Strg + Shift + R
- macOS: Cmd + Shift + R
Privates Fenster — ignoriert den Cache komplett
DevTools (F12) → Netzwerk → Haken bei "Cache deaktivieren"

2. Dateien in Unterordnern

Wenn ihr eure Website in Ordner gliedert (gut!), müssen die Pfade in HTML stimmen:

Struktur:

public_html/
│― index.html
│― css/
│   … style.css
│― img/
│   … logo.png
└ pages/
    … impressum.html

Verlinkung in index.html:

<link href="css/style.css">
<img src="img/logo.png">
<a href="pages/impressum.html">

Aus pages/impressum.html:

<link href="../css/style.css">
<img src="../img/logo.png">

.. = eine Ordnerebene nach oben

Zentrale Begriffe (kompakt)

Terminal / PowerShell: Eingabe von Befehlen
SSH: Sichere Verbindung zum Server
Public/Private Key: Schlüsselpaar für Login ohne Passwort
Port 2222: SSH-Port für edumake.de
~/public_html: Eure Website-Daten
HTML / CSS / JS: Struktur, Stil, Funktion
Webserver (NGINX): Liefert eure Seiten aus
Git: Versionskontrolle (lokal)
Forgejo: Server für Git-Projekte (git.md-phw.de)
Repository (Repo): Projekt-Container
Commit: Schnappschuss einer Änderung
Push / Pull: Hochladen / Herunterladen
Merge-Konflikt: Gleiche Datei doppelt geändert
DOM: HTML als Objekt-Baum für JS
Event: Klick, Eingabe, etc.

Versionsverwaltung mit Git

Heute: nochmal von vorne — in Ruhe und mit allen.

Problem 1: Versionierung

Kennt ihr das?
- index.html
- index_v2.html
- index_v2_final.html
- index_v2_final_WIRKLICH_FINAL.html
Was, wenn ihr eure index.html kaputt macht?
Wie kommt ihr zur letzten funktionierenden Version zurück?

Problem 2: Zusammenarbeit

Beide Partner ändern die gleiche Datei auf dem Server
Wer zuletzt speichert, überschreibt die Änderungen des anderen
Keine Möglichkeit zu sehen, was der Partner geändert hat
Keine Möglichkeit, Änderungen zusammenzuführen

Beide Probleme löst Git.

Was ist Git?

Ein Logbuch für euer Projekt
Git merkt sich jede Version eurer Dateien
Ihr könnt jederzeit zu einer früheren Version zurückspringen
Git erkennt Konflikte und hilft beim Zusammenführen

Wichtig: Git ≠ GitHub ≠ Forgejo
Git = das Werkzeug (lokal auf eurem Rechner)
Forgejo = Online-Plattform der PH zum Teilen von Git-Projekten

Drei Orte, ein Projekt

💻

Euer Laptop

Werkstatt

Dateien lokal bearbeiten
(VS Code o.ä.)

push →

← pull

🔒

Forgejo

Tresor

git.md-phw.de
Zentraler Speicher

pull →

← push

🌐

Server

Schaufenster

edumake.de
Website ist live

git clone – Erste Kopie vom Tresor holen

Die wichtigsten Befehle

`git add DATEI`	Datei zum Versand vormerken
`git commit -m "..."`	Paket zukleben und beschriften
`git push`	Paket an Forgejo abschicken
`git pull`	Neueste Version abholen
`git clone URL`	Projekt zum ersten Mal herunterladen
`git status`	Was hat sich geändert?

Der tägliche Workflow

git pull — Neueste Version holen
Dateien bearbeiten
git add — Geänderte Dateien vormerken
git commit -m "..." — Änderungen speichern
git push — An Forgejo senden

⚠ Mantra: Immer erst pull, dann arbeiten, dann push.

Git installieren

Windows

Installer von git-scm.com
Standardeinstellungen beibehalten
Git Bash wird mitinstalliert

macOS

Terminal öffnen
git --version eingeben
Xcode Command Line Tools werden angeboten

Prüfen: git --version

Forgejo — Projektplattform der PH

git.md-phw.de

Was ist Forgejo?

Open-Source-Plattform zur Projektverwaltung
Wie GitHub — aber selbst gehostet an der PH
Alle Daten bleiben bei uns (Datenschutz!)
Registrierung mit PH-Mailadresse

Alles im Browser

Repository anlegen — ohne Terminal
Dateien hochladen — Drag & Drop
Dateien bearbeiten — Markdown, HTML direkt online
Verlauf — jede Änderung nachvollziehbar
README.md — wird automatisch angezeigt

Dynamik durch JavaScript

Was ist JavaScript?

Skriptsprache für Webseiten
Ermöglicht Dynamik und Interaktivität
Wird direkt im Browser ausgeführt
Arbeitet mit HTML und CSS zusammen

JavaScript, HTML und CSS

HTML — Struktur und Inhalte
CSS — Gestaltung und Layout
JavaScript — Steuerung und Dynamik
Zugriff & Veränderung über DOM (Document Object Model)

Wozu JavaScript?

Elemente reagieren auf Klicks / Eingaben
Inhalte ohne Neuladen ändern
Formulare prüfen und steuern
Animationen und Effekte erzeugen
Dark-Mode, Bildergalerie, Slideshow, Kontaktformular …

Aufgaben Sitzung 3 0 / 0 erledigt

× 1SSH-Verbindung herstellen 📁 Tutorial: u1.html / u2.html

Verbindet euch mit eurem Server. Wichtig: Port 2222 ist nur über das mbm-WLAN offen!

WLAN mbm verbunden (eduroam blockiert Port 2222)
Benutzername gemerkt: isa##
Server-Adresse: edumake.de oder IP des Servers (egal welche)
SSH-Befehl ausgeführt: ssh -p 2222 isa##@edumake.de
Eingeloggt — pwd zeigt /home/isa##
Tutorials gelesen: u1: SSH-Einführung · u2: SSH & Website

× 2Forgejo: Anmelden & Repo erstellen git.md-phw.de

Legt euch einen Account auf git.md-phw.de an und erstellt ein neues Repository.

Mit PH-Mail (@stud.ph-weingarten.de) registriert
E-Mail-Verifizierung abgeschlossen
Neues Repository erstellt — Name z. B. eis-website
WICHTIG: kein Häkchen bei "Repository mit README initialisieren"
Tandempartner als Mitarbeiter eingeladen (Settings → Collaborators)

× 3README.md im Forgejo-GUI anlegen Doku eurer Website-Struktur

Erstellt direkt im Browser auf Forgejo eine README.md, die eure Website-Struktur dokumentiert.

In Forgejo: "Add file" → "New file" → Name README.md
Pfad auf dem Server notiert (z. B. /home/isa##/public_html)
Auf dem Server ls -R ausgeführt — Auflistung aller Verzeichnisse und Dateien in die README kopiert
Pro Datei in Stichworten: Was steht drin? Was ist die Funktion?
Verlinkungen dokumentiert: Welche Datei ist in welcher verlinkt? Warum?
Commit-Nachricht eintragen & speichern

Beispiel-Auszug für die README.md:

# Meine Website (isa05)

Pfad auf dem Server:
/home/isa05/public_html

Struktur:
.
│― index.html
│― css/
│   … style.css
│― img/
│   … logo.png
└ pages/
    │― impressum.html
    … kontakt.html

Dateien:
- index.html — Landing-Seite
  (lande hier bei isa05.edumake.de)
- css/style.css — Layout, Farben
- img/logo.png — Logo im Header
- pages/impressum.html — Pflichtangaben
- pages/kontakt.html — Kontaktformular

Verlinkungen:
- index.html verlinkt css/style.css
  (im <head>) — für Layout
- index.html verlinkt img/logo.png —
  Logo wird im Header angezeigt
- index.html verlinkt pages/impressum.html
  — Footer-Link
- pages/*.html verlinken ../css/style.css
  (eine Ebene höher)

× 4Git auf eurem Laptop einrichten Tutorial: u5.html

Verbindet euer lokales Git mit Forgejo.

Git installiert (git --version funktioniert)
Konfiguriert: git config --global user.name "Euer Name"
Konfiguriert: git config --global user.email "name@stud.ph-weingarten.de"
SSH-Key vom Laptop in Forgejo hinterlegt (Settings → SSH Keys)
Repo geklont: git clone git@git.md-phw.de:NAME/eis-website.git
Tutorial: u5: Versionsverwaltung mit Git

× 6Lokal ändern → pushen → im GUI prüfen Erster Git-Roundtrip

Macht eine kleine Änderung an eurem lokalen Repo (z. B. in index.html) und schickt sie an Forgejo.

Datei in VS Code (oder anderem Editor) geöffnet & geändert
git status — zeigt die geänderte Datei
git add DATEI & git commit -m "Test-Änderung"
git push
Im Forgejo GUI geprüft: ist die Änderung sichtbar?

× 7Auf den Server pullen & prüfen Deployment + Cache-Test

Holt die Änderung vom Forgejo auf den Server und prüft im Browser.

SSH zum Server, cd ~/public_html
git pull — "Already up to date" oder Liste der Updates
Im Terminal prüfen: cat DATEI — ist die Änderung drin?
Im Browser: https://isa##.edumake.de aufgerufen
Cache leeren: Strg+Shift+R (Win) / Cmd+Shift+R (Mac)
Änderung ist sichtbar 🎉

× 8JavaScript Einstieg Tutorial: u6.html

Wer JavaScript noch nicht angefasst hat, startet hier.

Tutorial durchgearbeitet: u6: JavaScript Grundlagen
Variablen, Funktionen, if/else verstanden
Eigene script.js erstellt und in der HTML eingebunden
console.log(...) in der Browser-Konsole (F12) gesehen
Eigene Funktion geschrieben (z. B. Addieren zweier Zahlen)

× 9JavaScript & DOM Tutorial: u7.html

JavaScript greift jetzt auf die Seite zu.

Tutorial durchgearbeitet: u7: JavaScript & DOM
document.getElementById(...) & querySelector(...) verwendet
Auf Klick reagiert: element.addEventListener('click', ...)
Text dynamisch geändert: element.textContent = "..."
CSS-Klasse umgeschaltet: element.classList.toggle('aktiv')

× 10Dark Mode Toggle JS + CSS + localStorage

Baut einen Dark-Mode-Toggle auf eurer Website, der die Einstellung speichert.

Button im HTML angelegt (z. B. <button id="dark-toggle">)
CSS-Klasse .dark definiert (andere Farben für Hintergrund/Schrift)
JS: Klick auf Button schaltet document.body.classList.toggle('dark')
localStorage.setItem('dark', 'true') beim Aktivieren
Beim Laden der Seite: gespeicherte Einstellung wiederherstellen

× B1Bonus — Kontaktformular validieren für Schnelle

Erweitert euer Kontaktformular um Validierung mit JavaScript (ohne Backend).

Formular mit Feldern: Name, E-Mail, Nachricht
Beim submit: event.preventDefault() (kein Reload)
Prüfen: Felder nicht leer, E-Mail enthält @
Bei Fehler: Fehlermeldung neben Feld einblenden (kein alert!)
Bei Erfolg: Danke-Nachricht im DOM anzeigen

× B2Bonus — fetch & API für Schnelle

Holt Daten von einer öffentlichen API und zeigt sie auf eurer Seite an.

Test-API gefunden, z. B. jsonplaceholder.typicode.com/users
fetch(URL) in JS aufgerufen
.then(r => r.json()) — Antwort als JSON parsen
Daten in console.log(...) geprüft
Liste im DOM gerendert — mit createElement oder innerHTML
Fehlerbehandlung mit .catch(...)

Heute geschafft?

SSH zum Server ✓
Forgejo-Repo angelegt & mit README dokumentiert ✓
Git lokal + Server eingerichtet ✓
Erster kompletter Roundtrip: lokal → Forgejo → Server → Browser ✓
JavaScript-Grundlagen & DOM ✓

Nächstes Mal: Aus der Website wird eine Anwendung — Python & Flask.