howto:design-artefakte

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
howto:design-artefakte [2024/10/27 20:06] – jwacalexhowto:design-artefakte [2026/08/17 19:10] (current) – [Pauseloop] commanderred
Line 1: Line 1:
-====== Design-Artefakte ====== +# Design-Artefakte 
-===== Lizenz =====+ 
 +## Deadline 
 + 
 +Alles hier genannte muss 2 Wochen vor Beginn des ersten Vortrags bereitstehen und dem VOC übergeben sein.   
 +Ausnahme: Intros von Vorträgen deren Titel sich in dieser Zeit nochmal geändert haben.   
 +Ist 2 Wochen vor dem ersten Vortrag nichts eingegangen wird das VOC benötigte Artefakte selbst erstellen und selbst erstelltes verwenden. 
 + 
 +## Lizenz
 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") 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 =====+## Übersicht über die Artefakte
  
 ^ Artefakt           ^ Kurzbeschreibung                                      ^ Bereitstellung                       ^ ^ Artefakt           ^ Kurzbeschreibung                                      ^ Bereitstellung                       ^
Line 11: Line 18:
 | StreamLogo         | Overlay mit Logo für den Livestream (für jeden Raum)  | Pixelgrafik mit Transparenz          | | 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                          | | ComposeBackground  | Hintergründe für die Composemodes in voctomix         | Pixelgrafik                          |
-| Intro              | Introvideo mit Daten über den Vortrag                 | Video mit Audio                      |+| Intro              | Introvideo mit Daten über den Vortrag                 | ein Video mit Audio pro Vortrag      |
 | Outro              | Abspannvideo mit Infos über Konferenz                 | Video mit Audio                      | | Outro              | Abspannvideo mit Infos über Konferenz                 | Video mit Audio                      |
 | Lowerthird | Einblendungen im Video                                | Pixelgrafik mit Transparenz          | | Lowerthird | Einblendungen im Video                                | Pixelgrafik mit Transparenz          |
 | Infobeamer         | Hintergründe für Infobeamer Einstellungen             | Pixelgrafik mit Transparenz          | | Infobeamer         | Hintergründe für Infobeamer Einstellungen             | Pixelgrafik mit Transparenz          |
  
-===== Logo =====+## Logo
  
-===== Styleguide ===== +WIP 
-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.+## 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. Bitte keine Fonts die Kostenpflichtig sind.
  
-==== Streamingwebseite ====+ 
 +### Streamingwebseite
 Die Webseite, auf der Livestreams für die Dauer der Veranstaltung abgerufen werden können: https://streaming.media.ccc.de Die Webseite, auf der Livestreams für die Dauer der Veranstaltung abgerufen werden können: https://streaming.media.ccc.de
  
Line 28: Line 37:
   * vielfältige CSS Anpassungen und Custom HTML möglich   * vielfältige CSS Anpassungen und Custom HTML möglich
  
-===== Pauseloop =====  + 
-==== Video ====+## Pauseloop 
 + 
 +Dies wird abgespielt, während wir gerade nicht "Live" sind. 
 +### Video
 Seamless loopendes Video, das als Endlosschleife zwischen Vorträgen in der Pause in den Livestream geschickt wird. 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   * Videoformat: 1920x1080 pixel, 25 FPS, h264 oder mpeg2
   * Audioformat: Keins. Pausenmusik ist vom loopenden Video unabhängig   * Audioformat: Keins. Pausenmusik ist vom loopenden Video unabhängig
  
-==== Audio ====+ 
 +### Audio
 Musik, die in Pausen in den Livestream eingespielt wird. Musik, die in Pausen in den Livestream eingespielt wird.
 * Audioformat: alles was ffmpeg lesen kann, wav, flac, aac, mp2, mp3 * Audioformat: alles was ffmpeg lesen kann, wav, flac, aac, mp2, mp3
  
-===== Streamlogo ===== + 
 +## Streamlogo
 Overlay für Livestream. Kleines halbtransparentes Logo oben in einer Ecke Overlay für Livestream. Kleines halbtransparentes Logo oben in einer Ecke
 * Videoformat: statisches PNG, alpha channel ist zu empfehlen, 1920x1080px * Videoformat: statisches PNG, alpha channel ist zu empfehlen, 1920x1080px
Line 44: Line 58:
 * kann zusätzlich auch für den Slides-Only-Stream individuell sein * kann zusätzlich auch für den Slides-Only-Stream individuell sein
  
-===== ComposeBackground  ===== + 
 +## ComposeBackground
 Der Videomischer Voctomix setzt aus Slides und Kamera zusammengesetzte Bilder zusammen, Slides in groß, Kamera klein daneben.  Der Videomischer Voctomix setzt aus Slides und Kamera zusammengesetzte Bilder zusammen, Slides in groß, Kamera klein daneben. 
 * Format: statische PNGs, 1920x1080px * Format: statische PNGs, 1920x1080px
Line 53: Line 68:
 * individuell pro Raum  * individuell pro Raum 
  
-==== Side by Side ==== 
-{{:howto:sidebyside.png?nolink&400|}} 
  
 +### Side by Side
 +{{:howto:side-by-side.svg?nolink&400|}}
  
-==== Lecture Mode ==== 
-{{:howto:lecturemode.png?nolink&400|}} 
  
 +### Lecture Mode
 +{{:howto:lecture.svg?nolink&400|}}
  
  
  
