Key Information

Register
Submit
Status: ‌Cancelled failed review

Challenge Overview

Project Overview

Welcome to the Location Based Analytics (LBA) UI Prototype challenge! In this challenge, we are looking to convert the storyboard design into a working HTML5 prototype.

Application requirements and the design concept screens from the previous challenge have been provided to show the screen flows and how the new application will work.  

Competition Task Overview

The purpose of this challenge is to convert the design into a working prototype.

We want to leverage HTML5/CSS3 and Angular.js but we still need to support some older browsers. Feel free to use the HTML5 Shiv fix for Internet Explorer.

Key Requirements

  • Create a prorotype based on the provided design.
  • Data must not be hardcoded in the pages or controllers, instead they should all come from json files.
  • The prototype (all pages) must be responsive enough to working on screens from iPad to computer screens.
  • Test in all the required browsers.
  • Replicate the design of the approved Storyboards (PSD Files) for all pages.
  • Your pages must match the colors and structure of the provided storyboards.
  • 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.

Specific HTML/CSS/JavaScript Requirements

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

JavaScript Libraries/Plugins

All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.

  • You must use Angular.js for this challenge.
  • If you need to use other libraries, get approval from us first.

Browser Requirements

  • IE9+
  • FF Latest (PC & Mac)
  • Safari Latest  (PC & Mac)
  • Chrome Latest  (PC & Mac)
  • Safari on iPad
  • Chrome on Android Tablets
  • Chrome on iPad


Final Submission Guidelines

Submission Deliverables

  • A complete UI Prototype containing all HTML / Javascript / CSS / Image files.

Submission Guidelines

Submit an archive file contains all HTML/CSS/JS/images and other required files via the challenge detail page on topcoder.com.

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30050158