Transcript Web Interactivity

IMS5401
Web-based Systems Development
Topic 2: Elements of the Web
(g) Interactivity
Copyright 2004 Monash University
Agenda
1.
2.
3.
4.
5.
6.
2
‘Normal’ user-program interactivity
Web-interactivity
Client-side interactivity
Server-side interactivity
Making interactivity easier
Implications for web developers
Copyright 2004 Monash University
Elements of the Web
Connecting
computers
Digital
representation
of documents
THE WEB
Linking
documents
3
Copyright 2004 Monash University
Display and
organisation of
documents
1. ‘Normal’ computer system
interactivity



4
We are used to computer systems which are
designed to receive input from us as users
and provide output as required
Eg automatic teller machine, reservation
system, etc
System has a programmed interface which
changes in response to our input, and which
allows us to enter queries or data for storage
Copyright 2004 Monash University
Interactivity in a ‘normal’ system
Input
User
(makes query
or
provides input
to database)
Output
5
User
Interface
(prompts user
for input query or
new data
for database;
Displays
output)
Copyright 2004 Monash University
New data/
query details
Database
Response to
query
Programming and interactivity
in ‘normal’ systems




6
User(client) creates connection to host
machine (server) on which programme is
running
Connection remains ‘live’ while user session
is running
User is prompted by programme and
provides input which the programme accepts
and responds to
Programmimg languages enable an
extremely wide range of types of user input
and machine response
Copyright 2004 Monash University
2. Web Interactivity:
What we would like

Dynamic web site content and user input:
Up-dated database
content to display
Prompt for
input
User
input
7
Database
Web Page
User
User input to
up-date database
Copyright 2004 Monash University
Problems with interactivity in
web-based systems




8
The web was designed as a system which provided
pages of information to a user - static, not dynamic
HTTP establishes no on-going connection between
the client machine and the server machine
Requests for information by the client and
responses and information from the server are
passed separately and independently from one
another
Interactivity is much harder to achieve - restricted
and more messy
Copyright 2004 Monash University
Web Interactivity: Two types



9
Client-side interactivity: designed to change
the appearance or behaviour of the web page
in response to the user’s input (ie left-hand
side of earlier diagram)
Server-side interactivity: designed to enable a
user’s input to be taken by web page and sent
back to the server web site to be used as input
to another program running on the server (ie
right hand side of earlier diagram)
In both cases the interaction is done via
scripts (a form of programming language)
Copyright 2004 Monash University
3. Client-side interactivity




10
Used to modify the way in which a page is
displayed to the user
The script which does the work is embedded
in the web page HTML
There is a variety of HTML tags which allow
you to use scripts in various ways to get
different effects
Interface features commonly created using
scripts include mouse roll-overs, animation,
creation of dialogue boxes to accept user
input and modify the way a page or its
elements is displayed, etc
Copyright 2004 Monash University
Scripting languages for clientside interactivity




11
The original was Java Script (note, nothing to
do with the Java programming language!)
ECMAscript is a W3C ‘standard’ for scripting,
based around Java script
The Java programming language can be used
to create applets, which are small programs
embedded in the web page HTML - same
effect as Java Script
Java Script can be run by the browser; Java
applets need the Java plug-in to run them
Copyright 2004 Monash University
More fun with the marketplace




12
Netscape developed the first version of Java
Script for the Netscape browser
Microsoft followed a couple of years later
with their own version, called J Script for the
IE browser
The two languages are similar, but not
identical to each other NOR to the W3C
‘standard’ ECMAscript!
More problems for web page developers who
want their page to work the same in any
browser!
Copyright 2004 Monash University
4. Server-side interactivity


Used when we want to enable a user to enter
information on a web page and send it as
input to a program running on the server (eg a
database program)
Any system which is using the web as its
interface, must use a server-side script to get
the user input to the main program and send
a reply. For example:
• any system which stores transaction details (order,
payment, etc) in a database on the server;
• any web interface set up to enable a user to interact
with a system (eg a web-based user query of the
Monash library catalogue)
13
Copyright 2004 Monash University
Server-side scripts and CGI
(Common Gateway Interface)





14
CGI is a protocol for enabling exchange of
data between a web page and a program
running on the server
CGI scripts run on the server. They are
activated by user input to a web page form
A CGI script can provide web form input data
to another program running on the server (eg
a database)
It can also accept data from a program on the
server and provide it to the web page
Perl is the most popular scripting language
for writing CGI scripts (but can also use VB,
C++, etc)
Copyright 2004 Monash University
Cookies: An example of a messy way
of achieving server-side interactivity




15
A cookie is a Java script file which a server
sends you with the web page
The cookie is stored by your browser;
sometimes temporarily and sometimes
permanently (or until you remove it)
The cookie stores information about the user
computer or user input to the web page
When the browser asks for another page from
that server, the information in the cookie gets
sent to the server along with the request for
the page
Copyright 2004 Monash University
Using cookies: A simple example





16
Say you buy something from Amazon.com
Amazon records your details and the details
of your purchase in its sales database
Amazon puts a cookie on your machine with
your customer details in it
Next time you ask your browser to get you the
Amazon web site, the browser gets your
customer number from the cookie and sends
it back to a CGI script on the Amazon server
The CGI script then checks who you are on
the customer database and sends your
buying history details back to the web page to
be displayed
Copyright 2004 Monash University
5. Making interactivity easier (?!)




17
Building either client-side or server-side
interactivity needed programming skills to write
the scripts
Programming languages were not well-structured
to deal with web interactivity needs
A range of scripting languages were developed
and new scripting capabilities built into HTML,
new plug-ins for browsers, etc
Now we have many different options for writing
scripts - Microsoft’s Active Server Pages, PHP,
Perl, Python, etc etc …. Very confusing!
Copyright 2004 Monash University
Making interactivity easier (?!)



18
As with writing HTML, products have also been
developed to generate scripts for database
interactivity, so you don’t have to program
However, these products apparently generate
code like HTML generators generate HTML - yes,
it’s there, but does it work? … and with what
browsers?
Therefore, texts still recommend you write it
yourself, or at least patch it yourself
Copyright 2004 Monash University
6. Implications for web
developers




19
The web is not well designed for dealing with
interactivity (which is the main feature of
most traditional IS, and is an essential feature
of most commercial environments!)
It can be done, but it’s messy, inefficient and
limited in flexibility (compared to ‘normal’
system connectivity and interactivity)
It requires significant technical skills
(programming, etc) which are not easily
learned (unlike HTML, for example)
Products which make it easier are coming,
but they still fall well short of making it easy
Copyright 2004 Monash University