Tic Tech Toe

Technology tips, tricks, and tools

Review of WireframeSketcher

I’m a big Eclipse supporter.  It is the de facto leading Java development environment, though impartial statistics are difficult to find.  If you are an Eclipse fan and want a well-integrated plugin to create screen mockups, look no farther than WireframeSketcher.

WireframeSketcher has a Sketching perspective and adds over 30 UI “components” in its palette:

Eclipse sketching perspective

Eclipse sketching perspective

You basically have two primary parts: a Screen and a Storyboard.  A screen is as shown above.  A storyboard is a sequence of screens:

Storyboard sequence of screens

Storyboard sequence of screens

You can then run a Presentation of your sequence in full-screen mode:

Presentation

Presentation

You can also save a screen to the clipboard or as a .png file.

Pros

  • Great integration with Eclipse.
  • Lots of UI parts to work with.
  • Storyboard and image output.
  • Very fast to create a mockup.

Cons

  • Not much documentation (though Peter is working on more).

Net: If you need to create mockups and you use Eclipse, this is a no brainer – get WireframeSketcher!

May 19, 2009 Posted by | Uncategorized | 1 Comment

Review of MockupScreens v4

Summary:

Note: This is a review of the latest release – version 4.  It is greatly improved from my previous review of the 3.17 release.

MockupScreens, as the name implies, helps you quickly create mockups of screens.  MockupScreens also lets you combine screens into scenarios and navigate page to page.  And you can create HTML and PDF files to document the scenarios.  It does not however let you actually run the mock app.  For that, you should look at Denim or Prototype Composer.

Bottom line: If you need to put together some use case scenario screens quickly, this is a good choice.

Pros:

  • Very fast creation of mockup screens.
  • Lightweight.
  • Supports scenarios.
  • Publishes to HTML and PDF.
  • Can set up “jumps” between screens based on user slideshow actions.

Cons:

  • Cannot run the scenario (though you can do a slideshow).

Detailed review

The version (4-beta) of MockupScreens reviewed here runs as a Windows application.

MockupScreens installs very quickly.  When run, a window opens that allows you to create one or more screens within a scenario:

main-window3

You add screens within the open scenario (and change the ordering) using drag and drop (DnD).

Creating a mockup

To edit a screen, you select it in the Screens panel on the right.  This displays the screen in the main editor area in the middle.  You then select a Widget from the lefthand palette and then place it within your screen.

Advanced properties

You can turn a component into a hyperlink to another screen during a slideshow by selecting the screen on the Jump to screen property on the Advanced tab for the component (at the bottom when the component is selected).

advanced1

You can also enter commentary for a component.  This causes a yellow “note” to be attached to the component.  These notes are optionally included in HTML and PDF output as well as slideshows.  You can change the settings via Tools/Options…

options1

Output

Finally, you can create an HTML or PDF document for a scenario via the Tools/Export to commands:

pdf-output

February 12, 2009 Posted by | Uncategorized | 1 Comment

Review of MockupScreens

Summary:

MockupScreens, as the name implies, is intended to help you quickly create mockups of screens.  It is a bit clumsy to work with, e.g. the UI navigation is not standard nor intuitive.  MockupScreens also lets you combine screens into scenarios and navigate page to page.  And you can create HTML pages to document the scenarios.  It does not however let you actually run the mock app.  For that, you should look at Denim or Prototype Composer.

Bottom line: If you need to put together some screens quickly, this is a choice, but there are others that are arguably better.

Pros:

  • Very fast creation of mockup screens.
  • Lightweight.
  • Supports scenarios.
  • Publishes to HTML pages.

Cons:

  • Some irritating UI drawbacks, like no undo and no alignment of multiple components.
  • A bit difficult to use.

Detailed review

The version (3.1.7) of MockupScreens reviewed here runs as a Windows application.

MockupScreens installs very quickly.  When run, a window opens that allows you to create one or more scenarios within a project:

project-editor

You add scenarios and screens within scenarios (and change the ordering) with the menus and menubar buttons.

Creating a mockup

To edit a screen, you double click on it.  This opens the screen editor:

screen-editor

You create a layout by selecting components from the list on the lefthand side.

Marks

One interesting feature of MockupScreens is that you can flag areas of the screen with comments (see “?”):

screen-editor-with-marks

You can also put numbers within the screen, with associated events to navigate to another screen during a slideshow of the scenario (via the “Jump to screen” attribute of the mark). This is done much more elegantly in other tools such as Denim.

Output

Finally, you can create an HTML document for a scenario via the Scenario/Export scenario to HTML command:

html-output

