jisc techdis – xerte online toolkits · 2010-12-01 · creating your first learning object...

© TechDis 2009 1 www.techdis.ac.uk/getxerte

JISC TechDis – Xerte Online Toolkits

Creating your first learning object Introduction In this tutorial we will begin to create a simple learning object containing some text, images and sound. In the process we will explore the basics of the Xerte Online Toolkits interface and the steps required to create and share your first learning object. Pre-requisites This tutorial is for those new to using Xerte Online Toolkits. You should have access to a Xerte Online Toolkits installation and can use the TechDis Sandpit at www.techdisplayxerte.info if you don’t have your own installation. User id = techdis and password = jisc. Context The basic steps covered in this guide provide an introduction to steps you are likely to take in the creation of any Learning Object (LO) within Xerte Online Toolkits. You will see that by navigating the very user friendly interface and by completing template based forms, you will quickly be able to create and assemble engaging and accessible learning objects. The LO’s can include a wide range of media and interactivity all with built in accessibility. In this example we will add some text, images and and a sound file, in the process of beginning to create an introduction to photography. You can view an example of the learning object we will begin to create at: http://xerte4.techdis.palepurple.co.uk/play.php?template_id=241 The example also contains a link to the assets used in this example for you to follow this guide step by step.

Key:

New sequence

Sequential steps with screenshots for reference

Repeated steps without screenshots 2

1

http://www.techdisplayxerte.info/�


Logging in to Xerte Online Toolkits There are different ways to login to Xerte Online Toolkits:

TechDis Sandpit

If you are using the TechDis sandpit you will see the login page appear when you visit www.techdisplayxerte.info and will need to login with techdis as the username and jisc as the password. N.B. This is a shared account and so should only be used for exploring and testing toolkits as all content may be periodically reorganised and/or deleted.

Network Login

If you are using another installation, perhaps at your own organisation, you may see the Toolkits login page or be redirected somewhere else, possibly to login with your usual network account.

Integrated or shared login

You may also find that you are prompted to login to another system first (e.g. Moodle), or that your installation has been set to log you in via a shared login, or that you are logged in automatically. Once logged in you’ll then see the full Toolkits workspace, with either your own private area, or a shared workspace similar to the one shown below.

N.B. If you are using the TechDis Sandpit or another shared login workspace, you’ll need to be careful to only edit and/or delete your own LO’s. So it is advisable to create your own folder(s) and perhaps to include your initials in the name of each LO. You may also wish to export anything you create. This is described in more detail later.

3

2

1

1

2

3

http://www.techdisplayxerte.info/�


If you have created any learning objects or folders previously, you will see these in the My Projects panel. Here you can organise, edit, preview and share projects you have created.

Templates to create new projects can be found in the Create a new project panel.

The template we will be using is called the Xerte Online Toolkit which contains a wide range of easy to use page types making it easy to create sophisticated content.

N.B The RSS Feed template allows you to easily create RSS feeds. This will be covered in a separate tutorial.

Creating your first Learning Object

To create a new project click Create and enter a name for your project prefixed with your initials:

RM first LO

Click Create Project and a pop-up window should appear as shown below. N.B. If this window doesn’t appear you may see a message at the top of the browser window asking if you wish to enable pop-ups. You should allow this and then repeat step 8.

This is the Project Editor window which is where you add pages and content to your learning object.

The left ‘Page Icon Panel’ is where we insert, copy, delete and organise pages.

The right ‘Form Panel’ is where we fill in forms to populate and configure the LO and each page.

The first step is to enter a Learning Object Title – this will appear at the top of every page:

Introduction to Photography

9

11

10 6

12

8

7

5

4

4 5

6 7

8

9

10 11

12 13

14


We will leave the navigation set to Linear

Increase the Default Text Size to 14.

We will also change the Display Mode to full screen. This will ensure the LO will scale to fit the browser window even if viewed on a mini laptop such as an eeePC.

Insert a Title Page

We access the page types via the Insert menu. Select Insert > Text > Title Page

Notice that as we hover over each page type for a few seconds a useful preview and summary of each template page appears. This serves as a quick reminder of what each page can achieve.

Give the title page a Page Title. This will appear below the Learning Object title.

Enter the Title Text:

Getting to grips with the basics

Leave or set the Text Size to 30

Click Play to preview our title page

The basic Title Page appears showing the LO Title, Page Title and Title Text.

Close the preview window to return to the Editor.

23

22

21

20

19

18

17

16

15

14

13

15

16

18 19

20

17

21

22

23


Inserting a Graphics and Sound page. To insert another page we simply repeat the previous steps by selecting a page type from the insert menu.

This time select Insert > Media > Graphics and Sound to add a page which can contain an image, text and optional sound file.

Again give the page an appropriate Page Title:

Let there be light!

Enter some Page Text:

Photography is ultimately about the capture, control and composition of light. The capture and control is related to (and sometimes limited by) a technical knowledge of your equipment but the composition is only limited by your imagination.

N.B. If we were to preview the page now we would not see any page text. This is because the page positions the text in relation to the image we choose and we obviously haven’t added an image yet.

Click the Import Media button to browse for an image to add to our page. N.B. Ideally images should be resized in an image editing programme before importing, especially if the images are direct from a digital camera. e.g. Images should normally be no more that 800 x 600 and in fact often even smaller will suffice. (.jpg .png and .gif images and .swf files are supported)

28

27

26

25

24

24

25

26

27

28


It can often be useful to switch to Large Icons to be able to quickly select the right image visually rather than having to know the relevant file name.

Select a relevant image and click Open.

A File Upload Progress window will appear and automatically close when the image has been uploaded. The filename will then appear in the Image text box.

