Bytes for Lunch

Finding my way on coding amazing apps for the Web and Mobile

A taste of Semantic Web

with one comment

For sure, Semantic Web is one of the most heard word on the Internet.
But how many people can really use it? Due to its steep learning curve and its manifold nature, penetration of semantic techniques in web development is still poor.
In this post I’m gonna show you how to implement simple Semantic techniques in a web page.

Why the Semantic Web?

Everyday, the most of information we get from the web comes by algorithms that mainly look at text. This is because the majority of web pages are made up by human-readable words.

The base principle of the semantic web is to provide metadata for giving text a meaning. Several techniques are on the table, the one we’re gonna see is Microdata.

Microdata consists of annotating the DOM of a web page with  scoped key/value pairs, that give meta-informations about the thing they’re related to.

Let’s see an example.

Some days ago I’ve published a web application (PixCone) and I wanted to add information about myself using semantic definitions.

As a side note, please keep in account that on summer 2011 the big three (Google, Yahoo and Bing) launched an initiative to endorse Schemas and Microdata as key technologies for their search algorithms. You do the math…

A simple example: the author section

Before to dig into the example, we should spend a few words on defining the concept of Schema.

Annotating html tags with microdata means to add new attributes to describe the entity. Most of times these attributes already exist, and must be conformed to a particular Schema. A schema is a definition of an object. See here to read more.

In the next piece of code we’re going to add semantic data to the author section of a page. This is a relevant chunk of informations because tells the world who created what.

Let’s give a look at the code

<div itemscope itemtype=””&gt;
<span itemprop=”name”>Francesco Ricceri</span><br>
<span itemprop=”title”>Software Developer</span><br>
<span itemprop=”worksFor”>Pix Cone</span>

Job completed! We have defined a few properties of a “Person” schema.

The line n.2 declares the schema which the object belongs to. In this case we’re giving informations about the author, which is a Person.
Person is defined as a schema. More info here.

Lines 3-4-5 are pretty easy to understand.

With a few lines of code, we made this section to be understood by machines. Great! This is your first step in the world of semantic web.

Microdata in action

One of the Chrome plugins I find absolutely useful is Semantic Inspector. It allows to find semantic data in a web page.

Here’s what I see in the Pixcone homepage.


By clicking on the Semantic Inspector, we’ll see semantic informations sniffed by the plugin:



Now some links I consider a good starting point.



Written by bytesforlunch

November 6, 2012 at 11:46 pm

Posted in Semantic Web

One Response

Subscribe to comments with RSS.

  1. Very interesting. I’m new to these topics, I didn’t know what semantic web is before. Thank you.

    Marco Perasso

    November 7, 2012 at 5:47 am

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: