Challenge Overview

Project Overview

The client is building an iOS hybrid app for their next generation device which makes sharing videos, photos and urls to devices really easy.

Competition Task Overview

The purpose of this contest is to create an HTML5 based prototype that will later be used to build the hybrid app using PhoneGap.

Key Requirements

  • You must ensure your code is compatible with PhoneGap so that we can easily integrate it with PhoneGap to build the hybrid app .
  • This will be an iPhone only app.
  • Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
  • Replicate the design of the approved Storyboards (PSD Files) for all screens.
  • Your pages must match the colors and structure of the provided storyboards.
  • Ensure you submission clear of HTML and CSS Validation error and warning.
  • We only need to support iPhones and we only need to support portrait mode.
  • Make sure both normal displays and retina displays are supported.

Detailed Requirements

Detailed specification has been provided in contest forum, please register to download it.

Note we have some missing screens in the storyboard but we'll provide them later. The winner will need to add these missing screens in final fixes.

Specific HTML/CSS/JavaScript Requirements

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

JavaScript Libraries/Plugins

This challenge must only use the following libraries:

  • AngularJS
  • Bootstrap

Browser Requirements

  • Safari / Chrome on iOS 6+ (iphone only)

Documentation Provided

Register to download documents provided in contest forum.



Final Submission Guidelines

Submission Deliverables

  • A complete HTML5 based prototype that's compatible with PhoneGap.
  • A deployment guide if necessary.

Submission Guidelines

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

ELIGIBLE EVENTS:

2014 TopCoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30040948