Itv0030 2007 lab 1 requirements
The goal of the lab 1 is to:
- Attempt/practice good UI design
- Practice using css and javascript.
Main requirements
You will have to create mock-up pages of the full application described in the general course page. No server apps, databases etc will be used or created in the first lab. However, the mock-up pages must be a proper UI, with forms, fields, functioning javascript checks, buttons etc.
Your page must work ok and look clean and nice on both Firefox and IE7 (or IE6). The site must be searchable (but not necessarily uploadable!) using lynx or some other text-based browser, although some extra convenience features may disappear.
The exact order, contents, etc etc of the application/web page is not specified. You will have to apply a good deal of creativity to come up with a good solution. Copying solutions by other students is prohibited.
Use basic html plus css and javascript
All the design must be done using very basic html. Titles, paragraphs, lists, anchors, images are allowed. Non-nested tables are allowed, if really helpful. Nested tables are strictly prohibited. All bold, italic, color, dimension, etc specifications in html are prohibited: you must use css instead. See, for example, http://www.websitetips.com/css/ for a large catalogue of articles, tutorials and tips.
Upload and search forms must be fully dynamic in the sense that no submits are done until all the necessary information on upload/search forms are filled/selected. This includes dynamic selections, opening/closing tree branches, obligatory field checks etc.
Dynamic, floating help must be attached to all forms and non-elementary links. For example: http://web-graphics.com/mtarchive/001717.php Note that this help should not disturb the user experience: it should not annoy.
Menus have to be created using lists with css/javascript (see http://css.maxdesign.com.au/listamatic/).
It is highly recommended to keep the simple, complex and tree search forms on the same page, selectable via links using javascript which hides the currently unselected parts of the page.
Style
Use stylistic hints (your page must look clean and modern, with some touches of style!) from:
