Verwenden von Bildern und Videos in Totara

Verwenden von Bildern

In diesem Abschnitt haben wir einige Tipps für die Verwendung von Bildern in Totara sowie empfohlene Größen für verschiedene Bilder und einige Beispiele für die Verwendung von Bildern auf unseren Totara Community- und Academy-Websites bereitgestellt.

Allgemeine Anleitung

Hier sind einige allgemeine Hinweise, die Sie beim Hinzufügen von Bildern zu Ihrer Website beachten sollten:

• Verwenden Sie weboptimierte Dateiformate wie SVG oder JPG/JPEG. Dies wird dazu beitragen, schnellere Ladezeiten und eine effizientere Nutzung mobiler Daten für Nutzer zu ermöglichen, die auf mobilen Geräten auf die Website zugreifen.
• PNG-Dateien sind normalerweise größer, aber dieses Format unterstützt transparente Hintergründe. Das PNG-Format wird daher empfohlen, wenn Ihr Bild einen transparenten Hintergrund hat.
• Vermeiden Sie es, nach Möglichkeit Text zu Bildern hinzuzufügen. Wenn Sie Text in einem Bild verwenden müssen, versuchen Sie, nicht mehr als drei Wörter zu verwenden. Überlegen Sie, wie lesbar der Text ist, wenn er herunterskaliert und auf kleineren Geräten wie Smartphones angezeigt wird.
• Vermeiden Sie zu große Dateien und suchen Sie stattdessen nach der richtigen Balance zwischen Bildqualität und Dateigröße.
• Stellen Sie sicher, dass der Farbmodus der Bilder auf RGB (für die Webnutzung) und nicht auf CMYK (für den Druck) eingestellt ist, unabhängig von der verwendeten Software (z. B. Photoshop, Canvas, Illustrator oder Gimp).
• Wenn Sie Bilder von einem anderen Ort aufnehmen, können Sie in der Regel entweder die Aktion 'Speichern als' oder 'Bilder exportieren als' ausführen und dann einen geeigneten Dateityp wie JPG oder PNG auswählen.
• Die Auflösung von 72 dpi (oder ppi) reicht für die Website-Nutzung aus, während 300 dpi für die Drucknutzung empfohlen werden.

Ventura Themen-Assets

Anmeldebanner

Standard-Anmeldeseitenbanner: 1672x430px

In der Community verwendete Anmeldeseite: 1672x215 px, JPEG-Datei

Ressourcen-Bilder

Standard-Ressourcenbild: 428x228 px

Platzieren Sie den Interessenpunkt des Bildes (z. B. ein Symbol, Text, das Gesicht einer Person) in der Mitte, da dies der sichere Bereich ist, der nicht zugeschnitten wird. Das Bild erscheint zugeschnitten auf anderen Geräten (z. B. mobilen Geräten) und kleineren Bildschirmen (z. B. Laptops), aber der zentrale Bereich ist weiterhin sichtbar. Hier sehen Sie ein Beispiel für ein Ressourcenbild mit Text und wie Text und Symbol im sicheren Bereich ausgerichtet sind.

Ressourcenbild mit Text:

Ressourcenbild mit überlagertem sicheren Bereich:

Workspace-Bilder

Standardbild für Arbeitsbereich: 426x477 px

Stellen Sie wie bei den Ressourcenbildern den Hauptfokus der Grafik in die Mitte, da der sichere Bereich des Arbeitsbereichsbildes auf ein Quadrat in der Mitte beschränkt ist, wie im Beispiel gezeigt.

Workspace-Bild:

Arbeitsbereichsbild mit Sicherheitsbereich überlagert:

Arbeitsbereichsbild im Kontext:

Arbeitsbereichsbild im Block Empfohlene Arbeitsbereiche:

In diesem Block wird der Arbeitsbereich mit einer schwarzen Schattierung oben und mit der Anzahl der Arbeitsbereichsmitglieder unten angezeigt.

Standardbilder für Kurse und Programme

Standard-Programm-/Kursbild: 373x150 px

