1. Tutorial for Creating interactive
iBeacon content with HTML5 and Spot
2014.05.26
0

2. Confidential and Proprietary to KKlabs Inc.
Overview
• How iBeacon and Spot the App works
• Preparation
• Working with Spot Project Hub
• Tips for HTML5 content for mobile

3. Confidential and Proprietary to KKlabs Inc.
How iBeacon and Spot works

4. Confidential and Proprietary to KKlabs Inc.
Preparation
- Know how to write the code of JavaScript, CSS3 and HTML5
- Hosting space for your HTML5 contents and assets
- An account of Spot Project Hub
- (Optional) Spot the App installed on mobile device
- (Optional) Spot Beacons

5. Confidential and Proprietary to KKlabs Inc.
Working with Spot Project Hub
Step 1. Login the Spot Project Hub
Step 2. Create a beacon group, get beacons into a group
Step 3. Create a campaign under the beacon group
Step 4. Edit the campaign. Add a HTML5 content module into it.
Step 5. Start to write the HTML5 content, include the spot_jsbelib.js
Step 6. Test and simulate the change of beacon distances

6. Confidential and Proprietary to KKlabs Inc.
Tips for HTML5 content for mobile
- Utilize the internet resources and collaboration tool
ex: http://caniuse.com http://jsfiddle.net/
- Adopt the front-end JavaScript library and framework
ex: Bootstrap, Semantic-UI, ImpactJs and more
- Handle mobile browser capability issue:
known issue example:
Android 4.4 – hardware accelerator not default enable in webview
onOrientationChanged event not works well through iFrame

7. Confidential and Proprietary to KKlabs Inc.
Thank you!
6