HTML5 Application Tutorial

Jump to bottomEditNew 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): 

<linkhref="/BigSemanticsJavaScript/interactiveSemantics/metadataRenderer.css" rel="stylesheet" type="text/css" /><linkhref="/BigSemanticsJavaScript/MICE/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplDeserializer.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplFieldTypes.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplGraphCollapse.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplGraphExpand.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScope.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScopeDeserialize.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScopeSerialize.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/interactiveSemantics/debi.js"></script><scripttype="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: 

<divclass="metadataRendering"><ahref="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

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
HTML5 Application Tutorial
Jump to bottomEditNew 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):

<linkhref="/BigSemanticsJavaScript/interactiveSemantics/metadataRenderer.css" rel="stylesheet" type="text/css" /><linkhref="/BigSemanticsJavaScript/MICE/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplDeserializer.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplFieldTypes.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplGraphCollapse.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplGraphExpand.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScope.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScopeDeserialize.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScopeSerialize.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/interactiveSemantics/debi.js"></script><scripttype="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:

<divclass="metadataRendering"><ahref="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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
HTML5 Application Tutorial
Jump to bottomEditNew 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):

<linkhref="/BigSemanticsJavaScript/interactiveSemantics/metadataRenderer.css" rel="stylesheet" type="text/css" /><linkhref="/BigSemanticsJavaScript/MICE/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplDeserializer.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplFieldTypes.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplGraphCollapse.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplGraphExpand.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScope.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScopeDeserialize.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScopeSerialize.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/interactiveSemantics/debi.js"></script><scripttype="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:

<divclass="metadataRendering"><ahref="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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
HTML5 Application Tutorial
Jump to bottomEditNew 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):

<linkhref="/BigSemanticsJavaScript/interactiveSemantics/metadataRenderer.css" rel="stylesheet" type="text/css" /><linkhref="/BigSemanticsJavaScript/MICE/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplDeserializer.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplFieldTypes.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplGraphCollapse.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplGraphExpand.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScope.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScopeDeserialize.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScopeSerialize.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/interactiveSemantics/debi.js"></script><scripttype="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:

<divclass="metadataRendering"><ahref="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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
HTML5 Application Tutorial
Jump to bottomEditNew 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):

<linkhref="/BigSemanticsJavaScript/interactiveSemantics/metadataRenderer.css" rel="stylesheet" type="text/css" /><linkhref="/BigSemanticsJavaScript/MICE/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplDeserializer.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplFieldTypes.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplGraphCollapse.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplGraphExpand.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScope.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScopeDeserialize.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScopeSerialize.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/interactiveSemantics/debi.js"></script><scripttype="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:

<divclass="metadataRendering"><ahref="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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
HTML5 Application Tutorial
Jump to bottomEditNew 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):

<linkhref="/BigSemanticsJavaScript/interactiveSemantics/metadataRenderer.css" rel="stylesheet" type="text/css" /><linkhref="/BigSemanticsJavaScript/MICE/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplDeserializer.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplFieldTypes.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplGraphCollapse.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplGraphExpand.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScope.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScopeDeserialize.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScopeSerialize.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/interactiveSemantics/debi.js"></script><scripttype="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:

<divclass="metadataRendering"><ahref="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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
HTML5 Application Tutorial
Jump to bottomEditNew 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):

<linkhref="/BigSemanticsJavaScript/interactiveSemantics/metadataRenderer.css" rel="stylesheet" type="text/css" /><linkhref="/BigSemanticsJavaScript/MICE/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplDeserializer.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplFieldTypes.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplGraphCollapse.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplGraphExpand.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScope.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScopeDeserialize.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScopeSerialize.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/interactiveSemantics/debi.js"></script><scripttype="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:

<divclass="metadataRendering"><ahref="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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
HTML5 Application Tutorial
Jump to bottomEditNew 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):

<linkhref="/BigSemanticsJavaScript/interactiveSemantics/metadataRenderer.css" rel="stylesheet" type="text/css" /><linkhref="/BigSemanticsJavaScript/MICE/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplDeserializer.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplFieldTypes.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplGraphCollapse.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplGraphExpand.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScope.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScopeDeserialize.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/simpl/simplTypeScopeSerialize.js"></script><scripttype="text/javascript" src="/BigSemanticsJavaScript/interactiveSemantics/debi.js"></script><scripttype="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:

<divclass="metadataRendering"><ahref="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