Spring 2007		Room		Time		Instructor: Howard Rosenbaum		Telephone: 855-3250		Office hours
		LI002		9:30-12:15 AM M		hrosenba@indiana.edu		Office: 005B@SLIS		12:30-2:00 M 3:30-5:30 PM T

Use this table to move through the syllabus:

Use this link to return to the syllabus home page.

Introduction

Estimates of the number of net users vary widely, but the clear trend is that there will be continued growth in Internet and web use for the foreseeable future. According to the ClickZ Network 1 (2005):

There are countless sources for the number of Internet users in any given country. ClickZ Stats tries to maintain an updated list of the latest statistics on Internet users we've seen for countries around the world. Often, there are widely differing counts. We do our best to check on the accuracy of counts by comparing them to regional growth patterns and other projections.

The following table represents ClickZ's² (2005) best estimate of how Internet users were distributed across the world in 2005 (there is rounding error here for individual country estimates and regional estimates):

There are some fascinating trends in this growth. For example, according to the UCLA Center for Communication Policy³(2003)

Each of the three studies by the UCLA Internet Project shows that Internet access spans every age range - and in some age ranges, access approaches 100 percent.

Not surprisingly, Internet use is highest among those age 35 and under, with especially high use among those age 18 and under. However, Internet users in 2002 represented at least two-thirds of respondents in most age ranges

97% of 12-18 year olds responding to this survey are online

The Pew Internet Life Project⁴ (2005) has a frequently updated table providing demographics of internet users in the US. In December, 2005, 72% of all adults were online. The gender and age demographics are as follows:

According to Lenhart, Madden, and Hitlin 5 (2005),

The number of teenagers using the internet has grown 24% in the past four years and 87% of those between the ages of 12 and 17 are online. Compared to four years ago, teensÕ use of the internet has intensified and broadened as they log on more often and do more things when they are online.

Among other things, there has been significant growth over the past four years in the number of teens who play games on the internet, get news, shop online, and get health information.

Not only has the number of users increased, but also the variety of technologies that teens use to support their communication, research, and entertainment desires has grown.

These technologies enable a variety of methods and channels by which youth can communicate with one another as well as with their parents and other authorities. Email, once the cutting edge 'killer app,' is losing its privileged place among many teens as they express preferences for instant messaging (IM) and text messaging as ways to connect with their friends.

In focus groups, teens described their new environment. To them, email is increasingly seen as a tool for communicating with 'adults' such as teachers, institutions like schools, and as a way to convey lengthy and detailed information to large groups. Meanwhile, IM is used for everyday conversations with multiple friends that range from casual to more serious and private exchanges.

At the other end of the spectrum, the UCLA Center for Communication Policy⁶ (2003), reports that:

Even use among the older respondents is showing steady growth; more than one-third (34 percent) of those over 65 went online in 2002 Ð up from 29 percent when the UCLA Internet Project began in 2000.

As more Internet users gain access to the WWW and discover the ease with which HMTL can be used to create web documents, thousands of new sites come online each day. This in turn means that millions of new personal and/or organizational web pages become part of the interlocked networked information environment.

One important consequence of this activity is that questions of the organization, design, and presentation of digital information have become much more important because of the increasing pervasiveness of the net, and particularly the web, in our work and personal lives. In this fourth phase of the development of the net, as public and private sector organizations increase their reliance on information and communication technologies, more and more of their information is created, stored, and disseminated in digital form across packet switched public networks.

This presents us with a challenge: what are we to make of the trend of moving more and more of our personal and work activities into the networked digital environment, including commerce, organizational business processes, banking, investing, education, entertainment and communication?

One thing is clear: these activities are going to take place on the web. Each will require a different type of web-based digital information space that can "do work" - that can do one or more specific and complex tasks efficiently, quickly, and simply for a wide range of people who will be accessing and using these sites with a variety of devices and interfaces from a wide variety of locations. Bad design, in many of these cases, cannot be an option and good design should be transparent and ultimately invisible.

Information architecture is one key that we can use to manage this challenge.

Information Architecture for the Web is a course about web site development and design. We will have three main tasks this semester. First, we will learn about web design, covering basic markup, page layout, navigation schemes, information organization, and site structure. Second, we will learn about project management as it is used in the team-based development of complex web sites. From these two main themes, we will arrive at an initial understanding of information architecture for the web.

We will then pursue our third task by focusing on the conceptual, technical, organizational, and social contexts that surround the development and maintenance of large-scale and complex web sites. When we are through, we will have a deeper understanding for the concept of information architecture and an appreciation for its use in the design of web-based information spaces.

Where can we begin this exploration?

For a start, we can think about what is included in the term. Dillon ⁷(2000), argues persuasively that "information architecture currently represents a collective process more accurately than it describes what any individual does." Although the term can be used to describe work with a wide variety of information spaces, in this class, we will focus on the web as a specific case of an information space. Accordingly, we can begin with definitions that focus on our first task: web site design, but which begin to clarify the distinction between an information architect and a web designer. According to Withers, Casson, Shrimplin, and Adams,⁸(2000),

The core of information architecture is Web site navigation, labeling/naming schemes, and Web site structure. Information architects determine the functional and conceptual building blocks of a site. Unlike Web designers who are concerned with typeface, graphics, and other particulars of constructing an interface, information architects create organizational and navigational structures that help people access information.

Rosenfeld and Moreville ⁹(2002; 11) define information architecture in broader terms, coming closer to the approach we will take in this class. The information architect:

Clarifies the mission and vision for the site, balancing the needs of its sponsoring organization and the needs of its audiences.

Determines what content and functionality the site will contain

Specifies how users will find information in the site by defining its organization, navigation, labeling, and searching systems.

Maps out how the site will accommodate change and growth over time.

