1

Ch.11 - WWW techniques

1 Interactivity on the Web
2 CGI forms
3 CGI programs
4 Creating a form
5 Form tag
6 JavaScript
7 What can JavaScript do?
8 Shockwave
9 Adobe Acrobat
10 Acrobat software
11 RealAudio
12 Internet telephony
13 Internet and conventional telephones
Ch.11 - WWW techniques
2
Five years ago, the Web was very static. You could see text and graphics and you could click
on links. Then other types of media started to appear; sound, animation, video and
interactive applications. The interactivity was brought about by four different techniques.
The first is the Plug-in technique. A plug-in is not a part of a browser. It is a separate
program that is invoked by the browser when it encounters a file with a format that the plug-
in module can understand. There are hundreds of plug-ins on the Internet that you can
download and install on your computer. Some of them cost money, but most of them are
free.
The difficulty with plug-ins is that you have to find them, download them and install them.
First you must find the right plug-in on the Internet. There are different plug-ins for different
platforms, so you have to make sure that the plug-in that you want to download is the right
one. Then you have to download the plug-in; a process that typically takes 10 to 20 minutes
through a 28.8 kbps modem. The file youve downloaded is almost always archived and
compressed, so you have to decompress and de-archive it. Then you have to install the plug-
in before youre ready to use it.
There is another variant of the plug-in technique called a helper application. A helper
application is exactly the same thing as a plug-in, that is a small program that is invoked by
the browser. The only difference is that a plug-in shows its information within the window
of the browser, while a helper applications shows its information in an external window.
The second technique is called CGI, which stands for Common Gateway Interface. One use
is for entering data in a form on a web page and submitting it by clicking on a button.
Another use is to sense where the user clicks on an active image area. There are many other
ways to use CGI.
The third technique, called the Scripting Languages, involves extending the HTML code by
using a programming language called a script language. The code of the scripting language is
Ch.11 - WWW techniques
3
mixed with the HTML code. When you open an HTML page with a word processor you
can actually see the code of the scripting language. The browser interprets the scripting
language code in a similar way it interprets the HTML code. The most common scripting
language is JavaScript.
The fourth technique is J ava. This technique involves sending, not just the data from the
server to the client, but also the program that will handle this data. In this way users dont
have to find, download and install plug-ins on their computers.
Ch.11 - WWW techniques
4
The only way you could interact with the Web before 1995 was by clicking on hyperlinks.
In 1995 Web forms started to appear. A form is a web page with one or more entry fields
and a mandatory "submit" button. The name of this "submit" button could be anything that
is appropriate to the situation like "Send", "Submit", "Search now" or "Evaluate". You enter
data into the fields and click on the submit button to send the form's contents to the server.
Ch.11 - WWW techniques
5
When you click on the submit button the browser collects all data from the form and sends it
to the server. The server passes the data to a program using a protocol called CGI, which
stands for Common Gateway Interface. The CGI program typically interacts with a
database to service the form's request. At the end of this process the CGI program returns a
reply HTML document which is sent as a feedback to the user.
Ch.11 - WWW techniques
6
To create a form you must first create the HTML page. You must then write the server CGI
program that will handle the data from the input form. You must also design a reply HTML
document that will be sent to the user as a feedback. The reply document is usually
dynamically created by the CGI program after processing the data. Finally you must upload
everything on the server.
Ch.11 - WWW techniques
7
A form begins with <FORM>and ends with </FORM>. After the FORM you will always
see two attributes: METHOD and ACTION. METHOD can have two values, either a GET
or a POST. GET causes the data to be appended to the URL after a separating question
mark. POST on the other hand appends the data to the body of the HTML message. The
ACTION attribute specifies the URL of the CGI program that will process the data.
Ch.11 - WWW techniques
8
J avaScript is a programming language. The purpose of J avaScript is to give HTML pages
some interactive power, by adding J avaScript code to the existing HTML code of a web
page. There are two common myths about J avaScript.
The first one is that J avaScript is a part of J ava. This is not so. J avaScript and J ava language
are two different things.
The other myth is that J avaScript is simple. Also this is incorrect. J avaScript is an object-
oriented language that requires sophisticated programming skills.
Ch.11 - WWW techniques
9
Here are some examples of what J avaScript can do:
- J avaScript can capture events that are initiated by the user, when he clicks on a button,
moves the mouse over a link or enters a value in a field. An example is to display a special
message in the status line when the user positions the mouse over a hyperlink.
- J avaScript can interact with the documents form elements like button, checkbox, radio,
password, reset, submit, select, text and textarea. You can for instance create a calculator or
an income tax estimator.
- J avaScript can interact with J ava applets and plug-ins. They can talk and control one
another.
- J avaScript allows you to write arbitrary HTML into a document. You can for instance
display different texts on different platforms, include today's date in the document or
generate documents entirely from scratch.
- J avaScript allows you to control the browser. You can create and open entirely new
browser windows, which can have a specified appearance. The new window can for instance
have a specified size and appear without toolbar, location, directory buttons, status line, and
scrollbars.
- JavaScript can change the images in a document. This allows effects like changing an image
when the mouse passes over it.
- J avaScript can identify the platform and browser it is running on and can customize
behavior based on the browser being used.
Ch.11 - WWW techniques
10
The most commonly used tool to create interactive multimedia applications is Director from
Macromedia. Director is to multimedia production what PageMaker and QuarkXPress are to
desktop publishing.
From the beginning the only way to play Director applications was from your hard disk or
from a CD-ROM. Macromedia wanted to make Director applications available from the
Web, so they created Shockwave plug-in. Shockwave plug-in is essentially a Director
playback engine.
In order to create a shockwave application you have to create a director application and save
is as a shockwave file. You also have to create an HTML page that will refer to the
shockwave file through an embed tag. Finally you have to upload both the HTML page and
your shockwave file to a server.
The user has to have a shockwave plug-in on the client side. When he loads the HTML page
from the server the shockwave file will also join the party. Now the user can enjoy an
interactive application without having to communicate with the server all the time.
There are different variants of Shockwave; Shockwave Director, Shockwave Authorware,
Shockwave Flash, and more. Shockwave Authorware is used together with Authorware from
Macromedia. Authorware is a multimedia production application that is well suited for
making educational applications. Shockwave Flash uses vector-based graphics, which means
that the animations are very small and can be quickly downloaded to the client.
Ch.11 - WWW techniques
11
The Web is not only good for surfing but also for distribution of documents. Many users
don't like to read from computer screen, especially when it comes to large documents. They
prefer to print the document on paper and then read in it peace and quiet. HTML pages do
not look so good in print, since the creator of the document does not control fonts, sizes and
page breaks. Adobe Corporation has created a new format called PDF, which stands for
Portable Document Format, to address this need. Through PDF files the creator of the
document has total control of how the document will appear to the end user.
Another advantage is that it is easy to convert existing documents to PDF. For example, it is
rather easy to create PDF files from Microsoft Word. You just select PDFWriter as your
printer and "print" your document to your hard disk, that is create a PDF file that is stored
on your hard disk. Users can view your document from their browser through a free plug-in
called PDFViewer or a free application called Acrobat Reader.
Ch.11 - WWW techniques
12
Acrobat Reader is free but if you want to create PDF documents you need to buy Adobe
Acrobat software, which includes PDFWriter, Distiller and Exchange.
PDFWriter is used to convert everyday business documents such as Word or Powerpoint
documents to PDF documents. You do this by selecting PDFWriter as your printer and then
"printing" your document on your hard disk.
PDFWriter doesn't handle more complex documents such as QuarkXPress documents. You
have to use Acrobat Distiller instead. Acrobat Distiller lets you convert any PostScript files
to PDF. Since almost all image editing, illustration, and page layout applications can create
PostScript files, it means that you can convert them to PDF files.
With Exchange you can create PDF documents from scratch and also edit existing PDF
documents. With Exchange you can add forms and hyperlinks and optimize PDF documents
for web delivery. You can also add buttons that play sounds or movies.
Ch.11 - WWW techniques
13
RealAudio is a new technique for getting sound through the Internet. You could get sound
before but you had to download the whole sound before you could hear it, and this could
take quite a while.
RealAudio dramatically reduces the time between clicking on a link and hearing the sound.
RealAudio uses something called streaming technology. RealAudio streaming technology
uses two components: a RealPlayer plug-in on the client side and RealAudio server software
on the server side.
RealAudio server software chops the sound in small packets and sends them to the
RealPlayer. RealPlayer uses a file buffer; allowing users to begin hearing the sound as soon as
the first packets arrive. While the packets are used up, the new ones are arriving in the
buffer. In this way you don't have to have the whole file on your computer, only those
packets that are needed. This means that you don't have to use up valuable space on your
computer. As a user you can choose the size of the buffer. A large buffer gives better sound
quality, but you have to wait longer before the sound begins to play.
With a 28.8 kbps modem the sound is transistor radio quality. With ISDN you can get CD
quality. There are a lot of radio stations broadcasting live over Internet using RealAudio
technique.
If you have a RealPlayer plug-in, you can not only hear sound; you can also see video.
Naturally the quality of the video is very limited on 28.8 kbps.
Ch.11 - WWW techniques
14
With Internet telephony you can make a long distance call for the price of a local call and
your Internet connection. When you speak into a microphone, your voice is digitized into
packets that are routed over the Internet in real time. You typically connect to a directory
server, find the person that you want to speak to and establish a connection. Then you can
start speaking to each other.
Most Internet telephony software generally uses two types of connections: TCP/IP from
the client to a directory server and UDP/IP Point-to-Point between parties involved in
conversation.
Unlike TCP, which is normally used on the Internet, UDP allows packet loss, that is no
resources are spent in trying to re-send packets. Most Internet telephony software allows
the conversation to continue when the packet loss is typically less then 10%. When the
packet loss is greater, words start sounding choppy.
The quality of the sound is seldom as good as a regular phone line. It can vary though from
"poor" to "near CD" quality. The quality depends on:
1. The bandwidth. When I'm calling from Sweden to USA, I get much better quality in the
morning than in the afternoon, since the Internet traffic is not so dense when it is night in the
USA.
2. The quality of the microphone and speakers. I dramatically improved the sound quality
when I bought an external microphone and headphones.
3. The sound settings in your computer. Experiment with recording your own voice. Vary
the input level of microphone and output level of the speakers. Try out to speak from
different distances from the microphone.
4. When you speak with Internet telephony there is often a time lag of approximately 1 to 2
seconds. Even if it's irritating at first, you can adjust to the situation.
Ch.11 - WWW techniques
15
One of the limits of Internet telephony is that competing software products don't speak to
each other. That's like me buying a telephone in company A and you buying a telephone in
company B, but the two of us can not communicate.
Some Internet Service Providers offer a service where you can initiate calls from your
computer to any conventional telephone. One example is Net2Phone that enables any
Internet user with a sound-equipped PC to initiate calls from a computer to Net2Phone's
central telephone switch. The switch instantly and automatically relays the call to the
destination - a conventional telephone. The result is real time voice communication.