Upgrade to Pro — share decks privately, control downloads, hide ads and more …

jQuery: A Designer's Perspective

39c8ef13c693c8d143679be9e3d8cf02?s=47 Emily Lewis
October 04, 2011

jQuery: A Designer's Perspective

Presentation for Environments for Humans’ 2010 jQuery Summit, Designer track offers non-JavaScript, non-developer take on jQuery.

Focuses on jQuery UI for getting instant interactivity with minimal knowledge. Also discusses customizing jQuery UI to meet individual needs.

39c8ef13c693c8d143679be9e3d8cf02?s=128

Emily Lewis

October 04, 2011
Tweet

More Decks by Emily Lewis

Other Decks in Technology

Transcript

  1. Some rights reserved jQuery A Designer’s Perspective jQuery Summit November

    16, 2010 Environments for Humans
  2. jQuery, A Designer’s Perspective jQuery Summit 2 Freelance Web Designer

    http://emilylewisdesign.com Author, Microformats Made Simple http://microformatsmadesimple.com Email: emily@emilylewisdesign.com Blog: http://ablognotlimited.com Twitter: @emilylewis
  3. jQuery, A Designer’s Perspective jQuery Summit I’m a JavaScript idiot

    3
  4. jQuery, A Designer’s Perspective jQuery Summit “ Web Designer” What

    do they do? 4
  5. jQuery, A Designer’s Perspective jQuery Summit “ Web Designer” What

    does Emily do? 5
  6. jQuery, A Designer’s Perspective jQuery Summit “ Web Designer” 6

    CSS HTML5 graphic design visual design XHTML wireframing usability accessibility content strategy interaction design
  7. jQuery, A Designer’s Perspective jQuery Summit JavaScript? nope 7

  8. jQuery, A Designer’s Perspective jQuery Summit It’s not just about

    what I do, but what I • Semantic markup • Lean markup & CSS • Accessibility • Cross-browser support 8 jQuery, A Designer’s Perspective jQuery Summit http://www.flickr.com/photos/danielgreene/3278394587/ love
  9. jQuery, A Designer’s Perspective jQuery Summit JavaScript? nope 9

  10. jQuery, A Designer’s Perspective jQuery Summit It’s 2010 need rich,

    interactive experiences 10
  11. jQuery, A Designer’s Perspective jQuery Summit I looked at •

    Prototype • Dojo • MooTools 11 And ran in the other direction ...
  12. jQuery, A Designer’s Perspective jQuery Summit WTF!? 12 Ajax.Responders Fx.Transitions

    OOP with dojo.declare()
  13. jQuery, A Designer’s Perspective jQuery Summit jQuery 13 and it

    sounded pretty good Then, I heard about
  14. jQuery, A Designer’s Perspective jQuery Summit It shared some of

    my passions • No inline scripting • CSS3 selector support • Cross-browser compatibility • Works with other libraries • Lightweight • (Mostly) accessible 14
  15. jQuery, A Designer’s Perspective jQuery Summit Ahhh, plain English 15

    “How do I ...”
  16. jQuery, A Designer’s Perspective jQuery Summit Almost designer friendly •

    The documentation isn’t perfect, but it is better • Focus on functionality (what do you want to do?) • Lots of tutorials written by folks who have their own “designer” perspective 16
  17. jQuery, A Designer’s Perspective jQuery Summit 17 jQuery, A Designer’s

    Perspective jQuery Summit The Intimidation Factor
  18. jQuery, A Designer’s Perspective jQuery Summit jQuery UI The Path

    of Least Complexity 18 http://jqueryui.com
  19. jQuery, A Designer’s Perspective jQuery Summit Definitely designer friendly •

    Even simpler documentation than jQuery itself • Fully-themed, live demos • Clear markup examples • Use a little or a lot 19
  20. jQuery, A Designer’s Perspective jQuery Summit Definitely designer friendly Add

    interactivity right away, without extensive (or even mediocre) jQuery knowledge 20 • Accordions • Tabs • Sliders • Date pickers • Dialog boxes • Dragging • Dropping • Resizing • Selecting • Sorting
  21. jQuery, A Designer’s Perspective jQuery Summit ThemeRoller • 24 pre-built

    themes (CSS) • Customize a theme • Or don’t use a theme at all 21 http://jqueryui.com/themeroller/
  22. jQuery, A Designer’s Perspective jQuery Summit Download Builder • Select

    the entire library of effects and widgets • Or select only what you need 22 http://jqueryui.com/download
  23. jQuery, A Designer’s Perspective jQuery Summit Install jQuery 1. Download

    2. Add <script> 23 Step 1 1. 2. <script src="/js/jquery-1.4.4.min.js"></script>
  24. jQuery, A Designer’s Perspective jQuery Summit Install jQuery 1. Add

    CDN-hosted <script> 24 Even Easier Step 1 1. <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.4.2/jquery.min.js"></script>* * Google CDN for 1.4.4 forthcoming
  25. jQuery, A Designer’s Perspective jQuery Summit Install jQuery 1. jQuery

    script 2. jQuery plug-ins (this includes jQuery UI scripts) 3. Custom scripts 25 Source Order 1. 2. 3.
  26. jQuery, A Designer’s Perspective jQuery Summit Install jQuery Adding scripts

    to the bottom of your page can help improve performance 26 Source Order <script src="http://ajax.googleapis.com/ajax/ libs/jquery/1.4.2/jquery.min.js"></script> </body> </html>
  27. jQuery, A Designer’s Perspective jQuery Summit Download jQuery UI 1.

    Pick the widgets and theme you want 2. Extract compressed folder and save files to your server 27 Step 2 1. 2. - /css/ - /js/
  28. jQuery, A Designer’s Perspective jQuery Summit Install jQuery UI 1.

    Add UI <script> after jQuery <script> 28 Step 3 1. <script src="http://ajax.googleapis.com/ajax/ libs/jquery/1.4.2/jquery.min.js"></script> <script src="/js/jquery- ui-1.8.2.custom.min.js"></script> </body> </html>
  29. jQuery, A Designer’s Perspective jQuery Summit Install jQuery UI 2.

    Add UI CSS 29 Step 3 2. <link rel="stylesheet" href="/css/smoothness/ jquery-ui-1.8.2.custom.css" /> </head>
  30. jQuery, A Designer’s Perspective jQuery Summit Apply a widget -

    accordion 1. Get your markup ready 30 Step 4 1. <div id="accordion"> <h2><a href="#">News</a></h2> <p>News paragraph one.</p> <h2><a href="#">Services</a></h2> <p>Services paragraph.</p> <h2><a href="#">Products</a></h2> <p>Products paragraph.</p> </div>
  31. jQuery, A Designer’s Perspective jQuery Summit Apply a widget -

    accordion 2. Add accordion function after jQuery and UI <scripts> 31 Step 4 2. <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.4.2/jquery.min.js"></script> <script src="/js/jquery-ui-1.8.2.custom.min.js"> </script> <script> $(function(){ $("#accordion").accordion({ header: "h2" }); }); </script>
  32. jQuery, A Designer’s Perspective jQuery Summit Interactivity in 4 easy

    steps 32
  33. jQuery, A Designer’s Perspective jQuery Summit Making it your own

    With some widgets, markup is flexible (POSH FTW!) 33 <dl id="accordion"> <dt><a href="#">News</a></dt> <dd> <p>News paragraph one.</p> <ul> <li>News item one</li> <li>News item two</li> </ul> </dd> <dt><a href="#">Services</a></dt> <dd>Services paragraph.</dd> </dl> Semantic markup
  34. jQuery, A Designer’s Perspective jQuery Summit Making it your own

    Don’t forget to update the function to reference your markup 34 <script> $(function(){ $("#accordion").accordion({ header: "dt" }); }); </script> Semantic markup
  35. jQuery, A Designer’s Perspective jQuery Summit Making it your own

    Skip the theme entirely and design from scratch* 35 No theme * You still need to add jQuery UI CSS to support interactivity
  36. jQuery, A Designer’s Perspective jQuery Summit 36 jQuery, A Designer’s

    Perspective jQuery Summit http://www.flickr.com/photos/jduty/3778581831/ Beyond the Baby Steps
  37. jQuery, A Designer’s Perspective jQuery Summit Get comfortable • Explore

    plug-ins • Learn the fundamentals of jQuery • Learn how to troubleshoot errors • Find and consume good resources • Practice, experiment, screw up & learn 37 and your hands dirty
  38. jQuery, A Designer’s Perspective jQuery Summit Questions? 38

  39. jQuery, A Designer’s Perspective jQuery Summit Thanks! @emilylewis emily@emilylewisdesign.com 39