Your SlideShare is downloading. ×
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
jQuery, A Designer's Perspective
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery, A Designer's Perspective

4,860

Published 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.

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

No Downloads
Views
Total Views
4,860
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
11
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. 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

    ×