Challenge Overview
Competition Task Overview
LightSpeed is an Excel based VBA application and in this project we are converting this application to a web based app to make it much easier to use. The web app will be an HTML5 app with offlice capabilities.
In the previous challenge, we built a basic HTML5 prototype to include some minimal features for the 1st version of the app.
In this challenge, we are basically re-skining it based on the provided storyboard. It still uses the same technologies and same data. Please ask questions in the forum if you don't understand any of these.
We want to leverage HTML5/CSS3 and usage of angular.js is a requirement.
Key Requirements
- You must follow the provided storyboard to build the prototype. Functionality is similar to the previous prototype but styling / layout is totally new.
- The screens in root folder and the variation\Variation 2 folder are in scope.
- Please create a prototype with good quality HTML and JS code (angular.js) showing the correct workflow.
- Test in all the required browsers.
- 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.
Detailed Requirements
Login
The login page will have the same fields as the current one in the prototype but we'll provide a new design for it very soon.
Settings
The first time after user login, show the settings page and require the user to enter data before they can navigate to Project View and WBS View.
Home
Once settings are entered, user will be redirected to 01.jpg as shown in the design.
Project View
Follow the design, note we should apply the variation design to both the tile view and table view.
WBS View
Follow the design, note we should apply the variation design to both the tile view and table view.
Other
We are currently missing a couple elements from the design and we'll provide details during the challenge or before final fixes.
Specific HTML/CSS/JavaScript Requirements
- You MUST use HTML5 and CSS3 and Angular.js
- You must not use hardcoded data, all data should come from json files or saved to json files.
- 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 in this challenge
- Any other libraries must be approved by us
Browser Requirements
- IE10 +
- Firefox latest
- Safari latest
- Chrome latest
Final Submission Guidelines
Submission Deliverables
- Complete prototype with all HTML / CSS / Javascript 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.