Challenge Overview
Competition Task Overview
In previous challenges we've build a prototype for SRT which heavily uses jQuery and is not HTML5. For the following series of challenges we'd like to convert this prototype to be fully HTML5 using AngularJS as the main framework.
Key Requirements
- Convert the existing prototype to be HTML5 using AngularJS
- AngularJS best practices should be followed, for example: consider using AngularJS routing feature.
- Look & feel should remain the same for all elements on all pages
- Maintain the same hover state for all buttons and links
- Test in all the required browsers (only Firefox and Chrome need to be supported)
- 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
- We'd like to have the code modularized so it's easier to maintain the code
- Follow the structure / coding standards of the provided prototype
- If possible have each tab in its own file so we can easily merge other tabs into a single prototype later.
Detailed Requirements
In previous challenges we have converted all 3 paths and also the Core, File / NAS and Mainframe tabs in the Service / Activities step.
For this challenge we need to convert the following 3 tabs:
- CS Services
- W4N
- Source One
Note you will have to use the cloud app or local app (details in forum) as reference and build pages with exactly the same fields and behavior in this HTML5 prototype. And they will need to be done in create / copy / edit / review pages.
Extra Requirements
The following should be working properly and reviewers should check these in review:
- Tab order and field focus
- Existing data Selection - When tabbing to a field any existing value should be highlighted
- Ensuring that field that are tabbed to can be controlled with the keyboard i.e. check boxes, radio buttons, calendar controls, drop downs, etc.
Specific HTML/CSS/JavaScript Requirements
- You MUST use HTML5 and CSS3 and AnguarJS
- 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.
- 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.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Libraries/Plugins
- AnguarJS must be used as the main framework
- jQuery & jQuery UI (do NOT use jqTransform)
Browser Requirements
- Chrome
- Firefox
Documentation Provided
- Existing UI Prototype
- Cloud app / local app
Final Submission Guidelines
Submission Deliverables
- A working prototype with the listed requirements covered
Submission Guidelines
Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review.