SlideShare a Scribd company logo
1 of 39
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 Made Simple
http://microformatsmadesimple.com
Email: emily@emilylewisdesign.com
Blog: http://ablognotlimited.com
Twitter: @emilylewis
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
usability
accessibility
content strategy
interaction design
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 & CSS
• Accessibility
• Cross-browser support
8jQuery, A Designer’s Perspective jQuery Summithttp://www.flickr.com/photos/danielgreene/3278394587/
love
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
• Cross-browser compatibility
• Works with other libraries
• Lightweight
• (Mostly) accessible
14
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 better
• Focus on functionality (what do you want to do?)
• Lots of tutorials written by folks who have their
own “designer” perspective
16
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
• Fully-themed, live demos
• Clear markup examples
• Use a little or a lot
19
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
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/
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
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>
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
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.
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>
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/
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>
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>
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>
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>
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 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
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
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
jQuery, A Designer’s Perspective jQuery Summit 36jQuery, A Designer’s Perspective jQuery Summithttp://www.flickr.com/photos/jduty/3778581831/
Beyond the
Baby Steps
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
jQuery, A Designer’s Perspective jQuery Summit
Questions?
38
jQuery, A Designer’s Perspective jQuery Summit
Thanks!@emilylewis emily@emilylewisdesign.com
39

More Related Content

What's hot

jQuery Comes to XPages
jQuery Comes to XPagesjQuery Comes to XPages
jQuery Comes to XPagesTeamstudio
 
jQueryMobile Jump Start
jQueryMobile Jump StartjQueryMobile Jump Start
jQueryMobile Jump StartHaim Michael
 
jQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesjQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesTeamstudio
 
Automated perf optimization - jQuery Conference
Automated perf optimization - jQuery ConferenceAutomated perf optimization - jQuery Conference
Automated perf optimization - jQuery ConferenceMatthew Lancaster
 
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)David Giard
 
Building a Joomla Module
Building a Joomla ModuleBuilding a Joomla Module
Building a Joomla ModuleCory Webb
 
Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece
Transforming Front-End Disaster Code™ Into A Maintainable MasterpieceTransforming Front-End Disaster Code™ Into A Maintainable Masterpiece
Transforming Front-End Disaster Code™ Into A Maintainable MasterpieceDan Gribbin
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkSt. Petersburg College
 
Introduction to jquery mobile with Phonegap
Introduction to jquery mobile with PhonegapIntroduction to jquery mobile with Phonegap
Introduction to jquery mobile with PhonegapRakesh Jha
 
JS FAST Prototyping with AngularJS & RequireJS
JS FAST Prototyping with AngularJS & RequireJSJS FAST Prototyping with AngularJS & RequireJS
JS FAST Prototyping with AngularJS & RequireJSYuriy Silvestrov
 
Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with IonicMorris Singer
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex
 
What's this jQuery? Where it came from, and how it will drive innovation
What's this jQuery? Where it came from, and how it will drive innovationWhat's this jQuery? Where it came from, and how it will drive innovation
What's this jQuery? Where it came from, and how it will drive innovationMarakana Inc.
 
React JS Belgium Touch Base - React, Flux, React Native
React JS Belgium Touch Base - React, Flux, React NativeReact JS Belgium Touch Base - React, Flux, React Native
React JS Belgium Touch Base - React, Flux, React NativePhilos.io
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesMark Roden
 
Builda responsivetypescriptwebdriverio framework
Builda responsivetypescriptwebdriverio frameworkBuilda responsivetypescriptwebdriverio framework
Builda responsivetypescriptwebdriverio frameworkWim Selles
 
Telerik Kendo UI Overview
Telerik Kendo UI OverviewTelerik Kendo UI Overview
Telerik Kendo UI OverviewEd Musters
 

What's hot (18)

jQuery Comes to XPages
jQuery Comes to XPagesjQuery Comes to XPages
jQuery Comes to XPages
 
jQueryMobile Jump Start
jQueryMobile Jump StartjQueryMobile Jump Start
jQueryMobile Jump Start
 
Using Features
Using FeaturesUsing Features
Using Features
 
jQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesjQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPages
 
Automated perf optimization - jQuery Conference
Automated perf optimization - jQuery ConferenceAutomated perf optimization - jQuery Conference
Automated perf optimization - jQuery Conference
 
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)How I Learned to Stop Worrying and Love jQuery (Jan 2013)
How I Learned to Stop Worrying and Love jQuery (Jan 2013)
 
Building a Joomla Module
Building a Joomla ModuleBuilding a Joomla Module
Building a Joomla Module
 
Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece
Transforming Front-End Disaster Code™ Into A Maintainable MasterpieceTransforming Front-End Disaster Code™ Into A Maintainable Masterpiece
Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
 
Introduction to jquery mobile with Phonegap
Introduction to jquery mobile with PhonegapIntroduction to jquery mobile with Phonegap
Introduction to jquery mobile with Phonegap
 
JS FAST Prototyping with AngularJS & RequireJS
JS FAST Prototyping with AngularJS & RequireJSJS FAST Prototyping with AngularJS & RequireJS
JS FAST Prototyping with AngularJS & RequireJS
 
Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with Ionic
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
 
What's this jQuery? Where it came from, and how it will drive innovation
What's this jQuery? Where it came from, and how it will drive innovationWhat's this jQuery? Where it came from, and how it will drive innovation
What's this jQuery? Where it came from, and how it will drive innovation
 
React JS Belgium Touch Base - React, Flux, React Native
React JS Belgium Touch Base - React, Flux, React NativeReact JS Belgium Touch Base - React, Flux, React Native
React JS Belgium Touch Base - React, Flux, React Native
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
 
Builda responsivetypescriptwebdriverio framework
Builda responsivetypescriptwebdriverio frameworkBuilda responsivetypescriptwebdriverio framework
Builda responsivetypescriptwebdriverio framework
 
Telerik Kendo UI Overview
Telerik Kendo UI OverviewTelerik Kendo UI Overview
Telerik Kendo UI Overview
 

Viewers also liked

Microformats or: How I Learned to Write POSH and Love the Semantic Web
Microformats or: How I Learned to Write POSH and Love the Semantic WebMicroformats or: How I Learned to Write POSH and Love the Semantic Web
Microformats or: How I Learned to Write POSH and Love the Semantic WebEmily Lewis
 
Webuquerque: Social Media Means Business
Webuquerque: Social Media Means BusinessWebuquerque: Social Media Means Business
Webuquerque: Social Media Means BusinessEmily Lewis
 
GMM Presentation May10 Rev2
GMM Presentation May10 Rev2GMM Presentation May10 Rev2
GMM Presentation May10 Rev2Rich Hintz
 
Building the Webuquerque Community
Building the Webuquerque CommunityBuilding the Webuquerque Community
Building the Webuquerque CommunityEmily Lewis
 
Letchworth Controls. Nonprofit Fraud Prevention
Letchworth Controls. Nonprofit Fraud PreventionLetchworth Controls. Nonprofit Fraud Prevention
Letchworth Controls. Nonprofit Fraud PreventionSwaman1
 
SmartOrganization
SmartOrganizationSmartOrganization
SmartOrganizationpgorjup
 
Campus Communications Flyer 09[1]
Campus Communications Flyer 09[1]Campus Communications Flyer 09[1]
Campus Communications Flyer 09[1]karenmathis
 
Vamosa Corporate Presentation V5 Juy21 1
Vamosa Corporate Presentation V5 Juy21 1Vamosa Corporate Presentation V5 Juy21 1
Vamosa Corporate Presentation V5 Juy21 1Flexiant
 
Take Your Markup to 11
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11Emily Lewis
 
10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)Emily Lewis
 
AgileInnovation
AgileInnovationAgileInnovation
AgileInnovationpgorjup
 

Viewers also liked (14)

Microformats or: How I Learned to Write POSH and Love the Semantic Web
Microformats or: How I Learned to Write POSH and Love the Semantic WebMicroformats or: How I Learned to Write POSH and Love the Semantic Web
Microformats or: How I Learned to Write POSH and Love the Semantic Web
 
