The Interactive Ideas Blog

Watch the ProtoShare Video

November 13th, 2009

ProtoShare Keyboard Shortcuts

keyboard-shortcutsWe get a lot of questions and inquiries about ways to work more quickly in ProtoShare. One of the most common questions involves keyboard shortcuts, particularly in the wireframe editor. Did you know that ProtoShare has nearly 40 keyboard shortcuts?

A few popular keyboard shortcuts:

Duplicate a component or grouping of components on the canvas:
Alt + Click and Drag

Cut, Copy, and Paste a component or grouping of components on the canvas, or from one page or project to another:
Ctrl (PC) / Cmd (Mac) + x / c / v

You’ll find all ProtoShare keyboard shortcuts, and more, in the User Guide, located under Help in the application menu.  You can also download a PDF of the  shortcuts to have a handy reference sheet. And get ready for an easier and faster prototyping experience.

  • Digg
  • del.icio.us
  • Technorati
  • Reddit
  • Slashdot
  • Google Bookmarks
  • Facebook
  • FriendFeed
  • LinkedIn
  • Twitter

November 2nd, 2009

Create & Add Your Own Components in the Sandbox

iStock_000000592198Small_sandcastle

At ProtoShare, we strongly believe in low-fidelity wireframes and prototypes. After all, wireframes aren't the end goal, they are merely a tool to use in a larger process. Most of the time, simple wireframes kickstart the needed discussion to make decisions. There are times, however, when simple doesn't cut it. Sometimes you need to build out a specific feature more completely to adequately experience and discuss it. At these times, wireframing applications turn into limitations because you can only build what their component palettes allow you to build. That is if you aren't using ProtoShare and the HTML Sandbox.

The ProtoShare front-end is all HTML/JavaScript, not Flash. Consequently, this allows users to do some unique things, like view the prototype in a browser, or use CSS to change the appearance of components. Now with the HTML Sandbox, ProtoShare gives you the ability to create and add any component they can think up and code. And with the proliferation of JavaScript libraries like Ext (which we use to build ProtoShare), YUI, jQuery, mooTools, etc it is not too much work to find a pre-built component and modify it to fit your needs.

The video below shows some of the possibilities you now have with the Sandbox:

YouTube Preview Image

Screen shot 2009-11-02 at 9.07.45 AM

So, how does it work? The HTML Sandbox is currently under our "Experimental" components at the bottom of the palette in the editor. Select it like any other component, click the Source Code field in the properties to open the HTML editor, and type or paste in your code. Close the HTML editor and switch back to Prototype mode, or click the Interactive Mode button Screen shot 2009-11-02 at 9.25.31 AM and check it out.

Below is some sample code you can use to test it. This is a very simple example of doing a basic on-the-fly form validation where it highlights blank entries.

