Developing for the web
from Ajax to the Zen Garden

A is for AJAX

Refresh without reloading

Web apps rather than
web pages

AJAX is disruptive

B is for Browsers

Know thy browser

Opera
Netscape 1%
13%
Firefox
41%
IE
22%
Safari
23%

Opera
Netscape 1%
13%
2 .0 = 90%
Firefox
41%
IE
22%
Safari
23%

Opera
Netscape 1%
13%
Firefox
41%
IE
22%
IE 6 = 66%
IE7 = 33%
Safari
23%

Code to standards

Test
[even on Opera]

C is for CSS

Separate data from design

<div></div>

Tables for data

D is for the DOM

Document Object Model

Manipulate via JS

E is for 404 errors

Make them count
Defensive Design for the Web,
Linderman and Fried

F is for Firebug

Page metrics

Javascript debugger

getfirebug.com

G is for Gigabytes

Keep pages small!

Don’t o
bfusca
te!
Keep pages small!

Shrink what you can
http://groups.google.com/group/
prototype-core/files

Minimise connections
[Firebug can help]

Compressing Javascript
is harder than it seems

H is for HTML 5.0

HTML extensions

DOM extensions

Pain relief
[Long time coming]

twitter.com/WHATWG

I is for Internet Explorer

IE 7 will quickly dominate

Test against it!

J is for Javascript

var req;
function loadXMLDoc(url) {
req = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
// branch for IE/Windows ActiveX version
} else if(window.ActiveXObject) {
try {
req = new ActiveXObject(\"Msxml2.XMLHTTP\");
} catch(e) {
try {
req = new ActiveXObject(\"Microsoft.XMLHTTP\");
} catch(e) {
req = false;
}
}
}
if(req) {
req.onreadystatechange = processReqChange;
req.open(\"GET\", url, true);
req.send(\"\");
}
}

Prototype
prototypejs.org

function update_bookmarks() {
var url = “common/bookmarks”;
var data = “user=13&start=1000”;
var request = new Ajax.Request(url, {
method: ‘get’,
parameters: data,
onComplete: request_complete,
});
}
function request_complete(response) {
$(‘view’).innerHTML = response.responseText;
}

Scriptaculous for
visual effects
script.aculo.us

Other libraries are available
developer.yahoo.com/yui
jquery.com
dojotoolkit.org

jMaki
ajax.dev.java.net

Selenium for
automated testing
openqa.org/selenium

K is for keywords

L is for links

M is for Microformats

Documents vs Data

Add value

<tr>
<th class=\"two-column\">Gene</th>
<td class=\"two-column\"><table width=\"100%\" cellpadding=\"4\">
<tr>
<td><strong>
<a href=\"http://www.gene.ucl.ac.uk/cgi-bin/nomenclature/
get_data.pl?hgnc_id=1101\">BRCA2</a></div></strong> (HGNC
Symbol)
</td>
<td>
<span class=\"small\"> To view all Ensembl genes linked to the
name <a href=\"/Homo_sapiens/featureview?
type=Gene;id=BRCA2\">click here</a>.</span>
</td>
</tr>
</table><p>
This gene is a member of the Human CCDS set: <a href=\"http://
www.ncbi.nlm.nih.gov/CCDS/CcdsBrowse.cgi?
REQUEST=CCDS&amp;DATA=CCDS9344\">CCDS9344</a>
</p>
</td>
</tr>

<tr class=\"hgene\">
<th class=\"two-column\">Gene</th>
<td class=\"two-column\"><table width=\"100%\" cellpadding=\"4\">
<tr>
<td><strong>
<a href=\"http://www.gene.ucl.ac.uk/cgi-bin/nomenclature/
get_data.pl?hgnc_id=1101\" rel=\"hgnc_name\">BRCA2</a></div></
strong> (HGNC Symbol)
</td>
<td>
<span class=\"small\"> To view all Ensembl genes linked to the
name <a href=\"/Homo_sapiens/featureview?type=Gene;id=BRCA2\"
rel=\"gene_list\" >click here</a>.</span>
</td>
</tr>
</table><p>
This gene is a member of the Human CCDS set: <a href=\"http://
www.ncbi.nlm.nih.gov/CCDS/CcdsBrowse.cgi?
REQUEST=CCDS&amp;DATA=CCDS9344\" rel=\"ccds\">CCDS9344</a>
</p>
</td>
</tr>

Styling. Parsing.

microformats.org

bioformats.org

N is for New Era

Read / write web
Push button publishing

Can our web site be our
API?
domain.com/events/list?all

Mashups
twittervision.com

Yahoo! Pipes for Biology?
pipes.yahoo.com

O is for OPML

Outline Processor ML
Hierarchical structure

P is for PHP

Now at 5.2
php.net

CakePHP
cakephp.org

Q is for quirks mode

Legacy
http://www.quirksmode.org/css/
quirksmode.html

XHTML

R is for RDF

Add meaning to data in
documents

<Gene rdf:about=\"#1110002A21Rik\">
<chr>chr1</chr>
<hasVariant rdf:parseType=\"Resource\">
<representedBy rdf:resource=\"#gi13385627\"/>
</hasVariant>
<hasVariant rdf:parseType=\"Resource\">
<representedBy rdf:resource=\"#gi18043402\"/>
</hasVariant>
<strand>+</strand>
</Gene>

RDF Schema, SPARQL

S is for the Semantic Web

“ The Semantic Web is not a separate Web but an
extension of the current one, in which information is
given well-defined meaning, better enabling
”
computers and people to work in cooperation
Sir Tim, 2002

too ambitious?

GRDDL
Gleaning Resource Descriptions from
Dialects of Languages

XSLT fo
r microf
ormats
GRDDL
Gleaning Resource Descriptions from
Dialects of Languages

T is for Tagging

U is for friendly URLs

www.friendly.net/
archives/2007/09

V is for Validation

HTML
validator.w3.org

CSS
jigsaw.w3.org/css-validator

W is for WSDL

Automatic web service
discovery and definition

X is for XHTML

HTML implemented
as valid XML

<!DOCTYPE html PUBLIC \"-//W3C//DTD
XHTML 1.0 Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\"
xml:lang=\"en\" lang=\"en\">
<head>
<meta http-equiv=\"Content-Type\"
content=\"text/html; charset=utf-8\"/>
<title>untitled</title>
</head>
<body>
:
</body>
</html>

Close tags
<li></li>
<br />

Cross browser

Easy to parse

Y is for YouTube

YouTube and
bioinformatics

( YouTube and
bioinformatics )

Z is for the Zen Garden

csszengarden.com

1 HTML page
Many designs

Photos: Dave Gorman
Graffiti: Eine
flickr.com/photos/dgbalancesrocks
artofthestate.co.uk

Thank you