334 lines
8.4 KiB
Markdown
334 lines
8.4 KiB
Markdown
---
|
||
marp: true
|
||
theme: gaia
|
||
paginate: true
|
||
backgroundColor: #fff
|
||
header: "Grundlagen IT- und Internettechnik (223015c)"
|
||
footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
|
||
title: Grundlagen IT- und Internettechnik
|
||
---
|
||
<style>
|
||
:root {
|
||
--color-foreground: #1a1a2e;
|
||
--color-highlight: #d63384;
|
||
--color-dimmed: #4a4a6a;
|
||
}
|
||
section.invert {
|
||
--color-foreground: #fff;
|
||
}
|
||
section {
|
||
font-size: 1.7rem;
|
||
}
|
||
h1 {
|
||
color: #a02060;
|
||
}
|
||
section.invert h1 {
|
||
color: #fff;
|
||
}
|
||
h2 {
|
||
color: #1f2937;
|
||
}
|
||
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;
|
||
}
|
||
</style>
|
||
|
||
<!--
|
||
╔═══════════════════════════════════════════════════════════════════╗
|
||
║ AUTO-GENERATED FILE - DO NOT EDIT MANUALLY ║
|
||
║ ║
|
||
║ This file is generated by: make klausur ║
|
||
║ Source: scripts/extract-klausur.sh ║
|
||
║ ║
|
||
║ To update, edit the source slides and re-run make klausur ║
|
||
╚═══════════════════════════════════════════════════════════════════╝
|
||
-->
|
||
|
||
<!-- _class: invert -->
|
||
<!-- _header: '' -->
|
||
<!-- _backgroundColor: #000 -->
|
||
|
||
|
||
|
||
# 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: "" -->
|
||
|
||
|
||
# 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
|
||
-->
|
||
|
||
|
||
---
|
||
|
||
<!-- _header: "" -->
|
||
<!-- _footer: "" -->
|
||
|
||
|
||
# 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
|
||
|
||
---
|
||
|
||
<!-- _header: "" -->
|
||
<!-- _footer: "" -->
|
||
|
||
|
||
# Barrieren im Netz vermeiden (a11y)
|
||
|
||
**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](https://wave.webaim.org/), [axe DevTools](https://www.deque.com/axe/devtools/), [Web Disability Simulator](https://chromewebstore.google.com/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla)
|
||
|
||
<!--
|
||
Automatische Tests finden ~30% der Probleme
|
||
Manuelles Testen unverzichtbar
|
||
Echte NutzerInnen einbeziehen = Gold-Standard
|
||
-->
|
||
|
||
|
||
---
|
||
|
||
<!-- _header: "" -->
|
||
<!-- _footer: "" -->
|
||
|
||
|
||
# HTTP-Methoden
|
||
|
||
HTTP-Methoden beschreiben, **was** der Client mit einer Ressource tun will.
|
||
|
||
| Methode | Bedeutung | Beispiel |
|
||
|---------|-----------|-----------------------------------------------|
|
||
| **GET** | Daten abrufen | Seite laden `GET /index.html HTTP/2.0` |
|
||
| **POST** | Daten senden | Formular absenden `POST /login HTTP/2.0` |
|
||
| **PUT** | Daten ersetzen | Profil aktualisieren `PUT /users/42 HTTP/2.0` |
|
||
| **DELETE** | Daten löschen | Account löschen `DELETE /users/42 HTTP/2.0` |
|
||
|
||
<small>CRUD = Create, Read, Update, Delete</small>
|
||
|
||
|
||
<!--
|
||
SPEAKER NOTES:
|
||
|
||
Zum Schluss noch HTTP-Methoden.
|
||
|
||
GET ist das häufigste – "gib mir was". Wenn ihr eine URL aufruft, ist das ein GET.
|
||
|
||
POST schickt Daten zum Server – wenn ihr ein Formular abschickt.
|
||
|
||
PUT und DELETE sind für APIs – ersetzen oder löschen von Ressourcen.
|
||
|
||
Das wird wichtiger, wenn ihr mit REST-APIs arbeitet.
|
||
-->
|
||
|
||
|
||
---
|
||
|
||
<!-- _header: "" -->
|
||
<!-- _footer: "" -->
|
||
|
||
|
||
# HTTP Status-Codes
|
||
|
||
Jede HTTP-Response enthält einen dreistelligen Status-Code — die erste Ziffer verrät die Kategorie.
|
||
|
||
```http
|
||
HTTP/2.0 200 OK
|
||
HTTP/2.0 404 Not Found
|
||
HTTP/2.0 500 Internal Server Error
|
||
```
|
||
|
||
| Code-Bereich | Bedeutung |
|
||
|--------------|-----------|
|
||
| **2xx** | Erfolg (200 OK, 201 Created) |
|
||
| **3xx** | Umleitung (301 Moved, 304 Not Modified) |
|
||
| **4xx** | Client-Fehler (400 Bad Request, 404 Not Found) |
|
||
| **5xx** | Server-Fehler (500 Internal Error, 503 Unavailable) |
|
||
|
||
<!--
|
||
SPEAKER NOTES:
|
||
|
||
Status-Codes sagen euch, was passiert ist.
|
||
|
||
2xx heißt: Alles gut. 200 OK ist der Normalfall.
|
||
|
||
3xx heißt: Umleitung. Die Seite ist woanders.
|
||
|
||
4xx heißt: Ihr habt was falsch gemacht. 404 kennt ihr – Seite nicht gefunden. 403 heißt: Zugriff verweigert.
|
||
|
||
5xx heißt: Der Server hat ein Problem. 500 ist ein generischer Fehler, 503 heißt: Server überlastet.
|
||
-->
|
||
|
||
|
||
---
|
||
|
||
<!-- _header: "" -->
|
||
<!-- _footer: "" -->
|
||
|
||
|
||
# Selektoren: ID
|
||
|
||
|
||
|
||
```html
|
||
<nav id="hauptnavigation">...</nav>
|
||
```
|
||
|
||
```css
|
||
#hauptnavigation {
|
||
background: #333;
|
||
padding: 1rem;
|
||
}
|
||
```
|
||
|
||
**Raute** vor dem Namen = ID
|
||
|
||
**Achtung:** IDs sollten **einmalig** pro Seite sein.
|
||
|
||
<!--
|
||
SPEAKER NOTES:
|
||
|
||
ID-Selektoren sind noch spezifischer. Raute vor dem Namen.
|
||
|
||
IDs sollten auf einer Seite nur einmal vorkommen. Für Navigation, Header, Footer, Main – einmalige Elemente.
|
||
|
||
In der Praxis: Klassen sind meist besser. IDs haben hohe Spezifität und sind unflexibel.
|
||
-->
|
||
|
||
|
||
---
|
||
|
||
<!-- _header: "" -->
|
||
<!-- _footer: "" -->
|
||
|
||
|
||
# Farben
|
||
|
||
|
||
|
||
CSS kennt fünf Farb-Notationen: **Keyword**, **Hex**, **RGB**, **RGBA** und **HSL**.
|
||
|
||
```css
|
||
/* Keyword */
|
||
color: red;
|
||
color: rebeccapurple;
|
||
/* Hex */
|
||
color: #FF0000;
|
||
color: #F00;
|
||
/* RGB = Red Green Blue, RGBA mit Alpha */
|
||
color: rgb(255, 0, 0);
|
||
color: rgba(255, 0, 0, 0.5);
|
||
/* HSL = Hue, Saturation, Lightness */
|
||
color: hsl(0, 100%, 50%);
|
||
```
|
||
|
||
MDN-Referenz: [CSS `<color>`](https://developer.mozilla.org/de/docs/Web/CSS/Reference/Values/color_value)
|
||
|
||
<!--
|
||
SPEAKER NOTES:
|
||
|
||
Farben können auf verschiedene Arten angegeben werden.
|
||
|
||
Keywords: red, blue, rebeccapurple. Begrenzte Auswahl, aber lesbar.
|
||
|
||
Hex: Sechs Zeichen, je zwei für Rot, Grün, Blau. #FF0000 ist reines Rot.
|
||
|
||
RGB: Gleiche Idee, aber dezimal. rgb(255, 0, 0).
|
||
|
||
RGBA: Mit Alpha-Kanal für Transparenz. 0 ist unsichtbar, 1 ist voll sichtbar.
|
||
|
||
HSL: Hue, Saturation, Lightness. Manchmal intuitiver für Farbanpassungen.
|
||
-->
|