Afbeeldingen en video's gebruiken in Totara

Afbeeldingen gebruiken

In deze sectie hebben we enkele tips gegeven voor het gebruik van afbeeldingen in Totara, evenals aanbevolen formaten voor verschillende afbeeldingen, en enkele voorbeelden van hoe we afbeeldingen hebben gebruikt op onze Totara Community en Academy-sites.

Algemene richtlijnen

Hier zijn enkele algemene richtlijnen waarmee je rekening moet houden bij het toevoegen van afbeeldingen aan je site:

• Gebruik web-geoptimaliseerde bestandsformaten zoals SVG of JPG/JPEG. Dit zal helpen om snellere laadtijden en efficiënter mobiel datagebruik te bieden voor gebruikers die de site bezoeken op mobiele apparaten. Let op dat het SVG-afbeeldingsbestandsformaat momenteel niet wordt ondersteund in de Totara Mobile-app, dus je moet alternatieve afbeeldingsbestandsformaten gebruiken voor inhoud die compatibel moet zijn met de app.
• PNG-bestanden zijn gewoonlijk groter, maar dit formaat ondersteunt transparante achtergronden. Het PNG-formaat wordt daarom aanbevolen wanneer je afbeelding een transparante achtergrond heeft.
• Vermijd het toevoegen van tekst aan afbeeldingen waar mogelijk. Als je tekst in een afbeelding moet gebruiken, probeer dan niet meer dan drie woorden te gebruiken. Overweeg hoe leesbaar de tekst zal zijn wanneer deze kleiner wordt en getoond op kleinere apparaten, zoals smartphones.
• Vermijd te grote bestanden en zoek in plaats daarvan naar de juiste balans tussen beeldkwaliteit en bestandsgrootte.
• Zorg ervoor dat de kleurmodus van afbeeldingen is ingesteld op RGB (voor webgebruik), niet op CMYK (voor afdrukken), ongeacht de gebruikte software (bijv. Photoshop, Canvas, Illustrator of Gimp).
• Wanneer je afbeeldingen van ergens anders maakt, kun je gewoonlijk een actie 'bewaar als' of 'exporteer afbeeldingen als' doen en vervolgens een geschikt bestandstype selecteren, zoals JPG of PNG.
• Een resolutie van 72 dpi (of ppi) is voldoende voor gebruik op de website, terwijl een resolutie van 300 dpi wordt aanbevolen voor afdrukken.

Ventura-themamiddelen

Inlogbanners

Standaard inlogpaginabanner: 1672x430 px

Inlogpaginabanner gebruikt in de Community: 1672x215 px, JPEG-bestand

Bronafbeeldingen

Standaard bronafbeelding: 428x228 px

Plaats het interessante punt van de afbeelding (bijv. een icoon, tekst, het gezicht van een persoon) in het midden, omdat dit het veilige gebied is dat niet bijgesneden zal worden. De afbeelding wordt bijgesneden op andere apparaten (zoals mobiele apparaten) en kleinere schermen (bijv. laptops), maar het centrale gedeelte blijft zichtbaar. Hier kun je een voorbeeld zien van een bronafbeelding met tekst en hoe de tekst en het icoon in de veilige zone zijn uitgelijnd.

Bronafbeelding met tekst:

Bronafbeelding met een veilige zone eroverheen gelegd:

Werkgroep afbeeldingen

Standaard werkgroepafbeelding: 426x477 px

Zoals met de bronafbeeldingen, plaats je de hoofdfocus van de afbeelding in het midden, omdat de veilige zone van de afbeelding van de werkgroep beperkt is tot een vierkant in het midden, zoals getoond in het voorbeeld.

Afbeelding werkgroep:

Werkgroepafbeelding met een veilige zone eroverheen gelegd:

Werkgroepafbeelding in context:

Werkgroepafbeelding in het blok Aanbevolen werkgroepen:

In dit blok wordt de werkgroep getoond met een zwarte gradiënt bovenaan en met het aantal werkgroepleden onderaan.

Standaard cursus- en programmaafbeeldingen

Standaard programma/cursus afbeelding: 373x150 px

Cursusafbeeldingen worden automatisch herschaald, dus als je een vierkante afbeelding gebruikt, wordt deze verticaal of horizontaal bijgesneden op verschillende pagina's. In de Moodle Community gebruiken we een grotere afbeeldingsgrootte (834x334 px) die dezelfde proporties heeft als de standaard cursusafbeeldingsgrootte van 373x150 px.

Voorbeeld cursusafbeelding:

Cursusafbeelding in het huidige leerblok:

Cursusafbeelding in het blok Aanbevolen cursussen:

Logo's en favicons

Logo: Een horizontaal logo zonder marges heeft de voorkeur. Een SVG-bestand wordt aanbevolen om de beste beeldkwaliteit op verschillende groottes te behouden.

Favicon: Dit icoontje zal getoond worden naast de site/paginanaam in de browser tab en in de browser bladwijzers. ICO-bestanden worden aanbevolen, maar PNG-bestanden worden ook ondersteund. De optimale grootte is 16x16 px (meest voorkomend) of 32x32 px.

Andere voorzieningen van de gemeenschap/academie

Badge grootte: 426x426 px, PNG format (bevat transparantie)

Plaats geen tekst op badge-afbeeldingen. Badges worden gewoonlijk naast de cursus- of programmatitel getoond. Eenvoud is belangrijk, dus probeer bij het ontwerpen van badge-afbeeldingen het aantal elementen, kleuren en vormen tot een minimum te beperken, omdat badges op sommige plaatsen zo klein als 100x100 px kunnen worden weergegeven.

