Out of the blue I got this message from iTunes today:

iTunes has detected an iPod in recovery mode.  You must restore this iPod before it can be used with iTunes.

Fair enough, foo happens, life goes on.  Or so I thought.  When you restore your iPod and reboot it, the same message comes back!  Over and over.

The solution, it turns out according to the collective wisdom of the blogs, is to change the drive letter of your iPod in Computer Manager.

Mine had, for reasons not yet understood, changed from J: to H: - which was in use as a network-mapped home drive.  This conflict was being reported in iTunes as an iPod in Recovery Mode.

It seems like all I do these days is download iTunes updates, and the messages are not getting any better when it goes belly-up.

Apple, this is turning into a one way relationship!

Listening To:  Zephyr Timbre, Absrtakt Fusion

I got this message again this morning and I am so sick of it!

Only 16 chars?  O RLY?  What if my dog's name is more than 16 chars long?

Further investigation of the JS source reveals that other error messages include:

Password can only contain letters and numbers

I am always talking to people about password policy and no wonder people are confused.  So much good guidance out there is buried under so much rubbish.

Compare this to the other user experience that is becoming more common:

Much better!  There was a time when it would be appropriate to explain why the second case is better... but in this day and age it should be obvious.  It is all about coercing people to do good passwords until they are made obsolete in the future.

Since Version 1.0.60731.0 of the ASP.NET AJAX Control Toolkit there has been a quite good Password Strength control available to the ASP.NET platform.  Everyone else (like my first, deliberately anonymous example) can just Google it!  There are plenty of samples available.

One that I liked was at Gerd Riesselmann's blog, where he shares (GPL) a simple example suitable for learning how this is done.

What do you think?  Is there any excuse for giving poor password guidance in 2007?

Mine, as so many other software companies rely on camel case for brand identity.  I knew as soon as I had to spell it out to the lady at ASIC that I was going to be spelling it out every time it is said in meat space.  I ‘spose that’s why the business card was invented.

I found this piece in the current New Scientist.  The one with Africa/Face on the cover.

It’s entertaining, if a little bit old hat to us tech folk, and talks to usability in URLs indirectly.  (emphasis mine)

CamelCase

What’s with the outbreak of bumpy words – or should that be BumpyWords?  Do BlackBerry, MySpace, YouTube and LinkedIn signal an attack on the English Language?

Don’t Panic.  They’re examples of CamelCase (or medical capitals, BiCapitalisatioin, CapWords and InterCaps) and they’re all about forming compound words by capitalizing each chunk to preserve its identity.  This produces “camel” words with a range of “humps”.

CamelCase has been around since the 1950s in a few brand names like CinemaScope.  But it was software engineers who really took CamelCase to their hearts, using it in their program-writing conventions, and developing two separate styles; UpperCamelCase (UCC) and lowerCamelCase (lCC).

It’s not hard to see why.  If you have to wade through lines and lines of programs day in, day out, it helps to be able to tell the difference between structural elements, functions, procedures and objects provided by the language, and the names of things programmers have defined themselves.  If it’s defined by a programmer, you can’t look it up in the manual; you have to find it in the program to work out what it does.

As soon as computer keyboards were revolutionised in the late 1960s to include upper and lower-case characters, happy programmers were suddenly able to make distinctions.  For example, while “switch” is a programming-language element, “switchAddressFields” would be defined by the programmer.  The latter is virtually unreadable when presented in all lower case (switchaddressfields).

CamelCase has now made it into the world of techie products and web services, but will it go totally mainstream?  Very possibly.

In the internet age, CamelCase seems to be surging because it’s not possible to put spaces into web addresses.  Many companies feel obliged to compress their names into (www.)OneBlockOfText(.com) to preserve brand identity across all formats and media.  And consider PricewaterhouseCoopers (note the combination of lCC and UCC) and GlaxoSmithKline.

Marketing Directors at Corel, whose products include WordPerfect, say CamelCase boosts readability.  Not only that, CamelCase brand names are easily turned into catchy typographic icons and are also easier to trademark, even if made up of words which may be tricky to trademark individually.

Should linguistic purists be affronted by this corporate styling?  Jim Wallace, president of the Society for the Preservation of English Language and Literature (SPELL),  is sanguine.  “The use of such new names in daily commerce is no serious threat to the language.  We see no reason to shun them,” he says.

