Projekt und Theme waren bisher dasselbe. Jetzt nicht mehr: das Projekt sagt,
welcher Beitrag, das Theme, wie er aussieht. notebook ist die
Zeichenblock-Optik mit Raster, Marker und handgezogenen Formen, modern der
ruhige Grund mit farbigem Akzentwort und schwebenden Karten. Beide Themes
teilen Aufbau, Texte und Kompositionen. rules.md Paragraf 1a haelt fest, was
sie genau trennt.
Das Theme modern folgt Vorbildern aus dem Feed: Zapier, Slack, Autarc,
Photovate, Plancraft. Was ich daraus uebernehme, ist nicht die Optik der
einzelnen Marke, sondern das Gemeinsame -- ruhiger Grund ohne Textur, eine
sehr grosse Ueberschrift mit einem farbigen Wort statt einer Markierung,
schwebende Karten mit Haarlinie, Ablaufketten mit Knoten, gefuellte
Kreis-Haken.
Drei Farben, wie besprochen: Weiss als Grund, Orange als Akzent, Teal als
Zweitfarbe. Teal stand in rules.md bisher als "ungenutzt" und traegt jetzt
Zeichen und Kacheln. Die Schriftfarbe ist ein sehr dunkles Teal statt reinem
Schwarz, damit sie zur Palette gehoert.
Das Raster faellt weg. Die Ebene bleibt im Markup, damit beide Themes
denselben Aufbau haben, sie zeichnet nur nichts mehr.
Slide 4 ist der erste Umbau: der Notizzettel ist raus, die Aufzaehlung bleibt
und wird zur Kette aus Karten mit Zeichenkachel, Beschriftung und Haken,
dazwischen ein Verbinder mit Knoten. Die Form sagt zusaetzlich etwas aus --
die vier Dinge haengen zusammen, statt nur untereinander zu stehen.
Der Menueeintrag zur Alternative fehlte in post1.html und post2.html; er
stand nur in der Kopie selbst. Von dort kam man also nie hin.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Rueckmeldung aus dem Team war, das Design duerfe "futuristischer" sein.
Statt den bestehenden Beitrag umzubauen liegt er jetzt zweimal vor:
post2.html bleibt die Skizzenfassung, post2-alt.html zeigt denselben
Beitrag mit denselben Texten in praeziser Formensprache.
Technisch ist es kein zweiter Entwurf, sondern dieselbe Zeichnung mit
anderen Primitiven. strich zieht eine Gerade statt eines schwingenden
Zuges, kringel eine exakte Ellipse statt eines offenen Kringels, rechteck
und chamfer haben keine Ecken mehr, die ueberschiessen. Die Kompositionen
sind Zeile fuer Zeile dieselben. Wer eine Visualisierung aendert, muss
deshalb an beide Dateien denken -- steht in der README.
Was in der Alternative entfaellt: die Randnotizen der Titel-Slide
(Gluehbirne, Zettel, Maulschluessel), der versetzte Zweitrahmen mit
schraffiertem Band, die Bodenschatten unter den Ikonen und alle
Schraffuren als Fuellung. An ihre Stelle treten ein sauberer
Chamfer-Rahmen mit Eckwinkeln in Gelb und gefuellte Flaechen.
Die dunkle Variante hat zwei Fehler sichtbar gemacht, die in der hellen
Fassung nie aufgefallen waeren:
Das Akzentwort steht auf Dunkel in #1A1A1A und ist nur dort lesbar, wo die
gelbe Markerflaeche darunterliegt. Die deckte 62 Prozent der Zeilenhoehe
ab, also rund 49 px bei einer Versalhoehe von etwa 53 -- die obere Haelfte
der Buchstaben verschwand im Grund. Sie deckt jetzt die ganze Zeile.
Die Beschreibungen der drei Schritte auf der letzten Slide standen fest auf
#555555, einem Wert der hellen Variante. Sekundaerer Text folgt jetzt der
Variante, wie TINTE und GELB auch. Dafuer zieht applyAll die Farben nach
und baut alle Seiten neu, nicht nur die Titel-Seiten.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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) <noreply@anthropic.com>
Die Auswahl eines Elements war nur eine Zeile im linken Bedienfeld, und die
Bedienung dazu lag zwischen Slide-Einstellungen verstreut. Jetzt ist die
Oberflaeche geteilt: links die Slide und alles Allgemeine, rechts genau das
angeklickte Element.
Im Element-Feld stehen Text, Groesse, X und Y, die Ebene, das Ausrichten an
der Slide (links, mittig, rechts sowie oben, mittig, unten mit 92 px Rand),
das Angleichen ueber alle Slides und das Loeschen. Der Text schreibt in
dieselbe Ueberschreibung, die auch das Inhalt-Feld links fuellt -- man
beschriftet also die Ueberschrift, indem man sie anklickt.
Ausgerichtet wird gemessen statt gerechnet: die Mockups stehen
perspektivisch im Raum und das Blatt ist gepolstert.
Zwei Fehler, die dabei aufgefallen sind:
Das Feld faehrt beim Anklicken ein und macht die Buehne schmaler -- damit
aendert sich der Massstab mitten im Klick. Der Zug rechnete aber mit einem
frisch gerechneten autoFit und verschob das Element deshalb um ein Drittel
zu weit. Genommen wird jetzt der Massstab, mit dem tatsaechlich gezeichnet
ist.
Und ein fehlendes Bild riss den ganzen Export mit ("1 Bild(er) nicht
geladen"), ohne zu sagen welches. Verweise auf Dateien, die es nicht mehr
gibt, werden beim Start aufgeloest und benannt; eine Slide baut sich auch
ohne sie auf.
Geprueft: 13 Faelle fuer das Element-Feld, dazu der volle Exportlauf und die
Maus-Bedienung.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Drei Sachen, die beim Arbeiten gefehlt haben.
Der Streifen war keine durchgehende Flaeche. Jede Slide zeichnete nur ihre
direkten Nachbarn mit (i-1 bis i+1), ein Element liess sich damit genau eine
Slide weit schieben und war danach abgeschnitten. Jetzt traegt jede Slide das
vollstaendige Blatt. Der Preis sind n mal n Seiten statt n mal drei -- bei
einem Carousel dieser Groesse nicht spuerbar, und der Export laeuft
unveraendert durch.
Elemente lassen sich loeschen. Sie gehen per display:none aus dem Fluss, das
zweite Bild wird dagegen wirklich entfernt, sonst stuende es weiter im Stand
und im Auswahlfeld. Ein geloeschtes Element kann man nicht mehr anklicken,
deshalb steht es im Bedienfeld als "… zurueck" bereit -- ohne das waere es
nur ueber "Alles auf Standard" oder Rueckgaengig zu holen, also praktisch
verloren.
Und jedes Element hat ein Feld "Ebene", das wie z-index wirkt. Leer heisst
Standard, damit bleibt die Gestaltung unveraendert, solange niemand etwas
setzt. Text steht im Fluss und ignoriert z-index, deshalb kommt beim Setzen
ein position:relative dazu; am Layout aendert das nichts.
Geprueft: 8 Faelle ueber das DevTools-Protokoll (Reichweite ueber zwei
Slides hinaus, Ebene setzen und wieder leeren, loeschen und zurueckholen),
dazu der volle Exportlauf und die Maus-Bedienung.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Bilder aus dem Finder kommen jetzt ueber die Dateiauswahl oder per Ziehen
direkt auf eine Slide herein. Beim Ablegen wird das Bild dort zum zweiten
Bild und laesst sich im Bearbeiten-Modus frei schieben und in der Groesse
aendern; ueber den Knopf importiert man nur und ordnet danach unter Inhalt
zu. Das zweite Bild laesst sich dort auch wieder abwaehlen.
Die Datei geht byteweise unveraendert an den neuen Endpunkt /upload und
liegt danach unter assets/eigene/. Nichts wird neu kodiert, skaliert oder
umbenannt -- nur Zeichen, die in einem Dateinamen nichts zu suchen haben,
weichen einem Bindestrich. Der Umweg ueber den Server ist Absicht: ein Foto
als Base64 im Projektstand waere groesser als der gesamte uebrige Stand und
machte jeden Diff unlesbar. So steht dort nur der Pfad, und das Bild liegt
mit im Repo wie jedes andere Asset auch.
Die Auswahllisten holt der Generator beim Start ueber /bilder vom Server
statt sie im Code zu pflegen. Importierte stehen deshalb sofort darin, mit
einem Stern gekennzeichnet. Beim Zuweisen folgt das Rahmenformat dem
Seitenverhaeltnis der Aufnahme.
Geprueft ueber das DevTools-Protokoll: ablegen, Bytes gegen die Quelle
vergleichen, Format, Verschieben im Bearbeiten-Modus, Export und Neustart.
Die abgelegte Datei war byteweise identisch mit der Quelle.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Wie viele Slides ein Post hat, stand bisher im Code. SLIDES war ein festes
Array, der Stand speicherte nur Einstellungen dazu, und die durchgehende
Flaeche lag als 5400 px in der CSS.
Jetzt entsteht SLIDES aus einem Deck. Jeder Eintrag ist entweder eine
mitgelieferte Vorlage (ref) oder eine selbst angelegte Slide; eigene Texte
liegen als Ueberschreibung daneben. Fuer Vorlagen wandert damit nur ein
Verweis in den Stand, keine Kopie -- eine Aenderung an der Vorlage im Code
kommt weiterhin bei allen an, die sie nicht angefasst haben. Haette man die
Slides vollstaendig in den Stand geschrieben, waeren sie dort eingefroren.
Unter der Slide-Auswahl stehen vier Knoepfe: neu, kopieren, loeschen,
verschieben. Die Felder pro Slide (Verschiebungen, Muster, Layout) wandern
im Gleichschritt mit. Bleibt eine einzige Slide uebrig, ist der Post ein
Einzelbild: die Kopfzeile sagt es und der ZIP-Knopf verschwindet.
Neu ist die Gruppe "Inhalt (nur diese Slide)" mit Tag, Ueberschrift,
Fließtext und der Auswahl des Screenshots. Getippt wird Text, nicht
Auszeichnung: *Wort* setzt den Akzent, ein Zeilenumbruch bricht die Zeile um.
Gespeichert wird trotzdem fertiges Markup, weil die Vorlagen es so
mitbringen. Beim Bildwechsel folgt das Rahmenformat dem Seitenverhaeltnis
der Aufnahme, sonst stuende ein Hochformat in einem Querformat-Rahmen. Alle
Screens werden vorgeladen, nicht nur die gerade benutzten -- ein Bild, das
erst beim Auswaehlen geladen wuerde, fehlte im Export.
Der Stand steht auf v6. Ein Stand ohne Deck stammt aus der Zeit fester fuenf
Slides und behaelt die Vorlagen.
Dabei abgesichert: Der Tastaturschutz rief e.target.matches auf. Ist nichts
fokussiert, ist das Ziel das Dokument und hat kein matches. Seit der
Neuaufbau den zuletzt fokussierten Knopf entfernt, ist das erreichbar.
Geprueft mit 17 Faellen ueber das DevTools-Protokoll: anlegen, tippen,
Screenshot tauschen, kopieren, schieben, loeschen, Neustart. Dazu ein Export
einer selbst angelegten Slide und der volle Durchlauf der bestehenden elf.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Beide Projekte werden nicht mehr gebraucht. Weg sind post1-alt.html,
index.html und state/post2.json, dazu der lokale state/post1-alt.json.
Mitgezogen, damit nichts ins Leere zeigt: die Projektumschaltung im
Bedienfeld samt ihrer CSS-Regeln, die Projekttabelle und die Liste der
Stand-Dateien in der README, die Startzeile und der Aufbau in rules.md.
Achtung: Ohne index.html liefert http://127.0.0.1:4321/ nur noch die
Verzeichnisliste. Der Einstieg ist /post1.html.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Das blanke Rad zoomt jetzt, die linke Maustaste zieht die Flaeche. Eine
gewoehnliche PC-Maus kam vorher nicht an den Ausschnitt heran: Zoomen ging
nur mit Strg/Cmd, Schieben nur ueber Leertaste oder mittlere Taste.
Die Radschritte laufen exponentiell ueber deltaY statt in festen Spruengen,
mit Umrechnung der deltaMode-Einheiten -- ohne die zoomt Firefox pro Rastung
um ein Vielfaches weniger als Chrome. Waagerechtes Wischen und Shift+Rad
schieben weiter, damit sich ein Trackpad nicht wie eine Zoomwippe anfuehlt.
Im Bearbeiten-Modus behaelt das Element unter dem Zeiger die linke Taste.
Nach einem echten Zug wird der Klick geschluckt, sonst sprang die Auswahl
auf die Slide, ueber der die Maus zufaellig losliess.
Dabei zwei aeltere Fehler mitgenommen:
setZoom rechnete den Zeigerpunkt per Dreisatz auf scrollLeft hoch und
uebersah das Polster der Flaeche. Der Inhalt lief pro Schritt um 60 x
(Faktor-1) px weg. Der Punkt wird jetzt gemessen statt gerechnet.
Der Bearbeiten-Zug leitete seinen Massstab aus der Border-Box von .strip ab.
Die misst Breite mal Massstab hoch zwei, weil .strip ein Flex-Kind der schon
skalierten Huelle ist -- geteilt wurde also durch das Quadrat, das Element
wanderte bei eingepasster Ansicht um das 5,6-fache der Mausbewegung.
Geprueft mit echten Rad- und Zieh-Ereignissen ueber das DevTools-Protokoll,
15 Pruefungen gegen beide Dateien.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Der Stand hing am localStorage und damit an einem Rechner. Wer das Projekt
woanders zog, sah einen anderen Stand.
Jede Aenderung geht jetzt zusaetzlich in state/<projekt>.json, gebuendelt nach
600 ms. Beim Laden gewinnt die Datei, der localStorage ist nur noch der
Rueckfall fuer den Fall, dass der Server nicht laeuft. Gibt es die Datei noch
nicht, wird der vorhandene Browser-Stand einmalig hineingeschrieben. Ein
Reload verschluckt nichts: was im Timer haengt, geht per sendBeacon raus.
Der Server nimmt den Stand unter POST /state entgegen und loescht ihn unter
DELETE /state. Der Projektname wird gegen ein enges Muster geprueft und der
Zielpfad zusaetzlich gegen state/ gegengerechnet. Geschrieben wird erst in
eine Nebendatei und dann umbenannt, eingerueckt und mit sortierten Schluesseln,
damit git einen lesbaren Unterschied zeigt.
state/*.json gehoeren ab jetzt in jeden Commit, sonst sieht die andere
Maschine die Aenderung nicht.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Drei Aenderungen am Generator, im selben Bereich der Datei verzahnt.
Notizzettel: die StickyNote aus dem Pitch-Projekt als HTML nachgebaut,
Variante purple, Farbwerte uebernommen und die Masse auf das 1080er Blatt
hochskaliert. Liegt auf der Workflow-Slide und ist wie jedes andere Element
verschiebbar.
Schatten: raus, ueberall. Kein box-shadow, kein drop-shadow. Tiefe entsteht
ueber Ueberlappung, Rahmenfarbe und Versatz. Der Umschalter faellt mit weg,
er haette nichts mehr zu schalten gehabt. Die Blaetter im Stapel-Rahmen
bekommen eine Haarlinie, sonst laege auf der hellen Variante Weiss auf Weiss.
Szenen-Mockup: Macbook Air und iPad Pro in Perspektive, aus einem Pixeden-PSD
freigestellt. Beide Displays sind ausgeknockt, die Screenshots liegen dahinter
und werden per matrix3d in die Flaechen projiziert. Die Eckpunkte sind
gemessen, nicht geschaetzt: beim Macbook aus dem transform_box des
Smart-Objekts, beim iPad ueber Ausgleichsgeraden auf den vier Glaskanten, weil
das Smart-Object dort zu hoch sitzt. Der Spalt zur weggefallenen Glasplatte
wird spaltenweise aus den Nachbarfarben interpoliert, damit am Displayrand
Schwarz und am Gehaeuse Metallic steht.
Das PSD selbst bleibt draussen: Pixeden erlaubt die Nutzung, nicht die
Weitergabe.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Autarke Werkbank für Social-Grafiken: Slides als HTML, Bearbeitung im Canvas,
Export als Instagram-taugliche PNGs.
- Assets nach brand/partner/mockups/screens sortiert, Karteileichen entfernt
- G-Marke als eigene Datei statt nur als Polygon im Code
- Partner-Logos und Geerkens-Logo ergänzt
- Keine externen Referenzen: Schrift, Bibliotheken und Bilder liegen lokal
dejanandClaude Opus 5
raffael