Another case where you may need a mockup is when re-designing an existing site, or extending it with a new section. Mockup Builder is a Silverlight-powered Web app that provides a very effective way to put those mockups together.

For this review, let’s start from the end. Here’s a mockup I made with Mockup Builder in a couple of minutes:

So we’ve got a headline, a subhead, a button and a video player. Anyone looking at this can see at a glance what these components are and where they sit on the screen in relation to each other. Now let’s see how I got them there:

So the interface looks a bit like the Ribbon in Office 2007/2010. It’s a horizontal menu up top, and then a row of large icons in every category. Not only is it similar to the ribbon, but it also gives a nod to Mac OS X’s dock:

See that zoom-in effect? Nice. Basically, all you have to do is go to the category of the item you’re looking for, find that item, and drag it onto the canvas. Removing an item is just as easy — just click it and hit Del. If that sounds basic, it’s because this is an app you’re supposed to be able to use instantly. Ideally, it should be as easy as drawing your mock-ups on paper.

Once you put your UI elements on the screen, you might want to align them. When you select more than one element, the sidebar changes to present a list of alignment commands:

Some of the icons are a bit similar, but if you hover over them, they show clear tooltips.

Next, let’s talk a little bit about the Screen Manager. You can use Mockup Builder to plan more than one screen. For instance, you can build a Wizard in an app, or a site registration process. Each step would take up one screen, and you can add as many screens as you need. But if it’s a Wizard interface, many elements repeat. The window always has to be in the same size, and you always have a Next and Back buttons. Mockup Builder’s developers thought about that, which is why you can create “Template Pages”.

A Template Page is just a basis for another page. You can create one page with your frame, and then use it as the template for all other pages. Here’s an example:

See how the background is greyed-out? That’s because I just created a new page, used my “main” page as the template, and added an alert box on top. That was easy!

But how can you switch between screens? Well, I’m glad you asked! Turns out you can select any element (button, label, whatever) and just link it to a screen. Here’s an example:

In this case, I linked a button to Screen 3, which is the Alert screen. So when you click that button, the presentation will jump to screen 3. That’s right – I said presentation, and that’s what we’ll look at next. After all, when the time comes to share your brilliant idea, you’ll want a nice way to show your mockup. Mockup Builder provides a Presentation View just for this purpose. It looks like this:

So your mock-up looks exactly the same, only it’s “static”, so to speak. In presentation mode, links work (so if I click Boom!, I get an alert box). Also, you can’t drag elements around just by clicking them. You get a host of other tools useful for talking about your creation (rather than directly changing it). Here’s the presentation-mode toolbar:

The first button exits presentation mode – they could have made this clearer. But the others are quite clear. You can point at things on the screen, doodle around them, erase other marks (not the mockup itself), add text, etc. Here’s my interface after I played with some of the presentation tools:

This is fantastic for showing things on-screen in a presentation, or even in a Skype screen-sharing session. Speaking of which, you can also invite other people to look at your mock-up:

The resulting email contains a simple link. In fact, let me share it with all of you right now: http://mockupbuilder.com/App/132 — simply click that, and you’ll be transported right into this cutting-edge self-destruct interface, which you can tweak and improve to your heart’s content.

Bottom Line

As a web designer/content author, I am often called upon to come up with new layout ideas. I have no doubt I will be using Mockup Builder for this in the future — it is a very capable, fast and free tool. Lovely.  Have a go at it yourself and let us know what you think of it in the comments.

Given the array of Microsoft products and services available, it can become difficult to remember any single service very well. You may have heard recently about Microsoft Silverlight – indeed, its likely because some Microsoft websites and software don’t work correctly without it. What is Microsoft Silverlight, and how does it matter to you?

In The Beginning…

You may have heard of Microsoft Silverlight as early as 2007. This is when the first version of Silverlight was released. This early version is likely best described as “online presentation software”. Silverlight started as a web application framework that provided a method of building interactivity into online content. Input could be taken from a user’s computer, and appropriate results would happen with in the application. Video, in the form WMA, WMD 7-9 and VC-1 was support, as was MP3 audio.

Is this sounding familiar? It should, because Silverlight from the very beginning had goals similar to Flash. You view Flash content constantly, often times even when you’re not aware of it, but Flash has always been criticized as inefficient and somewhat buggy. Silverlight offers an alternative.

Silverlight Today

Updates to Silverlight have been provided regularly since the original release of Silverlight in 2007.  Each new release of introduced some fairly substantial new features.

Silverlight 2 was perhaps most famous for introducing Deep Zoom, a feature that made it possible to display a series of high-resolution photographs as thumbnails, yet also display extremely high-resolution detailed photos if the user zooms in. There are many good examples of this online, one of which is the Hard Rock Memorabilia website.

