Differences

This shows you the differences between two versions of the page.

--- howto:design-artefakte [2024/10/23 00:32] – [Table] jwacalex
+++ howto:design-artefakte [2024/11/03 09:33] – [Infobeamer] kunsi
@@ Line 1: / Line 1: @@
 ====== Design-Artefakte ======
 ===== Lizenz =====
-Die Designartefakte müssen unter der selben Lizenz wie die Veranstaltungsinhalte stehen.
+Die Designartefakte müssen unter der selben Lizenz wie die Veranstaltungsinhalte stehen. Bei Audio ist sicherzustellen, dass die Materalien nicht bei einer Verwertungsgesellschaft registriert sind ("GEMA-Frei")
 ===== Übersicht über die Artefakte =====
@@ Line 8: / Line 8: @@
 | Logo               | Konferenzlogo                                         | Pixel (png) oder Vektorgrafik (svg)  |
 | Styleguide         | Styleguide für Webseiten                              | CSS, Fonts, etc                      |
-| Pausenschleife     | Videoloop und Musik für die Pause im Stream           | Video- und Musikdatei                |
+| Pauseloop          | Videoloop und Musik für die Pause im Stream           | Video- und Musikdatei                |
 | StreamLogo         | Overlay mit Logo für den Livestream (für jeden Raum)  | Pixelgrafik mit Transparenz          |
 | ComposeBackground  | Hintergründe für die Composemodes in voctomix         | Pixelgrafik                          |
 | Intro              | Introvideo mit Daten über den Vortrag                 | Video mit Audio                      |
 | Outro              | Abspannvideo mit Infos über Konferenz                 | Video mit Audio                      |
-| Bauchbinden        | Einblendungen im Video                                | Pixelgrafik mit Transparenz          |
+| Lowerthird | Einblendungen im Video                                | Pixelgrafik mit Transparenz          |
 | Infobeamer         | Hintergründe für Infobeamer Einstellungen             | Pixelgrafik mit Transparenz          |
