EuraStudy
Notizen/Informatik/INF-WebSE - Webentwicklung und Software Engineering
Notizen · InformatikAT · Matura

INF-WebSE - Webentwicklung und Software Engineering

Vom HTML/CSS/JS-Stack über Git und Branch-Modelle bis zu agilen Methoden, Software-Lebenszyklus und Tests. Die Praxis hinter dem Theoriestoff.

4 Abschnitte·~12 Min Lesezeit·4 Kompetenzen·Niveau Basis 1 · Standard 3·Stand 06/2026

T·0999 / 12
Prüfungsprofil
INF-WebSE-1 · HTML, CSS, JavaScript als Web-Grundtechnologien einsetzenINF-WebSE-2 · Versionskontrolle (Git) anwendenINF-WebSE-3 · Software-Lebenszyklus und agile Methoden vergleichenINF-WebSE-4 · Tests (Unit, Integration, E2E) verstehen
Tiefe

Lesetiefe: Vertiefung

Schrift

Schriftgröße: Standard

Inhalt · 4 Abschnitte▾
  1. INF-WebSE - Webentwicklung und Software Engineering
    • 01HTML, CSS und JavaScript - das Web-Triplet○
    • 02Versionskontrolle mit Git◐
    • 03Software-Lebenszyklus und agile Methoden◐
    • 04Tests: Unit, Integration, E2E◐
§ 01

HTML, CSS und JavaScript - das Web-Triplet#

●○○BasisLPINF-WebSE-1.1

Kernpunkte

Jede Webseite ruht auf drei Sprachen mit klar getrennten Aufgaben - dem Web-Triplet. Die wichtigste Architekturregel lautet: Struktur, Präsentation und Verhalten trennen (Content / Presentation / Behavior), damit jede Schicht unabhängig wartbar bleibt.
HTML liefert die Struktur über semantische Tags wie `<header>`, `<nav>`, `<main>`, `<article>`, `<section>` und `<footer>`, die die Bedeutung der Bereiche ausdrücken. Semantik ist nicht nur Stil: Suchmaschinen und Screenreader bauen darauf auf - Barrierefreiheit verlangt `alt`-Texte, `<label>` und bei Bedarf `aria`-Attribute.
CSS bestimmt die Präsentation über Selektoren (Element, Klasse `.x`, ID `#y`) und deren Spezifität, das Box-Model (content/padding/border/margin) und moderne Layouts mit Flexbox (eindimensional) und Grid (zweidimensional). Responsive Design passt das Layout per Media Queries an die Bildschirmbreite an.
JavaScript liefert das Verhalten und ist die einzige Skriptsprache mit nativer Browser-Unterstützung (WebAssembly läuft ebenfalls nativ, ist aber ein Compile-Ziel). Modernes ES2020+ bietet `async/await`, Module und Destructuring. JS ist single-threaded; asynchrone Operationen laufen über die Event Loop (Call Stack, Callback-Queue, Promises).
Der DOM (Document Object Model) ist die Repräsentation des HTML als Baum von Knoten (); JavaScript liest und ändert ihn, etwa mit `document.querySelector(...)` oder `element.textContent = ...`. Jede sichtbare Änderung einer Seite ist letztlich eine DOM-Manipulation.

DOM-Baum einer HTML-Seite

DOM-BaumBaumdiagramm, 6 Pfade, Daten: head → title; head → meta; body → header; body → main → section; body → main → section; body → footerheadmainbodyhtmltitlemetaheadersectionsectionfooter
Abb. 1Der Browser stellt das HTML als Baum dar; der Pfad zu main ist hervorgehoben.
Moderne Frameworks (React, Vue, Svelte) abstrahieren die manuelle DOM-Manipulation über deklarative Datenbindung - das Triplet bleibt aber das Fundament. Häufige Fehler: ein `<div>`-Sumpf statt semantischer Tags, Inline-Styles statt CSS-Klassen, und direkter DOM-Zugriff dort, wo das Framework die Datenbindung übernehmen sollte.
Musterbeispiel

