Using CTools and Dreamweaver to Create and Host an Online

Learning Course

Chris Chapman

Media Services Manager

N. Cary Engleberg, M.D.

Professor, Internal Medicine

University of Michigan Medical School

Today’s Topics• Online Course: Medical

Therapeutics– Overview & Demo

• Why CTools?• Site Organization• Building the Course

– Dreamweaver, HTML, CSS, Javascript

• Video Production• Resources Tracking• Summary

• Cary Engleberg, M.D.– Course Director/Producer– 25 Faculty Contributors– LRC Media Development Team

• 4 members/varying degrees of contribution/time

• Two Pilot Classes in 2007– January (31 Students)– February (19 Students)

• Created– August 2006 - February 2007

• Requirement for all (170) M4 Students– 2007-2008 (5 offerings)

M4 TherapeuticsPilot Classes

Cary Engleberg, M.D.

M4 TherapeuticsCourse Structure

• Weekly set of topic-oriented cases and related on-line material for review.– Respiratory, Pain, Geriatrics, Transfusion, etc.

• Three seminars (during the first three weeks of the course) to review and discuss recent scientific contributions to the field.– In “class” or via Adobe Connect (fall 2007)

• Individual student project (submitted on-line).• Weekly quizzes (open-book, online).

Principles of the On-line Course

• Students are free to explore topics to the depth of their interest and understanding.– More material than they can go through

• The format is case-based and simulates clinic-based learning.

• There is a general curriculum but no set of “facts” to master or memorize.

• Evaluations test process, not memorization of facts.– Timed, online, “open-book” (open web)

Why CTools?

• Faculty wanted to be involved in the creation and management of the site

• Multiple staff members also needed access• Solution: CTools

– CTools acts as web server– Easy access control (roles for faculty, staff, students)– WebDav & file upload/replace (work on the site from almost

anywhere)– Plenty of file space– Tools (Assignments, Drop Boxes, Announcements, etc.)– Utilization tracking and reporting– Reliable, Stable, Robust– Students use CTools in other coursework

M4 Therapeutics Demo

Structure of the HTML Content

• Root Folder– commentary– course_intro– course_topics_refs– credits– css– printout– weekly_article_downloads

• Work off of the hard drive• Copy to CTools• Could run off of a CD, Flash

Drive, Web Server, etc.

Workin’ off the hard drive(root directory)

Workin’ off the hard drive(root directory)

The View from Dreamweaver

Moving from the Hard Drive to CTools

The Directory on the Hard Drive

CTools = Web Server

https://ctools.umich.edu/access/content/group/299b3048-89bf-4d07-0027-4baa5710b2ff/course_intro/index.htm

Paste the URL

Moving from the Hard Drive to Ctoolswith Dreamweaver

The Directory in Dreamweaver

Setting-up Dreamweaver to Post Files to cTools

From the cTools Resource FolderClick on the Upload-Downlod MultipleResources link.

Copy the WebDav URL

Create a new Site in Dreamweaver.Set the Site Name and point the Local Root Folder on your hard drive.

1) Choose Remote Info2) Select “WebDav

3) Past the URL from cTools

4) Enter your Uniqename and Kerberos Password

You can now move your local files to the cTools serverwith ease.

Using Frames

Framescovertop

questions feedback

topic_frameset.html

casetext.htm

Using Dreamweaver to set the Link & Target

covertop

questions feedback

Building a Topic(typical workflow)

• Cary identifies a topic and cases• Cary obtains basic case material from fellow faculty members• Cary writes cases• Cary obtains reference materials from other faculty members or by research• Cary gives materials to LRC staff

– Cases in word document– Reference materials as files

• LRC programs cases– Copy and paste from documents to Dreamweaver “templates”

• LRC builds reference menus• Cary identifies faculty member for video feedback• Cary gives case materials to faculty member to review• LRC/Cary video faculty member• Cary edits video• LRC converts to Flash• Flash is linked to cases• Materials posted to CTools• Topics are linked to the weekly menu in CTools• Weekly materials opened up and announced

Dreamweaver Specifics

• Cases are written by the content expert in a word processing program

• Designer converts file into a text file to remove special characters

• Designer cuts and pastes from the text file to the Dreamweaver file

• CSS is used to maintain consistency

• Custom design can be used when desired

Working with Content

About CSS

• Cascading Style Sheets

• Use Dreamweaver to create “styles”

• For instance, you want your “content” to be 12 pt. Verdana

• Create a style sheet in Dreamweaver

• Create a “content” style in Dreamweaver in the style sheet

• When working with your documents, link (attatch) the style sheet and the style

• Changes can then be made globally

• Change the style sheet and all the text changes

• Not difficult, just takes planning

CSS Example

Attaching a Style

Did I Mention JavaScript?

• Two functions used in the program

• window.open()– Used to open popups (cases, references,

syllabus, etc.)

• function clearFeedbackFrame()– onload="clearFeedbackFrame()“– Clears out the feedback each time a new case

is loaded

windowOpen()

New Windowurl: ../../../../refs/more_infections/herpersvirus/index.htmwinName: herperesvirusFeatures: width=400, height=573

Clearing the Response Frame

casetext.htm

feedback.htm

Video Production

• Involve lots of faculty– Video– Documentary style– Set up and shoot– Have physicians do what they do– Look over the case, comment– Wanted their input without having them have to spend

a lot of time preparing– Natural, something you don’t get out of a book– Curbside consult

Video Production

• Record right to an MacBook• iSight or Camera/Mic (tape

backup)• Have fun

(fun=energy=motivation)• Dr. Engleberg edits with iMovie• Producer adjusts sound levels,

converts to Flash• Programmer uploads and links• Quick turnaround time (just in

time production)

Creating Feedback for the QuizCreating Feedback for the Quiz

Editing Faculty DiscussionEditing Faculty Discussion

Why did we pick Flash for the Video?

• Works on most browsers• Works on Mac and PC• Eliminates the need (mostly) plug-ins• Works in “restricted” sites• Don’t need a special server• Works in CTools• Reliable• Progressive download - will work on most

connections

When don’t we use Flash?

• Quiz feedback

• Streaming server

• Students can’t copy files

• Security

Some tech specs about Flash

• Three files for each video

• Placed in a standard web page

Utilization Tracking

• Each time a URL is hit, the hit is recorded

• CTools gave us raw data

• We analyzed the data manually

• New tool is available from google

CTools -- I said it was easy!Easy is relative!

• Need to know basic html• How to set up a basic web site• A little CSS• A little javascript (or have access to a

consultant)• You don’t have to be a web programmer!• But you need some skills!• Dreamweaver is a plus!• Lot’s of cut and paste :(

So, what’s the advantage?

• You can customized the look of your site• You can have control• Yes, it takes skilled people• Maybe not engineers• But skilled people• And skilled people can

– Contribute– Collaborate– Create– Customize

In other words…

• It’s not the mindless dummy solution• There is a middle man• Or middle people (more than one)• The faculty may need help…• But maybe that is good!• Multimedia is a collaborative technology!• A collaborative art!• A collaborative science!

Like Barbara Streisand sang:

• “People who need people are the luckiest people in the world”

• And we have these people on campus and in the workplace

• They are the creative technicians and designers that pull it all together

• Instructional designers, graphic artists, videographers, ….

• Design, craftmanship, the little things--these will be the differentiators

• “People who need people are the luckiest people in the world”

Thank You!

Chris Chapman

chapmanc@umich.edu