Web Authoring (Spring 2009) – Syllabus & Schedule

In class

Work Due

• Revised review page that displays properly in both FF 3 and IE 7 browsers.
• Complete draft of second visual page; progress on other pages.

Of Interest

. . .

Scripts and Flash Review

We'll take another look at the minimal (and possibly more than minimal) roles that Javascript, Flash, and PHP should play in your final project.

Revising Your Second Text

Time permitting: We'll survey a few more examples – of chunking, trimming, labeling, etc.

Final Project Pages (Re-Review)

Pages of the final project should include:

• Home page with title, site nav, and introductory text
• Two text pages: (1) Review page with 9-item links sidebar and (2) second open-genre text page
• Two different visual pages (e.g., portfolio gallery page and project photo-documentation page)
• Two supplementary pages (each must be a different genre)
• Feedback/User Survey Page and related Showform PHP Page (or equivalent)
• Author page = an About page.

So ten different pages altogether, plus a main external CSS file and an IE CSS file.

CRAP and Other Kinds of Revision

Another look at this homepage revision demo.

Final Project

Work on Final Project. Review the final project checklist. Test your pages in IE 7. Test your Javascript.

In class

Work Due

• Second text:. 1200-1600 words. Topic and genre must be discussed with and APPROVED by the instructor. Stapled, numbered pages. Serif font. 1.5 line spacing. As before: Include word count at the end. Bring a printed copy to class.
• Final project note: At this point I need to be able to follow your final progress on the project. Current versions of your work need to be accessible on Eden (not on your laptop or your computer at home). If all I can see on Eden are files from early or mid November, I will assume that you've fallen behind. Therefore, be sure to update your files.

Of Interest

Free and lovely science art and photo library: Conceptual Diagram Symbol Libraries.

PHP: Introduction and Example

Like Javascript and the Actionscript underlying Flash, PHP is a scripting language. Unlike the other two which run in the browser, PHP runs on the server (e.g., Eden or RCI). Here are two examples of PHP for us to examine.

PHP Example 2: Getting the Feedback Page to Send Data

Refer to Show Form PHP and Email Form PHP.

For your final project, implement the showform script.

Basically you can cut and paste the code into Notepad and save with a .php extension. Then, in your form tag specify the file name as the action value (e.g., action="showform.php").

Note: PHP is a server-side script, so it will only work from a server with PHP installed (most should have it installed), but will not work on your desktop or other personal computer.

On PHP, see W3 Schools' PHP Tutorial, etc.

Ian has offered this PHP script for sending your feedback data to a specified email address. He's added helpful instructions/comments in the source code.

Site Harmonization

Here is a site harmonization checklist:

• All pages and images display (i.e., no permission problems, no size or proportion problems).
• Site nav (i.e., page to page linking) works for ALL pages and is in the SAME place on all pages after the home page.
• Optimally: Site nav indicates current page. (E.g., link for the current page has a different color.)

• Subnav on all pages works and long pages have "back to top" links.
• Banner or equivalent appears on all pages.
• All pages link to a single CSS file for your whole site.
• All pages are visually consistent and clearly identified as the pages they are (via title, banner, h1, etc.).

Final Project Pages (Review)

Pages of the final project should include:

• Home page with title, site nav, and introductory text
• Two text pages: (1) Review page with 9-item links sidebar and (2) second open-genre text page
• Two different visual pages (e.g., portfolio gallery page and project photo-documentation page)
• Two supplementary pages (each must be a different genre)
• Feedback/User Survey Page and related Showform PHP Page (or equivalent) with multiple questions
• Author page = an About page.

So ten different pages altogether, plus a main external CSS file and an IE CSS file.

Final Project Checklist

Revision

Another look at this homepage revision demo.

Final Project

Work on Final Project.

In class

Work Due

• Some initial progress on visual page. Basically, stuff to show me and work on in class.
• Topics for second text and visual pages.
• Flash page should be online, with a link to it posted on the Class Forum.

This Week's Items of Interest

Time Waster: Empire Poster Quiz.

Sprint Widget Mosaic = Visualizing the Now!

Data Visualization: Modern Approaches

More from Dynamic Drive: hover-activated CSS changes for navigation buttons.

Composition Review

Composition:

• Information value (relative location)
• Salience
• Framing (and Connection)

Sample Project: Life as a Student Athlete (Fall 2008).

Adding Simple JavaScript Swaps to a Visual or Other Page

Let's take a look at this fairly simple HTML Swap Demo.

Next, let's take a look at these related HTML swap Demos: Three, Four, and Five.

Finally, here's a slightly more comlex application of the same basic code in combination with CSS: Six.

Basically, when triggered by a mouseover action, the script located the div element with the specified id (e.g., "right" in first demo) and replaces the HTML inside the div with the new HTML specified in the corresponding instance of the function.

More JavaScript: JS Libraries

Two good script library collections to start with:

• jQuery: "Write Less, Do More"
• Adobe Spry

Again, you might start with the very short Huddleston intro chapter on JavaScript; or take a look at the W3 Schools JavaScript tutorial; then, move onto the libraries.

But remember to credit all scripts not of your own creation (or supplied directly by the instructor).

Visual Page

As discussed previously, the visual page focuses on the visual rather than the textual. The page, however, should have introductory and supplementary text. The page must relate to your site topic. It should contain roughly 14 non-copyright images, preferably of your own creation (or commission). You may use/present the images in a gallery, a timeline, a slideshow narrative, a tutorial, a tour, a pictorial encyclopedia entry, a dialogue, a Flash movie, etc.

Text in captions or elsewhere on the page should identify each image, and (where necessary) explain what we should appreciate in it.

Of some interest: Pure CSS Cross Browser Multi-Page Photograph Gallery.

Visual Page Examples from a Previous Semester

Note: The requirements for these differ slightly.

• Anime Collector Gallery
• Anime Timeline

In class

Work Due

• Flash version of your End of the World narrative. Have your editable Flash (.fla ) file in class. We'll add some actionscript and embed the .swf version of the project into a web page. Essentially, this is an animated slideshow. The basic requirements, as covered in class, are as follows:
  
  
  1. Title and credit "slide".
  2. At least six of your images plus titles and captions. These should not blink on and then blink off. Rather, as demonstrated in class, they should fade in and out. Or animate in and out in some other way.
  3. Concluding slide: "The End" or something like that.
  4. Sound is optional, as are any other features or effects.

• Initial ideas for second text and visual pages.

This Week's Items of Interest

Video: "Describe Your Doctype So Your Browser Can Relate" (link via Aasha).

Good examples of web comic with extras: Rice Boy.

