Files

T

libretech 82503a5fc5 update termin 1 slides based on feedback

- remove torches of freedom story (ibm story sufficient)
- fix von-neumann claim (not all devices, mention harvard)
- change email to mail@librete.ch
- simplify overflow slides
- rename dehomag image file

2025-12-17 23:09:32 +01:00

24 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	Michael Czechowski – HdM Stuttgart – WS 2025/26	Tag 1: Geschichte, Grundlagen & HTML

Grundlagen IT- und Internettechnik

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

Wintersemester 2025/26

Tag 1 – 20.12.2025

Geschichte, Grundlagen & HTML

Über mich

Michael Czechowski

Softwareentwickler & IT-Berater
Schwerpunkte: Cloud, AI, Web-Technologien, Systemarchitektur, Open Source
Hintergrund: Philosophie & Informatik
Kontakt: mail@librete.ch

Kurze Umfrage

Bitte Hand heben:

Wer hat einen Windows-Laptop dabei?
Wer hat einen Mac dabei?
Wer nutzt Linux?
Wer hat schon mal HTML oder CSS geschrieben?
Wer kann programmieren (egal welche Sprache)?

Kursübersicht

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

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

Format: Theorie + viele Hands-On-Übungen

Ziel: Ihr könnt am Ende eine eigene interaktive Webseite bauen!

Teil 1: Die Geschichte

Von der Lochkarte zum Internet

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 Nazi-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

Hollerith-Maschinen zeigen:

Daten sind Macht – Wer Daten kontrolliert, kontrolliert Menschen
Technologie verstärkt – Gut UND Böse
"Neutrale" Tools sind nie neutral

2025: Big Data, AI, Social Media → dieselben Fragen

Der Zweite Weltkrieg

Geburt des modernen Computers

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)

"Das letzte Universalgenie"

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" (meist Frauen!) → 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

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!

Warum ist das wichtig?

Ohne Von-Neumann-Architektur:

Kein Betriebssystem
Keine Apps
Kein Multitasking
Keine Updates

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
1,3 Mio. km Kabel unter Wasser
Daten reisen mit Lichtgeschwindigkeit (Glasfaser)

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

Pause

15 Minuten

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!

Speicheradressen

64-Bit-System:

Speicheradresse = 64 Bit lang
64 Bit = 16 Hex-Ziffern

Beispiel (vereinfacht, 12 Bit):

Dezimal	Binär	Hexadezimal
258	0001 0000 0010	102

4 Bits = 1 Hex-Ziffer

Teil 3: Eure erste Webseite

HTML-Grundlagen

Was ist HTML?

HyperText Markup Language

Keine Programmiersprache!
Beschreibt Struktur einer Webseite
Tags markieren Inhalt

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

HTML-Anatomie

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

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

