This Printable PDF File Is Provided Just for Resting Your Eyes and Checking Details

This printable PDF file is provided just for resting your eyes and checking details. Please do not use this workbook to work from directly. Use the Web-accessible activities, lectures, overheads, and readings. They are always more current. DO NOT click on the links in the PDF as they will not work. Click from the Web Site only.

LIS590lwl: Web Design & Construction for Organizations Summer 2008 - Syllabus

Instructor: Diane K. Kovacs -

Contact Information: 9a-5p EDT on weekdays only. I am Di Wind in Second Life and you may find me on Facebook and LinkedIn as well.

Office Hours: 10:00a-Noon CDT on weekdays. My office is in Brunswick, Ohio. We can speak on the telephone, via e-mail, or chat online. AIM & Yahoo: SaintsMrsDi, MSN & Google: see email addresses above. E-mail for appointment at other times.

In-person Meeting Date: Tuesday 6/10/08 - 9:00a-4:00p CDT: (tba but probably LIS 52, 501 E Daniel St.)

Live Online Meeting Times:

Tuesdays (6/17. 6/24, 7/1, 7/8, 7/15, 7/22, 7/29) 6:15-8:15 p.m. CDT, 7:15-9:15 p.m. EDT, 5:15-7:15 p.m. MDT, 4:15-6:15 p.m. PDT

Course Schedule - Course Description - Course Materials - Assignments - Grading - HTML/Web Skills Survey

Course Description:

This course focuses on the basics of web site design, content development, HTML programming, procedures and policies for organizations, with a concentration on public, academic and special libraries. Students will investigate and design a representative site. Course will also examine management strategies including web site editors, redundancy and archiving. Credit Hours: 4 GR hours

By the end of this course, you will be able to:

Plan and design a Web site for Usability and Accessibility for selected users/groups. Do some simple Usability Testing Understand and apply Web Standards Use a text editor or Dreamweaver 8.0 to create usable, accessible, and interesting Web pages. You may use FrontPage or other html editor if you already know what you are doing with it. Use external CSS layout to design highly accessible navigation and menus. Trouble-shoot XHTML, CSS, and Browser compatibility problems. Read the code. Use the graph paper. Create basic forms Use free-Javascripts to add functionality and design accessible navigation and menus Make good choices for designing with multi-media, specifically Quicktime, Flash, and screen capture tools. Develop basic Web site contents for selected users/groups including some review of social Web tools (Web 2.0), multimedia, and content management systems (CMS). Understand the strengths and limitations of CMS's including systems requirements and costs. Understand the basics of information architecture, archiving, and maintenance issues in Web design.

Students will end the course with a completed Web site plan, design, and at least three Web pages that illustrate how the design will be implemented, maintained and will allow for minimal usability and accessibility testing. These pages must also be validated XHTML 1.0 transitional (or strict) with external cascading style sheets.

Class Format:

The class will be a combination of online meetings, e-mail with your teacher, Laboratory activities, readings, and projects - see Assignments above. We will work in Moodle at UIUC GSLIS LEEP online.

Course Materials:

Many of the readings and all of the laboratory activities and assignments for the course are online, but a majority of the readings will be from the Required Materials listed below.

Required Material:

Graph Paper for laying out CSS design. Freeman, Elizabeth and Eric (2005). Head First HTML with CSS & XHTML. O'Reilly. ISBN: 0-596-10197-X Niederst, Jennifer (2006). Web Design in a Nutshell , 3rd Ed. O'Reilly. ISBN: 0-596-00987-9 Meyer, Eric (2007). CSS Pocket Reference, 3rd. Ed. O'Reilly. ISBN 10: 0-596-51505-7 | ISBN 13:9780596515058 (9.99 list price)

Recommended Strongly:

Bickner, Carrie. (2004) Web Design on a Shoestring. New Riders Publishing: Boston ISBN 0-7357-1328-6 Norman, Donald (any edition). The Design of Everyday Things.

Assignments*:

Class Participation - 100 points Laboratory Activities (10) - 400 points Usability Testing - (2 sites) -50 points Validating Accessibility - 50 points Course Project Portfolio (4 Parts) - 400 points

