installation guide - openspace | loginos.opencolleges.edu.au/os-3641-toolbox515/install.doc ·...

Toolbox Installation Guide

flexiblelearning.net.au/toolbox

flexiblelearning.net.au/toolbox

Flexible Learning Toolboxes, National VET E-learning Strategy, © Commonwealth of Australia (Department of Industry, Innovation, Science, Research and Tertiary Education (DIISRTE), 2012.With the exception of the Commonwealth Coat of Arms, the Department’s logo, any material protected by a trade mark and where otherwise noted, all material presented in this document is provided under a Creative Commons Attribution-ShareAlike 3.0 Australia (http://creativecommons.org/licenses/by-sa/3.0/au ) license.

http://creativecommons.org/licenses/by-sa/3.0/au

Table of ContentsScope and features of the toolbox...............................................................................1

How do I install the toolbox on my server?...............................................................1How do I make use of the communication tools?......................................................2The directory structure of this Toolbox.....................................................................2How can I deliver activities and/or units individually?..............................................7How do I add, delete or change the order of content screens in an activity?...........9How do I customise a menu?..................................................................................10What if I only want to install the resources and not the activities?.........................13Using a learning management system...................................................................15Known issues..........................................................................................................15

Navigation issues................................................................................................15Refresh issues.....................................................................................................15Accessing PDF files.............................................................................................15

Accessibility issues.................................................................................................15Text alternative navigation.................................................................................16No JavaScript.......................................................................................................16Flash...................................................................................................................16Screenreaders.....................................................................................................16

Minimum hardware/software requirements and installation advice for learners.....17Hardware............................................................................................................17Software..............................................................................................................17

Certificate III in Clothing Production – Installation Guide

Scope and features of the toolboxThe Fashion toolbox approaches learning in an innovative and challenging way and will enable providers to customise learning resources so they are relevant to their immediate audience. The toolbox provides online learning resources for 7 units of Certificate III in Clothing production. Much of the online material is customisable. The toolbox has been designed and developed to conform with W3C Priority 1 Accessibility Guidelines and makes use of an integrated navigation system in order to improve accessibility.

The Fashion Toolbox as released on the CD is a flexible learning resource that can be easily customised to suit individual learning needs and work environments.

The toolbox comes complete with its own internal navigation ready for installation onto a webserver. The toolbox has been designed to incorporate online communication (email, chat forum and Discussion board) tools and you will need to add the necessary links to your choice of communication tools.

The toolbox may also be incorporated into a learning management system such as WebCT, to make use of the system’s tools (eg. communication tools) and features.

It is recommended that you make a backup copy of the Fashion Toolbox CD in case the original becomes lost or is damaged.

How do I install the toolbox on my server?

To install the Fashion Toolbox on your server, follow these steps:1. Insert the Toolbox CD-ROM into your CD-ROM drive.2. Open a directory browser on your server computer and navigate to the drive that

you inserted the CD into.3. Either copy all the files and directories in the root directory of the CD-ROM to a

nominated directory on your server, orIf you only wish to copy specific units or activities then refer to the section How can I deliver activities and/or units individually? next.

There are no server side technologies utilised in this toolbox so it will not be necessary to configure anything extra to use the toolbox. After all the files are copied to the nominated directory on your server, it’s just a matter of opening a web browser and accessing the index.htm page in the nominated directory.

If you rename any of the subdirectories, you will have to change the appropriate links in the content. Unless it is absolutely necessary that you do this, we’d recommend keeping the directory structure as is to prevent any errors from occurring.

If you have trouble accessing the Shockwave content in the toolbox, it may be necessary to set the appropriate mime type for Flash (application/x-shockwave-flash). This should not be necessary for most installations.

How do I make use of the communication tools?

1


To link the toolbox to your choice of communication tools (e-mail and theDiscussion board) you will need to insert links to your tools instead of theplace holders in the ‘Your Say’ resource. Go to:

- /pages/comm/commun.htm

and change the links on each icon. This resource is set up so that your communication tools will display in the bottom frame beneath the blue banner.

The directory structure of this Toolbox

Each unit and activity has its own directory for its content (HTML pages) and its associated multimedia resources (images, pdfs and flash files). These units and activities also make use of various shared resources, such as the Glossary, Facts&Figures, Fabrics&Equipment, the Instruction Manual and the OHS Manual.

The files have been organised in a directory structure to make it easier to extract and deliver individual components of this toolbox. The following table outlines the directory structure and explains how to do this:

The Root Directory index.htm Homepage for entire toolbox. (set up the

toolbox on your server so that it loads this page first)

default.htm Default Entry page for toolbox (this page is for teacher’s and RTO’s use: learners should not see this page).

disclaim.htm Disclaimer and copyright info.credits.htm Credits.need.htm Hardware and software requirements for the

toolbox./styles/ The linked style sheets for the content of the

toolbox.Please note that there are two versions of almost every style sheet: one is specifically for Netscape 4.7 and the other is for all other browsers. There is a sniffer function on most pages of the toolbox that determines which browser is being used and loads the appropriate style sheet. The N4.7 style sheet has a capital N in the name.Eg. fabrics.css and fabricsN.css

/images/ This directory contains all the generic images used throughout the toolbox.

/media/ This contains the flash files which are linked to the home page (homepage.swf) and the default page (tester.swf).

/pages/ All toolbox content is stored within the pages

2


directory. This directory is broken into several sub-directories.

The Flash Originals directory/flash originals/ This folder contains all the original flash files

for interactions in this toolbox. This directory is broken into sub-directories which are named by the unit and activity, or resource in which they appear in the toolbox.

The Teacher’s guide/t_guide/ This directory contains the teacher’s guide

which is an RTF document.

The pages directory/units/ All of the units are stored within the units

directory. Each unit has it’s own subdirectory named with an abbreviation of the unit’s name.

/js/ The JavaScript files contained in this directory control:

the internal navigation some interactions style sheets external window code the functionality of the glossary the functionality of the fabric

library.It is recommended that you do not alter these files unless it is absolutely necessary as this can cause errors to occur in the toolbox.

/comm/ All files relating to the communication tools are in this directory.

/fabrics/ All files relating to the Fabrics & Equipment resource are in this directory.

/facts/ All files relating to the Facts & Figures resource are in this directory.

/instruc/ All files relating to the Instruction Manual resource are in this directory.

/ohs/ All files relating to the OHS Manual resource are in this directory.please note: There is also a directory

3


called /ohs/ in the units folder which is for the unit “Follow defined OHS procedures”

/tour/ All of the files needed to run the tour section of the toolbox are stored within the tour directory.

The units directory/images/ All of the units are stored within the units directory. Each

unit has it’s own subdirectory named with an abbreviation of the unit’s name.

cut1.htmcut2.htmcut3.htmohs.htmqual.htmsew1.htmsew2.htm

These are the frameset pages for each of the 7 units of competency.

/cut1/ All files relating to the unit ‘Cut work 1’ are in this directory.



/sew1/ All files relating to the unit ‘Sew garments 1’ are in this directory.

/sew2/ All files relating to the unit ‘Sew garments 2’ are in this directory.

/qual/ All files relating to the unit ‘Apply quality standards’ are in this directory.

/ohs/ All files relating to the unit ‘Follow defined occupational health and safety policies and procedures’ are in this directory.

The Cut work 1 unit directory /cut1/ (all unit directories use these same file naming conventions and directory structure)

/act1/ All files relating to the activity 1 are in this directory./ act 2/ All files relating to the activity 2 are in this directory./ act 3/ All files relating to the activity 3 are in this directory.

4


/images/ Images used throughout this unit (banners etc) are stored in this directory

descrip.htm This is the overall task page for each activity

footer.htm Footer for the task pageperform.htm Performance criteria for the unitsidenav.htm The side navigation barTop.htm The top banner for the unit

The Activity 1 directory /act1/ (all activity directories use these same file naming conventions and directory structure)

/images/ Images used in this activity are stored in this directory/ js/ Contains the nav_data file for the activity (which stores

the number of pages in that activity)/ media/ All SWF files (Flash movies) for interactions for the activityOther pages f_set.htm – The frameset for the activity

page01.htm - The first page of the activity All other pages are named in the sequence in which

they display eg. page08.htm The last page of every activity is named

summary.htm Text alternatvies for interactions are named

textxx.htm where xx is the number of tha page in which the interaction appears Eg. text02.htm

number.htm – the footer containing the page navigation

perform.htm - Performance criteria for the activity checklst.htm – The checklist for the activity

The resources directories: /fabrics/ /facts/ /instruc/ /ohs/ (all follow this structure)

/images/ Images used in this resource are stored in this directoryThe sub-directory /nav/ contains images for the menu

/ media/ All SWF files (Flash movies) for this resourceSub-directories Each topic and it’s relevant pages are stored in their own

directory Eg. fabrics/fibres/ contains sub-directories /natural/ /synthetic//blends/

In some cases these sub-directories may contain a frameset in which case they will also contain a page titled nav.htm. In this case the frameset page contains the nav_data javascript on that actual page (it is not in a separate file as in the activity directories)

menu.htm Contains the menu for the resource.

5


How can I deliver activities and/or units individually?

You can choose to install only select units, or select activities from one unit, on your server. It is important that you maintain the overall directory structure within the nominated directory on your server to make sure that links between pages remain functional.

To copy an individual unitCopy all files and directory on the root directory of the CD except for the units directory.

Example:To copy the unit LMTPRCL02AA: Cut Work 1 you would copy the directories to the right.

/units/cut1/- and all the directories underneath

/units/images/- and all the directories underneath

Make sure that the specific unit(s) that you copy to the server are located within the /units/ directory. Otherwise, the links between these units and pages in other directories may not function.

There is no need to copy across any of the other unit directories (or their corresponding graphics directories).

To select individual activitiesTo delete an activity from within a unit, follow the steps above to copy the unit, and then delete the activity directory.

Example:For example to delete the activity ‘Bundle and Dispatch Cutwork’ from LMTPRCL02AA: Cut Work 1 follow the steps to the right.

Follow the steps above to copy all the resources, tools and the entire unit to the server.

Delete the act3 directory (and all subdirectories) from within the Cut1 directory.

Edit the descrip.htm page located in the Cut1 directory to remove the link to ‘Bundle and Dispatch Cutwork’ (activity 3).

Note that if you are delivering only select units discretely, you may need to edit the links to units on the homepage (index.htm). For example, you may want to give students access to one unit only, and prevent access to other units. To do this you will need to edit the flash file on the homepage. It is strongly recommended that you keep a copy of the original of this flash file in case you accidentally delete some necessary code or content.

6


Open the file “homepage.fla” in Flash. Open the Action script panel and view the script in the first frame of the layer named “script”. Delete (or comment out) all the code between the comment tags that says://Button rollover behaviour and link to ‘unit xxx’and//------------------------------------------------This will deactivate the button so nothing happens when the student rolls over it, and also deactivate the link to this unit. If you wish to remove the button entirely from the homepage, expand the folder called ‘units’ in the timeline and go to the layer with the same name as the unit you are removing. Move the first frame of this layer to frame 2. This will stop the button from displaying on the homepage.

For example, to deny access to the unit Sew Garments 2,but leave the button on the homepage, you should delete the following code from the script in frame 1:

OR to deny access and hide the button altogether you should move the following key frame to frame 2 of the timeline, as highlighted by a red circle in the diagram below:

7


You will then need to export the file as “homepage.swf” to the /html/media/ directory.

You will also need to remove the screen reader navigation link (see accessibility issues below).

The majority of the content is produced in HTML with most of the interactions in Flash. This means that an HTML or text editor can be used to customise almost any content page inside the Fashion Toolbox, but to edit most interactions you will need to be a confident user of Macromedia Flash MX.

How do I add, delete or change the order of content screens in an activity?

Adding, deleting or changing the order of screens in an activity is a simple job. Access the directory for the activity you would like to change (for example units/cut1/act1) and locate the js directory. (units/cut1/act1/js). Look for a file called nav_data.js. This contains a sequenced list of all the content screens in the activity. The sequence represents the order in which screens are displayed within an activity.

Eg.

addPage("page01.htm");addPage("page02.htm");addPage("page03.htm");addPage("page04.htm");addPage("page05.htm");addPage("page06.htm");addPage("page07.htm");addPage("page08.htm");

8


addPage("page09.htm");addPage("summary.htm");

To add a new screen into the sequence, simply insert an addPage(“filename.htm”) into the desired position within the listed sequence, where filename.html is the name of the HTML page you would like to insert into the sequence. The new page must be placed in the activity directory.

To delete a screen from the sequence, simply remove the addPage(“filename.htm”); from the sequence, where filename.html is the name of the HTML page that you want removed.

To change the order of screens in the sequence, simply move the addPage element from one location in the sequence to your desired location.

How do I customise a menu?

The resource pages in the toolbox (such as the Instruction Manual) use a javascript expanding menu. Each resource has it’s own menu page menu.htm. On this page is the javascript which determines which menu item and highlights and expands when a link from an activity to a resource is clicked, and also collapses a topic when a different topic is selected from the menu. Further down the page is the html which lays out the menu items. It is important to note that the links which

So to add, delete or change a menu item you will need to edit both the javascript and the html on the page.

An example of a menu.htm file is shown below (for the OHS resource).

This image shows the way the menu displays. In this case the topic “Cutting” has been expanded, and the sub-topic “Using Machinery” is open in the right frame. Note that the book icon next to the current topic is highlighted, as is the arrow next to the current sub-topic.

9


The links in this menu are all images, so you will need to create a new image if you are adding to the menu. The original PSD templates for these images have been included – you will need Adobe Photoshop to edit them. Do not alter the size of the image – you can only use a short title. The PSDs are in the html/images/menu/ directory. If you do not have access to Adobe Photoshop, you can create your own image, as long as the size is 130x15 pixels. (Also in this folder you will find the PSDs for the page titles in the resources which may be useful if you are adding content).

Once exported as GIF files, these images are stored are in the directory /images/nav/ within each resource.

The screen shot below shows the JavaScript which stores the menu items in an array. This is the part of the code you will edit when adding, deleting or changing a menu link. You can see that the sub–topics are indented beneath the topics, and each menuItem has a unique string which identifies it.

Do not alter or delete any other part of the javascript on this page as it will cause the menu not to function correctly.

The next picture shows the html layout which sets “cutting” as a topic and “personal safety” as the first sub-topic under cutting. Note that the div containing the topic has a class attribute of “parent”, whilst the div containing the sub-topic has a class attribute of “child”. The div id for a sub-topic must be set to “(parent id)Child” for the menu to function correctly. In this case the parent id is “cutting” and the subtopics of cutting are all within a div with the id “cuttingChild”.

10


If you are adding a new sub-topic, be sure to put it within the correct child div. Also you will need to give your new item a unique string so that the browser knows which item to highlight and which topic to expand. For example, you can see that the sub-topic “personal safety” uses the string ‘pers’. You will also need to use this string in the javascript at the top of the page, for example:

menuItem["cutting"] = new menuObject('','');menuItem["pers"] = new menuObject('cutting','cutting/safety.htm');

Finally, if you want to link directly from an activity page to a resource page you should use this syntax:

<a href="javascript:void(0);" onclick="MM_openBrWindow('../../../ohs/ohs.htm?pers','resource',popup[1])" title="This page opens in a new browser window"> Personal safety</a>

Where ohs/ohs.htm is telling the browser to open the ohs resource and ?pers is telling the browser to open the menu up to “Personal safety” and at the same time display the information about personal safety in the right frame.

If you are linking to an the Fabrics & Equipment resource you would use fabrics/fabrics.htm? xxxx

If you are linking to an the Instruction Manual resource you would use instruc/ instruc.htm?xxxx

If you are linking to an the Facts & Figures resource you would use facts/ facts.htm?xxxx

For this to work correctly you must ensure that the query string you are using to identify your new menu item is unique among all other menu items in that resource.

What if I only want to install the resources and not the activities?

If you do not wish to install any of the units, simply remove the /units/ directory and all sub-directories. All the resources function as separate entities and contain valuable information available for students to research as they complete the toolbox activities.

Having removed the above directory you will need to modify the toolbox entry page. To do this, open the file “homepage.fla” in Flash and hide the unit buttons by either deleting the layer containing the units folder (and all sub-layers) or by moving the first key frame of all the units layers to frame 2 of the timeline.

You will then need to export the file as “homepage.swf” to the /html/media/ directory.

You will also need to remove the screen reader navigation links to units from index.htm (see accessibility issues below).

11


Customising the glossary

The glossary can be customised by the addition of new terms or through the modification of existing definitions. The glossary files are housed in the folder pages/facts/glossary. Please note: there are two versions of the glossary – the “full glossary” (glossall.htm) which displays all glossary terms in one page in the Facts & Figures resource, and each individual term also has its own page which pops up in a small window when the learner clicks a linked term from other pages of the toolbox. These individual terms are in the directory pages/facts/glossary/terms.

To edit a glossary definition, be sure to edit both versions, for example, to edit the term “bind” you would edit this code on the page glossall.htm:

<h3>bind</h3><p>A strip of fabric either on the bias grain which encloses a raw edge.</p>

and also open and edit the page b18.htm in the /terms/ directory. Note that the number does not relate to the order in which the terms appear on the full glossary, where they are listed in alphabetical order.

To add a new glossary term, open the javascript file pages/facts/glossary/ config.js and add your term to the bottom of the list for the corresponding letter,

for example: addGlossary("a word", "a10.htm");

Then create a new page in the pages/facts/glossary/terms directory called a10.htm, and insert your definition there. (You should use one of the other term pages as a template, but be careful not to overwrite it!).

You will also need to copy this information from your new term page:

<h3>a word</h3><p>definition text.</p>

and paste it into the appropriate place (alphabetically) in the full glossary: pages/facts/glossary/glossall.htm

To link to a glossary term from an HTML page (such as an activity page) use the following syntax within the page itself:

12


<a href="javascript:doGlossary('term');" title="Go to glossary, opens in new window." class="gloss">term</a>

Where term matches the term used in the config.js (including case).

Using a learning management system

While the Fashion Toolbox is has been designed as a self contained resource, with its own internal navigation, individual units and activities can be easily transferred to a web-based learning management system. If your learning management system has in-built navigation (such as WebCT) then you will need to disable the internal navigation tools contained within the toolbox.

This can be done using the individual HTML files within each activity directory and incorporating them into the learning management system navigation as appropriate.

Consult the technical documentation that accompanies your learning management system for more details.

Known issues

Navigation issues

Because the Fashion Toolbox features its own inbuilt navigation there may at times be conflict between this navigation system and that of the browser.

As a result using the Back button on the browser will send the user to the activity entry page, rather than to the previous page. The Forward button will have similar effects.

It is therefore recommended that users navigate using the inbuilt navigation only.

Refresh issues

If a page fails to load, do not use the Refresh button. Instead use either the fwd or back buttons in the in built navigation, and then use the same buttons to return to the problem page. Using the refresh button will return the user to the first page of the current activity.

Accessing PDF files

Some PDF files may appear blurry on screen. These files are designed to be printed out by the learner and kept for their reference. Even though the text or images may appear blurry on screen they will print clearly and sharply. Learners will not be able to edit the PDF files on screen, so worksheets for example are to be printed and filled out by hand.

Accessibility issues

The toolbox has been designed with accessibility in mind and meets the W3C Priority 1 Accessibility Guidelines.

Text alternative navigation

13


The flash navigation system used on the homepage is set up so that non-mouse users can tab through the links, and also has hidden text links for screen reader users.

No JavaScript

This toolbox will not work without JavaScript. Please make sure your users have javascript enabled in their browser.

Flash

Certain flash navigation components will not be available in those browsers that do not support JavaScript. In this case either a static imagemap will be displayed and a non script version of navigation menus will be loaded.

Screenreaders

If you are using a screen reader it is recommended that you leave JavaScript on and set the screen reader HTML options as follows:

Headings Verbosity Headings OnlyText Link Verbosity Speak LongestGraphic Verbosity Tagged GraphicsImage Map Link Verbosity All Image MapsGraphical Link Verbosity All Graphical LinksNew Frame Indication Say Frame Name at Beginning and

End

Where Flash and javascript navigation components have been used, the toolbox incorporates the use of hidden links to be used only with screen readers as shown in the image capture below.

If customising the toolbox you should ensure that you also update any hidden links relevant to the customisation. These hidden links are found in the homepage (index.htm) and the page number navigation for each activity (eg: cut1/act1/number.htm).

14


Minimum hardware/software requirements and installation advice for learners.

The following details also appear in the ‘Toolbox Requirements’ page which links from the footer of the first (task) page of each unit in the toolbox, and also from the ‘Before you begin’ link on the homepage.

HardwareTo use the learning material in this unit, learners will need a computer with the following features:

IBM compatible computer with 300 MHz processor 64 MB of SDRAM 800 x 600 16-bit colour display (although we recommend you set your display to

1024 x 768 if possible) 4 Gb hard disk 1.44 Mb floppy disk drive CD-ROM drive 28.8 kbps or higher modem (56 kbs or higher recommended).

OR

a Macintosh equivalent.

SoftwareLearners will also need the following software/plug-ins installed in their computer:

Either Internet Explorer 5 OR Netscape Navigator 4.7 or higher. We recommend Internet Explorer 5

Adobe Acrobat 5.0 to open and use downloadable forms, sample documents and worksheets.

Macromedia Flash Player 6 - if you haven’t got this plug-in, you can download and install the latest free version from Macromedia’s web site (www.macromedia.com).

Incorrect versions of these applications could result in information being shown in an unreadable form, or not shown at all.

15

http://www.macromedia.com/

installation guide - openspace | loginos.opencolleges.edu.au/os-3641-toolbox515/install.doc ·...

Documents