teaching guide template -...

36
Technical guide SIR07 Retail Services Training Package Series 12 Flexible Learning Toolbox Supporting resources for: SIR20207 Certificate II in Retail 27/10/09 Final Version flexiblelearning.net.au/toolbox

Upload: others

Post on 13-May-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide

SIR07 Retail Services Training Package Series 12 Flexible Learning Toolbox

Supporting resources for:SIR20207 Certificate II in Retail

27/10/09 Final Version

flexiblelearning.net.au/toolbox

Page 2: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

© Commonwealth of Australia 2009

The views expressed herein do not necessarily represent the views of the Commonwealth of Australia. This work is copyright. Apart from any use as permitted under the Copyright Act 1968, no part may be reproduced by any process without prior written permission from the Commonwealth. Requests and enquiries concerning reproduction and rights should be addressed to Training Copyright, Department of Education Science and Training, GPO Box 9880 Canberra City ACT 2601 or email [email protected].

Page 3: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

Contents

Introduction........................................................................................................................... 2System requirements............................................................................................................3

Client hardware and software (for learners).......................................................................3Server hardware and software (for RTO)...........................................................................3Developer hardware and software (for customising)..........................................................4Toolbox Help Desk and support services...........................................................................4

Customising Toolbox content................................................................................................5What features can be customised?...................................................................................5Basic editing................................................................................................................... 12Customising a Toolbox for single unit delivery.................................................................13Keeping to the standards................................................................................................13Visual design.................................................................................................................. 14Navigation...................................................................................................................... 17File structure................................................................................................................... 17Accessibility.................................................................................................................... 19

Technical support................................................................................................................20Installation on a web server.............................................................................................20Installing into a SCORM compliant LMS..........................................................................20Producing CD-ROMs for distribution................................................................................20Known issues................................................................................................................. 21Troubleshooting..............................................................................................................21Frequently asked questions - FAQs................................................................................22The Toolbox Help Desk...................................................................................................23

References......................................................................................................................... 23

List of tables and figuresTable 1: Customsisable elements.........................................................................................8Table 2: CSS style list .......................................................................................................12

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

iii

Page 4: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

IntroductionThe Retailer Toolbox provides a valuable source of training material for delivery of the SIR20207 Certificate II in Retail.

The Toolbox is based around scenarios that provide learning experiences which replicate real life work situations faced by retail operators. The scenarios are supplemented by:

training sessions that provide background theory and practical tasks

topics that encourage sharing of ideas and experiences

activities to be completed in the workplace.

This Technical guide has been developed to support you in delivering the SIR07 Retail Services Training Package and gives specific details on file structure and naming conventions (to help you find files within the toolbox) and how to edit some of the files. Your understanding of these instructions will depend on your level of knowledge and experience in web development. If you find you do not understand some of the concepts in the guide or you run into trouble when trying to edit or locate files in the Toolbox, you may need the help of a professional web developer.

A Teacher’s guide has been developed to assist and advise teachers and trainers as to how to use the Toolbox in their delivery of courses to learners.

This Technical guide is divided into three sections:

System requirements

Customising Toolbox content

Technical support (FAQs, troubleshooting, help desk).

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

1

Page 5: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

System requirements

Client hardware and software (for learners)Hardware

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

IBM® compatible with a 1000 MHz processor running Windows 2000, XP, Vista

-- OR --

Apple Macintosh® with a 500 MHz processor running OSX v10.4 with: o 256 Mb of RAM

o 1024 x 768 pixel display

o CD-ROM drive

o Internet access

o Sound card.

Software

Learners will also need the following software/plug-ins installed on their computer:

Internet Explorer 6.0 or above (http://www.microsoft.com/ )

-- OR --

Firefox 2.0 or above (http://www.mozilla.com/ )

-- OR --

Safari 2.0.4 or above (http://www.apple.com/ ).

Microsoft® Word 97 or a similar word processing program to open and use downloadable forms, checklists and worksheets.

Adobe® Flash Player 9. If you haven’t got this plug-in, you can download and install the latest free version from: www.adobe.com.

Adobe® PDF Reader 6.0 or above. If you haven’t got this plug-in, you can download and install the latest free version from: www.adobe.com.

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

Server hardware and software (for RTO) IBM compatible computer with a 1000 MHz processor (or Unix equivalent). 256 Mb of RAM. 4 Gb hard disk space free. CD-ROM drive. 2xISDN (128k), T1 preferred. Internet server software.

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

2

Page 6: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

Developer hardware and software (for customising)Same as client hardware and software above, with the addition of:

An HTML text editor such as Homesite®, BBEdit® or Macromedia® Dreamweaver.

A word processor such as Microsoft® Word to edit documents.

If customisation of multimedia interactions is required, then the following applications may be necessary:

o Flash CS3

o XML SPY or equivalent XML editing tool – Dreamweaver can also be used to edit XML files

o Photoshop/Fireworks (or equivalent) for editing still images

o SoundEdit16 (or equivalent) for editing sound content

o Premiere (or equivalent) for editing video content.

Toolbox Help Desk and support servicesThe Toolbox website provides support at http://toolboxes.flexiblelearning.net.au/support/patches.htm. This site offers help desk details, frequently asked questions, installation and configuration advice and patches for any products that are found to have minor errors or discrepancies. If you are unable to find what you are looking for on this site, please email the Toolbox Help Desk at [email protected] or phone 1300 736 710.

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

3

Page 7: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

Customising Toolbox contentIn most cases Toolboxes are able to be modified and redistributed with minimal licensing or copyright encumbrance. However, before commencing any modifications, we recommend that you check the license details of the Toolbox, to ensure that any customisation undertaken does not contravene the conditions of that license.

For licensing conditions visit: http://www.flexiblelearning.net.au/toolbox/license.htm

Remember to retain the original files in their CD-ROM format so that you always have an original copy of the Toolbox as a backup.

What features can be customised?Toolboxes can be customised by users under the flexible licensing arrangements, as long as they are not on-sold. You are therefore encouraged to customise the Toolboxes. However, before embarking on any modifications or customisation, we suggest that you:

check the licensing details of the Toolboxes to ensure that any customisation does not contravene the conditions of the licence

have the required trained personnel

retain the original files in the CD-ROM format as a backup (should you require them at a later stage).

Some design aspects of the Toolboxes can be easily customisable. However, there are other aspects of the Toolboxes that are more difficult. For this complex customisation we recommend that you proceed only if you have the relevant trained technical personnel.

The Toolbox has been created using Templates which control the structure of the Toolbox and the most of the links. All links found in any of the global navigation and the menus of the scenarios are controlled in the templates. This makes the Toolbox much easier to update quickly and easily. The Training Rooms are have their structure created by one template and therefore the links need to be set manually inside each individual page rather than by use of a template.

There are a number of multimedia applications that have been included in the Toolbox and all, where possible, have been made using easily editable XML files and in a few cases a Flash actionscript file that accompanies the Flash application source file included in the source_files directory of the Toolbox.

Other applications that are considered very basic and are absolutely one off will not have this edit ability and the information can only be edited by someone with a basic knowledge of Adobe Flash. In this case the majority of the actionscript used to create the application can be found on the root timeline in a layer called script. An example of this would be the scanner application located in activity two of the Buy now scenario. There is only price information in this application and this information can be found in the place described above.

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

4

Page 8: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

The XML has been written in the hope that it is intuitive to use. Below is an example of an XML file that supplies information to the mid sized sound player found in the intro to the Taking it back scenario:<?xml version="1.0" encoding="iso-8859-1"?>

<sound_player>

<sound>

<file file_location="media/audio/taking_it_back_intro.mp3" />

<play_on_load play_pause="0" />

<icon type_or_location="default" />

<heading text="" />

<text text="Hi, I got this jacket yesterday. I bought it to go with a skirt I've got at home. It looked alright in here but it's actually the wrong shade of blue and doesn't match the skirt at all. Can I return it? I just want my money back so I can look for something else." />

<file_type type="mp3" />

<image fileLocation="" />

</sound>

<style>

<player_colour>669933</player_colour>

<button_colour>669933</button_colour>

<text_area_colour>FEFEFE</text_area_colour>

<!-- At the moment there are no highlights -->

<highlight_colour>3344AA</highlight_colour>

<font_size>20</font_size>

<font_colour>333333</font_colour>

<font_family>Arial, verdana, sans-serif</font_family>

</style>

<sound_xml_complete />

</sound_player>

Inside the sound node you will find the file node use the attribute file_location to describe the location of the sound file in relation to the web page that the application is residing on.

The play_on_load node is used to tell the player to play the queued sound as soon as the sound is ready or to wait until the play button is selected. Changing the play_pause attribute to 1 will cause play on load and 0 will disable the sound until play is pressed.

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

5

Page 9: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

It is possible to supply an icon of the person speaking using the

icon type_or_location="default" Using default will not load an icon and specifying the path to an image in relation to the page where the application resides will load in that image.

The text node is used to supply a transcript of the audio that is currently queued to play.

file_type should always be set to mp3.

image fileLocation is only available when the full sized sound player is used, the file location is again relative to the .htm page where the application resides.

Duplicating the sound node will enable another sound to be placed in the queue and enable the next and previous buttons

It is also possible to change the colour of the application if needed by supplying colour values found inside the style node. The colour values should be supplied in hex values without the # symbol.

Changing the colour, size or font of the text displayed in the player can be done by changing any of the font values also found in the style node.

The home page of the Toolbox, retailer.htm has a map of a shopping centre. This Flash application does not have an xml file to update the information this instead uses an actionscript file called text_and_urls.as that is located in the source_files directory of the Toolbox. Changing the text found inside the actionscript file will change the text that appears in the Flash application when the shockwave file is recreated. If removing Scenarios from the Toolbox the Flash file will need to be opened to delete the characters that have links and text associated with them. A portion of the actionscript file is shown below:

The first part of the actionscript file is used to provide information about the individual stores, using basic html mark up is allowed:var SupermarketMessage = "Welcome to PriceCRASH. We've CRASHED prices on all major brands so you buy more for less. PriceCRASH scenarios:<li>First in, first out!<li>No use crying…<li>Emergency!"

var WattsNews_Message = "Welcome to Watt's News. We're so proud of our family's newsagency/ Tattslotto agency that we've put our name on it! Watt's News scenarios:<li>Looks a bit sus!<li>Change of shift."

(More…)

The next section provides information about the individual characters, using basic html mark up is allowed:var newsagent_boss = "In this scenario Mr Watt is telling his staff about a recent spate of shoplifting in the centre. <br><br>Select Mr Watt to begin."

var new_stock_arrived = "In this scenario Martin has just received word that new stock has arrived. <br><br>Select Martin to begin."

(More…)

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

6

Page 10: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

The URLs specify the location of the individual scenarios in relation to the home page of the toolbox:var newsagent_boss_URL="toolbox12_06/scenarios/bit_sus/01_intro/01_intro.htm"

var new_stock_arrived_URL="toolbox12_06/scenarios/first_in/01_intro/01_intro.htm"

(More…)

Some of the applications in the toolbox use a multipurpose flash file “Learninator”. The Learninator application can build a variety of learning activities (sub apps) and arrange them into a sequence. This application is driven by editable XML files. The XML has been written in a manner that is intuitive and easy to use.

The “Learninator” should not need to be edited as it has been setup to use XML input. Edit the XML first to see what can be accomplished before making changes in the original learninator.fla file. If the original application does need editing, you will need good Actionscript 3 skills and will also need to set the class path in Flash to point to the Classes folder in the source file folder of the Toolbox. These files are needed to republish and test the Flash file. If you are unsure about how to do this, refer to the Help files in Adobe Flash.

<Application>

<ApplicationSetup>

<enableRestart>true</enableRestart>

<unlimitedAttempts>false</unlimitedAttempts>

<showScore>true</showScore>

<buttonAlphaWhenDisabled>70</buttonAlphaWhenDisabled>

<loadableItem></loadableItem>

<showDeveloperTools>false</showDeveloperTools>

<enableToolbar>false</enableToolbar>

</ApplicationSetup>

The above XML is the header of this ‘Learninator’ application. This also holds the set up of the application and some elements (tags) that can be set for the application. The tags are named appropriately and indicate how they affect the application. For example: The unlimited attempts property can be set to false if you wish to lock the user to only one attempt at any questions in your application.

A handy tag is the showDevelopersTools. If this is set to true, when you test your application, you can click and drag within the swf and x, y, height and width properties will be displayed. This can be useful for the placement of images etc. When entering these values back into the XML’s subApp tag properties. Just remember to set it back to false when you have completed your application.

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

7

Page 11: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

The type and taxonomyType tags should not be changed, as they specify what application runs in the subApp. If a typing error appears in here, no app will appear in the swf file.

If you look inside the first subApp’s statement tags and image tag you will see the x, y, height and width properties. These properties give you the control in placing text and images within the subApp’s stage.

The Learninator application can read basic html tags that are available within Actionscript 3, such as <li> lists and </b> bold <br/> breaks. These come in handy when formatting the text displayed within the subApps.

Below is an example of the XML file that supplies ‘Introduction information’ to the first screen of almost every Learninator application sequence.

<subApp>

<type num=”1”>DisplayMultiImagesAndTextAsIntroduction</type>

<taxonomyType>Information</taxonomyType>

<statement X="10" Y="10" W="500" H="30"><![CDATA[<font size="16" color="#333333"><b>Insert Title Here<b></font>]]></statement>

<statement X="10" Y="40" W="500" H="330"><![CDATA[<font size="16" color="#333333"><b>Instructions:</b></font><font size="14" color="#333333">Following is information and questions relating to subject. For each question:<li>choose the correct answer </li><li>select submit to get feedback. </li>Note:<li>You can change your answer after selecting submit.</li></font>]]></statement>

<image src="images/01image.jpg" X="10" Y="100" alt="An image" LX="10" LY="10" LW="200" LH="25" LAlpha="50"><![CDATA[A label for the image 1]]></image>

</subApp>

In most cases, the Learninator application has been individually customised to perform specific tasks relevant to each topic in the Retail toolbox. If you want to edit more than one question and feedback text or images, it is advisable that you proceed only if you have the relevant trained technical personnel.

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

8

Page 12: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

Table 1: Customsisable elements

Element To CustomiseDescription Location

Toolbox index page

Formatted entirely in HTML, edit with Dreamweaver.

index.htm

Retailer home page

Formatted mostly in HTML, edit with Dreamweaver. Editing of the Flash interaction is explained above.

retailer.htm

Orientation text Most text in is standard HTML, browse to the location in the Toolbox, take note of the URL, and use that to find the appropriate file in the toolbox_12_06 directory.

Open the file in Dreamweaver (or a text editor) and make the changes.

\content\*.htm

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

9

Page 13: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

Flash interactions

Most of these interactions can be customised by anyone with basic Macromedia Flash design skills. However some are more complex, and require actionscript knowledge.

Some Flash interactions in this Toolbox are self contained, but most pull in external data from an XML file.

If there is an associated xml file it can be found inside the media/flash/xml folder and generally matches, or relates in name to the name of the Flash file. To customise the XML open in Dreamweaver or any basic text editor. The XML has been written in the hope that it is intuitive to use although some experimentation may be required. Experimenting with the XML will not damage the application but may make it not work as expected, always keep a back up of the original XML file.

To customise open the page in Dreamweaver and select the Flash object that you wish to change. Under the properties of the object, you will see a filename such as flashint.swf. You cannot change this directly, but must rebuild it from the source code.

Using Flash CS3 authoring software, browse to the source directory and locate a .fla file with the same name as the .swf.

This is the file you need to edit. Open it up inside Flash and look for comments in the actionscript attached to the first frame. These comments will point you in the right direction.

There are, in Flash, a few places where scripts will be stored, a script layer, a functions layer and an XML layer. Rarely has script been placed on actual buttons, look for scripts in the timeline first and then the buttons/movieclips.

\content\*.swf

\source\*.fla

\content\xml\*.xml

\images\*.jpg

The Teacher guide includes a ‘high-level’ overview of customisation. That guide refers to this one for further information. It is important that this cross-referencing is consistent. Do not accept what is written below – customise it to suit your product and make sure all references are relevant.

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

10

Page 14: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

Basic editingThere are numerous ways of editing the content of this Toolbox. The approach is similar to editing pages that might be found on any website.

The two simplest ways are:

1. Using a Web development package (MS FrontPage or Macromedia Dreamweaver).

2. Using a straight text editor (MS Notepad or your favourite text editor).

A basic understanding of HTML and the software package is useful.

Web development software package

Download the complete Toolbox contents onto your machine.

Identify the pages you would like to edit (these are displayed in the address bar at the top of the browser page when viewing).

Locate these files in the downloaded files, following the paths displayed in the browser.

Open each file in your web editing software package (i.e. MS FrontPage or Macromedia Dreamweaver) and make appropriate changes.

Save each file.

Check your edits in a web browser to see if it displays properly.

Text editor (i.e. MS Notepad)

Download complete Toolbox contents onto your machine.

Locate the file you wish to edit, following the paths displayed in the browser.

Open the file using a text editor (i.e. MS Notepad)

Make appropriate changes, following the CSS styles, some of which are:

o <h1> (Main Headings) larger blue font in caps

o <h2> (Sub headings) green fonts

o <p> (main content i.e. paragraphs) black text.

Save each file.

Check your edits in a web browser to see if it displays properly.

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

11

Page 15: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

Customising a Toolbox for single unit deliveryYou may only want to offer one or two units from the Toolbox, or limit access to certain units and/or streams.

To disable access to units, open the index.htm file in the root folder in Dreamweaver, and edit the link target for the unit you wish to disable to point to disabled.htm. Now when users click these buttons they will receive a pop-up message saying that this content is not available at this time. You can modify this message by changing disabled.htm.

If you want to distribute a smaller version by pruning the unnecessary content, you will need to follow the above process, and in addition delete the appropriate folders in the toolbox12_06 directory.

If choosing to use only one particular scenario you will need to make sure that the appropriate training sessions are available, or in fact disabled, by pointing the links to disabled.htm. It is also possible to remove the links entirely.

Each scenario is organised in the following folder naming convention:

01_intro

02_review (which is in fact the last item in the scenario menu after the activities)

03_on_the_floor (which sits at the very bottom of the menu after the training sessions

activity_01

activity_02

etc.

All individual scenarios and training sessions are self contained, meaning that all content is contained within the folder structure of the scenario or training session. If removing scenarios or training sessions from the Toolbox it is best to also take the shared folder as well and keep the scenario eg Taking it back inside the scenarios folder. This will help to make sure that all files such as styles and scripts are available and that the pages will display and function correctly.

You may wish to modify the index.htm inside the scenario folder or index.htm inside the training_centre folder to not show these missing units, or you may wish to create an entirely new one using the existing file as a reference.

Keeping to the standardsThis Toolbox has been developed in accordance with a number of internal conventions and international standards. These standards may be related to accessibility, cross-browser compatibility, or just to enable the easy location and customisation of content.

Keep this in mind when you are customising, as whatever you produce will need to be accessible, cross-browser compatible, and able to be further customised.

Try to ensure that any changes you make are conformant with the following standards.

W3C Priority One - Web Accessibility Initiative - http://www.w3.org/WAI/

XHTML 1.0 Transitional - http://www.w3.org/TR/xhtml1/

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

12

Page 16: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

CSS 2 - http://www.w3.org/TR/REC-CSS2/

Visual designThis Toolbox uses:

Cascading Style Sheets (CSS2) for visual layout and site structure

only relative font sizes, compatible with the user specified "text size" option have been specified.

If your browser or browsing device does not support style sheets at all, the content and menu structure of each page is still readable.

Global formatting with CSS

This Toolbox has been created with Cascading Style Sheets (CSS). This will enable you to make global changes to the look and feel of this Toolbox. If you don’t have a good understanding of HTML and at least a beginner’s level understanding of CSS you should get somebody with this knowledge to help you.

The main CSS file is located at styles\global.css there is also a print style this is located at styles\print.css

CSS style descriptions

Table 2: CSS style list

Style Name Font Size Description

body Arial 76% Main body font.

a Link not underlined.

a:hover Link underlined on hover.

ul, ol Padding and margins set to standardise display across browsers.

#header Style applies to all pages that contain a header.

#header #headerLinks

Global navigation style, sets the dimension for the global navigation container and background image.

#header div.gb_link

Sets the style for the individual link containers in the global navigation area.

#header div.gb_link a

Sets the style for the link inside the gb_link container and importantly the position of the link in relation to it’s parent container gb_link.

#header div.gb_link a:hover

Shows link as red when hovered over.

#logo Positions the Retailer logo in the header.

#container Container holds all navigation and content areas but not the header and global navigation.

#pageNav Navigation found on all scenario pages located on the left of the screen.

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

13

Page 17: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

Style Name Font Size Description

#pageNav a.scenarioLink

Link at very top of page navigation - Scenario home link.

#pageNav .seperator

Menu separator - image - blue lines above and below on the floor link.

#pageNav h3 Menu titles for training centre and the activities part of the menu.

#pageNav a General menu link style.

#activityLinks Used in conjunction with html tags to create styles that lead to links that are within the current scenario.

#trainingLinks Used in conjunction with html tags to create styles that lead to links to training session related to the current scenario.

#m_out_there a Style that relates only to the “on the floor” link contained in the page navigation

#content_two_col Describes the container for the scenario pages that incorporate an image on the right of the screen, generally this can be found on the scenario intro and the review page.

#content_one_col Describes the container for the scenario pages that contain no picture on the right of the screen. This is the majority of the pages that make up the scenarios.

#content_no_menu

Content for pages with no menus such as text alternative pages.

#rightcolumn Positioning of right column that hold the picture for the two column content layout.

.star_retailer, .safety_checker, .the_hub, .training

Describes the boxes or ‘important’ areas that contain extra information. These boxes are generally found at the bottom scenario or activity pages.

.newsagent, .boutique, .supermarket, .department, .training_selection

Styles used to create the boxes that can be found on the Scenario home page and the Training Room home page.

#footer Describes the dimensions of the footer found on all pages.

#flashcontent Used to position Flash applications on the page

#retailer_intro Used in conjunction with html tags to create the Toolbox homepage.

.clear This is an important style that forces a line break between elements. Particularly handy to use with <div> elements. Used mostly whenever boxes are visible on the page.

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

14

Page 18: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

Style Name Font Size Description

#container .enter Describes the Enter link on the index page of the Toolbox.

#footerlinks Describes the links located inside the footer. These links are only found on the index page and pages linked directly to the index page.

#training_room Describes the container that holds the content for the Training sessions (rooms).

.training_links, .training_nolink

Describes the global navigation style for the links found at the top of each training session these links look like tabs.

.training_nolink a, .training_nolink span

Makes sure that tabs in the training session still look the same even if the tabs are not links.

#training_room_content

Position of content in the training room - the large left pad is used to create room for the internal menu located in the content of the page.

#training_room_side_menu

Positions the internal training session navigation.

#training_room_side_menu ul

Style background of the unordered list with a barcode image.

#training_room_side_menu li

Give the list that houses the internal navigation links dimension.

#training_room_side_menu a

Position and style anchors so that they sit on top of the tag images, width and height set the hit area that reveals the 'tag' image padding sets the position of text.

#train_nav_top, #train_nav_middle, #train_nav_bottom

Provides a background image for the links of the training sessions.

#next_previous, #tr_next_previous

Used to position next and back buttons located at the top of some pages in scenarios or training sessions.

.image_and_text Class is used to create a box that places an image on the left and accompanying text on the right.

Other styles have been used, though they relate to the styles that are located above. For example in mentioning the style #container it should be assumed that html tags such as <a> <p> <table> <h1><h2> etc may also be named inside that container. The CSS for this site has been commented and is created generally in sections, therefore all styles that relate to the #container style can be found underneath the parent (#container) style.

The main CSS files are located at \shared\css\global.css

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

15

Page 19: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

There is a print style in the same folder, print.css – all styles are exactly the same as those contained in the global.css outlined above though menus and the headers are turned off as they are not needed in the printed version.

\shared\css\accordion.css applies only to styles that feature in an accordion type feature on the following page:

scenarios/will_i/activity_3/activity_3.htm

You can find out more about CSS at: http://www.htmlhelp.com/reference/css/.

NavigationThe navigation of the Toolbox uses Cascading Style Sheets (CSS) and HTML only. Therefore the links are easily editable using either the templates that have been supplied with the Toolbox or by setting the links manually.

In editing the navigation you will notice that the links appear inside list items <li>. Any new links should be created in the same way to keep design elements consistent and to make sure that it easy to navigate the page if CSS has been disabled.

It is possible to detach pages from the templates to help with navigation edits though think carefully about this as it should be a last resort. Detaching from templates will make it more difficult to maintain the links and link consistency.

File structureThe root folder has the following sub-folders:

shared which includes all scripts, styles etc that are used in the Toolbox - it must be on every CD-ROM or server copy of the Toolbox

source_files which contains Flash files and other files used in the construction of the Toolbox

templates contains all Dreamweaver templates used in the creation of this Toolbox

toolbox12_06 contains all of the Toolbox contento glossary

o images – at this level contains images that are used across the entire toolbox

o learning_map

o scenarios – contains all scenario folders which forms the majority of the content of the Toolbox

..(individual scenario folders) bit_sus

01_intro (example)

o Html pages

o images – all images that relate to the intro

o media – all media that relates to the intro flash

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

16

Page 20: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

xml audio

o text_version – all text alternatives that relate to the intro

images – contains images that are used across the all scenarios or on the scenario home page

o training_centre

communication (eg) 01_intro

o Html pages

o images – all images that relate to the intro

o media – all media that relates to the intro flash audio

o text_version – all text alternatives that relate to the intro

02_sub 03_sub 04_sub.

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

17

Page 21: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

AccessibilityThe site is compliant with W3C Web Content Accessibility Guidelines (WCAG 1.0), Priority 1 Checkpoints.

If you modify any Flash content, remember to modify the content in the alternative version as well. The alternative version to the flash file is located in the text_alternative folder. This folder is in the parent folder of the flash files html page.

Text equivalents of rich elements

All content images used in this site include descriptive ALT attributes. Complex images include inline descriptions to explain the significance of each image to non-visual readers. Purely decorative graphics include null ALT attributes.

Text alternatives to Flash movies are also provided. If you replace any image with another, it is important that you update the Alt tag.

Links

Title attributes have been used on links to describe the link in greater detail. If the text of the link already fully describes the target (such as the headline of an article), then the title attribute may be skipped.

Links have been written so users with screen-readers can make sense of them out of context.

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

18

Page 22: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

Technical supportTechnical support is available from the Toolbox Help Desk, which is detailed at the end of this section. However, before calling or emailing, please make sure that the answer you seek is not located elsewhere in this section, or available on the support pages at www.flexiblelearning.net.au/toolbox/support.

Installation on a web serverCopy the entire contents (except for autorun.inf, autorun.exe and the source_files directory) from the CD-ROM to the appropriate directory on your web server. If you are only copying selected units to your server or CD-ROM, you must make sure the entire shared folder is also copied.

There are no server side technologies utilised by this Toolbox, so no server configuration will be necessary.

Installing into a SCORM compliant LMSIf you wish to make content from this Toolbox available through your LMS, and your LMS is SCORM compliant, then you can install the relevant learning objects (LOs) by using the following process:

1. Browse to the Toolbox Repository at http://toolboxes.flexiblelearning.net.au/repository/index.htm.

2. Search on the name of this Toolbox, you will find a number of learning objects, each relating to a section of the Toolbox CD-ROM.

3. Download each object that you wish to place on your LMS. They will be delivered as IMS content packages, which look exactly like .zip files.

4. Follow the specific instructions for uploading these IMS content packages into your LMS.

Be aware that not every LMS is SCORM compliant, and that some claiming to be compliant cannot process IMS content packages so probably aren’t.

Please refer issues with the uploading of content to your LMS administrator, not the Toolbox Help Desk. The administrator or LMS vendor will contact us if necessary.

Producing CD-ROMs for distributionWhether producing one-off copies of CD-ROMs, or class sets, use the following procedure:

1. Start up your favourite CD-ROM burning software.

2. Select the data option (don’t simply copy the whole CD-ROM).

3. Drag and drop all files (except the source_files and template directories).

4. You may wish to delete the Teacher guide and Technical guide.

5. Burn.

Before you burn yourself a class set, it might be wise to test that the first one works as expected.

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

19

Page 23: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

Known issuesThe following are known technical issues that users may experience when using this Toolbox.

IIS 6.0 will not serve content of unknown MIME type. Pages display strangely on IE 5.5 due to incompatibilities with it’s

implementation of the CSS standard. Flash detection issues in WebCT. Lotus Notes based training environments don’t allow pop-ups. Issues with pop-up blocking by Windows XP SP2, and others (i.e. Google). Issues trying to use Dreamweaver templates inside FrontPage.

TroubleshootingIssues with pop-up blocking by Windows XP SP2, and others (i.e. Google).

1. In Internet Explorer click on Tools > Pop-up Blocker > Turn off Pop-up Blocker.

2. Use Mozilla Firefox that is free to download from http://en.www.mozilla.com/en/firefox/.

Flash content that doesn’t play:1. Check that the flash player installed on the computer is at least Flash Player

8 or later.

2. Make sure that the folder structure matches that which is on the CD-ROM.

CD does not autoplay:1. Autoplay has been disabled on the computer, turn this feature on.

2. Explore to the root directory of the Toolbox and double click the index.htm file.

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

20

Page 24: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

Frequently asked questions - FAQs1) How big should the images/swfs be when used in the correct sequence application?

I have used 150px by 150px although they can be smaller and of any shape. It is possible to place a gap between each picture, if using small sizes, in the XML file that comes with the app.

Other sizes for images inside applications are 100 by 100, 200 by 200 and 135 by 155 for thumbnails and the ‘What if?’ application.

2) Some of the applications are a bit small how would I make them to be bigger?

All of the applications are made using vector graphics in Flash therefore it is possible to resize the applications easily in the Flash application – or more easily, but fraught with a little danger, change the height and width attributes of the Flash application in the object tag on the actual page. The only draw back with this is when displaying jpegs etc they may look a little degraded.

3) What is the easiest way to change the menu’s as they aren’t done with JavaScript?

The easiest way to change the menus on the web pages is to use the Templates provided with the toolbox that work in conjunction with Dreamweaver. Each scenario has two templates a one column and a two column version make sure that all links in both templates match.

Unfortunately it was not possible to set up the Training Sessions in this way, the easiest way to update the links across one training session is to use the Find and Replace utility inside Dreamweaver or similar program.

4) Can I import WAV, WMA or any other sound file format that is not mp3 into the sound player?