Grading:

Grading will be done based on a points system. At the end of the term, the points earned by each student for participation (150 points), laboratory activities (400 points), and the course project (450) points will be totaled and final grades will be assigned according to the following system: 970-1000 C+ 770-799 A+

A 920-969 C 720-769

A- 900-919 C- 700-719

B+ 870-899 D+ 670-699

B 820-869 D 620-669

B- 800-819 D- 600-619

F Below 600 *Due Dates are on each individual assignment page and on the schedule. wd - Summer 2008 - Schedule LIS590lwl: Web Design & Construction for Organizations Schedule June 10-July 9 (August 3), 2008

June: Week 1 - Week 2 - Week 3 - July: Week 4 - Week 5 - Week 6 - Week 7 - Week 8

Live Online Meeting Times:

Tuesdays (6/17, 6/24, 7/1, 7/8, 7/15, 7/22, 7/29) 6:15-8:15 p.m. CDT, 7:15-9:15 p.m. EDT, 5:15-7:15 p.m. MDT, 4:15-6:15 p.m. PDT - In-person Meeting Date: Tuesday 6/10/08 - 9:00a-4:00p CDT: (LIS 52, 501 E Daniel St.)

June

Week 1. Tuesday 6/10/08 - 9:00a-4:00p CDT: (LIS 52, 501 E Daniel St.) In-person Meeting Date: User Centered Design- Needs Analysis and Design Planning - Review of HTML/XHTML (XHTML Standards)

In-person Meeting Agenda

9:00a - 10:30a Introductions and Course Introduction Review Course Project Portfolio Clients

10:45a - Break 11:00a

Lecture Overheads:

11:00a - Noon User Centered Web Design Introduction Research-Based Web Design and Usability Guidelines Sorting Tool. - http://www.usability.gov/pdfs/chap.html Plan First: Needs Analysis, User Identification Worksheet Design Next: Style, Colors, Fonts, Layout and Navigation Worksheet

Noon-1:00p Lunch 1:00p-2:00p HTML/XHTML Basic Concepts

W3C's XHTML 1.x standards 2:00p-2:30p Information about W3C's Markup Validation Service

2:30p-2:45p Break 2:45p-4:00p Laboratory Activity 1. Fingerpainting: HTML/XHTML Basics

Required Readings

Head First HTML with CSS & XHTML Chapters 1-5 (read thoroughly) W3C's HTML standards Home Page - http://www.w3.org/MarkUp/ - Read through the whole page please. Make sure you understand the current status of both the XHTML 1.x and HTML 4.01 standards. Browse for Awareness: Part I: The Web Environment - Web Design in a Nutshell - Chapters 1-6 HTML and XHTML Overview - Web Design in a Nutshell - Chapter 8 Document Structure - Web Design in a Nutshell - Chapter 9 Text Elements - Web Design in a Nutshell - Chapter 10

Laboratory Activities:

Laboratory Activity 1. Fingerpainting: HTML/XHTML Basics - 50 points - 06/17/08

Recommended Readings (Week 7)

Week 8. Tuesday 7/29/08 - 6:15p-8:15p CDT: Online Meeting: Draft Web Site Redesign Gallery Presentation and Peer Review Discussions

8/03/08 midnight CDT. Course Project Portfolio Final Web Site and Documentation due by this time and date.

LIS590lwl: Web Design & Construction for Organizations Graded Assignments Index

Assignments*:

Class Participation - 100 points Laboratory Activities - 400 points Usability Testing - (2 sites) -50 points Validating Accessibility - 50 points Course Project Portfolio (4 Parts) - 400 points

Grading:

Grading will be done based on a points system. At the end of the term, the points earned by each student for participation (100 points), laboratory activities (400 points), usability testing (50 points), validating accessibility, and the course project portfolio (400) points will be totaled and final grades will be assigned according to the following system: 970-1000 C+ 770-799 A+

A 920-969 C 720-769

A- 900-919 C- 700-719

B+ 870-899 D+ 670-699

B 820-869 D 620-669

B- 800-819 D- 600-619

