Some rights reserved
jQueryADesigner’s Perspective
jQuery Summit November 16, 2010
Environments for Humans
jQuery, A Designer’s Perspective jQuery Summit 2
Freelance Web Designer
http://emilylewisdesign.com
Author, Microformats M...
jQuery, A Designer’s Perspective jQuery Summit
I’m a JavaScript idiot
3
jQuery, A Designer’s Perspective jQuery Summit
“Web Designer”
What do they do?
4
jQuery, A Designer’s Perspective jQuery Summit
“Web Designer”
What does Emily do?
5
jQuery, A Designer’s Perspective jQuery Summit
“Web Designer”
6
CSS
HTML5
graphic design
visual design
XHTML
wireframing
u...
jQuery, A Designer’s Perspective jQuery Summit
JavaScript?
nope
7
jQuery, A Designer’s Perspective jQuery Summit
It’s not just about what I do, but
what I
• Semantic markup
• Lean markup &...
jQuery, A Designer’s Perspective jQuery Summit
JavaScript?
nope
9
jQuery, A Designer’s Perspective jQuery Summit
It’s 2010
need rich, interactive experiences
10
jQuery, A Designer’s Perspective jQuery Summit
I looked at
• Prototype
• Dojo
• MooTools
11
And ran in the other direction...
jQuery, A Designer’s Perspective jQuery Summit
WTF!?
12
Ajax.Responders
Fx.Transitions
OOP with dojo.declare()
jQuery, A Designer’s Perspective jQuery Summit
jQuery
13
and it sounded pretty good
Then,I heard about
jQuery, A Designer’s Perspective jQuery Summit
It shared some of my passions
• No inline scripting
• CSS3 selector support...
jQuery, A Designer’s Perspective jQuery Summit
Ahhh, plain English
15
“How do I ...”
jQuery, A Designer’s Perspective jQuery Summit
Almost designer friendly
• The documentation isn’t perfect, but it is bette...
jQuery, A Designer’s Perspective jQuery Summit 17jQuery, A Designer’s Perspective jQuery Summit
The
Intimidation
Factor
jQuery, A Designer’s Perspective jQuery Summit
jQuery UI
The Path ofLeast Complexity
18
http://jqueryui.com
jQuery, A Designer’s Perspective jQuery Summit
Definitely designer friendly
• Even simpler documentation than jQuery itself...
jQuery, A Designer’s Perspective jQuery Summit
Definitely designer friendly
Add interactivity right away, without extensive...
jQuery, A Designer’s Perspective jQuery Summit
ThemeRoller
• 24 pre-built themes (CSS)
• Customize a theme
• Or don’t use ...
jQuery, A Designer’s Perspective jQuery Summit
Download Builder
• Select the entire library
of effects and widgets
• Or sel...
jQuery, A Designer’s Perspective jQuery Summit
Install jQuery
1. Download
2. Add <script>
23
Step 1
1.
2.
<script src="/js...
jQuery, A Designer’s Perspective jQuery Summit
Install jQuery
1. Add CDN-hosted <script>
24
Even Easier Step 1
1.
<script ...
jQuery, A Designer’s Perspective jQuery Summit
Install jQuery
1. jQuery script
2. jQuery plug-ins (this includes jQuery UI...
jQuery, A Designer’s Perspective jQuery Summit
Install jQuery
Adding scripts to the bottom of your page can help
improve p...
jQuery, A Designer’s Perspective jQuery Summit
Download jQuery UI
1. Pick the widgets and theme you want
2. Extract compre...
jQuery, A Designer’s Perspective jQuery Summit
Install jQuery UI
1. Add UI <script> after jQuery <script>
28
Step 3
1.
<sc...
jQuery, A Designer’s Perspective jQuery Summit
Install jQuery UI
2. Add UI CSS
29
Step 3
2.
<link rel="stylesheet" href="/...
jQuery, A Designer’s Perspective jQuery Summit
Apply a widget - accordion
1. Get your markup ready
30
Step 4
1.
<div id="a...
jQuery, A Designer’s Perspective jQuery Summit
Apply a widget - accordion
2. Add accordion function after jQuery and UI
<s...
jQuery, A Designer’s Perspective jQuery Summit
Interactivity in 4 easy steps
32
jQuery, A Designer’s Perspective jQuery Summit
Making it your own
With some widgets, markup is flexible (POSH FTW!)
33
<dl ...
jQuery, A Designer’s Perspective jQuery Summit
Making it your own
Don’t forget to update the function to reference
your ma...
jQuery, A Designer’s Perspective jQuery Summit
Making it your own
Skip the theme entirely and
design from scratch*
35
No t...
jQuery, A Designer’s Perspective jQuery Summit 36jQuery, A Designer’s Perspective jQuery Summithttp://www.flickr.com/photos...
jQuery, A Designer’s Perspective jQuery Summit
Get comfortable
• Explore plug-ins
• Learn the fundamentals of jQuery
• Lea...
jQuery, A Designer’s Perspective jQuery Summit
Questions?
38
jQuery, A Designer’s Perspective jQuery Summit
Thanks!@emilylewis emily@emilylewisdesign.com
39
Upcoming SlideShare
Loading in...5
×

jQuery, A Designer's Perspective

4,939

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

No notes for slide







































  • jQuery, A Designer's Perspective

    1. 1. Some rights reserved jQueryADesigner’s Perspective jQuery Summit November 16, 2010 Environments for Humans
    2. 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. 3. jQuery, A Designer’s Perspective jQuery Summit I’m a JavaScript idiot 3
    4. 4. jQuery, A Designer’s Perspective jQuery Summit “Web Designer” What do they do? 4
    5. 5. jQuery, A Designer’s Perspective jQuery Summit “Web Designer” What does Emily do? 5
    6. 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. 7. jQuery, A Designer’s Perspective jQuery Summit JavaScript? nope 7
    8. 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. 9. jQuery, A Designer’s Perspective jQuery Summit JavaScript? nope 9
    10. 10. jQuery, A Designer’s Perspective jQuery Summit It’s 2010 need rich, interactive experiences 10
    11. 11. jQuery, A Designer’s Perspective jQuery Summit I looked at • Prototype • Dojo • MooTools 11 And ran in the other direction ...
    12. 12. jQuery, A Designer’s Perspective jQuery Summit WTF!? 12 Ajax.Responders Fx.Transitions OOP with dojo.declare()
    13. 13. jQuery, A Designer’s Perspective jQuery Summit jQuery 13 and it sounded pretty good Then,I heard about
    14. 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. 15. jQuery, A Designer’s Perspective jQuery Summit Ahhh, plain English 15 “How do I ...”
    16. 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. 17. jQuery, A Designer’s Perspective jQuery Summit 17jQuery, A Designer’s Perspective jQuery Summit The Intimidation Factor
    18. 18. jQuery, A Designer’s Perspective jQuery Summit jQuery UI The Path ofLeast Complexity 18 http://jqueryui.com
    19. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 32. jQuery, A Designer’s Perspective jQuery Summit Interactivity in 4 easy steps 32
    33. 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. 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. 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. 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. 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. 38. jQuery, A Designer’s Perspective jQuery Summit Questions? 38
    39. 39. jQuery, A Designer’s Perspective jQuery Summit Thanks!@emilylewis emily@emilylewisdesign.com 39

    ×