Electronic Commerce COMP3210 Session 3: Designing, Building and Evaluating e-Commerce Initiatives...

Electronic Commerce COMP3210

Session 3: Designing , Building and Evaluating e-Commerce Initiatives – Part I

Dr. Paul Walcott Department of Computer Science, Mathematics and PhysicsUniversity of the West Indies, Cave Hill CampusBarbados

The Department of Computer Science Mathematics and Physics, University of the West Indies, Cave Hill Campus, Barbados

© 2007 Dr. Paul Walcott

Session Objectives The objectives of this session are:

Comprehend Web site usability issues To understand HTML and cascading style sheets To analyse some basic Web site design principles To apply five criteria in order to determine the

credibility of an Internet source To construct a Web site using e-commerce and Web-

based software

Web Site Design Principles1,2

In this section we will: Briefly discuss

interface design Present some Web

site design principles

http://www.cybermarket.co.uk/ishop/images/923/429_904.jpg

Web Site Design Principles Cont’d What is an interface?

It is the front end (or user controls) of a device E.g. a remote control is the interface for a

television set Or a light switch is the interface for an electric

light

Web Site Design Principles Cont’d So what makes a good Web interface?

It must be easy to use The Web site functionality must be easy to deduce

Important items are always available, yet not intrusive E-commerce site should provide links to the checkout

The purpose of the Web site must be immediately understandable; things must be arranged logically This includes no cryptic icons

In addition, the site should be interesting and colourful (without being irritating)

Web Site Design Principles Cont’d When designing a Web site the designer must

consider: The type of screen or device that the Web page will

be displayed on (is it in colour etc.) Whether the page will be printed

Although this is a secondary issue

The size of the screen

The designer unfortunately does not have full control over these media

Web Site Design Principles Cont’d It is important to set a Web site theme. This

is a multi-step process: Set the Web site goals Determine your audience Define the look and feel of the Web site

Web Site Design Principles Cont’d To determine the goals of your Web site consider

asking the following questions: What is the purpose of creating your Web site? Should I concentrate on only one goal? What will happen if the goals change and how will it

affect the maintenance of the Web site?

Goals need to be balanced against available resources and time

Web Site Design Principles Cont’d To determine the audience of the Web site

consider the following factors: Visitor’s age: young, elderly or ageless? Language: is there a requirement to support more

than one? Culture Income group: who can afford your product/service? Educational sophistication: scientific Web sites have

less images Attention span: after a few clicks the visitor might

leave

Web Site Design Principles Cont’d When considering the Web site look and

feel it is important to communicate: The company’s logos, name, products and

location The unique qualities of the company

Web Site Design Principles Cont’d Design principles

Nonlinear presentation

One or two screens per page

Simple navigation Small graphics for

faster page loading Appealing visual

effects

Web Site Design Principles Cont’d The WWW is characterised by:

Non-linear information delivery Pages that are viewed on desktop PCs, Notebooks

computers, Web-enabled mobile phones and Palm PCs

Multiple Internet connection options including Fibre optic lines, TV cable and dial-up phone lines

These characteristics must be considered when designing a Web site

Web Site Design Principles Cont’d Nonlinear Presentation:

Traditional media, e.g. a lecture, present information in a linear way

A Web site should utilise multi-dimensional hyperlinks for quick, user-centered navigation

Web Site Design Principles Cont’d One or Two Screens Per Page:

The home page of a Web site should be no longer than one or two pages Effective home pages present corporate

information, logos and links on the first or second screen

This prevents the need for a significant amount of scrolling, since the top of the page is what a visitor sees when entering the site

Web Site Design Principles Cont’d Simple Navigation:

The layout of a Web site should be clear and simple allowing easy navigation Hyperlinks should be grouped together logically Each hyperlink should connect a major topic or

category e.g. Products

Web Site Design Principles Cont’d Navigational links could be presented as:

A bar of file folders A line of small rectangular or oval buttons A list of underlined text

For easy navigation links should be placed: On the left, right or top side of the screen Or frames could be used which freeze the

navigation controls on the screen

Web Site Design Principles Cont’d Smaller Graphics For Faster Page

Loading: The larger the graphics the longer a Web

page will take to load, especially on a narrow-band connection (e.g. dial-up) Visitors will probably get fed up and leave the site

Web Site Design Principles Cont’d As a general rule:

JPEG (Joint Photographic Expert Group image format) is a 24-bit (16.7 million colours) image format

Photographs should use the JPEG format A JPEG pictures on a Web page should be

smaller than 50KB Not more than two (2) 50KB JPEG images

should be on a single Web Page

Web Site Design Principles Cont’d Alternatively:

The GIF format (Graphics Interchange Format by CompuServe) is an 8-bit (256 colours) image format

The GIF format is therefore suitable for navigation buttons, logos and Icons

Navigation buttons should be smaller than 5KB each Typical buttons are 1-2KB each

Web Site Design Principles Cont’d Appealing Visual Effects:

Appealing visual effect can be made using the right combination of style, layout and colour 12 point Times New Roman or 11 point Arial

fonts are typically used for regular text Headings are usually in a different colour, bold or

in a larger font

Web Site Design Principles Cont’d Colour contrast between text and background

is crucial It is best to use a light background colour and dark

text Special effect (e,g. blinking text) are suitable

for short text strings, e,g, “Special Offer” not long sentences

Always check the page layout on 12.1” – 15” diagonal screens since this is the monitor size for the average user

Web Site Design Principles Cont’d Some additional design hints include:

Always ensure that the user can get to all important pages (e.g. product descriptions) using a small number of mouse clicks Users get fed-up after a few mouse clicks

Always design your Web site for the slowest connection speed, and the earliest browser used by your target audience

Web Site Design Principles Cont’d Some additional design hints include:

When creating information sites include a lot of white space; make the pages simple and uncluttered Users get fed-up after a few mouse clicks

Always write an outline for your content and decide whether each major topic will be on a separate Web page (recommended); and which sub-topics require their own pages

Constructing a Web Site3,6,7,8

Software and hardware requirements

http://www.madventurer.com/images/photo-building-house-past-project.jpg

Constructing a Web Site Cont’d From the company goals you should be able to

estimate The number of visitors that will use your site The number of pages viewed by the average visitor The average and maximum allowed size of each page The maximum allowed number of simultaneous

visitors

This allows the software and hardware requirements to be determined

Constructing a Web Site Cont’d First let us review some fundamentals

about Web clients and servers

Constructing a Web Site Cont’dWeb Clients and Servers When an individual connects to the Internet to

view a document, they become a client on the Webs client/server network

