Pie Based Navigation

Tuesday, October 28th, 2008 | Business | No Comments

A blog posting from Not The User’s Fault, with regards to software navgation and leveraging Pie navigation, Pie In The Sky

Go there, read it.

Jono DiCarlo (of Humanized) makes a great point, the standard list types of interfaces we normally use don’t make sense. 

In his post, he analyzes the benefits and problems associated with pie based navigation.

The greatest benefit, is that users associate a direction with an option — and can form habitual patterns of behavior.  This makes the navigation seem very logical.

To contrast with that, when the user gets comfortable with the location of navigation this way, he becomes very set back when that navigation structure changes.

Think about it as your car.  You, in your driver seat, are in the center.  Around you in all angles are different options for you to execute.  You know exactly where to look to find what you want.  It’s the same interface that web users can use.  They can efficiently get their mouse to the option they want.  

Alternatively, imagine every button in your car were on a long list.  You know where everything is, but you have to skim over all of the buttons whenever you want to hit any single other one.  You also have to reach further for some buttons than others.

The average distance the mouse has to travel is minimized, as all options are placed around the mouse at an equal distance.  

It’s a great idea.  Maybe the basis for a Flash navigation experiment in the future.

Tags: , , , ,

Steps to simplify complex projects

Thursday, October 23rd, 2008 | Business | No Comments

I just read a great article on the blog Lessons Learned by Eric Ries

The title of the posting, The engineering manager’s lament.


We’ve all been involved in projects that get out of hand.  Eric talks about how he managed to wrangle a project into control from the dangers of “scope creep” and the ever present management/engineering/sales problems.

You know how it goes, management asks, “Can your team get Feature A into the product by this absurd deadline?”.  You talk to your team, and they say they can.  

The deadline comes, and you have Feature A working.  However, your team doesn’t tell management that it has made some “questionable” engineering decisions along the way, and will have to still spend another few weeks making sure the implementation won’t break in the future.

Management sees the functionality working, and thinks work is done.

Management then decides to continue implementing new features, as current work is done.  Thus introducing bugs (or defects, as you will read in the article) that will affect development down the line.

Basically the article says that bugs are actually defects and bugs.  The author introduces a way of identifying these, as of yet, unidentified problems and advocates reporting these to management.  This should let management understand more about the decisions it is making, and also let your team be realistic about when they are actually done with a project.

Of course there are problems with this, and the author introduces various methodologies to address these issues:

  • Start doing automated testing with continuous integration.  
  • Run all tests and don’t permit check ins without running all previous tests.
  • Learn from mistakes, develop tests to identify problems in the future, invest in preventing these problems.

Tags: ,

G1 has arrived! Cheap, Familiar, Easy

Wednesday, October 22nd, 2008 | Personal | No Comments

The G1 is out today, you can check out the official site here, T-Mobile’sG1 Landing Page“.

I don’t have one.  So you won’t be getting a first hand perspective on the G1.  For that please go to Engadget, they usually do great jobs reviewing new toys (even check out their G1 section).

First off — the G1 is unlike the Apple iPhone, in that ANYONE can buy one.  That’s right, you don’t need to be a T-Mobile customer to purchase the G1.  

That’s a breath of fresh air.  We don’t have to activate it in store, we’re free to do whatever we want.

I just realized, that when using the keyboard on the G1, the trackball doubles as a mouse.  I know, it’s obvious to most people (I’m special).  It’s just like a mini laptop with one of those old trackballs.  

This IS a big deal.  Apple had to invent an entire new interface methodology for people to use the iPhone.  Yes, the iPhone interface is brilliant.  However the G1 interface is Familiar.  That’s right, something that doesn’t scare people away.  Something that developers are used to implementing and working with.  Something that means it will be much easier to port existing software packages to the — OPEN — platform.  

I know I’m a fan of the iPhone but this could give the iPhone a serious run for the money.  

It’s Cheap.

It’s available to Everyone.

It’s Familiar.

It’s Easy.

