Advanced Web Technologies - Computer Science

Download Report

Transcript Advanced Web Technologies - Computer Science 

Advanced Web Technologies
Advanced Web Technologies





Frames
Forms
Plugins
Dynamic Pages---CGI
Active Pages: Java, Java Script
Frames

Conventional Web pages use the entire
screen:

May be inconvenient when:



Display a list a of products;
Display ads
Frames:



Allow an author to divide the viewing area into
multiple rectangular regions
Change the display in one region without
affecting the others;
Ex: http://www.ndtourism.com/frames.html
The Web, Advertising and
Frames

Many companies use frame technology
for advertising:


Each frame holds an ad;
Advantages:


It does not clutter the useful information;
Does not introduce additional overhead to load
when the user moves to another page
Creating a frame

Frameset tag



defines a framed environment;
Instructs the browser how to split the screen;
Ex:



<frameset cols=“20%,40%,40%>--- splits the screen in
three columns, the first taking 20% of the space
available;
<frameset rows=“50%,50%”>---splits the screen into
two rows of equal size;
Framesets maybe nested
Creating a frame (cont.)


Frame tag ---introduces a frameset
element;
Each frame has:


a source---I.e. the HTML document that to
be displayed in the correspondent screen
portion;
A name (optional)
A frame example
For example, consider a file “frames.html”
with the following content:
<html>
<frameset cols=“20%,*” border=“10”>
<frame src=“contents.html” name
=“contents”>
<frame src=“product1.html” name
=“products”>
</frameset>
</html>

A frame example (cont.)
The file “content.html” may be of the form:
<HTML>
<UL>
<LI><A HREF=“product1.html”
target=“products”>Product 1</A>
<LI><A HREF=“product2.html”
target=“products”>Product 2</A>
</UL>
</HTML>
 The value of attribute target tells the browser
in what frame to display the file.

Creating frames using
FrontPage (Project 9)



Create a new page sing: File/New and the
tab “Frames Page”  depending on the
template chosen, a page containing two or
more frames is created;
One can change the size of the frames by
clicking on the border, and dragging it to the
desired position;
Editing a frame’s content:


one can either set an initial page, or
edit a new page
Creating links to a frame


As before, use the hyperlink button to make a link;
However one can choose
will be displayed:





where the linked page
Default: chosen by FrontPage, depending on the
template used;
Same frame: the document will be displayed in the same
frame where the hyperlink is;
Whole page: the document is displayed on the whole
page of the browser;
Parent frame: the document is displayed in the frame
that contains the current frame tag;
New Window: the document is displayed on a new
browser instance
Saving a frame


Saving as usual: File/Save or File/Save
As
Note: you have to save all files
pertaining to the frame, i.e. the frame
content and the frame itself
Static HTML Pages


HTML pages as presented so far are
static, i.e. they do not change;
Advantages:




Easy to create
Inexpensive to maintain
May be retrieved quickly
 most Web pages are static
Static HTML Pages (cont.)

Disadvantages:




Cannot include additional forms of data, such as
sound;
Cannot include up to date information (e.g. stock
prices, weather, seat availability)
Cannot be used to interact with a user; for
example, cannot be used to send information to
the server, like credit cared number, name,..
Do not change after they are loaded;
Extending Web pages to
contain audio




A Web page can contain audio;
Audio data is associated with a link in a
page;
If such a link is selected, the browser
plays the audio through speakers;
Issues:


different formats used to store audio;
Different hardware used to play audio;
Plugins




Computer programs that understands how to
interpret a specific data format;
Ex: there are plugins for playing a certain
format of audio, showing video clips, …
Browsers may use plugins to extend their
functionality;
Web pages:



can test whether a browser has a given plugin;
inform the user;
Download the plugin from the Web
Plugins (cont.)

If the user agrees that the plugin be
installed:


A copy of the plugin is placed on the user
disk;
Each time the browser starts, it loads the
plugins  the same plugin does not have
to be downloaded twice
Static HTML Pages (cont.)

Disadvantages:




Cannot include additional forms of data, such as
sound;
Cannot include up to date information (e.g. stock
prices, weather, seat availability)
Cannot be used to interact with a user; for
example, cannot be used to send information to
the server, like credit cared number, name,..
Do not change after they are loaded;
Dynamic pages


Developed to allow for up-to-date information
be sent to users;
Idea:



A Web server may associate with a given URL with
a program instead of a static page
When a browser requests such an URL, the server
runs the associated computer program and sends
the output to the user.
This technology is called CGI (Common
Gateway Interface)
Dynamic pages (cont.)

Benefits:

CGI-programs can access data and perform
computations;



