web technology fundamentals comp 1130 cs14k l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Web Technology Fundamentals COMP 1130 (CS14K) PowerPoint Presentation
Download Presentation
Web Technology Fundamentals COMP 1130 (CS14K)

Loading in 2 Seconds...

play fullscreen
1 / 77

Web Technology Fundamentals COMP 1130 (CS14K) - PowerPoint PPT Presentation


  • 259 Views
  • Uploaded on

Web Technology Fundamentals COMP 1130 (CS14K) Session 5: Building A Web Site Part III Dr. Paul Walcott Department of Computer Science, Mathematics and Physics University of the West Indies, Cave Hill Campus Barbados Created 17/02/05. Updated 21/02/06 © 2005/2006 Dr. Paul Walcott

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Web Technology Fundamentals COMP 1130 (CS14K)' - jacob


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
web technology fundamentals comp 1130 cs14k

Web Technology FundamentalsCOMP1130 (CS14K)

Session 5: Building A Web Site Part III

Dr. Paul Walcott

Department of Computer Science, Mathematics and PhysicsUniversity of the West Indies, Cave Hill CampusBarbados

Created 17/02/05. Updated 21/02/06

© 2005/2006 Dr. Paul Walcott

session objectives
Session Objectives
  • After completing this session you will be able to:
    • Comprehend Web site usability issues
    • Evaluate the design of Web sites using five design principles
    • Test a Web site for correctness
    • Use additional HTML tags to create Web sites
web site usability 3
Web Site Usability3
  • In this section we will examine
    • Web visitors expectations
    • Customer centric Web site design
    • Web site response times
web visitor s expectations
Web Visitor’s Expectations
  • Early Web sites simply provided information and often did not include e-mail addresses
    • Due to staffing levels no response might have been received from an email query anyway
  • So what does a Visitor expect when entering a Web site? What is their motivation?
web visitor s expectations cont d
Web Visitor’s Expectations 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 visitor s expectations cont d6
Web Visitor’s Expectations Cont’d
  • As a result 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
  • Through the use of announcements of upcoming content the visitor should be encouraged to return
  • Every visitor to a Web site is a potential customer
    • Note however that it is difficult to meet the needs of all of your visitors
web visitor s expectations cont d7
Web Visitor’s Expectations Cont’d
  • 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 visitor s expectations cont d8
Web Visitor’s Expectations Cont’d
  • A well designed Web site will therefore provide:
    • A separate version with and without frames
    • A Text-only versions (for visually impaired people who use special browser software)
    • A way for the user to download smaller versions of graphics
    • A way for the user to select the connection type (so that adjustments may be made for bandwidth) when using Web pages with audio or video clips
web visitor s expectations cont d9
Web Visitor’s Expectations Cont’d
  • A way of allowing the users to select the level of detail, viewing format and download format
  • Multiple information formats (e.g. HTML, PDF or Excel spreadsheet for financial data)
web visitor s expectations cont d10
Web Visitor’s Expectations Cont’d
  • 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

customer centric design
Customer-Centric Design
  • The goal of e-commerce site is to convert as many visitors to customers, as quickly as possible
  • After the visitor becomes a customer the goal is to retain them, i.e. make them a repeat customer
  • To achieve this Web sites need to be customer-centric, providing personalisation for the given customer
  • If enough information is not provided it is likely that they will go elsewhere
customer centric design cont d
Customer-Centric Design Cont’d
  • To meet the needs of the customer consider the following guidelines:
    • 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
customer centric design cont d13
Customer-Centric 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
  • Choose colour combinations that would not impair the vision of colour-blind visitors
  • Test the usability of your site using potential users
web site response times
Web site Response Times
  • One of the major threat to repeat visits is the response time of your Web site
  • 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)5
  • The above limitation rules out most graphics
web site response times cont d
Web site Response Times Cont’d
  • The basic advice on response times are6:
    • 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 response times cont d16
Web site Response Times Cont’d
  • When an immediate response is not possible continuous feedback should be provided
  • Myers7 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 response times cont d17
Web site Response Times 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 goes through 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 response times cont d18
Web site Response Times Cont’d
  • For operations that complete within 2 – 10 seconds a percentage done indicator is unnecessary6
web site design principles 1 8
Web Site Design Principles1,8
  • In this section we will:
    • Briefly discuss interface design
    • Present five Web site design principles

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

web site design principles cont d
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 d21
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
web site design principles cont d22
Web Site Design Principles Cont’d
  • So what makes a good Web interface Cont’d?
    • 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 d23
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 d24
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 d25
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 d26
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 d27
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 d28
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 d29
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 d30
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 d31
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 d32
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 d33
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 d34
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 d35
Web Site Design Principles Cont’d
  • As a general rule:
    • Photographs should use the JPEG format
      • JPEG (Joint Photographic Expert Group image format) is a 24-bit (16.7 million colours) image format
    • A JPEG picture 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 d36
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 d37
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 d38
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 d39
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 d40
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
    • 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
software validation verification 2
Software Validation/Verification2
  • What is the difference between validation and verification?
  • Identify test requirements
  • Develop test cases
  • Execute tests
  • Record test results
identify test requirements
Identify Test Requirements
  • Software validation is the process of ensuring that the developed software is the software the customer really wanted
  • This is achieved through constant communication with the customer, verifying requirements and user acceptance testing
  • User acceptance testing is when the software is tested by the user; and error or issues are highlighted by them
identify test requirements cont d
Identify Test Requirements Cont’d
  • Software verification is the process of ensuring that the developed software does what the specifications say that it should do
  • This is achieved through:
    • unit testing
    • system test
    • integration testing
identify test requirements cont d44
Identify Test Requirements Cont’d
  • In both software validation and verification test requirements and test cases are identified
  • The identification of test requirements is fundamental to the testing process
  • Test requirements specify what must be tested
identify test requirements cont d45
Identify Test Requirements Cont’d
  • Some test requirements for our worked example are:
    • Ensure that all clickable links take the user to the correct page
    • Ensure that the pages look the same in the following browsers
      • Microsoft Internet Explorer
      • Netscape Navigator
identify test requirements cont d46
Identify Test Requirements Cont’d
    • Ensure that the detailed news items are summarised properly on the home page (a content issue)
    • Ensure that all Web pages are valid HTML 4.0 Transitional
  • What are other possible test requirements for our example?
develop test cases
Develop Test Cases
  • Tests cases describe the way to execute a test and its expected result
  • Tests case are made up of:
    • a pre-condition
    • a test
    • a post-condition
  • Test cases are tied to test requirements and are based on the software specifications
develop test cases cont d
Develop Test Cases Cont’d
  • The pre-condition describes the state that the system must be in before a test
  • A test describes the steps the tester must go through to execute the test
  • The post-condition describes the state of the system after the test is executed
develop test cases cont d49
Develop Test Cases Cont’d
  • A test case is said to have passed, if after executing the test case the documented post-condition is the resulting state of the system after the test
  • Otherwise the test has failed.
test case examples
Test Case Examples
  • Pre-condition:
    • The user is at the home page of the COMP1130 course Web site
  • Test
    • Click on the Contact link
  • Post-condition
    • The contact page is displayed
test case examples cont d
Test Case Examples Cont’d
  • Pre-condition:
    • The user is at the home page of the COMP1130 course Web site
  • Test
    • Click on the Schedule link
  • Post-condition
    • The Schedule page is displayed
test case examples cont d52
Test Case Examples Cont’d
  • Pre-condition:
    • The user is at the Contact page of the COMP1130 course Web site
  • Test
    • Click on the Home link
  • Post-condition
    • The user returns to the home page
test case examples cont d53
Test Case Examples Cont’d
  • Pre-condition:
    • The user is at the Schedule page of the COMP1130 course Web site
  • Test
    • Click on the Home link
  • Post-condition
    • The user returns to the home page
recording test results
Recording Test Results
  • It is important to record test results since they:
    • Serve as a record of what tests have been run
    • Serve as a record of those test that have passed and failed
    • Allow the replication of software errors
validator
Validator
  • Run the validator on the Web site as part of test and fix the issues
  • When the run the validator against the Home Page template you get three errors:
    • Line 33 –remove HEIGHT and VALIGN attributes
    • Line 25 remove VALIGN attribute
    • These are not supported in HTML 4.0 Transitional
software evolution
Software Evolution
  • As the needs of the client changes so must the software
  • Software evolution may either be bug fixing (fixing errors) or software enhancement (adding new features)
software evolution57
Software Evolution
  • After the new requirements have been identified each of the software development steps (specification, development, validation) must be repeated
additional html elements cont d
Additional HTML Elements Cont’d
  • There are several other HTML elements that have not been discussed during our look at the language
  • Some of these elements are presentational in nature so should probably not be used, in order to avoid compatibility issues with later HTML versions, e.g. XHTML 2.0
additional html elements cont d59
Additional HTML Elements Cont’d
  • For completeness however the following additional elements shall be described:
    • Horizontal rule
    • Big
    • Small
    • Blink
    • Strike
    • Teletype
