CIT 230 - Web Design

Spring 2010 Syllabus

Course Description

This 3 semester credit hour course prepares students for work in web design and development. Included is a study of basic web page design, layout and development following modern web standards including Extensible Hypertext Markup Language (XHTML) and Cascading Style Sheet (CSS) language. In addition, usability principles and the creation, manipulation and optimization of web-compliant graphics are studied. The course will be taught following the concepts of the BYU-Idaho Learning Model. Please be sure to read and understand the expectations within this model.

Materials:

• Krug, Steve. (2006). Don't Make Me Think (2nd Ed). Berkeley, CA: New Riders (ISBN 0-321-34475-8). Required Book
• Lloyd, Ian. (2008), Build your Own Web Site the Right Way Using HTML & CSS (2nd Ed). Sydney, Australia: Sitepoint (ISBN 978-0-9804552-7-4). Optional Book
• A domain name and web site hosting for the duration of the semester
• Java JRE or SDK installed (if not already present on your computer)
• Netbeans IDE (PHP version) development tool.
• FileZilla or another FTP client.
• A laptop computer is recommended with the lab providing only 4 work stations for student use.

Learning Goals: [What you should remember in 5 years]

1. How to follow the planning process including: Plan, Prototype, Test, Develop and Test again to be cost effective and meet client needs.
2. How to use modularization in the development process to ease maintainability while enhancing performance.
3. How to use web standards to obtain a better Return on Investment (ROI).
4. How to identify, influence and adapt to change to remain viable in the industry.
5. How to manage content and aesthetics in web design and development.

Learning Objectives: [What you should do this semester]

You will demonstrate both the knowledge and skills to:

1. Plan and document the planning process for a web site;
2. Develop a style guide for a web site and follow it during development;
3. Plan for and implement modularization into a web site;
4. Design and develop web pages that validate to current W3C standards including: XHTML-Transitional and CSS 2.1. Learn about and experiment with emerging web standards including HTML 5 and CSS 3;
5. Design and develop web sites that are usable and findable;
6. Develop a colophon page that describes how you have constructed your web site(s) to meet standards, be usable, to increase search engine optimization (SEO) and to maximize return on investment (ROI);
7. Construct and implement a site-wide, valid CSS stylesheet for a screen user-agent;
8. Research, develop and follow copyright guidelines for web site materials;
9. Identify and use resources to keep abreast of changes in web design and development.

Assignments:

All assignments are submitted to your web site by the due date as a standards compliant web page (except as specifically noted). The numbers in brackets [] indicate the objective(s) that are measured by the assignment.

Site Hosting [1,9]

Students are responsible for acquiring their own web hosting and domain name. You choose your own hosting (but it must be professional hosting). Several hosting companies are recommended (F.Y.I. Each of the recommended hosting companies provide a free domain name with purchased hosting): JustHost.com, Hostmonster.com, or Dreamhost.com (Enter "Discountthirty" to save $30 on the Dreamhost hosting fee). Hosting must be maintained for the duration of the course although most hosts will discount prices for longer sign up periods. I have created some short videos that explain the sign-up process for the three recommended hosting providers listed above. The video for each can be viewed by going to the video helps list.

Hosting Requirements: This list constitutes the basic requirements for your hosted site:

• Server-side Includes (SSI) supported;
• PHP 5 or higher supported;
• Minimum of four months in duration (the length of the semester and slightly beyond).

Registration [9]

Once the hosting is operational, you must register at School.Blaine Robertson.net and enter your web address (URL) into the registration system. I will then create a common directory for the class to allow members of the class to visit one another's sites.

Site Plan [1,4,5,7]

You will complete and publish a site plan. The plan will originally be printed and later converted into a web page and posted to your web site. The plan may be updated as the semester progresses. A planning worksheet is provided to assist you [ Word Format | PDF Format ] in the planning process. Included in the plan must the items covered in the workbook, including a list of directories (folders) used in the web site — required directories include: css, assignments, images and modules. Also, the sketches to be done in step 4 of the workbook should be scanned and linked to or embedded into the plan itself. The plan (once converted to a web page) must be accessible via a link placed in the footer of each page in the web site. An example is also available to look at.

Style Guide [1,2,4,5,7,9]

You will develop and publish a style guide for your web site. The style guide will originally be a print document, but will later be converted to a web page and posted to your web site. The guide will outline pertinent detail to govern your site development and must include the following sections: navigation, typography, color, logos, graphics, content and "best practices". You must provide detailed information for each section. Three sample guides are viewable at Penn, PPG and SilverOrange. The style guide (once converted to a web page) must be accessible via a link placed in the footer of each page in the web site.

Wireframe [4,9]

Much like the steel superstructure in a modern building the wireframe is the superstructure of a web page. It consists of xhtml elements that provide the structure to hold content. In perhaps more familiar terms, a wireframe is a template that can be reused again and again everytime a new web page is created. Wireframes provide consistency in the look and feel of the web site. They always work hand-in-hand with CSS. The wireframe provides the feel (the placements of common features such as a header or the navigation) while the CSS provides the appearance of those things (colors, sizes, etc...).