Schiple¹⁰ (2000) agrees:

Information architecture (also known as IA) is the foundation for great Web design. It is the blueprint of the site upon which all other aspects are built - form, function, metaphor, navigation and interface, interaction, and visual design. Initiating the IA process is the first thing you should do when designing a site.

Why should information architecture be of concern to information professionals? Internet connections in the public and private sectors, in the form of intranets and extranets, are increasing at an increasing rate. The government is moving more and more of its information to the web. Most academic libraries are on the Internet, more than two thirds of public libraries have connections to the Internet, and primary and secondary schools are connecting to the Internet every day. For information managers and brokers, the Internet is becoming an important source of research. Furthermore, as costs come down, a greater percentage of the general public is purchasing accounts from commercial service providers which allow them to access the Internet.

In this course, we will investigate information architecture as a social and technological phenomenon, focusing on the ways in which information-based organizations are making use of the web, and the impacts that the web is having on communication activities, productivity, and information seeking behavior. With this background, you have an opportunity to play an active role in defining what an "information architect" will be and the role that information architecture will play in determining the structure and functions of information spaces, such as intranets, portals, and digital libraries in the electronic, networked, information environment. You will be in a position to evaluate the role you and your organization will play in the development of the Web; whether it is envisioned as a "superhighway," a "cloud," or territory to be "mined." In doing so, you will help move the information professions into the next century.

The purpose of this course is to explore information architecture for the web in two ways. First, there will be an emphasis on developing a knowledge base and set of skills that will enable you to efficiently and effectively design and build complex web sites in support of your professional and personal goals.

This facet of the course will include explorations of:

• The HTML 3.2 standard, including tables, forms, and frames, to exploit the possibilities of the web and allow you to become a publisher of networked information;
• Cascading style sheets (CSS), a standard that allows you to take advantage of HTML 4.01, and XHTML;
• The basics of javascript, PHP, and DHTML, to add interactivity to web pages; and
• The basics of web page layout and web site design

Second, we will explore information architecture as a complex socio-technical process. This facet of the course will include explorations of:

• The basics of information architecture (what information architects do, how they describe their work)
• The relationship between information architecture and a socio-technical understandings of organizations and work settings; and
• The complexities of web project management for the team-based development of complex web sites.

Notes:

All links will open in a new window

1. ClickZ Network (2005). ClickZ Stats: Trends & Statistics: The Web's Richest Source

http://www.clickz.com/stats/web_worldwide/
Return to text

2. ClickZ Network (2005). ClickZ Stats: Trends & Statistics: The Web's Richest Source

http://www.clickz.com/stats/web_worldwide/
Return to text

3. UCLA Center for Communication Policy. (2003). The UCLA Internet Report: Surveying the Digital Future Year Three

http://ccp.ucla.edu/pages/internet-report.asp
Return to text

4. Pew Internet Life Project. (2005). Demographics of Internet Users

http://www.pewinternet.org/trends/User_Demo_4.26.06.htm
Return to text

5. Lenhart, A., Madden, M. and Hitlin, P. (2005). Teens and Technology: Youth are Leading the Transition to a Fully Wired and Mobile Nation

http://www.pewinternet.org/PPF/r/162/report_display.asp
Return to text

6. UCLA Center for Communication Policy. (2003). The UCLA Internet Report: Surveying the Digital Future Year Three

http://ccp.ucla.edu/pages/internet-report.asp
Return to text

7. Dillon, A. (2000). I think therefore I IA?. Bulletin of the American Society for Information Science and Technology. 27(2).

http://www.asis.org/Bulletin/Dec-01/dillon.html
Return to text

8. Withers, R., Casson, R., Shrimplin, A., and Adams, K.C. (2000). Information architecture Tools for cutting-edge Web developers. College and Research Library News. October.

http://www.ala.org/acrl/resoct00.html
Return to text

9. Rosenfeld, L. and Moreville, P. (2002). Information Architecture for the World Wide Web: Designing Large Scale Web SitesSebastopol, CA: O'Reilly Press.

Return to text

10. Schiple, J.. (2000). Information Architecture Tutorial. WebMonkey. The Developer's Resource

http://www.webmonkey.com/98/28/index0a.html?tw=design
Return to text

Return to table

Course Objectives

At the end of this course, you will:

• Be able to publish linked documents on the World Wide Web using HTML 3.2, 4.0, Cascading Style Sheets, XHTML, and DHTML, and some basic Javascript and PHP;
• Be familiar with basic principles of web page layout and web site design,
• Understand the applications of information architecture for the organization and presentation of web-based digital information;
• Understand the relationship between the practice of information architecture and the organizational, social, and technical contexts of web site design, implementation, and maintenance
• Be able to discuss knowledgeably what information architecture is and what information architects do

Return to table

Requirements

To receive a passing grade in this course, you must turn in all of the assignments and the term project and do your presentation. You cannot pass this course without doing all of the assigned work, however, turning in all of the work is not a guarantee that you will pass the course. Grades of <I> (Incomplete) may be assigned in this course after discussion with the instructor, but depending on the circumstances, there will be a penalty applied at the discretion of the instructor.

All papers and assignments must be submitted on the dates specified in this syllabus. If you cannot submit an assignment or cannot deliver a presentation on the date it is due, it is your responsibility to discuss your situation with the instructor, preferably in advance. Given that your reasons or problems are legitimate, arrangements for the completion of the outstanding work can be made; this will occur, however, at the discretion of the instructor.

There will be a penalty for work turned in after the assigned date, and this will also be applied at the discretion of the instructor.

Your written, web-based, and oral work will be evaluated according to five criteria; it must:

• Be clearly written, marked up, and/or presented;
• Contain HTML markup that has been done by hand and which conforms, at a minimum, to the HTML 3.2. One assignment must conform to the HTML 4.01 Standard and one assignment must conform to the XHTML 1.0 standard;
• Demonstrate a degree of insight into the concepts, issues, and trends in both the areas you investigate in the assignments and in the course content;
• Demonstrate a degree of originality in your reviews, analyses, and projects; and
• Display some familiarity with the appropriate current and/or classic literatures where appropriate.

Borderline grades will be decided (up or down) on the basis of class contributions and participation throughout the semester.

Academic dishonesty

3. Plagiarism

A student must not adopt or reproduce ideas, words, or statements of another person without appropriate acknowledgment. A student must give credit to the originality of others and acknowledge an indebtedness whenever he or she does any of the following:

a. Quotes another person's actual words, either oral or written;

b. Paraphrases another person's words, either oral or written;

c. Uses another person's idea, opinion, or theory; or

d. Borrows facts, statistics, or other illustrative material, unless the information is common knowledge.

From: http://www.dsa.indiana.edu/Code/index1.html

Plagiarism is the use of someone else's ideas, words, or opinions without attribution. Any assignment that contains plagiarized material or indicates any other form of academic dishonesty will receive a grade of F. A second instance will result in an automatic grade of F for the course. Penalties may be harsher depending upon the severity of the offense. See Indiana University's "Code of Student Rights, Responsibilities and Conduct" [link to code].

There is more to avoiding plagiarism than simply citing a reference. To aid students both in recognizing plagiarism and in avoiding the appearance of plagiarism, Indiana University's Writing Tutorial Services has prepared a short guide entitled "Plagiarism: what it is and how to recognize and avoid it". This guide is available at: http://www.indiana.edu/~wts/wts/plagiarism.html. It provides explicit examples of plagiarism and offers strategies for avoiding it. Each student should be familiar with this document and use it as a guide when completing assignments.

Dr. Russel Williams, at Florida State University, offers tips on avoiding inadvertent plagiarism:

1. If you take material that is not yours, from any source whatsoever, and copy it into assignments for this class, you must provide an appropriate footnote, endnote, parenthetical, and/or bibliographic reference to the source of the material.
2. Any material quoted verbatim from other sources must be enclosed in quotation marks and its source attributed as noted in item #1 above.
3. Material not taken verbatim from a text, but is paraphrased must also be attributed in the manner indicated in item #1

Indiana University and School of Library and Information Science policies on academic dishonesty will be followed. Students found to be engaging in plagiarism, cheating, and other types of dishonesty will receive an F for the course. As a rule of thumb, when in doubt, cite the source!

The following definitions of letter grades have been defined by student and faculty members of the Committee on Improvement of Instruction and have been approved by the faculty (November 11,1996) as an aid in evaluation of academic performance and to assist students by giving them an understanding of the grading standards of the School of Library and Information Science:

Return to table

Other Important Information

There are three ways you can get in touch with me outside of class:

1. My office is Room 005B in the School of Library and Information Science, Bloomington campus, and my office hours are 12:30-2:00 PM, Monday and 3:30-5:30 PM, Tuesday. I can also meet with you by appointment if these hours are not convenient.
2. My office phone number at SLIS is 812-855-3250. I have voice mail, so you can always leave me a message.
3. My email address is hrosenba@indiana.edu. I will check the mail at least twice daily and will respond to messages when I read them. This is a good way to for you to communicate with me privately - email messages do not get lost!

There are also two ways for you to communicate with everyone else in the class, including me.

1. There is a mailing list, called hrosenba_infonet, to which we are all subscribed.

   By sending an email message to hrosenba_infonet@listserv.indiana.edu, you can communicate with everyone else simultaneously.

   I will use the mailing list to send messages to the class; typically, these will be clarifications of questions about assignments and other important information, such as when I must alter or cancel office hours. I'll also send interesting postings that cross my desktop from time to time. You can use the list and the blog to ask questions of your colleagues as the semester progresses.

2. There is also a wiki called "infoarch," to which we all have access. It can be found at https://ella.slis.indiana.edu/g/infoarch.

   We will use the wiki for posting comments and questions and having discussions about about web work throughout the term.

I suggest that you check your e-mail every day!

Return to table

Assignments

You will be evaluated on the basis of a three brief writing assignments based on the class readings and four markup assignments that make use of the various languages we learn in class, all of which will be marked up and placed on the web. You will also be evaluated on the basis of your term project, which is to design a website for a client and write a three part project documentation report that will also be placed on the web. These assignments are described below, and will be discussed in greater detail in class.

Here are detailed descriptions of the assignments that you will do for this class:

