1. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1  Wiley and the book authors 2001 E-Commerce: Fundamentals and Applications Chapter 3 : Client-Side Programming

2. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications2  Wiley and the book authors 2001 Outline Key issues on client-side Web programming Web page design and production techniques Overview of HTML Basic HTML tags on Web page design such as:  Hyperlinks  Images & Image maps  HTML Tables  HTML Frames  HTML Forms Other advanced techniques such as Cascading Style sheets and JavaScript

3. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications3  Wiley and the book authors 2001 Important factors on Client-side Web programming Major factors in client-side Web programming include: Downloading time Data validation (e.g. type checking) Usability of existing computer software  measured by how easily and how effectively it can be used by a specific set of users, given particular kinds of support, to carry out a defined set of tasks, in a defined set of environments

4. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications4  Wiley and the book authors 2001 Important factors on Client-side Web programming (cont.) Factors which make up a usable user interface: System feedback Consistency Error prevention Performance / efficiency User like / dislike Error recovery

5. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications5  Wiley and the book authors 2001 Web page design and production Major steps in Web page design and production: Define audiences and the information requirements Develop logical design of the Web site Develop the perceptual design Content creation Programming Posting and hosting the site

6. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications6  Wiley and the book authors 2001 VBS Interface (Fig. 3.1) Book Search Quick Search Advanced Search Book Category Account Maintenance Create Account Change Password Login Maintenance Login Logout Shopping Cart View Cart e-Payment

7. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications7  Wiley and the book authors 2001 Proposed UI Design Process (Fig. 3.2) Abstract Model Conceptual Model Logical Design of UI Perceptual Design Screen Layout Usability Evaluation

8. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications8  Wiley and the book authors 2001 Overview of HTML Hypertext Markup Language (HTML) is a markup language for telling a Web browser how to format and display a Web page It is a subset of the Standard Generalized Markup Language (SGML) - a formal markup language for defining document format. HTML employs pre-defined tags to specify the format of a web page. For example, by putting the word “Italics” inside the tag pairs (i.e., Italics ), the word “Italics” will be displayed by the Web browser in Italics form.

9. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications9  Wiley and the book authors 2001 HTML - Basic format The basic structure of a HTML document is formed by the following tags:.........

10. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications10  Wiley and the book authors 2001 Basic HTML tags and a simple example A simple web page First level heading Second level heading The font face is Courier and the font size is 15pt. The font colour is red. The text is in italic form. The text is underlined. The text is expressed in bold face. This is superscript and this is subscript. This text is blinking. (PTO)

11. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications11  Wiley and the book authors 2001 Simple example (cont’d) This is a simple bullet list: First item Second item This is a simple numbered list: First item Second item

12. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications12  Wiley and the book authors 2001 Snapshot of the example Web Page (Fig. 3.3)

13. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications13  Wiley and the book authors 2001 Links Define by, HREF gives the URL to be accessed The URL can be absolute or relative:  Art  Science (at current directory)  (go back one directory)  (at the root) What are the differences? 

14. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications14  Wiley and the book authors 2001 Images There are two commonly used compressed image formats:  GIF and JPEG GIF:  Lossless compression  Transparent  Give 256 colors  Support animation (animated GIF)  Suitable for general-purpose images JPEG:  Lossy compression  Give “million of colors”  Suitable for photos

15. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications15  Wiley and the book authors 2001 Images (cont’d) Here is an example of the image tag using all the attributes:  SRC: URL of the image  ALT: image description during loading  HEIGHT: height of the image  WIDTH: width of the image  BORDER: border size  ALIGN: alignment method You can also create an image link, e.g.,

16. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications16  Wiley and the book authors 2001 ImageMap There are two types of image-maps namely  server-side  client-side image maps (commonly used) A client-side image map is defined by using the tag pair as follows. General format: …

17. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications17  Wiley and the book authors 2001 ImageMap (cont.) The tag is used to define the areas for the image map. As specified by the SHAPE attribute. Depending on the shape of the area, the boundary is specified by the respective coordinates as follows:  Circle - SHAPE="CIRCLE" COORDS="x,y,r" where (x,y) defines the center and r is the radius of the circle.  Rectangle: SHAPE="RECT" COORDS="xL,yL,xR,yR" where (xL,yL) and (xR,yR) define the top-left corner and bottom-right corner of the rectangle, respectively.  Polygon: SHAPE="POLY" COORDS="x1,y1,x2,y2,…,xi,yi" where (x1,y1), (x2,y2),.., (xi,yi) specifies the n-th corners of the polygon. Usage:

18. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications18  Wiley and the book authors 2001 HTML Table The table tag is... The row tag is... The heading tag is... The data cell tag is... Fig. 3.4 shows an example of a simple table incorporating the table tags and other common attributes.

19. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications19  Wiley and the book authors 2001 Table Example (Fig. 3.4)

20. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications20  Wiley and the book authors 2001 What are HTML Frames? Frames enable the display of multiple web pages within a single browser window. The frameset tag is used to specify the frame layout:.... The common attributes are: ROWS=“r 1 ”, “r 2 ”.... “r m ” (m rows) COLS=“c 1 ”, “c 2 ”.... “c p ” (p columns) The sizes can be set in terms of pixels or a percentage.

21. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications21  Wiley and the book authors 2001 More about frame size Browsers use * to allocate the available space. For example:  Set the two columns evenly <FRAMESET COLS=“*, 2*”)  The width of the right frame is two times that of the left frame.  What does mean?

22. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications22  Wiley and the book authors 2001 Specifying frame content The tag is: Common attributes are:  SRC : URL of the source HTML page  NAME : a name for identification purpose  FRAMEBORDER : indicates whether a border is used  MARGINWIDTH : left and right margins  MARGINHEIGHT : top and bottom margins  SCROLLING : indicates whether a scroll bar is used  NORESIZE : do not allow users to change the frame size

23. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications23  Wiley and the book authors 2001 A nested frame example

24. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications24  Wiley and the book authors 2001 A nested frame example (Fig. 3.5)

25. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications25  Wiley and the book authors 2001 Implementing navigation (cont’d) Use the target attributes to control navigation:  “_self” display in the current frame  “_blank” display in a new window  “_top” eliminate all frames Define the default TARGET in the base tag of the document head e.g.,

26. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications26  Wiley and the book authors 2001 What are HTML Forms? Forms are generally used to obtain data from the client for submission to the server. Typically, a program in the server is invoked to process the data, possibly with the assistance of the backend system. The result (in most cases, an HTML file) will then be passed to the web client by using the HTTP.

27. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications27  Wiley and the book authors 2001 HTML Forms - general format General format: Form input elements Regular HTML content  ACTION: URL of the program for processing the form data  METHOD: methods for passing data to the server:  GET: attach at the end of the URL  POST: embed in the HTTP request message

28. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications28  Wiley and the book authors 2001 Common HTML Form elements Common HTML Form elements include:  Textbox  Password textbox  Checkbox  Radio button  Submit button  File input field  Hidden form field  Textarea  Select menu

29. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications29  Wiley and the book authors 2001 Cascading Style Sheets (CSS) In HTML 4.0, Cascading Style Sheet (CSS) is available to separate the style from the structure By using CSS, a single style sheet can be applied to several web pages requiring the same style There are three types of CSS, namely  external style sheets;  embedded style sheets;  inline style sheets.

30. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications30  Wiley and the book authors 2001 What is JavaScript? JavaScript is a scripting language proposed by Netscape to enhance the functions of HTML It is often called an Object-oriented (OO) scripting language with syntax looking like Java It can be used to produce interactive and dynamic Web pages It is supported by most commonly-used browsers including MS. IE and Netscape’s Navigator. Unlike the server-side programs, a JavaScript code is included in an HTML document and executed on the client-side For details, refer to Netscape's site on JavaScript (http://developer.netscape.com/docs/manuals/index.html).

31. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications31  Wiley and the book authors 2001 Basic structure of JavaScript A JavaScript code is embedded between the and tags as follows: HTML file with JavaScript code <!--- Put the JavaScript code here. //--> …

32. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications32  Wiley and the book authors 2001 Sample JavaScript: Hello World A sample Javascript example: Hello World JavaScript Hello World <!-- document.write(" "); document.write(" JavaScript : Hello World!! "); document.write(" "); document.write("Current URL is: "); document.write(location.toString()); document.write(" Current time is: "); document.write(Date()); //-->

33. _______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications33  Wiley and the book authors 2001 Sample JavaScript : Hello World (Fig. 3.6)