Click the Preview Media button to preview the image you have selected.

Click the Close button to return to the edit project window.

33

32

31

30

29

29

30

31

32

33


It’s very important to add an appropriate Image Tooltip describing the image to users with a visual impairment. The text entered here will display as a Tooltip when the mouse pointer is hovered over the image and will be read by screen reader software including the built-in text to speech engine which works with Internet Explorer. Enter the following:

Image of sunlight through misty trees

Click Play to preview the LO and then Next to view the new image page. Hover the mouse pointer over the image to see the Tooltip.

We can also quickly change the layout of the page by changing the Text Align setting. Select Right, Top and Bottom and preview each time to see the effect.

For a Portrait shaped image neither the Top or Bottom Alignment options are particulary effective. However the Align Right often works very well, displaying the image on the left and the text on the right.

Adding Audio Let’s add some audio to our page. Audio must be in .mp3 format and should be recorded or converted in another tool such as Audacity. The assets available with this tutorial (from

36

35

34

33

33

34

35

36


the link on the front page) include the .mp3 file used in the following steps.

Select Optional Properties > Sound and click Add.

A Sound option appears in the form. Click the Import Media button

Browse to select an mp3 file. Then click Open.

The File Upload progress window appears and automatically closes when the audio file is uploaded.

Click Play to preview your LO and click Next to

view page 2 complete with the sound controller, which appears below the image. N.B. The controller is fully keyboard accessible e.g. press the Tab key until each controller button is highlighted, then press the space bar to select that controller button.

42

41

40

39

37

37 38

39

41

42 40


If we had selected Narration rather than Sound as the optional property the process of browsing and selecting an mp3 file is identical.

However if Narration is selected the controller then appears just below the page title and top navigation bar.

Adding a Graphics and Sound page with a Landscape shaped image We can also add a landcape rather than portrait image

As previously, select Insert > Media > Graphics and Sound to add an additional Graphics and Sound page.

Enter the Page Title:

Automatic exposure

Enter the Page Text:

Sometimes it can be tricky to get the exposure you desire especially where there is little control offered by the camera settings. The picture here is taken from a cable car high up above some hikers in the snow. This was taken with a digital SLR set to AE mode together with automatic focus.

Click Import Media and browse for the landscape image. Then click Open.

As previously the File Upload progress window will appear and disappear when the upload is complete.

Add an appropriate Tooltip.

Image taken from a cable car of hikers in the snow on top of a moutain

Once again you may also wish to click Play at this point to preview your new page with landscape image.

This time we are going to add a different Optional Property – the Magnifyer...

50

51

49

48

47

46

45

44

43

43

44


Adding a Magnifier

Select Optional Properties > Magnifier then click Add.

Tick the Magnifyer option which appears in the form.

Click Play to preview your LO and browse to your new page.

As you move the mouse pointer over the image the magnifyer enlarges that part of the image. N.B. The magnifyer replaces the tooltip, however a screen reader and/or the built-in text to speech engine will still read the tooltip. As the tooltip doesn’t show when using the magnifyer, you could also choose to include your tooltip text in the page text area. We now have 3 pages in our learning object. However we have decided that our current page 3 should appear before the current page 2. This is easily achieved...

54

55

53

52

52

53

55


Re-ordering pages It is very easy to change the order of pages in an LO created with the Xerte Online Toolkits page templates.

Select the page you wish to move in the left ‘Page Icon Panel’.

Click the Move Up button to move the page above our current page 2 titled ‘Let there be light’.

The selected Automatic exposure page is now page 2.

Properties and Sharing Clearly our learning object still needs further work, with additional pages and content to add, but for now we’re going to Publish (Save) our changes and change the Properties of our file so that others can view it. N.B. By default all LO’s are private until we change them to public.

Click Publish to save the latest changes. Then Close the Editor Window to return to our workspace.

With our LO selected in the My Projects panel click Properties

The Properties window will appear...

61

60

58

57

56

56

57

59

60

61


We can see the project name, a link and embed code to share our LO, but at the moment our LO is private. Click the Access Tab. For anyone else to be able to view our LO we need to change the Access Properties.

Tick the Public checkbox and click Save.

You can now switch back to the Project Tab and use the Link or Embed Code to share your LO with others.

We may also which to change the properties so that our LO is part of the Public RSS feed. This will be covered in a separate tutorial.

62

63 62

62 63


Editing your learning objects

To continue to edit and add to your learning objects simply select the relevant LO in the workspace and click Edit. N.B. Remember to click Publish to make your changes public.

Recap Many of the steps we have covered in this tutorial are common to the steps you might take whenever you use Xerte Online Toolkits. e.g.

Create new LO’s by clicking Create, giving your project a Name and clicking Create Project

Insert new pages by clicking Insert and selecting the page type you require e.g. Graphics and Sound

Configuring the LO and adding content to your pages by filling in the forms in the ‘Form Panel’

Organising (or deleting) pages in the ‘Page Icon Panel’ Sharing your LO’s and changing properties by selecting

the LO and clicking Properties.

There are many more features and functions and a fantastic array of page types to choose from, many of which are, or will be, covered in separate tutorials. View an interactive version of this tutorial and others at www.techdis.ac.uk/getxerte

64

64

Notes Make notes here to remind yourself and reflect on any ideas you had, or features you discovered, whilst working through this guide.

Tutorial created by Ron Mitchell mitchellmedia.co.uk for JISC TechDis service – © JISC TechDis 2009

http://www.techdis.ac.uk/getxerte�

http://mitchellmedia.co.uk/�

jisc techdis – xerte online toolkits · 2010-12-01 · creating your first learning object...

Documents