96hrs - Member Profile Page Update - Wordpress Theme Build

Welcome to 96 hrs TopCoder - CloudSpokes – Member Profile Page Update - WP Theme Build Challenge.  The new topcoder.com website has been released and now it's time to  improve/enhance member page performance.

General Rules :

• Deployment Guide is provided in forum
• Latest theme and TC_API_Plugin can be downloaded from https://github.com/topcoderinc/tc-site/tree/dev
• Please provide changelog for any changes (TCApi Plugin)
• Please visit http://docs.tcapi.apiary.io/ as reference JSON mockup and as API V2 reference
• Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly. 
• Don't break any existing functionality
• Ensure your submission is clear of HTML and CSS Validation error and warning
• Please refers to http://www.highcharts.com/demo/ for graphs or charts
• We're Using UI Prototype scorecard (not wp scorecard). So please ensure this UI Prototype is working functional code.

 

AJAX Call :
Currently this template call 3 APIs that may cause this page slower. We're thinking this page should only call one API by wordpress template, and the others will rendered by JS/AJAX
1. Please change graph rendering to AJAX based, so this area should be loaded in paralel
2. Statistics (which call http://api.topcoder.com/v2/users/isv/statistics/develop) on each challenge type tabs should be loaded by AJAX
3. Rating on each challenge type tabs should have correct color, currently it show yellow color for all.
4. Only Badges and and member summary(country,quotes,etc) area (that call http://api.topcoder.com/v2/users/tomek/statistics/) will be rendered by PHP in template
5. Do not forget to add 'loading' icon for specified section/area while data/content is being downloaded.
We're open to better solution to increase performance of this page. the other option maybe : Statistic (graph and table view) is rendered by wordpress template (PHP) and the others by JS/AJAX. 


Design Tab :
Leave it as is since API is being developed

Algorithm  Tab :
URL : http:siteurl/member/{handle}/?tab=algo
1. Currently http://www.topcoder.com/member-profile/tomek/?tab=algo only show SRM data. Please enable Marathon tabs and API is http://api.topcoder.com/v2/users/tomek/statistics/data/marathon. Please see how current "develop" tab handle challenge types e.g : http://www.topcoder.com/member-profile/iRabbit/?tab=develop&ct=development where ct is challengeType. Please ensure table view should work for marathon challenge type
2. Please show chart for both SRM and Marathon if available

3. Enable/Disable tabs based on ratingsSummary array of member_profile_api.

• We're thinking if we can show/hide tabs based ratingSummary of http://api.topcoder.com/v2/users/FireIce/ , API for challenge type : http://api.topcoder.com/v2/develop/challengetypes
• Currently ratingSummary on API does not contain Data Science, lets assume data will be available later. So if a tab doesn't exist in the ratingsSummary array, then it should be disabled.

Develop Tab :
URL : http://www.topcoder.com/member-profile/fireice/?tab=develop, http://www.topcoder.com/member-profile/fireice/?tab=develop&ct=assembly-competition
1. Only available tabs of Develop Challenge Type should be displayed. Currently it show almost all challenge type

• If the user has no stats for a particular track, let's not include the tab. If the user has no Development stats in any track then we should have a nice message instead of an empty table.
• We're thinking if we can show/hide tabs based ratingSummary of http://api.topcoder.com/v2/users/FireIce/ , API for challenge type : http://api.topcoder.com/v2/develop/challengetypes

2. Add Realibility info to each tracks of "Develop". lets assume there will be reliability field on http://api.topcoder.com/v2/users/FireIce/statistics/develop.

Graph :
- To improve this member page, please convert graph area from PHP based to AJAX call for both Develop and Data science challenges, so this area should be loaded in paralel
- Currently chart only show Rating History, please add two buttons at top of chart, they will be Rating History and Rating Distribution button. see how they work on http://community.topcoder.com/tc?module=MemberProfile&tab=alg&cr=144400
- Please show correct background level based on level(depth) for Rating History

Forum Feed :
- Hide this area

 

Specific Wordpress Requirements

In addition to following Wordpress standards and best practices, please note the following requirements.

• General Requirement - Do not break or override any of the standard Wordpress features. If you need to, please explicitly explain in your submission.
• Make proper use of the Wordpress Menu system.
• Do not hardcode settings/config in the template code. Please create a "Theme Options" panel for configuration settings.
• Use sidebars when appropriate. We should be able to add widgets to sidebars.
• Use Widgets when appropriate. We'd like to avoid doing a copy/paste to include the same functionality in multiple templates/pages.

 

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.
• Current website code has some inline CSS, please move them to external CSS file.

JavaScript Libraries/Plugins

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

Browser Requirements

• IE 7+
• FF 7+
• Safari 5+
• Chrome Latest
• Chrome / Safari

 

Final Submission Guidelines