Tom Mollerus' Weblog

My company, Ping Identity. Often imitated. IMPOSSIBLE to duplicate.

I've recently found myself evaluating wireframing tools, and I thought I'd share the results of my analysis. First, let's put out a definition of just what a "wireframe" is:

"[a wireframe] is a visualization tool for presenting proposed functions, structure and content of a Web page or Web site. A wireframe separates the graphic elements of a Web site from the functional elements in such a way that Web teams can easily explain how users will interact with the Web site."
From Webopedia

Here are the main criteria I used to compare wireframe tools:

• I would prefer an online tool, or at least a desktop tool that offers real-time collaboration instead of file fragmentation. This tool should offer the ability to preview or user-test the wireframe over the web.
• I would love a tool that promotes and supports gradual enhancement of site elements, starting with basic page elements showing relative priority, then adding layout, then adding visual design.
• I would love functional prototyping, where you can configure clickthroughs from one page in the wireframe to another. In-page functional prototyping (such as drop-downs, popups, overlays, AJAX, etc., would be a bonus).
• I really want master templates to support global changes to page elements (ie, when you change the header or footer or even the layout of the template, it affects all pages in the wireframe).
• Export in HTML/CSS is highly preferred since it would save me time, but it's not completely necessary from my perspective.
• I would love the ability for us to add comments and annotations to individual page elements. This will help us evolve each wireframe, and annotations can serve as valuable notes during development to tell webdevs how each page should function.

I looked at the following tools:

• Like the snap-to alignment!
• Drag pages onto page elements to create links
• I like the ease and simplicity, but there doesn't seem to be a header/footer/page wrapper-- no master templates.
• Only exports as PNG/PDF.

• Exports as HTML.
• I don't like the open dialog, but I love the fact they have templates for different devices.
• Flash-based, and so the interface just isn't as fast as others.
• Controls for master templates are very hard to find.

• Requires Flash
• Has page commenting
• I like the presence of the drag-n-drop widget list, but it's ordered alphabetically instead of by functional groups, and the drawings look like a pencil sketch.

• It's a download, but has collaborative access (even SVN, where you can check out individual pages).
• Can upload files to share.axure.com to generate password-protected prototypes, or can generate local prototypes.
• You can export all copy
• You can gather and manage comments
• You can add annotations/page notes
• Export HTML
• Masters make templates for header, footer, etc.
• Disappointing that you have to publish specs to MS Word
• Disappointing that it's not a one-step publish to a web-available prototype.

• Has templates and masters
• Has component/widget palette, but these tend to be richer and more complex than I really want.
• Has page documentation and annotation
• Lets you modify CSS and HTML

I've been tearing out my hair, muttering curses under my breath, and slamming my fists to my desk for much of this week. The fault lies with Subclipse, and its stubborn refusal to find the default SVN client (namely JavaHL) that I so kindly installed for it on my MacBook Pro.

It all started when I completely rebuilt my Eclipse environment, using the latest version, Indigo, so that I could install the wonderful PhoneGap plugin. I installed the latest version of all of my plugins, including Subclipse, and I also installed the latest CollabNet subversion binaries. Subclipse's wikipage for JavaHL says that if you install these binaries says that you shouldn't have to do any further configuration to get Subclipse to work, but in my case that turned out to be wildly optimistic, to say the least. Each time I tried to use a Subclipse feature, I was presented with the dialog that I gather all too many people are familiar with: "Unable to load default SVN client". A search across the Googles for this sentence gave me a lot of results, almost all of which referred to confirming the path variables in your .profile file or your eclipse.ini file. I edited, I confirmed, I failed. Again and again. I even tried to install SVNKit, but their subversion client doesn't support the svn client version of 1.7.x that Subclipse was looking for. Aargh.

The binaries that Collabnet installs have version numbers of "1.0" in their filenames, so you really can't tell what version they are. Instead you have to run "svn-javahl --version" to get that information. And what do you know, I had version 1.6.x.

So the final solution?

1. Install MacPorts if you don't have it already.
2. Use MacPorts to install the JavaHL bindings (you'll get the latest version by default):
   sudo port install subversion-javahlbindings

After watching Ray Camden's show-and-tell session today on using PhoneGap to create his mobile app WTFRU, I was inspired to install some of the same Eclipse plugins that he used so I could create some apps myself. It's been a while since I fiddled with the Android SDK, so a lot of my packages were way out of date.

But I ran into errors while trying to updated the Android plugins; quite a few of the errors in the update log referred to messages such as "No repository found containing org.eclipse.mxunit/osgi..." Most of the messages referred to that osgi library, somehow. I thought that somehow I had some majorly screwed up libraries on my hands.

After searching, it turned out the problem and solution were relatively simple: update URLs should have trailing slashes at the end. Refer to this blog post for the specific solution. If anyone else runs into update issues because you're inspired by Ray's work, I hope this solution is helpful to you.

A good friend of mine, Kirby Salerno, just launched a new business called Classroom Window that aims to democritize the process of evaluating educational textbooks and resources. It's an incredible idea, and I want to help spread the word. Here's how Kirby puts it:

"ClassroomWindow addresses an absolutely critical missing element in education -- understanding what works, and for which kids. Sounds obvious, but it doesn't exist (yet). Our mission is to provide transparency into the effectiveness of educational texts, tools, and resources. It is Yelp + Consumer Reports for education products and services, combining crowd-sourced input from teachers and others on the front-lines of education with expert opinion and student data."

ClassroomWindow is preparing for a private beta later this year. If you or others you know (teachers in particular) would like to have their voices heard on which products work and which don't, please sign up for the beta at www.classroomwindow.com, check them out on Facebook, and follow them on Twitter.

I want to thank Marc Esher for a great presentation last night on how to install, configure, and use Jenkins and ANT to provide continuous integration in your development environment. I've wanted to get a build system up and running here at Ping for a while, and now I feel as if I know exactly how to start. (I did install them today, as a matter of fact.)

For those of you who, like me, want to refer to Marc's slides to set up your own CI system, you can find his presentation files here:
http://wiki.mxunit.org/display/default/CFObjective+2011+--+Continuous+Integration