WEB 2 (MGD2410) STUDENTS: you’ll find your syllabus here:

mgd241_spr11_syllabus

Web 1 Students: Follow the link below to download a pdf copy of the course syllabus.

MGD141_spr_11_syllabus

Here is an overview of the syllabus:

Overview:

In this course, you will learn the technological, informational and aesthetic principles of web design, with

an emphasis on learning foundational code technologies at the root of all web design. This will be done with a

combination of in-class lectures and hands-on projects. The broad concepts will be broken into three categories:

Technology: Early in the semester, we will lecture heavily on HTML, XHTML, CSS and Javascript. In fact, you will hand-write the code for your first web project. Later in the semester, we will use some of the more common web production software, such as Adobe Dreamweaver and Flash.

Information Architecture: Without a doubt, the single most important facet of a web site is the information it

contains and how that information is arranged. It is so important that 50% of your grade on each web project will be based upon information architecture. We will discuss strategies for producing high-quality, informative web content and constructing navigation that easily and intuitively leads users to the content.

Aesthetics: As is true with all communication media, the visual design should help enhance the understandability of the information. It should give visual clues about the nature of the contents and should help guide the user through the contents. We will discuss general design concepts such as composition and color use, and much of this discussion will occur during in-class critiques of your web sites.

Your grade:

Each of the following is worth 25% of your overall grade:

Midterm test

Project 1 – Personal Web Site

Project 2 – Professional Web Site for a Client

Comprehensive Final Exam

The Projects:

You will be building two web sites in this class, each of which is worth 25% of your grade.

For each project you will do the following:

1) Write a Project Specification (project spec) which details your plan for the web site. It is to be typed and

handed-in on the due-date, generally 3-4 weeks before the project is due.

2) Project 1 only – present a completed homepage. This will come about halfway through the production process, so we can make sure you are on the right track.

3) Present your completed website in class.

Project 1 will be a personal website. Its goal can be to market your professional skills, to keep in touch with

family and friends or to tell others about a particular hobby or interest. The idea is that no one knows you better than you, therefore it should be fairly easy to put together the information you need without a lot of research.

Project 2 will be a professional website for a client. You will need to solicit a client in the community

(anything from your brother’s garage band to your aunt’s insurance business), develop a project spec. and build a completed prototype. If the client chooses to use your web site, you should be able to help him or her acquire a domain name, find a web host and launch the site.

Grading the Projects:

Your projects will be graded on the following criteria:

1) Goal (20%) – did the site successfully achieve the goal you set out in your project spec?

2) Information Architecture (50%) - is the information in your website comprehensive and well written,

with few or no grammatical mistakes? Does your navigation lead the user to the information they are seeking

clearly and with as few extra mouse-ckicks as possible?

3) Technology (15%) - Does all your HTML render correctly in most common browsers? Do all your photos and

artwork render correctly? If you are using javascript or other more-advanced technologies, do they work

correctly?

4) Visual Design (15%) - Is your website aesthetically pleasing? Does your visual design make it easier for a

user to understand your website or does it get in the way of the contents?

Hi, all.

The link below is to a zip archive chock full of stuff from our first two javascript lectures. Enjoy!

tri-state button

Class:

One of you sickos managed to infect me. Rather than infecting the few remaining healthy students, my germs and I are going to stay in bed tomorrow. So, if you were planning to pull an all-nighter tonight, feel free to order a pizza, put your feet up and play a video game.

 To recap:

No class/no test Wednesday.

The midterm WILL be given in class Monday the 19th.

The project 1 websites will be due Wednesday the 21st.

See you Monday.

Mark

The midterm will be Wednesday!

You will have the whole class period, and can use any notes, cheat sheets, reference manuals and/or textbooks you can carry into the classroom. You may not, however, use a computer. Here is the file we created Monday while reviewing for the test. Good Luck!

midterm_review

Here are some notes from previous lectures regarding HTML, CSS (which will be on the midterm) and XHTML (which will not)

lecture7 (this is a CSS-HTML based page layout)

tables1 (this is a repeat from elsewhere above, but it is a good tables-based layout example)

lecture1 old notes, but worth repeating if you’ve lost them

lecture2 ditto above

website_example Another early tables-based layout

 Remember, this is a pencil-and-paper test, so bring plenty of writing materials — and leave the laptops in the bag.

