IDCC 370: Web Design I Fall 2009

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 six 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 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. Exercise 6a: Optimizing a Word File in XHTML
2. Exercise 6b: Callouts and Graphics Floated
3. Exercise 6c: Contents with Style

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, Microsoft Clip Art, Open Communication Climate, scrubbed, Semantic Web, source graphic, spell-check

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: 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'09, Bentley University, Waltham, MA 02452</title> Another: <title>Exercise 5 – The Finished Template, William Buchholz, IDCC 370, Fall'09, Bentley University, Waltham, MA 02452</title> You get the idea.
6. 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.
7. 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.

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: "click here", alt, Assignment One, background, contrast, meta tags, proofreading, shift f7, sources, spacing, spell-check, writing

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: Be sure that all graphics contain Alternative Text (ALT). 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, Spring '09, Bentley University, Waltham, MA 02452</title> Another: <title>Exercise 5 – The Finished Template, William Buchholz, IDCC 370, Spring '09, Bentley University, Waltham, MA 02452</title> You get the idea.
6. 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.
7. 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.

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: "click here", alt, Assignment One, background, contrast, meta tags, proofreading, shift f7, sources, spacing, spell-check, writing

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

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

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

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: Be sure that all graphics contain Alternative Text (ALT). 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 '08, Bentley University, Waltham, MA 02452</title> Another: <title>Exercise 5 – The Finished Template, William Buchholz, IDCC 370, Fall '08, Bentley University, Waltham, MA 02452</title> You get the idea.
6. 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.
7. 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: Sourcing Your PowerPoint Slides) that spelled out exactly how to create your documentation both in the text and in the sources.

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: "click here", alt, Assignment One, background, contrast, meta tags, proofreading, shift f7, sources, spacing, spell-check, writing