Challenge Overview
Project Overview:
Welcome to the FAST!! 72Hrs - DataGuard AngularJS Responsive HTML5 Prototype Challenge Part1! The goal of this challenge is to create a Responsive HTML5 Prototype application based on provided wireframe and approved Theme design using AngularJS & Bootstrap. We will be running series of challenges in which this is our first challenge, so we would expect your active participation to get familiar with this project and theme.
Info: 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.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
IMPORTART: As per the project schedules the review timelines are very close, please note the post submission timelines for further reference.
Competition Task Overview:
The main task of this competition is to develop Responsive HTML5 Prototype for provided Dashboard pages using approved Theme design. Your prototype must work properly in all the required browsers listed below.
Please ask questions in forum for any clarifications needed on Wireframe and Theme design.
Required Pages:
Below are the required pages in both Portrait and Landscape orientations.
0. Overall Design:
- -Refer provided Theme design prototype code inside "dist" folder (from attached "Theme.zip").
- -You can upload the "dist" folder to your server to run it or you can build a server locally using WAMP or MAMP or Web Server. (you may use codekit on MAC)
- -Refer color scheme image file (Color-Scheme.png) for all color schemes.
- -You may use LESS (http://lesscss.org) or SCSS (SASS - http://sass-lang.com) frameworks for styles.
- -You need to add custom css files and custom JavaScript files along with existing folder/file structures.
- -Use Bootstrap styles if any feature design is not available on provided Theme design.
- -This theme supports mobile layouts - you need to make sure it works for all pages.
- -Use JSON object data binding using AngularJS framework.
- -We will be using API calls to get JSON objects, you could refer generated JSON data from attached "DataModel.zip" (containing dataguard.json, dataguard.yaml files) and instrucctions file for rendering JSON data on online Swagger editor.
- -You may refer URL deep linking structures as similar to Swagger framework (Example: http://petstore.swagger.wordnik.com/#!/store).
1. Login View:
- -User opens the application and will see the login view (00-Login.png).
- -Refer existing page on Theme design (dist/index.html#/pages/signin).
- -On sucessful login user will be navigated to Dashboard view.
2. Dashboard View:
- -After successful login user will be navigated to dashboard page (01-Dashboard-View.png).
- -Show activity chart sample as shown on right panel.
- -Keep any other hyerlinks and buttons as dead links for now.
- -Ability to search from top menu search box and display results as shown on screen (02-Search-View.png).
- -Once user selects any item from the search results, navigate user to corresponding view page.
3. Enterprise Groups View:
- -Once user selects title from 'Entrprise Groups' (search results popup), show user the enterprize group details as shown on screen (03-Enterprise-View.png).
- -On selecting 'Alerts' sub-tab, show user the alerts details as per screen (04-Enterprise-View-Alerts.png).
4. Locations View:
- -Once user selects item from 'Locations' (search results popup), show user the location details as shown on screen (05-Locations-View.png).
- -On selecting 'Alerts' sub-tab, show user the alerts details as per screen (04-Enterprise-View-Alerts.png as reference screen).
- -On selecting 'Map' sub-tab, show user the map details as per screen (06-Locations-View-Map.png).
- -Refer existing page on Theme design for maps (dist/index.html#/ui/maps).
- -On selecting any row from 'Terminals' & 'Endpoint Services' table, show user the corresponding views (Terminals view or Endpoint Services view).
5. Endpoint Services View:
- -Once user selects item from 'Endpoint Services' (search results popup), show user the endpoint service details as shown on screen (07-Endpoint-Service-View.png).
- -On selecting 'Alerts' tab, show user the alerts details as per screen (04-Enterprise-View-Alerts.png as reference screen).
- -On selecting any row from 'Terminals using Endpoint Service' table, show user the Terminals view.
6. Terminals View:
- -Once user selects item from 'Terminals' (search results popup), show user the terminal details as shown on screen (08-Terminal-View.png).
- -On selecting 'Alerts' tab, show user the alerts details as per screen (04-Enterprise-View-Alerts.png as reference screen).
- -On selecting any row from 'Peripherals' & 'Endpoint Services' table, show user the corresponding views (Peripherals view or Endpoint Services view).
7. Peripherals View:
- -Once user selects item from 'Peripherals' (search results popup), show user the perpheral details as shown on screen (09-Peripheral-View.png).
- -On selecting 'Alerts' tab, show user the alerts details as per screen (04-Enterprise-View-Alerts.png as reference screen).
- -On selecting any row from 'Endpoints' table, show user the Endpoints view.
8. Endpoints View:
- -Once user selects item from 'Endpoints' (search results popup), show user the endpoint details as shown on screen (10-Endpoint-View.png).
- -Keep any other hyerlinks and buttons as dead links for now.
Specific HTML/CSS/JavaScript Requirements:
- -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.
Font Requirements:
Follow provided Theme design fonts.
JavaScript Requirements:
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:
Browsers Requirements:
- IE 10+ Browsers
- Latest Chrome Browsers
- Latest Firefox Browsers
- Latest Safari Browsers
- Mobile Browsers (Android, iPhone)
Documentation Provided:
Please register to see attached documents.
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.