hdm/223015c
1
0
Fork 0
Code Pull Requests Activity

fix lecture number and update readme

Browse Source 
- change lecture number from 223015b to 223015c
- update README for Internettechnik lecture
- update IMAGE_LIST with correct filenames
This commit is contained in:
libretech
2025-12-18 00:52:48 +01:00
parent ecc7486cdd
commit 75c28fba58
5 changed files with 144 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files
IMAGE_LIST.md
+104 -79
View File
@@ -1,99 +1,124 @@
# Image List for HdM Internettechnik Slides # Image List for HdM Internettechnik Slides
This document lists all images needed for the lecture slides. Each image includes: Save images to `./slides/assets/` with the exact filenames.
- **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
--- ---
## Intro / Title Slides ## background-termin-1.png
**Gemini Prompt:**
### ⬚ digital-landscape.png ```
- **Context**: Opening slide background for Termin 1, sets futuristic tech mood 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
- **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
--- ---
## 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 ## background-termin-3.png
- **Context**: IBM Hollerith machines used by Dehomag (Deutsche Hollerith-Maschinen GmbH) in 1930s Germany **Gemini Prompt:**
- **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 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 ## hollerith-machine.tif
- **Context**: Portrait of John von Neumann, father of computer architecture **Search (preferred):**
- **AI Prompt**: Professional portrait of 1950s mathematician/scientist, suit and tie, blackboard with equations in background, academic setting, black and white photography style - commons.wikimedia.org: `Hollerith tabulating machine`
- **Search**: `John von Neumann` on commons.wikimedia.org (public domain photos available) - google.com: `site:loc.gov Hollerith census`
### ⬚ eniac.jpg **Gemini Prompt (fallback):**
- **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 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
- **Search**: `ENIAC computer` on commons.wikimedia.org or `site:archives.upenn.edu ENIAC` ```
### ⬚ 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 ## dehomag-hollerith.jpg
- **Context**: Explaining the bit concept (0 or 1, on or off) **Search (preferred):**
- **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 - 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 ## Summary
| Lecture | Total | ✅ Done | ⬚ Todo | | Image | Type |
|---------|-------|--------|--------| |-------|------|
| Intro/Title Slides | 3 | 0 | 3 | | background-termin-1.png | Generate |
| Termin 1 (Geschichte/Grundlagen/HTML) | 7 | 0 | 7 | | background-termin-2.png | Generate |
| Termin 2 (Netzwerke/Protokolle/CSS) | 0 | 0 | 0 | | background-termin-3.png | Generate |
| Termin 3 (Interaktivität/JavaScript) | 0 | 0 | 0 | | hollerith-machine.tif/jpg | Search or Generate |
| **Total** | **10** | **0** | **10** | | dehomag-hollerith.webp | Search or Generate |
| oppenheimer.png | Search or Generate |
--- | john-von-neumann.png | Search or Generate |
| eniac.avif | Search or Generate |
## Generation Tips | arpanet-1969.png | Search or Generate |
| lightbulb-onoff.png | Generate |
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.
README.md
+37 -132
View File
@@ -1,17 +1,15 @@
# 223015b – Dateiformate, Schnittstellen, Speichermedien & Distributionswege # 223015c – Grundlagen IT- und Internettechnik
**Modul "Technik 1"** · 1. Semester · Digital- und Medienwirtschaft **Modul "Technik 1"** · 1. Semester · Digital- und Medienwirtschaft
Hochschule der Medien Stuttgart · Wintersemester 2025/26 Hochschule der Medien Stuttgart · Wintersemester 2025/26
**Repository:** [git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
--- ---
## Über dieses Modul ## Über dieses Modul
> *Internettechnologien 1 – "Technische Grundlagen von IT-Projekten"* > *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. **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 | | # | Datum | Thema |
|---|-------|-------| |---|-------|-------|
| 1 | 19.12.2025 | Grundlagen, Text & Audio | | 1 | 20.12.2025 | Geschichte, Grundlagen & HTML |
| 2 | 09.01.2026 | Bild- & Videoformate | | 2 | 10.01.2026 | Netzwerke, Protokolle & CSS |
| 3 | 23.01.2026 | Speichermedien & Schnittstellen | | 3 | 24.01.2026 | Interaktivität & JavaScript |
| 4 | 30.01.2026 | Distribution, APIs & Zukunft |
| 5 | TBA | Vertiefung & offene Fragen |
### Kompetenzen ### Kompetenzen
In dieser Veranstaltung erwerben Sie folgende Kompetenzen: In dieser Veranstaltung erwerben Sie folgende Kompetenzen:
- Technische Konzepte des Internets verstehen (Netzwerke, Protokolle, Client/Server) - Geschichte der Informatik verstehen (Hollerith, Von-Neumann, ARPANET)
- Dateiformate analysieren und verstehen - Technische Konzepte des Internets verstehen (Netzwerke, Protokolle, DNS, HTTP)
- Grundlagen von Kompression (Audio, Bild, Video) - HTML-Seiten strukturieren und semantisch aufbauen
- Speichermedien und Schnittstellen kennen - CSS für Layout und Design einsetzen (Selektoren, Box-Modell, Flexbox)
- APIs und Distributionswege verstehen - 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 ### Voraussetzungen
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:
```bash ```bash
make build # Build slides npm install
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
``` ```
## Tips ### Commands
- Use `---` to separate slides ```bash
- Frontmatter controls global settings npm run dev # Development server (http://localhost:8080)
- Images should be in `assets/` directory npm run build # Build slides
- Custom themes extend built-in themes npm run export:pdf # Export to PDF
- PDF export requires Chrome/Chromium ```
## Troubleshooting ### Makefile
- **PDF export fails**: Ensure Chrome/Chromium is installed ```bash
- **Server not starting**: Check if port 8080 is available make dev # Start development server
- **Styles not applying**: Verify theme file paths make build # Build slides
- **Images not loading**: Check relative paths from slides directory 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 slides/
3. Test builds before committing ├── 2025-12-20-termin-1-geschichte-grundlagen-html.md
4. Keep commit messages lowercase and descriptive ├── 2026-01-10-termin-2-netzwerke-protokolle-css.md
├── 2026-01-24-termin-3-interaktivitaet-javascript.md
└── assets/
└── (images)
```
## License ## 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/). Licensed under [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/).
This project uses Marp which is MIT licensed.
slides/2025-12-20-termin-1-geschichte-grundlagen-html.md
+1 -1
View File
@@ -25,7 +25,7 @@ h2 {
# Grundlagen IT- und Internettechnik # Grundlagen IT- und Internettechnik
**223015b** · Modul "Technik 1" · 1. Semester **223015c** · Modul "Technik 1" · 1. Semester
Digital- und Medienwirtschaft Digital- und Medienwirtschaft
Hochschule der Medien Stuttgart Hochschule der Medien Stuttgart
slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
+1 -1
View File
@@ -25,7 +25,7 @@ h2 {
# Grundlagen IT- und Internettechnik # Grundlagen IT- und Internettechnik
**223015b** · Modul "Technik 1" · 1. Semester **223015c** · Modul "Technik 1" · 1. Semester
Digital- und Medienwirtschaft Digital- und Medienwirtschaft
Hochschule der Medien Stuttgart Hochschule der Medien Stuttgart
slides/2026-01-24-termin-3-interaktivitaet-javascript.md
+1 -1
View File
@@ -25,7 +25,7 @@ h2 {
# Grundlagen IT- und Internettechnik # Grundlagen IT- und Internettechnik
**223015b** · Modul "Technik 1" · 1. Semester **223015c** · Modul "Technik 1" · 1. Semester
Digital- und Medienwirtschaft Digital- und Medienwirtschaft
Hochschule der Medien Stuttgart Hochschule der Medien Stuttgart