Adaptive Linked Data-driven Web Components: Building Flexible and Reusable Semantic Web Interfaces

Adaptive Linked Data-driven Web Components

Building Flexible and Reusable Semantic Web Interfaces

Ali Khalili, Antonis Loizou & Frank van Harmelen

Adaptive Linked Data-driven Web Components: Building Flexible and Reusable Semantic Web Interfaces 2Ali Khalili

https://uxmag.com/articles/does-skeuomorphic-design-matter

Fear of New

https://uxmag.com/articles/does-skeuomorphic-design-matter


Skeuomorphic Design

“One way of overcoming the fear of new is to make it look like the old.”

Donald A. Norman

Fear of New


Linked Open Data Principles

WWW World


Human Interactions

Linked Data on the Web WorldHumans

Linked Open Data


The Pathetic Fallacy of RDF

Display RDF data to the users as a graph because the underlying data model is a graph…

David Karger and MC Schraefel. The pathetic fallacy of rdf. Position Paper for SWUI06, 2006

Human InteractionsLinked Open Data


ComplexityHuman InteractionsLinked Open Data


Complexity

Law of conservation of complexity

“Every application has an inherent amount of complexity that cannot be removed or hidden. Instead, it must be dealt with, either in product development or in user interaction.”


Complexity Components


ComponentsComplexity


Web Components & Microservices

<Component properties={P} events={E} states={S}> </Component>

Monolith Microservices


Semantic Web + Web Components



How can Web Components benefit from the Semantic Web?




How can Semantic Web benefit from the Web Components?




How can Semantic Web benefit from the Web Components?

Linked Data-driven Web Components


LD-R Requirements


LD-R Requirements

• 51% of developers had communication issues with non-Semantic Web developers to familiarize them with Semantic Web concepts before they can start contributing to the application.


LD-R Requirements


• Developers spend a lot of time (avg. > 2 days) on bootstrapping their LDAs.


LD-R Requirements


• Developers spend a lot of time (avg. > 2 days) on bootstrapping their LDAs.• 52% had experience adapting the user interface of their applications frequently.


LD-R Requirements


• Developers spend a lot of time (avg. > 2 days) on bootstrapping their LDAs.• 52% had experience adapting the user interface of their applications frequently.• A considerable amount of users (46%), prefer to write the code from scratch instead of reusing code from

existing Semantic Web projects.


LD-R Requirements


• Developers spend a lot of time (avg. > 2 days) on bootstrapping their LDAs.• 52% had experience adapting the user interface of their applications frequently.• A considerable amount of users (46%), prefer to write the code from scratch instead of reusing code from

existing Semantic Web projects. • Only 19% of the participants (mainly advanced users) were using Web Components.


LD-R

LDA: Linked Data Application UI: User Interface

Objectives


LD-R

Adoption of LDA UIs by non-Semantic Webdevelopers and end-usersBootstrapping of LDA UIsCustomization and Personalization of LDA UIsStandardization & Reusability of LDA UIs

LDA: Linked Data Application UI: User Interface

Objectives


Component Developer

Application Assembler End UserLinked Data

Provider

LD-R Components Life Cycle


Component Developer


Provider

RDFcomponents



Component Developer


Provider

RDFcomponents

Scopes &

Config



LD-R Web Components Architecture

LD-RWeb Components

RDF Components

User-defined Components SemanticMarkup



LD-RWeb Components

Interaction Mode

RDF Components

User-defined Components

View Edit Browse

SemanticMarkup



LD-RWeb Components

Scopes

Interaction Mode

RDF Components


View Edit Browse

SemanticMarkup



LD-RWeb Components

ScopesConfigurations

Interaction Mode

RDF Components


View Edit Browse

Generic Configurations

Component-specific Configurations

SemanticMarkup


ConfigurationLD-R Example

https://github.com/ali1k/ld-r/blob/master/configs/reactor.sample.js


LD-R

Linked Data Reactor

http://ld-r.org

Implementation

http://ld-r.org


LD-R Implementation

MICROSERVICES / WEB APIS

[ISOMORPHIC] REACTIVE UI COMPONENTS

LINKED DATA

Architecture


ImplementationLD-R

Data Flow


RISISLD-R Use Cases

http://datasets.risis.eu



RISISLD-R Use Cases

• A component to allow searching/inserting resources from DBpedia.

• A component to allow showing DBpedia places on a map.

• A component to allow inserting/viewing languages formatted in ISO 639-1 using standard URIs.

• A component to allow inserting/viewing file size specified by a unit.

• A component to allow inserting and viewing mime types.

Example Components

DBpediaInput

DBpediaGMap

LanguageView, LanguageInput

FileSizeView, FileSizeInput

MimeTypeView, MimeTypeInput



RISISLD-R Use Cases

Generic• Render metadata properties in different categories. • The labels for properties should be in the UI especially for technical

properties (e.g. RDF dump) that are unknown to researchers outside the Semantic Web domain.

• Show a hint for properties to help metadata editors to understand the meaning of the property.

• Instead of showing the full URIs, the output UI should render either a shortened URI or a meaningful string linked to the original URI.

• Whenever a DBpedia URI is provided, display the corresponding Wikipedia URI to retrieve human readable information.

Specific• dcterms:spatial -> viewer: DBpediaGMap • dcterms:subject -> editor: DBpediaInput • dcterms:language -> viewer: LanguageView, editor: LanguageInput • dcat:byteSize -> viewer: FileSizeView, editor: FileSizeInput • dcterms:format -> viewer: MimeTypeView, editor: MimeTypeInput

