Technical Tips
What in the world is Web 2.0?
by Scott Manley, Senior Analyst/Programmer |
Web 2.0
What is Web 2.0?
Dynamic HTML
CSS
Ajax
Web 2.0 Examples
Try it yourself
Spatial Vision & Web 2.0
Further Information
Web 2.0
Spatial Vision have been developing web based applications
for six years and have seen a substantial improvement in the
techniques and tools to develop more sophisticated applications
in a browser. Lately we have been adopting a new style of
development known as Web 2.0.
back to top
What is Web 2.0?
Web 2.0 refers to the so called second generation of web
applications that are beginning to appear on the World Wide
Web. In contrast to generation one, Web 2.0 gives users a
richer more dynamic experience closer to desktop applications
than the traditional static Web pages.
In order to provide a dynamic user interface Web 2.0 applications
make use of modern web browser technologies such as Dynamic
HTML (DHTML), Cascading Style Sheets (CSS) and Asynchronous
Javascript and XML (AJAX) technology. These are now supported
in modern web browsers (Internet Explorer 5.5+ and Mozilla
Firefox).
back to top
Dynamic HTML
Dynamic HTML is a technology that enables client side code
to make dynamic changes to the content of a web page without
the need for a server round-trip.
All objects contained in a web page are accessible using
an object structure known as the Document Object Model (DOM).
Using a browser scripting language such as Javascript an application
can dynamically modify properties of a page object to alter
its appearance and content.
function
showSearch(){
$("searchWindow").style.visibility = "visible"
$("searchWindow").style.zindex = 0;
}
|
back to top
CSS
Cascading Style Sheets is the standard technique for applying
style to a web application. Generally modern web applications
aim to separate (where possible) the page ‘mark-up’
(its content) from its layout and style. This is done by creating
two separate files an HTML file containing the mark-up and
a style sheet file containing the style and layout definition.
Applying the style sheet to the page sets the page fonts and
colours as well as the position and size of the various page
elements.
Authoring a page using CSS techniques has two primary advantages:
- The layout and style of a page can be modified without
changes to the page content.
- Use of CSS layout and positioning allows for the properties
of page elements to be modified dynamically using DHTML
(described above).
Code example:
HTML, BODY {
FONT: 11px verdana, sans-serif;
MARGIN: 0;
PADDING: 0;
HEIGHT: 100%;
WIDTH: 100%;
}
|
back to top
Ajax
Asynchronous Javascript and XML is the most recent of the
Web 2.0 technologies to be popularised. In basic terms, this
technology allows for communication to occur between the client
and server without the end user being aware.
In Web 1.0 applications server communication is always visible
to the user in the form of a page reload. In contrast, Ajax
based applications can send and receive messages to and from
the server behind-the-scenes. This allows the page to behave
in a much more dynamic way by allowing it to asynchronously
retrieve new data or perform validations while maintaining
the current page view.
Code example:
req
= new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = this.processStateChange;
req.open("GET", url, true);
req.send();
}
|
back to top
Web 2.0 Examples
Figure
1
Google Calendar is a full featured web based calendar application.
Google calendar uses DHTML and CSS to provide a desktop application
style interface and Ajax to save calendar changes to the server
behind-the-scenes
Figure
2
Google Maps is a web based mapping client, the application
makes extensive use of Ajax to retrieve surrounding map images
behind the scenes. This allows the user to pan the map without
the requirement for a browser refresh.
Try it yourself
Figure
3
Save the code below to an HTML file (e.g. ‘web2.html’)
and open it in your browser, this simple example demonstrates
use of DHTML code and CSS based styling to dynamically change
the page colour.
<html>
<head>
<script Language="JavaScript">
function changeColour(colour) {
var colouredBoxObj = document.getElementById('colouredBox');
colouredBox.style.backgroundColor = colour;
}
</script>
<div style="font: 20px verdana,sans-serif;
text-align:center; width: 100%;">Web 2.0 Example</div>
</head>
<body style="height: 100%; width: 100%">
<div id="colouredBox" style="position:
absolute; top: 25%; left: 25%; height:50%; width:50%;
text-align:center; border:#B8C4BD 1px solid;">
<span><input type="button" value="Red"
onclick="changeColour('red')"/></span>
<span><input type="button" value="Green"
onclick="changeColour('green')"/></span>
<span><input type="button" value="Blue"
onclick="changeColour('blue')"/></span>
</div>
</body>
<html>
|
Clicking the ‘Red’, ‘Green’ &
‘Blue’ buttons dynamically changes the box colour
using DHTML and CSS.
back to top
Spatial Vision & Web 2.0
Spatial Vision has developed (and is currently undertaking)
a number of Web 2.0 applications. These applications feature
very dynamic interfaces making use of DHTML, CSS & Ajax
to deliver functionality not previously possible in the web
environment. Spatial Vision has invested in achieving the
development skills necessary to construct applications that
can deliver Web 2.0 functionality.
back to top
Further information
• A comprehensive definition and links from Wikipedia:
http://en.wikipedia.org/wiki/Web_2.0
• An excellent article on Ajax from the inventors
of the term
http://www.adaptivepath.com/publications/essays/archives/000385.php
• A frequently updated Blog on Web 2.0 sites and technologies
http://www.programmableweb.com/
back to top
Copyright © Spatial Vision, Wednesday, 26-July-2006 |
