Web Authoring Syllabus
Fall 2009

Discussion

This Week's Items of Interest

An online portfolio of work by Allyson Haller.

Review of Last Week

If needed, we wil review any of things covered last week: home and visual page revision; adding functionality to your Feedback Page using the Show Form PHP script (or an equivalent script); jQuery based image galleries; and cross-browser compatibility using conditional comments.

Final Typography Review

Dividing text into short (chunked) paragraphs. Pull quotes. Etc.

As noted last week: The Feedback Page uses a form element as its main structural feature (to input the user information). The reciprocal Showform Page uses a table element as its main structural feature (to output the user information). On designing and styling tables, see Smashing Magazine's Top 10 CSS Table Designs for the basic advice and good models.

And speaking of the Feedback Page: Do not forget that you need SPACING between fieldsets. Constrain the width of fieldsets as you would paragraphs and other text elements. Moreover: minimize the verticality of the layout to minimize scrolling. For example: the buttons for YES and NO answers or checkbox answers should not be on separate lines. Each input does NOT need to be in its own paragraph.

For example, a fieldset doesn't need to be stretched out onto many different lines. Notice how the layout below from a user survey for a biology club website makes using the form difficult, slower, by stretching things out. It also doesn't look very good and IGNORES the proximity principle.

Instead, it could easily be compressed, like this:

Discussion

This Week's Items of Interest

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

Website example: Garen Ewing's Rainbow Orchard. Genre: web comic.

Soh Tanaka, 5 Useful Coding Solutions For Designers And Developers. The first solution discussed is that of designing a CSS timeline. The Timeline itself can be found at 37signals.

Below is an interesting variation on the comparative timeline found in a magazine. This is the kind of thing that would not be out of place on a designer's or artist's portfolio site. (A few more visuals, of course, if it was to count as a visual page.) A timeline doesn't need to to measure in years or centuries. Scale your timelines to the topic of interest.

Adding Simple JavaScript to your EWP or Visual Page (2)

One more demo: Denis Goes to Namibia. This uses Trent Foley's Gallerific plug-in for jQuery.

Review of Recent-ish Work

For old times' sake: We'll take a look at your Flash EWP, Visual, and Feedback Pages.

Revision

Here as an example of a homepage revision process.

Related reading: Chris Coyier, Text Blocks Over Image.

CSS Bugs & Hacks

Web pages that display properly in Firefox don't always display properly in IE. To resolve this problem: Use Conditional Comments to get your site to display accurately in Internet Explorer. Note: Your final project will need to display properly in Firefox 3 (or higher) and IE 7. If it displays properly in IE 6, that's extra credit (if I check). IE 8 doesn't count. If you're checking in IE 8, set its behavior to that of IE 7.

Related reading: 9 Most Common IE Bugs and How to Fix Them.

Here is another explanation of conditional comments.

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

<!--[if IE 7]> <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

PHP: Getting the Feedback Page to Send Data

Like Javascript and the Actionscript underlying Flash, PHP is a scripting language. Unlike the other two which run in a browser, PHP runs on a server (e.g., on Eden or RCI).

For your final project, implement the Show Form PHP script (or an equivalent script). This will generate a new page containing a table that presents the feedback information from your Feedback/Form Page.

Basically you can cut and paste the code into Notepad and save it with a .php extension. Then, in your FORM tag on your Feedback Page 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 (Eden does), but it will not work on your desktop or other personal computer. So you'll need to check the script online.

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

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

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

Discussion

This Week's Items of Interest

Smashing Magazine: CSS-Based Navigation Menus: Modern Solutions and Navigation Menus: Trends and Examples.

Data Visualization: Modern Approaches

Sprint Widget Mosaic = Visualizing the Now!

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

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

Adding Simple JavaScript to your EWP or Visual 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.

Once you've tried the JS basics, you might want to work with the jQuery framework (see below) and one of the numerous jQuery slideshow plug-ins. On the latter: See for instance, 15 jQuery slideshow/gallery plugins.

More JavaScript: JS Libraries

Two good script library collections to start with:

• jQuery: "Write Less, Do More"
• Adobe Spry (works with Dreamweaver)

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

Visual Page Genre: Timeline

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

Discussion

Post-Midterm Review: Part One

In which we critically review your midterm projects. First, we'll look at a few pages of each type to get a sense of some do's and don't's. Then we'll go through and collaboratively critique the projects as wholes.

As mentioned previously, much of the specific feedback on your midterms will come via this collaborative review. It is not something to miss.

One thing we'll need to focus on is naturalizing your sitenav links. That is: giving them logical and macro-genre-specific titles and a familiar order.

And again (because some of you are still, madly, doing this): DO NOT add, substract, or modify in any way the contents of your mid folder.

Now on to the review. . .

First, let's look at an About (the Author) page. And another one.

Next: a case of Site Navigation (and nav layout).

Next: a case of typography and text layout.

Next, let's look at a Book Review. And let's look at a second Book Review in terms of its typography and image presentation. And one more before we move on.

Finally, let's look at a Home Page.

Note: The Visual Grade on the Midterm does not include the Visual Page. Rather = it covers the visual content on your Home, Review, and About pages only.

Resources & Other Things of Interest

Good examples of web comic with extras: Rice Boy.

Visual Page Review

In which we review your Visual Pages. For example: A Visual Guide to Touring and James Whale's Monsters.

I recommend creating a subnav link to the TOP of the visual area of the visual page, i.e. the point at which to best view the gallery (or whatever) at 1024 x 768 px res. Users will find this helpful.

Discussion

Relating to the Midterm

A few things relating to the recently occurring midterm will be discussed, including:

• Using relative links for sitenav and images (or risk not passing the final)
• Using site names and not URLs as linking terms
• Changing your mid folder contents after submitting (don't!)
• Keeping essential content within the Safe Area for 1024 x 768 px resolution
• Making sure the book review and other writing is long enough (minimal length): in which the "inc" grade and its terrible consequences are explained
• Ordering your sitenav links
• Making book titles look like book titles
• Using small images for thumbnails – or having an unhappy future

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

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.

Visual Page Review

In which we review your Visual Pages. For example: A Visual Guide to Touring and James Whale's Monsters.

I recommend creating a subnav link to the TOP of the visual area of the visual page, i.e. the point at which to best view the gallery (or whatever) at 1024 x 768 px res. Users will find this helpful.

Feedback/User Survey 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 using the form element and its various sub-elements; 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 page using a form element with multiple fieldsets. I'll introduce forms a little in class; but you'll need to work with Huddleston and the HTML Dog 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!"