JavaScript and HTML5 capabilities of modern smart phones provide interesting possibilities for the creation of mobile semantic solutions. The talk introduces two approaches to create Topic Maps based mobile applications with JavaScript. The first part describes the prototype of a generic textual Topic Maps viewer for both iPhone and Android. It can be used to browse topic maps stored on the device or downloaded from the internet. The second part of the talk presents a way to visualize a topic map with spatial information in an augmented reality browser. The topic map itself resides on a server written in JavaScript with nodejs and is transfered to the client using the Augmented Reality Markup Language (ARML).

1. W E B V E V E R I E T
Ravn Webveveriet AS, 2010-11-11
Jan Schreiber <jans@ravn.no>
Topic Maps based
applications on
iPhone OS and Android
XML Holland 2010

2. W E B V E V E R I E T
Ravn
• Founded in 1998, based in Oslo
• Publishing solutions based on Topic Maps
• E-learning standards: (NOR)LOM, IMS QTI,
OAI-PMH
• Customers: CappelenDamm, national sites
for nature science and mathematics, The
Royal Palace of Norway, The Norwegian
Labour Inspection Authority
2

3. W E B V E V E R I E T
Outline
• Topic Maps (TMs) in two minutes
• tmjs - A TM Engine in JavaScript
• Subjects App - A generic TM viewer
• Visualizing TMs in an augmented reality
browser
3

4. W E B V E V E R I E T
Topic Maps
introduction
• International Standard (ISO 13250)
• Description and exchange of knowledge
structures
• Improves findability of information
• More info at http://www.topicmaps.org
4

5. W E B V E V E R I E T
Topic Maps are about subjects
Topics are "proxies" for subjects
that you might want to talk about
Based on Steve Pepper: Topic Maps (2010),
in Encyclopedia of Library and
Information Sciences, Third Edition
A topic in the
computer domain
A subject in the real world
5

6. W E B V E V E R I E T
<http://psi.ravn.no/norlom/vocabulary/
educational-learning-resource-type#simuleringer>
Identity and merging
• Subject locators (direct)
• Subject identifiers (indirect)
Topic
Topic
<http://psi.ravn.no/norlom/vocabulary/educational-
learning-resource-type#simuleringer>
Topic Map #1
Topic Map #2
6

7. W E B V E V E R I E T
Photo: Christine Veeschkens
CC: Some rights reserved
Geranium
sanguineum
Name
Occurrence
Type
Topic
Picture
<http://www.flickr.com/photos/chris_vees/4649759088/>
Name
Blodstorkenebb
Scope
Norwegian
Occurrence
"30-40cm"
Type
Size
7

8. W E B V E V E R I E T
Photo: Christine Veeschkens
CC: Some rights reserved
Geranium
sanguineum
Donus
vidua
AssociationAss. role
Role type
Topic
Association
type
is-food-plant-forfood plant species
8

9. W E B V E V E R I E T
The TM
Universe
9

10. W E B V E V E R I E T
JavaScript
• JavaScript is LISP with a C-like syntax
10

11. W E B V E V E R I E T
JavaScript
• JavaScript is LISP with a C-like syntax
• Virtually every personal computer in
the world has at least one JavaScript
interpreter installed on it and in active
use
11

12. W E B V E V E R I E T
tmjs
• A Topic Maps engine
• Written in pure JavaScript
• Full Topic Maps Data Model (TMDM)
• Standard API: TMAPI 2.0-based
• Unit tests, CXTM tests (most of it) &
JSLint validating
12

13. W E B V E V E R I E T
tmjs
• Platform independent: All modern
browsers, mobile devices (iPhone, iPad
& Android), server-side JavaScript
• In-memory backend, JSON Topic Maps
(JTM) import/export
• Fast on modern JavaScript engines
• It's Open Source (MIT license)
13

14. W E B V E V E R I E T
Future work
• Persistence:
• Web SQL Database backend
• Persistent backend for Node (couchdb?)
• Complete TMAPI, add more tests, full CXTM
• More import/export formats: XTM 2.0, CTM
• Later: Query language
14

15. W E B V E V E R I E T
JSON Topic Maps (JTM 1.0)
15

16. W E B V E V E R I E T
JSON Topic Maps (JTM 1.1)
JTM 1.1 introduced features for aimed at mobile
platforms
• Prefixes. Usually QNames, but:
what about e.g. isbn:0321154991 ?
• => SafeCURIEs1
• special case for type-instance associations
• Summary: Much more compact than JTM 1.0, but
still simple to parse
1) CURIE Syntax 1.0, A syntax for expressing Compact URIs,
http://www.w3.org/TR/curie/
16

17. W E B V E V E R I E T
JSON Topic Maps (JTM 1.1)
17

