EIS Projekt – Entwicklung interaktiver Softwareanwendungen

📋 Projektübersicht

Dies ist eine mehrseitige Website für die Lehrveranstaltung „Entwicklung interaktiver Softwareanwendungen" an der PH Weingarten.

Dozenten: Stefan Franke und Prof. Dr. Wolfgang Müller

🚀 Live-Zugang

Die Website ist unter folgender Adresse erreichbar:

https://isa##.edumake.de

(## wird durch Ihre Benutzernummer ersetzt)

📁 Projektstruktur

~/public_html/
├── index.html              # Startseite
├── ueber_uns.html          # Über uns & Dozenten
├── eis_projekt.html        # Projektdetails
├── team.html               # Team-Seite
├── galerie.html            # Bildergalerie (Lightbox)
├── notenrechner.html       # Notenrechner (DOM-basiert)
├── textanalyse.html        # Textanalyse-Tool
├── api.html                # fetch & API Demo (JSONPlaceholder)
├── kanban.html             # Kanban-Board (Drag & Drop)
├── quiz.html               # Mini-Quiz (50 Fragen, 3 random, DOM-basiert)
├── kontakt.html            # Kontaktformular
├── impressum.html          # Rechtliche Infos
├── css/
│   └── style.css           # Zentrale Stylesheet (~3600 Zeilen)
├── js/
│   ├── script.js           # Dark Mode, Hamburger-Nav, Formular, Lightbox
│   ├── api-demo.js         # fetch() API Demo
│   ├── kanban.js           # Kanban-Board Logik
│   └── quiz.js             # Mini-Quiz Logik (U14)
├── img/
│   ├── logo.png            # Projekt-Logo
│   ├── gruppenbild.jpg     # Team-Gruppenbild
│   └── teambild.jpeg       # Teambild
└── README.md               # Diese Datei

🛠️ Technologie-Stack

Frontend

• HTML5 – Semantisches Markup
• CSS3 – Responsive Design mit Grid & Flexbox (~3600 Zeilen)
• JavaScript (ES6+) – Interaktive Elemente
  • Dark Mode mit localStorage-Persistenz
  • Hamburger-Navigation (Mobile)
  • Lightbox-Galerie
  • Formularvalidierung (feldspezifisch)
  • fetch() API Demo
  • Kanban-Board (Drag & Drop)
  • Mini-Quiz (DOM-basiert, 50 Fragen, zufällig)

Features

• ✅ Responsive Design (Mobile, Tablet, Desktop)
• ✅ Dark Mode (Toggle + localStorage; Auto-Dark ab 16:00 Uhr)
• ✅ Begrüssung nach Tageszeit im Header (Morgen/Mittag/Abend + Uhrzeit, live)
• ✅ Hamburger-Menü (Mobile)
• ✅ Einheitliche Navigation (12 Seiten)
• ✅ Kontaktformular mit feldspezifischer JS-Validierung
• ✅ Bildergalerie mit Lightbox
• ✅ Notenrechner (DOM-basiert, Tabs, Fortschrittsbalken)
• ✅ Textanalyse-Tool (Wörter, Zeichen, Sätze, Metriken)
• ✅ fetch & API Demo (JSONPlaceholder, DOM-Rendering, Fehlerbehandlung, Filter)
• ✅ Kanban-Board (Drag & Drop, Labels, localStorage, JSON-Export)
• ✅ Mini-Quiz (50 Fragen, 3 zufällig, Feedback, Auswertung, Highscore)
• ✅ SEO-freundliches Markup

🖥️ SSH-Zugang

Verbindung zum Server:

ssh -p 2222 isa##@edumake.de

⚠️ Wichtig: Eduroam sperrt Port 2222 – verwenden Sie WLAN mbm oder Ihren mobilen Hotspot.

Navigationszum Projektverzeichnis:

cd ~/public_html

📝 Dateienverwaltung

Dateien bearbeiten

Verwenden Sie einen Editor (nano, vi) oder SFTP:

nano index.html

Änderungen hochladen (via SFTP)

sftp -P 2222 isa##@edumake.de

🎨 CSS-Struktur

Die zentrale css/style.css ist in folgende Abschnitte unterteilt:

1. Global Styles & Reset – Box-model, Basis-Styling
2. Typography – Überschriften, Text, Links
3. Header & Navigation – Sticky Header, aktive Links
4. Main Content – Layout, Sections, Container
5. Forms – Input-Styling, Validierung
6. Galerie & Lightbox – Bilder und Modal-Fenster
7. Responsive Design – Media Queries

📱 Responsive Breakpoints

/* Tablet */
@media (max-width: 768px)

/* Mobile */
@media (max-width: 480px)

🔧 JavaScript-Funktionen

script.js (Basis)

• Dark Mode – Toggle + sofortige Wiederherstellung via localStorage (IIFE); ab 16:00 Uhr automatisch Dark Mode (wenn kein manueller Override gespeichert)
• Begrüssung nach Tageszeit (U13) – zeigt „Guten Morgen/Mittag/Abend, es ist HH:MM Uhr" im Header; Uhrzeit aktualisiert sich jede Minute (setInterval)
• Hamburger-Navigation – Mobile Menü mit aria-Attributen
• Navigation-Highlighting – Aktiver Link basierend auf URL
• Lightbox-Galerie – Klick auf Bilder öffnet vergrößerte Ansicht (ESC/Overlay zum Schließen)
• Kontaktformular – Feldspezifische Validierung, Erfolgsmeldung im DOM

api-demo.js

• fetch('https://jsonplaceholder.typicode.com/users') – automatischer Aufruf
• .then(r => r.json()) – JSON-Parsing mit HTTP-Status-Prüfung
• console.log() + console.table() – strukturierte Ausgabe
• createElement + DocumentFragment – performantes DOM-Rendering
• .catch(err) – Fehlermeldung + „Erneut versuchen"-Button
• Client-seitiger Live-Filter (Name, Stadt, Firma, E-Mail)

quiz.js

• 50 Fragen als Array von Objekten { frage, antworten, richtig }
• shuffle() (Fisher-Yates) zieht jede Runde 3 zufällige Fragen
• Komplett dynamischer DOM-Aufbau (createElement, kein statisches HTML)
• Direktes Feedback im DOM (kein alert()): Button grün/rot eingefärbt
• Buttons nach Antwort deaktiviert (kein doppeltes Punkten)
• Fortschrittsbalken + Live-Punktestand während dem Quiz
• Auswertungsscreen mit Ergebnis-Nachricht je Punktzahl (0/1/2/3)
• Fragen-Rückblick mit richtigen Antworten
• 🥇 Highscore (perfekte Runden) in localStorage
• „Neues Quiz starten" – zieht neue 3 zufällige Fragen
• Karten anlegen / löschen / editieren (contenteditable)
• Drag & Drop (dragstart, dragover, drop, dragenter, dragleave)
• Präzise Reihenfolge via getBoundingClientRect + Drop-Placeholder
• Farbige Labels per Rechtsklick-Kontextmenü
• Vollständige Persistenz in localStorage als JSON
• Export als JSON-Datei (Blob + URL.createObjectURL)

📚 Inhaltsseiten

index.html

• Hero-Abschnitt mit Projekt-Übersicht
• Info-Karten mit Links zu anderen Seiten

ueber_uns.html

• Veranstaltungsinformationen
• Dozenten-Profile

eis_projekt.html

• Technologie-Stack & Projektstruktur

team.html

• Teammitglieder-Profile mit Beschreibung & Skill-Tags

galerie.html

• Bildergalerie mit Lightbox (Teambild, Gruppenbild)

notenrechner.html

• DOM-basierter Notenrechner mit Tabs & Fortschrittsbalken

textanalyse.html

• Textanalyse: Wörter, Zeichen, Sätze, Lesbarkeit, häufigste Wörter

api.html

• Live-Datenabruf von jsonplaceholder.typicode.com/users
• DOM-Rendering, Filter, Fehlerbehandlung

kanban.html

• Trello-ähnliches Kanban-Board
• Drag & Drop, Labels, localStorage-Persistenz, JSON-Export

quiz.html

• Mini-Quiz mit 3 zufälligen Fragen aus 50 (Allgemeinwissen)
• Direktes Feedback, Punktezähler, Auswertung, Highscore

kontakt.html

• Kontaktformular mit feldspezifischer JavaScript-Validierung

impressum.html

• Rechtliche Hinweise & Datenschutzerklärung

🚀 Entwicklungsschritte (Lernpfad)

Unit	Thema	Inhalte
U1	Grundlagen	SSH, Linux, erste HTML-Seite
U2	Styling & Interaktion	CSS, JavaScript, Events
U3	Website-Architektur	Navigation, mehrere Seiten
U4	DOM & APIs	Notenrechner, Textanalyse, fetch & API Demo
Bonus	Erweitert	Kanban-Board (Drag & Drop, localStorage)
U14	Quiz	Mini-Quiz (50 Fragen, zufällig, DOM-basiert, Highscore)

🗓️ Änderungsprotokoll

Datum	Änderung
03.06.2026	U14: Mini-Quiz – 50 Fragen, 3 zufällig, DOM-Aufbau, Auswertung, Highscore
03.06.2026	U13: Begrüssung nach Tageszeit im Header + Auto-Dark-Mode ab 16:00 Uhr
20.05.2026	Dark Mode: Beschreibungstexte Team/Notenrechner/Textanalyse in dunkelblau
20.05.2026	Galerie: teambild.jpeg eingefügt
20.05.2026	Mega-Bonus: Kanban-Board (Drag & Drop, Labels, localStorage, JSON-Export)
20.05.2026	Bonus: fetch & API Demo (JSONPlaceholder, DOM-Rendering, Filter)
vor 20.05.2026	Dark Mode, Hamburger-Navigation, Kontaktformular-Validierung, Notenrechner, Textanalyse

📧 Support

Bei Fragen oder Problemen kontaktieren Sie:

• Stefan Franke: stefan.franke@ph-weingarten.de
• Prof. Dr. Wolfgang Müller: wolfgang.mueller@ph-weingarten.de

📄 Lizenz

Dieses Projekt ist ein Lernprojekt der PH Weingarten und dient zu Ausbildungszwecken.

---

Zuletzt aktualisiert: 3. Juni 2026