echo conference 2008
DESCRIPTION
Presentation by Christian Bradford and I, at Echo Conference 2008.TRANSCRIPT
![Page 1: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/1.jpg)
![Page 2: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/2.jpg)
pre-gameWho are we? What do we do?
![Page 3: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/3.jpg)
![Page 4: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/4.jpg)
We ensure that designers get the glory, and theserver-side guys can stick to what they do best.
![Page 5: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/5.jpg)
“The purpose of the Godbit Project is to help the Church catch up with the rest of the world in adherence to Web Standards given by the World Wide Web Consortium, the governing body of best practices on the Internet.”
www.godbit.com/purpose
Godbit.com
![Page 6: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/6.jpg)
“Not since Gutenberg invented the modern printing press more than 500 years ago, making books and scientific tomes affordable and widely available to the masses, has any new invention empowered individuals, and transformed access to information, as profoundly as Google.”
David ViseThe Google Story
![Page 7: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/7.jpg)
standardsWhat are they? Why do they matter?
![Page 8: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/8.jpg)
“Something considered by an authority or by general consent as a basis of comparison; an approved model.”
~ Dictionary.com
![Page 9: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/9.jpg)
Conventions needed to keep things going
Common Standards
![Page 10: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/10.jpg)
Weights & Measures
![Page 11: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/11.jpg)
Non-metric countries
Liberia, Myanmar, United States
![Page 12: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/12.jpg)
Standard video resolutions
![Page 13: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/13.jpg)
World War II ~ American Standard
![Page 14: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/14.jpg)
Medial standards save lives
![Page 15: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/15.jpg)
(Actually, more like strong suggestions)
web standards
![Page 16: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/16.jpg)
![Page 17: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/17.jpg)
A cohesive set of best practices governing web development; specifically focused on accessibility of HTML, CSS and JavaScript.
~ Our definition
![Page 18: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/18.jpg)
Web Standards Project
“Founded in 1998, The Web Standards Project (WaSP) fights for standards that reduce the cost and complexity of development while increasing the accessibility and long-term viability of any site published on the Web.”
~ WebStandards.org
![Page 19: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/19.jpg)
![Page 20: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/20.jpg)
“Zeldman is to Web Standards as Madden is to football.”
![Page 21: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/21.jpg)
code portabilityAcross different operating systems,many browsers, and mobile devices
![Page 22: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/22.jpg)
![Page 23: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/23.jpg)
![Page 24: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/24.jpg)
![Page 25: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/25.jpg)
Web Standards are about ubiquitous computing. Code it once, run anywhere:
• Laptop
• Desktop
• Mobile Phone
• Blackberry
• Game Console
• TV
![Page 26: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/26.jpg)
Apostle Paul:
“... I have become all things to all men so that by all possible means I might save some. I do all this for the sake of the gospel, that I may share in its blessings.” ~ 1 Corinthians 9:22-23
![Page 27: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/27.jpg)
unique roles
![Page 28: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/28.jpg)
![Page 29: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/29.jpg)
appropriate deploymentA.K.A. ~ Don’t send SWATto write a parking ticket.
![Page 30: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/30.jpg)
![Page 31: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/31.jpg)
![Page 32: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/32.jpg)
![Page 33: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/33.jpg)
![Page 34: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/34.jpg)
Flash = De-facto standard
Mozilla holds a Guinness World Record for the most software downloaded in 24 hours. From 18:16 UTC on June 17, 2008 to 18:16 UTC on June 18, 2008, 8,002,530 people downloaded Firefox 3.
“So there’s not actually a world record to break, but to put that in perspective, we get 8 million installs of the Flash Player... on an average day.”
http://blog.digitalbackcountry.com/?p=1444
![Page 35: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/35.jpg)
![Page 36: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/36.jpg)
DOCTYPESBeing specific with your pages
![Page 37: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/37.jpg)
•Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
•Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
html 4.01
![Page 38: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/38.jpg)
•Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
•Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0
![Page 39: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/39.jpg)
HTML 5.0
<!DOCTYPE html>
Neither Transitional, nor Strict
![Page 40: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/40.jpg)
SemanticsA rose, by any other name...
![Page 41: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/41.jpg)
Structure Content Rhetoric Other
divspanol ul li dl dt dddelinsh1 - h6p
aabbracronymaddresscodedfnkbdqsampvar
emstrong
blockquoteciteq
http://westciv.com/style_master/house/good_oil/semantics/classification.html
![Page 42: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/42.jpg)
![Page 43: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/43.jpg)
<div class="vcard"><a class="fn org url" href="http://example.com/">Example, Inc.</a>
<div class="adr"><span class="type">Work</span>:<span class="street-address">123 Fourth Street</span>
<span class="locality">Palo Alto</span>, <abbr class="region" title="California">CA</abbr> <span class="postal-code">94301</span> <span class="country-name">USA</span> </div> <div class="tel"> <span class="type">Work</span> +1-650-289-4040 </div> <div>Email: <span class="email">[email protected]</span> </div></div>
hCard - personal information
![Page 44: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/44.jpg)
![Page 45: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/45.jpg)
![Page 46: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/46.jpg)
<div class="vevent"><a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
<span class="summary">Web 2.0 Conference</span>: <abbr class="dtstart" title="2007-10-05">October 5</abbr>- <abbr class="dtend" title="2007-10-20">19</abbr>,
at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>
hCalendar - event planning
![Page 47: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/47.jpg)
![Page 48: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/48.jpg)
<div class="hreview"><span class="reviewer vcard"><span class="fn">anonymous</span>,<abbr class="dtreviewed" title="20050418">April 18th, 2005</abbr>
</span><div class="item"><a lang="zh" class="url fn" href="http://www.imdb.com/title/tt0277/">Ying Xiong (<span lang="en">HERO</span>)</a>
</div><div>Rating: <span class="rating">4</span> out of 5</div><div class="description"><p>This movie has great music and visuals.</p>
</div></div>
hReviews - all types of reviews
![Page 49: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/49.jpg)
![Page 50: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/50.jpg)
Direct reference<cite class="bibleref">2 Tim 2:15</cite>
Hyperlinked reference<a href="http://www.gnpcb.org/esv/search/?q=2+Tim+2.15" class="bibleref">2 Tim 2:15</a>
Longform refenceIn <cite class="bibleref" title="2Tim 2:15">Paul's second epistle to Timothy, the second chapter and the fifteenth verse</cite>, we see...
http://www.semanticbible.com/bibleref/bibleref-overview.html
Bibleref
![Page 51: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/51.jpg)
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Internet Explorer 8 Meta Switch
(Hand-holding for corporate enterprise software)
![Page 52: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/52.jpg)
![Page 53: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/53.jpg)
CSS 2.1Selectors and the IE6 problem
![Page 54: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/54.jpg)
• element selectorsp {text-decoration: line-through;}
• classes and ids.bad-move {font: bold 256pt 'MS Comic Sans';}#small-print {font: normal 2pt Helvetica;}
• descendentaddress abbr {color: #000;}
• combineddiv#review p.invalid {color: #f00;}
The Basics
![Page 55: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/55.jpg)
• pseudo-classesa:hover {text-decoration: overline;}li:first-child {border-left: solid 1px #000;}input:focus {background-color: #ff0;}
• pseudo-elements.required:before {content: '* ';}.new:after {content: ' New!';}
Pseudo Selectors
![Page 56: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/56.jpg)
![Page 57: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/57.jpg)
Mobile Me, replacement to Apple’s .Mac service,no longer offers support for Internet Explorer 6.
![Page 58: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/58.jpg)
CSS 3.0New features on the horizon
![Page 59: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/59.jpg)
• @font-face
• border-radius + box-shadow
• opacity
• text-shadow
• multiple backgrounds
http://css3.info
![Page 60: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/60.jpg)
![Page 61: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/61.jpg)
![Page 62: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/62.jpg)
•Firefox-moz-border-radius-topright
•Safari-webkit-animation-name
•Opera-o-text-overflow
http://css3.info
Browser prefixes
![Page 63: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/63.jpg)
![Page 64: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/64.jpg)
![Page 65: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/65.jpg)
![Page 66: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/66.jpg)
![Page 68: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/68.jpg)
“Embrace Constraints”– Mark Kraemer
All modern monitors support at
least 1024×768 pixel resolution.
960 is divisible by 2, 3, 4, 5, 6, 8,
10, 12, 15, 16, 20, 24, 30, 32, 40,
48, 60, 64, 80, 96, 120, 160, 192,
240, 320 and 480.
css
![Page 69: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/69.jpg)
The 960 Grid System is an effort to streamline
web development by providing commonly used
dimensions, based on a width of 960 pixels.
There are two variants: 12 and 16 columns,
which can be used separately or in tandem.
![Page 70: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/70.jpg)
The basis of the grid is ideally suited to rapid
prototyping, but it would work equally well
for workflow in a production environment.
There are printable sketch sheets, Photoshop
and Fireworks templates, and a CSS framework
that contain identical column measurements.
![Page 71: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/71.jpg)
Inspiration: Khoi Vinh
![Page 72: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/72.jpg)
Inspiration: Cameron Moll
![Page 73: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/73.jpg)
Inspiration: Olav Bjørkøy
![Page 74: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/74.jpg)
Inspiration: Brandon Schauer
![Page 75: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/75.jpg)
The 12 column grid is divided into portions
that are 60 pixels wide, whereas the 16
column grid consists 40 pixel increments.
Each column has 10 pixels of margin to either
side, which stack to create gutters that are
20 pixels wide between each of the columns.
![Page 76: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/76.jpg)
<div class="container_12"> <div class="grid_7 prefix_1"> <div class="grid_2 alpha"> ... </div> <div class="grid_3"> ... </div> <div class="grid_2 omega"> ... </div> </div> <div class="grid_3 suffix_1"> ... </div></div>
![Page 77: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/77.jpg)
12 column grid measurements
![Page 78: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/78.jpg)
16 column grid measurements
![Page 79: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/79.jpg)
![Page 80: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/80.jpg)
![Page 81: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/81.jpg)
![Page 82: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/82.jpg)
![Page 83: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/83.jpg)
![Page 84: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/84.jpg)
![Page 85: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/85.jpg)
![Page 86: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/86.jpg)
![Page 87: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/87.jpg)
![Page 88: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/88.jpg)
![Page 89: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/89.jpg)
![Page 90: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/90.jpg)
Progressive enhancement
• <a href="javascript:myfunction();"onclick="return false;">Link Text</a>
• <a href="page.html" onclick="myFunction();return false;">Link Text</a>
• <a href="page.html"class="special">Link Text</a>
![Page 91: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/91.jpg)
![Page 92: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/92.jpg)
• Consistent coding style
• Increases maintainability
• Rapidly prototype ideas
• Improvements made to core
• Not re-inventing the wheel
Why use a framework?
![Page 93: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/93.jpg)
jQuery Yahoo! UI
Mochikit Dojo Toolkit
Mootools Ext JS
.NET Ajax Prototype +Script.aculo.us
Many frameworks available
![Page 94: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/94.jpg)
jQuery Yahoo! User Interface Library
![Page 95: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/95.jpg)
jQuery YUI
![Page 96: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/96.jpg)
.slideDown() .slideUp()
.fadeIn() .fadeOut()
.show() .hide()
.toggle() .animate()
jQuery core effects
![Page 97: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/97.jpg)
DOM scripting, long-hand:
document.getElementById('container').getElementsByTagName('p');
jQuery syntax:
$('#container p');
CSS syntax:
#container p {...}
jQuery reads like CSS
![Page 98: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/98.jpg)
$('div.dynamic').is(':visible');$('div.dynamic').not(':hidden');
$('div.dynamic').not(':visible');$('div.dynamic').is(':hidden');
$('form#email_form').is('.validated');
$('input.checkbox').not(':checked');
jQuery conditional logic
![Page 99: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/99.jpg)
$('a.button').click(function(){$(this).next('div.drawer').addClass('on').removeClass('off').html('Hello world').slideDown('fast').siblings('div').slideUp('fast');
$(this).parent('form').filter(':text').val('').attr('disabled','disabled');
});
Chain-able events in jQuery
![Page 100: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/100.jpg)
$('#layer_1, #layer_2, #layer_3, #layer_4,#layer_5, #layer_6, #layer_7, #layer_8,#layer_9 td.data a').click(function(){// The magic happens here.
});
Combine selectors in jQuery
![Page 101: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/101.jpg)
Who usesjQuery?
![Page 102: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/102.jpg)
American Eagle Ars Technica
BBC Digg
![Page 103: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/103.jpg)
Drupal
Fandango Feedburner
ExpressionEngine
![Page 104: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/104.jpg)
Kayak
Google Code Intel
Mozilla
![Page 105: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/105.jpg)
MSNBC the Onion
Quicken SourceForge
![Page 106: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/106.jpg)
Technorati Textpattern
WordPress Zend PHP
![Page 107: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/107.jpg)
YUI CodeExamples
![Page 108: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/108.jpg)
var D = YAHOO.util.Dom;var E = YAHOO.util.Event;var the_list = D.get(‘list_id’);var all_items = the_list.getElementsByTagName(‘li’);
E.on([‘btn_1’, ‘btn_2’], ‘click’, function(e){
D.setStyle(all_items, ‘display’, ‘block’);D.removeClass(all_items, ‘old_class’);D.addClass(all_items, ‘new_class’);E.stopEvent(e);
});
YUI is robust, but also verbose
![Page 109: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/109.jpg)
YUI is very well documented
![Page 110: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/110.jpg)
var slider_go = new YAHOO.util.Anim('slider');
slider_go.attributes.width = {to: 500}; slider_go.attributes.height = {to: 500}; slider_go.attributes.opacity = {to: 1}; slider_go.duration = 0.3;
slider_go.onComplete.subscribe(callback);
slider_go.animate();
ActionScript style YUI animation
![Page 111: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/111.jpg)
YUI().use('node', function(Y) { Y.get('#demo').addClass('enabled');});
Y.all('.demo').addClass('enabled');
YUI().use('dd-drag', function(Y) { var dd = new Y.DD.Drag({ node: '#demo' });});
YUI 3.0 more like jQuery
![Page 112: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/112.jpg)
YUI JSWidgets
![Page 113: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/113.jpg)
![Page 114: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/114.jpg)
![Page 115: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/115.jpg)
![Page 116: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/116.jpg)
![Page 117: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/117.jpg)
Who Uses
YUI?
![Page 118: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/118.jpg)
Yahoo Yahoo Answers
Yahoo Finance Yahoo Autos
![Page 119: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/119.jpg)
Hot Jobs Delicious
Upcoming SmugMug
![Page 120: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/120.jpg)
Target HitWise
Slashdot Newsvine
![Page 121: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/121.jpg)
LinkedIn Flickr
JetBlue Southwest Air
![Page 122: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/122.jpg)
Viewzi.com
![Page 123: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/123.jpg)
![Page 124: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/124.jpg)
thanks for coming!
![Page 125: Echo Conference 2008](https://reader033.vdocuments.us/reader033/viewer/2022050816/54c7f7644a795954348b459b/html5/thumbnails/125.jpg)
Christian Bradfordhttp://greychr.com/http://twitter.com/greychr/
Nathan Smithhttp://sonspring.com/http://twitter.com/nathansmith/
Keep in touch