EDER 677 Telecommunications in Education World Wide Web Tools and Design Principles

1
EDER 677 Telecommunications in Education-World
Wide Web - Tools and Design Principles-

• Norm Vaughan

2
Goals of this Session

• Housekeeping items
• Discussion about the graduate student portfolio
  assignment
• Overview of export tools, web editors and course
  development tools
• Principles of screen design activity

3
Housekeeping Items

• WebCT Site
• New resources
• Broken links

4
Student Portfolio Assignment

• Your student portfolio should include
• i) information about you and your graduate study
  interests
• ii) a section on this course (e.g. links to your
  CMC discussion summary, your final project and
  any related resources and papers)
• iii) links to other graduate courses that you are
  involved in
• iv) designer determined background
• v) a layout and navigation structure which
  complements and/or enhances your web site
• vi) one or more images
• vii) First review February 14th, Final Review
  March 28th

5
Web Editors and Course Development Tools

• Key Concepts
• FTP Access
• Export Tools
• Web Editors
• Courseware Development Environments

6
FTP Access

• FTP Tools
• PC Computers
• WS_FTP Download Site
• http//www2.mtroyal.ab.ca/506LE.exe
• WS_FTP Tutorial
• http//www2.mtroyal.ab.ca/ftp/
• Apple Computers
• Fetch Softworks
• http//fetchsoftworks.com/

7
U of C - FTP Access

• FTP Information for WS_FTP, WebSling, Fetch
• Host Name ftp.acs.ucalgary.ca
• Host Type username
• UserID aix account (same as WebCT access)
• Password - aix account (same as WebCT access)
• Account (leave blank)
• If you are using IE the path will be
• ftp//username_at_ftp.acs.ucalgary.ca
• If you are using Netscape
• ftp//username_at_ftp.acs.ucalgary.ca/u/username

8
U of C Web Site Address

• http//www.ucalgary.ca/aixusername/
• Tips
• Be sure to copy files into your public_html
  folder
• Use of an index.htm file
• File names on the web are case sensitive and do
  not accept spaces
• Remember that graphic images (.gif, .jpg) are
  linked not embedded in your html pages they
  need to also be ftpd to the server
• For permissions and other info refer to the
  following site
• http//www.ucalgary.ca/it/web/personal.html

9
Export Tools

• HTML Export Tools - Issues
• Examples - MS Word, MS Excel, Adobe Pagemaker
• Because of the nature of HTML, many of the Export
  tools will produce pages with very inelegant HTML
  code. Sometimes they produce code that is not
  compatible across browsers.
• Export tools are useful in allowing a user to
  re-purpose existing material onto the web. They
  arent necessarily the right tool to use when
  building a web page from scratch.
• While the exports are getting better, there will
  probably always be a market for web editors,
  tools designed specifically to author web pages.

10
Export Tools

• HTML Export Tools
• Microsoft Word
• http//www.microsoft.com/
• Corel WordPerfect
• http//www.corel.com/products/
• Adobe PageMaker
• http//www.adobe.com/prodindex/pagemaker/main.htm
  l

11
Web Editors

• HTML - Code Editors
• Code Editors like HomeSite allow you to work
  directly with the HTML code. They automate the
  placement of code and assist in previewing the
  pages. They save you having to remember all of
  the different HTML codes and their various
  modifiers.
• Allaire Homesite
• http//www.allaire.com/Products/homesite/

12
Web Editors

• HTML - WYSIWYG Editors
• WYSIWYG (What-You-See-Is-What-You-Get) editors
  like Macromedia Dreamweaver allow you to interact
  with elements directly on the page in a graphical
  manner, and produce the code behind the scenes.
• Most WYSIWYG editors will also let you modify the
  HTML code, and good ones will not try to correct
  your modifications.
• Other examples of WYSIWYG editors are Adobe
  GoLive and Microsoft FrontPage.

13
Web Editors

• HTML - WYSIWYG Editors - Examples
• Adobe GoLive
• http//www.adobe.com/prodindex
• Netscape Communicator
• http//www.netscape.com
• Netscape Communicator Tutorials
• http//www.mtroyal.ab.ca/adc/workshops/biol/tutori
  al.htm
• Macromedia Dreamweaver
• http//www.macromedia.com/software/dreamweaver/
• Microsoft FrontPage
• http//www.microsoft.com/
• Reference Site http//www.atl.ualberta.ca/article
  s/web/editorsummary.cfm

14
Courseware Development Environments

• For the most part, HTML editors still assume some
  understanding of how to structure a site, how the
  files and directories that make up a site relate,
  and how to build web page.
• In contrast to these are a new breed of software
  which we call Courseware development
  environments
• These are usually server side tools or servers
  which allow instructors to build online course
  materials without having to learning any html or
  even WYSIWYG editing tools.
• They usually provide some predetermined ways of
  interacting with students (static web pages,
  threaded discussions, chats, evaluations) and
  ways of building content using only a web
  browser, or at times some proprietary client
  software.

15
Courseware Development Environments

• Course Development Tools - Examples
• Blackboard CourseInfo
• http//www.blackboard.com
• Learning Space
• http//www.lotus.com/home.nsf/welcome/learnspace
• TopClass
• http//www.wbtsystems.com/
• The Learning Manager (TLM)
• http//www.thelearningmanager.com
• WebCT
• http//www.webct.com/

16
Courseware Development Environments

• Course Development Tools - References
• University of Pittsburgh
• http//www.pitt.edu/washburn/ccs.htm
• Course Management Discussion Board
• http//scrtec-ne2.unl.edu/wbc/
• Online Educational Delivery Applications
  Comparisons http//www.ctt.bc.ca/landonline/

17
Principles of Screen Design Activity

• Create a group home page based on your findings. 
  Include the two lists in the body of the web
  page 
• List One Create a list of good design principles
  for personal home and/or graduate student
  portfolio pages. This list should include the
  elements that make a pleasing home page and that
  invite continued reading and exploration. 
• List Two Distance Learning Sites.  This list
  should include links to distance learning sites
  with thoughts on what makes this a good or bad
  learning site.

18
Principles of Web Design
19
To-Do for Next Session

• Contribute to this weeks discussion forum World
  Wide Web - Tools and Design Principles
• Prepare for our next session Module Four
  Readings Computer Mediated Communication
• Work on creating a group site within WebCT about
  principles of screen design
• Work on your web based student portfolio