Sunday, March 1, 2015

Linked Open Election Framework Implementation Guide for HTML5 + Microdata

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


Subjects: , , , , ,


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.


  1. First thing to do is to define the article or post that will host the election data:

      <html itemscope itemtype="" itemid="http://your-domain/news-story.html">
    for content management system (CMS) like wordpress, tumblr, blogspot, drupal, etc you can use the <div> tag:
      <div itemscope itemtype=""  itemid="http://your-domain/news-story.html">
    Please note that you can also use other classes like,,, as the itemtype.

  2. 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>

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

      <div itemprop="author creator" itemscope itemtype="">
       <strong>Author:</strong>  <a href="" rel="publisher" itemprop="url">
       <span itemprop="name">Emeka Okoye</span></a><br />

  4. 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 :

      <span itemprop="about" itemscope itemtype="" itemid="">
      <a href="" itemprop="url"><span itemprop="name">Election</span></a>
    We're going to finish by annotating all of the data we've asserted concerning the article's associated entities.

  5. 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

  6. Embed the election results within a <div> tag. See subsequent steps on how to embed election polling data.

  7. Define and setup your poll :

      <div itemscope itemtype="">

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

      <div itemscope itemtype="">
       <!-- define constituency. Use any instance of schema:place, dbpedia:place -->
       <p><strong>Constituency:</strong> <a itemprop="hasConstituency" href="">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="">
        <!-- define candidate's name  -->
        <dt>Candidate's Name </dt>
        <dd><div itemprop="hasName" itemscope itemtype="" itemid="#fayose"><span itemprop="name">Ayodele Peter Fayose</span>
        <meta itemprop="sameAs" content=""/>
        <!-- define candidate's party  -->
        <dt>Candidate's Party </dt>
        <dd><a itemprop="isOfPoliticalParty" href="">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>
       <!-- follow the previous approach on candidate 1 for other candidates
       <!-- candidate 2 -->
       <div itemprop="isCandidate" itemscope itemtype="">
        data goes here
       <!-- candidate n -->
       <div itemprop="isCandidate" itemscope itemtype="">
        data goes here

  9. 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:

        itemprop="sourceOrganization provider"
        <meta itemprop="name" content="Linked Open Data Nigeria" />
        <meta itemprop="url" content="" />

That is it.
  1. You can query the data (microdata) with sparql

  2. 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

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

     select *
     from <[URL of Web Page]&format=turtle>

  4. You can view a sample here


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







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

No comments:

Post a Comment