public/uni

Files

Michael Czechowski 030bb322a2 update semester to sommersemester 2026 across all courses

2026-03-26 18:17:09 +01:00

17 KiB

Raw Permalink Blame History

marp, theme, paginate, backgroundColor, header, footer, title

marp	theme	paginate	backgroundColor	header	footer	title
true	gaia	true		Grundlagen IT- und Internettechnik (223015c)	Michael Czechowski – HdM Stuttgart – SoSe 2026	Kapitel 1: Geschichte, Grundlagen & HTML

Grundlagen IT- und Internettechnik

223015c · Modul "Technik 1" · 1. Semester Digital- und Medienwirtschaft Hochschule der Medien Stuttgart

Sommersemester 2026

https://librete.ch/hdm/223015c/

Die 5 Komponenten

Komponente	Funktion
Rechenwerk (ALU)	Führt Berechnungen durch
Steuerwerk	Interpretiert Befehle, steuert Ablauf
Speicherwerk	Speichert Programme UND Daten
Ein-/Ausgabe	Tastatur, Bildschirm, Netzwerk
Bus-System	Verbindet alle Komponenten

Wichtig: Programme und Daten gemeinsam im Speicher!

Von-Neumann-Architektur: Bedeutung

Ohne Von-Neumann-Architektur:

Kein Betriebssystem
Keine Apps
Kein Multitasking
Keine Updates bzw. Veränderungen am Computer System

Die meisten Computer basieren auf diesem Prinzip: Laptop, Smartphone, Server, Spielkonsole...

Ausnahme: Mikrocontroller & DSPs nutzen oft die Harvard-Architektur (separate Speicher für Code und Daten → schneller für Echtzeitanwendungen)

HTML Metadaten

<html>
  <head>
    <title>Im Browsertab als Überschrift sichtbar</title>

    <meta name="description" content="" />

    <meta name="og:image" content="https://...." />
  </head>

  ...

</html>

Webseiten werden nicht nur von Menschen besucht, sondern auch von Suchmaschinen, Programmen, Bots etc.
Metadaten helfen bspw. auch Screen-Readern beim "Verstehen" der Inhalte

Wie nutzen Menschen das Web?

Eingabe	Nutzungsweise
Maus	Klicken, Scrollen
Tastatur	Tab-Navigation, Enter, Pfeiltasten
Screenreader	Vorlesen von Inhalten (NVDA, VoiceOver, JAWS)
Sprachsteuerung	"Klicke auf Anmelden"
Augensteuerung	Eye-Tracking
Switch-Geräte	Ein-/Aus-Schalter

→ Nicht alle nutzen Maus + Bildschirm!

Warum "Barrierefreiheit"?

Rechtlich:

EU: European Accessibility Act (seit Juni 2025 in Kraft!)
DE: BITV 2.0 (Behörden), Privatwirtschaft betroffen

Ethisch:

Teilhabe für alle Menschen
Digitale Inklusion

Praktisch:

Bessere UX für alle (SEO, Mobile, ältere Menschen)
Größerer Markt (~15% der Bevölkerung)

Tastatur-Test:

Alle Funktionen nur mit Tab + Enter nutzbar?
Fokus immer sichtbar?
Logische Tab-Reihenfolge?

Screenreader-Test:

VoiceOver (Mac): Cmd + F5
NVDA (Windows): Gratis-Download

Tools:

axe DevTools, WAVE (Browser-Extensions)
Lighthouse (in Chrome DevTools)

Das TCP/IP-Modell

Schicht	Name	Aufgabe	Protokolle
4	Anwendung	Was? Welcher Dienst?	HTTP, DNS, SMTP
3	Transport	Zuverlässigkeit, Ports	TCP, UDP
2	Internet	Routing, globale Adressen	IP
1	Netzzugang	Lokale Übertragung	Ethernet, WLAN

4 Schichten. Das reicht, um das Internet zu verstehen.

Dateneinheiten pro Schicht

Schicht	Name	Dateneinheit	Was kommt hinzu?
Anwendung	HTTP, DNS	Daten	–
Transport	TCP, UDP	Segment	Ports, Sequenznummern
Internet	IP	Paket	IP-Adressen
Netzzugang	Ethernet	Frame	MAC-Adressen, Prüfsumme

Merkhilfe: Daten → Segment → Paket → Frame („Der Sache Praktischer Folgen")

IP vs. MAC vs. Port

	IP-Adresse	MAC-Adresse	Port
Frage	Welcher Rechner?	Welches Gerät nebenan?	Welches Programm?
Reichweite	Global	Lokal (1 Hop)	Auf einem Rechner
Ändert sich?	Nein	Ja, bei jedem Hop	Nein
Schicht	Internet (IP)	Netzzugang (Ethernet)	Transport (TCP/UDP)
Beispiel	212.132.79.37	aa:bb:cc:dd:ee	443

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

TCP vs. UDP

	TCP	UDP
Verbindung	Ja (Handshake)	Nein
Reihenfolge	Garantiert	Nicht garantiert
Verlorene Pakete	Werden nachgefordert	Gehen verloren
Overhead	Höher	Niedriger
Use Cases	Web, Email, Downloads	Video-Calls, Gaming, DNS

HTTP-Methoden

Methode	Bedeutung	Beispiel
GET	Daten abrufen	Seite laden
POST	Daten senden	Formular absenden
PUT	Daten ersetzen	Profil aktualisieren
DELETE	Daten löschen	Account löschen

GET /index.html HTTP/1.1
POST /login HTTP/1.1

HTTP Status-Codes

HTTP/1.1 200 OK
HTTP/1.1 404 Not Found
HTTP/1.1 500 Internal Server Error

Code-Bereich	Bedeutung
2xx	Erfolg (200 OK, 201 Created)
3xx	Umleitung (301 Moved, 304 Not Modified)
4xx	Client-Fehler (400 Bad Request, 404 Not Found)
5xx	Server-Fehler (500 Internal Error, 503 Unavailable)

Zusammenfassung Teil 1

Der Ablauf:

DNS (UDP:53) → Name zu IP
TCP-Handshake (SYN → SYN-ACK → ACK)
HTTP-Request (GET /...)
HTTP-Response (200 OK + HTML)

Die Konzepte:

4 Schichten: Anwendung → Transport → Internet → Netzzugang
IP bleibt gleich, MAC ändert sich pro Hop
Ports identifizieren Programme
Encapsulation: Jede Schicht verpackt die darüberliegende

Spezifität: Welche Regel gewinnt?

Selektor	Spezifität
Element (`p`)	0,0,0,1
Klasse (`.wichtig`)	0,0,1,0
ID (`#header`)	0,1,0,0
Inline (`style="..."`)	1,0,0,0

p { color: blue; }           /* 0,0,0,1 */
.text { color: green; }      /* 0,0,1,0 → gewinnt */
#intro { color: red; }       /* 0,1,0,0 → gewinnt über beide */

Responsive Design

/* Mobile First: Basis-Styles */
.container {
    padding: 1rem;
    background: white;
}

/* Ab 768px (Tablet): Anpassungen */
@media (min-width: 768px) {
    .container {
        padding: 2rem;
        background: red;
    }
}

/* Ab 1024px (Desktop): Weitere Anpassungen */
@media (min-width: 1024px) {
    .container {
        background: green;
    }
}

17 KiB Raw Permalink Blame History Unescape Escape