Originally posted on Mozilla's Jetpack Blog

The Jetpack team recently released a context menu module in version 0.3 of the Jetpack SDK. This post will discuss the context menu module’s features and how it can be used to create an extension that allows users to interact with microformatted data on the web.

Microformats

If you are familiar with microformats, you can skip this section. In case you are not familiar with microformats, they are simply specifications on how to pattern commonly published data (contacts, events, reviews, etc.) in HTML so it can be easily consumed.

hCard, geo, & adr

Take the hCard microformat specification for example, an hCard represents a person, organization, or place and includes information such as a name, contact info, address info, and perhaps their geo coordinates all in HTML. Here is an example of a microformat that contains this information:

<div class="vcard">
<a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
<div class="adr">
<span class="type">Work</span>:
<div class="street-address">169 University Avenue</div>
<span class="locality">Palo Alto</span>,
<abbr class="region" title="California">CA</abbr>
<span class="postal-code">94301</span>
<div class="country-name">USA</div>
</div>
<div class="geo">Geo Coords:
<span class="latitude">37.386013</span>
<span class="longitude">-122.082932</span>
</div>
</div>

The Context Menu Module

You can find documentation and further details on the context menu module here. The primary feature of the context menu module is the ability to create items in the context menu that are shown when right clicking on various content within the browser or a web page. CSS is used to specify in which contexts your new context menu items will appear. If you create a new context menu item whose context is set to “a” then the menu item will appear in all menus shown when the user right-clicks a link.

Bring The Two Together

The combination of microformats and the context menu module makes many practical Jetpack ideas possible. When websites microformat data on their site, and users have extensions installed in their browser which allow for consumption of microformatted data, users productivity can be greatly enhanced.

Even when a website does not microformat data on its pages, a user script or a Jetpack Page Mod can be written to enhance the data on those pages with microformatting.

An Example

In order to show you how useful and extension that combines microformats and Jetpack’s context menu module is, I have created a jetpack-based extension which adds a ‘Find on Google Maps’ menu item to the context menu when the user right clicks on a geo or adr microformat – geo is used for geo coordinates, and adr for addresses. When the user clicks the extension’s context menu item, the targeted geo coordinate or address is displayed on Google Maps in a new tab. You can find this extension here on AMO, as well as the source code here. The bulk of the source code is < 50 lines.

Summary

If you maintain a website that isn’t properly tagged with microformats I would suggest you consider adding them to your content. If you are a user that notices a site that hasn’t properly tagged their site then you can either request that they do so, or write either a user script or page mod that does so for you. Once you have microformatted data you can then write & use extensions to interact with the data.

This is just a last moment idea inspired by the movie Starship Troopers which flashed in to my mind a couple of days ago as I was thinking about Jetpacks for the Jetpack for Learning Design Challenge. It is primarily a Microformat/Link Type proposal for rel-info with some ideas and prototypes demonstrating how it could be used.

Abstract

When you are reading something on the web there are usually pages which exist elsewhere on the web that would provide background information, and further reading if you desired to dig deeper into the subject(s) you are reading about. Sometimes some of those pages are linked to from the article you are on, but often the link wouldn't make sense in the context of the content, and using a link tag isn't very useful to a user, so the link is not made.

I propose a rel-info link type, even if just as a Microformat, for 'a' and 'link' tags to provide a link to context-sensitive information.

With rel-info a user can read more about the Movie that was discussed at Netflix or IMDB easily for example, because the publisher (or a script the user subscribes to, more on this later) provided a rel-info link which the user can easily find and follow with a Jetpack, Firefox extension, or some other browser extension.

Proposal

When rel-info links are provided on a page browser extensions can easily extract them from the page, which can lead to a large number of use cases, of which I am sure I have only just scratched the surface. There is another side to this coin however which is that there are a large number of ways that rel-info links might be added to a page.

Let's explore the latter case, first the person who published the page could add rel-info links, but then browser extensions could add rel-info links, they could also search for and remove rel-info links. A user could subscribe to a person's or institution's suggestion feed or script which adds and/or removes rel-info links to pages, along with using a AI based browser extensions to add rel-info links.

When the rel-info links are going to be consumed there are some other interesting possibilities, for example a browser extension could filter the links by a HTML 5 'data-topic' attribute by keeping a list of topics that the user dislikes or likes, the domain could also be used for filtering. A browser extension could allow the user to mark pages as read so that they are removed from pages in the future as another example.

Prototypes

To test this link type out with a Jetpack I first had to add it to some pages, so I decided to write a couple of UserScripts to do this demonstrating how they can be dynamically added to pages by anyone even users themselves. The first userscript was to add the rel-info link type to IMDB links, and another to add the rel-info link type to Wikipedia links.

If you install the above UserScripts then you should find rel="info" or rel="... info" on your IMDB and Wikipedia links. Once you have done that you can check out and install the "Would You Like To Know More?" Jetpack. This is a slidebar Jetpack, and when you open this slidebar the focused tab is then scanned for rel-info links, if any are found then they are displayed in a list for you to choose from, if you click one of the provided links a new tab will be opened for the new page.

These UserScripts and the Jetpack take advantage of HTML 5 'data-' attributes, by adding a 'data-source' attribute to the rel-info links added on the userscript side, which the jetpack was written to check for and display if found. This is an example of how HTML 5 'data-' attributes can be used with the rel-info link type which I propose to create more interesting results.

