Developing for the webfrom 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

Opera1%Netscape

13%

IE22%

Safari23%

Firefox41%

Opera1%Netscape

13%

IE22%

Safari23%

Firefox41%

2.0 = 90%

Opera1%Netscape

13%

IE22%

Safari23%

Firefox41%

IE6 = 66%

IE7 = 33%

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!

Keep pages small!

Don’t obfuscate!

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/yuijquery.com

dojotoolkit.org

jMaki

ajax.dev.java.net

Selenium forautomated 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

GRDDL

Gleaning Resource Descriptions from Dialects of Languages

XSLT for microformats

T is for Tagging

U is for friendly URLs

www.friendly.net/archives/2007/09

V is for Validation

HTMLvalidator.w3.org

CSSjigsaw.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 andbioinformatics

YouTube andbioinformatics( )

Z is for the Zen Garden

csszengarden.com

1 HTML pageMany designs

Photos: Dave GormanGraffiti: Eine

flickr.com/photos/dgbalancesrocksartofthestate.co.uk

Thank you