public/uni

Fork 0

Files

T

libretech 1dd983a453

223015c 01: tippfehler/grammatik/fachfehler korrigiert, frage-headings entschärft

2026-06-17 12:17:55 +02:00

55 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 – SoSe 2026	Kapitel 1: Geschichte, Grundlagen & HTML

Grundlagen IT- und Internettechnik

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

Sommersemester 2026

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

Kursübersicht

Kapitel:

Geschichte, Grundlagen & HTML
Netzwerke, Protokolle, semantisches HTML & CSS
Interaktivität, Animationen & JavaScript

Ziel: Technische Scheu abbauen und Web-Grundlagen selbst beherrschen

Ressourcen zum Selbstlernen

CODE CRISPIES: https://codecrispi.es/
Online Code-Editor: https://codepen.io/pen/
MDN (Mozilla Developer Network): https://developer.mozilla.org/de/
Flexbox-Spiel: https://flexboxfroggy.com/
Grid-Spiel: https://cssgridgarden.com/

Kapitel 1

Geschichte, Grundlagen & HTML

Die Geschichte des Computers

Vom ersten Algorithmus bis zum globalen Netzwerk

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

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

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

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)

Vom Ende des Zweiten Weltkriegs

Geburt des modernen Computers

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"

Das Manhattan-Projekt (1942–1945)

Problem: Millionen von Berechnungen nötig für:

Ballistik-Berechnungen
Implosions-Simulationen
Nuklearphysik-Gleichungen

Lösung 1943: Die Berechnungen übernehmen menschliche "Computer" → Mathematikerinnen mit Taschenrechnern & IBM-Lochkarten

Das ist zu langsam → es entsteht der Bedarf an automatischer Berechnung

Schlüsselfigur: John von Neumann (Mathematik & Stoßwellen)

John von Neumann (1903–1957)

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

Beiträge:

Quantenmechanik
Spieltheorie
Computerarchitektur

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-Neumann-Architektur (1945)

Die zentrale Idee: Programme und Daten im selben Speicher

Vorher (z.B. ENIAC): Programme durch Umstecken von Kabeln → Tagelange Arbeit für jedes neue Problem

Nachher: Programme als austauschbare Daten im Speicher → Grundlage aller Computer: Laptop, Smartphone, Server

Von-Neumann: 5 Komponenten

Komponente	Funktion	Heute
Rechenwerk (ALU)	Führt Berechnungen durch	Teil der CPU
Steuerwerk	Interpretiert Befehle, steuert Ablauf	Teil der CPU
Speicherwerk	Speichert Programme UND Daten	RAM + SSD
Ein-/Ausgabe	Tastatur, Bildschirm, Netzwerk	USB, WiFi, HDMI
Bus-System	Verbindet alle Komponenten	PCIe, SATA, DDR

Kernprinzip: Programme und Daten teilen sich denselben Speicher. → Computer wird universell programmierbar (nicht mehr für ein Problem verdrahtet)

Bus = Adressbus (wohin?) + Datenbus (was?) + Steuerbus (lesen/schreiben?)

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)

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

Kathleen Booth (1922–2022)

Die erste Stufe über Maschinencode

Entwickelt am Birkbeck College, London
Mnemonische Befehle statt Binärzahlen (MOV, ADD, JMP)
Jeder Befehl entspricht direkt einer CPU-Instruktion
Hardwarenah, aber für Menschen lesbar

Kuriosum: Chris Sawyer schrieb RollerCoaster Tycoon (1999) fast komplett in x86-Assembly

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

Lektionen für heute

Technologie ist nie neutral

Big Data ermöglicht Massenüberwachung
KI-Systeme übernehmen Entscheidungen über Menschen
Social Media schädigt nachweislich die psychische Gesundheit Minderjähriger
PimEyes: RAF-Terroristin in 30 Minuten gefunden – Polizei brauchte 30 Jahre