Einfaches HTML-Formular mit JS-Validierung

Erstelle ein Login-Formular mit E-Mail- und Passwortfeld; validiere clientseitig.

  1. 01HTML

    ```html <form id="login" novalidate> <label>E-Mail <input type="email" name="mail" required></label> <label>Passwort <input type="password" name="pw" minlength="8" required></label> <button>Anmelden</button> </form> ```

  2. 02JavaScript

    ```js const f = document.getElementById("login"); f.addEventListener("submit", e => { if(!f.checkValidity()) { e.preventDefault(); alert("Bitte korrekt ausfüllen"); } }); ```

  3. 03Sicherheitshinweis

    Clientseitige Validierung NUR für UX; serverseitig muss IMMER erneut validiert werden (Angreifer können Client-Code umgehen).

Ergebnis: Funktionierendes Formular mit zwei Validierungsstufen; HTTPS und CSRF-Schutz sind separate Themen.

Schritt-für-Schritt Erklärung3 Schritte
  1. 1

    HTML, CSS und JavaScript sind das Fundament jedes Web-Projekts - kein Framework kommt ohne sie aus.

  2. 2

    CSS Grid und Flexbox haben die alten float-Tricks abgelöst; sie machen Responsive Design wirklich praktisch.

  3. 3

    JavaScript ist single-threaded - die Event Loop ist der Schlüssel zum Verständnis asynchroner Operationen.

SRDP-Aufgaben

SelbsttestAus der Fragenbank7 Punkte

Aufgabenstellung

Beschreibe die Aufgabentrennung zwischen HTML, CSS und JavaScript. Welche Rolle spielt der DOM?

Maturafokus

  • Semantische HTML-Struktur erkennen und korrigieren.
  • CSS-Selektoren und Spezifität erklären.
  • JS-Event-Loop in einfachen Worten (Stack, Queue, Event Loop, Promise).

Typische Fehler

  • `<div>`-Sumpf statt semantischer Tags.
  • Inline-Styles statt CSS-Klassen.
  • Direkter DOM-Zugriff statt Datenbindung in Frameworks.

Aktive Wiederholung

Erstelle eine semantische HTML-Seite mit Header, Navigation, Hauptinhalt (zwei Sektionen) und Footer. Style sie mit CSS Grid und mache sie responsive.

Aktiv abrufen

Erinnere dich an die Kernpunkte — dann aufdecken.

Quellen: MDN Web Docs (Mozilla) · ECMAScript 2024 Standard (TC39 / Ecma International)

§ 02

Versionskontrolle mit Git#

●●○StandardLPINF-WebSE-2.1

Kernpunkte

Versionskontrolle speichert die gesamte Änderungsgeschichte eines Projekts, ermöglicht paralleles Arbeiten und das Zurückkehren zu jedem früheren Stand. Git ist der De-facto-Standard und verteilt: Jede Arbeitskopie ist ein vollständiges Repository mit kompletter History - man kann auch offline committen.
Git kennt drei Bereiche: das Working Directory (die bearbeiteten Dateien), die Staging Area/Index (die für den nächsten Commit vorgemerkten Änderungen) und das Repository (die dauerhaft gespeicherten Commits). `git add` verschiebt vom Working Directory in die Staging Area, `git commit` von dort ins Repository.
Die Kernbefehle: `clone` (kopieren), `add`/`commit` (Änderungen festhalten), `push`/`pull`/`fetch` (mit dem Remote synchronisieren), `branch`/`merge`/`rebase` (Zweige) sowie `status`, `log` und `diff` zur Übersicht. Wichtig: `git pull` ist `fetch` + `merge` in einem Schritt.
Branches sind nur leichtgewichtige Zeiger auf Commits - daher legt man großzügig pro Feature einen an (). Zum Integrieren gibt es zwei Wege: Merge verbindet zwei Zweige und erhält die History (mit Merge-Commit), Rebase setzt die Commits neu auf und macht die History linear. Goldene Regel: niemals einen bereits geteilten (gepushten) Branch rebasen.

