jQuery, A Designer's Perspective

6,280 views

Published on

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.

Published in: Technology, Business
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,280
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide







































  • jQuery, A Designer's Perspective

    1. Some rights reserved jQueryADesigner’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 8jQuery, A Designer’s Perspective jQuery Summithttp://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 17jQuery, A Designer’s Perspective jQuery Summit The Intimidation Factor
    18. jQuery, A Designer’s Perspective jQuery Summit jQuery UI The Path ofLeast 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 36jQuery, A Designer’s Perspective jQuery Summithttp://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

    ×