developers.hover.in / 8 posts / categories / 16 comments / feed / comments feed

hoverlets and a case study : Zemanta API

Back to home / View comments

In this post we see :

  1. What is a hoverlet?
  2. Creation of a hoverlet
  3. Usage of a hoverlet
  4. Case Study : A Zemanta Hoverlet

What is a hoverlet?

When we launched the concept of a hoverlet, we wanted it to be as extensible as possible with respect to what was possible. We decided not to go for proprietary packaging and app creation standards for creating a hoverlet since the web is already an open enough standard. We simply decided to augment the same simple markup, javascript, and CSS that everyone is familiar with - with a few objects extra exposed.

Currently you need to register with us to create a hoverlet, But if you are a hosting environment/company would like to provide hoverlet hosting - we’d love to talk to you - so that our users and the community as a whole can benefit from defragmented user-generated content. And we intend to open source whatever it takes to see a wave of adoption that transcends a company and has a chance to benefit the user-experience of the web as it is today.

A hoverlet is just a regular html document that exposes a javascript object that contains details like which is the word hovered, from which page, which site ,and several other parameters to let developers build contextual mashups. This can easily be done by including a CGI script or other server-side scripting methods irrespective of the server and language used.

Creation of a hoverlet

So essentially we’re just hosting webpages that are interpreted in realtime to understand certain macros and have a javascript object that contains context. In our beta product - a developer can create a hoverlet that shows contextual information based on whichever keyword is hovered.
A publisher needs to say - “i like this map hoverlet, now let me associate a keyword to this hoverlet”, or “i like this stock quotes hoverlet, let me associate a company to it”.

Here’s  a screencast of how to create a hoverlet, by registering for hover.in beta .

Using a hoverlet

Using a hoverlet was made a much more easier and straightforward. A hoverlet can be embedded into any webpage by including the start.hover.in script and without any registration or credentials. Following that - since the URI is the API , all you need to to to embed or render a hoverlet into a webpage is just give the href or title attribute of an anchor tag to point to a valid hoverlet resource.  That’s about it! Here is a structure of how the URI will look like.

http://<event>.hover.in/<type>/<nick>/<hoverlet>/<param1>/<param2>/...

We have made 10-20 hoverlets  during our internal hackdays using the method specified in the video above.

crunchbase
blinkxvideos
relatedyoutube
pubinfo
relatedflickr
relatedpicasa
relatedwordpress
twittersearch
googlemaps
priceinfo
twitterprofile
zemantarelated
safaribooks
bookmarks
nytimes
cricinfo
aolvideos

These are all made by our nick ‘hover.in’. However, we will open up the community in January 2010, where anyone can create hoverlets (like creating facebook apps) . If you are a content provider or a developer, you might want to register well before that so that you can be well-prepared to understand through the platform and the possibilities of a hoverlet - be it a registration form , a dictionary lookup or a paid transaction to buy a product.

Note: If you’re into RDF and semantic web vocabularies, we might be able to dwell deeper into the implication of having a hoverlet vocab?

Case Study : A Zemanta Hoverlet

We loved the idea of showing developers and publishers how they can use mashups and API’s such as Zemanta API and hover.in’s hoverlets , as posted on the Zemanta blog [cheers guys : ) ]to bring context and increased user-engagement for their users.

Here’s a simple example of the start.hover.in library in action using the zemanta related hoverlet created by hover.in for getting related articles to the Iran election in just few lines of markup:

 <html>
 <body>

  <a href="http://onclick.hover.in/hoverlet/hover.in/zemantarelated/election" >iran election</a> 

  <script src="http://start.hover.in/script" id="hi_start" type="text/javascript"></script>

 </body>
<html>

So here just to clarify :

http://onclick.hover.in/hoverlet/hover.in/zemantarelated/election
translates to
http://<event>.<host>/<type>/<nick>/<hoverlet>/<param1>/<param2>/...
Hence
    event -> onclick
    host-> hover.in
    type -> hoverlet
    nick -> hover.in
    hoverlet  -> zemantarelated
    keyword -> election

You can see a demo of the zemanta hoverlet at http://start.hover.in/#demo4 , and other demo’s of the hoverlets along with more details mentioned above at the homepage of the start.hover.in library.

if you want to pull in relevent content and  use the Zemanta API - you can get your own API key,  and start building truly contextual applications and hoverlets for the web. And of course,  If you’re a content provider, an application developer on an existing platform or a hacker who wants to build hoverlets - do sign up for beta, and get in touch with me via kode at hover dot in, or ping hover.in on twitter.

Keep Clicking,
~B

« intern challenge - 1 —

No comments

Leave a comment