In class

Work Due

• Progress on final pages. At this point you should have versions (not necessaily complete, but on their way to being) of all your main pages (i.e., with the possible exception of the supplemental pages). These pages, again, need to be visible (with permissions set correctly) in your "drafts" or "final" folder.

Weekly Novelties and Announcements

Yet another comparative timeline: The Times Square Time Ball.

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.

This is an example of a PHP Page Changer script.

Here is the PHP code for the page changer. It can easily be integrated into a the HTML of any page. However, to work, the page will need to be re-saved with the .php extension.

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.

Work on Final Project

Review the Final Project checklist (revised for clarity on Dec. 11).

Test your pages in IE 6. Test your Javascript.

Clean up all your old (midterm era) pages. For example: Older Bio Page; New Cleaner Bio Page.

By "cleaning up," of course, I mean not simply visual revision. Rather: content needs reconsidering. For instance, your bio page should represent you as the author of your final project, not as the student who began this class 14 weeks ago. Finally, cleaning up means updating your code to reflect best XHTML and CSS practices.

In class

Work Due

• Printed draft of text for the second text page. 1200-1800 words. One and a half line-spacing and double-sided pages are fine. Staple and number your pages and use a SERIF font. Include a final word count at the beginning or at the end of the text. Make sure your text has a title.
• 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.

Weekly Novelties and Announcements

My classes for Spring 2009.

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

Here are some more (recent) timeline examples:

• Graham Roberts and Ben Sisario/The New York Times, Comparative Timeline for the new Guns 'n' Roses album, Chinese Democracy.
• New York Times, Mumbai Terror Attack Timeline.
• 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.

Note: these are not necessarily optimal timeline formats; they're linked for inspiration and class discussion.

Here is an example of one kind of interview text. Notice the mix of Leibowitz's quoted answers with the writers comments, summary, and contextualization.

Here is an example of a different kind of interview text. Here we have a few paragraphs of intro/set-up followed by illustrations and a question/answer format.

Condtional Comments Update

Here is another explanation of conditional comments.

Basic conditional comment for an IE 6 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.

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 Checklist

Revision

Another look at this homepage revision demo.

Final Project

Work on Final Project.

In class

Work Due

• Complete first draft of timeline page. Post a link to your page in a reply to the "Timeline Page" thread on the Class Forum. We'll begin developing the actual page in class.
• Ideas, preliminary designs and material for Visual Page.
• Note: The text for the second text page is now officially due week 13(the week after Thanksgiving) but you may submit your draft earlier.

Weekly Novelties and Announcements

Resource Overload: Deziner Folio.

For example: FlexiGrid demo; Ultimate Web 2.0 Layer Styles – Free Download; and my favorite of the day: the Smooth Scroll code.

Making embedding Flash movies in your XHTML easier: SWFObject.

Good image size and quality and in a narrow ("blog") column design: MoCo Loco

Ditto: London Ampersand Hunt

For those of you interested in adapting current print design trends to your webiste, observe The New(er) Typography: Counterless, Bold and mostly Geometric.

Finally, just because I like it: Retro-Futurismus.

Flash: Finishing Touches

Embedding links in your Flash movie.

Embedding your Flash movie (.swf file) in your HTML.

Work on Final Project

In class

Work Due

• Timeline content (events, event captions/descriptions, and images) and design for timeline. We'll begin developing the actual page in class.
• Note: The text for the second text page is now officially due week 13(the week after Thanksgiving) but you may submit your draft earlier. Length: 1200-1800 words. Topic and genre must be approved by the instructor. As discussed, the second text page should fit your site topic well (logically) and cannot be a simple report that gathers and presents information without some kind of argument, critical point of view, or organizing narrative. Consequently, even a tutorial should be framed by a narrative of some kind.
• Second note: As with the book review and blurb texts, a printed draft of your text must submitted prior to the final. Complete on-time work will receive comments and a letter grade. Other work will be marked Late, Incomplete, or Missing, and will affect your final grade.

Random Midterm Review (ii)

• CRAP
• Sitenav redundancy
• Header hierarchy
• Design responds to width
• CONTENT CONTENT CONTENT (or something like that)
• Sitenav page names (again)

Text Page Examples

We'll discuss these (further). Make sure you post a link to your example via the Class Forum.

Novelties

Kevin Cannon, Twin Cities Rock Atlas (.jpg) for City Pages.

Cannon documents and explains his design process for this project on his blog, Big Time Attic.

Interactive Narratives.

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 in Internet Explorer (I.E.).

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

Work on Timeline

