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.
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...
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 standa...
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 gene...
W E B V E V E R I E T
Topic Maps
introduction
• International Standard (ISO 13250)
• Description and exchange of knowledge...
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
Ba...
W E B V E V E R I E T
<http://psi.ravn.no/norlom/vocabulary/
educational-learning-resource-type#simuleringer>
Identity and...
W E B V E V E R I E T
Photo: Christine Veeschkens
CC: Some rights reserved
Geranium
sanguineum
Name
Occurrence
Type
Topic
...
W E B V E V E R I E T
Photo: Christine Veeschkens
CC: Some rights reserved
Geranium
sanguineum
Donus
vidua
AssociationAss....
W E B V E V E R I E T
The TM
Universe
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 worl...
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)
• Standa...
W E B V E V E R I E T
tmjs
• Platform independent: All modern
browsers, mobile devices (iPhone, iPad
& Android), server-si...
W E B V E V E R I E T
Future work
• Persistence:
• Web SQL Database backend
• Persistent backend for Node (couchdb?)
• Com...
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. Usua...
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 ...
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 ...
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 a...
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 develop...
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 iPhon...
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 Andro...
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
• Exis...
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 b...
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!
• ...
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
• Sup...
W E B V E V E R I E T
Visualizing TMs in an
augmented reality browser
• Augmented Reality Browsers:
Look through the camer...
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 (...
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
• ...
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...
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
Blo...
Upcoming SlideShare
Loading in …5
×

Topic Maps based applications on iPhone OS and Android

3,538 views

Published on

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

Published in: Technology, Education
  • Be the first to comment

Topic Maps based applications on iPhone OS and Android

  1. 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. 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. 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. 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. 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. 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. 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. 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. 9. W E B V E V E R I E T The TM Universe 9
  10. 10. W E B V E V E R I E T JavaScript • JavaScript is LISP with a C-like syntax 10
  11. 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. 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. 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. 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. 15. W E B V E V E R I E T JSON Topic Maps (JTM 1.0) 15
  16. 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. 17. W E B V E V E R I E T JSON Topic Maps (JTM 1.1) 17
  18. 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. 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. 20. W E B V E V E R I E T We can do both! 20
  21. 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. 22. W E B V E V E R I E T Source: http://wiki.phonegap.com/Roadmap 22
  23. 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. 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. 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. 26
  27. 27. 27
  28. 28. 28
  29. 29. 29
  30. 30. 30
  31. 31. 31
  32. 32. 32
  33. 33. 33
  34. 34. 34
  35. 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. 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. 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. 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. 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. 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. 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. 42
  43. 43. 43
  44. 44. 44
  45. 45. 45
  46. 46. 46
  47. 47. 47
  48. 48. 48
  49. 49. 49
  50. 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. 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. 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

×