Git Branching - feature, develop, main

main develop feature/x Release Commits auf feature-Branch
Abb. 2Feature-Branch wird in develop gemergt; develop wird per Release in main überführt.
Teams nutzen feste Workflows: GitFlow (feature/develop/release/main, für getaktete Releases), GitHub Flow (main + kurzlebige Feature-Branches) und Trunk-Based Development. Der Pull/Merge Request ist der Standardmechanismus: Vor dem Merge prüfen Kollegen den Code (Code Review) und CI-Tests laufen (siehe Beispiel).
Bei konkurrierenden Änderungen entsteht ein Merge-Konflikt, den Git mit den Markern `<<<<<<<`, `=======` und `>>>>>>>` kennzeichnet und den man manuell auflöst. Häufige Fehler: `git pull` und `git fetch` gleichsetzen, einen Force-Push auf `main` machen, oder nichtssagende Commit-Nachrichten („update", „fix") schreiben statt aussagekräftiger (Conventional Commits).
Musterbeispiel

Git-Workflow: Feature-Branch + Pull Request

Wie entwickelst du ein Feature und mergest es zurück in main?

  1. 01Branch erstellen

    `git checkout -b feature/login-redesign`

  2. 02Commits machen

    `git add .` und `git commit -m "feat(login): neue Form-Validierung"` (Conventional Commits).

  3. 03Push & PR

    `git push origin feature/login-redesign`; danach Pull Request auf GitHub/GitLab eröffnen.

  4. 04Review

    Kollegen reviewen Code, fordern ggf. Änderungen, danach Approve.

  5. 05Merge

    `git checkout main; git pull; git merge --no-ff feature/login-redesign; git push`. Tag für Release: `git tag v1.2.0`.

Ergebnis: Code-History bleibt linear nachvollziehbar; Conflicts werden früh im Feature-Branch gelöst, nicht in main.

Schritt-für-Schritt Erklärung3 Schritte
  1. 1

    Git ist die Standard-Versionskontrolle - jeder Entwickler sollte sie beherrschen.

    Git Branching - feature, develop, main

    main develop feature/x Release Commits auf feature-Branch
    Abb.Feature-Branch wird in develop gemergt; develop wird per Release in main überführt.
  2. 2

    Branches sind in Git billig - nutze sie großzügig für jedes Feature.

  3. 3

    Pull Requests sind der gesellschaftliche Kit moderner Teams - Code Review ist nicht optional.

SRDP-Aufgaben

SelbsttestAus der Fragenbank7 Punkte

Aufgabenstellung

Erläutere die Vorteile eines verteilten Versionskontrollsystems wie Git. Beschreibe einen typischen Workflow im Team mit Feature-Branches und Pull Requests.

Maturafokus

  • Befehlskette für typischen Feature-Workflow auswendig.
  • Merge vs. Rebase mit Beispiel erklären.
  • Konflikt lösen können (Marker `<<<<<<<`, `=======`, `>>>>>>>`).

Typische Fehler

  • `git pull` und `git fetch` werden gleichgesetzt (pull = fetch + merge).
  • Force Push auf main wird empfohlen.
  • Commits werden mit nichtssagenden Botschaften ("update", "fix") versehen.

Aktive Wiederholung

Beschreibe den Lebenszyklus eines Pull Requests - vom lokalen Branch bis zum Merge auf main.

Aktiv abrufen

Erinnere dich an die Kernpunkte — dann aufdecken.

Quellen: Pro Git Book (2. Auflage) (Chacon & Straub)

§ 03

Software-Lebenszyklus und agile Methoden#

●●○StandardLPINF-WebSE-3.1

Kernpunkte

