Challenge Overview
Project Overview
Appirio is building a hybrid mobile app for Calix which will help it’s customers quickly and easily access their Service Station CRM portal. The goal of the app is to enable customers to open/review/edit technical support case, software request, and hardware return (RMA) requests. The app will built as a hybrid app with native features. A barcode scan capability will be integrated into the app to allow users to scan hardware product id and serial numbers to populate those fields in RMA cases. The other native feature will allow users to capture and upload image files to open cases. Calix would like our help in assisting their users with closing cases faster in their system. Analytics will provide the metrics needed to gauge the success of the app.
In a previous challenge we already built the prototype for v1.0, but now we're updating v2.0 and need to update the prototype based on the provided design and style gide.
The v1.0 prototype was used in a mobile app built as hybrid application for iOS and Android on Cordova (PhoneGap), HTML5, AngularJS and Salesforce Mobile SDK. This prototype update needs to use the same frontend technologies and still be compatible with PhoneGap.
The update will be based on the existing prototype.
Competition Task Overview
The purpose of this contest is to create an HTML5 based prototype that will later be used to build the hybrid app using frameworks like PhoneGap.
Key Requirements
- You must ensure your code is compatible with PhoneGap so that we can easily integrate it with PhoneGap to build the hybrid app .
- This will be an phone only app (iOS and Android phones).
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Replicate the design of the approved Storyboards (PSD Files) for all screens.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure you submission clear of HTML and CSS Validation error and warning.
- We may need to update some of the error/success messages, this will be provided and addressed in final fixes or during the contest
Detailed Requirements
- Create all screens HTML/CSS resource assets based on new designs
- Leverage existing HTML5/CSS and build new classes where needed
- Complete fully functional UI prototype matching the designs and fit with current application
- The Prototype should be responsive for mobile form-factors of iOS and Android devices in Cordova (PhoneGap) WebView
- The HTML5 design and layouts should be compatible to work with AngularJS
Specific HTML/CSS/JavaScript Requirements
- You MUST use HTML5 and CSS3
- 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.
JavaScript Libraries/Plugins
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. If you need to use any 3rd party libraries please double check in contest forum (it must work with PhoneGap and be approved).
Browser Requirements
- Safari on iOS
- Chrome on both iOS/Android
Documentation Provided
Register to download documents from challenge page.
Final Submission Guidelines
Submission Deliverables
- A complete UI HTML5/CSS, resources that implement the design requirements.
- A complete and detailed document listing all dependencies or external frameworks used for CSS and JavaScript.
Submission Guidelines
Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review Tool.