IDCC 370: Web Design I   Spring 2008

Check this out:

In reviewing the tutorial on Divs and Floats: Key to Design Control in class on Monday, April 24, 2006, we encountered the following additional design terms and concepts:

1. Legacy Web design
2. Modern Web design standards (XHTML and CSS)
3. Design using tables and deprecated fonts (anti-css) = bad
4. Fitts' Law
5. Rule of thirds (a.k.a., rule of three) in design and layout; looking for the power points in a picture or on a Web page.
6. jpg or jpeg (Joint Photographic Experts Group), file compression scheme for photographs on the Web (a lossy format that throws out information). A possible 16,777,216 colors on a 24-bit machine.
7. gif (Graphics Interchange Format); 256 colors; think cartoons
8. Typography: text size, contrast, font family
9. Display type (h1, h2, h3, banners)
10. Body type (p, ol, ul, and the like)
11. Scannability (headings, bullets, lists, white space, color, layout)
12. White space
13. Screen shot
14. Graphics optimization
15. bitmapped graphics and files (.bmt)
16. cropping graphics
17. All terms and concepts from the PowerPoint tutorial on Divs and Floats and the tutorial on Navigation.

Remember, a significant part of your Web page analysis for Assignment Three can focus on the layout and design strengths and weaknesses of the site pages you choose. I would expect you to use all the class materials at hand (terms, concepts, tutorials, class discussion notes, and hands-on exercises) to demonstrate in depth and in detail your mastery of this Web design material.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Check this out:

The extra credit assignments are graded and corrected. You will find that I have supplied some helpful hints (of a technical nature) that will help you to make your assignment 2 better (in quality and grade). I highly recommend that you pick these up as soon as possible Monday, April 24, starting at 8:15 a.m. See Gail Wessell in Smith 121, and she will return your extra credit assignment to you.

I will be in LaCava 265 from 1-3:15, Monday, April 24, in case you have questions or problems with assignment 2. Stop by to see me if you need to.

When you come to class on Monday at 3:35, be sure to have your assignment 2 printed out completely from the Internet: rendered and source versions. Also remember to hand in the corrected assignment 1 papers (my comments in red). Do not reprint assignment 1. Be sure also to fill out the assignment 2 response form.

Remember to credit all sources of images not your own on your complete Web site. You can give credit at the bottom of the page where the graphic appears or create a separate credits page. Here's a great example: http://web.bentley.edu/students/n/nally_chri/assign1/credits.htm

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Check this out:

This handy little state drop-down element and this country drop-down element will save you a great deal of typing. (Warning: These links open in new browser windows.) After opening a linked file, just copy the markup to the clipboard, and in code view paste it in your document at the desired place. Or if you prefer, save the file to your assign2 folder, then open, and take it from there.

You are free to use these form elements in Dreamweaver, whenever you need to, especially in your second assignment.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Check this out:

Thinking about how to create a form is half the battle in designing an interactive survey for the Web.

The Form Development Cycle tutorial (opens in a new window) will help you to understand the 8-part form development cycle that will make Assignment Two much easier for you as you go about designing your on-line survey. I highly recommend that you step through the tutorial before too much longer.

Note that you can save yourself much time and misery if you plan carefully. This assignment is a perfect example of how to use paper and pen (low fidelity prototyping) literally to sketch your plan and its phased implementation. This approach to form design is iterative. You design, implement, test, redesign, reimplement, and retest. Work slowly, carefully, and in small increments, just as we are working in class on understanding the various form elements.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Check this out:

Here is the "cheat sheet" I used during the last class to show you the important dialogue boxes in Dreamweaver that prepare the accessibility labels for the various form elements that need them: Form Elements Accessibility Guide (link opens in a new window).

In class today, we will continue creating our form, continuing with check boxes and then moving on to radio buttons and drop-down lists. I will also give you the specifications for the extra credit Mother's Day Dinner interactive form due Friday April 21.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Check this out:

Come to class on Monday, April 10, with any questions you may have about corrections on Assignment One. The new due date for Assignment Two is Monday, April 24. That should give you plenty of time to master all the elements of the assignment, since we have devoted so much time in class to styling the paper. Now it is time to move on.

On Monday, April 10, we will begin work on the interactive form elements of the Assignment Two specifications in class. Our first challenge will be to understand and create correctly labelled interactive form elements. Over the years, students have found this technology to be inviting and actually quite a bit of fun. I hope you will have the same experience. The screenshot of the forms tab insert bar (above) shows one easy way to access the 14 form elements available to you in Dreamweaver. The screenshot to your right shows the drop-down/fly-out menu system that also allows access to the form elements. I use them both, depending on where I am working in the form being built.

In class, we will very carefully construct a prototype form that will include all the elements needed for assignment 2.

To make a form work on our servers, you will need some special markup that calls up a Perl file (genmail2.pl) in the cgi-bin (Common Gateway Interface-binary) folder on the server. This HTML markup is simple text in a Notepad file (cgimailto.txt) containing hidden elements that allow the form to function. These elements must be inserted into the head of the form tag. Therefore, in class on Thursday, you will need this markup, often referred to as the cgi snippet, to test the functionality of your form.

If you have any questions about the specifications for Assignment Two, or the work we will begin next class in form building, please feel free to e-mail me at wbuchholz@bentley.edu.

Check this out:

As a group, you created some wonderful Web sites for Assignment One. Congratulations to you all. Before I share with you a number of the sites that are particularly noteworthy, I want to highlight some areas to watch out for when creating a Web site. Here goes:

1. Writing and proofreading: The Web is both a graphic and a written medium. In Web design, you must be very careful on both fronts, as you are publishing to the world. Make sure that your writing is concise and correct. Watch your phrasing (how you say something), punctuation, spelling, and proofreading (shift/F7 in Dreamweaver results in the spellcheck utility, pictured at right). Good writing is critical in the design of Web sites. If your site is riddled with errors, your credibility and professionalism plummet. People will not trust the information you are trying to convey. A site that is not trustworthy is just taking up cyberspace. Don't let that be you.
2. Website, webpage, homepage = Web site, Web page, home page. Should you capitalize the word Web when referring to the WWW. Let's find out from the inventor of the Web, Tim Berners-Lee.
3. ALT: Be sure that all graphics contain Alternative Text (ALT); remember to end all alts with a period. Do you recall why?
4. Global navigation: For Assignment Two, make sure that your hyperlinks are not self-referential (where a page links to itself). I'll show you in class how to kill the hyperlink, yet keep the style, on your top global nav bar. Most of you remembered to kill the link on the bottom bar.
5. Contrast: In Web design, when setting text against a background color or layer, you must be very careful to create high contrast, otherwise the text will not be visible. The extreme, as I’ve mentioned, is black text on a black background or white text on white. It just doesn’t work. In some of your pages, you put dark text against a dark background: no go. Note too that when you use a black page background, your visitors will have a difficult time reading blue and maroon hyperlinks. You need to change the color of the background, hyperlink, or text.
6. Vertical spacing: Some of you have too much space vertically—usually extra enters or line breaks. Kill them.
7. Meta tags: be sure to place meta tags for key words and page description on all your pages. Remember these have to be relevant to the page. And key words/phrases must be unique and key. Make these met tags count, as search engines often use them in their results pages.
8. Kill all deprecated style attributes: align="center"; align="right"; align="left". Remember, these will often compete with your css rules and make a mess of the element you are styling. Perform a search and replace on your XHTML to eliminate unwanted attributes and elements.
9. Your css file (370.css) must contain all style rules. If you have some embedded in the page head, make sure that you really need them there (most likely you do not, unless you are styling a particular element on one page only for one-time use).
10. While you are making corrections, be sure to fix your XHTML syntax. Almost all of your pages violate various XHTML rules. In Dreamweaver, all you have to do is go to the Commands menu, and about half way down select Clean Up XHTML. Let it rip, and then be sure to resave your file with its newly fixed XHTML syntax.
11. Page title tags: Use solid information, key terms to the left, in naming pages. Rather than “About Me” in the title tag, you should have “About William Buchholz, Bentley College, Waltham, MA”. Instead of “Assignment Two,” it would be much better to have “Buchholz Assignment Two, IDCC 370 Web Design, Bentley College, Waltham, MA”.
12. Click here: Avoid this. Remember, you should always make inline hyperlinks descriptive of their destination. Rather than “William Buchholz resume, click here,” you should set the link descriptively: “William Buchholz resume.”
13. Quoting and paraphrasing: Some of you are still confused about how to handle quotes and paraphrases. The easiest rule of thumb is this: if you use three words or more in a row from your source, be sure to put quotations around this material. You can intersperse your commentary with quotes, but be very careful about this.
14. Graphics: Many of you forgot to source your graphics. Remember, if you borrow a graphic from a site (even the banner background), you must source it and link to the page where the graphic originated. Using clip art and photos in the public domain (as supplied, for example, by Microsoft) is perfectly fine for this course, but when using graphics not in the public domain, you must remember to give credit.

Be sure to let me know if you have any questions about the points listed above. In the meantime, here are some student sites I think you will find visually very interesting. They aren’t perfect (yet), but in general they exhibit a good sense of design for the Web (keep stretching; it's great to see):

• Janine Covello
• Chris Nally
• Joanna Neskow (Google "Joanna Neskow 370" = 1st hit on page)
• Barrett Mononen (Google "Barrett Mononen" = 2nd hit on page)
• Kristen Otto (Google "Kristen Otto 370" = 1st hit on page)
• Dally Reyes (Google "Dally Reyes" = 3rd hit on page)
• Sean Ruegg
• Robyn Saidi

If your site is not yet listed here, don’t feel bad. Just keep at it. I suspect that next time you might make this page. Be sure to Google yourself to see where you come up.

Reminder: the last date to withdraw from a course is Friday, April 14.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.