diff --git a/animation.mjs b/animation.mjs index 7934c60..4acb18b 100644 --- a/animation.mjs +++ b/animation.mjs @@ -3,6 +3,7 @@ * * node animation.mjs post6.html alle animierten Slides * node animation.mjs post6.html 5 nur Slide 6 (nullbasiert: 5) + * node animation.mjs post9.html animWebinar 1x1 im Format 1:1 * * WARUM MP4 UND NICHT GIF * Instagram nimmt kein GIF an. Was im Feed als "kurzer animierter Beitrag" @@ -14,7 +15,11 @@ * DIE WERTE * Behaelter MP4, H.264 High, yuv420p * Bild 1080 x 1350, also 4:5 wie unsere Standbilder -- ein Carousel - * schneidet alle Elemente auf das Format des ersten zu + * schneidet alle Elemente auf das Format des ersten zu. + * Kennt die Seite ein zweites Format (window.SLIDE_FORMAT, bisher + * nur Post 9 mit 1:1 fuer die Anzeige), gilt dessen Hoehe. Das + * Format kommt aus dem Projektstand oder als drittes Argument, + * die Datei traegt dann ein Kennzeichen (-1x1). * Bildrate 30 fps * Laenge 3 s ist das Minimum, 60 s je Element das Maximum; wir liegen * bei 5 @@ -40,12 +45,16 @@ const SEITE = process.argv[2] || "post6.html"; Slide mehr und hat deshalb auch keine Position im Streifen, die sich verschieben koennte. Ohne Angabe werden alle des Projekts gebaut. */ const NUR = process.argv[3] || null; +/* Format, wenn die Seite mehrere kennt. Ohne Angabe gilt der Projektstand. */ +const FORMAT = process.argv[4] || null; +const ZUSATZ = FORMAT ? "&format=" + encodeURIComponent(FORMAT) : ""; const PROJEKT = SEITE.replace(/\.html$/, ""); const CHROME = "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"; const PORT = 9530; const FPS = 30; -const BREITE = 1080, HOEHE = 1350; +const BREITE = 1080; +let HOEHE = 1350, DATEI_ZUSATZ = ""; const DATENRATE = "12M"; const ZIEL = path.join(process.cwd(), "animation"); @@ -138,8 +147,16 @@ try { // Erst die Liste holen. Ohne k rendert der Modus nichts, das Skript laeuft // aber vollstaendig durch und window.ANIM_LISTE steht bereit. - await laden(SEITE + "?nur=anim"); + await laden(SEITE + "?nur=anim" + ZUSATZ); const alle = await cdp.werte("window.ANIM_LISTE ? window.ANIM_LISTE() : null"); + /* Das Format der Seite. Posts ohne zweites Format melden nichts und + bleiben bei 4:5. */ + const fmt = await cdp.werte("window.SLIDE_FORMAT ? window.SLIDE_FORMAT() : null"); + if (fmt) { + HOEHE = fmt.hoehe; DATEI_ZUSATZ = fmt.datei || ""; + await cdp.ruf("Emulation.setDeviceMetricsOverride", + { width: BREITE, height: HOEHE, deviceScaleFactor: 1, mobile: false }); + } if (!alle) throw new Error(SEITE + " kennt keine Animationen (window.ANIM_LISTE fehlt)"); const liste = alle.filter(a => NUR == null || a.key === NUR); if (!liste.length) throw new Error("keine Animation" + @@ -150,7 +167,7 @@ try { for (const a of liste) { const anzahl = Math.round(a.dauer * FPS); - await laden(SEITE + "?nur=anim&k=" + encodeURIComponent(a.key)); + await laden(SEITE + "?nur=anim&k=" + encodeURIComponent(a.key) + ZUSATZ); /* Nachsehen, dass wirklich ein Blatt dasteht und es die richtigen Masse hat. Ein leeres Fenster faellt sonst erst am fertigen Video auf. */ @@ -188,7 +205,7 @@ try { "UMLAUT_ERLAUBT. Einen Geviertstrich ersetzt ein Punkt oder ein Komma."); const ordner = await mkdtemp(path.join(tmpdir(), "postgrid-bilder-")); - process.stdout.write(` ${a.key}: ${anzahl} Bilder `); + process.stdout.write(` ${a.key}: ${anzahl} Bilder, ${BREITE} x ${HOEHE} `); for (let n = 0; n < anzahl; n++) { /* Das letzte Bild ist nicht t = 1, sondern eins davor: bei einer Schleife waeren t = 0 und t = 1 dasselbe Bild und es haekelte kurz. */ @@ -198,7 +215,7 @@ try { Buffer.from(r.data, "base64")); if (n % 15 === 0) process.stdout.write("."); } - const datei = path.join(ZIEL, PROJEKT + "-" + a.key + ".mp4"); + const datei = path.join(ZIEL, PROJEKT + "-" + a.key + DATEI_ZUSATZ + ".mp4"); process.stdout.write(" kodiere "); await kodieren(ordner, datei, anzahl); await rm(ordner, { recursive: true, force: true }); diff --git a/animation/post9-animWebinar-1x1.mp4 b/animation/post9-animWebinar-1x1.mp4 new file mode 100644 index 0000000..0cd5cdc Binary files /dev/null and b/animation/post9-animWebinar-1x1.mp4 differ diff --git a/assets/eigene/geerkens-team.jpg b/assets/eigene/geerkens-team.jpg new file mode 100644 index 0000000..a35c0d0 Binary files /dev/null and b/assets/eigene/geerkens-team.jpg differ diff --git a/post1.html b/post1.html index ffc4f6e..1aaeab6 100644 --- a/post1.html +++ b/post1.html @@ -805,7 +805,12 @@ if (location.search.indexOf("nur=streifen") >= 0) - + + + + + +
diff --git a/post2-alt.html b/post2-alt.html index 1d0a6b2..efebbd0 100644 --- a/post2-alt.html +++ b/post2-alt.html @@ -1108,7 +1108,12 @@ if (location.search.indexOf("nur=anim") >= 0) - + + + + + +
diff --git a/post2.html b/post2.html index 9d25ae4..9263b5b 100644 --- a/post2.html +++ b/post2.html @@ -1001,7 +1001,12 @@ if (location.search.indexOf("nur=anim") >= 0) - + + + + + +
diff --git a/post3.html b/post3.html index 3a874e9..3a89f87 100644 --- a/post3.html +++ b/post3.html @@ -1021,7 +1021,12 @@ if (location.search.indexOf("nur=anim") >= 0) - + + + + + +
diff --git a/post4.html b/post4.html index 94306bb..aed9a36 100644 --- a/post4.html +++ b/post4.html @@ -1049,7 +1049,12 @@ if (location.search.indexOf("nur=anim") >= 0) - + + + + + +
diff --git a/post5.html b/post5.html index a31c95e..de78904 100644 --- a/post5.html +++ b/post5.html @@ -1049,7 +1049,12 @@ if (location.search.indexOf("nur=anim") >= 0) - + + + + + +
diff --git a/post6.html b/post6.html index 968a737..29ff358 100644 --- a/post6.html +++ b/post6.html @@ -1053,7 +1053,12 @@ if (location.search.indexOf("nur=anim") >= 0) - + + + + + +
diff --git a/post7.html b/post7.html index b40d6d8..3e3d6a8 100644 --- a/post7.html +++ b/post7.html @@ -1063,7 +1063,12 @@ if (location.search.indexOf("nur=anim") >= 0) - + + + + + +
diff --git a/post8.html b/post8.html index a65b270..834301a 100644 --- a/post8.html +++ b/post8.html @@ -1063,7 +1063,12 @@ if (location.search.indexOf("nur=anim") >= 0) - + + + + + +
diff --git a/post9-v2.html b/post9-v2.html new file mode 100644 index 0000000..8e84c38 --- /dev/null +++ b/post9-v2.html @@ -0,0 +1,8403 @@ + + + + + + +PostGrid Post 9 · Variante 2 · Kundengeschichte + + + + + + + +
+ + + +
+
+
+
+
+
+
+
+
+

+
+ + +
+
+ + + +
+
+
+ + +
+ + + + + + diff --git a/post9-v3.html b/post9-v3.html new file mode 100644 index 0000000..38cc9f5 --- /dev/null +++ b/post9-v3.html @@ -0,0 +1,8407 @@ + + + + + + +PostGrid Post 9 · Variante 3 · Kundengeschichte dunkel + + + + + + + +
+ + + +
+
+
+
+
+
+
+
+
+

+
+ + +
+
+ + + +
+
+
+ + +
+ + + + + + diff --git a/post9-v4.html b/post9-v4.html new file mode 100644 index 0000000..ef4be52 --- /dev/null +++ b/post9-v4.html @@ -0,0 +1,8584 @@ + + + + + + +PostGrid Post 9 · Variante 4 · Zahlen + + + + + + + +
+ + + +
+
+
+
+
+
+
+
+
+

+
+ + +
+
+ + + +
+
+
+ + +
+ + + + + + diff --git a/post9-v5.html b/post9-v5.html new file mode 100644 index 0000000..ca53234 --- /dev/null +++ b/post9-v5.html @@ -0,0 +1,8587 @@ + + + + + + +PostGrid Post 9 · Variante 5 · Zahlen dunkel + + + + + + + +
+ + + +
+
+
+
+
+
+
+
+
+

+
+ + +
+
+ + + +
+
+
+ + +
+ + + + + + diff --git a/post9-varianten.html b/post9-varianten.html new file mode 100644 index 0000000..de8055e --- /dev/null +++ b/post9-varianten.html @@ -0,0 +1,179 @@ + + + + + +PostGrid · Post 9 · Varianten + + + + +
+ PostGrid + Alle Projekte + Variante 1 bearbeiten + Variante 2 bearbeiten + Variante 3 bearbeiten + Variante 4 bearbeiten + Variante 5 bearbeiten +
+ +
+
+
+

Post 9 · Webinar-Anzeige

+

Fünf Varianten derselben Anzeige. Lade Streifen ...

+
+ +
+

Variante 1 · Webinar-Fenster · fertig seit 17.10.

+

Das Bewegtbild zeigt das Webinar mit seinen vier Teilen und beiden Sprechern, danach die Anmeldung. + Zwei Elemente, das erste ist ein Video. Als Anzeige deshalb in 1:1.

+
+
+
+
+
+ +
+

Variante 2 · Kundengeschichte · angelehnt an weclapp

+

Komposition wie das Karussell von weclapp zu PV Green (Werbebibliothek, ID 792638160291622): Logo mit Etikett + und Foto, Zitat mit freigestellter Person, Ausgangslage, mit HiveGrid, Anmeldung. Farben, Schrift und Formen + von uns: Gelb und Dunkel, Manrope, Waben, Chamfer. Fünf Bilder, kein Video, als Anzeige also auch in 4:5 möglich.

+
+
+
+
+ +
+

Variante 3 · Kundengeschichte dunkel · wie Variante 2

+

Dieselben fünf Slides wie Variante 2 auf dem dunklen Grund des Posts. Texte in Weiß, Formen und Wabenband in + einem helleren Blau, Gelb bleibt. Was auf Gelb und im Geerkens-Chip steht, bleibt dunkel.

+
+
+
+
+ +
+

Variante 4 · Zahlen · angelehnt an HERO Insights

+

Komposition wie das Karussell „HERO Insights“ (Werbebibliothek, ID 3818182885142025): dunkles Titelbild, + dann Karten mit Titel, schwarzem und gelbem Balken und einer Grafik. Titelbild mit Noah als Teaser fürs Webinar, + Zahlen als Wabenbild (100 Waben) und Ring statt Tabellen. Thema: Zeit, die Betriebe verlieren, und wie wenig KI bisher + genutzt wird. Zahlen aus KfW Research (April 2025) und Bitkom (504 Betriebe, 2025), Quelle auf jeder Karte.

+
+
+
+
+ +
+

Variante 5 · Zahlen dunkel · wie Variante 4

+

Dieselben fünf Karten wie Variante 4 auf dem dunklen Grund des Posts.

+
+
+
+
+
+
+ + + + diff --git a/post9.html b/post9.html index 5b542c7..ed06182 100644 --- a/post9.html +++ b/post9.html @@ -15,7 +15,7 @@ if (location.search.indexOf("nur=anim") >= 0) -PostGrid Post 9 · Webinar +PostGrid Post 9 · Variante 1 · Webinar-Fenster