The Phantom

The Phantom

Who is the Phantom?

Visit the web authoring animated preview to see this champion of good web design in action.

Schedule - Fall 2007

Week One

Tuesday, Sep. 4; Wednesday, Sep. 5
After a short organizational meeting:

In class

    Introduction

  • Objectives - technical, rhetorical, critical, and aesthetic
  • Combining content and layout both aesthetically and rhetorically
  • 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, Macromedia Flash

    • Examples

  • Example: Climate Change Symposium
  • Example: Simple Bio Page
  • View the source for this page in Firefox (Ctrl + U), or use this link: Simple HTML

    • Final Project

  • Preview 425 Final Project (FP) assignment
  • Object of Comparison: The Deep Woods
  • Some previous Final Projects:
    1. Death & Life of a Fictional Character
    2. Western Riding & the American Rodeo
    3. Wicked Women
    4. Women of the Arts
    5. Base of Bhangra
    6. The Scientific Marine Aquarium
  • We'll look more closely at these sample projects next week.
  • Interactive Flash Example: Argon Zark! web comic, page 55

    • SSH, FTP, and Folders

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

    • Class Forum

  • Register for the Class Forum.
  • Post a reply to the "Introductions" thread, introducing yourself (e.g., major or likely major, career plans, interests, technical experience).

    • HTML & XHTML

  • Mark-up = labeling page elements, such as paragraphs of text or images, with tags, such as the <p> tag or <img> tag.
  • Elements and sub-elements
  • Semantic mark-up and the "Many Readers Model" of web authoring
  • Who/what needs to read your website?
    1. Site users
    2. Browsers
    3. Search engines
    4. Collaborators and inheritors
    5. Screen readers (disabled users)
    6. The Government
  • Starting a basic HTML page step by step: Week 1 Demo.
  • The result of this demo will become the starting point for your Web Bio Page.

    • Web Bio Page

  • Begin making your Web Bio Page.
  • Complete it for next week.

Homework

    Reading

  • Buy the Castro book from the RU Bookstore, another local bookstore, or an online vendor. You'll need to start working with this book at once.
  • You may also want to acquire a copy of Robin Williams, The Non-Designer's Design Book, 2nd edition, esp. if you find it used and for cheap.
  • Read Castro, introduction and chaps. 1-4; chaps. 5 & 6 are recommended but can wait until next week.

    • Web Bio Page

  • Finish making a draft of your Web Bio Page; use W3 Schools and Castro; students also find this HTML tutorial helpful.
  • Remember, as mentioned in class, the GetIT HTML tutorial is outdated. So, contrary to its example, do not use CAPS in tags; and match all opening tags with closing tages at the end of the element.
  • If you need to, download SSH for home use from RU Software (login with your NetID and search under keyword "SSH").

    • Linking Questions

  • Answer the following questions on linking and URLs (use Castro to find the answers, if you have the book in time; otherwise use the internet – the answers are there):

    1. What's the difference between an absolute and relative URL?
    2. What would be the HTML code for an absolute URL (or link) to your 425 folder, so that it would open in a new browser window?
    3. If we were building a page inside your "425" folder and wanted a relative link from it to a page called "index.htm" in your "hw" folder, what would be the HTML code?
    4. What would be the code for an anchor named "part1"?
    5. What would be the code for a relative URL (or anchor link) to that anchor?
    6. In your own words, what is HTML and what is its relation to XML? (Use Castro or the internet to find the answer.)
    7. Draw a diagram representing this relation.

    Print out your answers on a single sheet of paper; draw the diagram on the back of the sheet; and bring the sheet to class.

    • Class Forum & Early Project Ideas

  • If you did not do so already in class, register for the Class Forum and post a reply to the "Introductions" thread.
  • Think of at least two possible topics for your Final Project. List them in a reply to the "Proposal Ideas" thread on Class Forum. We'll discuss these as part of next week's class discussion.
  • If you are working on a suitable research project in another class, you may use its topic for your web-authoring project. Basically, you'd develop a website to complement your project in the other class. This can reduce the amount of writing and research you'll need to do this semester. If you decide to do this, please discuss it with me.
top

Week Two

Tuesday, Sep. 11; Wednesday, Sep. 12

In class

    Work due

  • Due: Web Bio Page - post a link to your bio page in a reply to the "Web Bio Page" thread in the Class Forum.
  • Due: Answers to the Linking Questions. Print answers on a single sheet of paper; decrease the font size to fit if necessary.
  • If you have not done so already, post a reply to the "Introductions" thread on the Class Forum.

    • Projects & Project Ideas

  • Sample Project: (Mike)
  • Sample Project: (Ted)
  • The Everything-in-One-Place Project
  • The Local Inventory Project
  • The Truly Neglected Subject Project
  • The New Angle Project
  • The Ultra-Specific Project
  • The Insider's View Project

    • HTML Review, Part 1

  • Questions?
  • Differences between XHTML And HTML
  • Adding a DTD to your Web Bio Page
  • Semantic mark-up and the "Many Readers Model" of web authoring
  • Who/what needs to read your website?
    1. Site users
    2. Browsers
    3. Search engines
    4. Collaborators and inheritors
    5. Screen readers (disabled users)
    6. The Government

    • HTML Review, Part 2

  • 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
    body
    paragraph
    paragraph

    <html>

    <head></head>

    <body>

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

    </body>

    </html>

  • Always close the boxes you open: If a page element has both opening and closing tags (e.g., <p>, </p>), don't leave out the closing tag!
  • Empty tags (e.g., for linebreak and image elements) should close internally; thus: <br />.
  • Everything that appears in the browser window needs to be inside the body (i.e., between the opening and closing <body> tags).
  • The head section should not overlap the body section.

    • Web Style

  • Low-style (= "no style") website: More about Aaron
  • Another example of low-style by another guy named Aaron: Aaron Leitch
  • A new-looking site: Really Wild Flowers
  • Web 2.0 Style

    • Design Baseline

  • Open the Design Baseline handout (PDF)
  • With the Design Baseline in mind, take a look at these sites:

    John von Neuman
    Ben Fry's Thesis

  • Take a look at your neighbor's bio page in terms of the Design Baseline. What are some changes that he or she would need to make to the page in order to conform to the Design Baseline?
  • Revise your bio page in terms of your neighbor's comments and your own reading of the Design Baseline.

    • Photoshop Intro/Review

  • Open Firefox if it's not already open.
  • Open Adobe Photoshop CS3.
  • Photoshop Moose Demo
  • For the "No Big Pictures" (size, scale, and proportions) exercise, we'll use this Bio Page: 500 words about Me.
  • Use the Photoshop banner tutorial to make a quick banner for your Web Bio page.

    • Linking

  • Linking and Folder exercise:
    1. Add to your Bio Page a link to your neighbor's bio page.
    2. Save the image on this page in the "img" folder in your "hw" folder on Eden.
    3. Without copying the image into your "drafts" folder, add the image to the bottom of your Bio Page using a relative URL in your img tag.
    4. Turn the image (now on your Bio Page) into a link to my website.
    5. When you're done, let me know so that I can check your work.

    • Further Reading Page

  • Intro to Further Reading Page (FRP) assignment.
  • Research exercise.
  • Subnav demo
  • Begin to research and build your FRP.

