Hall of Bright Carvings

Useful javascript snippets to help make html wireframes a bit more like an actual prototype than a wireframe.

The guys and Clearleft and New Bamboo developed a very nifty plugin called Polypage which can be grabbed here or here

and some interesting writeups on using it here and here
Talk on its use from the South by Southwest Conference

Simpler jQuery script I threw together to just show and hide components on a page, just set up the key : value pairs in var config

$(document).ready(function() {
  revealer = function() {
    var config = {
      '#reveal' : '#match',
      '#related' : '.tabs'
    }
    var Attacher = function(key, val) {
      var jqKey = $(key);
      var jqVal = $(val);
      jqVal.hide();
      jqKey.bind("click", function(evt) {
        jqVal.toggle();
        return false;
      })
      return false;
    }
    for (var key in config) {
      attach = new Attacher(key, config[key]);
    }
  }
  reveal = new revealer();
});

All important information for forms, such as form instructions, must be
presented before the form itself. The submit button must be the last form element contained
within a form.

All form fields must be associated with their labels using the label HTML tag.
If a form cannot be labeled, it must include a title that explains in brief what the form
field is.

All forms should clearly indicate which form fields are manditory prior to the
actual form inputs. Avoid cryptic hints such as the use of the asterix or different colors as
the sole means of indicating manditory information requirements.

Form fields that are logically related should be grouped in a field set. If
appropriate, the field set should be labeled with a legend.

<p>Fields marked with an asterisk (*) are required.</p>
<form action="#" method="post">
<fieldset>
<legend>Personal Information</legend>
<div>
<label for="fname">First Name*</label>
<input id="fname" name="firstname" type="text" /></div>
<div>
<label for="lname">Last Name*</label>
<input id="lname" name="lastname" type="text" /></div>
<div>
<label for="street">Street Address*</label>
<input id="street" name="street" type="text" /></div>
<div>
<label for="city">City*</label>
<input id="city" name="city" type="text" /></div>
<div>
<label for="country">Country*</label>
<input id="country" name="country" type="text" /></div>
<div>
<label for="postcode">Postcode*</label>
<input id="postcode" name="postcode" type="text" /></div>
</fieldset>
Would you like to sign up for our newsletter?
<div>
<input id="letteryes" name="newsletter" type="radio" value="yes" />
<label for="letteryes">Yes</label></div>
<div>
<input id="letterno" name="newsletter" type="radio" value="no" />
<label for="letterno">No</label></div>
<div>
<input name="submit" type="submit" value="Submit" /></div>
</form>

<form action="#">
<fieldset>
<legend>Login</legend>
<div>
<label for="username">Username</label>
<input type="text" id="username" name="username" />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" name="password"  />
</div>
<div>
<input id="Submit" name="Submit" value="Submit" type="submit">
</div>
</fieldset>
</form>

<form action="#">
<div>
<input type="text" name="term" title="Search term" />
<input id="search" name="search" value="Search" type="submit">
</div>
</form>

I’ve become a recent convert to wireframing in HTML and css, mostly because I got seriously sick of learning a new piece of wireframing software every time I changed jobs.