Advanced Web Technologies. Frames Forms Plugins Dynamic Pages---CGI Active Pages: Java, Java Script.

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 where the linked page

will be displayed: 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

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;

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:

Depending on the user information, the CGI-program can create a personalized page;

Ex: BMG (www.bmgmusicservice.com) Personalized advertisements:

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:

have to develop and test CGI-programs; more sophisticated/powerful servers

Inability to display changing information: 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

Advanced Web Technologies. Frames Forms Plugins Dynamic Pages---CGI Active Pages: Java, Java Script.

Documents

Transcript of Advanced Web Technologies. Frames Forms Plugins Dynamic Pages---CGI Active Pages: Java, Java Script.