IDCC 370: Web Design I Fall 2009

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.

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.

The graphic below illustrates the order (hierarchy) of your CSS rules in 370.css (click image to enlarge):


Remember that your 370.css must not only be in the correct hierarchy but also thoroughly and intelligently commented.

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 One, Assignment Two, Brown Battery Studios, Brownspank, commenting, CSS, w3c.org

Check this out:

It's time now to put the finishing touches on your template and top-tier pages. With the banner in place (Exercise Four in pdf), you are now 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. If you click on the screenshot to the left, you will be able to see some of the buttons and banner detail in the template page for exercise 5. 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.

For the next two classes or so, you should bring your Assignment One, if you have not finished correcting it yet, and any exercises that you may need to complete or polish up. If there is time in class, you may be able to tackle some of this material. Remember, Assignment Two with the annotated copy of Assignment One, is due Wednesday/Thursday, November 18/19, 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.

Labels: Assignment One, Assignment Two, banner, buttons, CSS, css buttons

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:

With the due date of Assignment One bearing down on us, you will probably want to spend some time with Dreamweaver in the CIS lab, Smith 212. The hours are posted on the CIS Web site, which you can visit by clicking the hours image to the right. You may want to just call ahead to make sure the lab is open during the posted time you wish to work on your material.

When working in the lab, save your material early and often. Make sure occasionally to save it to your M:drive and USB flash drive, especially if you are working after 11:00 p.m., as the computers in the lab will be refreshed near midnight. You usually get a 15-minute warning before the computer shuts down, but there have been accidents in the past.

Let me know if you have any difficulty accessing the lab during the hours posted.

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 One, CIS Lab Hours, Dreamweaver

Check this out:

Next class we will finish up the look and feel of your Web site template by creating the CSS "buttons." I think you will be amazed at how attractive your site will be when the banner and buttons are activated on all your pages. If you enlarge the screenshot to the left, you will be able to see some of the buttons and banner detail in the template page for exercise 5. 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.

For the next two classes or so, you should bring your Assignment One, if you have not finished correcting it yet, and any exercises that you may need to complete or polish up. If there is time in class, you may be able to tackle some of this material. Remember, Assignment Two with the annotated copy of Assignment One, is due Thursday, April 9, 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.

Labels: Assignment One, Assignment Two, banner, buttons, CSS, css buttons

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:

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.

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: Assignment One, Brown Battery Studios, Brownspank, commenting, CSS, w3c.org

Check this out:

Next class we will finish up the look and feel of your Web site template by creating the CSS "buttons." I think you will be amazed at how attractive your site will be when the banner and buttons are activated on all your pages. If you enlarge the screenshot to the left, you will be able to see some of the buttons and banner detail in the template page for exercise 5. 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.

For the next two classes or so, you should bring your Assignment One, if you have not finished correcting it yet, and any exercises that you may need to complete or polish up. If there is time in class, you may be able to tackle some of this material. Remember, Assignment Two is due Tuesday, November 18, 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.

Labels: Assignment One, Assignment Two, banner, buttons, CSS, css buttons

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

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.

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: Assignment One, Brown Battery Studios, Brownspank, commenting, CSS, w3c.org