Archive for the ‘web’ Category

Wire-framing with PowerMockups

Sunday, August 28th, 2011

As a web developer, there are often times when you want to get across a layout or display transitions and interactions interactively to a client in order to speed up the design process and encourage rapid feedback and iteration cycles. I have tried a number of wire-framing tools ranging from straight up PSDs to Balsamiq to Expression Blend SketchFlow, each of which definitely has their pros and cons in relation to ease of use, speed to develop, ability to incorporate feedback etc.

A little while ago I came across a wire-framing tool which is a plug-in for Office PowerPoint at http://www.powermockup.com/. These guys have put together a tool which works seamlessly with PowerPoint and enables users to very quickly and easily create wireframes which can then easily be distributed. Thanks to the inbuilt functions of PowerPoint, clients or users can then amend the files with their own comments, or move things around themselves and return.

I figured one of the easier ways to test this would be to do a wireframe version of the site the tool came from :) . For those interested, this is the PowerPoint file I created.

I was amazed that with no training, and no reading or education, I was able to start getting effective very quickly. The whole site was done in less than an hour! See what I mean about rapid iterations for feedback cycles? I need to play a little more with some of the inbuilt animations of PowerPoint to see how easily integrated easing animations can be brought into things but I am very hopeful.

Overall I was very impressed with the tool; I shall definitely be using and recommending it with other clients and developers (those on the Microsoft stack at least).

CodeBurner Firebug extension

Wednesday, June 23rd, 2010

I just found this nice add in for Firebug called CodeBurner. Essentially it adds in a lot of HTML & CSS reference documentation. The nice thing about it is that when your browsing your HTML or CSS within Firebug you can right click an element and either get a description and get an example of its usage see the screenshot below.

.

image

 

Or you can get information within which browsers that particular element is supported.

 

image

 

Quite useful…

ASP.Net MVC Option Group DropDown Control

Tuesday, December 15th, 2009

Option Groups for drop down lists have been an HTML feature for many years now but have never been supported in any Asp.Net control. It was a bit of a shame recently whilst working on a new Asp.Net MVC web site to find that its still not possible to do out of the box.

optiongroup

However the good thing about MVC is that its a really easy  to write your own custom controls in the shape of HTML helpers so I thought I’d go about writing my own.

What did I want the control to do?

Firstly I wanted it to be strongly typed so no magic strings. I also wanted to be able to pass the control an enumerable collection of objects and use lambda expressions to tell the control which properties to render the text, value and how to group the dropdown items by.


<%= Html.OptionGroupDropDownList(
          ViewData.Model.Cars,
          car =>  car.CountryOfOrigin,
          car => car.Brand,
          car => car.Brand,
          car => car.Brand == "BMW")%>

Line 2 above represents the collection of cars we wish to render as option items.
Line 3 is the property value of a car we wish to group them by.
Line 4 is the property value of a car we wish to use as the option value.
Line 5 is the property value a car we wish to use for the option text.
Line 6 is a condition we can supply to tell the control which drop down item should be selected.

which renders HTML that looks something a little like this:


Ok so the code looks like this..

public static string OptionGroupDropDownList<T, TProperty, TProperty1, TProperty2>
( this HtmlHelper htmlHelper,
  string name,
  string optionLabel,
  IEnumerable<T> collection,
  Func<T, TProperty> optionGroupProperty,
  Func<T, TProperty1> optionValueProperty,
  Func<T, TProperty2> optionTextProperty,
  Func<T, bool> isSelectedCondition)
{
      var groupedCollection = collection.GroupBy(optionGroupProperty);

      // We are trying to generate the Html that looks something like this...
      //<select>
      //  <optgroup label="Swedish Cars">
      //      <option value="volvo">Volvo</option>
      //      <option value="saab">Saab</option>
      //  </optgroup>
      //</select>";
      using (var stringWriter = new StringWriter())
      using (var writer = new HtmlTextWriter(stringWriter))
      {
          writer.AddAttribute(HtmlTextWriterAttribute.Name, name);
          writer.AddAttribute(HtmlTextWriterAttribute.Id, name);
          //<Select>
          writer.RenderBeginTag(HtmlTextWriterTag.Select); 

          if(string.IsNullOrEmpty(optionLabel) == false)
           {
               writer.RenderBeginTag(HtmlTextWriterTag.Option);
               writer.Write(optionLabel);
               writer.RenderEndTag();
            }

           // Group by our optGroup parameter...in the above example that would be
           // "Swedish Cars"
           foreach (var optionGroup in groupedCollection)
           {
                var optionGroupLabel = optionGroup.Key;
                // label="Swedish Cars"
                writer.AddAttribute(Label, optionGroupLabel.ToString());
                writer.RenderBeginTag(Optgroup); //<optgroup>  

                 foreach (var option in optionGroup)
                 {
                   var optionValue = optionValueProperty.Invoke(option).ToString();
                   var optionText = optionTextProperty.Invoke(option).ToString();

                   var isOptionSelected = isSelectedCondition.Invoke(option);

                   if (isOptionSelected)
                     writer.AddAttribute(HtmlTextWriterAttribute.Selected, "true");

                   // value = "volvo"
                   writer.AddAttribute(HtmlTextWriterAttribute.Value, optionValue); 

                   // <option>
                   writer.RenderBeginTag(HtmlTextWriterTag.Option);
                   // Volvo
                   writer.Write(optionText);
                   // </option>
                   writer.RenderEndTag();
                  }
                  // </optiongroup>
                   writer.RenderEndTag();
                }
                 //</Select>
                writer.RenderEndTag();

                return stringWriter.ToString();
            }
        }

Hands off my mouse

Thursday, May 14th, 2009

Roger Johansson at 456 Berea Street posted this article today which reminded me how simple it can be to test your site for certain aspects of accessibility, in this case keyboard navigation of the site.

Unplug your mouse!

Can you still use your site effectively? If not, it is not up to scratch :)
Seriously simple genius. I love that.