More Post-Midterm Review

We'll look at three or four more midterms via the Class Forum.

More Flash

Embedding Flash in a web page using SWFObject. (For instructions for use, see the documentation.)

As for adding functionality via Actionscript, we'll cover a few things in class.

You should also refer to Digital Foundations, chapter 20, only online. It covers making stop and start buttons using Actionscript 3.0. For creating link buttons using Actionscript 3.0, refer to What happened to getUrl or a similar tutorial.

Favicon

If you want to take a break, use Google to find out how to make a favicon (e.g., ) for your website. Then make one. This will give you a chance to practice more with Photoshop and pixel measurements.

CSS Bugs & Hacks

Historical inventory of older browser bugs: RichInStyle.com Bug pages.

Use Conditional Comments to get your site to display accurately in Internet Explorer.

Here is another explanation of conditional comments.

Basic conditional comment for an IE-specific external CSS file:

<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->

You would insert this special comment into the HEAD of your HTML file.

You should avoid using hacks based on browser bugs; but you should familiarize yourself with the following hacks so that you recognize and understand them when you encounter them in older or less-than-bautiful code:

1. Star HTML Selector Bug (will not work in IE7)
2. Underscore Hack (should still work for IE7)
3. Easy Hacks for IE7

Feedback Page Review

First: MAKE SURE that you are organizing your (revised) feedback page with FIELDSETS and LEGENDS. This makes the page easier to read (scan), better looking, and easier to style and re-style as needed.

In class

Work Due

• Feedback Page – Post a link to the finished draft in a reply to the "Feeback Page" thread on the Class Forum.

Midterm Review (Part 1)

Let's start with these review pages:

• Review of Journey of a Novice Cook
• Review of Relational Aesthetics
• Review of Writing for Animation, Comics, and Games

Next: BAP Design.

And this interesting visual page.

Timelines

As discussed last week, making a timeline related to your project is one good possibility for either your second visual page or a supplementary page. Here are some examples of visually based and/or web-based timelines.

• Graham Roberts and Ben Sisario/The New York Times, Comparative Timeline for the new Guns 'n' Roses album, Chinese Democracy.
• Vonage Timeline (courtesy of John Abbott).
• For comparison: Another Mumbai Terror Attack (NON) Timeline
• New York Times, Highlights of a Cathedral's Rehabilitation (not exactly a timeline but suggestive of one)
• Another cathedral timeline.
• Yet another comparative timeline: The Times Square Time Ball.
• Interactive Flash Timeline: Don Cesar Resort

Some older examples from this class:

• Cartography Timeline
• Timeline of Piracy in the East and West
• Typeface Timeline
• M. C. Escher Timeline
• Women in Sports and Racing
• Anime timeline
• Rodeo timeline
• Bolivian clothing timeline
• Nocturnal New York Culture / History comparative timeline

Resources & Novelties

Create an analogue clock [on your website] using only CSS!

Since we'll be starting with Flash today: 7 reasons to avoid Flash (or Silverlight) like the plague when designing a website (Antezeta Web Marketing).

Flash sites:

• Home page design: The Lippincott homepage.
• This is a simple but creative and effective Flash movie/slideshow promoting Greg Bear's science-fiction novel, City at the End of Time (2008).

• There's Something in the Sea (link via Bryan).
• Portfolio site of the illustrator Pierluigi Longo.

Related: an article on Book Trailers, Book Videos, LitVids and Book Promotion.

And unrelated: short video tutorial on using Photoshop and Illustrator in conjunction (to make a logo).

More unrelated: Nike ID Home Page (via Andrea). Appealing home page design.

Adobe Flash Warm-Up

By popular demand, we take a short break from the projects proper to learn some Flash and make animated promotional material to lure visitors to your sites.

First, two points of Flash-related common sense:

• Use Flash to make only things you can't make using XHTML + CSS.
• Don't make your entire site in Flash.

Flash Ads

Some examples: HP Brand campaign: HP Digital Photography

To begin, let's take a look at a typical set of online advertising guidelines (Business World).

The Google AdWords Advertising Policies goes into a bit more detail.

From these guidelines we see that a max. length of 15 seconds is a convention and one that we'll follow for this assignment.

IAB Ad Unit Guidelines

Other Non-Ad Flash Examples

• Animated banner: Tutor Ming
• Another Animated banner: Clutch Marketing
• Animated interface: Deitch Projects home page
• Animated interface: Northern Lights Post home page

Flash Tutorials

• Smashing Magazine's list of Best Flash Tutorials. For example: High-tech city animation
• Using Flash for the first time: Part 1: Building a banner
• Using Flash for the first time: Part 2: Adding symbols, animation, and ActionScript
• Best practices for Advertising with Flash.
• Simple Stick Man tutorial (stick figure animation)
• Lukamaras.com is a good source of Flash tutorials and ideas for different features of your banner/ad. For instance:

1. Lukamaras.com: Creating funny, dynamic dialogue balloons in Flash
2. Lukamaras.com: Creating a 360 degree panoramic view ad banner
3. Lukamaras.com: Making a movie clip chase another movie clip by using a motion guide

Lukamaras.com has a special section of banner (and banner ad) tutorials.

The in-depth tutorial Creating a flash ad banner from start to finish will form the basis of this assignment — with a few modifications.

In class

Work Due