I hadn’t touched on that last one yet, easy.  In talking with one of my fellow iPhone friends the other day, I realized he hadn’t updated is iPhone 3G since he got it.  He was upset with the quality of the phone calls (as we all were at release).  He didn’t know you had to update it.  

I know what you’re saying — he should know to update it.  In actuality he’s one of the smartest people I know.  Perhaps he’s not the greatest person technicaly, but he is extremely intelligent.  

G1 has OTA updates.  That means Over The Air!  Over.  The.  Air.  When was the last time the iPhone did anything really over the air?  

Again, this update will be deployed to a much larger user base than an update on the iPhone (percentage wise), and it will affect the customer view of the device in a more positive way.

OTA.  I wish I had that.  As I type this my iPhone is tethered to my computer.

Tags: , , , , , , , ,

CSS in IE8 will support “Tables”, fixes problems in CSS

Wednesday, October 22nd, 2008 | Business | 1 Comment

There’s a great article at Digital Web Magazine, Everything You Know About CSS Is Wrong.

One of the problems that has always plagued CSS is absolute positioning, relative positioning, and the need to set things up like a “table”.  By that I mean setting up three divs to look like the following:


In the image above you will see the classic problem, code for a talbe structure like this would look something like:

<div class="outerContainer">
<div class="textContainer">... longer text ...</div>
<div class="textContainer">... shorter text ...</div>
<div class="textContainer">... shorter text ...</div>

The problem here, being that if the first text container grows, we want the other 2 containers to grow with it.

Obviously, we could specificy a specific height for the textContainer class, and they would all match.  But what if the first container copy grows, or maybe the copy in the 2nd or 3rd container grows longer than the first container.

This becomes even more complex when specificying multiple rows of textContainers, where there are vertically spanning cells as well.

In traditional “non-css” HTML this was done simply through tables, very simply actually.  Now that everyone has turned to CSS to make page sizes smaller, make styling effective, and increase flexibility of layouts — we try to avoid tables unless we are presenting a .. Table.

Normally I would have created a clever background image that has a top, bottom (both divs above and below the textContainers), and a tiling vertical background to appear like all columns have the correct sizing (when in fact they don’t).  Effectively removing control over each textContainer’s background, and the main container’s background from the CSS and putting it into a series of images.  

It worked but we sacrificed flexibility.

Take a look at the article, again, Everything You Know About CSS Is Wrong, as they detail how IE8 aims to fix this behavior through a series of CSS display properties.

Tags: , , , ,

Fun Flash – ThisIsSand.com

Tuesday, October 21st, 2008 | Personal | No Comments

Sometimes people do the dumbest things with flash.  A website can be entirely pointless, yet do something that entertains, and overall… is “cool”.

Here’s another one, http://thisissand.com/

This brilliant, yet simple, website lets you create sand sculptures by throwing sand around.

Click on the Grey block in the top left corner if you get lost.


Tags: ,

Protect Client Search Engine Placement with 301 Redirects

Wednesday, October 15th, 2008 | Business | 2 Comments

This is a big win for us web developers.  It helps maintain all the SEO work that has gone into a site, and lets us move site architecture around with minimal impact.

Many times I run across companies whose website just went from ASP/CFM/JSP/PHP/CGI/HTML/HTM to ASP/CFM/JSP/PHP/CGI/HTML/HTM.  Fill in the blank, migrating from one platform to another is a big deal.  To make matters worse, how is a search engine supposed to know NOT to link to an old file, and to redirect the same relevancy to the new file?

The magic of 301 Redirects

301 is an HTTP Status code (just like 404 and others, 403, 500, etc).

301 tells browsers and search engines that a page has been “Moved Permanently”


How can you do a 301 redirect?

First off, do NOT attempt redirecting unless you know specifically what to do.  Trying to implement a meta-refresh tag will hurt you more than it will help.  Search engines have become wise to the meta-refresh game that spammers have been involved with.  Do not do it.

There are 2 routes to take, server side, and code side.