We wait with more than a little trepidation the break-out of a rival convention used by programmers:  underscore_delimited_names.

New Scientist, 27th Oct 2007, pg 58.

Jim Wallace may well be cheerfully confidant – what have contrived acronyms done for the language?, and I would not dare to ponder that SPELL may be a Backronym.

See ORCA - the Organisation of Really Contrived Acronyms for additionally sillyness... Actually, both the SPELL and ORCA sites are in desperate need of being pulled out of the 1990s 

Listening To:  Reggatta de Blanc, The Police

In UX terms, Dell's web site is pretty good.  Three and a half stars in my book.  However, I don't know about you, but I think the following post-purchase survey question should be select all that apply, rather than select one.

I just saw this question come up while my sister just ordered her new Dell Inspiron and I had to screencap it...

But Mr. Dell, I cried... What do I choose if I want to use it for MySpace, biological research *and* missile technology research...

Today's post is about a nifty little trick that I have seen done with search text boxes on sites over the years and I decided that it had to be in my toolbox too.

What we are going for is a search box that looks like this when the page loads:

...and looks like this when the user clicks into it:

This technique seems to mostly be applied to search boxes, and I can see the benefit in that.

The post that follows is the amalgum of many VS-A's

To get this done, it is a bit of CSS to style up the inactive and active state for the text box, and a tiny bit of Javascript to tie it together.  I'm using the term active and inactive not in any technical sense, just to describe the two styles that are applied to our text box in response to the user activity.

(assuming the rest of the page is a drab #f0f0f0 in colour...)  These are the two style rules that we are using in the images above:

.inactiveSearchBox
{
    background-color: #f0f0f0;
    border: solid 1px #ffffff;
}

.activeSearchBox
{
    border: groove 1px #d9d9d9;
    background-color: #ffffff;
}

The markup for the input box is then as follows:

<input type="text" class="inactiveSearchBox" id="SearchStrng" 
   value=" Search Here"
   onFocus="this.className='activeSearchBox'; if(this.value==' Search Here')this.value='';" 
   onBlur="if(this.value=='')this.value=' Search Here';this.className='inactiveSearchBox';" />

As you can see it all happens in the onFocus and onBlur events of the textbox.  When the text box gets the focus it sets the class to be our activeSearchBox style and clears our standard text.  The onBlur event restores the default value if the user did not enter anything and sets our style back to the inactiveSearchBox style.

Glossary:

VS-A, n. View Source, followd by an "Ah!". 
See also: VS-****.

Listening to:  Former co-workers

You can do this today, like in 10 minutes...

OpenSearch is a format for describing how your site is searched, and optionally for adding Search elements to other formats like RSS. 

Auto-discovery of OpenSearch description documents is done via a link in your HTML head like so:

<link rel="search" type="application/opensearchdescription+xml" title="My Site" href="http://www.mysite.com/open-search.xml" />

The OpenSearch xml document is interpreted in the browser to add extra search providers in the integrated search function as so:

The contents of the file can be short or it can be long.  A bare bones example may be as simple as this:

<?xml version=”1.0” encoding=”UTF-8”?>
<OpenSearchDescription>
   <ShortName>My Site</ShortName>
   <Description>Search My Site</Description>
   <Url type="text/html" template="http://www.mysite.com/search.aspx?terms={searchTerms}"/>
</OpenSearchDescription>

The spec gives another simple, and one much more detailed example document.  The IE blog also goes into some detail... but in true internet fashion, View Source is the quickest path to an example

Security?

The bad news is, as of current browsers at time of writing (IE 7.0.6000.16473, Firefox 2.0.0.4) it seems controls are quite lax around what search template you can include, I had no problems setting the URL in the search template as being a completely different site!   

While it would be completely hilarious to posion someone's search bar as a prank with the following three facts...

• IE stores the search settings here: HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\SearchScopes
• FireFox stores them in the filesystem: C:\Documents and Settings\<winprofile>\Application Data\Mozilla\Firefox\Profiles\<mozprofile>\searchplugins
• (sounds like google, not work safe)

I would ultimately like some control here.  I can't see anything in Group Policy for enforcing/allowing/denying new search providers.  I'd like to add one to all PCs for my internal Sharepoint site for example.

DasBlog

Tangentally, If you are looking for the file to edit to add a new link url to a dasBlog site it is:

\dasblogce\themes\*\homeTemplate.blogtemplate

Listening To:  Sonic Youth, Daydream Nation

Every so often I check that web service, just to see what it comes back with.... nothing yet

Nice to see it is still in Vista, my little magic 8-ball dialogue! 

I just wish I could control the default.

So I feel that my last post on pretty gray info bars in Photoshop could do with a second chapter :)

