The A to Z of developing for the web

6,798 views
5,944 views

Published on

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

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,798
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
318
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

The A to Z of developing for the web

  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
  24. Javascript debugger
  25. getfirebug.com
  26. G is for Gigabytes
  27. Keep pages small!
  28. Don’t o bfusca te! Keep pages small!
  29. Shrink what you can http://groups.google.com/group/ prototype-core/files
  30. Minimise connections [Firebug can help]
  31. Compressing Javascript is harder than it seems
  32. H is for HTML 5.0
  33. HTML extensions
  34. DOM extensions
  35. Pain relief [Long time coming]
  36. twitter.com/WHATWG
  37. I is for Internet Explorer
  38. IE 7 will quickly dominate
  39. Test against it!
  40. J is for Javascript
  41. 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;); } }
  42. Prototype prototypejs.org
  43. 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; }
  44. Scriptaculous for visual effects script.aculo.us
  45. Other libraries are available developer.yahoo.com/yui jquery.com dojotoolkit.org
  46. jMaki ajax.dev.java.net
  47. Selenium for automated testing openqa.org/selenium
  48. K is for keywords
  49. L is for links
  50. M is for Microformats
  51. Documents vs Data
  52. Add value
  53. <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>
  54. <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>
  55. Styling. Parsing.
  56. microformats.org
  57. bioformats.org
  58. N is for New Era
  59. Read / write web Push button publishing
  60. Can our web site be our API? domain.com/events/list?all
  61. Mashups twittervision.com
  62. Yahoo! Pipes for Biology? pipes.yahoo.com
  63. O is for OPML
  64. Outline Processor ML Hierarchical structure
  65. P is for PHP
  66. Now at 5.2 php.net
  67. CakePHP cakephp.org
  68. Q is for quirks mode
  69. Legacy http://www.quirksmode.org/css/ quirksmode.html
  70. XHTML
  71. R is for RDF
  72. Add meaning to data in documents
  73. <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>
  74. RDF Schema, SPARQL
  75. S is for the Semantic Web
  76. “ 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
  77. too ambitious?
  78. GRDDL Gleaning Resource Descriptions from Dialects of Languages
  79. XSLT fo r microf ormats GRDDL Gleaning Resource Descriptions from Dialects of Languages
  80. T is for Tagging
  81. U is for friendly URLs
  82. www.friendly.net/ archives/2007/09
  83. V is for Validation
  84. HTML validator.w3.org
  85. CSS jigsaw.w3.org/css-validator
  86. W is for WSDL
  87. Automatic web service discovery and definition
  88. X is for XHTML
  89. HTML implemented as valid XML
  90. <!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>
  91. Close tags <li></li> <br />
  92. Cross browser
  93. Easy to parse
  94. Y is for YouTube
  95. YouTube and bioinformatics
  96. ( YouTube and bioinformatics )
  97. Z is for the Zen Garden
  98. csszengarden.com
  99. 1 HTML page Many designs
  100. Photos: Dave Gorman Graffiti: Eine flickr.com/photos/dgbalancesrocks artofthestate.co.uk
  101. Thank you

×