Web Authoring FRP
Fall 2009

Description

This assignment gives you a chance to practice (1) using RU Libraries resources to research a narrowly focused subject; (2) documenting print and online sources in the MLA bibliographical style; (3) implementing internal page navigation and layout with XHTML and CSS.; and (4) working with structured and semantic markup, including microformats.

For this assignment you will make a short Further Reading Page (FRP) as part of an imaginary website devoted to one of the artists or art movements discussed in Digital Foundations. For instance, a site like this one on Nicephore Niepce. You'll produce a banner for the site and bibliographical list of further reading for users interested in the subject.

The default subject for this assignment is the Bauhaus school/movement. That is: if you have trouble choosing an artist or movement from the many mentioned or discussed in the book, then go with the Bauhaus.

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

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 four high-quality recent books on or related to the artist or movement. Track these down via IRIS.
2. An In Depth section listing at least four recent academic journal articles on or related to the artist or movement. Use Google Scholar and/or the Indexes and Databases.
3. An Online section listing and briefly describing at least three really good/useful websites on the artist or movement. These should not be Wikipedia or Wikipedia-like. For each site include the NAME of the site and its URL.

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.

You'll also want to begin the page with a short introduction (one to three short paragraphs), describing the content and function of the page.

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

• A thematic banner (see below).
• 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. This should use the hcard microformat, something we'll cover in class.
• Three or more relevant images to decorate the page (see below).
• Style formatting using CSS, as with the Bio Page. (This means: No center tag, no align attribute, etc.)

Graphics

Your page will need to have at least three informative figures (illustrations). Images should be of good viewing dimensions: not too small and not too big.

For each image you select you'll need to record the following information:

• Subject (the pictured object or person)
• Creator (of the image and/or of the pictured object, artwork, etc.)
• Source (website where you located the image, book or periodical from which you scanned the image)
• Web address of the source (if a website) or bibliographical data (if scanned from a print source)

For (informative) graphics, we'll use the figure microformat to better structure our markup. Again, this will be something we cover in class.

You'll also need to have a thematic banner of your own creation. This should be made via a graphics program and should be at least 660px wide. Do not simply locate an image and add some text. Experiment with the techniques covered in the Digital Foundations chapters on Photoshop.

Note: The banner should be for (= part of the branding of) the complete website, of which you FRP is one part.

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.

If you're new to library research at Rutgers, take the interactive online tutorial. Or try some of the other online instructional tools.

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

Saving Your FRP

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

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 960px 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 and follows the basic good wweb typography guidelines covered in class and in the web typography reading.

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?

Submitting Part One

You'll need to post a link to your FRP Page in a reply to the "Further Reading Page" thread on your section's Class Forum. We'll do this in class; so just make sure that your FRP is saved to the correct folder on Eden.

There'll be a little time at the start of next class to go over any coding problems.

Adding Subnav

Add sub-navigation ("subnav") to your FRP. The subnav links need to be visually distinct (at least in color) from any other links on the page. Their styling should make use of the hover and active pseudo-classes.

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

Styling Graphics and Other Page Elements

Use CSS and composition and information design principles covered in class and in the reading to style and organize the presentation of images and related information on your FRP.

Submitting Part Two

You'll need to post a link to your updated FRP Page in a reply to the "FRP 2" thread on your section's Class Forum. We'll do this in class; so just make sure that your Bio Page is saved to the correct folder on Eden.