Blokken met uitgelichte links: We gebruiken twee dimensies voor tegels in blokken met uitgelichte links: 

• Vierkante vorm: 500x500 px
• Landschap: 500x375 px

banners over de volledige breedte: Desktopbanners zijn 1650x188 px en mobiele banners zijn 600x177 px.

Community feedback formulierbanner: 1280 x 223 px

Academie toets iconen: 115 x 100 px, PNG's met transparante achtergronden

Op de Totara Academy bevat de vraagtekst in de toetsactiviteiten het toetsicoon. Dit icoontje is links uitgelijnd in de afbeeldingseigenschappen. 

Video gebruiken

In deze sectie hebben we belangrijke informatie en best practice-richtlijnen voor het toevoegen van video aan je Totara-site uiteengezet.

Algemene aanbevelingen

Hier zijn enkele algemene richtlijnen waarmee je rekening moet houden bij het toevoegen van video's aan je site:

• De meeste video's worden opgenomen in minstens 1080p (Full HD) met 24 frames per seconde (fps). Zie onderstaande tabel voor meer informatie over algemene videoformaten.
• De standaard beeldverhouding voor video's is 16:9. De term 'beeldverhouding' verwijst naar de breedte en hoogte van een afbeelding ten opzichte van elkaar, bijvoorbeeld het delen van 1920 door 1080 geeft je 16/9.
• De 16:9 beeldverhouding wordt ook wel 'breedbeeld' genoemd en is momenteel de meest gebruikte beeldverhouding.
• Exporteer een video met een kortere duur om verschillende codecs en compressie-instellingen te testen.
• Vink de dialoogvensters voor compressie-instellingen aan bij het weergeven/exporteren van de video. 
• Voor video van hoge kwaliteit wordt het AVI-formaat aanbevolen, maar let op dat de bestandsgroottes bij dit formaat gewoonlijk beduidend groter zijn.
• MP4-bestanden worden aanbevolen voor het streamen, omdat het het meest ondersteunde formaat is (in tegenstelling tot MOV- of AVI-bestanden).
• H.264 ondersteunt geen transparantie, maar is een goede optie om de kwaliteit te maximaliseren met behoud van een kleine bestandsgrootte. H.264 wordt ook aanbevolen voor online videoplatforms zoals YouTube en Vimeo.
• Let op dat QuickTime Player video's niet exporteert als MP4-bestanden.
• Alle afbeeldingen of belangrijke afbeeldingen mogen niet verschijnen in het gebied waar gesloten bijschriften verschijnen.
• Gebruik niet meer dan twee lettertypes tegelijk op het scherm.

In onderstaande tabel kun je details zien over veelgebruikte videoresoluties.

 Controleer bij het exporteren van video's voor social media de beeldverhouding die wordt gebruikt voor het social media-platform dat je wil gebruiken:

• Landschap - 16:9 - (1280 x 720 pixels) - Facebook- of LinkedIn-video's
• Portret - 9:16 (720 x 1280 pixels) - bijv. Instagram-verhalen
• Vierkant - 1:1 (minimaal 1080 x 1080 pixels) - bijv. Instagram-berichten (vierkant formaat)

Bij het maken of exporteren van een video moet je rekening houden met hoe je video wordt bekeken. Als je video bedoeld is om in 9:16 (portret) bekeken te worden, dan wil je die exporteren in die beeldverhouding met de minimale videoresolutie voor het bedoelde platform.

De videoresolutie voor elk platform verschilt, dus we raden aan om de richtlijnen van het social media-platform te controleren voordat je je video maakt.

Best practice voor video

• Elke tekst die in video's verschijnt, moet voldoen aan de WCAG-contrastnormen.
• Vermijd knipperen of strobe-effecten in je video's.
• Geef bijschriften of transcripties voor video's met audio of belangrijke informatie in de afbeeldingen.
• Met ondertitels en bijschriften kun je je video's delen met een grotere doelgroep, waaronder dove of slechthorende kijkers en kijkers die een andere taal spreken. Leer hoe je ondertitels en bijschriften kunt toevoegen aan YouTube-video's.
• Video's die naar YouTube worden geüpload met auteursrechtelijk beschermde muziek die zonder toestemming wordt gebruikt, worden geblokkeerd door YouTube. Er zijn een aantal sites waar je copyrightvrije muziek kunt vinden om te gebruiken in je video's.

Aanvullende bronnen en handige tools

Voor het bewerken van video's raden we aan om Adobe Premier Pro of Adobe After Effects te gebruiken. Hier is echter een selectie van gratis tools die je misschien nuttig vindt bij het toevoegen van media aan je Totara-site:

• Adobe Express: Gratis videosoftware (met een Adobe-account). Hiermee kun je gratis video bijsnijden naar elke aspectratio of aangepaste grootte. Je kunt je video ook op de juiste lengte trimmen of de audio dempen, naast andere functies.
• Gedurfdheid: Audacity is een gratis en open source digitale audio-editor en opnametoepassing.
• Toegangscontrole kleur en contrast: Zorg ervoor dat je geselecteerde kleuren voldoen aan de toegankelijkheidseisen en gemakkelijk kunnen worden gelezen door gebruikers met visuele beperkingen.
• Afbeeldingscompressor: Optimaliseer JPEG-, PNG-, SVG-, GIF- en WEBP-bestanden.

Zie de W3C-richtlijnen voor het toegankelijk maken van audio- en videomedia voor meer informatie.