Compare commits
9
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 libretech
|
8d5c57d561 | ||
|
libretech
|
64f4729f45 | ||
 libretechandClaude Opus 4.5
|
c35541961e | ||
|
libretechandClaude Opus 4.5
|
d8f68183f3 | ||
|
libretechandClaude Opus 4.5
|
705c5e3457 | ||
|
libretechandClaude Opus 4.5
|
9b0b6bc9d6 | ||
|
libretechandClaude Opus 4.5
|
62cd97c51a | ||
|
libretechandClaude Opus 4.5
|
9f2c78d536 | ||
|
libretechandClaude Opus 4.5
|
fb0db03db9 |
No files matched your search
@@ -2,7 +2,6 @@
|
||||
build/
|
||||
*.pdf
|
||||
*.html
|
||||
!slides/*/assets/demos/**/*.html
|
||||
.dev-index/
|
||||
|
||||
# Dependencies
|
||||
|
||||
@@ -35,9 +35,8 @@ build/ # Generated output (gitignored)
|
||||
## Build Commands
|
||||
|
||||
```bash
|
||||
make dev # Marp live server all courses (port 1312, HMR)
|
||||
make dev-b # Marp live server 223015b (port 1313, HMR)
|
||||
make dev-c # Marp live server 223015c (port 1314, HMR)
|
||||
make dev-b # Dev server 223015b (port 1311)
|
||||
make dev-c # Dev server 223015c (port 1312)
|
||||
make build # Build all courses
|
||||
make build-b # Build 223015b only
|
||||
make build-c # Build 223015c only
|
||||
|
||||
@@ -27,9 +27,7 @@ help:
|
||||
@echo " 223015c - Internettechnologien"
|
||||
@echo ""
|
||||
@echo "Development:"
|
||||
@echo " make dev - Marp live server all courses (port 1312, HMR)"
|
||||
@echo " make dev-b - Marp live server 223015b (port 1313, HMR)"
|
||||
@echo " make dev-c - Marp live server 223015c (port 1314, HMR)"
|
||||
@echo " make dev - Start development server (port 3000)"
|
||||
@echo ""
|
||||
@echo "Build:"
|
||||
@echo " make build - Build all courses"
|
||||
@@ -57,20 +55,13 @@ build/.exists:
|
||||
@mkdir -p build/223015b build/223015c
|
||||
@touch $@
|
||||
|
||||
# Development server (Marp live server with HMR)
|
||||
# Development server
|
||||
dev:
|
||||
@./scripts/dev-server.sh
|
||||
|
||||
dev-b:
|
||||
@./scripts/dev-server.sh 223015b 1313
|
||||
|
||||
dev-c:
|
||||
@./scripts/dev-server.sh 223015c 1314
|
||||
|
||||
dev-kill:
|
||||
@-fuser -k 1312/tcp 2>/dev/null || true
|
||||
@-fuser -k 1313/tcp 2>/dev/null || true
|
||||
@-fuser -k 1314/tcp 2>/dev/null || true
|
||||
@-pkill -f "marp-cli.*--server" 2>/dev/null || true
|
||||
@sleep 0.5
|
||||
|
||||
# Build functions
|
||||
define build_course
|
||||
|
||||
@@ -0,0 +1,469 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<quiz>
|
||||
|
||||
<!-- ============================================================
|
||||
223015c – Grundlagen IT- und Internettechnik
|
||||
40 Punkte / 40 Minuten
|
||||
Michael Czechowski – HdM Stuttgart – WS 2025/26
|
||||
============================================================ -->
|
||||
|
||||
<!-- ─── 3 pt – Von-Neumann: 5 Komponenten ─── -->
|
||||
<question type="matching">
|
||||
<n><text>Q1 – Von-Neumann: Komponenten zuordnen</text></n>
|
||||
<questiontext type="html">
|
||||
<text><![CDATA[
|
||||
<p>Ordne jeder Komponente der Von-Neumann-Architektur ihre
|
||||
Funktion zu.</p>
|
||||
]]></text>
|
||||
</questiontext>
|
||||
<generalfeedback type="html"><text>Die 5 Komponenten: ALU (Rechnen), Steuerwerk (Befehle steuern), Speicherwerk (Programme UND Daten), Ein-/Ausgabe (Peripherie), Bus-System (Verbindung).</text></generalfeedback>
|
||||
<defaultgrade>3</defaultgrade>
|
||||
<penalty>0.25</penalty>
|
||||
<hidden>0</hidden>
|
||||
<shuffleanswers>true</shuffleanswers>
|
||||
<answer fraction="100"><text>Rechenwerk (ALU)</text><match>Führt arithmetische und logische Operationen durch.</match></answer>
|
||||
<answer fraction="100"><text>Steuerwerk</text><match>Holt, dekodiert und steuert die Ausführung von Befehlen.</match></answer>
|
||||
<answer fraction="100"><text>Speicherwerk</text><match>Enthält sowohl Programme als auch Daten (Stored Program Concept).</match></answer>
|
||||
<answer fraction="100"><text>Ein-/Ausgabe</text><match>Schnittstelle zu externen Geräten wie Tastatur, Bildschirm, Netzwerk.</match></answer>
|
||||
<answer fraction="100"><text>Bus-System</text><match>Verbindet alle Komponenten mittels Adress-, Daten- und Steuerbus.</match></answer>
|
||||
</question>
|
||||
|
||||
<!-- ─── 2 pt – Von-Neumann vs Harvard: Transfer ─── -->
|
||||
<question type="multichoice">
|
||||
<n><text>Q2 – Von-Neumann vs. Harvard</text></n>
|
||||
<questiontext type="html">
|
||||
<text><![CDATA[
|
||||
<p>Ein Arduino-Mikrocontroller nutzt die <strong>Harvard-Architektur</strong>.
|
||||
Ein modernes Smartphone nutzt eine (modifizierte) Von-Neumann-Architektur.</p>
|
||||
<p><strong>Warum ist die Harvard-Architektur für Echtzeit-Anwendungen
|
||||
auf dem Arduino vorteilhafter, und was wäre der Nachteil, wenn
|
||||
das Smartphone diese Architektur verwenden würde?</p>
|
||||
]]></text>
|
||||
</questiontext>
|
||||
<generalfeedback type="html"><text>Harvard: separate Code/Daten-Speicher → paralleler Zugriff, schneller. Nachteil: Code und Daten nicht aus gleichem Speicher nahtlos mischbar → weniger Flexibilität, kein „Laden beliebiger Apps" wie bei Von-Neumann.</text></generalfeedback>
|
||||
<defaultgrade>2</defaultgrade>
|
||||
<penalty>0.25</penalty>
|
||||
<hidden>0</hidden>
|
||||
<single>true</single>
|
||||
<shuffleanswers>true</shuffleanswers>
|
||||
<correctfeedback type="html"><text>Genau – Speed vs. Flexibilität.</text></correctfeedback>
|
||||
<incorrectfeedback type="html"><text>Nein – überlege, was getrennte Speicher für Code und Daten bedeuten.</text></incorrectfeedback>
|
||||
<answer fraction="100"><text><![CDATA[Harvard nutzt <strong>separate Speicher</strong> für Code und Daten → paralleler Zugriff, schneller. Beim Smartphone wäre es schwieriger, beliebige Apps zu laden – weniger Flexibilität.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Harvard ist langsamer, aber sicherer – daher für Echtzeit geeignet. Smartphones brauchen die Geschwindigkeit nicht.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Beide Architekturen sind funktional identisch – der Unterschied liegt nur im Gehäuse.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Von-Neumann ist schneller durch gemeinsamen Speicher. Harvard wird gewählt, weil Echtzeit-Apps weniger Speicher brauchen.]]></text></answer>
|
||||
</question>
|
||||
|
||||
<!-- ─── 2 pt – Stored Program Concept Transfer ─── -->
|
||||
<question type="multichoice">
|
||||
<n><text>Q3 – Stored Program Concept</text></n>
|
||||
<questiontext type="html">
|
||||
<text><![CDATA[
|
||||
<p>Vor der Von-Neumann-Architektur mussten bei Maschinen wie dem
|
||||
ENIAC Programme durch <strong>Umstecken von Kabeln</strong> eingegeben
|
||||
werden.</p>
|
||||
<p><strong>Was konkret ermöglicht das Stored Program Concept, was
|
||||
vorher nicht möglich war? Nenne zwei Beispiele.</p>
|
||||
]]></text>
|
||||
</questiontext>
|
||||
<generalfeedback type="html"><text>Stored Program: Programme werden als Daten im Speicher abgelegt → austauschbar ohne Hardwareänderung. Ermöglicht: Betriebssysteme, Apps installieren/löschen, Multitasking, Updates.</text></generalfeedback>
|
||||
<defaultgrade>2</defaultgrade>
|
||||
<penalty>0.25</penalty>
|
||||
<hidden>0</hidden>
|
||||
<single>true</single>
|
||||
<shuffleanswers>true</shuffleanswers>
|
||||
<correctfeedback type="html"><text>Genau – Programme als Daten im Speicher = Flexibilität.</text></correctfeedback>
|
||||
<incorrectfeedback type="html"><text>Nein – der Kern liegt darin, dass Programme im Speicher als Daten residieren.</text></incorrectfeedback>
|
||||
<answer fraction="100"><text><![CDATA[Programme werden als <strong>Daten im Speicher</strong> abgelegt → z. B. Apps können installiert/gelöscht werden und <strong>Multitasking</strong> (mehrere Programme gleichzeitig) wird möglich.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Programme werden auf separater Hardware gespeichert → die Hauptspeicher-Kapazität wird ums Doppelte gesteigert.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Die Hardware kann jetzt selbst Befehle erfinden – kein Mensch muss mehr programmieren.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Nur ein einzelnes Programm kann gleichzeitig laufen, aber es kann schneller geladenen werden.]]></text></answer>
|
||||
</question>
|
||||
|
||||
<!-- ─── 2 pt – HTML Metadaten: Transfer ─── -->
|
||||
<question type="multichoice">
|
||||
<n><text>Q4 – HTML: <head> vs. <body></text></n>
|
||||
<questiontext type="html">
|
||||
<text><![CDATA[
|
||||
<p>Ein Student erstellt eine Webseite und platziert <em>alles</em>
|
||||
im <code><body></code> – auch den <code><title></code>
|
||||
und die <code><meta name="description"></code>.</p>
|
||||
<p><strong>Welche zwei konkreten Konsequenzen hat das?</p>
|
||||
]]></text>
|
||||
</questiontext>
|
||||
<generalfeedback type="html"><text>title und meta description gehören in <head>. Im <body>: (1) kein Titel im Browser-Tab / Suchergebnis, (2) keine Beschreibung für Suchmaschinen/Screen-Reader → SEO und Accessibility beeinträchtigt.</text></generalfeedback>
|
||||
<defaultgrade>2</defaultgrade>
|
||||
<penalty>0.25</penalty>
|
||||
<hidden>0</hidden>
|
||||
<single>true</single>
|
||||
<shuffleanswers>true</shuffleanswers>
|
||||
<correctfeedback type="html"><text>Genau – Metadaten im Body werden nicht als solche interpretiert.</text></correctfeedback>
|
||||
<incorrectfeedback type="html"><text>Nein – <head> und <body> haben spezifische Funktionen.</text></incorrectfeedback>
|
||||
<answer fraction="100"><text><![CDATA[(1) Der Browser-Tab zeigt <strong>keinen Titel</strong> an. (2) Suchmaschinen haben <strong>keine Beschreibung</strong> für das Snippet → schlechte SEO und Screen-Reader können die Seite nicht richtig vorlesen.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Kein Problem – Browser ignorieren die Unterscheidung zwischen <code><head></code> und <code><body></code>.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[(1) Der Titel wird im Seiteninhalt sichtbar angezeigt. (2) Die description wird als Text auf der Seite eingeblendet.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Nur das Fehlen von <code><meta charset></code> ist ein Problem – title und description funktionieren überall.]]></text></answer>
|
||||
</question>
|
||||
|
||||
<!-- ─── 3 pt – Accessibility Transfer ─── -->
|
||||
<question type="multichoice">
|
||||
<n><text>Q5 – Barrierefreiheit: Curb-Cut-Effekt</text></n>
|
||||
<questiontext type="html">
|
||||
<text><![CDATA[
|
||||
<p>Der <strong>Curb-Cut-Effekt</strong> beschreibt, wie eine
|
||||
barrierefreie Lösung – ursprünglich für Menschen mit Behinderung –
|
||||
letztendlich <em>allen</em> zugute kommt.</p>
|
||||
<p><strong>Nenne ein konkretes Web-Beispiel, das diesen Effekt
|
||||
demonstriert, und erkläre, wer davon profitiert.</p>
|
||||
]]></text>
|
||||
</questiontext>
|
||||
<generalfeedback type="html"><text>Beispiel: Untertitel (für Gehörlose) → helfen auch in lauter Umgebung, beim Sprachlernen, bei Ton aus. Alt-Texte (für Screen-Reader) → helfen auch SEO. Semantisches HTML → besser für alle.</text></generalfeedback>
|
||||
<defaultgrade>3</defaultgrade>
|
||||
<penalty>0.25</penalty>
|
||||
<hidden>0</hidden>
|
||||
<single>true</single>
|
||||
<shuffleanswers>true</shuffleanswers>
|
||||
<correctfeedback type="html"><text>Genau – Barrierefreiheit hilft allen.</text></correctfeedback>
|
||||
<incorrectfeedback type="html"><text>Nein – überlege, welche barrierefreien Maßnahmen auch Menschen ohne Behinderung nutzen.</text></incorrectfeedback>
|
||||
<answer fraction="100"><text><![CDATA[<strong>Untertitel:</strong> Gedacht für Gehörlose, helfen aber auch in lauter Umgebung, beim Sprachlernen oder wenn der Ton aus ist – profitiert fast jedermann.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Barrierefreie Webseiten sind langsamer zu laden – der Curb-Cut-Effekt beschreibt diesen negativen Nebeneffekt.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Der Curb-Cut-Effekt bedeutet, dass barrierefreie Seiten nur für Menschen mit Behinderung nützlich sind.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[<strong>Dark Mode:</strong> Gedacht für Sehbehinderung, hilft auch in dunkler Umgebung – Beispiel für den Curb-Cut-Effekt.]]></text></answer>
|
||||
</question>
|
||||
|
||||
<!-- ─── 2 pt – EAA / WCAG ─── -->
|
||||
<question type="multichoice">
|
||||
<n><text>Q6 – European Accessibility Act</text></n>
|
||||
<questiontext type="html">
|
||||
<text><![CDATA[
|
||||
<p>Der <strong>European Accessibility Act (EAA)</strong> ist seit
|
||||
Juni 2025 in Kraft.</p>
|
||||
<p><strong>Was bedeutet das konkret für ein deutsches
|
||||
E-Commerce-Unternehmen, das eine Webseite betreibt?</p>
|
||||
]]></text>
|
||||
</questiontext>
|
||||
<generalfeedback type="html"><text>EAA verpflichtet u. a. E-Commerce-Anbieter zur Barrierefreiheit. Die Webseite muss WCAG-Standards erfüllen. Bei Verstoß: Bußgelder bis 100.000 € möglich.</text></generalfeedback>
|
||||
<defaultgrade>2</defaultgrade>
|
||||
<penalty>0.25</penalty>
|
||||
<hidden>0</hidden>
|
||||
<single>true</single>
|
||||
<shuffleanswers>true</shuffleanswers>
|
||||
<correctfeedback type="html"><text>Genau – rechtliche Pflicht zur Barrierefreiheit.</text></correctfeedback>
|
||||
<incorrectfeedback type="html"><text>Nein – der EAA erstellt eine rechtliche Verpflichtung für bestimmte Sektoren.</text></incorrectfeedback>
|
||||
<answer fraction="100"><text><![CDATA[Die Webseite <strong>muss barrierefreiheitstechnisch</strong> WCAG-Standards erfüllen – E-Commerce ist explizit im EAA geregelt. Bei Verstoß: Bußgelder möglich.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Der EAA betrifft nur öffentliche Behörden – private Unternehmen sind ausgenommen.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Das Unternehmen muss nur eine englische Version der Webseite bereitstellen.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Der EAA regelt nur die Barrierefreiheit von mobilen Apps, nicht von Webseiten.]]></text></answer>
|
||||
</question>
|
||||
|
||||
<!-- ─── 3 pt – TCP/IP Schichten: Protokoll → Schicht ─── -->
|
||||
<question type="matching">
|
||||
<n><text>Q7 – TCP/IP: Protokoll → Schicht</text></n>
|
||||
<questiontext type="html">
|
||||
<text><![CDATA[
|
||||
<p>Ordne jedem Protokoll die richtige TCP/IP-Schicht zu.</p>
|
||||
]]></text>
|
||||
</questiontext>
|
||||
<generalfeedback type="html"><text>Anwendung: HTTP, DNS, SMTP. Transport: TCP, UDP. Internet: IP. Netzzugang: Ethernet, WLAN.</text></generalfeedback>
|
||||
<defaultgrade>3</defaultgrade>
|
||||
<penalty>0.25</penalty>
|
||||
<hidden>0</hidden>
|
||||
<shuffleanswers>true</shuffleanswers>
|
||||
<answer fraction="100"><text>HTTP</text><match>Anwendung</match></answer>
|
||||
<answer fraction="100"><text>TCP</text><match>Transport</match></answer>
|
||||
<answer fraction="100"><text>IP</text><match>Internet</match></answer>
|
||||
<answer fraction="100"><text>Ethernet</text><match>Netzzugang</match></answer>
|
||||
<answer fraction="100"><text>DNS</text><match>Anwendung</match></answer>
|
||||
<answer fraction="100"><text>UDP</text><match>Transport</match></answer>
|
||||
</question>
|
||||
|
||||
<!-- ─── 3 pt – Encapsulation: D-S-P-F ─── -->
|
||||
<question type="matching">
|
||||
<n><text>Q8 – Encapsulation: Dateneinheit → Schicht</text></n>
|
||||
<questiontext type="html">
|
||||
<text><![CDATA[
|
||||
<p>Bei der Übertragung wird eine Nachricht von Schicht zu Schicht
|
||||
verpackt (Encapsulation). Ordne jeder Dateneinheit die zugehörige
|
||||
Schicht zu.</p>
|
||||
]]></text>
|
||||
</questiontext>
|
||||
<generalfeedback type="html"><text>Daten (Anwendung) → Segment (Transport, +Ports) → Paket (Internet, +IP) → Frame (Netzzugang, +MAC). Merkhilfe: D-S-P-F.</text></generalfeedback>
|
||||
<defaultgrade>3</defaultgrade>
|
||||
<penalty>0.25</penalty>
|
||||
<hidden>0</hidden>
|
||||
<shuffleanswers>true</shuffleanswers>
|
||||
<answer fraction="100"><text>Daten</text><match>Anwendungsschicht – die eigentliche Nachricht (z. B. HTML-Seite).</match></answer>
|
||||
<answer fraction="100"><text>Segment</text><match>Transportschicht – Daten + Ports und Sequenznummern.</match></answer>
|
||||
<answer fraction="100"><text>Paket</text><match>Internetschicht – Segment + IP-Adressen (Quelle und Ziel).</match></answer>
|
||||
<answer fraction="100"><text>Frame</text><match>Netzzugangsschicht – Paket + MAC-Adressen und Prüfsumme.</match></answer>
|
||||
</question>
|
||||
|
||||
<!-- ─── 3 pt – IP vs MAC vs Port Transfer ─── -->
|
||||
<question type="multichoice">
|
||||
<n><text>Q9 – IP vs. MAC vs. Port: Transfer-Szenario</text></n>
|
||||
<questiontext type="html">
|
||||
<text><![CDATA[
|
||||
<p>Dein Laptop sendet eine HTTPS-Anfrage an einen Webserver in
|
||||
einem anderen Land. Das Paket durchläuft mehrere Router.</p>
|
||||
<p><strong>Welche der folgenden Aussagen über die Adressen auf dem
|
||||
Weg ist korrekt?</p>
|
||||
]]></text>
|
||||
</questiontext>
|
||||
<generalfeedback type="html"><text>IP-Adresse des Ziel-Servers bleibt konstant (global). MAC-Adresse ändert sich bei jedem Hop (lokal, nächster Router). Port 443 (HTTPS) bleibt konstant.</text></generalfeedback>
|
||||
<defaultgrade>3</defaultgrade>
|
||||
<penalty>0.25</penalty>
|
||||
<hidden>0</hidden>
|
||||
<single>true</single>
|
||||
<shuffleanswers>true</shuffleanswers>
|
||||
<correctfeedback type="html"><text>Genau – nur MAC ändert sich unterwegs.</text></correctfeedback>
|
||||
<incorrectfeedback type="html"><text>Nein – überlege, welche Adresse bei jedem Hop neu gesetzt wird.</text></incorrectfeedback>
|
||||
<answer fraction="100"><text><![CDATA[Die <strong>IP-Adresse</strong> des Servers bleibt konstant, der <strong>Port</strong> (443) ändert sich nicht – die <strong>MAC-Adresse</strong> wird an jedem Router neu gesetzt (lokal, ein Hop).]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Alle drei Adressen (IP, MAC, Port) ändert sich bei jedem Router.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Die MAC-Adresse bleibt konstant, die IP-Adresse ändert sich bei jedem Hop.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[IP und Port ändert sich, MAC bleibt konstant – MAC ist die globale Adresse.]]></text></answer>
|
||||
</question>
|
||||
|
||||
<!-- ─── 3 pt – 3-Way Handshake: Transfer ─── -->
|
||||
<question type="multichoice">
|
||||
<n><text>Q10 – TCP 3-Way-Handshake: Was passiert wäre?</text></n>
|
||||
<questiontext type="html">
|
||||
<text><![CDATA[
|
||||
<p>Der Client sendet ein <strong>SYN</strong> zum Server.
|
||||
Das SYN-Paket geht verloren – es erreicht den Server nie.</p>
|
||||
<p><strong>Was passiert als nächstes, und warum wird keine
|
||||
Verbindung aufgebaut?</p>
|
||||
]]></text>
|
||||
</questiontext>
|
||||
<generalfeedback type="html"><text>Der Server erhält kein SYN → sendet kein SYN-ACK zurück → der Client bekommt keine Antwort → Verbindung wird nicht aufgebaut. TCP wird das SYN nach einem Timeout erneut senden (Neuübertragung).</text></generalfeedback>
|
||||
<defaultgrade>3</defaultgrade>
|
||||
<penalty>0.25</penalty>
|
||||
<hidden>0</hidden>
|
||||
<single>true</single>
|
||||
<shuffleanswers>true</shuffleanswers>
|
||||
<correctfeedback type="html"><text>Genau – ohne SYN beim Server: kein SYN-ACK, kein Handshake.</text></correctfeedback>
|
||||
<incorrectfeedback type="html"><text>Nein – überlege, was der Server ohne SYN tun kann.</text></incorrectfeedback>
|
||||
<answer fraction="100"><text><![CDATA[Der Server kennt die Anfrage nicht → sendet <strong>kein SYN-ACK</strong> → der Client erhält keine Antwort → <strong>keine Verbindung</strong>. Der Client wird das SYN nach einem Timeout erneut senden.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Der Server sendet trotzdem ein SYN-ACK, da die IP-Adresse bekannt ist – die Verbindung wird trotzdem aufgebaut.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Der Client sendet direkt ein ACK als Fallback – die Verbindung wird mit zwei Paketen aufgebaut.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Das verloren gegangene SYN wird automatisch vom Netzwerk rekonstruiert – kein Problem.]]></text></answer>
|
||||
</question>
|
||||
|
||||
<!-- ─── 2 pt – TCP vs UDP Transfer ─── -->
|
||||
<question type="multichoice">
|
||||
<n><text>Q11 – TCP vs. UDP: Videostreaming</text></n>
|
||||
<questiontext type="html">
|
||||
<text><![CDATA[
|
||||
<p>Ein Videostreaming-Dienst sendet Daten an deinen Browser.
|
||||
Ein einzelnes Paket geht verloren.</p>
|
||||
<p><strong>Warum wählt der Dienst <strong>UDP</strong> statt TCP,
|
||||
obwohl ein Paket verloren geht?</p>
|
||||
]]></text>
|
||||
</questiontext>
|
||||
<generalfeedback type="html"><text>Bei Echtzeit-Video ist Verzögerung schlimmer als Paketverlust. TCP würde das Paket erneut anfordern → Video friert. UDP ignoriert das Verlust → kurzer Artefakt, Video läuft weiter.</text></generalfeedback>
|
||||
<defaultgrade>2</defaultgrade>
|
||||
<penalty>0.25</penalty>
|
||||
<hidden>0</hidden>
|
||||
<single>true</single>
|
||||
<shuffleanswers>true</shuffleanswers>
|
||||
<correctfeedback type="html"><text>Genau – bei Echtzeit ist Verzögerung ärger als Verlust.</text></correctfeedback>
|
||||
<incorrectfeedback type="html"><text>Nein – überlege, was TCP bei einem verlorenen Paket tun würde.</text></incorrectfeedback>
|
||||
<answer fraction="100"><text><![CDATA[Bei <strong>Echtzeit</strong> ist Verzögerung schlimmer als Verlust. TCP würde das Paket <strong>erneut anfordern</strong> → Video friert ein. UDP ignoriert es → kurzer Glitch, Video läuft weiter.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[UDP sendet jedes Paket doppelt, daher geht statistisch nie etwas verloren.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[TCP kann bei Videostreaming nicht verwendet werden, da es zu langsam für Multimedia ist.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[UDP ist immer schneller als TCP – deshalb nutzt jeder Streaming-Dienst UDP.]]></text></answer>
|
||||
</question>
|
||||
|
||||
<!-- ─── 2 pt – HTTP Methoden: Transfer ─── -->
|
||||
<question type="multichoice">
|
||||
<n><text>Q12 – HTTP-Methoden: Szenario</text></n>
|
||||
<questiontext type="html">
|
||||
<text><![CDATA[
|
||||
<p>Ein Nutzer aktualisiert sein Profilbild auf einer Webseite.
|
||||
Das Foto wird zum Server gesendet und das <strong>alte Bild
|
||||
ersetzt</strong>.</p>
|
||||
<p><strong>Welche HTTP-Methode wird für diese Operation verwendet,
|
||||
und warum nicht GET?</p>
|
||||
]]></text>
|
||||
</questiontext>
|
||||
<generalfeedback type="html"><text>PUT – Daten ersetzen (eine existierende Ressource wird überschrieben). GET ruft nur Daten ab, sendet keine Daten zum Server.</text></generalfeedback>
|
||||
<defaultgrade>2</defaultgrade>
|
||||
<penalty>0.25</penalty>
|
||||
<hidden>0</hidden>
|
||||
<single>true</single>
|
||||
<shuffleanswers>true</shuffleanswers>
|
||||
<correctfeedback type="html"><text>Genau – PUT für das Ersetzen einer Ressource.</text></correctfeedback>
|
||||
<incorrectfeedback type="html"><text>Nein – überlege, was „ersetzen" in HTTP bedeutet.</text></incorrectfeedback>
|
||||
<answer fraction="100"><text><![CDATA[<strong>PUT</strong> – ersetzt eine existierende Ressource. GET ruft nur Daten ab und sendet <em>keine</em> Daten zum Server.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[<strong>GET</strong> – GET kann auch Daten senden, wenn eine URL mit Parameter verwendet wird.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[<strong>POST</strong> – POST ist immer für das Ersetzen von Daten zuständig.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[<strong>DELETE</strong> – DELETE sendet das neue Foto und löscht gleichzeitig das alte.]]></text></answer>
|
||||
</question>
|
||||
|
||||
<!-- ─── 2 pt – HTTP Status-Codes Transfer ─── -->
|
||||
<question type="multichoice">
|
||||
<n><text>Q13 – HTTP Status-Codes: Fehlerdiagnose</text></n>
|
||||
<questiontext type="html">
|
||||
<text><![CDATA[
|
||||
<p>Du rufst eine Webseite auf und der Browser zeigt folgende
|
||||
Fehlermeldung an:</p>
|
||||
<pre>HTTP/1.1 503 Service Unavailable</pre>
|
||||
<p><strong>Was bedeutet dieser Code, und wer ist für die Behebung
|
||||
zuständig – du oder der Betreiber der Webseite?</p>
|
||||
]]></text>
|
||||
</questiontext>
|
||||
<generalfeedback type="html"><text>503 ist ein 5xx-Code = Server-Fehler. Der Server ist überlastet oder temporär nicht verfügbar. Verantwortung liegt beim Serverbetreiber, nicht beim Nutzer.</text></generalfeedback>
|
||||
<defaultgrade>2</defaultgrade>
|
||||
<penalty>0.25</penalty>
|
||||
<hidden>0</hidden>
|
||||
<single>true</single>
|
||||
<shuffleanswers>true</shuffleanswers>
|
||||
<correctfeedback type="html"><text>Genau – 5xx = Server-Problem, nicht dein Fehler.</text></correctfeedback>
|
||||
<incorrectfeedback type="html"><text>Nein – überlege, was die Ziffer „5" im Code bedeutet.</text></incorrectfeedback>
|
||||
<answer fraction="100"><text><![CDATA[<strong>Server-Fehler:</strong> Der Server ist überlastet oder temporär nicht verfügbar. Verantwortung liegt beim <strong>Betreiber</strong> – du kannst nur später erneut versuchen.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Client-Fehler: Du hast die falsche URL eingegeben – ein 5xx-Code bedeutet, dass deine Anfrage falsch war.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Erfolgs-Code: 503 bedeutet, dass der Server die Anfrage erfolgreich umgeleitet hat.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Der Code bedeutet, dass der Server die Seite dauerhaft verschoben hat – du muss die neue URL suchen.]]></text></answer>
|
||||
</question>
|
||||
|
||||
<!-- ─── 2 pt – DNS Ablauf Transfer ─── -->
|
||||
<question type="multichoice">
|
||||
<n><text>Q14 – DNS: Rolle im Ablauf</text></n>
|
||||
<questiontext type="html">
|
||||
<text><![CDATA[
|
||||
<p>Du gibst <code>https://hdm-stuttgart.de</code> in die
|
||||
Adresszeile ein.</p>
|
||||
<p><strong>Was passiert <em>vor</em> dem TCP-Handshake, und warum
|
||||
ist dieser Schritt zwingend nötig?</p>
|
||||
]]></text>
|
||||
</questiontext>
|
||||
<generalfeedback type="html"><text>DNS-Auflösung: Der Name „hdm-stuttgart.de" wird in eine IP-Adresse umgewandelt. TCP braucht eine IP-Adresse – names können nicht direkt verbunden werden.</text></generalfeedback>
|
||||
<defaultgrade>2</defaultgrade>
|
||||
<penalty>0.25</penalty>
|
||||
<hidden>0</hidden>
|
||||
<single>true</single>
|
||||
<shuffleanswers>true</shuffleanswers>
|
||||
<correctfeedback type="html"><text>Genau – DNS vor TCP, Name → IP.</text></correctfeedback>
|
||||
<incorrectfeedback type="html"><text>Nein – überlege, was TCP als Zieladresse braucht.</text></incorrectfeedback>
|
||||
<answer fraction="100"><text><![CDATA[<strong>DNS-Auflösung:</strong> Der Name <code>hdm-stuttgart.de</code> wird in eine <strong>IP-Adresse</strong> umgewandelt. TCP kann nur zu IP-Adressen Verbindungen aufbauen, nicht zu Namen.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Der Browser sendet direkt den Namen an den Server – DNS wird erst danach für die Verschlüsselung benötigt.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[DNS passiert nach dem TCP-Handshake – erst wird die Verbindung aufgebaut, dann der Name aufgelöst.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[DNS ist nur für HTTPS nötig – bei HTTP kann der Name direkt verwendet werden.]]></text></answer>
|
||||
</question>
|
||||
|
||||
<!-- ─── 2 pt – CSS Spezifität Transfer ─── -->
|
||||
<question type="multichoice">
|
||||
<n><text>Q15 – CSS Spezifität: Welche Regel gewinnt?</text></n>
|
||||
<questiontext type="html">
|
||||
<text><![CDATA[
|
||||
<p>Gegeben folgender CSS-Code:</p>
|
||||
<pre>
|
||||
p { color: blue; } /* (A) */
|
||||
.highlight { color: green; } /* (B) */
|
||||
#main { color: red; } /* (C) */
|
||||
</pre>
|
||||
<p>Ein Element <code><p class="highlight" id="main">Text</p></code>
|
||||
wird angezeigt.<br>
|
||||
<strong>Welche Farbe zeigt der Text an, und warum?</p>
|
||||
]]></text>
|
||||
</questiontext>
|
||||
<generalfeedback type="html"><text>Spezifität: ID (0,1,0,0) > Klasse (0,0,1,0) > Element (0,0,0,1). Alle drei Regeln treffen das Element – ID #main gewinnt → rot.</text></generalfeedback>
|
||||
<defaultgrade>2</defaultgrade>
|
||||
<penalty>0.25</penalty>
|
||||
<hidden>0</hidden>
|
||||
<single>true</single>
|
||||
<shuffleanswers>true</shuffleanswers>
|
||||
<correctfeedback type="html"><text>Genau – ID gewinnt durch höchste Spezifität.</text></correctfeedback>
|
||||
<incorrectfeedback type="html"><text>Nein – überlege die Spezifitätswerte: ID > Klasse > Element.</text></incorrectfeedback>
|
||||
<answer fraction="100"><text><![CDATA[<strong>Rot</strong> – die ID-Regel <code>#main</code> hat die höchste Spezifität (0,1,0,0) und gewinnt über Klasse (0,0,1,0) und Element (0,0,0,1).]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[<strong>Blau</strong> – die Element-Regel steht zuerst im Code und hat daher Vorrang.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[<strong>Grün</strong> – Klassen-Selektoren haben immer Vorrang vor IDs.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[<strong>Rot</strong> – die letzte Regel im Code gewinnt immer, unabhängig vom Selektor-Typ.]]></text></answer>
|
||||
</question>
|
||||
|
||||
<!-- ─── 2 pt – Responsive Design Transfer ─── -->
|
||||
<question type="multichoice">
|
||||
<n><text>Q16 – Responsive Design: Mobile First</text></n>
|
||||
<questiontext type="html">
|
||||
<text><![CDATA[
|
||||
<p>Ein Developer schreibt folgendes CSS:</p>
|
||||
<pre>
|
||||
.container { background: white; }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container { background: blue; }
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.container { background: green; }
|
||||
}
|
||||
</pre>
|
||||
<p><strong>Welche Farbe hat <code>.container</code> bei einem
|
||||
Bildschirm von 900 px Breite, und warum?</p>
|
||||
]]></text>
|
||||
</questiontext>
|
||||
<generalfeedback type="html"><text>Mobile First: Basis = white. Bei 900px greift min-width: 768px → blue. min-width: 1024px greift NICHT (900 < 1024). Ergebnis: blau.</text></generalfeedback>
|
||||
<defaultgrade>2</defaultgrade>
|
||||
<penalty>0.25</penalty>
|
||||
<hidden>0</hidden>
|
||||
<single>true</single>
|
||||
<shuffleanswers>true</shuffleanswers>
|
||||
<correctfeedback type="html"><text>Genau – 768px greift, 1024px nicht.</text></correctfeedback>
|
||||
<incorrectfeedback type="html"><text>Nein – überlege, welche min-width-Bedingungen bei 900px erfüllt sind.</text></incorrectfeedback>
|
||||
<answer fraction="100"><text><![CDATA[<strong>Blau</strong> – bei 900 px greift <code>min-width: 768px</code> (900 ≥ 768), aber <code>min-width: 1024px</code> greift nicht (900 < 1024).]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[<strong>Weiß</strong> – Media-Queries gelten nur ab 1024 px, darunter bleibt immer die Basis-Farbe.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[<strong>Grün</strong> – die letzte Media-Query überschreibt immer alle vorherigen.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[<strong>Weiß</strong> – bei 900 px greift keine Media-Query, da 900 zwischen den beiden Breakpoints liegt.]]></text></answer>
|
||||
</question>
|
||||
|
||||
<!-- ─── 1 pt – Zusammen: Der Ablauf eines Klicks ─── -->
|
||||
<question type="multichoice">
|
||||
<n><text>Q17 – Zusammen: Reihenfolge eines HTTPS-Aufrufs</text></n>
|
||||
<questiontext type="html">
|
||||
<text><![CDATA[
|
||||
<p>Du gibst eine URL ein. <strong>Welche Reihenfolge der Schritte
|
||||
ist korrekt?</p>
|
||||
]]></text>
|
||||
</questiontext>
|
||||
<generalfeedback type="html"><text>Korrekte Reihenfolge: (1) DNS-Auflösung, (2) TCP 3-Way-Handshake, (3) HTTP-Request (GET), (4) HTTP-Response (200 OK + HTML).</text></generalfeedback>
|
||||
<defaultgrade>1</defaultgrade>
|
||||
<penalty>0.25</penalty>
|
||||
<hidden>0</hidden>
|
||||
<single>true</single>
|
||||
<shuffleanswers>true</shuffleanswers>
|
||||
<correctfeedback type="html"><text>Genau – DNS → TCP → HTTP Request → HTTP Response.</text></correctfeedback>
|
||||
<incorrectfeedback type="html"><text>Nein – an erster Stelle steht immer die DNS-Auflösung.</text></incorrectfeedback>
|
||||
<answer fraction="100"><text><![CDATA[(1) DNS → (2) TCP-Handshake → (3) HTTP GET → (4) HTTP 200 OK]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[(1) TCP-Handshake → (2) DNS → (3) HTTP GET → (4) HTTP 200 OK]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[(1) HTTP GET → (2) DNS → (3) TCP-Handshake → (4) HTTP 200 OK]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[(1) DNS → (2) HTTP GET → (3) TCP-Handshake → (4) HTTP 200 OK]]></text></answer>
|
||||
</question>
|
||||
|
||||
<!-- ─── 1 pt – Bonusfrage: Spezifität Edge Case ─── -->
|
||||
<question type="multichoice">
|
||||
<n><text>Q18 – CSS: 100 Element-Selektoren vs. 1 Klasse</text></n>
|
||||
<questiontext type="html">
|
||||
<text><![CDATA[
|
||||
<p>Es gibt zwei CSS-Regeln für ein <code><p></code>-Element:</p>
|
||||
<pre>
|
||||
p p p p p p p p p p { color: blue; } /* 100× Element-Selektor */
|
||||
.highlight { color: red; } /* 1× Klasse */
|
||||
</pre>
|
||||
<p>Das Element hat die Klasse <code>highlight</code>.
|
||||
<strong>Welche Farbe gewinnt?</p>
|
||||
]]></text>
|
||||
</questiontext>
|
||||
<generalfeedback type="html"><text>Eine einzelne Klasse (0,0,1,0) schlägt immer hundert Element-Selektoren (0,0,0,100). Spezifität wird nicht additiv „aufgezählt" – die Stelle zählt als Einheit.</text></generalfeedback>
|
||||
<defaultgrade>1</defaultgrade>
|
||||
<penalty>0.25</penalty>
|
||||
<hidden>0</hidden>
|
||||
<single>true</single>
|
||||
<shuffleanswers>true</shuffleanswers>
|
||||
<correctfeedback type="html"><text>Genau – eine Klasse gewinnt immer gegen beliebig viele Elemente.</text></correctfeedback>
|
||||
<incorrectfeedback type="html"><text>Nein – Spezifität funktioniert nicht durch Addition innerhalb einer Stelle.</text></incorrectfeedback>
|
||||
<answer fraction="100"><text><![CDATA[<strong>Rot</strong> – eine Klasse (0,0,1,0) gewinnt immer gegen beliebig viele Element-Selektoren (0,0,0,n). Spezifität-Stellen überschreiben sich, nicht addieren.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[<strong>Blau</strong> – 100 Element-Selektoren ergeben 0,0,0,100 = höhere Spezifität als 0,0,1,0.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[<strong>Blau</strong> – die längere Regel (mehr Selektoren) hat immer höhere Spezifität.]]></text></answer>
|
||||
<answer fraction="0"><text><![CDATA[Unentschieden – die Regeln haben exakt gleiche Spezifität.]]></text></answer>
|
||||
</question>
|
||||
|
||||
</quiz>
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,439 @@
|
||||
Here is the quiz converted into a clean, readable Markdown format. I have preserved the structure, code snippets, and feedback for each question.
|
||||
|
||||
---
|
||||
|
||||
# 223015c – Grundlagen IT- und Internettechnik
|
||||
|
||||
**WS 2025/26 – Michael Czechowski – HdM Stuttgart**
|
||||
**40 Punkte / 40 Minuten**
|
||||
|
||||
---
|
||||
|
||||
### Q1 – Von-Neumann: Komponenten zuordnen (3 pt)
|
||||
|
||||
**Ordne jeder Komponente der Von-Neumann-Architektur ihre Funktion zu.**
|
||||
|
||||
* **Rechenwerk (ALU):** Führt arithmetische und logische Operationen durch.
|
||||
* **Steuerwerk:** Holt, dekodiert und steuert die Ausführung von Befehlen.
|
||||
* **Speicherwerk:** Enthält sowohl Programme als auch Daten (Stored Program Concept).
|
||||
* **Ein-/Ausgabe:** Schnittstelle zu externen Geräten wie Tastatur, Bildschirm, Netzwerk.
|
||||
* **Bus-System:** Verbindet alle Komponenten mittels Adress-, Daten- und Steuerbus.
|
||||
|
||||
> **Feedback:** Die 5 Komponenten: ALU (Rechnen), Steuerwerk (Befehle steuern), Speicherwerk (Programme UND Daten), Ein-/Ausgabe (Peripherie), Bus-System (Verbindung).
|
||||
|
||||
---
|
||||
|
||||
### Q2 – Von-Neumann vs. Harvard (2 pt)
|
||||
|
||||
**Ein Arduino-Mikrocontroller nutzt die Harvard-Architektur. Ein modernes Smartphone nutzt eine (modifizierte) Von-Neumann-Architektur.**
|
||||
|
||||
**Warum ist die Harvard-Architektur für Echtzeit-Anwendungen auf dem Arduino vorteilhafter, und was wäre der Nachteil, wenn das Smartphone diese Architektur verwenden würde?**
|
||||
|
||||
* [ ] Harvard ist langsamer, aber sicherer – daher für Echtzeit geeignet. Smartphones brauchen die Geschwindigkeit nicht.
|
||||
* [x] **Harvard nutzt separate Speicher für Code und Daten → paralleler Zugriff, schneller. Beim Smartphone wäre es schwieriger, beliebige Apps zu laden – weniger Flexibilität.** ✅
|
||||
* [ ] Beide Architekturen sind funktional identisch – der Unterschied liegt nur im Gehäuse.
|
||||
* [ ] Von-Neumann ist schneller durch gemeinsamen Speicher. Harvard wird gewählt, weil Echtzeit-Apps weniger Speicher brauchen.
|
||||
|
||||
> **Feedback:** Harvard: separate Code/Daten-Speicher → paralleler Zugriff, schneller. Nachteil: Code und Daten nicht aus gleichem Speicher nahtlos mischbar → weniger Flexibilität, kein „Laden beliebiger Apps" wie bei Von-Neumann.
|
||||
|
||||
---
|
||||
|
||||
### Q3 – Stored Program Concept (2 pt)
|
||||
|
||||
**Vor der Von-Neumann-Architektur mussten bei Maschinen wie dem ENIAC Programme durch Umstecken von Kabeln eingegeben werden.**
|
||||
|
||||
**Was konkret ermöglicht das Stored Program Concept, was vorher nicht möglich war? Nenne zwei Beispiele.**
|
||||
|
||||
* [ ] Programme werden auf separater Hardware gespeichert → die Hauptspeicher-Kapazität wird ums Doppelte gesteigert.
|
||||
* [ ] Die Hardware kann jetzt selbst Befehle erfinden – kein Mensch muss mehr programmieren.
|
||||
* [x] **Programme werden als Daten im Speicher abgelegt → z. B. Apps können installiert/gelöscht werden und Multitasking (mehrere Programme gleichzeitig) wird möglich.** ✅
|
||||
* [ ] Nur ein einzelnes Programm kann gleichzeitig laufen, aber es kann schneller geladenen werden.
|
||||
|
||||
> **Feedback:** Stored Program: Programme werden als Daten im Speicher abgelegt → austauschbar ohne Hardwareänderung. Ermöglicht: Betriebssysteme, Apps installieren/löschen, Multitasking, Updates.
|
||||
|
||||
---
|
||||
|
||||
### Q4 – HTML: `<head>` vs. `<body>` (2 pt)
|
||||
|
||||
**Ein Student erstellt eine Webseite und platziert *alles* im `<body>` – auch den `<title>` und die `<meta name="description">`.**
|
||||
|
||||
**Welche zwei konkreten Konsequenzen hat das?**
|
||||
|
||||
* [ ] Kein Problem – Browser ignorieren die Unterscheidung zwischen `<head>` und `<body>`.
|
||||
* [x] **(1) Der Browser-Tab zeigt keinen Titel an. (2) Suchmaschinen haben keine Beschreibung für das Snippet → schlechte SEO und Screen-Reader können die Seite nicht richtig vorlesen.** ✅
|
||||
* [ ] (1) Der Titel wird im Seiteninhalt sichtbar angezeigt. (2) Die description wird als Text auf der Seite eingeblendet.
|
||||
* [ ] Nur das Fehlen von `<meta charset>` ist ein Problem – title und description funktionieren überall.
|
||||
|
||||
> **Feedback:** title und meta description gehören in `<head>`. Im `<body>`: (1) kein Titel im Browser-Tab / Suchergebnis, (2) keine Beschreibung für Suchmaschinen/Screen-Reader → SEO und Accessibility beeinträchtigt.
|
||||
|
||||
---
|
||||
|
||||
### Q5 – Barrierefreiheit: Curb-Cut-Effekt (3 pt)
|
||||
|
||||
**Der Curb-Cut-Effekt beschreibt, wie eine barrierefreie Lösung – ursprünglich für Menschen mit Behinderung – letztendlich *allen* zugute kommt.**
|
||||
|
||||
**Nenne ein konkretes Web-Beispiel, das diesen Effekt demonstriert, und erkläre, wer davon profitiert.**
|
||||
|
||||
* [ ] Barrierefreie Webseiten sind langsamer zu laden – der Curb-Cut-Effekt beschreibt diesen negativen Nebeneffekt.
|
||||
* [ ] Der Curb-Cut-Effekt bedeutet, dass barrierefreie Seiten nur für Menschen mit Behinderung nützlich sind.
|
||||
* [x] **Untertitel: Gedacht für Gehörlose, helfen aber auch in lauter Umgebung, beim Sprachlernen oder wenn der Ton aus ist – profitiert fast jedermann.** ✅
|
||||
* [ ] **Dark Mode:** Gedacht für Sehbehinderung, hilft auch in dunkler Umgebung – Beispiel für den Curb-Cut-Effekt.
|
||||
|
||||
> **Feedback:** Beispiel: Untertitel (für Gehörlose) → helfen auch in lauter Umgebung, beim Sprachlernen, bei Ton aus. Alt-Texte (für Screen-Reader) → helfen auch SEO. Semantisches HTML → besser für alle.
|
||||
|
||||
---
|
||||
|
||||
### Q6 – European Accessibility Act (2 pt)
|
||||
|
||||
**Der European Accessibility Act (EAA) ist seit Juni 2025 in Kraft.**
|
||||
|
||||
**Was bedeutet das konkret für ein deutsches E-Commerce-Unternehmen, das eine Webseite betreibt?**
|
||||
|
||||
* [ ] Der EAA betrifft nur öffentliche Behörden – private Unternehmen sind ausgenommen.
|
||||
* [ ] Das Unternehmen muss nur eine englische Version der Webseite bereitstellen.
|
||||
* [x] **Die Webseite muss barrierefreiheitstechnisch WCAG-Standards erfüllen – E-Commerce ist explizit im EAA geregelt. Bei Verstoß: Bußgelder möglich.** ✅
|
||||
* [ ] Der EAA regelt nur die Barrierefreiheit von mobilen Apps, nicht von Webseiten.
|
||||
|
||||
> **Feedback:** EAA verpflichtet u. a. E-Commerce-Anbieter zur Barrierefreiheit. Die Webseite muss WCAG-Standards erfüllen. Bei Verstoß: Bußgelder bis 100.000 € möglich.
|
||||
|
||||
---
|
||||
|
||||
### Q7 – TCP/IP: Protokoll → Schicht (3 pt)
|
||||
|
||||
**Ordne jedem Protokoll die richtige TCP/IP-Schicht zu.**
|
||||
|
||||
* **HTTP:** Anwendung
|
||||
* **DNS:** Anwendung
|
||||
* **TCP:** Transport
|
||||
* **UDP:** Transport
|
||||
* **IP:** Internet
|
||||
* **Ethernet:** Netzzugang
|
||||
|
||||
> **Feedback:** Anwendung: HTTP, DNS, SMTP. Transport: TCP, UDP. Internet: IP. Netzzugang: Ethernet, WLAN.
|
||||
|
||||
---
|
||||
|
||||
### Q8 – Encapsulation: Dateneinheit → Schicht (3 pt)
|
||||
|
||||
**Bei der Übertragung wird eine Nachricht von Schicht zu Schicht verpackt (Encapsulation). Ordne jeder Dateneinheit die zugehörige Schicht zu.**
|
||||
|
||||
* **Daten:** Anwendungsschicht – die eigentliche Nachricht (z. B. HTML-Seite).
|
||||
* **Segment:** Transportschicht – Daten + Ports und Sequenznummern.
|
||||
* **Paket:** Internetschicht – Segment + IP-Adressen (Quelle und Ziel).
|
||||
* **Frame:** Netzzugangsschicht – Paket + MAC-Adressen und Prüfsumme.
|
||||
|
||||
> **Feedback:** Daten (Anwendung) → Segment (Transport, +Ports) → Paket (Internet, +IP) → Frame (Netzzugang, +MAC). Merkhilfe: D-S-P-F.
|
||||
|
||||
---
|
||||
|
||||
### Q9 – IP vs. MAC vs. Port: Transfer-Szenario (3 pt)
|
||||
|
||||
**Dein Laptop sendet eine HTTPS-Anfrage an einen Webserver in einem anderen Land. Das Paket durchläuft mehrere Router.**
|
||||
|
||||
**Welche der folgenden Aussagen über die Adressen auf dem Weg ist korrekt?**
|
||||
|
||||
* [ ] Alle drei Adressen (IP, MAC, Port) ändert sich bei jedem Router.
|
||||
* [x] **Die IP-Adresse des Servers bleibt konstant, der Port (443) ändert sich nicht – die MAC-Adresse wird an jedem Router neu gesetzt (lokal, ein Hop).** ✅
|
||||
* [ ] Die MAC-Adresse bleibt konstant, die IP-Adresse ändert sich bei jedem Hop.
|
||||
* [ ] IP und Port ändert sich, MAC bleibt konstant – MAC ist die globale Adresse.
|
||||
|
||||
> **Feedback:** IP-Adresse des Ziel-Servers bleibt konstant (global). MAC-Adresse ändert sich bei jedem Hop (lokal, nächster Router). Port 443 (HTTPS) bleibt konstant.
|
||||
|
||||
---
|
||||
|
||||
### Q10 – TCP 3-Way-Handshake: Was passiert wäre? (3 pt)
|
||||
|
||||
**Der Client sendet ein SYN zum Server. Das SYN-Paket geht verloren – es erreicht den Server nie.**
|
||||
|
||||
**Was passiert als nächstes, und warum wird keine Verbindung aufgebaut?**
|
||||
|
||||
* [ ] Der Server sendet trotzdem ein SYN-ACK, da die IP-Adresse bekannt ist – die Verbindung wird trotzdem aufgebaut.
|
||||
* [x] **Der Server kennt die Anfrage nicht → sendet kein SYN-ACK → der Client erhält keine Antwort → keine Verbindung. Der Client wird das SYN nach einem Timeout erneut senden.** ✅
|
||||
* [ ] Der Client sendet direkt ein ACK als Fallback – die Verbindung wird mit zwei Paketen aufgebaut.
|
||||
* [ ] Das verloren gegangene SYN wird automatisch vom Netzwerk rekonstruiert – kein Problem.
|
||||
|
||||
> **Feedback:** Der Server erhält kein SYN → sendet kein SYN-ACK zurück → der Client bekommt keine Antwort → Verbindung wird nicht aufgebaut. TCP wird das SYN nach einem Timeout erneut senden (Neuübertragung).
|
||||
|
||||
---
|
||||
|
||||
### Q11 – TCP vs. UDP: Videostreaming (2 pt)
|
||||
|
||||
**Ein Videostreaming-Dienst sendet Daten an deinen Browser. Ein einzelnes Paket geht verloren.**
|
||||
|
||||
**Warum wählt der Dienst UDP statt TCP, obwohl ein Paket verloren geht?**
|
||||
|
||||
* [ ] UDP sendet jedes Paket doppelt, daher geht statistisch nie etwas verloren.
|
||||
* [x] **Bei Echtzeit ist Verzögerung schlimmer als Verlust. TCP würde das Paket erneut anfordern → Video friert ein. UDP ignoriert es → kurzer Glitch, Video läuft weiter.** ✅
|
||||
* [ ] TCP kann bei Videostreaming nicht verwendet werden, da es zu langsam für Multimedia ist.
|
||||
* [ ] UDP ist immer schneller als TCP – deshalb nutzt jeder Streaming-Dienst UDP.
|
||||
|
||||
> **Feedback:** Bei Echtzeit-Video ist Verzögerung schlimmer als Paketverlust. TCP würde das Paket erneut anfordern → Video friert. UDP ignoriert das Verlust → kurzer Artefakt, Video läuft weiter.
|
||||
|
||||
---
|
||||
|
||||
### Q12 – HTTP-Methoden: Szenario (2 pt)
|
||||
|
||||
**Ein Nutzer aktualisiert sein Profilbild auf einer Webseite. Das Foto wird zum Server gesendet und das *alte Bild ersetzt*.**
|
||||
|
||||
**Welche HTTP-Methode wird für diese Operation verwendet, und warum nicht GET?**
|
||||
|
||||
* [ ] **GET** – GET kann auch Daten senden, wenn eine URL mit Parameter verwendet wird.
|
||||
* [x] **PUT – ersetzt eine existierende Ressource. GET ruft nur Daten ab und sendet *keine* Daten zum Server.** ✅
|
||||
* [ ] **POST** – POST ist immer für das Ersetzen von Daten zuständig.
|
||||
* [ ] **DELETE** – DELETE sendet das neue Foto und löscht gleichzeitig das alte.
|
||||
|
||||
> **Feedback:** PUT – Daten ersetzen (eine existierende Ressource wird überschrieben). GET ruft nur Daten ab, sendet keine Daten zum Server.
|
||||
|
||||
---
|
||||
|
||||
### Q13 – HTTP Status-Codes: Fehlerdiagnose (2 pt)
|
||||
|
||||
**Du rufst eine Webseite auf und der Browser zeigt folgende Fehlermeldung an:**
|
||||
`HTTP/1.1 503 Service Unavailable`
|
||||
|
||||
**Was bedeutet dieser Code, und wer ist für die Behebung zuständig – du oder der Betreiber der Webseite?**
|
||||
|
||||
* [ ] Client-Fehler: Du hast die falsche URL eingegeben – ein 5xx-Code bedeutet, dass deine Anfrage falsch war.
|
||||
* [ ] Erfolgs-Code: 503 bedeutet, dass der Server die Anfrage erfolgreich umgeleitet hat.
|
||||
* [x] **Server-Fehler: Der Server ist überlastet oder temporär nicht verfügbar. Verantwortung liegt beim Betreiber – du kannst nur später erneut versuchen.** ✅
|
||||
* [ ] Der Code bedeutet, dass der Server die Seite dauerhaft verschoben hat – du muss die neue URL suchen.
|
||||
|
||||
> **Feedback:** 503 ist ein 5xx-Code = Server-Fehler. Der Server ist überlastet oder temporär nicht verfügbar. Verantwortung liegt beim Serverbetreiber, nicht beim Nutzer.
|
||||
|
||||
---
|
||||
|
||||
### Q14 – DNS: Rolle im Ablauf (2 pt)
|
||||
|
||||
**Du gibst `https://hdm-stuttgart.de` in die Adresszeile ein.**
|
||||
|
||||
**Was passiert *vor* dem TCP-Handshake, und warum ist dieser Schritt zwingend nötig?**
|
||||
|
||||
* [ ] Der Browser sendet direkt den Namen an den Server – DNS wird erst danach für die Verschlüsselung benötigt.
|
||||
* [x] **DNS-Auflösung: Der Name `hdm-stuttgart.de` wird in eine IP-Adresse umgewandelt. TCP kann nur zu IP-Adressen Verbindungen aufbauen, nicht zu Namen.** ✅
|
||||
* [ ] DNS passiert nach dem TCP-Handshake – erst wird die Verbindung aufgebaut, dann der Name aufgelöst.
|
||||
* [ ] DNS ist nur für HTTPS nötig – bei HTTP kann der Name direkt verwendet werden.
|
||||
|
||||
> **Feedback:** DNS-Auflösung: Der Name „hdm-stuttgart.de" wird in eine IP-Adresse umgewandelt. TCP braucht eine IP-Adresse – names können nicht direkt verbunden werden.
|
||||
|
||||
---
|
||||
|
||||
### Q15 – CSS Spezifität: Welche Regel gewinnt? (2 pt)
|
||||
|
||||
**Gegeben folgender CSS-Code:**
|
||||
|
||||
```css
|
||||
p { color: blue; } /* (A) */
|
||||
.highlight { color: green; } /* (B) */
|
||||
#main { color: red; } /* (C) */
|
||||
|
||||
```
|
||||
|
||||
**Ein Element `<p class="highlight" id="main">Text</p>` wird angezeigt.**
|
||||
**Welche Farbe zeigt der Text an, und warum?**
|
||||
|
||||
* [ ] **Blau** – die Element-Regel steht zuerst im Code und hat daher Vorrang.
|
||||
* [ ] **Grün** – Klassen-Selektoren haben immer Vorrang vor IDs.
|
||||
* [x] **Rot – die ID-Regel `#main` hat die höchste Spezifität (0,1,0,0) und gewinnt über Klasse (0,0,1,0) und Element (0,0,0,1).** ✅
|
||||
* [ ] **Rot** – die letzte Regel im Code gewinnt immer, unabhängig vom Selektor-Typ.
|
||||
|
||||
> **Feedback:** Spezifität: ID (0,1,0,0) > Klasse (0,0,1,0) > Element (0,0,0,1). Alle drei Regeln treffen das Element – ID #main gewinnt → rot.
|
||||
|
||||
---
|
||||
|
||||
### Q16 – Responsive Design: Mobile First (2 pt)
|
||||
|
||||
**Ein Developer schreibt folgendes CSS:**
|
||||
|
||||
```css
|
||||
.container { background: white; }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container { background: blue; }
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.container { background: green; }
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
**Welche Farbe hat `.container` bei einem Bildschirm von 900 px Breite, und warum?**
|
||||
|
||||
* [ ] **Weiß** – Media-Queries gelten nur ab 1024 px, darunter bleibt immer die Basis-Farbe.
|
||||
* [ ] **Grün** – die letzte Media-Query überschreibt immer alle vorherigen.
|
||||
* [x] **Blau – bei 900 px greift `min-width: 768px` (900 ≥ 768), aber `min-width: 1024px` greift nicht (900 < 1024).** ✅
|
||||
* [ ] **Weiß** – bei 900 px greift keine Media-Query, da 900 zwischen den beiden Breakpoints liegt.
|
||||
|
||||
> **Feedback:** Mobile First: Basis = white. Bei 900px greift min-width: 768px → blue. min-width: 1024px greift NICHT (900 < 1024). Ergebnis: blau.
|
||||
|
||||
---
|
||||
|
||||
### Q17 – Zusammen: Reihenfolge eines HTTPS-Aufrufs (1 pt)
|
||||
|
||||
**Du gibst eine URL ein. Welche Reihenfolge der Schritte ist korrekt?**
|
||||
|
||||
* [ ] (1) TCP-Handshake → (2) DNS → (3) HTTP GET → (4) HTTP 200 OK
|
||||
* [x] **(1) DNS → (2) TCP-Handshake → (3) HTTP GET → (4) HTTP 200 OK** ✅
|
||||
* [ ] (1) HTTP GET → (2) DNS → (3) TCP-Handshake → (4) HTTP 200 OK
|
||||
* [ ] (1) DNS → (2) HTTP GET → (3) TCP-Handshake → (4) HTTP 200 OK
|
||||
|
||||
> **Feedback:** Korrekte Reihenfolge: (1) DNS-Auflösung, (2) TCP 3-Way-Handshake, (3) HTTP-Request (GET), (4) HTTP-Response (200 OK + HTML).
|
||||
|
||||
---
|
||||
|
||||
### Q18 – Bonusfrage: Spezifität Edge Case (1 pt)
|
||||
|
||||
**Es gibt zwei CSS-Regeln für ein `<p>`-Element:**
|
||||
|
||||
```css
|
||||
p p p p p p p p p p { color: blue; } /* 100× Element-Selektor */
|
||||
.highlight { color: red; } /* 1× Klasse */
|
||||
|
||||
```
|
||||
|
||||
**Das Element hat die Klasse `highlight`. Welche Farbe gewinnt?**
|
||||
|
||||
* [ ] **Blau** – 100 Element-Selektoren ergeben 0,0,0,100 = höhere Spezifität als 0,0,1,0.
|
||||
* [x] **Rot – eine Klasse (0,0,1,0) gewinnt immer gegen beliebig viele Element-Selektoren (0,0,0,n). Spezifität-Stellen überschreiben sich, nicht addieren.** ✅
|
||||
* [ ] **Blau** – die längere Regel (mehr Selektoren) hat immer höhere Spezifität.
|
||||
* [ ] Unentschieden – die Regeln haben exakt gleiche Spezifität.
|
||||
|
||||
> **Feedback:** Eine einzelne Klasse (0,0,1,0) schlägt immer hundert Element-Selektoren (0,0,0,100). Spezifität wird nicht additiv „aufgezählt" – die Stelle zählt als Einheit.
|
||||
|
||||
---
|
||||
|
||||
### Q19 – Von-Neumann: Der Flaschenhals (Engpass)
|
||||
|
||||
**Die Von-Neumann-Architektur hat einen bekannten Nachteil, den sogenannten „Von-Neumann-Flaschenhals“. Was ist damit gemeint?**
|
||||
|
||||
* [ ] Das Steuerwerk kann Befehle schneller verarbeiten, als das Rechenwerk sie berechnen kann.
|
||||
* [x] **Die CPU ist schneller als der Datentransfer über den gemeinsamen Bus. Da Daten und Befehle denselben Bus nutzen, müssen sie nacheinander geladen werden.** ✅
|
||||
* [ ] Der Speicher verliert seine Daten, wenn der Strom abgeschaltet wird, was den Startvorgang verlangsamt.
|
||||
* [ ] Die Ein-/Ausgabegeräte blockieren den Prozessor dauerhaft, da sie keinen eigenen Speicher haben.
|
||||
|
||||
> **Feedback:** Der Flaschenhals entsteht, weil Befehle und Daten sich den gleichen Weg (Bus) teilen müssen und der Speicherzugriff langsamer ist als die CPU-Geschwindigkeit.
|
||||
|
||||
---
|
||||
|
||||
### Q20 – HTML: Encoding (Charset)
|
||||
|
||||
**In Q4 ging es um Metadaten. Ein weiteres wichtiges Tag im `<head>` ist `<meta charset="UTF-8">`. Was ist die konkrete Konsequenz, wenn dieses Tag fehlt oder falsch ist?**
|
||||
|
||||
* [ ] Die Webseite lädt gar nicht, da der Browser den Binärcode nicht interpretieren kann.
|
||||
* [x] **Sonderzeichen (Umlaute, Emojis) werden als kryptische Symbole („Hieroglyphen“) dargestellt, da der Browser die falsche Zeichenkodierung rät.** ✅
|
||||
* [ ] Die Seite wird langsamer, da der Browser erst alle Sprachen der Welt durchprobieren muss.
|
||||
* [ ] Das CSS wird nicht geladen, da CSS zwingend UTF-8 voraussetzt.
|
||||
|
||||
> **Feedback:** Ohne definierte `charset` (Zeichensatz) nutzt der Browser oft einen Standard (z. B. Latin-1), was bei UTF-8-gespeicherten Dateien zu Darstellungsfehlern bei ä, ö, ü oder Emojis führt.
|
||||
|
||||
---
|
||||
|
||||
### Q21 – Barrierefreiheit: POUR-Prinzip
|
||||
|
||||
**Die WCAG basieren auf vier Prinzipien (POUR). Eines davon ist „Bedienbarkeit“ (Operable). Welches Szenario beschreibt eine Verletzung dieses Prinzips?**
|
||||
|
||||
* [ ] Der Textkontrast ist zu gering (grau auf hellgrau), sodass man ihn kaum lesen kann.
|
||||
* [x] **Eine Navigation funktioniert nur per Maus (Hover), ist aber per Tastatur (Tab-Taste) nicht erreichbar.** ✅
|
||||
* [ ] Der Inhalt ist in sehr komplizierter Fachsprache geschrieben, die ein Laie nicht versteht.
|
||||
* [ ] Die Webseite stürzt in alten Browsern ab.
|
||||
|
||||
> **Feedback:** „Bedienbar“ bedeutet, dass die Schnittstelle (Buttons, Links) von jedem genutzt werden kann – also auch ohne Maus (nur Tastatur). Kontrast gehört zu „Wahrnehmbar“ (Perceivable).
|
||||
|
||||
---
|
||||
|
||||
### Q22 – Encapsulation: Die Empfänger-Seite (Decapsulation)
|
||||
|
||||
**In Q8 haben wir Daten verpackt. Wenn der Server das Signal empfängt, passiert das Gegenteil (Decapsulation). In welcher Reihenfolge werden die Header *entfernt*?**
|
||||
|
||||
* [ ] Anwendung (HTTP) → Transport (TCP) → Internet (IP) → Netzzugang (Ethernet)
|
||||
* [ ] Es werden alle Header gleichzeitig entfernt, sobald die Daten im RAM liegen.
|
||||
* [x] **Netzzugang (Ethernet-Header weg) → Internet (IP-Header weg) → Transport (TCP-Header weg) → Daten.** ✅
|
||||
* [ ] Internet (IP) → Netzzugang (Ethernet) → Transport (TCP) → Anwendung (HTTP)
|
||||
|
||||
> **Feedback:** Das Auspacken erfolgt in umgekehrter Reihenfolge wie das Einpacken (Zwiebel-Prinzip). Erst wird der Umschlag (Ethernet) geöffnet, dann das Paket (IP), dann das Segment (TCP).
|
||||
|
||||
---
|
||||
|
||||
### Q23 – Ports: Wozu genau?
|
||||
|
||||
**Wir wissen aus Q9, dass IP-Adressen Computer identifizieren. Wozu genau dient dann die Port-Nummer (z. B. 80 oder 443) auf dem Zielrechner?**
|
||||
|
||||
* [ ] Sie bestimmt die Geschwindigkeit der Verbindung.
|
||||
* [ ] Sie dient zur Verschlüsselung der Daten.
|
||||
* [x] **Sie adressiert den konkreten Dienst bzw. die Anwendung auf dem Computer (z. B. Webserver vs. Mailserver).** ✅
|
||||
* [ ] Sie zeigt an, ob der Computer per WLAN oder Kabel verbunden ist.
|
||||
|
||||
> **Feedback:** Die IP ist wie die Hausnummer (welches Gebäude?), der Port ist wie die Türnummer oder der Name an der Klingel (wer im Haus soll das Paket bekommen? Webserver? Mailserver?).
|
||||
|
||||
---
|
||||
|
||||
### Q24 – TCP: Sequenznummern
|
||||
|
||||
**TCP ist zuverlässig. Ein Mechanismus dafür sind „Sequenznummern“ im Header. Welches Problem lösen diese konkret?**
|
||||
|
||||
* [ ] Sie verhindern, dass Hacker die Verbindung abhören können.
|
||||
* [x] **Pakete können im Internet unterschiedliche Routen nehmen und in falscher Reihenfolge ankommen. Sequenznummern erlauben das korrekte Sortieren beim Empfänger.** ✅
|
||||
* [ ] Sie zählen, wie viele Benutzer gerade gleichzeitig auf dem Server sind.
|
||||
* [ ] Sie bestimmen die maximale Größe einer Datei.
|
||||
|
||||
> **Feedback:** Da IP-Pakete überholen können, kommen Teil 2 und Teil 3 vielleicht vor Teil 1 an. TCP sortiert sie anhand der Nummern wieder richtig. UDP macht das nicht.
|
||||
|
||||
---
|
||||
|
||||
### Q25 – HTTP Methoden: Sicherheit
|
||||
|
||||
**Warum sollte man niemals die GET-Methode verwenden, um sensible Daten (z. B. ein Passwort) an den Server zu senden?**
|
||||
|
||||
* [ ] GET ist langsamer als POST und Passwörter müssen schnell übertragen werden.
|
||||
* [x] **Bei GET stehen die Daten sichtbar in der URL (Browser-Verlauf, Server-Logs, Proxy-Server). Bei POST stehen sie im Body.** ✅
|
||||
* [ ] GET erlaubt nur Zahlen, keine Buchstaben.
|
||||
* [ ] GET-Anfragen werden vom Server nicht verschlüsselt, POST-Anfragen immer.
|
||||
|
||||
> **Feedback:** Parameter bei GET hängen an der URL (`?pw=123`). Das ist in der History und in Logs sichtbar. HTTPS verschlüsselt zwar beides auf der Leitung, aber die URL ist an zu vielen Stellen sichtbar.
|
||||
|
||||
---
|
||||
|
||||
### Q26 – HTTP Status: 404 Not Found
|
||||
|
||||
**Du erhältst einen 404-Fehler. In Q13 (503) lag der Fehler beim Server. Wer hat beim 404-Fehler „Schuld“ bzw. wo liegt die Ursache meistens?**
|
||||
|
||||
* [ ] Der Server ist abgestürzt.
|
||||
* [ ] Das Internet ist ausgefallen.
|
||||
* [x] **Der Client (Nutzer). Es wurde eine URL angefordert, die es nicht gibt (Tippfehler oder veralteter Link).** ✅
|
||||
* [ ] Der DNS-Server konnte den Namen nicht auflösen.
|
||||
|
||||
> **Feedback:** 4xx-Codes sind Client-Errors. Der Server funktioniert super, er sagt dir nur: „Das, was du (Client) suchst, habe ich nicht.“
|
||||
|
||||
---
|
||||
|
||||
### Q27 – CSS: `!important` vs. ID
|
||||
|
||||
**In Q15 hat die ID gewonnen. Nun ändern wir den Code:**
|
||||
|
||||
```css
|
||||
#main { color: red; }
|
||||
p { color: blue !important; }
|
||||
|
||||
```
|
||||
|
||||
**Welche Farbe hat das `<p id="main">` Element nun?**
|
||||
|
||||
* [ ] **Rot** – ID ist immer noch spezifischer als ein Element-Selektor.
|
||||
* [ ] **Lila** – Die Farben mischen sich.
|
||||
* [x] **Blau** – `!important` durchbricht die normale Spezifitäts-Kaskade und gewinnt sogar gegen IDs (außer die ID hat auch !important). ✅
|
||||
* [ ] **Rot** – `!important` wird von modernen Browsern ignoriert.
|
||||
|
||||
> **Feedback:** `!important` ist die „Atombombe“ im CSS. Es überschreibt normale Spezifitätsregeln (ID, Klasse, Element). Es sollte daher sehr sparsam eingesetzt werden.
|
||||
|
||||
---
|
||||
|
||||
### Q28 – Responsive Design: Desktop First
|
||||
|
||||
**In Q16 nutzten wir `min-width` (Mobile First). Wie würde die Media Query aussehen, wenn wir „Desktop First“ arbeiten würden (also Standard ist Desktop, Anpassung für kleine Screens)?**
|
||||
|
||||
* [ ] `@media (device-width: small) { ... }`
|
||||
* [ ] `@media (min-width: ...)` – das bleibt gleich, nur die Reihenfolge ändert sich.
|
||||
* [x] **`@media (max-width: ...)` – Wir definieren Stile für Bildschirme, die *kleiner* als eine bestimmte Breite sind.** ✅
|
||||
* [ ] `@media (mobile: true) { ... }`
|
||||
|
||||
> **Feedback:** Desktop First bedeutet: Das Basis-CSS ist für große Schirme. Mit `max-width` (maximale Breite) definieren wir Ausnahmen für Geräte, die schmaler sind (Tablets, Handys).
|
||||
+33
-24
@@ -1,16 +1,12 @@
|
||||
#!/usr/bin/env bash
|
||||
# Development server for HdM slides
|
||||
# Usage:
|
||||
# ./dev-server.sh - Marp live server for all courses (port 1312)
|
||||
# ./dev-server.sh 223015b 1313 - Marp live server for single course
|
||||
# ./dev-server.sh 223015c 1314 - Marp live server for single course
|
||||
# Simplified development server for HdM slides
|
||||
# Starts single Marp server for all courses
|
||||
|
||||
set -e
|
||||
|
||||
# Configuration
|
||||
SLIDES_DIR="slides"
|
||||
COURSE="${1:-}"
|
||||
DEV_PORT="${2:-1312}"
|
||||
DEV_PORT=3000
|
||||
|
||||
# Colors
|
||||
GREEN='\033[0;32m'
|
||||
@@ -18,27 +14,40 @@ BLUE='\033[0;34m'
|
||||
RED='\033[0;31m'
|
||||
NC='\033[0m' # No Color
|
||||
|
||||
# Kill existing process on our port only
|
||||
kill_port() {
|
||||
fuser -k "$DEV_PORT/tcp" 2>/dev/null || true
|
||||
sleep 0.5
|
||||
# Cleanup function
|
||||
cleanup() {
|
||||
echo -e "\n${RED}Shutting down dev server...${NC}"
|
||||
pkill -f "marp-cli.*--server" 2>/dev/null || true
|
||||
exit 0
|
||||
}
|
||||
|
||||
# Kill existing processes on our port
|
||||
kill_existing() {
|
||||
echo -e "${BLUE}Cleaning up existing processes...${NC}"
|
||||
pkill -9 -f "marp-cli" 2>/dev/null || true
|
||||
fuser -k $DEV_PORT/tcp 2>/dev/null || true
|
||||
sleep 1
|
||||
}
|
||||
|
||||
# Main
|
||||
trap 'echo -e "\n${RED}Shutting down...${NC}"; kill 0; exit 0' SIGINT SIGTERM
|
||||
trap cleanup SIGINT SIGTERM
|
||||
|
||||
kill_port
|
||||
kill_existing
|
||||
|
||||
if [ -n "$COURSE" ]; then
|
||||
SERVE_DIR="$SLIDES_DIR/$COURSE"
|
||||
echo -e "${GREEN}Marp dev server${NC} · ${BLUE}$COURSE${NC}"
|
||||
else
|
||||
SERVE_DIR="$SLIDES_DIR"
|
||||
echo -e "${GREEN}Marp dev server${NC} · ${BLUE}all courses${NC}"
|
||||
fi
|
||||
|
||||
echo -e " ${BLUE}http://localhost:$DEV_PORT${NC}"
|
||||
echo -e " ${BLUE}$SERVE_DIR/${NC}"
|
||||
echo -e "${GREEN}Starting development server...${NC}"
|
||||
echo ""
|
||||
echo -e " Server: ${BLUE}http://localhost:$DEV_PORT${NC}"
|
||||
echo -e " Slides: ${BLUE}$SLIDES_DIR/${NC}"
|
||||
echo ""
|
||||
echo -e "Available courses:"
|
||||
echo -e " 223015b: ${BLUE}http://localhost:$DEV_PORT/223015b/${NC}"
|
||||
echo -e " 223015c: ${BLUE}http://localhost:$DEV_PORT/223015c/${NC}"
|
||||
echo ""
|
||||
echo -e "Press ${RED}Ctrl+C${NC} to stop the server"
|
||||
echo ""
|
||||
|
||||
PORT=$DEV_PORT exec npx @marp-team/marp-cli --server "$SERVE_DIR/"
|
||||
# Start single Marp server for all slides
|
||||
PORT=$DEV_PORT npx @marp-team/marp-cli --server "$SLIDES_DIR/"
|
||||
|
||||
# Wait for process to exit
|
||||
wait
|
||||
+19
-18
@@ -41,6 +41,7 @@ TOPIC_MAP["vertiefung-offene-fragen"]="Vertiefung & Offene Fragen"
|
||||
TOPIC_MAP["geschichte-grundlagen-html"]="Geschichte, Grundlagen & HTML"
|
||||
TOPIC_MAP["netzwerke-protokolle-css"]="Netzwerke, Protokolle & CSS"
|
||||
TOPIC_MAP["interaktivitaet-javascript"]="Interaktivität & JavaScript"
|
||||
TOPIC_MAP["klausurfragen"]="Klausurfragen"
|
||||
|
||||
# Configure which topics should appear disabled per course
|
||||
# Two modes: fully disabled (non-clickable card) and buttons-disabled (link remains clickable, buttons are disabled)
|
||||
@@ -320,42 +321,42 @@ LINK
|
||||
|
||||
done
|
||||
|
||||
# Add klausurfolien entry if it exists (disabled — wird noch überarbeitet)
|
||||
# Add klausurfolien entry if it exists
|
||||
if [[ -f "$BUILD_DIR/klausurfolien.html" ]]; then
|
||||
pdf_disabled=""
|
||||
pdf_link=""
|
||||
if [[ -f "$BUILD_DIR/klausurfolien.pdf" ]]; then
|
||||
pdf_disabled="<span class=\"btn btn-pdf btn-disabled\">PDF</span>"
|
||||
pdf_link="<a href=\"klausurfolien.pdf\" class=\"btn btn-pdf\">PDF</a>"
|
||||
fi
|
||||
cat >> "$BUILD_DIR/index.html" << KLAUSUR
|
||||
<div class="kapitel-card disabled" style="border-left: 3px solid $ACCENT_COLOR;">
|
||||
<div class="kapitel-link">
|
||||
<div class="kapitel-card" style="border-left: 3px solid $ACCENT_COLOR;">
|
||||
<a href="klausurfolien.html" class="kapitel-link">
|
||||
<div class="kapitel-label">Prüfung</div>
|
||||
<div class="kapitel-title">Klausurrelevante Folien</div>
|
||||
</div>
|
||||
<span class="btn btn-slides btn-disabled">Folien</span>
|
||||
$pdf_disabled
|
||||
</a>
|
||||
<a href="klausurfolien.html" class="btn btn-slides">Folien</a>
|
||||
$pdf_link
|
||||
</div>
|
||||
KLAUSUR
|
||||
fi
|
||||
|
||||
# Add klausurfragen entry if it exists (disabled — wird noch überarbeitet)
|
||||
# Add klausurfragen entry if it exists (HTML and/or PDF)
|
||||
if [[ -f "$BUILD_DIR/klausurfragen.html" ]] || [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
|
||||
pdf_disabled=""
|
||||
pdf_link=""
|
||||
if [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
|
||||
pdf_disabled="<span class=\"btn btn-pdf btn-disabled\">PDF</span>"
|
||||
pdf_link="<a href=\"klausurfragen.pdf\" class=\"btn btn-pdf\">PDF</a>"
|
||||
fi
|
||||
slides_disabled=""
|
||||
slides_link=""
|
||||
if [[ -f "$BUILD_DIR/klausurfragen.html" ]]; then
|
||||
slides_disabled="<span class=\"btn btn-slides btn-disabled\">Folien</span>"
|
||||
slides_link="<a href=\"klausurfragen.html\" class=\"btn btn-slides\">Folien</a>"
|
||||
fi
|
||||
cat >> "$BUILD_DIR/index.html" << KLAUSURFRAGEN
|
||||
<div class="kapitel-card disabled" style="border-left: 3px solid $ACCENT_COLOR;">
|
||||
<div class="kapitel-link">
|
||||
<div class="kapitel-card" style="border-left: 3px solid $ACCENT_COLOR;">
|
||||
<a href="klausurfragen.html" class="kapitel-link">
|
||||
<div class="kapitel-label">Prüfung</div>
|
||||
<div class="kapitel-title">Klausurfragen</div>
|
||||
</div>
|
||||
$slides_disabled
|
||||
$pdf_disabled
|
||||
</a>
|
||||
$slides_link
|
||||
$pdf_link
|
||||
</div>
|
||||
KLAUSURFRAGEN
|
||||
fi
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
#!/usr/bin/env bash
|
||||
# Generate root index.html for HdM slides overview
|
||||
# Usage: ./generate-root-index.sh
|
||||
# Generate root index.html for /hdm/
|
||||
# Lists all courses (klausurfragen are now per-course)
|
||||
|
||||
BUILD_DIR="${1:-build}"
|
||||
BUILD_DIR="build"
|
||||
|
||||
cat > "$BUILD_DIR/index.html" << 'HEADER'
|
||||
<!DOCTYPE html>
|
||||
@@ -78,6 +78,31 @@ cat > "$BUILD_DIR/index.html" << 'HEADER'
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
.course-info { font-size: 0.85rem; color: #86868b; }
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.btn-slides {
|
||||
background: #6c757d;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-slides:hover { filter: brightness(1.1); }
|
||||
.btn-pdf {
|
||||
background: #f5f5f7;
|
||||
color: #1d1d1f;
|
||||
}
|
||||
.btn-pdf:hover { background: #e8e8ed; }
|
||||
.section-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
@@ -112,6 +137,7 @@ cat > "$BUILD_DIR/index.html" << 'HEADER'
|
||||
@media (max-width: 600px) {
|
||||
.course-card { grid-template-columns: 1fr; }
|
||||
.course-link { padding-bottom: 0.75rem; }
|
||||
.btn { margin: 0 1rem 1rem 1.5rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -123,16 +149,19 @@ cat > "$BUILD_DIR/index.html" << 'HEADER'
|
||||
<a href="223015b/" class="course-link">
|
||||
<span class="course-label">223015b</span>
|
||||
<div class="course-title">Dateiformate, Schnittstellen, Speichermedien & Distributionswege</div>
|
||||
<span class="course-info">6 Kapitel · Modul "Technik 1"</span>
|
||||
<span class="course-info">6 Kapitel · Modul "Technik 1"</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="course-card course-c">
|
||||
<a href="223015c/" class="course-link">
|
||||
<span class="course-label">223015c</span>
|
||||
<div class="course-title">Grundlagen IT- und Internettechnik</div>
|
||||
<span class="course-info">3 Kapitel · Modul "Technik 1"</span>
|
||||
<span class="course-info">3 Kapitel · Modul "Technik 1"</span>
|
||||
</a>
|
||||
</div>
|
||||
HEADER
|
||||
|
||||
cat >> "$BUILD_DIR/index.html" << 'FOOTER'
|
||||
</div>
|
||||
<h2 class="section-title">Referenzen</h2>
|
||||
<div class="references">
|
||||
@@ -153,6 +182,6 @@ cat > "$BUILD_DIR/index.html" << 'HEADER'
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
HEADER
|
||||
FOOTER
|
||||
|
||||
echo "Generated $BUILD_DIR/index.html"
|
||||
+111
-47
@@ -88,56 +88,50 @@ Hochschule der Medien Stuttgart
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# Herzlich willkommen!
|
||||
# Willkommen!
|
||||
## Einführung
|
||||
|
||||
---
|
||||
|
||||
# Über mich
|
||||
|
||||
**Michael Werner Czechowski**
|
||||
**Michael Czechowski**
|
||||
|
||||
- Systems and Platform Engineer
|
||||
- Irgendwas mit IT, Cloud und AI
|
||||
- Schwerpunkte:
|
||||
- Web-Technologien, Barriere-Armut, Systemarchitektur, Open Source
|
||||
- Hintergrund:
|
||||
- Philosophie (Uni Stuttgart)
|
||||
- Wirtschaftsinformatik (Leibniz-FH Hannover)
|
||||
- Philosophie (Uni Stuttgart) -> NO degree
|
||||
- Wirtschafts-Informatik (Leibniz-FH) -> B.Sc.
|
||||
- Kontakt: lb-czechowski@hdm-stuttgart.de
|
||||
|
||||
<!--
|
||||
Kurze Vorstellung
|
||||
Praxisbezug betonen
|
||||
Fragen jederzeit willkommen
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Warum dieses Modul?
|
||||
<!-- _footer: '' -->
|
||||
|
||||
**Digitale Medien sind überall.**
|
||||
|
||||
|
||||
* Warum enthalten Fotos oft Informationen über den Aufnahmeort?
|
||||
* Warum lassen sich gelöschte Dateien wiederherstellen?
|
||||
* Warum benötigt eine Minute 4K-Video unkomprimiert 45 GB Speicher?
|
||||
* Warum zeigt eine "1 TB"-Festplatte nur 931 GB an?
|
||||
* Warum ist USB-C nicht gleich USB-C?
|
||||
* Ziel: **→ Mitreden können!**
|
||||
---
|
||||
|
||||
<!--
|
||||
1. EXIF (Exchangeable Image File Format)-Metadaten speichern GPS-Koordinaten, Kameramodell und Zeitstempel automatisch. Die meisten wissen nicht, dass diese Daten beim Versenden mitgeschickt werden. → Kapitel 4: Metadaten
|
||||
# AMA (Ask my anything)
|
||||
|
||||
2. Beim Löschen wird nur der Verzeichniseintrag im Dateisystem entfernt, nicht die Daten selbst. Die Bits bleiben auf dem Datenträger, bis sie überschrieben werden. → Kapitel 3: Dateisysteme
|
||||
*Nur ein Vorschlag ...*
|
||||
|
||||
3. 3840 × 2160 Pixel × 3 Byte (RGB) × 30 Bilder/Sek × 60 Sek = ~45 GB. Codecs wie H.264/H.265 komprimieren um Faktor 100+. → Kapitel 1+2: Kompression
|
||||
|
||||
4. Hersteller rechnen dezimal (1 TB = 10¹² Bytes), Betriebssysteme binär (1 TiB = 2⁴⁰ Bytes). Die Differenz beträgt bei Terabyte bereits ~10%. → Kapitel 1: Dateneinheiten
|
||||
|
||||
5. USB-C ist nur die Steckerform. Dahinter können USB 2.0 (480 Mbit/s), USB 3.2 (20 Gbit/s) oder Thunderbolt 4 (40 Gbit/s) laufen — gleiches Kabel, völlig unterschiedliche Leistung. → Kapitel 3: Schnittstellen
|
||||
-->
|
||||
* Hast du alle Bände von AoT daheim?
|
||||
* Hast du eine Studierenden-Kneipe mal geleitet?
|
||||
* Hast du wirklich 17 Semester Philosophie ohne Abschluss studiert?
|
||||
|
||||
---
|
||||
|
||||
@@ -145,46 +139,116 @@ Hochschule der Medien Stuttgart
|
||||
|
||||
**Bitte Hand heben:**
|
||||
|
||||
* Wer kennt den Unterschied zwischen analog und digital?
|
||||
* Wer hat schon mal eine Datei von einem Format in ein anderes konvertiert?
|
||||
* Wer hat schon mal Metadaten aus einem Foto entfernt?
|
||||
* Wer hat schon mal ein Backup verloren?
|
||||
* Wer hat schon mal ein Backup wiederhergestellt?
|
||||
1) Wer hat schon mal ein Video komprimiert/konvertiert?
|
||||
2) Wer kennte die 3-2-1 Regel?
|
||||
3) Wer weiß, was der Unterschied zwischen JPEG und PNG ist?
|
||||
4) Wer hat schon mal mit APIs gearbeitet?
|
||||
5) Wer weiß, was UTF-8 bedeutet?
|
||||
6) Wer hat schon mal mit einem CLI gearbeitet?
|
||||
6) **Wer hat schon mal etwas mit HTML oder CSS gemacht?** (Hex-Farben wie `#FF0000`?)
|
||||
|
||||
<!--
|
||||
Niveau der Gruppe einschätzen
|
||||
Keine falschen Antworten
|
||||
Zeigt, wo wir starten
|
||||
HTML/CSS-Frage: Viele kennen Hex-Codes aus Webdesign
|
||||
API = Application Programming Interface
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Warum dieses Modul?
|
||||
|
||||
**Digitale Medien sind überall** – aber was steckt dahinter?
|
||||
|
||||
* Warum ist ein JPEG kleiner als ein PNG?
|
||||
* Warum klingt MP3 anders als FLAC?
|
||||
* Warum zeigt meine 1 TB Festplatte nur 931 GB?
|
||||
* Warum ist USB-C so verwirrend?
|
||||
* Wie funktioniert eigentlich Streaming?
|
||||
* **→ Die Technik dahinter verstehen!**
|
||||
|
||||
<!--
|
||||
Praxisnahe Fragen aus dem Alltag
|
||||
Nicht nur "was", sondern "warum"
|
||||
Verständnis für technische Entscheidungen
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Das Ziel
|
||||
|
||||
**Technische Grundlagen verstehen**, um fundierte Entscheidungen treffen zu können.
|
||||
|
||||
Als Digital- und Medienwirtschaftler:innen werdet ihr täglich mit technischen Fragen konfrontiert:
|
||||
* Welches Format für welchen Zweck?
|
||||
* Welche Schnittstelle für welches Gerät?
|
||||
* Wie funktioniert die Distribution digitaler Inhalte?
|
||||
* **→ Mitreden können – nicht (zwingend) programmieren!**
|
||||
|
||||
<!--
|
||||
Nicht: Ihr sollt Programmierer werden
|
||||
Sondern: Ihr sollt technische Entscheidungen verstehen
|
||||
Praxisbezug: Medienproduktion, Marketing, Projektmanagement
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Was ihr lernt
|
||||
|
||||
**In dieser Veranstaltung erwerbt ihr folgende Kompetenzen:**
|
||||
|
||||
* Fundiertes Grundwissen über Daten und Informationen
|
||||
* Dateiformate analysieren und verstehen
|
||||
* Grundlagen von Kompression (Audio, Bild, Video)
|
||||
* Speichermedien unterscheiden
|
||||
* Programmier-Schnittstellen kennenlernen
|
||||
* APIs und Distributionswege verstehen
|
||||
|
||||
<!--
|
||||
Fokus auf Verständnis, nicht auf Programmierung
|
||||
Hands-On jede Woche: Selbst ausprobieren
|
||||
Ziel: Einblick in die Denkweise von Software-Entwicklern
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Kursübersicht
|
||||
|
||||
**Kapitel:**
|
||||
**5 Termine:**
|
||||
|
||||
* 1. **Grundlagen**, Text & Audio (Bits, Bytes, Zeichenkodierung, MP3)
|
||||
* 2. Bild- & Video-**Kompression** (JPEG, PNG, H.264/H.265)
|
||||
* 3. **Speichermedien** & **Schnittstellen** (HDD, SSD, USB, Thunderbolt)
|
||||
* 4. **Distribution** und Verteilung (Streaming, REST, Cloud)
|
||||
* Vertiefung & offene Fragen
|
||||
| # | Datum | Thema |
|
||||
|---|-------|-------|
|
||||
| 1 | 19.12.2025 | Bits, Bytes, Zeichenkodierung & Audio |
|
||||
| 2 | 09.01.2026 | Bild- & Video-Kompression |
|
||||
| 3 | 23.01.2026 | Speichermedien & Schnittstellen |
|
||||
| 4 | 30.01.2026 | Distribution, APIs & Zukunft |
|
||||
| 5 | TBA | Vertiefung & offene Fragen |
|
||||
|
||||
**Format:** Theorie + Hands-On (30-40 Min pro Termin)
|
||||
|
||||
<!--
|
||||
Nicht nur theoretische Inhalte
|
||||
Praktische Übungen jede Woche
|
||||
Medienwissenschaftler:innen, nicht Informatiker:innen
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _backgroundColor: #e3f2fd -->
|
||||
|
||||
# Prüfungsleistung
|
||||
# Prüfungsleistung 18.02.
|
||||
|
||||
**Nach aktuellem Kenntnisstand:**
|
||||
|
||||
* 90 min insg. (Technik 1)
|
||||
* Schriftliche Klausur (digital)
|
||||
* 90 min (40% Grundlagen, 40% Dateiformate, 20% AV)
|
||||
* Schriftliche Klausur
|
||||
* Teils offene Fragen
|
||||
* Kein Coding/Programmieren
|
||||
* **Prüfungsrelevante Folien:**
|
||||
- Gestreift oder Vollton (PDF) markiert
|
||||
* Vermutlich digital
|
||||
* Kein Coding!
|
||||
* **Prüfungsrelevant:** Alles in den Folien/im Skript
|
||||
|
||||
<!--
|
||||
Details können sich noch ändern
|
||||
Keine Programmieraufgaben
|
||||
Verständnisfragen, keine Auswendiglernerei
|
||||
-->
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
Binary file not shown.
|
Before Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 318 KiB |
@@ -1,258 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 1440" preserveAspectRatio="none" shape-rendering="crispEdges">
|
||||
<rect x="0" y="0" width="10" height="1440" fill="rgb(255,255,255)"/>
|
||||
<rect x="10" y="0" width="10" height="1440" fill="rgb(254,254,254)"/>
|
||||
<rect x="20" y="0" width="10" height="1440" fill="rgb(253,253,253)"/>
|
||||
<rect x="30" y="0" width="10" height="1440" fill="rgb(252,252,252)"/>
|
||||
<rect x="40" y="0" width="10" height="1440" fill="rgb(251,251,251)"/>
|
||||
<rect x="50" y="0" width="10" height="1440" fill="rgb(250,250,250)"/>
|
||||
<rect x="60" y="0" width="10" height="1440" fill="rgb(249,249,249)"/>
|
||||
<rect x="70" y="0" width="10" height="1440" fill="rgb(248,248,248)"/>
|
||||
<rect x="80" y="0" width="10" height="1440" fill="rgb(247,247,247)"/>
|
||||
<rect x="90" y="0" width="10" height="1440" fill="rgb(246,246,246)"/>
|
||||
<rect x="100" y="0" width="10" height="1440" fill="rgb(245,245,245)"/>
|
||||
<rect x="110" y="0" width="10" height="1440" fill="rgb(244,244,244)"/>
|
||||
<rect x="120" y="0" width="10" height="1440" fill="rgb(243,243,243)"/>
|
||||
<rect x="130" y="0" width="10" height="1440" fill="rgb(242,242,242)"/>
|
||||
<rect x="140" y="0" width="10" height="1440" fill="rgb(241,241,241)"/>
|
||||
<rect x="150" y="0" width="10" height="1440" fill="rgb(240,240,240)"/>
|
||||
<rect x="160" y="0" width="10" height="1440" fill="rgb(239,239,239)"/>
|
||||
<rect x="170" y="0" width="10" height="1440" fill="rgb(238,238,238)"/>
|
||||
<rect x="180" y="0" width="10" height="1440" fill="rgb(237,237,237)"/>
|
||||
<rect x="190" y="0" width="10" height="1440" fill="rgb(236,236,236)"/>
|
||||
<rect x="200" y="0" width="10" height="1440" fill="rgb(235,235,235)"/>
|
||||
<rect x="210" y="0" width="10" height="1440" fill="rgb(234,234,234)"/>
|
||||
<rect x="220" y="0" width="10" height="1440" fill="rgb(233,233,233)"/>
|
||||
<rect x="230" y="0" width="10" height="1440" fill="rgb(232,232,232)"/>
|
||||
<rect x="240" y="0" width="10" height="1440" fill="rgb(231,231,231)"/>
|
||||
<rect x="250" y="0" width="10" height="1440" fill="rgb(230,230,230)"/>
|
||||
<rect x="260" y="0" width="10" height="1440" fill="rgb(229,229,229)"/>
|
||||
<rect x="270" y="0" width="10" height="1440" fill="rgb(228,228,228)"/>
|
||||
<rect x="280" y="0" width="10" height="1440" fill="rgb(227,227,227)"/>
|
||||
<rect x="290" y="0" width="10" height="1440" fill="rgb(226,226,226)"/>
|
||||
<rect x="300" y="0" width="10" height="1440" fill="rgb(225,225,225)"/>
|
||||
<rect x="310" y="0" width="10" height="1440" fill="rgb(224,224,224)"/>
|
||||
<rect x="320" y="0" width="10" height="1440" fill="rgb(223,223,223)"/>
|
||||
<rect x="330" y="0" width="10" height="1440" fill="rgb(222,222,222)"/>
|
||||
<rect x="340" y="0" width="10" height="1440" fill="rgb(221,221,221)"/>
|
||||
<rect x="350" y="0" width="10" height="1440" fill="rgb(220,220,220)"/>
|
||||
<rect x="360" y="0" width="10" height="1440" fill="rgb(219,219,219)"/>
|
||||
<rect x="370" y="0" width="10" height="1440" fill="rgb(218,218,218)"/>
|
||||
<rect x="380" y="0" width="10" height="1440" fill="rgb(217,217,217)"/>
|
||||
<rect x="390" y="0" width="10" height="1440" fill="rgb(216,216,216)"/>
|
||||
<rect x="400" y="0" width="10" height="1440" fill="rgb(215,215,215)"/>
|
||||
<rect x="410" y="0" width="10" height="1440" fill="rgb(214,214,214)"/>
|
||||
<rect x="420" y="0" width="10" height="1440" fill="rgb(213,213,213)"/>
|
||||
<rect x="430" y="0" width="10" height="1440" fill="rgb(212,212,212)"/>
|
||||
<rect x="440" y="0" width="10" height="1440" fill="rgb(211,211,211)"/>
|
||||
<rect x="450" y="0" width="10" height="1440" fill="rgb(210,210,210)"/>
|
||||
<rect x="460" y="0" width="10" height="1440" fill="rgb(209,209,209)"/>
|
||||
<rect x="470" y="0" width="10" height="1440" fill="rgb(208,208,208)"/>
|
||||
<rect x="480" y="0" width="10" height="1440" fill="rgb(207,207,207)"/>
|
||||
<rect x="490" y="0" width="10" height="1440" fill="rgb(206,206,206)"/>
|
||||
<rect x="500" y="0" width="10" height="1440" fill="rgb(205,205,205)"/>
|
||||
<rect x="510" y="0" width="10" height="1440" fill="rgb(204,204,204)"/>
|
||||
<rect x="520" y="0" width="10" height="1440" fill="rgb(203,203,203)"/>
|
||||
<rect x="530" y="0" width="10" height="1440" fill="rgb(202,202,202)"/>
|
||||
<rect x="540" y="0" width="10" height="1440" fill="rgb(201,201,201)"/>
|
||||
<rect x="550" y="0" width="10" height="1440" fill="rgb(200,200,200)"/>
|
||||
<rect x="560" y="0" width="10" height="1440" fill="rgb(199,199,199)"/>
|
||||
<rect x="570" y="0" width="10" height="1440" fill="rgb(198,198,198)"/>
|
||||
<rect x="580" y="0" width="10" height="1440" fill="rgb(197,197,197)"/>
|
||||
<rect x="590" y="0" width="10" height="1440" fill="rgb(196,196,196)"/>
|
||||
<rect x="600" y="0" width="10" height="1440" fill="rgb(195,195,195)"/>
|
||||
<rect x="610" y="0" width="10" height="1440" fill="rgb(194,194,194)"/>
|
||||
<rect x="620" y="0" width="10" height="1440" fill="rgb(193,193,193)"/>
|
||||
<rect x="630" y="0" width="10" height="1440" fill="rgb(192,192,192)"/>
|
||||
<rect x="640" y="0" width="10" height="1440" fill="rgb(191,191,191)"/>
|
||||
<rect x="650" y="0" width="10" height="1440" fill="rgb(190,190,190)"/>
|
||||
<rect x="660" y="0" width="10" height="1440" fill="rgb(189,189,189)"/>
|
||||
<rect x="670" y="0" width="10" height="1440" fill="rgb(188,188,188)"/>
|
||||
<rect x="680" y="0" width="10" height="1440" fill="rgb(187,187,187)"/>
|
||||
<rect x="690" y="0" width="10" height="1440" fill="rgb(186,186,186)"/>
|
||||
<rect x="700" y="0" width="10" height="1440" fill="rgb(185,185,185)"/>
|
||||
<rect x="710" y="0" width="10" height="1440" fill="rgb(184,184,184)"/>
|
||||
<rect x="720" y="0" width="10" height="1440" fill="rgb(183,183,183)"/>
|
||||
<rect x="730" y="0" width="10" height="1440" fill="rgb(182,182,182)"/>
|
||||
<rect x="740" y="0" width="10" height="1440" fill="rgb(181,181,181)"/>
|
||||
<rect x="750" y="0" width="10" height="1440" fill="rgb(180,180,180)"/>
|
||||
<rect x="760" y="0" width="10" height="1440" fill="rgb(179,179,179)"/>
|
||||
<rect x="770" y="0" width="10" height="1440" fill="rgb(178,178,178)"/>
|
||||
<rect x="780" y="0" width="10" height="1440" fill="rgb(177,177,177)"/>
|
||||
<rect x="790" y="0" width="10" height="1440" fill="rgb(176,176,176)"/>
|
||||
<rect x="800" y="0" width="10" height="1440" fill="rgb(175,175,175)"/>
|
||||
<rect x="810" y="0" width="10" height="1440" fill="rgb(174,174,174)"/>
|
||||
<rect x="820" y="0" width="10" height="1440" fill="rgb(173,173,173)"/>
|
||||
<rect x="830" y="0" width="10" height="1440" fill="rgb(172,172,172)"/>
|
||||
<rect x="840" y="0" width="10" height="1440" fill="rgb(171,171,171)"/>
|
||||
<rect x="850" y="0" width="10" height="1440" fill="rgb(170,170,170)"/>
|
||||
<rect x="860" y="0" width="10" height="1440" fill="rgb(169,169,169)"/>
|
||||
<rect x="870" y="0" width="10" height="1440" fill="rgb(168,168,168)"/>
|
||||
<rect x="880" y="0" width="10" height="1440" fill="rgb(167,167,167)"/>
|
||||
<rect x="890" y="0" width="10" height="1440" fill="rgb(166,166,166)"/>
|
||||
<rect x="900" y="0" width="10" height="1440" fill="rgb(165,165,165)"/>
|
||||
<rect x="910" y="0" width="10" height="1440" fill="rgb(164,164,164)"/>
|
||||
<rect x="920" y="0" width="10" height="1440" fill="rgb(163,163,163)"/>
|
||||
<rect x="930" y="0" width="10" height="1440" fill="rgb(162,162,162)"/>
|
||||
<rect x="940" y="0" width="10" height="1440" fill="rgb(161,161,161)"/>
|
||||
<rect x="950" y="0" width="10" height="1440" fill="rgb(160,160,160)"/>
|
||||
<rect x="960" y="0" width="10" height="1440" fill="rgb(159,159,159)"/>
|
||||
<rect x="970" y="0" width="10" height="1440" fill="rgb(158,158,158)"/>
|
||||
<rect x="980" y="0" width="10" height="1440" fill="rgb(157,157,157)"/>
|
||||
<rect x="990" y="0" width="10" height="1440" fill="rgb(156,156,156)"/>
|
||||
<rect x="1000" y="0" width="10" height="1440" fill="rgb(155,155,155)"/>
|
||||
<rect x="1010" y="0" width="10" height="1440" fill="rgb(154,154,154)"/>
|
||||
<rect x="1020" y="0" width="10" height="1440" fill="rgb(153,153,153)"/>
|
||||
<rect x="1030" y="0" width="10" height="1440" fill="rgb(152,152,152)"/>
|
||||
<rect x="1040" y="0" width="10" height="1440" fill="rgb(151,151,151)"/>
|
||||
<rect x="1050" y="0" width="10" height="1440" fill="rgb(150,150,150)"/>
|
||||
<rect x="1060" y="0" width="10" height="1440" fill="rgb(149,149,149)"/>
|
||||
<rect x="1070" y="0" width="10" height="1440" fill="rgb(148,148,148)"/>
|
||||
<rect x="1080" y="0" width="10" height="1440" fill="rgb(147,147,147)"/>
|
||||
<rect x="1090" y="0" width="10" height="1440" fill="rgb(146,146,146)"/>
|
||||
<rect x="1100" y="0" width="10" height="1440" fill="rgb(145,145,145)"/>
|
||||
<rect x="1110" y="0" width="10" height="1440" fill="rgb(144,144,144)"/>
|
||||
<rect x="1120" y="0" width="10" height="1440" fill="rgb(143,143,143)"/>
|
||||
<rect x="1130" y="0" width="10" height="1440" fill="rgb(142,142,142)"/>
|
||||
<rect x="1140" y="0" width="10" height="1440" fill="rgb(141,141,141)"/>
|
||||
<rect x="1150" y="0" width="10" height="1440" fill="rgb(140,140,140)"/>
|
||||
<rect x="1160" y="0" width="10" height="1440" fill="rgb(139,139,139)"/>
|
||||
<rect x="1170" y="0" width="10" height="1440" fill="rgb(138,138,138)"/>
|
||||
<rect x="1180" y="0" width="10" height="1440" fill="rgb(137,137,137)"/>
|
||||
<rect x="1190" y="0" width="10" height="1440" fill="rgb(136,136,136)"/>
|
||||
<rect x="1200" y="0" width="10" height="1440" fill="rgb(135,135,135)"/>
|
||||
<rect x="1210" y="0" width="10" height="1440" fill="rgb(134,134,134)"/>
|
||||
<rect x="1220" y="0" width="10" height="1440" fill="rgb(133,133,133)"/>
|
||||
<rect x="1230" y="0" width="10" height="1440" fill="rgb(132,132,132)"/>
|
||||
<rect x="1240" y="0" width="10" height="1440" fill="rgb(131,131,131)"/>
|
||||
<rect x="1250" y="0" width="10" height="1440" fill="rgb(130,130,130)"/>
|
||||
<rect x="1260" y="0" width="10" height="1440" fill="rgb(129,129,129)"/>
|
||||
<rect x="1270" y="0" width="10" height="1440" fill="rgb(128,128,128)"/>
|
||||
<rect x="1280" y="0" width="10" height="1440" fill="rgb(127,127,127)"/>
|
||||
<rect x="1290" y="0" width="10" height="1440" fill="rgb(126,126,126)"/>
|
||||
<rect x="1300" y="0" width="10" height="1440" fill="rgb(125,125,125)"/>
|
||||
<rect x="1310" y="0" width="10" height="1440" fill="rgb(124,124,124)"/>
|
||||
<rect x="1320" y="0" width="10" height="1440" fill="rgb(123,123,123)"/>
|
||||
<rect x="1330" y="0" width="10" height="1440" fill="rgb(122,122,122)"/>
|
||||
<rect x="1340" y="0" width="10" height="1440" fill="rgb(121,121,121)"/>
|
||||
<rect x="1350" y="0" width="10" height="1440" fill="rgb(120,120,120)"/>
|
||||
<rect x="1360" y="0" width="10" height="1440" fill="rgb(119,119,119)"/>
|
||||
<rect x="1370" y="0" width="10" height="1440" fill="rgb(118,118,118)"/>
|
||||
<rect x="1380" y="0" width="10" height="1440" fill="rgb(117,117,117)"/>
|
||||
<rect x="1390" y="0" width="10" height="1440" fill="rgb(116,116,116)"/>
|
||||
<rect x="1400" y="0" width="10" height="1440" fill="rgb(115,115,115)"/>
|
||||
<rect x="1410" y="0" width="10" height="1440" fill="rgb(114,114,114)"/>
|
||||
<rect x="1420" y="0" width="10" height="1440" fill="rgb(113,113,113)"/>
|
||||
<rect x="1430" y="0" width="10" height="1440" fill="rgb(112,112,112)"/>
|
||||
<rect x="1440" y="0" width="10" height="1440" fill="rgb(111,111,111)"/>
|
||||
<rect x="1450" y="0" width="10" height="1440" fill="rgb(110,110,110)"/>
|
||||
<rect x="1460" y="0" width="10" height="1440" fill="rgb(109,109,109)"/>
|
||||
<rect x="1470" y="0" width="10" height="1440" fill="rgb(108,108,108)"/>
|
||||
<rect x="1480" y="0" width="10" height="1440" fill="rgb(107,107,107)"/>
|
||||
<rect x="1490" y="0" width="10" height="1440" fill="rgb(106,106,106)"/>
|
||||
<rect x="1500" y="0" width="10" height="1440" fill="rgb(105,105,105)"/>
|
||||
<rect x="1510" y="0" width="10" height="1440" fill="rgb(104,104,104)"/>
|
||||
<rect x="1520" y="0" width="10" height="1440" fill="rgb(103,103,103)"/>
|
||||
<rect x="1530" y="0" width="10" height="1440" fill="rgb(102,102,102)"/>
|
||||
<rect x="1540" y="0" width="10" height="1440" fill="rgb(101,101,101)"/>
|
||||
<rect x="1550" y="0" width="10" height="1440" fill="rgb(100,100,100)"/>
|
||||
<rect x="1560" y="0" width="10" height="1440" fill="rgb(99,99,99)"/>
|
||||
<rect x="1570" y="0" width="10" height="1440" fill="rgb(98,98,98)"/>
|
||||
<rect x="1580" y="0" width="10" height="1440" fill="rgb(97,97,97)"/>
|
||||
<rect x="1590" y="0" width="10" height="1440" fill="rgb(96,96,96)"/>
|
||||
<rect x="1600" y="0" width="10" height="1440" fill="rgb(95,95,95)"/>
|
||||
<rect x="1610" y="0" width="10" height="1440" fill="rgb(94,94,94)"/>
|
||||
<rect x="1620" y="0" width="10" height="1440" fill="rgb(93,93,93)"/>
|
||||
<rect x="1630" y="0" width="10" height="1440" fill="rgb(92,92,92)"/>
|
||||
<rect x="1640" y="0" width="10" height="1440" fill="rgb(91,91,91)"/>
|
||||
<rect x="1650" y="0" width="10" height="1440" fill="rgb(90,90,90)"/>
|
||||
<rect x="1660" y="0" width="10" height="1440" fill="rgb(89,89,89)"/>
|
||||
<rect x="1670" y="0" width="10" height="1440" fill="rgb(88,88,88)"/>
|
||||
<rect x="1680" y="0" width="10" height="1440" fill="rgb(87,87,87)"/>
|
||||
<rect x="1690" y="0" width="10" height="1440" fill="rgb(86,86,86)"/>
|
||||
<rect x="1700" y="0" width="10" height="1440" fill="rgb(85,85,85)"/>
|
||||
<rect x="1710" y="0" width="10" height="1440" fill="rgb(84,84,84)"/>
|
||||
<rect x="1720" y="0" width="10" height="1440" fill="rgb(83,83,83)"/>
|
||||
<rect x="1730" y="0" width="10" height="1440" fill="rgb(82,82,82)"/>
|
||||
<rect x="1740" y="0" width="10" height="1440" fill="rgb(81,81,81)"/>
|
||||
<rect x="1750" y="0" width="10" height="1440" fill="rgb(80,80,80)"/>
|
||||
<rect x="1760" y="0" width="10" height="1440" fill="rgb(79,79,79)"/>
|
||||
<rect x="1770" y="0" width="10" height="1440" fill="rgb(78,78,78)"/>
|
||||
<rect x="1780" y="0" width="10" height="1440" fill="rgb(77,77,77)"/>
|
||||
<rect x="1790" y="0" width="10" height="1440" fill="rgb(76,76,76)"/>
|
||||
<rect x="1800" y="0" width="10" height="1440" fill="rgb(75,75,75)"/>
|
||||
<rect x="1810" y="0" width="10" height="1440" fill="rgb(74,74,74)"/>
|
||||
<rect x="1820" y="0" width="10" height="1440" fill="rgb(73,73,73)"/>
|
||||
<rect x="1830" y="0" width="10" height="1440" fill="rgb(72,72,72)"/>
|
||||
<rect x="1840" y="0" width="10" height="1440" fill="rgb(71,71,71)"/>
|
||||
<rect x="1850" y="0" width="10" height="1440" fill="rgb(70,70,70)"/>
|
||||
<rect x="1860" y="0" width="10" height="1440" fill="rgb(69,69,69)"/>
|
||||
<rect x="1870" y="0" width="10" height="1440" fill="rgb(68,68,68)"/>
|
||||
<rect x="1880" y="0" width="10" height="1440" fill="rgb(67,67,67)"/>
|
||||
<rect x="1890" y="0" width="10" height="1440" fill="rgb(66,66,66)"/>
|
||||
<rect x="1900" y="0" width="10" height="1440" fill="rgb(65,65,65)"/>
|
||||
<rect x="1910" y="0" width="10" height="1440" fill="rgb(64,64,64)"/>
|
||||
<rect x="1920" y="0" width="10" height="1440" fill="rgb(63,63,63)"/>
|
||||
<rect x="1930" y="0" width="10" height="1440" fill="rgb(62,62,62)"/>
|
||||
<rect x="1940" y="0" width="10" height="1440" fill="rgb(61,61,61)"/>
|
||||
<rect x="1950" y="0" width="10" height="1440" fill="rgb(60,60,60)"/>
|
||||
<rect x="1960" y="0" width="10" height="1440" fill="rgb(59,59,59)"/>
|
||||
<rect x="1970" y="0" width="10" height="1440" fill="rgb(58,58,58)"/>
|
||||
<rect x="1980" y="0" width="10" height="1440" fill="rgb(57,57,57)"/>
|
||||
<rect x="1990" y="0" width="10" height="1440" fill="rgb(56,56,56)"/>
|
||||
<rect x="2000" y="0" width="10" height="1440" fill="rgb(55,55,55)"/>
|
||||
<rect x="2010" y="0" width="10" height="1440" fill="rgb(54,54,54)"/>
|
||||
<rect x="2020" y="0" width="10" height="1440" fill="rgb(53,53,53)"/>
|
||||
<rect x="2030" y="0" width="10" height="1440" fill="rgb(52,52,52)"/>
|
||||
<rect x="2040" y="0" width="10" height="1440" fill="rgb(51,51,51)"/>
|
||||
<rect x="2050" y="0" width="10" height="1440" fill="rgb(50,50,50)"/>
|
||||
<rect x="2060" y="0" width="10" height="1440" fill="rgb(49,49,49)"/>
|
||||
<rect x="2070" y="0" width="10" height="1440" fill="rgb(48,48,48)"/>
|
||||
<rect x="2080" y="0" width="10" height="1440" fill="rgb(47,47,47)"/>
|
||||
<rect x="2090" y="0" width="10" height="1440" fill="rgb(46,46,46)"/>
|
||||
<rect x="2100" y="0" width="10" height="1440" fill="rgb(45,45,45)"/>
|
||||
<rect x="2110" y="0" width="10" height="1440" fill="rgb(44,44,44)"/>
|
||||
<rect x="2120" y="0" width="10" height="1440" fill="rgb(43,43,43)"/>
|
||||
<rect x="2130" y="0" width="10" height="1440" fill="rgb(42,42,42)"/>
|
||||
<rect x="2140" y="0" width="10" height="1440" fill="rgb(41,41,41)"/>
|
||||
<rect x="2150" y="0" width="10" height="1440" fill="rgb(40,40,40)"/>
|
||||
<rect x="2160" y="0" width="10" height="1440" fill="rgb(39,39,39)"/>
|
||||
<rect x="2170" y="0" width="10" height="1440" fill="rgb(38,38,38)"/>
|
||||
<rect x="2180" y="0" width="10" height="1440" fill="rgb(37,37,37)"/>
|
||||
<rect x="2190" y="0" width="10" height="1440" fill="rgb(36,36,36)"/>
|
||||
<rect x="2200" y="0" width="10" height="1440" fill="rgb(35,35,35)"/>
|
||||
<rect x="2210" y="0" width="10" height="1440" fill="rgb(34,34,34)"/>
|
||||
<rect x="2220" y="0" width="10" height="1440" fill="rgb(33,33,33)"/>
|
||||
<rect x="2230" y="0" width="10" height="1440" fill="rgb(32,32,32)"/>
|
||||
<rect x="2240" y="0" width="10" height="1440" fill="rgb(31,31,31)"/>
|
||||
<rect x="2250" y="0" width="10" height="1440" fill="rgb(30,30,30)"/>
|
||||
<rect x="2260" y="0" width="10" height="1440" fill="rgb(29,29,29)"/>
|
||||
<rect x="2270" y="0" width="10" height="1440" fill="rgb(28,28,28)"/>
|
||||
<rect x="2280" y="0" width="10" height="1440" fill="rgb(27,27,27)"/>
|
||||
<rect x="2290" y="0" width="10" height="1440" fill="rgb(26,26,26)"/>
|
||||
<rect x="2300" y="0" width="10" height="1440" fill="rgb(25,25,25)"/>
|
||||
<rect x="2310" y="0" width="10" height="1440" fill="rgb(24,24,24)"/>
|
||||
<rect x="2320" y="0" width="10" height="1440" fill="rgb(23,23,23)"/>
|
||||
<rect x="2330" y="0" width="10" height="1440" fill="rgb(22,22,22)"/>
|
||||
<rect x="2340" y="0" width="10" height="1440" fill="rgb(21,21,21)"/>
|
||||
<rect x="2350" y="0" width="10" height="1440" fill="rgb(20,20,20)"/>
|
||||
<rect x="2360" y="0" width="10" height="1440" fill="rgb(19,19,19)"/>
|
||||
<rect x="2370" y="0" width="10" height="1440" fill="rgb(18,18,18)"/>
|
||||
<rect x="2380" y="0" width="10" height="1440" fill="rgb(17,17,17)"/>
|
||||
<rect x="2390" y="0" width="10" height="1440" fill="rgb(16,16,16)"/>
|
||||
<rect x="2400" y="0" width="10" height="1440" fill="rgb(15,15,15)"/>
|
||||
<rect x="2410" y="0" width="10" height="1440" fill="rgb(14,14,14)"/>
|
||||
<rect x="2420" y="0" width="10" height="1440" fill="rgb(13,13,13)"/>
|
||||
<rect x="2430" y="0" width="10" height="1440" fill="rgb(12,12,12)"/>
|
||||
<rect x="2440" y="0" width="10" height="1440" fill="rgb(11,11,11)"/>
|
||||
<rect x="2450" y="0" width="10" height="1440" fill="rgb(10,10,10)"/>
|
||||
<rect x="2460" y="0" width="10" height="1440" fill="rgb(9,9,9)"/>
|
||||
<rect x="2470" y="0" width="10" height="1440" fill="rgb(8,8,8)"/>
|
||||
<rect x="2480" y="0" width="10" height="1440" fill="rgb(7,7,7)"/>
|
||||
<rect x="2490" y="0" width="10" height="1440" fill="rgb(6,6,6)"/>
|
||||
<rect x="2500" y="0" width="10" height="1440" fill="rgb(5,5,5)"/>
|
||||
<rect x="2510" y="0" width="10" height="1440" fill="rgb(4,4,4)"/>
|
||||
<rect x="2520" y="0" width="10" height="1440" fill="rgb(3,3,3)"/>
|
||||
<rect x="2530" y="0" width="10" height="1440" fill="rgb(2,2,2)"/>
|
||||
<rect x="2540" y="0" width="10" height="1440" fill="rgb(1,1,1)"/>
|
||||
<rect x="2550" y="0" width="10" height="1440" fill="rgb(0,0,0)"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 18 KiB |
@@ -1,53 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
|
||||
<rect width="1920" height="1080" fill="#ffffff"/>
|
||||
<text x="960.0" y="100" text-anchor="middle" font-family="sans-serif" font-size="54" fill="#1a1a2e" font-weight="bold">Zoom: die 16 hellsten Abstufungen</text>
|
||||
<rect x="60.00" y="220" width="101.25" height="500" fill="rgb(255,255,255)" stroke="#1a1a2e" stroke-width="3"/>
|
||||
<text x="110.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">255</text>
|
||||
<text x="110.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFF</text>
|
||||
<rect x="173.25" y="220" width="101.25" height="500" fill="rgb(254,254,254)" stroke="#1a1a2e" stroke-width="3"/>
|
||||
<text x="223.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">254</text>
|
||||
<text x="223.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFE</text>
|
||||
<rect x="286.50" y="220" width="101.25" height="500" fill="rgb(253,253,253)" stroke="#1a1a2e" stroke-width="3"/>
|
||||
<text x="337.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">253</text>
|
||||
<text x="337.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFD</text>
|
||||
<rect x="399.75" y="220" width="101.25" height="500" fill="rgb(252,252,252)" stroke="#1a1a2e" stroke-width="3"/>
|
||||
<text x="450.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">252</text>
|
||||
<text x="450.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFC</text>
|
||||
<rect x="513.00" y="220" width="101.25" height="500" fill="rgb(251,251,251)" stroke="#1a1a2e" stroke-width="3"/>
|
||||
<text x="563.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">251</text>
|
||||
<text x="563.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFB</text>
|
||||
<rect x="626.25" y="220" width="101.25" height="500" fill="rgb(250,250,250)" stroke="#1a1a2e" stroke-width="3"/>
|
||||
<text x="676.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">250</text>
|
||||
<text x="676.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFA</text>
|
||||
<rect x="739.50" y="220" width="101.25" height="500" fill="rgb(249,249,249)" stroke="#1a1a2e" stroke-width="3"/>
|
||||
<text x="790.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">249</text>
|
||||
<text x="790.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF9</text>
|
||||
<rect x="852.75" y="220" width="101.25" height="500" fill="rgb(248,248,248)" stroke="#1a1a2e" stroke-width="3"/>
|
||||
<text x="903.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">248</text>
|
||||
<text x="903.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF8</text>
|
||||
<rect x="966.00" y="220" width="101.25" height="500" fill="rgb(247,247,247)" stroke="#1a1a2e" stroke-width="3"/>
|
||||
<text x="1016.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">247</text>
|
||||
<text x="1016.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF7</text>
|
||||
<rect x="1079.25" y="220" width="101.25" height="500" fill="rgb(246,246,246)" stroke="#1a1a2e" stroke-width="3"/>
|
||||
<text x="1129.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">246</text>
|
||||
<text x="1129.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF6</text>
|
||||
<rect x="1192.50" y="220" width="101.25" height="500" fill="rgb(245,245,245)" stroke="#1a1a2e" stroke-width="3"/>
|
||||
<text x="1243.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">245</text>
|
||||
<text x="1243.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF5</text>
|
||||
<rect x="1305.75" y="220" width="101.25" height="500" fill="rgb(244,244,244)" stroke="#1a1a2e" stroke-width="3"/>
|
||||
<text x="1356.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">244</text>
|
||||
<text x="1356.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF4</text>
|
||||
<rect x="1419.00" y="220" width="101.25" height="500" fill="rgb(243,243,243)" stroke="#1a1a2e" stroke-width="3"/>
|
||||
<text x="1469.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">243</text>
|
||||
<text x="1469.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF3</text>
|
||||
<rect x="1532.25" y="220" width="101.25" height="500" fill="rgb(242,242,242)" stroke="#1a1a2e" stroke-width="3"/>
|
||||
<text x="1582.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">242</text>
|
||||
<text x="1582.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF2</text>
|
||||
<rect x="1645.50" y="220" width="101.25" height="500" fill="rgb(241,241,241)" stroke="#1a1a2e" stroke-width="3"/>
|
||||
<text x="1696.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">241</text>
|
||||
<text x="1696.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF1</text>
|
||||
<rect x="1758.75" y="220" width="101.25" height="500" fill="rgb(240,240,240)" stroke="#1a1a2e" stroke-width="3"/>
|
||||
<text x="1809.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">240</text>
|
||||
<text x="1809.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF0</text>
|
||||
<text x="960.0" y="1020" text-anchor="middle" font-family="sans-serif" font-size="28" fill="#4a4a6a" font-style="italic">jede Stufe = Unterschied von 1/255 ≈ 0,4% Helligkeit</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 6.0 KiB |
File renamed without changes.
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 198 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB |
@@ -112,7 +112,7 @@ Hochschule der Medien Stuttgart
|
||||
| **Formate** | ZIP, PNG, FLAC, GIF | JPEG, MP3, H.264/H.265 |
|
||||
|
||||
**Faustregel:**
|
||||
- Medien für EndnutzerInnen → Lossy oft akzeptabel
|
||||
- Medien für Endnutzer → Lossy oft akzeptabel
|
||||
- Quellmaterial, Code, Archive → Lossless nötig
|
||||
|
||||
<!--
|
||||
|
||||
@@ -48,7 +48,7 @@ section.disable {
|
||||
# Klausurfragen – 223015b
|
||||
**Dateiformate, Schnittstellen, Speichermedien · HdM Stuttgart · M. Czechowski**
|
||||
|
||||
<small>Stand: 01.02.2026</small>
|
||||
<small>Stand: 02.02.2026</small>
|
||||
|
||||
---
|
||||
|
||||
@@ -60,7 +60,7 @@ section.disable {
|
||||
> `[ESSAY]` = `essay` (Freitext, manuell bewertet)
|
||||
> `[SHORTANS]` = `shortanswer` (Stichwort/Satz, automatisch geprüft)
|
||||
> `[NUMERIC]` = `numerical` (Zahlenwert ± Toleranz)
|
||||
> `[CLOZE]` = `cloze` (Lückentext, gemischt)`
|
||||
> `[CLOZE]` = `cloze` (Lückentext, gemischt)
|
||||
|
||||
---
|
||||
|
||||
@@ -922,6 +922,8 @@ Wie viele Farben kann ein GIF-Bild gleichzeitig anzeigen?
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### M4 – WebP vs. JPEG: Vorteil?
|
||||
**Thema:** Bildformate – WebP
|
||||
**Punkte:** 1
|
||||
@@ -1165,6 +1167,8 @@ Eine Festplatte wird als „1 TB" vermarktet, aber Windows zeigt nur ~931 GB an.
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### O2 – HDD vs. SSD: Kern-Unterschied
|
||||
**Thema:** Speichermedien – HDD vs. SSD
|
||||
**Punkte:** 1
|
||||
@@ -1181,6 +1185,8 @@ Was ist der fundamentale technische Unterschied zwischen HDD und SSD?
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: disable -->
|
||||
|
||||
### O3 – HDD vs. SSD: Eigenschaften zuordnen
|
||||
**Thema:** Speichermedien – Vergleich
|
||||
**Punkte:** 2
|
||||
@@ -1395,4 +1401,4 @@ Beschreiben Sie die drei Speichertechnologien **optisch** (CD/DVD/Blu-ray), **ma
|
||||
|
||||
Erklären Sie die drei Backup-Typen **Full**, **Inkrementell** und **Differenziell**. Beschreiben Sie für jeden: (1) welche Daten gesichert werden, (2) Vor- und Nachteile, und (3) wann dieser Typ sinnvoll eingesetzt wird.
|
||||
|
||||
> **Musterlösung:** **Full:** Kompletter Datenbestand wird jedes Mal gesichert. Vorteil: Einfache Wiederherstellung (nur ein Backup nötig). Nachteil: Langsam, braucht viel Speicherplatz. Einsatz: Wöchentlich als Basis. **Inkrementell:** Nur Änderungen seit dem letzten Backup (egal welcher Art). Vorteil: Schnell, wenig Speicher. Nachteil: Wiederherstellung komplex (Kette aller Backups nötig). Einsatz: Täglich. **Differenziell:** Änderungen seit dem letzten Full-Backup. Vorteil: Schneller als Full, einfachere Wiederherstellung als Inkrementell. Nachteil: Wächst täglich. Einsatz: Mittelweg bei moderatem Datenvolumen.
|
||||
> **Musterlösung:** **Full:** Kompletter Datenbestand wird jedes Mal gesichert. Vorteil: Einfache Wiederherstellung (nur ein Backup nötig). Nachteil: Langsam, braucht viel Speicherplatz. Einsatz: Wöchentlich als Basis. **Inkrementell:** Nur Änderungen seit dem letzten Backup (egal welcher Art). Vorteil: Schnell, wenig Speicher. Nachteil: Wiederherstellung komplex (Kette aller Backups nötig). Einsatz: Täglich. **Differenziell:** Änderungen seit dem letzten Full-Backup. Vorteil: Schneller als Full, einfachere Wiederherstellung als Inkrementell. Nachteil: Wächst täglich. Einsatz: Mittelweg bei moderatem Datenvolumen.
|
||||
Binary file not shown.
Binary file not shown.
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -1,228 +0,0 @@
|
||||
---
|
||||
marp: true
|
||||
theme: gaia
|
||||
paginate: true
|
||||
backgroundColor: #fff
|
||||
header: "Grundlagen IT- und Internettechnik (223015c)"
|
||||
footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
|
||||
title: Grundlagen IT- und Internettechnik
|
||||
---
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--color-foreground: #1a1a2e;
|
||||
--color-highlight: #d63384;
|
||||
--color-dimmed: #4a4a6a;
|
||||
}
|
||||
section.invert {
|
||||
--color-foreground: #fff;
|
||||
}
|
||||
section {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
h1 {
|
||||
color: #a02060;
|
||||
}
|
||||
section.invert h1 {
|
||||
color: #fff;
|
||||
}
|
||||
h2 {
|
||||
color: #1f2937;
|
||||
}
|
||||
pre {
|
||||
background: #0f0f23;
|
||||
color: #d63384;
|
||||
border-radius: 8px;
|
||||
border-left: 3px solid #d63384;
|
||||
}
|
||||
pre code {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
code {
|
||||
background: #1a1a2e;
|
||||
color: #d63384;
|
||||
padding: 0.15em 0.4em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
a {
|
||||
color: var(--color-highlight);
|
||||
}
|
||||
section.klausur {
|
||||
background: repeating-linear-gradient(
|
||||
135deg,
|
||||
#fce4ec,
|
||||
#fce4ec 40px,
|
||||
#fff 40px,
|
||||
#fff 80px
|
||||
) !important;
|
||||
}
|
||||
@media print {
|
||||
section.klausur {
|
||||
background: #fce4ec !important;
|
||||
}
|
||||
}
|
||||
section.aufgabe {
|
||||
background: #fce4ec !important;
|
||||
}
|
||||
section.aufgabe footer {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- _class: invert -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _backgroundColor: #000 -->
|
||||
|
||||
|
||||
|
||||
# Grundlagen IT- und Internettechnik
|
||||
|
||||
**223015c** · Modul "Technik 1" · 1. Semester
|
||||
Digital- und Medienwirtschaft
|
||||
Hochschule der Medien Stuttgart
|
||||
|
||||
**Sommersemester 2026**
|
||||
|
||||
[https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/)
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# Herzlich willkommen!
|
||||
## Einführung
|
||||
|
||||
---
|
||||
|
||||
# Über mich
|
||||
|
||||
**Michael Werner Czechowski**
|
||||
|
||||
- Systems and Platform Engineer
|
||||
- Schwerpunkte:
|
||||
- Web-Technologien, Barriere-Armut, Open Source
|
||||
- Hintergrund:
|
||||
- Philosophie (Uni Stuttgart)
|
||||
- Wirtschaftsinformatik (Leibniz-FH Hannover)
|
||||
- Kontakt: lb-czechowski@hdm-stuttgart.de
|
||||
|
||||
---
|
||||
|
||||
# Warum dieses Modul?
|
||||
|
||||
**Das Internet ist überall** – aber was steckt dahinter?
|
||||
|
||||
* Warum sehen Webseiten auf dem Handy anders aus?
|
||||
* Wie funktioniert eigentlich das Internet?
|
||||
* Wie erkennen Sie, ob eine Werbeagentur gute Arbeit leistet?
|
||||
* Was hat ein Unterseekabel mit meiner E-Mail zu tun?
|
||||
* **→ Die Technik dahinter verstehen und fundierte Entscheidungen treffen**
|
||||
|
||||
---
|
||||
|
||||
# Das Ziel
|
||||
|
||||
**Technische Grundlagen verstehen**, um fundierte Entscheidungen treffen zu können.
|
||||
|
||||
Als Digital- und MedienwirtschaftlerInnen werdet ihr täglich mit technischen Fragen konfrontiert:
|
||||
* Wie baue ich eine barrierearme Webseite?
|
||||
* Welches Protokoll für welchen Zweck?
|
||||
* Wie funktioniert das Web hinter den Kulissen?
|
||||
* **→ Mitreden können – und selbst Webseiten bauen!**
|
||||
|
||||
---
|
||||
|
||||
# Was Sie hier lernen werden
|
||||
|
||||
**In dieser Veranstaltung erwerben Sie folgende Kompetenzen:**
|
||||
|
||||
* Geschichte des Computers und Internets
|
||||
* HTML-Grundlagen und semantisches Markup
|
||||
* CSS für Layout und Gestaltung
|
||||
* Netzwerke und Protokolle (TCP/IP, DNS, HTTP(S))
|
||||
* "Barrierefreiheit" im Web
|
||||
* Grundlagen von JavaScript und Interaktivität
|
||||
|
||||
---
|
||||
|
||||
# Kurze Umfrage
|
||||
|
||||
**Bitte Hand heben:**
|
||||
* Wer hat schon mal eine Webseite gebaut?
|
||||
* Wer weiß, was HTML ist?
|
||||
* Wer hat schon mal CSS geschrieben?
|
||||
* Wer kennt den Unterschied zwischen Internet und WWW?
|
||||
* Wer hat schon mal mit JavaScript gearbeitet?
|
||||
|
||||
---
|
||||
|
||||
# Kursübersicht
|
||||
|
||||
**Kapitel:**
|
||||
|
||||
1. Geschichte, Grundlagen & **HTML**
|
||||
2. Netzwerke, Protokolle, **semantisches HTML** & **CSS**
|
||||
3. Interaktivität, Animationen & **JavaScript**
|
||||
|
||||
**Ziel:** "Gelernte Hilflosigkeit" ablegen
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _backgroundColor: #fce4ec -->
|
||||
|
||||
# Prüfungsleistung
|
||||
|
||||
**Nach aktuellem Kenntnisstand:**
|
||||
|
||||
* 90 min insg. (Technik 1)
|
||||
* Schriftliche Klausur (digital)
|
||||
* Teils offene Fragen
|
||||
* So gut wie kein Coding/Programmieren
|
||||
* **Prüfungsrelevant:** Folien sind markiert mit anderem Hintergrund
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
|
||||
|
||||
@@ -140,38 +140,6 @@ Hochschule der Medien Stuttgart
|
||||
|
||||
---
|
||||
|
||||
# Ressourcen zum Selbstlernen
|
||||
|
||||
* **CODE CRISPIES: https://codecrispi.es/**
|
||||
* Online Code-Editor: https://codepen.io/pen/
|
||||
* MDN (Mozilla Developer Network): https://developer.mozilla.org/de/
|
||||
* Flexbox-Spiel: https://flexboxfroggy.com/
|
||||
* Grid-Spiel: https://cssgridgarden.com/
|
||||
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
- Code Crispies = unser Material
|
||||
- Codepen = sofort CSS ausprobieren
|
||||
- MDN = DIE Referenz schlechthin
|
||||
- Spiele für Flexbox/Grid – später relevant
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# Kapitel 1
|
||||
@@ -628,77 +596,6 @@ COBOL läuft heute noch auf Bankensystemen
|
||||
|
||||
---
|
||||
|
||||
# Assembler (1947)
|
||||
|
||||
**Die erste Stufe über Maschinencode**
|
||||
|
||||
- Erfunden von **Kathleen Booth** (Birkbeck College, London)
|
||||
- Mnemonische Befehle statt Binärzahlen (`MOV`, `ADD`, `JMP`)
|
||||
- Jeder Befehl entspricht direkt einer CPU-Instruktion
|
||||
- Hardwarenah, aber für Menschen lesbar
|
||||
|
||||
**Fun Fact:** Chris Sawyer schrieb **RollerCoaster Tycoon** (1999) fast komplett in x86-Assembly
|
||||
|
||||
<!--
|
||||
KATHLEEN BOOTH (1922–2022):
|
||||
Kathleen Hylda Valerie Booth (geb. Britten), BSc Mathematik (Royal Holloway, London), PhD Applied Mathematics (King's College London). Arbeitete ab 1946 mit Andrew Booth (später ihr Ehemann) am Birkbeck College – eines der kleinsten Computing-Teams Großbritanniens: nur Andrew, Kathleen und Xenia Sweeting.
|
||||
|
||||
WAS SIE TAT:
|
||||
Kathleen baute die Hardware des ARC (Automatic Relay Calculator) mit auf und entwickelte dann die Programmierarchitektur. 1947 reiste sie mit Andrew nach Princeton, wo sie John von Neumann trafen und die Stored-Program-Architektur kennenlernten. Sie schrieb "Coding for A.R.C." – die erste veröffentlichte Beschreibung einer Assembly-Sprache. Statt roher Binärzahlen (z.B. 10011) konnten Programmierer nun mnemonische Kürzel verwenden (z.B. M -> cR). Ein konzeptioneller Sprung – die erste Abstraktionsschicht zwischen Mensch und Maschine.
|
||||
|
||||
VOR ASSEMBLER:
|
||||
ENIAC (1943–46) wurde durch physisches Umstecken von Kabeln programmiert – Programmwechsel dauerten Tage. Danach kamen Stored-Program-Computer, aber Programme mussten als rohe Binärzahlen eingegeben werden. Jeder Tippfehler in einer 0/1-Folge konnte den Befehl komplett verfälschen.
|
||||
|
||||
WEITERE LEISTUNGEN:
|
||||
- Mitentwicklung von Booth's Multiplication Algorithm (heute in Milliarden CPUs)
|
||||
- Pionierin der neuronalen Netze (1958/59 – nur ~4 Jahre nach den allerersten)
|
||||
- Erste öffentliche Demonstration maschineller Übersetzung (Französisch→Englisch, 1955)
|
||||
- Wurde 100 Jahre alt
|
||||
|
||||
ROLLERCOASTER TYCOON:
|
||||
Chris Sawyer, schottischer Entwickler, schrieb RCT zu 99% in x86-Assembly (MASM), nur 1% C für Windows-Schnittstellen. Warum? Assembler war seine "Muttersprache" seit Kindheit, und Performance war kritisch: Tausende Besucher mit eigenem Verhalten, Fahrgeschäfte, Pathfinding – alles in Echtzeit. Das Spiel lief auf einem Pentium 90 MHz mit 16 MB RAM. Sawyer verdiente ca. 30 Mio. Dollar an Royalties und hat über 700 Achterbahnen weltweit selbst gefahren.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Fortran (1957)
|
||||
|
||||
**Die erste höhere Programmiersprache**
|
||||
|
||||
- Entwickelt bei IBM unter **John Backus**
|
||||
- Im Team: **Lois Haibt** – verantwortlich für die Control-Flow-Analyse
|
||||
- Name: **For**mula **Tran**slator
|
||||
- Ziel: Mathematische Formeln direkt als Code schreiben
|
||||
- Revolutionär: ~**20 Assembler-Befehle → 1 Fortran-Zeile**
|
||||
- Noch heute genutzt in Wissenschaft und Hochleistungsrechnen
|
||||
|
||||
<!--
|
||||
JOHN BACKUS (1924–2007):
|
||||
Unruhiger Werdegang – Chemiestudium abgebrochen, aus der Uni geflogen, Armee, Medizinstudium abgebrochen (Hirntumor, erfolgreich behandelt), dann Mathematik an der Columbia University. Bei IBM ab 1950. Seine Motivation war schlicht Faulheit: "Much of my work has come from being lazy. I didn't like writing programs." Er entwickelte erst Speedcoding (1953), dann leitete er das Fortran-Projekt. Später: Backus-Naur-Form (BNF), Turing Award 1977.
|
||||
|
||||
LOIS HAIBT (*1934):
|
||||
Studierte Mathematik am Vassar College (Stipendium), jobbte in den Semesterferien bei Bell Labs. IBM bot ihr nach dem Abschluss 1955 $5.100/Jahr – fast doppelt so viel wie Bell Labs. Sie kam ohne jegliche Programmiererfahrung ins Team und war mit 21 Jahren die einzige Frau unter den 10 Kernentwicklern. Ihre Aufgabe (Section 4 des Compilers): Sie teilte Programme in "Basic Blocks" auf, erstellte einen Control-Flow-Graphen und simulierte per Monte-Carlo-Methode, welche Programmteile häufig durchlaufen werden ("Hot Paths"). Diese Info nutzte der Compiler für die Register-Optimierung. Ein für 1956 extrem fortschrittlicher Ansatz. Außerdem entwickelte sie den ersten syntaktischen Analysator für arithmetische Ausdrücke – ein Grundbaustein aller modernen Compiler. Ihre Tochter Carolyn studierte später in Princeton und promovierte am MIT in Mathematik.
|
||||
|
||||
Haibt über die Teamkultur: "No one was worried about seeming stupid or possessive of his or her code. We were all just learning together."
|
||||
|
||||
DAS TEAM:
|
||||
~10 Kernmitglieder, alle in ihren 20ern und 30ern, mit "varying academic degrees and unrelated areas of expertise". Harlan Herrick schrieb das erste jemals ausgeführte Fortran-Programm. Roy Nutt war von United Aircraft ausgeliehen. David Sayre war Kristallograph.
|
||||
|
||||
ENTWICKLUNG:
|
||||
Sollte 6 Monate dauern, brauchte 3 Jahre (1954–1957). Das Team arbeitete nachts, weil sie nur dann Zugang zum IBM 704 hatten, und schlief tagsüber im Langdon Hotel an der 56th Street. Schneballschlachten lockerten die langen Winternächte auf.
|
||||
|
||||
WARUM ES FUNKTIONIERTE:
|
||||
Das Killerkriterium war Performance: Frühere Compiler erzeugten Code, der 5–10× langsamer war als handgeschriebener Assembler. Fortran I war der erste Compiler, der annähernd gleich schnellen Code erzeugte. Dieser Rekord hielt 20 Jahre. Ken Thompson (Erfinder von Unix): "95% of the people who programmed in the early years would never have done it without Fortran."
|
||||
|
||||
HEUTE:
|
||||
Fortran ist die "Muttersprache des Scientific Computing". Wettervorhersage (GFS, WRF), Klimamodelle (CESM für IPCC-Berichte), Kernphysik-Simulationen, LAPACK/BLAS (die linearen Algebra-Bibliotheken unter NumPy/SciPy) – alles Fortran. In numerischen Benchmarks 30–60× schneller als Python.
|
||||
|
||||
PARALLELE ZU HEUTE:
|
||||
Assembly-Programmierer sahen Fortran als existenzielle Bedrohung ihrer Kunst – genau wie heute manche Programmierer KI fürchten. Das Ergebnis war dasselbe: Das Werkzeug erweiterte das Feld, statt es zu ersetzen.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
@@ -771,6 +668,27 @@ Die Frage: Wer entscheidet, was mit Technologie gemacht wird? Die Entwickler? Di
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: erklaerung -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# Von-Neumann-Architektur: Erklaerung
|
||||
|
||||
**Definition:** Das revolutionaere Prinzip, dass Programme und Daten im selben Speicher liegen und Programme somit wie Daten behandelt werden koennen.
|
||||
|
||||
**Kernpunkte:**
|
||||
- **Stored Program Concept:** Programme sind austauschbare Daten
|
||||
- **Universalrechner:** Gleiche Hardware fuer beliebige Aufgaben
|
||||
- **Software-Flexibilitaet:** Programme koennen geladen, geaendert und geloescht werden
|
||||
|
||||
**Vorher (ENIAC):** Programmierung durch Umstecken von Kabeln → Tage fuer jedes neue Programm
|
||||
|
||||
**Nachher:** Software als austauschbare Datei → Betriebssysteme, Apps, Updates moeglich
|
||||
|
||||
**Harvard-Architektur (Alternative):** Getrennter Speicher fuer Code und Daten → schneller, aber weniger flexibel (Arduino, DSPs)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# Vom Militär zum Netz
|
||||
@@ -842,6 +760,11 @@ ARPANET-Karte 1969
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
ARPANET-Karte 1969
|
||||
4 Knoten: UCLA, Stanford, UCSB, Utah
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Das WWW (1989)
|
||||
@@ -869,15 +792,7 @@ Kostenlos freigegeben → darum existiert es
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
Unterseekabel-Karte: Über 400 Kabel verbinden die Kontinente.
|
||||
@@ -934,7 +849,7 @@ Demonstration: Glühbirne AN/AUS = 1 Bit
|
||||
|
||||
# Das Bit
|
||||
|
||||
### Kleinste *logische* Informationseinheit
|
||||
**Kleinste Informationseinheit**
|
||||
|
||||
- **0 oder 1**
|
||||
- AN oder AUS
|
||||
@@ -953,10 +868,10 @@ Shannon: Begründer der Informationstheorie
|
||||
|
||||
# Das Byte
|
||||
|
||||
**8 Bit = 1 Byte**
|
||||
**8 Bits = 1 Byte**
|
||||
|
||||
```
|
||||
0 0 1 0 1 0 1 0
|
||||
0 1 0 0 1 0 0 1
|
||||
```
|
||||
|
||||
**Wie viele Kombinationen?**
|
||||
@@ -988,50 +903,23 @@ Farbbild: Rot + Grün + Blau
|
||||
|
||||
---
|
||||
|
||||
# Zahlensysteme
|
||||
|
||||
**Eine Ziffer — wie viele Werte?**
|
||||
|
||||
| System | Basis | Ziffern | Beispiel |
|
||||
|--------|-------|---------|----------|
|
||||
| **Dezimal** | 10 | 0-9 | `42` = 4×10 + 2 |
|
||||
| **Binär** | 2 | 0-1 | `101010` = 42 |
|
||||
| **Hexadezimal** | 16 | 0-F | `2A` = 2×16 + 10 |
|
||||
|
||||
→ Alle drei beschreiben dieselbe Zahl: **42**
|
||||
|
||||
<!--
|
||||
Dezimal = was wir im Alltag nutzen (10 Finger → 10 Ziffern)
|
||||
Binär = was Computer nutzen (Strom an/aus → 2 Zustände)
|
||||
Hexadezimal = Kompromiss: kompakter als Binär, aber passt perfekt auf Bytes (2 Hex-Ziffern = 1 Byte = 8 Bit)
|
||||
Die Basis bestimmt, wie viele Symbole pro Stelle zur Verfügung stehen:
|
||||
- Dezimal: 10 (0–9)
|
||||
- Binär: 2 (0, 1)
|
||||
- Hex: 16 (0–9 + A–F, wobei A=10, B=11, ..., F=15)
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Hexadezimal: Lesbarkeit
|
||||
|
||||
**Für den Menschen ungeeignet:**
|
||||
**Binär ist unleserlich:**
|
||||
`01001101 01010000 00110011`
|
||||
|
||||
**Hexadezimal (Base 16):**
|
||||
`4D 50 33` (= "MP3" in ASCII)
|
||||
|
||||
**Jede Hex-Ziffer = 4 Bits (ein "Nibble")**
|
||||
**Jede Hex-Ziffer = 4 Bits**
|
||||
0-9, A-F (A=10, B=11, ..., F=15)
|
||||
|
||||
`4 = 0100` `D = 1101`
|
||||
`5 = 0101` `0 = 0000`
|
||||
`3 = 0011` `3 = 0011`
|
||||
**Ihr kennt das:** `#FF0000` = Rot in CSS
|
||||
|
||||
<!--
|
||||
Hex = Shortcut für Menschen
|
||||
1 Byte = 2 Hex-Ziffern (00-FF)
|
||||
"Nibble" = 4 Bits = halbes Byte (Wortspiel: nibble = knabbern, byte = beißen)
|
||||
CSS (Cascading Style Sheets)-Farben nutzen Hex: #FF0000 = Rot
|
||||
CSS-Farben nutzen Hex
|
||||
-->
|
||||
|
||||
---
|
||||
@@ -1050,7 +938,7 @@ CSS (Cascading Style Sheets)-Farben nutzen Hex: #FF0000 = Rot
|
||||
|
||||
---
|
||||
|
||||
# Wo begegnet Ihnen Hex-Code?
|
||||
# Wo begegnet euch Hex?
|
||||
|
||||
| Kontext | Beispiel |
|
||||
|---------|----------|
|
||||
@@ -1060,17 +948,13 @@ CSS (Cascading Style Sheets)-Farben nutzen Hex: #FF0000 = Rot
|
||||
| Speicheradressen | `0xA04F20` |
|
||||
| Unicode | `U+00E4` (ä) |
|
||||
|
||||
→ Hex ist überall in der Technik
|
||||
|
||||
<!--
|
||||
Präfixe:
|
||||
- 0x = "das ist Hexadezimal" (C, JavaScript, Python)
|
||||
- U+ = Unicode-Codepoint (Standard für Zeichenkodierung)
|
||||
- # = CSS (Cascading Style Sheets)-Konvention für Farben
|
||||
|
||||
ABKÜRZUNGEN:
|
||||
- MAC = Media Access Control (eindeutige Hardware-Adresse einer Netzwerkkarte)
|
||||
- CSS = Cascading Style Sheets
|
||||
- Unicode = universeller Zeichensatz für alle Schriftsysteme
|
||||
- # = CSS-Konvention für Farben
|
||||
|
||||
Speicheradressen erklärt:
|
||||
- 64-Bit-System → Adresse hat 64 Bit = 16 Hex-Ziffern
|
||||
@@ -1086,9 +970,9 @@ Fehlercodes: Windows zeigt diese bei Bluescreens
|
||||
|
||||
---
|
||||
|
||||
# Bit vs. Byte: Die Verwirrung
|
||||
# Bits vs. Bytes: Die Verwirrung
|
||||
|
||||
**1 Byte = 8 Bit** → Bit ÷ 8 = Byte
|
||||
**1 Byte = 8 Bit** → Bits ÷ 8 = Bytes
|
||||
|
||||
| Einheit (Bit) | Einheit (Byte) |
|
||||
|---------------|----------------|
|
||||
@@ -1096,8 +980,9 @@ Fehlercodes: Windows zeigt diese bei Bluescreens
|
||||
| 1 Mbit = 1.000.000 Bit | 1 MB = 1.000.000 Byte = 8 Mbit |
|
||||
| 1 Gbit = 1 Mrd. Bit | 1 GB = 1 Mrd. Byte = 8 Gbit |
|
||||
|
||||
100 Mbit/s Bandbreite = **12,5 MB/s** Downloadrate
|
||||
**Praxis:** 100 Mbit/s Internet = **12,5 MB/s** Download
|
||||
|
||||
**Aber:** Computer rechnen binär (Basis 2)!
|
||||
|
||||
<!--
|
||||
Bits = kleines b, Bytes = großes B
|
||||
@@ -1254,12 +1139,12 @@ Der `<head>`-Bereich enthält Informationen *über* das Dokument, nicht den sich
|
||||
| `<meta viewport>` | Mobile Darstellung | `width=device-width, initial-scale=1` |
|
||||
| `<meta description>` | Suchergebnis-Snippet (max 160 Zeichen) | SEO-kritisch |
|
||||
|
||||
**Open Graph Protocol (Ehemals Facebook, 2010):**
|
||||
**Open Graph Protocol (Facebook, 2010):**
|
||||
```html
|
||||
<meta property="og:title" content="Artikel-Titel">
|
||||
<meta property="og:image" content="https://example.com/preview.jpg">
|
||||
```
|
||||
Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack ...
|
||||
Steuert die Vorschau beim Teilen auf Facebook, LinkedIn, WhatsApp, Slack.
|
||||
|
||||
**SEO-Relevanz:** Google nutzt `<title>` und `<meta description>` für Ranking und Snippet-Anzeige. Fehlende Metadaten = schlechtere Auffindbarkeit.
|
||||
|
||||
@@ -1267,8 +1152,6 @@ Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack
|
||||
|
||||
# HTML-Tags und Attribute
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<body>
|
||||
<p class="wichtig">Das ist ein Absatz.</p>
|
||||
@@ -1300,8 +1183,6 @@ Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack
|
||||
|
||||
# Vollständiges Grundgerüst
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
@@ -1337,7 +1218,7 @@ Semantische Tags wichtig für Accessibility
|
||||
h1 sollte nur einmal pro Seite vorkommen
|
||||
a = anchor (Anker)
|
||||
-->
|
||||
<!--
|
||||
|
||||
---
|
||||
|
||||
# Hands-On: Werkzeuge einrichten
|
||||
@@ -1353,7 +1234,6 @@ a = anchor (Anker)
|
||||
**Option 3: Online-Editoren**
|
||||
- [https://codepen.io/pen/](https://codepen.io/pen/)
|
||||
|
||||
-->
|
||||
---
|
||||
|
||||
# Natives HTML
|
||||
@@ -1379,8 +1259,6 @@ Accessibility ist eingebaut
|
||||
|
||||
# Beispiel: Details/Summary
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<details>
|
||||
<summary>Klick mich!</summary>
|
||||
@@ -1394,8 +1272,6 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details
|
||||
|
||||
# Beispiel: Details/Summary (geöffnet)
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<details open>
|
||||
<summary>Klick mich!</summary>
|
||||
@@ -1410,8 +1286,6 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details#erstel
|
||||
|
||||
# Beispiel: Button
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<button>Add to favorites</button>
|
||||
```
|
||||
@@ -1422,8 +1296,6 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button
|
||||
|
||||
# Beispiel: Input/Eingabefeld
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<input
|
||||
type="text"
|
||||
@@ -1437,8 +1309,6 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input
|
||||
|
||||
# Beispiel: Dialog
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<dialog open>
|
||||
<p>Greetings, one and all!</p>
|
||||
@@ -1482,7 +1352,7 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog
|
||||
| **Augensteuerung** | Eye-Tracking |
|
||||
| **Switch-Geräte** | Ein-/Aus-Schalter |
|
||||
|
||||
→ **Nicht alle Menschen nutzen Maus oder Touchscreens.**
|
||||
→ **Nicht alle nutzen Maus + Bildschirm!**
|
||||
|
||||
<!--
|
||||
ACCESSIBILITY (a11y): a + 11 Buchstaben + y
|
||||
@@ -1509,7 +1379,7 @@ PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
|
||||
|
||||
# Web-Zugänglichkeit – Vertiefung
|
||||
|
||||
**a11y** = Accessibility (a + 11 Buchstaben + y). Die WHO schätzt, dass 15% der Weltbevölkerung eine Behinderung haben – das sind über 1 Milliarde potenzielle NutzerInnen.
|
||||
**a11y** = Accessibility (a + 11 Buchstaben + y). Die WHO schätzt, dass 15% der Weltbevölkerung eine Behinderung haben – das sind über 1 Milliarde potenzielle Nutzer.
|
||||
|
||||
**Arten von Einschränkungen:**
|
||||
|
||||
@@ -1594,7 +1464,7 @@ Der **European Accessibility Act (EAA)** trat am 28. Juni 2025 in Kraft und betr
|
||||
|
||||
**Curb-Cut-Effekt:** Barrierefreiheit hilft allen. Bordsteinabsenkungen für Rollstühle nutzen auch Kinderwagen, Rollkoffer, Fahrräder. Untertitel helfen Gehörlosen, aber auch in lauten Umgebungen oder beim Sprachlernen.
|
||||
|
||||
**Sanktionen:** Bis zu 100.000 € Bußgeld bei Verstößen
|
||||
**Sanktionen:** Bis zu 100.000 € Bußgeld bei Verstößen.
|
||||
|
||||
---
|
||||
|
||||
@@ -1627,9 +1497,11 @@ Gesetzlich meist Level AA gefordert
|
||||
<img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024">
|
||||
```
|
||||
|
||||
* **Kontrast:** Mindestens 4,5:1 für Text
|
||||
* **Untertitel:** Videos brauchen Captions
|
||||
* **Responsive:** Inhalte bei 200% Zoom nutzbar
|
||||
**Kontrast:** Mindestens 4.5:1 für Text
|
||||
|
||||
**Untertitel:** Videos brauchen Captions
|
||||
|
||||
**Responsive:** Inhalte bei 200% Zoom nutzbar
|
||||
|
||||
<!--
|
||||
Leeres alt="" für dekorative Bilder
|
||||
@@ -1641,8 +1513,6 @@ Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)
|
||||
|
||||
# Operable: Bedienbar
|
||||
|
||||
|
||||
|
||||
**Tastaturzugänglich:**
|
||||
```css
|
||||
/* Fokus-Indikator NIE entfernen! */
|
||||
@@ -1671,8 +1541,6 @@ Skip-Links: "Zum Hauptinhalt springen"
|
||||
|
||||
# Understandable: Verständlich
|
||||
|
||||
|
||||
|
||||
**Sprache angeben:**
|
||||
```html
|
||||
<html lang="de">
|
||||
@@ -1698,8 +1566,6 @@ Fehlermeldungen: konkret, hilfreich, am Feld
|
||||
|
||||
# Robust: Technisch solide
|
||||
|
||||
|
||||
|
||||
**Semantisches HTML:**
|
||||
```html
|
||||
<!-- Schlecht -->
|
||||
@@ -1761,9 +1627,9 @@ Echte NutzerInnen einbeziehen = Gold-Standard
|
||||
|
||||
# Barrierefreiheit testen – Vertiefung
|
||||
|
||||
Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte NutzerInnen mit Behinderungen.
|
||||
Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte Nutzer mit Behinderungen.
|
||||
|
||||
**Tastatur-Test (5 Minuten):**
|
||||
**Tastatur-Test (5 Minuten, jeder kann's):**
|
||||
1. Maus weglegen, nur Tab + Enter + Pfeiltasten nutzen
|
||||
2. Fokus-Indikator immer sichtbar? (kein `outline: none;`!)
|
||||
3. Logische Reihenfolge? (nicht kreuz und quer)
|
||||
@@ -1792,6 +1658,8 @@ Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erf
|
||||
|
||||
# Fragen & Diskussion
|
||||
|
||||
**Nächster Termin:** 10.01.2026 – CSS & Netzwerke
|
||||
|
||||
**Kontakt:** lb-czechowski@hdm-stuttgart.de
|
||||
|
||||
---
|
||||
@@ -1801,7 +1669,7 @@ Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erf
|
||||
Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
|
||||
|
||||
Basiert auf Material von:
|
||||
- Michael Czechowski
|
||||
- Markus Thamm / Wolfgang Gruel (HdM Stuttgart)
|
||||
- Michael Czechowski
|
||||
|
||||
Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
|
||||
@@ -73,13 +73,13 @@ section.glossar {
|
||||
}
|
||||
section.erklaerung {
|
||||
font-size: 1.1rem;
|
||||
/**background: repeating-linear-gradient(
|
||||
background: repeating-linear-gradient(
|
||||
135deg,
|
||||
#fce4ec,
|
||||
#fce4ec 40px,
|
||||
#fff 40px,
|
||||
#fff 80px
|
||||
) !important;**/
|
||||
) !important;
|
||||
}
|
||||
@media print {
|
||||
section.erklaerung {
|
||||
@@ -347,18 +347,25 @@ SPEAKER NOTES:
|
||||
|
||||
# Das Problem: Komplexität
|
||||
|
||||
|
||||
Zwischen dir und einer Webseite liegen:
|
||||
|
||||
Zwischen Ihnen und einer Webseite liegen viele Stationen.
|
||||
```
|
||||
Dein Browser
|
||||
↓
|
||||
Deine Netzwerkkarte (WLAN oder Ethernet)
|
||||
↓
|
||||
Router im Flur / zu Hause
|
||||
↓
|
||||
Netzwerk der HdM / deines Providers
|
||||
↓
|
||||
Das Internet (dutzende Router)
|
||||
↓
|
||||
Netzwerk des Ziel-Servers
|
||||
↓
|
||||
Der Webserver
|
||||
```
|
||||
|
||||
Jede Komponente "spricht" anders:
|
||||
|
||||
- Browser → **HTTP**
|
||||
- Netzwerkkarte → **Bits / Signale**
|
||||
- Router → **IP-Pakete**
|
||||
- Provider → **Routing**
|
||||
|
||||
Wie zusammenbringen?
|
||||
Jede Komponente "spricht" anders.
|
||||
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
@@ -399,6 +406,10 @@ SPEAKER NOTES:
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# Das TCP/IP-Modell
|
||||
|
||||
| Schicht | Name | Aufgabe | Protokolle |
|
||||
@@ -450,10 +461,19 @@ Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum
|
||||
|
||||
# Schichten verpacken Daten
|
||||
|
||||
|
||||
```
|
||||
Anwendung: [ HTTP-Request: "GET /index.html" ]
|
||||
↓ verpackt in
|
||||
Transport: [ TCP-Header | HTTP-Request ]
|
||||
↓ verpackt in
|
||||
Internet: [ IP-Header | TCP-Header | HTTP-Request ]
|
||||
↓ verpackt in
|
||||
Netzzugang: [ Eth-Header | IP-Header | TCP | HTTP | Eth-Trailer ]
|
||||
↓
|
||||
Physik: 01001000 01010100 01010100...
|
||||
```
|
||||
|
||||
**Encapsulation:** Jede Schicht packt ein.
|
||||
|
||||
**Decapsulation:** Beim Empfang wird ausgepackt.
|
||||
|
||||
<!--
|
||||
@@ -469,6 +489,10 @@ SPEAKER NOTES:
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# Dateneinheiten pro Schicht
|
||||
|
||||
| Schicht | Name | Dateneinheit | Was kommt hinzu? |
|
||||
@@ -547,7 +571,24 @@ SPEAKER NOTES:
|
||||
|
||||
# Exkurs: OSI vs. TCP/IP
|
||||
|
||||
|
||||
```
|
||||
OSI (7 Schichten) TCP/IP (4 Schichten)
|
||||
┌─────────────────────┐ ┌─────────────────────┐
|
||||
│ 7. Anwendung │ │ │
|
||||
├─────────────────────┤ │ Anwendung │
|
||||
│ 6. Darstellung │ │ │
|
||||
├─────────────────────┤ │ │
|
||||
│ 5. Sitzung │ │ │
|
||||
├─────────────────────┤ ├─────────────────────┤
|
||||
│ 4. Transport │ │ Transport │
|
||||
├─────────────────────┤ ├─────────────────────┤
|
||||
│ 3. Vermittlung │ │ Internet │
|
||||
├─────────────────────┤ ├─────────────────────┤
|
||||
│ 2. Sicherung │ │ │
|
||||
├─────────────────────┤ │ Netzzugang │
|
||||
│ 1. Bitübertragung │ │ │
|
||||
└─────────────────────┘ └─────────────────────┘
|
||||
```
|
||||
|
||||
OSI = Theorie. TCP/IP = Realität.
|
||||
|
||||
@@ -627,7 +668,10 @@ SPEAKER NOTES:
|
||||
|
||||
# Port: Das richtige Programm
|
||||
|
||||
|
||||
```
|
||||
212.132.79.37:443
|
||||
└─── Port 443 = HTTPS
|
||||
```
|
||||
|
||||
- Identifiziert ein **Programm** auf einem Rechner
|
||||
- Ein Rechner, viele Dienste
|
||||
@@ -655,6 +699,10 @@ SPEAKER NOTES:
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# IP vs. MAC vs. Port
|
||||
|
||||
| | IP-Adresse | MAC-Adresse | Port |
|
||||
@@ -707,7 +755,7 @@ Drei Adressebenen lösen drei verschiedene Probleme:
|
||||
<!-- _class: lead -->
|
||||
|
||||
# Die Reise eines Klicks
|
||||
## Was passiert, wenn Sie `www.hdm-stuttgart.de` aufrufen?
|
||||
## Was passiert, wenn du `www.hdm-stuttgart.de` aufrufst?
|
||||
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
@@ -721,7 +769,7 @@ SPEAKER NOTES:
|
||||
|
||||
# Das Szenario
|
||||
|
||||
Sie sind im WLAN der HdM und rufen auf:
|
||||
Du bist im WLAN der HdM und rufst auf:
|
||||
|
||||
```
|
||||
https://www.hdm-stuttgart.de
|
||||
@@ -742,13 +790,23 @@ SPEAKER NOTES:
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _paginate: false -->
|
||||
|
||||
# Die Zeitlinie
|
||||
|
||||
|
||||
```
|
||||
[0 ms] DNS: "Welche IP hat www.hdm-stuttgart.de?"
|
||||
↓
|
||||
[~20 ms] DNS-Antwort: "212.132.79.37"
|
||||
↓
|
||||
[~25 ms] TCP-Handshake beginnt
|
||||
↓
|
||||
[~50 ms] TCP-Verbindung steht
|
||||
↓
|
||||
[~55 ms] HTTP-Request: "GET /index.html"
|
||||
↓
|
||||
[~150 ms] HTTP-Response: HTML kommt zurück
|
||||
↓
|
||||
[~200 ms] Browser rendert die Seite
|
||||
```
|
||||
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
@@ -783,7 +841,7 @@ SPEAKER NOTES:
|
||||
www.hdm-stuttgart.de → 212.132.79.37
|
||||
```
|
||||
|
||||
Ihr Laptop fragt sich durch:
|
||||
Dein Laptop fragt sich durch:
|
||||
|
||||
1. **Browser-Cache:** "War ich da kürzlich?" → Nein
|
||||
2. **OS-Cache:** "Kennt das Betriebssystem die IP?" → Nein
|
||||
@@ -802,15 +860,19 @@ SPEAKER NOTES:
|
||||
|
||||
# Die DNS-Hierarchie
|
||||
|
||||
|
||||
```
|
||||
. (Root)
|
||||
/|\
|
||||
/ | \
|
||||
.de .com .org ...
|
||||
/
|
||||
hdm-stuttgart
|
||||
|
|
||||
www
|
||||
```
|
||||
|
||||
**Dezentral:** Niemand kennt alles.
|
||||
|
||||
Jede Ebene kennt nur die nächste:
|
||||
|
||||
- Root → .de, .com, .org
|
||||
- .de → alle .de-Domains
|
||||
- hdm-stuttgart.de → www, mail, …
|
||||
Jede Ebene kennt nur die nächste.
|
||||
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
@@ -823,15 +885,25 @@ SPEAKER NOTES:
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _paginate: false -->
|
||||
# Der DNS-Lookup
|
||||
|
||||
|
||||
```
|
||||
Dein Laptop → Resolver: "Wo ist www.hdm-stuttgart.de?"
|
||||
|
||||
Resolver → Root (.): "Wer verwaltet .de?"
|
||||
← "Frag 194.0.0.53"
|
||||
|
||||
Resolver → .de-Server: "Wer verwaltet hdm-stuttgart.de?"
|
||||
← "Frag den Nameserver der HdM"
|
||||
|
||||
Resolver → HdM-NS: "Welche IP hat www?"
|
||||
← "212.132.79.37"
|
||||
|
||||
Resolver → Dein Laptop: "Die IP ist 212.132.79.37"
|
||||
```
|
||||
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
- Titel: Der DNS-Lookup
|
||||
- Kompletter Ablauf (wenn nichts gecached)
|
||||
- Resolver = typisch beim Provider, macht Arbeit
|
||||
- Root → .de-Server → HdM-NS → IP
|
||||
@@ -928,16 +1000,31 @@ SPEAKER NOTES:
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _paginate: false -->
|
||||
|
||||
|
||||
# Der 3-Way-Handshake
|
||||
|
||||
```
|
||||
Client (dein Laptop) Server
|
||||
| |
|
||||
|-------- SYN (Seq=1000) --------------->|
|
||||
| "Ich will reden" |
|
||||
| |
|
||||
|<--- SYN-ACK (Seq=5000, Ack=1001) ------|
|
||||
| "OK, ich auch. Ich starte bei 5000"|
|
||||
| |
|
||||
|-------- ACK (Ack=5001) --------------->|
|
||||
| "Verstanden, los geht's" |
|
||||
| |
|
||||
| [ Verbindung steht ] |
|
||||
```
|
||||
|
||||
**SYN** = Synchronize · **ACK** = Acknowledge
|
||||
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
- Titel: Der 3-Way-Handshake
|
||||
- SYN = Synchronize, ACK = Acknowledge
|
||||
- 3 Pakete → Verbindung steht
|
||||
- 1. Client SYN: "Will Verbindung, starte bei 1000"
|
||||
- 2. Server SYN-ACK: "OK, ich starte bei 5000, erwarte 1001"
|
||||
@@ -981,7 +1068,13 @@ Der Handshake synchronisiert **Sequenznummern** – essenziell für TCPs Zuverl
|
||||
|
||||
**Status:** Die TCP-Verbindung steht.
|
||||
|
||||
|
||||
```
|
||||
Client: 141.62.xxx.xxx:52431
|
||||
└─── Zufälliger Port für diese Verbindung
|
||||
|
||||
Server: 212.132.79.37:443
|
||||
└─── HTTPS-Port
|
||||
```
|
||||
|
||||
**Jetzt erst** kann HTTP gesprochen werden.
|
||||
|
||||
@@ -1008,7 +1101,7 @@ SPEAKER NOTES:
|
||||
|
||||
---
|
||||
|
||||
# Was Ihr Browser sendet
|
||||
# Was dein Browser sendet
|
||||
|
||||
```http
|
||||
GET / HTTP/1.1
|
||||
@@ -1027,7 +1120,7 @@ Connection: keep-alive
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
- HTTP-Request: lesbar, menschlich verständlich
|
||||
- GET = "hol mir was" (POST = "hier Daten für Sie")
|
||||
- GET = "hol mir was" (POST = "hier Daten für dich")
|
||||
- "/" = Wurzel = Startseite
|
||||
- HTTP/1.1 = Protokollversion
|
||||
- Header: Kontext (Host, Browser, Sprache)
|
||||
@@ -1053,7 +1146,17 @@ SPEAKER NOTES:
|
||||
|
||||
HTTP-Request wird zum **Segment**:
|
||||
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────┐
|
||||
│ TCP-Header │
|
||||
│ ┌─────────────┬─────────────┬─────────────────┐ │
|
||||
│ │ Source Port │ Dest Port │ Sequence Number │ │
|
||||
│ │ 52431 │ 443 │ 1001 │ │
|
||||
│ └─────────────┴─────────────┴─────────────────┘ │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ Payload: "GET / HTTP/1.1..." │
|
||||
└─────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Neu:** Ports + Sequenznummer
|
||||
|
||||
@@ -1074,7 +1177,17 @@ SPEAKER NOTES:
|
||||
|
||||
Segment wird zum **Paket**:
|
||||
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────┐
|
||||
│ IP-Header │
|
||||
│ ┌─────────────────┬─────────────────┐ │
|
||||
│ │ Source IP │ Destination IP │ │
|
||||
│ │ 141.62.xxx.xxx │ 212.132.79.37 │ │
|
||||
│ └─────────────────┴─────────────────┘ │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ TCP-Segment (unverändert) │
|
||||
└─────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Neu:** IP-Adressen
|
||||
|
||||
@@ -1094,7 +1207,19 @@ SPEAKER NOTES:
|
||||
|
||||
Paket wird zum **Frame**:
|
||||
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────┐
|
||||
│ Ethernet-Header │
|
||||
│ ┌─────────────────┬─────────────────┐ │
|
||||
│ │ Source MAC │ Destination MAC │ │
|
||||
│ │ aa:bb:cc:dd:ee │ 11:22:33:44:55 │ │
|
||||
│ └─────────────────┴─────────────────┘ │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ IP-Paket (unverändert) │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ FCS (Frame Check Sequence / Prüfsumme) │
|
||||
└─────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Wichtig:** Destination MAC = **Router**, nicht Server!
|
||||
|
||||
@@ -1111,11 +1236,17 @@ SPEAKER NOTES:
|
||||
|
||||
---
|
||||
|
||||
# Woher kennt Ihr Laptop die Router-MAC?
|
||||
# Woher kennt dein Laptop die Router-MAC?
|
||||
|
||||
**ARP** – Address Resolution Protocol
|
||||
|
||||
|
||||
```
|
||||
Laptop (Broadcast):
|
||||
"Wer hat die IP 192.168.1.1? Sag mir deine MAC!"
|
||||
|
||||
Router:
|
||||
"Das bin ich! Meine MAC ist 11:22:33:44:55:66"
|
||||
```
|
||||
|
||||
Das passiert automatisch. Die Info wird gecached.
|
||||
|
||||
@@ -1172,9 +1303,11 @@ SPEAKER NOTES:
|
||||
|
||||
---
|
||||
|
||||
# Der erste Hop: Ihr Router
|
||||
# Der erste Hop: Dein Router
|
||||
|
||||
**Laptop** → [Frame] → **Router**
|
||||
```
|
||||
Laptop → [Frame] → Router
|
||||
```
|
||||
|
||||
Der Router empfängt:
|
||||
|
||||
@@ -1197,7 +1330,19 @@ SPEAKER NOTES:
|
||||
|
||||
# Der Router verpackt NEU
|
||||
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────┐
|
||||
│ Ethernet-Header (NEU!) │
|
||||
│ ┌─────────────────┬─────────────────┐ │
|
||||
│ │ Source MAC │ Destination MAC │ │
|
||||
│ │ Router-MAC │ Nächster-Router │ │
|
||||
│ └─────────────────┴─────────────────┘ │
|
||||
├─────────────────────────────────────────────────┤
|
||||
│ IP-Paket (UNVERÄNDERT) │
|
||||
│ Source: 141.62.xxx.xxx │
|
||||
│ Dest: 212.132.79.37 │
|
||||
└─────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**IP bleibt gleich. MAC ändert sich.**
|
||||
|
||||
@@ -1216,15 +1361,19 @@ SPEAKER NOTES:
|
||||
|
||||
# Mehrere Hops
|
||||
|
||||
|
||||
```
|
||||
Dein Laptop
|
||||
↓ [Frame an Router 1]
|
||||
Router HdM-Netz
|
||||
↓ [Frame an Router 2]
|
||||
Router BelWü
|
||||
↓ [Frame an Router 3]
|
||||
...
|
||||
↓ [Frame an Server]
|
||||
Webserver der HdM
|
||||
```
|
||||
|
||||
Bei jedem Hop:
|
||||
|
||||
1. Auspacken bis Layer 3 (IP)
|
||||
2. Routing-Entscheidung
|
||||
3. Neu verpacken mit nächster MAC
|
||||
|
||||
IP bleibt gleich · MAC ändert sich jedes Mal.
|
||||
Bei jedem Hop: Auspacken bis Layer 3, Routing, neu verpacken.
|
||||
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
@@ -1252,11 +1401,19 @@ SPEAKER NOTES:
|
||||
|
||||
# Decapsulation am Server
|
||||
|
||||
|
||||
```
|
||||
Bits empfangen (Layer 1)
|
||||
↓
|
||||
Frame prüfen: MAC okay? FCS okay? → Auspacken (Layer 2)
|
||||
↓
|
||||
IP lesen: Ziel-IP = meine IP? Ja! → Auspacken (Layer 3)
|
||||
↓
|
||||
TCP lesen: Port 443, Seq-Nr passt → Auspacken (Layer 4)
|
||||
↓
|
||||
HTTP lesen: "GET / HTTP/1.1" (Layer 7)
|
||||
```
|
||||
|
||||
Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus.
|
||||
|
||||
Am Ende versteht der Webserver: "Jemand will die Startseite."
|
||||
Der Webserver versteht: "Jemand will die Startseite."
|
||||
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
@@ -1285,7 +1442,7 @@ Content-Length: 45231
|
||||
...
|
||||
```
|
||||
|
||||
~45 KB HTML müssen jetzt zu Ihnen.
|
||||
~45 KB HTML müssen jetzt zu dir.
|
||||
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
@@ -1301,7 +1458,17 @@ SPEAKER NOTES:
|
||||
|
||||
Der Server macht **dasselbe** – nur in die andere Richtung:
|
||||
|
||||
|
||||
```
|
||||
HTTP-Response: "HTTP/1.1 200 OK..."
|
||||
↓
|
||||
TCP: Dest-Port: 52431 (dein Browser!)
|
||||
↓
|
||||
IP: Dest-IP: 141.62.xxx.xxx (dein Laptop!)
|
||||
↓
|
||||
Ethernet: Dest-MAC: Router des Server-Netzes
|
||||
↓
|
||||
Bits
|
||||
```
|
||||
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
@@ -1316,13 +1483,17 @@ SPEAKER NOTES:
|
||||
|
||||
# Die Antwort reist zurück
|
||||
|
||||
|
||||
```
|
||||
Server
|
||||
↓
|
||||
Router → Router → Router → ...
|
||||
↓
|
||||
Router HdM
|
||||
↓
|
||||
Dein Laptop
|
||||
```
|
||||
|
||||
Gleiches Spiel wie der Hinweg:
|
||||
|
||||
- Hop für Hop durchs Internet
|
||||
- **IP bleibt gleich** (Start/Ziel)
|
||||
- **MAC ändert sich** bei jedem Router
|
||||
Gleiches Spiel: Hop für Hop, IP bleibt gleich, MAC ändert sich.
|
||||
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
@@ -1333,13 +1504,21 @@ SPEAKER NOTES:
|
||||
|
||||
---
|
||||
|
||||
# Decapsulation bei Ihnen
|
||||
# Decapsulation bei dir
|
||||
|
||||
|
||||
|
||||
Rückweg = Encapsulation umgekehrt.
|
||||
|
||||
Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus.
|
||||
```
|
||||
Bits empfangen
|
||||
↓
|
||||
Frame: MAC = meine MAC? → Auspacken
|
||||
↓
|
||||
IP: Ziel-IP = meine IP? → Auspacken
|
||||
↓
|
||||
TCP: Port 52431 = mein Browser → Auspacken
|
||||
↓
|
||||
HTTP: "HTTP/1.1 200 OK..."
|
||||
↓
|
||||
Browser rendert die Seite
|
||||
```
|
||||
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
@@ -1364,6 +1543,10 @@ SPEAKER NOTES:
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# TCP vs. UDP
|
||||
|
||||
| | TCP | UDP |
|
||||
@@ -1465,6 +1648,10 @@ SPEAKER NOTES:
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# HTTP-Methoden
|
||||
|
||||
| Methode | Bedeutung | Beispiel |
|
||||
@@ -1526,6 +1713,10 @@ POST /users → Neuen Benutzer erstellen
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# HTTP Status-Codes
|
||||
|
||||
```http
|
||||
@@ -1582,6 +1773,10 @@ Die erste Ziffer kategorisiert die Antwort:
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# Zusammenfassung Teil 1
|
||||
|
||||
**Der Ablauf:**
|
||||
@@ -1694,8 +1889,6 @@ HTML definiert die Struktur – was ist auf der Seite. CSS definiert das Aussehe
|
||||
|
||||
# Was ist CSS?
|
||||
|
||||
|
||||
|
||||
**C**ascading **S**tyle **S**heets
|
||||
|
||||
```css
|
||||
@@ -1791,8 +1984,6 @@ Semikolon nach jedem Paar. Doppelpunkt zwischen Property und Value.
|
||||
|
||||
# Selektoren: Element
|
||||
|
||||
|
||||
|
||||
```css
|
||||
/* Alle <p>-Elemente */
|
||||
p {
|
||||
@@ -1821,8 +2012,6 @@ Komma bedeutet "oder" – h1 oder h2 oder h3.
|
||||
|
||||
# Selektoren: Klasse
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<p class="wichtig">Dieser Text ist wichtig.</p>
|
||||
<p>Dieser nicht.</p>
|
||||
@@ -1851,8 +2040,6 @@ Eine Klasse kann auf beliebig viele Elemente angewendet werden. Ein Element kann
|
||||
|
||||
# Selektoren: ID
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<nav id="hauptnavigation">...</nav>
|
||||
```
|
||||
@@ -1882,8 +2069,6 @@ In der Praxis: Klassen sind meist besser. IDs haben hohe Spezifität und sind un
|
||||
|
||||
# Selektoren: Kombinationen
|
||||
|
||||
|
||||
|
||||
```css
|
||||
/* Nachfahre (beliebig tief verschachtelt) */
|
||||
article p { line-height: 1.6; }
|
||||
@@ -1914,9 +2099,11 @@ Element.Klasse: Das Element muss beides sein. "p.wichtig" heißt: nur p-Elemente
|
||||
|
||||
---
|
||||
|
||||
# Spezifität: Welche Regel gewinnt?
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
|
||||
# Spezifität: Welche Regel gewinnt?
|
||||
|
||||
| Selektor | Spezifität |
|
||||
|----------|------------|
|
||||
@@ -1976,18 +2163,22 @@ Spezifität bestimmt, welche CSS-Regel gewinnt, wenn mehrere auf dasselbe Elemen
|
||||
|
||||
# Box-Modell
|
||||
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ margin │
|
||||
│ ┌─────────────────────────────┐ │
|
||||
│ │ border │ │
|
||||
│ │ ┌─────────────────────┐ │ │
|
||||
│ │ │ padding │ │ │
|
||||
│ │ │ ┌─────────────┐ │ │ │
|
||||
│ │ │ │ content │ │ │ │
|
||||
│ │ │ └─────────────┘ │ │ │
|
||||
│ │ └─────────────────────┘ │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
Jedes HTML-Element ist eine rechteckige **Box**.
|
||||
|
||||
**Schichten innen → außen:**
|
||||
|
||||
- **content** – Inhalt (Text, Bild)
|
||||
- **padding** – Innenabstand
|
||||
- **border** – Rahmen
|
||||
- **margin** – Außenabstand
|
||||
|
||||
<small>Gesamt-Breite = `width + padding + border + margin`. Tipp: `box-sizing: border-box` rechnet padding + border mit ein.</small>
|
||||
Jedes Element ist eine Box.
|
||||
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
@@ -2009,8 +2200,6 @@ Margin: Außenabstand. Zwischen diesem Element und anderen.
|
||||
|
||||
# Box-Modell: CSS
|
||||
|
||||
|
||||
|
||||
```css
|
||||
.box {
|
||||
width: 200px;
|
||||
@@ -2043,8 +2232,6 @@ Best Practice: Setzt das global für alle Elemente.
|
||||
|
||||
# Farben
|
||||
|
||||
|
||||
|
||||
```css
|
||||
/* Keyword */
|
||||
color: red;
|
||||
@@ -2113,8 +2300,6 @@ vw und vh sind Prozent des Viewports. 100vw ist die volle Bildschirmbreite.
|
||||
|
||||
# Pseudo-Klassen
|
||||
|
||||
|
||||
|
||||
```css
|
||||
/* Hover – Maus drüber */
|
||||
a:hover { color: red; }
|
||||
@@ -2150,8 +2335,6 @@ Wichtig für interaktive Elemente und Zebra-Streifen in Tabellen.
|
||||
|
||||
# Pseudo-Elemente
|
||||
|
||||
|
||||
|
||||
```css
|
||||
/* Vor dem Inhalt einfügen */
|
||||
.required::before {
|
||||
@@ -2182,17 +2365,19 @@ Doppelpunkt zur Unterscheidung von Pseudo-Klassen – aber einfacher Doppelpunkt
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# Responsive Design
|
||||
|
||||
|
||||
|
||||
```css
|
||||
/* Mobile First: Basis-Styles */
|
||||
.container {
|
||||
padding: 1rem;
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* Ab 768px (Tablet): Anpassungen */
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
@@ -2200,6 +2385,7 @@ Doppelpunkt zur Unterscheidung von Pseudo-Klassen – aber einfacher Doppelpunkt
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ab 1024px (Desktop): Weitere Anpassungen */
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
|
||||
@@ -208,8 +208,6 @@ Fehler werden hier auch angezeigt
|
||||
|
||||
# Variablen: Daten speichern
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
// Modern (empfohlen)
|
||||
let age = 25; // Kann geändert werden
|
||||
@@ -262,8 +260,6 @@ Template Literals mit Backticks!
|
||||
|
||||
# Arrays: Listen
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
const colors = ["red", "green", "blue"];
|
||||
|
||||
@@ -288,8 +284,6 @@ Arrays sind veränderbar auch bei const
|
||||
|
||||
# Objects: Strukturierte Daten
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
const person = {
|
||||
firstName: "Max",
|
||||
@@ -348,7 +342,7 @@ true || false // true (ODER)
|
||||
|
||||
**In der Browser-Konsole:**
|
||||
|
||||
1. Erstellen Sie Variablen für sich:
|
||||
1. Erstelle Variablen für dich:
|
||||
```javascript
|
||||
const name = "Your Name";
|
||||
let age = 20;
|
||||
@@ -419,8 +413,6 @@ Code-Block in geschweiften Klammern
|
||||
|
||||
# Schleifen: Wiederholen
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
// for-Schleife
|
||||
for (let i = 0; i < 5; i++) {
|
||||
@@ -499,7 +491,15 @@ Funktionale Programmierung, Original-Array bleibt unverändert
|
||||
- JavaScript kann diesen Baum **lesen und ändern**
|
||||
- Jedes HTML-Element = ein "Node"
|
||||
|
||||
|
||||
```
|
||||
document
|
||||
└── html
|
||||
├── head
|
||||
│ └── title
|
||||
└── body
|
||||
├── h1
|
||||
└── p
|
||||
```
|
||||
|
||||
<!--
|
||||
DOM = Programmierschnittstelle für HTML
|
||||
@@ -536,8 +536,6 @@ querySelectorAll = alle Treffer
|
||||
|
||||
# Elemente manipulieren
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
const element = document.querySelector("#meinElement");
|
||||
|
||||
@@ -566,8 +564,6 @@ style = Inline-Styles (camelCase!)
|
||||
|
||||
# Klassen manipulieren
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
const element = document.querySelector(".box");
|
||||
|
||||
@@ -596,8 +592,6 @@ toggle schaltet hin und her
|
||||
|
||||
# Elemente erstellen
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
// Neues Element erstellen
|
||||
const neuerAbsatz = document.createElement("p");
|
||||
@@ -666,8 +660,6 @@ Interaktive Webseiten durch Events
|
||||
|
||||
# Event Listener
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
const button = document.querySelector("#meinButton");
|
||||
|
||||
@@ -745,8 +737,6 @@ target = auslösendes Element
|
||||
|
||||
# Event.preventDefault()
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
// Link ohne Navigation
|
||||
const link = document.querySelector("a");
|
||||
@@ -773,8 +763,6 @@ Formular-Validierung ohne Reload
|
||||
|
||||
# Beispiel: Toggle Dark Mode
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
const toggleButton = document.querySelector("#darkModeToggle");
|
||||
const body = document.body;
|
||||
@@ -863,8 +851,6 @@ HTML (Struktur) + CSS (Design) + JavaScript (Interaktivität)
|
||||
|
||||
# Beispiel: Todo-Liste
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
const form = document.querySelector("#todoForm");
|
||||
const input = document.querySelector("#todoInput");
|
||||
@@ -907,8 +893,6 @@ Node.js für Backend
|
||||
|
||||
# Fetch: Daten laden
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
// Mit async/await (modern)
|
||||
async function loadData() {
|
||||
@@ -930,8 +914,6 @@ APIs = Schnittstellen zu Daten, JSON = JavaScript Object Notation
|
||||
|
||||
# LocalStorage: Daten speichern
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
// Speichern
|
||||
localStorage.setItem("name", "Max");
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 315 KiB |
@@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: __TITLE__</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #0f0f23;
|
||||
--chrome: #1a1a2e;
|
||||
--muted: #4a4a6a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser">
|
||||
<div class="window">
|
||||
<div class="chrome">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="url">__URL__</span>
|
||||
</div>
|
||||
<iframe src="__SRC__"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: a11y-error</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #0f0f23;
|
||||
--chrome: #1a1a2e;
|
||||
--muted: #4a4a6a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser">
|
||||
<div class="window">
|
||||
<div class="chrome">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="url">file:///beispiel/email-form.html</span>
|
||||
</div>
|
||||
<iframe src="./a11y-error.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,31 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fehlermeldung</title>
|
||||
<style>
|
||||
body { font-family: system-ui, sans-serif; padding: 1.2rem; }
|
||||
label { display: block; margin-bottom: 4px; font-weight: 600; }
|
||||
input {
|
||||
font: inherit;
|
||||
padding: 6px 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #d63384;
|
||||
border-radius: 4px;
|
||||
}
|
||||
#email-error {
|
||||
color: #d63384;
|
||||
font-size: 0.9em;
|
||||
margin-top: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<label for="email">E-Mail-Adresse</label>
|
||||
<input id="email" type="email" aria-describedby="email-error" value="michael@">
|
||||
<p id="email-error" role="alert">
|
||||
Bitte geben Sie eine gültige E-Mail-Adresse ein.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
@@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: a11y-focus</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #0f0f23;
|
||||
--chrome: #1a1a2e;
|
||||
--muted: #4a4a6a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser">
|
||||
<div class="window">
|
||||
<div class="chrome">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="url">file:///beispiel/focus.html</span>
|
||||
</div>
|
||||
<iframe src="./a11y-focus.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,24 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Fokus-Indikator</title>
|
||||
<style>
|
||||
body { font-family: system-ui, sans-serif; padding: 1.2rem; }
|
||||
:focus, .is-focused {
|
||||
outline: 2px solid blue;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
button:focus-visible, button.is-focused {
|
||||
box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
|
||||
}
|
||||
button { font: inherit; padding: 6px 14px; margin: 6px 0; display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Tab-Taste drücken:</p>
|
||||
<button class="is-focused">Erster Button</button>
|
||||
<button>Zweiter Button</button>
|
||||
<button>Dritter Button</button>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
@@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: a11y-semantic</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #0f0f23;
|
||||
--chrome: #1a1a2e;
|
||||
--muted: #4a4a6a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser">
|
||||
<div class="window">
|
||||
<div class="chrome">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="url">file:///beispiel/klick.html</span>
|
||||
</div>
|
||||
<iframe src="./a11y-semantic.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,31 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>div vs button</title>
|
||||
<style>
|
||||
body { font-family: system-ui, sans-serif; padding: 1.2rem; }
|
||||
h3 { margin: 0.8rem 0 0.4rem; font-size: 1rem; }
|
||||
.bad { color: #b91c1c; }
|
||||
.good { color: #15803d; }
|
||||
.button {
|
||||
display: inline-block;
|
||||
background: #e5e7eb;
|
||||
border: 1px solid #9ca3af;
|
||||
padding: 6px 14px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
button { font: inherit; padding: 6px 14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3 class="bad">Schlecht (div)</h3>
|
||||
<div class="button" onclick="alert('!')">Klick mich</div>
|
||||
<p><small>❌ Tab überspringt, kein Enter, kein Screenreader</small></p>
|
||||
|
||||
<h3 class="good">Gut (button)</h3>
|
||||
<button type="button">Klick mich</button>
|
||||
<p><small>✅ Tastatur + Screenreader eingebaut</small></p>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
@@ -1,65 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ARP</title>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
|
||||
body { padding: 30px; display: inline-block; }
|
||||
.row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
|
||||
.actor {
|
||||
background: #1a1a2e;
|
||||
color: #fff;
|
||||
padding: 10px 16px;
|
||||
border-radius: 6px;
|
||||
font-weight: 700;
|
||||
min-width: 160px;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.laptop { background: #1e40af; }
|
||||
.router { background: #c2410c; }
|
||||
.arrow-right, .arrow-left {
|
||||
width: 0; height: 0;
|
||||
border-top: 10px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
}
|
||||
.arrow-right { border-left: 14px solid #d63384; }
|
||||
.arrow-left { border-right: 14px solid #15803d; }
|
||||
.bubble {
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
max-width: 460px;
|
||||
}
|
||||
.ask { background: #fce7f3; border: 2px solid #d63384; color: #7c2d12; }
|
||||
.reply { background: #dcfce7; border: 2px solid #15803d; color: #14532d; }
|
||||
.meta {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
opacity: 0.7;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="row">
|
||||
<div class="actor laptop">Laptop</div>
|
||||
<div class="arrow-right"></div>
|
||||
<div class="bubble ask">
|
||||
<div class="meta">Broadcast</div>
|
||||
"Wer hat die IP 192.168.1.1? Sag mir deine MAC!"
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="bubble reply">
|
||||
<div class="meta">Antwort</div>
|
||||
"Das bin ich! Meine MAC ist 11:22:33:44:55:66"
|
||||
</div>
|
||||
<div class="arrow-left"></div>
|
||||
<div class="actor router">Router</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
@@ -1,53 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Box-Modell Diagramm</title>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
|
||||
body { padding: 40px; display: inline-block; box-sizing: border-box; }
|
||||
.layer {
|
||||
padding-top: 38px;
|
||||
padding-bottom: 30px;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.layer::before {
|
||||
position: absolute;
|
||||
top: 8px; left: 14px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.margin { background: #fde68a; }
|
||||
.margin::before { content: "margin"; color: #92400e; }
|
||||
.border { background: #fca5a5; }
|
||||
.border::before { content: "border"; color: #991b1b; }
|
||||
.padding { background: #86efac; }
|
||||
.padding::before { content: "padding"; color: #166534; }
|
||||
.content {
|
||||
background: #93c5fd;
|
||||
width: 260px;
|
||||
height: 110px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #1e3a8a;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layer margin">
|
||||
<div class="layer border">
|
||||
<div class="layer padding">
|
||||
<div class="content">content</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: button</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #0f0f23;
|
||||
--chrome: #1a1a2e;
|
||||
--muted: #4a4a6a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser">
|
||||
<div class="window">
|
||||
<div class="chrome">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="url">file:///beispiel/button.html</span>
|
||||
</div>
|
||||
<iframe src="./button.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,10 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Button</title>
|
||||
</head>
|
||||
<body>
|
||||
<button>Add to favorites</button>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
@@ -1,58 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Client/Server Ports</title>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
|
||||
body { padding: 30px; display: inline-block; }
|
||||
.endpoint {
|
||||
border: 2px solid #4a4a6a;
|
||||
border-radius: 6px;
|
||||
padding: 18px 24px;
|
||||
margin-bottom: 24px;
|
||||
min-width: 380px;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
.endpoint.client { background: #dbeafe; border-color: #1e40af; }
|
||||
.endpoint.server { background: #fed7aa; border-color: #c2410c; }
|
||||
.role {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.client .role { color: #1e3a8a; }
|
||||
.server .role { color: #7c2d12; }
|
||||
.addr {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 1.4rem;
|
||||
color: #0f172a;
|
||||
}
|
||||
.port {
|
||||
background: #fde68a;
|
||||
color: #7c2d12;
|
||||
padding: 1px 8px;
|
||||
border-radius: 4px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.label {
|
||||
margin-top: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: #4a4a6a;
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="endpoint client">
|
||||
<div class="role">Client</div>
|
||||
<div class="addr">141.62.xxx.xxx:<span class="port">52431</span></div>
|
||||
<div class="label">↳ zufälliger Port vom OS</div>
|
||||
</div>
|
||||
<div class="endpoint server">
|
||||
<div class="role">Server</div>
|
||||
<div class="addr">212.132.79.37:<span class="port">443</span></div>
|
||||
<div class="label">↳ HTTPS-Standardport</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
@@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: css-anatomie</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #0f0f23;
|
||||
--chrome: #1a1a2e;
|
||||
--muted: #4a4a6a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser">
|
||||
<div class="window">
|
||||
<div class="chrome">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="url">file:///beispiel/anatomie.html</span>
|
||||
</div>
|
||||
<iframe src="./css-anatomie.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,15 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Anatomie</title>
|
||||
<style>
|
||||
body { padding: 1.2rem; font-family: system-ui, sans-serif; }
|
||||
p { color: blue; font-size: 16px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Dieser Absatz ist blau und 16 Pixel groß.</p>
|
||||
<p>Alle p-Elemente werden gleich gestylt.</p>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
@@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: css-box-model</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #0f0f23;
|
||||
--chrome: #1a1a2e;
|
||||
--muted: #4a4a6a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser">
|
||||
<div class="window">
|
||||
<div class="chrome">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="url">file:///beispiel/box-model.html</span>
|
||||
</div>
|
||||
<iframe src="./css-box-model.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,58 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Box-Modell</title>
|
||||
<style>
|
||||
body { padding: 1.2rem; font-family: system-ui, sans-serif; background: #fff; }
|
||||
.box { display: inline-block; }
|
||||
.layer {
|
||||
padding-top: 22px;
|
||||
padding-bottom: 18px;
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
position: relative;
|
||||
}
|
||||
.layer::before {
|
||||
position: absolute;
|
||||
top: 4px; left: 8px;
|
||||
font-size: 0.75em;
|
||||
font-weight: 600;
|
||||
}
|
||||
.margin { background: #fde68a; }
|
||||
.margin::before { content: "margin"; color: #92400e; }
|
||||
.border { background: #fca5a5; }
|
||||
.border::before { content: "border"; color: #991b1b; }
|
||||
.padding { background: #86efac; }
|
||||
.padding::before { content: "padding"; color: #166534; }
|
||||
.content {
|
||||
background: #93c5fd;
|
||||
width: 140px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #1e3a8a;
|
||||
font-weight: 600;
|
||||
}
|
||||
pre { background: #f3f4f6; padding: 10px; border-radius: 4px; font-size: 0.85em; margin-top: 1rem; font-family: ui-monospace, monospace; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="layer margin">
|
||||
<div class="layer border">
|
||||
<div class="layer padding">
|
||||
<div class="content">content</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre>.box {
|
||||
width: 140px;
|
||||
padding: 18px;
|
||||
border: 18px solid;
|
||||
margin: 18px;
|
||||
}</pre>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
@@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: css-colors</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #0f0f23;
|
||||
--chrome: #1a1a2e;
|
||||
--muted: #4a4a6a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser">
|
||||
<div class="window">
|
||||
<div class="chrome">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="url">file:///beispiel/colors.html</span>
|
||||
</div>
|
||||
<iframe src="./css-colors.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,21 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Farben</title>
|
||||
<style>
|
||||
body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
|
||||
.swatch { display: flex; align-items: center; margin-bottom: 8px; }
|
||||
.chip { width: 40px; height: 40px; border-radius: 4px; margin-right: 12px; border: 1px solid #e5e7eb; }
|
||||
code { background: #f3f4f6; padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-size: 0.85em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="swatch"><div class="chip" style="background: red;"></div><code>color: red;</code></div>
|
||||
<div class="swatch"><div class="chip" style="background: rebeccapurple;"></div><code>color: rebeccapurple;</code></div>
|
||||
<div class="swatch"><div class="chip" style="background: #FF0000;"></div><code>#FF0000</code></div>
|
||||
<div class="swatch"><div class="chip" style="background: rgb(255, 0, 0);"></div><code>rgb(255, 0, 0)</code></div>
|
||||
<div class="swatch"><div class="chip" style="background: rgba(255, 0, 0, 0.5);"></div><code>rgba(255, 0, 0, 0.5)</code></div>
|
||||
<div class="swatch"><div class="chip" style="background: hsl(0, 100%, 50%);"></div><code>hsl(0, 100%, 50%)</code></div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
@@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: css-combinators</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #0f0f23;
|
||||
--chrome: #1a1a2e;
|
||||
--muted: #4a4a6a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser">
|
||||
<div class="window">
|
||||
<div class="chrome">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="url">file:///beispiel/combinators.html</span>
|
||||
</div>
|
||||
<iframe src="./css-combinators.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,25 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Kombinatoren</title>
|
||||
<style>
|
||||
body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
|
||||
article p { line-height: 1.6; background: #fef3c7; padding: 4px; }
|
||||
nav > a { text-decoration: none; color: #d63384; margin-right: 10px; font-weight: 600; }
|
||||
h2 + p { font-size: 1.2em; color: #065f46; }
|
||||
p.wichtig { color: red; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="#">Link</a><a href="#">Link</a>
|
||||
</nav>
|
||||
<article>
|
||||
<h2>Artikel-Überschrift</h2>
|
||||
<p>Direkt nach h2 (größer, grün).</p>
|
||||
<p>Normaler Absatz im article (gelb).</p>
|
||||
<p class="wichtig">Wichtig (rot).</p>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
@@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: css-pseudo-classes</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #0f0f23;
|
||||
--chrome: #1a1a2e;
|
||||
--muted: #4a4a6a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser">
|
||||
<div class="window">
|
||||
<div class="chrome">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="url">file:///beispiel/pseudo-classes.html</span>
|
||||
</div>
|
||||
<iframe src="./css-pseudo-classes.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,37 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Pseudo-Klassen</title>
|
||||
<style>
|
||||
body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
|
||||
a { color: #2563eb; }
|
||||
a:hover, a.is-hovered { color: red; text-decoration: underline; }
|
||||
a:visited, a.is-visited { color: purple; }
|
||||
input:focus, input.is-focused { border-color: blue; outline: 2px solid blue; }
|
||||
input { padding: 4px 8px; border: 1px solid #9ca3af; border-radius: 3px; }
|
||||
ul { list-style: none; padding: 0; }
|
||||
li { padding: 6px 10px; }
|
||||
li:first-child, li.is-first { font-weight: bold; }
|
||||
li:nth-child(odd), li.is-odd { background: #eee; }
|
||||
h3 { margin: 0.6rem 0 0.3rem; font-size: 0.95rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3>:hover / :visited</h3>
|
||||
<a href="#" class="is-hovered">Link mit Hover</a> ·
|
||||
<a href="#" class="is-visited">Besuchter Link</a>
|
||||
|
||||
<h3>:focus</h3>
|
||||
<input class="is-focused" value="fokussiert">
|
||||
|
||||
<h3>:first-child, :nth-child(odd)</h3>
|
||||
<ul>
|
||||
<li class="is-first is-odd">Erster (bold, zebra)</li>
|
||||
<li>Zweiter</li>
|
||||
<li class="is-odd">Dritter (zebra)</li>
|
||||
<li>Vierter</li>
|
||||
<li class="is-odd">Fünfter (zebra)</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
@@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: css-pseudo-elements</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #0f0f23;
|
||||
--chrome: #1a1a2e;
|
||||
--muted: #4a4a6a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser">
|
||||
<div class="window">
|
||||
<div class="chrome">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="url">file:///beispiel/pseudo-elements.html</span>
|
||||
</div>
|
||||
<iframe src="./css-pseudo-elements.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,35 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Pseudo-Elemente</title>
|
||||
<style>
|
||||
body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
|
||||
.required::before {
|
||||
content: "* ";
|
||||
color: red;
|
||||
}
|
||||
p.drop { line-height: 1.5; }
|
||||
p.drop::first-letter {
|
||||
font-size: 3em;
|
||||
font-weight: bold;
|
||||
color: #d63384;
|
||||
float: left;
|
||||
line-height: 0.9;
|
||||
padding-right: 6px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
label { display: block; margin-top: 10px; }
|
||||
input { padding: 4px 8px; border: 1px solid #9ca3af; border-radius: 3px; margin-top: 3px; }
|
||||
h3 { margin: 0.6rem 0 0.3rem; font-size: 0.95rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3>::before (Pflichtfeld-Sternchen)</h3>
|
||||
<label class="required">E-Mail-Adresse</label>
|
||||
<input type="email">
|
||||
|
||||
<h3>::first-letter (Initial-Buchstabe)</h3>
|
||||
<p class="drop">Lorem ipsum dolor sit amet. Der erste Buchstabe wird per CSS hervorgehoben – kein extra HTML nötig.</p>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB |
@@ -1,30 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Responsive Container</title>
|
||||
<style>
|
||||
body { padding: 0; margin: 0; font-family: system-ui, sans-serif; background: #fff; }
|
||||
.container {
|
||||
padding: 1rem;
|
||||
background: white;
|
||||
color: #111;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
.container::before { content: "< 768px — weiß, padding 1rem"; }
|
||||
@media (min-width: 768px) {
|
||||
.container { padding: 2rem; background: red; color: white; border: none; }
|
||||
.container::before { content: "≥ 768px — rot, padding 2rem"; }
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.container { background: green; }
|
||||
.container::before { content: "≥ 1024px — grün"; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: css-responsive</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #0f0f23;
|
||||
--chrome: #1a1a2e;
|
||||
--muted: #4a4a6a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser">
|
||||
<div class="window">
|
||||
<div class="chrome">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="url">file:///beispiel/responsive.html</span>
|
||||
</div>
|
||||
<iframe src="./css-responsive.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,45 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Responsive Design – 3 Viewports</title>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; font-family: system-ui, sans-serif; background: #fff; }
|
||||
body { padding: 1rem; }
|
||||
.viewport {
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid #9ca3af;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bar {
|
||||
background: #e5e7eb;
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
color: #374151;
|
||||
font-family: ui-monospace, monospace;
|
||||
border-bottom: 1px solid #9ca3af;
|
||||
}
|
||||
iframe { display: block; width: 100%; border: 0; }
|
||||
.vp-mobile iframe { width: 360px; }
|
||||
.vp-tablet iframe { width: 800px; }
|
||||
.vp-desktop iframe { width: 1100px; }
|
||||
.vp-mobile { width: 362px; }
|
||||
.scroll { overflow: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="viewport vp-mobile">
|
||||
<div class="bar">Mobile @ 360px</div>
|
||||
<div class="scroll"><iframe src="./css-responsive-container.html" height="80"></iframe></div>
|
||||
</div>
|
||||
<div class="viewport vp-tablet">
|
||||
<div class="bar">Tablet @ 800px</div>
|
||||
<div class="scroll" style="overflow-x: auto;"><iframe src="./css-responsive-container.html" height="100"></iframe></div>
|
||||
</div>
|
||||
<div class="viewport vp-desktop">
|
||||
<div class="bar">Desktop @ 1100px</div>
|
||||
<div class="scroll" style="overflow-x: auto;"><iframe src="./css-responsive-container.html" height="100"></iframe></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB |
@@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: css-selector-class</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #0f0f23;
|
||||
--chrome: #1a1a2e;
|
||||
--muted: #4a4a6a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser">
|
||||
<div class="window">
|
||||
<div class="chrome">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="url">file:///beispiel/selector-class.html</span>
|
||||
</div>
|
||||
<iframe src="./css-selector-class.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,15 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Klassen-Selektor</title>
|
||||
<style>
|
||||
body { padding: 1.2rem; font-family: system-ui, sans-serif; }
|
||||
.wichtig { color: red; font-weight: bold; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="wichtig">Dieser Text ist wichtig.</p>
|
||||
<p>Dieser nicht.</p>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
@@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: css-selector-element</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #0f0f23;
|
||||
--chrome: #1a1a2e;
|
||||
--muted: #4a4a6a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser">
|
||||
<div class="window">
|
||||
<div class="chrome">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="url">file:///beispiel/selector-element.html</span>
|
||||
</div>
|
||||
<iframe src="./css-selector-element.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,18 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Element-Selektor</title>
|
||||
<style>
|
||||
body { padding: 1.2rem; }
|
||||
p { color: gray; font-family: Georgia, serif; }
|
||||
h1, h2, h3 { font-family: sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Überschrift (sans-serif)</h1>
|
||||
<p>Absatz: grau, Georgia (serif).</p>
|
||||
<h2>Untertitel (sans-serif)</h2>
|
||||
<p>Noch ein grauer Absatz.</p>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
@@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: css-selector-id</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #0f0f23;
|
||||
--chrome: #1a1a2e;
|
||||
--muted: #4a4a6a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser">
|
||||
<div class="window">
|
||||
<div class="chrome">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="url">file:///beispiel/selector-id.html</span>
|
||||
</div>
|
||||
<iframe src="./css-selector-id.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,24 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ID-Selektor</title>
|
||||
<style>
|
||||
body { padding: 0; margin: 0; font-family: system-ui, sans-serif; }
|
||||
#hauptnavigation {
|
||||
background: #333;
|
||||
padding: 1rem;
|
||||
color: white;
|
||||
}
|
||||
#hauptnavigation a { color: #fff; margin-right: 1rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav id="hauptnavigation">
|
||||
<a href="#">Home</a>
|
||||
<a href="#">Kurse</a>
|
||||
<a href="#">Kontakt</a>
|
||||
</nav>
|
||||
<p style="padding: 1rem;">Rest der Seite.</p>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
@@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: css-specificity</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #0f0f23;
|
||||
--chrome: #1a1a2e;
|
||||
--muted: #4a4a6a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser">
|
||||
<div class="window">
|
||||
<div class="chrome">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="url">file:///beispiel/specificity.html</span>
|
||||
</div>
|
||||
<iframe src="./css-specificity.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,30 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Spezifität</title>
|
||||
<style>
|
||||
body { padding: 1.2rem; font-family: system-ui, sans-serif; }
|
||||
p { color: blue; } /* 0,0,0,1 */
|
||||
.text { color: green; } /* 0,0,1,0 */
|
||||
#intro { color: red; } /* 0,1,0,0 */
|
||||
code { background: #f3f4f6; padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }
|
||||
.row { margin-bottom: 10px; }
|
||||
.label { color: #6b7280; font-size: 0.85em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="row">
|
||||
<p>Nur <code>p</code>: <strong>blau</strong></p>
|
||||
<span class="label">0,0,0,1</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p class="text">Nur <code>.text</code>: <strong>grün</strong> schlägt p</p>
|
||||
<span class="label">0,0,1,0 > 0,0,0,1</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p id="intro" class="text">ID <code>#intro</code>: <strong>rot</strong> schlägt alles</p>
|
||||
<span class="label">0,1,0,0 > 0,0,1,0</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
@@ -1,65 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Decapsulation Stack</title>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
|
||||
body { padding: 30px; display: inline-block; }
|
||||
.stack { display: flex; flex-direction: column; gap: 0; }
|
||||
.layer {
|
||||
border: 2px solid;
|
||||
border-radius: 6px;
|
||||
padding: 10px 18px;
|
||||
min-width: 540px;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.layer-name { font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }
|
||||
.layer-desc { font-family: ui-monospace, monospace; margin-top: 3px; }
|
||||
.check { margin-top: 3px; font-size: 0.85rem; font-style: italic; }
|
||||
.http { background: #e0e7ff; border-color: #4f46e5; color: #3730a3; }
|
||||
.tcp { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
|
||||
.ip { background: #dcfce7; border-color: #15803d; color: #14532d; }
|
||||
.eth { background: #fed7aa; border-color: #c2410c; color: #7c2d12; }
|
||||
.bit { background: #e5e7eb; border-color: #4b5563; color: #1f2937; }
|
||||
.arrow {
|
||||
align-self: center;
|
||||
width: 0; height: 0;
|
||||
border-left: 9px solid transparent;
|
||||
border-right: 9px solid transparent;
|
||||
border-top: 12px solid #d63384;
|
||||
margin: 2px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stack">
|
||||
<div class="layer bit">
|
||||
<div class="layer-name">Physical</div>
|
||||
<div class="layer-desc">Bits empfangen</div>
|
||||
</div>
|
||||
<div class="arrow"></div>
|
||||
<div class="layer eth">
|
||||
<div class="layer-name">Ethernet-Frame</div>
|
||||
<div class="check">MAC = meine MAC? ✓ auspacken</div>
|
||||
</div>
|
||||
<div class="arrow"></div>
|
||||
<div class="layer ip">
|
||||
<div class="layer-name">IP-Paket</div>
|
||||
<div class="check">Ziel-IP = meine IP? ✓ auspacken</div>
|
||||
</div>
|
||||
<div class="arrow"></div>
|
||||
<div class="layer tcp">
|
||||
<div class="layer-name">TCP-Segment</div>
|
||||
<div class="check">Port 52431 = mein Browser? ✓ auspacken</div>
|
||||
</div>
|
||||
<div class="arrow"></div>
|
||||
<div class="layer http">
|
||||
<div class="layer-name">HTTP-Response</div>
|
||||
<div class="layer-desc">"HTTP/1.1 200 OK ..."</div>
|
||||
<div class="check">→ Browser rendert Seite</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
@@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: details-closed</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #0f0f23;
|
||||
--chrome: #1a1a2e;
|
||||
--muted: #4a4a6a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser">
|
||||
<div class="window">
|
||||
<div class="chrome">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="url">file:///beispiel/details.html</span>
|
||||
</div>
|
||||
<iframe src="./details-closed.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Details/Summary</title>
|
||||
</head>
|
||||
<body>
|
||||
<details>
|
||||
<summary>Klick mich!</summary>
|
||||
<p>Dieser Text war versteckt.</p>
|
||||
</details>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
@@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: details-open</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #0f0f23;
|
||||
--chrome: #1a1a2e;
|
||||
--muted: #4a4a6a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser">
|
||||
<div class="window">
|
||||
<div class="chrome">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="url">file:///beispiel/details.html</span>
|
||||
</div>
|
||||
<iframe src="./details-open.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Details/Summary (offen)</title>
|
||||
</head>
|
||||
<body>
|
||||
<details open>
|
||||
<summary>Klick mich!</summary>
|
||||
<p>Dieser Text war versteckt.</p>
|
||||
</details>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
@@ -1,34 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: dialog</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #0f0f23;
|
||||
--chrome: #1a1a2e;
|
||||
--muted: #4a4a6a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser">
|
||||
<div class="window">
|
||||
<div class="chrome">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="url">file:///beispiel/dialog.html</span>
|
||||
</div>
|
||||
<iframe src="./dialog.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,15 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Dialog</title>
|
||||
</head>
|
||||
<body>
|
||||
<dialog open>
|
||||
<p>Greetings, one and all!</p>
|
||||
<form method="dialog">
|
||||
<button>OK</button>
|
||||
</form>
|
||||
</dialog>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Loaded 100 of 192 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user