Le widget Twitter facilite la collaboration en contexte entre vous (l’auteur) et les utilisateurs (apprenants en ligne). Il vous aide à simuler un environnement de salle de classe où les apprenants en ligne peuvent vous poser des questions ainsi qu’aux autres apprenants en ligne, en « temps réel ».

Lorsque vous publiez un projet contenant le widget Twitter, vos utilisateurs peuvent poser des questions dans le projet, sans avoir besoin de se connecter à Twitter. Vous et les autres participants pouvez voir les questions en contexte, dans le projet dans lequel elles sont posées.

Les questions peuvent être posées seulement dans un projet publié, mais les réponses peuvent être fournies des manières suivantes :

  • Twitter (accessible par un navigateur Web ou un périphérique mobile).

  • Dans le projet Adobe Captivate publié, en utilisant le bouton Répondre qui s’affiche lorsque vous cliquez sur l’icône Twitter.

Ajout du widget Twitter aux projets

  1. Téléchargement du widget Twitter depuis le site d’Adobe Exchange. Le fichier .zip que vous téléchargez contient les fichiers suivants :

    • twitterwidget.swf : le widget Twitter que vous pouvez insérer dans vos projets Adobe Captivate.

    • Twitteroauth.zip : le fichier de configuration pour l’authentification d’Adobe Captivate lorsque vos utilisateurs essaient d’accéder au projet avec le widget Twitter.

  2. Assurez-vous que vous disposez de la configuration requise pour pouvoir utiliser le widget Twitter. Consultez la section Configuration requise pour plus d’informations.

  3. Créez votre projet en lui attribuant un nom unique dans les Préférences. Pour plus d’informations, voir Configuration du projet.

  4. Insérez le widget Twitter dans votre projet. Pour plus d’informations, voir Insertion du widget Twitter dans les projets.

Configuration requise

  1. Installez un serveur Web et PHP sur un ordinateur. Vous pouvez opter pour WAMP (pour Windows) ou pour MAMP (pour Mac) qui fournit les deux.

    Remarque :

    L’ordinateur peut être celui sur lequel vous avez installé Adobe Captivate ou tout autre ordinateur sur votre réseau.

    Consultez la page http://www.wampserver.com/en/download.php pour télécharger WAMP.

    Remarque :

    Dans ces instructions, ignorez la dernière étape qui indique de continuer selon les instructions données sur le site Web de WAMP.

    Consultez la page http://www.mamp.info/fr/index.html pour télécharger MAMP. Pour obtenir des instructions détaillées, voir https://documentation-3.mamp.info/en/documentation/mamp-windows/.

  2. Sur un ordinateur Windows, configurez PHP et le serveur Web. Consultez les rubriques Configuration de PHP et Configuration du serveur Web pour plus d’informations. Cette étape n’est pas nécessaire sur un ordinateur Mac car les paramètres requis sont activés par défaut avec MAMP.

  3. Configurez l’authentification pour Adobe Captivate avec OAuth. Voir Configuration de l’authentification avec OAuth

Vos utilisateurs (apprenants en ligne) n’ont pas besoin d’avoir configuré leur poste. Il leur suffit de disposer d’un compte Twitter valide pour accéder aux projets avec le widget Twitter.

Configuration de PHP

Dans Windows, activez la bibliothèque CURL. Pour ce faire, cliquez sur l’icône WAMPSERVER dans la zone de notification, sélectionnez PHP > extensions PHP puis cliquez sur php_curl.

Pour vérifier que CURL est bien activée, saisissez http://localhost ou http://localhost:8080 dans un navigateur Web et cliquez sur phpinfo() dans la section Outils. Recherchez CURL sur la page. Vérifiez que la ligne cURL support contient la valeur enabled.

Configuration du serveur Web

Dans Windows, activez le module rewrite. Pour ce faire, cliquez sur l’icône WAMPSERVER dans la zone de notification, sélectionnez Apache > modules Apache puis cliquez sur rewrite_module.

Pour vérifier que le module rewrite est bien activé, saisissez or http://localhost:http://localhost:8080 dans un navigateur Web et cliquez sur phpinfo() dans la section Outils. Recherchez rewrite sur la page. Vérifiez que mod_rewrite est répertorié dans la ligne Loaded Modules (tableau apache2handler).

