Beyond HTML: Tools for Building Web 2.0 Apps

  • Published on

  • View

  • Download


A simple introduction to the main kinds of "Web 2.0" Apps, and some of the tools a developer can use to build them.


1. 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 2. 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. 3. 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 quot;Ajaxquot;. Not a technology! 4. Ajax: technologies Script + XMLHTTPRequest Object Example Code make requests var client = new XMLHttpRequest(); client.onreadystatechange = handler; handle response;GETquot;, quot;test.txtquot;); 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 5. 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! 6. 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 7. 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) 8. 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. 9. 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 10. 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!