public/uni

Files

Michael Czechowski b951341376 rename to kapitel

2026-01-24 00:02:48 +01:00

35 KiB

Raw 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 – WS 2025/26	Kapitel 1: Geschichte, Grundlagen & HTML

Grundlagen IT- und Internettechnik

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

Wintersemester 2025/26

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

Kapitel 1

Geschichte, Grundlagen & HTML

Kursübersicht

3 Termine (10:00 – 16:30 Uhr):

#	Datum	Thema
1	20.12.2025	Geschichte, Grundlagen & HTML
2	10.01.2026	Netzwerke, Protokolle, semantisches HTML & CSS
3	24.01.2026	Interaktivität, Animationen & JavaScript

Format: Theorie + viele Hands-On-Übungen

Ziel: "Gelernte Hilflosigkeit" ablegen

Teil 1: Die Geschichte

Von der Geburtsstunde des erten Computer-Algorithmus bis zur Vernetzung des gesamten Globus

Ada Lovelace (1815–1852)

Die erste Programmiererin der Welt

Arbeitete mit Charles Babbage an der "Analytical Engine"
Ihre »Notes« zu Babbages Maschine: umfangreicher als sein Text
1843 publiziert – unter Initialen »A.A.L.« Ada Augusta Lovelace
Erst 1953 wiederentdeckt und gewürdigt
Schrieb 1843 den ersten Algorithmus für eine Maschine, die nie fertiggestellt wurde

Herman Hollerith (1860–1929)

Das Problem: US-Volkszählung 1880 dauerte 7 Jahre zur Auswertung

Die Lösung: Lochkarten + elektromechanische Tabelliermaschine

1890 Census: 62 Millionen Menschen in 2,5 Jahren gezählt

Ersparnis: 5 Millionen Dollar (damals!)

Die Geburt von IBM

1896: Hollerith gründet "Tabulating Machine Company"

1911: Fusion → "Computing-Tabulating-Recording Company" (CTR)

1924: Umbenennung in International Business Machines (IBM)

IBM dominiert die nächsten 50 Jahre die Computerwelt.

IBM und NS-Deutschland

Dehomag = Deutsche Hollerith-Maschinen GmbH (IBM-Tochter)

Einsatz:

Volkszählung 1933 (Identifikation von Juden)
Verwaltung der Konzentrationslager
Logistik der Deportationen

Edwin Black: "IBM and the Holocaust" (2001)

Lektionen für heute

Technologie ist nie neutral

Vom Ende des Zweiten Weltkriegs

Geburt des modernen Computers

Alan Turing (1912–1954)

Vater der theoretischen Informatik

1936: Turing-Maschine – theoretisches Modell eines Computers
1939–1945: Bletchley Park – Enigma-Entschlüsselung
1950: "Computing Machinery and Intelligence" → Turing-Test
2013: Posthume königliche Begnadigung

Enigma & Bletchley Park

Das Problem: Deutsche Enigma-Maschine erzeugte 158 Trillionen mögliche Einstellungen

Turings Lösung: "Bombe" Elektro-mechanischer Entschlüssler

Ergebnis:

Alliierten konnten deutschen Funkverkehr mitlesen

Geheim bis 1970er! Turing starb ohne Anerkennung.

Die Turing-Maschine (1936)

Theoretisches Modell eines Computers:

┌─────────────────────────────────────────┐
│  ... │ 0 │ 1 │ 1 │ 0 │ 1 │ 0 │ ...      │  ← Unendliches Band
└─────────────────────────────────────────┘
              ↑
        ┌─────────────┐
        │ Lese-/      │
        │ Schreibkopf │
        └─────────────┘
              ↓
        ┌─────────────┐
        │  Zustand    │  ← Endliche Zustände
        └─────────────┘

Beweis: Alles Berechenbare kann so berechnet werden! → Grundlage für alle modernen Computer

Das Manhattan-Projekt (1942–1945)

Ziel: Bau der ersten Atombombe

Problem: Berechnung von Implosionswellen → Millionen von Berechnungen nötig

Team:

J. Robert Oppenheimer (Leitung)
Richard Feynman (Rechenabteilung)
John von Neumann (Mathematik & Stoßwellen)

John von Neumann (1903–1957)

Geboren in Budapest, Österreich-Ungarn
Mit 8: Konnte Telefonbücher auswendig
Mit 22: Doktor in Mathematik

Beiträge:

Quantenmechanik
Spieltheorie
Computerarchitektur

Das Problem der Berechnung

Manhattan-Projekt brauchte:

Ballistik-Berechnungen
Implosions-Simulationen
Nuklearphysik-Gleichungen

Lösung 1943: Menschliche "Computer" → Mit Taschenrechnern, Tabellen, IBM-Lochkarten

Zu langsam → Bedarf an automatischer Berechnung

ENIAC (1945)

Electronic Numerical Integrator and Computer

30 Tonnen, 167 m² Fläche
18.000 Vakuumröhren
5.000 Additionen pro Sekunde
Programmierung durch Umstecken von Kabeln

Problem: Bei jedem neuen Problem → Wochen Umverkabelung

Grace Hopper (1906–1992)

"Amazing Grace" – Pionierin der Softwareentwicklung

1944: Programmierte den Mark I (Harvard)
1952: Entwickelte den ersten Compiler (A-0)
1959: Mitentwicklung von COBOL
Rear Admiral der US Navy

Der erste "Bug": 1947 fand sie eine echte Motte im Mark II → "Debugging" wurde zum Begriff

Margaret Hamilton (*1936)

Pionierin des Software Engineering

1965–1969: Leitete das Software-Team am MIT für Apollo
Entwickelte die Flugsoftware für Apollo 11
Prägte den Begriff "Software Engineering"
Software verhinderte Abbruch der Mondlandung

Apollo 11 (1969): Ihre Fehlererkennung rettete die Mission, als der Computer überlastet wurde

Von Neumanns Idee (1945)

"First Draft of a Report on the EDVAC"

Kernidee: Programm und Daten im selben Speicher

Vorher: Hardware = Programm (Umstecken) Nachher: Software = austauschbar (laden)

→ Gespeichertes Programm = Revolution

Von-Neumann-Architektur

┌─────────────────────────────────────────┐
│                  CPU                    │
│  ┌─────────────┐    ┌─────────────────┐ │
│  │ Rechenwerk  │    │   Steuerwerk    │ │
│  │    (ALU)    │    │ (Control Unit)  │ │
│  └─────────────┘    └─────────────────┘ │
└─────────────────────────────────────────┘
              ↕ Bus-System ↕
┌─────────────────┐    ┌──────────────────┐
│  Speicherwerk   │    │ Ein-/Ausgabewerk │
│    (Memory)     │    │     (I/O)        │
└─────────────────┘    └──────────────────┘

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)

Vom Militär zum Netz

Die Entstehung des Internets

Das Problem (1960er)

Kalter Krieg:

Was passiert bei einem Nuklearangriff?
Zentrale Kommunikation → ein Treffer = alles tot

DARPA (Defense Advanced Research Projects Agency): → Dezentrales Netzwerk, das Angriffe überlebt

Internet-Timeline

Jahr	Meilenstein
1966	ARPANET-Projekt startet
1969	Erste Verbindung: UCLA <-> Stanford
1974	TCP/IP-Protokoll entwickelt
1983	ARPANET wechselt zu TCP/IP
1989	Tim Berners-Lee erfindet das WWW
1993	Erster grafischer Browser (Mosaic)
1995	Kommerzialisierung, Amazon/eBay gegründet

Das WWW (1989)

Tim Berners-Lee am CERN (Genf)

Problem: WissenschaftlerInnen können Dokumente nicht verlinken

Lösung:

HTML – Auszeichnungssprache für Dokumente
HTTP – Protokoll zum Übertragen
URL – Eindeutige Adressen

1991: Erste Webseite geht online

1,3 Millionen Kilometer Unterseekabel

Heute:

5,5 Milliarden Menschen online
>400 Unterseekabel weltweit
Daten reisen mit Lichtgeschwindigkeit (Glasfaser)

Das Internet ist physisch! Keine "Cloud" ohne Kabel.

Teil 2: Bits & Bytes

Die Sprache der Computer

Das Bit

Kleinste Informationseinheit

0 oder 1
AN oder AUS
Strom fließt oder nicht

BIT = Binary DigIT (Binärziffer) Geprägt 1948 von Claude Shannon

Das Byte

8 Bits = 1 Byte

0 1 0 0 1 0 0 1

Wie viele Kombinationen? 2⁸ = 256 Möglichkeiten (0-255)

Was kann man mit 256 Zuständen machen?

256 Zeichen (Buchstaben, Zahlen, Symbole)
256 Graustufen (0 = Schwarz, 255 = Weiß)
256 Lautstärkestufen
Zahlen 0-255

Für Farbe: 3 Bytes pro Pixel (RGB) R=0-255, G=0-255, B=0-255 → 16,7 Millionen Farben

Hexadezimal: Lesbarkeit

Binär ist unleserlich: 01001101 01010000 00110011

