Challenge Overview
Welcome to the AppXpress Vertical Builder WordPress Pages Challenge! The goal of this challenge is replace the existing AppXpress Builder pages into a vertically oriented and scrollable format.
We already have an existing wordpress theme, your task is to create the new pages by updating the theme OR by creating a custom plugin.
Final Submission Guidelines
Challenge Guidelines
This challenge takes the existing AppXpress Builder which launches from https://appxpress.com/get-started-2/ (all 3 version) and reformats the experience into a vertically oriented (scrollable) format. We are only looking for the builder updates, the main navigation and footer in the mockups are for display only and should not be included in your work effort.
Requirements
#1. All the builder pages of these 3 paths (Design Mockups, Pilot Application, and Production Application) from this page https://appxpress.com/get-started-2/ should be create.
#2. Please pay particular attention to the interaction outlined below, size and placement of all UI elements, and performance of this solution across mobile, tablet, and desktop viewports. Focus on consistent sizing of all fonts within the design. The supplied Photoshop file defines all the fonts sizes and their placement. Source Sans Pro is the only font you need to use.
#3. Desktop and tablet viewports should introduce only minimal variation in these 2 layouts.
#4. On mobile it would be expected that the left side rail and associated UI elements would disappear and all images will scale proportionally within the viewport.
Workflow and Interaction Requirements
#1. The left rail navigation remains persistent once the user scrolls past the Primary navigation. In addition, you’ll notice that in the example PDF file we show a User having completed the first section of the builder, upon which the text turns green in the left rail, section 1 then turns green in the main body, and the user is then allowed to scroll (progress) to section 2.
#2. Once the User scrolls to section 2, section 1 will fade in its opacity, and section 2 will reveal itself. Notice the remaining sections beyond number 2 all remain faded in their opacity. This is crucial interaction within in the builder.
#3. At any point, Users should be able to click on the sections they have already completed and the window should scroll that section to the top of the viewport, and continue to fade out the others.
Reference
- A good example of the expected user experience is shown from this page - https://www.zenhub.io/features/
- We have also included a video overview of the important interaction model that is crucial to delivering an easy to use experience for users interacting with the 3 different types of builder forms delivered via the AppXpress.com website (Design Mockups, Pilot Application, and Production Application). View the video presentation here http://screencast.com/t/dfPOfApv
General Rules
- Test in all the required browsers.
- Watch word typos in every place including the source code. Make sure they have correct meaning.
- DO NOT render any CSS properties from JavaScript functions.
HTML/CSS Requirements
- Your HTML code must be HTML5 compliant
- 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 or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
Interaction Guidelines
- 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.
- You are allowed to use the jQuery JavaScript library for this contest.
- Label all JavaScript hacks with explanations so others will understand.
Wordpress Plugins
- Use only the provided WordPress Plug-ins
- If there's a need to introduce new plugin, you need to document it and what it is being used for.
Browsers Requirements
- IE10+
- Latest FF Mac & PC
- Latest Safari Mac & PC
- Latest Chrome Mac & PC
- iPhone
- iPad
Resources and Guidelines
- Latest theme,data, and plugin available on https://gitlab.com/appiriolabs/appxpress. You will need to create an account in GitLab if you haven't had yet, once you register for this challenge, send us GitLab login to jamesmarquez@gmail.com and we will add you to the developers group on a repo in GitLab. This will give you access to work on issues, create branches, and pull requests. This is only one time action if you are not yet added to the GitLab project's group
- Please follow the guideline in our GitLab repo
Quick Installation guide
1. Pull the files from the repository into your local development environment
2. Create a new database
3. Open your local deployment to start installing the wordpress
4. After installation, login to wp-admin
5. Activate the following plugins for now (activate the other plugins when deemed needed):
- Contact Form 7
- Easy Pricing Table
- TinyMCE Advanced
- Tooltips
- WooCommerce
- WP Video Lightbox
6. Go to Themes then activate Hub theme (with the Appirio thumbnail)
7. Go to Tools and import all the files located /export folder in the following order:
- posts_appirioappxpressmarketplace.wordpress.2014-12-08 (1).xml
- pages_appirioappxpressmarketplace.wordpress.2014-12-08.xml
- products_appirioappxpressmarketplace.wordpress.2014-12-08.xml
- features_appirioappxpressmarketplace.wordpress.2014-12-08.xml
- contactforms_appirioappxpressmarketplace.wordpress.2014-12-08 (1).xml
- slides_appirioappxpressmarketplace.wordpress.2014-12-08.xml
- variatons_appirioappxpressmarketplace.wordpress.2014-12-08.xml
- widget_areas_appirioappxpressmarketplace.wordpress.2014-12-08 (1).xml
- wooframework_internal_container_appirioappxpressmarketplace.wordpress.2014-12-08 (2).xml
8. Go to Settings > Reading and set Home as Front page
9. Go to Appearance > Menus and create a new menu regardless of name with the following items and set its Theme locations to Primary Menu
- Home
- Features
- Get Started
- Account (make sure it is myaccount and rename its label to Login)
- Questions ?
-- Samples
-- Ordering
10. Go to Hub-Appxpress Theme Options > Layout > Footer and select 2 column in the Footer Widget Areas
11. Go to Hub-Appxpress Theme Options > WooCommerce and make sure the Header Cart Link is checked and click the “Save All Changes” button
12. Go to Hub-Appxpress Theme Options > General Settings > Quick Settings and enter the follow code below under the Copyright field.
<a href="https://appxpress.com/"><img style="vertical-align:middle" src="/i/appirio_white_logo_small.png"><strong> AppXpress Marketplace</strong>™</a> - <a target="_blank" href="http://appirio.com/privacy/">Privacy Policy</a> - <a href="/terms-service/">Terms of Use</a>
13. Check the live site at https://appxpress.com/ for comparison if you set up correctly
Submission Deliverables
- Detailed deployment instructions.
- A WordPress theme is a folder containing all the images, css, javascript, and PHP files that describe the appearance and layout of a WordPress blog. The PHP files have a standard naming convention for page types.
- You must include any necessary plug-in files along with the necessary configuration settings.