18. W E B V E V E R I E T
The Subjects App
• A generic Topic Maps viewer for mobile phones
• It's a prototype!
• Idea: Browse small topic maps directly on a mobile
device
• Uses the tmjs Topic Maps engine
• It's three applications in one:
• iPhone App
• Android App
• Web Application
18

19. W E B V E V E R I E T
Native vs.Web app
• Native pros: functionality, cosmetics
• Native cons: a platform nightmare
• Web pros: cross-platform, easy to
develop, easy testing
• Web cons: no access to native functions
(File IO, contacts API, accelerometer,
camera, sound, etc.) and what about the
App store?
19

20. W E B V E V E R I E T
We can do both!
20

21. W E B V E V E R I E T
PhoneGap
• Open Source development tool created
by nitobi
• PhoneGap wraps a Web app into a
native app
• Gives JavaScript access to native
functions
• You get App-store ready apps
21

22. W E B V E V E R I E T
Source: http://wiki.phonegap.com/Roadmap
22

23. W E B V E V E R I E T
Native vs.Web app
conclusion
Web apps are the way to go!
• Platform independent
• Simplified development
• Almost as flexible and powerful as
native apps
23

24. W E B V E V E R I E T
jQTouch
• jQuery plugin by David Kaneda,
maintained by Jonathan Stark
• Native look & feel for iPhone and
Android with CSS3 animations
• WebKit Animations, Navigation,
Image Preloading, Events,
Themes, Extensions, MIT license
• Similar: jQuery mobile, Sencha's
touch lib (both support iPad)
http://www.jqtouch.com
24

25. W E B V E V E R I E T
Architecture
HTML rendering
subjects.js
jQTouch
jQuery
tm.js
PhoneGap
Native iPhone App Native Android App
25

26. 26

27. 27

28. 28

29. 29

30. 30

31. 31

32. 32

33. 33

34. 34

35. W E B V E V E R I E T
Navigating topic maps
on a mobile device
• Visible information has to be reduced to a minimum
• Existing viewers like Omnigator and Maiana display lots of
information on their main page that is rarely used as an entry
point for navigation (role types, name type, occurrence types)
• "Topic map Metadata", "Browse By Type", "Browse By
Name"
• From a topic page the user can navigate to other topic pages
via associations:
Subject-centric view of the presented information
35

36. W E B V E V E R I E T
Issues
• Memory usage is hard to control
• Script execution timeouts occur
• jQTouch maybe not the best choice
• Max. practical size on my phone
(Samsung Galaxy S): ~2000 topics,
~5000 associations
36

37. W E B V E V E R I E T
Future work
• Maiana Integration
• Support for GeoURIs
• Publish the Subjects App as Open
Source!
• Web SQL Database support (tmjs)
• Editing features
37

38. W E B V E V E R I E T
Visualizing TMs in an
augmented reality browser
• On the rise: Topic maps with geo
information
• Supported in Ontopia, Maiana
• How can we view those topic maps on
mobile devices?
38

39. W E B V E V E R I E T
Visualizing TMs in an
augmented reality browser
• Augmented Reality Browsers:
Look through the camera of your phone
and get an annotated view of the world
around you
• Commercial AR-Browsers like Layers or
Wikitude let you create you own layers or
worlds
• Here: Experiment with Wikitude
39

40. W E B V E V E R I E T
Architecture
1. Request
2. Search index
3. Request
Response
4. Merge results
5. Response
AR-Server (Wikitude) Server w/ Topic Maps engine
Topic map with geo-tagged
topics
Based on http://www.wikitude.me/assets/WikitudeWebservice.pdf
Mobile phone
with Wikitude AR
Browser App
40

41. W E B V E V E R I E T
Augmented Reality Markup Language
Source: http://www.openarml.org/wikitude4.html
41

42. 42

43. 43

44. 44

45. 45

46. 46

47. 47

48. 48

49. 49

50. W E B V E V E R I E T
Visualizing TMs in an
augmented reality browser
• Prototype: Biological Specimen observation
data
• Other use cases:
• E-learning, teaching in the field: Geology,
Biology
• Travel: City guides
• Unsolved: switch between TM viewer and
AR-browser
50

51. W E B V E V E R I E T
Summary
• Intro to Topic Maps
• HTML, CSS & JavaScript for (native) apps
• Tools for the creation of semantic mobile
apps: tmjs, PhoneGap
• Two use cases:
• A generic Topic Maps viewer
• Visualization of TMs in a AR-browser
51

52. W E B V E V E R I E T
Thank you
Questions?
Download tmjs now! http://github.com/jansc/tmjs
Company: http://www.ravn.no
Blog: http://www.semanticheadache.com
52