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

Like this presentation? Why not share!

jQuery, A Designer's Perspective

on

  • 5,299 views

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.

Statistics

Views

Total Views
5,299
Views on SlideShare
5,294
Embed Views
5

Actions

Likes
10
Downloads
0
Comments
0

3 Embeds 5

http://localhost 3
http://www.linkedin.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

jQuery, A Designer's Perspective jQuery, A Designer's Perspective Presentation Transcript

  • jQuery A Designer’s Perspective jQuery Summit November 16, Some rights reserved 2010
  • 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
  • I’m a JavaScript idiot jQuery, A Designer’s Perspective jQuery Summit 3
  • “ Web Designer ” What do they do? jQuery, A Designer’s Perspective jQuery Summit 4
  • “ Web Designer ” What does Emily do? jQuery, A Designer’s Perspective jQuery Summit 5
  • accessibility visual design wireframing HTML5 content strategy “ Web Designer ” usability graphic design interaction design XHTML CSS jQuery, A Designer’s Perspective jQuery Summit 6
  • JavaScript? nope jQuery, A Designer’s Perspective jQuery Summit 7
  • 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
  • JavaScript? nope jQuery, A Designer’s Perspective jQuery Summit 9
  • It’s 2010 need rich, interactive experiences jQuery, A Designer’s Perspective jQuery Summit 10
  • I looked at • Prototype • Dojo • MooTools And ran in the other direction ... jQuery, A Designer’s Perspective jQuery Summit 11
  • WTF!? Ajax.Responders OOP with dojo.declare() Fx.Transitions jQuery, A Designer’s Perspective jQuery Summit 12
  • Then, I heard about jQuery and it sounded pretty good jQuery, A Designer’s Perspective jQuery Summit 13
  • 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
  • Ahhh, plain English “How do I ...” jQuery, A Designer’s Perspective jQuery Summit 15
  • 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
  • The Intimidation Factor jQuery, A Designer’s Perspective jQuery Summit 17
  • jQuery UI The Path of Least Complexity http://jqueryui.com jQuery, A Designer’s Perspective jQuery Summit 18
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Interactivity in 4 easy steps jQuery, A Designer’s Perspective jQuery Summit 32
  • 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
  • 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
  • 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
  • Beyond the Baby Steps http://www.flickr.com/photos/jduty/3778581831/ jQuery, A Designer’s Perspective jQuery Summit 36
  • 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
  • Questions jQuery, A Designer’s Perspective jQuery Summit 38
  • Thanks! @emilylewis emily@emilylewisdesign.com jQuery, A Designer’s Perspective jQuery Summit 39