Center for eLearning

Online Course “Building Codes”

INTRODUCTION The purpose of this handbook is to provide guidelines for the production of online courses in CSU’s Learning Management System (LMS), Blackboard CE8, so that courses have a consistent look and feel and follow quality design standards. After reading through this guide, you should be able to:

• Describe the online course development process • “Read” a course sitemap to guide the development of the course in Blackboard CE8 • Add a banner to a course home page • Edit course folder headers and footers • Use an HTML template to create web pages for an online course • Take a marked-up document and create a learning module based on it • Embed mp3 files into web pages • Embed flash video files into web pages

Accompanying this handbook are four course template files:

1. Blank course banner 2. HTML Template 3. CSS file 4. PowerPoint slide template

THE ONLINE COURSE DEVELOPMENT PROCESS The design and development of an online course is a collaborative process. Instructional Designers and faculty members (or content experts) as they are sometimes called, work together to create learning goals and objectives, select instructional strategies and assessments, and plan out the organization of all instructional and supporting material. Multimedia developers then take these plans and content and build the course in the Learning Management System. Below is a list of deliverables that emerge from the online course development process that provide the foundation for building an online course. The Course Sitemap The course sitemap is put together by the instructional designer and approved by the content expert. This sitemap helps to ensure that course materials are organized and that both instructional and support content is included in the course. Below is an example of a course sitemap with the elements of the course shown in different colored blocks. After that is the translation of the sitemap into a course homepage in Blackboard CE8.

Sitemap Legend:

Figure 1: Example Course Sitemap

Folder Tool Link Module File

Course Homepage

Start Here! Course Information

Syllabus

Chat Room: Office Hours

Threaded Discussion:

Course Quations

Student Support

Is online learning for me?

Blackboard CE8 Help

Communicating Online

Tips for Success

CSU Resources

Course Modules

Module 1

Module 2

Module 3

Module 4

Module 5

Module 6

Module 7

Biography Assignment

Submit Biography Reference

Virtual Dinner Party Details

Biography Blog

Virtual Dinner Chat 1

Virtual Dinner Chat 2

Submit Biography

Culminating Projects

Submit Culminating

Project Choices

5 Lessons

Teaching Event

Aha! A Solution!

Peer Review of Projects

Resources

Hilda Taba Teaching Strategies

Asking good questions

Sample Lesson Plans

Figure 2: Course Homepage in Blackboard CE8

Course Table of Contents The table of contents for a course provides a more in-depth view of the course. Building on the course sitemap, it lists all of the content, including files, tools, links, etc., that will make up the course. For example, go back to the course sitemap above. You see that within the Course Modules folder, there will be seven course modules. Each of these modules will contain content which is not reflected on the course sitemap. Taken together, the course sitemap and the table of contents will give you all you need to see what will go into the development of the course. Below is an example section of a course sitemap. Shown is the section for one module. As you can see, it clearly spells out everything that will be included in the module – Headings, content, assignments, and discussions. Quizzes and assignment drop boxes can also be linked in learning modules.

Module 1: Course Orientation Element

Introduction HEADING

Learning Objectives Content file

Audio Introduction Content file

Audio Introduction Transcript Content file

Wiki Assignment HEADING

Purpose, Procedure, Assessment Content file

Wiki Question Wall Link

Class Introduction Discussion HEADING

Purpose, Procedure, Assessment Content file

Threaded Discussion Content link: Discussion

Student and Instructor Readiness Investigation HEADING

Purpose, Procedure, Assessment Content file

TOOLS: Student Self-Assessment Link

UCF Instructor Self-Assessment Link

Threaded Discussion Content link: Discussion

Conclusion & Further Reading HEADING

Concluding Thoughts (To be filled in at end of module) Content file

Dooley, Lindner, & Dooley (2005), Chapter 1 Content file or link to ECR*

Schrum & Hong (2002) Content file or link to ECR

Davies (2003) Content file or link to ECR

*ECR – Electronic Course Reserves

Figure 3: Example module table of contents

