FAST!! 48Hrs - Mediafly Sales Kit Responsive HTML5 Prototype Challenge Part 2

Project Overview:

Welcome to the FAST!! 48Hrs - Mediafly Sales Kit Responsive HTML5 Prototype Challenge Part 2! The goal of this challenge is to update existing Responsive HTML5 Prototype application with additional pages for iPad and iPhone based on provided wireframe using Bootstrap.

Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge. 

IMPORTART: As per the project schedules the review timelines are very close, please note the post submission timelines for further reference.

Competition Task Overview:

The main task of this competition is to update existing Responsive HTML5 prototype with additional pages. We don't have storyboard designs for this challenge, so it is not necessary to match the pixels (you could refer color styles from wireframe), but you need to follow existing prototype structures. Your prototype must work properly in all the required browsers.

Required Pages:

Below are the required pages in both Portrait and Landscape orientations. Refer new pages on wireframe (pages 5 - 8) and requirement template (pages 17 25).

1. Current Network Page:

• -This is the 5th page on New Presentation pagination.
• -Use image placeholder at top.
• -Follow wireframe to show checkboxes on this page.

2. Components Page (Scorecard input):

• -This is the 6th page on New Presentation pagination.
• -When click on a color then show an outer circle so user know its selected.
• -Clicking a circle would set that circle to the selected color (clicking again would set back to empty).
• -Refer updated matrix (page #19) from Requirement Template file for latest updates on this page.

3. Summary & Guidance Page:

• -This is the 7th page on New Presentation pagination.
• -Show Presentation name at top of the page.
• -Follow the wireframes to show summary of enter data.
• -Screen 8 on wireframe is continues from screen 7 - it is a single page.
• -Show 'email' and 'back' buttons at footer section of this page.

4. Presentation Viewer:

• -Follow requirement template for these features (page #24, #25) and update new pages as well existing pages.
• -Show below Sections of the Presentation at top of each page and user can swipe to view other Sections.
  • -Customer Info
  • -Cloud Strategy
  • -Top Issues
  • -Spend Types
  • -Current Network
  • -Components
  • -Summary
• -User can click and navigate to each Section - highlight the Section currently on.
• -Swipe left/right to go forward/backward in the Presentation.

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.

Font Requirements:

Use font - Arial.

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. We would like to use following JavaScript libraries:

• jQuery
• Bootstrap 3

Browsers Requirements:

• Safari Browsers on iPad and iPhone

Documentation Provided:

Please register to see attached documents.

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.