Syllabus

Web Design I

PUDD 2028 – F
CRN 4457
Fall 2009

Instructor: Najlah Hicks
Email: najlah@mac.com
Course Blog: http://introtoweb.wordpress.com

Hours: Tuesday, 9:00 – 11:40
Location: 55 W. 13th, Rm. 425

Course Description:
Web Design I is a class that will be useful in virtually every other class you take within Digital Design. The web is at the forefront of business today and it is essential for all designers to have a clear understanding of how a web page is constructed. From self-promotion to communication to design solutions, understanding web design and coding will be the bedrock for future work

HTML, XHTML, interactivity, information architecture and navigational structures will be covered, as well as usability and Web design strategies. Your final project will be the completion of a portfolio web site.

Course Goals:
Upon successful completion of this class, the student will have gained the skills to plan, design and build a visually pleasing and structurally sound Web site that is compliant with the latest standards and best practices.

Grading:

10% – Attendance and Class Participation
40% – Weekly Assignments
50% – Final Project

Course Requirements:

• Come to class on time. Students arriving more than 20 minutes late may be marked absent.
• Attend all classes. Each week we will build on the work learned the week before. If you must miss a class, please let me know ahead of time. It is your responsibility to obtain any missed material from your fellow classmates, and to turn assignments in on time even if you are absent. Students missing more than three classes may fail the course.
• Turn in assignments on time. Work turned in late will lose one letter grade for every week that it is late. Work turned in more than two weeks from the due date will not be accepted. Midterm and Final projects may not be turned in late.
• Ask Questions. This is a technical class, and we will be covering a lot of information in a short time. If you are confused, lost, need clarification, etc, please don’t hesitate to ask questions in class. Chance are your fellow students will benefit from the answers AND this will add to your class participation grade! I am also available between classes via email.
• Academic Integrity. Plagiarism and cheating of any kind in the course of academic work will not be tolerated. Academic honesty includes accurate use of quotations, as well as appropriate and explicit citation of sources in instances of paraphrasing and describing ideas, or reporting on research findings or any aspect of the work of others (including that of instructors and other students). These standards of academic honesty and citation of sources apply to all forms of academic work (examinations, essays, theses, computer work, art and design work, oral presentations, and other projects).
• It is the responsibility of students to learn the procedures specific to their discipline for correctly and appropriately differentiating their own work from that of others. Compromising your academic integrity may lead to serious consequences, including (but not limited to) one or more of the following: failure of the assignment, failure of the course, academic warning, disciplinary probation, suspension from the university, or dismissal from the university.
• Every student at Parsons signs an Academic Integrity Statement as a part of the registration process. Thus, you are held responsible for being familiar with, understanding, adhering to and upholding the spirit and standards of academic integrity as set forth by the Parsons Student Handbook.

Reading and Resources:

There is no required text for this course, however a number of resources, both printed and online, will be referenced on the class Web site, and some reading and class review of these materials may be required.

Course Calendar:

Week 1: Intro to HTML/xHTML
Week 2: xHTML Part 2, SFTP
Week 3: Intro to CSS
Week 4: CSS Positioning
Week 5: Working With Images
Week 6: Advanced CSS
Week 7: Final Project, Rounded Boxes
Week 8: Functional Specs, Image Replacement
Week 9: Interface Design
Week 10: Intro to JavaScript
Week 11: Production Graphics
Week 12: Embedding Multimedia
Week 13: Fav icons, Search Engine Optimization
Week 14: QA and Usability Testing

Week 15: Final Project Presentations

Week 18 It Ain’t Over

Sign in guys…

Week 17 Resource Links

1. CSS Validator
2. 30 Scripts For Galleries, Slideshows and Lightboxes
3. Lots of great javascripts for navigations, scrollers, etc.
4. Gallery Scripts
5. Chatter Box
6. These are two great websites for someone who wants to work with javascripts.
7. Some inspirational stuff and resources for web development or graphic design (from Ana)
   http://www.devlisting.com/
   http://960.gs/
   http://www.forwebdesigners.com/
   http://www.colourlovers.com/A cool way of putting your portfolio stuff online: (Click on resources and see how beautifully it works in the form of spread)
   http://www.blackbook.com/
