XHTML
ISSD Project
Overview
During the first section of the ISSD program, you will be working on a Web project that will include much of what you are learning in class.
You will incorporate your previous graphics from the Photoshop project, XHTML, Cascading Style Sheets, and the principles of style and design that you have learned in your Design course.
You may be able to continue to use this project when you enter the Online Databases course; you will be able to add functionality to your site like collecting and storing user information, managing products or content, interacting with clients online, and other related tasks.
Guidelines
The project will consist of a Web site that will follow these following constraint guidelines. The final marking outline will be given in advance.
- The site will have at least five valid XHTML1.0 Strict pages.
- There will be at least one custom valid external style sheet that controls the appearance of the entire site.
- There will be one embedded style definition and one inline style definition.
- The pages will degrade gracefully to IE6 for Windows. Macintosh/Unix/Linux compatibility would be nice but is not required.
- The pages can be tested in simulators for mobile devices, and audio browsers. This will not be required for marks; just for your own knowledge.
- The pages will use custom images created in Photoshop that include the alt, width, and height attributes.
- The pages will contain custom content that you will create.
- The pages will use relative links and will be hosted on your U of W Web server.
- The pages will be submitted on a CD for marking that can be evaluated offline. The CD must contain your first and last name, date, and 'ISSD xx project' on the CD label (xx being your intake number). You can optionally include your site's logo/graphics as well. The CD must be professional in appearance.
- The pages will link together with valid anchors that use the title attribute properly.
- The pages will be properly commented, including the external CSS file.
- The pages will be designed in logical divisions (divs) that will allow for easy creation of server side includes (SSI/PHP), DHTML, or other technologies. These divisions should follow the mockups.
- The site will include at least one table.
- The site will include at least one form with at least five fields whose data echoes back to the user when submitted.
- The site will include at least one list.
- The size of each page will not exceed 75 kb, including all graphics, but excluding the CSS.
- The site will follow the guidelines of proper navigation and organization (as covered in the Design course).
- The site will follow the guidelines of proper colour theory as covered in the Design course.
- The site will not: use frames, have 'under construction', 'best viewed with', or other such limitations or disclaimers. If you have restricted your target audience for any reason, it should be discussed with your instructor during the development phase and included in the Project Outline file.
-
The site will follow the directory structure guidelines discussed in class. For example:
- Project Documents folder (your timesheet, invoice, project document with target audience discussion, etc).
-
Project folder
- index.html
- styles folder
- images folder
-
Marking folder
- Marks.html
- any other .html pages
- any other required folders
- Design Mockup folder
- Notes folder (optional but recommended)
- You should have a project summary document that includes all of your notes, examples of your mockups, timesheets, invoice, etc. This should be professional in appearance and be an example you would feel proud to bring to a job interview.
There will be a page called Marks.html that you will create for this project (layout is not important here, but it needs to be presentable). In that page, you will list and detail each specific part of your project for marks, and link to specific parts of certain pages (marked with an asterisk(*) in the Project Marking Rubric), showing me where you have fulfilled that criteria (for example, an inline style or a list). Any part of the project not included on this page will recieve 0 marks. This page will also link to the online version of the site on the University Web server.
Tips
Here are some tips you might want to consider when working on your project.
- Get others to evaluate your work. You don't have to just ask students from your class; you can ask students from other intakes of the ISSD program, people who you know in the industry, family, or friends. Examples for evaluations are in the Web design text book.
- Refer to the marking criteria and guidelines regularly. These will help keep you on track.
- Don't procrastinate. Create a time line and leave yourself some time near the end as a buffer, just in case you need it.
Plan Your Work Then Work Your Plan
Many students have problems managing their time this early in the ISSD program. They might, for example, spend too much time on their images, layout, or colour and not enough on their organization, navigation, or code validation.
The ideal way to get the project done on time and get as many marks as you can is to properly manage the project.
While not a complete list, here are a few suggestions to keep in mind when working on your project:
- The storyboard, mockups, etc. should be completed according to the time guidelines given in class. There is a reason for those guidelines: it keeps you on track.
- When working on the final project, concentrate on the major points in the marking outline. Get the basics done before worrying about minor details.
- Create the structured pages first. Get the navigation and structure done early. Content can be added after the templates are completed (it should be developed early) and then the styles and appearance can be applied last.
- Make sure all your code and CSS validates at each step of the way. It is much easier to fix minor problems than let them accumulate and compound into larger problems.
- Test your output in many different browsers at every stage.
- Keep track of changes. Make copies and backups of your work regularly so that you can go back a few steps to when something was working if you can't find a problem.
The Devil is in the Details
There are always a few mistakes that someone in class will make when their project is handed in for marking. Here are a few to help make you aware of some of the things that get marked:
- XHTML output should be designed for whatever User Agent is defined in your Project Outline. Be aware that your project may be tested at different resolutions from 800x600 up to 1280x1024, different browsers from Safari, Firefox, Opera, Chrome, and IE 6/7/8/9 on Windows or Macintosh. Whatever restrictions you specify in your Project Outline must be reasonable and substantiated. In other words, saying that your target audience will have 21" monitors and IE 6 or later is not valid for the general population. You will lose marks.
- Make sure that all XHTML/CSS coding, layout, indenting and commenting looks good.
- Web page titles, etc., should be appropriate and meta tags should be different for each page.
- Navigation should work in all browsers at all resolutions, even if images are turned off (your pages may be tested with images turned off).
- Too few comments or comments that don't convey any real information won't get full marks. The same problem happens with alt and title attributes.
- Project Outline Proposal
- This is a summary of what your project is about, who your target audience is, what you hope to accomplish (your goals for the site), and things of this nature. In the real world, this is a polished, professional document.
- Site Storyboard
- Your project should be at least 5 pages. This storyboard should show the relationship between the different pages, and the logical flow that people would follow when using your site. This needs to be included with your proposal.
- Design Mockup(s)
- This will be created in Photoshop and submitted as .psd files. Each will have several layers, with each layer having a different page element (logo, nav bar, footer, etc) that you will be able to modify or re-position at will. When put together, the individual layers will give your client a solid idea of how the final page should look, including colours and graphics. You should have browser chrome samples to show your clients how their site may look under different Operating Systems, User Agents, and screen resolutions. You should have already completed this in your ISSD Photoshop and Design courses.
- Project
- Your project will be marked according to the project marking scheme provided.
All material listed above must be handed in on a CDROM with your project folder by the due date given in class. There is a penalty for lateness.
XHTML - TOC - Introduction - Books -
ISSD Project - [ Overview ] - Request For Proposal - Marks - Proposal - Presentation -
