IDCC 370: Web Design I Fall 2012

Check this out:

Assignment three is due no later than 4:30 p.m., Thursday, December 13. Assignments should be posted on the Web by this time for access during class that day. Your final packet of materials (Assignments 1, 2, and 3) should be left with Gail Wessell, Smith 121. Be sure to sign the roster when you leave your assignments with Gail.

Note: Remember the file naming convention for the thank you pages:

1. ex7-thanks.htm
2. thanks.htm (this is for the essay survey)

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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Check this out:

Next class we will begin work on the interactive form elements of the Assignment 3 specifications. Our first challenge will be to understand and create correctly labeled 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.

Our first goal will be to understand why forms and their elements are important in Web design. The graphic to the right illustrates one of the single most popular forms on the Web today: the facebook login page. We will begin our discussion with an overview of forms and their purposes (click the link to download this 1MB pdf file).

In class, for Exercise 7 (click the link to download this 1MB file), we will very carefully construct a prototype form that will include all the elements needed for the survey of your essay in Assignment 3.

One of the more challenging aspects of creating forms in Dreamweaver CS5 is to understand the design and programming of their form edit screens. We will spend a good bit of time examining the anatomy of a typical checkbox input screen.

To make a form work on our servers, you will need some special markup that calls up a Perl file (mailto_nt.pl) in the cgi-bin (Common Gateway Interface-binary) folder on the server atc.bentley.edu. 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 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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: Assignment Three, binary, cgi snippet, Common Gateway Interface, Exercise 7, facebook, form elements, form tag, interactive form, Perl, questionnaire

Check this out:

Our focus in class will be on creating a number of CSS rules that allow you to float HTML5 asides and graphics left and right. The float, as many of you have learned already, is an essential design concept in CSS. Using your exercise six cleanly scrubbed, HTML5-ized, Semantic Web-proofed, well-formed and valid text, Open Communication Climate, you will plant two asides 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, asides, paragraph size, and headings: a full-bore design experience is about to be yours.

The graphics above 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.

While you will be receiveing printouts of the exercise in class, you may want to have electronic access to them in pdf form:

1. Ex 6b: HTML5 Asides and CSS Multiple Classes (work on this in class)
2. Ex 6c: Contents with Style (work on this at home)

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.

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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

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

Check this out:

Next class, we will begin our assignment three 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 6.
The basic idea is to show you how to import a Word doc. file and then to scrub up the HTML to prepare it for HTML5, named anchor fragments (using various id attribute/value pairs), and style rules application (readied for the Semantic Web). This entire exercise will be practice for assignment three, due no later than 4:30 p.m., Thursday, December 13.

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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

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

Check this out:

A very important aspect of your final two assignments is to be sure that you know how to integrate quotations into your commentary without committing plagiarism. We will spend some time in class on Thursday, November 15, viewing and discussing this PowerPoint tutorial on how to handle secondary material on your site.

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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: Assignment Three, Assignment Two, plagiarism, quotations, sources

Check this out:

IDCC Help!!

The due date for Assignment Two is looming: Tuesday, November 27 (immediately following Thanksgiving break--no extensions allowed).

As promised after Assignment One, I have reserved Smith 110 as an open lab for you to come in and work on your exercises and assignments.

Here are the days, dates, and hours for open lab:

1. Wednesday, November 14: 2:30 - 4:30
2. Tuesday, November 20: 11:10 - 1:30
3. Monday, November 26: 2:30 - 4:30
4. Tuesday, December 4: 11:10-1:30
5. Tuesday, December 11: 11:30-1:30

In addition to these times, of course, you should feel free to ask me outside of class any questions you may have about the assignments.

Three reminders:

• Download your 30-day free trial of Dreamweaver after November 13 (November 14 would be ideal). Then work in the comfort of your own home. :)
• Hand in Assignment Two: n.l.t. beginning of class, Tuesday, November 27.
• Hand in Assignment Three: n.l.t. 4:30 p.m., Thursday, December 13.

 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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: Assignment 2, Assignment 3, Assignment Three, Assignment Two, help, Smith 110 lab

Check this out:

It's time now to put the finishing touches on your template and top-tier pages. With the banner soon to be in place (Exercise Four in pdf), you will then be ready to move on to the top-tier navigation bar: Exercise Five (in pdf). This "nav bar," in conjunction with your banner and CSS colors for backgrounds and text tags, will complete the "look and feel" of your site. You will soon have your professional brand.

I think you will be amazed at how attractive your site will be when the banner and buttons are activated on all your pages (click image to the left to see the IDCC 370 model site). With any luck, we will be able to complete the lion's share of this exercise in class. At any rate, you will receive a sheet of directions that will allow you to work on your own outside of class. Before you actually begin this exercise, please review the graphic model depicting unordered lists and  pseudo classes.

Remember, Assignment Two with the annotated copy of Assignment One, is due Tuesday, November 29, at the beginning of class.

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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Check this out:

In thinking of the graphic signature (look and feel) of your site as communicated effectively through the banner, buttons, and color palette, you may need to do a little more exploration for graphics.

In class you will be able to explore a number of sites to work on your banner as we begin the next exercise:

• The Microsoft online photo collection, 
• brownielocks  and 
• Buchholz Public Photos on Picasa Web.

Note: When you start to download free material, remember to save the graphics in your masters subfolder of the images folder. Be sure to name any file you download with the site name prior to the graphic filename; for example, brownielocks-dribblessplats.jpg. Then, as you acquire graphics from brownielocks and other vendors, the files will be together in the masters subfolder. Remember, you need to credit all your graphics sources and provide links to the graphic (or at least to the site if you cannot link to the graphic). It is very important that you keep all of these files straight, so take care.

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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Check this out:

As a group, you created some wonderful Web sites for Assignment One. Congratulations to you all. I want, however, to highlight some areas to watch out for when creating a Web site and in making your corrections on the assignment. 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 untrustworthy is just taking up cyberspace. Don't let that be you.
2. ALT and title attributes: Be sure that all graphics contain Alternative Text (ALT) and the title attribute. This becomes very important as you construct your pages for Assignments Two and Three.
3. 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.
4. Vertical spacing: Some of you have too much space vertically—usually extra enters. Kill them.
5. Page titles: Remember that the <title> tag is your visitor's (and your) best friend for all the reasons discussed in class. Make sure that all your tags are structured so that the key identifying information for the page itself comes first, followed by key site identification information. Here is the ideal model: <title>Biography, William Buchholz, IDCC 370, Fall '12, Bentley University, Waltham, MA 02452</title> Another: <title>Exercise 5 – The Finished Template, William Buchholz, IDCC 370, Fall '12, Bentley University, Waltham, MA 02452</title> You get the idea.
6. 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. And remember to refer to the handout for Exercise One (1c: CreatingYour Prototype Site) that spelled out exactly how to create your documentation both in the text and in the sources.

7. Click here: Avoid this. Remember, you should always make in-line hyperlinks descriptive of their destination. Rather than “William Buchholz resume, click here,” you should set the link descriptively: “William Buchholz resume.” Creating descriptive links helps your site visitors and, of course, contributes to more effective SEO.

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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: alt, Assignment One, click here, contrast, proofreading, SEO, spell-check, title attribute, vertical spacing

Check this out:

We are now ready to venture into the marvelous world of Web graphics: raster (aka bitmap) and vector (using math, geometrical primitives).

Exercise 3 introduces you to editing and layout of the major raster graphic format on the Web: jpg (or jpeg). You will download, source, edit, and layout a number of graphics in the next class meeting and for the remainder of the course.

As an introduction to graphics, we will review the tutorial "Web Graphics: Vector and Raster," also available in print form as a pdf file.



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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: Graphics, raster, vector, Web assets

Check this out:

You will spend a good deal of time in this class making sure that your css rules are properly ordered. As the 370.css file continues to grow (we'll be adding a good number of rules in the next few weeks), you will want to be able to traverse the rules easily. Thus, in addition to good structure, you will want to add some descriptive sign posts along the way--and prove to me that you know what you are actually doing when you write your CSS rules.

In setting up your signposts, you will need to comment your CSS style rules in the hierarchical chunks I keep alluding to in class. This css commenting model (pdf) will give you an idea of the way I have commented my 370.css thus far. Feel free to use this document as a reference point in your own commenting of 370.css for Assignment One. I will address any concerns you may have next class.

If you are interested in some further commenting ideas, check out "Brownspank, a standards-conscious Web Designer for Brown Battery Studios," who has posted an interesting article on CSS comments: Maximize CSS Comment Usage. Take a look at this for some good commenting ideas.

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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: 370.css, Brownspank, commenting, CSS

Check this out:

We'll spend time in class reviewing your template; then we will pour the contents of all your top-tier pages and exercise 1 into the template.

After we pour all your top-tier pages into the template, you will need to title all your pages correctly; for example:

• William Buchholz, IDCC 370, Fall '12, Bentley University, Waltham, MA 02452
• About William Buchholz, IDCC 370, Fall '12, Bentley University, Waltham, MA 02452
• Biography of William Buchholz, IDCC 370, Fall '12, Bentley University, Waltham, MA 02452
• Ontology Essay, William Buchholz, IDCC 370, Fall '12, Bentley University, Waltham, MA 02452

After you supply the correct descriptive meta tags to your pages, your Web site shells are ready. Take a deep breath. You've accomplished a great deal so far. But now we are about to embark on the FTP journey.

First, remember that your account has already been created on the IDCC server. Now you need to hook to that server through Dreamweaver. Dreamweaver's FTP utility can be a little confusing the first or second time through, so I hope this advice will help.

Once you're sure you have the latest version of your Web on your workstation, invoke the site management wizard to edit your specs. I'll walk you through the steps in the wizard, so don't move too quickly. Wait for the whole class to go through this.

The key screen in the wizard is the one where you actually hook to the server and your folder on the server. Here is a screen shot to use as a model (click to enlarge for easier viewing):

If you need some help with this whole process in class, just raise your hand. If you run into trouble at home, just e-mail me at wbuchholz@bentley.edu for more advice — or wait until the next class, and we'll quickly take it from there. Please feel free to comment on this post (nothing dirty, though) and I will respond for all to see.

Labels: Bentley, Dreamweaver, FTP, meta tags, site setup, title tag, Web assets, Web site directory, World Wide Web

Remy Sharp

Check this out:

Remy Sharp has devised a shim (or shiv) to insure that all versions of Internet Explorer below 9 properly display all the new HTML5 tags. Make sure all your HTML5 pages have this IE conditional shim immediately before the closing head tag: </head>. I'll help you with this in class if you are a little confused about exactly where to put this material.

Just click on Remy and copy the code.

Curious about what this little bit of JavaScript looks like? Check out the Remy Sharp IE Shiv JavaScript. If you would like to know about the history of this important piece of work, read Paul Irish's The Story of the HTML5 Shiv.

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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: HTML5, IE 9, Internet Explorer, Remy Sharp

Labels: botnavbar, bottom navigation bar, css buttons, Dreamweaver, hover state, LoVeHAte, pseudo class

Check this out:

Before we complete building the template for your Web site, you will need to know something about the magic of server-side includes, as these will be incorporated into your design.


Server-side includes offer a great deal of convenience for the Web designer/developer. I'm sure you will enjoy your experience with includes using Dreamweaver as the IDE to help you build and manage them.

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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: Dreamweaver, server-side includes, template

Check this out:

Let the fun continue: template creation. Exercise 2b is a guided tutorial through the creation of content for your site template: greeked text for the contents, a navigation ordered list for the nav tag, h6 navigation for the footer, a complete signature, and automated W3C.org validation. You will receive a handout in class stipulating all the steps necessary to create this material: Exercise 2b: Creating Your Site Template.

For this second part of creating your template, you will need to create some greeked text. You can copy some of this from your in-class exercise of last week or generate some new text at http://www.procato.com/lipsum/.

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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: bottom navigation bar, Exercise 2, greeked text, template

Check this out:

Now the fun begins: template creation. Exercise 2 (a and b) is a guided tutorial through the creation of your site template. You will receive a handout in class stipulating all the steps necessary to create a viable template: Exercise 2a: Creating Your Site Template,

Wrapper Model

Be sure that you understand conceptually the design principles depicted in the graphic to the right regarding the wrapper container that holds four other containing elements for your Web template: header, navigation, contents, and footer (click on the graphic to see an enlarged version).

Proper nesting of these containers is critically important in designing the structure of your template. Note that the wrapper div contains the siblings: header, navigation, contents, and footer. It may seem strange that the contents div is at the same relational level as the header and footer divs, but think of these containers as all needing to be separate (but not equal) and contained within a parent element.

The commented markup is inserted to clarify the relationships of the template divisions, identified by their particular HTML5 tag or unique ID (click on the graphic at left to see an enlarged version of the HTML5 markup).

Commented HTML5 of Wrapper Model

Note in the markup itself how the sibling divisions (header, navigation, contents, and footer) are contained in the parent div (wrapper), which is contained in the ultimate parent, the <body> tag. This containment exhibits proper nesting of the divs, without which your Web template would not function properly. The commenting is provided to help you and anyone else who may work with your Web to understand the underlying structure and divisions.

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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: contents, css id, div, Exercise 2, flow elements, footer, header, internal navigation, template, wrapper

Check this out:

Southwick Zoo Giraffe.

Today we will spend the majority of our time working on an in-class exercise to help make you more comfortable developing Cascading Style Sheet (CSS) rules. The exercise in large part focuses on the box model we discussed and worked with in the last class.

For this exercise you will need to generate some "greeked" text, available at the Lorem Ipsum Generator. You will also need to download and save into your Web site images folder this picture of a giraffe, which I took in July at the Southwick zoo. In class, I will provide you with further directions.

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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: CSS, CSS box model, greeked text

Check this out:

Click to enlarge.

As we examine Dreamweaver's facility with CSS, you may find the approach to margins, padding, and borders to be a bit confusing. The basic idea is that you have an element, such as a picture, that can have padding, a border, and a margin.

The relationship of the element, padding, border, and margin can be conceptually framed using a box: the CSS Box Model, pictured to the right (courtesy of image CSS).

The padding inserts space between the element and the border, while the margin inserts space between the bordered element and other elements, such as text. Notice the white space pushing the text away from the graphics in this announcement; that is achieved by margins top, right, bottom, and left.

Image courtesy of ClockParts.

The CSS rules as applied to the "Box" proceed clockwise: top, right, bottom, and left. In other words, think of a clock and build all your rules that way: 12 o'clock is the top, 3 o'clock is the right, 6 o'clock is the bottom, and 9 o'clock is the left. In using padding, borders, and margins, you create the rule by "going around the clock." We'll practice this in class today and in future class meetings.

A note in closing: remember that you could be working on ex1-myweb.htm (exercise 1) without using Dreamweaver. The discussion content can be written in Word and then ported over into your Web page. I would encourage you to write as much of that discussion material as you can now.

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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: clock model, CSS, CSS box model, Dreamweaver, Exercise 1, white space

Check this out:

In class this week, we will explore more carefully the ins and outs of cascading style rules. It is very important to create rules with the proper syntax and punctuation.


The "Cascading Style Sheets" PowerPoint tutorial will serve as our introduction to the formal aspects of CSS (here is a printed PDF version of the tutorial with notes).

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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: Cascading Style Sheets, CSS, PowerPoint, tutorial

Check this out:

With any luck, today we will finish Exercise 1, creating the shell of your world class IDCC 370 professional portfolio Web site. This final part of the exercise will involve creating the actual Exercise 1 page for your exercises portion of the Web site.

You will place two graphics on the page: the Web Directory Model from Assignment 1 and the Web site hierarchy graphic displayed in this announcement. Finally, you will document this whole procedure, being very careful to cite your sources correctly. Here is an Adobe PDF of the in-class exercise entitled "Exercise 1c: Creating Your Prototype Site."

An element of the documentation of Exercise 1 involves discussing the hierarchy of your IDCC 370 Web site. Here is the graphic representation of the top-tier gateway pages to your site: In class you will download this file and insert it in the appropriate place in your documentation for Exercise 1. You will then link the individual page icons with their respective resources.

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. Note also that each announcement has a permanent link, available through the announcement title and posting date.

Labels: 370 Model, directory, Exercise 1, prototype, top-tier gateway pages, Web site directory