Umeå Universety New Media course, spring 2006 Assignment 2

Transcription

Umeå Universety
New Media course, spring 2006
Assignment 2
Adrian von Gegerfelt, [email protected]
Martin Sandström, [email protected]
Lecturer/Assistant: Thomas Pederson
AJAX – the technology behind Web 2.0
New Media, Umeå Univerety, spring 2006
Index
AJAX - WHAT IT IS AND WHAT IT DOES…………………………3
THE STORY ABOUT AJAX ............................................................3
AJAX – THE TECHNOLOGY BEHIND IT ......................................4
HTML................................................................................................................................................. 4
CSS ..................................................................................................................................................... 5
DOM ................................................................................................................................................... 5
XML ................................................................................................................................................... 7
JavaScript........................................................................................................................................... 7
XMLHttpRequest…........................................................................................................................... 8
DRAWBACKS..................................................................................8
Not giving immediate visual cues for clicking widgets...................................................................... 8
Breaking the back button .................................................................................................................. 8
Changing state with links (GET requests) ........................................................................................ 9
Blinking and changing parts of the page unexpectedly .................................................................... 9
Not using links I can pass to friends or bookmark ........................................................................... 9
Too much code makes the browser slow ........................................................................................... 9
Inventing new UI conventions ........................................................................................................... 9
Scrolling the page and making me lose my place.............................................................................. 9
AJAX EXAMPLES .........................................................................10
Maps ................................................................................................................................................. 10
Word processors/Spell checkers ...................................................................................................... 10
Mulimedia diarys/Communities ...................................................................................................... 10
Calendars.......................................................................................................................................... 11
Instant Messengers........................................................................................................................... 11
Games ............................................................................................................................................... 11
THE FUTURE.................................................................................12
Future applications .......................................................................................................................... 12
Free applications .............................................................................................................................. 12
Online or offline applications .......................................................................................................... 12
System requirements........................................................................................................................ 13
Future technologies .......................................................................................................................... 13
REFERENCES ...............................................................................14
Adrian von Gegerfelt, [email protected], Martin Sandström, [email protected]
2
AJAX - what it is and what it does
Something new is happening on the Internet. The world wide web is reaching a new
stage, that is commonly called the Web 2.0. People stop using regular home pages and
start bloggin, even some commercial sites use blogs to let visitors read about
developments, and other services are based on blogs. Also, new web sites have
appeared, looking like and working like desktop applications. Calendars, photo
albums, radio channels, all with enhanced interactivity more seamless to the user. The
latter are all based on a new technology called AJAX.
AJAX, or in its full name; Asynchronous JavaScript And XML, is a name for the
development platform you get when you combine certain scripts and web
technologies. Though the technologies that Ajax uses have existed for a while it was
not until 2005 when it all started to form into an own platform and Adaptive Path
gave it a name. Since then a lot of applications have been launched and a company
that stands out in particular in using AJAX based services is Google, e.g. Google
Maps, GMail and Google Suggest. Ajax plays a big role in the emergence of Web 2.0.
The story about AJAX
According to J.J. Garrett, founder of Adaptive Path1 and the one who can take credit
for the name AJAX, the more seamless interactivity we manage to implement in our
applications, the more glamorous they appear to be (Garrett 2005). With seamless
interactivity we mean data updating on-the-fly not needing user intervention, for
example reloading a page. Actually, Garrett claims that web applications alone are the
most glamorous form of interaction design. Keeping that in mind, it is not that big a
surprise that technologies for web based seamless interactivity have been around for
over ten years.
Early attempts include frames and in particular the Iframe introduced in Internet
Explorer 3 and The Layer introduced in Netscape 4, both of which could load an
html-page within a parent page and thus create interactivity without reloading the
whole page. In 1998 Microsoft introduced Remote Scripting (MSRS) which used Java
applets and JavaScript to create seamless interaction and in 2002 the applets were
replaced with XMLHttpRequest. Alongside with MSRS, JacaScript Remote Scripting
(JSRS) was developed since MSRS only works on Windows platforms. JSRS uses
Dynamic HTML elements to make hidden remote calls to the server (Dino 1998). In
2003 callbacks were enabled in ASP.NET, letting server and client communicate
without reloads or interruptions (Dino 2). Today the XMLHttpRequest object is
standard and let web clients recieve and submit XML data in the background without
reloading the page. When a client recieves an XML document it uses a Document
Object Model (DOM) to read and interpret it into HTML elements (ADC 2005).
The technologies presented have all contributed to what we today call AJAX, either
by being a predecessor or by being a major part of AJAX, like the XMLHttprequest
and DOM. These and other AJAX related technologies will be discussed in further
detail in the next section.
1
Adaptive Path, San Francisco, http://adaptivepath.com/
3
AJAX – the technology behind it
AJAX is a collection of technologies, which together gives web-based applications
functions similar to desktop applications. AJAX incorporates (explained below)
•
•
•
•
•
standards-based presentation using XHTML and CSS
dynamic display and interaction using the Document Object Model
data interchange and manipulation using XML and XSLT
asynchronous data retrieval using XMLHttpRequest
and JavaScript binding everything together
Jesse James Garrett (Garrett 2005) shows in the Figure 1 the difference in the clientserver interaction between the classic web and with an AJAX web application.
Figure 1: Abstract overview of client-server interaction AJAX versus classical web application
..model
In a classic web application, the client sends a request to the server, which collects
data from some kind of database, does some calculating and sends back the
information. In an AJAX web application, the client computer collects XML data
from the server via what Garrett calls an Ajax engine (which most of the time is just a
script class maintaining the connection), then places the data neatly on to the web
page by for example javascripts. The biggest difference here is that the connection is
maintained, and data on the page is updated in the background without needing user
intervention.
HTML
Hypertext Markup Language is the basic language used to write web pages. A
markup language combines text and extra information about the text. The extra
information can be how to format the fonts, text-alignment, colors, for instance, and is
expressed using markup, which is intermingled with the primary text2. HTML is
parsed by your web browser when a web page downloads and consists of tags (the
markup - commands to tell the browser how to render the text, where to load in
graphics etc on the web page) as well as the actual text. The tags are not casesensitive.
2
Wikipedia: http://en.wikipedia.org/wiki/Markup_language
4
Example html:
Sometimes I like to write text with <B>bold</B> letters.
Which renders the following text in a web browser:
”Sometimes I like to write text with bold letters.”
CSS
Cascading Style Sheets are used to define colors, fonts, layout, and other aspects of
web page presentation. It is designed primarily to enable the separation of document
content (written in HTML or a similar markup language) from document presentation
(written in CSS).
Several web pages can link to the same CSS file, providing easier editing of content
presentation, i.e. editing the color of all headers only requires editing one CSS file no
matter how many web pages linked to it. CSS can also allow the same web page to be
presented in different styles for different rendering methods, such as on-screen, in
print, by voice (when read out by a speech-based browser) and on braille-based,
tactile devices. For instance, if you want to print a web page, a different style sheet is
automatically used, so that unnecessary bakground images don’t show on the paper
and waste ink. Also, the same HTML or XML page can aquire different
representation by only linking to a different CSS file.
CSS statements can also be included in the web page file for quick styling of the tags.
Example code:
<style type="text/css">
.bold
{
font-weight: bold;
letter-spacing: 5px;
font-size: large;
}
</style>
Sometimes I like to write text with <div class=bold>bold</div>
letters.
Which renders the following text in a web browser:
”Sometimes I like to write text with b
o l d letters.”
DOM
The Document Object Model is a description of how an HTML or XML document
is represented in an object-oriented fashion. DOM provides an application
programming interface to access and modify the content, structure and style of the
document.
Scott Andrew LePera (LePera 2002), explains an HTML page as a tree of nodes,
where the document is the main branch, and images, tables, texts etc are children of
the body tag which in turn is a child of document. DOM lets the different elements of
5
a page be reached and edited using some kind of script, JavaScript, for instance, via
the DOM interface.
A simple example generating a picture, see Figure 2:
<html>
<head>
<script>
function insertPenguinImage(){
image = document.createElement("IMG")
image.setAttribute("src","penguin.jpg")
body = document.getElementsByTagName("body").item(0)
body.appendChild(image)
}
window.onload = insertPenguinImage
</script>
</head>
<body>
</body>
</html>
Inserts an image on the web page:
Figure 2: Picture generated with DOM.
Usually, all elements in an HTML file are written in the body tag, but here we have
created the elements in beforehand. This code is pretty useless, but is still a fairly
good example of what one can do, for instance let a button on the page call the
function insertPenguinImage to view a previously hidden image.
To shorten the list of cool features; with the DOM scripting methods you can:
• Create new elements on the fly.
• Edit any element without having to reload the whole html/xml page.
• Grab all the tags of the document, or grab the text without grabbing the tag text.
• Insert new text, and change or remove text.
• Move whole parts of the document around, or remove parts as fragments and
work with them.
• Use it (DOM) with any browser that supports it.
6
XML
The Extensible Markup Language is a markup language much like HTML. While
HTML was designed to display data and to focus on how data looks, XML was
designed to describe data and to focus on what data is. That is, HTML is about
displaying information, while XML is about describing information
(w3schools:XML). XML is actually a complement to HTML, with which data can be
stored outside HTML files, and let a script insert the XML data in the HTML file,
then let the HTML format the data, making a header in bold letters and insert a text
mass in its own paragraph.
XML structure is not a lot different from the HTML structure, though the tags are not
predefined as in HTML. In HTML you format text with tags like <b> (bold), <p>
(paragraph), <h1> (large header). In XML you define them yourself, but then you are
free to define them exactly how you wish!
Example from w3schools:
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
Why is this useful? With XML database and data store files can be easily created and
accessed. You create your own hierarchy of tags, and tag names, and then you create
programs for accessing the data the way you want. Also, since XML files are plain
text files, any computer platform can read and access the files as needed.
JavaScript
Despite the name, JavaScript has little to do with the programming language Java,
although they have great resemblance, due to their common inheritance from the C
programming language.
With the help of javascript, more advance calculations can be executed from a plain
HTML page, and can also, among other things, be used to parse XML documents.
Javascript code can be put inside HTML documents or be read from an external file.
Example:
<p>Please send a mail to: <script type='text/javascript'>
<!-var tg='<';
var name='bill';
var at='@';
var host1='ga';
var host2='tes.com';
var text='[email protected]';
document.write(tg+'a hr'+'ef=mai'+'lto:'+name);
document.write(at+host1+host2+'>'+text+tg+'/a>');
-->
</script>
</p>
7
which produces the following simple line of text which also is a clickable link to open
an email application:
”Please send a mail to: [email protected]”
This is useful to prevent so called ”spam bots” from copying your email address from
you page and inserting it in unwanted mailing lists!
XMLHttpRequest…
... is a special routine which with a web browser scripting language, i.e. Javascript,
can be used to establish separete http requests. Usually, the browser sends a request to
a server to download a web page, but when calling the XMLHttpRequest object, a
script can establish a connection and collect data for use in the program when the
page has allready loaded. What makes this special for AJAX is that a connection can
be made asynchronous, which means that the user doesn’t have to wait or reload the
page while XMLHttpRequest is downloading data. This is the last key to make a web
application really feel interactive as a desktop application.
Drawbacks
New technology (and preferably new internet technology) seldom come without
problems. Alex Bosworth writes in his blog3 many drawbacks and limitation to
AJAX. Bosworth has also made an own neat summary4 of several mistakes a
programmer makes when writing AJAX applications. Below we introduce some
comments based on the summary’s points.
Not giving immediate visual cues for clicking widgets
It is common that the designer forgets to implement feedback and other notices to the
user. A user needs to know when something is to happen (see ”blinking and chaning
parts of the page unexpectedly” below) and especially that a user command is
recognized by the application.
Breaking the back button
The standardized back button used be all browsers loses its correct functionality when
using javascripts and asynchronous server calls. Even if a fragment of the web page is
changed, the back button will take the user back to a former page and the browser will
close the javascript program.
There are ways to get around this, but they still don’t “come in the box”. For the
curious, Mike Stenhouse has one solution on his web site5 where he makes all ajax
changes appear as parameters after the page address:
http://testsite.com/testpage.htm#parameters
Then the browser’s history function will remember this address, and the ajaxapplication will know what parameters restore.
3
http://sourcelabs.com/ajb/
http://sourcelabs.com/ajb/archives/2005/05/ajax_mistakes.html
5
http://www.contentwithstyle.co.uk/Articles/38/
4
8
The same problem exists when using Flash applications, but Robert Penner showed
back in 2001 both a solution and a demo on his site:
http://www.robertpenner.com/experiments/backbutton/backbutton.html
Changing state with links (GET requests)
With Ajax, links (usually blue and underlined text) don’t have to take the user to a
new page, they can also change a certain state of the ajax application. This can be
taken as a surprise because this is not the standard function of links. Since buttons are
common on web pages too, a good idea would be to use them for what they are meant
to be used (changing program states) and linke for what they are meant (transferring
the user to a different area/page.
Blinking and changing parts of the page unexpectedly
Because the connection is asynchronous, sometimes some updates on a page don’t
show up quick enough due to bandwith problems, for example. The user might or will
get disoriented when content suddenly changes.
Not using links I can pass to friends or bookmark
Because elements are changed/updated seamlessly on the client browser, the browser
application loses the responsibility of keeping the address the page on the server. That
is, content is updated, but the address is still static. What the AJAX application
designer could do is updating the address with parameters, like the back-button-fix
shown above, but the more complex the application, the more parameters are needed
to be stored and represented in the address bar. It is yet unclear how to solve this
problem completely.
Too much code makes the browser slow
Sites with many javascripts, and web sites with poorly coded javascripts, bring harder
workload on the browser and further more workload on the CPU. Since javascipt
usually isn’t the native code on the system which it is running on, javascript is heavier
than a desktop application. Ultimately, it means that Ajax web applications can be to
slow to be effective.
Inventing new UI conventions
HTML, XML, javascript and other possible technologies for Ajax are all very easy to
use for innovative designs. But it is also easy to get carried away, making applications
with non-obvious interactive functions or just functions the user is not familiar with.
The application can either have a steeper learning curve, or be plain unusable.
”Click on this non obvious thing to drive this other non obvious result”
Scrolling the page and making me lose my place
It is common with Ajax/javascript functions that show and hide elements (text boxes,
for instance). The browser doesn’t know where the user is reading, so when large
pieces of information are changed, the scroll bars in the browser window don’t keep
up, thus there is a risk that text masses can be pushed by other text masses or images,
leaving the reader disoriented.
9
AJAX examples
AJAX, or the way of combining AJAX technologies for making interactivity and
various web based applictions, has only been used for a year, yet a great deal of sites
are jumping on the train towards the future web, or what has come to be known as
Web 2.0. Beneath is a list of applications that are starting to pop up on the Internet,
and more are definitely to come.
Maps
With ajax it is possible to zoom, pan and scale freely within the same page.
Google Maps
A9 Maps
Ask.com Maps
http://maps.google.com/
http://maps.a9.com/
http://maps.ask.com/maps
Word processors/Spell checkers
MS Word-like word processors and spell checkers are getting quite common online,
still with various quality and sometimes odd file formats though.
ordbehandlare/spell checkers
Writely
AJAXWrite
AJAXSpell
Jacuba
http://www2.writely.com/info/WritelyOverflowWelcome.htm
http://www.ajaxwrite.com/
http://www.broken-notebook.com/spell_checker/
http://jacuba.com
Mulimedia diarys/Communities
A huge application area and very Web 2.0. Get involved in a comunity, blog, and
share your life with the rest of the world. Differens sites focus on different media, and
some combine them.
Flickr
Odeo
Bubbleshare
http://www.flickr.com
http://www.odeo.com/
http://www.bubbleshare.com (see figure 3 for a screenshot)
Figure 3: With Bubbleshare you can share both your photos and audio commenting the photos
10
Calendars
Online calendars so you can manage your life from any computer. What happend to
the ever so practical pocket calendar? (Though Google Calendar is compatible with
Apple iCal and perhaps Microsoft Entourage which both can sync with an iPod.)
Google Calendar
Calendarhub
Kiko
http://www.google.com/calendar/render
http://www.calendarhub.com/
http://www.kiko.com/
Instant Messengers
AJAX is also applicable on instant messengers. There are the ones with their own
servers and the ones that connect to other IM servers so you can use multiple
accounts.
Meebo
Treehouse Chat
http://www22.meebo.com/ (see figure 4 for a screenshot)
http://treehouse.ofb.net/chat/?lang=en
Figure 4: At Meebo you can use your existing IM accounts
Games
What would the web be without some games for your leisure time? AJAX will have
its share of the cake. Care for some online chess or boggle?
64Pola
Weboggle
http://szachy.64pola.pl/online5/index_en.html
http://weboggle.shackworks.com/
11
The future
In his article What Is Web 2.0, Tim O’Reilly explains the web as a platform (O’Reilly
2005). Basically the Internet is becoming more interactive and works as a platform for
online applications that used to be offline. AJAX contribute to this platform with the
kind of applications mentioned above and there will surely be many more application
areas explored in the next few years.
Future applications
Google has an exstensive list of applications, and many others can be found. The list
will be longer guaranteed. Like open-source projects are common on the Linux OS
platform (Open Office6 – a clone of Microsoft Office, for instance), web based
applications that behave like current desktop applications will surely arrive soon. As
Paul Graham puts it; it will not be long before we have a free, web based alternative
to MS office (Graham 2005). Allready an Excel clone named Num Sum7 is available
for use when registering on the site. Perhaps we will see the big companies such as
Adobe making applicaions for the web only some time in the future.
Free applications
How then will companies earn money? An idea would be that users pay a monthly fee
to be able to log into a site and use their application.
Another trend on the web is that more and more information and services are
accessible for free. This is just the new way of making money together with smart
advertising. Google pioneered with their advertisement-free web search engine, where
companies pay to get more hit counts on Google’s searches, instead by just putting
advertisement banners on the search pages.
Online or offline applications
Google Desktop is a new application from Google which actually brings some of their
applications to the computer desktop (Windows only for now). Google Desktop lets
users get notified of new Gmail, keep track of notes (automatically updated on their
Google web account), see the weather, browse Google Maps, get newsfeeds etc, all
collected in one window.
What if more web applications like flickr could be reached from the desktop? Jason
Kottke (Kottke 2005) forsees a Google Browser application, where all these can be
collected and run offline, for instance writing and reading Gmail offline, then
connecting to the Gmail servers when needed, like today’s Outlook works. What is
interesting here is that we will see something resembling Java, but web based –
developers can make their Ajax based applications as modules, downloadable to
Google Browser, making these applications cross platform as long as the browser runs
natively on Windows, Mac OS, Linux etc. Kottke calls this a web operating system,
”WebOS”, and in this case GoogleOS/GooOS. Perhaps we will see competing
applications from Yahoo! and Mozilla?
6
7
http://www.openoffice.org/
http://numsum.com/
12
While we are still at Google Browser, why not take this one step further but not
having any applications nor documents stored locally on the computer, thus moving
everything online! Google Browser could be just the window to the applications –
GooOS could really be an operating system for all computers, competing with
Mircosoft, Apple and Linux systems.
Let us take this even one more step further, letting all the processing be done not on
the user’s computer itself, but on the server the application resides on. Then
computers can be both much smaller and much cheaper, not needing much hard disk
space, RAM nor the processing power. This combined with some form of ”e-tablet” –
a flat computer which consists almost entirely of a screen – could be an interesting
future, letting consumers subscribe to the (Google?) service, thus receiving an e-tablet
with which the subscriber can reach his/her applications and documents. Already
some readers of the Belgian financial newspaper De Tijd are using a trial device of an
e-tablet named the iRex iLiad reader8, enabling them to download and read the most
recent e-paper edition of the title through bluetooth, wireless or by hotspots.
The idea of subscribing or leasing computers and/or applications and storing space
could be most useful to companies, not needing to pay high amounts of money for
buying computers, software licenses, updates and maintanance.
System requirements
By moving all applications to the web, all applications would automatically be cross
platform, that is, independant from which OS the browser runs on, whether it’s
Windows, Mac OS, Linux etc. Of course, moving applications to the web will require
much higher bandwidth than normal users have today, but the future is still in
perspecitve here, and all technology evolves, getting cheaper to build as the demand
for that particular technology rises.
If smaller (cheaper) computers are to be used, not all processing could be done on the
local machine. Numerous solutions are on the drawing board, from network clusters,
to wireless ad-hoc networking, to borrowing processing power from a surrogate
computer by sending data to another machine and receving finished processed data.
Or having the core server have tremendous power and handling all the processing
itself. Science fiction? Not necessarily.
Future technologies
Today’s sub-technologies of Ajax are html, xml, javascript togehter with the DOM
API. Who knows what new technologies will replace these sometime in the future, or
if all will be merged into one AJAX API/language. Other technologies, such as GPS
and mobile communication, will probably integrate with Ajax and open up for even
more applications.
The possibilities are not necessarily bound to the technology as long as you have a
wild imagination.
8
http://www.irextechnologies.com/shop/products/iliad.htm
13
References
[ADC 2005], author unknown, Dynamic HTML and XML: The XMLHttpRequest Object, read April 20
2006, http://developer.apple.com/internet/webcontent/xmlhttpreq.html
[Dino 1998] Dino Esposito, Remote Scripting, April 1998,
http://www.microsoft.com/mind/0498/cutting0498.asp
[Dino 2], Dino Esposito, Cutting Edge, read April 20 2006,
http://msdn.microsoft.com/msdnmag/issues/04/08/CuttingEdge/
[Garrett 2005] Jesse James Garrett, AJAX: A New Approach to Web Applications, February 18 2005,
http://www.adaptivepath.com/publications/essays/archives/000385.php
[Graham 2005], Paul Graham, Web 2.0, read April 2006, http://www.paulgraham.com/web20.html
[Kottke 2005], Jason Kottke, GoogleOS? YahooOS? MozillaOS? WebOS?, read May 4 2006,
http://www.kottke.org/05/08/googleos-webos
[LePera 2002] Scott Andrew LePera, Scripting For The 6.0 Browsers, Revised January 27 2002,
http://www.scottandrew.com/weblog/articles/dom_1
[O’Reily 2005] Tim O’Reily, Tim on Web 2.0, April 28 2006,
http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html?page=1
[w3schools:XML] Refsnes Data, Introduction to XML, used April 26 2006,
http://www.w3schools.com/xml/xml_whatis.asp
[Wiki: AJAX] http://en.wikipedia.org/wiki/AJAX - Wikipedia on AJAX
14

Umeå Universety New Media course, spring 2006 Assignment 2

Transcription

Similar documents

thank you our people - Ajax Public Library

The Trojan War in Greek Art

ajax accessibility buzz

poreba cnc lathes - Ajax Machine Tools

Ajax Tourism Map

Experience in Metal Forming Brochure - Ajax-CECO

AIR HAMMER RESCUE KITS

NEWSLETTER - The British Society in Uruguay

Forging Machines I Automated Upsetters - Ajax-CECO

The Future is Riding on Ajax

FACT SHEET – Westney Heights Plaza

Commentaria in Aristotelem graeca

view - EDAC.ca

PHP Ajax Cookbook