8. http://webdesignledger.com/ (from Alice)http://patterntap.com/

   http://jquery.com/

WEEK 16 – Final Presentation I

Please log in to let me know you’re here as well as to give me a url to your final presentation.

Kiwon

Ana

Meghan

Ashley

Veronica

Week 15: Bringing it all Home~

You’ve learned a lot this semester and now it’s time to bring it all home. Let’s review some really important things:

WEEK 1:

EVERY SITE YOU BUILD SHOULD HAVE:

Page Structure

In order for a Web browser to recognize a file as an HTML document, it must contain the proper structure. At the minimum, it must contain five basic tags. These tags must appear in the correct order. The page structure tags are as follows:

DOCTYPE tells the Web browser which HTML or XHTML standard your document is written to. For this class, you should use XHTML transitional. This is the first thing that should appear in any HTML document that you write.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Using these tags, you can build a basic page structure:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Untitled</title>

</head>

<body>

PAGE CONTENT HERE!

</body>

</html>

==================================================================================

WEEK 2

RESOURCES:

W3 Schools

This is a great resource site, I’m going to be referring to it a lot this class and in the future. If you are ever stuck for how to do something, start here:

http://w3schools.com

BASIC TAGS

Common Link Types
Link to launch a New Window
<a href=”newpage.html” target=”_blank”>
Link to launch email application
<a href=”mailto:myname@email.com”>

LINKING FILES:

Linking files

File linking is done through the use of the <a> or anchor tag.

Use the following syntax for linking to another document:

<a href="URL_of_target_document">link_text</a>

For example, if you were to link to Google, you would use the following code:

<a href="http://www.google.com/">Google</a>

To link to an email address, which will spawn the user’s designated email client, you simply need to add the “mailto” parameter:

<a href="mailto:emailaddress@server.com">email_text</a>

———————————————————————————————————————————————

WEEK 3

Commenting your Code

---

You can place a comment tag in your HTML to put a note into the code that will not be rendered by the browser. This is especially handy in a long and complex page. A comment is formatted as follows:

 

<!-- This is a comment -->

Everything between the <!– and –> tags will be hidden from the browser, but visible when you view the source.

Meta Data

Meta data is located within the <head> of a web page. Your meta data is basically information that you insert that explains what this page/site is all about. Copy and past the code text below into your head:

1. Keywords:
   Information inside a meta element describes the document’s keywords.
   The Code Looks Like this:
   <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
2. Description:
   Information inside a meta element describes the document.
   The Code Looks Like this:
   <meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML"/>

CSS

or example, if you wanted to redefine all HTML in your <p> tags to look like this, then your style would look like this:

p {
color: #00CC00;
font-size: 13px;
font-family: "Courier New", Courier, monospace;
font-weight: bold; text-decoration:none;
}

———————————————————————————————————————————————

WEEK 4

Linked States

You can specify a visual change to happen based on the users
interaction with the link:

a:link {color: #FF0000} = how the link text will appear
a:visited {color: #00FF00} = how the link will appear on a page when the user already has already viewed the page the link points to
a:hover {color: #FF00FF} = how the link will appear when the user holds their cursor on top of the link
a:active {color: #0000FF} = how the link will appear for the brief moment when the user clicks on it

NOTE: The link states should be specified in the order above or the changes to the links will not be visibly in all browsers or platforms

Adding images to your pages

Image tag

Images are displayed on the web using the image tag:
<img>

This is the basic syntax for using the image tag:
<img src="image_name" />

The “alt” attribute is used for the text that will display if an image does not load in the browser, and in some browsers is visible when you hover over the image with the mouse:
<img src="image_name" alt="alt_text" />

——————————————————————————————————————————————–

RESOURCE WEB SITES

15 Essential Checks Before Launching Your Website

CSS Web Navigator

Multi Column Layout

Awesome Javascript CSS Menus

40 High-quality and Free Icon Sets

40+ Absolutely Stylish & Creative Hand-picked Wallpapers

Site Map Due on Tuesday of WEEK 5

Organizing Information for the Web

Information Architecture Basics

In order for a web site to be useful and truly well designed, it has to be intuitive to use. Before launching into the visual design of a web site, there are some basic steps in the planning process that can help you to gain some of the necessary insights into your target audiences.

The life cycle of a web development project can be broken down into 3 basic steps…

1. Define: The Requirements Gathering Stage

2. Design: The Planning and Conceptual Stage

3. Develop: The Building and Quality Assurance Stage

4. Deduce: The Review and Assessment Stage

During the requirements gathering stage, you will need to lay down the framework that the project will be built upon. You will be defining…

• The types of information that the site will need to feature

• How to prioritize the information categories

• The most logical relationships between various types of information

Information Flow

How the user thinks and performs tasks, will determine how the information can be presented to fit users goals. User can view a web site in many different way:

- Linear (step by step)

- By Category (choosing a road, then following it)

- Moving from General to Specific (going from an overview to details)

- Jumping Around (moving according to individual choices)

Note: Best Practice: “5, plus or minus 2” Rule

5 items is considered the optimum amount of major choices for a User to sort

through at one time. However, plus or minus 2 is within the realm of comfort

for Users.

Site Map: A site map is used to get a general overview of the content that will be found within a web site and the hierarchy of how it will fit together. Each level is usually representative of one click. From the Home Page, the first level would be one click away, the second level would be two clicks away, etc. Since templated pages will be very similar to each other, there is no need to separately illustrate each one. You can indicate that more than one page will appear by overlapping several pages. If you know how many pages will be require it will be helpful to make a note of it, otherwise simply indicating multiple pages will be fine.

Assignment:

Create a site map to define the information architecture of your web site.

You must include pages (and/or) sections for the following information:

• your inspirations

• your design philosophies

• your future goals

• your skills

• samples of your work

Your site map must include at least 3 different types of sections…

• no (0) subpages

• two or three (2 or 3) subpages

• five (5) or more subpages

It’s up to you to chose whether each piece of required information above

will be a single page or a section containing multiple pages. You will also chose which section will be the longest or the shortest within your site.

Read: The following two (2) reference articles…

Glenn Doss – Information Architecture Deliverables and Diagrams

http://www.gdoss.com/web_info/information_architecture_deliverables.php

Week 14: Internet Explorer and CSS

All versions of IE implement CSS slightly off-standard (although we are told that IE 8 will be a completely standards compliant browser). With luck, your design will be flexible enough to accomodate these variations, but in the case that it is not, you may need to write some rules specifically for IE.

There are several ways you can do this. Many developers prefer to create a completely separate stylesheet for various versions of IE. You do this by using a conditional comment in your html:

<!--[if IE ]>

Special instructions for IE 6 here
<![endif]-->

You can create one of these for each version of IE that you wish to target.

Here’s a good quick list of how to target or ignore various versions of IE this way:

Target IE only the CSS way

And here is a site that uses this method:

early-adopter.com

The second method of targeting IE is to use notation in your stylesheet for IE-only rules that is read by IE but ignored by standards-compliant browsers.

.box {
   background: #00f; /* all browsers including Mac IE */
   *background: #f00; /* IE 7 and below */
   _background: #f60; /* IE 6 and below */
   padding: 7px;
   color: #fff;
}

More about this here

And here’s a stylesheet that uses this method

So which of these methods should you use? There is a lot of disagreement about this. Some people think you shouldn’t use the second method because your CSS won’t validate, and in the future you will have to go and manual remove these extra styles when they are no longer necessary. Others think writing a number of extra stylesheets for IE browsers is overkill.

For the purposes of your final project, I expect your site to look and work well in the following browsers:

• Firefox 2.0 / 3.0 (Mac and PC)
• Safari 3 (Mac)
• Internet Explorer 7 (PC)

For your own purposes you may want to check IE6 as well, since there are still a significant number of people out there using it.

---

Final Project Presentations

Be prepared to present your full Web site next week. All major site pages should be finished, and you should have a minimum of 5 work samples in your portfolio section. All links should work, and your site should render consistently in the target browsers.

In case of network failure, please bring a copy of your site on your laptop, flash or other external drive that can be loaded locally.

Week 13: Fav icons, Search Engine Optimization

Making a Fav icon for Your Site

The Fav or Favorite Icon is the small graphic that appears to the left of a Web sites URL in the location bar. You can easily create a custom fav icon for your own site.

Step 1: Get the .ico plug-in

The icon is a special file format, a windows icon (.ico), so the first thing you will need a plug-in for your graphics program to generate this kind of file:

Download an ico plug-in

If you are using Photoshop, this will go in the plug-ins folder within your application folder. Look for other file format plug-in files as a guide for where to put this. Once the plug-in is in the right place, you will need to restart your application to use it.

Step 2: Create the image

Icon files must by 16×16 in size. This doesn’t give you much to work with! Depending on the image you are trying to create, you may be able to reduce a larger image, but often you will find you need to create or edit these icons on a pixel by pixel basis. While you are editing, it helps to have the icon file open in two windows, one at 100% and one much larger so you can see the individual pixels.

Step 3: Save the image

Choose “Save” or “Save As” from the file menu. In the format options, choose “ICO (Windows Icon)”. If you want browsers to automatically recognize your icon, you must name it “favicon.ico”

Step 4: Upload the icon

For automatic detection of your icon, you must upload it to the root directory of your site, that is the same directory as your home page. It will then appear on any page at that level or below, on most browsers. It may take some time to see the icon in your browser, and you may need to clear your cache or restart to make this happen.

Resource: Favicon Generator

Step 5(optional): Modify your HTML

If for some reason you can’t or don’t want to put your icon file in the root directory, or you don’t want to apply it to all your pages, you can add code to the <head> section of your page using the <link> tag that will indicate the icon should be used:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

If you are using this method, you will need to add this code to every page where you want the icon to appear.

---

Search Engine Optimization

Search Engine Optimization (also known as SEO) refers to methods of making your site more easily and effectively indexed by search engines. Search engines generally utilize scripts called crawlers or spiders that catalog sites to build their directories. The precise algorithm that these engines use is a bit of a trade secret, to prevent unscrupulous stacking of the deck in search results, but there are a number of things you can do to make your pages more easily read by a crawler.

Meta Tags

The <meta> tag is used within the <head> section of your page, and can be used in a number of ways. The information contained in these tags is not displayed in the browser, but it is read by some crawlers. There are two uses of the meta tag that can are used by some search engines, although misuse of this has led to the meta data having less weight than other factors.

Keywords

Use this to provide a list of keywords associated with your site.

<meta name="keywords" content="art, design, portfolio, XML, XHTML, JavaScript, VBScript" />

Description

Use this to provide a short description of your site. Some engines display this in search results.

<meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML" />

Good Markup Means Good Search Results

The best way to ensure that a crawler will index your site well is to use good practice when coding. A crawler reads your html the way a text-only browser does. It ignores images, multimedia, javascript and sound. So you need to make sure there is some text for the crawler to read, and leave other clues as well. Using “alt” attributes in your image tags and “title” attributes in your anchor tags will help in this.

Get Links from Other Sites

One way that search engines rank your site is by looking at how many pages link to it. This will also help the crawlers find your page.

Submit Your Site to Search Engines

Once you have your site in good shape, you can submit it to search engines. This doesn’t guarantee listing, but it may help the crawlers get to you faster. Here’s a few places where you can submit your site:

• Google
• Open Directory
• Yahoo
• Ask

---

Week 13 | Homework

1. Keep working on your site, due in two weeks!

FINAL PRESENTATION ORDER:

PRESENT FINAL PROJECT:

DEC. 8^TH

Canale, Meghan E.

Kang, Hyung Min

Kwak, Ki Won

Murarka, Aradhana H.

Ibanez, Veronica

Parkin, Ashley K.

Tiismann, Emil A.

DEC. 15^TH

Im, Jun Hui

Kim, So Yoon

Stevens, Alice R.

Valencia, Stephanie J.

Brown, David

Bagwell-Green, Pierre M.

Beggs, Ashlee R.