F Below 600

*Due dates are on each assignment page and on the schedule.

LIS590lwl: Web Design & Construction for Organizations

Class Participation - 100 Points Participation and interaction with the teacher and fellow students is crucial for success in this course. Trouble-shooting and exchange of ideas will be invaluable. We will meet online 7 times - each meeting will be worth 10 points. Attending the in-person meeting - or making up the meeting by prior arrangement will be worth 15 points. Replying to e-mails from your teacher and participating in course forums as appropriate will earn the 15 remaining points.

LIS590lwl: Web Design & Construction for Organizations Course Project Portfolio - 4 Parts - 400 points total

Part 1. Needs Analysis & Design Plan (100 points) (draft due 7/1/08) Part 2. Draft Web Site Redesign Gallery Presentation and Peer Review (100 points) (due 7/29/08 before class meets) Part 3. Web Site (100 points)(due 8/02/08 midnight CDT) Part 4. Web Site Documentation (100 points) (due 8/02/08 midnight CDT)

Students individually or in groups, will act as consultants to individuals, groups and non-profit organizations that are interested in redesigning their Web site. This project requires that you interview client organization contacts to identify their needs and goals for redesigning their Web site, create a Web site design plan. Present the redesign plan to the client organization for review. Integrate the feedback into the design plan. Present the redesigned Web site to the class for feedback (and to the client if available). All of the assignments must be submitted as Web pages. All Web pages must be in standard XHTML 1.0 transitional (or strict), external CSS, and incorporate basic Accessibility. Students may work in small groups with other students on this project or they may work individually. Please contact the teacher for approval of an organizational client and to identify the members and roles of your group.

Here is a list of individuals, groups, non-profit organizations or students may submit a non-profit organization for approval e.g., you may do your project with the library you work for.

Course Projects from Fall 2003-Summer2007 - unsorted - just here for you to get a sense of what past students have done. project_archives/

Part 1. Needs Analysis & Design Plan (100 points) (draft due 7/1/08)

Before the online meeting, students will present their draft plan for redesign to the class for review and discussion by posting a URL to the "Needs Analysis & Design Plan" forum then giving the class a brief overview for in-class discussion. Posting the plan for others to review will provide useful feedback that students may use in preparing to present the redesign proposal to the client. It must be completed and posted in order to earn the points.

Needs Analysis and Design/Redesign Plan

Use Plan First: Needs Analysis, User Identification Worksheet and try to read Ch. 6 in Web Design on a $hoestring. Students will interview an individual, group or non-profit organization who are interested in redesigning their Web site or . The goal of this interview is to better understand what problem the client is trying to solve in redesigning the Web site and the audience(s) that the client is trying to reach. Some questions that you might ask during the interview (and by looking at the current Web site):

1. the history of the organization and their current Web site, 2. the purpose of the Web site and its intended audience, 3. the type of information and services that the client wants on the Web site and the nature of this information (does the information change often, how could you best chunk the information for different audiences, do they have existing information that could be converted to Web content, 4. the client's priorities in redesigning the Web site, and 5. who will maintain the Web site once you have completed the course.

Use Design Next: Style, Colors, Fonts, Layout and Navigation Worksheet and try to read Ch. 6 in Web Design on a $hoestring. Each student or group will draft a plan for the redesign of the Web site based on the interview(s) conducted with the client. This design plan should describe the changes that will be made to the Web site; provide a rationale for the changes that will be made; discuss the ways that these changes will meet the client's goals and the information needs and environment of the users; identify potential problems or issues in the redesign; and provide a timetable, work assignment list, and work schedule to complete the Web site on time. Students should also address larger issues covered in class such as the need to design for multiple Web browsers and accessibility issues.

The draft plan for redesign report is an analysis of the needs of the client and a design/redesign proposal based on that analysis. It should be written as a presentation to the client . Students will give the client a copy of the report* and discuss the content with the client. After presentation to the client, the students should provide a revised copy of the redesign plan if changes need to be made based on negotiations with the client. This report -incorporating your Needs Analysis - is what you will post to the forum for class discussion on 7/1/08. Web page or text format preferred. MS Word is okay if you must. Part 2. Draft Web Site Redesign Gallery Presentation and Peer Review (100 points) (due 7/29/08 before class begins)

Draft Web Site Redesign Gallery Presentation (50 points)

Each group or individual student will post a URL for the Web site that they created along with a brief overview - including any questions they'd like the class to address to the "Draft Web Site Redesign Gallery Presentation and Peer Review " forum prior to the online meeting on 7/29/08. This does not need to be the final version that will be submitted to your teacher by 8/02/08.

Peer Review (50 points)

Each student must post a brief review of each draft Web site commenting on usability, readability, accessibility, general style impressions and answer any questions that were asked by the draft Web site designers. Peer Reviews must be completed by 7/30/08 so that designers can use them to revise the Web sit prior to final submission to your teacher by 8/02/08 midnight CDT)

Part 3. Web Site (100 points)(due 8/02/08 midnight CDT)

Each student or group will redesign a Web site that incorporates the changes outlined in the design plan. The Web site will be evaluated based on the quality of the coding, the navigational system and flow of information in the site, the overall visual look of the site, and the extent to which the site addresses design issues discussed in class (including accessibility issues) and the client's needs outlined in the design plan.

The expectation is that you will create a complete main/home/central page and at least two drafted sub-pages that clarify/describe/exemplify your design/redesign. These will be hosted in your LEEP space - the client does not have to accept and host them. In some cases more sub-pages might be required and in others not so many as three. Each site should be clearly based on a final verson of the draft Needs Analysis and Design Plan report.

E-mail the URL of the Web Site of the manual or send a Word Document as an attachment to e-mail to [email protected]

Part 4. Web Site Documentation (100 points)(due 8/02/08 midnight CDT)

Students will create a well organized manual - based on but not a mere copy of - a final Needs Analysis and Design Plan. The manual should take one of two forms: a Word Document or Web site that can be given to the client. Try to read Web Design on a $hoestring - Read Chapter 5 before doing manual.

The manual should include sections that:

1. assess how well the redesigned Web site met the goals of the client and how well it demonstrates (or fails to demonstrate) principles of good Web page design. 2. document/describe the files that have been changed (or will need to be changed) 3. give instructions for modifying/changing the site in general terms of design 4. mention any details that will be important to the client in understanding the design/redesign and ongoing maintenance of the site - Not teaching them XHTML or javascript or CSS . 5. concludes with a self-reflection - recognizing the limits of time and that you are still learning Web design and coding skills: What was the most successful part of the redesign and why? What was the least successful part of the redesign? If you had a second chance to redesign the Web site, what changes would you incorporate? What was the best/worst part of the redesign process? What would you do differently? What challenges did you encounter in working with a client to carry out their vision?

The final section should probably not be given to the client but will be used by your teacher to assess your understanding of the design/redesign process.

The coding isn't 'required'. You will have provided that when you put the site up for review or send them the .html and .css files. For example, explain that you used .css boxes/layers and an external stylesheet and that there is a javascript menu and where you got it - use examples from the Web site coding as appropriate.

E-mail the URL of the Web Site of the manual or send a Word Document as an attachment to e-mail to [email protected]

LIS590lwl: Web Design & Construction for Organizations

Laboratory Activities - 400 points total (+50 extra credit)

Note: You may work ahead on the laboratory activities, submit for grading, then revise and resubmit until the due date. These activities must be completed and submitted for grading by the due dates below. Late activities will result in a 1 point loss per day after the due date. Submitting early is recommended. Submitting llate is preferable to not submitting.

Laboratory Activity 1. Fingerpainting: HTML/XHTML Basics - 50 points - 06/17/08* Laboratory Activity 2. Create and Validate an XHTML 1.0 Web Page - 50 points - 06/24/08 Laboratory Activity 3. Adding a Cascading Style Sheet (CSS external) for Layout of your XHTML 1.0 Web Page - 75 points** - 06/24/08 Laboratory Activity 4. Adding a Cascading Style Sheet (CSS external) for Style, Colors, Fonts for your XHTML 1.0 Web Page - 75 points** - Due 7/1/08 Laboratory Activity 5. Navigation with CSS Layout and Styling - 50 points - Due 7/8/08 Laboratory Activity 6. Creating Forms - 50 points - Due 7/15/08 Laboratory Activity 7. Designing with Javascript: Cute vs. Functional - 50 points - Due 7/22/08 Laboratory Activity 8. Designing with Javascript: CSS Hierarchical Menu (Optional 50 points Extra Credit)

