Deploy to netcup instead of Uberspace #1
No files matched your search
@@ -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
|
||||
<!--
|
||||
"Gesprochener Text in Anführungszeichen"
|
||||
|
||||
Fakten und Hintergrundinfos als Stichpunkte:
|
||||
- Punkt 1
|
||||
- Punkt 2
|
||||
|
||||
Frage: "Interaktive Frage an Studierende?"
|
||||
|
||||
Überleitung: "Und damit kommen wir zu..."
|
||||
-->
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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.
|
||||
@@ -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
|
||||
|
||||
<!-- Speaker notes go here -->
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Directives
|
||||
|
||||
### Syntax Options
|
||||
|
||||
**HTML Comments:**
|
||||
```markdown
|
||||
<!-- theme: default -->
|
||||
<!-- paginate: true -->
|
||||
```
|
||||
|
||||
**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
|
||||
<!-- _backgroundColor: aqua -->
|
||||
<!-- _class: lead -->
|
||||
```
|
||||
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 <!-- auto slide break -->
|
||||
Content
|
||||
|
||||
## Slide 1.2 <!-- auto slide break -->
|
||||
Content
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Image Syntax
|
||||
|
||||
### Basic Resizing
|
||||
```markdown
|
||||
 <!-- width 200px -->
|
||||
 <!-- height 300px -->
|
||||
 <!-- both -->
|
||||
```
|
||||
|
||||
Units: px, em, cm, pt, etc. (no viewport units vw/vh)
|
||||
|
||||
### Image Filters
|
||||
```markdown
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
Combine multiple:
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
### Background Images
|
||||
```markdown
|
||||
 <!-- full background -->
|
||||
 <!-- contain/fit -->
|
||||
 <!-- cover (default) -->
|
||||
 <!-- original size -->
|
||||
 <!-- scale percentage -->
|
||||
```
|
||||
|
||||
### Split Backgrounds
|
||||
```markdown
|
||||
 <!-- left half -->
|
||||
 <!-- right half -->
|
||||
 <!-- custom split -->
|
||||
|
||||
```
|
||||
|
||||
### Multiple Backgrounds
|
||||
```markdown
|
||||
|
||||
|
||||
|
||||
```
|
||||
Arranges horizontally by default.
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
```
|
||||
Arranges vertically.
|
||||
|
||||
---
|
||||
|
||||
## Fragmented Lists (Animations)
|
||||
|
||||
### Bullet Lists — Use `*`
|
||||
```markdown
|
||||
* First item <!-- reveals first -->
|
||||
* Second item <!-- reveals second -->
|
||||
* Third item <!-- reveals third -->
|
||||
```
|
||||
|
||||
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
|
||||
<li data-marpit-fragment="1">First</li>
|
||||
<li data-marpit-fragment="2">Second</li>
|
||||
```
|
||||
|
||||
**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
|
||||
<style scoped>
|
||||
/* Only this slide */
|
||||
h1 { color: red; }
|
||||
</style>
|
||||
```
|
||||
|
||||
### Global Inline Styles
|
||||
```markdown
|
||||
<style>
|
||||
/* All slides */
|
||||
section { background: #f0f0f0; }
|
||||
</style>
|
||||
```
|
||||
|
||||
### Theme Inheritance
|
||||
```css
|
||||
/* @theme derived-theme */
|
||||
@import 'default';
|
||||
/* or */
|
||||
@import-theme 'default';
|
||||
```
|
||||
|
||||
### Units
|
||||
- `rem` scales relative to slide `<section>` (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 <file> # 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 <n> # Resolution (e.g., 2 for 2x)
|
||||
--allow-local-files # Enable local file access (security risk)
|
||||
--pdf-notes # Include speaker notes in PDF
|
||||
--browser <name> # chrome, edge, firefox
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Common Patterns
|
||||
|
||||
### Title Slide
|
||||
```markdown
|
||||
<!-- _class: lead -->
|
||||
|
||||
# Presentation Title
|
||||
|
||||
**Author Name**
|
||||
Date
|
||||
```
|
||||
|
||||
### Two-Column Layout (via background)
|
||||
```markdown
|
||||
|
||||
|
||||
# Right Content
|
||||
|
||||
Text appears on right side
|
||||
```
|
||||
|
||||
### Speaker Notes
|
||||
```markdown
|
||||
# Slide Title
|
||||
|
||||
Content
|
||||
|
||||
<!--
|
||||
These are speaker notes.
|
||||
Not visible in slides.
|
||||
Visible in presenter mode.
|
||||
-->
|
||||
```
|
||||
|
||||
### Custom Class
|
||||
```markdown
|
||||
<!-- _class: centered dark -->
|
||||
|
||||
# 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)
|
||||
@@ -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 (`<!-- _directive: value -->`)
|
||||
- **Spot directives**: Underscore prefix for local scope
|
||||
|
||||
### 3. Image Syntax
|
||||
Marp extends standard Markdown image syntax:
|
||||
- `` - background image
|
||||
- `` - fit to slide
|
||||
- `` - split background
|
||||
- `` - width filter
|
||||
- `` - 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
|
||||
<style scoped>
|
||||
/* Only applies to this slide */
|
||||
</style>
|
||||
```
|
||||
|
||||
## 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)
|
||||
@@ -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
|
||||
@@ -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/).
|
||||
Reference in new issue
Block a user