Appirio Sales Kit Mediafly Interactives App Conversion Part 3

Project Overview:

Welcome to the Appirio Sales Kit Mediafly Interactives App Conversion Part 3 challenge! This Sales Kit Application will be used by Appirio sales teams, partners and customers. They will have immediate and secure access to all the latest sales and marketing materials.

Competition Task Overview:

The main task of this competition is to update the existing Mediafly Interactive (which is really just a static web site - HTML, CSS, JS and Images - compressed in a .zip file) using Mediafly API calls and also to make Responsive application.

Please refer development instructions here http://devdocs.mediafly.com/interactives/ and follow existing Mediafly application produced in previous challenges. We want to help Mediafly build more of interactions - so please let us know your thoughts and any issues you find while exploring this code.

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

1. Prototype Convertion:

• Refer existing Mediafly application produced in the previous challenges - (lets discuss in forum if you are facing any issues).
• We would like to update existing application with following features using Mediafly Interactives - (refer HTML code from Prototype.zip and design Screens.zip)
  • 06 Folder View_New item
  • 09 What's New Page

2. Responsive App - Style Corrections:

• Refer attached Screenshots.zip file for style issues.
• We would like to update existing application with following style issues resolved.
  • Folder view: auto resize the items box height in case of no description (Appirio Theme - Folder View.png) or small description - make sure left & right items box height should be equal for any row.
  • Folder view: items alignment issues and broken layout issues (Folder View - alignment (portrait).png).
  • Folder view: remove empty blocks for no featured video (Folder View - No featured Item.png).
  • Folder view: right side panel is overlapping (Folder View - right side is overlapping (portrait).png).
  • Left side bar with large folder name (Left Sidebar - sizing.png).
  • Missing featured video from the layout (Missing featured Item.png).
  • Welcome view: folder thumbnails should centered vertically (Welcome View - alignment (landscape).png, Welcome View - alignment (portrait).png).
  • Collection view: the description text is not truncated for long texts, you need to truncate all possible long texts on the page.

3. General Instructions:

• You need to create package for the interactives and also deploy into Mediafly Airship as per the building interactives development documentation (http://devdocs.mediafly.com/interactives).
• Your application must work properly in below required browsers as like current prototype works:
  • Safari Browsers on iPad and iPhone
• Mappings for the mfly JSON objects with prototype object bindings.
  • The mfly API call are very simple to retrieve data - please ask in forum if you need any help on this.
  • Please refer mediafly examples - https://bitbucket.org/mediafly/mediafly-interactives-tools-and-examples/src.
  • Add new properties (date, received, thumbnailUrl, launched, keywords, new) from the mfly json objects to prototype json object.
  • Existing properties mapping - ('url' to 'href', 'name' to 'label' & 'title').

4. Deployment Guide:

• Include a video showing your solution in action - include installation and setup instructions.

Technology Overview:

• HTML5/CSS3/JavaScript
• AngularJS
• Mediafy Interactives

Documentation Provided:

Please register to see attached documents, prototype and existing Mediafly application.

Final Fixes:

As part of this challenge you agree to perform code fixes and updates based on the code and functionality review of your submission. You are required to make fixes based on any missed items that were orignally captured in the challenge specifiation or the challenge forums during the challenge submission phase.

Final Submission Guidelines

• A complete code changes after Mediafly Interactives application update.
• Include a video showing your solution in action - include installation and setup instructions.