No, they must be mp3.

5) What video file format can be imported into the video player?

It must be flv (Flash video). Applications such as Adobe Flash and Sorenson Squeeze among others can create Flash video. (Post your video on YouTube and download it again – flv!)

6) Which image types are supported by the Flash interactions?

At the moment all files in the flash interactions are likely to be jpegs though it is possible to use jpegs, gifs and swfs (flash files).

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

21

Page 25: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

The Toolbox Help DeskThe Toolbox Help Desk is here to help you with installing Toolboxes and solving technical issues and a single help desk call is all that is needed. However, before contacting the help desk, please assist us by following these steps:

Check if your question has already been answered in the Frequently Asked Questions (FAQs) section of the Toolbox website at http://toolboxes.flexiblelearning.net.au/support/index.htm.

Check the section relating to patches and fixes on the Toolbox website at http://toolboxes.flexiblelearning.net.au/support/patches.htm.

If you don’t find the assistance you need on these pages:

Email: [email protected]

Phone: 1300 736 710.

Please provide: o the Toolbox name and series number, eg: Retail Toolbox 12_06 o your name, phone number and email address o the problem you need help with.

The Flexible Learning Toolbox Help Desk will contact you as soon as possible.

ReferencesFrog, K. (1997) Being green, is easy after all, CD-ROM, London: Lilly Pad Publishing.

Lave, J. (1988) Cognition in Practice, Cambridge: Cambridge University Press.

W3C (1998). Cascading Style Sheets, level 2, http://www.w3.org/TR/REC-CSS2/.

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

22

Page 26: Teaching Guide Template - lrd.kangan.edu.aulrd.kangan.edu.au/retail_part2/toolbox12_06/shared/guid…  · Web viewTable 2: CSS style list 12 ... Microsoft® Word 97 or a similar

Technical guide: Retail Services Series 12 Flexible Learning Toolbox

Toolbox contact details:Flexible Learning Toolbox Help Desk

Phone: 1300 736 710Email: [email protected]

Website: flexiblelearning.net.au/toolbox

For more information contact:2007 Australian Flexible Learning Framework

National CommunicationPhone: (07) 3307 4700Fax: (07) 3259 4371

Email: [email protected] Website: flexiblelearning.net.au

GPO Box 1326Brisbane QLD 4001

Part of the Australian Flexible Learning Framework

© Commonwealth of Australia 2009 | Licensed under AEShareNet - S Licence Disclaimer and copyright

23