Webuquerque: Social Media Means Business
Webuquerque: Social Media Means BusinessWebuquerque: Social Media Means Business
Webuquerque: Social Media Means Business
 
GMM Presentation May10 Rev2
GMM Presentation May10 Rev2GMM Presentation May10 Rev2
GMM Presentation May10 Rev2
 
Building the Webuquerque Community
Building the Webuquerque CommunityBuilding the Webuquerque Community
Building the Webuquerque Community
 
Letchworth Controls. Nonprofit Fraud Prevention
Letchworth Controls. Nonprofit Fraud PreventionLetchworth Controls. Nonprofit Fraud Prevention
Letchworth Controls. Nonprofit Fraud Prevention
 
SmartOrganization
SmartOrganizationSmartOrganization
SmartOrganization
 
Campus Communications Flyer 09[1]
Campus Communications Flyer 09[1]Campus Communications Flyer 09[1]
Campus Communications Flyer 09[1]
 
Vamosa Corporate Presentation V5 Juy21 1
Vamosa Corporate Presentation V5 Juy21 1Vamosa Corporate Presentation V5 Juy21 1
Vamosa Corporate Presentation V5 Juy21 1
 
Ufa Ppt 1
Ufa Ppt 1Ufa Ppt 1
Ufa Ppt 1
 
MWMCA Farewell Articlw - 082415
MWMCA Farewell Articlw - 082415MWMCA Farewell Articlw - 082415
MWMCA Farewell Articlw - 082415
 
Take Your Markup to 11
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11
 
Ufa Ppt 1
Ufa Ppt 1Ufa Ppt 1
Ufa Ppt 1
 
10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)
 
AgileInnovation
AgileInnovationAgileInnovation
AgileInnovation
 

Similar to jQuery, A Designer's Perspective

Web app with j query &amp; javascript (5:4)
Web app with j query &amp; javascript (5:4)Web app with j query &amp; javascript (5:4)
Web app with j query &amp; javascript (5:4)Thinkful
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQueryAnil Kumar
 
The State of jQuery 2013
The State of jQuery 2013The State of jQuery 2013
The State of jQuery 2013Richard Worth
 
jQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and FuturejQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and FutureRichard Worth
 
J query presentation
J query presentationJ query presentation
J query presentationakanksha17
 
J query presentation
J query presentationJ query presentation
J query presentationsawarkar17
 
jQuery - Web Engineering
jQuery - Web Engineering jQuery - Web Engineering
jQuery - Web Engineering adeel990
 
jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013dmethvin
 
JavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadJavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadRuss Fustino
 
Implementing auto complete using JQuery
Implementing auto complete using JQueryImplementing auto complete using JQuery
Implementing auto complete using JQueryBhushan Mulmule
 
jQuery Conference 2012 keynote
jQuery Conference 2012 keynotejQuery Conference 2012 keynote
jQuery Conference 2012 keynotedmethvin
 
jQuery - Chapter 1 - Introduction
 jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - IntroductionWebStackAcademy
 
Introduction to jQuery - College Lecture
Introduction to jQuery - College LectureIntroduction to jQuery - College Lecture
Introduction to jQuery - College LectureZac Gordon
 
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)Thinkful
 

Similar to jQuery, A Designer's Perspective (20)

Web app with j query &amp; javascript (5:4)
Web app with j query &amp; javascript (5:4)Web app with j query &amp; javascript (5:4)
Web app with j query &amp; javascript (5:4)
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQuery
 
The State of jQuery 2013
The State of jQuery 2013The State of jQuery 2013
The State of jQuery 2013
 
jQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and FuturejQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and Future
 
J query presentation
J query presentationJ query presentation
J query presentation
 
J query presentation
J query presentationJ query presentation
J query presentation
 
jQuery - Web Engineering
jQuery - Web Engineering jQuery - Web Engineering
jQuery - Web Engineering
 
Javascript libraries
Javascript librariesJavascript libraries
Javascript libraries
 
jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013
 
JavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadJavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) upload
 
