SPEAKER NOTES: - Zwei Themen: Netzwerke + CSS - Netzwerke = Fundament. Warum lädt was langsam? Warum Fehler? - Viele neue Begriffe heute – ist normal - Glossar gleich = Landkarte, füllt sich mit Bedeutung

SPEAKER NOTES: - Struktur: Glossar → Schichtenmodell → Reise eines Klicks - Glossar = Landkarte - Schichtenmodell = "Betriebssystem" des Internets - Reise = praktische Anwendung - CSS nach Pause

SPEAKER NOTES: - Code Crispies = unser Material - Codepen = sofort CSS ausprobieren - MDN = DIE Referenz schlechthin - Spiele für Flexbox/Grid – später relevant

SPEAKER NOTES: - Fundament: Ohne Netzwerk kein Internet, kein Web, keine Apps - Jetzt: Begriffe-Bombardement – ist okay - Nächste Folie = Referenz zum Zurückblättern

SPEAKER NOTES: - 6 Grundbegriffe – tauchen überall auf - Client/Server = Grundstruktur des Webs - Browser = Client - Google/HdM/Netflix = Server - Request/Response = Kommunikationsmuster - Protokoll = Regelwerk - Analogie: Restaurant in Japan ohne Regeln zu kennen - Host = Rechner mit Adresse im Netz

SPEAKER NOTES: - Alles im Internet läuft über Adressen - IP = Postanschrift, global eindeutig - MAC = Hardware-Adresse, ab Werk eingebrannt, nur lokal - Port = welches Programm auf dem Rechner - 80 = Web, 443 = HTTPS - Sichtbar in URLs: example.com:8080 - DNS = Telefonbuch: Name → Nummer

SPEAKER NOTES: - Abstrakt, aber wichtig - Payload = der eigentliche Inhalt (Text, Bild, HTML) - Header = Metadaten (wer, wohin, wie groß) - Paket/Segment/Frame = gleiche Daten, verschiedene Verpackung - Wie Matroschka: Schicht packt Schicht ein - Wird klarer beim Schichtenmodell gleich

SPEAKER NOTES: - Performance-Begriffe - Latenz = Verzögerung - Gaming: niedrig wichtig - Download: egal - Bandbreite = Straßenbreite - Streaming: hoch wichtig - Hop = Sprung Router→Router (typisch 10-20) - Ping: Selbst testen! - Terminal: `ping google.de` - Zahl = Latenz in ms

SPEAKER NOTES: - Die wichtigsten Protokolle - HTTP/HTTPS = Webseiten (S = verschlüsselt) - TCP = zuverlässig (alles kommt an) - UDP = schnell (Pakete können verloren gehen) - IP = Routing durchs Internet - DNS = Namensauflösung - Schicht-Spalte: HTTP baut auf TCP, TCP auf IP - Das SIND die Schichten

SPEAKER NOTES: - Wichtigster Teil heute - Wenn das sitzt → alles andere ordnet sich ein - Einstiegsfrage: Warum so kompliziert?

SPEAKER NOTES: - Browser→Server: min. 7-8 Stationen - Jede Station: andere Aufgabe - Browser versteht HTTP - Netzwerkkarte versteht nur Bits (Strom an/aus) - Router versteht IP - Wie zusammenbringen?

SPEAKER NOTES: - Grundprinzip: Arbeitsteilung - Jede Schicht = eine Aufgabe, kennt nur Nachbarn - Browser sagt "will Webseite" – weiß nichts von Ethernet - TCP weiß nichts von WLAN vs. Glasfaser - → Abstraktion: Komplexität verstecken - Geräte-Spalte: Wo "lebt" diese Schicht? - Router = Layer 3, liest IP - Switch = Layer 2, liest MAC - Access Point = Layer 1-2

SPEAKER NOTES: - TCP/IP = das echte Internet - 4 Schichten: - Anwendung: Was will ich? (HTTP, DNS, Mail) - Transport: Kommt an? Welches Programm? (TCP, UDP) - Internet: Wie zum Zielrechner? (IP) - Netzzugang: Wie zum nächsten Gerät? (Ethernet, WLAN) - KLAUSUR: Welches Protokoll → welche Schicht