Timeline should include 20 events, with illustrations (with title/caption and source information). Should be comparative, with in-text links (for further reference).

Style: visually, dates must contrast with descriptions. Other style points discussed in class.

Here's a mock comparative timeline design. It's static and clean but not too interesting. How might the Java swaps from last week be used to liven up the design?

Some older examples:

• 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

In class

Work Due

• Example of an online text that you feel would meet the requirements for the Second Text Page. Copy and paste the URL in a reply to the "Second Text Example" thread on the Class Forum. In the next class we'll go through these examples. Each student will explain his or her example to the class – i.e., how it works as a good example of an online text feature (that meets the reqs for this class); also, where it might fail in places.

Random Midterm Review (i)

• CRAP
• Sitenav redundancy
• Header hierarchy
• Design responds to width
• CONTENT CONTENT CONTENT (or something like that)
• Sitenav page names (again)

Text Page Examples

We discuss these.

Unusual Flash Example / Weekly Novelties

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

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

What I find exciting about the Bear movie/animated slideshow is its non-video photographic technique.

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.

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 Ad Assignment

This is a Flash assignment from last semester.

• In teams of 2-3, collectively plan and build 3-4 Flash ads, one for each of your projects.
• Each team member will then display ads for at least two other members on his or her website.
• Each ad will need to have some text, some graphics, some animation, and a link to your website. Sound is optional. (See full list of requirements below.)
• As a first step, study the Flash ad examples linked above as well as some of your discovery. Make a list of essential features (e.g., a link) and a list of optional features (e.g., fade-in/fade-put animation, replay buttons). These lists will supply guidelines for what each of your ads must include and some possibilities for what it could include (i.e., design options).
• As a second step, look at and discuss each others' projects. Then suggest ideas for possible ads, possible ad features, etc.
• Then storyboard the ads on paper. For images: draw them, use clip art, take your own photos. As with your visual page, try to minimize, even altogether avoid, any use of online images (e.g., via Google).

Flash Tutorials

• 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)
• Smashing Magazine's list of Best Flash Tutorials. For example: High-tech city 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.

Flash Ad Reqs

Here are the basic requirements for the flash ad:

• 15 seconds
• At least one SCENE change
• Use at least 5 symbols
• Animated text
• At least two motion tweens
• At least two shape tweens
• Can use photo images but must have non-photo graphics
• Link to home page of your website (extra credit for button links integrated into the animation)

Have fun!

In class

Work Due

• Midterm was due on Friday. Note: Once you've submitted your midterm, make NO FURTHER CHANGES to the files in your "mid" folder. Instead, as you update and revise, work on copies of the midterm files in your "drafts" folder.

Web Novelties & Resources of the Week

Simple but effective design: Kristine Janssen's Portfolio.

For ideas: Best of CSS Design 2007 (sez Web Designers Wall).

Tom Phillips, 20 Sites n Years

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

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.

What's Next

New Pages: Timeline Page, Visual Page, and Second Text Page (e.g., feature story, interview story, in-depth tutorial, critical analysis, comparative analysis, multiple-entry blog). Note that the second text page should fit your site topic well (logically) and cannot be a simple report that gathers and presents information without some kind of argument, critical point of view, or organizing narrative. Consequently, even a tutorial should be framed by a narrative of some kind.

New Code: Javascript, possibly Flash.

Some examples:

• Sample Second Article: Origami Tutorial.
• Banner and Site Nav Design, Site Visual Continuity: Organic Flash Forum (note: site might still be down).
• Home Page Design: Spearfish Design.

Revising Home Page and Site Navigation

Let's take a look at the site navigation samples from a few weeks back.

And some of the sample home pages as well.

Next: A home page revision demo.

And a note on centering text: If you must (i.e., if it looks really good), you can center headers/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 reading a little more difficult.

Revising the Feedback Page

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.

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.

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?

What was the first video game you remember playing?

How long did it take you to master the game?

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

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.

Visual Page

As discussed previously, the visual page focuses on the visual rather than the textual. The page must relate to your site topic. It should contain roughly 24 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 notice in it.

Here are some gallery pages for us to examine:

1. Photo essay using the author's original photographic images: A Chess Tourist in New York City - combined feature/gallery
2. Photo essay using rollovers: Medical Error
3. Manhole Covers - good captions (click on "view gallery" under the image)
4. Cyanobacterial Image Gallery - low-tech (old school) gallery
5. Roman Architecture
6. Ancient & Classical Architecture
7. Roman Architecture Clip Art
8. Gold Key Star Trek Panels
9. Pure CSS Cross Browser Multi-Page Photograph Gallery

