Session 1: Researching on the internet

Thursday, 24 July, 1-2pm, 092-001 Aus. Aid Lecture theatre

Introduction

• Explain why web skills are important for business jobs
• Explain what we will cover
  • researching on the internet
  • Content from the user's perspective
  • Information Architecture
  • Interface Design
  • XHTML
  • CSS

Search vs. Index

• Search engines like Google ( http://www.google.com ) work by looking for sites that contain specific keywords
• Indexes like The Open Directory Project ( http://dmoz.org/ ) or Yahoo ( http://www.yahoo.com ) let you drill down through categories to the topic you want.
• Specialist databases combine the power of search engines with the narrow specializations of Index/Directories:
  • Academic Info http://www.academicinfo.us/
  • Librarians' Index to the Internet (http://lii.org/search/file/busfinjobs)
  • Infomine (http://infomine.ucr.edu/)

Search tips

• choosing appropriate web research tools at http://www.lib.berkeley.edu/TeachingLib/Guides/Internet/Strategies.html

• a quick set of search tips at http://www.sc.edu/beaufort/library/lesson7.html

• a full detailed step by step tutorial on searching at http://www.sc.edu/beaufort/library/bones.html

• The Art of Getting Help ( http://dlis.gseis.ucla.edu/people/pagre/getting-help.html ) is a gem from Phil Agre ( http://dlis.gseis.ucla.edu/people/pagre ), a wealth of good Web For Ed. wisdom.

Proper attribution

• You must cite any reference you make from a web site or email just as you would when citing books in your bibliography.

Herrington, Jan & Oliver, Ron (1995). Critical characteristics of situated learning: Implications for the instructional design of multimedia. Australian Society for Computers in Learning In Tertiary Education Conference, 1995. Retrieved December 5, 2002 from http://www.ascilite.org.au/conferences/melbourne95/smtu/papers/herrington.pdf

The University Region (1999). The University of the South Pacific. Retrieved December 2, 2002 from http://www.usp.ac.fj/admin/general.htm#The%20University%20Region

• • http://library.stmarytx.edu/lac/howard/apastyle.htm
  • http://www.bedfordstmartins.com/online/citex.html
  • http://library.csumb.edu/instruction/howto/citations.php#Other

Checking validity of online resources

• Before quoting or basing any lesson on anything you have learned from the Internet, you must check the source's validity. This Critical Evaluation of Three Websites ( http://tiger.towson.edu/users/wsmith5/threewebevaluation.htm ) uses a good set of criteria that you can apply to your own research.
• Resources for evaluating internet content
• "hacking" emails to learn more about an author
• hacking web-adresses to learn more about an organisation

Session 2

Thursday, 31 July, 1-2pm, 092-001 Aus. Aid Lecture theatre

Content from the User's perspective

• • WebContentQuestionaire
  1. WHO ARE YOUR USERS?
  2. WHAT DO THEY NEED FROM YOU?
  3. HOW CAN YOU SHOW THEM THAT YOU HAVE WHAT THEY NEED?
• Useful to create several typical characters that define the spectrum of your users, and continually test your site through these people

Session 3

Thursday, 7 Aug, 1-2pm, 092-001 Aus. Aid Lecture theatre

Content Categorization

taxonomy: diving your content into a handful of sections

• • See http://www.grographics.com/cardstacks/1.gif
  • See http://www.grographics.com/cardstacks/2.gif
  • See http://www.grographics.com/cardstacks/3.gif
  • See http://www.grographics.com/cardstacks/4.gif
  • or else one pdf
• Given a list of top-level categories, users should be able to guess which section their information would be in
• Use cards of categories to create 5 or 6 "buckets"; these buckets will become your navigation
  • See Card Stacks on line or download for Mac or PC

Site maps

• turn your content categories into a sitemap

Session 4

Thursday, 14 Aug, 1-2pm, 092-001 Aus. Aid Lecture theatre

Navigation Design

• 3 basic ways people access information within a website:
  1. Search function: Snipers
  2. Navigation/Categories: Punchers
  3. In-text/contextual: Impulse buyers
• Functions should be grouped: color block navigation, main content, advertising, etc: these colors should remain consistent from page to page. Do this with Multimedia.

Structuring the Interface

• • The basic idea is to break your entire set of information into categories for navigation, and then to break the information on each page into structural categories. The most important point is that the Interface Design should evolve from the structure of your content. In other words, we don't just create a pretty interface and then try to fit our content into it. Rather, we divide our content and navigation into a logical and consistent structure, and then design the interface based on this structure.
  • For instance, we have decided that we can divide our pages into the following categories:
    • Title bar (breadcrumbs + search)
    • Navigation
    • Subnavigation
    • Content

Session 5

Thursday, 21 Aug, 1-2pm, 092-001 Aus. Aid Lecture theatre

XHTML part 1

• discuss WYSIWIG
• balancing tags
• structure of a page
• <html> <head> <body> <p /> <a href="" />
• <h1> <h2> <h3>

Code used in this class

<html>
<head>
<title>Our first webpage</title>
</head>
<body>
Welcome to our first webpage!
<p />
Here is the <a href="http://www.student.usp.ac.fj/">USP site</a>.

</body>
</html>

Session 6

Thursday, 28 Aug, 1-2pm, 092-001 Aus. Aid Lecture theatre

XHTML part 2

<html>
<head>
<title>The second page</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>H1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h2>
This is the second webpage we are creating. Here is a <a href="index.html">link back to page 1</a>.
<p />
<a href="http://www.grographics.com/work.html"><img src="image.jpg" /></a>

<p />Here is some more text in a new paragraph.
<br />And now we have a line break.

</body>
</html>

CSS

body {
font-family:arial;
color:red;
font-size:200px;
border:10px solid black;
}

h1 {
font-family:georgia;
color:green;
border-top:20px solid gray;
background-color:red;
}

• pdf, doc, swf, etc