Créer une capsule web avec Xerte 2.01 Introduction Avec ce tutoriel vous allez apprendre à créer des objets pédagogiques de base en utilisant l'interface Xerte on-line toolkits. Pré-requis Pour suivre ce tutoriel il est nécessaire d'être connecté à Xerte à l'adresse : http://sepia.unil.ch/xertetoolkits Table des matières 1. Se connecter à Xerte on-line toolkits...1 2. Composantes de la fenêtre d'accueil...2 3. Créer un nouveau projet...2 4. Créer des pages dans un projet...3 Sélectionner «Université de Lausanne» puis entrer son nom d'utilisateur et 4.1. Page de titre...4 mot de passe dans la fenêtre suivante : 4.2. Insérer une image et du son...4 5. Gérer les pages d'un projet...6 6. Navigation dans la pré-visualisation d'un projet...7 7. Modifier/Editer un projet...7 8. Modifier le titre d'un projet et le mettre en accès publique...8 8.1. Insérer un projet Xerte dans Mahara ou Moodle...9 8.2. Partager la version non-modifiable d'un projet (p. ex. Pour qu'il soit noté)...11 8.3. Description de quelques onglets de la fenêtre des propriétés...13 9. Options dans les zones de texte...13 9.1. Exemples : liens, texte en italique, gras ou couleur...14 10. Exemples de projets réalisée avec Xerte On-line Toolkits...14 1. Se connecter à Xerte on-line toolkits Pour se connecter à Xerte il suffit d'entrer l'adresse : http://sepia.unil.ch/xertetoolkits dans votre navigateur internet. Apparaît alors : 1 Mise à jour : juin 2014 On arrive alors sur la fenêtre d'accueil de Xerte :
1 La liste des projets déjà créés. 2 Le menu déroulant d'aide. 3 Le menu pour créer un nouveau projet. 3. Créer un nouveau projet Pour créer un nouveau projet il suffit d'aller dans le menu 3 sur l'onglet «Xerte Online Toolkits». Il faut ensuite : 4 cliquer sur «Create», 5 entrer le nom du projet (ici «Projet 1»), 6 cliquer sur le bouton «Create Project». 2. Composantes de la fenêtre d'accueil Les composantes de la fenêtre d'accueil de Xerte sont les suivantes : La fenêtre suivante s'ouvre alors (si la nouvelle fenêtre n'apparait pas, un message devrait alors apparaît en haut du navigateur internet vous demandant si vous voulez accepter les fenêtres «pop-up», cliquer sur oui et recommencer l'étape 6) :
lisible même sur les petits écrans. 11 Pour la même raison, changer le mode d'affichage à «fill window». 4. Les composantes principales de cette fenêtre sont les suivantes : Pour créer des nouvelles pages dans un projet il faut cliquer sur le bouton «insert» en haut à gauche de l'écran (panneau 7). Un menu déroulant avec les catégories suivantes s'affiche : 7 Panneau indiquant les différentes pages du projet, 8 Panneau permettant de créer le contenu des différentes pages, 9 Insérer l'objectif pédagogique du projet (ici : Introduction à Xerte), 10 Nous changerons la taille par défaut du texte à 14 afin que le tout soit bien Créer des pages dans un projet Text : page de texte, Media: page contenant un média tel son, vidéo ou diaporama, Navigators : pages contenant plusieurs sous-pages (l'utilisateur «navigue» dans les sous-pages, d'où le nom), Connectors : pages où l'on peut créer des liens avec d'autres pages du projet, Charts: tableaux et graphiques, Interactivity: page contenant une activité interactive telle un QCM ou texte à trous, Games : jeux le pendu et memory, Misc : divers, essentiellement cartes, articles wikipédia et vidéos Youtube.
On obtient alors Notez qu'en passant le curseur sur les différentes pages, une petite fenêtre de pré-visualisation s'affiche avec un exemple de page. Nous allons à présent voir comment créer quelques pages de base. 4.1. Page de titre Pour créer un page de titre il faut cliquer sur Insert>Text>Title Page (comme dans l'exemple ci-dessus). On obtient alors la fenêtre : Afin de sauvegarder les informations entrées, il suffit de cliquer sur le bouton «Publish» en haut à droite de la fenêtre principale. (Contrairement à ce que le nom laisse suggérer, la page n'est pas automatiquement publiée en ligne). 4.2. Insérer une image et du son 12 Donner un titre à la page. 13 Entrer le titre de la présentation. 14 Cliquer sur «Play» (en bas à droite) pour voir la page. Nous allons à présent insérer une page contenant une image, du texte et du son (optionnel). 15 Cliquer sur Insert>Media>Graphics and Sound.
18 Ajouter une image en cliquant sur le bouton (à droite de 18 sur l'image ci-dessus). Les fichiers.jpg,.png,.gif et.swf sont acceptés. Le mieux pour les images est d'avoir une taille maximale de 800x600 pixels (sinon l'image sera trop grande et pourrait même ne pas s'afficher). Notez que le bouton la page. permet de pré-visualiser l'image qui sera insérée dans Toujours terminer en cliquant sur «Publish» afin de sauvegarder son travail. Pour ajouter du son, on procède comme suit : On obtient alors la fenêtre suivante : 19 Afficher le menu déroulant en haut de l'écran en cliquant sur le bouton 19, 20 Sélectionner «Sound», 21 Cliquer sur «Add». Une nouvelle ligne apparaît alors en-dessous de boîte pour le texte. Pour les fichiers audio, seuls les fichier au format.mp3 sont acceptés. 16 Entrer un titre pour la page (ici : Les Fleurs) 17 Entrer un texte pour la page 22 Comme pour ajouter une image, on ajoute un fichier audio en cliquant sur le bouton 22.
En pré-visualisant cette page, on obtient : On peut écouter le fichier audio en cliquant sur le bouton «Play» (juste endessus de 23). 5. Gérer les pages d'un projet 24 Pour ajouter des pages, cliquer sur «Insert» et de sélectionner le type de page voulu. 25-26 Pour effacer une page, sélectionner la page (25), cliquer sur «Delete» (26), puis sur «Yes» dans la fenêtre qui s'ouvre alors. 27 Pour changer l'ordre des pages, sélectionner une page (25) puis la faire monter ou descendre à l'aide des boutons 27. 28 Toujours penser à sauvegarder les modifications en cliquant sur «Pulish». 29 Cliquer sur «Play» pour pré-visualiser un projet.
6. Navigation dans la pré-visualisation d'un projet Comme indiqué plus haut, on peut à tout moment pré-visualiser un projet en cliquant sur le bouton «Play» en bas à droite de la fenêtre. On obtient alors : Pour aller directement à une page, cliquer sur le titre de cette dernière, puis cliquer sur le bouton 33 «Go to Page». 7. Modifier/Editer un projet Pour modifier un projet déjà commencé (p. ex. pour ajouter ou supprimer des pages), il suffit d'aller sur la page d'accueil de Xerte. 30 Cliquer sur ce bouton pour aller à la page suivante. 31 Cliquer sur ce bouton pour aller à la page précédente. Lorsque l'on a un projet avec beaucoup de pages, il est pratique de voir une table des matières pour naviguer dans le projet. 32 Cliquer sur ce bouton pour faire apparaître la table des matières. On a alors la fenêtre : 34 Sélectionner le projet à modifier. 35 Cliquer sur le bouton «Edit». La fenêtre correspondant au projet s'ouvre alors.
8. Modifier le titre d'un projet et le mettre en accès publique Pour voir ou modifier le titre et les propriétés d'un projet, il faut : 34 Sélectionner le projet désiré. 36 Cliquer sur «Properties». Pour mettre un projet en accès public, on procède comme suit : 39 Cliquer sur l'onglet «Access». On obtient alors la fenêtre suivante : La fenêtre suivante s'ouvre alors : 40 Sélectionner «Public». 41 Cliquer sur «Change Access». Une fois cette opération faite, on obtient sur l'onglet «Project» l'adresse internet du projet : Pour changer le titre du projet, il faut : 37 Entrer le nouveau titre. 38 Cliquer sur «Rename». Attention : Un projet est par défaut en accès privé (seul le créateur du projet peut y accéder). Pour rendre l'accès publique, commencer par
Une fois que vous avez entré le texte désiré (si nécessaire), D cliquer sur le bouton «HTML». On obtient alors la fenêtre : A : adresse internet du projet (version HTML5) B : lien pour intégrer le projet à une page internet. Dans le cas où l'on aimerait voir le projet et version Flash et non HTML5 (qui est l'option par défaut), il suffit de sélectionner «Flash» C pour voir un nouveau lien apparaître. 8.1. Insérer un projet Xerte dans Mahara ou Moodle Pour insérer un projet Xerte dans Mahara ou Moodle, il faut commencer par copier le lien dans la fenêtre B (ci-dessus). Il suffit ensuite d'ouvrir une zone de texte dans Mahara ou Moodle. Dans l'exemple ci-dessous, considérons la zone de description de page dans Mahara :
Coller le lien copié plutôt, puis E cliquer sur «Mettre à jour» Une fois enregistrée, la page finale ressemble à cela : Note technique (pour les curieux) : Si vous ouvrez à nouveau l'éditeur de source HTML (la fenêtre ci-dessus), vous remarquerez que les lignes vides ont été supprimées que les «balises» <p> et </p> entourent chaque paragraphe. Ceci est normal et n'affecte pas le résultat. Une fois que vous avez cliqué sur «Mettre à jour», le projet Xerte est introduit dans la boîte de texte : La procédure est en tout point pareille pour toute zone de texte dans Moodle ou Mahara. Notez que si vous introduisez des projets Xerte dans des pages avec plusieurs
colonnes, soyez sûr que la colonne en question soit assez large, sinon la capsule Xerte risque d'être tronquée (ou de rendre vraiment mal à l'écran). 8.2. Partager la version non-modifiable d'un projet (p. ex. Pour qu'il soit noté) F Cliquer sur l'onglet «Exporter» En descendant en bas de la fenêtre on trouve alors le bouton «Export Snapshot». Un «Snapshot» est une version non-modifiable du projet. Ceci est utile si on doit par exemple rendre une version qui va être évaluée. La procédure pour partager une version non-modifiable d'un projet est simple. Dans la fenêtre «Propriétés du projet» : G Cliquer sur le bouton «Export Snapshot». On obtient alors la fenêtre suivrante :
L'icône en haut à droite de la fenêtre indique également qu'il s'agit d'un «snapshot» du projet. 8.3. Description de quelques onglets de la fenêtre des propriétés Cette fenêtre contient l'adresse internet du projet (indiquée par H), qui peut être transmise directement à l'enseignant-e ou insérée dans Moodle ou Mahara comme indiqué à la section précédente. On voit qu'il s'agit bien de la version non-modifiable du projet, car l'adresse commence par «http://sepia.unil.ch/xot-snapshots». En cliquant sur ce lien, on obtient : 9. Notes : permet de prendre des notes sur le projet comme référence future. Ces notes sont à usage personnel et ne sont pas publique. Shared Settings : pour partager le projet avec un autre utilisateur de Xerte Open Content : permet de donner une licence Creative Commons à son projet Options dans les zones de texte Différentes options existent dans les zones de texte comme par exemple de mettre du texte en gras, italique ou d'insérer des images. Pour mettre du texte en gras, on procède comme suit :
42 Sélectionner le texte à mettre en gras. 43 Cliquer avec le bouton de droite sur la sélection, puis cliquer sur «Gras» (dans l'exemple en anglais, «Bold»). 9.1. Exemples : liens, texte en italique, gras ou couleur On obtient alors : Lien hypertexte <a href="adresse internet du site web" target="_blank">texte qui va s'afficher</a> par exemple <a href="http://www.unil.ch" target="_blank">lien de l'unil</a> va donner Lien de l'unil Lien vers une autre page du projet <a href="#" onclick="x_navigatetopage(true,{type:'pageid',id : 'XXX'})">Page XXX</a> où XXX est le nom de la page en question. Pour donner un nom à une page, il suffit d'aller dans le menu «Optional Properties», sélectionner «Page ID», de cliquer sur «Add» puis d'entrer un nom (unique) pour cette page. A noter que si l'on entre un nom de page qui n'existe pas, on est alors dirigé par défaut sur la première page du projet. Texte en gras <b> texte à mettre en gras</b> va donner : texte à mettre en gras Texte en italique <i>texte à mettre en italique</i> va donner : texte à mettre en italique Texte en couleur <font color="#ff0000">rouge </font> donne rouge <font color="#00ff00">vert </font> donne vert <font color="#0000ff">bleu</font> donne bleu Les symboles «<b>» et «</b>» correspondent à du code HTML et assurent que le texte choisi sera bien en gras. De manière similaire on peut mettre du texte en italique. On sélectionne le texte à mettre en italique, fait un clique avec le bouton de droite et choisi «Italique». Notez finalement que Xerte supporte le code HTML dans les zones de texte. Les possibilités sont donc nombreuses. Pour en savoir plus sur les balises HTML en général : http://fr.html.net/tutorials/html www.w3schools.com/html/default.asp (en anglais). Voici deux site avec des listes de balises fréquemment utilisées : http://www.uqac.ca/cyberomnium/2003/doc/web/ref_html/html/bali ses.html (Attention : contient aussi quelques balises qui ne sont plus utilisées en HTML5) http://41mag.fr/liste-des-balises-html5 (plus complet) Notez que les balises peuvent être écrites indifféremment en majuscules ou minuscules. Le lien suivant donne les codes hexadécimaux (p. ex. #0000FF pour bleu) pour toute une liste de couleurs : http://www.w3schools.com/html/html_colors.asp.
10. Exemples de projets réalisée avec Xerte On-line Toolkits Voici une liste d'exemples de projets réalisé avec Xerte : www.nottingham.ac.uk/xerte/documentation.aspx xerte.org.uk/index.php? option=com_k2&view=itemlist&layout=category&task=&id=&itemid =702&lang=en previous.delicious.com/v2/rss/ronm123/xerteexamples?&count=100 moodle.marjon.ac.uk/mod/page/view.php?id=10487 ainsi que des projets à l'unil : www.unil.ch/cajoue Observer, convaincre, communiquer: The Piano, de Jane Campion Réflexion sur les environnements d apprentissages personnels (PLE)