→ Verantwortung liegt bei denen, die Technologie bauen, einsetzen und regulieren

Vom Militär zum Netz

Die Entstehung des Internets

Kalter Krieg: Das Problem der Kommunikation

1957: Sputnik-Schock → USA investiert massiv in Forschung → ARPA (Advanced Research Projects Agency) wird gegründet

Das Problem: Zentrale Netzwerke sind verwundbar → Ein Treffer = gesamte Kommunikation tot

Die Idee (Paul Baran, 1964): Packet Switching → Nachrichten in kleine Pakete aufteilen → Jedes Paket findet seinen eigenen Weg → Kein einzelner Punkt kann das Netz zerstören

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)

Keine "Cloud" ohne Kabel – das Internet ist physische Infrastruktur.

Five Eyes (USA, UK, Kanada, Australien, Neuseeland): → Zapfen Unterseekabel an – globale Massenüberwachung

Bit & Byte

Die Sprache der Computer

Das Bit

Kleinste logische 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

Die kleinste adressierbare Informationseinheit

8 bit = 1 Byte

0 0 1 0 1 0 1 0                                                                              = 42

Das Byte

8 bit = 1 Byte

0 0 0 0 0 0 0 0                                                                               = 0
0 0 0 0 0 0 0 1                                                                               = 1
0 0 0 0 0 0 1 0                                                                               = 2
0 0 0 0 0 0 1 1                                                                               = 3
0 0 0 0 0 1 0 0                                                                               = 4

0 1 0 0 0 0 0 0                                                                               = 64
0 1 1 1 1 1 1 1                                                                               = 127
1 1 1 1 1 1 1 1                                                                               = ?

2 × 2 × 2 × 2 × 2 × 2 × 2 × 2 = 2⁸ = 256 mögliche Zustände

256 Zustände – was sich damit darstellen lässt

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

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

Hexadezimal: Lesbarkeit

Für den Menschen ungeeignet: 01001101 01010000 00110011

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

Jede Hex-Ziffer = 4 Bit (ein "Nibble") 0-9, A-F (A=10, B=11, ..., F=15)

4 = 0100 D = 1101 5 = 0101 0 = 0000 3 = 0011 3 = 0011

Wo euch Hex-Code begegnet

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

Bit vs. Byte: der Unterschied

1 Byte = 8 Bit → Bit ÷ 8 = Byte

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

100 Mbit/s Bandbreite = 12,5 MB/s Downloadrate

Unsere erste Webseite

HTML-Grundlagen

Was ist HTML? (1/2)

HyperText Markup Language

Keine Programmiersprache
Am ehesten eine Auszeichnungssprache (Markup)

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 Document Object Model (DOM)
Das 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)

HTML ist eine Auszeichnungssprache (Markup).

HTML folgt einer strengen Syntax zum Auszeichnen digitaler Inhalte
- Syntax: <element attribute="value"> ... </element>
- Öffnende und schließende HTML-Tags müssen identisch sein
- Das schließende Tag hat ein / direkt nach der öffnenden spitzen Klammer (</p>)

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> Aufklapp-Text (Akkordion)
- 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>HdM Webseite - Hochschule der Medien</title>
    <meta name="description" content="Studieren. Wissen. Machen." />
    <meta name="og:image" content="https://...." />
    ...
  </head>
  ...
</html>

Webseiten besuchen nicht nur Menschen, sondern auch Suchmaschinen, Bots, Screen-Reader. Metadaten helfen beim "Verstehen" der Inhalte.

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 (Ehemals Facebook, 2010):

<meta property="og:title" content="Artikel-Titel">
<meta property="og:image" content="https://example.com/preview.jpg">

Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack ...

SEO-Relevanz: Google nutzt <title> und <meta description> für Ranking und Snippet-Anzeige. Fehlende Metadaten = schlechtere Auffindbarkeit.

HTML-Tags und Attribute

<body>
  <p class="wichtig">Das ist ein wichtiger Absatz.</p>
  <p>Das ist ein gewöhnlicher Absatz.</p>
</body>

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

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

Geburtsdatum <input type="date" />

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

Natives HTML

Vieles, was früher JavaScript erforderte, beherrscht HTML inzwischen selbst. Wer es dennoch per Skript löst, produziert einen sogenannten "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

Akkordion · Accordion · Aufklappmenü · Collapsible · Collapsable · Expandible

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

Dokumentation auf developer.mozilla.org

Code-Beispiel auf codecrispi.es

Beispiel: Details/Summary (geöffnet)

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

Dokumentation auf developer.mozilla.org

Code-Beispiel auf codecrispi.es

Beispiel: Button

<button>Add to favorites</button>

Dokumentation auf developer.mozilla.org

Code-Beispiel auf codecrispi.es

Beispiel: Input/Eingabefeld

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

Dokumentation auf developer.mozilla.org

Code-Beispiel auf codecrispi.es

Beispiel: Dialog

Modal · Modales Fenster · Popup · Popup-Fenster · Overlay · Dialogfenster

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

Dokumentation auf developer.mozilla.org

Code-Beispiel auf codecrispi.es

"Barrierefreiheit"

Wie Menschen das Web nutzen

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

→ Nicht alle Menschen nutzen Maus oder Touchscreens gleichermaßen.

Web-Zugänglichkeit – Vertiefung

Die WHO schätzt, dass 15% der Weltbevölkerung eine Behinderung haben – das sind über 1 Milliarde potenzielle NutzerInnen.

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 & Narrator (Windows), VoiceOver (macOS/iOS), TalkBack (Android), Orca (Linux) – überwiegend builtin oder Open Source; JAWS (Windows) 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.

Bedeutung von "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, temporäre Einschränkungen)
Größerer Markt (~15% der Bevölkerung)

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

Sanktionen: Bis zu 100.000 € Bußgeld bei Verstößen

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.

WCAG: Der Standard

Web Content Accessibility Guidelines · Herausgeber: W3C / WAI · WCAG 2.2 (Okt. 2023) verbindlich · WCAG 3 Working Draft (März 2026)

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

Konformitätslevel: A · AA (gesetzlicher Standard) · AAA · w3.org/WAI/WCAG22/quickref

Perceivable: Wahrnehmbar

Texte:

Kontrast: Mindestens 4,5:1 für Text
Untertitel: Videos brauchen Captions
Responsive: Inhalte bei 200% Zoom nutzbar

Textalternativen für Nicht-Text:

<img src="tankman.jpg"
     alt="Ein Mann mit Einkaufstüten steht
          allein vor einer Reihe Panzer –
          Tiananmen-Platz, Peking,
          5. Juni 1989">

Operable: Bedienbar

Tastaturzugänglich:

/* Fokus-Ring nur bei Tastatur-Navigation */
button:focus-visible {
  outline: 3px solid #d63384;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Anti-Pattern: Tastatur-Nutzende sind "blind" */
button:focus { outline: none; }

Genügend Zeit: Session-Timeouts ankündigen, Verlängerung ermöglichen

Kein Flackern: max. 3×/Sekunde (schützt vor epileptischen Anfällen)

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>

Barrierefreiheit testen

Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte NutzerInnen mit Behinderungen.

Tastatur-Test – Maus weglegen, nur diese Tasten nutzen:

Barrierefreiheit testen – Werkzeuge

Automatisierte Tools (finden ~30% der Verstöße):

Tool	Typ	Findet
WAVE	Browser-Extension	Kontrast, Struktur, Tab-Reihenfolge
Lighthouse	Chrome DevTools	Performance + A11y-Audit
Pa11y	CLI	CI/CD-Integration
axe DevTools	Browser-Extension (Pro · Profi-Tool)	Detailanalyse, Regel-Engine

Screenreader (OS-nativ oder OSS):

OS	Screenreader	Hinweis
macOS / iOS	VoiceOver (`Cmd + F5`)	builtin
Windows	NVDA · Narrator	NVDA OSS, Narrator builtin
Linux	Orca + espeak-ng	GNOME builtin
Android	TalkBack	builtin

Manueller Test: SR aktivieren, Formular ausfüllen. Einarbeitung nötig – "Augen schließen" bildet echte SR-Nutzung nicht ab.

Gold-Standard: Usability-Tests mit Menschen, die Assistive Technologien täglich nutzen.

Tastatur-Test:

Alle Funktionen sind nur mit Tab + Enter nutzbar
Fokus immer sichtbar: Textlinks, Buttons, Texteingabe etc.
Logische Tab-Reihenfolge: "Skip to main", Navigation, Hauptinhalt

Screenreader-Test:

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

Tools/Browser-Extensions:

WAVE, axe DevTools, Web Disability Simulator

Fragen & Diskussion

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:

Michael Czechowski
Markus Thamm / Wolfgang Gruel (HdM Stuttgart)

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

55 KiB Raw Blame History Unescape Escape

Grundlagen IT- und Internettechnik

Kursübersicht

Ressourcen zum Selbstlernen

Kapitel 1

Geschichte, Grundlagen & HTML

Die Geschichte des Computers

Vom ersten Algorithmus bis zum globalen Netzwerk

Ada Lovelace (1815–1852)

Herman Hollerith (1860–1929)

Die Geburt von IBM

IBM und NS-Deutschland

Vom Ende des Zweiten Weltkriegs

Geburt des modernen Computers

Alan Turing (1912–1954)

Das Manhattan-Projekt (1942–1945)

John von Neumann (1903–1957)

ENIAC (1945)

Von-Neumann-Architektur (1945)

Von-Neumann: 5 Komponenten

Von-Neumann-Architektur: Bedeutung

Grace Hopper (1906–1992)

Kathleen Booth (1922–2022)

Margaret Hamilton (*1936)

Lektionen für heute

Vom Militär zum Netz

Die Entstehung des Internets

Kalter Krieg: Das Problem der Kommunikation

Internet-Timeline

Das WWW (1989)

1,3 Millionen Kilometer Unterseekabel

Bit & Byte

Die Sprache der Computer

Das Bit

Kleinste logische Informationseinheit

Das Byte

Die kleinste adressierbare Informationseinheit

8 bit = 1 Byte

Das Byte

8 bit = 1 Byte

256 Zustände – was sich damit darstellen lässt

Hexadezimal: Lesbarkeit

Wo euch Hex-Code begegnet

Bit vs. Byte: der Unterschied

Unsere erste Webseite

HTML-Grundlagen

Was ist HTML? (1/2)

Was ist HTML? (2/2)

HTML-Anatomie (1/2)

HTML-Anatomie (2/2)

Darstellungsebene und Metadaten

HTML Metadaten

HTML Metadaten – Vertiefung

HTML-Tags und Attribute

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

Vollständiges Grundgerüst

Die wichtigsten Tags

Natives HTML

Beispiel: Details/Summary

Beispiel: Details/Summary (geöffnet)

Beispiel: Button

Beispiel: Input/Eingabefeld

Beispiel: Dialog

"Barrierefreiheit"

Accessibility (a11y)

Wie Menschen das Web nutzen

Wie Menschen das Web nutzen

Web-Zugänglichkeit – Vertiefung

Bedeutung von "Barrierefreiheit"

Rechtliche Anforderungen – Vertiefung

WCAG: Der Standard

Perceivable: Wahrnehmbar

Texte:

Textalternativen für Nicht-Text:

Operable: Bedienbar

Understandable: Verständlich

Robust: Technisch solide

Barrierefreiheit testen

Barrierefreiheit testen – Werkzeuge

Barrieren im Netz vermeiden (a11y)

55 KiB

Raw Blame History