SPEAKER NOTES: - Encapsulation = Verpackung - Anwendung hat Daten (z.B. HTTP-Request) - TCP: eigener Header dazu (Ports, Seq-Nr) → weiter - IP: eigener Header dazu (IPs) → weiter - Ethernet: Header + Trailer (MACs, Prüfsumme) - Am Ende: Bits → elektrische Signale / Funk - Empfang: Rückwärts auspacken

SPEAKER NOTES: - Glossar-Begriffe jetzt eingeordnet: - Anwendung: Daten/Message - Transport: Segment - Internet: Paket - Netzzugang: Frame - Merkhilfe: D-S-P-F (eigene erfinden!) - KLAUSUR: Begriff → Schicht

SPEAKER NOTES: - Der Witz: Unabhängigkeit - WLAN→Ethernet: Browser merkt nichts, HTTP gleich, TCP gleich - Neues Protokoll HTTP/3: Untere Schichten egal - = Lose Kopplung - Jede Schicht separat weiterentwickelbar

SPEAKER NOTES: - OSI = 7 Schichten, theoretisches Referenzmodell - TCP/IP = 4 Schichten, so gebaut das Internet - OSI eleganter aufgeteilt, aber nicht real - Für uns: TCP/IP reicht - OSI in anderen Kursen → jetzt wisst ihr Zusammenhang

SPEAKER NOTES: - Drei Adresstypen verstehen = häufige Fehlerquelle vermeiden - Warum drei? Reicht nicht eine?

SPEAKER NOTES: - IP = Adresse auf Brief - Global eindeutig (vereinfacht, IPv4/v6 ignoriert) - WICHTIG: Ändert sich NICHT auf dem Weg - Egal wie viele Router → Ziel-IP bleibt gleich

SPEAKER NOTES: - MAC = ganz anders als IP - Identifiziert Hardware (Netzwerkkarte) - NUR lokal relevant - Laptop kennt MAC des Routers - Kennt NICHT MAC des Webservers - ÄNDERT sich bei jedem Hop - Laptop→Router: andere MACs als Router→nächster Router

SPEAKER NOTES: - Dritte Ebene: Port - Ein Server, viele Programme (Web, Mail, SSH...) - Port = welches Programm kriegt's - Standards: - 80 = HTTP (unverschlüsselt) - 443 = HTTPS (verschlüsselt) - 22 = SSH - 53 = DNS - In URLs sichtbar: example.com:8080

SPEAKER NOTES: - KLAUSUR: Diese Tabelle - IP: Welcher Rechner? Global. Bleibt gleich. - MAC: Welcher Nachbar? Lokal. Ändert sich. - Port: Welches Programm? Bleibt gleich. - Merken: NUR MAC ändert sich unterwegs

SPEAKER NOTES: - Alle Werkzeuge da: Schichten, Adressen, Protokolle - Jetzt anwenden - URL → Enter → 200ms → Webseite - Was passiert in 200ms?

SPEAKER NOTES: - 200ms = 1/5 Sekunde, gefühlt instant - In dieser Zeit: - DNS, TCP-Aufbau, HTTP-Request/Response - HTML parsen, CSS laden, Bilder, JS - Fokus: Netzwerk-Seite bis HTML ankommt

SPEAKER NOTES: - Grober Ablauf - Jeder Schritt: Alle Schichten durchlaufen - Runter beim Senden - Rauf beim Empfangen - Los mit DNS

SPEAKER NOTES: - Browser kennt: www.hdm-stuttgart.de - Internet braucht: 212.132.79.37 - Jemand muss übersetzen → DNS

SPEAKER NOTES: - DNS = Telefonbuch (Name → Nummer) - Erst lokal schauen: - Browser-Cache (kürzlich besucht?) - OS-Cache - Sonst: DNS-Server fragen (Provider/Router)

