Linked Open Data Nigeria (LOD-NG): Linked Open Election Framework Implementation Guide for HTML5 + Microdata

How to Embed Election Data in HTML using HTML5, Microdata and Linked Data

Subjects: Election , Linked Data , HTML5 , Semantic Web , HTML , Microdata

Introduction:

This guide will show you how to implement the Linked Open Election Data using HTML5, Microdata and the Linked Election Framework. You can also use RDFa instead of Microdata. It is left to implementing organizations to determine which implementation best suits their particular business needs.

This guide assumes a basic knowledge of HTML5 and Microdata. If you're new to the subject or just need some brushing up, we recommend that you review the Wikipedia article on HTML 5 Microdata.

Solution:

First thing to do is to define the article or post that will host the election data:
```
  <html itemscope itemtype="http://schema.org/NewsArticle" itemid="http://your-domain/news-story.html">
  ---
  </html>
 
```
for content management system (CMS) like wordpress, tumblr, blogspot, drupal, etc you can use the <div> tag:
```
  <div itemscope itemtype="http://schema.org/NewsArticle"  itemid="http://your-domain/news-story.html">
  ---
  </div>
 
```
Please note that you can also use other Schema.org classes like http://schema.org/Article,http://schema.org/TechArticle, http://schema.org/BlogPost, http://schema.org/ScholarlyArticle as the itemtype.
Define the name and headline of the post. You can use any of the HTML elements (<span>,<div>,<a>,<h>, etc) for these:
```
  <h1 itemprop="name headline">Election Results</h1>
 
```

Embed the author's name and profile URI (eg. Google+, WebID-Profile, DBpedia, Freebase, etc) :

  <div itemprop="author creator" itemscope itemtype="http://schema.org/Person">
   <strong>Author:</strong>  <a href="https://plus.google.com/+EmekaOkoye/" rel="publisher" itemprop="url">
   <span itemprop="name">Emeka Okoye</span></a><br />
  </div>

Annotate the data, tags or subject associated with the article. You can define as many as possible using entities in Wikipedia, Freebase and Linked Open Data (LOD), delimited with commas :
```
  <strong>Topics:</strong> 
  <span itemprop="about" itemscope itemtype="http://schema.org/Thing" itemid="http://dbpedia.org/resource/Election">
  <a href="http://en.wikipedia.org/wiki/Election" itemprop="url"><span itemprop="name">Election</span></a>
  </span>,

 
```
We're going to finish by annotating all of the data we've asserted concerning the article's associated entities.
Embed your news story or article within the attribute "articleBody" tag. You can specify the attribute itemprop="articleBody" multiple times in a web page if the story is located in different sections of the page.
```
  <div itemprop="articleBody">
   your story goes here
  </div>
 
```
Embed the election results within a <div> tag. See subsequent steps on how to embed election polling data.

Define and setup your poll :

  <div itemscope itemtype="http://linkedopendatang.com/schemas/election#Poll">
  </div>

