Challenge Overview

Project Overview:

Welcome to the FAST!! 72Hrs - TopCoder Development Challenge Pages Responsive HTML5 UI Prototype! The goal of this challenge is to create a Responsive HTML5 UI Prototype application based on provided storyboard designs and existing baseline prototype application. This challenge would produce clickable UI Prototype (HTML) and will be built as wordpress template on next challenges.

As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear documentation (or a note on text file) on your code changes for all the Images/HTML5/CSS3/JS codes and which will make it easier for future developements.

IMPORTART: As per the project schedules and FAST challenge the review timelines are very close. Reviewers please note the review timelines for further reference.

Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.

Competition Task Overview:

The main tasks of this competition is to develop a Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers listed in Browsers Requirements section.

General Rules:

  • Storyboard and baseline UI Prototype is attached for this challenge.
  • 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 mobiles 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.
  • 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. (References: http://www.cloudspokes.com/, http://bradfrostweb.com/demo/mobile-first/ and http://www.studiopress.com/responsive/ and also 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 software development challenges and challenge details pages.

Required Pages:

Below are the required pages for this prototype challenge.

1. Challenges List View:

  • Show 'Open Challenges' and 'Past Challenges' in tabular form as per list view screen "01A ~ Challenges (Software)".
  • Use challenge type icons and technology tags.
  • Follow same responsive web design on current site for different screen sizes and also mobile devices.
  • Apply the new styles/colors as per the storyboard designs.
  • The main changes are listed below:
    • Remove type column.
    • Replace TCO label/icon with challenges types.
    • Add tech tags.

2. Challenge Grid View:

  • Show 'Open Challenges' and 'Past Challenges' in grid form as per grid view screen "02A ~ Challenges (Software)".
  • Use challenge type icons and technology tags.
  • Show eligibility tooltip as per screen design "02B ~ Challenges (Software)" and "02C ~ Challenges (Software)".
  • Show challenge type tooltip as per screen design "02D ~ Challenges (Software)".
  • Implement responsiveness for mobile devices like to adjust three grid columns into single column - (currently we don't have design for this).
  • Follow same responsive web design on current site for different screen sizes and also mobile devices.
  • Apply the new styles/colors as per the storyboard designs.
  • The main changes are listed below:
    • Remove type column.
    • Replace TCO label/icon with challenges types.
    • Add tech tags.
    • Add eligibility icon & tooltip.

3. Advanced Search:

  • Once user click on "Advanced Search" link, open the advanced search panel and move the content (list view/grid view items) down.
  • Show "Challenge Types", "Start Date", "End Date" and "Technology Tags" on advanced search panel "03A ~  Advanced Search".
  • Show filtered list when user types key on dropdown as per screens "03B ~  Advanced Search" and "03C ~  Advanced Search".
  • Show multi-select field for technology tags.
    • Use Multiple Select jQuery plugin.
    • Make sure to skin the Multiple Select plugin as shown in the storyboards or at least something similar to our branding.
  • Show responsiveness for mobile devices like to adjust three columns into single column - (currently we don't have design for this).

4. Challenge Details:

  • Show user the challenge details page as per screen design "04A ~ Challenge Details (Software) (Desktop)".
  • Show responsiveness for mobile devices like screen "04B1 ~ Challenge Details (Software) (Mobile)".
  • Follow same responsive web design on current site challenge details.
  • Apply the new styles/colors as per the storyboard designs.
  • The main changes are listed below:
    • Add "Events" info on the right side bar.
    • Add tech tags on the challenge description.

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 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 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.

Font Requirements:

Use same font as per current site.

JavaScript Requirements:

JavaScript libraries are already used in the current site which can be used in this challenge too.

Browsers Requirements:

  • IE 7+ Browsers on PC
  • Firefox 7+ Browsers
  • Safari 5+ Browsers
  • Latest Chrome Browser
  • Latest Chrome / Safari on Tablets and Mobiles

Documentation Provided:

Storyboard Screens and PSD files: Storyboard.zip
Existing Baseline Prototype: Prototype.zip



Final Submission Guidelines

Submission Deliverables:

Final Submission:

ELIGIBLE EVENTS:

2014 TopCoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30041424