• For this assignment, you will write three brief critical response essays, each not to exceed 500 words that you will place on the web. As we learn about web work, we will be examining a range of issues that are relevant to information architecture and web site development, evaluation and maintenance. Some examples of these issues include:
  • Design: There are contrasting approaches to successful web site design - in your opinion, what is the best approach to successful web site design? Why?
  • Accessibility: Designing web sites for accessibility is an unnecessary burden for designers of most web sites - do you agree or disagree? Why?
  • Information architecture: Developing a working definition of information architecture - what definition makes sense to you? Why?
  • IA and design: There is no difference between information architecture and web design - do you agree or disagree? Why?
  • Standards: Web designers should write code that validates to W3C standards - do you agree or disagree? Why?
  • Web site evaluation: Usability testing can be done with three to five people and most of the relevant problems can be uncovered - do you agree? Why?

  For this assignment, select an issue and write a critical response to the questions posed. Of course, you are not limited to these suggestions. If there is an issue you would like to address, you must discuss it with the instructor in advance of the issue description due date and receive approval.

  Each issue is explored in readings that will be the basis of our class discussions throughout the term. When you have selected the issue that interests you, read the relevant articles and:

  • Write a critical commentary about the information architecture or web site design issue you have selected. Explain its meaning and significance based on what you have read about it
  • Take a position on the issue and support it with evidence from the reading or from other sources that you consult

  You will write three critical response essays over the course of the term and will use these documents the as basis for markup assignment #1, described below.

  Each of the three documents must be marked up with valid HTML. This markup will include:

  • At least one external link to a web file that you do not own;
  • At least one link to another document you have created;
  • At least one background color or image; and
  • At least one image in the page.

  Essay #1 must validate with at least HTML 3.2.

  Essay #2 must validate with at least HTML 4.01.

  Essay #1 must validate as XHTML 1.0.

  When you have completed each essay, place it in your <www> directory, and email the <URL> to the instructor. The first document will be posted as a stand-alone document. By the time the second commentary is due, this first and the remaining two documents will become part of a frameset used in markup assignment #1.

  When you have decided which issues you wish to explore, send a brief email to the instructor indicating your choices according to the schedule below. In this case, "brief" means a sentence or two outlining the issue about which you will write.

  		Essay description due		Essay due
  Essay #1		January 15		January 29
  Essay #2		February 5		February 19
  Essay #3		February 26		March 19

  You will be evaluated for the content of your commentaries and questions as well as the markup. Each assignment will be worth 5% of the final grade for a total value of 15%. This assignment will be discussed in class on January 8 and the essay will be due according to the schedule above

Return to Assignments list

• You will be learning about two different versions of HTML markup this term as well as being introduced to two scripting languages and a combination of all of these. These assignments give you four opportunities to practice what you have learned in class.
• Markup assignment #1: frames and tables

  For this assignment you will design a frameset that will display your critical response essays. This will require that you create and markup at least seven files.

  • The first file will establish the frameset, which will be split into at least three frames. One of these frame windows must contain a file that provides navigation through this set of documents (a table of contents). The table of contents must contain at least three targeted links among frame documents. The active frame must contain the equivalent of a cover page. The third frame must have a file as well.
  • The rest of the set will contain the three documents you have written for the first assignment, all of which must pass through an active frame.

  When you have completed this assignment, place it in your <www> directory, and email the <URL> to the instructor. The first version of the assignment will be due on February 26 with the first two critical response essays used as one of the frames documents. As the semester progresses, you add the remaining critical response essays to the frameset by their due dates.

  The final version of this assignment will be due on April 2 and will be worth 5% of the final grade. The frames and tables components of the assignment will be discussed in class on February 5.

• Markup assignment #2: Forms and PHP

  For this assignment, you will create a new document that you will add to your frameset. This document will contain a form and make use of PHP for processing data entered into the form. The form will allow a reader to evaluate your critical response essays and submit comments to you.

  This document will contain the following:

  • At least three different form input elements;
  • A script that generates a message that the reader will see when she submits comments and rankings;
  • A script that generates the date and time

  When you have prepared this document, place it in your <www> directory, add it to the frameset that you created for markup assignment #1, and email the <URL> to the instructor.

  It is due on March 5 and will be worth 5% of the final grade. This assignment will be discussed in class on February 12.

• Markup assignment #3: Cascading Style Sheets

  For this assignment, you will redo your resume (which you should have done for 401) using CSS. If you do not have your resumae in online form, you will create one for this assignment.

  You will create a cascading style sheet that will be linked to at least three different and linked HTML documents. This means that you have to think about breeaking up your resume into at least three pages. For example, you could have a cover page, one page for education and honors, and a third page for work experience, and references. How you do this is up to you.

  The style sheet will include rules and declarations for:

  • Structuring the documents;
  • Specifying fonts;
  • Laying out text and images;
  • Setting colors;
  • Setting spacing for page elements using margins, borders, backgrounds, and padding; and
  • Absolute and relative positioning.

  At a minimum, the following elements must be somewhere in your document set:

  • Two external links to documents you do not own;
  • Two links to other documents you have created;
  • Two internal (or within-page) links to sections of your page;
  • A table with at least three rows and two columns that makes use of CSS markup
  • At least one background color or image; and
  • At least three images

  Remember that your goal is to remove as much presentation markup from your content pages as you can.

  When you have completed the assignment, you will place the CSS document set in your <www> directory and email the <URLs> of the first page and the external style sheet to the instructor.

  This assignment will be discussed in class on February 26. This assignment will be due on March 26 and will be worth 10% of the final grade.

• Markup assignment #4: Dynamic HTML (DHTML)

  Dynamic HTML or DHTML is a type of web site development that combines javascript (or other scripting languages), XHTML, and CSS. For this assignment, you will use DHTML to mark up the three critical response essays in your frameset.

  For this assignment, you:

  • Make copies of your frameset and the three essays. All of the work for this assignment will be done on the copies.
  • Develop an external style sheet with the same elements required for markup assignment #3 (CSS). All of the text files used for this assignment will be linked to the style sheet.
  • Include at least one working javascript script or other DHTML function on at least one file in the frameset.

  Using XHTML, these pages will:

  • Conform to the XHTML 1.0 transitional DTD or the XHTML 1.0 Frameset DTD;

  • Be valid and well formed;
  • Use the proper syntax for all non-empty and empty elements;
  • Contain properly formatted attributes and values;

  It is due on April 16 and is worth 5% of the final grade. This assignment will be discussed in class on March 26.

Return to Assignments list

• For this assignment, you will spend the semester developing a web site for a client of your choosing. This client may be real or imaginary, although the former is preferred. A real client provides you with several benefits:
• It will allow you to develop and improve your communication skills as you work with your contact person to find out what he or she wants in the web site.
• You will learn about time and project management as you balance their needs and requirements against the constraints of your skills and abilities.
• You will have a well designed site that is actually being used on the web, which is a wonderful addition to your online portfolio.

