Transcript Using CTools and Dreamweaver to Create and Host an Online

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
M4 Therapeutics
Pilot Classes
• 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)
Cary Engleberg, M.D.
M4 Therapeutics
Course 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 clinicbased 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-00274baa5710b2ff/course_intro/index.htm
Paste the URL
Moving from the Hard Drive to Ctools
with Dreamweaver
The Directory in Dreamweaver
Setting-up Dreamweaver to
Post Files to cTools
From the cTools Resource Folder
Click on the Upload-Downlod Multiple
Resources 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 Info
2) 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 server
with ease.
Using Frames
Frames
covertop
questions
topic_frameset.html
feedback
casetext.htm
covertop
questions
feedback
Using Dreamweaver to set the Link & Target
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
–
–
•
LRC programs cases
–
•
•
•
•
•
•
•
•
•
•
Cases in word document
Reference materials as files
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 Window
url: ../../../../refs/more_infections/herpersvirus/index.htm
winName: herperesvirus
Features: width=400, height=573
Clearing the Response Frame
feedback.htm
casetext.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 Quiz
Editing 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
[email protected]