Challenge Overview
Project Overview
Welcome to the VMS iPad App UI Prototype contest.
VMS acronym stands for Visitor Management System and the Proper name of the App is called Rändivoo. This iOS application will allow invited guests to simply check in/out using a QR Code. For those who were not invited or had lost their QR code the ability to sign/check-in. The backend that powers this application is Salesforce.com and SAM (which is Brivo Labs API). When the guest completes the check-in, the sponsor of the guest gets a notification via Chatter (Salesforce version of Instant Messenger) that their guest has arrived. The other cool thing is that the SAM API will allow the QR Code to act as a key to open an electrified door.
Competition Task Overview
For this contest, we want you to take the provided storyboards and convert it to a HTML5 & PhoneGap based prototype that works on iPad / iPad mini.
The prototype must work on Safari / Chrome on a iPad / iPad mini.
Key Requirements
- Create a new proroytpe based on the provided storyboards, make sure you check the supporting documents too.
- Test in all the required browsers.
- This prototype will eventually be wrapped as an iOS app, and PhoneGap will be used. Make sure your prototype works with / uses PhoneGap properly.
- Replicate the design of the approved Storyboards (PSD Files) for all screens.
- This app will work in landscape mode only.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
Detailed Requirements
Refer to the provided documents and storyboards for all screens to implement.
Specific HTML/CSS/JavaScript Requirements
- You MUST use HTML5 and CSS3 and make sure the code works on iPad / iPad mini
- 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 stylesheet.
- 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.
Browser Requirements
- Safari / Chrome on iPad and iPad mini
- iOS 5+
Documentation Provided
Register to see documents in contest forum.
Final Submission Guidelines
Submission Deliverables
- A complete HTML5 prototype that can run directly inside a safari / chrome browser on iPad / iPad mini.
- Deployment guide (if applicable).
Submission Guidelines
Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review Tool.