The client/server architecture is used for LANs, WANs and the Web.

Typical request serviced by servers connected to these networks include request to print, to retrieve information and to access databases

Constructing a Web Site Cont’dWeb Clients and Servers Web servers typically have

More memory Larger and faster disk drives than client computers

Web browser software e.g. IE, Netscape and Firefox is the software that makes computers work as Web clients

The Internet connects several different types of computers together, therefore Web software must be platform neutral

Constructing a Web Site Cont’dDynamic Content A static page is an unchanging page retrieved

from a disk A dynamic page is a page created by a program

(script) based on user input E.g. a Web client inquires about the status of an order

and the Web page that is returned is created from information stored in a database

Constructing a Web Site Cont’dDynamic Content This property (being dynamic) can affect the

performance of the Web Server static pages are delivered faster than dynamic pages

The first Web site to provide dynamic pages used server side scripting Programs running on the Web server that create web

pages These technologies are slow

Constructing a Web Site Cont’dDynamic Content Newer technologies used for generating dynamic

content include: Microsoft’s Active Server pages (ASP) Sun’s Java Server Pages (JSP) Apache’s PHP Hypertext Preprocessor (PHP)

Constructing a Web Site Cont’dDynamic Web Pages: The Future Some critics say that ASP/JSP/PHP etc. do

not solve the problem since they simply shift the responsibility of Web page creation from people to programs

A project that is currently underway to tackle the problem of dynamic Web page creation is the Apache Cocoon project

Constructing a Web Site Cont’dDynamic Web Pages: The Future The Apache Cocoon project:

Is creating a Web development framework that Allows programmers to query the system using data in XML

format Receives output in multiple formats including HTML

The content is stored in XML tags which describes the semantics (meaning) of each content item A Java servlet handles the information request A style sheet is applied to the data

Constructing a Web Site Cont’dServers A Server is any computer used to provide

files or make applications available to other computers connected to it through a network Server software refers to the programs that

run on the server Web Servers are connected to the Internet

and serve Web pages (e.g. Apache)

Constructing a Web Site Cont’dServers

E-mail Servers handle incoming and outgoing email

Database Servers are server computers on which database management software runs

Constructing a Web Site Cont’dWeb Client/Server Communication When a Web Client requests a page from a Web

server the following occurs The request is converted into HTTP by the browser

and sent to the Web Server The Server receives the request and retrieves the

information requested by the Client The Server formats the information using HTTP and

sends it back to the Client The Client displays the information in the browser

Constructing a Web Site Cont’dWeb Client/Server Communication Web pages may take long to appear because each

page element requires a separate request/response

Constructing a Web Site Cont’d2/3-Tier Client/Server Architecture The typical Web Client/Server model is two tier

because it has one client and one Server In the three-tier Client/Server model the third tier

includes Server applications that supply information to the Web Server E.g. a catalog style Web site with search, update and

display functions: the catalog database and database management software would make up the third tier

Constructing a Web Site Cont’dWeb Server Hardware Web Servers have

more memory, faster hard drives and faster processors (or multiple processors) than desktop machines

Constructing a Web Site Cont’dCost A high-end desktop PC with 512MB RAM,

3GHz processor, a 200GB IDE drive, a good monitor and DVD/CD-RW drive cost between US$2000 - $4000 (in 2004) A low end Web server might cost the same amount

Companies spend between US$6,000 and $400,000 for a Web server

Suppliers of these servers include Dell, Gateway and Hewlett Packard

Constructing a Web Site Cont’dWeb Server Architectures Server farms refer to large (hundreds, or

thousands) of Web servers used to handle daily traffic on large Web sites

A Centralised architecture uses a few very large and very fast computers

A Distributed/decentralised architecture uses a larger number of less powerful computers

Constructing a Web Site Cont’dWeb Server Architectures The Centralised architecture requires

Expensive computers Is more susceptible to technical problems

If one or a few of the servers are unavailable then a large proportion of the site is unavailable

As a result a backup/recovery plan is essential

Constructing a Web Site Cont’dWeb Server Architectures The Distributed/decentralised architecture:

Spreads the risk over a large number of servers The smaller servers are less expense than larger ones

(the cost of 100 smaller servers is usually less that the cost of one large one)

Additional hubs and switches are required to link the servers together and to the Internet

These sites might also use load-balancing systems which are an additional cost

Constructing a Web Site Cont’d Load Balancing Systems3

A load-balancing switch: A piece of network hardware that monitors

the workload of servers attached to it Assigns incoming web traffic to the server

with the most available capacity at the given time

Constructing a Web Site Cont’dWhy Load-balance? Allows Highly-Trafficked Sites To Maintain Fast

Response Times Server Redundancy - If An Application Server

Goes Down, Your Site Stays Up Better Site Performance = Better User Experience

= Better Sales Results Readies Your Hosting Configuration For Traffic

Growth & Intense Traffic Spikes

Constructing a Web Site Cont’dSimple Load-Balancing Traffic enters the site

from the Internet through a router (not shown in diagram)

This traffic is then directed to the appropriate Web server by the load-balancing switch

www.inetu.com

Constructing a Web Site Cont’dLoad Balancing

Systems Cost Load-balancing

switches and software cost between US$10,000 and US$50,000

www.inetu.com

Constructing a Web Site Cont’d It should now be clear

what hardware and server software is required to construct a Web site

In this next section we will discuss the client-side and server-side software used to construct Web sites


Constructing a Web Site Cont’dClient-side Technologies Client-side Web technologies include:

HTML XML JavaScript VBScript Java Applets

Constructing a Web Site Cont’dServer-side Technologies Server-side Web technologies include:

Perl/CGI JSP PHP Microsoft ASP

Constructing a Web Site Cont’d In addition to the client-

side and server-side software that has just been discussed, it is also important to know the e-commerce software that is available to businesses, who either want to host their own Web sites, or want to outsource the hosting function


Constructing a Web Site Cont’dFinding and Evaluating Web Hosts When a company takes on the responsibility of

hosting their own Web site this is called self-hosting Small and mid-size businesses tend to outsource to a

third party, i.e. use a Web hosting service provider These third parties are called Internet Service

Providers (ISPs), Commerce Service Providers (CSPs), Managed Service Providers (MSPs) or Application Service Providers (ASPs)

Constructing a Web Site Cont’dFinding and Evaluating Web Hosts Cont’d To find a host a company must determine what

type of service they require, for example: A shared hosting service where the Client’s Web site

is on a server which hosts other Web sites A dedicated hosting service where only the Client is

hosted on the Server Or, a co-location service where the Client installs his

