fix lecture number and update readme

- change lecture number from 223015b to 223015c - update README for Internettechnik lecture - update IMAGE_LIST with correct filenames
2025-12-18 00:52:48 +01:00
parent ecc7486cdd
commit 75c28fba58
5 changed files with 144 additions and 214 deletions
--- a/IMAGE_LIST.md
+++ b/IMAGE_LIST.md
@@ -1,99 +1,124 @@
 # Image List for HdM Internettechnik Slides

-This document lists all images needed for the lecture slides. Each image includes:
- **Filename**: Target filename in `./assets/`
- **Context**: Where/why it's used in the slides
- **AI Prompt**: Suggested prompt for image generation (Gemini, DALL-E, Midjourney, etc.)
-
-**Recommended settings:**
- Aspect ratio: 16:9 (1920x1080 or similar)
- Style: Clean, professional, educational
- For historical photos: Consider using real images from Wikipedia Commons or similar
-
-**Legend:**
- ✅ = Already exists in assets/
- ⬚ = Not yet created
+Save images to `./slides/assets/` with the exact filenames.

 ---

-## Intro / Title Slides
-
-### ⬚ digital-landscape.png
- **Context**: Opening slide background for Termin 1, sets futuristic tech mood
- **AI Prompt**: Futuristic digital landscape with glowing blue and purple data streams, abstract network connections, binary patterns flowing through a neon-lit cyber environment, wide cinematic shot, no text
-
-### ⬚ network-cables.png
- **Context**: Opening slide background for Termin 2 (Netzwerke, Protokolle, CSS)
- **AI Prompt**: Network infrastructure with colorful ethernet cables, server racks, fiber optic lights, data center aesthetic, blue and orange accent lighting, wide cinematic shot, no text
-
-### ⬚ javascript-code.png
- **Context**: Opening slide background for Termin 3 (Interaktivität, JavaScript)
- **AI Prompt**: JavaScript code on dark IDE background, syntax highlighting in vibrant colors, modern code editor aesthetic, shallow depth of field on code, programming atmosphere, wide cinematic shot, no text
+## background-termin-1.png
+**Gemini Prompt:**
+```
+Futuristic digital landscape with glowing blue and purple data streams, abstract network connections, binary patterns flowing through a neon-lit cyber environment, wide cinematic shot 16:9 aspect ratio, no text
+```

 ---

-## Termin 1: Geschichte, Grundlagen & HTML
+## background-termin-2.png
+**Gemini Prompt:**
+```
+Network infrastructure with colorful ethernet cables, server racks, fiber optic lights, data center aesthetic, blue and orange accent lighting, wide cinematic shot 16:9 aspect ratio, no text
+```

-### ⬚ hollerith-machine.jpg
- **Context**: Herman Hollerith's tabulating machine, US Census 1890
- **AI Prompt**: Historical photograph style of Hollerith tabulating machine from 1890s, punch card reader, mechanical computing device, sepia tone, museum exhibit quality, vintage industrial equipment
- **Search**: `Hollerith tabulating machine` on commons.wikimedia.org or `site:loc.gov Hollerith census`
+---

-### ⬚ dehomag-hollerith.jpg
- **Context**: IBM Hollerith machines used by Dehomag (Deutsche Hollerith-Maschinen GmbH) in 1930s Germany
- **AI Prompt**: Historical photograph style of Hollerith machines in 1930s German office setting, punch card processing, bureaucratic documentation, black and white historical photo aesthetic
- **Search**: `Dehomag Hollerith` or `Deutsche Hollerith-Maschinen` on commons.wikimedia.org or bundesarchiv.de
+## background-termin-3.png
+**Gemini Prompt:**
+```
+JavaScript code on dark IDE background, syntax highlighting in vibrant colors, modern code editor aesthetic, shallow depth of field on code, programming atmosphere, wide cinematic shot 16:9 aspect ratio, no text
+```

-### ⬚ oppenheimer-poster.jpg
- **Context**: Reference to Manhattan Project, introduces WWII computing context
- **AI Prompt**: Dramatic portrait in style of Oppenheimer movie poster, scientist silhouette against atomic explosion background, 1940s aesthetic, cinematic dramatic lighting
- **Search**: `Oppenheimer 2023 poster` or `J. Robert Oppenheimer portrait` on commons.wikimedia.org
+---

