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 800x x x768 Color Depth 16-bit 8-bit

Technical Testing - Bandwidth Connection speeds 8 seconds! Test at slowest speed for maximum effect MethodBandwidth 50K Download Time 56K Modem56K7.1 ISDN128K3.1 DSL K1.6 Cable Modem 521K0.8 LAN1MB+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.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 …

Interactive I/O with Text Boxes Data elements: Can be named Can be pre-filled (e.g. have a default value) Have a size

Interactive I/O with Text Boxes 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

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 Ch10-Ex-03 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 hierarchy myHouse livingRmdiningRm kitchen bedRoom 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)Ch10-Ex-07

More Parameters Actual vs. formal parameters function printGreeting(s_form) { … } … printGreeting(document.surferData) … 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”

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