Challenge Overview
Project Overview
Trackster is a web-based application. It is a behavior tracking app marketed towards dentists who wish to improve their practice. Through a combination daily user inputs and data synchronization with office management software, the application lets small practice owners track and correlate desirable behaviors of their staff (hygienists, dentists, and front desk administrators) a.k.a. Key Behavioral Indicators (KBIs) with Key Performance Indicators (KPIs) that measure the success of their practice.
Competition Task Overview
The purpose of this contest is to convert the wireframes into a working HTML prototype that matches the styles in the provided storyboard.
We want to leverage HTML5/CSS3 but we still need to support some older browsers. Feel free to use the HTML5 Shiv fix for Internet Explorer.
Key Requirements
- Implement all pages in the wireframes to match the styles in the provided storyboard.
- 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.
- For the pages that needs charts, do NOT use mock images, use the Highcharts library.
- Use Scribe-java for facebook login
- Your HTML code must be HTML5 Compliant. Note that this doesn't imply use of any HTML 5 features. If any HTML 5 features are used they must either be supported by all of the browsers above or there must be an alternative way of achieving the same functionality.
- 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 tabular data 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".
- 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 are allowed to use the JQuery JavaScript library for this contest.
Detailed Requirements
You'll find good details on each page from the provided "frontend assembly specs" in contest forum.
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 are allowed to use the JQuery JavaScript library for this contest.
Browser Requirements
- IE7+
- Latest Firefox
- Safari 5+
- Latest Chrome
Final Submission Guidelines
Submission Deliverables
- The prorotype mentioned above and containing all the images, CSS, JavaScript, and HTML files.
- You must include a simple guide if this prorotype requires deployment.
Submission Guidelines
Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review.