<html>
<head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

     <style type="text/css">
          .error { background-color: #FFD2D2; }
          div, input { font-size:11px; font-family:Verdana; padding:5px; }
          input { padding:2px; border:1px solid black; }
     </style>
</head>

<body>
     <form name="user" action="#" onsubmit="return false;">
          <div>Name <input type="text" id="name"/> <span></span></div>
          <div>Email <input type="text" id="email"/> <span></span></div>
          <div><input type="submit" value="Submit" /></div>
     </form>

     <script type="text/javascript">
          $('input').blur( function() {
               if( $(this).val() == '' ) {
                    $(this).parent().addClass( 'error' );
                    $(this).next('span').html(' this cannot be blank');
               } else {
                    $(this).parent().removeClass( 'error' );
                    $(this).next('span').html('');
               }
          });
          $('form').submit( function() {
               $('#name').blur();
               $('#email').blur();
          });
     </script>

</body>
</html>

Notice in this example we're using the jQuery library hosted on code.google.com. If you want to use some jQuery (or other JavaScript library) plugin you find, there will probably be additional files necessary. You can either paste the source code into the HTML editor, or you can upload the files to the Asset Library and link to them.

You upload JavaScript and CSS files to the Asset Library just as you would any image asset. Once the files are uploaded, click on a file to see the full path to the file. These links take the form of /Asset/<directory>/<file>. For example if I were going to use a jQuery library called accordion.js, I would upload it to the Asset Library and my HTML Sandbox code would look something like this:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/Assets/js/accordion.js"></script>
</head>

...

Please remember this is still an experimental component. We consider this an advanced component as you need to know a fair amount about HTML and JavaScript to get the most out of it. We're very excited about the possibilities here, and we think you'll be too. We'd also like to hear your thoughts about the HTML Sandbox. Please leave us some comments here describing how you are using it, or how you would like to use it.

  • Digg
  • del.icio.us
  • Technorati
  • Reddit
  • Slashdot
  • Google Bookmarks
  • Facebook
  • FriendFeed
  • LinkedIn
  • Twitter

October 12th, 2009

ProtoShare and CIO Happy Hour

CIOHappyAs part of a comprehensive look at prototyping solutions, trends, and what the future holds, three of us from ProtoShare were recently interviewed. Check it out. And if you really have a keen interest in all of it, there’s even an un-edited 32 minute audio interview available, for your listening pleasure. We were interviewed by two smart, well-prepared, and knowledgeable people, Sasha Kovaliov and Ludmila Kurbatskaya. They had just started a new online project called “CIO Happy Hour.” As they were preparing to post the interview, we found ourselves wanting to know more about them, and what they hope to accomplish with their new venture. We switched roles.

Please share a little bit of history about CIO Happy Hour?
The CIO Happy Hour project appeared when we were thinking about better ways to engage our customers, who are mostly IT top managers and business owners. From our own (corporate) experience one of the main issues in discussing technologies and business is the lack of understanding: businessmen and tech people speak different languages, therefore business needs decent “translation” into language of technologies, and vice versa. New technology opportunities require both business strategies and planning Our goal is to make these two worlds closer, give information about the tools, talk about IT business, listen to the questions and issues of the readers and provide exclusive answers from real people.

Where are you located?
Our office is located in the development center of Itransition in Minsk, Belarus. We’re also coordinating sales and marketing activities in other markets (Ludmila is responsible for the Dutch region, and I am for the UK) very often we travel there as well.

What made you think of featuring the wireframing and prototyping industry?
We were rambling through emerging trends, and I came across the poll “Best RIA apps of 2009.” I noticed the majority of the apps that were nominated were in the wireframing/prototyping space. After a brief analysis, it was clear, that the wireframing topic is what we need. On one hand, it’s a great opportunity for development and collaboration optimization. On the other, there are a lot of new players in this market and it’s not easy to be aware of the latest changes.

Initially we planned four interviews, but after our first discussion we got quite a lot of attention from other companies, so we extended the list a bit and changed the format to a more prolonged marathon. We also noticed that the community of UX designers and IAs is very strong; we’ve received great feedback on Twitter and Friendfeed that helped us a great deal.

Any additional tidbits or information you would like to share with us is most welcome.
We are still experimenting a bit with the format. For the next round, we will conduct a poll that will let you decided on the topic. We want to know to who our readers want to talk, and what’s on their mind. We are flexible and open to new ideas and will continue focusing on business and IT cooperation, unique professional content, and comprehensive burning answers.

  • Digg
  • del.icio.us
  • Technorati
  • Reddit
  • Slashdot
  • Google Bookmarks
  • Facebook
  • FriendFeed
  • LinkedIn
  • Twitter

September 24th, 2009

ProtoShare Included by O’Reilly in “Top 50 Most Usable RIAs”

RIAAccording to O’Reilly Media’s  Inside RIA, ProtoShare is among the ranks of Google Maps, Mint, Quicken Online, Mini Cars, and others as the one of the Top 50 Most Usable RIAs (Rich Internet Applications). We are quite proud of our selection, especially considering that ProtoShare was not designed in Flash, Flex,  or Silverlight, but rather uses HTML, Javascript, and CSS to create interactive prototypes with real-time collaboration.

Theresa Neil and Bill Scott, authors of the book, Designing Web Interfaces: Principles and Patterns for Rich Interactions, made the selections. Each RIA had to pass two sets of criteria.

First, does it abide by Jakob Nielsen’s 10 Usability Principles?

  1. Visibility of system status
  2. Match between system and the real world
  3. User control and freedom
  4. Consistency and standards
  5. Error prevention
  6. Recognition rather than recall
  7. Flexibility and efficiency of use
  8. Aesthetic and minimalist design
  9. Help users recognize, diagnose, and recover from errors
  10. Help and documentation

Second, was it developed with six basic principles guiding RIA development?

  1. Make It Direct
  2. Keep It Lightweight
  3. Stay on the Page
  4. Provide an Invitation
  5. Use Transitions
  6. React Immediately

With your feedback and suggestions, we continue to keep improving the interface, functionality, usability, and value of of ProtoShare. Stay tuned for some exciting new features coming this fall.

  • Digg
  • del.icio.us
  • Technorati
  • Reddit
  • Slashdot
  • Google Bookmarks
  • Facebook
  • FriendFeed
  • LinkedIn
  • Twitter

September 22nd, 2009

Font Name Trademarks. Browser-Based HTML Editors. And Lawyers. Oh my!

legal-booksAre Google, Blogger, Oracle, Adobe, and hundreds of other companies with browser-based HTML editors potentially violating someone’s trademark?  According to the Cease and Desist letter we received from a major law firm, someone believes the answer is “yes.”

Site9 CEO, Andrew Mottaz, writes regarding a recent Cease and Desist letter about ProtoShare.  Keep reading to learn about the letter, nebulous laws involved, and how we resolved the issue, but didn’t answer the bigger question.

What happened?

A few months ago, I received a Cease and Desist letter from a law firm representing three large, well-known corporations.  They claimed our product ProtoShare® violated the copyright of their font software.  Apparently, someone from one of these companies had seen the open-source HTML editor we use in our software.  From a drop-down list of fonts (image at right),  fontlistthe other side reached the conclusion that we were embedding the fonts in our software.

I am the first to agree that embedding fonts you don’t own is a violation of copyright law.  However, we don’t embed fonts at all.  As anyone familiar with HTML knows, when creating an HTML document, the suggested fonts are added to a CSS style ( or font tag ) as a list of suggested fonts.  The browser will then choose the best font from the list.  This is how HTML works. ( As an aside – who knew that ‘Fantasy’ was a default generic font? )

I immediately contacted their attorneys, and explained that we don’t embed fonts.  Their response was, “OK, well in that case, you are violating our trademark by listing the names of the font in your HTML editor.”

I asked for clarification and received the following letter.

I am a bit amazed by this.  However, as I thought about the issue, it occurred to me that whether they were right or wrong about the legal issue, it was not completely clear cut.

What are the legal issues?

Trademark rights attach when you use words, phrases or artwork in the course of commerce to represent your product.  We trademarked the name of our product, ProtoShare, because we don’t want someone else using the name.  One important issue is whether a potentially infringing use of a trademark is likely to result in confusion among consumers.  You might have heard of the ‘moron in a hurry’ test, which is: would a moron in a hurry think that Acme Computers and Acme Plumbing were the same company or represented the same product?

There are some affirmative defenses to trademark infringement.  One of them is nominative fair use. At first glance, our usage appears to fall squarely in the nominative fair use category.  After all, there is no other way to create a font tag for the Arial font than by using the word “Arial.”  In my view, the possibility of a consumer thinking that our product is associated with or endorsed by the owners of the Arial trademark is non-existent.

However, the argument made by the font companies is not that you can never list the name of their font. The argument is that you can’t list the name of their font in such a way that indicates the displayed font is their font, when in actuality it is not.

As an example, one of the most common font-face tag sequences in HTML is “arial,helvetica,sans-serif.”  Depending on your available licensed, installed fonts, (which often depends on your operating system) you will see text rendered in the order listed, using either the font Arial, the font Helvetica, or some other default sans-serif font. When using an HTML editor, a user may highlight text, choose ‘Arial’ from a drop-down list, and see the selected text change font.  However, it’s possible the displayed font may not be Arial, since it’s not on the user’s system. Instead, a similar sans-serif font may be used.  If you think about the ‘moron in a hurry’ argument, you can see how this could confuse your product with a competing product.  Now, because we’re web developers, we think in terms of font tags, so we realize that by choosing Arial, we will get Arial or some similar font.

How did we resolve this issue?

What do the companies have to gain from this letter?  It’s easy to jump to the conclusion that the font companies are trying solely to get a new revenue stream, but it’s not that simple.  First, the law compels these companies to enforce their trademark.  If they ignore trademark violations, they run the risk of losing the legal status of their trademarks.

So what did we do?  Clearly, we didn’t have any interest in litigation.  I believe our prior usage of these trademarks falls into the nominative fair use defense, but I’d rather spend our time and money somewhere else than deciding this issue in court against some deep-pocketed parties. We decided, instead, to go generic: we replaced our list of fonts with generic names.  For our tool – a prototyping tool, after all – this seems like a workable solution.  Most of our customers only use one or two of the font-faces anyway.  We actually thought the editor was more clear using generics (image at left).  GenericFonListYet, I would prefer to definitively know that the usage we had was nominative fair use, or, with minor terminology modifications, it would be.  This clarification would benefit both ProtoShare and possibly the font companies, not to mention the hundreds of other companies out there using similar editors.

The Bigger Question

This issue illustrates some of the pitfalls of how intellectual property is handled in the USA, and the high cost of litigation.  In this case, the companies on the other side were only interested in maintaining their trademarks, and not looking to extract fees from us.  Consequently, they worked with us to reach a solution that satisfied both parties.  The issue cost us, nevertheless,  a considerable amount of time and money to implement.  Were the companies required by law to prevent us from having a standard list of fonts in our product?  I don’t know.  There certainly are plenty of other companies, very large and small, out there doing the same thing. If you have a minute, I’m interested in your thoughts. Are all online text editors in violation of trademarks? Is every company using an online editor susceptible to a lawsuit? Is HTML itself in violation of the law?

  • Digg
  • del.icio.us
  • Technorati
  • Reddit
  • Slashdot
  • Google Bookmarks
  • Facebook
  • FriendFeed
  • LinkedIn
  • Twitter