Ali khalili: Towards an Open Linked Data-based Infrastructure for Studying Science & Technology

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

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 beneﬁt from the
Semantic Web?

Semantic Web?
How can Semantic Web beneﬁt from the
Web Components?

Semantic Web?
How can Semantic Web beneﬁt 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
• 52% had experience adapting the user interface of their applications frequently.

LD-R Requirements
• 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
• 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 Web
developers and end-users
Bootstrapping of LDA UIs
Customization and Personalization of LDA UIs
Standardization & Reusability of LDA UIs
LDA: Linked Data Application UI: User Interface
Objectives

Component
Developer
Application
Assembler
End User
Linked Data
Provider
LD-R Components Life Cycle

Component
Developer
Application
Assembler
End User
Linked Data
Provider
RDF
components

Component
Developer
Application
Assembler
End User
Linked Data
Provider
RDF
components
Scopes
&
Conﬁg

LD-R Web Components Architecture
LD-R
Web Components
RDF Components
User-deﬁned Components
Semantic
Markup

LD-R
Web Components
Interaction Mode
RDF Components
View Edit Browse
Semantic
Markup

LD-R
Web Components
Scopes
Interaction Mode
RDF Components
View Edit Browse
Semantic
Markup

LD-R
Web Components
Scopes
Configurations
Interaction Mode
RDF Components
View Edit Browse
Generic Configurations
Component-specific Configurations
Semantic
Markup

ConﬁgurationLD-R Example
https://github.com/ali1k/ld-r/blob/master/conﬁgs/reactor.sample.js

LD-R
Linked Data Reactor
http://ld-r.org
Implementation

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 ﬁle size speciﬁed 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.
Speciﬁc
• 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 & Conﬁgurations

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'],
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': {
label: [`Keywords'],
hint: [`Tags a dataset with a topic.'],
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,
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.'],
},
`http://purl.org/dc/terms/spatial': {
label: [`Geographical coverage'],
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': {
label: [`Keywords'],
hint: [`Tags a dataset with a topic.'],
'http://purl.org/dc/terms/language': {
allowNewValue: 1,
hint: [`The language of the dataset.'],
},
LD-R Use Cases Example Config

RISISLD-R Use Cases
http://sms.risis.eu

RISISLD-R Use Cases
http://datasets.risis.eu

LD-R Use Cases Faceted browserRISIS
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 beneﬁts 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 reﬂect the
practical and aesthetic in
business but above all…
good design must primarily
serve people.”

Take-Home Message
Thomas J. Watson
serve people.”
ld-r.org

Take-Home Message
Thomas J. Watson
serve people.”
ld-r.org
?

Ali khalili: Towards an Open Linked Data-based Infrastructure for Studying Science & Technology

Recommended

Recommended

More Related Content

Similar to Ali khalili: Towards an Open Linked Data-based Infrastructure for Studying Science & Technology

Similar to Ali khalili: Towards an Open Linked Data-based Infrastructure for Studying Science & Technology (20)

More from knowdiff

More from knowdiff (16)

Recently uploaded

Recently uploaded (20)

Ali khalili: Towards an Open Linked Data-based Infrastructure for Studying Science & Technology