IDCC 370: Web Design I   Spring 2008

Check this out:

Here is a "cheat sheet" we will use during 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 Friday, December 1, 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 Holiday Dinner interactive form due Friday December 8.

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

Labels: check boxes, Dreamweaver, Form Development Cycle, form elements, Form Elements Accessibility Guide, Holiday Dinner form, interactive form, on-line survey, radio buttons, survey

Check this out:

I'll have the 370.002 graded Assignment Two back to you at class time on Friday. In the meantime, try out these Google searches:

1. gilbreath idcc 370
2. walsh idcc 370
3. winalski idcc 370
4. tran idcc 370
5. feldman idcc 370

Notice the importance of the Meta description tag. See why you want a good page title and a good description of your page? Interesting, huh? Are you a believer in SEO yet? Where do you fall on the Google hit list?

In the day class on Wednesday, we will finish the styling of the Open Communication Climate essay, creating the style rules for the table of contents. Your essay will then be complete with graphics, callouts, and internal navigation. You would then be ready to style essay.htm in its final form.

We will also begin work on the interactive form elements of the Assignment Three 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, 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.

Labels: binary, callouts, cgi snippet, Common Gateway Interface, form elements, Googling, Graphics, interactive form, internal navigation, Open Communication Climate, table of contents

Check this out:

Shift F7 really is your best friend in Web design when using Dreamweaver. I thought, however, that you might be interested in the other side of the issue.

Check out this seriously mispelled document to see if you can easily read all the really messed up text. Source: IEEE. (2006, October). Aerospace and Electronic Systems 21,10.

Have a great Thanksgiving. . . . And do try to get away from your studies for at least a little while; get some rest . . . . you deserve a break. When you return after the holiday, you will need all your energy to finish the semester.

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.

Labels: Dreamweaver, shift f7, spell-check, Thanksgiving

Check this out:

Our focus in class will be on creating a number of CSS rules that allow you to float callouts and graphics left and right. The float, as many of you have learned already, is an essential design concept in CSS. Using your exercise eight cleanly scrubbed, XHTML-ized, Semantic Web-proofed, well-formed and valid text, Open Communication Climate, you will plant two callouts and two graphics, both left and right, making necessary adjustments to the graphics and text to improve design for readability and overall aesthetics. You will want to pay special attention to the relationship of the graphics, callouts, paragraph size, and headings: a full-bore design experience is about to be yours.

The graphics left and right are the ones you will use for this exercise. I will provide written instructions and will work through the design and rule-writing with you in class. I think you will find working with the float to be a lot of fun.

At the bottom of your newly designed page, you will add this source note after the Buchholz source note:

Microsoft Office Clip Art Photographs: j0406569.jpg (Shaking hands) and j0289517.jpg (2 women in office). (n.d.). Microsoft Office 2003. Redmond, WA: Microsoft Corporation.

Remember: when you hand in Assignment Two, due at classtime, turn in the annotated Assignment One, so that I can make sure you had no trouble making your corrections. Be sure also to take advantage of shift-F7 in Dreamweaver; spell-check is your best friend in Web design.)

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.

Labels: CSS, Float, Graphics, Microsoft Clip Art, Open Communication Climate, scrubbed, Semantic Web, source graphic, spell-check

Check this out:

Next class, we will begin our assignment two design project using this Word doc about open communication in the workplace. In class, I will provide specific directions on how to handle this document, which will become exercise 8. The basic idea is to show you how to import a Word doc. file and then to scrub up the XHTML in preparation for named fragments and style rules application (readied for the Semantic Web). This will be practice for assignment two, due Friday, November 17 (day) or Wednesday November 29 (eve).

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.

Labels: named fragment, Open Communication Climate, Semantic Web, Word doc