Web-based Application Development Lecture 21 April 6, 2006 Anita Raja.
Web-based Application Development Lecture 14 February 23, 2006 Anita Raja.
-
date post
22-Dec-2015 -
Category
Documents
-
view
212 -
download
0
Transcript of Web-based Application Development Lecture 14 February 23, 2006 Anita Raja.
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
What should you look for? Fonts Colors Filename problems between Macs and PCs IE and NN run differently on different platforms
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
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.
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 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 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]”>