Technical documentation - intranet.yorksj.ac.uk€¦ · Web viewDestinations® technical documentation v.3.0. A guide to install and maintain the Destinations® website. Contents

Centre for Careers Management Skills

Destinations® technical documentation v.3.0

A guide to install and maintain the Destinations® website

©University of Reading 2023 Saturday, 27 May 2023 Page 1

Centre for Career Management Skills

Destinations® technical documentation v2.0

ContentsDestinations® technical documentation v.3.0..................1

Contents........................................................................2

Supporting material........................................................5

Installation.....................................................................6Installing Destinations® for the first time..............................................6

Upgrading from Destinations® v1 to v3................................................6

New material for V3.0............................................................................7

Localise Destinations®...................................................8Required changes for pages...................................................................8

Required changes to includes................................................................8

Required changes to video library.........................................................8

Required changes to images..................................................................8

Support..........................................................................8Google group..........................................................................................9

Configuring your server for FLV files..............................10

Standards.....................................................................11

Structure......................................................................12Site structure........................................................................................12

File structure........................................................................................14

Subjects.......................................................................15

File naming...................................................................16Topics...................................................................................................16

Units.....................................................................................................16

©University of Reading 2023 Page 2


Objects.................................................................................................17

Resources.............................................................................................17

Subjects................................................................................................17

Downloads............................................................................................17

Content images....................................................................................17

Flash files.............................................................................................18

Video....................................................................................................18

Local ID filenames................................................................................18

Multimedia ..................................................................19Video ...................................................................................................19

Flash activities ....................................................................................19

Style sheets..................................................................20

Templates....................................................................21

Code snippets...............................................................22Activities...............................................................................................22

Did you know?......................................................................................22

Example...............................................................................................23

Further information / References tabs.................................................23

Reveal / Hide........................................................................................25

Quote...................................................................................................25

Ticks and crosses.................................................................................26

‘How to’ guides.............................................................27Accessing templates............................................................................28

Create a topic introduction...................................................................28

Create a unit introduction ...................................................................30

Create an object ..................................................................................31

Insert a video into an object.................................................................33



Add new clips to the video library........................................................37


Supporting materialThis guide makes reference to a number of other sources which can be found on the within the 'Staff' area within the site templates topic breakdown (the units which belong to a topic and the objects which belong

to a unit) topic navigation (a list of topics and their corresponding navigation includes) subject breakdown (a list of optional subject specific material) download log (where and what downloads are used) interactive exercise log (quizzes and other interactives)

InstallationInstalling Destinations® for the first timeFollow the directions below to install Destinations® V3.0 on to your web server. If you are upgrading from an earlier version please refer to the upgrade instructions that follow this section.

The DVD provided by CCMS contains the following: o A ‘destinations’ folder o An ‘upgrade’ folder o A ‘Read Me’ file

The ‘Read Me’ file repeats this installation chapter The ‘upgrade’ folder is only relevant if upgrading from v1 and onwards of

Destinations®; if installing for the first time please disregard this folder The ‘destinationsV3’ folder contains a copy of the website To set up the Destinations® website copy the contents of the ‘destinationsV3’

folder to a virtual directory on your web server. The following points should be noted:

The default home page for the site is index.shtml (the file is located in the root of the directory)

Your web server must be set up to process server side includes o Destinations® uses .shtml files to serve includes o Includes use the file extension .htm o Includes are processed via 

