Tutorial for Creating interactive content with HTML5

Transcript

1. Tutorial  for  Creating  interactive   content  with  HTML5 2014.05.29 0 SPOT  beacons  with  iBeacon  technology
2. Confiden'al  and  Proprietary  to  KKlabs  Inc. Overview •  iBeacon,  HTML5  app  and  SPOT     •  Prepara5on   •  Working  with  Spot  Project  Hub   •  Tips  for  HTML5  content  for  mobile  and  beacon  
3. Confiden'al  and  Proprietary  to  KKlabs  Inc. iBeacon,  HTML5  app  and  SPOT  (1)   Na5ve  App  -­‐  iOS   BLE  Module Device Bluetooth  Protocol  Stack OS CoreBluetooth   API iBeacon  API   CoreLocaHon   API   iOS  App iBeacon     Accessory Na5ve  App  -­‐  Android   BLE  Module Device Bluetooth  Protocol  Stack OS   Bluetooth  API Android  App iBeacon     Accessory 3rd  Party     iBeacon  API   Device  run  as  a     iBeacon  peripheral Device  run  as  a     iBeacon  peripheral
4. Confiden'al  and  Proprietary  to  KKlabs  Inc. iBeacon,  HTML5  app  and  SPOT Hybrid  App  -­‐  iOS   BLE  Module Device Bluetooth  Protocol  Stack OS CoreBluetooth   API iBeacon  API   CoreLocaHon   API   iOS  NaHve  Container     (ex.  PhoneGap) iBeacon     Accessory Hybrid  App  -­‐  Android   BLE  Module Device Bluetooth  Protocol  Stack OS   Bluetooth  API iBeacon     Accessory 3rd  Party     iBeacon  API   HTML    5  Content Spot-­‐JsBELib   Spot-­‐beacon-­‐plugin   Android  NaHve  Container   (ex.  PhoneGap)   HTML    5  Content Spot-­‐JsBELib   Spot-­‐beacon-­‐plugin   Device  run  as  a     iBeacon  peripheral Device  run  as  a     iBeacon  peripheral
5. Confiden'al  and  Proprietary  to  KKlabs  Inc. iBeacon,  HTML5  app  and  SPOT  (3) HTML5  Content  with   SPOT  -­‐  iOS   BLE  Module Device Bluetooth  Protocol  Stack OS CoreBluetooth   API iBeacon  API   CoreLocaHon   API   iBeacon     Accessory Device  run  as  a     iBeacon  peripheral HTML5  Content  with   SPOT  -­‐  Android   BLE  Module Device Bluetooth  Protocol  Stack OS   Bluetooth  API iBeacon     Accessory HTML    5  Content Spot-­‐JsBELib   HTML    5  Content Spot-­‐JsBELib   Directory   Container   iOS  SPOT  the  App Directory   Container   Android  SPOT  the  App   3rd  Party     iBeacon  API   SPOT     Project  Hub Device  run  as  a     iBeacon  peripheral SPOT     Project  Hub
6. Confiden'al  and  Proprietary  to  KKlabs  Inc. Preparation -­‐  Knowledge  of  coding  with  JavaScript,  CSS  and  HTML   -­‐  HosHng  space  for  your  HTML5  documents  and  assets     -­‐  An  effecHve  user  account  at  “Spot  Project  Hub”   -­‐  (OpHonal)  “Spot  the  App”  installed  on  mobile  device   -­‐  (OpHonal)  Spot  Beacons    
7. Confiden'al  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  programme  under  the  beacon  group     Step  4.  Edit  the  programme.  Add  a  HTML5  module  into  it.     Step  5.  Start  to  write  the  HTML5  contents,  include  the  spot_jsbelib.js       Step  6.  Test  and  simulate  the  change  of  beacon  distances      
8. Confiden'al  and  Proprietary  to  KKlabs  Inc. Working  with  Spot  Project  Hub Step  1.  Login  the  Spot  Project  Hub    (h]p://www.spot.ms)    
9. Confiden'al  and  Proprietary  to  KKlabs  Inc. Working  with  Spot  Project  Hub Step  2.  Create  a  beacon  group,  get  beacons  into  a  group      
10. Confiden'al  and  Proprietary  to  KKlabs  Inc. Working  with  Spot  Project  Hub Step  3.  Create  a  programme  under  the  beacon  group  
11. Confiden'al  and  Proprietary  to  KKlabs  Inc. Working  with  Spot  Project  Hub Step  4.  Edit  the  programme.  Add  a  HTML5  module  into  it.    
12. Confiden'al  and  Proprietary  to  KKlabs  Inc. Working  with  Spot  Project  Hub Step  5.  Start  to  write  the  HTML5  contents,                include  the  h]p://www.spot.ms/spot_jsbelib.js    
13. Confiden'al  and  Proprietary  to  KKlabs  Inc. Working  with  Spot  Project  Hub Step  6.  Test  and  simulate  the  change  of  beacon  distances      
14. Confiden'al  and  Proprietary  to  KKlabs  Inc. Tips  for  creating  HTML5  content  and  beacon  (1)   Interpret  the  distance  of  beacon  as  user’s  intent  and  behavior   l  Immediate:     user  contacts  the  beacon   l  Near:     user  tries  to  contact  /   access  to  the  beacon   l  Far:     user  enters  the  area  or  the  place  
15. Confiden'al  and  Proprietary  to  KKlabs  Inc. Tips  for  creating  HTML5  content  and  beacon  (2)   -­‐  UHlize  the  internet  resources  and  collaboraHon  tool   ex:  h]p://caniuse.com      h]p://jsfiddle.net/   -­‐  Adopt  the  front-­‐end  JavaScript  library  and  framework   ex:  Bootstrap,  SemanHc-­‐UI,  ImpactJs  and  more   -­‐  Handle  mobile  browser  capability  issue:     known  issue  example:   Android  4.4  –  hardware  accelerator  not  default  enable  in  webview   onOrientaHonChanged  event  not  works  well  through  iFrame  
16. Confiden'al  and  Proprietary  to  KKlabs  Inc. Thank  you! 15