1671 lines
42 KiB
Markdown
1671 lines
42 KiB
Markdown
---
|
||
marp: true
|
||
theme: gaia
|
||
paginate: true
|
||
backgroundColor: #fff
|
||
header: "Grundlagen IT- und Internettechnik (223015c)"
|
||
footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
|
||
title: "Kapitel 1: Geschichte, Grundlagen & HTML"
|
||
---
|
||
|
||
<style>
|
||
:root {
|
||
--color-foreground: #1a1a2e;
|
||
--color-highlight: #d63384;
|
||
--color-dimmed: #4a4a6a;
|
||
}
|
||
section.invert {
|
||
--color-foreground: #fff;
|
||
}
|
||
section {
|
||
font-size: 1.7rem;
|
||
}
|
||
h1 {
|
||
color: #a02060; /* darker raspberry */
|
||
}
|
||
section.invert h1 {
|
||
color: #fff;
|
||
}
|
||
h2 {
|
||
color: #1f2937; /* dark gray, almost black */
|
||
}
|
||
pre {
|
||
background: #0f0f23;
|
||
color: #d63384;
|
||
border-radius: 8px;
|
||
border-left: 3px solid #d63384;
|
||
}
|
||
pre code {
|
||
background: transparent;
|
||
color: inherit;
|
||
}
|
||
code {
|
||
background: #1a1a2e;
|
||
color: #d63384;
|
||
padding: 0.15em 0.4em;
|
||
border-radius: 4px;
|
||
}
|
||
a {
|
||
color: var(--color-highlight);
|
||
}
|
||
section.klausur {
|
||
background: repeating-linear-gradient(
|
||
135deg,
|
||
#fce4ec,
|
||
#fce4ec 40px,
|
||
#fff 40px,
|
||
#fff 80px
|
||
) !important;
|
||
}
|
||
@media print {
|
||
section.klausur {
|
||
background: #fce4ec !important;
|
||
}
|
||
}
|
||
section.aufgabe {
|
||
background: #fce4ec !important;
|
||
}
|
||
section.aufgabe footer {
|
||
display: none;
|
||
}
|
||
section.erklaerung {
|
||
font-size: 1.1rem;
|
||
background: repeating-linear-gradient(
|
||
135deg,
|
||
#fce4ec,
|
||
#fce4ec 40px,
|
||
#fff 40px,
|
||
#fff 80px
|
||
) !important;
|
||
}
|
||
@media print {
|
||
section.erklaerung {
|
||
background: #fce4ec !important;
|
||
}
|
||
}
|
||
section.erklaerung h1 {
|
||
font-size: 1.5rem;
|
||
color: #a02060;
|
||
margin-bottom: 0.3rem;
|
||
}
|
||
section.erklaerung ul,
|
||
section.erklaerung ol {
|
||
font-size: 1.0rem;
|
||
line-height: 1.4;
|
||
}
|
||
section.erklaerung p {
|
||
font-size: 1.0rem;
|
||
line-height: 1.4;
|
||
}
|
||
section.erklaerung table {
|
||
font-size: 0.9rem;
|
||
}
|
||
</style>
|
||
|
||
<!-- _class: invert -->
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
<!-- _backgroundColor: black -->
|
||
|
||
|
||
|
||
# Grundlagen IT- und Internettechnik
|
||
|
||
**223015c** · Modul "Technik 1" · 1. Semester
|
||
Digital- und Medienwirtschaft
|
||
Hochschule der Medien Stuttgart
|
||
|
||
**Sommersemester 2026**
|
||
|
||
[https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/)
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Kapitel 1
|
||
## Geschichte, Grundlagen & HTML
|
||
|
||
---
|
||
|
||
# Kursübersicht
|
||
|
||
**Themen:**
|
||
|
||
1. Geschichte, Grundlagen & **HTML**
|
||
2. Netzwerke, Protokolle, **semantisches HTML** & **CSS**
|
||
3. Interaktivität, Animationen & **JavaScript**
|
||
|
||
**Format:** Theorie + viele Hands-On-Übungen
|
||
|
||
**Ziel:** "Gelernte Hilflosigkeit" ablegen
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Teil 1: Die Geschichte
|
||
## Vom ersten Algorithmus bis zum globalen Netzwerk
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Ada Lovelace, Daguerreotypie 1843
|
||
Antoine Claudet
|
||
-->
|
||
|
||
---
|
||
|
||
|
||
|
||
# Ada Lovelace (1815–1852)
|
||
|
||
**Die erste Programmiererin der Welt**
|
||
|
||
- Erste Programmiererin – 100 Jahre vor dem ersten Computer
|
||
- Zusammenarbeit mit Charles Babbage an der *Analytical Engine*
|
||
- Ihre Notizen: umfangreicher als sein Originaltext
|
||
- Erst 1953 wiederentdeckt und gewürdigt
|
||
|
||
<!--
|
||
Babbage: Mathematiker, besessen von Rechenmaschinen. Erste Maschine: Difference Engine (reine Rechenmaschine). Zweite Maschine: Analytical Engine – programmierbar, mit Lochkarten gesteuert. Nie fertig gebaut, aber revolutionär im Konzept.
|
||
|
||
Ada: Tochter von Lord Byron, dem Dichter. Die Mutter – selbst Mathematikerin – hatte Angst, Ada könnte den "Wahnsinn" des Vaters erben. Also: strikte naturwissenschaftliche Erziehung. Weg von der Poesie, hin zur Logik.
|
||
|
||
5. Juni 1833, Ada ist 17: Sie trifft Babbage bei seinen legendären »Saturday night soirées«. Elitekreise. Er zeigt ihr seine Maschine – und sie versteht sie. Besser als fast alle anderen.
|
||
|
||
1835 heiratet sie William King → Ada King, Countess of Lovelace.
|
||
|
||
Das Zusammenspiel dieser beiden: Ein Ingenieur, der Hardware baut. Eine Dichterstochter, die Software denkt. 100 Jahre vor den ersten echten Computern.
|
||
|
||
Programmiersprache "Ada" (1980) nach ihr benannt.
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Herman Hollerith, ca. 1890
|
||
-->
|
||
|
||
---
|
||
|
||
|
||
|
||
# Herman Hollerith (1860–1929)
|
||
|
||
**Erfinder der Lochkarten-Datenverarbeitung**
|
||
|
||
- **Problem:** Volkszählung 1880 brauchte 7 Jahre zur Auswertung
|
||
- **Lösung:** Lochkarten + elektromechanische Tabelliermaschine
|
||
- **Ergebnis:** 1890 Census in 2,5 Jahren – 5 Mio. Dollar gespart
|
||
- Gründete Firma, die später zu IBM wurde
|
||
|
||
<!--
|
||
Hollerith: Deutsch-amerikanischer Ingenieur, Statistiker am US Census Bureau.
|
||
|
||
Das Problem: Die USA wuchsen so schnell, dass die Volkszählung von 1880 erst 1887 fertig ausgewertet war – die nächste Zählung stand schon bevor.
|
||
|
||
Inspiration: Jacquard-Webstuhl. Dieser französische Webstuhl nutzte seit 1804 Lochkarten zur Steuerung komplexer Muster. Hollerith übertrug das Prinzip auf Daten.
|
||
|
||
Seine Innovation: Eine Lochkarte = ein Datensatz (eine Person). Die Position der Löcher codierte Informationen (Alter, Geschlecht, Beruf etc.). Elektromechanische Maschine las die Karten und zählte automatisch.
|
||
|
||
1896 gründete er die Tabulating Machine Company. Nach mehreren Fusionen entstand daraus 1924 IBM – International Business Machines.
|
||
|
||
Die Lochkarte blieb bis in die 1970er das Standardformat für Dateneingabe.
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Hollerith-Lochkartenmaschine, ca. 1908
|
||
US Census Bureau
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Hollerith-Lochkartenmaschine
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Hollerith-Lochkartenmaschine, ca. 1940
|
||
US Census Bureau
|
||
-->
|
||
|
||
---
|
||
|
||
# Die Geburt von IBM
|
||
|
||
**Vom Einmannbetrieb zum Technologieriesen**
|
||
|
||
- 1896: Hollerith gründet *Tabulating Machine Company*
|
||
- 1911: Fusion zur *Computing-Tabulating-Recording Company* (CTR)
|
||
- 1924: Umbenennung in **International Business Machines (IBM)**
|
||
- Dominiert die nächsten 50 Jahre die Computerwelt
|
||
|
||
<!--
|
||
Thomas J. Watson Sr. übernahm 1914 die Führung und prägte IBM entscheidend. Sein Motto: "THINK" – stand auf Schildern in jedem IBM-Büro.
|
||
|
||
Warum "Big Blue"? IBMs Firmenfarbe war dunkelblau, ihre Großrechner hatten blaue Gehäuse. Der Spitzname entstand in den 1960ern.
|
||
|
||
Geschäftsmodell: IBM verkaufte nicht nur Maschinen, sondern vermietete sie – inklusive Wartung. Kunden waren abhängig. Ein frühes "Software-as-a-Service"-Modell.
|
||
|
||
Lochkarten blieben Standard bis in die 1970er. Die 80-Spalten-Karte prägte sogar frühe Bildschirmbreiten (80 Zeichen).
|
||
|
||
Heute: IBM hat sich neu erfunden – Cloud-Computing, KI (Watson), und 2019 Übernahme von Red Hat für 34 Milliarden Dollar.
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Hollerith-Maschinen im Dritten Reich
|
||
Dehomag = Deutsche Hollerith-Maschinen GmbH (IBM-Tochter)
|
||
-->
|
||
|
||
---
|
||
|
||
|
||
|
||
# IBM und NS-Deutschland
|
||
|
||
**Technologie im Dienst des Terrors**
|
||
|
||
- **Dehomag:** Deutsche Hollerith-Maschinen GmbH (IBM-Tochter)
|
||
- Volkszählung 1933: Identifikation von Juden
|
||
- Verwaltung der Konzentrationslager
|
||
- Logistik der Deportationen
|
||
|
||
→ Edwin Black: *"IBM and the Holocaust"* (2001)
|
||
|
||
<!--
|
||
Die Volkszählung 1933 fragte erstmals systematisch nach "Rasse" und Religion. Lochkarten ermöglichten die schnelle Auswertung – wer war Jude, wer Halbjude, wer mit wem verheiratet?
|
||
|
||
Dehomag war IBMs profitabelste Auslandstochter. IBM lieferte nicht nur Maschinen, sondern auch maßgeschneiderte Lochkarten und Wartung. Die Maschinen in den KZs trugen IBM-Seriennummern.
|
||
|
||
Edwin Blacks Buch basiert auf tausenden Dokumenten. IBM bestritt die Vorwürfe, zahlte aber 2001 Entschädigungen an Holocaust-Überlebende.
|
||
|
||
Die Frage für MedienarbeiterInnen: Hätte IBM "Nein" sagen können? Sollen? Müssen? Technologie ist nie neutral – sie wird von Menschen für Zwecke eingesetzt.
|
||
-->
|
||
|
||
---
|
||
|
||
# Lektionen für heute
|
||
|
||
**Technologie ist nie neutral**
|
||
|
||
- Big Data ermöglicht Massenüberwachung
|
||
- KI-Systeme übernehmen Entscheidungen über Menschen
|
||
- Social Media schädigt die psychische Gesundheit Minderjähriger
|
||
- PimEyes: RAF-Terroristin in 30 Minuten gefunden – Polizei brauchte 30 Jahre
|
||
|
||
→ Verantwortung liegt bei denen, die Technologie bauen und einsetzen
|
||
|
||
<!--
|
||
Aktuelle Beispiele (in Reihenfolge der Folie):
|
||
|
||
1. Big Data / Palantir: US-Firma liefert Überwachungssoftware an Polizei und Geheimdienste. In Deutschland nutzen es bereits Hessen, NRW, Bayern und Baden-Württemberg. Kritiker warnen vor "Rasterfahndung auf Knopfdruck".
|
||
Quellen: https://www.zdfheute.de/politik/deutschland/palantir-einsatz-polizei-deutschland-alternative-100.html
|
||
https://www.heise.de/en/news/Baden-Wuerttemberg-decides-on-the-use-of-Palantir-11075477.html
|
||
|
||
2. KI-Systeme: Algorithmen entscheiden über Kreditvergabe, Bewerbungen, Sozialleistungen. Oft intransparent, oft diskriminierend. Beispiel: Niederlande "Toeslagenaffaire" – Steuerbehörde nutzte Algorithmus, der Familien mit Migrationshintergrund systematisch als Betrüger einstufte. Regierung Rutte trat 2021 zurück.
|
||
Quelle: https://netzpolitik.org/2021/kindergeldaffaere-niederlande-zahlen-millionenstrafe-wegen-datendiskriminierung/
|
||
|
||
3. Social Media: 2026 verloren Meta und Google einen Prozess in Kalifornien – ihre Plattformen schädigen nachweislich die psychische Gesundheit Minderjähriger.
|
||
Quelle: https://www.latimes.com/california/story/2026-03-25/social-media-lawsuit-trial-meta-google-verdict
|
||
|
||
4. PimEyes/Clearview: Gesichtserkennungsdienste mit Milliarden Fotos aus dem Internet. Februar 2024: Ein Journalist fand RAF-Terroristin Daniela Klette in 30 Minuten – die Polizei hatte 30 Jahre gesucht. Beide Dienste gelten in der EU als illegal.
|
||
Quelle: https://netzpolitik.org/2024/nancy-faeser-was-das-innenministerium-zur-gesichtserkennung-plant/
|
||
|
||
Weitere Beispiele:
|
||
|
||
Cambridge Analytica (2018): Facebook-Daten von 87 Mio. Nutzern wurden für politische Werbung genutzt. Ob das tatsächlich Wahlen beeinflusst hat, ist umstritten – die Firmen behaupten es gerne, Belege fehlen.
|
||
|
||
China Social Credit System: Punktesystem für "gutes Verhalten". Wer zu oft bei Rot geht, bekommt keinen Kredit mehr.
|
||
|
||
Die Frage: Wer entscheidet, was mit Technologie gemacht wird? Die Entwickler? Die Firmen? Die Politik? Wir alle?
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Vom Ende des Zweiten Weltkriegs
|
||
## Geburt des modernen Computers
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Alan Turing, ca. 1940
|
||
Bletchley Park
|
||
-->
|
||
|
||
---
|
||
|
||
# Alan Turing (1912–1954)
|
||
|
||
**Begründer der theoretischen Informatik**
|
||
|
||
- 1936: Turing-Maschine – definiert, was Computer können (und was nicht)
|
||
- 1940er: Enigma-Entschlüsselung mit elektromechanischen Maschinen
|
||
- 1950: Turing-Test – erste formale Definition von "Künstlicher Intelligenz"
|
||
|
||
<!--
|
||
Alan Turing war seiner Zeit Jahrzehnte voraus. Mit 24 Jahren definierte er, was "Berechnung" mathematisch bedeutet – bevor es echte Computer gab.
|
||
|
||
Bletchley Park: Geheimes Entschlüsselungszentrum 80 km nördlich von London. 10.000 Menschen arbeiteten dort, darunter viele Frauen. Streng geheim bis in die 1970er.
|
||
|
||
Seine Arbeit verkürzte den Krieg um geschätzte 2-4 Jahre und rettete Millionen Leben. Aber er durfte nie darüber sprechen.
|
||
|
||
1952 wurde Turing wegen Homosexualität verurteilt – damals illegal in Großbritannien. Er wurde chemisch kastriert. 1954 starb er an Zyanidvergiftung, vermutlich Suizid. Er war 41.
|
||
|
||
2009: Offizielle Entschuldigung von Premierminister Gordon Brown.
|
||
2013: Königliche Begnadigung durch Queen Elizabeth II.
|
||
2021: 50-Pfund-Schein mit Turings Porträt.
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Der Turing-Test (1950): Ein Interrogator kommuniziert per Text mit einem Menschen und einer Maschine. Kann er nicht zuverlässig unterscheiden, wer wer ist, besteht die Maschine den Test.
|
||
-->
|
||
|
||
---
|
||
|
||
# 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)
|
||
|
||
<!--
|
||
Los Alamos, New Mexico
|
||
Geheimes Labor, beste WissenschaftlerInnen der Welt
|
||
Von Neumann kam 1943 als Berater
|
||
-->
|
||
|
||
---
|
||
|
||
|
||
|
||
# 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**
|
||
|
||
<!--
|
||
Neumann János Lajos → John von Neumann
|
||
Sprach 7 Sprachen fließend
|
||
Legendäre Anekdoten über sein Gedächtnis
|
||
Arbeitete am Manhattan-Projekt mit
|
||
-->
|
||
|
||
---
|
||
|
||
# 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
|
||
|
||
<!--
|
||
"Computer" war ein Job-Titel!
|
||
Meist Mathematikerinnen
|
||
Feynman leitete eine Abteilung davon
|
||
ENIAC-Projekt in Philadelphia sollte helfen
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
ENIAC (1945)
|
||
Electronic Numerical Integrator and Computer
|
||
University of Pennsylvania
|
||
-->
|
||
|
||
---
|
||
|
||
# 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
|
||
|
||
<!--
|
||
Kam zu spät für Manhattan-Projekt (Krieg war vorbei)
|
||
Aber bewies: Elektronische Berechnung möglich
|
||
Programmiert durch 6 Frauen (ENIAC Girls)
|
||
→ Erste ProgrammiererInnen der Geschichte
|
||
-->
|
||
|
||
---
|
||
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Grace Hopper, ca. 1984
|
||
US Navy
|
||
-->
|
||
|
||
---
|
||
|
||
|
||
|
||
# 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
|
||
|
||
<!--
|
||
Compiler: Übersetzt menschenlesbare Sprache in Maschinencode
|
||
COBOL läuft heute noch auf Bankensystemen
|
||
"It's easier to ask forgiveness than permission"
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Margaret Hamilton mit dem Quellcode der Apollo-Flugsoftware, 1969
|
||
MIT/NASA
|
||
-->
|
||
|
||
---
|
||
|
||
|
||
|
||
# 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
|
||
|
||
<!--
|
||
Das Foto zeigt sie neben dem ausgedruckten Quellcode – größer als sie selbst
|
||
Die Software priorisierte kritische Aufgaben automatisch
|
||
2016 erhielt sie die Presidential Medal of Freedom
|
||
-->
|
||
|
||
---
|
||
|
||
# Von-Neumann-Architektur (1945)
|
||
|
||
**Programme und Daten im selben Speicher**
|
||
|
||
1. **Rechenwerk (ALU)** – rechnet
|
||
2. **Steuerwerk** – steuert den Ablauf
|
||
3. **Speicherwerk** – speichert Code UND Daten
|
||
4. **Ein-/Ausgabe** – Tastatur, Bildschirm, Netzwerk
|
||
5. **Bus-System** – verbindet alles
|
||
|
||
→ Grundlage aller Computer: Laptop, Smartphone, Server
|
||
|
||
<!--
|
||
John von Neumann beschrieb 1945 das Prinzip im "First Draft of a Report on the EDVAC".
|
||
|
||
Vorher (ENIAC): Programme durch Umstecken von Kabeln – tagelange Arbeit für jedes neue Problem. Nachher: Programme als Daten im Speicher – austauschbar in Sekunden.
|
||
|
||
Das Revolutionäre: Programme liegen im selben Speicher wie Daten. Das klingt selbstverständlich, war aber ein Paradigmenwechsel. Vorher war ein Computer eine Maschine für genau ein Problem.
|
||
|
||
Der "Von-Neumann-Flaschenhals": CPU und Speicher teilen sich einen Bus – die Bandbreite begrenzt die Geschwindigkeit. Moderne CPUs umgehen das mit Caches (L1/L2/L3).
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: klausur -->
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
<!-- _backgroundColor: #fce4ec -->
|
||
|
||
# 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 (1945): Grundlage aller modernen Computer
|
||
5 KOMPONENTEN:
|
||
- ALU (Arithmetic Logic Unit): Rechnet (+, -, ×, ÷) und vergleicht (>, <, =)
|
||
- Steuerwerk: Holt Befehle, dekodiert sie, steuert Ausführung (Fetch-Decode-Execute)
|
||
- Speicherwerk: RAM (flüchtig) + ROM (permanent), enthält Code UND Daten
|
||
- Ein-/Ausgabe (I/O): Tastatur, Maus, Bildschirm, Netzwerk, USB, Sensoren
|
||
- Bus-System: Adressbus (wo), Datenbus (was), Steuerbus (wie)
|
||
KERNPRINZIP: Stored Program Concept - Programme im selben Speicher wie Daten
|
||
VORHER (z.B. ENIAC): Programme durch Umstecken von Kabeln, tagelange Arbeit
|
||
NACHHER: Programme als austauschbare Daten → Flexibilität, Software-Industrie möglich
|
||
PRÜFUNGSRELEVANT: 5 Komponenten benennen und erklären können, Stored Program Concept
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: klausur -->
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
<!-- _backgroundColor: #fce4ec -->
|
||
|
||
# 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)
|
||
|
||
<!--
|
||
BEDEUTUNG VON-NEUMANN-ARCHITEKTUR:
|
||
- Betriebssystem möglich: Lädt verschiedene Programme aus gleichem Speicher
|
||
- Apps installierbar: Können gelöscht/installiert werden ohne Hardware-Änderung
|
||
- Multitasking: Mehrere Programme gleichzeitig im Speicher
|
||
- Updates: Software austauschbar, Hardware bleibt gleich
|
||
- Universalrechner: Gleiche Hardware für Text, Spiele, Video, Wissenschaft
|
||
HARVARD-ARCHITEKTUR (Alternative):
|
||
- Separate Speicher für Code und Daten
|
||
- Vorteil: Schneller (paralleler Zugriff), sicherer (Code nicht überschreibbar)
|
||
- Nachteil: Weniger flexibel, aufwändiger
|
||
- Anwendung: Mikrocontroller (Arduino, ESP32), DSPs, einige ARM-Chips
|
||
MODERNE CPUs: Modified Harvard (L1-Cache getrennt für Speed, RAM gemeinsam für Flexibilität)
|
||
PRÜFUNGSRELEVANT: Warum Von-Neumann revolutionär, Unterschied zu Harvard, Beispiele
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# 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
|
||
|
||
<!--
|
||
ARPA (später DARPA) = Pentagon-Forschung
|
||
Sputnik-Schock 1957 → USA investiert in Forschung
|
||
Paul Baran (RAND Corp): Packet Switching
|
||
-->
|
||
|
||
---
|
||
|
||
# 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 |
|
||
|
||
<!--
|
||
ARPANET: 4 Knoten anfangs
|
||
Erste Nachricht: "LO" (Login, Absturz nach 2 Buchstaben!)
|
||
WWW ≠ Internet (WWW ist eine Anwendung AUF dem Internet)
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
ARPANET-Karte 1969
|
||
4 Knoten: UCLA, Stanford, UCSB, Utah
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
ARPANET-Karte 1969
|
||
4 Knoten: UCLA, Stanford, UCSB, Utah
|
||
-->
|
||
|
||
---
|
||
|
||
# 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
|
||
|
||
<!--
|
||
CERN = Europäische Organisation für Kernforschung
|
||
Berners-Lee wollte Forschungspapiere verlinken
|
||
WWW war NICHT kommerziell geplant!
|
||
Kostenlos freigegeben → darum existiert es
|
||
-->
|
||
|
||
---
|
||
|
||
# 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.
|
||
|
||
<!--
|
||
Google, Meta, Microsoft besitzen eigene Kabel
|
||
Sabotage-Risiko (Russland, Anker)
|
||
Latenz: Frankfurt → New York = ~80ms
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Teil 2: Bits & Bytes
|
||
## Die Sprache der Computer
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Bit = Binary Digit
|
||
Demonstration: Glühbirne AN/AUS = 1 Bit
|
||
-->
|
||
|
||
---
|
||
|
||
# Das Bit
|
||
|
||
**Kleinste Informationseinheit**
|
||
|
||
- **0 oder 1**
|
||
- AN oder AUS
|
||
- Strom fließt oder nicht
|
||
|
||
**BIT** = **B**inary Dig**IT** (Binärziffer)
|
||
Geprägt 1948 von Claude Shannon
|
||
|
||
<!--
|
||
Alles Digitale basiert darauf
|
||
Transistoren in CPUs: Milliarden Bits schalten Millionen Mal pro Sekunde
|
||
Shannon: Begründer der Informationstheorie
|
||
-->
|
||
|
||
---
|
||
|
||
# Das Byte
|
||
|
||
**8 Bits = 1 Byte**
|
||
|
||
```
|
||
0 1 0 0 1 0 0 1
|
||
```
|
||
|
||
**Wie viele Kombinationen?**
|
||
2⁸ = **256 Möglichkeiten** (0-255)
|
||
|
||
<!--
|
||
BYTE = Wortspiel aus "Bit" + "Bite" (Bissen)
|
||
Warum 8 Bits? IBM System/360 (1964) setzte Standard
|
||
2×2×2×2×2×2×2×2 = 256
|
||
-->
|
||
|
||
---
|
||
|
||
# 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**
|
||
|
||
<!--
|
||
1 Byte ist limitiert
|
||
Farbbild: Rot + Grün + Blau
|
||
256³ = 16.777.216 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
|
||
|
||
<!--
|
||
Hex = Shortcut für Menschen
|
||
1 Byte = 2 Hex-Ziffern (00-FF)
|
||
CSS-Farben nutzen Hex
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
---
|
||
|
||
# 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
|
||
|
||
<!--
|
||
Präfixe:
|
||
- 0x = "das ist Hexadezimal" (C, JavaScript, Python)
|
||
- U+ = Unicode-Codepoint (Standard für Zeichenkodierung)
|
||
- # = CSS-Konvention für Farben
|
||
|
||
Speicheradressen erklärt:
|
||
- 64-Bit-System → Adresse hat 64 Bit = 16 Hex-Ziffern
|
||
- Beispiel vollständig: 0x0000000000A04F20
|
||
^^^^^^^^^^
|
||
└── führende Nullen, meist ungenutzt
|
||
- Tools kürzen zu: 0xA04F20 (führende Nullen weggelassen)
|
||
- "0x" = Präfix, sagt nur "jetzt kommt Hex"
|
||
|
||
MAC-Adresse = eindeutige Hardware-ID der Netzwerkkarte
|
||
Fehlercodes: Windows zeigt diese bei Bluescreens
|
||
-->
|
||
|
||
---
|
||
|
||
# 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)!
|
||
|
||
<!--
|
||
Bits = kleines b, Bytes = großes B
|
||
Internetanbieter: Mbit/s (klingt größer!)
|
||
100 Mbit/s ÷ 8 = 12,5 MB/s
|
||
Warum? Marketing - 100 klingt besser als 12,5
|
||
-->
|
||
|
||
---
|
||
|
||
# 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**
|
||
|
||
<!--
|
||
Dezimal: SI-System (Système International) - Basis 10
|
||
Binär: IEC-Standard (International Electrotechnical Commission) - Basis 2
|
||
Kibi/Mebi/Gibi = Kunstwörter für binäre Einheiten
|
||
Hersteller nutzen Dezimal = klingt größer = Marketing
|
||
Windows zeigt binär, schreibt aber "GB" statt "GiB"
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Teil 3: Eure erste Webseite
|
||
## HTML-Grundlagen
|
||
|
||
---
|
||
|
||
# Was ist HTML? (1/2)
|
||
|
||
**H**yper**T**ext **M**arkup **L**anguage
|
||
|
||
* **Keine** Programmiersprache
|
||
* Am ehesten eine Formattierungssprache
|
||
* Beschreibt **Struktur und Aufbau** einer Webseite
|
||
* ```html
|
||
<p>Das ist ein Absatz.</p>
|
||
|
||
<input type="date"/>
|
||
```
|
||
|
||
|
||
|
||
<!--
|
||
HTML = Auszeichnungssprache (wie Markdown)
|
||
Erfunden 1989 von Tim Berners-Lee
|
||
Aktuelle Version: HTML5 (seit 2014)
|
||
-->
|
||
|
||
---
|
||
|
||
# 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*
|
||
* <small>Während wir in HTML von Elementen bzw. *elements* sprechen, so werden sie in JavaScript (JS) eher als *nodes* gelesen.</small>
|
||
|
||
---
|
||
|
||
# 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
|
||
<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
|
||
|
||
---
|
||
|
||
<!-- _class: klausur -->
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
<!-- _backgroundColor: #fce4ec -->
|
||
|
||
# HTML Metadaten
|
||
|
||
```html
|
||
<html>
|
||
<head>
|
||
<title>Im Browsertab als Überschrift sichtbar</title>
|
||
|
||
<meta name="description" content="" />
|
||
|
||
<meta name="og:image" content="https://...." />
|
||
</head>
|
||
|
||
...
|
||
|
||
</html>
|
||
```
|
||
|
||
* <small>*Webseiten werden nicht nur von Menschen besucht, sondern auch von Suchmaschinen, Programmen, Bots etc.*</small>
|
||
* <small>*Metadaten helfen bspw. auch Screen-Readern beim "Verstehen" der Inhalte*</small>
|
||
|
||
<!--
|
||
HEAD-BEREICH: Metadaten, nicht sichtbar im Browser-Fenster
|
||
WICHTIGE META-TAGS:
|
||
- <title>: Browser-Tab, Lesezeichen, Suchergebnis-Titel
|
||
- <meta name="description">: Suchergebnis-Snippet (max. 160 Zeichen)
|
||
- <meta name="viewport">: Mobile Darstellung (width=device-width)
|
||
- <meta charset="UTF-8">: Zeichenkodierung (Umlaute!)
|
||
OPEN GRAPH (og:*): Social Media Vorschau (Facebook, LinkedIn, WhatsApp)
|
||
- og:title, og:description, og:image, og:url
|
||
TWITTER CARDS: twitter:card, twitter:title, twitter:image
|
||
SEO-RELEVANZ: Google nutzt title + description für Ranking und Snippet
|
||
ACCESSIBILITY: <html lang="de"> für Screenreader-Aussprache
|
||
PRÜFUNGSRELEVANT: Was gehört in <head>, Unterschied zu <body>, wichtigste Meta-Tags
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: erklaerung -->
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
# HTML Metadaten – Vertiefung
|
||
|
||
Der `<head>`-Bereich enthält Informationen *über* das Dokument, nicht den sichtbaren Inhalt. Diese Metadaten steuern Browser-Verhalten, Suchmaschinen-Indexierung und Social-Media-Vorschauen.
|
||
|
||
**Kritische Meta-Tags:**
|
||
|
||
| Tag | Funktion | Beispiel |
|
||
|-----|----------|----------|
|
||
| `<title>` | Browser-Tab, Suchergebnis-Titel | `<title>HdM Stuttgart</title>` |
|
||
| `<meta charset>` | Zeichenkodierung (Umlaute!) | `<meta charset="UTF-8">` |
|
||
| `<meta viewport>` | Mobile Darstellung | `width=device-width, initial-scale=1` |
|
||
| `<meta description>` | Suchergebnis-Snippet (max 160 Zeichen) | SEO-kritisch |
|
||
|
||
**Open Graph Protocol (Facebook, 2010):**
|
||
```html
|
||
<meta property="og:title" content="Artikel-Titel">
|
||
<meta property="og:image" content="https://example.com/preview.jpg">
|
||
```
|
||
Steuert die Vorschau beim Teilen auf Facebook, LinkedIn, WhatsApp, Slack.
|
||
|
||
**SEO-Relevanz:** Google nutzt `<title>` und `<meta description>` für Ranking und Snippet-Anzeige. Fehlende Metadaten = schlechtere Auffindbarkeit.
|
||
|
||
---
|
||
|
||
# HTML-Tags und Attribute
|
||
|
||
```html
|
||
<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)
|
||
|
||
```html
|
||
<input type="" />
|
||
```
|
||
|
||
| Teil | Bezeichnung |
|
||
|------|-------------|
|
||
| `<input ...` | Eingabefeld |
|
||
| `type="date"` | Attribut *type* mit dem Wert *date* |
|
||
| `... />` | Schließendes `/` im *(öffnenden) Tag* enthalten |
|
||
|
||
---
|
||
|
||
# Vollständiges Grundgerüst
|
||
|
||
```html
|
||
<!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 |
|
||
|
||
<!--
|
||
Semantische Tags wichtig für Accessibility
|
||
h1 sollte nur einmal pro Seite vorkommen
|
||
a = anchor (Anker)
|
||
-->
|
||
|
||
---
|
||
|
||
# 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](https://code.visualstudio.com)
|
||
- Extension: "Live Server"
|
||
|
||
**Option 3: Online-Editoren**
|
||
- [https://codepen.io/pen/](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` |
|
||
|
||
<!--
|
||
Progressive Enhancement
|
||
HTML kann mehr als die meisten denken
|
||
JavaScript nur wenn wirklich nötig
|
||
Accessibility ist eingebaut
|
||
-->
|
||
|
||
---
|
||
|
||
# Beispiel: Details/Summary
|
||
|
||
```html
|
||
<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)
|
||
|
||
```html
|
||
<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
|
||
|
||
```html
|
||
<button>Add to favorites</button>
|
||
```
|
||
|
||
https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button
|
||
|
||
---
|
||
|
||
# Beispiel: Input/Eingabefeld
|
||
|
||
```html
|
||
<input
|
||
type="text"
|
||
maxlength="8"
|
||
size="10" />
|
||
```
|
||
|
||
https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input
|
||
|
||
---
|
||
|
||
# Beispiel: Dialog
|
||
|
||
```html
|
||
<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
|
||
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# "Barrierefreiheit"
|
||
## a11y – Accessibility
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Web Disability Simulator
|
||
|
||
---
|
||
|
||
<!-- _class: klausur -->
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
<!-- _backgroundColor: #fce4ec -->
|
||
|
||
# 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!**
|
||
|
||
<!--
|
||
ACCESSIBILITY (a11y): a + 11 Buchstaben + y
|
||
STATISTIK: ~15% der Weltbevölkerung haben eine Behinderung (WHO)
|
||
ARTEN VON EINSCHRÄNKUNGEN:
|
||
- Permanent: Blindheit, Taubheit, motorische Einschränkungen
|
||
- Temporär: Gebrochener Arm, Augen-OP, Ohrenentzündung
|
||
- Situativ: Helle Sonne (Kontrast), laute Umgebung (kein Audio), Baby auf Arm (eine Hand)
|
||
ASSISTIVE TECHNOLOGIEN:
|
||
- Screenreader: NVDA (Windows, kostenlos), VoiceOver (Apple), JAWS (kommerziell)
|
||
- Braillezeilen: Taktile Ausgabe für Blinde
|
||
- Switch-Geräte: Für motorische Einschränkungen
|
||
- Spracheingabe: Dragon NaturallySpeaking, Siri, Google Assistant
|
||
WCAG: Web Content Accessibility Guidelines (A, AA, AAA)
|
||
EUROPEAN ACCESSIBILITY ACT: Seit Juni 2025 verpflichtend!
|
||
PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: erklaerung -->
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
# Web-Zugänglichkeit – Vertiefung
|
||
|
||
**a11y** = Accessibility (a + 11 Buchstaben + y). Die WHO schätzt, dass 15% der Weltbevölkerung eine Behinderung haben – das sind über 1 Milliarde potenzielle Nutzer.
|
||
|
||
**Arten von Einschränkungen:**
|
||
|
||
| Typ | Permanent | Temporär | Situativ |
|
||
|-----|-----------|----------|----------|
|
||
| Visuell | Blindheit | Nach Augen-OP | Grelle Sonne |
|
||
| Motorisch | Amputation | Gebrochener Arm | Baby auf dem Arm |
|
||
| Auditiv | Taubheit | Ohrenentzündung | Laute Umgebung |
|
||
| Kognitiv | Legasthenie | Müdigkeit | Ablenkung |
|
||
|
||
**Assistive Technologien:**
|
||
- **Screenreader:** NVDA (Windows, kostenlos), VoiceOver (Apple, integriert), JAWS (kommerziell)
|
||
- **Braillezeilen:** Taktile Ausgabe, ~40–80 Zeichen
|
||
- **Switch-Geräte:** Ein-Knopf-Steuerung für motorische Einschränkungen
|
||
- **Eye-Tracking:** Blicksteuerung für Bewegungsunfähige
|
||
|
||
Screenreader lesen den DOM sequenziell – semantisches HTML (`<nav>`, `<main>`, `<button>`) ermöglicht Navigation per Tastenkürzel.
|
||
|
||
---
|
||
|
||
<!-- _class: klausur -->
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
<!-- _backgroundColor: #fce4ec -->
|
||
|
||
# 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)
|
||
|
||
<!--
|
||
RECHTLICHER RAHMEN:
|
||
- European Accessibility Act (EAA): EU-Richtlinie, seit 28. Juni 2025 in Kraft
|
||
- Betrifft: E-Commerce, Banking, Telekommunikation, Transport, E-Books
|
||
- BITV 2.0: Barrierefreie Informationstechnik-Verordnung (DE, öffentliche Stellen)
|
||
- BFSG: Barrierefreiheitsstärkungsgesetz (DE-Umsetzung des EAA)
|
||
- Strafen: Bis zu 100.000€ Bußgeld möglich
|
||
CURB-CUT-EFFEKT:
|
||
- Bordsteinabsenkung für Rollstuhlfahrer → hilft auch Kinderwagen, Rollkoffern, Fahrrädern
|
||
- Untertitel für Gehörlose → helfen in lauter Umgebung, beim Sprachlernen
|
||
- Kontrastreiche Farben → besser bei Sonnenlicht, für ältere Menschen
|
||
BUSINESS CASE:
|
||
- 15% Zielgruppe (Menschen mit Behinderung)
|
||
- +20% ältere Menschen (Sehschwäche, motorische Einschränkungen)
|
||
- SEO-Vorteile: Alt-Texte, semantisches HTML = besser für Google
|
||
PRÜFUNGSRELEVANT: EAA kennen, Curb-Cut-Effekt erklären können, Business Case
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: erklaerung -->
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
# Rechtliche Anforderungen – Vertiefung
|
||
|
||
Der **European Accessibility Act (EAA)** trat am 28. Juni 2025 in Kraft und betrifft erstmals auch private Unternehmen – nicht nur öffentliche Stellen.
|
||
|
||
**Betroffene Sektoren:**
|
||
- E-Commerce (Online-Shops)
|
||
- Bankdienstleistungen
|
||
- Telekommunikation
|
||
- E-Books und E-Reader
|
||
- Ticketing und Check-in-Terminals
|
||
|
||
**WCAG 2.2 – Konformitätsstufen:**
|
||
|
||
| Level | Anforderung | Beispiel |
|
||
|-------|-------------|----------|
|
||
| A | Minimum | Alt-Texte für Bilder |
|
||
| AA | Gesetzlicher Standard | Kontrast 4,5:1, Tastaturnavigation |
|
||
| AAA | Optimal | Gebärdensprache für Videos |
|
||
|
||
**Curb-Cut-Effekt:** Barrierefreiheit hilft allen. Bordsteinabsenkungen für Rollstühle nutzen auch Kinderwagen, Rollkoffer, Fahrräder. Untertitel helfen Gehörlosen, aber auch in lauten Umgebungen oder beim Sprachlernen.
|
||
|
||
**Sanktionen:** Bis zu 100.000 € Bußgeld bei Verstößen.
|
||
|
||
---
|
||
|
||
# WCAG: Der Standard
|
||
|
||
**W**eb **C**ontent **A**ccessibility **G**uidelines
|
||
|
||
**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 |
|
||
|
||
<!--
|
||
WCAG vom W3C (World Wide Web Consortium)
|
||
Aktuelle Version: WCAG 2.2 (2023)
|
||
Level: A (minimal), AA (Standard), AAA (optimal)
|
||
Gesetzlich meist Level AA gefordert
|
||
-->
|
||
|
||
---
|
||
|
||
# Perceivable: Wahrnehmbar
|
||
|
||
**Textalternativen für Nicht-Text:**
|
||
```html
|
||
<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
|
||
|
||
<!--
|
||
Leeres alt="" für dekorative Bilder
|
||
Contrast-Checker: WebAIM Contrast Checker
|
||
Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)
|
||
-->
|
||
|
||
---
|
||
|
||
# Operable: Bedienbar
|
||
|
||
**Tastaturzugänglich:**
|
||
```css
|
||
/* 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
|
||
|
||
<!--
|
||
Tab-Reihenfolge = DOM-Reihenfolge
|
||
Skip-Links: "Zum Hauptinhalt springen"
|
||
:focus-visible = nur bei Tastatur-Navigation
|
||
-->
|
||
|
||
---
|
||
|
||
# Understandable: Verständlich
|
||
|
||
**Sprache angeben:**
|
||
```html
|
||
<html lang="de">
|
||
```
|
||
|
||
**Konsistente Navigation:** Gleiche Elemente an gleicher Stelle
|
||
|
||
**Fehler erklären:**
|
||
```html
|
||
<input type="email" aria-describedby="email-error">
|
||
<p id="email-error" role="alert">
|
||
Bitte geben Sie eine gültige E-Mail-Adresse ein.
|
||
</p>
|
||
```
|
||
|
||
<!--
|
||
Screenreader nutzen lang für korrekte Aussprache
|
||
Konsistenz reduziert kognitive Last
|
||
Fehlermeldungen: konkret, hilfreich, am Feld
|
||
-->
|
||
|
||
---
|
||
|
||
# Robust: Technisch solide
|
||
|
||
**Semantisches HTML:**
|
||
```html
|
||
<!-- Schlecht -->
|
||
<div class="button" onclick="...">Klick mich</div>
|
||
|
||
<!-- Gut -->
|
||
<button type="button">Klick mich</button>
|
||
```
|
||
|
||
**ARIA nur wenn nötig:**
|
||
```html
|
||
<!-- 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>
|
||
```
|
||
|
||
<!--
|
||
ARIA = Accessible Rich Internet Applications
|
||
Erste Regel von ARIA: Wenn möglich, natives HTML nutzen!
|
||
button hat eingebaute Tastatur-Unterstützung
|
||
div-Button braucht JavaScript für Enter/Space
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: klausur -->
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
<!-- _backgroundColor: #fce4ec -->
|
||
|
||
# Barrieren im Netz vermeiden (a11y)
|
||
|
||
**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)
|
||
|
||
<!--
|
||
Automatische Tests finden ~30% der Probleme
|
||
Manuelles Testen unverzichtbar
|
||
Echte NutzerInnen einbeziehen = Gold-Standard
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: erklaerung -->
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
# Barrierefreiheit testen – Vertiefung
|
||
|
||
Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte Nutzer mit Behinderungen.
|
||
|
||
**Tastatur-Test (5 Minuten, jeder kann's):**
|
||
1. Maus weglegen, nur Tab + Enter + Pfeiltasten nutzen
|
||
2. Fokus-Indikator immer sichtbar? (kein `outline: none;`!)
|
||
3. Logische Reihenfolge? (nicht kreuz und quer)
|
||
4. Alle interaktiven Elemente erreichbar?
|
||
|
||
**Automatisierte Tools:**
|
||
|
||
| Tool | Typ | Findet |
|
||
|------|-----|--------|
|
||
| axe DevTools | Browser-Extension | ~30% der WCAG-Verstöße |
|
||
| WAVE | Browser-Extension | Struktur-Probleme, Kontrast |
|
||
| Lighthouse | Chrome DevTools | Performance + Accessibility |
|
||
| Pa11y | CLI | CI/CD-Integration |
|
||
|
||
**Screenreader-Kurztest:**
|
||
- macOS: `Cmd + F5` (VoiceOver)
|
||
- Windows: NVDA installieren (kostenlos)
|
||
- Augen schließen, nur zuhören: Ist die Seite verständlich?
|
||
|
||
**Gold-Standard:** Usability-Tests mit Menschen, die Assistive Technologien täglich nutzen.
|
||
|
||
---
|
||
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# 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/
|