+===== Logo =====
+===== Styleguide =====
+Der Styleguide wird für die Streamingwesbeite und die Grundeinstellungen im Infobeamer benötigt. Wir brauchen neben den Farben auch die Fonts und sofern vorhanden, CSS-Datein und Beispielbilder.
+==== Streamingwebseite ====
+Die Webseite, auf der Livestreams für die Dauer der Veranstaltung abgerufen werden können: https://streaming.media.ccc.de
+  * wird aus Git Repo erstellt: https://github.com/voc/streaming-website
+    * einfach einen PR eröffnen wenn fertig
+  * vielfältige CSS Anpassungen und Custom HTML möglich
+===== Pauseloop =====
+==== Video ====
+Seamless loopendes Video, das als Endlosschleife zwischen Vorträgen in der Pause in den Livestream geschickt wird.
+  * Videoformat: 1920x1080 pixel, 25 FPS, h264 oder mpeg2
+  * Audioformat: Keins. Pausenmusik ist vom loopenden Video unabhängig
+==== Audio ====
+Musik, die in Pausen in den Livestream eingespielt wird.
+* Audioformat: alles was ffmpeg lesen kann, wav, flac, aac, mp2, mp3
+===== Streamlogo =====
+Overlay für Livestream. Kleines halbtransparentes Logo oben in einer Ecke
+* Videoformat: statisches PNG, alpha channel ist zu empfehlen, 1920x1080px
+* kann individuell pro Raum sein
+* kann zusätzlich auch für den Slides-Only-Stream individuell sein
+===== ComposeBackground  =====
+Der Videomischer Voctomix setzt aus Slides und Kamera zusammengesetzte Bilder zusammen, Slides in groß, Kamera klein daneben.
+* Format: statische PNGs, 1920x1080px
+* einzelne Dateien für
+    * Lecture Mode
+    * Side by Side
+    * grün ist wo der hintergrund durchkommt, blau/rot sind die drübergelegten Kamerabilder/Slides
+* individuell pro Raum
+==== Side by Side ====
+{{:howto:sidebyside.png?nolink&400|}}
+==== Lecture Mode ====
+{{:howto:lecturemode.png?nolink&400|}}
+===== Intro =====
+Kurze Videos, die an den Anfang jedes Talks gesetzt werden. Darin sind als Textelemente mindestens die Vortragenden und der Titel des Vortrags genannt.
+* Dauer: zwischen 5 und 10 Sekunden
+* Videoformat: 1920x1080 pixel, 25 FPS, h264 oder mpeg2
+* Audioformat: optional, 48kHz, aac oder mp2
+* Datenquelle: schedule.xml
+* Dateiname: event id aus schedule.xml, eine Vdeodatei pro Vortrag
+* Achtung! schedule.xml ändert sich während der Veranstaltung regelmäßig, es müssen also auch während der Veranstaltung noch intros neu erstellt werden können
+* Software: https://github.com/voc/intro-outro-generator
+* Designquelle: mehrere Möglichkeiten, sucht euch eine aus. Die erste und zweite sind am wenigsten aufwändig
+==== statisches PNG ====
+* nur noch Text drüberlegen und gut ist
+* simpel
+* einfach
+* kann überall laufen um auf abruf neue intros zu generieren
+==== svg ====
+* simpel
+* gibt im intro/outro generator funktionen für einfache 2D-Animationen
+* kann überall laufen um auf abruf neue intros zu generieren
+==== blender ====
+* aufwändigere animationen
+* lange Renderdauer
+* braucht GPU und Hardware, die nicht immer aufm Event vorhanden ist
+==== apple motion ====
+* Braucht einen mac
+* Status der Automatisierung unklar
+==== after effects ====
+* Windows
+* Status der Automatisierung unklar
+===== Outro =====
+-10 Sekunden Abspann am Ende des Vortragsvideos. Platz für eventuelle Danksagungen und wenns unbedingt sein muss Logos von Sponsoren u.ä.
+* Üblicherweise ein Einheitsoutro, kann aber auch individuell pro Vortrag sein
+* kann aus selber rendering-pipeline wie die Intros fallen
+* alternativ aus einem statischen png ein Video machen
+* Video/Audioformat: siehe Intro
+===== Lowerthird =====
+Englisch Lower Thirds. Eine Einblendung, die während der Vortrag läuft gezeigt werden kann. Aus den Nachrichten bekannt als das Band da unten wo Name und eine Info zur Persönlichkeit steht.
+* Videoformat: einzelnes png pro vortrag, alpha channel ist zu empfehlen, 1920x1080px
+* Dateinamen: siehe https://github.com/voc/voctomix/tree/main/voctocore#16143-select-overlays-from-a-schedule
+===== Infobeamer =====
+Zwischen Vorträgen wird im Vortragssaal eine Dauerschleife über info-beamer angezeigt. Üblicherweise enthält diese Dauerschleife Informationen zum nächsten Vortrag in diesem Raum, zu anderen Vorträgen im Event und eine Auswahl an Fediverse-Content, der zum Event-Hashtag passt. Üblicherweise wird dafür [[https://info-beamer.com/raspberry-pi-digital-signage-scheduled-player-4765.html|das info-beamer modul 'scheduled player']] verwendet.
+Alternativ können wir auch andere Inhalte anbieten, wie z. B. nur eine quasi-statische Auflistung der zukünftigen Vorträge oder [[https://infobeamer.c3voc.de|User-Submittable Content]]. Kontaktiere deine VOC-Verantwortliche Person, um mehr Details zu bekommen.
+Wenn gewünscht (und genug Hardware vorhanden), können wir auch andere Bildschirme im Gebäude bespielen. Wir benötigen dafür einen HDMI-Eingang und eine Stromversorgung (Steckdose, evtl. reicht auch USB).
+==== Mögliche Designelemente ====
+  * Bilder müssen als Pixelgrafik (PNG) in der finalen Größe vorliegen.
+  * Schriftarten als `.ttf`
+  * Sofern nicht anders angegeben, ist die Ausgabe-Auflösung 1920x1080px (FullHD)
+Als Minimalversion benötigen wir folgende Elemente:
+  * Hintergrundbild
+  * Konferenz-Schriftart
+  * Farben (Hex, `#RRGGBB`)
+Folgende Elemente sind optional, können bei Bedarf und Verfügbarkeit verwendet werden:
+  * verschiedene Hintergründe für
+    * Fahrplaninfos
+    * Konferenzinfos
+    * Social Media
+    * Sponsoren
+  * Animationsvideos für Wechsel zwischen Inhaltsbereichen (MP4 H.264, wir empfehlen nicht mehr als 3s)
+  * Wir brauchen alle Designelemente einzeln als Bilder, auch Logos, Schriften etc.
+  * Schriften für:
+    * Raum-Name
+    * Talk-Titel
+    * Konferenztag
+    * Uhrzeit
+    * Track-Name
+    * Mastodon-Displayname
+    * Mastodon-Username/Toot-Zeit
+    * Toot-Text
+    * Scroller (mit Toot-Content)
+    * Freitextfelder