SPEAKER NOTES: - Hierarchisch wie Baum - Root-Server → kennen .de, .com, .org Server - .de-Server → kennen alle .de-Domains - HdM-Server → kennt www, mail, etc. - Niemand muss alle Milliarden kennen

SPEAKER NOTES: - Titel: Der DNS-Lookup - Kompletter Ablauf (wenn nichts gecached) - Resolver = typisch beim Provider, macht Arbeit - Root → .de-Server → HdM-NS → IP - Klingt aufwändig → ist es - Deshalb: Caching wie verrückt - Meiste Anfragen lokal beantwortet

SPEAKER NOTES: - Wichtig: DNS ≠ Magie - DNS = normales Netzwerk-Protokoll - Nutzt UDP (schneller, kleine Anfragen) - Port 53 - Wird auch verpackt: UDP→IP→Ethernet→Bits

SPEAKER NOTES: - IP bekannt → Browser weiß Ziel - Info wird gecached (Min-Std) - Nächster Schritt: TCP-Verbindung

SPEAKER NOTES: - HTTP läuft über TCP - TCP = verbindungsorientiert - Vor Daten: Beide Seiten müssen bereit sein - Handshake = Händeschütteln vor Gespräch - Analogie: Telefon klingeln → abheben → "Hallo?" → reden

SPEAKER NOTES: - Warum Aufwand? - Internet: Pakete können verloren, doppelt, falsche Reihenfolge - TCP löst das: - Verbindung aufbauen - Jedes Byte nummeriert - Fehlendes → nachfordern - Handshake: Sequenznummern synchronisieren

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" - 3. Client ACK: "Verstanden, erwarte 5001" - Seq-Nr wichtig: Beide wissen nächstes erwartetes Byte

SPEAKER NOTES: - Verbindung steht - Client: zufälliger Port vom OS (hier 52431) = Rückkanal - Server: Port 443 = HTTPS-Standard - JETZT können Daten fließen

SPEAKER NOTES: - Jetzt konkret: Browser schickt Request - Die eigentliche Anfrage nach der Webseite

SPEAKER NOTES: - HTTP-Request: lesbar, menschlich verständlich - GET = "hol mir was" (POST = "hier Daten für Sie") - "/" = Wurzel = Startseite - HTTP/1.1 = Protokollversion - Header: Kontext (Host, Browser, Sprache) - ~200 Bytes Text → müssen durchs Internet

SPEAKER NOTES: - 200 Bytes Request → was passiert damit? - Schicht für Schicht verpacken

SPEAKER NOTES: - Erste Verpackung: TCP - TCP-Header VOR die Daten - Source Port (52431 → Antwort-Ziel) - Dest Port (443 → HTTPS) - Sequenznummer - Payload (HTTP-Request) unverändert - = Segment

SPEAKER NOTES: - Nächste Schicht: IP - IP-Header VOR das TCP-Segment - Source IP (Laptop) - Dest IP (Server) - TCP-Segment = jetzt Payload des IP-Pakets - = Paket

SPEAKER NOTES: - Letzte Verpackung: Ethernet - Header vorne, Prüfsumme hinten - WICHTIG: MACs hier! - Source = Laptop - Dest = ROUTER, nicht Server! - Warum? Laptop kann Server nicht direkt erreichen - Erst zum Router → der entscheidet weiter

SPEAKER NOTES: - Woher MAC des Routers? - ARP = Address Resolution Protocol - Broadcast: "Wer hat IP X? Sag MAC!" - Router antwortet → Laptop merkt sich - Automatisch im Hintergrund

SPEAKER NOTES: - Ganz unten: Physik - Frame → Bits → Signale - Je nach Medium: - Kupfer: Spannung High/Low - Glasfaser: Licht an/aus - WLAN: modulierte Funkwellen - Laptop sendet → Router empfängt

SPEAKER NOTES: - Paket unterwegs - Was passiert bei jedem Router?

SPEAKER NOTES: - Router empfängt Frame - Physik: Signale → Bits - Ethernet: MAC okay? Prüfsumme okay? → auspacken - IP: Ziel-IP lesen → 212.132.79.37 → nicht mein Netz - Routing-Tabelle: In welche Richtung?