Configuration de l’authentification avec OAuth

  1. Cliquez avec le bouton droit de la souris (Windows) ou cliquez en maintenant la touche Ctrl enfoncée (Mac) sur le fichier twitteroauth.zip et cliquez sur Extraire. Les contenus sont extraits vers le dossier twitteroauth.

    Remarque :

    twitteroauth.zip est disponible dans le dossier TwitterWidget.zip que vous avez téléchargé sur le site d’Adobe Exchange.  

  2. Placez le dossier twitteroauth dans le répertoire racine de votre serveur Web. Pour accéder au répertoire racine :

    • (sous Windows) cliquez sur l’icône WAMPSERVER dans la zone de notification puis cliquez sur le répertoire www ou naviguez jusqu’au dossier <WAMP_installation_folder>/wamp/www.

    • (sous Mac) allez dans Applications/MAMP/htdocs

Configuration du projet

  1. Ouvrez le projet dans lequel vous souhaitez insérer le widget Twitter.

  2. Sélectionnez Modifier > Préférences (Windows) ou Adobe Captivate > Préférences (Mac).

  3. Dans la boîte de dialogue Préférences, cliquez sur Informations sous Projet dans la liste Catégorie.

  4. Spécifiez un nom pour votre projet dans le champ Nom du projet. Choisissez un nom unique car il sera utilisé comme hashtag pour le cours dans Twitter.

Insertion du widget Twitter dans les projets

  1. Ouvrez le projet Adobe Captivate dans lequel vous souhaiter insérer le widget Twitter.

  2. Cliquez sur la première diapositive dans la bande de film.

  3. Cliquez sur Insérer > Widget. Accédez à l’emplacement où vous avez téléchargé le fichier twitterwidget.swf, puis cliquez sur Ouvrir. La boîte de dialogue Propriétés du widget s’affiche.

  4. Dans le champ Nom d’utilisateur, saisissez le nom d’utilisateur de votre compte Twitter. Ce compte est considéré étant comme le compte de l’auteur.

  5. Dans le champ Emplacement de PHP, spécifiez l’emplacement du dossier twitteroauth que vous avez placé dans le répertoire racine sous la forme d’une URL au format suivant :

    http://<adresse_ip_du_serveur_web>/<emplacement_dossier_twitteroauth>

    Par exemple, si vous avez placé le dossier dans c:/wamp/www/Twitter/twitteroauth, spécifiez l’emplacement de PHP comme indiqué ci-dessous :

    http://<adresse_ip_du_serveur_web>/Twitter/twitteroauth

    Sous Windows, si vous accéder au serveur Web avec le numéro de port 8080, spécifiez alors également le numéro de port pour l’emplacement de PHP. Par exemple,

    http://<adresse_ip_du_serveur_web>:8080/Twitter/twitteroauth

    Sous Mac, spécifiez le numéro de port 8888. Par exemple, http://<adresse_ip_du_serveur_web>:8888/Twitter/twitteroauth

  6. Cliquez sur OK. Le widget Twitter s’affiche maintenant sur votre diapositive. Lorsque vous publiez la sortie, l’emplacement du widget est le même que celui sur la diapositive.

  7. Dans le panneau Durée de l’Inspecteur des propriétés du widget, cliquez sur Reste du projet dans la liste déroulante Afficher pendant.

Avant de prévisualiser ou de publier votre projet, assurez-vous que le statut de WAMP ou MAMP est « En ligne ».

  • Sous Windows, placez la souris sur l’icône du serveur WAMP dans la zone de notification. Si le statut indique que le serveur est « Hors ligne », cliquez sur l’icône puis mettez-le « En ligne ».

  • Sous Mac, lancez MAMP. Dans l’écran de bienvenue, si un bouton rouge s’affiche en regard d’Apache et de PHP, cliquez dessus pour mettre en ligne ces serveurs. Les boutons deviennent verts.

Accès aux sorties de projet avec le widget Twitter

Si vous ou l’un de vos utilisateurs essayez d’accéder au projet publié avec le widget Twitter, un message s’affiche et vous demande le code PIN OAuth.

  1. Cliquez sur Générer pour générer le code PIN.

    Si vous êtes déjà connecté à Twitter, cliquez sur Continuer pour continuer avec le même compte. Pour vous connecter avec un compte différent, cliquez sur Connexion.

    Si vous n’êtes pas encore connecté à Twitter, vous allez être invité à entrer votre nom d’utilisateur et votre mot de passe.

    Une fois que vous êtes connecté, le code PIN s’affiche dans votre navigateur Web par défaut.

Remarque :

Si le code PIN ne s’affiche pas dans la fenêtre du navigateur, autorisez les fenêtres pop-up et essayez d’actualiser la page.

2.  Copiez le code PIN et collez-le dans le champ du code PIN OAuth lorsque le message s’affiche dans le projet.

3.  Cliquez sur Connexion.

Recherche du projet dans Twitter

Utilisez le nom du projet pour le rechercher dans Twitter, tweetDeck ou search.twitter.com. Tous les tweets (questions et réponses) du projets sont répertoriés. Vous pouvez ensuite twitter une réponse ou une question.