AAC audio support an H.264 video support was added in Silverlight 3, as well as support for 1080p streaming and other media features. This bolstered Silverlight’s already reasonable capability as a media player, making it a good alternative to Flash for streaming video.

The most recent version is Silverlight 4, which was released in April 2010. This version’s most important update was problem the addition of Google Chrome support. It was also made possible to include webcam and microphone input in Silverlight apps.

These are, obviously, not all of the updates made to Silverlight over the years. If you’re an actual developer, and not an end user, the additions to the framework over the last three years have made big changes to what you can achieve. For users, however, the basic result is this – Silverlight is a lot like Flash, but is often quicker and has features (like the Deep Zoom Support) that are difficult or impossible for Flash to replicate.

However, Silverlight is a relatively new and not entirely understood player on the scene. The situation of Microsoft’s Silverlight is actually rather ironic for the company – in this case, they appear to have a competitive and arguably superior solution, but are being held back by the fact that a competitor (Adobe’s Flash) already has an entire ecosystem of applications and experienced developers surrounding it.

Perhaps the best way to see what Silverlight has to offer, however, is to simply use it. Microsoft’s website offers a showcase the highlights a number of websites, gadgets and tools that make use of this framework. Some are pretty damn cool. Others aren’t.

Compatibility

If there is one thing that Microsoft can offer its projects, it is access to a very large user base. Anyone Windows XP, Vista or 7 can use Silverlight with Chrome, Firefox, Internet Explorer and Safari. Silverlight also works in Safari on Intel-based Apple computers. Windows based smartphones support Silverlight as well.

All current Windows mobile smartphones and Windows operating systems should already have Silverlight installed. If that’s not the case, however, grabbing it is easy. Installation should take less than a minute.

Conclusion

Now that I’ve explained the basics of Silverlight, it is time for the geeks to weigh in. I think there is a lot of promise here, but the fact remains that Flash is the 800-pound gorilla. It remains in the middle of the ring, ready to take on all challengers. What do you think? Is Silverlight a reasonable alternative to Flash? Or, just as importantly, will both Silverlight and Flash succumb to HTML5?

The new version of Bing Maps has a unique feature called Maps Apps, which are extra components you can add to their mapping software to unlock more functionality.

In this guide, I’ll cover a few new Maps Apps that can help you plan your next trip better.

Using the New Bing Maps

Before you can get started, you’ll have to install Microsoft’s free Silverlight plugin to view the new Bing Maps. Silverlight is similar to Flash and allows your browser to run interactive web applications.

Not sure if you have Silverlight installed? Just head over to the new Silverlight-powered Bing Maps and you will receive a notification if you don’t have it.

To use Bing Maps Apps, you need to use the new version of Bing Maps. You can access the new version by clicking the Try it now link under Explore the new Bing Maps at the Bing Maps website, or view the new version directly by clicking this link.

Bing Maps is similar to other online map applications like Google Maps, so you should feel right at home when using it.

Access Maps Apps

To access Maps Apps, click the Maps Apps button which is located in the bottom left corner of Bing Maps.

This will open a window that displays the 30 (and growing) Maps Apps that are currently available. To use Maps Apps, simply click on one to activate it. Below are some of the newer additions to Bing Map Apps.

Calculate Distance Between Locations

If you’re doing any serious trip planning, it’s always a good idea to figure out the distances between certain points of your route to plan for food and refueling.  Bing Maps makes this easy with the Distance Calculator app.

To use the Distance Calculator, type in a location into the search box or drag the orange flag to a location on your map.

/p>

You can add your entire trip, destination by destination, in the Distance Calculator and it will show distances between each location.  You can change the order of your destinations by using the arrows in the left sidebar.

In addition to showing you individual distances, the Distance Calculator will show you total distances for both flights and road travel.

Find a Parking Spot

Click the Parking finder Maps App to get parking information for airports and cities utilizing information from BestParking.com.

The Parking Finder app supports several large cities and many airports. After you’ve added the app, click the Cities or Airports tabs to select your destination. Your map will then be updated with data from BestParking.com overlayed on top of your destination.

Find a Hotel

The Hotel finder app makes it easy to find a hotel at your destination using information from Bing. Click the Hotel finder button in Maps Apps to activate this feature.

Small purple indicators will appear on your map showing the locations of all hotels in the area. Clicking these indicators reveals details about the hotel, and clicking the hotel’s name displays additional information (including reviews) in the left sidebar.

These were three of my favorites among the recent additions.

A few apps not covered in this article, but would also be helpful when planning a trip are Current Traffic, Roadside Attractions (great for family vacations), and Local Events.

Give the new Bing Maps a try and share your thoughts with us in the comments!