additional html elements cont d60
Additional HTML Elements Cont’d
  • Superscript
  • Subscript
  • Citation
  • Code
  • Variable
  • Blockquote
additional html elements cont d61
Additional HTML Elements Cont’d

Horizontal Rule Element

  • Function
    • Creates a horizontal line
  • An HTML Code Example

<hr>

  • Attributes
    • NOSHADE – This creates a solid line
    • WIDTH – specifies the length of the line as a percentage of browser’s width or number of pixels
    • ALIGN – may take values “LEFT, “CENTER”, “RIGHT”, “JUSTIFY”
      • Note that “JUSTIFY” only works on some browsers
additional html elements cont d62
Additional HTML Elements Cont’d

Horizontal Rule Element

    • SIZE – specifies the line thickness in pixels – note the default is 2 pixels
  • See an example
additional html elements cont d63
Additional HTML Elements Cont’d

Big Element

  • Function
    • Displays the text in a larger than standard font
  • An HTML Code Example
    • This text is <big>big</big>
  • See an example
additional html elements cont d64
Additional HTML Elements Cont’d

Small Element

  • Function
    • Displays the text in a smaller than standard font
  • An HTML Code Example
    • This text is <big>smaller</big>
  • See an example
additional html elements cont d65
Additional HTML Elements Cont’d

Blink Element

  • Function
    • Blinks on and off the enclosed text
  • An HTML Code Example
    • <blink>Blink this text</blink>
  • Things To Note
    • This works in Netscape Navigator not Internet Explorer
  • See an example
additional html elements cont d66
Additional HTML Elements Cont’d

Strike Element

  • Function
    • Strikes out the enclosed text
  • An HTML Code Example
    • <strike>Please do not strike me out</strike>
  • See an example
additional html elements cont d67
Additional HTML Elements Cont’d

TeleType Element

  • Function
    • Displays text in a style reminiscent of old teletype machines
  • An HTML Code Example
    • <TT>Look at this text</TT>
  • Things to Note
    • A mono-spaced font is often used by browsers for this element
  • See an example
additional html elements cont d68
Additional HTML Elements Cont’d

Superscript Element

  • Function
    • Changes text to superscript
  • An HTML Code Example
    • <sup>This text is in superscript</sup>
  • See an example
additional html elements cont d69
Additional HTML Elements Cont’d

Subscript Element

  • Function
    • Changes text to subscript
  • An HTML Code Example
    • <sub>This text is in subscript</sub>
  • See an example
additional html elements cont d70
Additional HTML Elements Cont’d

Citation Element

  • Function
    • Specifies that the enclosed text is a citation
  • An HTML Code Example
    • <cite>This is a citation</cite>
  • Things to Note
    • Many browsers display this in italics
  • See an example
additional html elements cont d71
Additional HTML Elements Cont’d

Code Element

  • Function
    • To display source code
  • An HTML Code Example
    • <code>printf(“%d”, 10);</code>
  • Things to Note
    • By convention code is displayed in a mono-spaced font
  • See an example
additional html elements cont d72
Additional HTML Elements Cont’d

Variable Element

  • Function
    • Specifies a mathematical expression or computer program
  • An HTML Code Example
    • <var>y</var>=<var>x</var><sup>2</sup>+1
  • Things to Note
    • Many browsers display this in italics
  • See an example
additional html elements cont d73
Additional HTML Elements Cont’d

BlockQuote Element

  • Function
    • Provides for quotations beyond three or four lines of text
  • An HTML Code Example
    • <blockquote>And as part of the discussion…. This was the result…. And everyone…. Wondered why use this….</blockquote>
  • Things to Note
    • A blank line is placed before the quotation and the quote is indented
  • See an example
conclusions
Conclusions
  • Over the last three sessions a full worked example was presented
  • This example showed how to build a course Web site from the ground up
  • The requirements of this site were first described
  • Followed by the design of each of its pages
    • The design of the Web site followed certain principles
conclusions cont d
Conclusions Cont’d
  • The Web page designs were then coded in HTML
  • And testing was performed on the Web site
  • When building commercial strength Web sites there are many other issues that must be taken into consideration, including the number of potential visitors to the site and the performance of the Web site
conclusions cont d76
Conclusions Cont’d
  • In the second half of this course we will be looking at dynamic Web pages through the JavaScript language
  • In addition we will be taking a look at how data is stored and retrieved in XML
  • As well as how server-side software is written
  • Finally, we examine the issue of security
references
References

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

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

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

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

[5] Jakob Nielsen, “Why this site has almost no graphics”, 2005. Online document available at http://www.useit.com/about/nographics.html

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

[7] 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

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