Software entsteht nicht in einem Wurf, sondern durchläuft einen Lebenszyklus: Analyse, Design, Implementierung, Test, Integration, Deployment und Wartung. Wie man diese Phasen organisiert, unterscheidet die Vorgehensmodelle.
Das Wasserfallmodell durchläuft die Phasen sequenziell - jede beginnt erst, wenn die vorige fertig ist. Das ist klar planbar, aber teuer, sobald sich Anforderungen spät ändern. Das V-Modell ergänzt es, indem es jede Entwicklungsphase mit einer passenden Testphase koppelt (Modultest ↔ Implementierung, Systemtest ↔ Analyse) und Tests so früh mitdenkt.
Agile Methoden (Scrum, Kanban, XP) kehren die Logik um: Statt alles vorab zu planen, liefert man in kurzen Iterationen funktionierende Software, akzeptiert Änderungen und bindet den Kunden eng ein (die Werte des Agilen Manifests). Das passt zu unsicheren, sich entwickelnden Anforderungen.
Scrum ist das verbreitetste agile Rahmenwerk () mit drei Rollen (Product Owner priorisiert, Scrum Master moderiert, Entwicklungsteam liefert), Artefakten (Product/Sprint Backlog, Increment) und Events (Sprint, Sprint Planning, Daily, Review, Retrospektive). Jeder Sprint (meist 2 Wochen) endet mit einem nutzbaren Increment (siehe Beispiel).

Scrum-Zyklus

Scrum-ZyklusNetzgraph, Product Backlog → Sprint Planning, Sprint Planning → Sprint + Daily, Sprint + Daily → Sprint Review, Sprint Review → Retrospektive, Retrospektive → Product BacklogProduct BacklogSprint PlanningSprint + DailySprint ReviewRetrospektive
Abb. 3Jeder Sprint durchläuft Planung, Umsetzung mit Dailys, Review und Retrospektive und beginnt dann von vorn.
Kanban visualisiert den Arbeitsfluss auf einem Board und begrenzt die parallele Arbeit (WIP-Limits), ohne feste Sprints. DevOps überbrückt Entwicklung und Betrieb als Kultur (nicht bloß Tools); CI/CD-Pipelines automatisieren Build, Test und Deployment und verkürzen die Zeit von der Idee bis zur Produktion.
Häufige Fehler: Scrum und Kanban gleichsetzen (Scrum hat feste Sprints und Rollen, Kanban einen kontinuierlichen Fluss), das V-Modell für eine agile Methode halten, oder DevOps auf ein Werkzeug reduzieren, statt es als Zusammenarbeitskultur zu verstehen.
Musterbeispiel

Wasserfall oder Scrum? Eine Methodenwahl

Ein Team baut einen Online-Shop, dessen Anforderungen sich während der Entwicklung noch ändern werden. Begründe die Methodenwahl und skizziere den ersten Scrum-Sprint.

  1. 01Anforderungslage einschätzen

    Die Anforderungen sind unklar und veränderlich → ein sequenzielles Wasserfallmodell wäre riskant (späte Änderungen sind teuer); Scrum passt besser.

  2. 02Backlog priorisieren

    Der Product Owner ordnet das Product Backlog: zuerst Produktkatalog und Warenkorb, später Bezahlung, zuletzt Wunschliste.

  3. 03Sprint Planning

    Das Team wählt für einen 2-Wochen-Sprint die obersten Items, die es realistisch schafft (z. B. Produktliste und Detailseite).

  4. 04Sprint + Daily

    Während des Sprints synchronisiert sich das Team täglich im Daily (15 min); Aufgaben wandern auf dem Board von „To Do" über „Doing" zu „Done".

  5. 05Review & Retrospektive

    Am Sprintende zeigt das Team das lauffähige Increment (Review, Feedback vom PO bzw. Kunden) und verbessert in der Retrospektive die Zusammenarbeit.

Ergebnis: Bei veränderlichen Anforderungen ist Scrum überlegen, weil jeder Sprint ein nutzbares Increment liefert und Feedback früh einfließt. Wasserfall bliebe nur bei stabilen, vorab vollständig bekannten Anforderungen sinnvoll (z. B. sicherheitskritische Steuerungssoftware).

