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. But please note this challenge will focus on responsive layout and creating an extensible framework so that we can add the widgets to show the charts and indoor map in next challenges. More details below:
- All screens hsould be implemented and all menus should work as shown in the storbyard
- The prototype must be responsive and have no layout issues
- The prototype should be extensible so we can easily add the "wdigets" for the graphs and indoor map
- The image slider should work, see:
- The graphs and indoor map can be static images for this challenge, see:
- 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.