topcoder - Register - Submit - View Result - UI Prototype

Welcome to Responsive Register - Submit - View Result UI Prototype Challenge.  
The new topcoder.com website has been released and now it's time to get more areas of the community functionality redesigned. The new site is tailored to our talented community and our goal is to give everyone a great user experience. 
This challenge would produce clickable UI Prototype (HTML) and will be built as wordpress template on next challenges.
 

 

General Rules :

• Storyboard and baseline UI Prototype is attached in forum
• Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly. Make sure you test on tablets and mobile phones too.
• Please update existing related CSS files instead of creating new CSS files
• Ensure you submission clear of HTML and CSS Validation error and warning
• Ensure existing Challenges Pages and My TopCoder pages work properly
• Watch word typos in every place including the source code. Make sure they have correct meaning
• Layout (background) should be fluid, depend on browser width
• Please provide animated mouse hover  (with transition effect) for each clickable icons/buttons
• Please use Mobile view is for portrait orientation of tablet device, and it should be fluid based on browser width
• Switching the orientation (from landscape to portrait or vice versa) will also switch layout to correct layout directly, without reloading page.  Example :http://www.cloudspokes.com/, http://bradfrostweb.com/demo/mobile-first/ and http://www.studiopress.com/responsive/ and provided Prototype
• Please follow existing  (community.topcoder.com/tc) naming class for handle color, ie.”coderTextYellow” for yellow handle color
• Scope of this challenge is only Register, submit and view challenge result process
• We've replaced lato google webfont with source sans pro as is used on www.topcoder.com, please ensure to replace 'purchased' font which is used in PSD files with  source sans pro google webfont

 

Registering for a Challenge
- Please use Register for a challenge.zip (only contain PSD)  as Storyboard
- Please update existing "Register" buttons on existing HTML files to this new HTML files
- Please refers to Challenge_Reg_flow1.PPT
- Error_modal.psd is not used, please ignore
- Groups permission is an alternative scenario. The user will either see the Term step OR they will see the Group step, never both
- Ignore anything in the PSD that is not in the PPT

 

Submit to a Challenge
- Please use topcoder - Submit To a Challenge Storyboard.zip as storyboard for both Design and Develop Challenge Type
- Please update existing "Submit" buttons on existing HTML files to this new HTML files
- Please refers to current http://studio.topcoder.com and http://community.topcoder.com/tc
- Adding List Font form should be implemented
- Some Design Challenge allow Stock Art, please show two versions : allowd and NOT allowed Stock Art form
- Uploading files via AJAX should be implemented, see how current http://studio.topcoder.com works. Reviewers would looks into the code to ensure it would be easy to implemented using Wordpress later
- All screens should be implemented
 

 

View Challenge Results
- View Challenge Page is similar to challenge detail page. There is no Challenge Detail UI Prototype in provided UI Prototype, please just grab it directly from prod http://www.topcoder.com/challenge-details/30039554/?type=develop and  http://www.topcoder.com/challenge-details/30039498/?type=design. as you can see, there is reserved "result" tab. Please update existing challenge-detail-software.css and challenge-detail-software.js
- Please ensure this new "Result" tabs should be displayed by Javascript since Challenge Detail, Registrant, and this new "Result" content come from same API and will be loaded in single API call later. example : http://api.topcoder.com/v2/develop/challenges/30036134
- View and Download are clickable
- Should support Responsive view
- "5 More winners" should show remaining winners
- All screens should be implemented

 

Specific HTML/CSS/JavaScript Requirements

• You MUST use HTML5 and CSS/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

JavaScript libraries already used in the current site can be used in this challenge too. New ones need to be proved by client first.

 

Browser Requirements

• IE 7+
• FF 7+
• Safari 5+
• Chrome Latest
• Chrome / Safari on tablets / phones

Final Submission Guidelines