Hexadezimal (Base 16): 4D 50 33 (= "MP3" in ASCII)

Jede Hex-Ziffer = 4 Bits 0-9, A-F (A=10, B=11, ..., F=15)

Ihr kennt das: #FF0000 = Rot in CSS

Wo begegnet euch Hex?

Kontext	Beispiel
CSS-Farben	`#FF5733`
MAC-Adressen	`00:1A:2B:3C:4D:5E`
Fehlercodes	`0x80070005`
Speicheradressen	`0xA04F20`
Unicode	`U+00E4` (ä)

→ Hex ist überall in der Technik

Bits vs. Bytes: Die Verwirrung

1 Byte = 8 Bit → Bits ÷ 8 = Bytes

Einheit (Bit)	Einheit (Byte)
1 Kbit = 1.000 Bit	1 KB = 1.000 Byte
1 Mbit = 1.000.000 Bit	1 MB = 1.000.000 Byte
1 Gbit = 1 Mrd. Bit	1 GB = 1 Mrd. Byte

Praxis: 100 Mbit/s Internet = 12,5 MB/s Download

Aber: Computer rechnen binär (Basis 2)!

Warum zeigt meine 1TB-Festplatte nur 931GB?

Zwei Zählweisen:

Dezimal (Hersteller)	Binär (Computer)
Kilo = 1.000	Kibi = 1.024 (2¹⁰)
Mega = 1.000.000	Mebi = 1.048.576 (2²⁰)
Giga = 1.000.000.000	Gibi = 1.073.741.824 (2³⁰)
Tera = 1.000.000.000.000	Tebi = 1.099.511.627.776 (2⁴⁰)

Das Problem:

Hersteller verkauft: 1 TB = 1.000.000.000.000 Bytes
Computer rechnet: 1 TiB = 1.099.511.627.776 Bytes
Differenz: 9,1% → zeigt nur 931 GB

Teil 3: Eure erste Webseite

HTML-Grundlagen

Was ist HTML? (1/2)

HyperText Markup Language

Keine Programmiersprache
Am ehesten eine Formattierungssprache

Beschreibt Struktur und Aufbau einer Webseite

<p>Das ist ein Absatz.</p>

<input type="date"/>

Was ist HTML? (2/2)

Mit HTML werden HTML-Dokumente beschrieben (bspw. index.html)
Ein HTML-Dokument beschreibt das/den Document Object Model (DOM)
Der DOM ist eine hierarchische Baumstruktur (Kind- und Elternelemente)
- parent nodes / elements
- child nodes / elements
- sibling nodes / elements
- Während wir in HTML von Elementen bzw. elements sprechen, so werden sie in JavaScript (JS) eher als nodes gelesen.

HTML-Anatomie (1/2)

Formattierungssprache

HTML folgt einer strengen Syntax zur Formattieren von digitalen Inhalten
- Syntax: <element attribute="value"> ... </element>
- Öffnende und schließende HTML-Tags müssen identisch sein
- Das schließende Tag muss ein / nach der Spitzenklammer haben

HTML-Anatomie (2/2)

Wir unterscheiden zwischen umschließende und selbst-schließende HTML-Tags
- Umschließend
  - <b> ... </b> fett-gedruckter Text (inline)
  - <a> ... </a> Hyperlink (Verlinkung zu anderen Webseiten, Bildern)
  - <body> ... </body> Sichtbarer Teil eines HTML-Dokuments
  - <details> ... </details> Collapsable / Akkordion / Aufklapp-Text
- Selbst-schließend
  - <img /> Bild, Vektorgrafik etc.
  - <input /> Eingabefeld
  - <meta /> Metadaten

Darstellungsebene und Metadaten

<html>
  <head>
    METADATEN
  </head>
  
  <body>
    DARSTELLUNGSEBENE
  </body>
</html>

Ein HTML-Dokument besteht grundsätzlich aus zwei Teilen:
- <head> ... </head> Metadaten für den Browser, zum Teilen, für Suchmaschinen
- <body> ... </body> Darzustellender Inhalt, Text, Formulare

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

HTML-Tags und Attribute

<body>
  <p class="wichtig">Das ist ein Absatz.</p>
</body>

Teil	Bezeichnung
`<p>`	Opening Tag (öffnendes Tag)
`class="wichtig"`	Attribut
`Das ist ein Absatz.`	Inhalt
`</p>`	Closing Tag (schließendes Tag)

HTML-Tags und Attribute (selbst-schließend)

<input type="" />

