Challenge Overview
Task of this challenge is to create a HTML 5 Prototype for the Project Intake form that allows SDFC (Salesforce.com) employees to request [topcoder] challenges by filling out thie form and capturing their project requirements.
NOTE:
- This application is using Bootstrap 3 (http://getbootstrap.com/getting-started). Please follow coding standards.
- This form which you are converting to HTML5/CSS3/Javascript will later be integrated with the Salesforce Web-to-case feature (https://help.salesforce.com/HTViewHelpDoc?id=setting_up_web_to_case.htm&language=en_US)
Challenge Downloads:
http://apps.topcoder.com/forums/?module=Thread&threadID=816257&start=0
IMPORTANT!! Prototype Considerations:
- Test in all the required browsers given below.
- Your code or HTML 5 layout should be responsive and make sure the form is shown perfectly in desktop and mobile devices.
- Please use CSS3 to style the elements etc..
- Make sure the page rendered properly different screen resolutions (Mobile and Desktop).
- The content area need to be fluid and need to adjust itself on viewing across devices. Let the left side label stay as it is and just adjust the fields in the right but make sure it doesn't show great variation in the design.
- Follow the button hover styles like the new topcoder.com
- You can use a web-safe similar font or plan to use the font used in the PSD from Google Fonts.
Required Form and Interaction:
General Prototype Requirements:
- Wherever you find a question mark icon after the field, please make sure to include it and on mouse hover a pop-up (tool-tip) needs to be shown like 06_Tooltips.png
- Follow the contents/fields from the given storyboard.
Form Fields and Required Links:
Follow the fields and other required inetractions from the given storyboard..
Go to [topcoder] Direct - Follow the placement of this text as shown in the top and "[topcoder] Direct" will be a link and take the user to http://www.topcoder.com/direct
Haven't Registered yet? CLICK HERE - This is shown about the "Topcoder Username" text field and "Click Here" will be a link and take the user to http://www.topcoder.com/
TopCoder Username - This is a text field and user just enters the topcoder username here
Name - This is a text field to enter the person's name - we need first name and last name as shown in storyboard.
Phone - This is a text field for capturing the phone number - follow the storyboards and should allow only numbers with 9 digits.
Project Type:
- A user will choose either Development or design.
- By default both the icon will be in grey color, when an option is chosen, it will change it's color as to blue (Design) and purple (Development) as shown in 03_1_Design_Selected.png and 03_2_Development_Selected.png.
Challenge Name - This is text field for entering the name of the challenge/project
Challenge Description - This will be a text area to allow the user to enter details about the challenge/project
Date Needed by - This will allow user to enter the date (MM / DD / YYYY)
Prospect Name - This is text field for entering the exact customer name who will be benefitted by this chellenge/project.
Technologies Required - This is a text field for entering the technologies
Email - This is text field for entering their email address, think on what are the validations that need to be added here.
Budget - Implement the slider, user will move the slider to set the maximum limit for the project. Use can choose a maximum of "200K".
Additional Notes - This will be a text area where any Additional notes about the request can be entered. Use a similar text-area like "challenge Description" to allow them to drag the text-area vertically.
Attachments
- This is a field where a user can attach documents supporting requirements.
- Simulate by allowing user to attach files and follow the styles shown for attached files
- We also need option to remove the file.
Submit/Cancel buttons
- We would like you to show these actions for these buttons
- Onclick in "Submit" - validate the fields and if any error were found then show 02_Main_Form_with_error.png
- If no validation errors were found, then show success screen (04_success.png)
Specific HTML/CSS/JavaScript 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.
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.
- You are allowed to use the JQuery JavaScript library for this contest. Document your JavaScript!
Browsers and Standards:
Your submission must works on browser in the list below:
- IE10+
- Latest Safari Mac
- Latest Chrome Mac and PC
- Latest Firefox Mac and PC
Final Submission Guidelines
Submission Deliverables
- A complete prototype with all required pages implemented.
Submission Guidelines
- Submit an archive file containing all HTML 5/CSS 3/JS/images and other required files into Online Review.