-### ⬚ john-von-neumann.jpg
- **Context**: Portrait of John von Neumann, father of computer architecture
- **AI Prompt**: Professional portrait of 1950s mathematician/scientist, suit and tie, blackboard with equations in background, academic setting, black and white photography style
- **Search**: `John von Neumann` on commons.wikimedia.org (public domain photos available)
+## hollerith-machine.tif
+**Search (preferred):**
+- commons.wikimedia.org: `Hollerith tabulating machine`
+- google.com: `site:loc.gov Hollerith census`

-### ⬚ eniac.jpg
- **Context**: ENIAC computer (1945), first electronic general-purpose computer
- **AI Prompt**: Historical photograph of ENIAC computer room, massive machine with vacuum tubes, cables, switches, 1940s technology, operators working, wide shot showing scale, black and white
- **Search**: `ENIAC computer` on commons.wikimedia.org or `site:archives.upenn.edu ENIAC`
+**Gemini Prompt (fallback):**
+```
+Historical photograph style of Hollerith tabulating machine from 1890s, punch card reader, mechanical computing device, sepia tone, museum exhibit quality, vintage industrial equipment, 16:9
+```

-### ⬚ arpanet-1969.png
- **Context**: First ARPANET map showing 4 nodes (UCLA, Stanford, UCSB, Utah)
- **AI Prompt**: Clean diagram of early ARPANET network from 1969, four nodes connected by lines, US map background, vintage technical drawing style, labeled nodes: UCLA, SRI, UCSB, Utah
- **Search**: `ARPANET 1969 map` or `ARPANET logical map` on commons.wikimedia.org
+---

-### ⬚ lightbulb-onoff.png
- **Context**: Explaining the bit concept (0 or 1, on or off)
- **AI Prompt**: Simple lightbulb comparison: one lit bright yellow, one dark/off, side by side, clean minimal style, binary concept visualization, white background, educational diagram
+## dehomag-hollerith.jpg
+**Search (preferred):**
+- commons.wikimedia.org: `Dehomag Hollerith`
+- bundesarchiv.de: `Deutsche Hollerith-Maschinen`
+
+**Gemini Prompt (fallback):**
+```
+Historical photograph of Hollerith machines in 1930s German office setting, punch card processing, bureaucratic documentation, black and white historical photo aesthetic, 16:9
+```
+
+---
+
+## oppenheimer-poster.jpg
+**Search (preferred):**
+- commons.wikimedia.org: `J. Robert Oppenheimer portrait`
+- google.com: `Oppenheimer 2023 movie poster`
+
+**Gemini Prompt (fallback):**
+```
+Dramatic portrait in style of Oppenheimer movie poster, scientist silhouette against atomic explosion background, 1940s aesthetic, cinematic dramatic lighting, 16:9
+```
+
+---
+
+## john-von-neumann.jpg
+**Search (preferred):**
+- commons.wikimedia.org: `John von Neumann portrait`
+- google.com: `John von Neumann LANL`
+
+**Gemini Prompt (fallback):**
+```
+Professional portrait of 1950s mathematician scientist, suit and tie, blackboard with equations in background, academic setting, black and white photography style, 16:9
+```
+
+---
+
+## eniac.jpg
+**Search (preferred):**
+- commons.wikimedia.org: `ENIAC computer`
+- google.com: `site:archives.upenn.edu ENIAC`
+
+**Gemini Prompt (fallback):**
+```
+Historical photograph of ENIAC computer room, massive machine with vacuum tubes cables switches, 1940s technology, operators working, wide shot showing scale, black and white, 16:9
+```
+
+---
+
+## arpanet-1969.png
+**Search (preferred):**
+- commons.wikimedia.org: `ARPANET 1969 map`
+- commons.wikimedia.org: `ARPANET logical map December 1969`
+
+**Gemini Prompt (fallback):**
+```
+Clean technical diagram of early ARPANET network from 1969, four nodes connected by lines on US map background, vintage technical drawing style, labeled nodes UCLA SRI UCSB Utah, 16:9
+```
+
+---
+
+## lightbulb-onoff.png
+**Gemini Prompt:**
+```
+Simple lightbulb comparison showing binary concept, one lightbulb lit bright yellow, one lightbulb dark off, side by side, clean minimal style, white background, educational diagram, 16:9
+```

 ---

 ## Summary

