Uploaded byEmily Lewis
jQuery, A Designer's Perspective
The document is a presentation by Emily Lewis discussing jQuery from a designer's perspective at the jQuery Summit in 2010. It highlights the ease of use and designer-friendly features of jQuery and jQuery UI, offering insights into installation, interactivity implementation, and customization. Additionally, it encourages designers to engage with jQuery, explore plugins, and delve into the fundamentals of JavaScript framework for better web design experiences.
More Related Content
![Campus Communications Flyer 09[1]](https://cdn.slidesharecdn.com/ss_thumbnails/campuscommunicationsflyer091-12560133225486-phpapp02-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to jQuery, A Designer's Perspective
![[Workshop Summits] Microformats Workshop](https://cdn.slidesharecdn.com/ss_thumbnails/microformatsworkshop-100120093459-phpapp02-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
jQuery, A Designer's Perspective
- 1. Some rights reserved jQueryADesigner’sPerspective jQuery Summit November 16, 2010 Environments for Humans
- 2. jQuery, A Designer’sPerspective 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’sPerspective jQuery Summit I’m a JavaScript idiot 3
- 4. jQuery, A Designer’sPerspective jQuery Summit “Web Designer” What do they do? 4
- 5. jQuery, A Designer’sPerspective jQuery Summit “Web Designer” What does Emily do? 5
- 6. jQuery, A Designer’sPerspective jQuery Summit “Web Designer” 6 CSS HTML5 graphic design visual design XHTML wireframing usability accessibility content strategy interaction design
- 7. jQuery, A Designer’sPerspective jQuery Summit JavaScript? nope 7
- 8. jQuery, A Designer’sPerspective 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’sPerspective jQuery Summit JavaScript? nope 9
- 10. jQuery, A Designer’sPerspective jQuery Summit It’s 2010 need rich, interactive experiences 10
- 11. jQuery, A Designer’sPerspective jQuery Summit I looked at • Prototype • Dojo • MooTools 11 And ran in the other direction ...
- 12. jQuery, A Designer’sPerspective jQuery Summit WTF!? 12 Ajax.Responders Fx.Transitions OOP with dojo.declare()
- 13. jQuery, A Designer’sPerspective jQuery Summit jQuery 13 and it sounded pretty good Then,I heard about
- 14. jQuery, A Designer’sPerspective 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’sPerspective jQuery Summit Ahhh, plain English 15 “How do I ...”
- 16. jQuery, A Designer’sPerspective 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’sPerspective jQuery Summit 17jQuery, A Designer’s Perspective jQuery Summit The Intimidation Factor
- 18. jQuery, A Designer’sPerspective jQuery Summit jQuery UI The Path ofLeast Complexity 18 http://jqueryui.com
- 19. jQuery, A Designer’sPerspective 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’sPerspective 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’sPerspective 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’sPerspective 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’sPerspective 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’sPerspective 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’sPerspective 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’sPerspective 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’sPerspective 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’sPerspective 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’sPerspective 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’sPerspective 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’sPerspective 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’sPerspective jQuery Summit Interactivity in 4 easy steps 32
- 33. jQuery, A Designer’sPerspective 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’sPerspective 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’sPerspective 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’sPerspective jQuery Summit 36jQuery, A Designer’s Perspective jQuery Summithttp://www.flickr.com/photos/jduty/3778581831/ Beyond the Baby Steps
- 37. jQuery, A Designer’sPerspective 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’sPerspective jQuery Summit Questions? 38
- 39. jQuery, A Designer’sPerspective jQuery Summit Thanks!@emilylewis emily@emilylewisdesign.com 39