Because we do not know in advance who your client will be, there are no apriori requirements for specific forms of markup to be used in the project, except for the stipulation that the site will validate as at least HTML 4.01.You select the type of markup, design, architecture, and content that is appropriate for your project. You will be expected to demonstrate what you have learned in the course in the site that you design. The web site that you create should be useful, usable, well-designed, cleanly marked up, contain significant content, and be targeted at a specific audience.

There is also no specific length requirement. The site is a term project and should represent a significant amount of work and effort. The instructor will meet with you early in the term to discuss your project with you so that there can be an agreement on reasonable project parameters. If you have concerns about the size of the site as you get deeper into its design, meet with the instructor to discuss your concerns.

This project has three main requirements.

• Project report: You will create a project documentation report describing the work that you will have done on the project. This report will have three main sections:
• Pre-design analysis

  As we have discussed in class, it is important to do some research prior to starting the design phase of a website development project. During January, you should be asking your client questions about:

  • The purpose of the website - what does the client want the site to do?
  • The constraints under which you will be working - What does the client want the site to look like? Will the client be responsible for maintenance and change?
  • The client's organization, e.g., their mission, size, strategies of using the web
  • The users of the site - what can the client tell you about the characteristics and typical uses of the people who are expected to use the site? and
  • His or her competitors - do they have websites? What do these sites look like?

  Using these questions as a guide, write a summary of your research. This should be about 500 words. This report is due on February 12 and is worth 5% of the final grade. It will be discussed in class on January 8

• Design rationale
  Describe why you have chosen this specific design and information architecture for the website. How have you applied design and principles and concepts from information architecture to your website development? As you answer this question, make explicit references to the texts, articles, and /or websites you have been reading throughout the semester to support your design and IA decisions.

  For example, to facilitate the navigation, you may have included a navigation bar that appears on every page of the website. Perhaps you color-coded web pages by categories, to help users understand where they are within the website. You should keep track of your design and IA decisions as you are developing the site so that you can summarize them in the report.

  If you created prototypes or versions of the site structure, keep them and include them in an appendix that is linked to the report's table of contents.

  Your design rationale should be about 500 words. This report is due on March 5 and is worth 5% of the final grade. It will be discussed in class on January 22

• Usability testing

  You will conduct a simple usability test based on task analysis. The nature of these tasks cannot be determined in advance because it will depend on the structure and content of the site you are developing. If, for example, you were testing the SLIS site, you might ask people three questions:

  • How many required courses are there for the dual MIS/LMLS degree?
  • Who do I contact to ask questions about submitting a working paper to the SLIS Working Papers site?
  • How do I post a job on the site?

  When you have a working prototype of your site, you will develop three tasks that a typical visitor to the site might carry out. You will then ask three people to participate in your test. Each person will be given the three tasks and you will observe them as they attempt to complete the tasks. You will collect data on:

  • Time to complete the task
  • Success rate
  • Number of clicks to reach page where they can complete the task
  • Number and types of errors (if any)
  • Comments about the structure and organization of the site (if any)

  You will then describe the results of your tests. This description will include the tasks that you developed and the results of your observations (some of which may be presented using tables). If the tests cause you to make changes in the site, report that as well.

  Your usability results should be about 500 words. This report is due on April 9 and is worth 5% of the final grade. It will be discussed in class on April 2

• The final version of the report

  The complete report will have a cover page with a table of contents and separate content sections for each of the three main sections. Each of these sections may be a single page, but the structure of the report is up to you. You will also have an appendix where you place early versions of pages that you created for the site.

  As you complete each section of the project documentation report, mark it up using XHTML and place it in your <www> directory. You complete the assignment by sending the instructor the <URL> for the essay.

  The completed report will be due on April 23 and is worth 5% of the final grade. It will be turned in along with the final project. This assignment will be discussed in class on January 8.

• Project production: You will develop the web site for your client.

  You will spend the semester developing the web site for your client. You will incorporate what you have learned in class where appropriate and produce a site that is cleanly marked up to standard using at least XHTML, aesthetically pleasing, and easy to use.

There are no prescribed topics for this project; you must clear your topic with the instructor.

The completed project web site is due on April 23 and is worth 30% of the final grade. The project will be discussed in class on January 8.

Once the project URLs have been submitted, the term projects will then be accessible on an L571 student projects page.

• Project presentation: At the end of the term, you will present your project to the class.

  You will distill the information in your project report into a 10 minute presentation that you will give in class on April 16 or April 23. Presentation times will be assigned on April 2. In your presentation, you will describe the research that you did to prepare for the development of the site, discuss the challenges that you faced and explain how you overcame them, and show the site that you created.

  This assignment will be worth 5% of final grade.

• Project benchmarks: Here are some important project deadlines.
  • You will submit a one paragraph description of your project by email by January 22
  • You will receive confirmation of your topic through email by January 24
  • The pre-design analysis is due on February 12.
  • The design rationale is due on March 5.
  • The usability report is due on April 9
  • The projects will be presented in class on April 16, and 23
  • The entire term project is due on April 23. You complete this assignment by emailing the <URL> of your final project to the instructor. This project is worth 55% of the final grade. Each component of the report is worth 5% (for a total of 15%), the web site is worth 30%, the final version of the report is worth 5% and the presentation is worth 5%. This project will be discussed in class on January 8

Return to Assignments list

Return to table

Grading

This table shows the assignments you have to do and the percentage of the final grade each is worth.

Note that there is a small portion of the overall grade that has been allocated for class participation. For the purposes of this class, participation is defined as contributing to class discussion or demonstrating in other ways that you are making an effort to succeed in this class. In addition, as a professional, you will be expected to articulate your ideas in both written and oral form, therefore it is important that you think critically and present your ideas throughout the duration of the class.