Since Google launched the Google Analytics Individual Qualification (IQ) program nearly 8 months ago, a lot of people have asked for (I was one of them):

1. A way to prove to others that they have passed the Google Analytics IQ test and what their score was.
2. A badge that qualified GA individuals can put on their personal and/or company website.

Issue I: We wanted proof!

Well Google finally got around to addressing the first issue today enabling those that passed the GAIQ test to create a link to proof that they passed, for example here is my proof of passing the Google Analytics IQ test.

I really must thank Google for finally addressing this, it finally means people that are looking for someone to help them with Google Analytics will have a metric that they can use to wade through all of the people out there that either did not pass the test and claim to, or did not do very well. Of course an educated decision will depend on far more than a test score, but it is very important nevertheless.

Issue II: We wanted a badge!

Early last month I got a wicked email from Kamal:

Hi Erik,

I came across your site through a search on a google analytics related query and I noticed that you're a GAIQ. Would you like to be listed in the GAIQ Directory at http://www.GAIQDirectory.com? There's a submission page at http://www.gaiqdirectory.com/submit-your-gaiq-listing and a set of badges at http://www.gaiqdirectory.com/badges

...

Thanks,
Kamal

The Unoffical GAIQ Directory has barely been used, there appear to be 6 people in the directory currently, so if you have passed the GAIQ test, then I highly recommend submitting your listing there. Hopefully they will display score results soon hint hint.

URL Shorteners and Link Rot

Short urls have numerous benefits I won't go through here, one example is for use in twitter which has a string length limit of 140 characters, another example is shortening urls with Google Analytics campaign tracking url variables.

The problem with all of the third party url shortening services out there is that eventually they will have to reset old urls in order to continue providing "short" urls, and even if they don't they could at any time stop providing service, in either case any link using the short url will be dead. Dead links are something all webmasters and users dislike.

The best way to defend against link rot is to create your own personal url shorting service for your own use, on a domain that you control. An added benefit to this approach for Google Analytics campaign tracking is that you will have the control to change the variable values in your campaign links even after the links have been used, like in an email campaign that wasn't setup properly for example.

Google App Engine (GAE)

Google App Engine is another one of those fantasic services which Google provides, this one however is meant to give developers the ability to write their own apps to use the Google infrastructure. GAE provides two programming language choices: Java and Python. Python was the first choice available and recently Java became a option.

I knew about the Google App Engine for a while now, but did not get started writing apps until I saw this RevCanonical project by Kellan who provided the source . After I saw Kellan's source, I noticed that it did not check the HTTP Headers for Links, which was a proposed technique which can potentially save a lot of bandwidth. Also, because I was interested in learning Python, GAE, and Git, I decided to created a copy of the Git repository, and run the code on one of my own Google App Engine spaces, and I learned how to do this by reading the Google App Engine Python tutorial. After I got Kellan's code running, I dug into the Python tutorial (which was an excellent read), and started hacking away the code.

Get Short URL

Well after modifying the RevCanonical project's source code I had made Get Short URL. Get Short URL will scan HTTP and HTML header links for a url which is sigalled as an alternative for the given url, this can be signaled a few different ways which I list at http://getshorturl.appspot.com

I must thank Kellan too, because I learned a lot from his source, and it got me started learning Python, and once I figure out Git I will create a patch for his project.

I have been putting some (but very little) effort in to getting my pages tagged with rel=canonical and I have noticed that some of the time I was getting 1+ pageviews with a different page name that were actually for the same page in Google Analytics. So I decided that a little javascript to grab my rel="canonical" and dump that in to pageTracker._trackPageview(); would be nice.

[More]

I'm still not sure if I'm a fan of all of the microformats that I have come across so far. But I can tell you that I am a huge fan of the VoteLinks microformat, because I think there is a huge need for them in SEO arena.

Currently search engines like Google, Yahoo, and that other search engine (made by the same company that makes that crappy browser) all primary rely on PageRank, which determines the importance of a document by considering the importance of the documents that link to it. In PageRank, every link is valuable, except those links that use the nofollow link type (ie: any link without the nofollow link type is considered an endorsement). PageRank does not consider the possibility that document A might want to have a vote on document B's calculated importance, besides just the option of endorsing document B.

Enter the VoteLinks microformat. With this specification, website masters can now specify links on their web documents as votes for or against other web documents. You can also abstain from voting, ofcourse.

For example, you may have noticed that in my second paragraph I was taking a shots at the Microsoft Corporation (which I love to do) and if you look at the html markup, then you will notice that those links are votes against Live Search and Internet Explorer. So now I'm telling any user agent that visits this document that this document is a vote against those Microsoft products. This document is also a vote for some wikipedia articles, Google, Yahoo, and the VoteLinks microformat. That's a lot of knowledge that spiders can gain because of this markup, hopefully the search engine spiders start considering this microformat as a factor soon..

Anyhow, if you want to start using the VoteLinks microformat now, all you need to do is insert the following values into the rev attribute of your html anchor tags:

• vote-for: This signals that the current document is a vote for the href url of the anchor tag.
• vote-against: This signals that the current document is a vote against the href url of the anchor tag.
• vote-abstain: This signals that the current document is indifferent to the href url of the anchor tag.