An Approach to Creation of an "Interactive Resume"

• Download source - 214.3 KB

Introduction

Usually a "professional resume" is a static document. Sometimes I see resumes that are called "interactive"; but in fact their "interactivity" is implemented as a set of static HTML pages.

So I thought – what if I would create a really interactive resume? This tip shows the result of this attempt. I have attached the source of a Silverlight demo application implementing this approach. You can also try the Silverlight application live here.

This tip may be interesting for developers who want to impress a potential employer by an "interactive resume" available as a Web application. Even if they do not use Silverlight, they can use the described approach in a Web application of any other type – JavaScript, Java applet, Flash, etc.

Disclaimers and Restrictions

The demo of my "interactive resume" I attached is implemented as a Silverlight application. Of course, an HTML+JavaScript Web page would be better – from the accessibility point of view. But as I am a .NET developer, I had decided to combine the "interactive resume" idea with a "Silverlight demo application".

A JavaScript developer can use an HTML+JavaScript Web page; a Flash developer can create an "interactive resume" on Flash – the approach described below may be implemented on any Web application platform.

Such an "interactive resume" will not be, of course, a replacement of a traditional "static" resume. But it could be a good addition to a "static" resume; simultaneously playing a role of a "demo application" that proves the fact a developer really knows how to program on JavaScript/Silverlight/Flash, etc.

The "Interactive Resume"

The very first screen of the application displays general information about me and about the application:

Note: The "HyperlinkButton" etc. are hyperlinks that open corresponding MSDN pages.

The 2^nd screen of the application is a short help about its usage:

The 3^rd screen of the application is the "interactive resume" itself:

The approach I used on the screen above to organize the resume information may be called a "search-oriented" one. In other words, a reader is supposed to use the following scenario:

• type a skill that a reader is interested in ("sql" in the example below);
• look into the Skills list (that is "filtered" by the entered keyword);
• select a row in the Skills list;
• read the details of the selected Skill in the Details area

Several more words about one "usability trick" I used on the screen. When you enter the screen a "type a keyword here…" tip in the search box starts "blinking". It blinks for several seconds; then stops automatically. If a user puts an input focus into the search box or selects a row in the Skills list – the tip stops blinking immediately. I hope this "short-time blinking" will attract a user’s attention to the "key point of this GUI"; and at the same time the blinking will not be too irritating.

Please also pay attention to the following fact – the items of the Skills list are created with "information redundancy", as to say. Look at the skills "MS SQL Server" and "T-SQL (MS SQL Server)". Strictly speaking, the "T-SQL (MS SQL Server)" skill is a part of the bigger "MS SQL Server" skill. But I have created a separate "Skill entry" for the T-SQL skill. This will help the users to find necessary information faster. What if a user is interested in primarily T-SQL, and does not want to find an entry "MS SQL Server" and extract T-SQL-related information from there?

Implementation Details

The attached demo application is quite simple, as you can see.

The only thing worthy of explanation in the article is the way it "filters" the Skills list by a typed keyword. I use the following algorithm that is more complicated than the usual "equals" or "contains" logics.

For each of the Skills strings, I calculate a Rank – a number that displays a "degree of relevancy" between the Skills strings and the current Query (i.e., the keyword a user has typed). Then I exclude the Skills strings that have Rank 0. Then I order the remaining Skills by decreasing their Rank; and output the ordered strings into the Skills list.

An example: in the figure below, several skills "match" the entered keyword "sql":

The "SQL" skill has the largest Rank calculated by my algorithm (see the algorithm details below); this is why it is put on the 1^st position in the list.

The "T-SQL (MS SQL Server)" skill has lower Rank; this is why it is put on the 2^nd position in the list; etc.

The Algorithm of Rank Calculation

See implementation of the algorithm in SearchEngine.CalcRank() method in the attached demo.

The main ideas here are as follows:

1. Each occurrence of the Query found in the Skill brings its share to the Rank.

Example: If we have a Skill "aaa b aaa", we suppose it has 2 occurrences of a Query "aa": "aaa b aaa". Then both occurrences will bring their shares to the calculated Rank. 

2. The closer is position of an occurrence of Query to begin the Skill string, the more it brings to the Rank. Example: Suppose we have two skills: "SQL MS" and "MS SQL"; and the Query is "sql". The "SQL MS" will be "more relevant" than "MS SQL". Position of the found Query in the "SQL MS" is closer to begin than position of the found Query in the "MS SQL".

We call this as "Position Factor" (see positionFactor in the SearchEngine.CalcRank()).

3. The closer is length of a Query to length of a Skill, the more it brings to the Rank.

Example: Suppose we have 2 Skills: "SQL" and "SQL Server"; and the Query is "sql". The "SQL" will be "more relevant" than "SQL Server", because length of the "sql" is closer to length of the string "SQL" than to length of the string "SQL Server". We call this as "Length Factor" (see lengthFactor in the SearchEngine.CalcRank()).

4. If an occurrence of a Query in a Skill is located in the very beginning of the Skill string, we increase the Rank. See BeginOfStringBonus in the SearchEngine.CalcRank().
5. If an occurrence of a Query in a Skill is located in begin of a word of the Skill string, we increase the Rank. See BeginOfWordBonus in the SearchEngine.CalcRank().