Return to table

Required Texts

There are two required texts for this course:

	Castro, E. (2007). HTML, XHTML and CSS: Visual QuickStart Guide, 6th Edition. Berkeley, CA: Peachpit Press. This book is available from the publisher in conventional form at http://www.peachpit.com/bookstore/product.asp?isbn=0321430840&rl=1 It is also available as an Adobe PDF file at http://www.peachpit.com/bookstore/product.asp?isbn=0321477766&rl=1
	Teague, J.C. (2007). CSS, DHTML and AJAX: Visual QuickStart Guide 4th Edition. Berkeley, CA: Peachpit Press. This book is available from the publisher in conventional form at http://www.peachpit.com/bookstore/product.asp?isbn=032144325X&rl=1 It is also available as an Adobe PDF file at http://www.peachpit.com/bookstore/product.asp?isbn=0321469100&rl=1

These books are available at the IU bookstore and at bookstores around town. Of course, you can purchase them on the web...

Return to table

Topic Outline, Reading Schedule and Assignment Due Dates

Select any date and see:

Schedule of classes

NOTE: The URLs for the readings were last checked on January 5, 2007

January 8

Introduction: Information architecture for the web

Topics:

Overview of the course
    Web development for clients
    Review of basic HTML: UNIX, fonts, lists, links, tables

Readings:

Rosenbaum, H. (2004). HTML Markup Demonstration Pages

http://www.slis.indiana.edu/hrosenba/www/Demo/DemoCon.html

Assignments:

Critical response essay assignments discussed

Markup assignments discussed: tables assignment explained

The in-class table assignment is here

Final project, project documentation report (including pre-design analysis)and presentation discussed

Additional resources for refreshing your knowledge of basic HTML

Return to Schedule of classes

January 15

Working with tables

Readings:

Castro 1, 2, 16

Benda, G. (2002). Debate - WYSIWYG: a Web Designer's Dream. Sitepoint.

http://www.sitepoint.com/article/wysiwyg-web-designers-dream

Gugliuzza, M. (2002). Debate - Hand Coding: the Ultimate Freedom. Sitepoint.

http://www.sitepoint.com/article/hand-coding-ultimate-freedom

HTML Goodies. (2007). Tables Tutorial. JupiterMedia

http://www.htmlgoodies.com/tutorials/tables/

Pollack, J. (2006). HTML Tables Basics. Sitepoint.

http://www.pageresource.com/html/table1.htm0

Zeldman, J. (2002). Fix your site with the right DOCTYPE!. A List Apart.

http://www.alistapart.com/stories/doctype/

Additional resources about tables

Assignments:

Critical response essay #1 description due (emailed to instructor)

Response received from instructor within 48 hours

The second table assignment is here

Tables assignment due January 18

Return to Schedule of classes

January 22

Topics:

Pre-design analysis
    Clients
    The business
    Competitors
    Users

Beginning layout

Readings:

Castro 21, 22

Danzico, L. (ND). Case Studies. Bobulate: An IA Portfolio.

http://www.bobulate.com/case_studies.html

Gillespie, J. (2002). Building a better web page. Web Page Design for Designers.

http://www.wpdfd.com/editorial/wpd0202.htm#feature

Lynch, P. and Horton, S. (2002). Web Style Guide, 2nd edition.

http://webstyleguide.com/index.html

Nielsen, J. (2007). Top Ten Mistakes in Web Design. Alertbox.

http://www.useit.com/alertbox/9605.html

Powazek, D. (2006). Home Page goals. A List Apart. #221

http://alistapart.com/articles/homepagegoals

Shumacher, A. (2001). Cheaper Over Better: Why Web Clients Settle for Less. A List Apart.

http://www.alistapart.com/articles/cheaper

Additional resources about web page design and working with clients

Assignments:

Email client project topic description to instructor

Receive confirmation of your topic from the instructor within 48 hours

Design rationale report discussed in class

Return to Schedule of classes

January 29

Thinking about design and layout

Topics

Introduction to information architecture
    Conceptual Design
    IA and ethics
    Working with content

Working with images and imagemapping

Readings:

Castro 5, 6

Barker, I. (2005). What is Information Architecture? KM Column.

http://www.steptwo.com.au/papers/kmc_whatisinfoarch/index.html

Bogaards, P.J. (2004). Info Design / Arch Deliverable Schemas.

http://www.bogieland.com/infodesign/resources/misc/iadelschemas.htm

Burns, J. (2007). So You Want A Client-Side Image Map, Huh?. HTMLGoodies

http://www.htmlgoodies.com/tutorials/image_maps/article.php/3479741

Information Technology Systems and Services. University of Minnesota at Duluth. (2005). Information Architecture.

http://www.d.umn.edu/itss/support/Training/Online/webdesign/architecture.html

Morville, P. (2003). International Information Architecture. Semantic Studios.

http://semanticstudios.com/publications/semantics/000012.php

Additional resources about the basics of information architecture and conceptual design

Assignments:

Critical response essay #1 due

Return to Schedule of classes

February 5

Advanced layout options with HTML 4.01

Topics

Working with tables and frames

Readings

Castro 15

alt.html. (2004). Frequently asked questions: Why are frames so evil?

http://www.html-faq.com/htmlframes/?framesareevil

Fletcher, D. and Brookman, A. (2002). Making Joining Easy: Case of an Entertainment Club Website. American Institute of Graphic Arts

http://www.slis.indiana.edu/hrosenba/www/L571/pdf/fletcher_accessibility.pdf

Sullivan, D. (2005). Search engines and frames. SearchEngineWatch.

http://searchenginewatch.com/webmasters/article.php/2167901

