StomperTools: Ranker & Scrutinize This

July 2, 2008 at 6:57 pm · 295 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.

Comments

StomperNet’s Stomper Universe | Interactive Flash Site Map

June 25, 2008 at 10:20 pm · 287 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.

So go check out the StomperNet Universe now!

Comments (1)

Firefox 3 + StomperTools Release and Atlanta Party

June 16, 2008 at 7:10 pm · 236 views · Filed under personal, work

Serious internet businesses require serious internet tools.

Firefox 3 is a dramatic step forward! Help Mozilla.org set a Guiness Book record by downloading the new release on Tuesday the 17th of June 2008 (11 AM PST).

To celebrate, StomperNet and Appcelerator are hosting a release party in Atlanta at Park Tavern as a part of a world-wide network of celebration Tuesday, June 17th at 7pm. RSVP at upcoming.org.

Join us if you’re in town, otherwise, check the downloads for Firefox 3:
StomperTools with SN Ranker and Scrutinize this, and the recent Scrutinizer 1.0 release.

Park Tavern
www.parktavern.com
500 10th St Ne
Atlanta, GA 30309
(404) 249-0001

Tuesday, June 17th 2008
7pm-9pm

Get the Stomper Scrutinizer browser vision simulator. Plus get StomperTools … featuring Scrutinize This and the SN Ranker SEO tool.

Comments

StomperNet’s Scrutinizer Update v1.0

June 16, 2008 at 6:58 pm · 176 views · Filed under portfolio, work

StomperNet’s Scrutinizer has recieved some updates!

• New help documentation
• Keyboard Shortcut Functionality
  • saving a screenshot
  • bookmarking a page
  • toggling the visualization
  • toggle auto-zoom
• Aesthetic improvements
• Performance optimizations
• Improved auto-update.

If you’re wondering what the heck StomperNet’s Scrutinizer is:

What is it?

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.

Top Ten Things You Can Do with the Scrutinizer

1. Simulate eye tracking in a usability task
2. Assess the ease of use of multi-step processes
3. Give your designer a fresh pair of eyes
4. Find out what “pops” in your design
5. Conduct findability challenges
6. Ask: does your visual grid work?
7. Evaluate your site’s contrast levels
8. Insure learnability in your template
9. Avoid button gravity errors
10. Tell the story of how your eyes work

Comments

StomperNet Scrutinizer Update | Features include Bookmarking, Screenshots & Loader

March 10, 2008 at 6:40 pm · 486 views · Filed under portfolio, work

Scrutinizer is constantly being updated and enhanced and with the launch of Adobe AIR 1.0 is easier than ever to install!

It now supports bookmarking, capturing and saving screenshots and displays progress as pages load.
With even more to come soon!

Go check it out at StomperNet’s public site for free download!
Here’s some images to show off scrutinizer!

Watching the loader while my page loads:

Scrutinizing this circlecube blog:

Bookmarking my page for quick access:

Comments (1)

Free IQ Player integrates Google Analytics for Video

March 10, 2008 at 5:19 pm · 556 views · Filed under portfolio, tutorial, work

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

Interactions:
Embed Codes Copied: /freeiqvideo/PlayerInteraction/EmbedCodesCopied/mycoolvideo
Email Sent: /freeiqvideo/PlayerInteraction/EmailSent/mycoolvideo
Bookmark: /freeiqvideo/PlayerInteraction/SharedVideo/bookmarkingService/mycoolvideo

Navigation:
Author Tab Selected: /freeiqvideo/PlayerNav/WindowSelected/author
Playlist Tab Selected: /freeiqvideo/PlayerNav/WindowSelected/playlist
IQPON Tab Selected: /freeiqvideo/PlayerNav/WindowSelected/iqpon
Share Tab Selected: /freeiqvideo/PlayerNav/WindowSelected/share
Email Tab Selected: /freeiqvideo/PlayerNav/WindowSelected/email
Embed Tab Selected: /freeiqvideo/PlayerNav/WindowSelected/embed

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.

Comments

Free IQ Player Updated!

March 3, 2008 at 6:43 pm · 466 views · Filed under portfolio, work

Here’s a post from the Free IQ Team!

We’ve been busy at Free IQ and just released our new video player!

Check it out by watching Brad Fallon on the vision of Free IQ.
Or see circlecube at Free IQ!

At the surface, the player looks much the same, but as you dig into the secondary functions, you’ll see a slew of enhancements made with you and all freeiq-ers in mind.

The layout has been updated to be more dynamic, more readable and web 2.0 friendly. The graphics got a make-over.

The updates to the playlist have cleaned up the interface and give helpful information about the content. We still get the ReviewRank for each item, and also we can see our personal viewing history, a feature we’re calling the ‘high water mark’. You can see how far into a video you’ve been. This high water mark is also shown in the scrub bar, for returning to where you left off quickly, just click the yellow arrow to return. Also the video currently being played in the player is specified as ‘Now Watching’ (how original).

The author window still displays the author’s portrait, biography and links to the author page. The author biography may contain html- such as links, which help viewers learn more about authors.

The IQPON window connects viewers to providers by giving users access to the content provider’s services!

Sharing options have been improved greatly!

Users may embed content on their own site directly from the player now! By choosing options for auto play and format user’s copy embed codes straight from the player, and paste it into their own site. The normal format uses javascript to ensure maximum compatibility with different browsing software, and the the extra simple format is for embedding content into sites which restrict javascript, such as MySpace and a handful of others, so there is always a way to embed content into your very own space.

Sharing by email is much faster now, as you can send to multiple people at once directly through the player itself (just separate the email addresses with a comma).

Sharing with the web is just as easy! You can copy the link or click your preferred social bookmarking site. Social bookmarking capabilities are built into the player, so with one click you can bookmark content to any of a number of social bookmarking sites (del.icio.us, digg, furl, google bookmarks, magnolia, reddit, stumble upon, technorati, windows live favorites and yahoo! bookmarks) with more to come.

All these methods are used to share content and are useful no matter where the player is embedded!

This player release features updates to the Full Screen mode as well. To take full advantage of the screen size we stretched the control across the bottom of the screen! The control tray will slide away after a few seconds giving access to full screen video playback. To bring the controls back, just more the mouse again.

Volume controls are updated for faster more intuitive interactive control.

By using the internal menu (just right-click to access it) you have access to all options in the player.

Also updated with this release is the integration with Google Analytics! There is new tracking built into the player and best news of all is that the player now supports both versions of the Google Analytics Tracking Code. So whether you’ve updated to the new tracking system or still use the Legacy code, this player logs interactions with the player to your google analytics reports! It will tell you how much people are watching your videos, which ones and how users interact with the player on your site. We’ll post about that later, once you’ve gotten used to your new player!

Another point to mention… if you’re a Free IQ regular and have already embedded content onto your site, the updates are automatic. You have nothing to do to enable these updates! It’s already done!

Enjoy the updates, we put a lot into it!

Let us know any suggestions you have for making the Free IQ video player even better - for you!

Comments

FLEX | 360 Atlanta | Day 3

February 27, 2008 at 7:05 pm · 686 views · Filed under personal, work

From the community…
people I saw quickly but didn’t get to attend their session: Renaun showed off his voip app Pacifica,  Zach from Yahoo showing some things available with Yahoo Maps AS3 API, Adam talking about Merapi where you can access Java from AIR apps and Joe showed us some awesome music app he’s working on, keep your ears open for noteflight(?)!

Brad Umbaugh- Practical 3-D: Immersive interfaces for regular people

Brad Umbaugh , Senior Developer @ effectiveui. In the discussion of 3D we pointed out that 3D is associated with the future. There have been many 3d success stories such as: games, CAD, sketchup, maya… But we decided that making good 3D interfaces is a lot different than making 3D interfaces- just because it’s 3D doesn’t mean it’s good.
Brad explained the steps in the 3d graphics rendering pipeline: place object in world coordinate system, illuminate models, transform world coords to viewing coords, perform clipping, project to screen and rasterize. Luckily there are 3d engines that will do all of this so we don’t have to think about it. It takes a lot of Linear Algebra Math. 3d apps are constantly performing lots of calculations, and thus can perform rather poorly.
Brad discussed the process of his Discover Earth Live project. They started project with papervision3d, but had problems with pinpoints and how they were wrapping around the globe as it spun. So, they tried Away3d and it fixed these problems “out of the box”. Another plus to Away3d they found is that it lets us do correct Z ordering.
We then talked about setting up the scene in away3d and making objects and he showed some 3D Globe examples: nike, mars.com, wii forecast, discovery earth live.

Ben Stucki - Reinventing Flex:

Ben an independent flex developer (nice soundtrack by the way), let’s talk about Flex, baby.
He started out giving everyone a pair of red/blue anaglyphic 3D glasses and showing us mr doob’s anaglyphic rendering tests. The 3d glasses work by filtering different colors to give your eyes two different views of the same image. Red filters out the red lines, cyan filters out the green/blue lines.
Ben has his own staging area for code that’s not yet released… lots of it is probably broken… but it is open source (benstucki.googlecode.com).
Ben then walked us through lots of openflux, his project that is rebuilding some built in componentes of flex with different proerties and capabilities in mind. Great job Ben!

Dave Hassoun - Flash Video tips (and tricks)

Dave from realeyes taught us about video codecs! Flash video gives us the compression options of sorenson, on2 VP6 and the famed H.264.
Sorenson is easy on cpu performance, but struggles with good color and quality. For the quality the file size is a bit high, but sorenson is a good standard.
on2 vp6 has high quality image, but lots of processing demand, plus it has transparency capabilities!
h.264 (& AAC/AAC+ audio is the newest with the most bells and whistles. As it’s new it’s only supported by flash player 9 (which is beginning to be less and less of an issue). It does support true HD video (1080p), multi-core support, many devices, and lots lots of metadata.
A general rule (equation) to help with encoding: frame height x frame width x frame rate) / compression = total bits/sec
Tools he mentioned to help with encoding: rools, riva, fmpeg, on2fix, sorenson squeeze, cs & adobe media encoder.
Dave pointed out that flex video integration was simple, but too simple, making it weak. There is only video display, which is very simple. AS3 is way better equipped to handle video.
h264 streaming requires a streaming media server, can stream or seek to any point (non-linear or random access), has quicker playback and is much more secure. H264 contains a lot of metadata: length, dimensions, codec, seek points, cover art, subtitles, audio book chapters, image tracks, and more!
Dave’s tips for video compression: quality in, quality out | use the right codec for the job | be creative | code reusability! write stuff to be reused | metadata is your friend, use it
He gave so many resources! I won’t copy them here, so go check his Presentation Notes and source. Here is one resource though, Tinic Uro’s blog about the flash player and video.

Juan Sanchez - Degrafa

Juan (better known as scalenine) taught about his open source project Degrafa - Declarative Graphics Framework for Flex. Degrafa uses mxml to make graphics so you don’t have to use the AS3 drawing API! It makes drawing objects more intuitive and allows you to do it using less code! Plus, rather than creating graphics in photoshop and importing the static image (which takes more memory and then can’t be modified), we can bind properties to the graphic and make it dynamic in flex. So far Degrafa allows us to make surfaces, shapes, objects, fills, strokes, groups, geometry compositions, segments, graphic image, graphic text, and even use svg path data, with much much more in the works! Degrafa is a great way to add custom graphics to your app and it supports advanced css as well, so it is very simple to skin your app! Juan showed us many examples of what degrafa can do and promised there is much more soon to come. Thanks for this great library Juan and everyone else at degrafa, and thanks for the T-shirt as well!

Personally, I got the most out of Day 3 at the conferenc! It was awesome! I got to attend sessions about 3D, drawing graphics, and video! Thanks to all the speakers and Big Thanks to Tom and John, who are Flex360!

Comments