Organization Chart HTML5 Prototype Challenge

Project Overview:

Welcome to the Organization Chart HTML5 Prototype Challenge! The goal of this challenge is to create a organization chart HTML5 Prototype application for iPad based on provided storyboard using jQuery and Google Visualization API. This is a single page submission for this challenge.

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.

NOTE: This application will use OneStarter jQuery Plugin (https://github.com/joshbirk/onestarter) for making Salesforce1 styles (refer Salesforce1 style guide - http://sfdc-styleguide.herokuapp.com), but these are optional for this challenge. Please refer sample Salesforce1 test page with code and recorded video on Salesforce1 app functionality.

IMPORTART: As per the project schedules and FAST challenge the review timelines are very close. Reviewers please note the review timelines for further reference.

Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.

Competition Task Overview:

The main task of this competition is to develop organization chart HTML5 prototype based on the provided storyboard designs. The main content area will be developed which are in scope for this challenge, but the header section is out of scope from this prototype. The actual headers will be rendered from the Salesforce1 app. The pages created on HTML5 will be rendered as iframes within Salesforce1 app as described in the Salesforce1 style guide.

Required Pages:

Below are the required pages in iPad for both Portrait and Landscape orientations.

1. Account Card:

• User opens the application and will see the account card page (01b-1_Account Card View_L).
• The header (blue strip and dark blue strip) implementation is not required, but the main content area will be rendered in iframe - (so create static HTML5 page and load on iframe).
• Show the managers in a tree like structure - (use Google Visualization API for tree/org chart).
• Maximum 2 level of tree nodes are fine for now as shown on storyboard design.
• Left nav menu is out of scope.

2. Contact List:

• Populate contact list with static data as shown on screen (01b-1_Account Card View_L).
• Make contact list scrollable - use device default scrollbar.
• Allow user to drag and drop manager from the contact list on right panel - (just trigger the event only).
• Allow user to hold (show delete icon) and delete manager from the tree node.

Specific HTML/CSS/JavaScript Requirements:

• HTML/CSS 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.
• Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
• Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
• 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.

Font Requirements:

Use font - Arial.

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:

• jQuery
• Google Visualization API
• OneStarter jQuery Plugin (optional for this challenge)

Browsers Requirements:

• Latest Safari Browser on iPad

Documentation Provided:

Storyboard screens and PSD files: Storyboard.zip

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.