Flux de travaux de collaboration

Les questions ou réponses qui ont été twittées avant que vous ou un apprenant en ligne ne voyiez le projet sont regroupées en fils de conversation. Vous (l’auteur) pouvez voir tous les fils de conversation sur la diapositive active, quelle que soit l’image que vous êtes en train de visionner. Cependant, les autres apprenants en ligne ne peuvent voir que les conversations ayant eu lieu avant l’image qu’ils sont en train de visionner.

Pour voir les fils de conversation, cliquez sur l’icône Twitter.

Instantanément, tous les tweets qui arrivent pendant que vous ou un apprenant en ligne êtes en train de visionner une sortie de projet s’affichent. Vous (l’auteur) recevez une notification pour tous les tweets qui arrivent sur n’importe quelle diapositive du projet, que vous l’ayez déjà vue ou non. Cependant, pour les autres apprenants en ligne, les tweets sont répertoriés dans la liste des conversations qu’ils peuvent voir quand ils atteignent cette diapositive (et cette image).

Lorsqu’une nouvelle question ou réponse est twittée, une deuxième icône Twitter apparaît sur la diapositive. L’icône disparaît dès que tous les tweets ont été visualisés.  

Remarque :

La deuxième icône Twitter est différente de la première, de par la couleur de son aile. Sur la première icône, l’aile de l’oiseau est bleue alors qu’elle est jaune sur la deuxième.  

Tous les tweets déjà visionnés sont ajoutés aux listes de conversation sur la diapositive.

Les étapes suivantes décrivent le flux de travaux de collaboration entre l’auteur, Casey, et deux apprenants en ligne, Alex et Jaden :

  1. Casey crée et publie un cours en ligne à l’aide d’un widget Twitter.

  2. Alex commence à visionner le cours et clique avec le bouton droit de la souris sur la diapositive 10 (image 2) pour poser une question.

  3. Jaden visionne également le cours en même temps.

    • Si Jaden est également sur la diapositive 10, image 2 ou s’il l’a déjà visionnée, une icône Twitter supplémentaire s’affiche sur son ordinateur. Il peut cliquer sur l’icône pour voir la question et cliquer sur Répondre pour donner une réponse. Dès que Jaden voit la question, l’icône supplémentaire disparaît et les tweets (question et réponse) sont ajoutés sous la forme d’un fil de conversation.

    • Si Jaden n’a pas encore visionné la diapositive 10, image 2, la question d’Alex apparaît sous la forme d’un fil de conversation. Jaden peut cliquer sur l’icône Twitter d’origine pour voir la question.

  4. Casey visionne également le cours en même temps. Quelle que soit la diapositive que Casey est en train de visionner, une icône Twitter supplémentaire apparaît dès qu’Alex ou Jaden pose une question.

    • Casey peut cliquer sur le tweet pour aller au contexte (diapositive 10, image 2) et répondre à la question.

    • Casey peut accéder aux anciens tweets en cliquant sur l’icône Twitter d’origine.

Comment le « contexte » des tweets est-il déterminé ?

Les facteurs suivants déterminent le contexte d’une question :

  • Le numéro d’image.

  • La zone sur laquelle l’apprenant en ligne clique pour poser une question.

Si vous ou d’autres apprenants en ligne êtes en train de visionner le projet publié, cliquez sur les en-têtes de conversation ou sur les nouveaux tweets pour voir le contexte (diapositive et image).

Lorsque vous ou d’autres apprenants en ligne visionnez les tweets du projet avec Twitter, le contexte est indiqué comme suit :

Numéro d’image, coordonnée X, coordonnée Y

Par exemple, 245 ; 400 ; 194.

Poser des questions

Seuls les apprenants en ligne (mais pas l’auteur) peuvent poser une question dans le projet publié avec le widget Twitter.

  1. Cliquez avec le bouton droit de la souris (Windows) ou cliquez en maintenant la touche Ctrl enfoncée (Mac OS), puis sélectionnez Poser une question.

  2. Cliquez dans la boîte de dialogue Poser une question et saisissez votre question

  3. Cliquez sur Envoyer.

Répondre aux questions

Vous (l’auteur) et les apprenants en ligne pouvez répondre à n’importe quelle question dans le projet en utilisant l’icône Twitter.

  1. Pour voir les questions, cliquez sur l’icône Twitter.

  2. Cliquez sur Répondre pour donner une réponse à une question ou à un fil de conversation. Si vous souhaitez répondre à quelqu’un en particulier, cliquez sur la flèche qui se trouve en regard de son prénom.

  3. Saisissez votre réponse et cliquez sur Envoyer.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne