DDS UI Prototype

Project Overview

GLT Document Distribution Service (DDS) Application is a custom built application that will enable electronic document transfers in support of transport and logistic operations.

The DDS application will allow the users to quickly search and view transactions, enter/change parties and documents for transactions, review the current transactions / in-progress Letters of Transmittal, keep track and review the history of transactions, Letters of Transmittal and documents - helping our client to deliver reliable, efficient and user-friendly service, increase user’s productivity and provide easily-verifiable document packaging and delivery to customers.

Competition Task Overview

The purpose of this challenge is to convert the wireframes to a prototype. We don't have custom styles to apply to the pages, so just use standard / basic look & feel (similar to wireframes). But we need a pure HTML / Javascript based prototype without any reliance on axure which was used to create the wireframes.

Key Requirements

• Create a HTML / Javascript based prototype based on the wireframes
• Test in all the required browsers.
• Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
• Ensure you submission clear of HTML and CSS Validation error and warning.

Detailed Requirements

We need all pages in the wireframes ot be implemented in the prototype.

Specific HTML/CSS/JavaScript Requirements

• You MUST use HTML5 and CSS3
• 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 tables of data/information 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).
• Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
• Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.

JavaScript Libraries/Plugins

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 requirements anywhere in the code.

• You are allowed to use the JQuery JavaScript library for this contest.

Browser Requirements

• IE8+
• Firefox v25 to latest (Mac & PC)
• Safari latest (Mac & PC)
• Chrome v35.0.1916.114 to latest (Mac & PC)

Documentation Provided

Register to download documents from challenge forum.

Final Submission Guidelines

Submission Deliverables

• The prototype with all pages covered.

Submission Guidelines

Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review.