Course Content The course sitemap and the table of contents provides the structure of the course. With these in hand, you will be able to tell what goes where. Then, there is the course content itself. For some content, such as the standardized student support files, the content is already in its final form and only needs to be uploaded to its place in the course. Other course content will be provided to multimedia developers, marked-up and ready for production. Below is a snippet of a marked-up document containing content for the example table of contents shown above.

Figure 4: Example course content document marked-up

The areas highlighted in yellow show you what to do with the content. For example, the first line tells you the title of this module. When creating a learning module in Blackboard CE8, this is the title you will give. The second line indicates that a heading is needed and its label is “Introduction.” Next, you are told that an html file is needed and what it should be called. What follows is the content for that html page including a heading which should be placed between <h2></h2> tags. The area in red indicates that another multimedia component is needed in this module. An mp3 embedded in a web page should be included after the learning objectives file. Finally, another html page is included that contains the transcript of the audio introduction. Other CE8 tools like discussions and assignments can also be added to modules. Below is the mark-up for another section of a module that includes links to two websites and a threaded discussion.

Module Title: Module 1: Course Orientation Heading: Introduction HTML Page: learningobjectives.html H2 Learning Objectives: After completing this module, you will be able to:

list the requirements of the course access Blackboard CE 6 post content to the course wiki post a message to a threaded discussion board identify your strengths and weaknesses for eLearning discuss student and instructor competencies needed in the online learning environment

Audio to be recorded by instructor with Audacity. Get mp3, embed in web page with instructor photo, and place after the learning objectives in accordance with the module table of contents. This file will be called audiointro.html. HTML Page: introtranscript.html H2 Audio Introduction Transcript By now, you should have read through the syllabus and all of the information in the Course Information folder. Now, it's time to begin the course! In this orientation module, you will learn more about me and your classmates. You'll also be introduced to…

Figure 5: Example mark-up for module with content links

Heading: Student and Instructor Readiness Investigation HTML Page: readiness.html H2 Discussion Assignment Details H3 Purpose In this assignment, you will take two self-assessments, one for online students and one for online instructors, in order to help you find out if you are ready to be an online student and develop online instruction. Completing this activity will help you uncover the areas you will need to focus on most in this course. H3 Procedure Follow these steps to complete this assignment: 1. Complete the Test of Online Learning Success assessment for students and jot down your score and any thoughts

you have about them. 2. Complete the “Is online teaching right for me” assessment for instructors and jot down your score and any thoughts

you have about them. 3. Go to your small group threaded discussion and discuss the self-assessments and your results according to the

discussion description posted at the top. H3 Assessment This small group discussion is worth 10 points and will be assessed using the class discussion grading rubric. You are required to respond thoughtfully to other student posts. To be successful, you will need to log in and access the discussion more than once on different days. That is, plan on logging in at least three times during the module to participate in the discussion. Tool – Weblink Title: Test of Online Learning Success URL: http://csuohio.edu/elearning/readiness.html Tool – Weblink Title: UCF “Is online teaching right for me?” URL: http://teach.ucf.edu/begin/survey.html Tool – Discussion, Threaded Title: eLearning Readiness Discussion Description: Discussion Questions: Now that you've taken the two self-assessments, reflect on how you did. Are you ready to take an online class? Are you ready to develop and teach online? What are some of the areas, technical and academic, that you need to work on? Did you find anything by completing these self-assessments that affects what you want to get out of this course?

You will need to post answers to these questions as well as any other thoughts that come to you and respond to at least two other posts to receive all of the points. Follow the threaded discussion rubric as a guide.

As with the first example, mark-up for web pages are highlighted in yellow. In this part of the module, there are two tools used: Weblinks and Threaded Discussion. Everything you need to add instances of these two tools is given in the mark-up. For the Weblinks, you have a title and URL. For the Threaded Discussion, you have a title and description. Now that you have a good understanding of how the online course development process works, we will focus on getting content into CE8, and specific use of the online course development design templates. BEST PRACTICES FOR ORGANIZING COURSE CONTENT Using WebDAV to get course files into the File Manager in CE8 is the easiest way to ensure that course content stays organized. It is recommended that course content be first uploaded in File Manager and then built out into course folders, modules, etc. On your local machine, keep a folder for each course you are working on with sub-folders that correspond to the course sitemap. For example, for the course sitemap example shown in Figure 1, you would have the following folder structure on your machine:

Figure 6: Folder structure on local machine By connecting to the course using the WebDAV protocol, you can easily drag and drop the course content into CE8 so that the structure is kept intact. This will make the course content easy to find if updates are needed. To use WebDAV, in CE8, go to the Build Tab and click on File Manager in the Designer Tools Menu. Beside the File Manager title, you will find a gray drop-down menu. Click this menu to expand the options available. In Internet Explorer, you will see the options given in Figure 7. You can either choose the Open as Web Folder option or get the URL for the course site by choosing the option View WebDAV Info. If you choose the later (the only option available in Firefox), you will need to set up a connection to the course in Windows Explorer. Details on connecting to a course using the WebDAV protocol are found in the Blackboard Orientation Course for Designers.

Figure 7: Connecting to File Manager using WebDAV

After establishing a connection to a course, course folders and content can be dragged into File Manager. Then, you can build the folders and modules with the content. THE HTML TEMPLATE Accompanying this document is the HTML template used for web pages in online courses. There is also a CSS file that goes along with this template. The URL to the CSS file is: https://campusdrive.csuohio.edu/Users/2435384/ProductionTemplates/Green/green.css This style sheet is already linked to the html template. The CSS file determines the font face, size, and color. It also provides padding to the left side of the html file so that the text does not bump up directly beside the menu frame in CE8. The CSS file defines several headings for use in web pages. Adhere to the mark-up documents that determine which headings to use. Refrain from changing the font face or size manually in Dreamweaver or your preferred text editor. Let the CSS file define these attributes. THE COURSE COLORS A couple of changes should be made to the course colors so that they match the course banner and higher-level CSU banner. To change the colors of the course menu (found on the left-hand side), complete the steps below.

1. In the Designer Tools menu found below the course menu, click on the Manage Course link.

Figure 8: Manage Course link

2. Click on the link labeled Colors (third from top) 3. Under the Color Set column, select the option labeled Custom 4. Under the Course Tools menu, click on the icon that changes the menu background color and change it

to #08481d 5. Click on the icon that changes the menu text color and change it to #ffffff 6. Click the Apply button

Figure 9: Customizing the colors of the course menu

THE COURSE BANNER The standard course header is found in Figure 2 above. Accompanying this document is a header graphic in .png format with layers intact for the course title. To modify the header for a particular course, change the text according to Figure 6 below.

Figure 10: Modifiable area of course banner

After customizing the banner for a specific course, export it as a .gif file. Then, you will be ready to add it to the course home page. After uploading the course header to File Manager, follow these steps to add the banner to the course home page.

1. Open the course and go to the Build tab. 2. On the course home page, click the Page Options button and select Edit Header.

Figure 11: Edit Header

3. Either use the following html code, modified for the course you are working on, or click on the Edit

HTML creator button to add the graphic to the course home page. Make sure the header is centered on the page and contains content in the Alt attribute. <p align="center"><img border="0" alt="EGT 517" src="course_banner.gif" /></p>

CREATING THE COURSE STRUCTURE After customizing the course home page by adding the course banner, the next step is to create folders to hold course content. Refer to the course sitemap to find out what folders need to be added. For example, in Figure 1, you see that for this course, five folders are to be created directly from the course home page. Other folders need to be placed within a few of these folders. For example, the folder called Course Information contains another folder titled Student Support. In order to create these folders, you need to be located in the Build tab. From the course home page, click on the Create Folder button. Then, fill in the title of the folder and click the Save button. You will now see the folder on the course home page. By creating a folder, you are essentially creating another web page where you can put course content. Each of these folders, or pages, will need a title. To add a title to the page, follow these steps:

1. Click on the folder to go to that new page. 2. Click on the Page Options menu and select Edit Header (refer to Figure 9 above) 3. Enter the following code replacing the displayed text to reflect the page’s title (the text to be

customized is highlighted in yellow) <p align="center"><span style="font-size:16pt"><span style="font-family:Verdana"><strong>Course Information</strong></span></span></p>

4. Select the Use HTML option 5. Click the Save button