Note: These examples are for class discussion; they are not necessarily models for your image gallery

Visual Page Examples from Previous Semesters

Note: The requirements for these differ slightly.

• Rodeo and Horse Show Pictures
• Anime Collector Gallery
• Anime Timeline
• Annotated Gallery using Rollovers: Arabic Script

Timeline Page

For the next assignment: You'll make an illustrated, interactive comparative timeline containing twenty or more events in two distinct categories.

Interactivity on the page can involve the display (i.e., dynamically displaying content), the navigation (subnav, cross-referencing, etc.), or both.

Bad example: Impressionism.

Good example: Manet and Maximilian.

Sample 425 Timelines

Note: These timelines were made for a somewhat different assignment; they are presented here for comparison and disucssion and should not be used as models for the current assignment.

1. Home Entertainment Timeline

Sample Non-425 Timelines

Note: Some are more interactive than others.

1. This Far by Faith timeline
2. Civil Rights timeline (nice and compact)
3. African American world timeline
4. Technology timeline (uses Flash)
5. Computer history timeline (uses PHP)
6. Timeline of sociology (needs images)
7. Boring (Holocaust) Timeline
8. Holocaust timeline (uses multiple pages)
9. Rutgers timeline (uses frames)
10. Shakespeare timeline (uses frames)
11. Interactive Flash Timeline: Don Cesar Resort

Class Work

Work though Javascript demos. Revise home page. Begin researching and constructing timeline page.

In class

Work Due

• Complete drafts of your BR and Feedback pages. We'll keep working on these in class; but all the basic pieces should be in place and visible online. Post a link to your BR page in the "Book Review Page" thread on the Class Forum.
• As always: bring the HTML Dog book or its equivalent.
• Your Midterm Prototype is due this Friday, October 24, 6 PM. (Remember the small change to the reqs announced last week. See also the note on building the midterm for guidelines for the feedback page.) Post a link to your (new) "mid" folder in the "Midterm Prototype" thread on the Class Forum. Note: The midterm won't count as turned in until your reply appears.
• 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.
• Note: As discussed in class, I will not grade your midterm without first seeing printed drafts of your book review and sidebar blurbs. If these assignments were submitted on time, they received a letter grade. Otherwise, they're either Late, Incomplete, or Missing.

Feedback Page and Questions

We'll review the feedback questions you posted and the ones on your pages, and talk about how to sharpen and broaden them for the midterm and beyond.

But first a novelty: web.Burza – Superhero Edition.

Midterm Work

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

For the latter, refer to the material in the HTML Dog book and to the beginner and advanced form tutorials on the website. Use CSS and the CRAP principles to style your form and make it easy to use. 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).

