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