Modify the previous <div> to Add and update the attributes of the poll :

  <div itemscope itemtype="http://linkedopendatang.com/schemas/election#Poll">
   <!-- define constituency. Use any instance of schema:place, dbpedia:place -->
   <p><strong>Constituency:</strong> <a itemprop="hasConstituency" href="http://dbpedia.org/resource/Ekiti_State">Ekiti State</a></p>
   
   <!-- define poll date. date format is yyyy-mm-dd  -->
   <p><strong>Election Date:</strong> <meta content="2014-06-21" itemprop="hasElectionDate"/>June 21, 2014</p>
   
   <!-- define poll's registered voters  -->
   <p><strong>Registered Voters:</strong> <span itemprop="hasRegisteredVoters">733766</span></p>
   
   <!-- define poll's accredited voters  -->
   <p><strong>Accredited Voters:</strong> <span itemprop="hasAccreditedVoters">369257</span></p>
   
   <!-- define total ballot papers used  -->
   <p><strong>Total Ballot Papers Used: </strong><span itemprop="hasTotalBallots">360455</span></p>
   
   <!-- define total invalid votes  -->
   <p><strong>Invalid Votes: </strong><span itemprop="hasInvalidBallots">10089</span></p>
   
   <!-- define total valid votes  -->
   <p><strong>Valid Votes: </strong><span itemprop="hasValidBallots">350366</span></p>
   
   <!-- define reported violence. format is boolean  -->
   <p><strong>Any Reported Violence: </strong><span itemprop="hasViolence">False</span></p>
   
   <!-- define reported fraud. format is boolean  -->
   <p><strong>Any Reported Fraud: </strong><span itemprop="hasElectoralFraud">False</span></p>
   
   <!-- A poll must have 2 or more candidates. Each candidate must be defined in a <div> or <span> tag -->
   <!-- candidate 1 -->
   <div itemprop="isCandidate" itemscope itemtype="http://linkedopendatang.com/schemas/election#Candidate">
   <dl>
    <!-- define candidate's name  -->
    <dt>Candidate's Name </dt>
    <dd><div itemprop="hasName" itemscope itemtype="http://schema.org/Person" itemid="#fayose"><span itemprop="name">Ayodele Peter Fayose</span>
    <meta itemprop="sameAs" content="http://dbpedia.org/resource/Ayo_Fayose"/>
    </div>
    </dd> 

    <!-- define candidate's party  -->
    <dt>Candidate's Party </dt>
    <dd><a itemprop="isOfPoliticalParty" href="http://linkedopendatang.com/entity/ngpoliticalparty.ttl#pdp">PDP</a></dd>

    <!-- define candidate's votes  -->
    <dt>Candidate's Votes </dt>
    <dd><span itemprop="hasVotes">203090</span></dd>

    <!-- define candidate's success status.  -->
    <dt>Elected? </dt>
    <dd><span itemprop="isElected">True</span></dd>
  
   </dl>
   </div>
   
   <!-- follow the previous approach on candidate 1 for other candidates
   <!-- candidate 2 -->
   <div itemprop="isCandidate" itemscope itemtype="http://linkedopendatang.com/schemas/election#Candidate">
    data goes here
   </div>
   
   <!-- candidate n -->
   <div itemprop="isCandidate" itemscope itemtype="http://linkedopendatang.com/schemas/election#Candidate">
    data goes here
   </div>
  </div>

Finally, you can add the provider organization data. The url attribute should be the website URL of the news or blogger organization while the name of the organization is added to the name attribute:

   <span
    itemprop="sourceOrganization provider"
    itemscope
    itemtype="http://schema.org/Organization"
    itemid="http://linkedopendatang.blogspot.com">
    <meta itemprop="name" content="Linked Open Data Nigeria" />
    <meta itemprop="url" content="http://linkedopendatang.blogspot.com" />
    </span>

That is it.

You can query the data (microdata) with sparql
There are tools or distillers like RDF Distiller or pyMicrodata that can convert microdata stored in web pages into RDF triples, making it possible to query this data with SPARQL

For instance, to get all data in a webpage, enter the following query at a sparql endpoint:

 select *
 from <http://www.w3.org/2012/pyMicrodata/extract?uri=[URL of Web Page]&format=turtle>

You can view a sample here

Information:

View a live demo here.
View extracted data from live demo here
The source and samples are on github.

Emeka Okoye

References

DBpedia - http://en.wikipedia.org/wiki/DBpedia

SPARQL - http://en.wikipedia.org/wiki/SPARQL

SPARQL Query Language for RDF - http://www.w3.org/TR/rdf-sparql-query/

SPARQL Endpoint - http://semanticweb.org/wiki/SPARQL_endpoint

Server Side Scripting - http://en.wikipedia.org/wiki/Server-side_scripting

Keywords: linked data, election, HTML5, html, semantic web, microdata

License: ODC Public Domain Dedication and Licence (PDDL)

Linked Open Data Nigeria (LOD-NG)

Sunday, March 1, 2015

Linked Open Election Framework Implementation Guide for HTML5 + Microdata

No comments:

Post a Comment