Advanced Web Technologies - Computer Science
advertisement
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