Schritt-für-Schritt Erklärung3 Schritte
  1. 1

    Wasserfall plant alles vorne; Scrum lernt währenddessen - das ist der eigentliche Unterschied.

  2. 2

    Scrum lebt von kurzen Feedbackschleifen - jeder Sprint endet mit einem nutzbaren Increment.

  3. 3

    DevOps und CI/CD verkürzen die Zeit von Idee bis Produktion drastisch.

SRDP-Aufgaben

SelbsttestAus der Fragenbank7 Punkte

Aufgabenstellung

Vergleiche das Wasserfallmodell mit Scrum. Welche Phasen/Rollen/Artefakte gibt es jeweils? Wann ist welche Methode geeignet?

Maturafokus

  • Wasserfall vs. Agile gegenüberstellen mit konkreten Vor-/Nachteilen.
  • Scrum-Rollen und Ceremonies benennen.
  • CI/CD-Pipeline beschreiben.

Typische Fehler

  • Scrum wird mit Kanban gleichgesetzt.
  • V-Modell wird als agile Methode bezeichnet.
  • DevOps wird als Tool statt als Kultur beschrieben.

Aktive Wiederholung

Vergleiche Wasserfall und Scrum anhand eines Projekts (z.B. Online-Shop). Welche Methode würdest du wann wählen und warum?

Aktiv abrufen

Erinnere dich an die Kernpunkte — dann aufdecken.

Quellen: Agile Manifesto (Beck et al.) · Scrum Guide 2020 (Schwaber & Sutherland)

§ 04

Tests: Unit, Integration, E2E#

●●○StandardLPINF-WebSE-4.1

Kernpunkte

Automatisierte Tests sind die Versicherung gegen Regressionen: Sie prüfen reproduzierbar, dass Code tut, was er soll - auch nach späteren Änderungen. Man unterscheidet sie nach dem Umfang des Getesteten ().

Testpyramide

