Wiederholung: Was war vor 14 Tagen?

• 📁 Strukturierung eines Website-Projekts im Verzeichnis ~/www
• 🧭 Erstellung einer Navigationsstruktur mit fünf Unterseiten:
  • index.html, ueber_uns.html, kontakt.html, impressum.html, eis_projekt.html
• 🎨 Auslagerung des Designs in css/style.css
  → Responsives Layout, konsistente Gestaltung
• 🖼️ Aufbau einer kleinen Fotogalerie im Verzeichnis img/
  → Optional mit Klickvergrößerung
• 📄 PDF-Datei im Ordner assets/ hochladen und verlinken
• ✅ Trennung von Inhalt, Struktur und Darstellung gemäß Webstandards
• ✏️ Erste Schritte mit JavaScript:
  • Einfache Skripte mit Berechnung, Ausgabe, Bedingungen & Funktionen
  • DOM-Manipulation: Texte einfügen, Formulareingaben verarbeiten, auf Klicks reagieren
  • 🔗 HTML = Struktur, CSS = Stil, JavaScript = Verhalten
• 🎯 Ziel: Webseiten interaktiv und dynamisch gestalten

Rückblick & Herausforderungen

• 📄 Inhalt einer Datei mit nano löschen:
  • Möglichkeit 1: Alles markieren und löschen:
    → Strg + _, 1 → springt an den Anfang
    → Strg + Umschalt + 6 → Markierung starten
    → Mit Pfeil ↓ bis zum Ende, dann Strg + K → löschen
  • Möglichkeit 2: Mehrfach Strg + K drücken, um Zeile für Zeile zu löschen
  • ✅ Terminal-Befehl: > meintext.txt
    → Datei wird geleert, aber nicht gelöscht
  → Datei wird geleert, aber nicht gelöscht
• 📤 Datei vom lokalen Gerät auf den Server hochladen (via scp):

  • scp -P 2222 logo.svg isa##@edumake.de:/home/isa##/www/img/
  • -P 2222: Port
    isa##@edumake.de: Nutzername
    ~/www/img/: Zielverzeichnis
  • ⚠️ Befehl muss lokal (nicht auf dem Server) ausgeführt werden
  • 📁 Zielverzeichnis muss existieren – ggf. per SSH vorher anlegen

  

❓ Was hat gut geklappt? Wo gab es weitere Schwierigkeiten?

📚 Zentrale Begriffe aus Sitzung 1/2

🧠 Begriffe im Überblick (kompakt erklärt)

✨ Heute wird aus einer Website eine richtige Anwendung

🎯 Ziele der heutigen Veranstaltung

• Ziel: Gemeinsame Entwicklung eines virtuellen Escape Games.
• Aufgabe: Jedes Tandem gestaltet einen einzigartigen Raum mit individuellen Rätseln.
• Koordination: Zuweisung fester Raumnummern (isa15 bis isa30) an jedes Tandem.
• Rätsel-Einzigartigkeit / Doppelungsvermeidung: Austausch untereinander zur Sicherstellung, dass Rätsel nicht mit anderen Räumen überschneiden.

🛠️ Verwendete Technologien

• HTML: Struktur und Inhalt der Webseiten
• CSS: Gestaltung und Layout (Farben, Schrift, Aussehen)
• JavaScript: Interaktive Elemente, Eingabeverarbeitung
• Flask (Python): Serverlogik, Rätselprüfung, Spielfortschritt
• Python: Backend-Logik, Datenverarbeitung, Zustandsverwaltung

🐍 Was ist Python?

Python ist eine einfach zu lernende, mächtige Programmiersprache, die besonders gut für Einsteiger geeignet ist.
In unserem Projekt verwenden wir sie für die Logik im Escape Room – z. B. zur Auswertung von Rätseln.

🔗 Empfohlene Tutorials für Einsteiger (aus OOP WiSe):

• 🔧 Installation
• 👋 Erstes Programm schreiben
• 🖨️ Ausgabe (print) & Zahlen
• 🔤 Strings verstehen
• 📦 Datentypen

🔥 Flask – Python für Webanwendungen

• leichtgewichtiges Python-Webframework
• ideal für kleine Webprojekte (z. B. Escape Game)
• fügt Webseiten echte Logik & Interaktivität hinzu
• läuft als eigener Webserver im Hintergrund

👉 Mit Flask definierst man **Routen** wie / oder /raetsel, die bei einem Aufruf durch den Browser eine Funktion starten. Diese Funktion kann z. B. eine HTML-Seite anzeigen oder prüfen, ob eine Rätselantwort richtig ist.

🔗 Mehr Infos: flask.palletsprojects.com

🧪 Virtuelle Entwicklungsumgebung (venv)

• Isolierter Bereich für ein Python-Projekt
• Unabhängig von global installierten Paketen
• Verhindert Versionskonflikte zwischen Projekten
• Wichtig bei Flask, damit Pakete nur lokal gelten

🛠️ So erstellst du eine venv:

python3 -m venv venv
source venv/bin/activate

👉 Nach dem Aktivieren steht (venv) vor deiner Eingabezeile.
Um die Umgebung zu verlassen: deactivate

📁 Ordnerstruktur & Platzierung der venv

Wenn Sie mit Flask arbeiten, sollten Sie die virtuelle Umgebung direkt im Projektordner anlegen – z. B. unter /var/www/isa##/venv.

Nach dem Anlegen entsteht ein neuer Ordner venv/. Darin befindet sich alles, was Ihr Projekt braucht:

• bin/ – enthält ausführbare Dateien wie python und pip
• lib/ – enthält alle installierten Python-Pakete (z. B. Flask)
• include/ – Header-Dateien (für C-Module, meist nicht relevant)
• pyvenv.cfg – Konfigurationsdatei der virtuellen Umgebung

👉 Sie müssen diesen Ordner nicht bearbeiten – aktivieren Sie einfach die Umgebung und arbeiten Sie darin weiter.

📁 Empfohlene Projektstruktur

So könnte Ihr Home-Verzeichnis für das Tutorial sinnvoll aufgebaut sein:

/home/isa##
├── .ssh/                      # SSH-Zugang (public key)
├── www/                      # Statische Landing Page
│   ├── index.html
│   ├── unterseiten.html
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── script.js
│   └── img/
│
├── flask_app/                # Flask-Anwendung
│   ├── app.py                # Haupt-Logik
│   ├── venv/                 # Virtuelle Umgebung
│   ├── templates/            # HTML-Templates (Jinja2)
│   │   ├── index.html
│   │   └── raetsel.html
│   └── assets/               # CSS, JS, Bilder für Flask
│       ├── style.css
│       ├── script.js
│       └── img/

✅ Trennung von statischer Seite (www/) und interaktiver Flask-App (flask_app/) sorgt für Übersicht.

🌐 So erreichen Sie Ihre Flask-Anwendung im Browser

Angenommen, Sie sind Gruppe isa17, dann lautet die Adresse:

🔗 Schema: http://[subdomain].edumake.de:[port]

📌 Wichtig dabei:

🖥️ Überblick: Serverstruktur & Projektaufbau

Die folgende Grafik zeigt den grundlegenden Aufbau des Servers und die Struktur unseres Projekts: