Echo Conference 2008
125
-
Upload
nathan-smith -
Category
Technology
-
view
119 -
download
1
description
Presentation by Christian Bradford and I, at Echo Conference 2008.
Transcript of Echo Conference 2008
pre-gameWho are we? What do we do?
We ensure that designers get the glory, and theserver-side guys can stick to what they do best.
“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
“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
standardsWhat are they? Why do they matter?
“Something considered by an authority or by general consent as a basis of comparison; an approved model.”
~ Dictionary.com
Conventions needed to keep things going
Common Standards
Weights & Measures
Non-metric countries
Liberia, Myanmar, United States
Standard video resolutions
World War II ~ American Standard
Medial standards save lives
(Actually, more like strong suggestions)
web standards
A cohesive set of best practices governing web development; specifically focused on accessibility of HTML, CSS and JavaScript.
~ Our definition
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
“Zeldman is to Web Standards as Madden is to football.”
code portabilityAcross different operating systems,many browsers, and mobile devices
Web Standards are about ubiquitous computing. Code it once, run anywhere:
• Laptop
• Desktop
• Mobile Phone
• Blackberry
• Game Console
• TV
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
unique roles
appropriate deploymentA.K.A. ~ Don’t send SWATto write a parking ticket.
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
DOCTYPESBeing specific with your pages
•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
•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
HTML 5.0
<!DOCTYPE html>
Neither Transitional, nor Strict
SemanticsA rose, by any other name...
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
<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
<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
<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
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
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Internet Explorer 8 Meta Switch
(Hand-holding for corporate enterprise software)
CSS 2.1Selectors and the IE6 problem
• 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
• 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
Mobile Me, replacement to Apple’s .Mac service,no longer offers support for Internet Explorer 6.
CSS 3.0New features on the horizon
• @font-face
• border-radius + box-shadow
• opacity
• text-shadow
• multiple backgrounds
http://css3.info
•Firefox-moz-border-radius-topright
•Safari-webkit-animation-name
•Opera-o-text-overflow
http://css3.info
Browser prefixes
“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
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.
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.
Inspiration: Khoi Vinh
Inspiration: Cameron Moll
Inspiration: Olav Bjørkøy
Inspiration: Brandon Schauer
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.
<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>
12 column grid measurements
16 column grid measurements
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>
• Consistent coding style
• Increases maintainability
• Rapidly prototype ideas
• Improvements made to core
• Not re-inventing the wheel
Why use a framework?
jQuery Yahoo! UI
Mochikit Dojo Toolkit
Mootools Ext JS
.NET Ajax Prototype +Script.aculo.us
Many frameworks available
jQuery Yahoo! User Interface Library
jQuery YUI
.slideDown() .slideUp()
.fadeIn() .fadeOut()
.show() .hide()
.toggle() .animate()
jQuery core effects
DOM scripting, long-hand:
document.getElementById('container').getElementsByTagName('p');
jQuery syntax:
$('#container p');
CSS syntax:
#container p {...}
jQuery reads like CSS
$('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
$('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
$('#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
Who usesjQuery?
American Eagle Ars Technica
BBC Digg
Drupal
Fandango Feedburner
ExpressionEngine
Kayak
Google Code Intel
Mozilla
MSNBC the Onion
Quicken SourceForge
Technorati Textpattern
WordPress Zend PHP
YUI CodeExamples
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
YUI is very well documented
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
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
YUI JSWidgets
Who Uses
YUI?
Yahoo Yahoo Answers
Yahoo Finance Yahoo Autos
Hot Jobs Delicious
Upcoming SmugMug
Target HitWise
Slashdot Newsvine
LinkedIn Flickr
JetBlue Southwest Air
Viewzi.com
thanks for coming!
Christian Bradfordhttp://greychr.com/http://twitter.com/greychr/
Nathan Smithhttp://sonspring.com/http://twitter.com/nathansmith/
Keep in touch