Implementing auto complete using JQuery
Implementing auto complete using JQueryImplementing auto complete using JQuery
Implementing auto complete using JQuery
 
jQuery Conference 2012 keynote
jQuery Conference 2012 keynotejQuery Conference 2012 keynote
jQuery Conference 2012 keynote
 
JQuery UI
JQuery UIJQuery UI
JQuery UI
 
jQuery - Chapter 1 - Introduction
 jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - Introduction
 
Introduction to jQuery - College Lecture
Introduction to jQuery - College LectureIntroduction to jQuery - College Lecture
Introduction to jQuery - College Lecture
 
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)
Build a Web App with JavaScript and jQuery (5:18:17, Los Angeles)
 
Jquery
JqueryJquery
Jquery
 
Jquery
JqueryJquery
Jquery
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
 

More from Emily Lewis

Create Your Own Starter Files
Create Your Own Starter FilesCreate Your Own Starter Files
Create Your Own Starter FilesEmily Lewis
 
The Hiring Process
The Hiring ProcessThe Hiring Process
The Hiring ProcessEmily Lewis
 
Take Your Markup to Eleven
Take Your Markup to ElevenTake Your Markup to Eleven
Take Your Markup to ElevenEmily Lewis
 
Designer-Friendly EE
Designer-Friendly EEDesigner-Friendly EE
Designer-Friendly EEEmily Lewis
 
Multiple Site Management with ExpressionEngine
Multiple Site Management with ExpressionEngineMultiple Site Management with ExpressionEngine
Multiple Site Management with ExpressionEngineEmily Lewis
 
WordPress & Other Content Management Systems
WordPress & Other Content Management SystemsWordPress & Other Content Management Systems
WordPress & Other Content Management SystemsEmily Lewis
 
Practical Microformats - Voices That Matter
Practical Microformats - Voices That MatterPractical Microformats - Voices That Matter
Practical Microformats - Voices That MatterEmily Lewis
 
[Workshop Summits] Microformats Workshop
[Workshop Summits] Microformats Workshop[Workshop Summits] Microformats Workshop
[Workshop Summits] Microformats WorkshopEmily Lewis
 
Microformats: Web Semantics & More
Microformats: Web Semantics & MoreMicroformats: Web Semantics & More
Microformats: Web Semantics & MoreEmily Lewis
 
Podcasting & Vodcasting 101
Podcasting & Vodcasting 101Podcasting & Vodcasting 101
Podcasting & Vodcasting 101Emily Lewis
 

More from Emily Lewis (10)

Create Your Own Starter Files
Create Your Own Starter FilesCreate Your Own Starter Files
Create Your Own Starter Files
 
The Hiring Process
The Hiring ProcessThe Hiring Process
The Hiring Process
 
Take Your Markup to Eleven
Take Your Markup to ElevenTake Your Markup to Eleven
Take Your Markup to Eleven
 
Designer-Friendly EE
Designer-Friendly EEDesigner-Friendly EE
Designer-Friendly EE
 
Multiple Site Management with ExpressionEngine
Multiple Site Management with ExpressionEngineMultiple Site Management with ExpressionEngine
Multiple Site Management with ExpressionEngine
 
WordPress & Other Content Management Systems
WordPress & Other Content Management SystemsWordPress & Other Content Management Systems
WordPress & Other Content Management Systems
 
Practical Microformats - Voices That Matter
Practical Microformats - Voices That MatterPractical Microformats - Voices That Matter
Practical Microformats - Voices That Matter
 
[Workshop Summits] Microformats Workshop
[Workshop Summits] Microformats Workshop[Workshop Summits] Microformats Workshop
[Workshop Summits] Microformats Workshop
 
Microformats: Web Semantics & More
Microformats: Web Semantics & MoreMicroformats: Web Semantics & More
Microformats: Web Semantics & More
 
Podcasting & Vodcasting 101
Podcasting & Vodcasting 101Podcasting & Vodcasting 101
Podcasting & Vodcasting 101
 

Recently uploaded

Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 

Recently uploaded (20)

Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 

jQuery, A Designer's Perspective

  • 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

Editor's Notes