An introduction to modern web application development techniques: from Ajax to the Zen Garden

1. Developing for the web
from Ajax to the Zen Garden

2. A is for AJAX

3. Refresh without reloading

4. Web apps rather than
web pages

5. AJAX is disruptive

6. B is for Browsers

7. Know thy browser

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

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

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

11. Code to standards

12. Test
[even on Opera]

13. C is for CSS

14. Separate data from design

15. <div></div>

16. Tables for data

17. D is for the DOM

18. Document Object Model

19. Manipulate via JS

20. E is for 404 errors

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

22. F is for Firebug

23. Page metrics

25. Javascript debugger

27. getfirebug.com

28. G is for Gigabytes

29. Keep pages small!

30. Don’t o
bfusca
te!
Keep pages small!

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

32. Minimise connections
[Firebug can help]

33. Compressing Javascript
is harder than it seems

34. H is for HTML 5.0

35. HTML extensions

36. DOM extensions

37. Pain relief
[Long time coming]

38. twitter.com/WHATWG

39. I is for Internet Explorer

40. IE 7 will quickly dominate

41. Test against it!

42. J is for Javascript

43. 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(quot;Msxml2.XMLHTTPquot;);
} catch(e) {
try {
req = new ActiveXObject(quot;Microsoft.XMLHTTPquot;);
} catch(e) {
req = false;
}
}
}
if(req) {
req.onreadystatechange = processReqChange;
req.open(quot;GETquot;, url, true);
req.send(quot;quot;);
}
}

44. Prototype
prototypejs.org

45. 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;
}

46. Scriptaculous for
visual effects
script.aculo.us

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

48. jMaki
ajax.dev.java.net

49. Selenium for
automated testing
openqa.org/selenium

50. K is for keywords

51. L is for links

52. M is for Microformats

53. Documents vs Data

54. Add value

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

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

57. Styling. Parsing.

58. microformats.org

59. bioformats.org

60. N is for New Era

61. Read / write web
Push button publishing

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

63. Mashups
twittervision.com

64. Yahoo! Pipes for Biology?
pipes.yahoo.com

65. O is for OPML

66. Outline Processor ML
Hierarchical structure

67. P is for PHP

68. Now at 5.2
php.net

69. CakePHP
cakephp.org

70. Q is for quirks mode

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

72. XHTML

73. R is for RDF

74. Add meaning to data in
documents

75. <Gene rdf:about=quot;#1110002A21Rikquot;>
<chr>chr1</chr>
<hasVariant rdf:parseType=quot;Resourcequot;>
<representedBy rdf:resource=quot;#gi13385627quot;/>
</hasVariant>
<hasVariant rdf:parseType=quot;Resourcequot;>
<representedBy rdf:resource=quot;#gi18043402quot;/>
</hasVariant>
<strand>+</strand>
</Gene>

76. RDF Schema, SPARQL

77. S is for the Semantic Web

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

79. too ambitious?

80. GRDDL
Gleaning Resource Descriptions from
Dialects of Languages

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

82. T is for Tagging

84. U is for friendly URLs

85. www.friendly.net/
archives/2007/09

86. V is for Validation

87. HTML
validator.w3.org

88. CSS
jigsaw.w3.org/css-validator

89. W is for WSDL

90. Automatic web service
discovery and definition

91. X is for XHTML

92. HTML implemented
as valid XML

93. <!DOCTYPE html PUBLIC quot;-//W3C//DTD
XHTML 1.0 Transitional//ENquot;
quot;http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtdquot;>
<html xmlns=quot;http://www.w3.org/1999/xhtmlquot;
xml:lang=quot;enquot; lang=quot;enquot;>
<head>
<meta http-equiv=quot;Content-Typequot;
content=quot;text/html; charset=utf-8quot;/>
<title>untitled</title>
</head>
<body>
:
</body>
</html>

94. Close tags
<li></li>
<br />

95. Cross browser

96. Easy to parse

97. Y is for YouTube

98. YouTube and
bioinformatics

99. ( YouTube and
bioinformatics )

100. Z is for the Zen Garden

101. csszengarden.com

102. 1 HTML page
Many designs

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

107. Thank you