-===== Intro ===== + 
 +## Intro
 Kurze Videos, die an den Anfang jedes Talks gesetzt werden. Darin sind als Textelemente mindestens die Vortragenden und der Titel des Vortrags genannt. Kurze Videos, die an den Anfang jedes Talks gesetzt werden. Darin sind als Textelemente mindestens die Vortragenden und der Titel des Vortrags genannt.
  
Line 70: Line 86:
 * Audioformat: optional, 48kHz, aac oder mp2 * Audioformat: optional, 48kHz, aac oder mp2
 * Datenquelle: schedule.xml * Datenquelle: schedule.xml
-* Dateiname: event id aus schedule.xml, eine Vdeodatei pro Vortrag  +* Dateiname: event id aus schedule.xml, eine Videodatei 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+* Achtung! schedule.xml ändert sich während der Veranstaltung regelmäßig, es müssen also auch während der Veranstaltung auf Zuruf noch Intros neu erstellt werden können
 * Software: https://github.com/voc/intro-outro-generator * 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 ====+ 
 +### Designquellen 
 + 
 +#### statisches PNG
 * nur noch Text drüberlegen und gut ist * nur noch Text drüberlegen und gut ist
 * simpel * simpel
 * einfach * einfach
-* kann überall laufen um auf abruf neue intros zu generieren+* kann überall laufen um auf Abruf neue Intros zu generieren 
  
-==== svg ====+#### svg
 * simpel * simpel
-* gibt im intro/outro generator funktionen für einfache 2D-Animationen +* gibt im Intro/Outro Generator Funktionen für einfache 2D-Animationen 
-* kann überall laufen um auf abruf neue intros zu generieren+* kann überall laufen um auf Abruf neue Intros zu generieren
  
-==== blender ==== + 
-* aufwändigere animationen+#### blender 
 +* aufwändigere Animationen
 * lange Renderdauer * lange Renderdauer
 * braucht GPU und Hardware, die nicht immer aufm Event vorhanden ist * braucht GPU und Hardware, die nicht immer aufm Event vorhanden ist
 +* auf kurze Renderzeiten achten. Wenige Minuten pro Intro sind akzeptabel, mehrere Stunden pro Intro nicht.
 +
 +
 +#### apple motion
 +Generierte Intros mit Apple Motion sind möglich. Hierzu ist ein Mac mit installiertem *Apple Motion* und *Apple Compressor* notwendig. Zusätzlich ist `ffmpeg` notwendig, dies kann im Zweifel über homebrew installiert werden. Danach können mittels des intro-outro-generators automatisiert intros generiert werden. Eine Automatisierung für sonstige Inhalte (Bauchbinden, Outro, Pauseloop) ist nicht vorgesehen.
  
-==== apple motion ==== 
-* Braucht einen mac 
-* Status der Automatisierung unklar 
  
-==== after effects ==== +#### after effects 
-* Windows+* MacOS und Windows only
 * Status der Automatisierung unklar * Status der Automatisierung unklar
  
  
-===== Outro =====+## Outro
 5-10 Sekunden Abspann am Ende des Vortragsvideos. Platz für eventuelle Danksagungen und wenns unbedingt sein muss Logos von Sponsoren u.ä. 5-10 Sekunden Abspann am Ende des Vortragsvideos. Platz für eventuelle Danksagungen und wenns unbedingt sein muss Logos von Sponsoren u.ä.
  
Line 108: Line 130:
 * Video/Audioformat: siehe Intro * Video/Audioformat: siehe Intro
  
-===== Lowerthird ===== + 
 +## 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. 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 * 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 * Dateinamen: siehe https://github.com/voc/voctomix/tree/main/voctocore#16143-select-overlays-from-a-schedule
  
-===== Infobeamer =====  + 
-Infoscreen, der zwischen Vorträgen im Vortragssaal gezeigt wird. Vortragsprogramm wird da Zeitabhängig reingetemplated. Kann auch für Digital Signage woanders im Gebäude hergenommen werden. +## Infobeamer 
-    * Vielfältige Designelemente möglich, im Rahmen dessen was die Lua- und Rendering-API von Info-Beamer erlaubt. +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. 
-    * https://info-beamer.com/raspberry-pi-digital-signage-scheduled-player-4765.html + 
-    * verschiedene Hintergründe (optional, wir brauchen mindestens eins) für +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. 
-        * Fahrplaninfos + 
-        * Konferenzinfos +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). 
-        * Social Media + 
-        * (Sponsoren) + 
-    * Animationsvideos für Wechsel zwischen Inhaltsbereichen +### Mögliche Designelemente 
-        * 2-3s + 
-    * Wir brauchen alle Designelemente einzeln als Bilder, auch Logos, Schriften etc.+  * 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) 
 +  * Alle Designelemente idealerweise einzeln, nicht in einem Bild zusammengebaut. 
 + 
 +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) 
 +  * Schriften für: 
 +    * Raum-Name 
 +    * Talk-Titel 
 +    * Konferenztag 
 +    * Uhrzeit 
 +    * Track-Name 
 +    * Mastodon-Displayname 
 +    * Mastodon-Username/Toot-Zeit 
 +    * Toot-Text 
 +    * Scroller (mit Toot-Content) 
 +    * Freitextfelder
  
  
  • howto/design-artefakte.1730059575.txt.gz
  • Last modified: 2024/10/27 20:06
  • by jwacalex