TopCoder Website - Challenges Pages - Wordpress Theme Build

Welcome to TopCoder Website – Challenges Pages WP Theme Build Challenge.  We have built a new website at www.topcoder.com and we now need you to convert the provided UI Prototype to provided wordpress theme using HTML5 and CSS3. This challenge focuses on the challenges page at http://www.topcoder.com/challenges/.  We have an updated prototype with more functionality and some design changes.
 

Resources provided:
- Latest theme as baseline.  Get from git: https://github.com/cloudspokes/tc-site/tree/branch-30036242/wp-content/themes/tcs-responsive
- Latest TC_API_plugin is also in git: https://github.com/cloudspokes/tc-site/tree/branch-30036242/wp-content/plugins/TcApi-hookup
- UI Prototype for Challenges Pages. Please ensure template will work fine as well as this UI Prototype. JSON of Mockup and real API format might be different, please follow real API format.

General Rules :

• Scope : Challenges Pages, but please ensure existing pages (home, community, case-studies,etc) work fine
• Convert provided (Challenges Pages) UI prototype to worpdress template
• 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.
• 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 provide animated Glowing link for clickable text
• Switching to grid view or list view should work fine as well as UI Prototype work via Javascript
• Replace First to Finish label with Bug Races
• Sorting and pagination should work, since current API does not support required info for pagination, lets build pagination via JS (load All then hide some)
• Advanced Search should work
• Don't break any existing home,community landing page
• Please ensure your new PHP func call API V2 http://api.topcoder.com/v2, and please feel free to edit existing funcs that still call old APIs
• Currently UI Prototype is Using dummy JSON files, please update JSON sources to actual API. TC_APIPlugin need to be updated to provide JSON, see how current /challenges work
• Please call existing header and footer
• Page Title (on browser bar) should contain representative information, i.e (Contest Name for challenge detail page,etc)
• Please hardcode missing API fields and let know (in forum). we'll ask you (winner) to swap it on Final Fix Phase
• Using child template is recommended. example : content-challenge-3-box.php for 3 box ( Graphic Design Challenge,Develop,Algoritm) below header section
• visit http://docs.tcapi.apiary.io/ for more information about API
• visit http://www.topcoder.com as current site reference
•  

Plugin Updates
Currently JSON data is provided by TcApi-hookup\includes\ajax_func.php, please extend it to provided JSON for other challenges pages

Theme Updates:

Challenges Landing Page
This page will be the gateway to all challenges.
HTML source: view-challenges.html
API source: Development - http://api.topcoder.com/v2/develop/challenges/, Design - http://api.topcoder.com/v2/design/challenges/, Data-marathon - http://api.topcoder.com/v2/data/marathon/challenges, Data-SRM - http://api.topcoder.com/v2/data/srm/challenges
URL : http://siteurl/active-challenges/ same with current /challenges

• We already have a version of this page (page-challenges.php), but UI Prototype need to be updated so three box at header will link to correct page
• Please add sorting functionality, clicking any column at header will sort table content
• Clicking any of three box at header will link user to Related Open Challenges page

Active Challenges Page - Design
HTML source: design.html
API source: http://api.topcoder.com/v2/design/challenges?listType={listType}&pageSize={pageSize}&pageIndex={pageIndex}&sortColumn={sortColumn}&sortOrder={sortOrder}
URL : http://siteurl/active-challenges/design/

• Clicking on any contest name will open design challenge detail page

 

Past Challenges Page - Design 
HTML source: design-past-challenges.html
API source: http://api.topcoder.com/v2/design/challenges?listType=Past&pageSize={pageSize}&pageIndex={pageIndex}&sortColumn={sortColumn}&sortOrder={sortOrder}
URL : http://siteurl/past-challenges/design/

• Please summarize the prizes for purse columns. Some contests will have more than 2 winners, please ensure total prize is calculated correctly
   

Review Opportunities Page - Design
HTML source: design-reviw-oppo.html
API source: http://api.topcoder.com/v2/design/reviewOpportunities/?pageIndex={pageIndex}&pageSize={pageSize}&sortColumn={sortColumn}&sortOrder={sortOrder}
URL : http://siteurl/review-opportunities/design/

• Clicking on Contest title will link to Review Opportunity Detail page that will be descibed below
   

Review Opportunity Detail - Design
We don't have Prototype for now, just var_dump the information
HTML source : design-reviw-oppo.html
API source : http://api.topcoder.com/v2/design/reviewOpportunities/{contestID}
URL : http://siteurl/review-opportunities/design/{contestID}

 

First to Finish - Design
HTML source: design-f2f.html
Rename this to "Races". This will contain Bug Races instead of F2F challenges.

 

Active Challenges Page - Develop

HTML source: develop.html
API source: http://api.topcoder.com/v2/develop/challenges?listType={listType}&pageSize={pageSize}&pageIndex={pageIndex}&sortColumn={sortColumn}&sortOrder={sortOrder}
URL : http://siteurl/active-challenges/develop/

• Clicking on any contest name will open design challenge detail page

 

Past Challenges Page - Develop
HTML source: develop-past-challenges.html
API source: http://api.topcoder.com/v2/develop/challenges?listType=Past&pageSize={pageSize}&pageIndex={pageIndex}&sortColumn={sortColumn}&sortOrder={sortOrder}
URL : http://siteurl/past-challenges/develop/

• Please summarize the prizes for purse columns
   

Review Opportunities Page - Develop
HTML source: develop-reviw-oppo.html
API source: http://api.topcoder.com/v2/develop/reviewOpportunities/?pageIndex={pageIndex}&pageSize={pageSize}&sortColumn={sortColumn}&sortOrder={sortOrder}
URL : http://siteurl/review-opportunities/develop/

• Clicking on Contest title will link to Review Opportunity Detail page that will be descibed below
   

Review Opportunity Detail - Develop
We don't have Prototype for now, just var_dump the information / result of API call
HTML source : develop-reviw-oppo.html
API source : http://api.topcoder.com/v2/develop/reviewOpportunities/{contestID}
URL : http://siteurl/review-opportunities/develop/{contestID}

 

First to Finish - Develop
This page will be similar to BugRace contest type
HTML source: develop-f2f.html

Rename this to "Races". This will contain Bug Races instead of F2F challenges.

 

Active Challenges Page - Data

HTML source : not provided
Storyboard : not provided
API doc : http://docs.tcapi.apiary.io/#algorithmscontests
API : http://api.topcoder.com/v2/data/srm/challenges, http://api.topcoder.com/v2/data/srm/challenges
URL : http://siteurl/active-challenges/data

• Please reuse existing layout of http://cloudspokes.staging.wpengine.com/data/challenges/
   

 Pagination

• Current layout (grid or list) should be kept when user navigate to other paginations
• Please hide next navigation if page reach last pagination and hide prev navigation if page reach first pagination

Advanced Search

• Please implement the design as is. If there are items that are not possible to search, please ask about it in the forum.

 

Specific Wordpress Requirements

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

• Provide actual sreenshot to represent theme
• 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
• Safari

Submission Guidelines

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

 

Please provide a deployment guide that details the list of files that were updated.