You will create your own wireframe and accompanying CSS stylesheet. From this wireframe (you can have variations of it for different parts of the web site) all web pages in the site will be built. By using this approach there should be no mistake as a person navigates within your web site that they know they are in YOUR web site. The wireframe should be consturcted using XHTML Transitional valid elements.

Modularization Plan [1,3,4,5,7]

A key component of maintainable web sites is modularization of common elements across the site. You will be responsible for implementing modules of common code within your site. Besides the design and implementation, you will document each module and post your "Modularization Plan" to your web site. The plan must include a list of all modules and the links or other data that each one contains. This plan will be posted as a web page and must be accessible via a link placed in the footer of each page in the web site.

Site Map [1,2,3,4,5]

The site map is an alternative means of finding the resources of a web site. Typically a site map (sometimes called a site index) is a list of hyperlinks to the web pages held in the web site. What can differ is how the list is organized. For example, Google's Site Map is organized by categories while the BYU-Idaho Site Index is organized alphabetically. The choice of organization is up to you as the site owner. Your site map should be a web page that is accessible via a link in the footer of each page in the web site. If you are new to the idea of a site map you can learn more by reading the site map section of the navigation article.

Colophon Page [1,4,5,6,9]

A colophon page describes how a web site is constructed and can be arranged in a wide variety of ways. Your colophon page must contain a minimum of four sections: Web Standards, Usability, SEO and ROI. The web standards section must explain what standards you have used in building your web site and why. The usability section is going to describe how you have implemented the concepts from the Don't Make Me Think text. Be sure to be thorough in your explanation. The SEO section will explain the principles and techniques you have used to increase your site rankings in search engines. Finally, the ROI section will describe how doing each of the three preceeding section will increase profitability for the site. The colophon web page must be accessible via a link placed in the footer of each page in the web site.

Copyright Policy [2,4,8]

Copyright is a legal concept that governs how materials can be used. You will be responsible for researching how copyright affects web design and development. Based on your research, you will write and post a copyright policy to your web site. The policy will consist of two sections: Overview and Adherence. The overview section will outline in one printed web page length the essentials of copyright as pertains to placing materials in a web environment. The adherence section will summarize how you personally have adhered to copyright law in the construction of your web site. This section should conclude with a general statement that will direct visitors to your web site to do the same. The copyright policy must be accessible via a link placed in the footer of each page in the web site.

Personal Content Assignments [1,2,3,4,5,7,9]

During the course of the semester you will build and post web pages directly related to your own content using your wireframe. These pages should be accessible using your site navigation. The pages will be graded on an ongoing basis. In addition, as pages are added to your web site, you will add them to your site map; please add the date posted following the page names in the site map. Consult the syllabus schedule for due dates.

Student Web Site [All]

Each student will plan, build and maintain a standards compliant web site which meets the objectives outlined in the syllabus. Web sites will be formally presented and graded at the end of the semester. Each student will present her or his own web site, and sites will be graded during the presentation. Grading will be on how well the web site meets the posted criteria.

Exams [All]

Students will take two exams (mid-term and final) during the course to assess their understanding and mastery of objectives covered in the course of study. The mid-term will be traditional while the final is entirely production.

Readings

Each week there are a number of readings that are to be finished prior to the first class day of the week. It is absolutly critical that you have both read and studied these readings as they will provide both theoretical and practical exposure to concepts and principles. You are responsible for all materials covered in the readings! See the readings list.

Attendance [9]

While attendance is not part of the graded objectives, attendance is critical and should be consistent. Treat class like a job, you miss and you get fired. I will be prepared every day to teach. You should be in attendance every day ready to learn.

Late Work Policy

No late work is accepted. All work is due by midnight (unless otherwise indicated) on the dates specified by the professor and/or the schedule listed below. No assignments will be accepted after the deadline. This is critical! Each assignment demonstrates your mastery of course concepts. Failing to demonstrate mastery will have an immediate and substantial impact on your overall grade. Be prompt and on time with all assignments.

Grading:

Each assignment allows you to demonstrate mastery of a course objective. Each assignment is graded "Pass" or "Fail" and each course objective will be assessed using multiple assignments. To pass a course objective you must "Pass" 80% or more of the assignments for that objective.

To pass an assignment, you must meet the stated requirements in the Assignments section of this syllabus. In addition, the work must be your best work -- including web pages that meet validation and usability standards and are error free. Do not submit junk! To assist you to track your progress you can download a grade tracking excel spreadsheet.

Grade Scale

A	Pass 100% of course objectives.
A-	Fail only one course objective.
B	Fail two course objectives.
C	Fail three course objectives.
D	Fail four course objectives.
F	Fail five or more course objectives.

Tentative Schedule

