Files

T

libretech 4174bdf314 add bits vs bytes and TB/GiB explanation slides

2025-12-22 12:05:50 +01:00

26 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	Termin 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://git.librete.ch/hdm/223015c

Termin 1 – 20.12.2025

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

Keine

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!

Warum ist das wichtig?

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
1,3 Mio. km Kabel unter Wasser
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

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

Bits vs. Bytes: Die Verwirrung

Einheit	Bits	Bytes	Faktor
1 Byte	8	1
1 Kilobyte (KB)	8.000	1.000	10³
1 Megabyte (MB)	8.000.000	1.000.000	10⁶
1 Gigabyte (GB)	8 Mrd.	1 Mrd.	10⁹
1 Terabyte (TB)	8 Bio.	1 Bio.	10¹²

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

Warum zeigt meine 1TB-Festplatte nur 931GB?

Hersteller: 1 TB = 1.000.000.000.000 Bytes (10¹²)

Betriebssystem: 1 TB = 1.099.511.627.776 Bytes (2⁴⁰)

SI (Dezimal)	Binär (IEC)	Differenz
1 KB = 1.000	1 KiB = 1.024	2,4%
1 MB = 1.000.000	1 MiB = 1.048.576	4,9%
1 GB = 10⁹	1 GiB = 2³⁰	7,4%
1 TB = 10¹²	1 TiB = 2⁴⁰	9,1%

→ 1 TB ÷ 1.024⁴ = 931 GiB

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

Hands-On: Werkzeuge einrichten

Option 1: Texteditor + Browser

Notepad, TextEdit oder gedit
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/

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	Attribute beliebig verknüpfbar `required`, `min`, `max`

→ HTML first, JavaScript later!

Beispiel: Details/Summary

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

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

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> ... </textarea>
- <button type="submit"> ... </button>

Zusammenfassung Termin 1

Geschichte:

Lovelace, Hollerith, Turing, Hopper, Hamilton – PionierInnen
IBM & NS-Deutschland → Verantwortung
Von-Neumann-Architektur
ARPANET → Internet → WWW

Technik:

Bits & Bytes, Hexadezimal
Von-Neumann-Architektur

Zusammenfassung Termin 1 (Praxis)

Was wir gemacht haben:

HTML-Grundstruktur erstellt
Native HTML-Features genutzt

Fragen & Diskussion

Nächster Termin: 10.01.2026 – CSS & Netzwerke

Kontakt: mail@librete.ch

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/

26 KiB Raw Blame History Unescape Escape