Homework

Note: Changes to homework as of Sep. 12

    (X)HTML Reading

  • Read Castro, chaps. 5, 6. IF you're interested look ahead to the next group of chapters on CSS.

    • CRAP Principles Reading

  • If you have it: Read Robin Williams, Non-Designer's Design Book, pp. 10-86. These chapters introduce us to the mighty (simple) CRAP principles — Contrast, Repetition, Alignment, and Proximity — by which we make our pages look good.
  • Otherwise, read these online articles on the CRAP principles of design: How CRAP Is Your Site Design (you can find a print version here) and Designing with CRAP (PDF).

    • Project Proposal

  • The Project Proposal is deferred by one week (now due no later than the week 4 class). In the mean time, however, keep posting to the Forum or emailing me project ideas.

    • Further Reading Page

  • Complete research for your Surrealism FRP
  • Begin to build the HTML version of FRP
top

Week Three

Tuesday, Sep. 18; Wednesday, Sep. 19

In class

    Work due

  • Complete HTML version of Bio Page with bio banner
  • All the research for your FRP
  • Optional but encouraged: HTML draft of FRP

    • File Management

  • SSH fodler set-up and file management demo (redux)
    • 425 Eden Tree

    B-CRAP Principles and Good Page Design

  • CRAP = Contrast, Repetition, Alignment, and Proximity.
  • Not to be confused with these alternatives.
  • The forgotten principle: Balance. Thus: B-CRAP.
  • Another principle is Focus, which I'll spare from acronymic collectivity.
  • With the Design Baseline (PDF) and the CRAP principles in mind, take a look at these sites:
    1. Print example: Grand Central Station
    2. All HTML site: John von Neuman
    3. All HTML site: Ben Fry's Thesis
    4. Low-style (= "no" style) website: More about Aaron
    5. My favorite example: Wondermints fan site
    6. A new-looking site: Really Wild Flowers
  • Wednesday section only: Web 2.0 Style

    • Cascading Style Sheets

  • CSS Intro Lecture
  • CSS Basics
  • Another CSS Style Demo
  • CSS Warm-Up: Copy the following starter code into an empty Notepad file and save it as "css_demo1.htm":

    <html>

    <head>

    <title>CSS Demo 1</title>

    </head>


    <body>

    <div>This is a green div with red text.</div>

    <div>This is a red div with blue text.</div>

    </body>

    </html>

  • Exercise: Add CSS to Your Bio Page. Note: This exercise is a required supplement to the Bio Page assignment, so be sure to complete it as well.

Homework

    Reading

  • Read Castro, chapters 7-10 (on CSS).
  • Next week, we'll replace and amplify your FRP HTML styling with CSS styling.

    • Project Proposal

  • Write a short proposal for your Final Project and post it to Class Forum (specific questions for the proposal are listed on the Forum in the "Project Proposal" thread)
  • Find ten websites in three different categories related to your project idea.
  • Divide the sites into the three different categories and include the links in your reply to the project proposal thread.

    • FRP

  • Finish Further Reading Page and Surrealism *banner*.
top

Week Four

Tuesday, Sep. 25; Wednesday, Sep. 26

Standing Room Only

In class

    Work due

  • Further Reading Page and Surrealism *banner*.

    • Upcoming Work

  • FRP - CSS version: Post a link to your revized FRP in a reply to the "FRP + CSS" thread on the Class Forum.
  • Book Review Choices: Let me know three possible books in a reply to the "Book Review Options" thread on the Class Forum.
  • The "Traveling Mindset" project

    • Sample Final Project

  • The Decline of Railroading in America (Mike Felicetta)

    • Some More CSS

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

    • CSS and FRP

  • Add CSS to your Further Reading Page
  • An FRP example from the Spring: Octopus 1
  • If you have not done so already, use CSS to center the "wrapper" div containing your content
  • Next: use CSS to control the margins, padding, and font color(s), and background color(s) on your FRP
  • Customize the links on your FRP so that subnav links look different from other links on the page
  • Make sure your page has the following FRP design features (using CSS):
    1. Wrapper is no more than 770px wide
    2. Main content consists of darker text on lighter background (curious about this requirement? See these comments on readability from Max Design)
    3. Main textual content is left aligned and no more than 560px wide
    4. Main content has 15px or more padding left and right
    5. Main content has 20px or more of padding top and bottom
    6. Main content has a background color
    7. The space outside the wrapper div (i.e., the body) has a different background color (or image)
    8. All intro and bibliographical data appears in a sans-serif font
    9. All headings (h1, h2, h3, etc.) in a contrasting serif font
    10. The subnav design is distinct (at least in color) from other links on the page
    11. The nav is customized and uses at least the hover pseudo-class
    12. The page has a banner of your own design
    Note: Refer to Common Fonts page for some font options.
  • Finally (but essentially): Does your FRP show good use of contrast, proximity, alignment, and repetition?

    • A First Look at Writing (Articles) Online

  • This is in preparation for the Book Review page assignment (forthcoming).
  • 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)

    • The Traveling Mindset Project

    Read or browse (as needed) Alain de Botton's "On Habit" (handout), so that you get a good sense of his term "traveling mindset" (50).

    Define the term in your own words and save it in a file. You'll include the definition in your introduction to your TM page, that you'll build next week.

    For this assignment, in the spirit of de Botton, try to see a familiar area with new eyes and in closer detail (53). Specifically, find twelve features of your everyday environment (your room, your dorm or house, your neighborhood, your regular routes to work or class, where you eat or play, etc.) that you previously have failed to notice. Study these features and photograph each of them at least once. (Or sketch them, if you prefer.) Give each feature a distinguishing name (e.g., the Yellow Corner, the Broken Tree, the Wrong Map) and write a few sentences about it: describe the feature, or the associations it evokes in you. Save all this information in a new "tm" folder in your "hw" folder and have it ready for next week's class (Week 5).

    You can start constructing the page in advance, but we'll spend time on it in next week's class.