This is a pretty long series so I'll be breif - what follows is the rough outline of how to achieve the same result as a User Control in your Visual Studio project.  The advantage of this aproach would be to allow you to dymanically add text or other sparkle of your own creation

Here's a sample:

Code follows

namespace GrayBar
{
   public partial class GrayBar : UserControl
   {
      public enum GrayBarModes
      {
         GreenTick = 0,
         YellowBang = 1,
         RedX = 2
      }

      public GrayBar()
      {
         InitializeComponent();
      }

      protected override void OnPaint(PaintEventArgs e)
      {
         Graphics g = this.CreateGraphics();
         g.SmoothingMode = SmoothingMode.HighQuality;

         // Fill the whole canvas
         Rectangle wholeControlSpace = new Rectangle(0, 0, this.Width, this.Height);
         Brush controlFiller = new LinearGradientBrush(wholeControlSpace, Color.DarkGray, Color.LightGray, LinearGradientMode.Vertical);
         g.FillRectangle(controlFiller, wholeControlSpace);

         // Make icon in corner
         Rectangle iconSpace = new Rectangle(1, 1, this.Height - 2, this.Height - 2);
         Brush iconFiller = new LinearGradientBrush(iconSpace, Color.Gray, Color.DarkGray, LinearGradientMode.Vertical);
         g.FillEllipse(iconFiller, iconSpace);
         base.OnPaint(e);

         Font iconFont = new Font(FontFamily.GenericSansSerif, 12, FontStyle.Regular);
         string iconText = "";
         Brush iconTextBrush = new SolidBrush(Color.NavajoWhite);

         float fontHight = this.Height; 

         // The Font, Text and Colour depends on the setting on our GrayBarMode property
         switch (GrayBarMode)
         {
            case GrayBarModes.GreenTick:
               iconFont = new Font("Wingdings 2", fontHight, GraphicsUnit.Pixel);
               iconText = "P"; // P == "tick" in "Wingdings 2"
               iconTextBrush = new LinearGradientBrush(iconSpace, Color.DarkGreen, Color.LightGreen, LinearGradientMode.Vertical);
               break;
            case GrayBarModes.YellowBang:
               iconFont = new Font("Arial", fontHight, FontStyle.Bold, GraphicsUnit.Pixel);
               iconText = "!"; 
               iconTextBrush = new LinearGradientBrush(iconSpace, Color.Orange, Color.Yellow, LinearGradientMode.Vertical);
               break;
            case GrayBarModes.RedX:
               iconFont = new Font("Arial", fontHight, FontStyle.Bold, GraphicsUnit.Pixel);
               iconText = "X"; 
               iconTextBrush = new LinearGradientBrush(iconSpace, Color.Maroon, Color.Red, LinearGradientMode.Vertical);
               break;
            default:
               throw new ApplicationException("Unknow Mode");
         }

         float iconTextXPos = (iconSpace.Width / 2) - (iconFont.GetHeight(g) / 4);
         float iconTextYPos = (iconSpace.Height / 2) - (iconFont.GetHeight(g) / 2);
         g.DrawString(iconText, iconFont, iconTextBrush, iconTextXPos, iconTextYPos);

      }

      private GrayBarModes _GrayBarMode = GrayBarModes.GreenTick;
      public GrayBarModes GrayBarMode
      {
         get
         {
            return _GrayBarMode;
         }
         set
         {
            _GrayBarMode = value;
         }
      }

      private string _MessageText;
      public string MessageText
      {
         get
         {
            return _MessageText;
         }
         set
         {
            _MessageText = value;
         }
      }

   }
}

Just thought I'd make a post on what can be done to jazz up the average message bar or UI element.  In this example I'll be doing it by way of a Photoshop tutorial I hope everyone can follow.  As always, leave me a note in the commenst section below if this leaves any questions unansered.  It's a bit lengthy but I hope that is because I'm including enough detail.