Figure 12: Adding header text for a folder/page titled Course Information

To finish creating the course structure, add all of the folders/pages and give each one a title using the code above so that each page has a consistent look.

BUILDING COURSE CONTENT So far, you’ve seen how to interpret online course development documents, how to use the web page template, and how to begin building the structure and look and feel of an online course in Blackboard CE8. If you follow the guidelines above and put content first into File Manager, the rest of course production entails merely linking these pieces of content to the locations they will reside in the course and creating instances of the interactive tools. Adding Content to Folders First, we will look at building a typical Course Information folder. Almost all courses will have a folder such as this that contains the course syllabus, course policies, places for students to ask general course questions, and student support information. Here are the steps to follow to put together such a folder:

1. Create a folder linked from the home page called Course Information 2. Create a heading for the folder/page with the text Course Information on it using the code given above 3. Copy over the content for this folder into File Manager mirroring the file structure on your local

machine 4. Add files and links to other tools

a. Add the syllabus:

The syllabus works a little differently from regular files. The course syllabus should be created using the HTML template and uploaded to the course site as usual. To associate this file with the Syllabus tool, in the Course Information folder, select Add Content link and then choose the Syllabus tool. Then, choose the Select File option and choose the syllabus file in the File Manager window that will pop up.

Figure 13: Select File for Syllabus

Figure 14: Finding the syllabus file in Class Files

b. Add content links to a chat office hours and a threaded discussion for general student questions: When you see (on a course sitemap) that a “Content Link” is needed, that is, a link to another CE8 tool, it’s best to go to the tool, create the instance of the tool, and then add it to the page. For example, on the sitemap in Figure 1, there are links to a chat room where virtual office hours will be kept and a threaded discussion for general course questions. You would first go to the chat tool and create the virtual office hours chat room. Then, go to the discussions tool and create a threaded discussion called “General Course Questions.” For discussions, it’s best to first create a category and then create a discussion for that category. This will keep the course content nice and organized. Finally, go back to the Course Information folder linked from the course home page and add links to the chat and threaded discussion by clicking on the Add Content Link button.

c. Add content to the Student Support folder: Click the folder to go into it and make sure that the folder has a header. Next, click on the button labeled Add File and then select Browse for Files. If you are following best practices, the files will already be found in the Class Files area in a folder labeled StudentSupport. Add these files to the folder.

There may be other folders in the course containing content for extra resources or final or culminating projects. You would populate these folders in the same manner given above. Adding Content to Learning Modules A course could have anywhere between 6-16 learning modules. A learning module provides a guided path through course content, usually in a topical manner, and contains objectives, guides, lectures and lecture notes, readings, and various student activities such as discussions, quizzes, and assignments. Adding content to a learning module is similar to adding content to a folder, the learning module will merely have a slightly different interface. Below are the steps to creating a learning module based on the module table of contents and example marked-up document given above.

