1 / 56

Using CTools and Dreamweaver to Create and Host an Online Learning Course

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. Online Course: Medical Therapeutics Overview & Demo Why CTools? Site Organization

amena-hardy
Download Presentation

Using CTools and Dreamweaver to Create and Host an Online Learning Course

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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

  2. Online Course: Medical Therapeutics Overview & Demo Why CTools? Site Organization Building the Course Dreamweaver, HTML, CSS, Javascript Video Production Resources Tracking Summary Today’s Topics

  3. Cary Engleberg, M.D. M4 TherapeuticsPilot 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)

  4. 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).

  5. 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)

  6. 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

  7. M4 Therapeutics Demo

  8. 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. Structure of the HTML Content

  9. Workin’ off the hard drive(root directory)

  10. Workin’ off the hard drive(root directory)

  11. The View from Dreamweaver

  12. Moving from the Hard Drive to CTools The Directory on the Hard Drive

  13. CTools = Web Server

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

  15. Paste the URL

  16. Moving from the Hard Drive to Ctoolswith Dreamweaver The Directory in Dreamweaver

  17. 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

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

  19. 1) Choose Remote Info 2) Select “WebDav 3) Past the URL from cTools 4) Enter your Uniqename and Kerberos Password

  20. You can now move your local files to the cTools server with ease.

  21. Using Frames

  22. Frames covertop questions feedback topic_frameset.html

  23. casetext.htm

  24. covertop questions feedback Using Dreamweaver to set the Link & Target

  25. 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

  26. 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

  27. Working with Content

  28. 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

  29. CSS Example

  30. Attaching a Style

  31. 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

  32. windowOpen()

  33. New Window url: ../../../../refs/more_infections/herpersvirus/index.htm winName: herperesvirus Features: width=400, height=573

  34. feedback.htm casetext.htm Clearing the Response Frame

  35. 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

  36. 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)

  37. Creating Feedback for the Quiz Creating Feedback for the Quiz

  38. Editing Faculty Discussion Editing Faculty Discussion

  39. 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

  40. When don’t we use Flash? • Quiz feedback • Streaming server • Students can’t copy files • Security

  41. Some tech specs about Flash • Three files for each video • Placed in a standard web page

More Related