Building high-fidelity interactive prototypes with jQuery

Building high-fidelity interactive prototypes with jQuery
David Park
Senior UI Designer

Agenda
Why are high-fidelity prototypes important?
Visual Process Manager prototype demo
Code Walkthrough
Overriding links
DOM Manipulation
Overlays and Click States
Accordion
Drag & Drop
Positioning / Toggle

More accurate user test results (especially for complex features)
What are you testing? Level of Interactivity Utility Mockups Image Maps Usability (simple interaction) Image Maps Code (HTML + CSS) Usability (complex interaction) Code (HTML + CSS + jQuery)

Dev can use it as a design spec
Demonstrates feasibility
Generates excitement and momentum
“ Getting to done” Perception Mockups High-Fidelity Prototype Dev Complete

jQuery Basics $(" #id, .class, p "). functionName (" parameters "); $(" #msg "). show (” normal "); <script type="text/javascript" src=”jQuery.js"></script>

$(" a[href='https://na1.salesforce.com/ui/setup/Setup'] "). attr (' href ', ' https://na1.salesforce.com/apex/setup ') Overriding Links

$(" div#DevTools_child div.setupLeaf:first "). after (" <div class="setupLeaf"><a href="https://na1.salesforce.com/apex/jaguar1">Processes</a> <span class="newFlag">New!</span></div> "); DOM Manipulation

JavaScript <input type="button” onclick="$(' #mask,#overlay '). show ();" value="New Process"/> CSS #mask, #overlay {display:none;} #mask {position:absolute;top:0;bottom:0;left:0;right:0;background:black;opacity:.45;z-index:2;} #overlay {position:absolute;top:50px;left:50%;margin-left:-382px;width:765px;background:white;z-index:3;-moz-border-radius: 5px;} Overlays and Click States $(" .layout "). click ( function () { $(" .layout "). removeClass (" selected "); $( this ). addClass (" selected "); });

jQuery UI <script type="text/javascript" src=”jQueryUI.js"></script>
Library of widgets and interactions built on top of jQuery

Accordion $(" #accordion "). accordion ( {fillSpace:true} );
HTML
<div id="accordion">
<a href="#">Presentation</a>
<div class="panel">
<img />
…
</div>
<a href="#">Logic</a>
<div class="panel">
<img />
…
</div>
…
</div>
CSS
#accordion a {display:block; background-image:url(’…'); padding:5px;}
.panel {padding:10px;}
.panel img {float:left;margin-right:5px;margin-bottom:5px;cursor:move;z-index:100;}

Drag and Drop $(" .panel img "). draggable ( {revert:'invalid', helper:'clone’} );

Drag and Drop
var dropcount = 0;
$(" #diagram "). droppable ({
drop:function (event,ui) {
if(dropcount == 0) {
$(" #mask,#overlay1 "). show ();
}
else if(dropcount == 1) {
$(" #mask,#overlay2 "). show ();
}
…
}
});
#diagram function addForm() { $(" #mask,#overlay1 "). hide (); $(" #jform,#jline "). show (); dropcount++; }

Drag and Drop Events $(" #jy "). droppable ({ drop :function (event,ui) { $(" #jy "). attr (" src "," {!$Resource.jY} "); }, }); over :function (event,ui) { $(" #jy "). attr (" src "," {!$Resource.jYH} "); }, out :function (event,ui) { $(" #jy "). attr (" src "," {!$Resource.jY} "); }, tolerance : 'touch’

Toggle is my best friend <div id="jform” onclick="$(' #hover1 '). toggle ();" ><img src=”…"/></div> <div id="hover1” onclick="$(' #hover1 '). toggle ();" ><img src=“…"/></div> #jform #hover1

Conclusion $(" #id, .class, p "). functionName (" parameters ");
Overriding links
DOM Manipulation
Overlays and Click States
Accordion
Drag & Drop
Positioning / Toggle

Questions?

http://www.slideshare.net	42
http://onwebdev.blogspot.com	7
http://ig.gmodules.com	1

Building high-fidelity interactive prototypes with jQuery

by David Park on Apr 24, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 50

Statistics

Building high-fidelity interactive prototypes with jQuery — Presentation Transcript