February 10, 2009 Posted by | Uncategorized | 3 Comments

Storyboards, mockups, prototypes – oh my!

I have been on a mission of late.  I have used Denim for a few years, but have always longed for a better way of storyboarding UIs for requirements, mockups, and such. This post will start toward sharing my findings so far.

First of all, why did I name this post as I did?  Well, it turns out that this genre of tooling seems to fall into multiple variants, depending on the tool’s focus.  I will review tools in all these categories and you can decide the best fit for your situation (and pocketbook).

So, to begin – here’s the list I have looked at in no particular order.  Additions are welcome.

I will create separate posts for each and reference them from here.

February 9, 2009 Posted by | Uncategorized | 1 Comment

Review of Balsamiq Mockups

Summary:

Balsamic Mockups, as the name implies, is very good at quickly creating mockups of screens.  It does not however let you actually run the mock app or generate scenario documentation.  For that, you should look at Denim or Prototype Composer.

Bottom line: If you need to put together some screens quickly and be able to update them as comments are made, this is the program for you!

Pros:

  • Very fast creation of mockup screens.
  • Very easy to use.
  • Lightweight.
  • Nice handling of imported images.
  • Easy to share mockups (e.g. http://www.mockupstogo.net/).

Cons:

  • No way to interactively “run” the mockups.
  • No way to create an OpenOffice document or PDF from a scenario or set of screens (though you can save the screens as artwork files and import into a document).

Detailed review

The version (1.5.23) of Balsamic Mockups reviewed here runs as a Windows application within Adobe Air.  It also has versions for a browser and wiki among others.

Balsamic Mockups for Desktop installs very quickly.  When run, a window opens that allows you to create one or more mockups of screens:

mockups-editor1

Tabs for each mockup show at the bottom.  I have two as shown above, one browser and one client.  The mockups are stored as bmml files.  These are XML documents, such as this:

<mockup …>
<controls>
<control controlID=”0″ controlTypeID=…/>
</controls>
</mockup>

Other than for reuse within Mockups (or if you want to create an XML transformation to create a document – anyone have this?), you don’t need to worry about these files.

Creating a mockup

It takes very little time to create a mockup of your screens.  One way I judge tools is how much you get stuck and how much you can do with little or no help. Mockups passes this test easily.  Lets walk through some steps (writing this takes a lot longer than actually doing it).

  • Create a new Mockup – Mockup/New blank mockup
  • In the Quick Add field, type “win”. You will now see Browser Window and Dialog / Window.  Pick either one you’d like.
  • You now have a window.  Double click it to set its name.

Notice: when a component is selected, its associated attributes window shows as a gray-ish panel to the side.  When you roll over it, it darkens and you can edit the component’s properties.  Also notice that tool tips help you along the way – very nice!

mockups-properties

  • Select some properties to change on the window, such as adding a scrollbar and a minimize button.
  • Use your Quick Add to add a tabbed pane.  Double click it to change the tab names to ones of your choice.  Change the properties to select the second tab and place the tabs on the bottom.  Your mockup should look similar to this now:

tabbed-pane

  • Add a comment as described above.
  • Choose Mockup/Export snapshot to clipboard.
  • Paste into a document:

paste-into-doc

You get the idea.  It is very easy to create and share screen mockups.

Tip

You can find mockups that others have created to reuse them online.  Choose /Help/Download More Controls and choose which of the dozens of screens that others have built (and maybe contribute your own!).

download-mockups-to-reuse

February 9, 2009 Posted by | Uncategorized | , | 1 Comment

Toward writing less code, part I

Much of the agile tooling efforts in recent months really come down to simpler ways to create functionality with less code. I recently wrote a justification for using Groovy, which is in my opinion a no-brainer for Java shops. I’m sharing it here, in the hope that others may benefit.

Groovy justification

(This is an OpenOffice document)

October 13, 2007 Posted by | Groovy, Java, Software development | , , , | Leave a comment

Tired of typical web editing?

Have I got a Firefox add-on for you! You can use your favorite editor any time you’re presented with a (typically small, hard to use) edit box on a web page. Just install It’s All Text! in Firefox and a small edit button will appear whenever your cursor is within the edit box.

00

Before you use the button, you need to indicate your editor. To do this, right click on the edit button and select Preferences…

0a

In the resulting dialog, choose Browse and select your browser program of choice. In my case, I use Notepad++ (highly recommended).

its-all-text-0b.jpg

That’s it! We’re all set to use the plugin. When you see the edit button, merely select it and the text (if any) in the edit box will be sent to your editor!

its-all-text-1.jpg

Enter your text as desired.

its-all-text-2a.jpg

and save it in your editor as often as you like (in this case via Ctrl-S). The edit box in the browser will turn yellow temporarily to tell you the changes have been made!

its-all-text-3.jpg

That’s it! Much nicer than these teeny-tiny edit boxes! Enjoy.

May 11, 2007 Posted by | Firefox, Mozilla, Tools | Leave a comment

Firefox: Dictionary Tooltip

Dictionary Tooltip is a Firefox add-on that makes it easy to look up words on a web page in the Firefox browser. Once installed, double clicking on a word in your browser will make a small “book” icon appear just below the word.

v2 icon

If you position your cursor over this icon, a dictionary lookup on the selected word will be attempted and displayed in a resulting dialog.

Note: to dismiss the dialog, just click outside the dialog or press Esc.

tech

In this case, no definition was found, so alternatives are offered. Lets try Wikipedia in this case.

v2 wiki

Or we could choose computing dictionary.

tech result

Most words will be found immediately…and it is smart enough to find variants of words.

def

And you can search again from within the dialog just by double clicking!

again

Acronyms work…

v2 acronym

…with an additional step…

acronym result

v2 action

…to get your final result.

action result result

As an added bonus, you can choose the reference to use.

List

Enjoy!

Note: If you use Hyperwords in combination with Dictionary Tooltip, you will want to configure Hyperwords so that its menu comes up with select + F2. Otherwise, you end up with both coming up on double click.

Technorati Tags: , ,

Powered by ScribeFire.

April 14, 2007 Posted by | Firefox, Mozilla, Tools | 2 Comments

Launchy

Launchy is a very cool Windows utility. What it does for you is elegant in its simplicity and yet powerful enough to replace many of your day-to-day actions. Once you’ve installed Launchy, you activate it by Alt-Space (assuming default “hot” key).

Lets look at some examples of its features:

  • Go to a URL

Start typing http or www and Launchy will change its icon to a world (for the Internet).

Link

Finish typing your URL, such as http://www.fairtax.org. When you hit Enter, your browser will display the page.

Link result

  • Search Google

Start typing goo and press tab and enter your search terms, such as darfur.

Google search

When you press Enter, your search results will appear in your browser.

Google result

  • Check the weather

Start typing wea, press tab once Weather is displayed and enter a location, such as Apex NC.

Weather

When you press Enter, a weather forecast for that location will appear in your browser.

Weather result

  • Run an application on your desktop or go to a bookmark

Start typing some string, e.g. calc and pause. Launchy will present a set of possible matches to what you want to do!

Calc choices

Your results will vary of course, but on my system Launchy found the Windows calculator, the OpenOffice Calc spreadsheet application, and a couple of Firefox bookmarks that contain “calc” somewhere in them. Nice.

  • Look up a definition of a word

Start typing dict, hit tab, and enter a word, such as throes.

 Dictionary

 Press Enter and the definition opens in your browser.

Dictionary result

  • Look up a movie on Netflix

Start typing netf, hit tab, and enter a movie title, such as Life as a House.

Netflix

Hit Enter and the search results appear in your browser.

Netflix result

  • Shop on Amazon

Got a book title that was mentioned on a web page? You could use HyperWords or stick with Launchy. Start typing ama, hit tab when Amazon shows up, and enter what you’re looking for, such as fairtax boortz.

Amazon

Hit Enter and the result is opened in your browser.

Amazon result

  • Look something up on Wikipedia

Start typing wik and press tab when Wikipedia shows up, then enter your search string such as fairtax.

Wikipedia

Press Enter and your results are again presented in your browser.

Wikipedia result

To do some administrative and configuration actions, you bring up Launchy (Alt-Space) and press the right mouse button (assuming a righthanded mouse configuration). A menu will appear.

Launchy menu

The skin I use is the default – I tried some others, but I liked the default the best. One nice feature you can access through the menu is the Directories option.

Directories option

This allows you to specify what you want Launchy to find on your system. You can include music, pictures, or whatever else you typically want to access. When you use Launchy to find files and directories, you just start typing as you would on Windows: c: then hit tab and the slash appears for you. Continue typing until you see what you want, e.g. c:\mag in my case.

Directory search

When you find the directory location you want, hit Enter and an explorer window will open.

Directory search result

You can read more about Launchy in the readme PDF that’s installed with it.

Readme


That’s it for our look at Launchy. Now, it’s your turn… I know there are people out there using Launchy. What cool things have you tried that I haven’t listed? Help me out here!

April 8, 2007 Posted by | Tools | 2 Comments

   

Follow

Get every new post delivered to your Inbox.