Remember: All assignments are submitted by being posted to your web site by Saturday at midnight unless otherwise specified. The schedule below is subject to change. Please refer to the online version, rather than printed versions, for the most up-to-date information. You may view all CIT 230 assignments using Google calendar.

The readings below belong to: Think (Don't make me think); Site (Build your own web site the right way using html & css);

Week 1 — Apr. 19 - 24

Readings: Internet, Model, Standards, Online, Web Standards, Guidelines, Site Ch. 8

Topic: Intro to course; Site Hosting; Basic Guidelines; Web Standards

Homework Due: Hosting & Domain Name purchased and activated; Register URL; Complete XHTML and CSS Quizzes.

Week 2 — Apr. 26 - May 1

Readings: Netbeans Tutorial, Filezilla Tutorial, Download and install the 230 bookmarks to FireFox

Topic: Site setup & Tools

Homework Due: Install Netbeans; Install Filezilla; Site ownership page editted

Week 3 — May 3 - 8

Readings: Architecture, Page, Think: Ch. 6 & 7

Topic: Planning Your Web Site; Web Guiding Principles

Homework Due: Site plan (print version)

Week 4 — May 10 - 15

Readings: Color, Wireframe, Mockups, Typography, Navigation, CSS, Cascade, SEO, Semantic

Topic: Design & Style

Homework due: Style Guide Due (print version)

Week 5 — May 17 - 22

Readings: XHTML, Head, Doctype, Floats, Positioning 1, Positioning 2, Divs, Text, Validate, Templates

Topic: XHTML Fundamentals

Homework due: Initial Wireframe completed; Home page from wireframe posted;

Week 6 — May 24 - 29

Readings: Think: Ch. 1, 2, 3, 4; CSS Box, Lists, Links, CSS Lists, Tables, CSS Tables

Topic: XHTML Fundamentals; Server Side Includes

Homework due: Modularization plan; Wireframe modularized; Site Plan (web version); Site map

Week 7 — May 31 - June 5

Reading: Midterm Review

Topic: Memorial Day on Monday; Mid-term exam Friday;

Homework due: Style Guide (web version); 3 content pages; Site map updated

Week 8 — June 7 - 12

Readings: Images, CSS Images

Topic: Images on the web

Homework due: Images added to web site; 3 content pages; Site map updated

Week 9 — June 14 - 19

Readings: Text, CSS Text, Semantics, Entities; Think: Ch. 5

Topic: Typography

Homework due: Typography in CSS adjusted; 3 content pages; Site map updated

Week 10 — June 21 - 26

Readings: Forms, CSS Forms

Topic: Communications: A taste of PHP

Homework due: Contact page; 2 content pages; Site map updated

Week 11 — June 28 - July 3

Readings: Accessibility; Think: Ch. 10, 11

Topic: Usability

Homework due: Colophon page; 2 content pages; Site map updated

Week 12— July 5 - 10

Reading: Copyright

Topic: Ind. Day on Monday; Copyright; Receive final exam (two weeks to complete);

Homework due: Copyright policy; 2 content pages; Site map updated; Personal web site

Week 13— July 12 - 17

Topic: Student Web Site Presentations

Homework due: Student web sites presented;

Week 14 — July 19 - 23

Topic: Monday Personal site presentations; Grade final exam on Wednesday (must be in attendance);

Homework due: None

Class Policies

Computer Ethics

The use of the BYUI´s network, systems and data impose responsibilities and obligations upon the students to use these computer components in an ethical manner and in accordance with the guidelines found in the Honor Code. Students are to access only data and files that are owned by them or the instructor who has given explicit authorization for them to be used. Copyrighted material must be used in accordance with copyright law and applicable license agreements followed. Attempting to circumvent or subvert system security measures or engaging in any activity that causes harm to systems or to any information stored thereon, such as creating or propagating viruses, disrupting services, or damaging files are considered inappropriate use. Violators are subject to disciplinary actions as prescribed by school policy and may also be prosecuted under applicable local, state, or federal civil or criminal law.

Content Disclaimer

This syllabus represents a proposed overview of the content, expectations and sequence of the course. Changes may occur during the course at the discretion of the professor. Students will be informed when and if such changes occur.

Honor Code

All students are expected to abide by the Honor Code and Dress and Grooming Standards. These standards apply to all students, both in and out of class. If you are not sure of the standards or honor code, please review them here: Dress and Grooming and Honor Code. Hats, caps and shorts are all popular attire, but are not appropriate for classrooms and should not be worn in classrooms or labs by men or women.

Reasonable Accommodation for Students with Disabilities

In compliance with applicable disability law, qualified students with a disability may be entitled to ´reasonable accommodation.´ It is the student´s responsibility to disclose to appropriate personnel in the Services for Students with a Disability (SSD) Office any special need he/she may have and to provide the appropriate documentation of the disability. The SSD office is located inside the Learning Assistance Center, McKay Library 1st floor.