Wiederholung: Was war vor 14 Tagen?

• 💻 Einführung in Terminal & Kommandozeile
• 📁 Anlegen einer eigenen Verzeichnisstruktur (EIS25)
• 🔐 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##/www
• ✅ 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)

Übung: Website-Projekt

📁 Projektstruktur – Best Practice für HTML-Webseiten

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

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

🚀 Später: Umstrukturierung für Flask

Aufgabe 1: Website-Projekt strukturieren & gestalten

• 📁 Legen Sie im Verzeichnis ~/www eine saubere Projektstruktur an (siehe vorherigen Slide & Aufgabe 1).
• 📄 Erstellen Sie die Unterseiten:
  • index.html – Startseite
  • ueber_uns.html – Vorstellung & EIS-Projekt
  • kontakt.html – mit einfachem Kontaktformular
  • impressum.html – Impressumspflicht beachten
  • eis_projekt.html – Projektdokumentation
• 🧭 Entwickeln Sie ein durchgängiges Navigationsmenü (auf jeder Seite sichtbar)
• 🎨 Lagern Sie das Design in css/style.css aus:
  • Modernes, klares Design
  • Responsive für Desktop & Smartphone
  • Konsistente Farben, Schrift, Layout
• 🖼️ Erstellen Sie eine kleine Fotogalerie in einer Unterseite:
  • Bilder im Ordner img/ ablegen
  • Bilder optisch einbinden und ggf. klickbar vergrößerbar machen
• 📄 Laden Sie eine PDF-Datei (z. B. Info, Handout) in assets/ hoch und verlinken Sie diese zum Download.

✅ Achten Sie von Anfang an auf saubere Trennung von Inhalt, Struktur und Darstellung – wie in modernen Webprojekten üblich.

Dynamik durch JavaScrip

🧠 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