Challenge Overview
Welcome to the TopCoder/CloudSpokes Community Design Concept Contest! As you may know, TopCoder and CloudSpokes each have their own impressive crowdsourcing development communities.
TopCoder Studio is designing concepts and ideas on what the future designer, developer or alogrithmists "community" user experience should be like.
While Studio is designing, we would like to start building the base theme and trying to hook up Awesome TopCoder APIs http://dev.topcoder.com.
This upcoming site will use Wordpress and will be hosted on http://wpengine.com/ , so Please make sure your submission will work on wpengine.com.
Please read the specification carefully and let us know if you have any questions.
1.1 Competition Task Overview
A WordPress theme is a folder containing all the images, css, javascript, and PHP files that describe the appearance and layout of a WordPress blog. The PHP files have a standard naming convention for page types, and contain and use template tags to call for specific information from the blog's database, such as a post title, the post date, it's categories, and more.
Since our focus of this contest is on architecture, so we will use current topcoder.com as baseline. theme will be provided in contest forum
General Tasks
- Write your plugin(s) with classes for TC API hooking up
- Add New Group Menu into left sidebar on WP-Admin if required
- CSS of widgets and contest lists should be hosted in plugin directory
- In order to keep clean and easy to develop, your classes/functions should be in new your plugin instead of in $theme/functions.php
Layout overview
Since studio is designing storyboard, so will re-use existing layout from topcoder.com and studio.topcoder.com for now. We only provide PNG files
- Please reuse existing header and footer of http://www.topcoder.com/blog, and keep on how they are managed from wp-admin
- Please use two column layout, it has left hand sidebar
TC API hooking up Plugin
TopCoder has great APIs that can be found here https://dev.topcoder.com/. APIs can be used to display active contests, member profiles, etc.
It requires an user_key to use, and user_key value should be configurable from theme-option
Contest Type
API resource : "http://api.topcoder.com/rest/contestTypes?user_key=$userKey"
- Contest Type will be used on many spots, ie:select box, menus, etc
- Create new PHP function/class to show Contest Type, and it returns (array). ie:get_contest_type()
View Active Contests Pages
API resource : "http://api.topcoder.com/rest/contests?user_key=$user_key&listType=ACTIVE&type=Assembly+Competition&sortOrder=asc"
- Right Now, there is no menu or link that will bring users to this page template. but we need to build this page
- URL should be /active-contests/$contestType and /active-contests/$contestType/page/$page for pagination where $page is an integer value.
- Create new PHP function/class to show Active Contests. and it returns (Array). example:get_active_contests()
parameters is up to you, but at least it requires : - $contestType, $page, $post_per_per_page with 30 as default value
View Past Contests Pages
API resource : "http://api.topcoder.com/rest/contests?user_key=$user_key&listType=PAST&type=Assembly+Competition&sortOrder=asc"
- Right Now, there is no menu or link that will bring users to this page template. but we need to build this page
- URL should be /past-contests/$contestType and /past-contests/$contestType/page/$page for pagination where $page is an integer value.
- Create new PHP function/class to show Active Contests. and it returns (Array). example:get_past_contests()
parameters is up to you, but at least it requires : - $contestType, $page, $post_per_per_page with 30 as default value
[ShortCodes]
Please create shortcode that will data from APIs for the following features:
- Active Contests, example: [active_contests type='$contestType']. Contests will be displayed in a table layout, and please follow table style in http://www.topcoder.com/dtn/dtpc/. it is under Atomized Project Plan Section
- Past Contests, example: [past_contests type='$contestType']. Contests will be displayed in a table, and please follow table style in http://www.topcoder.com/dtn/dtpc/. it is under Atomized Project Plan Section. Navigation for pagination can be "Next >>" and "<< Previous" for now
- Handle Color and link, example : [h]pemula[/h] will displays handle with color and hyperlink to Member Profile Page
Shortcodes above will be inserted to any posts we want. ie : blog, pressroom,etc.
Member Profile Page
API : "http://api.topcoder.com/rest/statistics/$handle?user_key=$userkey"
- URL should be /member-profile/$handle
- This page will be reached from [h]$handle[/h] shortcode, There is no menu to this page for now
- Layout is up to you, but all basic information from API above should be displayed
Contests Search form widget
Design : [search contest widget.png]
This widget should be able to be displayed on some spots. so widget width should follow space where it is displayed
- Create new widget in order to display contests search form.
- The search result will be displayed on Contest Search Result Page
Contests Search Result Page
API resource : "http://api.topcoder.com/rest/contests?user_key=$user_key&listType=ALL&contestName=$keyword&sortOrder=asc"
- This page will search the contests from all contest type based on submitted keyword.
- All Matches Contests will be displayed in table layout. Please reuse table layout of http://www.topcoder.com/dtn/dtpc/. it is under Atomized Project Plan Section
Please Keep existing Post type
Please keep existing post type (include their layout of course) of topcoder.com theme, such as : event, blog, webinar, pressroom
Reference
http://codex.wordpress.org/Class_Reference/WP_Rewrite (Rewrite Rule)
http://wp.tutsplus.com/tutorials/7-simple-rules-wordpress-plugin-development-best-practices/
http://www.gregfreeman.org/2012/how-i-write-my-wordpress-plugins-with-classes/
Environment
- The site will be using http://wpengine.com/ . and it use Wordpress 3.6.1 , so please make sure your submission works properly on that version.
- PHP Info is here http://xkurnx.wpengine.com/
Final Submission Guidelines
1.2 Submission Deliverables
- A WordPress theme is a folder with new name mentioned above and containing all the images, css, javascript, and PHP files that describe the appearance and layout of a WordPress blog. The PHP files have a standard naming convention for page types, and contain and use template tags to call for specific information from the blog's database, such as a post title, the post date, it's categories, and more.
- You must include Deployment Guide
- Please make sure the existing menus, pages, blog URL work properly
- You must include any necessary plug-in files along with the necessary configuration settings.
- You must include your new exported XML file
1.3 Specific HTML/CSS/Javascript Requirements
- HTML code generated by your WordPress theme must be XHTML 1.0 Transitional compliant.
- 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, HTML, or PHP 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.
- Use proper indentation (tabbed or space based) for PHP files so that it may be easily editable.
1.4 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.
- The editor must function as expected by our content editors. When then set styles via the rich editor, it should preview and display correctly on the site. This includes inserting images into posts, formatting fonts, positioning text around images, etc.
- Do not hardcode URL paths. Everything should be relative.
- Do not hardcode settings/config in the template code. Please create a "Theme Options" panel for configuration settings.
- Use Widgets when appropriate. We'd like to avoid doing a copy/paste to include the same functionality in multiple templates/pages.
- RSS needs to work properly. For example, if the user is on the page listing all blog entries or news entries then they should be able to subscribe to the RSS for that page. Standard RSS feeds should work as described here: http://codex.wordpress.org/WordPress_Feeds
1.5 Browsers Requirements
- IE7+ for PC
- Latest Firefox for Mac and PC
- Latest Safari for Mac and PC
- Latest Chrome for Mac and PC
1.6 Timeline
Submission Phase Length (days): 5 days
Registration Phase Length (days): 2 days
1.7 Payment
TopCoder will compensate members with first and second place submissions.
Winning Submission Prize: $1000
Second Place Prize: $500
1.8 Final Submission
For each member, the final submission should be uploaded to the Online Review Tool.