Informational Website

Purpose | Assignment | Requirements | Assignment Specifics | Grading | Related terms

Purpose of the Assignment:

• To introduce considerations of online discourse with regard to audience, context and purpose
• To introduce principles of web design and usability: Balance, Alignment, Grouping, Consistency and Contrast.
• To introduce website reading principles
  
• To introduce concepts such as Nodes, Absolute and Relative links, FTP, Server
• To introduce principles and practices of Graphic Design and HTML authoring

Assignment:

• Draft/plan a website using the information you’ve discovered through your research for the report. The design of the website should reflect your purpose: to inform about the preliminary findings of the project and the possible solutions that you have for the problem, as well as include any relevant links to other venues of information that are related to the project. This means that you will have to adopt a design that will create a visual as well as a textual signature for the content that you present.
  
  
• Since a website is different than a report, you will want to tailor your information specifically to the medium of a website, and not merely repeat sections of your report

Top

Requirements:

Required elements for this website are:

1. A Homepage (index.html) that welcomes the visitor to the website and gives an overview of what it offers (this is the first page people will see)
2. A node page about the project and why it is important (i.e. your aims in doing the project)
3. A node page about possible solutions that can remedy or alleviate the problem
4. A node page that gives a recommendation on how a possible solution can be implemented
5. A node page that includes at least 5 links to various other external sources (absolute links)

(see TCT pages 382-383 for an explanation of the terms homepage and node page)

• In addition, your page needs a visually distinct design of your own making, and include various graphics such as pictures, visuals, banners and a navigation bar. Remember the design principles of Balance, Alignment, Grouping, Consistency and Contrast and that most websites retain the same design throughout their pages and need to be readable and explicit in their structure, so consistency is an issue.
  
  
• Accessibility is a key factor in this: how can you create a website that reaches the appropriate audience (given your project)? Also, consider the visual nature of the web – what graphics can you use to support your initial findings? Seeing as you already have some experience in doing graphic design for your tutorial, expect to create more visual accompaniment for your website. Remember what you have read and what we have discussed about web design and page layout.

NOTE: All the graphics on your website should be your own. This means that I encourage you to take digital photos, and alter them in Photoshop or any other image editing program, but that ALL pictures, graphics and visuals are made by your group and no one else. Some ideas for graphic accompaniment can be: banners that convey visually your project's aim, navigation bars, explanatory pictures, or process charts.

• If, for some chance, you do need to use someone's picture, make sure to get their permission via email, and include a print out of the email. All other work should be your own original work. I realize that some people will find it difficult to create their own graphics, but I am interested in seeing how you graphically and visually represent your project, and not how other people have done so. (see website ethics ; website tips ; and especially the creating a website page )

Top

Assignment Specifics:

• Final website should be handed in on a 3 ¼ floppy, or alternately, on a CD-rom (consider this when you have large-sized graphic files), and contain at least one main page (titled index.html) and 4 other pages (four files ending with .htm) created by you or your group. The information should include enough information to fill a 5 page report if it were to be written out, and include at least 5 links to other websites related to the project (think about resources tied in with your project’s focus for people that are visiting your website that want to find out more).
• I'd like everyone to put their group’s website online (see creating a website) , but I will also require that each group/person hands their website files in on a CD-rom or 3 ¼ floppy. This allows me to see all your files without having to deal with links that are not working.
• There are also some general resources for creating your website that you can check out on my resources page. Please also ask questions in class when you are working on your website.

Grading Criteria

Grading Criteria Website (20 points)

Each of these is worth 4 points:

1-     Website is rhetorically sound: website has a clear purpose, subject and gives upfront main points 

2-     Website is well-designed, uses graphics that are related to the topic and tells a story effectively about the topic (i.e. graphics and text are rhetorically effective)

3-     Website uses effective and consistent design for conveying information in a user-friendly and usable way (no vertical scrolling; your design should be optimally experienced at 640 pixels width computer screens; no long, flat texts – instead, use “chunked” information and paragraphs)

4-     Website employs a transparent, effective navigation structure that at all times makes it clear to the user what information there is to be found in the website (main nodes) and where they are currently at (breadcrumbs) and where they can go to a node page (named anchors)

5-     Website uses the non-linear navigation structure applicable to websites    

Top

Some Related Terms:

World Wide Web (WWW): invented by Tim Berners-Lee at CERN (European Laboratory for Particle Physics) in 1980. WWW is a set of protocols (specific instructions) that display linked documents across the Internet.

Internet: the protocols over which the protocols of the WWW run. These protocols are called TCP/IP, essentially making the WWW run.

HTTP: stands for HyperText Transfer Protocol, one of the components of the WWW which is distributed through the TCP/IP, which allows for the transfer of information from specific pages. You see Http: when you type in a specific web-site address

HTML: stands for HyperText Markup Language, another component of the WWW, which defines the way a page is displayed on the screen of the user. You will create your webpage based on this code.

TAGS: the basic command code used in HTML. For example, each website will start with the following tags:

<HTML>

<HEAD>

<TITLE>

<BODY>

<HTML> . . . </HTML> The content of your website will be in between these tags. Please see the following link for some basic examples of HTML tags.

FTP: stands for File Transfer Protocol, which allows you to download a file to another location. For example, when I upload my files to this website, I use a FTP to get my files so that you can access them on my website

Link: A specific instruction, written in HTML, that refers to another page or website

Navigation Bar: The navigation bar allows your site’s visitor to find the information that they need on your website.

Scripting: You’ll need to script your website. That is, you’ll need to think about the structure of your website. What will people see first? What information will they most likely need and how will they get there? Keep in mind that a website has several layers of information that won’t necessarily be evident from the first page (index.html).

Web-authoring: there are various programs which allow you to create a website by writing HTML code, most of them using an interface that is close to that of Microsoft word.

-Microsoft Frontpage uses a very similar interface as Word – has easy-ready to use menu choices, but is limited in amount of effects for the website.

-Macromedia's Dreamweaver has somewhat of a similar interface to Word, but has more options and is more difficult to master.

-Adobe GoLive is another web authoring program that offers a line of options, but also has a less easy interface than Frontpage.

Top