Revise BR text, links blurbs (there'll be a revision exercise in class), and Feedback Questions. Insofar as possible: Your original BR text should be chunked and trimmed by 15-25%. You'll then add new material in response to my feedback and peer-review (in today's class). Unrevised BR 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.

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, BR, feedback, 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

Work Due

• Feedback questions: bring printed copy and post to forum.

Small Change to Midterm

I'm subtracting the Author's Page (new bio page) from the midterm. (This will probably return as a req for the final.) Instead, you'll add a small bio paragraph or two to the sidebar of your BR page (and possibly your other pages as well).

For an example, scroll down to the ABOUT ME section in the sidebar of Sheila Heti's I Dream of Hillary blog.

Note: The midterm will be due online (with a notification in the class forum) by 6 PM, next Friday, October 24. You'll need to create a "midterm" folder inside your "425" folder and copy your midterm pages, CSS file, and "img" folder there. The "midterm" folder should contain only the files of your midterm. Nothing else. I regret to seem cruel, but having non-midterm pages or images in your midterm folder will takes points away from your grade.

Building the Midterm

We'll start today with the Book Review and Links Sidebar. If we have time, we'll work on the Feedback page as well.

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 9 in the textbook.

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

Finished drafts of the BR and Feedback pages are due next week. Late or incomplete work on these pages will affect your midterm grade.

Revising the Book Review

In class writing exercise: Compose a brief paragraph in which you discuss the intended audience of the book 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?

When you've finished copy and paste your paragraph in a new reply to the Further Reading Question 1 thread on the Class Forum.

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

Site navigation

Your HP will include and emphasize a site navigation design. This same design may repeat on the other pages of your project. Or you may develop a visually related but distinct site nav suited to the layout of the other pages. Other than on the home page, site nav should remain visually the same and in the same location. Site nav links should NOT change apperance or position from page to page or your user will get lost, confused, annoyed.

Here are some interesting examples of site navigation:

• Two complementary sitenav menus: Francis Naumann Gallery. Note the two menus of site navigation. There is no rule limiting site nav to a single menu.
• John Coulthart (graphic artist). Some clever and attractive menu design and great, unusual site-thematic page names like "Catenation" (for links) and "Lexiphania" (for writings).
• Abandoned Places. An example of the site nav link combined with a coordinated image. This can be done with Javascript or purely with CSS.
• Flash banner with subtle site nav: Alan Moore Fansite.
• Angled links menu: Urbicand animations (click on Animations link to get to new window for this example).
• Not even sure what to call this one; in Flash: Kashiwa Sato III

Revising sidebar links/blurbs

Some things to keep in mind:

• Relate links to the book review where connection is not obvious.
• Embed the link in the blurb.
• Use the site name to refer to the site: never "this site," "this website," or "here."
• Use colorful proper names or cool words/key words to add detail and searchability to your list.
• Offer examples of what users will find on the other side of the link.
• For big collections of information, offer either unusual combinations of examples to suggest the range or, more boring, the old "everything from A to Z".
• Use the proximity principle: Group related links together.

Here are some samples. The first blurb might accompany a partly comic review of a Chuck Norris biography, the second a more serious review of the "browser wars":

• So you know everything about Chuck Norris? Well, Chuck Norris Facts will show you how little you really know. For instance: "If you have five dollars and Chuck Norris has five dollars, Chuck Norris has more money than you."
• Internet Explorer is no longer the only elephant in the room. Follow the slow but steady month by month rise in popularity of Firefox at W3 Schools' Browser Statistics. As you'll learn, "Statistics are important."

One technique is to include a short list of examples in combination with brief descriptive phrases. Let's apply this idea to the following test cases:

• From Pac Man to Virtua Fighter, Classic Arcade Gaming caters to your classic arcade needs. Learn everything you need to know about the history, and recent decline, of arcade gaming: ...
• Logopond is where many professional designers post their latest projects for other designers to see and comment on.
• Before: Famous Pirates features biographies of various well known and less well known pirates. It also includes some general infomration on the ships and period.
• After: While dull to look at and a little slow to navigate, Famous Pirates offers some of the best online biographies of well known and less well known pirates, like ...

Class work on/toward the midterm prototype

Work on the Book Review page. I'll go over some features and techniques in class.

As noted in the assigmnet: The page needs a banner and the infrastructure for site navigation. Make a horizontal list of placeholder links for the site nav div under or above the banner div in your header. For link/list ideas, models, and sample code, survey the Listamatic at MaxDesign.

Begin work on Feedback Page and Home Page.

Helpful Links

Here are some Photoshop and image swap/rollover related links that might prove useful for your home page or other parts of your midterm:

• Here are a few Photoshop tutorials that can prove useful as you work on your pages.
• Image swap tutorial.
• Old home page with rollovers: Bassosophy
• Home Page with image map: Early Cosmetic Advertising
• Image maps are fairly easy to make but editing applications can certainly make the process easier. I haven't tried this Online Image Map Editor, but it looks friendly.

In class

Work Due

• Book Review text – bring a printed copy to class to turn in and save an electronic copy in your "hw" folder. Include a word count at the end of the text.
• Nine links blurbs – bring a printed copy of your blurbs to turn in and save an electronic copy in your "hw" folder.

Midterm Prototype Preview

The midterm prototype is the first draft of your final project and will be due online by Friday, TBA, 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 9-12 links
• Author's page, professional rather than personal in style, tone, and content.
• Feedback/User Survey Form page
• Works Cited page (optional)
• A single external CSS file for all pages of the site.

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, as on this successful website.

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.

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.

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.

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.

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 from the Week 2 homework, you're build a slightly larger-than-thumbnail image gallery.

1. Copy your biopage2.htm and img folder to your local desktop.
2. In Photoshop: Using the original full size photos, crop or cut and paste intriguing details of about 180px wide and 160px high. You'll want to end with six of these. Each detail should come from a different photograph. Save the cropped images in your "img" folder on your desktop.
3. Following and adapting the tutorial, arange your new images in a 2 by 3 grid.
4. Finally, add the grid to, and center it on, your page bio page.

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

Work Due

• Project Proposal and Book Review Choices – Post a response to this thread in the Class Forum.
• FRP – first draft with HTML, 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 Fourm (Tue, Wed).
• FRP Update As discussed in class: don't underline book titles. Use a title span (as discussed and as we'll go over again in this week's class).

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

Let's compare these examples:

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

More examples:

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

Adding Navigation (Menu) and More Color 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

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

Adding Web 2.0 Style Buttons to Your FRP

A further step: Use Photoshop's rounded rectangular shape tool and layer styles and effects to create a set of Web 2.0 style buttons for your FRP. To help with this try using Deziner Folio's Ultimate Web 2.0 Layer Styles (free download).

First Text Page Assignment: Book Review

For the first major page of your final project, you'll write a 1200-1500 word book review with an accompanying related links sidebar. 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 needs to be approved by the instructor.

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
• 3-5 images in addition to cover image and/or author photo (both optional). 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 examples at HTML DOG).

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 from the Week 2 homework, you're build a slightly larger-than-thumbnail image gallery.

1. Copy your biopage2.htm and img folder to your local desktop.
2. In Photoshop: Using the original full size photos, crop or cut and paste intriguing details of about 180px wide and 160px high. You'll want to end with six of these. Each detail should come from a different photograph. Save the cropped images in your "img" folder on your desktop.
3. Following and adapting the tutorial, arange your new images in a 2 by 3 grid.
4. Finally, add the grid to, and center it on, your page bio page.

Note: If we run out of time, we'll work on this exercise in next week's class.

In class

Work Due

• Preliminary research for FRP. Turn in a printed copy of your 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.
• Six Photographs of Your Daily Environment added in a new section to your Bio Page.
• Linking Questions. Turn in a printed copy if you failed to do so last time.

Weekly Novelties

Unauthorized Photoshop mods and remixes of Scott McCloud's Google Chrome comic (last week's novelty): "Google's Chrome Comic Gets Bastardized 70 Different Ways".

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.

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?