Server Side 301 Redirects

If you’re lucky enough to be working on a server supporting .htaccess files, your life is easy.  

  1. Create a file called “.htaccess” in the root of your website
  2. Open the file in a text editor
  3. Set the contents to the following (replacing original, and new):

Redirect 301 /original/original.html http://www.yoursite.com/new/new.html

OR if you want to wildcard it:

RedirectMatch 301 (.*)\.htm$ http://yoursite.com$1.html

If your server is IIS, you can do a redirect with the following:
  1. In IIS (internet services manager), right click on the old file
  2. Select “a redirection to a URL”
  3. Enter the URL for the new page
  4. Select “The exact URL entered above” and “A permanent redirection for this resource.”
  5. Click “Apply”
Code Implementation of 301 Redirects (PHP, ASP, JSP)
Of course a 301 redirect can be implemented in the front end code for a specific file.  That can be done fairly effectively with very basic code.
Following are some examples of redirects in some popular languages:
PHP header( "HTTP/1.1 301 Moved Permanently" );
header( "Status: 301 Moved Permanently" );
header( "Location: http://www.newsite.com/" );
ASP response.setStatus(301);
response.setHeader( "Location", "http://www.newsite.com/" );
response.setHeader( "Connection", "close" );
JSP response.setContentType("text/html");
response.setDateHeader("Expires", 0);
response.setHeader("Location", "http://www.newsite.com/new.php");
Of course if you want to get fancier, you could create a script that automatically detects the page name and derives the new page name from that string (example done in JSP):
HttpServletRequest req1=(HttpServletRequest) request;
StringBuffer ReqUrl= req1.getRequestURL();
String RequestUrl=ReqUrl.toString();String source;
String str; 

source = RequestUrl;

str = source.substring(0, source.indexOf(".jsp"));

response.setDateHeader("Expires", 0);
response.setHeader("Location", str+".php");

That’s it.  It should be easy to move pages around from one platform to another, to a new domain, or a new directory structure.
Your clients will thank you, and it will save you the work of redoing all of your SEO work down the road.

Tags: , , , , , , ,

Android and Silverlight will help the iPhone

Tuesday, October 14th, 2008 | Personal | 1 Comment

So the #1 competition that the iPhone has, Google’s Android — and Apple’s big rival’s, Microsoft’s, rich web plug-in Silverlight — Will both help the iPhone?


Lets all be honest here, Apple’s been holding control of the iPhone in too close.  We all have wanted GPS navigtion (real gps navigation), VOIP applications, alternative email applications, alternative podcasting apps, better browsing experience, and an overall better experience.

Until now, Apple had the final say on all of those things.  Preventing applications that competed with the iPhone’s core functionality, relenting to implement common technologies such as VOIP applications, Flash in Safari, and other nice to have’s.

With the Android platform out there, we can all bet it will soon have both Flash and Silverlight running.  It’s just a matter of time.  

Apple can’t afford to be so stringent, with a fairly capable competitor doing things that will gain it significant market share.

I love my iPhone, but if the Android gets flash and Silverlight (not that I’m a fan of Silverlight, but at least it’s something) — I’d probably give Apple a week or 2 to make an announcement, then go right out and get one.  Not only that, I’d happily leave AT&T for another provider. 

We all hope Apple sees this, and starts helping us out.

Tags: , , , , , ,

Papervision3D update

Saturday, October 11th, 2008 | Business | 1 Comment

So far so good with Papervision3D.  It took me a few hours but I’m already mostly up and running with the new framework.

Later on I will post each step that I made in working with Papervision3D.

When I learn a new framework I like to learn each of the basic tools first in their entirety.  It helps later on when dealing with more complicated ideas.

Along the way I’ve run across a few extremely useful sites:

  • Mad Vertices – Jim Foley’s Brain.  Flex, Flash, Papervision 3D, Swift 3D and other cool stuff.
  • InsideRIA – Useful blog touching on more complex flash / actionscript 3.0 issues
  • EverydayFlash – Creative use of technology.  A blog about 3D Flash and Actionscript by Bartek Drozdz