Kursbilder werden automatisch in der Größe geändert. Wenn Sie ein quadratisches Bild verwenden, wird es vertikal oder horizontal auf verschiedenen Seiten zugeschnitten. In der Totara Community verwenden wir eine größere Bildgröße (834x334 px), die die gleichen Proportionen wie die Standard-Kursbildgröße von 373x150 px hat.

Beispiel für Kursbild:

Kursbild im aktuellen Lernblock:

Kursbild im Block Empfohlene Kurse:

Logos und Favicons

Logo: Ein horizontales Logo ohne Ränder wird bevorzugt. Eine SVG-Datei wird empfohlen, um die beste Bildqualität in verschiedenen Größen zu erhalten.

Favicon: Dieses Symbol wird neben dem Namen der Website/Seite in der Browser-Registerkarte und in den Browser-Lesezeichen angezeigt. ICO-Dateien werden empfohlen, aber auch PNG-Dateien werden unterstützt. Die optimale Größe ist 16x16 px (am häufigsten) oder 32x32 px.

Andere Community-/Akademie-Assets

Ausweiskartengröße: 426x426 px, PNG-Format (enthält Transparenz)

Vermeiden Sie es, Text auf Badge-Bildern zu platzieren. Badges werden normalerweise neben dem Kurs- oder Programmtitel angezeigt. Einfachheit ist der Schlüssel. Wenn Sie also Badge-Bilder entwerfen, versuchen Sie, die Anzahl der Elemente, Farben und Formen auf ein Minimum zu reduzieren, da Badges an einigen Stellen nur bis zu 100 x 100 Pixel angezeigt werden können.

Ausgewählte Linksblöcke: Wir verwenden zwei Dimensionen für Kacheln in ausgewählten Linksblöcken: 

• Quadratisch: 500x500 px
• Landschaft: 500x375px

Banner in voller Breite: Desktop-Banner sind 1650 x 188 Pixel und mobile Banner sind 600 x 177 Pixel.

Banner des Community-Feedback-Formulars: 1280 x 223 px

Akademie-Quiz-Symbole: 115 x 100 Pixel, PNGs mit transparentem Hintergrund

In der Totara Academy enthält der Fragetext in den Quizaktivitäten das Quizsymbol. Dieses Symbol ist in den Bildeigenschaften links ausgerichtet. 

Video verwenden

In diesem Abschnitt haben wir einige wichtige Informationen und Best-Practice-Anleitungen für das Hinzufügen von Videos zu Ihrer Totara-Website beschrieben.

Allgemeine Empfehlungen

Hier sind einige allgemeine Hinweise, die Sie beim Hinzufügen von Videos zu Ihrer Website beachten sollten:

• Die meisten Videos werden mit mindestens 1080p (Full HD) bei 24 Bildern pro Sekunde (fps) aufgenommen. In der folgenden Tabelle finden Sie weitere Informationen zu gängigen Videogrößen.
• Das Standardseitenverhältnis für Videos ist 16:9. Der Begriff „Aspektverhältnis“ bezieht sich auf die Breite und Höhe eines Bildes in Bezug zueinander, z. B. ergibt die Division von 1920 durch 1080 16/9.
• Das Seitenverhältnis von 16:9 wird auch als „Breitbild“ bezeichnet und ist derzeit das am häufigsten verwendete Seitenverhältnis.
• Exportieren Sie ein Video mit einer kürzeren Dauer, um verschiedene Codecs und Komprimierungseinstellungen zu testen.
• Aktivieren Sie die Dialogfelder für die Komprimierungseinstellungen beim Rendern/Exportieren des Videos. 
• Für hochwertige Videos wird das AVI-Format empfohlen. Beachten Sie jedoch, dass die Dateigrößen bei diesem Format in der Regel erheblich größer sind.
• MP4-Dateien werden für das Streaming empfohlen, da es das am häufigsten unterstützte Format ist (im Gegensatz zu MOV- oder AVI-Dateien).
• H.264 unterstützt keine Transparenz, ist aber eine gute Option, um die Qualität zu maximieren und gleichzeitig eine kleine Dateigröße beizubehalten. H.264 wird auch für Online-Videoplattformen wie YouTube und Vimeo empfohlen.
• Beachten Sie, dass QuickTime Player keine Videos als MP4-Dateien exportiert.
• Grafiken oder wichtige Bilder sollten nicht in dem Bereich erscheinen, in dem Untertitel erscheinen.
• Vermeiden Sie die gleichzeitige Verwendung von mehr als zwei Schriftarten auf dem Bildschirm.

