DÉCOUVREZ DIRASSA+

Où commence votre histoire ?

User guideEvery page explained step by step, in motionDirassa StudioEnregistrer · Monter · PublierBlogQuestions
Langue
العربيةFrançaisEnglish
Créer ma plateforme

Déjà un compte ?Se connecter

Pensée pour les enseignants et écoles d’Algérie
Le guide Dirassa+
Vitrines

Images, vidéos et animations : des médias qui vendent sans alourdir la page

Une bonne photo dit en une seconde ce qu’une section entière explique. Dans la vitrine, vous envoyez vos images telles quelles et nous les réduisons pour qu’elles s’ouvrent vite sur téléphone ; vous choisissez leur partie la plus importante, qui ne sera jamais coupée ; vous ajoutez une vidéo YouTube ou Vimeo, ou un court clip muet qui s’anime quand le visiteur l’atteint. Notre exemple : Amine, formateur en photo au smartphone, prépare la page de son cours.

  • Environ 5 minutes
  • 6 étapes

Qui peut le faire: Toute personne ayant « Modifier les vitrines ».

Laissez Noqta vous montrerOuvrir dans l’espace

En 6 étapes

  1. 1Choisissez une section puis « Contenu », et touchez « Choisir une image » ou déposez-la : nous la réduisons pour le téléphone.
  2. 2Touchez la partie la plus importante de la photo, regardez les recadrages « Téléphone » et « Ordinateur », ou donnez au téléphone son propre point focal.
  3. 3Écrivez la « Description de l’image » dans chaque langue de la page : entendue par qui ne voit pas, lue par les moteurs de recherche.
  4. 4Collez un lien YouTube ou Vimeo, et choisissez l’« Orientation de la vidéo » si elle est proposée.
Tout afficher
  1. 5Ajoutez un GIF ou une vidéo MP4 muette jusqu’à 30 s et 12 Mo : elle s’anime quand le visiteur l’atteint, avec un bouton d’arrêt.
  2. 6Dans « Résultats en vidéo », aucun clip ne s’affiche avant « L’élève a donné son accord ».

