libretech
351e3dfc23
per user-request einen branch der main-content UND rewrite-content trägt — saubere separierung statt symlink/merge-conflict. struktur: - slides/<course>/ → main-content restored, eigene assets (kein new-demo-leak) - slides/<course>-2026/ → rewrite-content, eigene assets (komplett kopiert + new demos) Makefile: COURSES += 223015b-2026 223015c-2026 dhbw-2026 mit eigenen NAME/KAPITEL/DEPLOY/KLAUSUR-konfig. Klausur für b+c=1, dhbw=leer. Deploy-paths /hdm/223015b-2026 etc. make build durchlaufen für alle 6 decks, 0 fehler. dedup: 223015c+dhbw assets identisch in beiden ordnern (kein neu-demos auf b ergänzt). 223015b 86 → 120 files in -2026 (= +34 neue eroeffner/usb-c-drei-achsen/container-vs-codec/etc).
229 lines
4.2 KiB
Markdown
229 lines
4.2 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>
|
||
|
||
<!-- _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: '' -->
|
||
|
||
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Herzlich willkommen!
|
||
## Einführung
|
||
|
||
---
|
||
|
||
# Über mich
|
||
|
||
**Michael Werner Czechowski**
|
||
|
||
- Systems and Platform Engineer
|
||
- Schwerpunkte:
|
||
- Web-Technologien, Barriere-Armut, Open Source
|
||
- Hintergrund:
|
||
- Philosophie (Uni Stuttgart)
|
||
- Wirtschaftsinformatik (Leibniz-FH Hannover)
|
||
- Kontakt: lb-czechowski@hdm-stuttgart.de
|
||
|
||
---
|
||
|
||
# Warum dieses Modul?
|
||
|
||
**Das Internet ist überall** – aber was steckt dahinter?
|
||
|
||
* Warum sehen Webseiten auf dem Handy anders aus?
|
||
* Wie funktioniert eigentlich das Internet?
|
||
* Wie erkennen Sie, ob eine Werbeagentur gute Arbeit leistet?
|
||
* Was hat ein Unterseekabel mit meiner E-Mail zu tun?
|
||
* **→ Die Technik dahinter verstehen und fundierte Entscheidungen treffen**
|
||
|
||
---
|
||
|
||
# Das Ziel
|
||
|
||
**Technische Grundlagen verstehen**, um fundierte Entscheidungen treffen zu können.
|
||
|
||
Als Digital- und MedienwirtschaftlerInnen werdet ihr täglich mit technischen Fragen konfrontiert:
|
||
* Wie baue ich eine barrierearme Webseite?
|
||
* Welches Protokoll für welchen Zweck?
|
||
* Wie funktioniert das Web hinter den Kulissen?
|
||
* **→ Mitreden können – und selbst Webseiten bauen!**
|
||
|
||
---
|
||
|
||
# Was Sie hier lernen werden
|
||
|
||
**In dieser Veranstaltung erwerben Sie folgende Kompetenzen:**
|
||
|
||
* Geschichte des Computers und Internets
|
||
* HTML-Grundlagen und semantisches Markup
|
||
* CSS für Layout und Gestaltung
|
||
* Netzwerke und Protokolle (TCP/IP, DNS, HTTP(S))
|
||
* "Barrierefreiheit" im Web
|
||
* Grundlagen von JavaScript und Interaktivität
|
||
|
||
---
|
||
|
||
# Kurze Umfrage
|
||
|
||
**Bitte Hand heben:**
|
||
* Wer hat schon mal eine Webseite gebaut?
|
||
* Wer weiß, was HTML ist?
|
||
* Wer hat schon mal CSS geschrieben?
|
||
* Wer kennt den Unterschied zwischen Internet und WWW?
|
||
* Wer hat schon mal mit JavaScript gearbeitet?
|
||
|
||
---
|
||
|
||
# Kursübersicht
|
||
|
||
**Kapitel:**
|
||
|
||
1. Geschichte, Grundlagen & **HTML**
|
||
2. Netzwerke, Protokolle, **semantisches HTML** & **CSS**
|
||
3. Interaktivität, Animationen & **JavaScript**
|
||
|
||
**Ziel:** "Gelernte Hilflosigkeit" ablegen
|
||
|
||
---
|
||
|
||
<!-- _class: klausur -->
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
<!-- _backgroundColor: #fce4ec -->
|
||
|
||
# Prüfungsleistung
|
||
|
||
**Nach aktuellem Kenntnisstand:**
|
||
|
||
* 90 min insg. (Technik 1)
|
||
* Schriftliche Klausur (digital)
|
||
* Teils offene Fragen
|
||
* So gut wie kein Coding/Programmieren
|
||
* **Prüfungsrelevant:** Folien sind markiert mit anderem Hintergrund
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|