Web Design Group (2005). Guide to frames usage. SearchEngineWatch.

http://www.htmlhelp.com/design/frames/

Web Design Group (2005). Web Authoring FAQ: HTML Frames. SearchEngineWatch.

http://www.htmlhelp.com/faq/html/frames.html

Additional resources about working with tables and frames

Assignments:

Markup assignment #1 (frames and tables) discussed

Critical response essay #2 description due (emailed to instructor)

Response received from instructor within 48 hours

Return to Schedule of classes

February 12

Interactivity in web architecture and design

Topics

Working with forms

Introduction to PHP for forms

Readings:

Castro, 17

Clark, J. (2002). Building accessible websites: Forms and interaction.

http://joeclark.org/book/sashay/serialization/Chapter12.html

Gowans, D. (2001). Part 6 - PHP With Forms. PHP Turorial

http://www.freewebmasterhelp.com/tutorials/php/6

Tizag.com (2002). Using PHP With HTML Forms.

http://www.tizag.com/phpT/forms.php?=Paint

W3schools.com. (2005). HTML Forms and Input.

http://www.w3schools.com/html/html_forms.asp

Ullman, L. (2001). HTML Forms and PHP.

http://www.peachpit.com/articles/article.asp?p=22294&rl=1

Ullman, L. (2001). PHP for the World Wide Web. Chapters 1 and 3 [available in SLIS library]

Additional resources about interactivity, focusing on forms and PHP

Assignments:

Pre-design analysis report due

Markup assignment #2 (forms and PHP) discussed

Return to Schedule of classes

February 19

Information architecture II and XHTML

Topics

Components of information architecture
    Information organization, navigation, and labeling
    Page layout
    Interface design
    Site design

Transitioning to XHTML

Readings:

Castro, 3, 4

Kaufman, J. (2005). Information Architecture as an Extension of Web Design. Digital Wenb Magazine

http://www.digital-web.com/articles/ia_as_an_extension_of_web_design/

Levine, M. (2006). In Search of the Holy Grail. A List Apart #211

http://alistapart.com/articles/holygrail

Lindgaard, G., Fernandes, G., Dudek, C. and Brown, J. (2006). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology. 25(2), 115-126.

http://bert.lib.indiana.edu:2048/login?url=http://search.epnet.com/login.aspx?direct=true&db=aph&an=19277458
Then check for availability

Maya. (2005). Carnegie Library | Dynamic Information Environment.

http://www.maya.com/web/what/clients/what_client_clp_dyninfo.mtml

Download their User Experience Week 2005 presentation.

http://www.maya.com/web/what/what_sightings_speaking.mtml#uxw2005

Peck, N. (2003). XHTML Web Design for Beginners - Part 2. Sitepoint.

http://www.sitepoint.com/article/xhtml-web-design-beginners-2

W3Schools (2003). XHTML Tutorial.

http://www.w3schools.com/xhtml/

Additional resources about the information architecture, design, and XHTML

Assignments

Critical response essay #2 due

Site structure graphic requirement for final project document discussed

Download powerpoint presentation from class

Return to Schedule of classes

February 26

Cascading style sheets I

Topics

Basics of CSS
    Rules, selectors and declarations
    Font control and lists
    Images

Readings:

Castro, 7, 8, 9, 10

Teague, 1, 2, 3, 4, 5

Andrew, R. (2003). Style Web Forms Using CSS. Sitepoint

http://www.sitepoint.com/print/1166

CSS Basics.com. (2003). Learn everything you ever wanted to know about the basics of CSS.

http://www.cssbasics.com/

Mako. (2003). CSShark - The Basics.

http://www.mako4css.com/Basics.htm

Rosenbaum, H. (1998). CSS Demonstration pages

http://www.slis.indiana.edu/hrosenba/www/Workshops/CSS/Demo/csshome.html

Additional resources about CSS

Assignments

First version of tables and frames markup due

Critical response essay #3 description due (emailed to instructor)

Response received from instructor within 48 hours

Markup assignment #3 (CSS) discussed

Return to Schedule of classes

March 5

CSS II

Topics

Basics of CSS
    Using CSS to structure space
    Using CSS for absolute and relative positioning

Readings:

Castro, 11, 14, 15

Teague, 6, 7

Hall, M.. (2004). CSS Positioning. Brainjar.com.

http://www.brainjar.com/css/positioning/

Manno, F. (2004). CSS Image Maps.

http://frankmanno.com/ideas/css-imagemap/

Piperoglou, S. (2001). Tutorial 18: CSS Positioning, Part I. WebReferecne.com

http://www.webreference.com/html/tutorial18/

Piperoglou, S. (2001). Tutorial 19: CSS Positioning, Part II. WebReferecne.com

http://www.webreference.com/html/tutorial19/

Robertson, S. (2003). Night of the Imagemap. A List Apart. #166

http://alistapart.com/articles/imagemap

Schmitt, C. (2002). Web Page Reconstruction with CSS.Digital Web Magazine

http://www.digital-web.com/articles/web_page_reconstruction_with_css/

W3Schools. (2005). CSS Positioning Properties

http://www.w3schools.com/css/css_positioning.asp

Additional resources about CSS

Assignments

Markup assignment #2 due

Design rationale report due

Return to Schedule of classes

March 12

Of course you will spend the break working on your HTML!

Just kidding.

Return to Schedule of classes

March 19

Accessibility, Interactivity II: javascript

Topics

Designing accessible web sites

Basics of javascript
    The document object model (DOM)
    Elements of javascript
    Modifying scripts

Readings:

Castro, 19, 20

Teague, 12

Clark, J. (2002). Building accessible websites: How do disabled people use computers?. Building Accessible Websites

http://joeclark.org/book/sashay/serialization/Chapter03.html