own hardware and software, and rents a physical space, a reliable power supplier and an Internet connection

Constructing a Web Site Cont’dFinding and Evaluating Web Hosts Cont’d A list of Internet service providers can be found

on: http://thelist.internet.com http://www.hostindex.com http://www.tophosts.com http://www.hostSearch.com

Exercise: use the above sites to find ISPs in North America

Constructing a Web Site Cont’dElectronic Commerce Software The software requirement for e-commerce

site vary tremendously and are dependent on several factors including: The size of the enterprise and its projected

traffic The budget

Constructing a Web Site Cont’dElectronic Commerce Software Cont’d All e-commerce solutions must provide at

least the following: A catalog display Shopping cart capabilities Transaction processing

Constructing a Web Site Cont’dElectronic Commerce Software Cont’d Larger e-commerce site require additional

functionality, such as: Middleware that links the company’s existing system

(inventory control, order processing and accounting) to the e-commerce system

Databases and Applications Supply chain management software Customer relationship management software Content management software Knowledge management software

Constructing a Web Site Cont’dCatalog Display This is used to organise the goods being sold Static catalog

This is a simple list written in HTML that appears on one or more Web pages

To add or delete items from the catalog it is require to edit the HTML pages

Dynamic catalog Information is stored in a database May feature photographs of items, detailed descriptions

and search facilities

Constructing a Web Site Cont’dCatalog Display Cont’d Smaller Web stores selling fewer than 40 items

only need a list of products or product categories Images of all the products might be able to fit on the

same page Larger stores require

More sophisticated navigation, and product organisation tools

Also they must often alternative ways of finding products, e.g. product categories as well as a free-text search capabilities, e.g. “stereos”

Constructing a Web Site Cont’dShopping Carts In the earlier years of e-commerce text forms

were used to enter orders. These forms were error prone because customers had to: Write down product codes, unit prices and other

information about the products before going to the order form

Customers also had to write down the price of the item which was often on another page

Constructing a Web Site Cont’dShopping Carts Cont’d Modern shopping carts keep track of the items a

customer selects, allowing them to add or remove items, or simply to view the cart

All information about the item, including its price and product code are stored in the shopping cart automatically

The clicking of a button (e.g. the checkout button) executes the purchase transaction

Constructing a Web Site Cont’dShopping Carts Cont’d Some Web commerce sites allow the

storage of items in a shopping cart over a period of days, allowing the user to come back and pay for the items at that time

Constructing a Web Site Cont’dShopping Carts Cont’d Companies that sell shopping cart software

include: http://www.salescart.com/

A one off cost of $250-$400 ASP, ASP.Net & PHP

http://www.webgenie.com/ Single User license $495 Perl/CGI

Constructing a Web Site Cont’dTransaction Processing Transaction processing occurs when the Shopper

proceeds to the virtual checkout At this point volume discounts, sales tax and

shipping costs are calculated (sales tax and shipping charges must be kept current)

These calculations must also include any coupons, special promotions or time sensitive offers (e.g. make a purchase by a given date and get a discount)

A secure communication link is subsequently established to transmit payment information

Constructing a Web Site Cont’dMiddleware Links the e-commerce software to existing

system Middleware may be written in-house or bought

from middleware vendors or consulting firms The total cost of a middleware implementation

can range from $50,000 to millions E.g. of middleware vendors are www.beasys.com

and www.broadvision.com

Constructing a Web Site Cont’dDatabases A database manager stores software in a

highly structured way The database structure determine how easy

the database manager can retrieve the information stored in the database

Smaller e-commerce sites can use low cost databases such as Microsoft Access

Constructing a Web Site Cont’dDatabases Cont’d Larger e-commerce sites require more expensive

data management software such as: IBM DB2 Microsoft SQL Server Oracle

These packages cost between US$5,000 and US$200,000

Constructing a Web Site Cont’dDatabases Cont’d An increasing number of companies and

organisations are beginning to use MySQL which is open source software Customers pay for service support if required

Constructing a Web Site Cont’dApplication Integration Application programs perform specific functions,

e.g. creates invoices An application server receives its input from Web

servers which in turn is supplied by the user The function of the application software is

dictated by the rules of the business; this is called business logic

Constructing a Web Site Cont’dApplication Servers Application servers are divided into two groups:

Page-based application systems which return pages generated by scripts containing rules for presenting the data Examples include Macromedia ColdFusion, Java Server

Pages (JSP), Active Server pages (ASP) and PHP: Hypertext Preprocessor (PHP)

This technology works well for small to mid size sites

Constructing a Web Site Cont’dApplication Servers Cont’d

Component-based application systems separate the presentation logic from the business logic. Each logical component is created in a separate module E.g. Enterprise JavaBeans (EJBs), Microsoft

Component Object Model (COM) and Object Management Group Common Object Request Broker Architecture (COBRA)

Constructing a Web Site Cont’dWeb Services An accepted definition is not yet available However it is a combination of software

tools that allow application software in one organisation to speak to application software in another organisation over a network

Constructing a Web Site Cont’dWeb Services Cont’d

E.g. a mortgage application service company obtaining information from consumers

forwarding the information to a Building Society for a mortgage decision

decision is relayed back to the service company

These services use XML

Constructing a Web Site Cont’dE-Commerce Software for Small to Mid-Size E-

Businesses E-commerce software for small to mid-size

business is typically provided by commerce service providers (CSP)

CSP have the advantage of Offering free or low-cost e-commerce site building

software Cost typically less than US$20 month

Constructing a Web Site Cont’dE-Commerce Software for Small to Mid-

Size E-Businesses Cont’d Service appropriate for small businesses

selling no more than 50 items Transaction volumes of fewer than 20 a day

E.g. ValueWeb hosts over 180,000 Web site for over 130 countries

Constructing a Web Site Cont’dMall-style CSP Provide small businesses with:

An Internet connection Web site creation tools Little or no banner advertising clutter Shopping cart software, and payment processing

The monthly fee is higher than lower-end providers (therefore less ads) May charge a one-time setup fee Percentage or fixed charge for every transaction

Constructing a Web Site Cont’dMall-style CSP Cont’d Examples include eBay Stores and Yahoo!

Stores

Constructing a Web Site Cont’dEstimating Operating Costs For Small Web

Business Using ISP The first year cost (in US dollars) for Web businesses that

sell less than 50 different items Initial site setup fee $200 Annual maintenance $1200 Domain name registration $70 Scanner or digital camera $500 Photo editing software $100 Occasional HTML design help $400 Merchant credit card setup $200 Total first year cost $2670

