Beyond HTML: Tools for
Building Web 2.0 Apps
MARCOS CACERES
QUEENSLAND UNIVERSITY OF TECHNOLOGY
INTERACTION DESIGNER
QUT'S REP FOR THE W3C'S WEB
APPLICATIONS FORMATS WORKING GROUP
M.CACERES@QUT.EDU.AU

Building Web 2.0 Applications
Web 2.0 Application types:
Ajax applications
Offline Applications
Mash-ups
Widgets
Mobile web
COMET
Wrap up: where to start learning.

Ajax Applications
Old technique (late 1990s)
Misleading acronym:
AJAX = Asynchronous JavaScript and XML?
Uses a COM object in IE... and you can code it in VB Script?
Asynchronous JavaScript and XML
Well, you can transfer just about anything, not just XML?
Asynchronous JavaScript and XML
It can be both Asynchronous or Synchronous
Asynchronous JavaScript and XML
AJAX = an idea we call \"Ajax\". Not a technology!

Ajax: technologies
Script + XMLHTTPRequest Object Example Code
make requests var client = new XMLHttpRequest();
client.onreadystatechange = handler;
handle response
client.open(\"GET\", \"test.txt\");
Examples client.send();
Ajax example.
function handler() {
Google maps (done badly)
if(this.readyState == 4 &&
Google mail this.status == 200) {
Google docs alert(this.responseText) }
}
Development toolkits: taking some
of the pain out of Ajax...
Prototype
Scriptaculous
JQuery
Yahoo UI (examples)
DoJo
...lots of other nice ones.
Core Technologies
HTTP, XMLHTTPRequest, DOM,
JSON, XML

Offline Applications
Take applications offline Google reader
Core technologies
Google Gears
SQLite
Example implementation: DoJo
Issues
Not standard: Requires Google Gears plug-in
However, we might see it in HTML5!

Mash-ups
Mixing data of different types from different sources.
Yahoo Pipes!
Google Mashup Editor
Core technologies
any text-based structured data (XML, RSS, CSV, JSON)
Issues
Browser security model stops you accessing mash-up data
Though you can sometimes bypass it by dynamically including a
<script> element.
You need a server to retrieve the data and then pass it to you as
it was part of your own domain.

Widgets
Widgets
“An interactive single purpose application for displaying and/or updating local data or data
on the Web, packaged in a way to allow a single download and installation on a user's
machine or mobile device.”
Relaxed security
read/write file
make cross-domain requests
Core technologies
Zip
HTML or XML
CSS,
JavaScript
Widget Engines
Windows Vista Sidebar, Apple Dashboard, Google Desktop Gadgets, Yahoo! Widget engine
Engines are starting to emerge in the mobile space.
Issues
Widgets cannot be used across widget engines.
Non-standard at the moment (W3C is working on it)

Mobile Web
Web pages on small screens...
No special software needed. Just make a web page,
but follow best practices.
IPhone
Opera mini emulator
Facebook on iphone (Safari 3 & Opera Mini)
Remember: make one web! Not a web for mobiles
and web for desktop browsers.

COMET Applications
Keeps a HTTP connection alive, allowing the server
to send events in real time.
Server broadcast events, like chat:
GMail chat client
Applications (think of Flash Com Server):
any event driven system
Multiplayer Games
commerce
Server-sent events will be natively supported in HTML5

What to learn!
If you want to learn how to make Web 2.0 apps learn:
HTML, CSS
JavaScript
SQL (MySQL, SQLite)
XMLHTTPRequest
HTTP
Caching
Microformats
Try to stay away from proprietary stuff:
Microsoft Silverlight
Adobe Flash, Flex and AIR
The web is for everyone! Learn open standards!