1. Go to the Learning Modules tool in the course menu. 2. Click on the button labeled Create Learning Module. 3. Give the module a title based on the marked-up document. 4. Click the Save button. (Keep all other options as they are by default. You want the Table of Contents to

be displayed on the left and you want the first page in the module displayed

Figure 15: Creating a course module screen

You will now see the module listed on the Learning Modules page. To add content to the module, you click to go into it like you would with a folder. On the page, you will see the buttons found in Figure 16.

Figure 16: Buttons for adding content to a Learning Module

The content should already be uploaded to File Manager in a folder labeled Module1 and instances of the other tools should already be created. Now, all you have to do is assemble the module according to the module table of contents. If you were creating the module based on the table of contents shown in Figure 3, you see that you need to create a heading labeled “Introduction,” and you need to add three files under that heading: learningobjectives.html; audiointro.html (with the mp3 embedded in it); introtranscript.html. To add these files to the learning module, click on the Add File button and choose Browse for Files. Find these files in the appropriate folder in Class Files. Later on in the module is a section with the heading “Student and Instructor Readiness Investigation.” If you were building this module, you would create the heading, add the file introducing the activity, and add Content Links to two Weblinks and a threaded discussion. Again, these should have already been created in the Weblinks and Discussion tools. To add them to the module, click on the Add Content Link button.

Figure 17: A Learning Module with content added

The titles of each line of content should match what is given in the module table of contents document. When creating web pages, be sure to put that text between the <title></title> tags. This way, the title will be displayed automatically. Also, the title for all Content Links (the other tools in CE8), will be the ones displayed in the module’s table of contents. Other files such as PDF and MS office documents will take on the filename. To change the title that is displayed in the modules table of contents, click on the button labeled Edit Link Titles (last button on the right in Figure 17). Here, you will be able to change the titles that are displayed. In order to align the content properly so that the right pieces of content are found underneath the right headings, you will use the indent and outdent buttons at the bottom of the page. Select the file you want to indent under a heading and click the Indent button.

Figure 18: Outdent and Indent button

MULTIMEDIA CONTENT This section covers best practices for integrating instructor-created audio files and video files into courses in CE8. Instructors may also include recorded lectures into their online courses produced themselves using a program like Camtasia or Captivate or those recorded by the Center for eLearning with the MediaSite service. For lectures recorded using MediaSite, be sure to put the instructor’s content in the PowerPoint template.

Delivering mp3 Files Sometimes an instructor wants to include an audio file into an online course as a way to introduce herself to the class or to introduce a topic in a learning module. Though mp3 files can be uploaded to CE8 and added to folders and learning modules like any other file, delivering the mp3 file through a flash player on a web page provides better access to the file. To deliver mp3 files, follow these steps:

1. Open the html template and add the heading. 2. If you have a picture of the instructor, add it to the page. 3. Paste the following code into the page:

<script language="JavaScript" src="audio-player.js"></script> <object type="application/x-shockwave-flash" data="player.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="player.swf"> <param name="FlashVars" value="playerID=1&bg=0xf8f8f8& leftbg=0xeeeeee&lefticon=0x666666&rightbg=0xcccccc& rightbghover=0x999999&righticon=0x666666&righticonhover=0xffffff& text=0x666666&slider=0x666666&track=0xFFFFFF&border=0x666666& loader=0x9FFFB8&loop=no&autostart=no&soundFile=filename.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>

4. Change the src="audio-player.js", data=player.swf, and soundFile=filename.mp3" to the paths on the CE8 server. For example, if you create a folder in CE8 called “audio,” the path to the audio-player.js file will be “audio/audio-player.js”. The audio-player.js and player.swf files are found in the audio folder on the networked drive where this document is kept.

5. Upload all files to CE8 and test. Your file should look similar to the screenshot in Figure 19.

Figure 19: Delivery of mp3 on a web page in CE8

Delivering Flash Video Video that is in VHS or DVD format will need to be put into .flv format. This document does not provide details on how to do this. What follows are the parameters for the video to be delivered in CE8. The .flv file should conform to the following approximate sizes: Standard:

Width: 512 Height: 384

Widescreen: Width: 520 Height: 288 To place the .flv file into a web page using Dreamweaver, complete the following steps:

1. Open the html template in dreamweaver. 2. Add the title of the video between the <h2></h2> tags. 3. Go to Insert Media Flash video

Figure 20: Inserting Flash Video in Dreamweaver

4. On the Insert Flash Video screen that pops up, enter the following:

a. Progressive Video (unless the video will be located on the Flash video server) b. URL (click browse and find the .flv file) c. Skin: select Halo 3 d. Size (click Detect Size and it will be filled in automatically)

Figure 21: Insert Flash Video screen in Dreamweaver

5. Click the OK button.

Posting the Video Webpages to the Academic Server

We have an account for videos on the academic server. All files and folders generated with the webpage must be posted to the server as well as the video file. If the course has more than one video, and you choose the same skin (Halo 3), you will only need to upload the extra files generated by Dreamweaver once. That is, for subsequent videos, you would only need to upload the .flv and .html files. Upload these to: http://academic.csuohio.edu/video/FACULTYNAME/FILENAME.html

See Pete, Karol, or Betzi if you need the username and password for this account.

To add the video to a folder or module, just add the link to the video file using the Weblinks tool in CE8 and then add it to the folder or module as you would any other link.