Grundgerüst

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Meine erste Seite</title>
</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="...">`	Link
`<img src="...">`	Bild
`<ul>`, `<ol>`, `<li>`	Listen
`<div>`	Container/Box
`<span>`	Inline-Container

Hands-On: Werkzeuge einrichten

Option 1: Texteditor + Browser

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

Option 2: VS Code (empfohlen)

code.visualstudio.com
Extension: "Live Server"

Option 3: Online-Editoren

stackblitz.com
codepen.io

Hands-On: Erste HTML-Seite (45 Min)

Aufgabe:

Erstelle Datei index.html
Schreibe das Grundgerüst (abtippen, nicht kopieren!)
Füge hinzu:
- Eine Überschrift über dich
- Einen Absatz mit kurzem Steckbrief
- Eine Liste deiner Hobbies
- Ein Bild (aus dem Internet)
- Einen Link zu einer Webseite

Hilfe: https://nextlevelshit.github.io/html-over-js/

Beispiel-Lösung

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Über mich</title>
</head>
<body>
    <h1>Max Mustermann</h1>
    <p>Ich studiere Medienwirtschaft an der HdM.</p>
    <h2>Meine Hobbies</h2>
    <ul>
        <li>Musik hören</li>
        <li>Kochen</li>
        <li>Gaming</li>
    </ul>
    <img src="https://placekitten.com/200/200" alt="Katze">
    <a href="https://hdm-stuttgart.de">HdM Website</a>
</body>
</html>

Native HTML: Mehr als ihr denkt!

Viele Dinge brauchen KEIN JavaScript:

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

→ HTML first, JavaScript later!

Beispiel: Details/Summary

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

Probiert es aus! Kein JavaScript nötig.

Beispiel: Dialog

<dialog id="meinDialog">
    <h2>Ein Popup!</h2>
    <p>Das ist ein nativer Dialog.</p>
    <button onclick="this.closest('dialog').close()">
        Schließen
    </button>
</dialog>

<button onclick="document.getElementById('meinDialog').showModal()">
    Dialog öffnen
</button>

Hands-On: Native HTML Features (30 Min)

Erweitert eure Seite:

Fügt ein <details>-Element mit verstecktem Text hinzu
Erstellt ein Kontaktformular mit:
- <input type="email"> (automatische Validierung!)
- <input type="date">
- <textarea>
- <button type="submit">

Tipp: Browser validiert automatisch!

Mittagspause

60 Minuten

Teil 4: Rechner verbinden

Netzwerk-Grundlagen

Warum Rechner verbinden?

Ein Rechner allein macht nicht glücklich!

Daten teilen
Zusammenarbeiten
Kommunizieren
Ressourcen teilen (Drucker, Speicher)

Was für Kommunikationsmöglichkeiten kennt ihr? (ohne Internet)

Kommunikationsarten

Kategorie	Beispiel
Synchron	Telefonat, Video-Call
Asynchron	E-Mail, Brief, SMS
Verbindungsorientiert	Telefon (Leitung aufbauen)
Verbindungslos	Brief, Postkarte

Das OSI-Modell

7 Schichten der Netzwerkkommunikation:

Schicht	Name	Beispiel
7	Anwendung	HTTP, FTP, SMTP
6	Darstellung	Verschlüsselung, Kompression
5	Sitzung	Sessions
4	Transport	TCP, UDP
3	Vermittlung	IP, Routing
2	Sicherung	Ethernet, MAC
1	Bitübertragung	Kabel, WLAN

TCP/IP: Die Praxis

Das Internet nutzt TCP/IP (4 Schichten):

TCP/IP	Entspricht OSI	Protokolle
Anwendung	5-7	HTTP, DNS, SMTP
Transport	4	TCP, UDP
Internet	3	IP
Netzzugang	1-2	Ethernet, WLAN

TCP/IP = Transmission Control Protocol / Internet Protocol

IP-Adressen

Jeder Rechner im Netzwerk braucht eine Adresse

IPv4: 4 Zahlen (0-255), Punkt-getrennt 192.168.1.1

Problem: 2³² = nur 4,3 Milliarden Adressen → Reicht nicht für alle Geräte!

IPv6: 128 Bit = 3,4 × 10³⁸ Adressen 2001:0db8:85a3:0000:0000:8a2e:0370:7334

Spezielle IP-Adressen

Adresse	Bedeutung
`127.0.0.1`	Localhost – Ihr eigener Rechner
`192.168.x.x`	Private Adressen (Heimnetz)
`10.x.x.x`	Private Adressen (Firmen)

Localhost = "Ich selbst" → Perfekt für Web-Entwicklung!

Ports: Die Türnummern

IP-Adresse = Hausnummer Port = Wohnungstür

Port	Dienst
80	HTTP (Web)
443	HTTPS (Web, verschlüsselt)
22	SSH (Terminal)
25	SMTP (E-Mail senden)

Beispiel: 192.168.1.1:8080 (IP-Adresse : Port)

Routing: Der Weg durchs Netz

Router = Postamt

Entscheidet, wohin Pakete gehen
Findet besten Weg
Pakete können verschiedene Wege nehmen!

Traceroute: Zeigt den Weg

traceroute google.de     # Mac/Linux
tracert google.de        # Windows

HTTP: Das Web-Protokoll

HyperText Transfer Protocol

Browser                          Server
   |                               |
   |---- GET /index.html --------->|
   |                               |
   |<------ 200 OK + HTML ---------|
   |                               |

Methoden:

GET – Daten abrufen
POST – Daten senden
PUT – Daten aktualisieren
DELETE – Daten löschen

Hands-On: Netzwerk erkunden (20 Min)

Terminal öffnen: PowerShell (Win) / Terminal (Mac/Linux)

ipconfig          # IP-Adresse (Win)
ifconfig          # IP-Adresse (Mac/Linux)
ping google.de    # Erreichbarkeit testen
tracert google.de # Weg zum Server (Win)

Teil 5: HTML vertiefen

Semantik & Formulare

Semantisches HTML

Nicht alles ist ein <div>!

Statt	Besser
`<div class="header">`	`<header>`
`<div class="nav">`	`<nav>`
`<div class="main">`	`<main>`
`<div class="footer">`	`<footer>`
`<div class="article">`	`<article>`

Warum? Accessibility, SEO, Wartbarkeit

Semantisches Grundgerüst

<body>
    <header>
        <nav>
            <a href="/">Home</a>
            <a href="/about">Über uns</a>
        </nav>
    </header>
    
    <main>
        <article>
            <h1>Hauptinhalt</h1>
            <p>...</p>
        </article>
    </main>
    
    <footer>
        <p>© 2025 Meine Webseite</p>
    </footer>
</body>

Formulare: Input-Typen

<form>
    <input type="text" placeholder="Name">
    <input type="email" placeholder="E-Mail">
    <input type="password" placeholder="Passwort">
    <input type="number" min="0" max="100">
    <input type="date">
    <input type="color">
    <input type="range" min="0" max="100">
    <button type="submit">Absenden</button>
</form>

Browser validiert automatisch! (type="email" prüft @)

Hands-On: Komplette Seite (60 Min)

Baut eine "Über mich"-Seite mit:

Semantisches Grundgerüst (header, nav, main, footer)
Navigation mit Links zu Abschnitten
Über-mich-Abschnitt mit Bild
Hobbies-Liste
Kontaktformular (Name, E-Mail, Nachricht, Button)

Ziel: Vollständige, valide HTML-Seite

Fleißaufgabe bis 10.01.