*This is intended as an in-person laboratory activity, but will be accepted without penalty if submitted for grading by the first online meeting date, Tuesday, 10/17/08.

**25 points will be for successfully using the W3C's CSS Validation Service - http://jigsaw.w3.org/css-validator/validator-uri.html to validate both your CSS Layout and Styling files as well as your Resume Page as you add the CSS codes to it.

LIS590lwl: Web Design & Construction for Organizations

Week 1. Recommended Readings:

Creating Links - Web Design in a Nutshell - Chapter 11 Research-Based Web Design and Usability Guidelines Sorting Tool. - http://www.usability.gov/pdfs/chap.html QA for WebMasters Blog - http://www.w3.org/QA/ QA for WebMasters Tips - http://www.w3.org/QA/Tips/ "A Complete list of Web Design Galleries" - http://webdesigngalleries.wordpress.com/2007/05/05/a-complete-list-of-web-design-galleries/ (browse - keep handy for future examples, ideas, etc.)

Week 2. Recommended Readings:

Web Design on a $hoestring - Part 1 - Chapter 1, 2, 3 The Design of Everyday Things - Read both Prefaces and Chapter 7. Information about W3C's CSS Validation Service W3C CSS Validation Service - http://jigsaw.w3.org/css-validator/validator-uri.html. Use this while you work to check for errors and for help in trouble-shooting. Common Validation Problems Cascading Style Sheets, level 2 CSS2 Specification at http://www.w3.org/TR/REC-CSS2/ especially 8 Box model - http://www.w3.org/TR/REC-CSS2/box.html Jared M. Spool, Tara Scanlon, etal. 1999. Web Site Usability: A Designer's Guide . San Francisco: Morgan Kaufmann Publishers, Inc.

Week 3. Recommended Readings:

Browse to familiarize yourself with: Part III: The Presentation Layer: Cascading Style Sheets - Web Design in a Nutshell - Chapters 16-25 Typography - Web Style Guide - http://www.webstyleguide.com/type/index.html Editorial Style - Web Style Guide - http://www.webstyleguide.com/style/index.html Web Graphics - Web Style Guide - http://www.webstyleguide.com/graphics/ Page Design - Web Style Guide - http://www.webstyleguide.com/page/index.html Interface Design - Web Style Guide - http://www.webstyleguide.com/interface/index.html Site Design - Web Style Guide - http://www.webstyleguide.com/site/index.html Beginner's Guide to Cascading Style Sheets - http://friendlybit.com/css/beginners-guide-to-css-and-standards/ Mulder's Stylesheets Tutorial - http://www.webmonkey.com/webmonkey/authoring/stylesheets/tutorials/tutorial1.html Read through lessons 1 through 5. CSS Zen Garden - http://www.csszengarden.com/ Two Columns - Left Menu - http://www.bluerobot.com/web/layouts/layout1.html Writing for the Web: A Primer for Librarians - http://bones.med.ohio-state.edu/eric/papers/primer/toc.html

Week 4. Recommended Readings:

Information Architecture Institute Library - http://iainstitute.org/library/ Problems with CSS layouts - http://www.oreillynet.com/pub/a/javascript/synd/2002/03/01/css_layout.html?page=3#problems CSS Editors - http://www.free-webmaster-tools.com/utilities/editors/css_editors.html CSS Compatibility Chart - http://www.quirksmode.org/css/contents.htm Writing for the Web: A Primer for Librarians - http://bones.med.ohio-state.edu/eric/papers/primer/toc.html

Week 5. Recommended Readings:

Managing Browser Bugs: Workarounds, Hacks, and Filters - Web Design in a Nutshell - Chapter 25. pp. 448-461 Library WebmasterLinks - http://www.librarysupportstaff.com/4libwebmasters.html The Web Design Library - http://www.webdesign.org/

