Créer du contenu interactif avec la nouvelle version de Xerte

Auteur·e: Mathilde Borghese
20 janvier 2017 | Diffusé sur Twitter le: 23 février 2017
Catégorie(s): Articles , Collaboration et interaction , Guide / tutoriel, Présentation d'outil

La nouvelle version de Xerte est disponible à l’Unil et présente des améliorations qui faciliteront la création de contenu interactif. Pour rappel, Xerte est un outil permettant de créer des capsules web en intégrant différents types de média. Découvrez dans cet article les nouveautés Xerte et comment présenter le contenu d’un travail de manière dynamique et interactive à l’aide de la nouvelle interface.

Voici un aperçu des principales améliorations que la mise à jour comprend :

Pour une présentation plus détaillée de l’outil et le manuel complet mis à jour, consultez cette page sur l’outil Xerte.

Accédez directement à Xerte : http://sepia.unil.ch/xertetoolkits/

Ressource disponible pour la Création d’un thème pour Xerte.

Améliorations de l’espace de travail

L’interface de l’espace de travail a été améliorée pour la rendre plus facile d’utilisation et intuitive. La mise en page est désormais compatible avec les dispositifs mobiles. Les informations pertinentes concernant un projet sont mises en évidence dans le menu « project details ». Par exemple, le menu affichera directement le lien de votre projet pour le transmettre à quelqu’un, ainsi que le code HTML de votre projet, si vous souhaitez intégrer celui-ci dans une page web. Les personnes qui ont créé de nombreuses capsules Xerte apprécieront la fonction de recherche qui permet de rechercher un projet dans l’espace de travail. Enfin, pour éditer un projet, il suffit désormais de double-cliquer sur celui-ci.

capture-decran-2017-01-19-a-18-01-11
Ancienne version de Xerte
Nouvelle interface Xerte

Nouvel éditeur HTML

L’éditeur de texte basé sur Flash a été remplacé par un tout nouvel éditeur HTML qui permet d’utiliser Xerte online Toolkits sur une plus grande variété de dispositifs. D’autres fonctionnalités ont été ajoutées, notamment l’édition WYSIWYG et la bibliothèque multimédia.

Le nouvel éditeur rend l’édition beaucoup plus agréable. Une nouvelle barre d’outils facilite la mise en forme du contenu, l’insertion de listes à puces, médias, de liens et d’autres éléments qui auraient dû précédemment être transcrits en langage HTML. L’éditeur offre un aperçu direct de la mise en forme, telle qu’elle sera affichée dans le projet. L’éditeur contient un nouveau bouton paste from word capture-decran-2017-02-06-a-17-38-57, permettant de copier du contenu depuis word en évitant les problèmes de compatibilité.

Nouvel éditeur de texte

A l’intention des utilisateurs qui auraient encore des capsules Xerte fonctionnant avec Flash.
Les anciens projets basés sur Flash peuvent être convertis facilement pour fonctionner sur HTML, qui est plus adapté pour supporter les nouvelles fonctionnalités. Pour changer le lecteur par défaut de votre projet, cliquez sur l’icône des propriétés, puis sous le premier onglet « project », et sélectionnez le moteur « HTML 5 ».

capture-decran-2017-01-02-a-17-57-44
Propriétés du projet

Amélioration de la gestion des médias

Le nouvel éditeur s’accompagne d’une librairie de gestion des médias améliorée par rapport à la version précédente de Xerte. Il est désormais possible de :

  • déposer plusieurs fichiers multimédia en une seule opération
  • insérer directement des images dans un champ de saisie de texte
  • parcourir les fichiers multimédia du projet et sélectionner des éléments à inclure
Librairie de gestion des médias

Menu optional properties

Le menu optional properties, qui répertorie toutes les options facultatives disponibles pour chaque page, a été revu pour une utilisation plus efficace. Pour insérer une option facultative dans le projet, il suffit de cliquer sur celle-ci directement dans le menu. Pour en supprimer une, cliquer sur l’icône  capture-decran-2017-01-19-a-12-39-41 qui se trouve à côté de l’option ajoutée, en-dessous de la boîte de texte.

Menu des options facultatives
Supprimer une option facultative
Supprimer une option facultative

Menu insert

Le design du menu insert a été rafraîchi. Lorsque vous insérez une page, vous déterminez sa position : vous pouvez choisir d’insérer la page avant ou après la page sélectionnée dans le projet, ou à la fin de celui-ci.

Insérer une page et déterminer sa position

Nouveaux modèles Xerte

Thèmes : Vous pouvez désormais personnaliser vos contenus en appliquant un thème à votre projet. Pour modifier le thème de votre présentation, sélectionnez votre projet sur la page d’accueil Xerte, cliquez sur le bouton « edit » puis sélectionnez le thème de votre choix dans les paramètres.

Thème classique "Xerte online toolkits"
Thème classique « Xerte online toolkits »
Thème "flat blue"
Thème « flat blue »
Thème "flat red"
Thème « flat red »

Activité media lesson : Ce nouveau modèle d’activité permet de synchroniser des fichiers multimédia avec différents types de contenu. Créez des présentations multimédias interactives en combinant divers contenus.

Présentation multimédia

Activité PDF : Le modèle PDF qui a été ajouté à la nouvelle version Xerte permet d’intégrer des documents PDF à vos projets très facilement. L’insertion de fichiers PDF fonctionne de la même manière que pour les autres types de média : il suffit de cliquer sur insert > media > PDF file.

PDF intégré dans une page de projet Xerte
PDF intégré à une page de projet

Activité decision tree : Ce modèle d’activité permet de créer un arbre de décision pour amener l’utilisateur à répondre à une série de questions et à faire des choix.

Parcours décisionnel
Parcours décisionnel

Icônes : La police « font awesome », disponible via l’éditeur de texte, permet d’utiliser un large éventail d’icônes dans vos projets. Pour insérer une icône, cliquer sur le bouton capture-decran-2017-02-05-a-14-33-21 de l’éditeur de texte. Il est possible de choisir parmi des centaines d’icônes, ainsi que de définir la couleur et le format de celles-ci.

Exemple d'icônes insérées dans l'éditeur de texte
Exemple d’icônes insérées dans l’éditeur de texte
Définir la couleur et le format des icônes
Définir la couleur et le format des icônes