Ex: a program running on a server having access to to
stock information can return current stock prices;
Ex: www.cnn.com
CGI programs can store information on the disk,
and maintain a history;

Ex: count how many times a given page has been
accessed;
How CGI works

Consider that a browser sends a
request to a Web server;



If the URL corresponds to a CGI program,
the server starts the program, and passes
it a copy of the request;
The CGI program creates a page, based on
the request;
The server sends back the page;
Static HTML Pages (cont.)

Disadvantages:




Cannot include additional forms of data, such as
sound;
Cannot include up to date information (e.g. stock
prices, weather, seat availability)
Cannot be used to interact with a user; for
example, cannot be used to send information to
the server, like credit cared number, name,..
Do not change after they are loaded;
Forms


Forms are a type of HTML documents that
allows for information to be sent to the
server;
This information can be then used by a CGI
program to:



create a new document which is sent to the user;
Make a purchase;
Forms examples: www.cnn.com,
www.columbia.com
Other applications of CGI
technology

Personalized pages:



Personalized advertisements:


Depending on the user information, the CGIprogram can create a personalized page;
Ex: BMG (www.bmgmusicservice.com)
Different ads can be sent to different users;
Shopping cart:


One can have a shopping cart in which
information regarding the items purchased so far
are maintained, for a certain time interval;
Ex: www.barnesandnoble.com
Cookies





Keep information about users;
Are maintained by the user browser;
Are sent to a server upon request;
A server may use the information stored by a
cookie to retrieve data about a user (like
what merchandise has he bought before,
what documents has he seen, etc.)
Ex. you can see your cookies on pegasus in
the file .netscape/cookies
Cookies (cont.)

Most browsers allow a user to specify
whether to accept cookies:




in Netscape, Edit/Preferences/Advanced;
if you accept cookies, the server can use
dynamic content technologies to personalize
pages;
disadvantage: the server finds about your
shopping and browsing habits;
But, there are sites that cannot be viewed if
you do not accept cookies.
Disadvantages of dynamic
pages

Increased cost:



Inability to display changing information:



have to develop and test CGI-programs;
more sophisticated/powerful servers
like a static document, a dynamic document does
not change after the browser has retrieved a
copy;
the information can become stale quickly (ex:
stock prices)
The server may become overloaded;
Active documents

Contain a computer program that:




knows to display a page;
compute and displays values;
When a browser requests an active
document, the server returns a copy of the
program that the browser runs locally ;
when it runs, the active document can
change the display continuously content of
an active document is not fixed;
Active documents (cont.)

Advantages:


no delays due to server/browser communication:
the page is produced locally;
scalable: computations are performed locally;


imagine that a CGI program takes 1s to run and there
1000 requests received approx. at the same time;
with active documents, 1000 browsers will run locally the
program
Java--- an active document
technology





First active technology to appear;
An active document using Java is called
an applet;
Java is a full-fledge programming
language (and a nice one, to boot)
supports high quality animations;
ex: check
www.ibdprince.com/java.shtml
The applet tag
Applet tag is used to include an applet into a Web
page;

<param> tags are used to define the parameters
that will be passed to the Java program;
 any number of <param> tags can be included
between <applet> and</applet>
 ex: to include a Java program called lake.class into a
Web page stored in the same directory (folder) one
can use the following code:
<applet code="lake.class" width="280" height="440">
<param name="image" value="mypic.jpg">
</applet>

JavaScript---another active
document technology



Incorporates some basic features of
Java, and omits the more complex
ones;
can be embedded in a standard HTML
file;
when a browser encounters a
JavaScript section, it performs the
computation and displays the results
Active documents

Tend to replace other advanced
technologies because:


do not burden the server
only this technology makes possible
animation
Conclusion

There are three types of Web
documents:



static---the information remains unchanged
until the author revises it;
dynamic documents---are created by a
server on the fly upon request;
active documents---information in an active
document can change after the document
has been loaded by a browser.
Creating Active Pages with
FrontPage


FrontPage provides some predefined
animation effects, implemented as
JavaScripts;
To create animation effects:




Select (highlight) the text;
Select Format/Dynamic HTML Effects;
Choose an event and an effect;
The animation effect can be viewed in Preview.
Finishing touches..

In FrontPage:


one can add a common “theme” to pages in a
Web: choose Format/Theme;
Add a navigation bar to a documents:



In navigation mode, create a hierarchical structure for
your files; (drag first the parent (main) from the left to
the right, then add children (pages that can be reached
directly from parent page)
In Page mode do Insert/Navigation banner;
Add a banner to a document:

Insert/Banner
Finishing touches…(cont.)


View the hyperlinks of a document in a
graphical manner: Views/Hyperlinks;
Display reports about pages in the selected
Web: Views/Reports