Here is a link to a zip archive containing notes from last week’s lectures on tables.

Enjoy

tables1

For those of you who did not turn in your project specifications on Wednesday, you may turn them in Monday. I’d rather have them done well than turned in on time.

I urge all of you to review your project specs and make sure you have clearly stated a goal for your website. Just saying “this is a personal website” is not enough. I want you to describe what you hope to achieve with this website (getting a job/advancing your career; connecting with out of town friends and family; connecting with people who have similar hobbies or interests; etc.)

Don’t gloss over this. The more clearly you articulate your goal, the better the chances that your content will be cohesive and on point.

Also, 20% of your grade is based on “did the website meet the goals as set out in the project spec?” Another 50% of your grade is based on the quality of your content and navigation.

So it behooves you to get this right.

See you all Monday. have a good weekend.

M

When last we met, we discussed optimizing photographs and graphics for the web using Adobe Photoshop. here’s a synopsis:

All images for you website should be…

• 72 dots (pixels) per inch resolution
• RGB
• Cropped and scaled as close as possible to the final size as it will appear on your website.
• Saved as either a jpeg (for photos) or gif  (for artwork, graphics, text).

To web optimize a photo in Photoshop, do the following:

1. Open the original photo.
2. go image -> mode and check that the image is RGB. If not, change it.
3. go image -> adjustments -> levels -> auto to do an auto-levels color correction. This should get you close to where you want to be in therms of color balance, brightness and contrast.
4. From the toolbar, select the cropping tool. You will see a contextual menu appear at the top of the screen that will allow you to enter certain values. Enter the width you want the final picture to be (if you know it) or the height (if you know it). MAKE SURE TO TYPE px for pixels after the number – photoshop defaults to inches and you can accidentally make your picture way too big! Also enter 72 under resolution.
5. Marquee the cropping tool over your picture and adjust the handlebars until the photo is cropped the way you want it. Press “enter”.
6. Go to filter -> sharpen -> unsharp mask. Leave the settings alone. Press OK. this will sharpen your picture.
7. Go to file -> save for web and devices.
8. On the right-hand panel, set to JPEG, quality=60.
9. Give the optimized picture a name and save it your “images” subdirectory on your website.
10. close the original image. DO NOT SAVE CHANGES.

The same steps apply to making a gif file, but from the “optimize for web” panel, set it to gif instead of jpeg.

The code:

To bring an image onto your HTML page you use the <img> tag. All the action happens in the attributes to the tag. Here is an example of an image tag with most all the attributes in place. The really important ones are src, height,width, and alt. Those should be in every image tag you write.

<img src=”images/my_picture.jpg” height=”100″ width=”250″ alt=”this is my picture” align=”left” hspace=”10″ vspace=”10″ border=”1″>

Monday was basically a review of last week, so the page we created contains many of the same tags. Download it here:

lecture2

We then discussed the wonders of hexadecimal math and its relationship to defining colors on the web page. In a nutshell…

1. every color is a six-digit number, for instance #123456
2. the first two digits represent the amount of red; the second two are for green and the third two are for blue
3. the value for each color can range from 00 to ff hexadecimal (0-255 in base 10 – the way we always count)
4. #000000 represents black
5. #ffffff represents white
6. if all the numbers are the same, you’ll get a shade of gray
7. to figure out which color you have, look to see which of the number-pairs is largest, then work from there. For instance, #fc3465 is a shade of red (probably leaning toward violet). We know this because the value for red (fc) is higher than the values for the other two colors.

I ended the lecture by showing you how to build a basic 5-page website in 15 minutes. That website is in a zip archive which you can download here…

website_example

See you all Wednesday

In the first lecture, we worked on tag syntax. Almost all HTML tags take the following form:
<tagname attribute=”value” attribute=”value” etc.>Text goes here</tagname>

We also discussed the usage of the following type-related tags:

h1-h5, p, br,b, strong,i,font

and the <a> tag, which puts the “hyper” in hypertext.

Here is the page we built in class. This is a HTML document, so right-mouseclick the link and go to “save target as…” Otherwise, the page will open up in this browser window. If that happens, you can go view -> source, and save the notepad document to your computer.

lecture1

Here are the eight tags which will make up the bare-bones structure of every web page you create in this class. Learn to love them.

<html>

<head>

<title> </title>

</head>

<body>

</body>

</html>