When creating a wireframe, a simple low-fi solution consisting of placeholder content and navigation is often sufficient; however, sometimes that’s just not enough. You may need to increase the fidelity to be able to clearly communicate your ideas to gain complete understanding from stakeholders.
In ProtoShare, we give you the opportunity to choose your own level of detail. One of the features that I find most targets this flexibility is the Advanced HTML component available on Professional Plans.
With a little programming knowledge you can create your own palette of custom components. You can also upload supporting files such as JavaScript and CSS resources to your Project Library to have all of your content contained in ProtoShare. The purpose of this article is not to teach HTML, CSS, or JavaScript but to show you examples of how you can extend and enhance the functionality of your prototypes in ProtoShare.
To use an example, simply select the code and then copy/paste it into a new Advanced HTML component, replacing the default content.
Keep in mind the Advanced HTML component is intended for advanced users and if you’re not comfortable working with HTML, this feature is probably not for you. With the exception of the first, these examples won’t work without modification.
When you need simple interactivity such as pop-ups, tabbed panels, carousels, etc., states are a quick solution. For more information on them, please view this tutorial video.
Clock (JavaScript)
In this first example, we’ll start with a very basic JavaScript powered clock. You can copy and paste it directly into an Advanced HTML component in ProtoShare and work without any changes.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
function startTime(){
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i){
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
Automatic Page Redirect (JavaScript)
This example will provide you with a method of automatically redirecting one page to another. You could, for instance, use this to simulate an interim loading page.
You’ll want to change the mysite.protoshare.com to your own account and the /wa/page?oid=1002347 to the page you want to redirect to. You can find the URL by right-clicking on a page in the site map and choosing Get URL.
Because the background is set to transparent you can then set the fill and border of the component to none and automatic to get a completely hidden component. Finally, changing the 5000 changes the delay, where the value is given in milliseconds.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>window.domain = "mysite.protoshare.com";</script>
<script type="text/javascript">
<!--
function delayer(){
if (!window.parent.frameElement.s9_workspace) {
window.parent.location = "/wa/page?oid=1002347";
} else {
//Doing nothing since it appears we're in developer mode.
}
}
//-->
</script>
<title></title>
</head>
<body onLoad="setTimeout('delayer()', 5000)" style="background:transparent;">
</body>
</html>
Date Picker (Ext JS)
In this next example, we’re going to use Ext JS, which is a JavaScript library, to display a field with a date picker. Many examples can be found via your favorite search engine or from the Ext JS samples page. In the HTML below, lines 5-7 reference the necessary files. You can upload these to the library and then use the Get URL menu command and paste the URL into your HTML or host the files outside of ProtoShare.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var bd = Ext.getBody();
var dr = new Ext.FormPanel({
labelWidth: 1,
frame: false,
bodyStyle:'padding:5px 5px 0;border:none;background-color:transparent;',
width: 350,
defaults: {width: 175},
defaultType: 'datefield',
items: [{
fieldLabel: '',
name: 'date',
id: 'date',
vtype: 'daterange',
}]
});
dr.render('dt');
});
</script>
</head>
<body style="background-color:transparent;">
<div id="dt"></div>
</body>
</html>
Accordion (jQuery UI)
Lastly we’ll be using jQuery UI, another JavaScript library to create an accordion. Like Ext JS there are a number of examples available on the jQuery site and elsewhere.
This example is straight from the jQuery demo section.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.11.custom.css" />
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.accordion.js"></script>
<style type"text/css">
body {
font-size: 62.5%;
}
</style>
</head>
<body style="background-color:transparent;">
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
</body>
</html>