Web-based Application Development Lecture 14 February 23, 2006 Anita Raja.

Web-based Application Development

Lecture 14

February 23, 2006

Anita Raja

The Web Wizard’s Guide to Web Design

Chapter 8

Testing and Posting the Site

Technical Testing

What should you test? Browser Platform Display Bandwidth Plug-in

Technical Testing – Browser

98% of users: Internet Explorer Netscape Navigator

2% use something else What does your target audience use? Sites don’t have to be identical – they

just have to work properly

Technical Testing - Browser

What should you look for? How is text displayed? How do the images align with each other

and with text? Are tables/frames arranged properly? Are sound, video, and animation handled

properly?

Technical Testing - Platform

Type: PC Laptop Other?

OS Windows Macintosh UNIX Linux

Technical Testing - Platform

What should you look for? Fonts Colors Filename problems between Macs and PCs IE and NN run differently on different platforms

Technical Testing - Display

Pixel Setting 800x600 640x480 1024x768

Color Depth 16-bit 8-bit

Technical Testing - Bandwidth

Connection speeds

8 seconds! Test at slowest speed for maximum effect

Method Bandwidth50K Download

Time

56K Modem 56K 7.1

ISDN 128K 3.1

DSL 128-512K 1.6

Cable Modem

521K 0.8

LAN 1MB+ 0.4

Technical Testing - Bandwidth

How to fix problems? Reduce number of images Compress images

Reduces visual quality but downloads faster Use thumbnails

Use text for navigation instead of images or graphics

Technical Testing – Plug-ins Two problems:

Not all users will have all the plug-ins needed Not all users will be comfortable installing plug-

ins Provide users with

Which plug-ins are needed Where they can be obtained How to install them How to configure for your site’s use

User Testing

Let users access your site Under what circumstances?

Casual surfer or business critical? Home or office? (or somewhere else?) New user or long-term relationship? Novice or experienced user?

User Testing

Collect their reactions Direct observation Indirect observation Ask for their feedback directly

Survey Questionnaire

Posting the Site

Making the Connection

Register your site Hosted on someone else’s server under

their domain name Register your own domain name (still has

to be hosted on someone else’s server) Benefits

Available to search engines

Assignment Create a check list that someone could use to

quickly evaluate a site based on the criteria discussed in Chapter 8.

Include enough of the material in Chapter 8 so the checklist covers the most significant topics.

Use this checklist to evaluate the site you selected on day one.

Turn in the site evaluation, a screen shot of the site, and a blank checklist.

Programming the Web using XHTML and JavaScript

Chapter 10

Forms & Interactivity

Interactive I/O with Text Boxes To acquire data from users:

Methods (alert, confirm, prompt) Forms (text, check, radio, etc.)

More about forms Can be identified id (or name) attribute)

Interactive I/O with Text Boxes

<form id=“surferData” name=“surferData”>

…

</form>

Interactive I/O with Text Boxes Data elements:

Can be named

<input type=“text” name=“nameBox” …> Can be pre-filled (e.g. have a default value)

<input … value=“Please enter your name” …> Have a size

<input … size=“30” …>

Interactive I/O with Text Boxes<form id=“surferData” name=“surferData”> <input type=“text” name=“nameBox” value=“Please enter

your name” size=“30” /> <br/> <input type=“text” name=“ageBox” value=“Please enter

your age” size=“20” /></form>

Ch10-Ex-01

Interactive I/O with Text Boxes A form is an object

Child of the document object A form’s children are

Its fields Its length (i.e., the number of fields)

The main property of each field is its value

WindowObject

LocationObject

DocumentObject

HistoryObject

Interactive I/O with Text Boxes Refer to field values using dot notation

Can use as a parameter

alert(document.surferData.nameBox.value)

Ch10-Ex-02

document .surferData.nameBox.value

Interactive I/O with Text Boxes Two problems with the input element:

It does not include any actions like “wait for the user”

It isn’t limited to just input; it can be used for output as well

If you want to wait for the user to enter data before using the object you have to write some code

Ch10-Ex-03 and Ch10-Ex-03a

More Parameters Can refer to a form element in a

function Ch10-Ex-04 Can pass a value to a function as a

parameter Ch10-Ex-05

More Parameters Parameters must conform to the object

hierarchymyHouse

livingRm diningRm

kitchenbedRoom

closet box

Get the box that’s in the closet that’s in the bedRoom that’s in myHouse

myHouse.bedRoom.closet.box

More Parameters Can pass an object, not its value, as a

parameter Ch10-Ex-06

More Parameters Can pass part of an object, as a parameter Ch10-Ex-07

More Parameters Pass both the input object (nameBox) and

the output object (outputBox) as parameters Ch10-Ex-08

More Parameters Try passing both values:

onclick=“printGreeting(

document.surferData.nameBox.value,

document.SurferData.outputBox.value )” Ch10-Ex-09 Why doesn’t this work?

More Parameters When passing “things” as parameters:

JavaScript passes real objects (in effect) but copies of properties

Thus, changes made to a property inside the function are made to the copy, not the original

More Parameters Pass by copy

JavaScript copies the item and sends the copy to the function

Pass by address JavaScript tells the function where to find the item

to be used as a parameter

More Parameters We’ve passed parts of a form as

parameters text objects (nameBox, outputBox) value property of an object

Can pass the form object itself:

onclick=“printGreeting(document.surferData)” (Ch10-Ex-07)

More Parameters Actual vs. formal parameters<head>

<script …>

function printGreeting(s_form) { … }

</script>

</head>

<body>

…

printGreeting(document.surferData)

…

</body>

Actual parameter

Formal parameter

Focus, Blur, and Change Focus event occurs when user

Selects a text field or Tabs into one Handled with an onfocus event handler

Blur event occurs when user Leaves the text field Handled with an onblur event handler

Focus, Blur, and Change Change event occurs when user

Leaves the text field and The value of the text field has changed Handled with an onchange event handler

How can we use these event handlers? Ch10-Ex-10

Submitting Form Information Encoding type:

<form method=“post”

enctype=“text/plain”

action=“mailto:[email protected]”>

Assignment Debugging Exercise, p. 295 Correct errors Post corrected document to your Web

space as “Lagerstrom-Ch-10.html” Grade based on:

Appearance Technical correctness of code