Week 6. Recommended Readings:

Getting Started with Flash - http://www.macromedia.com/support/documentation/en/flash/#getstarted Quicktime Tutorial -http://www.apple.com/quicktime/tutorials/ Audio QuickParts - http://www.devx.com/projectcool/Article/20101 Flanders, D. 2001 "Applying XML to the Bibliographic Description" Cataloging & Classification, 33 (2):17–28. http://www.catalogingandclassificationquarterly.com/ccq33nr2.html *Javascript Tutorials - http://www.htmlcenter.com/tutorials/index.cfm/javascript/ *Beginners Guide to JavaScript - http://www.geocities.com/SiliconValley/Park/2554/index.html *JavaScript for the Total Non-Programmer - http://www.webteacher.com/javascript/ MaxDesign CSS Tutorials - Floatutorial and Selectutorial - http://css.maxdesign.com.au/

Week 7. Recommended Readings:

Introduction to XML - Web Design in a Nutshell - Chapter 7

LIS590lwl: Web Design & Construction for Organizations UIUC GSLIS Accounts, Tutorials, and HTML Editor Software

Tutorial and UIUC/GSLIS Accounts

Cites Information about UIUC computer accounts - http://www.cites.uiuc.edu/accounts/index.html GSLIS Options for uploading/publishing Web pages/file storage - http://www.lis.uiuc.edu/oitr/help/file-storage.html

Windows

Text editors

NoteTab Light - http://www.notetab.com/a free text-based HTML editor. NoteTab full versions have more HTML supportive features. Cost $5-20. Notepad/Wordpad - built-in to Windows OS - REMEMBER to save .html files as text only or plain text.

FTP software

WinSCP - http://winscp.net/eng/index.php

HTML editors

DreamWeaver - http://www.macromedia.com/software/dreamweaver/ Free 30 day trial. Note: Dreamweaver can be purchased through UIUC at an academic discount ($199/$275 for Studio which includes Fireworks, Flash, etc.): http://www.cstores.uiuc.edu/moc/moc.html or http://www.cstores.uiuc.edu/cgi/price2.dbr?UCS0056 Educational users http://dynamic.macromedia.com/bin/MM/store/EDU/home.jsp Cost $200 Commercial users Cost around -$400. SeaMonkey (Composer) - http://www.mozilla.org/projects/seamonkey/ Free but does only inline CSS and HTML 4.0. May be used as a decent text editor with preview. Free HTML Editors Collection - http://www.thefreecountry.com/webmaster/htmleditors.shtml

Misc.

There is an older version of PaintShop that you can use to edit graphics that you can download from the LEEP server - http://leep.lis.uiuc.edu/reference/tech/graphics/psp/. Fireworks usually comes bundled with DreamWeaver and is a very good graphics editor.

Mac OSX

Text editors

TextEdit - built-in to OSX BBedit - BBedit Lite - - free version - ftp://ftp.barebones.com/pub/freeware/ can be used to edit files, you need to know the html though because there are no html menus, the full version of BBedit http://www.barebones.com/products/bbedit/index.shtml has significant additional functionality. Cost $125.00

FTP Software

Fetch - http://www.fetchsoftworks.com/

HTML Editors

DreamWeaver - http://www.macromedia.com/software/dreamweaver/ Free 30 day trial. Note: Dreamweaver can be purchased through UIUC at an academic discount ($199/$275 for Studio which includes Fireworks, Flash, etc.): http://www.cstores.uiuc.edu/moc/moc.html or http://www.cstores.uiuc.edu/cgi/price2.dbr?UCS0056 SeaMonkey (Composer) - http://www.mozilla.org/projects/seamonkey/ Free but does only inline CSS and HTML 4.0. May be used as a decent text editor with preview. Page Spinner - http://www.optima-system.com/pagespinner/ - HTML editor with good CSS functionality and multi-browser compatibility options. Cost $30. Free HTML Editors Collection - http://www.thefreecountry.com/webmaster/htmleditors.shtml