Genially est une solution très complète pour créer des présentations interactives de types variés. Elle est particulièrement utilisée pour la conception d’images interactives ou d’escape games.

La richesse de Genially vient du fait que l’interactivité peut être ajoutée à tous les éléments présents sur une page et que le document peut contenir plusieurs pages. Tous les contenus web possibles sont intégrables dès lors qu’ils proposent un code d’intégration ou qu’ils permettent d’en créer un soi-même. Une fois le fond ajouté, l’utilisateur n’a plus qu’à créer et paramétrer les éléments interactifs.

Genially peut être utilisé comme un simple service de présentation. . Comme dans une présentation classique, des diapositives sucessives peuvent être créées. L’interface est donc assez classique en ce sens avec une barre de diapositives permettant de naviguer entre celles-ci.

Chaque diapositive peut être nommée et peut recevoir un fond personnalisé ainsi que ses propres contenus.
Les types de contenus intégrables sont nombreux. Des textes sont intégrables avec des possibilités de mise en forme en terme de polices, tailles et couleurs. les zones de texte se déplacent de façon classique.

L’édition de texte peut sembler limités mais les possibilités de modification sont nombreuses. Le redimensionnement se fait avec des poignées placées au coin de l’objet déposé. Un double clic permet de retourner au mode édition de la zone.

Pour les autres ressources, le fonctionnement est tout à fait similaire et tous les éléments présents dans la barre latérale de gauche s’insèrent et se modifient de la même façon.

Un des atouts de Genially est la possibilité d’animer tous les objets et d’y ajouter de l’interactivité. Plusieurs possibilités sont offertes. Lorsqu’un objet est intégré, un menu flottant s’ouvre proposant différents éléments d’animation. L’élément peut donc être animé, mais peut aussi être rendu interactif. Ces menus vous proposent des listes déroulantes d’effets pré construits mais en grand nombre.

Les éléments peuvent être animés à l’ouverture de la diapositive ou à sa clôture, mais aussi au survol de la souris, ou encore en continu. une trentaine d’effets d’animation sont proposés.

Nous n’allons pas passer en revue tous les éléments insérables mais vous pourrez facilement intégrer vos propres images, comprenant même les formats gifs animés ou svg, le tout simplement depuis votre ordinateur. Vous pourrez ajouter ce que le service appelle des ressources. Les ressources sont classées par domaine, très visuelles et pratiques.

Vous pourrez ensuite ajouter des markers, très utiles par exemple si vous construisez des images interactives et enfin des zones interactives ou des zones réactives.
Tout élément inséré peut donner lieu à de l’interactivité.
La solution permet aussi d’intégrer tout contenu provenant d’internet avec le menu insérer.

Pour chaque élément, vous avez à disposition lors de son intégration un menu flottant animation et un menu flottant interactif. Par défaut les éléments ne sont pas interactifs. Par simple choix dans la liste d’interactivité il est possible de définir plusieurs comportements. Les éléments disponibles sont les fenêtres, les tags, les liens externes et les liens entre diapositives.

Les fenêtres sont des fenêtres popup qui s’ouvriront au clic. Elles peuvent contenir tout contenu (texte, audio ou vidéo, ressources externes). La fenêtre s’adaptera en fonction de l’élément qui la commande. Les tags sont des sortes de mini fenêtre ne contenant qu’un court texte ou une image. Il est possible de mettre des liens vers d’autres sites ou des liens internes entre les diapositives.

Le résultat peut donc être très simple comme très complexe. La solution est gratuite et sans publicité et le nombre de productions n’est pas limité. Le contenu se partage directement en ligne par un lien ou un code d’intégration. Les productions peuvent être collaboratives.

Accès : Genially

Xia Express Une solution très pratique pour créer des images interactives sur tablettes. L’application permet de détourer des éléments d’une image et d’ajouter ajouter des commentaires sur ces zones.

Dès l’accueil, on retrouve ses images déjà réalisées. A noter qu’il est possible d’importer simplement des images faites à partir d’une autre tablette sous forme de fichier xml à importer dans Xia Express.

Pour créer une image active, il sera simplement demandé de sélectionner une image depuis la tablette.

Ensuite, il suffira de détourer tous les éléments à mettre en avant et à commenter. Il n’y a pas de limite. Pour le moment, il n’est pas possible de zoomer pendant le détourage, ce qui empêche une sélection très fine. Chaque zone détourée devient un objet qui sera agrandi, il est donc important de choisir une image de très bonne qualité.

Pour mettre en place ces éléments, il suffit de toucher l’icône crayon et de sélectionner la méthode de détourage et de choisir ellipse, rectangle ou polygone.

Une fois les éléments détourés, il faut leur fournir le commentaire adéquat. Il est possible de le faire au fur et à mesure ou encore après avoir détouré tous les éléments. Pour ajouter les commentaires, il suffit de toucher deux fois un élément et de saisir les commentaires dans la fenêtre.

Une fois tous les commentaires en place, le travail peut être exporté. Il est possible d’exporter au format xia tablette, c’est à dire un fichier xml que Xia express peut ouvrir, ou encore au format svg qui peut être utilisé avec tout logiciel de dessin vectoriel comme Inkscape ou Xia pour PC.

Accès : Xia Express pour ipad

Accès : Xia Express pour Android (sur le store F-Droid)

H5P est un système vraiment exceptionnel qui ne demande aucune compétence technique à mettre en place. Le principe : créer des activités en html5 mais sans quitter son blog, sans utiliser de logiciels ni de plateforme, tout est dans le blog.

Parmi les modules disponibles, le module hotspots d’image permet de créer des images interactives comme dans l’exemple suivant.

Le module image interactive permet d’utiliser des images, du texte ou de la vidéo comme points d’intérêt.

Lors de la création d’une image interactive, la première étape consiste à sélectionner l’image de fond qui recevra les différents points d’intérêt.

Une fois l’image d’arrière plan en place, il ne reste qu’à passer aux points d’intérêt. Les points d’intérêt se placent par un simple clic sur l’image. Chaque point d’intérêt peut recevoir un ou plusieurs items (texte, image, vidéo, Audio), y compris plusieurs du même type.

Pour chaque item, il suffit de choisir le type et de renseigner les éléments nécessaires.

Lorsque tous les éléments sont renseignés, le projet peut être publié en ligne avec un simple lien ou un code d"intégration pour tout site ou ENT.

H5P présente de nombreux avantages autant par sa simplicité de mise en œuvre, que par la qualité graphique des exercices réalisables. H5P est nativement intégré aux ENT des départements de Seine Maritime et de l’Eure et à Moodle dans l’ENT région. il existe aussi des versions installables en local (Logiquiz de la Digitale et Lumi)

Image Annotator est un outil simple se limitant à des annotations textuelles ou des liens. Il permet de produire des images réactives comme dans l’exemple suivant.

L’utilisateur fournit une image et y ajoute un à un les points qui constitueront les zones réactives. Les zones réactives peuvent contenir un titre, une description et un lien.

Lorsque l’image est réalisée, il est possible de la sauvegarder et elle pourra être retravaillée grâce à un mot de passe.

L’image finalisée peut être partagée grâce à un code d’intégration comme en début de cet article ou par un simple lien.

Le service est gratuit et fonctionne sans aucune inscription.

Accès : Image Annotator