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.

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