Building high-fidelity interactive prototypes with jQuery
•
16 likes•3,529 views
Presented at jQuery's 2010 conference
![Building high-fidelity interactive prototypes with jQuery ,[object Object],[object Object]](https://image.slidesharecdn.com/jquery-100424113624-phpapp02/85/building-highfidelity-interactive-prototypes-with-jquery-1-320.jpg)
![Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
What's hot
What's hot (11)
Similar to Building high-fidelity interactive prototypes with jQuery
Similar to Building high-fidelity interactive prototypes with jQuery (20)
Recently uploaded
Recently uploaded (20)
Building high-fidelity interactive prototypes with jQuery
- 6. jQuery Basics $(" #id, .class, p "). functionName (" parameters "); $(" #msg "). show (” normal "); <script type="text/javascript" src=”jQuery.js"></script>
- 7. $(" a[href='https://na1.salesforce.com/ui/setup/Setup'] "). attr (' href ', ' https://na1.salesforce.com/apex/setup ') Overriding Links
- 8. $(" div#DevTools_child div.setupLeaf:first "). after (" <div class=amp;quot;setupLeafamp;quot;><a href=amp;quot;https://na1.salesforce.com/apex/jaguar1amp;quot;>Processes</a> <span class=amp;quot;newFlagamp;quot;>New!</span></div> "); DOM Manipulation
- 9. 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 "); });
- 12. Drag and Drop $(" .panel img "). draggable ( {revert:'invalid', helper:'clone’} );
- 14. 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’
- 15. 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
- 17. Questions?
Editor's Notes
- -A lot of the code examples are things that I do often, take 1-2 lines of code, and are powerful.
- -salesforce evaluates features on 2 metrics utility and usability, give them low/medium/high assessments -The more the user can explore (and fail), the better. Otherwise we don’t know what to fix. -using jQuery you can create rich interactions and it’s FAST and POWERFUL
- -It’s more likely that dev will implement what designer intended -It’s one thing for a designer to mock up a complex interaction and expect the dev to implement it, it’s another for the designer to prototype it themselves. Often times dev don’t see the value of adding fit & finish touches (such as animation) and need to see it in motion. -If you have static mockups and a written spec, it’ll fall to the bottom of the backlog. If it’s an inherent part of the prototype it will get frontloaded. -When execs see something that looks like it’s finished, it increases pressure to deliver. -A high-fidelity prototype goes a long way in terms of project completion perception
- -A little history: -salesforce acquired a company that lets you build processes in a visual, drag-and-drop environment -we needed to show a proof of concept to press & analysts in 2 weeks -I designed a similar process visualizer feature, except it was implemented in Flex -there was not enough time to build a demo in Flex (we asked around) -I was asked to come up with a prototype that was similar to look & feel of our feature, but also demonstrated the power of the acquired product and how it would work inside of salesforce -using jQuery I built a demo in 1 week -It was probably a month from the beginning of the project to the time it appeared on TechCrunch -not something that we tested in the lab, was purely a demo
- -had to sell that this new feature was living in a real org -salesforce has its own XML-like syntax for building user interfaces in HTML called Visualforce -when you create a new Visualforce page you can choose to inherit salesforce’s native page structure, which I am doing here -I’m finding the link I want to override by using the href value, and then overriding its href value with the attr function.
- -This node doesn’t exist in the tree today -I inserted it into the DOM using jQuery -use Firebug to find the ID of the div I want to insert it after -again, it’s linked to the next page of the prototype flow
- -these are all things I reuse very often in prototyping: overlays, click states
- -jQuery UI provides a library of useful widgets built on top of jQuery -one line accordion! -automatically makes <a> tags headers, subsequent div is the header’s content -fillSpace fills height of parent element
- -simulating contextual actions (typically prototype around a task flow, there may be multiple ways to accomplish a task but tasks are sequential)
- -tolerance determines what qualifies as an “over” state Examples: fit = draggable overlays droppable entirely Intersect = draggable overlaps 50%
- -Firefox Web Developer Toolbar plug-in “Display Ruler” feature is indispensable for absolute positioning