Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Royal Institution CS Materclass - Mobile/VR development

137 views

Published on

A taster day using JQuery Mobile and Aframe.io for secondary school children.

Published in: Education
  • Be the first to comment

Royal Institution CS Materclass - Mobile/VR development

  1. 1. DrDavidBell @drdjbell david.bell@brunel.ac.uk An Introduction to Mobile Development: Forms to VR
  2. 2. Today Short Talk (15-30 mins) before: JQuery Mobile Taster (30 mins) Break (15 mins) A-Frame Virtual Reality Taster (30 mins) Design Lab (30 mins)
  3. 3. Research – Art & Social Media https://www.youtube.com/watch?v=fcM1TIJFu 6Q&feature=youtu.be AR
  4. 4. Public interaction with art and architecture, data derived personas and journeys, behavioural simulation.
  5. 5. Research – Museum (AR)
  6. 6. Future
  7. 7. Who has done some mobile development? • Apple - XCode • Google Android • Mobile Web • App Inventor • PhoneGap
  8. 8. Who has entered virtual or augmented reality? • Oculus Rift • Sony Playstation VR • Samsung Gear VR • HTC Vive • Google Cardboard • Google Daydream
  9. 9. Mobile Web - Forms • JQuery Mobile • http://demos.jquerymobile.com/1.4.5/forms/
  10. 10. Mobile Web - VR • A-Frame toolkit • http://aframe.io VR
  11. 11. Hyper Reality
  12. 12. VR Software Design • Inheritance • Composition SpaceShip FlyingSaucer SpaceFlyingSaucer
  13. 13. Tag based extensions • Traditional code: aMethod(param1, param2) e.g. int sum=add(1,2) • Tag code: <aMethod param1=xxx param2=yyy> e.g. <textarea id="textarea" rows="1"></textarea> • Tag code better support composition – <sky><planet1><saucer><rocket></sky>
  14. 14. LAB TIME – SJ123
  15. 15. JQuery Mobile
  16. 16. Lab 1 – JQuery Mobile Form • Create a mobile phone interface that allows you to store: – Location (Text) – Visit Type (Drop down: School, Family, Other) – Date (Text) – Description (String) – Rating (Slider: Numeric 0-100)
  17. 17. Lab 1 – JQuery Mobile Form • Use W3Schools (JQuery Tutorial) • Read Forms section • Adapt one code example • Save your code for later
  18. 18. Lab 1 – Examples
  19. 19. In Chrome: w3schools.com/jquerymobile
  20. 20. Starting Webserver: Login • Login with username and password • Download directory structure STEP 1 – Start Run  UxisShareMasterClass – Copy Aframe-master directory into Downloads directory • Start a web local web server STEP 2 – Open explorer WIN E – Go to Downloads – Run server.bat
  21. 21. Now for some Virtual Reality (VR) Open localhost:8000 in a browser (Chrome) • Physical – virtual • Space and time travel (portals) https://www.youtube.com/watch?v=pEo70oTl Y1w
  22. 22. Browser localhost:8000 should look like this
  23. 23. Now for VR • Run One test in Boilerplates
  24. 24. Now for VR • Move to directory aframe- masterexamplesboilerplateone • Open index.html (in Notepad++) • Open a browser localhost:8000
  25. 25. Now for Mars Travel • Change the code to access the Mars image (open index.html in directory one)
  26. 26. Adding a Mars sky • Change title • Change image to mars.jpeg • Run in a Chrome browser
  27. 27. Adding an Alien • Change title • Change image to mars.jpeg • Run in a browser or VR headset
  28. 28. A-Image <a-image look-at="#player" src="#alien-sprite" transparent="true" position="0 9 -8"></a-image>
  29. 29. A-Image
  30. 30. Add a flying saucer • Saucer.png is in the directory one • Add the saucer in the sky
  31. 31. Code Walkthrough
  32. 32. Portal in time and space • Now look in directory two • Open in a Browser or VR headset
  33. 33. Portal in time and space • Change the colour of the sphere • Change the size of the sphere • Change the museum to a scene of your choice
  34. 34. Design an experience • In groups (4-5) • Scenarios (images/videos): – Entering a museum – Walking around Maiden Castle – View the London Skyline – Walking around a volcano • RED PEN: Title of VR experience • GREEN PEN: Additional Imagery, Sounds • BLUE PEN: Portals
  35. 35. Choice: - Physical augmented reality - Remote Virtual Reality
  36. 36. Designing an experience • In groups (4-5) • Scenarios (images/videos): – Entering a museum – Walking around Maiden Castle – View the London Skyline – Walking around a volcano • RED PEN: Title of VR experience • GREEN PEN: Additional Imagery, Sounds • BLUE PEN: Portals

×