Challenge Overview
The PxScene Showcase app will be an app that runs in pxscene (pxscene.org) that displays a functioning UI for browsing videos. It will be used by the client to show off the capabilities of pxscene on embedded devices.
This challenge will implement the beginning of the UI. Storyboards will be provided in the forum.
We are targeting pxscene for this challenge. Note that pxscene applications are implemented in Javascript but use custom APIs for drawing and animations. You are expected to investigate the documentation for pxscene and implement things according to pxscene best-practices.
http://www.pxscene.org/docs/apis/index.html
https://github.com/pxscene/pxscene
Further examples can be found here:
https://github.com/pxscene/pxscene/tree/gh-pages/examples/px-reference
Your solution should be "hostable" on Heroku, likely just as static files. We should be able to browse in pxscene to "http://{your submission}.herokuapp.com" to see it run.
All images should be cleanly sliced from the provided source screens.
Do *not* use images for text, rectangles, solid colour backgrounds, etc... Images should only be used for icons and obvious images, like the movie posters.
Animations aren't required for this particular challenge - those will be implemented separately
Performance is important for this challenge. Navigation should be snappy, and pages and images should load quickly. You should implement asynchronous loading of images, as things like the movie posters will be loaded asynchronously in the final implementation.
Styling and general Javascript should be as clean as possible, with little to no redundancy (DRY). For instance, if each screen is a different JS file, don't copy / paste style details or redundant methods to each file.
The code should be well encapsulated, documented, and designed. This will be a reference application, so no hacks or bad code will be acceptable.
Make sure your submission includes:
* All sliced images
* Pxscene JS files
* Deployment documentation, including how to deploy to Heroku
* A video showing a walkthrough of the converted prototype in pxscene
* Validation documentation for loading the prototype in pxscene from Heroku
This challenge will implement the beginning of the UI. Storyboards will be provided in the forum.
Target environment
We are targeting pxscene for this challenge. Note that pxscene applications are implemented in Javascript but use custom APIs for drawing and animations. You are expected to investigate the documentation for pxscene and implement things according to pxscene best-practices.
http://www.pxscene.org/docs/apis/index.html
https://github.com/pxscene/pxscene
Further examples can be found here:
https://github.com/pxscene/pxscene/tree/gh-pages/examples/px-reference
Hosting
Your solution should be "hostable" on Heroku, likely just as static files. We should be able to browse in pxscene to "http://{your submission}.herokuapp.com" to see it run.
Conversion
All images should be cleanly sliced from the provided source screens.
Do *not* use images for text, rectangles, solid colour backgrounds, etc... Images should only be used for icons and obvious images, like the movie posters.
Animations aren't required for this particular challenge - those will be implemented separately
Performance
Performance is important for this challenge. Navigation should be snappy, and pages and images should load quickly. You should implement asynchronous loading of images, as things like the movie posters will be loaded asynchronously in the final implementation.
Styling and redundancy
Styling and general Javascript should be as clean as possible, with little to no redundancy (DRY). For instance, if each screen is a different JS file, don't copy / paste style details or redundant methods to each file.
Code layout
The code should be well encapsulated, documented, and designed. This will be a reference application, so no hacks or bad code will be acceptable.
Submission
Make sure your submission includes:
* All sliced images
* Pxscene JS files
* Deployment documentation, including how to deploy to Heroku
* A video showing a walkthrough of the converted prototype in pxscene
* Validation documentation for loading the prototype in pxscene from Heroku