Axure & Protonotes: an alternative to Protoshare

January 14, 2009

Update 2/27/09: Updated the HeadInsert script again to Version 1.3.  Read about the changes here.

Update 1/21/09: Added new version of HeadInsert which can ignore certain HTML files.

Do a Google search on Axure vs. Protoshare vs. iRise and you may find sponsored links from each of these products explaining why they are the best.  These three are the leading “designed for IA” options for wireframing and prototyping (I say designed for IA, as Visio, Omnigraffle, and other drawing/diagramming tools still have a strong following).

iRise was never an option for me due to the cost, so I have been using Axure for the past 8 months. I initially was able to use Axure for free thanks to their Good Student Program, and I found it to be well worth the cost when I entered the workplace. I have found it to be a great tool for wireframing, prototyping, and generating specifications.  While there is certainly room for improvement, particularly with specification generation, the community around Axure is engaged and growing, which means that new features and widget libraries are coming all the time.

I heard about Protoshare a couple months ago.  While I haven’t used it, I have read some documentation and viewed demonstrations.  Axure still seems to be more fully featured for wireframing and prototyping, but I was intregued by Protoshare’s reviewing features.  Then, while browsing the Axure forums, someone mentioned Protonotes, a free tool for annotating HTML pages.  As Axure produces HTML prototypes, it seemed like the Protonote script could be inserted to achieve functionality similar to Protoshare.  By inserting the script into each page in the prototype, team members and even clients could make comments directly on the prototype/wireframe, which can then be viewed in a central location.

The problem is that Axure generates a new HTML page for each wireframe, so large projects can easily generate 20+ pages.  Inserting the Protonotes script into the header of each one every time the prototype is recreated isn’t really feasible.  To that end, I wrote a small program that will allow users to automatically insert a script into the header of each HTML file for their prototype.

Just download and extract this Zip file.  Generate your Axure prototype and drop the HeadInsert.exe file into your prototype directory.  Run it, then paste your Protonotes code into the text box.  Leave the checkboxes checked (you don’t want Protonotes scripts in your frame management files) and press the insert button. For example, I pasted the following:

<script src=”http://www.protonotes.com/js/protonotes.js” type=”text/javascript”></script>
«/span>script type=”text/javascript”>
var groupnumber=”##############“;
</script>

into all of my prototype HTML files.

I recommend making a backup of your prototype files if they are important, as there is no way to reverse the process short of opening each .html file and removing the code you inserted (though you can always regenerate your prototype with Axure). I am not responsible for anything unexpected that happens to your files, unlikely as this is.  It’s a pretty simple script, but if any errors occur, please let me know.

Zip file: HeadInsert_v1.2

inserthead2