Homework

    Reading

  • Read Castro, chapters 11, 12, and 15 (on CSS and lists).
  • Read PHPied blog on Coding Conventions (refered to in class).
  • Use Google to learn more about – and discover the wealth of resources for – CSS page layout.

    • Plagiarism, Copyright, & Intellectual Property Reading

  • Review the Writing Program's plagiarism policy and the Business and Technical Writing Program plagiarism guidelines
  • U. S. Copyright Office
  • Read this brief overview on Image use and copyright
  • For a good sense of the tough reality of copyright conditions for images on the internet, read this informative exchange on Brian Carver's Ludwig Wittgenstein site

    • Project Proposal

  • If you have not yet done so: Write a short proposal for your Final Project and post it to Class Forum (specific questions for the proposal are listed on the Forum in the "Project Proposal" thread)
  • Find ten websites in three different categories related to your project idea.
  • Divide the sites into the three different categories and include the links in your reply to the project proposal thread.

    • Traveling Mindset Project

  • Complete the prep work as described above.

    • FRP + CSS

  • Technically, this page should have been completed by the end of the last class.
  • However, for those of you still working on it, complete the page before the next class.
  • I will consider anything that does not look like a good-faith effort at completing the assignment (warts and all) incomplete; thus, non-passing work.
top

Week Five

Tuesday, Oct. 2; Wednesday, Oct. 3
  • The Tuesday section meets in Loree 023;
  • The Wednesday section meets in Records Hall (Mac IML).
  • Note: The Wednesday section will start 30 minutes later this week, at 5 pm.

In class

    Work due

  • Traveling Mindset Project prep (photos and text).
  • Book Review book choices - post to thread on Class Forum.
  • Project Proposal - post to thread on Class Forum.

    • FRP + CSS Check-Up and Review

  • In which we check-up and review the CSS versions of the FRP

    • Image Use and Copyright

  • Let's take a look at the Writing Program's plagiarism policy and the Business and Technical Writing Program plagiarism guidelines
  • Brief overview on Image use and copyright
  • Now let's take another look at this informative exchange on Brian Carver's Ludwig Wittgenstein site
  • 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 a 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).
  • 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 should credit the source of the script in a comment in your code.
  • 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.

    • Traveling Mindset Project: Intro

  • The purpose of the TM assignment is to introduce you to some fundamentals of CSS multi-column layout with divs and floating elements.
  • We'll also practice with image layout and presentation, image links, text formatting, the CRAP principles and visual logic.
  • TM project ingredients: 12 images, 12 titles, 12 captions, 100-word introduction, footer content, author picture in header, CSS formatting and layout, CSS rules in an external file.
  • Optional: Divide images into 2-4 categories labeled with h3 headers.
  • See additional TM project requirements under week 5 homework below.

    • Grid Format Image Galleries

  • Jim Crow Gallery
  • Boeing History Gallery
  • Zyxwvvwxyz Galleries

    • List Format Image Galleries

  • The Weblicist of Manhattan
  • You get the idea . . .

    • CSS Layout Links

  • Firebug Layout Intro

    • Traveling Mindset Project: Demo

  • Move the TM project prep materials to your local desktop.
  • Save the contents of this folder. (traveling mindset demo) to your local desktop.
  • You should now have, in addition to your own materials, a "tm_demo.htm" file, a "tm_demo.css" file, and a related "img" folder on your local desktop.

Homework

    Reading

  • Start reading book for book review.

    • TM Project

  • Finish building your TM Project page: add your own content to the template we built in class; modify the style and layout of the template to suit your design needs; add a banner; and use your byline as a link to your Web Bio Page.
  • Add subnav to your page as needed.
  • Add some appropriate content to the footer div at the bottom of the template.
  • Save your TM Page in your "drafts" folder on Eden.
  • Use CSS for all layout and styling for the page.
  • Here is the HTML template (= TM demo) we built in class.
  • Here is the CSS file for the template.
  • Here is a slightly revised version of the same template.
  • Remember, you can use Firebug to study and test the CSS of any page.
  • Note that the borders and contrasting background colors for the main divs (wrapper, header, intro, gallery, and footer) were added to make the demo easier to follow. They are not essenial features of the page and can be "turned off" = eliminated from a successful design.
  • We'll add some navigation options and some other features to the page next week.
top

Week Six

Tuesday, Oct. 9; Wednesday, Oct. 10

