Challenge Overview
The client is want to rewrite their existing application the Data Processing and Reporting (DPR) component of benchmarking toolset using modern technologies and making it compliant with their standard. In this contest, we need your help to create the prototype of this application based on provided storyboard.
There are 4 pages you need to create in this contest. Following are some details requirement for the prototype:
- General Guidelines
- The background of application must be fluid horizontally and content size should follow the storyboard.
- All input elements (button, checkbox, radio button, text field) should follow the storyboard.
- Implement hover state for all buttons and links as shown in storyboard.
- Use image properly, we prefer usage of CSS sprite for buttons.
- Please document all your JS codes for all parameters and function (including params and its return value).
- Login Page (Reference 1.Login pages). You also need to show the prototype for invalid login.
- Transaction History Page (Reference 6.Transaction history)
- Content Management Page (Reference 7.Content management)
- You need to demonstrate the error state when importing data in this page.
- In screen 7.Content management_synchronized, only the top window must be shown, ignore window behind it.
- Logout Page (Reference 8.Logout page)
We also provide you the Wireframe to get the flow of the screen. Storyboard has higher priority than wireframe. If there is anything unclear, do not hesitate to ask questions in the forum.
Your submission must works on browser in the list below:
- IE7+
- FF 3+ Mac & PC
- Safari 4 Mac & PC
- Chrome Mac & PC
- Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review.
MAKE SURE TO WATCH CONTEST FORUM FOR ANY ADDITIONAL REQUIREMENTS AND CLARIFICATIONS THAT MAY BE ISSUED.
Final Submission Guidelines
Following are specific requirements for HTML, CSS and Javascript files:
- You must follow IBM W3 v17 Standard. Dojo Toolkit 1.7.x is the preferred JavaScript framework. You are also allowed to use JQuery in this contest.
- Your HTML code must be XHTML 1.0 Strict compliant.
- Validate your code, reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tabular data and not for page layout. No inline CSS styles, all styles must be placed in an external stylesheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags. Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e. "main-content", or "mainContent".)
- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition anywhere in the code.