Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Building high-fidelity interactive prototypes with jQuery <ul><li>David Park </li></ul><ul><li>Senior UI Designer </li></ul>
Agenda <ul><li>Why are high-fidelity prototypes important? </li></ul><ul><li>Visual Process Manager prototype demo </li></...
Why are high-fidelity prototypes important? <ul><li>More accurate user test results (especially for complex features) </li...
Why are high-fidelity prototypes important? <ul><li>Dev can use it as a design spec </li></ul><ul><li>Demonstrates feasibi...
 
jQuery Basics $(&quot; #id, .class, p &quot;). functionName (&quot; parameters &quot;); $(&quot; #msg &quot;). show (” nor...
$(&quot; a[href='https://na1.salesforce.com/ui/setup/Setup'] &quot;). attr (' href ', ' https://na1.salesforce.com/apex/se...
$(&quot; div#DevTools_child div.setupLeaf:first &quot;). after (&quot; <div class=&quot;setupLeaf&quot;><a href=&quot;http...
JavaScript <input type=&quot;button”  onclick=&quot;$(' #mask,#overlay '). show ();&quot;  value=&quot;New Process&quot;/>...
jQuery UI <script type=&quot;text/javascript&quot; src=”jQueryUI.js&quot;></script> <ul><li>Library of widgets and interac...
Accordion $(&quot; #accordion &quot;). accordion ( {fillSpace:true} ); <ul><li>HTML </li></ul><ul><li><div id=&quot;accord...
Drag and Drop $(&quot; .panel img &quot;). draggable ( {revert:'invalid', helper:'clone’} );
Drag and Drop <ul><li>var dropcount = 0; </li></ul><ul><li>$(&quot; #diagram &quot;). droppable ({ </li></ul><ul><ul><li>d...
Drag and Drop Events $(&quot; #jy &quot;). droppable ({ drop :function (event,ui) { $(&quot; #jy &quot;). attr (&quot; src...
Toggle is my best friend <div id=&quot;jform”  onclick=&quot;$(' #hover1 '). toggle ();&quot; ><img src=”…&quot;/></div> <...
Conclusion $(&quot; #id, .class, p &quot;). functionName (&quot; parameters &quot;); <ul><li>Overriding links </li></ul><u...
Questions?
Próxima SlideShare
Cargando en…5
×

Building high-fidelity interactive prototypes with jQuery

5.489 visualizaciones

Publicado el

Presented at jQuery's 2010 conference

Publicado en: Tecnología
  • Sé el primero en comentar

Building high-fidelity interactive prototypes with jQuery

  1. Building high-fidelity interactive prototypes with jQuery <ul><li>David Park </li></ul><ul><li>Senior UI Designer </li></ul>
  2. Agenda <ul><li>Why are high-fidelity prototypes important? </li></ul><ul><li>Visual Process Manager prototype demo </li></ul><ul><li>Code Walkthrough </li></ul><ul><ul><li>Overriding links </li></ul></ul><ul><ul><li>DOM Manipulation </li></ul></ul><ul><ul><li>Overlays and Click States </li></ul></ul><ul><ul><li>Accordion </li></ul></ul><ul><ul><li>Drag & Drop </li></ul></ul><ul><ul><li>Positioning / Toggle </li></ul></ul>
  3. Why are high-fidelity prototypes important? <ul><li>More accurate user test results (especially for complex features) </li></ul>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)
  4. Why are high-fidelity prototypes important? <ul><li>Dev can use it as a design spec </li></ul><ul><li>Demonstrates feasibility </li></ul><ul><li>Generates excitement and momentum </li></ul>“ Getting to done” Perception Mockups High-Fidelity Prototype Dev Complete
  5.  
  6. jQuery Basics $(&quot; #id, .class, p &quot;). functionName (&quot; parameters &quot;); $(&quot; #msg &quot;). show (” normal &quot;); <script type=&quot;text/javascript&quot; src=”jQuery.js&quot;></script>
  7. $(&quot; a[href='https://na1.salesforce.com/ui/setup/Setup'] &quot;). attr (' href ', ' https://na1.salesforce.com/apex/setup ') Overriding Links
  8. $(&quot; div#DevTools_child div.setupLeaf:first &quot;). after (&quot; <div class=&quot;setupLeaf&quot;><a href=&quot;https://na1.salesforce.com/apex/jaguar1&quot;>Processes</a> <span class=&quot;newFlag&quot;>New!</span></div> &quot;); DOM Manipulation
  9. JavaScript <input type=&quot;button” onclick=&quot;$(' #mask,#overlay '). show ();&quot; value=&quot;New Process&quot;/> 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 $(&quot; .layout &quot;). click ( function () { $(&quot; .layout &quot;). removeClass (&quot; selected &quot;); $( this ). addClass (&quot; selected &quot;); });
  10. jQuery UI <script type=&quot;text/javascript&quot; src=”jQueryUI.js&quot;></script> <ul><li>Library of widgets and interactions built on top of jQuery </li></ul>
  11. Accordion $(&quot; #accordion &quot;). accordion ( {fillSpace:true} ); <ul><li>HTML </li></ul><ul><li><div id=&quot;accordion&quot;> </li></ul><ul><ul><li><a href=&quot;#&quot;>Presentation</a> </li></ul></ul><ul><ul><li><div class=&quot;panel&quot;> </li></ul></ul><ul><ul><ul><li><img /> </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><li></div> </li></ul></ul><ul><ul><li><a href=&quot;#&quot;>Logic</a> </li></ul></ul><ul><ul><li><div class=&quot;panel&quot;> </li></ul></ul><ul><ul><li><img /> </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li></div> </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><li></div> </li></ul><ul><li>CSS </li></ul><ul><li>#accordion a {display:block; background-image:url(’…'); padding:5px;} </li></ul><ul><li>.panel {padding:10px;} </li></ul><ul><li>.panel img {float:left;margin-right:5px;margin-bottom:5px;cursor:move;z-index:100;} </li></ul>
  12. Drag and Drop $(&quot; .panel img &quot;). draggable ( {revert:'invalid', helper:'clone’} );
  13. Drag and Drop <ul><li>var dropcount = 0; </li></ul><ul><li>$(&quot; #diagram &quot;). droppable ({ </li></ul><ul><ul><li>drop:function (event,ui) { </li></ul></ul><ul><ul><ul><li>if(dropcount == 0) { </li></ul></ul></ul><ul><ul><ul><li>$(&quot; #mask,#overlay1 &quot;). show (); </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>else if(dropcount == 1) { </li></ul></ul></ul><ul><ul><ul><li>$(&quot; #mask,#overlay2 &quot;). show (); </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>}); </li></ul>#diagram function addForm() { $(&quot; #mask,#overlay1 &quot;). hide (); $(&quot; #jform,#jline &quot;). show (); dropcount++; }
  14. Drag and Drop Events $(&quot; #jy &quot;). droppable ({ drop :function (event,ui) { $(&quot; #jy &quot;). attr (&quot; src &quot;,&quot; {!$Resource.jY} &quot;); }, }); over :function (event,ui) { $(&quot; #jy &quot;). attr (&quot; src &quot;,&quot; {!$Resource.jYH} &quot;); }, out :function (event,ui) { $(&quot; #jy &quot;). attr (&quot; src &quot;,&quot; {!$Resource.jY} &quot;); }, tolerance : 'touch’
  15. Toggle is my best friend <div id=&quot;jform” onclick=&quot;$(' #hover1 '). toggle ();&quot; ><img src=”…&quot;/></div> <div id=&quot;hover1” onclick=&quot;$(' #hover1 '). toggle ();&quot; ><img src=“…&quot;/></div> #jform #hover1
  16. Conclusion $(&quot; #id, .class, p &quot;). functionName (&quot; parameters &quot;); <ul><li>Overriding links </li></ul><ul><li>DOM Manipulation </li></ul><ul><li>Overlays and Click States </li></ul><ul><li>Accordion </li></ul><ul><li>Drag & Drop </li></ul><ul><li>Positioning / Toggle </li></ul>
  17. Questions?

×