Hellman, C. (2005). 10 Reasons Clients Don't Care About Accessibility. Digital Web Magazine

http://www.digital-web.com/articles/ten_reasons_clients_dont_care_about_accessibility/

Rosenbaum, H. (2002). Javascript Pages.

http://www.slis.indiana.edu/hrosenba/www/Demo/Demo18.html

Seeman, L. (2000). Designing Web Sites to be Disability Friendly

http://www.wdvl.com/Authoring/Design/Friendly/

Watchfire. (2000). WebXact

http://webxact.watchfire.com/

W3C. (2005). Evaluating Web Sites for Accessibility: Overview. Web Accessibility Initiative.

http://www.w3.org/WAI/eval/Overview.html

WebAim. (2005). Creating accessible tables.

http://www.webaim.org/techniques/tables/

WebTeacher. (2007). JavaScript for the Total Non-Programmer.

http://www.webteacher.com/javascript/

Additional resources about accessibility and javascript

Additional resources about web standards

Assignments

Critical response essay #3 due

Markup assignment #4 (DHTML) discussed

Return to Schedule of classes

March 26

Dynamic HTML I

Topics

Working with DHTML
    Learning about environments
    Learning about objects and events

Readings:

Castro, 12

Teague, 11, 13, 14, 15

DHTMLGoodies.com (2007). A library of DHTML and AJAX scripts.

http://www.dhtmlgoodies.com/index.html

Dynamic Drive (2007). DHTML Scripts for the Real World.

http://www.dynamicdrive.com/

Gardner, D. (2001). DHTML Intro Tutorial. HTMLcenter.com

http://www.htmlcenter.com/tutorials/tutorials.cfm?id=115

Icarus. (2002). Rough guide to the DOM (Pt 1and 2) Sitepoint.com

http://www.sitepoint.com/article/rough-guide-dom

Kyrnin, J. (2006). Dynamic HTML Guide picks

http://html.about.com/msubdhtml.htm

Rosenbaum, H. (2006). HTML Demo pages: DHTML

http://www.slis.indiana.edu/hrosenba/www/Workshops/CSS/Demo/cssdhtml.html

Teague, J.C. (2003). DHTML and CSS for the World Wide Web

http://www.webbedenvironments.com/dhtml/

W3Schools.com. (2005). DHTML Tutorial.

http://www.w3schools.com/dhtml/default.asp

Additional resources about DHTML

Assignments

Markup assignment #3 due

Usability requirement for final project discussed

Return to Schedule of classes

April 2

Web site usability, evaluation and maintenance

Topics

Introduction to usability
    Heuristic evaluations
    Usability testing

Web site management
    Change management
    Managing web teams

Readings:

Deshpande, Y., Chandrarathna, A. and Ginige, A. (2002). Web Site Auditing - First Step Towards Re-engineering. Proceedings of the 14th international conference on Software engineering and knowledge engineering.

http://doi.acm.org/10.1145/568760.568886

Information and Design. (2006). Web Evaluation materials.

http://www.infodesign.com.au/usabilityresources/evaluation/webevaluation.asp

Morris, B. (2000). Managing Commercial Web Sites. Web Developer's Journal

http://www.webdevelopersjournal.com/articles/managing.htm

Nielsen, J. (2003). Usability 101.

http://www.useit.com/alertbox/20030825.html

Rosenfeld. L. (2004). Information Architecture Heuristics.

http://www.louisrosenfeld.com/home/bloug_archive/000286.html

Society for Technical Communication (2006). Usability Toolkit.

http://www.stcsig.org/usability/resources/toolkit/toolkit.html

Usability.gov (nd). Your guide for developing usable and useful websites. U.S. Department of Health & Human Services

http://www.usability.gov/

Additional resources about usability, evaluation and web site management

Assignments

Presentation times assigned

Usability report discussed in class

Return to Schedule of classes

April 9

DHTML II

Topics

Integrating DHTML into site design
    Moving objects
    Working with browser windows

Readings:

Teague, 16, 17

Javascript Kit. (2006). Adding Generated Content in CSS2.

http://www.javascriptkit.com/dhtmltutors/cssgenerate.shtml

Javascript Kit. (2006). Rotating regular HTML content via DHTML.

http://www.javascriptkit.com/dhtmltutors/dhtmlrotate.shtml

W3schools.com. (2001). Welcome to DHTML School.

http://www.w3schools.com/dhtml/default.asp

Weiss, A. (nd). An Introduction to Dynamic HTML (DHTML). IDM Web Development

http://www.intranetjournal.com/articles/200003/dhtml1_index.html

Additional resources about DHHTML techniques

Return to Schedule of classes

April 16

Topics

DHTML and site design
    Using DHTML for layout
    Using DHTML for navigtion

Readings:

Teague, 21, 22, 23

Builder.com. (2004). DHTML - Dynamic HyperText Markup Language

http://builder.com.com/1200-31-5087750.html

Codetoad. (2005). Home > DHTML > Navigation

http://www.codetoad.com/dhtml/navigation/

Dynamic Drive (2007). Menu and Navigation Scripts.

http://www.dynamicdrive.com/dynamicindex1/

Simplythebest.net. (2006). Ready-to-go DHTML scripts & JavaScripts

http://simplythebest.net/scripts/DHTML_scripts/

Additional resources about DHTML

Assignments:

Presentation of student work

Markup assignment #4 is due

Usability report due

Return to Schedule of classes

Presentations of student work

Assignments:

Final project due (email URL to instructor)

Return to Schedule of classes

Return to table

Assignments and Due Dates: Short Version

This table shows the assignments you have to do, the dates that they will be discussed in class, other important dates, the percentage of the final grade each is worth, and the dates the assignment are due.

Return to table

Return to Table of contents