# 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
├── kontakt.html            # Kontaktformular
├── impressum.html          # Rechtliche Infos
├── css/
│   └── style.css           # Zentrale Stylesheet
├── js/
│   └── script.js           # JavaScript für Interaktivität
├── img/
│   ├── logo.svg            # PH-Logo
│   └── favicon.svg         # Browser-Icon
├── assets/
│   └── projektinfo.pdf     # Downloadbereich
└── README.md               # Diese Datei
```

## 🛠️ Technologie-Stack

### Frontend
- **HTML5** – Semantisches Markup
- **CSS3** – Responsive Design mit Grid & Flexbox
- **JavaScript (ES6+)** – Interaktive Elemente
  - Lightbox-Galerie
  - Formularvalidierung
  - Navigation-Highlighting

### Features
- ✅ Responsive Design (Mobile, Tablet, Desktop)
- ✅ Einheitliche Navigation
- ✅ Kontaktformular mit Validierung
- ✅ Bildergalerie mit Lightbox
- ✅ Download-Bereich
- ✅ Impressum & rechtliche Hinweise
- ✅ 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

### 1. Navigation-Highlighting
- Automatisches Markieren des aktiven Links basierend auf URL

### 2. Lightbox-Galerie
- Klick auf Bilder öffnet eine vergrößerte Ansicht
- ESC-Taste zum Schließen
- Overlay-Klick zum Schließen

### 3. Kontaktformular
- Email-Validierung
- Erfolgs-/Fehlermeldungen
- Automatisches Zurücksetzen nach Absenden

## 📚 Inhaltsseiten

### index.html
- Hero-Abschnitt mit Projekt-Übersicht
- Info-Karten mit Links zu anderen Seiten
- Updates-Liste

### ueber_uns.html
- Veranstaltungsinformationen
- Dozenten-Profile
- Projektstruktur (U1-U4+)

### eis_projekt.html
- Technologie-Stack
- Projektstruktur
- Design-Prinzipien
- Deployment-Infos

### kontakt.html
- Kontaktinformationen
- Kontaktformular
- FAQ-Sektion

### impressum.html
- Rechtliche Hinweise
- Datenschutzerklärung
- Haftungsausschluss

## 🚀 Entwicklungsschritte (Lernpfad)

| Unit | Thema | Inhalte |
|------|-------|---------|
| **U1** | Grundlagen | SSH, Linux, erste HTML-Seite |
| **U2** | Styling & Interaktion | CSS, JavaScript, Events |
| **U3** | Website-Architektur | Navigation, mehrere Seiten (aktuell) |
| **U4** | Backend-Integration | Python, Flask, APIs |
| **U5+** | Erweitert | Datenbanken, Authentifizierung |

## 🎯 Nächste Schritte

- [ ] Logo durch echte PH-Weingarten-Logo ersetzen
- [ ] Bilder hochladen und in Galerie einbinden
- [ ] Backend mit Flask entwickeln (U4)
- [ ] Formular-Backend-Integration
- [ ] Datenbank-Verbindung
- [ ] User-Authentifizierung

## 📧 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:** 22. April 2026