Avant de commencer

  • Une vitrine ouverte dans l’éditeur, et une section avec image ou vidéo : « Ouverture », « L'auteur », « La méthode », « Programme » ou « Résultats en vidéo » par exemple.
  • Vos images en JPG, PNG ou WebP, chacune sous 15 Mo. Inutile de les réduire vous-même.
  • La vidéo de présentation publiée sur YouTube ou Vimeo. Les vidéos de vos leçons sur la plateforme sont protégées et ne s’affichent pas sur une page publique.
  • Pour les animations : un enregistrement d’écran ou un plan court sans son, jusqu’à 30 s et 12 Mo.
  1. Étape 1 sur 6

    Envoyer l’image : nous la réduisons

    Vous envoyez la photo de votre téléphone telle quelle ; elle arrive légère sur la page et s’ouvre vite sur téléphone.

    • Quelle taille ?Jusqu’à 15 Mo. Le navigateur la réduit avant l’envoi à 1 600 px et environ 350 Ko.
    • Vous regrettez ?Chaque envoi est un nouveau fichier : « Annuler » ramène l’ancienne. La page en ligne garde la sienne jusqu’à la publication.
    • Quel format ?JPG, PNG ou WebP. Une photo HEIC d’iPhone s’exporte d’abord en JPG.

    AstuceDans l’« Ouverture » sans image, la couverture du cours est utilisée, et le bouton n’est jamais posé sur la photo : sa lisibilité ne dépend pas de l’image.

    Tous les détails

    Choisissez la section sur la page, puis l’onglet « Contenu » des « Propriétés » sur ordinateur, ou « Modifier » dans la barre du bas sur téléphone. Dans le champ image, touchez « Choisir une image » ou déposez-la (« Ou déposez-la ici. Nous la réduisons pour qu’elle s’ouvre vite sur téléphone. »). Une image jusqu’à 15 Mo est acceptée ; le navigateur la réduit avant l’envoi à 1 600 px sur le grand côté et environ 350 Ko, si bien qu’une photo de 4 Mo arrive légère. La progression s’affiche (« Envoi… N % »), puis l’image prend sa place. Ensuite « Remplacer l’image » ou « Supprimer l’image » si le champ n’est pas obligatoire. Chaque envoi est un nouveau fichier : « Annuler » ramène l’image précédente, et la page en ligne garde la sienne jusqu’à la prochaine publication.

    À l’écranContenuPropriétésModifierChoisir une imageOu déposez-la ici. Nous la réduisons pour qu’elle s’ouvre vite sur téléphone.Remplacer l’imageSupprimer l’image

    Attention« Ce fichier n’est pas une image. Choisissez un JPG, PNG ou WebP. » signifie un autre format (HEIC d’iPhone par exemple) : ouvrez-le, exportez-le en JPG, puis envoyez-le.

  2. Étape 2 sur 6

    Le point focal : l’essentiel n’est jamais coupé

    Vous touchez l’essentiel de la photo, un visage, une main, une assiette : il reste visible quel que soit le recadrage.

    • Comment vérifier ?Les aperçus « Téléphone » et « Ordinateur » sous l’image se mettent à jour à chaque déplacement du point.
    • Un point pour le téléphonePour la première image de la section : « Point focal pour » → « Téléphone seulement » ; « Rétablir » l’annule.
    • Et le texte ?Il ne change pas d’un appareil à l’autre. Seule l’image est recadrée autrement.

    AstuceDans les sections qui posent l’image à côté du texte, l’onglet « Disposition » (« Mise en page » sur téléphone) propose « Sur téléphone : l’image après le texte », pour que le titre se lise d’abord sur petit écran.

    Tous les détails

    Une même photo est recadrée différemment : en hauteur sur téléphone, en largeur sur ordinateur. « Touchez la partie la plus importante de la photo. Elle reste visible quel que soit le recadrage. » : un visage, une main qui tient l’appareil, une assiette dans la lumière. Un point apparaît où vous touchez ; faites-le glisser ou déplacez-le aux flèches (pas de 5 %, de 1 % avec Maj). Deux aperçus se mettent à jour aussitôt : « Téléphone » et « Ordinateur ». Pour la première image de la section, une option de plus, « Point focal pour » : « Tous les écrans » ou « Téléphone seulement », pour un point propre au téléphone ; s’affiche alors « Différent sur téléphone · » avec « Rétablir » pour l’annuler. Le texte ne change jamais d’un appareil à l’autre, seule l’image.

    À l’écranTouchez la partie la plus importante de la photo. Elle reste visible quel que soit le recadrage.TéléphoneOrdinateurPoint focal pourTous les écransTéléphone seulementDifférent sur téléphone ·Rétablir
  3. Étape 3 sur 6

    La « Description de l’image », dans chaque langue

    Une phrase qui décrit l’image, entendue par qui ne la voit pas et lue par les moteurs de recherche, dans chaque langue de la page.

    • Ce que vous écrivezCe que montre l’image, pas ce que vous vendez : « Une élève photographie une assiette de pâtisseries près de la fenêtre ». Environ 125 caractères suffisent.
    • Pour chaque langueLa description vaut pour la langue en cours. Changez la « Langue du contenu » et écrivez-la dans l’autre aussi.
    • En cas d’oubli ?« Prête ? » propose « Ajouter la description ». Une suggestion, qui n’empêche pas de publier.

    AstuceUne image purement décorative n’a pas besoin de description. Décrivez celles qui portent un sens : votre visage, un travail d’élève, le produit.

    Tous les détails

    Sous l’image, le champ « Description de l’image » (« Entendue par les personnes qui ne voient pas l’image, et lue par les moteurs de recherche. »). Décrivez ce que montre l’image en une phrase, pas ce que vous vendez : « Une élève photographie une assiette de pâtisseries près de la fenêtre avec son téléphone ». La description s’écrit pour la langue que vous modifiez : si la page est en arabe et en français, changez la « Langue du contenu » en haut et écrivez-la aussi en français. Un compteur apparaît : environ 125 caractères suffisent, 200 au maximum. En cas d’oubli, « Prête ? » affiche « Images sans description dans la section « … » (N). » avec « Ajouter la description » : une suggestion, qui n’empêche pas de publier.

    À l’écranDescription de l’imageEntendue par les personnes qui ne voient pas l’image, et lue par les moteurs de recherche.Langue du contenuPrête ?Ajouter la description
  4. Étape 4 sur 6

    Une vidéo YouTube ou Vimeo

    Vous collez le lien YouTube ou Vimeo de votre vidéo de présentation ; elle reste une image jusqu’au clic du visiteur, et la page reste rapide.

    • Quel lien ?Lien de lecture, lien court de partage, Shorts, direct ou page Vimeo. Il est pris dès le collage.
    • Paysage ou portrait ?Un Shorts se lit en portrait tout seul ; là où le champ accepte les deux, choisissez « Orientation de la vidéo ».
    • Une vidéo de vos leçons ?Refusée : elle est protégée pour vos élèves et ne marcherait pas pour les visiteurs. Mettez un lien YouTube ou Vimeo.

    AstuceLa vidéo de présentation n’est pas une leçon : une à deux minutes, votre visage, un aperçu de ce que l’acheteur va apprendre. Mettez-la sur votre chaîne, même « non répertoriée ».

    Tous les détails

    Dans le champ vidéo (comme « Vidéo de présentation » de l’« Ouverture »), « Collez un lien YouTube ou Vimeo » : lien de lecture, lien court de partage, Shorts, direct, ou page Vimeo. Le lien est pris dès qu’il est collé, avec son image et le nom de la plateforme. Un lien Shorts est lu en portrait automatiquement ; là où le champ accepte les deux formats, « Orientation de la vidéo » propose « Paysage » ou « Portrait », et une vidéo verticale s’affiche en entier dans « Partagé ». Ajoutez un « Titre de la vidéo » (120 caractères au plus). Sur la page, « La vidéo s’affiche comme une image jusqu’au clic du visiteur : la page reste rapide. » Pour la changer, « Changer la vidéo », ou supprimez-la avec la corbeille (« Supprimer la vidéo »).

    À l’écranVidéo de présentationCollez un lien YouTube ou VimeoOrientation de la vidéoPaysagePortraitTitre de la vidéoChanger la vidéoSupprimer la vidéo

    AttentionLe lien d’une vidéo de vos leçons sur la plateforme est refusé au collage : ces vidéos sont protégées pour vos élèves et ne fonctionneraient pas pour les visiteurs. S’il reste une ancienne vidéo de ce type sur la page, « Prête ? » la compte parmi les corrections avant publication. Mettez un lien YouTube ou Vimeo à la place.

  5. Étape 5 sur 6

    Le mouvement : un GIF ou une courte vidéo muette

    Un écran animé à la place de l’image dans certaines sections, qui montre l’étape en train de se faire.

    • Ce que vous envoyezUne vidéo MP4 ou WebM muette jusqu’à 30 s, ou un GIF, jusqu’à 12 Mo. Le MP4 est bien plus léger.
    • Quand ça bouge ?Quand le visiteur l’atteint, et ça s’arrête quand il la dépasse. Chaque clip a son bouton « Arrêter l’animation ».
    • Téléphones économesS’ils réduisent les animations ou économisent les données, une image fixe reste jusqu’à ce que la personne la lance.

    AstuceÀ durée égale, un MP4 est bien plus léger qu’un GIF. Enregistrez 15 secondes d’écran pendant une retouche, exportez sans son : cela passe même sur un réseau lent.

    Tous les détails

    Certaines sections acceptent un écran animé au lieu d’une image : « Écran animé (GIF ou courte vidéo) » pour chaque étape de « La méthode » (disposition « Phases »), « Enregistrement animé (GIF ou courte vidéo) » pour chaque chapitre du « Programme » (disposition « Visite »), et les clips de « Résultats en vidéo ». Touchez « Choisir un GIF ou une courte vidéo » : une vidéo MP4 ou WebM muette jusqu’à 30 s, ou un GIF, jusqu’à 12 Mo. Le fichier est envoyé tel quel, après une première image tirée de lui ; vous le voyez tourner dans le champ avec « Boucle vidéo · N s ». Écrivez une « Courte description ». Sur la page, la première image s’affiche, puis l’animation démarre quand le visiteur l’atteint et s’arrête quand il la dépasse ; chaque clip a son bouton « Arrêter l’animation » / « Lancer l’animation ». Sur les téléphones qui réduisent les animations ou économisent les données, il reste une image fixe jusqu’à ce que la personne le lance elle-même.

    À l’écranÉcran animé (GIF ou courte vidéo)Enregistrement animé (GIF ou courte vidéo)Choisir un GIF ou une courte vidéoVidéo MP4 muette jusqu’à 30 s (la plus légère) ou GIF, jusqu’à 12 Mo.Courte descriptionS’anime quand le visiteur l’atteint ; reste une image fixe si le téléphone réduit les animations ou économise les données.RemplacerSupprimer

    Attention« Plus de 30 secondes. Raccourcissez-le pour une boucle légère. » ou « Fichier de plus de 12 Mo. Raccourcissez-le ou exportez-le en qualité inférieure. » signifient que rien n’a été envoyé : coupez le clip dans votre logiciel et réessayez.

  6. Étape 6 sur 6

    « Résultats en vidéo » : seulement avec leur accord

    De courts clips verticaux et muets de ce que vos élèves ont réalisé ; aucun ne s’affiche sans l’accord de son auteur.

    • Ce que vous ajoutezJusqu’à 12 clips, chacun avec « Prénom » et « Ce qu’il a fait ».
    • L’accordLe clip reste masqué tant que « L’élève a donné son accord » est éteint. Pour un mineur, l’accord vient d’un parent.
    • Quand s’affiche-t-elle ?Dès qu’un clip a son accord. Avant, toute la section reste masquée.

    Les 6 dispositions

    Défilement
    DéfilementUne bande qui défile, arrêtée sous le pointeur.

    AstuceLa bande défilante rend mieux avec quatre clips ou plus. Avec deux ou trois, choisissez « Téléphones » ou « Vedette ».

    Tous les détails

    La section « Résultats en vidéo » montre de courts clips verticaux et muets de ce que vos élèves ont réalisé. Dans « Les clips » (12 au plus), chacun a « Le clip », « Prénom », « Ce qu’il a fait » et l’interrupteur « L’élève a donné son accord ». Le clip reste invisible aux visiteurs tant que cet interrupteur est éteint, et toute la section reste masquée tant qu’aucun clip n’a d’accord ; « Prête ? » le rappelle : « Des clips restent masqués tant que l’accord de leurs auteurs n’est pas confirmé. » avec « Confirmer l’accord ». L’onglet « Disposition » propose six formes : « Défilement » (qui s’arrête sous le pointeur ou au focus, avec « Vitesse » « Lente » ou « Normale »), « Rail », « Grille », « Vedette », « Téléphones » et « Stories » (des bulles rondes au-dessus d’un seul grand lecteur ; toucher une bulle change le clip, sans aucun script). « Légendes » affiche ou masque les noms.

    À l’écranRésultats en vidéoLes clipsLe clipPrénomCe qu’il a faitL’élève a donné son accordConfirmer l’accordVitesseLégendes

    AttentionDemandez l’accord avant de publier, par écrit dans une discussion par exemple, et n’indiquez que le prénom. Pour un mineur, l’accord vient d’un parent.

