.png?width=47&height=30&name=Logo-symbol%20(1).png){kind=logo}
Sommaire
- Les règles de Teach Up
- Nos conseils et astuces
- Quelques exemples d'illustrations visuelles pour s'inspirer
Les règles de Teach Up
Le format d'image
Les formats d'images acceptés au sein d'un module ou d'une évaluation sont les suivants : *.png,*.jpg,*.jpeg,*.jpe,*.jp2,*.gif,*.bmp,*.tiff,*.tif,*.svg,*.xcf,*.jfif,*.ico,*.cur,*.map,*.psd,*.avif,*.webp
Le poids des activités Teach Up
Teach Up n’a pas de limite de poids concernant l'activité au gloabl. Cependant, il est important de veiller à ne pas utiliser trop de gigaoctets, pour :
- des raisons de chargement de pages
- des raisons écologiques
En effet, plus la page est lourde, plus elle met du temps à charger et plus elle est gourmande en énergie.
Exportez vos images en RVB 72dpi, 150dpi grand maximum si vous souhaitez une qualité au-dessus. Pour compresser vos médias vous pouvez utiliser des compresseurs en ligne comme tinypng.com
La taille des images
Dans Teach Up, seules les couvertures de chapitre ont une taille définie : 1920 x 1440 px (pixels) sur un écran d’ordinateur. Le visuel choisi utilise tout l’espace de l’écran, quel que soit le type d’appareil.
|
|
| Ordinateur | Téléphone |
L’image est recadrée sur téléphone. Pensez à centrer votre élément principal afin qu’il reste toujours visible. Et, évitez de placer des informations importantes trop près des bords
Les visuels des inputs peuvent avoir toutes les tailles et toutes les formes (paysage, carré, portrait).
Cependant, pour optimiser leur rendu, privilégiez des images ou des captures d’écran de bonne qualité, avec une largeur comprise entre 980 et 1600 pixels. Au-delà de cette dimension, Teach Up redimensionnera automatiquement l’image pour la réduire.
Le logo
Vous pouvez importer votre logo dans une activité Teach Up. Il doit être placé dans la zone prévue à cet effet, au format PNG, de préférence en blanc ou en couleur claire.
Nos conseils et astuces
Les bannières
Évitez d’utiliser une image trop sombre. Un filtre noir transparent est automatiquement appliqué sur votre visuel afin de garantir la lisibilité du titre.
Placez l’élément principal de votre visuel au centre. La bannière s’adapte aux écrans de téléphone en recadrant l’image. Si l’élément est décalé à gauche ou à droite, il risque de ne pas apparaître sur mobile.
N’ajoutez pas de texte sur votre image. Il est automatiquement intégré dans Teach Up pour gérer le responsive, faciliter les éventuelles traductions et assurer l’accessibilité pour les lecteurs d’écran.
N’ajoutez pas de logo non plus sur votre image. Un emplacement dédié est prévu dans Teach Up. Le logo y est automatiquement intégré et répété à des endroits stratégiques.
Les visuels
Vous souhaitez intégrer un format portrait ? Teach Up risque de l’afficher trop grand, car la plateforme redimensionne les visuels en fonction de leur largeur (entre 980 et 1600 pixels).
Ajoutez un fond blanc autour de votre image pour l’élargir « artificiellement ». Ainsi, votre visuel sera correctement intégré.
|
|
| Image sans fond blanc | Image avec fond blanc |
Accessibilité
Pour assurer une accessibilité maximale, vous devez toujours écrire le texte dans Teach Up. Les lecteurs d’écran ne peuvent pas lire le texte incrusté dans l’image. Si vous devez ajouter du texte sur un visuel, vous devez absolument le retranscrire dans Teach Up, soit en légende du visuel, soit en utilisant un champ input, comme pour les zones cliquables.
Ajoutez des descriptions aux photos, images, etc., et des scripts pour les audios en légende.
Retrouvez plus d'informations sur l'accessibilité dans cet article.
Des exemples d'illustrations visuelles
Les bannières
Sous forme d’illustrations, de photos, ou de gifs, elles permettent d’immerger l’apprenant rapidement dans un univers.
Les zones à cliquer
Elles permettent de pointer certaines zones d’une image et d’écrire un texte dans Teach Up.
À utiliser comme sommaires et étapes de parcours à illustrer sous forme de picto, illustration...
À utiliser comme points clés sous forme de picto ou illustration
À utiliser comme image pour illustrer et zoomer sur un point précis
À utiliser comme schéma (attention à l'accessibilité et à la traduction lorsqu'il y a du texte sur une image)
Attention, il est important de noter que toutes vos photos et médias doivent être libres de droits à des fins commerciales.