The document discusses an upcoming talk on mobile development and virtual reality. It will include a short introduction, demos of jQuery Mobile and A-Frame VR, and a design lab session. Various mobile development platforms and VR tools will be introduced. The lab session will involve building a basic mobile form using jQuery Mobile and creating VR experiences with A-Frame. Attendees will work in groups to design VR experiences using images, sounds, and portals.

1. DrDavidBell @drdjbell
david.bell@brunel.ac.uk
An Introduction to Mobile
Development: Forms to VR

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. Research – Art & Social Media
https://www.youtube.com/watch?v=fcM1TIJFu
6Q&feature=youtu.be
AR

4. Public interaction with art and
architecture, data derived
personas and journeys,
behavioural simulation.

5. Research – Museum (AR)

6. Future

7. Who has done some mobile
development?
• Apple - XCode
• Google Android
• Mobile Web
• App Inventor
• PhoneGap

8. Who has entered virtual or
augmented reality?
• Oculus Rift
• Sony Playstation VR
• Samsung Gear VR
• HTC Vive
• Google Cardboard
• Google Daydream

9. Mobile Web - Forms
• JQuery Mobile
• http://demos.jquerymobile.com/1.4.5/forms/

10. Mobile Web - VR
• A-Frame toolkit
• http://aframe.io
VR

11. Hyper Reality

12. VR Software Design
• Inheritance
• Composition
SpaceShip
FlyingSaucer SpaceFlyingSaucer

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. LAB TIME – SJ123

15. JQuery Mobile

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. Lab 1 – JQuery Mobile Form
• Use W3Schools (JQuery Tutorial)
• Read Forms section
• Adapt one code example
• Save your code for later

18. Lab 1 – Examples

19. In Chrome:
w3schools.com/jquerymobile

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. 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. Browser localhost:8000 should look
like this

23. Now for VR
• Run One test in Boilerplates

24. Now for VR
• Move to directory aframe-
masterexamplesboilerplateone
• Open index.html (in Notepad++)
• Open a browser localhost:8000

25. Now for Mars Travel
• Change the code to access the Mars
image (open index.html in directory one)

26. Adding a Mars sky
• Change title
• Change image to mars.jpeg
• Run in a Chrome browser

27. Adding an Alien
• Change title
• Change image to mars.jpeg
• Run in a browser or VR headset

28. A-Image
<a-image look-at="#player" src="#alien-sprite" transparent="true"
position="0 9 -8"></a-image>

29. A-Image

30. Add a flying saucer
• Saucer.png is in the directory one
• Add the saucer in the sky

31. Code Walkthrough

32. Portal in time and space
• Now look in directory two
• Open in a Browser or VR headset

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. 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

36. Choice:
- Physical augmented reality
- Remote Virtual Reality

37. 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