Challenge Overview
Project Overview:
Welcome to HCB Connected Building Dashboard UI Prototype. The goal of this challenge is to create a quick HTML5 Prototype based on provided storyboards for HCB's "Dashboard" Responsive App using Bootstrap framework.
Note: Asking questions early and getting copilot or PM's feedback is very important for the success of this challenge.
The main tasks of this competition is to develop Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in Chrome desktop browser and iPad Safari.
PROTOTYPE GOALS:
- The design should work with fluid/flexible nature.
- We need clean documentation of the code. As possible please create detailed comments for the different HTML5, CSS3 and JavaScript code.
- Use CSS3 Media Queries to load different styles for each page. Don't build different page for different device/layout.
- Please note, we are expecting the HTML5 prototype to work on mobile
- Remember, all pages should link where possible. Please help us show correct page flow.
- Please use Bootstrap 3 for mobile app development.
Required Pages:
1. Application Dashboard
- Please read/see 00_notes.png = primary goals/screens of this FAST challenge
- User opens the application and will show the landing page 02_command_center_desktop_ipad_landscape.png
- Make sure to include the portrait view items at the bottom left corner, you can reference 01_command_center_ipad_portrait.png for the content.
- We would like to see loading animation for Natural Gas, Electricity and CO2 Footprint. (Create your own loading indicators, but it should be consistent with the rest of the page look and feel) - (this is the cool feature on the page)
- Clicking "Today, Week, Month, Period, Year etc" should update/change the information and bars (can be dummy)
- Click the 'Notifications' icon would reveal the Notifications Pane flyout 04_5_notification_panel.png. (right column)
- We would like to see the left navigation Implemented by going to dummy pages
- The dashboard is the primay goal but we would also like to see the Alerts page 04_1_alerts.png
TECHNOLOGY GUIDELINES:
1. HTML5
- Provide comments on the page elements to give clear explanation of code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts
- Make sure all HTML files pass Validation without Error/Warning.
2. CSS3
- Provide comments on the CSS code, we need CSS comments to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so future developers can follow the code.
- All CSS naming should not have any conflicts
- Make sure all CSS files pass validation without Error/Warning.
3. JAVASCRIPT
- Provide comments on the JavaScript code, JS codes to give clear explanation of the code usage. The goal is to help future developers understand the code and know what needs to be developer further.
- Please use clean INDENTATION for all JavaScript code so future developers can follow the code.
- Please use Bootstrap 3 for mobile app development.
4. IMAGES
- For mobile development, images should be properly compressed while still having good visual quality.
- As possible using background color properties, instead of repetition usage of background based image.
- Use sprites technique for the image slicing. Page reference
As part of this contest we still need you to document your HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all HTML5/CSS3/JS codes function and make it easier for future developers. The important thing is implementing what we need in the provided timeline - documentation can be left to final fixes.
Browsers Requirements
- Chrome Browser
- Safari on iPad
Documentation Provided
Storyboard and PSD Files: HCB Storyboard.zip
Final Submission Guidelines
Specific HTML/CSS/JavaScript Requirements
- HTML/CSS Requirements:
- Your HTML code must be valid HTML 5 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.
Javascript Requirements:
We would like to use following JavaScript libraries: (or suggest any that you prefer)
- jQuery
- Bootstrap 3