Teil	Bezeichnung
`<input ...`	Eingabefeld
`type="date"`	Attribut type mit dem Wert date
`... />`	Schließendes `/` im (öffnenden) Tag enthalten

Vollständiges Grundgerüst

<!DOCTYPE html>
<html lang="de">
<head>
  <title>Portfolio von ...</title>
  <meta name="description" content="Hier gibt es die besten ..." />
  <meta name="og:image" content="https://...." />
</head>
<body>
  <h1>Hallo Welt!</h1>
  <p>Das ist mein erster Absatz.</p>
</body>
</html>

Die wichtigsten Tags

Tag	Bedeutung
`<h1>` bis `<h6>`	Überschriften (h1 = größte)
`<p>`	Absatz (Paragraph)
`<a href="..."> ... </a>`	Hyper-Link
`<img src="..."/>`	Bild
`<ul>`, `<ol>`, `<li>`	Listen
`<div>`	Container/Box
`<span>`	Inline-Container
`<input type="...">`	Eingabefeld/Input

Hands-On: Werkzeuge einrichten

Option 1: Texteditor + Browser

Notepad, TextEdit oder DreamWeaver
Speichern als index.html → Im Browser öffnen

Option 2: VS Code (empfohlen)

https://code.visualstudio.com
Extension: "Live Server"

Option 3: Online-Editoren

https://codepen.io/pen/

Natives HTML

Was noch üblicherweise mit Skriptsprachen wie JavaScript und anderen umgesetzt werden musste, kann nun HTML selber. Wer dieses dennoch verwendet, hat das einen sog. "Code smell".

Funktion	HTML-Element
Aufklapp-Text	`<details>` + `<summary>`
Popup/Modal	`<dialog>`
Fortschrittsbalken	`<progress>`
Datum-Auswahl	`<input type="date">`
Validierung	Attribute beliebig verknüpfbar `required`, `min`, `max`

Beispiel: Details/Summary

<details>
  <summary>Klick mich!</summary>
  <p>Dieser Text war versteckt.</p>
</details>

https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details

Beispiel: Details/Summary (geöffnet)

<details open>
  <summary>Klick mich!</summary>
  <p>Dieser Text war versteckt.</p>
</details>

https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details#erstellen_einer_offenen_disclosure-box

Beispiel: Button

<button>Add to favorites</button>

https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button

Beispiel: Input/Eingabefeld

<input
  type="text"
  maxlength="8"
  size="10" />

https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input

Beispiel: Dialog

<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog

"Barrierefreiheit"

Web Disability Simulator

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)

WCAG: Der Standard

Web Content Accessibility Guidelines

4 Prinzipien (POUR):

Prinzip	Bedeutung
Perceivable	Wahrnehmbar – Inhalte müssen erkennbar sein
Operable	Bedienbar – Funktionen müssen nutzbar sein
Understandable	Verständlich – Inhalte müssen klar sein
Robust	Robust – Funktioniert mit verschiedenen Technologien

Perceivable: Wahrnehmbar

Textalternativen für Nicht-Text:

<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

Operable: Bedienbar

Tastaturzugänglich:

/* Fokus-Indikator NIE entfernen! */
:focus {
    outline: 2px solid blue;
    outline-offset: 2px;
}

/* Wenn custom styling: */
button:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
}

Genug Zeit: Keine automatischen Timeouts ohne Warnung

Keine Blitze: Nichts blinkt mehr als 3x pro Sekunde

Understandable: Verständlich

Sprache angeben:

<html lang="de">

Konsistente Navigation: Gleiche Elemente an gleicher Stelle

Fehler erklären:

<input type="email" aria-describedby="email-error">
<p id="email-error" role="alert">
    Bitte geben Sie eine gültige E-Mail-Adresse ein.
</p>

Robust: Technisch solide

Semantisches HTML:

<!-- Schlecht -->
<div class="button" onclick="...">Klick mich</div>

<!-- Gut -->
<button type="button">Klick mich</button>

ARIA nur wenn nötig:

<!-- Nötig: Custom-Komponente -->
<div role="tablist" aria-label="Produktkategorien">
    <button role="tab" aria-selected="true">Schuhe</button>
    <button role="tab" aria-selected="false">Jacken</button>
</div>

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)

Fragen & Diskussion

Nächster Termin: 10.01.2026 – CSS & Netzwerke

Kontakt: lb-czechowski@hdm-stuttgart.de

Lizenz

Diese Präsentation ist lizenziert unter Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)

Basiert auf Material von:

Markus Thamm / Wolfgang Gruel (HdM Stuttgart)
Michael Czechowski

Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/

35 KiB Raw Blame History Unescape Escape