Watson Ecosystem HTML Prototype

Background:
The Watson Ecosystem is at the forefront of cognitive computing, allowing businesses to embed transformative question/answering capabilities within their applications. The Watson Ecosystem is growing fast and as the number of partners and the variety of domains grows, the Ecosystem needs scalable ways to manage these partners. One of the ways the Ecosystem plans on managing the partners it works with is through a Dashboard that allows the user to aggregate information about Ecosystem partners in a customizable way.

Objective:
The purpose of this competition is to provide a responsive HTML5 Prototype application for the Ecosystem Dashboard based on provided Wireframes and Display Design.

In particular, the Ecosystem envisions the default view to be a Visualization, such as a heat map, where each UI element in the Visualization represents a different partner and a visual cue to distinguish between different partners is based on a customizable statistic/metric. The application should provide filters that change the perspective of the Visualization and provide a mechanism to customize the view for a given user (i.e. user profile or save function). Other than that, the target audience for this application will be Watson Ecosystem engineers and managers looking to make decisions based on aggregate trends. To that effect, the UI/UX should be simple, intuitive but should also provide powerful functionality for uncovering trends.

More details about the required application can be found in the provided Conceptualization Questionnaire and in the click thru Wireframes (they have a Wireframe Notes section in the right side with detailed explanations for the application).

Requirements:

The UI Design should be converted into HTML. The Prototype will be deveoped using HTML + JQuery + Angular.

The Prototype should follow the structure provided in the Architecture documentation. The Angular controllers should be provided. The services should also be provided, with the mention that the GET / POST AJAX calls should be replaced with mock JSON data. There is no need for this Prototype to have any interaction with a server.

Required Screens:

All screens from the Display Design are required, along with the updated screens provided in the forums.

Specific HTML/CSS/JavaScript Requirements:

As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JavaScript code functions and make it easier for future developers and the client to understand what you have built.

• Your HTML code must be valid HTML5 and follow best practices
• 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 style-sheet.
• 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.
• All navigation links between pages should work properly
• All action links/buttons that are supposed to trigger a server call for some information should make use of a distinct function, which, for the scope of this competition, will provide mock data. This will properly isolate the functionality that should be replaced in the following Assembly competitions and will better structure the code.
• Group the JavaScript functionality, so that the code that handles the some concept (Projects, Partners) is grouped in one place.
• CSS and JavaScript that is not generated by a tool, so that it can be easily maintained and modified in the following Assembly competitions.

JavaScript Technologies:

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. We would like to use following JavaScript libraries:

• jQuery 1.11.1
• AngularJS 1.2.26
• RainbowVis-JS
• fast-csv 0.5.4
• angular-treemap
• angularjs-nvd3-directives

The server will be implemented in NodeJS, in case this aspect is relevant. Here are the technologies for the server:

• Node.js 0.10.29
• Express 4.9.7
• MongoDB 2.6
• Mongoose.js 3.8.12
• winston 0.7.3
• superagent 0.18.1 
• async 0.9.0
• underscore 1.6.0
• forever 0.11.1 
• passport 0.2.1
• passport-ldapauth 0.2.2

Browsers Requirements:

• Google Chrome 27+
• Latest Firefox Browser
• Internet Explorer 9+

Final Submission Guidelines

Submission Deliverables:

• A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.

Final Submission:

• For each member, the final submission should be uploaded to the Online Review Tool.