Description

This assignment gives you a chance to practice (1) using RU Libraries resources to research a narrowly focused subject (i.e., elephant communication); (2) documenting print and online sources in the MLA bibliographical style; and (3) implementing internal page navigation and layout with HTML and CSS.

For this assignment you will make a short Further Reading Page (FRP) to supplement the following science article: "Gaming Evolves", a news story on the recently released computer game Spore.

Your page should observe the conventions of the FRP as discussed in class. To help us specify some of these conventions, here is a typical further reading page. on marine biology, that uses MLA documentation style to organize the bibliographical information for each source.

Here is a similar page made for this class: "Through the Eyes of an Octopus".

Read the article (it's short). Use the web to learn about the designers, researchers, and organizations discussed in the article. Many, if not all, should have websites of their own. Then use IRIS, the online indexes and databases available at the Rutgers Libraries website, and the search engine(s) of your choice to find the best sources to satisfy the following FRP requirements.

Requirements

Your page will need to include:

1. A General Interest section listing at least six high-quality recent books on evolution, computer gaming, complexity, and related matters. Books should not be by any researchers mentioned in the article.
2. An In Depth section listing at least four recent academic articles in science and other academic journals on specific aspects of computer gaming and game design and/or on recent develoments in evolutionary theory or research. These sources also should not be written by any researchers mentioned in the article.
3. A "Main Researchers" section listing at least six research articles by two or more of the scientists mentioned in the article. (That's six articles total, not six for each.)
4. A section listing at least three other articles on Spore’s designer, Will Wright. At least one of these needs to be an interview.
5. An Online section listing and briefly describing at least three really good/useful websites devoted to evolution and/or complexity (or complexity based games).

Again: These shouldn't be just any books, articles, or sites; they should be GOOD ones and they need to be genuinely relevant, if not the best you can find. So be selective.

Your FRP will also need to have the following design features, some with which you're already familiar and others which we'll cover in the next two weeks.

• An evolution or evolution-and-computer-game themed banner.
• Navigation ("subnav") between the top of the page and each section, distinct in style from other links on the page.
• Back-to-top links from the end of each section to the top of the page, like this one: Return to top.
• At least three levels of Header (h1, h2, h3, etc.) to divide the page. As with your Bio Page, headers of at least one level should repeat several times (e.g., using h2 or h3 headers to label each of your main sections).
• A byline that reads "Prepared by [your name]" under the the title/main header.
• A few relevant images to decorate the page.
• Style formatting using CSS, as with the Bio Page.

Note on images: The images should NOT be directly related to, thus acquired from, the game Spore itself, to its current publicity, or to its publisher.

Researching and Documenting

Use the RU Libraries IRIS and other catalogues to research books.

Use the RU Libraries indexes and databases to research articles in science journals. If you haven't done this in a while, review "How do I find an article on my topic?".

Use the search engine of your choice to locate websites.

Remember: Wikipedia and websites like it, while perhaps helpful places to begin, do not count as GOOD SOURCES or SITES and thus do not belong on your FRP.

For documenting books and articles, use Dianna Hacker's site on MLA style (or the MLA Handbook, if you have a copy).

XHTML Reminders

As you work on your page, remember these features of good XHTML form:

1. Include the following DOCTYPE declaration at the start of your file (above the opening <html> tag):

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2. Remember to declare the namespace inside the opening <html> tag; thus:

   <html xmlns="http://www.w3.org/1999/xhtml">

3. Close all paragraphs with a closing P tags (i.e., </p>).
4. Use only lowercase letters in your tags (i.e., <body> and not <BODY>).

Saving Your FRP

Save your Further Reading Page and related files in your "drafts" folder on Eden.

Adding CSS

Read Bad Tags and Span and Div.

Next review the Intermediate CSS tutorial. This covers in brief some of the core of the past two weeks' reading.

Add beginner and intermediate CSS to your Further Reading Page. In order to complete this part of the assignment you'll need to avoid the aforementioned Bad Tags while working adventurously with Spans and Divs and most if not all of the aspects of Intermediate CSS.

Make sure your page has the following FRP design features (using CSS):

1. Body has a background color or pattern (image) darker than the background of the content area.
2. Content area is visually distinct from non-content area.
3. Content area, including padding, is no more than 770px wide.
4. Content area is centered on the page.
5. Main content consists of darker text on lighter background. Curious about this requirement? See "Light text on dark background vs. readability" (456 Berea St.)
6. Main textual content is left aligned and no more than 560px wide.
7. Main content has sufficient padding on all sides.
8. All non-header text appears in a sans-serif font.
9. The subnav links are visually distinct (at least in color) from other links on the page. I.e., they contrast.
10. The nav and subnav are customized and use the hover and active pseudo-class

Note: Refer to Common Fonts page for some font options.

Finally (but essentially): Does your FRP show good use of contrast, proximity, alignment, and repetition?

Adding Subnav

Links related to our discussion of sub-navigation for the FRP:

• Customizing Your Links
• Basic subnav design: The Basic Horizontal List
• Fancy subnav design: Eric Meyer's Navbar