Wiederholung: Was war vor 14 Tagen?

• Einführung in Terminal & Kommandozeile
• Anlegen einer eigenen Verzeichnisstruktur (EIS26)
• Erstellung eines SSH-Schlüsselpaares (Public / Private Key)
• Verbindung zum Server via SSH (Port 2222)
  Nur über das eigene WLAN mbm möglich – nicht über eduroam, da Port 2222 dort blockiert ist.
• Aufbau einer eigenen einfachen Landing Page (HTML, CSS)
• Erste eigene Dateien auf dem Server im Verzeichnis /home/isa##/public_html
• Verständnis der Serververbindung, Ordnerstrukturen und Dateibearbeitung mit nano

Rückblick & Herausforderungen

• Keine SSH-Verbindung möglich:
  → Ursache: AllowUsers in /etc/ssh/sshd_config war nicht für neue Benutzer angepasst.
• Instabile WLAN-Verbindung:
  → Der mobile Router (Vodafone SIM) hatte Verbindungsabbrüche – ggf. Standort optimieren oder alternative SIM prüfen.

Was hat gut geklappt? Wo gab es weitere Schwierigkeiten?

Wie kamen Sie mit dem Tutorial zurecht? War es verständlich, zu einfach oder zu komplex?

Basics & Begriffe von Serveranwendungen

Zentrale Begriffe aus Sitzung 1

Begriffe im Überblick (kompakt erklärt)

WarmUp: AI Tandem Lab

Terminal-Workflows mit KI analysieren

Ablauf

Heutige Session

franke-lab.de/ai-tandem-lab

Jetzt beitreten!

franke-lab.de/ai-tandem-lab

Übung: Website-Projekt

Projektstruktur – Best Practice

/home/isa##/public_html/
├── index.html              ← Startseite
├── kontakt.html            ← Kontaktformular
├── ueber_uns.html          ← Projektbeschreibung
├── eis_projekt.html        ← Teamprojektseite
├── css/                    ← Stylesheets
│   └── style.css
├── js/                     ← JavaScript-Dateien
│   └── script.js
├── img/                    ← Bilder, Logos, Icons
│   ├── gruppenbild.jpg
│   └── logo.svg
└── assets/                 ← Downloads (PDFs, ZIPs, etc.)
    └── projektinfo.pdf
				  

Trennung nach Dateitypen: erleichtert Wartung, Erweiterung und saubere Verlinkung im HTML.

Später: Umstrukturierung für Flask

Aufgabe 1: Website-Projekt – Zwischenstand

Alle Tandems haben die Grundstruktur bereits angelegt:

• 5 HTML-Seiten vorhanden (index, kontakt, ueber_uns, eis_projekt, impressum)
• Die meisten nutzen css/style.css und js/script.js korrekt

Was bei vielen noch fehlt:

• Bilder & Fotogalerie – Ordner img/ mit Bildern anlegen, Galerie in einer Unterseite einbinden
• PDF-Download – eine PDF-Datei in assets/ ablegen und verlinken
• Dateistruktur aufräumen – einige haben Dateien am falschen Ort:
  • style.css und script.js gehören in css/ bzw. js/
  • .save-Dateien und Duplikate löschen
  • Keine HTML-Dateien im css/-Ordner!

Bringt euer Projekt auf den Stand der Best-Practice-Struktur (vorheriger Slide), bevor wir mit Git starten.

Versionsverwaltung mit Git

Problem 1: Versionierung

• Kennt ihr das?
  • index.html
  • index_v2.html
  • index_v2_final.html
  • index_v2_final_WIRKLICH_FINAL.html
• Was, wenn ihr eure index.html kaputt macht?
• Wie kommt ihr zur letzten funktionierenden Version zurück?

Problem 2: Zusammenarbeit

• Beide Partner ändern die gleiche Datei auf dem Server
• Wer zuletzt speichert, überschreibt die Änderungen des anderen
• Keine Möglichkeit zu sehen, was der Partner geändert hat
• Keine Möglichkeit, Änderungen zusammenzuführen

Beide Probleme löst Git.

Was ist Git?

• Ein Logbuch für euer Projekt
• Git merkt sich jede Version eurer Dateien
• Ihr könnt jederzeit zu einer früheren Version zurückspringen
• Git erkennt Konflikte und hilft beim Zusammenführen

