eis-website/README.md

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:

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

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