Echo Conference 2008

transcript

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">info@example.com</span> </div></div>

hCard - personal information

<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

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

www.960.GS

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

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.

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

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

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

Echo Conference 2008

Technology