SPEAKER NOTES: - Router: neuer Frame, neue MACs - Source: jetzt Router - Dest: nächster Router - ABER: IP-Paket unverändert! - IP-Adressen bleiben gleich - Kern: Router packt nur äußerste Schicht aus/ein - Innere Schichten unberührt

SPEAKER NOTES: - Wiederholt sich bei jedem Hop - Typisch: 10-20 Hops bis Ziel - Jeder Router: auspacken → routing → einpacken → weiter - IP immer gleich - MAC ändert bei jedem Sprung

SPEAKER NOTES: - Paket angekommen - Jetzt alles rückwärts: Decapsulation

SPEAKER NOTES: - Schicht für Schicht auspacken: - Physik → Bits - Ethernet → Frame prüfen → auspacken - IP → Ziel-IP = meine? Ja → auspacken - TCP → Port 443 = Webserver-Prozess → auspacken - HTTP → "GET /" = Startseite - Server bearbeitet, erstellt Antwort

SPEAKER NOTES: - Antwort: 200 OK = alles gut - Content-Type: HTML - Content-Length: 45231 Bytes - Dann: eigentlicher HTML-Code

SPEAKER NOTES: - Gleiches Spiel, andere Richtung - TCP: Ziel-Port 52431 (Browser!) - IP: Ziel-IP = Laptop - Ethernet: Dest-MAC = nächster Router - Ab geht's – ganzer Weg zurück

SPEAKER NOTES: - Rückweg: gleiche Mechanik, andere Richtung - Jeder Router: auspacken → routing → einpacken - Bis Paket bei euch ankommt

SPEAKER NOTES: - Laptop empfängt, auspackt: Frame → IP → TCP - TCP: Port 52431 = Browser-Prozess - Browser bekommt HTTP-Response - Beginnt mit Rendern - 200ms vorbei → Webseite sichtbar

SPEAKER NOTES: - Ergänzende Themen für Gesamtverständnis

SPEAKER NOTES: - Zwei Transport-Protokolle - TCP: zuverlässig - Handshake, Seq-Nr, Bestätigungen, Neuübertragung - Perfekt für Web, Downloads (nichts darf fehlen) - UDP: schneller - Kein Handshake, keine Bestätigungen - Verloren = weg - Perfekt für Video-Calls (Verzögerung schlimmer als Verlust)

SPEAKER NOTES: - Video-Call, Paket verloren: - TCP: warten → neu anfordern → warten → Bild friert - UDP: ignorieren → nächstes Frame → kurzer Glitch - Echtzeit: UDP besser

SPEAKER NOTES: - MTU = physikalisches Limit - Ethernet-Frame: max 1500 Bytes Nutzdaten - Webseite 100KB, Video Gigabytes? - TCP zerschneidet in passende Stücke - Jedes mit Sequenznummer - Empfänger setzt zusammen (auch bei falscher Reihenfolge)

SPEAKER NOTES: Zum Schluss noch HTTP-Methoden. GET ist das häufigste – "gib mir was". Wenn ihr eine URL aufruft, ist das ein GET. POST schickt Daten zum Server – wenn ihr ein Formular abschickt. PUT und DELETE sind für APIs – ersetzen oder löschen von Ressourcen. Das wird wichtiger, wenn ihr mit REST-APIs arbeitet.

SPEAKER NOTES: Status-Codes sagen euch, was passiert ist. 2xx heißt: Alles gut. 200 OK ist der Normalfall. 3xx heißt: Umleitung. Die Seite ist woanders. 4xx heißt: Ihr habt was falsch gemacht. 404 kennt ihr – Seite nicht gefunden. 403 heißt: Zugriff verweigert. 5xx heißt: Der Server hat ein Problem. 500 ist ein generischer Fehler, 503 heißt: Server überlastet.