In der folgenden Tabelle finden Sie Details zu häufig verwendeten Videoauflösungen.

 Wenn Sie Videos für soziale Medien exportieren, überprüfen Sie das Seitenverhältnis, das für die Social-Media-Plattform verwendet wird, die Sie verwenden möchten:

• Landschaft – 16:9 – (1280 x 720 Pixel) – Facebook- oder LinkedIn-Videos
• Porträt – 9:16 (720 x 1280 Pixel) – z. B. Instagram-Stories
• Quadrat – 1:1 (mindestens 1080 x 1080 Pixel) – z. B. Instagram-Beiträge (Quadratformat)

Beim Erstellen oder Exportieren eines Videos müssen Sie berücksichtigen, wie Ihr Video angezeigt wird. Wenn Ihr Video im Verhältnis 9:16 (Hochformat) angezeigt werden soll, sollten Sie es in diesem Seitenverhältnis mit der minimalen Videoauflösung für Ihre beabsichtigte Plattform exportieren.

Die Videoauflösung für jede Plattform variiert. Daher empfehlen wir, die Richtlinien der Social-Media-Plattform zu lesen, bevor Sie Ihr Video erstellen.

Bewährte Verfahren für Videos

• Jeder Text, der in Videos erscheint, muss den WCAG-Kontraststandards entsprechen.
• Vermeiden Sie Flash- oder Stroboskopeffekte in Ihren Videos.
• Stellen Sie Untertitel oder Transkripte für Videos mit Audio oder wichtigen Informationen bereit, die in den Bildern enthalten sind.
• Untertitel und Bildunterschriften ermöglichen es Ihnen, Ihre Videos mit einem größeren Publikum zu teilen, einschließlich gehörloser oder schwerhöriger Zuschauer und Zuschauer, die eine andere Sprache sprechen. Erfahren Sie, wie Sie YouTube-Videos Untertitel und Untertitel hinzufügen können.
• Videos, die mit urheberrechtlich geschützter Musik, die ohne Genehmigung verwendet wird, auf YouTube hochgeladen werden, werden von YouTube blockiert. Es gibt eine Reihe von Websites, auf denen Sie urheberrechtlich geschützte Musik finden können, die Sie in Ihren Videos verwenden können.

Zusätzliche Ressourcen und nützliche Tools

Für die Videobearbeitung empfehlen wir die Verwendung von Adobe Premier Pro oder Adobe After Effects. Hier finden Sie jedoch eine Auswahl an kostenlosen Tools, die Sie beim Hinzufügen von Medien zu Ihrer Totara-Website nützlich finden könnten:

• Adobe Express: Kostenlose Videosoftware (mit einem Adobe-Konto). Ermöglicht es Ihnen, Videos kostenlos in ein beliebiges Seitenverhältnis oder eine benutzerdefinierte Größe zuzuschneiden. Sie können Ihr Video auch auf die richtige Länge kürzen oder das Audio stumm schalten, neben anderen Funktionen.
• Wagemut: Audacity ist ein kostenloser und Open-Source-Digital-Audio-Editor und eine Aufzeichnungsanwendung.
• Farb- und Kontrast-Erreichbarkeitscheck: Stellen Sie sicher, dass Ihre ausgewählten Farben den Anforderungen an die Zugänglichkeit entsprechen und von Nutzern mit Sehbehinderungen leicht gelesen werden können.
• Bildkompressor: Optimieren Sie JPEG-, PNG-, SVG-, GIF- und WEBP-Dateien.

Weitere Informationen finden Sie in der Anleitung von W3C zur Bereitstellung von Audio- und Videomedien.