(if this does not work with your setup you may need to change, via a global edit, virtual to  replacing NAV FILENAME with

the topic navigation include Enter the unit title within the <h1> tags Edit <! -- #include file=“objects/OBJECT FILENAME” --> replacing OBJECT FILENAME

with the required object file name Save the housing unit to the ‘units’ folder using the appropriate file name

(see file naming)

Update the appropriate navigation include with object name and housing unit file name

Visit the page on site to check it is working correctly

Insert a video into an objectTo insert a video into an object you will need to: edit the clip to the required length encode the clip to the FLV format save the file using the appropriate file naming structure insert the video code where you want the video to appear edit the code to reflect the clip information

For video to work, a number of JavaScript files have to be referenced in the head of the web page. All current web pages, including the templates, include these references.

Editing video Edit the required video clip for use on Destinations®, ideally keeping the

video clips short, i.e. less than one minute Videos should follow the dimensions below:

o 188 (height)o 250 (width)

Encoding and saving video Once the clip has been edited it should then be encoded to the streaming

flash FLV format Save the video to the ‘video’ folder on the web server using the appropriate

file naming protocol (see file naming)FLV is the format used within Destinations®. However, if an alternative streaming server is to be used, encode the video to your format from the provided MPEGs. Please note that the video console used for Destinations® will only work with FLV files. An alternative playback console should be used for other streaming formats. The rest of this guide will assume that the video is to be delivered using the FLV format.

Inserting the video into the object The code from Snippet 1 needs to be in the head of the housing unit and it is

already included in all of the templates

Snippet 1:

<script type="text/javascript" src="../scripts/ufo.js"></script>

Paste code Snippet 2 into the object where video should appear

Snippet 2:

<div class="video">

<span class="imgCenter" id="player">You need <a href="../html/players.shtml" title=”Video clip”>Flash Player</a> 8 or above to watch this video.<br />You will also need JavaScript enabled in your browser.<br /> </span>

<script type="text/javascript">

//<![CDATA[

var FO = {

movie:"../video/flvplayer.swf",width:"250",height:"207",majorversion:"8",build:"0",bgcolor:"#FFFFFF",

flashvars:"file=rtmp://readinguni-fcs.fs-server.com/videosource&id=r1412&image=../video/stills/reader.jpg&logo=../video/logo.png&showdigits=true&bufferlength=(10)&displayheight=188&showicons=true&overstretch=none&volume=50" };

UFO.create(FO,"player");

//]]>

</script>

<span class="strong">R1412: Pippi Reader</span><br />

Fund-raising Officer for the charity<br />United Response<br />

<a href="../video/r1412-t.html" title="Click to read the transcript for R1412">Transcript</a> | <a href="../video/r1412.html" title="View a larger clip of R1412">Larger view</a>

</div>

Elements to be edited are indicated in red and include:o Class = choose the alignment of the video:

video = centre videoRight = right videoLeft = left

o Location of streaming server or local web servero File name of clip, do not include the file extension – e.g.. r1412 OR

combine the two to provide the local web server and file name – e.g. ../video/r1412

o File name for thumbnail of person in clip – e.g. ../video/stills/reader.jpgo Buffer length = the amount (in seconds) of a clip that will be loaded

before the clip starts to play. Increase for progressive downloado Information about the person in the clip, contains: the clip number, the

name of the interviewee, and their role

o The file name of the web page with the transcripto The file name of the web page with the larger view of the clip

Creating a larger view web page Video embedded within the site has the option to view the clip in a larger

format (except playlists which only link to the transcript) Open the template ‘video-large-template’ and customise as above, saving

the file to the ‘video’ folder with the same name as the video clip, e.g. r4114.html

Creating a transcript page Open the ‘video-transcript-template’ Insert the transcript text within the appropriate place as indicated within the

template Change the image to the thumbnail of the interviewee Save the file as above, but adding a hyphen and ‘t’ to the end e.g. r4114-t.html

Creating a playlist Paste code Snippet 3 into an object where video should appearSnippet 3:

<div class="video">

<span class="imgCenter" id="player">You need <a href="../html/players.shtml">Flash Player</a> 8 or above to watch this video.<br />You will also need JavaScript enabled in your browser.<br /> </span>

<script type="text/javascript">

//<![CDATA[

var FU = { movie:"../video/flvplayer.swf",width:"250",height:"400",majorversion:"7",build:"0",bgcolor:"#FFFFFF",

flashvars:"file=vid-info-0190.xml&displayheight=188&repeat=true&lightcolor=0x800000&logo=../video/logo.png&bufferlength=(10)&backcolor=0xFFFFFF&frontcolor=0x000000&thumbsinplaylist=true&overstretch=none&volume=75" };

UFO.create(FU,"player");

//]]>

</script>

</div>

change the end of the file name (in red) to match the object name, e.g. vid-info-0230.xml

create an XML file by opening the xml-playlist-template file within the ‘templates’ folder

edit the XML file for the clips. Snippet 4 shows the entry for a clip

Snippet 4:

<track>

<title> R0309 </title>

<creator>Phiroze Vasunia</creator>

<image>../video/stills/vasunia.jpg</image>

<info>../video/r0309-t.html</info>

<location>The location of the file</location>

<identifier>R0309</identifier>

</track>

You will need to edit the items in red, which are:o Title = the file name/identifiero Creator = intervieweeo Image = the thumbnail file nameo Info = the path and file name of the transcripto Location = web or streaming server patho Identifier = clip number

Add new clips to the video libraryThe video library is powered by XML. This means if you create new clips you can include them in the library by editing the XML. There are two ways to add a new clip:3. Directly edit the XML file videos.xml4. Also available is an Excel file, called videos.xls, which can export to XML

o This is more complex and requires xmlmap.xml

Editing the XMLVideos.xml has this code at the start:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<videos xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

And this code at the end (note the s, do not confuse this “videos” field with the “video” field used for clips below) :

</videos>

Everything in between these two pieces of code are video clips. The following is an example of a clip:

<video url="../units/unit-cv044.shtml" topic="CVs">

<title>R0214</title>

<interviewed>Darby, Kate</interviewed>

<role>Manager, Knowledge Transfer Centre</role>

<employer>University of Reading</employer>

<description><![CDATA[Kate Darby, Manager, Knowledge Transfer Centre, University of Reading, talking about the importance of researching companies and making targeted job applications and preparing for interviews.]]></description>

<category>CVs and applications</category>

<keyword>CVs, interviews, targeting applications / research</keyword>

<student>N</student>

<clipno>https://www.reading.ac.uk/destinations-test/video/flv/R0214.flv</clipno>

<transcript>https://www.reading.ac.uk/destinations-test/video/transcript/R0214.pdf</transcript>

<photo photo="../video/stills/darby.jpg"/>

</video>

To add a new clip you simply need to paste the code above after an existing </video> but before the final </videos>. Then you can edit it.

XML field descriptionsFortunately with XML we can have meaningful field names for our data, which makes editing much easier.

<video url="EDIT" topic="EDIT">

o If the clip is used in a Topic url can be used to provide a link to the page. The Topic field would contain the name of the Topic.

<title>

o This is the unique identifier of the clip, e.g. R1234.

<interviewed>

o The name of the person interviewed.

<role>

o The job title of the person interviewed.

<employer>

o The interviewee’s employer.

<description><![CDATA[EDIT]]></description>

o A description of the clips contents. The description should go in between the CDATA square brackets above, in place of the highlighted EDIT.

<category>

o A primary category assigned to the clip. A list of the current categories are included in the videos.xls excel file. A new category can be assigned. The video library will accommodate 20 categories, 14 of which are currently used. So a further 6 categories are available.

<keyword>

o Keywords help narrow searches in the library. A list of the keywords currently used is included in the videos.xls.

<student>

o If the interviewee is a student enter “Y”. If not then enter “N”.

<clipno>

o The file path to the video clip.

<transcript>

o The file path to the transcript.

<photo photo="EDIT"/>

o The file path to the thumbnail of the person interviewed.

Using the Excel fileInstead of the XML file you can edit the Excel document. The editing is simpler than the XML, but the export process is more complex.

Within Excel, from the file menu choose DATA – XML – EXPORT The XML file xmlmap.xml will need to be in the same folder as the excel

document Save the XML output

Using a text editor with find and replace – we recommend you do not use Word – make the following edits to the XML file:

You will need to add <![CDATA[ after every instance of <description> and ]]> after the description but before the </description> field

For <clipno> and <transcript> the absolute route to the clips and transcripts need to be added, replacing the two dots in the ../video

o e.g. ../video/flv/R1234.flv becomes https://www.reading.ac.uk/destinations-test/video/flv/R1234.flv

Once the alterations are made the XML file can be used by the library.

Whichever method you use – XML or Excel – we recommend that you stick to just the one or update both files each time you make a change to one.

Documents

Technical documentation - intranet.yorksj.ac.uk€¦ · Web viewDestinations® technical documentation v.3.0. A guide to install and maintain the Destinations® website. Contents