Advanced Web Technologies

1
Advanced Web Technologies

2
Advanced Web Technologies

• Frames
• Forms
• Plugins
• Dynamic Pages---CGI
• Active Pages Java, Java Script

3
Frames

• Conventional Web pages use the entire screen
• May be inconvenient when
• Display a list 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.strongframes.com/

4
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

5
Creating a frame

• Frameset tag
• Defines a framed environment
• Instructs the browser how to split the screen
• Ex
• ltframeset cols20,40,40gt--- splits the screen
  in three columns, the first taking 20 of the
  space available
• ltframeset rows50,50gt---splits the screen
  into two rows of equal size
• Framesets maybe nested

6
Creating a frame (cont.)

• Frame tag ---introduces a frameset element
• Each frame has
• a source---i.e. the HTML document that is
  displayed in the correspondent screen portion
• a name (optional)

7
A frame example

• For example, consider a file frames.html with
  the following content
• lthtmlgt
• ltframeset cols20, border10gt
• ltframe srccontents.html name contentsgt
• ltframe srcproduct1.html name productsgt
• lt/framesetgt
• lt/htmlgt

8
A frame example (cont.)

• The file content.html may be of the form
• ltHTMLgt
• ltULgt
• ltLIgtltA HREFproduct1.html targetproductsgtPro
  duct 1lt/Agt
• ltLIgtltA HREFproduct2.html targetproductsgtPro
  duct 2lt/Agt
• lt/ULgt
• lt/HTMLgt
• The value of attribute target tells the browser
  in what frame to display the file.

9
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
• 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

10
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

11
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

12
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 card number, name,..
• Do not change after they are loaded

13
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

14
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

15
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

16
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

17
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)

18
Dynamic pages (cont.)

• Benefits
• CGI-programs can access data and perform
  computations
• Ex a program running on a server having access
  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

19
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

20
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 card number, name,..
• Do not change after they are loaded

21
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

22
A Form Example
23
Forms

• A form is an area that can contain form elements.
• Form elements are elements that allow the user to
  enter information (like text fields, textarea
  fields, drop-down menus, radio buttons,
  checkboxes, etc.) in a form.
• A form is defined with the ltformgt tag.
• Ex
• ltformgt
• ltinputgt
• lt/formgt

24
Input

• The most used form tag is the ltINPUTgt tag. The
  type of input is specified with the type
  attribute. The most commonly used input types are
  text fields, radioboxes, and checkboxes.
• All INPUT tags have the following attributes
• TYPE, which specifies the type of input (text,
  radioboxes, )
• NAME, which specifies a name for the input it is
  used to parse a completed form.

25
Text Box Properties

• Size One can specify the size of a text box, by
  and changing the value of the width parameter
• Validation rules One can impose validation rules
  on the type of values being entered in a textbox

26
The Form's Action Attribute

• The ACTION attribute specifies what should be
  done with the data possible options are
• Send an e-mail with the content
• Ex ACTIONmailtoashwin_at_cs.albany.edu
• Save the content into a file
• Save the content into a database
• Send the content to a script which will process
  it in some manner
• Perform some other action, say go to another page
• EX
• ltFORM ACTION"destination_url" METHODGETgt

27
Radio Buttons

• Radio Buttons are used when you want the user to
  select only one of a limited number of choices.
• Using Radio Button Properties one can
• Specify a value, which is submitted if the
  radio button is checked
• Specify whether the button appears checked

28
Checkboxes

• Checkboxes are used when you want the user to
  select one or more options of a limited number of
  choices.
• Use Check Box properties to
• specify a value for the check box
• Whether a field appears checked

29
Drop Down Boxes

• A drop down box presents a list of items, one or
  more of which can be selected
• When you create a drop-down box (menu) you need
  to specify
• The name of each option
• The height of the menu (how many options are
  visible initially)
• Whether several options may be elected

30
Text Area

• A text area enables users to enter many lines of
  text they are used for information whose size is
  unknown (comments, questions, etc)
• Text area properties
• Width, height (number of rows)
• Initial value

31
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

32
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.)

33
Cookies (cont.)

• Most browsers allow a user to specify whether to
  accept cookies
• in Netscape, Edit/Preferences/Advanced
• In Explorer Tools/Internet Options/Privacy
• 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.

34
Cookies (cont.)

• To remove cookies
• in Netscape, use FTP to delete files
• In Explorer Tools/Internet Options/General/
  Delete Cookies

35
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

36
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

37
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

38
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

39
The applet tag

• Applet tag is used to include an applet into a
  Web page
• ltparamgt tags are used to define the parameters
  that will be passed to the Java program
• any number of ltparamgt tags can be included
  between ltappletgt andlt/appletgt
• 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
• ltapplet code"lake.class" width"280"
  height"440"gt
• ltparam name"image" value"mypic.jpg"gt
• lt/appletgt

40
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

41
Active documents

• Tend to replace other advanced technologies
  because
• do not burden the server
• only this technology makes possible animation

42
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.