The libraries that I’ve ended up with are:
Papervision is, of course, the core 3d engine.
Tweener provides some very nice 2D and 3D transformation animations with actionscript.  This is stuff I’ve always done by hand before, no longer!
AS3Dmod is a great library of cross-engine modifiers.  The modifiers provided include Bend, Noise, Skew, Taper, Bloat, Perlin, and Twist.  It has some nice developer documentation (for developers, not really mainstream).  To be fair, only hardcore developers should get themselves into these modifiers.
In a little over 5 hours I’ve managed to explore the nuclear functionality of all of these frameworks, so it’s quite possible.  
Sometime soon I’ll be posting my progress in a series of flash and actionscript source files.

Tags: , , , , , , ,

Papervision 3D work

Tuesday, October 7th, 2008 | Business | No Comments

Among us flash web developers, who hasn’t tried creating a 3D engine of their own before?

I think it’s par for the course for any flash programmer who has taken linear mathetmatics or 3d coding classes at some point in our histories.

I’ll admit, my last official adventuring into 3D engine work was maybe 8 years ago back when I was in the Computer Science program at Boston University.

At that point it was mostly implementing ray tracers, DirectX 3D transforms and other basic 3d manipulations (stick figures, kinematics, reflectivity, etc.).

Flash has been much more “complicated” as it were.  Given the processing limitations it’s always been a game of artifically implementing 3D effects, as opposed to creating a real 3D engine.

In my upcoming project, I’ll be playing with Papervision 3D (Blog, Project Home, Official Site).  

I’ve followed Papervision3D for a while now, watching as site after site wins awards.  

The most interesting thing, is that the sites that win awards for implementation of Papervision3D don’t implement extraordinarily complex 3d sites (at least so it seems, maybe that’s the magic) but artfully integrate a 3d engine into their experience:

  • Barcinski & Jeanjean – I love the unique “loader”, as well as simple early interactions to allow for loading, while the user doesn’t think loading is going on.
  • Fat-Man Collective – A great website fully integrating a 3d engine with design, seamless, simple, and very effective.
  • 13Flo – Ignore everything you think a website had to be, just take a look at this.

Results will be posted here.

Tags: , , , ,

AJAX Effects, including Heatmapping

Tuesday, October 7th, 2008 | Business | No Comments

I saw an article on Digg today, 20 Excellent AJAX Effects You Should Know.

They go through the usual stuff, auto completing forms, inline editing, fancy uploading, email, file directory, etc.

The most interseting, to me at least, is the “ClickHeat Clicks Heatmap“.

ClickHeat image screenshot of reported heatmap information.

The other effects are all standard, they are very useful, but as is noted in the article — heatmaps are an underused aspect in web development.


Way back when, I used to work on Heatmaps (although I didn’t have a name for it).  I had created a webpage that was just a grid of 5×5 transparent pixels.  The point of that, was that each pixel reported the mouse position on mouseover.  Back then (this was in 1998 now), I had tried to find a way to get the browser to be able to track down where the user “looks” with the mouse, while on your website.

Can’t we all understand just how powerful this is?

We can finally, clearly, see what a user is looking at with their mouse.  I know I do this — move my mouse around as I’m interested in something in an article.  I don’t know why I do it, but I do.

Here’s just some quick ideas:

  1. Identify if the users can “see” parts of your navigation, or if they are ignoring it
  2. Which articles are they looking at?
  3. Optimize the functionality to report on a single user, and record the time of the mouse position — giving a view of exactly where a user moves their mouse (they may provide this functionality)
  4. Adding mouse movement tracking (the software seems to only report clicking locations)
I know other reporting services like Google Analytics have website overlays that let you see visually where a user clicks, but this is a different approach.  It logs mouse events.  Minor tweaks to it, and we have an extremely powerful production and/or test environment logging software.

Tags: , , , ,

Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter



prestashop theme

virtuemart template