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

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

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

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

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 thecomputer domain

A subject in the real world

5

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

W E B V E V E R I E T

Photo: Christine VeeschkensCC: Some rights reserved

Geranium sanguineum

Name

Occurrence

Type

Topic

Picture

<http://www.flickr.com/photos/chris_vees/4649759088/>

NameBlodstorkenebb

Scope

Norwegian

Occurrence"30-40cm"

Type

Size

7

W E B V E V E R I E T

Photo: Christine VeeschkensCC: Some rights reserved

Geranium sanguineum

Donusvidua

AssociationAss. role

Role type

Topic

Associationtype

is-food-plant-forfood plant species

8

W E B V E V E R I E T

The TMUniverse

9

W E B V E V E R I E T

JavaScript

• JavaScript is LISP with a C-like syntax

10

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

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

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

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

W E B V E V E R I E T

JSON Topic Maps (JTM 1.0)

15

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 parse1) CURIE Syntax 1.0, A syntax for expressing Compact URIs, http://www.w3.org/TR/curie/

16

W E B V E V E R I E T

JSON Topic Maps (JTM 1.1)

17

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

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

W E B V E V E R I E T

We can do both!

20

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

W E B V E V E R I E T

Source: http://wiki.phonegap.com/Roadmap

22

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

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

W E B V E V E R I E T

Architecture

HTML rendering

subjects.js

jQTouchjQuery tm.js

PhoneGap

Native iPhone App Native Android App

25

26

27

28

29

30

31

32

33

34

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

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

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

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

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

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 engineTopic map with geo-tagged

topics

Based on http://www.wikitude.me/assets/WikitudeWebservice.pdf

Mobile phonewith Wikitude AR

Browser App

40

W E B V E V E R I E T

Augmented Reality Markup Language

Source: http://www.openarml.org/wikitude4.html

41

42

43

44

45

46

47

48

49

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

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

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