Your Final Project

As described under Week One, you'll work on the Final Project in several phases. The first phase culminates in the Midterm Prototype, during around Weeks 7 or 8.

First you'll write a book review of a recent non-fiction book strongly related to your topic and then build a Book Review (BR) page containing the review. Next you'll add a links sidebar to the BR page. Then you'll build a Feedback page, in which you seek different kinds of information and potential content from your site users. Finally you'll re-make your Bio page and design and build a preliminary homepage with introductory material and a few other features. You'll also design a single banner, based on the homepage design, to use on each of the other pages.

If you look at the sample final projects linked under Week One, you can sense of what each of these different pages involves.

Since you're going to begin your project with the book review, the best step to take as you determine what your project will be, is to find a recent non-fiction book. If you're struggling to find an idea, find a book of interest and use that form the idea. If you already have a good idea, use the book to sharpen it, to narrow down the idea.

The easiest way to find a book, I think, is to perform a key word search in IRIS, the RU Libraries online catalogue. Find a few books, check them out the library, and then pick one.

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 an 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

Complete the Research Review for FRP.

After the research review, work on building FRP with XHTML and CSS.

Photoshop Exercise

For reference and review: Adobe Photoshop CS3 Tutorial

In class

• Class Forum Replies to the "Introductions" and "Project Ideas" threads (Tue, Wed).
• 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 (Tue, Wed). 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.

Weekly Novelties

Google Chrome: The Comic by the Chrome Team and Scott McCloud. (And as I'm typing this, a guy has come on the radio to say that he thinks the advent of Google Chrome was the biggest [overlooked] news of last week.)

Related: Patrick Montero, Interview with Scott McCloud, artist behind Google Chrome comic (Daily News).

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.

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

<html>

<head></head>

<body>

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

</body>

</html>


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

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.

Griffiths 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 next week, you'll need to complete the research/prep part of the assignment. Using the research, then, you'll begin building the actual page in 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:

• The Everything-in-One-Place Project (a BAD idea)
• The Location Inventory Project
• The Truly Neglected Subject Project
• The New Angle on an Old Idea Project
• The Polemical Project
• The Ultra-Specific Project
• The Super-Targeted Project
• The Insider's View Project

And here is a particularly excellent 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) 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
• 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

The introduction will cover the following topics:

• Course objectives - technical, rhetorical, critical, and aesthetic
• Combining content and layout both aesthetically and rhetorically
• Best practices
• Ethics and ethos of web production
• File management
• Semester structure - three phases
• Class structure
• Class website
• Web standards
• Web content: text, graphics, services/applications
• Three kinds of language: markup, styling, scripting
• (X)HTML, CSS, Javascript
• Other applications: Adobe Photoshop, Adobe Flash

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

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. Death & Life of a Fictional Character
6. Western Riding & the American Rodeo
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 Names: no blank spaces, no caps, lowercase extensions.
• File and Folder 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.