Designing the Stack Overflow Windows Gadget using Balsamiq Mockups
Reading on Stack Overflow that they have published the possibility to put your Stack Overflow status on your web page or blog. They call it the Stack Overflow “Flair”. There are a number of possibilities you have to get your flair information from their servers, and one of the methods is JSON. Which is great. I figured that it would be the easiest way to get the data in to the gadget.
But first I must decide on how the gadget should look like. The format that Stack Overflow is using for the flair doesn’t suit that well to be placed within a Gadget. The Stack Overflow flair is horizontal oriented, where as a gadget have a vertical approach. So I needed to re-arrange the design so it was more gadget friendly. For this I used Balsamiq Mockups. This is an excellent tool for designing your mockups quickly. The result a settled with looks something like this:
The next thing was to get the data from their servers using JSON. I am using jQuery to do this.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.getJSON(
"http://stackoverflow.com/users/flair/3584.json?callback=?",
flairCallback
);
function flairCallback(data) {
$("#gravatar").empty();
$("#gravatar").append(data.gravatarHtml);
$("#reputation").empty();
$("#reputation").append("Reputation: " + data.reputation);
$("#badges").empty();
$("#badges").append(data.badgeHtml);
$("#profileurl").empty();
$("#profileurl").attr("href", data.profileUrl).append(data.displayName);
}
The HTML code for the gadget looks something like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>StackOverflow Flairtitle</title>
<link rel="Stylesheet" href="styles\flair.css" />
<script src="scripts\jquery-1.3.2.min.js" type="text/javascript">
script>
<script src="scripts\core.js" type="text/javascript">script>
<script type="text/javascript">
$().ready(function() {
GetFlair();
});
</script>
</head>
<body id="flairbody">
<div id="background">
<div id="logo"></div>
<div id="gravatar"></div>
<div id="displayname">
<a
id="profileurl"
target="_blank"
href=""
title="Click here to visit your profile page."
/>
</div>
<div id="reputation"></div>
<div id="badges"></div>
</div>
</body>
</html>
The final gadget looks something like this:
Get it from here.