221 lines
7.4 KiB
Markdown
221 lines
7.4 KiB
Markdown
# 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)
|
||
├── 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
|
||
├── 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)
|
||
|
||
### 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 (11 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)
|
||
- ✅ SEO-freundliches Markup
|
||
|
||
## 🖥️ SSH-Zugang
|
||
|
||
Verbindung zum Server:
|
||
```bash
|
||
ssh -p 2222 isa##@edumake.de
|
||
```
|
||
|
||
⚠️ **Wichtig:** Eduroam sperrt Port 2222 – verwenden Sie WLAN mbm oder Ihren mobilen Hotspot.
|
||
|
||
Navigationszum Projektverzeichnis:
|
||
```bash
|
||
cd ~/public_html
|
||
```
|
||
|
||
## 📝 Dateienverwaltung
|
||
|
||
### Dateien bearbeiten
|
||
Verwenden Sie einen Editor (nano, vi) oder SFTP:
|
||
```bash
|
||
nano index.html
|
||
```
|
||
|
||
### Änderungen hochladen (via SFTP)
|
||
```bash
|
||
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
|
||
|
||
```css
|
||
/* 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)
|
||
|
||
### kanban.js
|
||
- Spalten anlegen (`prompt` → `createElement` + `appendChild`)
|
||
- 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
|
||
|
||
### 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) |
|
||
|
||
## 🗓️ Änderungsprotokoll
|
||
|
||
| Datum | Änderung |
|
||
|-------|----------|
|
||
| 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
|