ProtoShare Community » Josh Kristof http://community.protoshare.com ProtoShare Blog and Resource Center Mon, 17 Jun 2013 23:53:40 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 More Advanced HTML Component Examples http://community.protoshare.com/2013/01/html-components-for-wireframes/?utm_source=rss&utm_medium=rss&utm_campaign=html-components-for-wireframes http://community.protoshare.com/2013/01/html-components-for-wireframes/#comments Mon, 07 Jan 2013 17:01:49 +0000 Josh Kristof http://community.protoshare.com/?p=6907 Continue reading →]]> In a previous post I showed you how you can use the Advanced HTML component to increase the fidelity of your wireframes. The Advanced HTML component lets you use HTML, CSS, and Javascript to create your own content, extending the functionality of ProtoShare. Below are some additional examples of what you can do.

Activating states on design load

This example shows you how to set your states to specific values when the design loads. This could be useful when you want the values of a state in a certain order but to have the default used on the page something other than the first. The variables addState and addState2 use the ID of the state you want to set. In this example they are 3629 and 3630. These IDs are listed in the States section of the listing in ProtoShare. The value you want to select is indicated by the number after the colon. 0 (Zero) is the first value.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function setState() {
                var pageState;
                var addState  = "3629:1";
                var addState2 = "3630:3";
                pageState = window.top.site9.StateMgr.get( 'ps' );
                pageState = pageState + ',' + addState + ',' + addState2;
                window.top.site9.StateMgr.set( 'ps', [pageState] );
            }
        </script>
    </head>
    <body onload="setState()">
    </body>
</html>

Charting

Highcharts ExampleHighcharts is a Javascript charting library available commercially and for free under the Creative Commons Attribution-NonCommercial 3.0 License. Below shows how you can use this, and many other libraries, to add rich content to your projects. We’ve referenced external Javascript resources but you can also upload your files to ProtoShare and use the address provided by Get URL to link to your files.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Highcharts Demo</title>

  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

<script type='text/javascript'>//<![CDATA[ 

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y +'°C';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: 'New York',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
                name: 'Berlin',
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
        });
    });

});
//]]>  

</script>

</head>
<body>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

</body>

</html>

HTML5 – Date Picker / Audio Player

Date PickerIn the previous post, I showed how to create a date picker using Javascript. With the introduction of HTML5, this, and many other form controls, can be created much easier. Changing the input type can also let you create color pickers and fields formatted as search boxes.

 

 

 

<!DOCTYPE html>
<html>
    <head><meta charset="UTF-8"><title></title></head>
    <body>
        <input type="date" />
    </body>
</html>

The second allows you to embed an audio player.Audio Player

<!DOCTYPE html>
<html>
    <head><meta charset="UTF-8"><title></title></head>
    <body>
        <audio id="audio" src="/wa/asset?oid=3517" controls />
    </body>
</html>

 

]]> http://community.protoshare.com/2013/01/html-components-for-wireframes/feed/ 0 Advanced HTML Component – Increase the Fidelity of Your Wireframes http://community.protoshare.com/2011/04/advanced-html-component-increase-the-fidelity-of-your-wireframes/?utm_source=rss&utm_medium=rss&utm_campaign=advanced-html-component-increase-the-fidelity-of-your-wireframes http://community.protoshare.com/2011/04/advanced-html-component-increase-the-fidelity-of-your-wireframes/#comments Mon, 18 Apr 2011 20:19:24 +0000 Josh Kristof http://community.protoshare.com/?p=430 Continue reading →]]> 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>
]]> http://community.protoshare.com/2011/04/advanced-html-component-increase-the-fidelity-of-your-wireframes/feed/ 0