diff --git a/slides/223015c/00-intro.md b/slides/223015c/00-intro.md new file mode 100644 index 0000000..5ca88e7 --- /dev/null +++ b/slides/223015c/00-intro.md @@ -0,0 +1,228 @@ +--- +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 +--- + + + + + + + +![bg cover opacity:0.2](./assets/background-termin-1.png) + +# 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/) + +--- + + + + +![bg fit](./assets/qr/slides-223015c.png) + +--- + + + +# 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 + +--- + + + + + + +# 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 + +--- + + + + +![bg fit](./assets/klausur-01.png) + +--- + + + + +![bg fit](./assets/klausur-02.png) + +--- + + + + +![bg fit](./assets/klausur-03.png) + +--- + + + + +![bg fit](./assets/splan.png) + +--- + + + + +![bg fit](./assets/asta.png) + diff --git a/slides/223015c/01-geschichte-grundlagen-html.md b/slides/223015c/01-geschichte-grundlagen-html.md index 44b3604..7ff35bf 100644 --- a/slides/223015c/01-geschichte-grundlagen-html.md +++ b/slides/223015c/01-geschichte-grundlagen-html.md @@ -140,6 +140,24 @@ Hochschule der Medien Stuttgart --- +# 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 @@ -893,8 +911,6 @@ Farbbild: Rot + Grün + Blau **Jede Hex-Ziffer = 4 Bits** 0-9, A-F (A=10, B=11, ..., F=15) -**Ihr kennt das:** `#FF0000` = Rot in CSS -