• Like
  • Save

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

jQuery, A Designer's Perspective

  • 4,655 views
Uploaded on

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

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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,655
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide







































Transcript

  • 1. jQuery A Designer’s Perspective jQuery Summit November 16, Some rights reserved 2010
  • 2. Freelance Web Designer http://emilylewisdesign.com Author, Microformats Made Simple http://microformatsmadesimple.com Email: emily@emilylewisdesign.com Blog: http://ablognotlimited.com Twitter: @emilylewis jQuery, A Designer’s Perspective jQuery Summit 2
  • 3. I’m a JavaScript idiot jQuery, A Designer’s Perspective jQuery Summit 3
  • 4. “ Web Designer ” What do they do? jQuery, A Designer’s Perspective jQuery Summit 4
  • 5. “ Web Designer ” What does Emily do? jQuery, A Designer’s Perspective jQuery Summit 5
  • 6. accessibility visual design wireframing HTML5 content strategy “ Web Designer ” usability graphic design interaction design XHTML CSS jQuery, A Designer’s Perspective jQuery Summit 6
  • 7. JavaScript? nope jQuery, A Designer’s Perspective jQuery Summit 7
  • 8. It’s not just about what I do, but what I love • Semantic markup • Lean markup & CSS • Accessibility • Cross-browser support http://www.flickr.com/photos/danielgreene/3278394587/ jQuery, A Designer’s Perspective jQuery Summit 8
  • 9. JavaScript? nope jQuery, A Designer’s Perspective jQuery Summit 9
  • 10. It’s 2010 need rich, interactive experiences jQuery, A Designer’s Perspective jQuery Summit 10
  • 11. I looked at • Prototype • Dojo • MooTools And ran in the other direction ... jQuery, A Designer’s Perspective jQuery Summit 11
  • 12. WTF!? Ajax.Responders OOP with dojo.declare() Fx.Transitions jQuery, A Designer’s Perspective jQuery Summit 12
  • 13. Then, I heard about jQuery and it sounded pretty good jQuery, A Designer’s Perspective jQuery Summit 13
  • 14. It shared some of my passions • No inline scripting • CSS3 selector support • Cross-browser compatibility • Works with other libraries • Lightweight • (Mostly) accessible jQuery, A Designer’s Perspective jQuery Summit 14
  • 15. Ahhh, plain English “How do I ...” jQuery, A Designer’s Perspective jQuery Summit 15
  • 16. 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 jQuery, A Designer’s Perspective jQuery Summit 16
  • 17. The Intimidation Factor jQuery, A Designer’s Perspective jQuery Summit 17
  • 18. jQuery UI The Path of Least Complexity http://jqueryui.com jQuery, A Designer’s Perspective jQuery Summit 18
  • 19. Definitely designer friendly • Even simpler documentation than jQuery itself • Fully-themed, live demos • Clear markup examples • Use a little or a lot jQuery, A Designer’s Perspective jQuery Summit 19
  • 20. Definitely designer friendly Add interactivity right away, without extensive (or even mediocre) jQuery knowledge • Accordions • Dragging • Tabs • Dropping • Sliders • Resizing • Date pickers • Selecting • Dialog boxes • Sorting jQuery, A Designer’s Perspective jQuery Summit 20
  • 21. ThemeRoller • 24 pre-built themes (CSS) • Customize a theme • Or don’t use a theme at all http://jqueryui.com/themeroller/ jQuery, A Designer’s Perspective jQuery Summit 21
  • 22. Download Builder • Select the entire library of effects and widgets • Or select only what you need http://jqueryui.com/download jQuery, A Designer’s Perspective jQuery Summit 22
  • 23. Step 1 Install jQuery 1. Download 2. Add <script> <script src="/js/jquery-1.4.4.min.js"></script> jQuery, A Designer’s Perspective jQuery Summit 23
  • 24. Even Easier Step 1 Install jQuery 1. Add CDN-hosted <script> <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.4.2/jquery.min.js"></script>* * Google CDN for 1.4.4 forthcoming jQuery, A Designer’s Perspective jQuery Summit 24
  • 25. Source Order Install jQuery 1. jQuery script 2. jQuery plug-ins (this includes jQuery UI scripts) 3. Custom scripts jQuery, A Designer’s Perspective jQuery Summit 25
  • 26. Source Order Install jQuery Adding scripts to the bottom of your page can help improve performance <script src="http://ajax.googleapis.com/ajax/ libs/jquery/1.4.2/jquery.min.js"></script> </body> </html> jQuery, A Designer’s Perspective jQuery Summit 26
  • 27. Step 2 Download jQuery UI 1. Pick the widgets and theme you want 2. Extract compressed folder and save files to your server - /css/ - /js/ jQuery, A Designer’s Perspective jQuery Summit 27
  • 28. Step 3 Install jQuery UI 1. Add UI <script> after jQuery <script> <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> jQuery, A Designer’s Perspective jQuery Summit 28
  • 29. Step 3 Install jQuery UI 2. Add UI CSS <link rel="stylesheet" href="/css/smoothness/ jquery-ui-1.8.2.custom.css" /> </head> jQuery, A Designer’s Perspective jQuery Summit 29
  • 30. Step 4 Apply a widget - accordion 1. Get your markup ready <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> jQuery, A Designer’s Perspective jQuery Summit 30
  • 31. Step 4 Apply a widget - accordion 2. Add accordion function after jQuery and UI <scripts> <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> jQuery, A Designer’s Perspective jQuery Summit 31
  • 32. Interactivity in 4 easy steps jQuery, A Designer’s Perspective jQuery Summit 32
  • 33. Semantic markup Making it your own With some widgets, markup is flexible (POSH FTW!) <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> jQuery, A Designer’s Perspective jQuery Summit 33
  • 34. Semantic markup Making it your own Don’t forget to update the function to reference your markup <script> $(function(){      $("#accordion").accordion({ header: "dt" });        }); </script> jQuery, A Designer’s Perspective jQuery Summit 34
  • 35. No theme Making it your own Skip the theme entirely and design from scratch* * You still need to add jQuery UI CSS to support interactivity jQuery, A Designer’s Perspective jQuery Summit 35
  • 36. Beyond the Baby Steps http://www.flickr.com/photos/jduty/3778581831/ jQuery, A Designer’s Perspective jQuery Summit 36
  • 37. Get comfortable and your hands dirty • Explore plug-ins • Learn the fundamentals of jQuery • Learn how to troubleshoot errors • Find and consume good resources • Practice, experiment, screw up & learn jQuery, A Designer’s Perspective jQuery Summit 37
  • 38. Questions jQuery, A Designer’s Perspective jQuery Summit 38
  • 39. Thanks! @emilylewis emily@emilylewisdesign.com jQuery, A Designer’s Perspective jQuery Summit 39