July 2, 2008 at 6:57 pm · 231 views · Filed under portfolio, work
StomperTools Plugin
StomperLabs is proud to announce another cool, FREE software tool. The StomperTools Firefox plug in! We’re going to pack many tools into this plugin in the future, but to start it off we’ve bundled two functions into this plug in.
StomperNet Ranker
The first is called StomperNet Ranker, and it allows your prospects to quickly survey the rankings for a keyword query. We built an interactive graphical representation of a search showing results from three top search engines: Google, Yahoo and MSN.
How to use StomperNet Ranker?
I’ll give an example… Here’s the page as it loads a search for ‘circlecube’. The green nodes represent Google results, red is Yahoo, and blue is MSN. Each result that is for an identical page is connected with a thin line, and when you hover over a node it will grow and also any nodes for identical pages. Nodes for same domain pages will grow slightly as well to give an idea of the saturation on the search results by the specific domain. Below you can see that I’m hovering over the top-left node (the screen shot helpfully removed my cursor), the title of the page is shown and you can see that the same page (my home page) ir ranked number 1 in Google and MSN (hence the line connecting them, and also they have both grown to be large nodes). Also notice that pages of the same domain (circlecube.com) are at the top 2 slots in Google, the top 3 in Yahoo, and the top 2 in MSN (the medium sized nodes). Hovering over a node displays information to the right of the node chart. Clicking on a node loads that url below the ranker ui. You can also click the Google, Yahoo, and MSN buttons above the chart to see the actual search results at each engine specifically.
Ranker had the potential to become a great comparative tool for search engine optimization and comparison.
Scrutinize This
Not only does StomperTools give you access to Ranker right in your browser, but also you can instantly “Scrutinize” any page you’re viewing right from the browser (once you have the Stomper Scrutinizer tool, so go get it too!) Use the plug in to seamlessly aim your Scrutinizer browser to whatever page you’re browsing in Firefox.
June 25, 2008 at 10:20 pm · 205 views · Filed under portfolio, work
StomperNet now has a site map. Only it’s much bigger than just a site map, we’re calling it Stomper Universe! It contains all the pieces parts that make up StomperNet. It links to different sites, video series, tools, and more by giving a 3D interactive space to inspect the thumbnails and click through to the sites! It will help visitors navigate easily to all areas of StomperNet, whether they are new to them or old favorites.
The Scrutinizer is a web browser, based upon the Adobe AIR toolkit and the WebKit browser, that offers a simulation of the human visual system. Specifically, it illustrates the distinction between foveal and peripheral vision in visual acuity and color perception. Using this simulation, you can get a better idea of how users interact with your site design. We explain this, and some of the succes we’ve had, in a 30 minute video called Click Fu. It’s also a great tool for observing users interacting with your pages. By slowing them down, the Scrutinizer makes it easier for you to figure out what information the user is consuming and what actions they are considering. Learn about other ways to use the tool at our Top Ten list.
How it Works
The Scrutinizer browser applies a visual filter to where the mouse is located, simulating foveal vision centered around the mouse. For parts of the screen far away from themouse, the display deteriorates into lower resolution, both in detail and color. You can use the browser to get a better understanding of the low level mechanics of how users interact with your site design. Attempting to accomplish a key task on your site using the Scrutinizer can be very enlightening. Watching a user unfamiliar with your site attempt a key task with the Scrutinizer is even better at revealing how your site design affects the way the user extracts meaning from your presentation. Learn more in the Click Fu video, covering practical examples of improved e-commerce, or the 52 second ” Your Vision is an Illusion“, presenting a dramatic illustration of foveal vision. Finally, check out using the Scrutinizer for a findability challenge on Amazon.com.
May 9, 2008 at 7:05 pm · 255 views · Filed under portfolio
Here’s a new site and series from StomperNet called Going Natural 3!
It’s a bit of free videos made and released to showcase the talents and business of what StomperNet is about and what they do for their clients. They’re ‘moving the freeline’ so to speak…
The first video series begins with Dan Thies talking about his ‘Crazy Theory’ for AdWords.
This site contains the latest flash video player built by yours truly. I also did the design of the site: involving html, css, php, javascript and dealing with drupal too!
An interactive link list. Vertically scrolling list of links or just text. Could be used for a nav menu or a link list, or even just a scrolling list. Scroll speed calculated dynamically from mouse position to give not only scrolling control, but also speed control. Reads an external XML file containing just titles and url paths and creates this interactive click-able link list! On click the link is highlighted and on release loads the url either in a blank window or not (configurable). On rollover the list item grows with animation and is highlighted (all configurable, size speed etc). Once end of list is reached scrolling stops, another version is available with a wrap-around feature: Dynamic Scrolling Link List XML driven Auto wrapping
March 14, 2008 at 6:51 pm · 3,692 views · Filed under portfolio, tutorial
I have been thinking of different interactions that are possible with objects. If you’ve read this blog at all you’ll know that I’ve played with physics and gravity and throwing balls and bouncing balls and all sorts. But I hadn’t wrapped my head around an interactive spinner. I know it’d be easy to make a slider or something that would apply a spin to an object, but this just isn’t interactive enough for me.
Circle with slider to rotate and button for random spin:
This attempt at spinning is ok. I mean, it spins the object and it even glides to a stop if you press the button for a random spin… But it’s just not intuitive and not fun. But if you want this, here’s how I did it.
I want to grab it and spin it though. I want to apply the same principles from physics, like acceleration and friction as forces to the object, so I can grab to spin and release to watch it glide gracefully to a stop. I’ve been thinking about this and how I’d have to use trigonometry and stuff to do it. One day I finally had the time and tried it out. It took me a minute but I figured out that what I needed was arctangent. So (with pointers from jbum, thanks Jim!) I came up with this:
Interactive grab-able circle to spin and twirl:
This one is much more interactive and intuitive. I really think this is because there are no sliders or buttons, no controls, just an object to interact with. It’s much more like real life!
Steps:
In order to make a grab and spin object
1. You have to know where you grab. The user clicks on the shape (knob) and you must figure out what degree or rotation point they have started at. (atan2)
2. As the knob is clicked and the mouse moves (dragging), calculate new rotation by mouse position
3. When mouse is released figure out the current speed of rotation and apply it to the knob with friction, so it can be thrown and spun in that way. (Of course this is optional, if you just want to spin it when the mouse is down you’re done at step 2)
Actionscript:
damp = .96; //friction
r = 0; //rotation
accr = 0; //speed of rotation
knob.onPress = function(){
dragging = true;
//find mouse y coordinate in relation to knob origin
a = _root._ymouse - knob._y;
//find mouse x coordinate in relation to knob origin
b = _root._xmouse - knob._x;
//using arctangent find the spot of rotation (in degrees)
//find mouse y coordinate in relation to knob origin
a = _root._ymouse-knob._y;
//find mouse x coordinate in relation to knob origin
b = _root._xmouse-knob._x;
//using arctangent find the spot of rotation (in degrees)
r = Math.atan2(a,b)*180/Math.PI;
//use current rotation and previous rotation
//to find acceleration
//averages the acceleration with the
//previous acceleration for smoother spins
accr = ((r - oldr) + accr)/2;
//apply the acceleration to the rotation
knob._rotation += accr;
//remember current rotation as old rotation
oldr = r;
feedbacka.text = a;
feedbackb.text = b;
}
else{
knob._rotation += accr;
//apply friction to acceleration force
//and if acceleration gets tiny, just set it to zero
if(Math.pow(accr, 2) > .0001){
accr *= damp;
}
else{
accr = 0;
}
}
//spit out feedback continuosly
feedbackr.text = knob._rotation;
feedbackaccr.text = accr;
}
I commented the code to explain what is happening, if you need more just post a comment. Let me know if you find this useful and what you end up making with it.
As announced, the Free IQ Media Player now incorporates Google Analytics with it’s custom flash video player. Simply put, users may upload their own content (or even use anyone else’s content that is on Free IQ), embed it on their own sites and then view the tracking/logging/usage/analytics/metrics it their own Google analytics account. You don’t have to do anything- the player will do it automatically, but if you don’t have google analytics installed on your site, nothing happens. So go ahead and sign up, it’s free and very useful.
This works with both versions of Google analytics tracking code. Recently Google updated the code they give users to enhance the functionality of the analytics they give you in their reports. Some have voiced concern about whether they can update to the new code and still use the Free IQ video tracking, now the answer is yes! This new updated player works with the new Google Analytics Tracking Code! Others have voiced a concern that they aren’t ready to update the Google code on the rest of their site yet, this is not a problem either. The Free IQ Player works with either version of the GATC (Google Analytics Tracking Code). It would even work with both… say you had a site with some old code and some new code, the player knows and will tell Google what people are doing with this player on your site.
To see the report, go to your google analytics account, click on ‘Content’, and then ‘Top Content’. This page shows you the most viewed pages on your site. You can filter the report by typing in the box under the list of urls. Find the ‘Find Url’ box (be sure ‘containing’ is selected in the drop-down) and type ‘freeiqvideo/’. Press ‘go’ and you should see all the analytics for the Free IQ player on your site! All the analytics from the player start with ‘freeiqvideo/’ in the url path and we’ve organized all the analytics into three different types: Video, Actions and Navigation. Every time someone does any of these things on your site, google analytics will log a pageview to a certain page. This certain page changes and depends upon what the user did exactly. When a user visits your site and begins to watch a certain video called ‘My Cool Video’, google analytics logs a pageview to ‘freeiqvideo/playstart/mycoolvideo! Notice that the title of the video is incorporated into the report, this helps determine which video is more popular and such. The title of the video is the title you give Free IQ upon uploading your content and can usually also be found at http://freeiq.com/mycoolvideo
This information can be very helful as you think about which video to place or keep on your site, and even where to put it. You can also see how many times the video was finished (freeiqvideo/playcomplete/mycoolvideo). This can be very useful to help you determine if your video is too long, too boring, or on the other end very engaging- it’s essentially your video bounce rate.
Other than video tracking, the Free IQ Player also logs to google analytics actions users have with the player itself. The Free IQ Player enables users to share your content with others. There are interactions with the player for users to email a link to their friends about the content they are watching, get html codes to embed that content onto their own site, and even share the content with any of a number of social bookmarking sites! If someone were to use the Free IQ Player to link to your content through a popular del.icio.us the report would log a pageview at ‘freeiqvideo/PlayerInteraction/SharedVideo/delicious/mycoolvideo’! You will see which bookmarking service was used and what content was bookmarked! You will know what users are doing with your content!
And lastly you can see how users navigate through the embedded Free IQ Player. Inside the player, users are presented with information about the content they watch. All this information is organized into tabbed windows. Every time a user view’s this information, the player logs to google analytics a page view. These logs are independent of the content, so the url reported does not include the video Title as before. An example is a user views the author window is: /freeiqvideo/PlayerNav/WindowSelected/author.
Here is the breakdown of all the logging from the Free IQ Player to Google Analytics:
Video Tracking:
Play Started: /freeiqvideo/playstart/mycoolvideo
Play Completed: /freeiqvideo/playcomplete/mycoolvideo
This is the list of current integration with Google Analytics from the Free IQ Player. If you have any questions or requests, feel free to comment here or contact Free IQ.
Loading ...