Challenge Overview
Project Overview:
Welcome to the Limitless Community HTML5 Prototype Challenge! The goal of this challenge is to create a Responsive HTML5 Prototype application using jQuery and Bootstrap development frameworks.
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 Bootstrap 3 (http://getbootstrap.com/getting-started). Please follow coding standards and write clean code.
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 a Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all required browsers - (use HTML5shiv to support IE9 version).
Required Pages:
Below are the required pages for this prototype, make sure all pages are fluid layout using Bootstrap styles.
1. Home Page:
- User opens the application and will see the main page (01 Home.png).
- When user clicks on “Register” button in header, or “Register Now!” button near the bottom he will be redirected to registration page.
- When user clicks on “Login” button in header he will be redirected to login page.
- In the main navigation, " HOME " is the active menu item, make sure this is implemented correctly.
2. Registration Page:
- When user clicks on “Register” button he will be redirected to this page (02_01 Register.png)
- Member type options are: Amputee, Carer, Parent, Health Professional, Group Leader and None.
- Classification options are: UpperAmputee, LowerAmputee, UpperLowerAmputee and None.
- Please make sure to do error validation for registration page (02_02 Register Error.png)
- When user clicks on “Register” button in this page and his data is all correct he will be redirected to chatter page.
- In the main navigation, " HOME " is the active menu item, make sure this is implemented correctly.
3. Login Page:
- When user clicks on “Login” button he will be redirected to this page (03 Login.png).
- When user clicks on “Login” button in this page he will be redirected to chatter page.
- In the main navigation, "HOME" is the active menu item, make sure this is implemented correctly.
4. Chatter Page:
- Once user login or register he will be redirected to chatter page (04_01 Chatter.png).
- Notice that “My Chatter” from left side menu should be active.
- For chatter use image placeholder as Salesforce have a functional chatter.
- For upcoming events show the “LIST” (04_01 Chatter.png) and “CALENDAR” views (04_02 Chatter_Calendar_View.png)
- Show the flyout for “Account” (04_03 Chatter_Popup_Account.png)
- In the main navigation, "CHATTER" is the active menu item, make sure this is implemented correctly.
5. Calendar Page:
- Once user clicks on “See All” button in chatter page under Upcoming Events he will be redirected to chatter page (05_01 Calendar_View_Day.png).
- For all Calendar views use image placeholder as salesforce have a functional calendar.
- In the main navigation, "EVENTS" is the active menu item, make sure this is implemented correctly.
6. Add New Event Page:
- Once user clicks on “New Event” button in Calendar views he will be redirected to Add New Event Page (06_01 Add Event.png).
- Add error validation for mandatory fields.
- Clicking “Save” or “Cancel” button will take you back to the previous Calendar view.
- In the main navigation, "EVENTS" is the active menu item, make sure this is implemented correctly.
7. Ideas Page:
- Once user clicks on “See All” button in chatter page under Great Ideas he will be redirected to chatter page (07_01 Ideas List.png).
- Notice the active state in the left side menu.
- Once a user clicks on an idea he will be redirected to idea details view (07_02 Ideas Details.png).
- In the main navigation, "IDEAS" is the active menu item, make sure this is implemented correctly.
8. Notice Board Page:
- Once user clicks on “See All” button in chatter page under Notice Board he will be redirected to chatter page (08 Notice Board.png).
- Notice the active state in the left side menu.
- In the main navigation, "NOTICE BOARD" is the active menu item, make sure this is implemented correctly.
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.
Font Requirements:
- Use font - OpenSans.
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
- Bootstrap 3
Browsers Requirements:
- IE 9+ Browsers on PC - (use HTML5shiv to support IE9 version)
- Latest Safari Browser on MAC and PC
- Latest Chrome Browser on MAC and PC
- Latest Firefox Browser on MAC and PC
Documentation Provided:
- Storyboard screens and PSD files: Storyboard.zip (can be found in challenge forums)
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