From 0c08b18dd940ba2595e7e345a7447559bb93d86c Mon Sep 17 00:00:00 2001 From: DeeCee03 Date: Tue, 11 Aug 2026 19:29:24 +0200 Subject: [PATCH] Uebergabe zu Post 2 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Alles zum Beitrag vom 12.08. an einer Stelle: die sechs Slides mit Text und Akzentwort, was die Visualisierungen zeigen und warum, die gemessenen Maße samt Anleitung zum Nachmessen, der offene Rest und die Fallen, die schon zugeschnappt sind. Damit laesst sich ohne den Gespraechsverlauf weiterarbeiten. Die README verweist darauf. Co-Authored-By: Claude Opus 5 (1M context) --- POST-2.md | 156 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ README.md | 10 ++-- 2 files changed, 163 insertions(+), 3 deletions(-) create mode 100644 POST-2.md diff --git a/POST-2.md b/POST-2.md new file mode 100644 index 0000000..3a03bc8 --- /dev/null +++ b/POST-2.md @@ -0,0 +1,156 @@ +# Post 2 · Die Geschichte + +**Erscheint Mi 12.08.2026, 12:00 Uhr.** Carousel, 6 Slides, 1080 × 1350 px. +Zweiter Beitrag des Kontos `hivegrid.de` (nach „Vom Handwerker für Handwerker"). + +Diese Datei ist die Übergabe: alles, was zum Beitrag bekannt ist, damit man ohne +den Gesprächsverlauf weiterarbeiten kann. Der Redaktionsplan drumherum steht in +[`redaktionsplan/`](./redaktionsplan/). + +--- + +## 1. Worum es geht + +Die Herkunft, nicht die Funktionen. Warum es HiveGrid gibt: ein SHK-Betrieb in +vierter Generation, der sein Branchenprogramm nicht wechseln konnte und deshalb +drumherum gebaut hat. + +**Vorlage ist der Text von der Website** (`HiveGrid-Website`, +`app/playground/PlaygroundClient.tsx`, Abschnitt „Warum es HiveGrid gibt"). +Der vollständige Text gehört **unter** den Beitrag, nicht auf die Slides. + +> Auf den Slides steht die Zuspitzung, in der Bildunterschrift der ganze Text. +> Ein früherer Stand hatte die Website-Absätze wörtlich auf den Slides. Das war +> falsch: Auf einer Slide muss eine Zeile im Vorbeiscrollen sitzen. + +--- + +## 2. Die sechs Slides + +| # | Schlüssel | Überschrift | Fließtext | Visualisierung | +|---|---|---|---|---| +| 1 | `titel` | Die Geschichte fängt **auf der Baustelle an.** | Noah Geerkens, SHK-Betrieb in vierter Generation. | `karte` | +| 2 | `prozesse` | Nicht sinnvoll. **Nur so gewachsen.** | Die Software gibt den Takt vor. Nicht der Betrieb. | `schiene` | +| 3 | `wechseln` | Wechseln? **Kannst du vergessen.** | Jahre an Daten und Wissen hängen drin. Am Ende dasselbe, nur woanders. | `ersetzen` | +| 4 | `mehr` | Wir wollten nicht weg. **Wir wollten mehr.** | KI, CRM, Automatisierung. Und Tools, die miteinander reden. | `lose` | +| 5 | `verbinden` | Dein ERP bleibt. **Der Rest kommt dazu.** | Nichts wird ersetzt. Alles wird verbunden. | `verbinden` | +| 6 | `warteliste` | Gebaut im Betrieb. **Für den Betrieb.** | Setz dich auf die Warteliste. | `warteliste` | + +Fett = das mit dem Marker hervorgehobene Akzentwort (``). + +**Zeilenlängen sind geprüft.** Bei 74 px und `-0.03em` passen rund 26 Zeichen in +eine Zeile, mit Marker etwas weniger. Keine Zeile hier ist länger als 22, es +bricht also nichts um und alle Überschriften bleiben zweizeilig. Gemessen wurde +mit der echten Manrope (variables Latin-Subset, Gewicht 800) über die +Vorschubbreiten, nicht geschätzt. + +--- + +## 3. Die Visualisierungen + +**Kein Bildmaterial außer Noahs Karte.** Alles andere ist HTML und CSS. Damit +bleibt es beim 3-fachen Export so scharf wie die Schrift, und jede +Visualisierung lässt sich im Canvas verschieben und in der Breite ändern wie +jedes andere Element. Sie heißt dort **„Visualisierung"**. + +Gebaut aus derselben Formensprache wie die Slides: chamferte Kästen, Sechsecke, +der eine gelbe Akzent. Durchgezogene Balken heißen verbunden, gestrichelte offen. + +| Name | Was zu sehen ist | Gedanke dahinter | +|---|---|---| +| `karte` | Noahs Teamkarte von der Über-uns-Seite | Ein Gesicht, kein Symbol | +| `schiene` | Drei Schritte an einer Schiene mit der Beschriftung „seit Jahren so" | Die Schiene gibt die Reihenfolge vor, nicht der Betrieb | +| `ersetzen` | Schwerer Bestand, durchgestrichener Pfeil, leeres Ziel | Das Kreuz liegt auf dem **Pfeil**, nicht auf dem Ziel: der Wechsel scheitert, nicht das neue System | +| `lose` | Vier Kacheln, deren gestrichelte Stummel ins Leere laufen | KI, CRM, Automation, ERP wissen nichts voneinander | +| `verbinden` | ERP als Sechseck in der Mitte, das Neue drumherum | Der Kern bleibt, außen kommt dazu | +| `warteliste` | Eingabefeld, Knopf, Adresse | Der Abschluss ist ein Feld, kein Bild | + +### Noahs Karte + +Nachbau der Karte von der Über-uns-Seite **im aktiven Zustand**. Werte direkt aus +`HiveGrid-Website/app/ueber-uns/TeamCards.tsx`: + +``` +Hintergrund grayscale(.04) saturate(.74) brightness(.73) +Person saturate(1) contrast(1.01) +Kartengrund #0f1a2e Radius außen 38 px, innen 27 px +Namensschild gelb, links unten, "Noah" + "CEO" +``` + +Bilder liegen unter `assets/team/noah-bg.webp` und `noah-person.webp`. + +> **Ohne die weichgezeichnete Ellipse des Originals.** Die hängt an +> `backdrop-filter`, und was `html-to-image` daraus macht, ist nicht verlässlich. + +--- + +## 4. Maße, gemessen + +Der Inhaltsblock (Überschrift plus Fließtext) endet je nach Textlänge bei +**y 415 bis 460**. Unten bleiben 92 px Rand. Für die Visualisierung stehen also +rund **800 px Höhe** zur Verfügung, und die soll sie auch füllen. + +| Slide | Visualisierung: oben | Höhe | Luft zum Text | Abstand nach unten | +|---|---|---|---|---| +| 1 | 499 | 775 | 84 | 76 | +| 2 | 548 | 682 | 133 | 120 | +| 3 | 566 | 664 | 106 | 120 | +| 4 | 502 | 700 | 70 | 120 | +| 5 | 470 | 732 | 83 | 120 | +| 6 | 603 | 466 | 188 | 281 | + +Slide 6 ist bewusst kleiner und steht dafür mittig in der freien Fläche. Ein +Formularfeld auf 700 px aufzublasen sieht aufgeblasen aus. + +**Wie nachmessen:** Eine Kopie von `post2.html` anlegen, vor `` ein +Skript hängen, das `getBoundingClientRect` der Elemente in `document.title` +schreibt, und mit +`Google\ Chrome --headless --dump-dom` auslesen. Auf `.holder .slide` warten, +die Seite baut asynchron auf. + +--- + +## 5. Stand der Dinge + +**Fertig:** Alle sechs Slides sind gebaut, die Texte auf Slide-Länge, die +Visualisierungen füllen das Format, Noahs Karte sitzt. + +**Offen:** + +1. **Die Bildunterschrift.** Noahs vollständiger Text von der Website, plus + Hashtags. Vorgaben aus dem Redaktionsplan: Haken in den ersten 125 Zeichen, + 300 bis 800 Zeichen gesamt, 5 bis 10 Hashtags ganz unten, Suchwörter + zusätzlich im Fließtext. Die Bildunterschrift von Post 1 steht als Muster im + Gesprächsverlauf und folgt genau diesem Aufbau. +2. **Export und Kontrolle.** Über `Datei → Alle Slides als ZIP`, 3-fach. + Danach jede Slide ansehen: der Export hat schon zweimal Bilder verschluckt, + die Prüfung meldet das inzwischen, aber ein Blick schadet nicht. +3. **Mitgestalter.** Falls Noahs Betriebsprofil mit drauf soll, **beim Posten** + einladen. Nachträglich geht es zwar, aber der Beitrag erscheint dann erst + nach der Annahme bei dessen Followern und die Ausspielung ist vorbei. + +--- + +## 6. Fallen, die schon zugeschnappt sind + +- **Der offene Tab überschreibt die Datei.** `state/post2.json` gewinnt nur + **beim Laden**. Wer die Datei von außen ändert und dann im offenen Tab klickt, + bekommt den alten Stand zurückgeschrieben. Also erst neu laden, dann klicken. + Änderungen, die sicher ankommen müssen, gehören in den Ladepfad (`migrateState`). +- **Probier-Verschiebungen bleiben im Stand.** Slide 1 war unten abgeschnitten, + weil die Karte auf 700 px vergrößert und 250 px nach unten geschoben war. Wenn + eine Vorgabe im Code nicht wirkt, zuerst `edits` im Stand prüfen. +- **Der Server verschluckt Fehler.** Ein Filter in `log_message` ist über + `HTTPStatus` gestolpert und hat den Thread mitgerissen; die Seite blieb dann + ohne Meldung bei „Lade Screens ..." stehen. Behoben, aber wenn die Seite + wieder hängt: zuerst `serve.py` neu starten und in die Ausgabe schauen. +- **Texte von der Website gehören nicht auf Slides.** Siehe oben. + +--- + +## 7. Was danach kommt + +Der Redaktionsplan sieht als nächsten Beitrag **Fr 14.08. „Verbinden statt +ersetzen"** vor, ein Einzelbild mit der Kernaussage. Der Satz „Verbinden statt +ersetzen" ist dafür reserviert und taucht deshalb in keiner Bildunterschrift +vorher wörtlich auf. diff --git a/README.md b/README.md index 63f60f4..4618f86 100644 --- a/README.md +++ b/README.md @@ -18,9 +18,13 @@ Downloads landen direkt in `~/Downloads`, ohne Browser-Dialog. ## Projekte -| Projekt | Datei | Inhalt | -|---|---|---| -| Post 1 · Lösung | `post1.html` | Carousel, Anzahl frei | +| Projekt | Datei | Inhalt | Übergabe | +|---|---|---|---| +| Post 1 · Lösung | `post1.html` | Carousel, Anzahl frei | | +| Post 2 · Die Geschichte | `post2.html` | Carousel, 6 Slides, erscheint 12.08. | [`POST-2.md`](./POST-2.md) | + +Der Redaktionsplan für alle weiteren Beiträge liegt in +[`redaktionsplan/`](./redaktionsplan/), gebaut mit `python3 redaktionsplan/bauen.py`. ### Slides anlegen und wegnehmen