Wichtig: Git ≠ GitHub ≠ Forgejo
Git = das Werkzeug (lokal auf eurem Rechner)
Forgejo / GitHub = Online-Plattform zum Teilen von Git-Projekten

Drei Orte, ein Projekt

git clone – Erste Kopie vom Tresor holen

Die wichtigsten Befehle

Der tägliche Workflow

1. git pull – Neueste Version holen
2. Dateien bearbeiten
3. git add – Geänderte Dateien vormerken
4. git commit -m "..." – Änderungen speichern
5. git push – An Forgejo senden

Deployment: Auf dem Server per SSH einloggen und git pull ausführen – fertig!

Git installieren

Prüfen: git --version im Terminal / Git Bash

Forgejo – Projektplattform der PH

git.md-phw.de

Was ist Forgejo?

• Open-Source-Plattform zur Projektverwaltung
• Wie GitHub – aber selbst gehostet an der PH
• Alle Daten bleiben bei uns (Datenschutz!)
• Nicht nur für Code – für alle Arten von Projekten
• Registrierung mit PH-Mailadresse

Repositories – nicht nur Code

• Beliebige Dateien ablegen und versionieren:
  • PDF-Dokumente, Berichte, Abschlussarbeiten
  • Messdaten, Tabellen, Forschungsdaten
  • Bilder, Präsentationen, Office-Dateien
  • Webseiten, Code, Skripte
• Jede Änderung wird protokolliert – nichts geht verloren
• Upload per Drag & Drop im Browser

Alles im Browser

• Dateien hochladen – Drag & Drop, kein Terminal nötig
• Dateien bearbeiten – Markdown, Text, HTML direkt online
• Vorschau – Markdown wird formatiert angezeigt
• Verlauf – Jede Änderung nachvollziehen und rückgängig machen
• Download – Gesamtes Projekt als ZIP herunterladen

Für Fortgeschrittene: Git-Befehle im Terminal (push, pull, clone)

Wiki, Issues & Kanban

Organisationen & Teams

• Organisation = Sammlung von Repositories (z. B. für einen Kurs)
• Teams = Gruppen mit eigenen Berechtigungen
  • „Studierende“ – Schreibzugriff auf eigene Repos
  • „Betreuer“ – Admin-Zugriff auf alle Repos
• Ideal für Seminare, Forschungsgruppen, Abteilungen

Beispiel: Organisation eis-sose26 mit je einem Repo pro Tandem

Showcase: projects.md-phw.de

• git.md-phw.de – Projekte verwalten (intern)
• projects.md-phw.de – Projekte präsentieren (extern)
• Öffentliche Repos mit README.md und Coverbild erscheinen automatisch
• Studierendenprojekte und Forschung sichtbar machen

Dynamik durch JavaScript

Was ist JavaScript?

• Skriptsprache für Webseiten
• Ermöglicht Dynamik und Interaktivität
• Wird direkt im Browser ausgeführt
• Arbeitet mit HTML und CSS zusammen

Warum JavaScript verwenden?

• Elemente reagieren auf Nutzereingaben
• Inhalte ohne Neuladen ändern
• Formulare prüfen und steuern
• Animationen und Effekte erzeugen

JavaScript, HTML und CSS

• HTML: Struktur und Inhalte
• CSS: Gestaltung und Layout
• JavaScript: Steuerung und Dynamik
• Zugriff und Veränderung über DOM (Document Object Model)

Bedeutung heute

• Standard in der Webentwicklung
• Grundlage für Frameworks (React, Vue, Angular)
• Serverseitige Entwicklung mit Node.js möglich
• Fast jede moderne Website nutzt JavaScript

Beliebtheit von JavaScript

Statista: Beliebteste Programmiersprachen weltweit

Aufgabe 2 – JavaScript Einstieg

• 2.1 Erste eigene JavaScript-Skripte schreiben → z. B. einfache Berechnungen, Ausgabe von Text, Verwendung von Bedingungen und Funktionen
• 2.2 Arbeiten mit dem DOM → Texte dynamisch einfügen, Inhalte verändern, Formulareingaben auslesen, auf Klicks reagieren
• Ziel: JavaScript verstehen als Sprache, die Webseiten lebendig macht
• HTML bleibt die Struktur, CSS sorgt für das Aussehen – JavaScript steuert das Verhalten
• Fokus liegt auf dem Zusammenspiel von Code, Nutzerinteraktion und sichtbarer Veränderung im Browser