SPEAKER NOTES: Das ist die Zusammenfassung für Teil 1. Das solltet ihr können: Den Ablauf: DNS, TCP-Handshake, HTTP-Request, HTTP-Response. Die Schichten und ihre Protokolle. Den Unterschied zwischen IP und MAC – was bleibt gleich, was ändert sich. Was Ports tun. Wie Encapsulation funktioniert.

SPEAKER NOTES: Probiert das aus! Im Browser: F12, dann Network-Tab. Ladet eine Seite und schaut, welche Requests passieren. Klickt auf einen Request und schaut euch die Header an. Im Terminal: ping zeigt euch die Latenz. traceroute zeigt jeden Hop auf dem Weg. nslookup macht eine DNS-Abfrage. curl holt HTTP-Header. Das sind die Werkzeuge, mit denen Profis Netzwerk-Probleme debuggen.

SPEAKER NOTES: Teil 2: CSS. Cascading Style Sheets. HTML definiert die Struktur – was ist auf der Seite. CSS definiert das Aussehen – wie sieht es aus.

SPEAKER NOTES: CSS steht für Cascading Style Sheets. Die Trennung von Inhalt und Darstellung ist ein fundamentales Prinzip. HTML sagt "das ist ein Absatz". CSS sagt "Absätze sind blau und 16 Pixel groß". Vorteil: Ihr könnt das Design der ganzen Website ändern, indem ihr eine Datei ändert. "Cascading" bedeutet: Regeln fließen nach unten. Eine spezifischere Regel überschreibt eine allgemeine.

SPEAKER NOTES: Drei Wege, CSS einzubinden. Externe Datei ist der Standard. Eine CSS-Datei für die ganze Website. Sauber getrennt, gut cachebar. Style-Tag im HTML-Head: Funktioniert, aber mischt HTML und CSS. Manchmal nützlich für kritisches CSS. Inline-Styles: Vermeiden. Schwer zu warten, keine Wiederverwendung.

SPEAKER NOTES: Die Grundstruktur von CSS. Selektor sagt: "Diese Elemente". Hier: alle h1-Überschriften. In den geschweiften Klammern: Property-Value-Paare. color: dunkelgrau. font-size: 2rem. margin-bottom: 1rem. Semikolon nach jedem Paar. Doppelpunkt zwischen Property und Value.

SPEAKER NOTES: Element-Selektoren wählen alle Elemente eines Typs. "p" trifft alle Absätze. "h1, h2, h3" trifft alle Überschriften erster bis dritter Ordnung. Komma bedeutet "oder" – h1 oder h2 oder h3.

SPEAKER NOTES: Klassen-Selektoren sind flexibler. Ihr definiert eine Klasse im CSS, und weist sie Elementen im HTML zu. Punkt vor dem Namen: .wichtig Eine Klasse kann auf beliebig viele Elemente angewendet werden. Ein Element kann mehrere Klassen haben: class="wichtig highlight"

SPEAKER NOTES: ID-Selektoren sind noch spezifischer. Raute vor dem Namen. IDs sollten auf einer Seite nur einmal vorkommen. Für Navigation, Header, Footer, Main – einmalige Elemente. In der Praxis: Klassen sind meist besser. IDs haben hohe Spezifität und sind unflexibel.

SPEAKER NOTES: Kombinationen erlauben präzisere Auswahl. Leerzeichen: Nachfahre. "article p" heißt: alle p-Elemente irgendwo innerhalb eines article. Größer-als: Direktes Kind. "nav > a" heißt: nur Links, die direkt in nav liegen, nicht tiefer verschachtelt. Plus: Nächstes Geschwister. "h2 + p" heißt: der Absatz direkt nach einer h2. Element.Klasse: Das Element muss beides sein. "p.wichtig" heißt: nur p-Elemente mit Klasse wichtig.

SPEAKER NOTES: Wenn mehrere Regeln auf ein Element zutreffen, gewinnt die spezifischere. Spezifität wird in vier Zahlen gemessen. Von links nach rechts: Inline, IDs, Klassen, Elemente. Ein Element-Selektor hat 0,0,0,1. Eine Klasse hat 0,0,1,0. Eine ID hat 0,1,0,0. 0,0,1,0 schlägt 0,0,0,99 – auch hundert Element-Selektoren schlagen keine Klasse. Inline-Styles schlagen alles – außer !important, was ihr vermeiden solltet.