In class

    Work due

  • Traveling Mindset Project draft 1. Post a link to your TM Project page in a reply to the TM PRoject thread on the Class Forum (Tue, Wed). Note: Your TM Project and all its related files should be in your "drafts" folder, NOT in your "hw" folder.

    • FRP + CSS Review

  • Tuesday FRP + CSS
  • Wednesday FRP + CSS

    • TM Project Draft 2

  • First, copy your TM files to your local desktop and open your page in Firefox.
  • Let's take another look at our sample galleries from last week . . .
  • Jim Crow Gallery
  • Boeing History Gallery
  • Zyxwvvwxyz Galleries
  • And now compate them to the popular "slideshow" format . . .
  • Something on Collage
  • What I'm interested in discussing this time are the different options for moving from the thumbnails to the larger views of each image and the advantages and disadvantages of each.
  • Cheapo Javascript for TM Project.

    • Fonts

  • A few of you have asked me about which fonts, or font combinations, to employ for your pages and to specify in your CSS. Generally, you want to use a sans-serif for your main body text (I prefer Verdana). Most browsers support only a few fonts. For others, you'll usually need to use a graphic. For more, refer to the these two pages.
  • Common fonts to all versions of Windows & Mac equivalents
  • Font Tester – allows you see which fonts work in the browser you're using and to see how CSS affects the font in that browser

    • Book Review Page Intro: Designing Online Articles

  • Sample online "feature" article: "Volumetric Mixers: Taking the Concrete Industry From Niche Market to Mainstream" (source: Grading and Excavation Contractor magazine)
  • Another feature article: "Mapping How People Use a Website" (source: Mappa Mundi magazine)
  • Let's take another look at Web 2.0 Style
  • Sample BR page: PHP and MySQL by Example

    • Book Review Page: Layout Demo

  • Next we'll begin to build a skeleton layout for your BR page.
  • To begin, copy the HTML for this Layout Demo to your friendly local desktop.
  • Open a new Notepad (or jEdit) file and save on it your desktop as "br_demo.css".
  • Now follow along – but feel free to improvise on your own and interject ideas.
  • For more Float Tutorials, see the collection of them as Max Design.

Homework

    Reading

    TBA

    TM Project

  • Finish adding any additions and modifications to your TM Project in light of today's class.

    • Book Review

  • Draft book review text: 900-1400 words plus quoted material.
  • Bring one printed copy for the instructor and an electronic copy to use in class.
  • Find or create at least FIVE supporting images for your text.
  • These should be informative images/illustrations (in addition to an image of the book and/or its author).
  • Find twelve sites of related interest.
  • Other requirements:
    1. Use at least two main offline supporting sources (book or article)
    2. Be sure to quote from the book under review and your supporting sources; use MLA style in-text citation
    3. Cite your sources (including image sources) using MLA style in a Works Cited section at the end of your review (or on a separate Works Cited page)
  • For some writing advice: How to Write a Book Review
  • Here's a sample book reivew.
  • Here's another one (Colin McGinn).
  • Note: Neither example is well-formatted for the web. We will not make this mistake.
  • Here's a third example (McGinn again), with more web-formatting.

    • Book Review Page

  • Experiment with the skeletal layout we constructed in class.
  • Next week we'll peer-review the BR texts and work on building/customizing the actual page.
top

Week Seven

Tuesday, Oct. 16; Wednesday, Oct. 17
  • Location change: The Tuesday section meets in Murray 038, on College Ave;
  • The Wednesday section meets in Records Hall (Mac IML).

Diagonal Picture