• Feedback Questions for Form Page – Post your questions to the "Feeback Questions 1" thread on the Class Forum. Also, turn in a printed copy of your questions in class.
  
  
  1. What are three things you know about your model site user? (E.g., for a site on Early Japanese Mystery Novels: You know that your model user doesn't read Japanese.)
  2. Six questions your likely site user might have when they find your site, say, on Google. What are looking to learn, to do, to track down?
  3. Eight questions you have for your likely site user once they've visited your site. These need to be real, topic-related, substantive questions. Not general questions, like age? gender? country of birth? They should be questions that would help you shape and improve your site, esp. that would get your user to feel involved in the development of your site, that would make them perhaps, even, site fans. Among other things: try to get stories, ideas, etc. from your user, content that you can ADD to your site.

  These last eight questions will become part of your Feedback Page. Again: They should NOT be demographic questions.

• Midterm Prototype, part 2 – i.e., the visual page. Should be in your midterm folder. If there, you do not need to post anything further on the forum. I'll find it when I do a final check of the midterms. However: If the page is missing, late, or incomplete, you must talk to me about this in class.

Special Note on Midterm

Once you've submitted your midterm, make NO further changes to the files in your midterm folder. These need to remain as they were submitted through the end of the semester.

You're free to copy these files into another folder and change them as you like so long as the submitted files remain accessible and unaltered in your midterm folder.

Final Project Overview at Midterm

So far:

• Home (welcome, intro) Page
• Book Review + Links Sidebar
• Author Page
• Visual Page (e.g., portfolio of work, character and setting designs for a webcomic, photo documentation of a physical project, screenshot gallery for a digital project, visual narrative)

Starting today:

• Feedback page (first complete draft due next week). Questions divided into at least three sections.

What lies ahead:

• A second page of writing, at least 1200 words. In Salway and Martinec's terms, where image is subordinate to text. Examples: critical essay, interview, project proposal, tutorial, project blog, text-heavy timeline, guided tour (with some illustrations).
• A page where, in Salway and Martinec's terms, either (1) text is subordinate to image or (2) where the relation between text and image is equal. The default genre for this page is a visually complex comparative timeline, examples of which we'll look at next week. (Timeline might be a project timeline, a learning to cook timeline, a plot timeline for new readers of a webcomic, etc.)
• At least two supplementary pages (e.g., a page of mini reviews, FAQ page, multimedia page, game page, user quiz page, fan art page, recipes with commentary).
• At least one significant use of Flash animation (we'll start looking at Flash next week in class)
• At least two significant uses of Javascript (see Huddleston, chapter 12)

Resources & Novelties

For adding secure email links to your website, consider using The Hivelogic Enkoder.

Simple but effective design: Kristine Janssen's Portfolio.

A web project from the early modern internet: The Great Chicago Fire & the Web of Memory.

For ideas: Best of CSS Design 2008 (Web Designers Wall). And related to this: Large Background Websites (something I mentioned earlier in the semester).

Naked People – the website (warning: they're naked)

Tom Phillips, 20 Sites n Years

Vintage Home Page designs (or, Raiding the Public Domain for Inspiration): Web 2.0 style is all about making our web pages look very "now" (or ten minutes ago, things moving cable-quickly as they do). But think about the possibility of moving, designing, in the opposite direction, 1907 rather than 2007. For instance, take a look at these fantastic Inland Printer covers from way back in the last century. Design is very time-sensitive, thus dates remarkably quickly. This can be a danger, but you should also see it as a resource, something to exploit, esp. if your project has a historical dimension.

Novelty Site Navigation: web.Burza – Superhero Edition.

Writing for the Web

Good, compact content. Strong keywords.

For more on writing for the web, see Guidelines – Web Writing That Works!.

And a reioterated note on (NOT) centering text: If you must (i.e., if it looks really good), you can center headings/titles. But except in very, very special cases, you should never center paragraphs (blurbs, chunks, etc.) of text. It just looks bad, usually interferes with the overall page design, and makes scanning text more difficult.

Feedback Page

Some functions of the Feeback Page:

• Give you ideas (and content) for the site.
• Help you fix the site.
• Get them to feel involved in the site, to bond with your site.

The Feedback Page has four main aspects: content in the form of well-defined questions, structure in XHTML, presentation through CSS and CRAP, and functionality through scripting.

The first draft of the Feedback Page will need to ask at least eight questions of your user. Basic biographical and demographic questions, such as age, location, and gender, do not count towards these eight questions (but ask them if you want). The questions should be divided into at least three sections (i.e, fieldsets) and use at least three different input types.

The feeback page is basically a form page. I'll introduce form pages a little in class; but you'll need to work with the HTML Dog book and site. See the beginner and advanced form tutorials on the website and chapter 11 in Huddleston.

Use CSS and the CRAP principles to style your form and make it easy to use. Note: For the midterm, you do not need to have a working form (i.e., not has to happen to the information when the user submits it).

MAKE SURE that you are organizing your feedback page with FIELDSETS and LEGENDS. This makes the page easier to read (scan), better looking, and easier to style and re-style as needed.

Here is a feedback page for a Spike Lee site. What works here? And what doesn't?

If you want interesting content from your site user, avoid yes/no type questions. Or questions with one word or phrase answers.

Not: Did you learn something about women in racing that you never knew before? (y/n)

But: What did you learn about women in racing that you never knew before?

Not (simply): What was the first video game you remember playing?

But: What do you remember about the first video game you played?

Use follow-up questions: e.g., "How long did it take you to master the game?"

You can also include feedback questions on specific pages. For example, on the review page:

"Disagree with any of my book reviews? Left me know!"

In class

• Review Page (First Draft) – Post a link to your page in the "Review Page" thread on the Class Forum.
• Other Midterm Parts – Home Page and Banner designs. Initial work on Home Page and Site Author Page.

Things of Interest and Another Thing

Hcard and CSS3 Tutorial

Grimace Project

Caridad Svich

Why So Serious (Dark Knight publicity site)

Revised Midterm Schedule

Here is a revised breakdown of what is due and when. As you'll see, I've split the midterm into two parts, the first due this Friday, the second after the break.

The first part should include: a Home Page/ Intro Page; a Review Page with a nine-item link/blurb sidebar; and an Author Page suited to your site. (Portfolio sites can be written in first or third person; others should be in third person.) The home page should have a design that repeats or matches the banner design for the other pages.

The second part should add a visual page to the midterm. (We'll work on the Feedback next.) Again: the visual page, of which the gallery page is a genre, is a kind of web page in which text is (mainly) subordinate to image. The requirements for this page are listed with the midterm preview under Week Seven.

All pages of the midterm (but not the three early/pre-project pages) should look as if they belong to the same website. Use a consistent layout, color scheme, typography, and icons, images, other symbols to achieve this identity.

All pages of the midterm prototype, except for the three early pages, should be in a new folder called "mid" or "midterm," inside yor "425" folder.

Validate Your Review Page

That's right: check the validity of your Review Page HTML. If your page fails to validate, then fix it.

Review Page Review and Discussion

For this we'll go to the Class Forum.

Revising the (Book) Review

Some things to consider when revising your review text(s):

• Transition sentence between reviews (for multiple reviews).
• Trimming the final text; remove about 15-25% of the words. But don't sacrifice substance. Just try to reduce wordiness, of which there is alwasy PLENTY in a first draft.
• To offset this loss of mass: add quotes from the text (and/or from the product's website; or from other critics and reviewers). There MUST be quotes in your final review. Quotes from websites should end with a citation that links to the source. Quotes from a book should cite the page number. Again, follow Hacker on this.
• Also, add examples to illustrate your claims.

Which brings us to the next bit of revision.

In class writing exercise: (1) Compose a brief paragraph in which you discuss the intended audience of the book (or game, etc.) under review (i.e., who did the author have in mind when he or she wrote the book; not necessarily the same as your audience) and explain whether or not (or to what extent), you believe, the book will satisfy the expectations of that audience. For example: Does it tell them what they would want to learn? Does it do so in an accessible way?

(2) Write a second short paragraph in which you tell us about the author(s) of the book under review; or about the company responsible for the product under review.

When you've finished copy and add your paragraph to your reply to the Review Page thread on the Class Forum.

Here is one example:

From Ink on Paper to the Internet should appeal to news junkies in New Jersey. That includes the thousands of people employed in the state's newspaper industry and the many avid readers of newspapers and internet news. But I am afraid some of them will be disappointed because the crucial question is whether newspapers will survive in the age of the internet. And the author of the book, Rutgers University journalism professor emeritus Jerome Aumente, does not answer it.

Aumente certainly has the qualifications to write such a sweeping assessment of the profession. He created the Journalism Resources Institute at Rutgers University, which trained thousands of journalists over several decades. He was the founding chair of the university's journalism department. He has traveled all over the world defending the rights of journalists. But that makes him an industry insider. And what is missing in this book are the views of outside experts, which would likely be much more pessimistic.

Adding Dynamism to a Gallery Page

Over the last two classes we constructed a simple visual page: a gallery page showing details from an imaginary end of civilization. Today we'll look at one way to add some dynamic complexity to the gallery page. This method uses CSS. Over the next few weeks, we'll look at other methods.

The source for this method is the Dynamic Drive CSS Image Gallery.

Here is the class demo with the Dynamic Drive CSS integrated into it. Note that I'm no longer using the float method to structure the thumbnail gallery.

• End of the World (CSS gallery version)
• End of the World CSS (CSS gallery version)

This demo will give us a chance to look at how you should credit special code you locate online; thus, how you might avoid the problem of code plagiarism.

Work on Midterm

Open workshop on midterm work.

Work on revising your Review and Site Author pages and begin to build your Home page. Again, here are the BR template and basic CSS we developed last week. Elaborate, modify, customize, and improve for your continued use.

Revise your review text and links blurbs. Insofar as possible: Your original review text should be chunked and trimmed by 15-25%. You'll then add new material in response to my feedback and today's discussion. Unrevised review and blurb texts will weaken the midterm by at least one letter grade. As will your failing to turn in a PRINTED COPY prior to the midterm.

Update: Your Home Page should have the following features: (1) website title in the form of a graphic; (2) focal image or visual theme; (3) sitenav; and (4) introductory text. Footer content of some kind is optional but a good possibility. The San Gregorio General Store offers one model for this.

Use Adobe Kuler and other color resources to give your website a stable and attractive color scheme, one that goes with your topic and enhances the readability of your content.

Remember that for the midterm, CSS for all the pages should come from a SINGLE external .css file.

Give a distinct id name to the body tag of each of your pages. This will allow you to write page-specific CSS rules by combining ID selection with descendant selectors.

Finally, to clarify what was discussed last week: all pages (home, review, author, and any others you might add) need to have SITE navigation. Site navigation should be in the same place on all pages, except on the home page (if it functions as a more graphically focused cover/title page rather than a simple introduction page). And all pages should have a banner identifying the website. The banner can be tailored to each page or (for the midterm only) be a general banner.

In class

• Review Text – E-copy in your HW folder on Eden, printed copy for the instructor. Include a word count at the end of your text.
• End of the World Gallery Page – Complete what we covered in the last class. Save in your "drafts" folder.

Midterm Prototype Preview

The midterm prototype is the first draft of your final project and will be due online by Friday, March 13, at 6 pm.

The midterm consists of

• Home Page with site navigation and a brief introductory text.
• Book Review page with a Links Sidebar containing no fewer than 9 links.
• Author's page, professional rather than personal in style, tone, and content. This should not be your previous bio page, although it may reuse material from that page where suitable.
• Either (1) a Feedback/User Survey Form page (as discussed in class); or (2) a Visual Page (E.g., a gallery) presenting either 9 captioned images of your own creation or 12 captioned images out-of-copyright. Captions should consist of titles, short descriptions of the subject matter, and, where necessary, source/credit name and link.
• A single external CSS file for all pages of the site.

These pages will need to be saved in a new folder in your "425" folder: a "midterm" folder.

Additional References for your (book) review page research and images can be presented on that page or on the optional Works Cited Page.

The Midterm needs to have a unified look or "visual theme," with a banner design based on/replicating some key features of the Home Page focal image.

Each page will need a banner that reproduces or resembles the Home Page design. You may use a single banner for all your pages or, more impressively, vary your banner thematically from page to page.

You'll also need to include the final versions of your Bio page, FRP, and End of the World Gallery page. You should leave these pages in your drafts folder. However, include a simple page of links to these three early pages in your "midterm" folder.

Plagiarism, Image Use, & Copyright

Let's take a look at the Writing Program's plagiarism policy and the Business and Technical Writing Program plagiarism guidelines

As the Business and Technical Writing Program plagiarism guidelines make clear, using the code or design of a page that you find online generally counts as plagiarism, even if you credit the source. For the purpose of this class, this includes using any free page code and design templates you may find online or in an editing program like Dreamweaver.

You may use brief tutorial code you find online (e.g., from a tutorial that tells you how to make an image swap or a pullquote, things like the examples on the HTML Dog website and in the book).

You also may use prewritten Javascript that you find online, but you should discuss this with me (at least the first time you do this) and you must credit the source of the script in a comment in your code.

Image Use: Wherever possible use images of your own creation or images that are in the public domain. When you use an image under copyright, try to get permission from the image's owner. At the very least, credit the source of the image. (We will return to this matter again in the coming weeks.)

Finally, as stated in the class policies, if you miss this discussion in class, be sure to speak to me about these issues as soon as possible. I do not lie: They are very important.

Example of Terms of (Image) Use: National Gallery UK.

Now let's take a look at The Commons on Flickr (not the same as Creative Commons, which we'll discuss as well).

Using Images

Your Book Review page should have THREE or more images in addition to the optional cover image of the book under review and/or an author photo.

As we set up last week, each image should have a caption identifying/describing the image and identifying the source of the image (if you are not its creator).

Identify the image source by its author's name (author of the book, article, or website from where you acquired the image). For online sources, let the identifying name double as a link to the source.

In terms of CSS, you should create a standard image plus caption div class as well as standard "left" and "right" classes of floating div for the two offset image positions (if you plan to use these). Include image, title/caption, and image source inside these divs. Set the float directions for each div and use margins or padding to put space between the image and surrounding text.

Note: As stated above, you do not need to float images to the left or right. Wide images often work best inside or between paragraphs of text as part of the vertical flow of content. For example: Giornale Nuovo on Erik Desmazieres.

Small images: Unless it is essential to your page design, you should not center small images on your page.

Large images: If you need your user to view a very large image, put the image on a second page and create a link to it on your feature page.

Keep data size of the images on your pages as small as you can; preferably under 50 KB (large images obviously will be larger but still aim for the lower KBs). If necessary, re-save iamges for the web at a smaller data size.

Here is a demonstration of revising page design in order to use an image informatively with text.

Book Review Page: Layout Exercise

Next we'll begin to build a skeleton layout for your Book Review page (this is the second exercise I mentioned above).

First: Let's take a close look at the first book review example from last week: PHP and MySQL by Example.

Another book review example: Ellen Lupton's Thinking with Type.

Finally: for sidebar links see how Maud Newton does it in the sidebar on her blog.

And a second look at Veerle's list of approved links.

Next, let's look at the hReview microformat we'll use to structure our reviews.

Now to the demo/exercise itself:

1. To begin, copy the HTML for this Layout Demo to your friendly local desktop.
2. Open a new Notepad file and save on it your desktop as "project.css".
3. Now follow along – but feel free to improvise on your own and interject ideas.

Home Page: Introduction

Your Home Page should establish the general "look" of your site. It should be constructed around a focal image or design and needs to give your user an overview of the site architecture (main pages, content, nav options, etc.)

The HP Rule: Main page design, introductory content, and site navigation must fit in the active graphic space.

Examples:

• Brian Kane
• Dam, Stuhltrager Gallery
• The Scientific Marine Acquarium
• Zembla (Vladimir Nabokov site)
• Vladimir Nabokov Museum
• Vladimir Nabokov Library
• Meyerweb
• British Museum
• San Gregorio General Store

In class

• Further Reading Page – Your FRP should be updated through what we covered in the last class: subnav and back-to-top nav; styled links using CSS and pseudo-class selection (see Huddleston for more on this); three images added with captions using the figure microformat; banner graphic. If you have multiple versions of your FRP, check that the link to your FRP in the class forum links to the updated version.
• Nine link blurbs related to your project. Submit a printed copy of your blurbs in class.

Work Due Summary

Assignments should be submitted in the specified space/format by the specified date. At this point, late and missing work will begin to have a real effect on your grade.

Work whose only marked format/space is the Class Forum should be submitted there. If both Class Forum and another space/format are marked, then only a link to the second space (e.g., the file in your "drafts" folder) should be on the Class Forum.

FRP Review

Let's visit the Class Forum and take a look at some of your Further Reading Pages. In terms of content, we'll want to look at quality of sources and consistency of the bibliographical formatting. In terms of presentation and design, we'll want to focus on legibility and CRAP principles. Finally, in terms of code, we'll want to check for economy and error-free-ness.

Let's start with this Spore FRP Example.

Website Examples

We'll regularly examine the good points and problems of interesting websites. These two were posted to the class forum.

• Ben Proctor Portfolio
• Pink Cactus Portfolio

CSS Layout, Cropping, and Positioning

So far we've looked at centering a div (or other block-level element), a basic layout technique. If we have time today we'll begin to examine a few more layout techniques, and then continue with them in more detail next week.

Common page layouts using CSS.

We'll try an exercise based on Float Tutorial 4 on Max Design's Floatutorial. Using your photographs of the end of the world from the Week 2 homework, you'll build a slightly larger-than-thumbnail image gallery.

1. On your local desktop: create a new HTML page based on the template we've been using. Include your CSS either in the head of the page or in an external file.
2. Save the page as "gallery.htm" or something like that.
3. Copy the 260px versions of your photos to an "img" folder on the desktop.
4. Inside the #wrapper div of your page, markup your images and captions (legends) using the figure microformat we used for your FRP.
5. Following and adapting the MaxDesign thumbnail gallery tutorial, arrange your images in a 3 by 3 grid.
6. Finally, using the block-level centering method from the previous classes, center the gallery grid on your page and upload the completed file to your drafts folder.
7. Check the permissions, and rest.

Plagiarism, Image Use, & Copyright

Let's take a look at the Writing Program's plagiarism policy and the Business and Technical Writing Program plagiarism guidelines

As the Business and Technical Writing Program plagiarism guidelines make clear, using the code or design of a page that you find online generally counts as plagiarism, even if you credit the source. For the purpose of this class, this includes using any free page code and design templates you may find online or in an editing program like Dreamweaver.

You may use brief tutorial code you find online (e.g., from a tutorial that tells you how to make an image swap or a pullquote, things like the examples on the HTML Dog website and in the book).

You also may use prewritten Javascript that you find online, but you should discuss this with me (at least the first time you do this) and you must credit the source of the script in a comment in your code.

Image Use: Wherever possible use images of your own creation or images that are in the public domain. When you use an image under copyright, try to get permission from the image's owner. At the very least, credit the source of the image. (We will return to this matter again in the coming weeks.)

Finally, as stated in the class policies, if you miss this discussion in class, be sure to speak to me about these issues as soon as possible. I do not lie: They are very important.

Example of Terms of (Image) Use: National Gallery UK.

Now let's take a look at The Commons on Flickr (not the same as Creative Commons, which we'll discuss as well).

Notes on Using Images

Your Book Review page should have THREE or more images in addition to the optional cover image of the book under review and/or an author photo.

As we set up last week, each image should have a caption identifying/describing the image and identifying the source of the image (if you are not its creator).

Identify the image source by its author's name (author of the book, article, or website from where you acquired the image). For online sources, let the identifying name double as a link to the source.

In terms of CSS, you should create a standard image plus caption div class as well as standard "left" and "right" classes of floating div for the two offset image positions (if you plan to use these). Include image, title/caption, and image source inside these divs. Set the float directions for each div and use margins or padding to put space between the image and surrounding text.

Note: As stated above, you do not need to float images to the left or right. Wide images often work best inside or between paragraphs of text as part of the vertical flow of content. For example: Giornale Nuovo on Erik Desmazieres.

Small images: Unless it is essential to your page design, you should not center small images on your page.

Large images: If you need your user to view a very large image, put the image on a second page and create a link to it on your feature page.

Keep data size of the images on your pages as small as you can; preferably under 50 KB (large images obviously will be larger but still aim for the lower KBs). If necessary, re-save iamges for the web at a smaller data size.

Here is a demonstration of revising page design in order to use an image informatively with text.

Book Review Page: Layout Exercise

Next we'll begin to build a skeleton layout for your Book Review page (this is the second exercise I mentioned above).

First: Let's take a close look at the first book review example from last week: PHP and MySQL by Example.

Another book review example: Ellen Lupton's Thinking with Type.

Finally: for sidebar links see how Maud Newton does it in the sidebar on her blog.

Now to the demo/exercise itself:

1. To begin, copy the HTML for this Layout Demo to your friendly local desktop.
2. Open a new Notepad (or jEdit) file and save on it your desktop as "br_demo.css".
3. Now follow along – but feel free to improvise on your own and interject ideas.

Supplementary Layout Material

Review the display (discussed last week) and page layout sections at HTML Dog.

In addition to the material in the HTML Dog book, many layout tutorials are available, such as:

• Max Design's Floatutorial;
• Michael Meadhra's Creating a fixed-width layout with CSS;
• Alan Pearce's Multi-Column Layouts Climb Out of the Box; and
• Molly E. Holzschlag's highly recommended Thinking Outside the Grid.

Remember, you can use Firebug to study and test the CSS of any page. And here is the helpful Firebug Layout Intro.

In class

• Project Proposal and Book Review Choices – Post a response to thethread in the Class Forum.
• FRP – first draft with XHTML, banner image, and basic CSS for text and color styling (in an external .css file). We'll add subnav layout, images, and final touches in today's class. Post a LINK to your FRP in a response to the "Further Reading Page" thread on the Class Forum.

Web 2.0 Style

Here is a pretty terrible old web page: Wondermints fan site.

And here is an article on Current Web Style.

And here is an example of that style: Net Squared website.

And here is a related Web 2.0 How To tutorial.

CRAP Design Review

Visual logic of the page: uses page design to visually indicate what goes together, what doesn't.

CRAP = Contrast, Repetition, Alignment, and Proximity.

Another principle is ocus: Your design should enable the user to focus on the main content of the page (e.g., the textual information, the informative graphics, the art work) and not on blank space or page decoration.

Let's compare these examples:

• Print example: Rolex Awards for Enterprise
• Another look at: Wondermints fan site

Let's go over this CRAP principles design demonstration based on the Rolex Awards example above.

More examples:

• Another counter-example: 1001 Pens
• Example: IKEA
• Example: Drake's Cakes
• Counter-example: Drakes Cakes Online

Adding Sub Navigation to Your FRP

First, we'll discuss navigation and web semantics. Then we'll use the following models and tutorials to add subnavigation to your FRP.

Here are tutorials and some models for customizing navigation (using pseudo-classes) and then formatting navigation on a web page. We'll appply these first to the sub-navigation on your FRP.

• Customizing your links using pseudo-classes
• Basic subnav design: The Basic Horizontal List
• Fancy subnav design: Eric Meyer's Navbar

Adding Figures and More Color to Your FRP

Refer to the Graphics section of the FRP assignment.

You should have three images with captions, including source information, ready to use on your page. We'll structure these using the the figure microformat and add them to the page.

Here are some more color resources. And (if I remember) we should also take a look at some of these web typography resources.

First Text Page Assignment: Book Review

The product or event review is an important and widely used genre of web writing. It provides content of interest to a wide range of users; is often a good way to attract attention to your website, no matter the topic of the site; is a way of entering into dialogue (directly or indirectly) with other web authors; and is a rich method for adding context for your site (to your project, your work, etc.) by presenting, in the form of a review, relations between the content of your site and one or more other products.

The first major page of your final project will be a review page with an accompanying sidebar of blurbed links related to the subject(s)/product(s) of your review(s). The default assignment is a book review, but we can discuss other products (or events) for review. Whatever the object of your review(s), the page (excluding the sidebar and any long quotes) must contain at least 1200 words of writing (equivalent to about 4 double-spaced pages of printed text).

As discussed, the book should be a recent (as recent as possible but within the past five years) book related to your site topic and of likely interest to your intended site users. Also, it must be approved by the instructor.

You may review multiple books or other products, but need to discuss this with the instructor.

We'll use the hReview microformat to help give a standard structure to our review(s).

Here are basic requirements for the page:

• Length: 1200-1500 words.
• A title for your review.
• Standard book publication information in separate div: author, title, publisher, year of pub., number of pages, number of illustrations.
• The review text should begin with a catchy NARRATIVE introductory section. To get a sense of this, take another look at how "Gaming Evolves" begins.
• Review text divided into short paragraphs and at least four subsections, each with its own title
• three images in addition to the product image(s). Each image should have a caption, a title, and (linked) source information if the image is not of your own creation.
• A few quotes from the book under review with page numbers in parentheses after the quote.
• At least three in-text links in the review text (as I'm using for the term "pull quote" below).
• At least one pull quote from your text. (See pull quote article and linked examples at HTML DOG; Griffiths's third example is esp. interesting). Note: A pull quote is a quote from your writing, not from the book or other product(s) under review.

Note: the word count fo 1200-1500 words excludes block quotes.

The review should not simply summarize the book but should describe and evaluate it critically. For some content guidelines, see On Writing Book Reviews.

Some examples (2 book reviews, 2 different online articles):

• Sample online book review: PHP and MySQL by Example.
• Another example: The Dream Life.
• Sample feature article: "Volumetric Mixers: Taking the Concrete Industry From Niche Market to Mainstream" (source: Grading and Excavation Contractor magazine)
• Another sample feature article: "Mapping How People Use a Website" (source: Mappa Mundi magazine)

CSS Layout, Cropping, and Positioning

So far we've looked at centering a div (or other block-level element), a basic layout technique. If we have time today we'll begin to examine a few more layout techniques, and then continue with them in more detail next week.

We'll try an exercise based on Float Tutorial 4 on Max Design's Floatutorial. Using your photographs of the end of the world from the Week 2 homework, you'll build a slightly larger-than-thumbnail image gallery.

1. On your local desktop: create a new HTML page based on the template we've been using. Include your CSS either in the head of the page or in an external file.
2. Save the page as "gallery.htm" or something like that.
3. Copy the 260px versions of your photos to an "img" folder on the desktop.
4. Inside the #wrapper div of your page, markup your images and captions (legends) using the figure microformat we used for your FRP.
5. Following and adapting the MaxDesign thumbnail gallery tutorial, arrange your images in a 3 by 3 grid.
6. Finally, using the block-level centering method from the previous classes, center the gallery grid on your page and upload the completed file to your drafts folder.
7. Check the permissions, and rest.

In class

• Preliminary research for FRP. Turn in a printed copy of your research/bibliography.
• Web Bio Page with beginner CSS added in an external file and a text image inside your h1 element. Save in your "drafts" folder, and post a link to your "biopage2.htm" in the "Biopage, CSS version" thread on the Class Forum.
• Intro, captions, and nine photographs from the End of the World saved for the web at three sizes: 100px wide, 260px wide, and 464px wide. Heights should be kept more or less the same for all nine images at each width. Thus one image is height 80px when its width is 100px, the other images should also be height 80px when at width 100px (give or take a few px where needed). Use cropping to help with this. Print the short intro text and captions.
• Linking Questions. Turn in a printed copy if you failed to do so last time.

Introduction

How web authoring differs from web design.

The traditional division of labor (with reference to Robert Waller): content producer, web designer, and content user. How the relation between the three roles has changed. The concept of "access structure."

Remarks on completing assignments.

Project Ideas (Revisited)

It's time to narrow down your project ideas, at least to a point where you can begin preparing productively for the actual project. The focus of the project often will change over time but it needs a viable start.

Two requirements to keep in mind:

1. Whatever your idea, the project will need to be able to satisfy a variety of genres and types of content. That is: Your project cannot be the same kind of thing (e.g., a product or restuarant review) on page after page. Thus, one or two pages for reviews; then, on to something else.
2. Your project needs to have a plausible focus that runs throughout the site and that at least three different kinds of user might find an interest in. The three types (your imagined, intended audience) might have differing degrees of interest, or be attracted to different parts or aspects of the site, but there should be something for each of them.

If you're stuck for an idea, a good place to begin is to find a good non-fiction book that interests you (you'll need to write a review of one for your project) and develop your project idea from the book.

Here are some very general types of project:

• Portfolio/Professional Representation site
• Projection Documentation or Supplement site (art project, research project, living on nothing but fast food or food stamps project, etc.)
• Web Comic Site
• Family (or Organization) History site
• The Location Inventory Project (site devoted to a particular place of interest)
• The Truly Neglected Subject Project
• The New Angle on an Old Idea Project
• The Polemical Project (where you argue with other sites about a topic)
• The Niche Project
• The Insider's View Project

Note: The Everything-in-One-Place Project is a BAD idea.

Here is a strong final project from last year: The Decline of Railroading in America.

Remember, it's important that your final project does NOT cover something already covered (at least not in the same way, from the same perspective, for the same audience) or do something already well-done on the internet. If it's already there, it doesn't need to be there twice.

As you you think about your project, remember also that your idea should allow you to satisfy the page genre requirements.

Finally, all project ideas need to the instructor's approval.

And with that said, here are some projects or topics to avoid:

• Cars
• Sports Teams
• Places to eat / do things / get your hair cut / etc. in New Brunswick
• Things to do in New Brunswick, or New York City (etc.) – but a highly focused version of this topic, especially for a neglected hobby or activity, might work fine.
• Unfocused personal sites ("All about me!")
• Any site that does what another site already does

Weekly Novelties and Sites of Interest

Interesting use of pseudo-archaic but very unified page design: Dollar Dreadful Family Library.

A nice collection of banners from the Little Nemo classic Sunday comic strip.

And then there is Think Vitamin.

Page Complexity

Basic page design: Strictly Film School's Kiyoshi Kurosawa page.

Fancy page design: The Lippincott homepage.

The differences in design are quite clear. But what do these pages have in common?

Validating Your CSS

Open the CSS-added version of your bio page both remotely in Firefox and locally in Notepad.

Next, test your bio page's CSS in a CSS Validator to see if it validates.

If the page fails to validate, fix the problems, re-upload your file, and check again.

Repeat until valid.

Bio Page / (X)HTML Review

Start by looking at XHTML v. HTML; Bad Tags; and Span and Div.

Next, let's look at the content, design, code, and image use of some of your Bio Pages. We'll access these via the Class Forum.

Note: Remember that a link to your work needs to be posted in the correct thread in the forum. If the link to your work is missing (or if it doesn't work), your assignment will count NOT submitted.)

Finally, let's preview the Adding CSS part of the FRP assignment.

Color Schemes

Your sites should not be TOO colorful, but color should be used both aesthetically and meaningfully. For instance, use color to organize your page visually.

One method of logical page-coloring is to use a key image – e.g., from your home page – to generate a multi-color palette for background color, border colors, link colors, etc.

Select the image. Then apply the image to, e.g., Color Palette Generator, and see what we get.

An especially useful web tool for generating and testing coherent color schemes is Adobe Kuler.

FRP Assignment

We'll begin to build the FRP in class. We'll use the in-class exercise to review the basic HTML and CSS we've covered so far. We'll also practice developing good page structure and semantic markup (introduced briefly in the last class). And we'll see how using microformats can help us to design a better FRP.

This exercise will also give us a chance to practice using the CLASS and DESCENDANT methods of CSS selection.

We'll start with the basic XHTML page template from Week One. We'll go on to add some general page structure using divisions ("divs") and spans, introduced in the last class. Here we'll also include a link to an external CSS file ("frp.css"), also introduced in the last class.

Next we'll add some markup more or less specifically suited to the FRP (i.e., to online bibliography pages). As part of the stage of the building, we'll refer to a sample bibliography using a provosional citation microformat that I constructed for this course.

If we have time, we'll end by looking at some ways of including illustrations (informative images or "figures") in the developing page design.

In class

• Class Forum Replies to the "Introductions" and "Project Ideas" threads.
• Web Bio Page (XHTML version), saved in your "drafts" folder. At the start of class post a link to your online bio page in a reply to the "Web Bio Page" thread on the Class Forum. If you have trouble uploading your bio page files, bring them to class via email or portable drive and we'll go over the SSH transfer process again.
• Linking Questions Turn in a printed (not handwritten) copy.

XHTML Review

More on the separation of content and presentation. Also: basic structure patterns. And intro to microformats and the concept of semantic markup.

Validating Your XHTML Markup

Open your bio page both remotely in Firefox and locally in Notepad.

Next, test your bio page's markup in an HTML Validator to see if its web-standards compliant.

If the page fails to validate, fix the problems, re-upload your file, and check again.

Repeat until valid.

Fixing Your Images

If any of your images fail to display, refer to this image display problem checklist.

If your images successfully display, there are still a few things we'll need to check – namely, size, scale, quality, and proportions. To help us to go over these points, we'll use this sample Bio Page: 500 words about Me.

Photoshop Introduction

We'll take a look at some basic features of graphics editing and manipulation, using the Adobe Photoshop CS3 application. Specifically, we'll concentrate on three features that you'll use to revise images for your personal Bio Page: layers, cropping, and saving (images) for the web. We'll also look at as some basic text editing in Photoshop.

CSS, Block-Level Elements, and the Box Model

You can think of the web page structure as a series of smaller boxes inside larger boxes (body and head inside html, paragraph inside body, table cell inside table row inside table, etc.) and boxes in a stacked order or succession (e.g., one paragraph following another paragraph following a table, etc.).

Code:

<html>

<head></head>

<body>

<p></p>
<p></p>

</body>

</html>


Each box on the page, in turn, consists of a further series of boxes:

W3 Schools Box Model Diagram. Source: guiStuff.

Note: Elements inside the body element divide between block-level and inline elements.

Adding Basic CSS to Your Bio Page

After a short demonstration of some basic CSS (using this Sample Bio Page), continue to develop your Bio Page by adding styling to it with CSS. Follow the CSS Beginner tutorial at HTML Dog.

HTML Dog covers three ways to apply CSS to your HTML file. For this assignment, you'll use an EXTERNAL file (e.g., biopage.css) that you'll link to from the head of your Bio Page.

Following HTML Dog, you'll add styling to your body, paragraphs, headers, table, list, etc. Add text styling, color, margins, padding, and borders to the elements of your page. Try to get your page to look distinct but also clean and readable.

For a list of Common Fonts and other useful font-related material, see the Font Resources at Browser News.

For a quick one-page reference, here is a CSS Cheat Sheet.

Further Reading Page (Assignment)

Read the assignment. Then we'll discuss it. Or, we'll discuss it first. We'll begin working on this page as we finish the bio page. For the next class (Feb. 11), you'll need to complete the research/prep and graphics parts of the assignment. Using the research, then, you'll begin building the actual page in the next class.

Project Ideas

If you're stuck for an idea, a good place to begin is to find a good non-fiction book that interests you (you'll need to write a review of one for your project) and develop your project idea from the book.

Here are some very general types of project:

• Portfolio/Professional Representation site
• Projection Documentation or Supplement site (art project, research project, living on nothing but fast food or food stamps project, etc.)
• Web Comic Site
• Family (or Organization) History site
• The Location Inventory Project (site devoted to a particular place of interest)
• The Truly Neglected Subject Project
• The New Angle on an Old Idea Project
• The Polemical Project (where you argue with other sites about a topic)
• The Niche Project
• The Insider's View Project

Note: The Everything-in-One-Place Project is a BAD idea.

Here is a strong final project from last year: The Decline of Railroading in America.

Remember, it's important that your final project does NOT cover something already covered (at least not in the same way, from the same perspective, for the same audience) or do something already well-done on the internet. If it's already there, it doesn't need to be there twice.

As you you think about your project, remember also that your idea should allow you to satisfy the page genre requirements.

Finally, all project ideas need to the instructor's approval.

And with that said, here are some projects or topics to avoid:

• Cars
• Sports Teams
• Places to eat / do things / get your hair cut / etc. in New Brunswick
• Things to do in New Brunswick, or New York City (etc.) – but a highly focused version of this topic, especially for a neglected hobby or activity, might work fine.
• Unfocused personal sites ("All about me!")
• Any site that does what another site already does

In class

Introduction

A PDF copy of the course description (syllabus) & policies can be found on the Useful Stuff page.

The introduction will cover the following topics:

Web Page Examples

Let's look at some examples of different web pages. Each of these pages belongs to a particular genre or familiar category of web page. The page includes eatures that users expect to find on instances of that genre. To what genre do each of the following pages belong? What standard features identify the page as instance of the genre?

1. Climate Change Symposium
2. Spearfish Design
3. Strictly Film School's Kiyoshi Kurosawa page
4. Robert Sapolsky Page

View the "source" code for the last example in Firefox (Ctrl + U), or use this link: Simple HTML

Here are examples of some common genres of site that, with some adjustments, would make suitable projects for this class:

• Professional Site for Writer: Rose George, author of The Big Necessity
• Webcomic Site: Jane Irwin's Clockwork Game
• Portfolio Site: Stanza, Artist
• Portfolio Site: Nathan Good, Architect
• Portfolio Site: Attitude Design
• Digital Art Project Site: Noplace

I'm trying to find a good example of a family history site; I'm sure many are out there, but the ones I find are kind of bad. Still, that is one kind of project.

Note: A project for this class might present and document an online art (or other) project. Or it may document and supplement a non-web art (or other) project, your own or (with some qualification) the work of another.

Final Project

The Final Project for Web Authoring involves building a multi-page website devoted to a specific topic or purpose. You select the topic, but the instructor must approve it. There's a lot of material on the internet, but there are also many gaps or absent perspectives. Your project should begin to fill one of those gaps or present a new perspective.

You'll work on the final project for about ten weeks of the semester, so it's more a semester project than a final one. Also, since you'll spend quite a bit of time on it, the project's topic should be something in which you have interest.

Note: You may produce a website to supplement research you've done in another class (e.g., producing an online version of a literature or science project). This will save time, since you'll revise and adapt work you've already done. If you want to do this, be sure to let the instructor know.

The Final Project develops in three stages. The first stage produces early draft pages: an online book review, a links sidebar to add to the book review page, and a feedback page.

The second stage results in the Midterm Prototype, due around the eighth week of class. For the midterm, you'll revise your book review, links sidebar, and feedback form; transform your bio page (that we start today) into a more formal Author's Page; develop a side navigation strategy and design; and add a front page (AKA home page, title page) that introduces visitors to your evolving website.

The final stage begins after the midterms and produces the Final Project proper, due about a week after the final class meeting. For the Final Project proper you'll fully revise the midterm and add an illustrated essay, a timeline, a glossary, and a few other supplementary pages. Emphasis will be placed especially on developing the visual aspect of your website.

To get a sense of what this work comes to, let's take a look at some Final Projects (FP) from previous semesters.

1. The Escher Effect
2. Pirates: Separating Facts from Fiction
3. Early Female Auto Racers
4. Rich Couzzi Graphic Design
5. Are Newspapers Facing Extinction?
6. Life as a Student Athlete
7. The Scientific Marine Aquarium

We'll look more closely at some of these sample projects over the next few weeks.

SSH, FTP, and Folders

We'll go over the following:

• Local disk space, remote disk space, and how to get from one to the other.
• Grade-A Browsers: Firefox, IE6 and up, Safari.
• File and Folder Naming Rules: no blank spaces, no caps, lowercase extensions only (i.e., .htm, .gif, .jpg, etc.).
• File and Folder Properties and Permissions

Make folders for course work.

Complete SSH exercise.

Web Bio Page

Let's start to make a basic XHTML page step by step with this first week demo. The result of this demo will become the starting point for your Bio Page.

With the demo complete, begin to make your personal Bio Page. Complete a draft of the page for next week.