SPEAKER NOTES: Das Box-Modell ist fundamental. Jedes Element ist eine Box. Von innen nach außen: Content: Der eigentliche Inhalt. Text, Bild, was auch immer. Padding: Innenabstand. Zwischen Content und Border. Border: Der Rahmen. Margin: Außenabstand. Zwischen diesem Element und anderen.

SPEAKER NOTES: So setzt ihr die Box-Eigenschaften. Standardmäßig ist width nur der Content. Padding und Border kommen oben drauf. Das ist verwirrend. box-sizing: border-box ändert das. Dann ist width die Gesamtbreite inklusive Padding und Border. Viel intuitiver. Best Practice: Setzt das global für alle Elemente.

SPEAKER NOTES: Farben können auf verschiedene Arten angegeben werden. Keywords: red, blue, rebeccapurple. Begrenzte Auswahl, aber lesbar. Hex: Sechs Zeichen, je zwei für Rot, Grün, Blau. #FF0000 ist reines Rot. RGB: Gleiche Idee, aber dezimal. rgb(255, 0, 0). RGBA: Mit Alpha-Kanal für Transparenz. 0 ist unsichtbar, 1 ist voll sichtbar. HSL: Hue, Saturation, Lightness. Manchmal intuitiver für Farbanpassungen.

SPEAKER NOTES: Einheiten – wichtig für responsive Design. px ist absolut. 16px ist 16px, egal was. % ist relativ zum Elternelement. width: 50% heißt: halb so breit wie der Container. em ist relativ zur Schriftgröße des aktuellen Elements. Kompliziert bei Verschachtelung. rem ist relativ zur Root-Schriftgröße (meist 16px). Einfacher zu handhaben. vw und vh sind Prozent des Viewports. 100vw ist die volle Bildschirmbreite.

SPEAKER NOTES: Pseudo-Klassen wählen Elemente in bestimmten Zuständen. :hover ist der häufigste – wenn die Maus drüber ist. :focus ist wichtig für Accessibility – wenn ein Element den Tastatur-Fokus hat. :first-child, :nth-child und ähnliche wählen basierend auf Position. Wichtig für interaktive Elemente und Zebra-Streifen in Tabellen.

SPEAKER NOTES: Pseudo-Elemente erzeugen virtuelle Elemente, die nicht im HTML stehen. ::before und ::after fügen Inhalt vor oder nach dem Element ein. Oft für Icons oder Dekorationen. ::first-letter und ::first-line für typografische Effekte. Doppelpunkt zur Unterscheidung von Pseudo-Klassen – aber einfacher Doppelpunkt funktioniert auch aus Kompatibilitätsgründen.

SPEAKER NOTES: Responsive Design: Die Seite passt sich der Bildschirmgröße an. Mobile First: Ihr schreibt zuerst die Styles für kleine Screens. Dann fügt ihr mit @media-Queries Anpassungen für größere Screens hinzu. min-width heißt: "ab dieser Breite". Also: Basis gilt für alle. Ab 768px gelten zusätzliche Regeln. Ab 1024px noch mehr. Das Gegenteil wäre Desktop First mit max-width – aber Mobile First ist heute Standard.

SPEAKER NOTES: Zusammenfassung CSS. Selektoren: Element, Klasse, ID, Kombinationen. Klassen sind am flexibelsten. Box-Modell: Alles ist eine Box. Von innen nach außen: content, padding, border, margin. Spezifität: Die spezifischere Regel gewinnt. Einheiten: rem für Schrift, relative Einheiten für Layout.

SPEAKER NOTES: Das war's für heute. Nächstes Mal: JavaScript. Da wird's interaktiv. Fragen jetzt oder per Email. Übt das – vor allem CSS könnt ihr sofort ausprobieren. Codepen auf, loslegen.