diff --git a/.claude/commands/humanify.md b/.claude/commands/humanify.md deleted file mode 100644 index 4b252d0..0000000 --- a/.claude/commands/humanify.md +++ /dev/null @@ -1,75 +0,0 @@ -# Humanify Slide Command - -Transformiere die angegebene Slide(s) in meinen persönlichen Lehr- und Erzählstil. - -**Argument:** $ARGUMENTS (Slide-Nummer, Titel, oder Range wie "15-20") - ---- - -## Mein pädagogischer Stil (extrahiert aus Termin 1) - -### 1. Konversationelle Speaker Notes auf Deutsch -- Direkte Zitate in Anführungszeichen: `"Ich schaue in viele fragende Gesichte..."` -- Natürliche, gesprochene Sprache - kein Vorlesungsdeutsch -- Persönliche Ansprache: "ihr", "euch", "wir" - -### 2. Storytelling & Spannungsbogen -- Cliffhanger: `"am Ende der heutigen Veranstaltung werdet ihr mir genau sagen können..."` -- Übergänge zwischen Konzepten als Geschichte erzählen -- Neugier wecken bevor die Antwort kommt - -### 3. Rhetorische Fragen & Interaktion -- `Frage: "Weiß jemand wieviele Zustände wir mit 8 Bit beschreiben können?"` -- `Fangfrage: "Wie hoch ist die Sample Rate von Vinyls?"` → Überraschende Antwort -- Einladungen: `"Wie würdet ihr vorgehen?"` - -### 4. Literarische & kulturelle Referenzen -- `»256 Shades of Gray«` (mit deutschen Guillemets »...«) -- Metaphern: `"ganz literarisch"`, `"stellt euch vor ihr seid ArchäologInnen"` -- Popkulturelle Anknüpfungspunkte - -### 5. Rätsel & Denkaufgaben -- Seerose-Rätsel für exponentielles Wachstum -- Aktivierung statt passives Zuhören - -### 6. Etymologie & Historie -- Wortherkunft: `"von griech. hexa „sechs" und lat. decem „zehn""` -- Historische Anekdoten: `"Es gab durchaus einen »Machtkampf«..."` -- Personen hinter den Konzepten - -### 7. Progressive Enthüllung -- Konzepte über mehrere Slides aufbauen (Das Byte: 3 Slides) -- Erst Frage, dann Antwort auf nächster Slide -- Spannung halten - -### 8. Struktur der Speaker Notes -```markdown - -``` - ---- - -## Aufgabe - -1. Lies die angegebene(n) Slide(s) aus den Dateien in `slides/` -2. Analysiere den aktuellen Inhalt und die Speaker Notes -3. Transformiere die Speaker Notes in meinen Stil: - - Füge gesprochene Zitate hinzu - - Baue rhetorische Fragen ein - - Ergänze Übergänge und Storytelling-Elemente - - Füge Etymologie oder historischen Kontext hinzu wo passend - - Nutze deutsche Guillemets »...« für Titel/Zitate -4. Behalte die Slide-Inhalte (Bullet Points, Code, Tabellen) weitgehend bei -5. Zeige mir die vorgeschlagenen Änderungen bevor du sie anwendest - -**WICHTIG:** Nicht übertreiben! Authentisch bleiben, nicht jede Slide braucht alles. diff --git a/.claude/skills/marp/REFERENCE.md b/.claude/skills/marp/REFERENCE.md deleted file mode 100644 index 5b9215a..0000000 --- a/.claude/skills/marp/REFERENCE.md +++ /dev/null @@ -1,373 +0,0 @@ -# Marp/Marpit Complete Reference - -## Overview - -**Marp** = Markdown Presentation Ecosystem -**Marpit** = The core framework ("skinny framework for creating slide deck from Markdown") - -Built-in themes: `default`, `gaia`, `uncover` - ---- - -## Slide Structure - -### Slide Separation -Slides are separated by horizontal rulers: -```markdown ---- -``` -Alternatives: `___`, `***`, `- - -` - -**Important**: May need empty line before `---` per CommonMark spec. - -### Basic Document Structure -```markdown ---- -marp: true -theme: gaia -paginate: true ---- - -# First Slide - -Content here - ---- - -# Second Slide - -More content - - -``` - ---- - -## Directives - -### Syntax Options - -**HTML Comments:** -```markdown - - -``` - -**Front-matter (YAML):** -```markdown ---- -theme: default -paginate: true ---- -``` - -### Directive Scopes - -| Scope | Applies to | Syntax | -|-------|-----------|--------| -| Global | Entire deck | Normal directive | -| Local | Current + following slides | Normal directive mid-document | -| Spot | Single slide only | Underscore prefix: `_directive` | - -### Global Directives -- `theme` — Slide deck theme -- `style` — Custom CSS -- `lang` — Language attribute (accessibility) -- `headingDivider` — Auto-split at heading levels (1-6) - -### Local Directives -- `paginate` — Page numbers (true/false/hold/skip) -- `header` — Persistent header text -- `footer` — Persistent footer text -- `class` — CSS class for slide -- `backgroundColor` — Slide background color -- `backgroundImage` — Background image URL -- `backgroundPosition` — CSS background-position -- `backgroundRepeat` — CSS background-repeat -- `backgroundSize` — CSS background-size -- `color` — Text color - -### Spot Directive Example -```markdown - - -``` -Only affects current slide. - -### Pagination Values -- `true` — Show and increment -- `false` — Hide but increment -- `hold` — Show without incrementing -- `skip` — Hide without incrementing - -### Heading Divider -```markdown ---- -headingDivider: 2 ---- - -# Section 1 -Content - -## Slide 1.1 -Content - -## Slide 1.2 -Content -``` - ---- - -## Image Syntax - -### Basic Resizing -```markdown -![w:200](image.jpg) -![h:300](image.jpg) -![w:200 h:150](image.jpg) -``` - -Units: px, em, cm, pt, etc. (no viewport units vw/vh) - -### Image Filters -```markdown -![blur:10px](image.jpg) -![brightness:1.5](image.jpg) -![contrast:200%](image.jpg) -![grayscale:1](image.jpg) -![sepia:50%](image.jpg) -![hue-rotate:180deg](image.jpg) -![invert:100%](image.jpg) -![opacity:0.5](image.jpg) -![saturate:2](image.jpg) -![drop-shadow:0,5px,10px,rgba(0,0,0,.4)](image.jpg) -``` - -Combine multiple: -```markdown -![brightness:.8 sepia:50%](image.jpg) -``` - -### Background Images -```markdown -![bg](image.jpg) -![bg fit](image.jpg) -![bg cover](image.jpg) -![bg auto](image.jpg) -![bg 150%](image.jpg) -``` - -### Split Backgrounds -```markdown -![bg left](image.jpg) -![bg right](image.jpg) -![bg left:40%](image.jpg) -![bg right:33%](image.jpg) -``` - -### Multiple Backgrounds -```markdown -![bg](image1.jpg) -![bg](image2.jpg) -![bg](image3.jpg) -``` -Arranges horizontally by default. - -```markdown -![bg vertical](image1.jpg) -![bg](image2.jpg) -``` -Arranges vertically. - ---- - -## Fragmented Lists (Animations) - -### Bullet Lists — Use `*` -```markdown -* First item -* Second item -* Third item -``` - -Regular `-` or `+` bullets don't animate. - -### Ordered Lists — Use `)` -```markdown -1) First item -2) Second item -3) Third item -``` - -Regular `.` numbered lists don't animate. - -### Output -```html -
  • First
    • -
  • Second
    • -``` - -**Note**: Actual animation depends on presentation viewer. - ---- - -## Theme CSS - -### Required Metadata -```css -/* @theme my-theme */ -``` - -### Core Selectors -```css -/* Slide container */ -section { - width: 1280px; - height: 720px; - font-size: 32px; -} - -/* Higher specificity alternative */ -:root { - --color-primary: #3498db; -} - -/* Pagination */ -section::after { - content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total); -} -``` - -### Scoped Styles -```markdown - -``` - -### Global Inline Styles -```markdown - -``` - -### Theme Inheritance -```css -/* @theme derived-theme */ -@import 'default'; -/* or */ -@import-theme 'default'; -``` - -### Units -- `rem` scales relative to slide `
    ` (isolated from HTML root) -- Slide dimensions require absolute units (px, cm, in, mm) - ---- - -## Marp CLI - -### Installation -```bash -npm install -g @marp-team/marp-cli -# or -brew install marp-cli -``` - -### Basic Conversion -```bash -marp slide.md # → HTML -marp --pdf slide.md # → PDF -marp --pptx slide.md # → PowerPoint -marp --images png slide.md # → PNG images -``` - -### Development Server -```bash -marp --server ./slides/ -PORT=1312 marp --server ./ -``` - -Query formats: `http://localhost:8080/deck.md?pdf` - -### Watch Mode -```bash -marp --watch slide.md -``` - -### Key Options -```bash --o, --output # Output path --w, --watch # Watch for changes --s, --server # HTTP server mode --p, --preview # Open preview window ---pdf # PDF output ---pptx # PowerPoint output ---images [png|jpeg] # Image output ---image-scale # Resolution (e.g., 2 for 2x) ---allow-local-files # Enable local file access (security risk) ---pdf-notes # Include speaker notes in PDF ---browser # chrome, edge, firefox -``` - ---- - -## Common Patterns - -### Title Slide -```markdown - - -# Presentation Title - -**Author Name** -Date -``` - -### Two-Column Layout (via background) -```markdown -![bg left:50%](image.jpg) - -# Right Content - -Text appears on right side -``` - -### Speaker Notes -```markdown -# Slide Title - -Content - - -``` - -### Custom Class -```markdown - - -# Centered Dark Slide -``` - -Then in CSS/theme: -```css -section.centered { text-align: center; } -section.dark { background: #222; color: #fff; } -``` - ---- - -## Project Conventions (This Project) - -- Theme: `gaia` -- Assets: `./assets/filename.png` -- Build output: `build/` -- Dev server: `make dev` (port 1312) -- Never end with `---` (creates empty slide) diff --git a/.claude/skills/marp/SKILL.md b/.claude/skills/marp/SKILL.md deleted file mode 100644 index 3d9a9fe..0000000 --- a/.claude/skills/marp/SKILL.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -name: marp -description: Marp/Marpit documentation and slide creation guide. Use this skill when working with Marp presentations, slide syntax, themes, directives, or troubleshooting Marp-related issues. -allowed-tools: - - Read - - Glob - - Grep - - WebFetch ---- - -# Marp/Marpit Skill - -## Purpose - -This skill provides comprehensive knowledge about Marp (Markdown Presentation Ecosystem) and its core engine Marpit. Use this when creating, editing, or troubleshooting Markdown-based slide presentations. - -## Documentation Sources - -When you need Marp information, fetch from these official sources: - -### Marpit Framework (Core Engine) -- **Main docs**: https://marpit.marp.app/ -- **Markdown syntax**: https://marpit.marp.app/markdown -- **Directives**: https://marpit.marp.app/directives -- **Theme CSS**: https://marpit.marp.app/theme-css -- **Fragmented list**: https://marpit.marp.app/fragmented-list -- **Image syntax**: https://marpit.marp.app/image-syntax - -### Marp CLI -- **Usage guide**: https://github.com/marp-team/marp-cli - -## Key Concepts to Learn - -### 1. Slide Separation -Slides are separated by `---` (horizontal rule). The first `---` after frontmatter starts the first slide. - -### 2. Directives -- **Global directives**: Apply to all slides (in frontmatter) -- **Local directives**: Apply to current slide only (``) -- **Spot directives**: Underscore prefix for local scope - -### 3. Image Syntax -Marp extends standard Markdown image syntax: -- `![bg](image.jpg)` - background image -- `![bg fit](image.jpg)` - fit to slide -- `![bg right:40%](image.jpg)` - split background -- `![w:200](image.jpg)` - width filter -- `![h:300](image.jpg)` - height filter - -### 4. Theme CSS -- Themes use CSS with special Marpit selectors -- `section` = slide container -- `section::after` = pagination -- CSS variables for theming - -### 5. Scoped Styles -```html - -``` - -## Workflow - -When asked about Marp: - -1. **Read REFERENCE.md first** - Contains comprehensive syntax documentation -2. **Check local files** - Read existing slides and themes in the project -3. **Fetch official docs if needed** - Use WebFetch for edge cases -4. **Provide concrete examples** - Show actual Marp syntax -5. **Reference project conventions** - Follow CLAUDE.md guidelines - -## Project-Specific Notes - -This project uses: -- Theme: `gaia` -- Assets path: `./assets/` -- Build output: `build/` -- Dev server: `make dev` (port 1312) diff --git a/Makefile b/Makefile index f38e02b..42ce666 100644 --- a/Makefile +++ b/Makefile @@ -105,15 +105,15 @@ optimize-images: deploy: build @echo "Deploying slides..." @echo "Copying HTML files..." - scp $(BUILD_DIR)/*.html tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/ + scp $(BUILD_DIR)/*.html netcup:/srv/libretech-static/decks/hdm/223015c/ @echo "Copying assets..." - scp -r $(BUILD_DIR)/assets/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/ + scp -r $(BUILD_DIR)/assets/ netcup:/srv/libretech-static/decks/hdm/223015c/ @echo "Copying materials..." - scp -r $(BUILD_DIR)/materials/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/ 2>/dev/null || true + scp -r $(BUILD_DIR)/materials/ netcup:/srv/libretech-static/decks/hdm/223015c/ 2>/dev/null || true # Deploy HTML only (faster, no PDF rebuild) deploy-html: html @echo "Deploying HTML only..." - scp $(BUILD_DIR)/*.html tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/ - scp -r $(BUILD_DIR)/assets/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/ - scp -r $(BUILD_DIR)/materials/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/ 2>/dev/null || true + scp $(BUILD_DIR)/*.html netcup:/srv/libretech-static/decks/hdm/223015c/ + scp -r $(BUILD_DIR)/assets/ netcup:/srv/libretech-static/decks/hdm/223015c/ + scp -r $(BUILD_DIR)/materials/ netcup:/srv/libretech-static/decks/hdm/223015c/ 2>/dev/null || true diff --git a/README.md b/README.md deleted file mode 100644 index 7c9a503..0000000 --- a/README.md +++ /dev/null @@ -1,75 +0,0 @@ -# 223015c – Grundlagen IT- und Internettechnik - -**Modul "Technik 1"** · 1. Semester · Digital- und Medienwirtschaft -Hochschule der Medien Stuttgart · Wintersemester 2025/26 - ---- - -## Über dieses Modul - -> *Internettechnologien 1 – "Technische Grundlagen von IT-Projekten"* - -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. - -### Termine - -| # | Datum | Thema | -|---|-------|-------| -| 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: -- 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 · mail@librete.ch - ---- - -## Development - -### Voraussetzungen - -```bash -npm install -``` - -### Commands - -```bash -npm run dev # Development server (http://localhost:8080) -npm run build # Build slides -npm run export:pdf # Export to PDF -``` - -### Makefile - -```bash -make dev # Start development server -make build # Build slides -make pdf # Export to PDF -make clean # Remove generated files -``` - -## Projektstruktur - -``` -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 - -Licensed under [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/).