Constructing a Web Site Cont’dCost of Self Hosting a Site for a Small Business Setup and Web site maintenance includes

Equipment: (server and network gear) one time cost of US$3000 - $20000

Communication: T1 or fractional T1 cost US$1200 - US$12,000 per year

Physical location: (e.g. room security, air conditioning and communication access) cost $5,000 a year

Staff: minimum cost US$50,000 - US$100,000 annually Total cost US$60,000 - US$100,000 or more for the

first year, and about the same in subsequent years

Constructing a Web Site Cont’dCost of Self Hosting a Site for a Medium-

Size and Large Business The startup cost is US$100,000 -

US$500,000 Recurring annual cost of 50% this amount

Large businesses spend US$1 million - US$50 million to launch, with 50% recurring annual cost

Constructing a Web Site Cont’dSoftware Tools For Medium-Size to Large E-

Businesses The software tools for midsize to large businesses

include: Macromedia Dreamweaver Microsoft FrontPage Visual Studio .Net – for dynamic pages Shopping carts, content management software Middleware

Constructing a Web Site Cont’dSoftware Tools For Medium-Size to Large E-

Businesses Cont’d Buying and using mid-range e-commerce

software has an annual cost of US$2,000 - US$50,000 Offers connectivity to database systems Provides connections to existing inventory control

software E,g, IBM Websphere Commerce Professional

Edition (cost US$80,000 per processor)

Constructing a Web Site Cont’dE-Commerce Software for Large Businesses Higher transaction loads required Software cost much more Extensive support for B2B commerce Requires several dedicated computers, Web

server systems and firewalls E.g. IBM WebSphere Commerce Business

Edition

Constructing a Web Site Cont’dCustomer Relationship Management The goal is to understand the customer’s

specific needs and customise the product to suit them

A customer whose needs are being met exactly is willing to pay more for goods or services

Constructing a Web Site Cont’dCustomer Relationship Management Cont’d CRM software requires input from

Sales automation Customer service centre operation Marketing campaigns Customer activity data from the Web site

This helps managers to: Gather business intelligence Plan marketing strategy Perform customer behaviour modelling Product and service customisation

Constructing a Web Site Cont’dCustomer Relationship Management

Cont’d E.g. Siebel Systems; price starts at around

US$200,000; an average of about US$5,000 per user

Constructing a Web Site Cont’dSupply Chain Management Helps to coordinate planning and operations with

industry partners SCM software helps with

Planning: helps companies develop coordinated demand forecast using information from partners

Execution: helps with warehousing and transportation management

E.g. i2 Technologies. A wholesaler with 3-4 distribution Centres might have to pay US$1 million for the SCM software

Constructing a Web Site Cont’dContent Management Software Used to update or maintain Web site

content Allows control of large amount of text,

graphics and media files E.g. Documentum which cost between

US$200,000 - $500,000

Constructing a Web Site Cont’dKnowledge Management Software Helps companies to

Collect and organise information Share information among users Enhance the ability of users to collaborate Retain knowledge gained to be used by future users E.g. IBM Lotus Discovery Server KM software can cost between US$50,000 to US$1

million or more

Evaluating Web Sites4

The Internet provides a rich source of information, however Although it is tempting

to think that everything is on the Internet, it is not

There are many Web sites with inaccurate, confusing and misleading information

http://www.class.uidaho.edu/psyc218/images/evaluate.jpg

Evaluating Web Sites Cont’d Since there is no editor in charge of the

Internet it is necessary to evaluate Web sites before using the information on them

Many criteria have been suggested in the literature for the evaluation of the credibility of an Internet source

Evaluating Web Sites Cont’d However the criteria that this course will

adopt are: Authority Accuracy Objectivity Currency Coverage

Evaluating Web Sites Cont’dAuthority Authority is concerned with the credentials of the

author of the information Who has created the Web page content? Is there any author contact information? What degrees or experience does the author have?

These questions help to determine whether the author is a reliable source or even an expert in the subject area

Evaluating Web Sites Cont’dAccuracy This is concerned with the accuracy of the

information contained in the Web site Can any of the facts be verified against another

source? Are there spelling or grammatical errors (since this

helps to indicate whether the author took care in writing the material)?

Is there a person or body responsible for the accuracy of the information (e.g. the Publishers of a Journal do blind peer reviews)?

Evaluating Web Sites Cont’dObjectivity This is an attempt to determine whether the

information is objective or biased Does the author have a clear point of view? Is the site run by Government, a University or

a business trying to sell a product?

Evaluating Web Sites Cont’dCurrency This is concerned with the publication date of the

article On Web sites this is not always clear Information that is updated regularly is more

likely to be useful as references for research papers

Web sites with links that go nowhere (i.e. dead links) often indicate that it has been abandoned or that the information is simply not up to date

Evaluating Web Sites Cont’dCoverage This is concerned with whether information about

a given topic is covered in-depth Shorter articles, which are most common on the

Internet, tend not to have the depth of information required for research papers

Articles for bibliographies or a list of references provide a valuable source of additional articles that can be used

Evaluating Web Sites Cont’d Typically, the order of importance of

sources are: Peer-reviewed Journals Peer-reviewed conference proceedings .gov, .edu sites (run by the government and

Universities) .org, .com, .net sites (run by individuals or

companies)

Web Site Usability5,9,10,11

“From whence we came” Early Web sites

simply provided information and often did not include e-mail addresses; those who did did not have enough staff to respond to the email

Web Site Usability Cont’d A visitor should be given access to the:

organisation’s history, A statement of objectives/mission statement Information about products or services A way to communicate with the organisation

Every visitor to a Web site is a potential customer It is difficult to meet all the needs of visitors

Web Site Usability Cont’d Some of the motivations of visitors

include: Learning about products and services Buying products or services Obtaining general company information Identification of the management team and

their contact information Obtaining company financial information in

order to make investment decisions

Web Site Usability Cont’dMeeting Visitors Needs To meet the needs of Web site visitors you must

consider: The expectation level and experience when they

enter your site The communication channel used to connect and the

bandwidth The web browser used The add-ins available for the browser being used

Web Site Usability Cont’dBuild Flexible Web sites Separate version with and without frames Text-only versions (for visually impaired people

who use special browser software) Give users the option to download smaller

versions of graphics If audio or video clips included, give user the

option to select the connection type (so that adjustments may be made for bandwidth)

Web Site Usability Cont’dBuild Flexible Web sites Cont’d Let users select the level of detail, viewing

format and download format Offer visitors multiple information formats

(e.g. HTML, PDF or Excel spreadsheet for financial data)