Step 1: Start with a new image that will be the size of the UI piece you need.  In this case 500 pixels wide by 25 pixels high:

Step 2: Select the gradient tool (Keyboard Shortcut: G) and customize as follows (things to click on are highlighted in Red on the sample screen below):

• Choose the Reflected Gradient mode from the toolbar
• Drop down the Gradient picker and choose the Foreground to Background gradient

Sample screen:

Step 3:  Make a background

Select a background and foreground colour in the toolbox that match the look you are going for.  Today I am going for light gray and dark gray because as everyone known things that are made out of "technology" are gray! 

Notice the lighter colour is above the darker colour - you can swap the foreground and background colour with the X key on the keyboard

Now click and drag your mouse from top of your image to the bottom.  You will want to hold the Shift key down - this makes sure your gradient is painted straight with regard to the edge of the image.  You may want to have a couple of tries at it to find something you like - remembering that you can start your drag from the canvas outside your image.

Mine now looks like this:

Step 4:  Adding a highlight

An image in Photoshop is made up of layers.  A discussion on layers is worth a whole book, but just do as I say you will be OK   I'm saying this now because it is from here on dowm that layers come into play for our example.

Duplicate the layer that we made our gradient on by pressing Ctrl-J on the keyboard.  Watch the Layers window inside Photoshop when you do this and you will see a new layer being created.  Change the blend mode of this layer to be Differnece.  Don't worry if your gradient turns black - we'll sort that out in a second.

The Layers window will look like this:

Now:

1. Invert the new layer by pressing Ctrl-I.  This should again change the look of your image but don't worry - few more steps to go yet.
2. Press D on your keyboard to reset your toolbox colours to Black and White.
3. Click the Add Layer Mask button on the Layers window to add a Layer Mask to our new top layer
4. Press Ctrl-Backspace on your keyboard to fill the layer mask with the background colour - Black.  This has the effect of making our new later not show at all.

So what is the point of making a new layer and then hiding it?  Well, we don't want to hide all of it - now we will make a small piece show through the Layer Mask that is hiding the Inverted copy of our gradient.  I am choosing to show a circle but you can play with different shapes.  To do this:

1. Select the Elliptical Marquee tool from the tool box.  This one is hiding behind the rectangular marquee tool.  Press Shift-M to switch between the available types of marquee until you find the one with the circle icon in the toolbox.
2. Hold down the shift key to force the Elliptical Marquee to make only circles, not an oval or ellipse, then click and drag over the left side of yoru top layer to make a circle.
3. Press the X key again to swap the Foreground and Background colours agian - now White should be the background colour.
4. Press Ctrl-Backspace again on your keyboard to fill our little circle with White.  You should now be seeing the inverted gradient only in the circle.  That is what the layer mask is doing for us - Where pixels are White on the layer mask, the layer it is hiding will shine through.  While pixels are Black on the Layer Mask the associated layer will not be seen.
5. Right-click our top layer on the Layers window and choose Blending Options.  Choose Bevel and Emboss and then tweak the sliders to taste.  Here's what values are working for me today:

By now our graphic will look something like this:

Step 5:  Adding Modes

Here I'd like to use the same graphic for Error, Information and OK messages.  I'll use System.Drawing to actually paint the message text onto the image on a form, but for now I just want three states for the message that I can choose from.

Press the T key on the keyboard to choose the Text tool on the toolbox.  I'm now going to set the foreground colour to a nice blue, click above our new circle and press type a question mark: ?

You will need to change the font face and font size on the toolbar to suit.  Once you have what you like click the Tick button on the toolbar to save this question mark as a new text layer.  NB:  Using the text tool you can always come back to this layer and change it.  I have also added a Drop Shadow to my text layer using the Blending Options menu item again, but this is just down to personal taste.  Try it and see what you think.

Now my screen looks like this:

Notice that all the layers have an Eye icon in the first column.  This is so you can show or hide whole layers at a time.  This will become important shortly!

Now hide the Question Mark text layer and add two more:  one for the famous Red X and another for a Green Tick.  Hint:  There is a tick symbol in the Marlett font under the lower case b key.

Step 6:  Create final images

Remember what we said about showing and hiding individual layers?  Here's where it becomes useful.  We are going to save this image three times.  Each time we save it we will make a different combination of laters visible before saving. 

