Skip to content

HTML5 Application Tutorial

Jump to bottom Edit New page
adunofaiur edited this page Jun 2, 2014 · 8 revisions

BigSemantics helps web developers to conveniently present and operate on semantic information in web applications. To use it in your application, you will interact with three components:

1. A REST style web service that provides a convenient way to get metadata for a web page.

2. A JavaScript librarythat allows you to use the service through regular function calls and prepare metadata for presentation.

3. A JavaScript library that provides a default set of UI elements for rendering and exploring metadata in a web page. The same UI elements have been used to implement the Metadata In-Context Expander (MICE), with which users can expand metadata to see further linked information.

For an example web application, see testLocal.html

Table of Contents

Setting up BigSemantics Service

Before you can obtain metadata from web pages, you must set up BigSemantics Service.

Displaying Metadata in a Pre-made Interface (MICE)

To easily display metadata, use MICE. Consult the MICE documentation and tutorial. Be sure to have already set up BigSemantics Service.

Displaying Metadata in a Custom Interface

To obtain a metadataView object, which contains metadata and its associated presentation semantics, utilize the MetadataLoader. Consult the Metadata Loader for details on use

Manually Manipulating Meta-Metadata (BS Service)

The BigSemantics Web Service helps extract metadata from web documents, with corresponding wrappers that contain schema information and presentation instructions. Extracted metadata and corresponding wrappers are returned as either XML or JSON data, and can be wrapped in a callback function for use with JavaScript based web applications. The BigSemantics Service API specification contains details.

This tutorial will show you how to set up the BS Service and add set up an example MICE rendering.

The First Example

Before getting started, make sure that you have the BigSemanticsJavaScript project cloned to your local machine. Start a web server to serve scripts and style files from the project. For testing and development, the simplest way of doing so is to use the SimpleHTTPServer from Python: 

$ cd path-to-BigSemanticsJavaScript\..
$ python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...

Create a HTML file named as index.html in a folder so that it can be served through the web server. In the above example, the HTML file can be placed in the folder containing the BigSemanticsJavaScript project. Create a basic structure in the file: 

<html>
  <head>
    <title>My First Example with BigSemanticsJavaScript</title>
  </head>
  <body>
    My First Example with BigSemanticsJavaScript!
  </body>
</html>

Now, if you navigate to http://localhost:8000, you should see the text.

Required Modules

Include the following code in the head of the HTML page (you may need to amend the path if you serve BigSemanticsJavaScript differently): 

  <link href="/BigSemanticsJavaScript/interactiveSemantics/metadataRenderer.css" rel="stylesheet" type="text/css" />
  <link href="/BigSemanticsJavaScript/MICE/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

  <script type="text/javascript" src="/BigSemanticsJavaScript/simpl/simplDeserializer.js"></script>
  <script type="text/javascript" src="/BigSemanticsJavaScript/simpl/simplFieldTypes.js"></script>
  <script type="text/javascript" src="/BigSemanticsJavaScript/simpl/simplGraphCollapse.js"></script>
  <script type="text/javascript" src="/BigSemanticsJavaScript/simpl/simplGraphExpand.js"></script>
  <script type="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScope.js"></script>
  <script type="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScopeDeserialize.js"></script>
  <script type="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScopeSerialize.js"></script>
  <script type="text/javascript" src="/BigSemanticsJavaScript/interactiveSemantics/debi.js"></script>
  <script type="text/javascript" src="/BigSemanticsJavaScript/interactiveSemantics/mice.js"></script>

The CSS files define basic styles for the rendering. The S.IM.PL related scripts help convert JSON strings received from the BigSemantics web service into object graphs.

If you will use your own interface to present metadata (instead of using the MICE interface), you don't have to include **metadataRenderer.css** and **mice.js**.

Metadata Rendering

The next step is to actually add metadata renderings to the page.

In the body of the HTML page, add the following code: 

  <div class="metadataRendering">
    <a href="http://www.imdb.com/title/tt1707386/"></a>
  </div>

Also, after this newly added div, add some JavaScript code to initialize the rendering: 

  <script>
    MICE.initialize();
  </script>

Now, if you navigate to http://localhost:8000, you should be able to see some metadata renderings! You can also expand fields to see further linked information.

This example shows presenting metadata in web pages using the default Metadata In-Context Expander (MICE) interface. The MICE interface looks for containers with the metadataRendering class, and replaces anchors inside containers to expandable presentations using metadata extracted from the anchored page.

Add a custom footer
Add a custom sidebar
Clone this wiki locally