Challenge Overview
Project Overview:
Welcome to A pollo- Project Assessment Questionnaire – UI Prototype Challenge! The goal of this challenge is to create the HTML5 Prototype for an application using the provided "PAQ" storyboards. The prototype must follow our standards and our guidelines. Review the details below.
The main task of this project is to create the HTML5 UI Prototype based on the provided Storyboard design by using industry standard best practices.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JS code functions and make it easier for future developers and the client to understand what you have built.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Note: The winner will be selected by client directly.
Competition Task Overview:
The main task of this competition is to develop HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Required Pages:
1. Dashboard:
Please refer to 02_01_Dashboard.png.
- We will have a left side navigation for this application:
-- Projects. (02_01_Dashboard.png )
-- Audit Trail. (06_01_AuditTrails.png)
-- Roles. (07_01_Roles.png)
-- Help. (Dead link)
- For each project in dashboard user can see:
-- Project Title.
-- Project Status. (Finalized or In Progress)
-- Number of Instances.
-- Last updated By.
- We can filter the projects based on: (02_02_Dashboard.png)
-- Date Created.
-- Status.
2. Project Details:
Please refer to 03_00_01_ProjectDetails_Version.png.
Admin User:
- From this view you will see project details.
- If user clicks on New PAQ Version plus icon “+” (03_00_02_ProjectDetails_Version.png) then user will be able to add a new version (03_01_ProjectDetails_Version.png).
- Clicking on arrows icon (03_02_ProjectDetails_Version.png) will expand questions.
- Clicking on edit icon will allow user to edit questions (03_03_01_ProjectDetails_Version.png), please show error validation (03_03_02_ProjectDetails_Version.png).
- Clicking on recommendation link will allow user to edit recommendations (03_04_ProjectDetails_Version.png).
Non Admin User:
- From this view non admin will see project details (04_01_ProjectDetails_Actor_NonAdmin.png).
- If user clicks on expand icon for recommendations then user will see recommendations options(04_02_ProjectDetails_Actor_NonAdmin.png).
3. Create Project:
- Please refer to 05_01_CreateNewProject.png
- User needs to fill:
-- Project Name.
-- PPM Project Proposal.
-- Project ID.
- Please show error validation (05_02_CreateNewProject_Error.png).
4. Audit Trial:
Please refer to 06_01_AuditTrails.png.
- User will see who audited the project from this view.
- Download log is a dead link.
5. Roles:
Please refer to 07_01_Roles.png.
- From this view user will see user roles.
- Admin User will have ability to remove users.
- Or search for users to add them to project. (07_02_Roles_Search.png).
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- 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 layout 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 style-sheet.
- 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 Requirements:
- You must use AngularJS. Use AngularJS best practices.
- 3rd party libraries can be leveraged in this challenge as long as they are free for enterprise use (no licensing fees), have no restrictions on distribution, selling and / or profiting from the use or sale of software including the library and do not require the source code of the software including the library to be made available to recipients of the software in binary or compiled form. Requirements to credit the library in the source code that uses it are fine (just be sure to follow any such requirements in your submission)
- Please document what libraries you have used and where in the prototype.
Browsers Requirements:
- Latest Firefox, Safari & Chrome Browsers.
- IE latest browser.
Documentation Provided:
- Storyboard Screens and PSD files can be found in forums.
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.