Keith Richards’ guitar gallery in 4 lines of code

January 24th, 2011, By eitanb

The first line of “code” would be this query, that returns a list of Keith Richards’s guitars (click to check it out):
http://api.headup.com/v1?raw=true&q=Keith Richards/popularmeaning/`instrument`/render(“videolist.html”)
 Let’s break down the query to its parts:

  • Keith Richards/popularmeaning – gives us the URI (a unique ID) for Keith Richards, dbpedia:Keith_Richards.
  • `instrument` – that’s a fuzzy matching of the free-form text “instrument” with a predicate of dbpedia:Keith_Richards. We get a list of the instruments that Keith played.
  • Then we render this list of instruments as using a template (that we’ve prepared in advance) called videolist.html.
This is actually a more “fuzzy” way of querying the graph. The strict way of querying it would have been:
http://api.headup.com/v1?raw=true&q=dbpedia:Keith_Richards/dbpedia-owl:instrument/render(“videolist.html”)

The rest of the code resides inside the videolist.html template. Let’s have a look inside:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>SemantiNet's Video Portal</title>
  <link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/screen.css">
  <style type="text/css" media="screen">
  body {background-color: #FAFAFF}
  </style>
</head>
<body>
 <div class="container">
 <div class="span-24">
  <table style="font-family: Consolas; font-size: x-small; background-color: white" class="span-24">
   <%foreach ./take(20)%>
  <tr width="100%">
   <td>
    <%select keytermsforquery/youtube:getplayers/first%>
   <iframe title="YouTube video player" class="youtube-player" type="text/html" width="300" height="230" src="http://www.youtube.com/embed/<%= f:v1/split('/')/*/at(4)%/>" frameborder="0">
   </iframe>
    </%select%>
   </td>
   <td>
   <h2><%= label%/></h2>
    <%= abstract/str:unescapeunicode%/>
   </td>
  </tr>
   </%foreach%>
  </table>
 </div>
 </div>
</body>
</html>

Most of the template is made of simple HTML markup. The query lines are:

  • keytermsforquery/youtube:getplayers/first
    • keytermsforquery - query refinements, for making calls to search APIs (YouTube in this case) –  adds semantic “cues” when querying APIs to get more accurate results.
    • youtube:getplayers – gets YouTube players for the entities.
    • Take only the first video, we want 1 for each instrument.
  • label – brings a nice readable name.
  • abstract/str:unescapeunicode – brings the Wikipedia abstract – and removes Unicode escaping.
In the same way, we can display a nice YouTube gallery of any list we’d like:
Bookmark and Share
Posted in code, feedback, for developers, Fun Stuff, mashups, Semantic Web, semantinet | 1 Comment »

Comments feed TrackBack URL

1 Comment »

  1. [...] This post was mentioned on Twitter by Headup, Sagie Davidovich. Sagie Davidovich said: RT @headup: Keith Richards’ guitar gallery in 4 lines of code – https://bit.ly/fJajcl [...]

     
    Pingback by Tweets that mention Keith Richards’ guitar gallery in 4 lines of code « Headup – The semantic web – Blog -- Topsy.com — January 24, 2011 @ 7:54 pm

Leave a comment