181 lines
4.4 KiB
Markdown
181 lines
4.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
|
||
├── 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
|