Cette leçon vous a-t-elle aidé ?
Leçon suivanteThèmes et couleursCommencer la leçon

Après les médias

Questions fréquentes

Mes photos perdent-elles en qualité une fois réduites ?

Le visiteur ne voit pas de différence : l’image garde jusqu’à 1 600 px sur le grand côté, plus que ce qu’affiche un écran de téléphone. La réduction la fait s’ouvrir vite sur réseau mobile, ce qui décide si le visiteur reste.

Pourquoi ne puis-je pas mettre une vidéo de mes leçons ?

Parce que les vidéos de leçons sont protégées : leurs liens sont signés pour vos élèves, expirent en quelques heures et ne fonctionnent pas sur une page publique. Mettez votre extrait sur YouTube ou Vimeo et collez son lien.

La vidéo ralentit-elle la page ?

Non. Une vidéo YouTube ou Vimeo s’affiche comme une image jusqu’au clic du visiteur et ne se charge pas avant. Les animations commencent en image et ne se chargent que lorsque le visiteur les atteint.

Puis-je mettre une vidéo avec un son qui démarre seul ?

Non. Les animations sont toujours muettes, et une vidéo YouTube ou Vimeo ne démarre qu’au clic du visiteur. Personne n’est surpris par un son dans un lieu public.

Quelle différence entre GIF et MP4 ?

Les deux tournent en boucle sans son. Un MP4 ou WebM est bien plus léger à durée égale : c’est le format conseillé. Le GIF convient aux mouvements très courts. La limite est de 12 Mo dans les deux cas, et de 30 s pour la vidéo.

Faut-il écrire la description dans toutes les langues ?

Oui, la description s’écrit pour la langue modifiée. Changez la « Langue du contenu » en haut de l’éditeur et écrivez-la pour chaque langue active de la page.

Qui voit le clip d’un élève dont je n’ai pas confirmé l’accord ?

Aucun visiteur. Il reste dans le brouillon et l’éditeur seulement, et toute la section est masquée tant qu’aucun clip n’a d’accord.

Leçon précédenteLa disposition d’une section