-| Lecture | Total | ✅ Done | ⬚ Todo |
-|---------|-------|--------|--------|
-| Intro/Title Slides | 3 | 0 | 3 |
-| Termin 1 (Geschichte/Grundlagen/HTML) | 7 | 0 | 7 |
-| Termin 2 (Netzwerke/Protokolle/CSS) | 0 | 0 | 0 |
-| Termin 3 (Interaktivität/JavaScript) | 0 | 0 | 0 |
-| **Total** | **10** | **0** | **10** |
-
---
-
-## Generation Tips
-
-1. **Historical photos**: Prefer real historical photos from Wikipedia Commons, Library of Congress, or university archives for authenticity
-2. **Diagrams**: Use "clean infographic style", "technical illustration", "minimal diagram" in prompts
-3. **Backgrounds**: Use "wide cinematic shot", "no text", "opacity-friendly" for title slide backgrounds
-4. **Consistency**: Add "educational style", "professional presentation" to maintain visual coherence
-
-## Asset Directory
-
-Create the assets directory if it doesn't exist:
-```bash
-mkdir -p ./assets
-```
-
-Place all images in `./slides/assets/` with the exact filenames listed above.
+| Image | Type |
+|-------|------|
+| background-termin-1.png | Generate |
+| background-termin-2.png | Generate |
+| background-termin-3.png | Generate |
+| hollerith-machine.tif/jpg | Search or Generate |
+| dehomag-hollerith.webp | Search or Generate |
+| oppenheimer.png | Search or Generate |
+| john-von-neumann.png | Search or Generate |
+| eniac.avif | Search or Generate |
+| arpanet-1969.png | Search or Generate |
+| lightbulb-onoff.png | Generate |
--- a/README.md
+++ b/README.md
@@ -1,17 +1,15 @@
-# 223015b – Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+# 223015c – Grundlagen IT- und Internettechnik

 **Modul "Technik 1"** · 1. Semester · Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart · Wintersemester 2025/26