In class

    Work due

  • Book Review text, 5 related informative images, 12 related links.
  • Traveling Mindset Project, revised draft. Work on varying/customizing the layout and color schemes. Make a banner that identifies the page visually as well as textually. Don't be afraid to add some humor to the page (but not too much). The first drafts so far look excellent. Many good photos and titles. Again, your TM Project and all its related files should be in your "drafts" folder, NOT in your "hw" folder.

    • TM Project Review

  • Tuesday TM Projects
  • Wednessday TM Projects
  • Image use & plagiarism: Can one plagiarize an image? Yes! If you use an image not of your own creation, always credit the source of the image (which should NEVER be Google Images but the actual site that Google Images links to). Moreover, if an assignment specifies that you produce the images (as the TMP does), then you must produce the images. Submitting images that are not your own will not satisfy the assignment. Submitting images that are not your own and which you fail to identify as not your own, will, in such cases, count as plagiarism. Bear this in mind.
  • Thumbnail Gallery vs. Slideshow redux: Take a look at this gallery page of photographs by visual communications professor Paul Martin Lester.
  • Scroll Gallery (old-fashioned but not always a bad thing): Nabokov under Glass
  • Good banners and great banners
  • Captions that work

    • Book Review Group Work

  • In groups of 2-3, examine the following web pages and, based on what you see, make a list of content and design features a good BR article page should have.
  • Sample page 1: "Volumetric Mixers"
  • Sample page 2: "Mapping How People Use a Website"
  • Sample page 3: "PHP and MySQL by Example"
  • Sample page 4: "The Dream Life"
  • Also, track down via Google (etc.) at least two other online articles or book reviews, for further comparison.
  • And for even futher comparison: Maud Newton Blog.
  • And while we're at it, take another look at the Web 2.0 Style survey, which is also an online article.
  • And, and, and . . .
  • Afterwards, we'll compare lists. This will help us to build, add to the template, we began to construct last week.

    • Book Review Page Building and Reviewing

  • Open your version of the BR page template we began to build last week. Build sidebar together. (Currently #left div; but can go on the left or the write.)

    • Home Page

  • 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 and content must fit in a 800 x 600 px space
  • Examples:
    1. Brian Kane
    2. Dam, Stuhltrager Gallery
    3. The Scientific Marine Acquarium
    4. Zembla (Vladimir Nabokov site)
    5. Vladimir Nabokov Museum
    6. Vladimir Nabokov Library
    7. Meyerweb
    8. British Museum
    9. San Gregorio General Store

Homework

    Reading

  • Castro chaps. 17, 19, & 20 on forms, scripts in general, and a little Javascript in particular.
  • Forgot to post this one last week, on web-writing style: Writing for the Web by Jakob Nielsen.
  • As we discussed, the Book Review is a genre of non-fiction writing and the Book Review Page, an emerging genre of web page. To get a better sense of what writing for a genre, or within a particular genre, might involve, take a look at "Writing in a Genre" (from Hot Text!: Web Writing that Works).
  • Essential Animated Color Tutorial: Color, Contrast, and Dimension in News Design by Peggie Stark Adam (interactive Flash movie).

    • Book Review Page

  • Finish building draft 1 of your BR page
  • Write short mini-review blurbs for your 12-plus related sidebar links. For some ideas, see how Maud Newton does it in the sidebar on her blog.
  • 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.

    Home Page Design

  • In Photoshop or another graphics program, construct a visual mock-up for at least one possible homepage design. Note that all the essential material (focal image or design, intro text, links) needs to fit within the first 540 or so pixels of the page (i.e, "above the fold").
  • Save a web-viewable copy of the design in your "hw" folder on Eden.
  • Related to this: review the section of image maps in Castro pp. 116-18.
top

Week Eight

Tuesday, Oct. 23; Wednesday, Oct. 24

In class

    Work due

  • Book Review page, draft 1
  • Home Page design: Save a web-viewable copy of the design in your "hw" folder on Eden.

    • The Midterm Prototype

  • The Midterm Prototype is due on Friday, Nov. 2, by 6 pm. You will need to post a link to your Midterm in a response to the "Midterm Prototype" thread on the Class Forum.
  • The Midterm consists of:
    1. Home Page
    2. Book Review Page with at least 12 links in a links sidebar
    3. Feedback Page
    4. A revised Bio Page
    5. A single CSS file containing the styling rules for these four pages.
  • The four pages need to share a single unified design that says, visually, that they belong to the same website.
  • In addition, you'll need to fully revise your FRP (CSS version) and your TMP.
  • Also, add a new Portfolio Menu to your rev. Bio Page, linking to your revised FRP and TMP.
  • Finally, you'll need to submit a 1-2 page Design Script (more on this later).
  • These new and revised files should be saved in a "mid" folder inside your "425" folder with a related "img" folder for all the images.

    • Sidebar Links Menu and Sitenav Links Menu

  • Logical order
  • Crap Principles
  • According to Jonathan and Lisa Price at Web Writing That Works!, a web author should "make clear what the user will get from the link" (pdf) and "shift focus from the links, or the linked-to documents, to the subject" (pdf).
  • A model for "A-level" sidebar links reviews:

    A Links Model from NY Times Magazine

  • Image Map exercise:

    Make the above image into a functioning image map.
  • Examples: THe Lower Manhattan Cultural Council uses attactive, compact image maps for in-banner sitenav on their Home Page and other pages.

    • Notes on Using Images

    Your Book Review page should have 2 or more images in addition to a 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, as we've gone over in class, you should create standard "left" and "right" classes of div for the two most common image positions. 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.

    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 feature page relatively small; preferably under 100 KB. If necessary, re-save them 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.

    Class Work on/toward the Midterm Prototype

  • Continue to build BR Page and Home Page.
  • Revise FRP.
  • Revise Bio Page and TMP.

Homework

    Reading

  • Web Writing That Works!: How to cook up Hot Links (html) or cook up Hot Links (pdf).
  • Web Writing That Works!: How to trim your text (pdf) and make text scannable (pdf). These chapters from Hot Text will help you to revise your book review for brevity, precision, and scanability.

    • Feedback Questions for Form Page

  • For next week, provide the following:
    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. Six 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.
  • These last six questions will become part of your Feedback Page.
  • Post your response to this assignment in a reply to the "Feedback Questions" thread on the Class Forum (Tuesday, Wednesday).

    • Midterm Prototype

  • The Midterm Prototype is due Friday, Nov. 2, at 6 PM. You'll need to save all your midterm drafts in a new "mid" folder and post a link to this folder in a response to the "Midterm Prototype" thread on the Class Forum.
  • Continue to build BR Page and Home Page.
  • Begin to draft = design and code a Feedback Page. Refer to Castro, chap. 17, for guidance with the HTML. Note: This page does not need to function yet for the Midterm (i.e., the submitted information does not need to go anywhere; you don't need to implement the PHP script). We'll talk more about scripts after the Midterm and you can revise the page then.
  • Revise FRP, esp. in light of today's class discussion.
  • Revise TMP.
  • Revise Bio Page to fit with the Home Page and other pages of your emerging site.
top

Week Nine

Tuesday, Oct. 30; Wednesday, Oct. 31

In class

    Work due

  • Feedback questions posted in a reply to the "Feedback Questions" thread on the Class Forum (Tuesday, Wednesday).
  • Progress on your BR Page.

    • Examples for Discussion

  • Does Polygraph Rare Books have good basic page design?

    • Book Review Midterm Draft Requirements

  • At least 900 words of text, excluding headers, captions, pull quotes, block quotes, etc.
  • Text divided into at three sub-sections, each with its own sub-heading.
  • At least 12 sidebar links imbedded in descriptive blurbs.
  • 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. The images may be thematically decorative but at least two need to be informative/illustrational.
  • Standard book publication information in separate div (i.e., title, publisher, number of pages, number of illustrations, price, etc.).
  • 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.

    • Book Review Page Revisions

  • Here are three stages of a developing book review page. Notice the gradual changes. The third draft still needs work but is on its way. What feature are missing? What positive changes might be made to the content and design?
  • Changing the Face of a Superhero: Draft 1
  • Changing the Face of a Superhero: Draft 2
  • Changing the Face of a Superhero: Draft 3

    • Other Revisions

  • Revision and Feedback Demo

    • Managing Your "Mid" Folder

  • Make sure that all files for your midterm are in your "mid" folder and that your "mid" folder is directly inside your "425" folder and not inside your "drafts" folder or another folder.
  • All the images for your midterm should be inside a single "img" folder inside your "mid" folder.
  • All your common CSS should be inside a single CSS file, named "mid.css" (or something like that).

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

    • Sample Final Projects

  • To get a sense of where we're heading, let's take a look at Matt Powell's excellent Black Superheroes website from last Spring
  • Here's another final project on New Brunswick and the Revolutionary War

    • More Photoshop, Image Swaps / Rollovers

  • Here are a few Photoshop tutorials that can prove useful as you work on your pages.
  • Image swap tutorial.
  • Search the internet for other tutorials.
  • 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.
  • Home Page with rollovers: Bassosophy
  • Two "homemade" demos:
    1. Text Swap Demo
    2. Image Swap Demo

Homework

    Reading

    TBA

    Midterm Prototype

  • Complete your midterm pages.
  • Note: The Feedback Page should collect at least three different types of information through at least three different types of input (radio button, textarea, etc.). It should include your feedback questions (revise them as needed). And as I said in class: It does not yet need to send the information anywhere or to store it. This is just the front end of the page. We'll work on scripting the functional side of the page after the midterm, although you're welcome to go ahead with it now, if you like.
  • Remember to include site nav on all your final project pages (not FRP or TMP).
  • Post a link to your completed mid folder by Firday, Nov. 2, 6 PM.
  • Note: Don't make your Home Page the index page for your "mid" folder (i.e., index.htm"). I need to be able to see the actual index for the folder and move around the folder with ease.
top

Week Ten

Tuesday, Nov. 6; Wednesday, Nov. 7

Frank Gehry's IAC HQ in Chelsea

In class

    Work due

  • Assuming you've finished your midterms on time, nothing is due for class.

    • Announcements

  • Do not make any modifications to the contents of your "mid" folder without permission or specific requests to do so from the instructor. Save all FP-related draft work between now and your submission of the final website at the end of the semester in your (goo ol') "drafts" folder.
  • If you like playing games and working in groups, and you have a gap in your Spring schedule, consider Michael Goeller's collaborative game design class (PDF).

    • Web Novelties

  • A 16 billion-pixel digital image of Leonardo Da Vinci's Last Supper (via the Design Observer blog).
  • Tom Phillips, 20 Sites n Years

    • Web Resources of the Week

  • Secure email links: The Hivelogic Enkoder.
  • Vintage Home Page designs (or, Raiding the Public Domain): 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.

    • Final Project: Post-Midterm Phase

  • Second Article: in-depth feature, interview with an expert or insider, extended tutorial, narrative, blog/diary, etc.
  • Visual Page. Visual content of your own creation (approx. 24 images; but number will vary with the types of page and project). I strongly recommend a gallery page/pictorial catalogue roughly on the model of the TMP. Other options: Complex maps, visual tutorials, animated movies.
  • Flash ad luring users to your website
  • Two supplementary pages of your own determination
  • Revised midterm content
  • Final Design Script
  • Remember: Design either for an 800 x 600 pixel resolution or a 1024 x 768 pixel resolution.

    • Site Nav Samples

  • 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

    • Critique: BR Page Samples

  • South Asian Fashion: Costumes and Textiles of Royal India
  • Indian Jews: Dropped from Heaven
  • The Happiness Page: Eat, Pray, Love
  • Sanskrit Club: A Sanskrit Primer
  • Digital Photography: Chromasia.com
  • Silvered Mercury Glass: Pictorial Guide to Silvered Mercury Glass
  • Early American Cinema: Movie-Made America
  • Medical Error: After Harm: Medical Error and the Ethics of Forgiveness

    • Group Work: Content Revision

  • Group work on links blurbs and feedback questions.
  • Next, revise feedback page. Add some imagery.

    • Banners

    Early Movie Banner 3

    Early Movie Banner, first revision

    Early Movie Banner, second revision

    Early Movie Banner, third revision goes here.

Homework

    Reading

  • Browse Elements of Typographic Style Applied to the Web.

    • Midterm Design Script

  • Due next week. Bring printed copy of your Design Script (DS) to class and save an electronic copy in your "mid" folder.
  • 1-2 pp., 600-700 words, single-space, serif font.
  • Discuss at least eight aspects of your website in terms of different recommendations from Castro, Web Writing That Works, other assigned readings, Elements of Typographic Style Applied to the Web, and at least one online source of advice of your own discovery.
  • Quote from each source(short quotes only, no block quotes) and supply references in parentheses.
  • Include a works cited at the end of your DS.
  • Basically, the assignment is to explain and justify some of your key design decisions in producing your site. Show how and why you apply certain ideas from the reading.
  • Here are two sample design scripts; while they're from a non-web class, they should give a sense of the genre and for the kind of self-analysis that I'm looking for:
    1. Trifold Brochure design script
    2. Halloween Party Manual design script
  • Max Design's lesson on using multiple classes within selectors is a good example of the type of extra online reading you might find and draw for your design script. The lesson also might prove especially useful as you develop your site nav. Finally, it provides a good model for an online tutorial, something you might try for your second article.

    • Final Project

  • Two ideas for your second text/article page.
top

Week Eleven

Tuesday, Nov. 13; Wednesday, Nov. 14

Rapid Valentina

In class

    Work due

  • Midterm Design Script
  • Two ideas for your second text/article page.

    • Weekly Novelties and Announcements

  • Samir, in Wednesday's section, directed me to this fine model of Clean Code. It makes a handy reference.
  • Current web style at a glance.
  • And via that site, another nice-looking home page: Kristine Janssen's website.
  • Flash movie of the Week (and maybe the year): Alan Becker's Animator vs. Animation goes "outside the frame," "off the stage," and "through the roof." Or something like that.

    • Midterms

  • Review the Post-midterm clean-up list.
  • Those of you still using the templates from in class need to edit and CLEAN UP the CSS, which has lots of excess left over from the exercise.
  • Also: Try to go beyond what was demonstrated in class; use Castro and what you find online and what you invent creatively to explore the possibilities of styling with CSS. This is important (i.e., a BIG factor in your grade).
  • Home Page needs to establish site topic and purpose clearly and distinguish your "special" approach to the topic, whether it's Mercury Glass or Georgia O'Keefe or Digital Photography, from that of other sites on the same or a similar topic.
  • The Home Page should NOT have a link to, yes, your Home Page. Also: Your Home Page should not have as its title, "Home Page."
  • As part of good XHTML form, each page must have a title element in its head.
  • Arrange Site Nav links in a logical or conventional order.
  • Banner and sitenav on every page.
  • Links in sidebar should NOT link to Wikipedia, Amazon, or to articles in subscriber access only databases like JSTOR, Project Muse, or any of the other special services we can access via Rutgers but that we cannot assume the public at large can access.
  • Revising links sidebar blurbs . . .

  • Before:

    Find anything and everything regarding Essex County at the official website!

  • After:

    Did you know that [some interesting fact about Essex county]? You can find anything and everything about New Jersey's [something] county at the official Essex County website!

    • 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 IE]> <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

    Photoshop Exercise

  • For this exercise, I'll work with a very big image of the New Mexico horizon.
  • Other possibilities: Indian fabric
  • More Indian fabric
  • And more: Indian fabric
  • This exercise will lead into the . . .

    • Adobe CS3 Flash Exercise

    Or, possibly, not.

    Flash Ads

  • A conservative example: Dream List
  • More 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

  • Deitch Projects home page
  • Northern Lights Post home page

    • Flash Ad Assignment

  • In teams of 3-4, 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.
  • 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. 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.
  • 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.

Homework

    Reading

    TBA

    Final Project

  • Work on Final Project
  • Begin to collect/produce material for your Visual Page. Have a sample of this material for the week 12 class (after Thanksgiving).
top

Week Twelve

Tuesday, Nov. 27; Wednesday, Nov. 28

Snow Yard

In class

    Work due

  • Ideas for your second text page and your visual page.

    • Weekly Novelties and Announcements

  • Legible London
  • Aharef: Websites as Graphs
  • Boxes and Arrows

    • More on Conditional Comments

  • As was said last time: 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 IE]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->

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

  • Your final project will need to display accurately in Firefox and in IE 6 and/or 7. When you submit your final project, you'll need to specify which version(s) of IE you've tested it in.

    • 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.
  • As noted, as well, the visual page can be combined with the second text page as long as the resulting hybrid satisfies the requirements for both assignments.
  • Here are some gallery pages for us to examine:
    1. A Chess Tourist in New York City - combined feature/gallery
    2. Manhole Covers - good captions (click on "view gallery" under the image)
    3. Cyanobacterial Image Gallery - low-tech (old school) gallery
    4. Roman Architecture
    5. Ancient & Classical Architecture
    6. Roman Architecture Clip Art
    7. Gold Key Star Trek Panels
    8. Pure CSS Cross Browser Multi-Page Photograph Gallery
    9. 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
  • Michael Schumacher's Last Race
  • Korean Actors

    • Adding Simple Javascript to Visual Page

  • Let's take a look at this fairly simple HTML Swap Demo.
  • Now let's take a look at these related HTML swap Demos Three, Four, and Five.
  • 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.

    • Post-Thanksgiving Review

  • Links-menu list
  • Blockquotes need to contain one or more block-level elements containing the text.
  • Positioning (e.g., pull quotes).
  • For the demo we'll use this Indian Fashion Book Review.
  • CRAP design principles

    • Class Work for Today

  • Work at completing your Flash ads.
  • Add at least two of your partners ads to your web site (use any pages other than your home page) and test that they work.
  • Remember: Link to the .swf files on your partners Eden sites using absolute links.
  • If you finish the Flash ads, work on your new text or visual pages.

Homework

    Reading

    TBA

    Final Project

  • Finish Flash ad. Your Flash movie should be at least 5 seconds long. It should include a clickable button that links to your final project homepage (the one in your "mid" folder will do for now). Follow the tutorials for help with this.
  • Work on Final Project. Next week I'll give a breakdown of the complete requirements.
top

Week Thirteen

Tuesday, Dec. 4; Wednesday, Dec. 5

American Boar

In class

    Work due

  • Flash banner ad. Your Flash movie should be at least 5 seconds long. It should include a clickable button that links to your final project homepage (the one in your "mid" folder will do for now). Follow the tutorials for help with this.
  • You may continue to develop your Flash movie after this week's class, but you should have a provisionally complete version for in-class presentation.
  • Progress on Final Project

    • Weekly Novelties and Announcements

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

    • Finally and (This Time) for Real: Make a Favicon

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

    • Flash Presentations

  • Again: Your Flash movie should be at least 5 seconds long. It should include a clickable button that links to your final project homepage (the one in your "mid" folder will do for now). Follow the tutorials for help with this.
  • Open your Flash files and do the following:
    1. If you have not done so already, publish your Flash movie (File » Publish, etc.) so that you automatically generate an HTML page showing your movie. This W3 Schools Flash tutorial briefly reviews some of the new tags you'll encounter in the generated code. Note that some of the tags and attributes are specifically for Internet Explorer, some for other browsers.
    2. Style the page using CSS in either an external file or in the head of the HTML file. Take 10-15 minutes to do this. Replace any HTML styling with CSS styling.
    3. Save your Flash HTML page on Eden (somewhere logical in your "drafts" folder).
    4. In a reply to the "Flash movies" thread on the Class Forum (Tue, Wed): Post a link to your Flash Movie HTML Page on Eden. Note: This is a link to the HTML page generated when you "published" your Flash movie and should have a ".htm" extension. It should not be a link to your editable Flash file (.fla) or to your movie file (.swf).
  • Once everything's saved online, we'll take a look at your movies on the Big Screen.

    • Final Project

  • As of now your final project should contain the following main parts and technical requirements:
    1. Home Page with links and focal image. Note: The title of your home page should not be "home page."
    2. Introduction/background page: This can be integrated into your Home Page or constitute a separate page.
    3. Book Review page with Links Sidebar and at least three informative images with captions (12 diverse links, with blurbs).
    4. Second text page: Each of you needs to discuss this page with me in class, by email, or during office hours.
    5. Visual Page: Each of you needs to discuss this page with me in class, by email, or during office hours.
    6. One or more short supplementary pages (FAQ page, Links Page, Reading Recommendations, Where to Buy ..., etc.).
    7. Feedback Page with at least twelve questions in at least three sections. Questions should be useful. Questions seeking basic biographical and demographic information (user age, where she lives, etc.) do not count toward the 12 required questions.
    8. Bio Page, with a Portfolio section linking to your FRP, TMP, and Flash Page. The FRP and TMP do not need to be revised from their midterm states.
    9. At least one Flash ad from a member of your Flash group displaying on at least one page of your site.
    10. At least one use of the "HTML swap" Javascript from week 12 or its equivalent.
    11. At least one use of an image map or standard rollover.
    12. Good site identity: All pages should follow a similar visual logic and need to look like they belong to the same website.
    13. Site navigation on every page.
    14. Cross-browser compatibility with either IE 6 or IE 7 using a Conditional Comment in the head of your HTML files.
    15. Observance of Contrast, Repetition, Alignment, and Proximity in your design.
  • All parts of the midterm prototype should be fully revised.

    • Some Revision

  • Here is a sample sequence of design and content revisions for a midterm homepage. First step: Adjust the design according to the CRAP principles.

Homework

    Final Project

  • Work on Final Project
top

Week Fourteen

Tuesday, Dec. 11; Wednesday, Dec. 12
  • The Tuesday section meets back in Loree 023.
  • The Wednesday section meets in Records Hall (Mac IML).
  • Note: This Wednesday section starts at 5.45 pm.

Super Sly

In class

    Work due

  • Progress on Final Project

    • Finishing Touches

  • Getting Flash ad to link to Home Page (if this didn't happen last week).
  • Using multiple background images: Maratz.com (personal website)
  • Notice that Maratz creates a complex and stylish design by using multiple background images in combination: (1) one for the body background that repeats x and y; (2) one for the upper banner region that does not repeat; (3) one for the lower banner/site nav that also does not repeat; (4) a thin wide image for the main content area that repeats only vertically; and (5) one for the footer of the content aread
  • Cleaning up old pages: Older Bio Page; New Cleaner Bio Page.
  • By "cleaning up" 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.

    • Site Harmonization

  • 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
  • Subnav on all pages works and longer pages have "back to top" links
  • Home page (index, splash, front, intro, etc.) links to other main pages (but not to itself)
  • Banner appears on all pages
  • All pages link to a single CSS file for your site
  • All pages are visually consistent

    • Final Project: Revised Checklists

  • Use the midterm grading/feedback form for some guidance. What follows are the basic requirements.
  • Content requirements:
    1. Home Page with links and focal image. Note: The title of your home page should not be "home page."
    2. Introduction/background page: This can be integrated into your Home Page or constitute a separate page.
    3. Book Review page with Links Sidebar and at least three informative images with captions (12 diverse links, with blurbs).
    4. Second text page: Each of you needs to discuss this page with me in class, by email, or during office hours.
    5. Visual Page: Each of you needs to discuss this page with me in class, by email, or during office hours.
    6. One or more short supplementary pages (FAQ page, Links Page, Reading Recommendations, Where to Buy ..., etc.).
    7. Feedback Page with at least twelve questions in at least three sections. Questions should be useful. Questions seeking basic biographical and demographic information (user age, where she lives, etc.) do not count toward the 12 required questions.
    8. Bio Page, with a Portfolio section linking to your FRP, TMP, and Flash Page. The FRP and TMP do not need to be revised from their midterm states.
    9. A single comprehensive Works Cited Page or a works cited (footnote) section on each page indicating the source of cited or borrowed material used on that page.
    10. At least one Flash ad from a member of your Flash group displaying on at least one page of your site.
    11. At least one use of the "HTML swap" Javascript from week 12 or its equivalent.
    12. At least one use of an image map or standard rollover.
  • Design requirements:
    1. Observance of Contrast, Repetition, Alignment, and Proximity in your design.
    2. Good site identity: All pages should follow a similar visual logic and need to look like they belong to the same website.
    3. Site navigation on every page.
  • Coding requirements:
    1. Code follows proper XHTML rather than HTML conventions.
    2. Cross-browser compatibility with either IE 6 or IE 7 using a Conditional Comment in the head of your HTML files.
    3. Virtually all styling/formatting uses CSS and not HTML
    4. All CSS style rules in a single external CSS file.
    5. Internal site links are relative, not absolute.
    6. Wherever possible: Use margins and padding for vertical spacing rather than line breaks.
  • General requirement: All parts of the midterm prototype should be fully revised.

Homework

    Final Project

  • Complete your Final Project. The complete Final Project is due online by the end of Sunday, Dec. 16. I'll begin to grade completed projects on Monday morning, Dec. 17.
  • Once you have completed your project, post a link to your "final" folder in a reply to the "Final Project" thread on the Class Forum (Tue, Wed). I will not examine your project until you post a link.
  • After you have submitted it, leave your Final Project online and unchanged for at least one month into the next semester. (If you wish, of course, you may continue to work on a different copy of your project but remember to leave the submitted version unaltered.)
  • Finally submit a CD copy of your entire final project by 1 pm on Tuesday, Dec. 18 either (1) to my mailbox in the Murray Hall mailroom on College Ave or (2) under my office door, Loree 010.

    • Final Project Updates

  • As discussed in class: You no longer need to display a Flash group partner's ad on your site. But you do need to link to your Flash movie from the Portfolio section of your Bio Page.
  • If you did not submit a midterm Design Script, then submit a final DS with your final CD. If you did submit a midterm DS, then you're set.
top

Final Lab/Office Hour

Tuesday, Dec. 18. 6.30-7.30 pm.
Location: my office, Loree 010, Cook/Douglass Campus

Stop by to find out your final grade, and get in-depth and -person feedback on your work.

Final image goes here. top
~Jonathan Bass
Formerly Web Authoring for Gentlemen