Xerte_FirstLOTut_2011

JISC Techdis

Xerte Online Toolkits

© JISC Techdis 2011 1 www.jisctechdis.ac.uk/xerte

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 will need access to a local Xerte Online Toolkits

installation or you can get started by using the JISC Techdis Sandpit at www.techdisplayxerte.info.

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 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:

JISC Techdis Sandpit

If you are using the

JISC Techdis sandpit

you will see the login page appear when you visit

www.techdisplayxerte.info

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 JISC 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 mountain

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.jisctechdis.ac.uk/xerte

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 2011

http://www.jisctechdis.ac.uk/xerte

http://mitchellmedia.co.uk/

Documents

Xerte_FirstLOTut_2011