-**Repository:** [git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
-
 ---

 ## Über dieses Modul

 > *Internettechnologien 1 – "Technische Grundlagen von IT-Projekten"*

-Die Digitalisierung verändert die Prozesse und Tätigkeiten in allen Branchen. Sie hat neue Geschäftsmodelle ermöglicht und auch unseren Alltag stark verändert. Kaum ein Projekt in der Medienwelt kommt ohne digitale Technik aus – als Produkt, Kollaborationsplattform oder Marketing- und Verkaufsplattform.
+Die Digitalisierung verändert die Prozesse und Tätigkeiten in allen Branchen. Kaum ein Projekt in der Medienwelt kommt ohne digitale Technik aus – als Produkt, Kollaborationsplattform oder Marketing- und Verkaufsplattform.

 **Ziel:** Technische Grundlagen verstehen, um mit Entwicklungsteams, Kunden und Projektpartnern auf Augenhöhe zusammenarbeiten zu können.

@@ -19,152 +17,59 @@ Die Digitalisierung verändert die Prozesse und Tätigkeiten in allen Branchen.

 | # | Datum | Thema |
 |---|-------|-------|
-| 1 | 19.12.2025 | Grundlagen, Text & Audio |
-| 2 | 09.01.2026 | Bild- & Videoformate |
-| 3 | 23.01.2026 | Speichermedien & Schnittstellen |
-| 4 | 30.01.2026 | Distribution, APIs & Zukunft |
-| 5 | TBA | Vertiefung & offene Fragen |
+| 1 | 20.12.2025 | Geschichte, Grundlagen & HTML |
+| 2 | 10.01.2026 | Netzwerke, Protokolle & CSS |
+| 3 | 24.01.2026 | Interaktivität & JavaScript |

 ### Kompetenzen

 In dieser Veranstaltung erwerben Sie folgende Kompetenzen:
- Technische Konzepte des Internets verstehen (Netzwerke, Protokolle, Client/Server)
- Dateiformate analysieren und verstehen
- Grundlagen von Kompression (Audio, Bild, Video)
- Speichermedien und Schnittstellen kennen
- APIs und Distributionswege verstehen
+- Geschichte der Informatik verstehen (Hollerith, Von-Neumann, ARPANET)
+- Technische Konzepte des Internets verstehen (Netzwerke, Protokolle, DNS, HTTP)
+- HTML-Seiten strukturieren und semantisch aufbauen
+- CSS für Layout und Design einsetzen (Selektoren, Box-Modell, Flexbox)
+- JavaScript für Interaktivität nutzen (DOM-Manipulation, Events)

-**Dozent:** Michael Czechowski · michael.czechowski@lehre.dhbw-stuttgart.de
+**Dozent:** Michael Czechowski · mail@librete.ch

 ---

-## Slides erstellen
+## Development

-### Basic Slide Structure
-
-Slides are written in Markdown and separated by `---`:
-
-```markdown
---
-marp: true
-theme: uncover
-paginate: true
---
-
-# Slide Title
-
-Content here
-
---
-
-# Next Slide
-
-More content
-```
-
-### Frontmatter
-
-Configure slide settings at the top:
-
-```yaml
---
-marp: true
-theme: uncover
-paginate: true
-backgroundColor: #fff
-title: My Presentation
---
-```
-
-### Themes
-
-Use built-in themes:
- `default`
- `gaia`
- `uncover`
-
-Or create custom themes in `themes/` directory.
-
-### Images and Assets
-
-Place images in `assets/` directory and reference them:
-
-```markdown
-![Alt text](assets/image.jpg)
-```
-
-## Custom Themes
-
-Create custom themes in `themes/` directory:
-
-```css
-/* @theme custom-theme */
-
-@import-theme "gaia";
-
-section {
-  background-color: #f0f8ff;
-  color: #2c3e50;
-}
-
-h1 {
-  color: #3498db;
-}
-```
-
-Apply custom theme in frontmatter:
-```yaml
---
-marp: true
-theme: custom-theme
---
-```
-
-## Development Workflow
-
-1. Edit slide files in `slides/` directory
-2. Use `npm run dev` for live preview
-3. Make changes and see updates automatically
-4. Export final version with `npm run export:pdf`
-
-## Makefile Commands
-
-Alternative commands using Make:
+### Voraussetzungen

 ```bash
-make build      # Build slides
-make dev        # Start development server
-make pdf        # Export to PDF
-make html       # Export to HTML
-make watch      # Watch for changes
-make clean      # Remove generated files
-make deploy     # Deploy slides to server
+npm install
 ```

-## Tips
+### Commands

- Use `---` to separate slides
- Frontmatter controls global settings
- Images should be in `assets/` directory
- Custom themes extend built-in themes
- PDF export requires Chrome/Chromium
+```bash
+npm run dev        # Development server (http://localhost:8080)
+npm run build      # Build slides
+npm run export:pdf # Export to PDF
+```

-## Troubleshooting
+### Makefile

- **PDF export fails**: Ensure Chrome/Chromium is installed
- **Server not starting**: Check if port 8080 is available
- **Styles not applying**: Verify theme file paths
- **Images not loading**: Check relative paths from slides directory
+```bash
+make dev    # Start development server
+make build  # Build slides
+make pdf    # Export to PDF
+make clean  # Remove generated files
+```

-## Contributing
+## Projektstruktur

-1. Follow the file structure conventions
-2. Use numbered prefixes for slide files
-3. Test builds before committing
-4. Keep commit messages lowercase and descriptive
+```
+slides/
+├── 2025-12-20-termin-1-geschichte-grundlagen-html.md
+├── 2026-01-10-termin-2-netzwerke-protokolle-css.md
+├── 2026-01-24-termin-3-interaktivitaet-javascript.md
+└── assets/
+    └── (images)
+```

 ## License

-This project is licensed under [Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)](https://creativecommons.org/licenses/by-sa/4.0/).
-
-This project uses Marp which is MIT licensed.
+Licensed under [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/).
--- a/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md
+++ b/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md
@@ -25,7 +25,7 @@ h2 {

 # Grundlagen IT- und Internettechnik

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

--- a/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
+++ b/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
@@ -25,7 +25,7 @@ h2 {

 # Grundlagen IT- und Internettechnik

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

--- a/slides/2026-01-24-termin-3-interaktivitaet-javascript.md
+++ b/slides/2026-01-24-termin-3-interaktivitaet-javascript.md
@@ -25,7 +25,7 @@ h2 {

 # Grundlagen IT- und Internettechnik

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