Example Scopes & Configurations


resource: { `generic': { usePropertyCategories: 1, propertyCategories: [òverview', `legalAspects', `technicalAspects'], resourceReactor: [`Resource'], shortenURI: 1 }},property: { `generic': { propertyReactor: [ÌndividualProperty'], objectReactor: [ÌndividualObject'], objectIViewer: [`BasicIndividualView'], objectIEditor: [`BasicIndividualInput'] }, `http://purl.org/dc/terms/language': { allowNewValue: 1, label: [`Dataset Language'], category: [òverview'], hint: [`The language of the dataset. Resources defined by the Library of Congress (http://id.loc.gov/vocabulary/iso639-1.html, http://id.loc.gov/vocabulary/iso639-2.html) SHOULD be used.'], objectIViewer: [`LanguageView'], objectIEditor: [`LanguageInput'], defaultValue: [`http://id.loc.gov/vocabulary/iso639-1/en'] }, `http://purl.org/dc/terms/spatial': { label: [`Geographical coverage'], category: [òverview'], hint: [`The geographical area covered by the dataset.'], allowNewValue: 1, objectReactor: [ÀggregateObject'], objectAViewer: [`DBpediaGoogleMapView'], objectIViewer: [`BasicDBpediaView'], asWikipedia: 1, objectAEditor: [`BasicAggregateInput'], objectIEditor: [`DBpediaInput'], lookupClass: [`Place'] }, `http://purl.org/dc/terms/subject': { category: [òverview'], label: [`Keywords'], hint: [`Tags a dataset with a topic.'], allowNewValue: 1,Adaptive Linked Data-driven Web Components: Building Flexible and Reusable Semantic Web Interfaces 24Ali Khalili

LD-R Use Cases Example Config

resource: { `generic': { usePropertyCategories: 1, propertyCategories: [òverview', `legalAspects', `technicalAspects'], resourceReactor: [`Resource'], shortenURI: 1 }},property: { `generic': { propertyReactor: [ÌndividualProperty'], objectReactor: [ÌndividualObject'], objectIViewer: [`BasicIndividualView'], objectIEditor: [`BasicIndividualInput'] }, `http://purl.org/dc/terms/language': { allowNewValue: 1, label: [`Dataset Language'], category: [òverview'], hint: [`The language of the dataset. Resources defined by the Library of Congress (http://id.loc.gov/vocabulary/iso639-1.html, http://id.loc.gov/vocabulary/iso639-2.html) SHOULD be used.'], objectIViewer: [`LanguageView'], objectIEditor: [`LanguageInput'], defaultValue: [`http://id.loc.gov/vocabulary/iso639-1/en'] }, `http://purl.org/dc/terms/spatial': { label: [`Geographical coverage'], category: [òverview'], hint: [`The geographical area covered by the dataset.'], allowNewValue: 1, objectReactor: [ÀggregateObject'], objectAViewer: [`DBpediaGoogleMapView'], objectIViewer: [`BasicDBpediaView'], asWikipedia: 1, objectAEditor: [`BasicAggregateInput'], objectIEditor: [`DBpediaInput'], lookupClass: [`Place'] }, `http://purl.org/dc/terms/subject': { category: [òverview'], label: [`Keywords'], hint: [`Tags a dataset with a topic.'], allowNewValue: 1,Adaptive Linked Data-driven Web Components: Building Flexible and Reusable Semantic Web Interfaces 24Ali Khalili

'http://purl.org/dc/terms/language': { allowNewValue: 1, label: [`Dataset Language'], category: [òverview'], hint: [`The language of the dataset.'], objectIViewer: [`LanguageView'], objectIEditor: [`LanguageInput'], defaultValue: [`http://id.loc.gov/vocabulary/iso639-1/en'] },

LD-R Use Cases Example Config


RISISLD-R Use Caseshttp://sms.risis.eu

http://risis.eu

http://sms.risis.eu


RISISLD-R Use Cases


http://risis.eu


LD-R Use Cases Faceted browserRISIS

http://datasets.risis.eu/browse

http://datasets.risis.eu/browse


Open PHACTSLD-R Use Cases

http://void.ops.labs.vu.nl/


LD-R

Bridging the gap between Semantic Web Technologies and Web Components worlds brings mutual benefits for both sides:

- Semantic Web technologies provide support for richer component discovery, interoperability, integration, and adaptation on the Web.

- Web Components bring the advantages of UI standardization, reusability, replaceability and encapsulation to current Semantic Web applications.

Conclusion


LD-R

- Create a cloud infrastructure for sharing and reusing LD-R scopes and configurations as well as LD-R Web components without the need to install the framework.

- Make a UI to facilitate creation of the LD-R scopes and configurations.

- Develop mechanisms for automatic configuration and composition of Web components based on the semantic markup provided.

Future Plans


Take-Home Message

Thomas J. Watson

“Design must reflect the practical and aesthetic in business but above all… good design must primarily serve people.”


Take-Home Message

Thomas J. Watson


ld-r.org

http://ld-r.org


Take-Home Message

Thomas J. Watson


ld-r.org

?

http://ld-r.org

Adaptive Linked Data-driven Web Components: Building Flexible and Reusable Semantic Web Interfaces

Education

Transcript of Adaptive Linked Data-driven Web Components: Building Flexible and Reusable Semantic Web Interfaces