Challenge Overview
Welcome to the FCBH Internet.org Mobile Prototype Challenge! In this challenge, we are looking for a clean and easily scalable code base to bring the included designs to life. We hope to see a working prototype with text (The first 16 chapters of the Gospel of Mark) and corresponding audio (B02___0X_Mark________ENGESVN2DA.3gp -- where X is replaced with 1 through 16) to support the various functions of the application.
As part of this challenge we need you to document your HTML5 and CSS3 (using best practices). We are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development. We will allow documentation updates during final fixes (but still required).
In order to make your website display properly within the internet.org Free Basics Platform and be accessible to people on all types of phones and data plans, your mobile website(s) must meet certain technical conditions created by the Free Basics proxy. Specifically, mobile websites should work in the absence of:
- JavaScript
- SVG images and WOFF font types
- iframes
- Video and large images
- Flash and Java applets
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Competition Task Overview:
The main task of this competition is to develop an HTML5 prototype based on the provided designs. Your prototype must work properly in all the required browsers.
Project Background:
This application must be acceptable to internet.org (Free Basics by Facebook) and meet all the requirements contained in their participation and techical guidelines (https://developers.facebook.com/docs/internet-org/participation-guidelines & https://developers.facebook.com/docs/internet-org/platform-technical-guidelines). The purpose of the application is to introduce the Bible via smartphone and feature phone devices to remote areas of the globe that may not have standard internet service -- in many of these areas bandwidth is quite limited and the mobile devices available have limited memory and internal storage capacity. However, these users are eager consumers of our audio content so we would like to introduce our services and applications via the internet.org platform.
Screens:
We want to make sure the design looks best as a mobile website. In terms of viewport size, this site will be targeting android mobile devices of varying sizes:
- - - xlarge screens are at least 720px x 960px
- - - Large screens are at least 480px x 640px
- - - Normal screens are at least 320px x 470px
Key Requirements:
- Browser Compatibility: Current versions of Chrome mobile, Opera, Android browser, IE Mobile.
- Ensure your submission is clear of validation errors and warnings (HTML & CSS).
- style.css - use this name for all custom css.
- Please use proper id’s and classes in your naming conventions.
- Must conform to the Participation Guidelines of internet.org (https://developers.facebook.com/docs/internet-org/participation-guidelines)
- Must conform to the Techical Guidelines of internet.org (https://developers.facebook.com/docs/internet-org/platform-technical-guidelines)
- As per the internet.org Technical Guidelines of internet.org, please test your application on Chrome Device Emulator and Opera Emulator.
Deliverables
Create a prototype that emulates the final internet.org version of the Bible application.
Note:
- Change all references to “John” to “Mark” throughout the application.
- Please use the audio files shared in the forums.
- You can grab the text for the below chapters from http://www.bible.is/ENGESV/Mark/1, you might be required to show multiple chapters to show the flow of the app!
1. Splash Screen:
Reference: 01.a.bible-splash.png
- If the user press the play button, play audio file B02___01_Mark________ENGESVN2DA.3gp and go to 01.b.bible-john-play-)s.png
- If the user press the the link "No, I want to browse the apps myself" bottom, then take them to 01.b.bible-john-no-play.png
2. On screen with audio controls:
Reference: 01.b.bibl-john-no-play.png, 01.b.bibl-john-play-0s.png, 01.c.bible-john-play-15s.png, 01.e.bible-john-chapter-selection.png, 01.g.bible-john-chapter3-compact.png, 01.g.bible-john-chapter3.png
-
If the user presses play, play the audio chapter file associated with the chapter of Mark being displayed in text -- audio file B02___0X_Mark________ENGESVN2DA.3gp -- Where X is replaced with 1 through 16
-
If the user presses reverse, rewind the audio file B02___0X_Mark________ENGESVN2DA.3gp -- Where X is replaced with 1 through 16
-
If the user presses fast forward, fast forward the audio file B02___0X_Mark________ENGESVN2DA.3gp -- Where X is replaced with 1 through 16
-
If the user presses pause, pause the audio file B02___0X_Mark________ENGESVN2DA.3gp -- Where X is replaced with 1 through 16
-
If the user moves the audio pointer, move to that location in the audio
-
The counter should always reflect the location in minutes and seconds of the audio file B02___0X_Mark________ENGESVN2DA.3gp -- Where X is replaced with 1 through 16
-
If the audio B02___0X_Mark________ENGESVN2DA.3gp fully plays out, take the user to the next audio file and play it -- Where X is replaced with 1 through 16.
-
If B02___016_Mark________ENGESVN2DA.3gp fully plays out, take the user to 01.d.bible-john.download.png
-
If the user taps the no button, return the user to the previous screen
-
If the user taps the yes button, take the user to 02.d.out-from-free-basics.png
-
If the user taps yes, link it to Google Play (or appropriate store, or, if none available, to Bible.is/apps)
-
If the user taps no, return the user to the home page
-
-
3. On bible text reading pages:
Reference: 01.b.bibl-john-no-play.png, 01.b.bibl-john-play-0s.png, 01.c.bible-john-play-15s.png, 01.e.bible-john-chapter-selection.png, 01.g.bible-john-chapter3-compact.png, 01.g.bible-john-chapter3t.png
-
The user can scroll up and down the text of the Gospel of Mark http://www.bible.is/ENGESV/Mark/1 (through 16)
-
If the user taps the left arrow, display the previous chapter of Mark (stop at 1)
-
If the user taps the right arrow, display the next chapter of Mark (stop at 16)
-
Probably left arrow color in the chapter 1 and right arrow color in chapter 16 can be slightly dimmed to indicate there are no more chapters to be shown.
-
Header, left/right arrow bar and footer(play track) should be fixed and will not be scrollable.
-
If the user taps the down arrow (located next to the chapter title), display the chapter numbers to allow the user to select chapters from 1 through 16.
-
Chapter select is defaulted to the hidden (01.g.bible-john-chapter-3-compact.png).
-
-
If the user taps the up arrow, hide the chapter select (1 through 16) - 01.b.bible-john-no-play.png
-
If the user taps on a chapter number, display that chapter in the text window.
-
If the user taps the home icon, display 00.a.homeopt1.png
4. On the homepage:
Reference: 00.a.homeopt1.png
-
If the user taps the "Bible" row , take the user to 01.b.bible.john-no-play.png
-
If the user taps the "Download Bible App" row, take the user to 02.a.download.png
-
If the user taps Download App, take the user to 02.d.out-from-free-basics.png
-
If the user taps no, return him to the download bible app page
-
If the user taps yes, take him to https://play.google.com/store/apps/details?id=com.faithcomesbyhearing.android.bibleis
-
-
If the user fills in his email address and or phone number and taps send link - user is taken to 02.d2.link-sent.png
-
If the user taps okay, return him to the download bible app page
-
-
-
If the user taps the "Bible Website" row, take the user to 03.d.out-from-free-basics-to-website.png
-
If the user taps no, return him to the home page
-
If the user taps yes, link it to Bible.is
-
-
If the user taps the "Share" row, take the user to 04.share.png
-
If the user taps the "About Bible.is" row, take the user to 03.d.out-from-free-basics-to-website.png
-
If the user taps yes, link it to Bible.is/about
-
If the user taps no, return the user to the home page
-
���Specific HTML/CSS/JavaScript Requirements:
HTML/CSS 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 layout 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 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.
Browsers Requirements:
- Chrome mobile
- Opera
- Android browser
- IE Mobile
Documentation Provided:
- Storyboard and Source files
- API key
Final Submission Guidelines
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.