So first make sure your two gradient background images are showing plus only one of the text layers.  Start with showing the Question Mark text layer and not the Red X layer or the Green Tick later, then choose Save For Web from the File menu.  Choose a file name like InformationBar_Question.jpg.

Your choices for GIF vs. JPEG vs PNG, compression etc are all for the purposes of this exercise personal taste.  Depending on if the image will end up on a web form or a windows form your choices here could matter a lot!

Now repeat the process showing only one other text layer at a time and naming accordingly.

Here are my three final images:

InformationBar_Error.gif:
InformationBar_OK.gif:
InformationBar_Question.gif:

Advanced Class:  A few extra things to try

• Make a new Gradient out of as many colours as you want.  Ninja skills in making a gradient is the art of being able to make something look like is concave or convex on the page.  Most important in this is making sure all UI elements on a page cast the same shadown (direction, colour and spread) and apear to be lit from the same direction.
• To keep things on-brand, grab existing on-brand grapics and CSS sheets and stealresearch colour information on them. 
• Use the sRGB colour space when targeting the web.
• Save your master image as a PSD file to preserve the layers and make it easy to maintain if things change in the future. 

Listening to:  Perry Farrell - Song yet to be sung

So I came across a problem using a old CSS trick to make a tab strip/menu bar on a site from a Unordered List inside a Div

To create the tabs the trick is you can use some CSS like this:

#nav
{ 
   float:left ; 
   margin: 0; 
   padding: 10px 0 0 46px; 
   list-style: none;
}
#nav li
{ 
   font-size: 150%; 
   float: left; 
   margin:0; 
   padding: 0;
}
#nav a
{ 
   float: left; 
   display: block; 
   margin: 0 1px 0 0 ; 
   padding: 4px 8px; 
   color: #333; 
   text-decoration: none; 
   border: 1px solid #949494; 
   border-bottom: none; 
   background: #686868; 
   color: #949494;
}

...to turn a <UL> with the ID="nav" into some tabs.  For example we add the following to the master page:

<ul id="nav" > 
   <li id="navHome"><a href="default.aspx">Home</a></li> 
   <li id="navProducts"><a href="products.aspx">Products</a></li> 
   <!-- ...and so on... -->
</ul>

OK so far.  The thing with tabs is you always want the tab of the current page to glow a little or something to indicate what page the user is up to.

A common way is to assign an ID attribute to the body tag of each page and include some CSS that looks at the body ID and overrides the #nav a  for the current page.

The trick comes when the pages all descend from an ASP.NET 2.0 Master Page - the body tags are going to be identical on each page.

As luck would have it, CSS lets us select based on any attribute.  Once the page is rendered each page will get its own form tag where the Action attribute represents the current loaded page as so:  

<form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm">

Which would let us add the following to our stylesheet:

#nav a:hover, body form[action="Default.aspx"] #NavPlaceHolder #nav #navHome a
{
   background: #ffffff;
}

OK So far but the problem is it is case sensitve!  We would need - If the page loads as default.aspx our tab won't highlight.  This just won't do!

The trick is to add a new ContentPlaceHolder in our master page straight above the UL listed above

<asp:ContentPlaceHolder runat="server" id="pageIdPlaceHolder" ></asp:ContentPlaceHolder>

Each page that descends from our master page should then override that ContentPlaceHolder to add an empty Span with a page-specific ID as so:

<asp:Content ID="pageIdContent" ContentPlaceHolderID="pageIdPlaceHolder" runat="server" >
   <span id="ProductsPage"></span> <!-- This page will show the Products tab as selected -->
</asp:Content>

and then we can add a rule to our CSS for each page that would read:  Whenever there is an element with the ID="ProductsPage" right next to one with the ID="nav" do the following.  The + operator selects the next adjacent node in the document as so:

#ProductsPage + #nav #navProducts a
{
   background: #ffffff;
}

And there you have it!  Accessable and maintainable nav bars from a UL using CSS, plus keeping all the time saving layout features of Master Pages.

Listening To:  The History Of Breaks

I love finding little nice features.  I just discovered the following combination in CodeRush:

alt-UP/alt-DOWN - Change visiblility (public/private/protected/friend) of property, variable or class that the cursor is inside

I've got to hang around late tonight for a conference call with London (on a Friday night no less!) but finding that has made my day.

We should all try to remember the importance of little units of joy in the software we make.