TestpyramideTabelle mit 4 Spalten und 3 Zeilen, Daten: Teststufe · Anzahl · Tempo · Realitätsnähe; Unit · viele · schnell · niedrig; Integration · mittel · mittel · mittel; E2E · wenige · langsam · hochTESTSTUFEANZAHLTEMPOREALITÄTSNÄHEUnitvieleschnellniedrigIntegrationmittelmittelmittelE2Ewenigelangsamhoch
Abb. 4Viele schnelle Unit-Tests bilden die Basis, wenige langsame E2E-Tests die Spitze.
Unit-Tests prüfen die kleinste Einheit - eine Funktion oder Klasse - isoliert von Datenbank, Netzwerk und anderen Komponenten. Sie sind schnell, zahlreich und deterministisch und finden Logikfehler früh (siehe Beispiel mit pytest).
Integrationstests prüfen das Zusammenspiel mehrerer Komponenten (z. B. Service + Datenbank) und sind langsamer. End-to-End-Tests (E2E) simulieren echte Benutzeraktionen im Browser (Playwright, Cypress, Selenium) über den vollen Stack - am realitätsnächsten, aber langsam und anfällig (brittle).
Die Testpyramide () empfiehlt das richtige Mengenverhältnis: viele Unit-Tests als breite Basis, weniger Integrationstests und sehr wenige E2E-Tests an der Spitze. Dreht man die Pyramide um („Eiswaffel"), werden die Pipelines langsam und spröde.
Test-Driven Development (TDD) schreibt den Test vor dem Code im Zyklus Red (Test schreiben, schlägt fehl) → Green (minimal implementieren, bis er besteht) → Refactor (aufräumen, Tests bleiben grün). Das erzwingt testbaren, fokussierten Code und gibt jedem Bug zuerst einen failing test.
Coverage (Statement-, Branch-, Line-Coverage) misst, welcher Code von Tests berührt wird - aber nicht, wie gut getestet wird; 100 % sind selten sinnvoll. Häufige Fehler: „Unit-Tests", die in Wahrheit die DB aufrufen (das sind Integrationstests), zu viele E2E-Tests (langsame Pipeline), oder die Coverage-Zahl mit Qualität verwechseln.
Musterbeispiel

Unit-Test mit pytest

Teste die Funktion `is_palindrome(s)`.

  1. 01Implementierung

    ```python def is_palindrome(s): s = s.lower() return s == s[::-1] ```

  2. 02Tests

    ```python import pytest from solution import is_palindrome def test_empty(): assert is_palindrome("") def test_single(): assert is_palindrome("a") def test_pal_lower(): assert is_palindrome("anna") def test_case_insensitive(): assert is_palindrome("Anna") def test_non_pal(): assert not is_palindrome("python") ```

  3. 03Ausführung

    `pytest -q` -> alle 5 Tests grün.

Ergebnis: Tests dokumentieren Erwartungen und schützen vor Regressionen; jeder neue Bug bekommt erst einen failing test.

Schritt-für-Schritt Erklärung3 Schritte
  1. 1

    Tests sind die Versicherungspolice deines Codes - sie schützen vor Regressionen.

  2. 2

    Die Testpyramide hilft, das richtige Verhältnis zwischen Tempo und Realitätsnähe zu finden.

  3. 3

    TDD ist keine Religion, aber ein extrem nützliches Tool für schwierige Logik.

SRDP-Aufgaben

SelbsttestAus der Fragenbank7 Punkte

Aufgabenstellung

Vergleiche Unit-, Integration- und End-to-End-Tests hinsichtlich Geschwindigkeit, Aussagekraft und Wartbarkeit. Welche Rolle spielt die Testpyramide?

Maturafokus

  • Konkretes Beispiel für Unit-Test (z.B. `bmi`-Funktion in Pytest oder Jest).
  • Testpyramide skizzieren und begründen.
  • TDD-Zyklus an einem Mini-Beispiel demonstrieren.

Typische Fehler

  • Unit-Tests rufen die Datenbank auf -> tatsächlich Integrationstests.
  • E2E-Tests werden übermäßig viele geschrieben -> Pipeline wird langsam und spröde.
  • Coverage-Zahl wird mit Qualität verwechselt.

Aktive Wiederholung

Schreibe einen pytest-Test für eine `is_palindrome(s)`-Funktion. Berucksichtige Edge Cases (leerer String, Groß/Kleinschreibung).

Aktiv abrufen

Erinnere dich an die Kernpunkte — dann aufdecken.

Quellen: Martin Fowler - Test Pyramid (martinfowler.com)

Inhalt

Abschnitt -- / 04

    • 01HTML, CSS und JavaScript - das Web-Triplet○
    • 02Versionskontrolle mit Git◐
    • 03Software-Lebenszyklus und agile Methoden◐
    • 04Tests: Unit, Integration, E2E◐

0/4 Gelesen

Aus den Notizen ins Training

INF-WebSE - Webentwicklung und Software Engineering

Festige dieses Thema an passenden Aufgaben aus der Fragenbank.

~12
Min
4
Kompetenzen
Üben
Beispielfrage

Beschreibe die Aufgabentrennung zwischen HTML, CSS und JavaScript. Welche Rolle spielt der DOM?

7 BE · 2022

Zur Fragenbank

Belege & Quellen

Quellen

Mozilla

  • MDN Web Docs

TC39 / Ecma International

  • ECMAScript 2024 Standard

Chacon & Straub

  • Pro Git Book (2. Auflage)

Beck et al.

  • Agile Manifesto

Schwaber & Sutherland

  • Scrum Guide 2020

martinfowler.com

  • Martin Fowler - Test Pyramid

Vorheriges Thema

INF-Th - Theoretische Informatik

Nächstes Thema

INF-HMI-KI - Mensch-Maschine-Interaktion und KI

EuraStudy·Notizen T·09·MMXXVI

Weiter mit dem nächsten Thema — der Lernpfad bleibt erhalten.