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