Key Information

Register
Submit
The challenge is finished.

Challenge Overview

Overview

Cisco Interactive Services

The Cisco Interactive Services solution brings together web-based content and applications for touch screen, interactive, and video collaboration for interactive and non-interactive digital signage and kiosk management. iServices offers remote management and cloud-based deployment capabilities for enterprises and public agencies to deliver compelling and engaging end-user experiences.

About this Challenge

Apply your web development expertise to create a web-based content page “designer” app which allows a user to dynamically layout content for a display device.  Using APIs, Bootstrap, CSS, HTML5, JavaScript, jQuery, Node.js, or Web services in this first of several challenges to ultimately create an Interactive Device Content Manager. Win big and influence the next Cisco iServices offering...

The objective of this challenge is to build a component of an Interactive Device Content Manager application, specifically a content page “designer” web-based app, which allows a non-technical user to intuitively layout content for a unique display device. Imagine a hotel that has display devices (i.e. large flat screen, medium to small TV screen, kiosk, tablet) across the premises (i.e. lobby, gym, swimming pool). This component would allow the user to layout or simply “design” the desired page content for a device, then (through additional future features) allow the user to manage these devices, manage the content library, and configure the content to display on each of these devices.

Challenge Requirements

This challenge specifically is for building the functionality and the experience for a content page “designer” for a user to layout content for display on a single destination device. The content page “designer” web-based app should be accessible from traditional browsers, which will allow managing content layout and design to ultimately render on devices of various sizes (no device resolution constraints at this time – extra points for adaptive design for device screen size flexibility).

Possible future challenges for this Application: App stabilization, UI Optimization, Content and Device Administration, User Administration, and potentially Expand on Content Types and Device Variables…

Use Case Scenario

  1. User optionally selects a device from a list of available devices (i.e. large flat screen, medium to small TV screen, kiosk, tablet)
  2. View some sample content (available on the application) that can be used to build the page (e.g. an image file, a pdf, a video file)
  3. User may now begin configuring and layout out content for the selected device
  4. User then views a Content Panel (anywhere in the view, your choice)
a. View should contain the sample content sources which you have pre-configured (i.e. image, docs, video, or other)
b. View should contain some type of “canvas” (e.g. like a blank PowerPoint slide)
c. User should be able to drag and drop the content desired on this page (WYSIWYG)
d. User should be able to position the content on this page to organize the layout
e. Extra points (not required) for allowing resizing and rotating of layout & view
f.  Extra points (not required) for providing some mechanism to consume an API, ie for publicly available widgets such as clock, stock ticker, weather data.
g. Extra points for the ability to manage the API responses and styles for the widgets, which may be initially hard coded; however, in the future, we would need ability to configure such styles.

Note: Key focus is on the WYSIWYG experience that you come up with on building this content page “designer” web-based app.

Conceptual Sample (no need to match this layout – we look forward to your own unique approach and creativity to this)

 

 

Key Considerations

  1. Please validate the app user interfaces on traditional browsers:  IE 9.0+, FF, Chrome, Safari
  2. Identify the use of open source libraries used to develop the drag-n-drop capability on the page
  3. Please ensure the solution is extensible, ie to support additional content types eventually
  4. Treat all content available on the content page “designer” as objects, and be able to work with the properties of the object (e.g. position, size, type, in-line/overlay, style)
  5. We need to have an effective way to configure and manage each object properties in the code.

References



Final Submission Guidelines

Architecture Considerations and Requirements

  • Code Aesthetics: Code must be clean (no commented code fragments, unused variables etc), tidy (4 space indents) and well commented. Please use Contest/Challenge names in comments instead of developer names. Please utilize good clear and purposeful naming for variables, classes etc.

Software Guidelines

This solution will need to be a quality functional asset.  Submission requires:

  • Project Code elements for the project and metadata elements
  • Source code - please call out any external references used within the code
  • A brief demo video covering application functionality end to end and an overview of the application code blocks
  • High level documentation (i.e. a readme doc) which covers the install and configuration steps
  • Your submission at minimum should implement the following requirements:
    • Be able to easily setup the Application
    • Functionality to put Image / PDF data onto a page and preview the same.

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30044119