Web Site Usability Cont’dMacromedia Flash There has been some controversy

surrounding the use of Macromedia Flash: The files (which are not rendered in HTML)

take a long time to download, especially if you do not have a broadband connection

Few major e-commerce sites use these type of animated graphics pages

Web Site Usability Cont’dMacromedia Flash Cont’d

Some tasks however do lend themselves to animation (e.g. pants fitting at http://www.leefit.com/)

One solution is to offer Flash or non-Flash pages

Web Site Usability Cont’dWeb Site Design Goals A Web site developer should try to meet the

following goals: Provide easily accessible organisational information Provide a two-way communication link with the

organisation Encourage return visitors (e.g. announce upcoming

content) and keep the attention of existing visitors Provide full access to products and services

Web Site Usability Cont’dCustomer Trust and Loyalty Customer trust/loyalty translates to return visits

A customer that purchases a product from a business and gets good service will begin to trust the business. Multiple good experiences leads to loyalty A 5% increase in customer loyalty can yield 25-80% profit

Web Site Usability Cont’dCustomer Trust and Loyalty Customer service on E-commerce sites

Research indicates a rating between average to low There is often a lack of integration between the call

centres and the Web site E-mail responsiveness is also an issue (slow or no

replies to emails)

Web Site Usability Cont’dUsability Testing Companies are only now performing usability

testing on their Web sites Average e-commerce sites frustrate up to 70% of

their users (resulting in the user leaving the site without purchasing anything) Sites are confusing or difficult to use

In many cases simple changes can improve the usability of the site(See http://www.cs.umd.edu/hcil/ and http://www.useit.com/alertbox/ for further details)

Web Site Usability Cont’dCustomer-centric Web Design The following guidelines serve to meet the needs

of the customer (as opposed to any Web site visitor): Arrange links in the way that a customer would use

them It should be possible to access information quickly Keep product and service descriptions simple, do not

over sell by including a lot of marketing Keep the language simple and jargon free

Web Site Usability Cont’dCustomer-centric Web Design Cont’d

The Web site should work with the oldest browser, running on the oldest computer at the lowest bandwidth This might mean several different versions of the

Web site are required (what about the cost of updating content?)

Label all navigational aids clearly Test text visibility on smaller monitors

Web Site Usability Cont’dCustomer-centric Web Design Cont’d

Choose colour combinations that would not impair the vision of colour-blind visitors

Test the usability of your site using potential users

Always ensure that enough information has been provided for the customer otherwise they will go elsewhere.

Web Site Usability Cont’dWeb site Response Times 9,10,11

The required response time for hypertext navigation is one second, therefore your Web pages should be no more than 3KB (assuming a 28.8kbps modem which most users have).

The above limitation rules out most graphics

Web Site Usability Cont’dThree Important Response Times The basic advice on response times are:

0.1 seconds for a user to feel that a system is instantaneous

1.0 seconds for the user’s thought to remain uninterrupted

10 seconds for keeping a users attention

Generally, the response time should be as fast as possible

Web Site Usability Cont’dContinuous Feedback When an immediate response is not possible

continuous feedback should be provided Myers11 suggests a percentage completed indicator,

if the operation takes more than 10 seconds, which has three advantages: It assure the user that the system has not crashed It indicates how long the user has to wait It provides the user with something to look at, which

makes the wait less painful (for this reason a graphic progress bar is far better than text)

Web Site Usability Cont’dContinuous Feedback Cont’d When the amount of work to be done by an

operation is unknown a percentage completed indicator might be inappropriate

In this case a number of progress indicators are still available: If an operation has a defined set of steps, these steps

could be displayed as they are started and completed As a last resort progress indicator, such as dots printed

on a status line or a spinning ball could be used – which indicates that the system is working

Web Site Usability Cont’dContinuous Feedback Cont’d For operations that complete within 2 – 10

seconds a percentage done indicator is unnecessary10

Building a Web SiteIn this section you will

learn how to: Create Web pages

using XHTML 1.0


Building a Web Site Cont’d A Web site comprises of a set of Web

pages Each Web page is coded in a markup

language called the Hypertext Markup Language1 (HTML) (often in association with other scripting languages) HTML is the language used for creating

hypertext documents on the World Wide Web (WWW)

Building a Web Site Cont’d HTML is used to format text and

information HTML files are simply text files (with

a .html or .htm extension) that contain a variety of elements called tags Elements (delineated by tags) are used to

markup text (e.g. <B>Bold</B> makes text bold) and browsers are responsible for rendering (displaying) this text

Building a Web Site Cont’d

HTML is platform independent HTML was implemented using the Standard

Generalized Markup Language1,2 (SGML) Several versions of HTML have been created; the

latest are HTML 4.01 and XHTML 2.0 XHTML extends HTML and reformulates it into

XML XML is the Extensible Markup Language which is

also implemented using SGML


The World Wide Web Consortium (W3C) is responsible for maintaining the HTML recommendations W3C can be found at http://www.w3c.org

Building a Web Site Cont’d Standard Generalized Markup Language1,2 or

SGML (http://www.webreference.com/dlab/books/html/3-0.html) Is a business standard for data storage and

interchange Is an international standard for text information

processing Provides distribution, search and retrieval of

electronically stored text Is platform independent

Building a Web Site Cont’d SGML was made to allow:

the structuring of data The formatting of data using a style sheet

The structure of each document was defined in a file called the document type definition (DTD) Separation of presentation and validation

A parser (software capable of analysing document syntax and structure) is subsequently used to validate the document without processing it

Building a Web Site Cont’d Typically a strict XHTML 1.01 document

contains: Elements

The DOCTYPE element One root element, i.e. HTML A HEAD element

May contain the META, SCRIPT and TITLE elements, among others

A BODY element Contains block formatting and character formatting elements

Attributes

Building a Web Site Cont’dElements Elements are delimited by tags, e.g. the

body element which is delimited by the <body> and </body> tags

These elements are simply containers An element contains a string of characters

and nested elements

Building a Web Site Cont’dElements Element names are case sensitive, and must be

specified as lower-case All elements must be closed, e.g.

<b>This is bold</b> Even the <br>, <hr> and <img> tags which did not

have to be closed in earlier versions of HTML E.g. <br></br> or <br />


Elements Some elements can not contain nested

elements, such as line break <br />

Building a Web Site Cont’dElements Elements may be classified into three groups:

Document type Comment Structure

Note that the document type and comment elements are SGML commands, therefore must begin and end with “<!” and “>”, respectively

Building a Web Site Cont’dElements In XHTML 1.0 a document type (DOCTYPE)

element must be specified before any other tag The only exception to this rule is the comment (or

<xml> tags) which may appear before the DOCTYPE element

The DOCTYPE element specifies that the document conforms to SGML and the defined document type definition (DTD)

Building a Web Site Cont’dElements But what is a DTD?1

It is a description of a markup language It is a text document (e.g. html.dtd for the HTML

DTD) that contains formal definitions of all the data elements of a given markup language (e.g. HTML, SGML or XML) Therefore it provides rules for tags and attributes

A document containing elements can then be checked against a DTD to determine if it is valid

Building a Web Site Cont’dElements The DOCTYPE definition that we will use for

our documents is Strict XHTML 1.0: <!DOCTYPE html PUBLIC “-//W3C//DTD

XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Any given XHTML 1.0 document can then be validated using the validator tool at http://validator.w3.org

Building a Web Site Cont’dElements The Comment is also an SGML declaration and is

opened with the characters “<!” and terminated with “>”

The actual Comment element therefore starts with “--” and includes all text up to the next “--” E.g. 

The structural elements are the remaining elements that make up the heart of HTML, e.g. tags such as <b> and <table>


Attributes Attributes are supplied by the HTML author and

allow changes to a characteristic of the element Attributes are placed inside the start tag of an

element and consist of a name/value pair e.g. <img src=“newImage.jpg” alt=“An

image of a dog” /> src and newImage.jpg are the attribute and value,

respectively


Attributes Attribute names are case-sensitive and must

be specified in lower-case All attribute values must be quoted, either

with single or double quotes, e.g. <img src=“smile.jpg” alt=“A smiling icon” /> Or <img src=‘smile.jpg’ alt=‘A smiling icon’ /> Or <img src=‘smile.jpg’ alt=“A smiling icon” />

Building a Web Site Cont’d Tags

Tags specify the start and end of elements Tags are delimited by the symbols “<“ and

“>”, e.g. the bold tag <b> In XHTML 1.0 there is always an opening

and closing tag

Building a Web Site Cont’d Character Sets

ASCII (American Standard Code for Information Interchange) is an 8-bit (1 byte) character encoding based on the English alphabet First published as a standard in 1967

UTF-8 is a variable length character encoding for Unicode and represents a single character in one to four bytes The initial encoding for UTF-8 corresponds with ASCII,

making this character set popular See http://en.wikipedia.org/wiki/UTF-8

Building a Web Site Cont’d Character Sets

The character encoding that will be used in our XHTML 1.0 documents is the UTF-8, which may be defined using the following META element:

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

The META element must be placed within the HEAD element

Building a Simple Web Page Let us begin by building the

simple Web page illustrated on the left. It displays: the message “Welcome

World!” in bold text a list of things that will be

appearing on the Web page An image of the person

who built the page Remember that a Web page is

just a text document with an extension of .html (or .htm) so we can use Microsoft Notepad (or any text editor) to create it

Building a Simple Web Page Cont’d The first line in any HTML document

should be a comment or the DOCTYPE element (or the <xml> tag)

We will use a comment so that the author of the Web site and what it does can be documented

The format of the comment element is illustrated below:

Building a Simple Web Page Cont’dComment Function

Places a comment in an HTML document An XHTML 1.0 Code Example

<!–- This is an example of a comment -->

Things to Note A comment may extend over several lines

Building a Simple Web Page Cont’d The next thing to include is the DOCTYPE

element for Strict XHTML 1.0 Next we include the <html> tag which simply

indicates that this is an HTML document Remember that the <html> tag has a closing tag,

</html> Note the use of the forward slash character “/” rather

than the black slash “\” in the closing tag

Building a Simple Web Page Cont’d All HTML document should have a head element

and body element The opening and closing tags for the head

element are <head> and </head> respectively The head element specifies:

the title of the page, which appears at the top of the browser window

The character set to use Among other things

Building a Simple Web Page Cont’d The format of the title element is simply:

The opening tag <title> The actual title text, in our case “My first page” The closing tag </title>

We can specify the UTF-8 character set using the META element:

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

Building a Simple Web Page Cont’d What needs to be added now is the body element

whose opening and closing tags are <body> and </body>, respectively

Within our body element we will display: The Welcome World! header A list of things that will appear on our site A photograph of the author of the Web page

Let us begin by writing the HTML code for the “Welcome World!” header

Building a Simple Web Page Cont’d XHTML 1.0 allows six headers, <h1>

through <h6> to be used in documents The <h1> header is the largest of these

headers and will be the one that we will use in our simple HTML example The syntax of the <h1> header is described

below

Building a Simple Web Page Cont’dHeaders Function

Define headers An XHTML 1.0 Code Example <h1>Chapter 1</h1> <h2>1. An Introduction</h2> <h3>1.1 Literature Review</h3> Things to Note

Headers <h1> through <h6> exist <h1> is the largest header <h6> is the smallest header One of the parent elements can be the BODY element

Building a Simple Web Page Cont’d The HTML code for our Welcome World!

header will therefore look like this: <h1>Welcome World!</h1>

Building a Simple Web Page Cont’d The next thing we need to do is to include

our list We could have either used an ordered list

(the <ol> tag, a numbered list) or an unordered one (the <ul> tag, a bulleted list) to accomplish this However, the unordered list was chosen

Building a Simple Web Page Cont’d The list items that we want to include on our page

are: The names of my friends The phone numbers of my friends Photographs of my friends

In order to do this, two HTML tags are be required, <ul> and <li>

The syntax of these tags is described below:

Building a Simple Web Page Cont’d

Unordered Lists Function

Creates a bulleted list of items Example HTML code

<ul> <li>This is the first item</li> <li>This is the second item</li></ul>

Things to Note An unlimited number of list items (<li>) may be included

Building a Simple Web Page Cont’d Our list will therefore look like this: <div>The list of things that will

appear on this Web page are:</div>

<ul>

<li>The names of my friends</li>

<li>The phone numbers of my friends</li>

<li>Photographs of my friends</li>

</ul>

Building a Simple Web Page Cont’d Notice that the text that appeared before the list

was placed in <div> tags. The DIV element simply allows us to specify a

division in an XHTML 1.0 document the text could not be placed directly within the

BODY element It had to be embedded within an element that can be a child

of the BODY element, such as the DIV element

The syntax of the DIV element is described below

Building a Simple Web Page Cont’dDivision Function

Specifies a document section/division An XHTML 1.0 Code Example <div>This is a section in a document</div> Things to Note

Unlike the PARAGRAPH element a blank line does not appear immediately after a division

A line break is placed before and after a division in most browsers


Division Things to Note (Cont’d)

A <div> tag may contain <p> tags, and header elements, i.e. <h1> to <h6>

For a list of the parents and children of this tag go to: http://www.zvon.org/xxl/xhtmlReference/Output/index.html

Building a Simple Web Page Cont’d Finally we need to insert the image of the

author Where can we get an image from?

There are a number of ways to get images including: Scanning a photograph using a digital scanner Taking a picture using a digital camera

Building a Simple Web Page Cont’d For Web sites there are two main image formats

(a new format called PNG is also starting to become popular). These are: .GIF (Graphic Interchange Format) images which are

8-bit colour images This means that the image may have up to 28 =256 different

colours

.JPG (short for .JPEG, Joint Photographic Experts Group) which are 24-bit colour images May have up to 224 different colours

Building a Simple Web Page Cont’d Let us assume that we captured our image

using a digital camera and it is called clown.jpg

We now need to use the IMG element to display this image on our Web page


Images Function

Displays an image An XHTML 1.0 code Example

<img src=“photo.jpg” alt=“My picture” />


Images Attributes

Alt – defines a short description of the image Height – specifies the height of the image Width – specifies the width of the image

An HTML Code Example Using These Attributes <img src=“photo.jpg” height=“50”

width=“40” alt=“Photograph” /> Resizes the image to 40x50


Images Things to Note

The alt attribute is required Specifying the height and width of the image helps to

ensure that the layout of the page is not affected even when the image has not yet loaded

This element has several other attributes (see http://www.w3schools.com/tags/tag_img.asp for a complete list)

Building a Simple Web Page Cont’d The following HTML code displays our

image:

<img src=‘clown.jpg’ height = “106” width=“84” />

Note that since our image is actually 84x106 no image resizing is required

Our completed page look like:

Building a Simple Web Page Cont’d<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>My first page</title></head><body> <h1>Welcome World!</h1>

<div>The list of things that will appear on this Web page are:</div> <ul> <li>The names of my friends</li> <li>The phone numbers of my friends</li> <li>Photographs of my friends</li> </ul> <div><img src="images/clown.jpg" alt="A picture of Mr. Clown" height="106" width="84" /></div> </body></html>

Welcome world! header

The lists of thingson my site

The Photo of Mr. Clown

Constructing Web Pages So far we have only constructed a simple Web

page In order to construct a more complicated Web

page we need to learn some more XHTML elements.

In this section we will look at: <b>, <strong>, <i>, <em>, <p>, <pre>, <hr>, <a>,

<table> Also see the following Web sites:

http://www.zvon.org/xxl/xhtmlReference/Output/index.html http://www.w3schools.com/tags/default.asp

Constructing Web Pages (Cont’d)Bold Function

Renders as bold text An XHTML 1.0 Code Example <div><b>This text is bold</b></div> Things to Note

Although this is valid XHTML 1.0 you should really use styles sheets instead Most browsers will render the <strong> tag in bold anyway

The BOLD element is not a child of the BODY element – it is a child of DIV though

Constructing Web Pages (Cont’d)Strong Function

Renders as strong emphasised text An XHTML 1.0 Code Example <div><strong>This is strong text</strong></div> Things to Note

Most browsers will render the <strong> tag in bold The STRONG element is not a child of the BODY

element – it is a child of DIV though

Constructing Web Pages (Cont’d)Italics Function

Renders as italics text An XHTML 1.0 Code Example <div><i>This text is in italics</i></div> Things to Note

Although this is valid XHTML 1.0 you should really use styles sheets instead Most browsers will render the <em> tag (emphasise) in italics

anyway The ITALICS element is not a child of the BODY element – it

is a child of DIV though

Constructing Web Pages (Cont’d)Emphasise Function

Emphasises text An XHTML 1.0 Code Example <div><em>This text is emphasised</em></div> Things to Note

Most browsers will render this tag as italics The EMPHASISE element is not a child of the

BODY element – it is a child of DIV though

Constructing Web Pages (Cont’d)Paragraph Function

Specifies a paragraph An XHTML 1.0 Code Example <p>This is a paragraph</p> Things to Note

This element is separated from other elements by a vertical break

Constructing Web Pages (Cont’d)PreFormat Function

Specifies pre-formatted text

An XHTML 1.0 Code Example

<pre>This text is on the first line

This text is on the second line

and, this text is on the third line

</pre>

Constructing Web Pages (Cont’d)

PreFormat Things to Note

Line breaks and spaces embedded in text with <pre> tags are normally preserved

A fixed pitch font is normally used Is a child of the <body> tag


Horizontal Rule Function

Inserts a horizontal rule/line An XHTML 1.0 Code Example

<hr /> Things to Note

This tag must be closed

Constructing Web Pages (Cont’d)Anchor Tag Function

Defines an anchor; creates a bookmark within a document or a hyperlink to another document

An XHTML 1.0 Code Example <a id=“section1”>Section 1</a> … <a href=“#section1”>Link to Section 1</a> <a href=“http://www.google.com”>Go to

Google</a>

Constructing Web Pages (Cont’d)Tables Function

Creates a table An XHTML Code Example

<table border =“1” cellspacing=“0” cellpadding =“0”> <tr>

<td>row 1, col 1</td> <td>row 1, col 2</td> </tr> <tr> <td>row 2, col 1</td> <td>row 2, col 2</td> </tr></table>

Constructing Web Pages (Cont’d)Tables Things to note

Tables may be nested The table element is a child of the body element

Optional attributes for the <table> tag Cellspacing – specifies the spacing in pixels between

adjacent cells Cellpading – specifies the spacing in pixels between

the contents of a cell and the cell border

Constructing Web Pages (Cont’d)Tables Optional attributes for the <table> tag

(Cont’d) Width – sets the width of the table

The width of a cell may be expressed as a number of pixels or a % of the screen’s width

Border – specifies the size of the border in pixels, a value of 0 means that there is no border

Constructing Web Pages (Cont’d)Tables Attributes for the <td> tag

Rowspan – allows cells in adjacent rows to be merged

Colspan – allows cells in adjacent columns to be merged

Valign – sets the vertical alignment of the cell Align – sets the horizontal alignment of the

cell contents

Constructing Web Pages (Cont’d) Since tables are so important (they are

widely used on the Web today) it is important to get a good grasp of them

We will achieve this through an extensive set of examples

Constructing Web Pages (Cont’d) In our first example a simple table without a

border is created Notice how we use indentation in the XHTML

code to make it easier to distinguish between the rows and the columns

On our screenshot the code is in the left window, while the rendered XHTML is in the right window Note some elements, e.g. DOCTYPE have been

removed in order to simplify the code

In our next example, we use the border attribute of the <table> tag to give the table a border


In our next example we increase the number of pixels between the contents of the cell and the cell border

This is achieved using the cellpadding attribute of the <table> tag


In our next example we increase the number of pixels between adjacent cells

This is achieved using the cellspacing attribute of the <table> tag


Sometimes we want a cell in a table to span more than one cell

This is achieved through the colspan attribute which merges adjacent horizontal cells

The value of this attribute is set to the number of cells that need to be merged

See the example


We can set the horizontal alignment of the contents of a cell through the use of the align attribute as shown in our next illustration


Not only can we merge cells horizontal, we can also do it vertically

This can be seen in our next example Notice the use of the rowspan attribute

In addition this example demonstrates how vertical align is achieved through the use of the valign attribute


If you need to change the height or width of a cell you should use cascading style sheets

An interesting side-effect occurs when a given cell is left blank the given cell will not have a border

To solve this problem simply add a non-breaking space (i.e. )


Special Characters In HTML special characters, called

character entities, are represented in two possible ways: &code; &#number;

A list of some of the popular special characters have been presented below


A cascading style sheet (CSS) allows the size and style of fonts to be set for elements within an HTML document

By defining styles in a single location (i.e. a style sheet) any changes that need to be made to the style subsequently is easily achieved

Cascading Style Sheets Cont’d

Two versions of cascading style sheets are maintained by W3 (http://www.w3.org): CSS1 (http://www.w3.org/TR/CSS1) CSS2 (http://www.w3.org/TR/CSS2) CSS3 is still in a draft form (

http://www.w3.org/TR/css3-roadmap/)

Internet Explorer now supports CSS2 See http://www.w3.org/Style/CSS/ to determine the

browsers that are supported


The CSS1 specification includes font, border, background, margin, link and list styles

These styles can be embedded in a page or in an external style sheet

The style can be applied to a single or group of tags


Cascading Style Sheets Cont’d “CSS2 supports media-specific style sheets so

that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. This specification also supports content positioning, downloadable fonts, table layout, features for internationalization, automatic counters and numbering, and some properties related to user interface. “ (http://www.w3.org/TR/REC-CSS2/)

Embedded Style Sheets The tags required for embedded style sheets

are <style> … </style> To ensure that the style sheet loads before the

page’s body it is included in the <head> … </head> tags

The STYLE element also requires a TYPE attribute of “text/css”


Embedded Style Sheets Example

<style type=“text/css”>

#blue { color : blue}

</style>


External Style Sheets The tag required for external style sheets is

<link /> To ensure that the style sheet loads before the

page’s body it is included in the <head> … </head> tags

The LINK element also requires a TYPE attribute of “text/css”


External Style Sheets Example

<link type=“text/css” rel=“stylesheet” href=“style.css” />

And in a file called style.css the following is defined:

#blue { color : blue}


The CSS1 specification has several properties including the background and color properties These set the background and text colours,

respectively, for a number of HTML tags including <body>, <table>, <tr>, <td>, <th>, <h1>, <p> and <pre>


The value associated with the background and color properties are: A recognised colour name e.g. blue A set of hexadecimal numbers in the format

#RRGGBB, e.g. #0000FF for blue, or A set of decimal number in the format rgb

(0…255, 0…255, 0…255), e.g. rgb(0,0,255) for blue


There are three ways that a given style may be associated with an HTML element (or group of elements): Using generic styles

ID Class

Using tag specific styles When creating new XHTML document the Class

style should only be used for backwards compatibility


The format of the generic ID style is:

#Name1 {property1 : value1; … propertyn : valuen}

And is used by an element, e.g. the Header element in the following way:

<h1 id=“Name1”>Header</h1>


The format of the generic Class style is:

.Name2 {property1 : value1; … propertyn : valuen}

And is used by an element, e.g. the Header element in the following way:

<h1 class=“Name2”>Header</h1>


The format of tag specific styles is:

tagname {property1 : value1; … propertyn : valuen}

For example p {color : blue} which sets the text in all paragraphs to blue


Let us look at a simple example. In this example two styles are created

one using the CLASS attribute that creates a 14pt, red Serif font with a yellow background style and

the other using the ID attribute that creates a 10pt green Arial font with a white background style

And a style is also associated with the division element The style sets the text colour to blue


<html><head><style type="text/css"></style></head><body><div>Election results <h1 id="newsHeading">Poll Results are in!</h1> <h1 class="ComicTitle">Poll Results are in!</h1></div></body></html>

Cascading Style Sheets Cont’d Note that it is recommended that you use

external rather that embedded style sheets

References[1] Darnell, Rick, et al., “HTML4: Unleased”, Sams.net Publishing, First Edition, 1997

[2] Zhao, Jensen J., “Web design and development for e-business”, Prentice Hall, 2003

[3] INetU, “Load Balancing”, 2004. Online document available at www.inetu.net/services/loadbalancing.php

[4] Burrell, Carolyn, Hingley, Chris, “Evaluating Business Web Sites”, 2002. Online document available at http://avconline.avc.edu/library/Distance_Ed/Business/eval_business_web_sites.htm

[5] Nielsen, Jakob, “Flash: 99% Bad”, Alertbox, Oct. 2000. Online document available at http://www.useit.com/alertbox/20001029.html

[6] Schneider, Gary, P., “Electronic Commerce: The second wave”, Thomson Course Technology, Fifth Annual Edition, 2004

[7] W3C, “HyperText Markup Language (HTML) Home Page”, 2004. Online document available at http://www.w3c.org/MarkUp/

[8] Deitel, H., Deitel, P., Nieto, Frank, L., Lin, Ted, M., Sadhu, Praveen, “XML: How to Program”, Prentice-Hall Inc., 2001

References[9] Jakob Nielsen, “Why this site has almost no graphics”, 2005. Online document available at

http://www.useit.com/about/nographics.html

[10] Jakob Nielsen, “Response Times: The Three Important Limits”, 1994. Online document available at http://www.useit.com/papers/responsetime.html

[11] Myers, B. A., “The importance of percent-done progress indicators for computer-human interfaces.”, Proc. ACM CHI'85 Conf. (San Francisco, CA, 14-18 April), 1985, 11-17

Electronic Commerce COMP3210 Session 3: Designing, Building and Evaluating e-Commerce Initiatives...

Documents

Transcript of Electronic Commerce COMP3210 Session 3: Designing, Building and Evaluating e-Commerce Initiatives...