Challenge Overview
Project Overview:
Welcome to the OpenWARP HTML5 UI Prototype Challenge! The goal of this challenge is to create a an HTML5 Prototype based on provided storyboards for OpenWARP Application using Angular JS and Bootstrap 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/JS code functions and make it easier for future developers and the client to understand what you have built.
NOTE: This application will be using AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide) and Bootstrap 3 (http://getbootstrap.com/getting-started). Please follow coding standards and write clean code for AngularJS data binding instead of using plain HTML 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 HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Required Pages:
1) Landing page:
- User opens the application and will see landing page (01_landing_page.png).
- Clicking on "MESHING" icon will redirect you to Meshing page (02_1_Meshing.png)
- Clicking on “SIMULATION” icon will redirect you to Simulation page (03_1_Simulation.png)
- Clicking on "POST PROCESSING" icon will view redirect you to Post processing page (04_1_Postprocessing.png)
- “Learn More” should be a dead link.
2) Meshing page:
- Notice the active state of the meshing icon on the left side.
- When you click browse button you should be able to input a file from your machine.
- To have a better understanding of the input fields for this page open (MeshGeneratorSpecifications.pdf)
- Maxh and Minh are numbers.
- Fitness and grading takes any number between 0 and 1, i.e. 0.4
- If Usetolerance is 0 then deactivate Tolerance filed below it.
- Tolerance is a percent so it can take any number from 0 to 100.
- Clicking on ? icon at the top will open the help widget (02_2_Meshing.png)
- Clicking on the two buttons at the bottom have no action.
3) Simulation page:
- Notice the active state of the Simulation icon on the left side.
- All units inside the fields should disappear when the user is in focus of that field.
- When you click on (+) icon you should be able to add another body, you can add up to 5 bodies so the total number of bodies at the end is 10.
- All the fields in this page takes numbers, to have a better understanding of the numbers open (NemohUserInputSpecifications.pdf)
- Clicking on ? icon at the top will open the help widget (03_2_Simulation.png)
- Clicking on the two buttons at the bottom have no action.
4) Post processing page:
- Notice the active state of the Post processing icon on the left side.
- All the fields in this page takes numbers, to have a better understanding of the numbers open (NemohUserInputSpecifications.pdf)
- Clicking on ? icon at the top will open the help widget (04_2_Postprocessing.png, 04_3_Postprocessing.png)
- Clicking on the two buttons at the bottom have no action.
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 layout 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 - Arial.
JavaScript Requirements:
- jQuery
- AngularJS
- 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 can be found in 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.