HCI 201 Week 9

FormsSoundAnimation

Agenda

Forms– Review– Using CGI– OnSubmit– OnReset

Sound– When to use it– Editing– Embedding

Animation– Animated Gifs

Form Review

Remember that forms have 2 components– The interface-what the user sees and interacts with– The transmittal-how the data is processed after it leaves your site.

2 basic methods, email and CGI.<FORM METHOD=POST

ACTION="http://www.awebserver.com/cgi-bin/update"> Controls and other HTML tags here </FORM>

All form elements need to be inside the form tags. Do not place the closing </FORM> tag until after the reset and submit buttons.

Form Review

<FORM METHOD=POST ACTION="http://www.awebserver.com/cgi-bin/update"> ...Controls and other HTML tags here </FORM>

The ACTION attribute gives the URL of the script or application that is to receive and process data from the form.The METHOD attribute specifies how the browser sends the form's data to the server for processing. The METHOD attribute has values of GET or POST.GET - transfers data in one step. It appends the data to the URL (specified in the ACTION attribute) separated by a ?. POST - transfers data in two steps. It first contacts the server, then sends the data. You can send more data and take advantage of encryption when sending data.

CGI

A script that processes the information in a form is called a CGI script. CGI stands for (Common Gateway Interface). If you are using a CGI script, it pulls apart the information and formats it in a way that other applications, such as a database can understand. Your form will tell the server where your CGI script is located with the ACTION attribute. Most people who wish to use CGI scripts to process form information do not code CGI scripts from scratch.

CGI

CGI scripts can be obtained for free from the web.

Often developers will locate one and one of modify it/them to meet their needs.

Here are some sites that offer free CGI resources:

Matt's Script Archive

The CGI Resource Index

Freescripts.com

Script Search

CGI & ISPs

Many ISPs do not allow their clients to run CGIs on their accounts- poorly created CGIs are a security hazard which could allow attacks on a site or even an ISP.If the ISP does allow CGI, there will be a specific repository for the scripts often known as CGI-binSecurity must be changed so that your users can access the CGI script(s). The administrators of Shrike do not allow CGI scripts.Hawk does allow CGI

Form Hosting Services

You can also use a form hosting service. These companies provide a variety of services including processing your form input and returning it to you via email. For example, Response-O-Matic provides that kind of service. http://www.response-o-matic.com/

onClick onSubmit onReset

They are JavaScript event handlers. which require very little work to see an effect.It causes something (that you defined) to occur when the submit button is pressed.They can be used to inform the user that their input is appreciated, their info is on its way, their order is being sent to the grand poo bah- whatever.

onClick

For instance you can send a user to another page to thank them for their time and effort, to give them further instruction etc…

<FORM><INPUT TYPE="submit" onClick="parent.location='thanksalot.html'";></FORM>The new code needs to be within the form tagsParent.location means a link (sets up basic format for linking to another page).– The thanksalot.html would be the page being linked to.

onSubmit

Can also be used to create a popup window with a message which is displayed after the user hits the submit button

<form method=POST action=…onSubmit="alert('Thanks for filling out the form')”Can put other pieces/scripts if so desired….>

onReset

Is also a JavaScript event handlerCan be used in the same way as OnSubmit – to redirect a user to another page– to popup an announcement– Or whatever you determine

Sound

You must consider “why” your using it since: – sound takes up space on the server – Not everyone has sound capabilities on their system– Sound can be REALLY annoying

Therefore determine ahead of time:– Does it add something to the site– Is it related to a product you are selling?– Is it to add sparkle to your site?

Sound

As with video, sound is a streaming technology and therefore can be played on the same products mentioned last week– Real Player– Windows Media Player– Quicktime

MP3- is the file format of choice for sound

MP3

Very High QualityPlug-ins available for all browsers and media players available.With proper hardware, can be played onto a stereo or portable device.

Sound

As with all larger files (images, animations, video, sound) you want to be considerate of your users and their bandwidth access.In order to conserve bandwidth you can compress sound files.– Bit Depth– Sample rate– Mono/Stereo– Compatibility

Bit Depth

Different sizes:– 8-bit (decent quality)– 12-bit (near cd-quality)– 16-bit (cd quality, roughly)– 24-bit (cd+ quality)

Optimize to what is probably on your target audience’s desktopsThis means researching the technology your target audience is using. Research can be done by purchasing the statistics, finding free statistics, or collecting your own.

Sample Rate

Different rates:– 8,000 (speech)– 12,000 (low quality music)– 16,000 (high quality music)– 22,000 (cd quality)– 44,000 (digital quality)

Optimize for compression. You almost never need super high quality on a Web site

Mono/Stereo

Different levels:– Mono (everything in one channel)– Stereo (bi-aural, and surround)

Optimize for compression or effect, but remember stereo increases file size.Optimize for content– This is almost like for images; you always want to

make sure that what is in the sound is recognizable.

Compatibility

Different Browsers:– Netscape, IE

Different Media Players:– RealPlayer, WindowsMedia, Quicktime

Optimize for target audience– Your target audience will usually determine what is

used.

Embedding Sound

IE has extensions (<bgsound> tag for background sound, but not available in Netscape, see book)The actual tag for this is <embed> with the src= attribute (along w/others)Coding -You can make it stream right away– You can add controls or not– basically, anything you want to do, you can with attributes like

href, pluginspage, width, and height.

Animated Gifs

As you may recall, a GIF is an image file format.You can animate themThis happens because you code so that one image will be placed after another in the same visual location by the browser.Your eye perceives these images as animated.In order to create animated Gifs you must have a Gif compiler and an image editor.There are many available for free at Tucows and download.com– I chose the coffee cup gif animator which has a 15 day free

evaluation period

Animated Gifs

Using your image editing program make the images you will animate. Create a template and alter it to fit the needs of each image. You can reuse the template and save it as a new version with each alteration you make.– All images must be saved as GIF format– All images must be the same size– All images should be saved at the 256 color level– Make the gifs as small as you can– Make the gifs with the smallest number of bits as you can

Animated Gifs

After you have made the series of images you wish to animate you move into the image compiler you have chosen.Each compiler works differently- read the help files to get acquainted with yours but each will ask you to – assign a frame rate (typically in 100ths of a second)

• The longer you choose the slower the animation effect– Give the name of the images to be used– Determine the amount of times to show the collection of images

(continuous is looping)– It should allow you to view the animation- do so– Save the animation as a single gif file

After choosing new select custom sizes and enter the height and width of the image. Then click next

Determine where you want the animated gif, in the center of the page or in the upper left. Then click next

Select the looping of the animation- that is how many times to play the animation. Also select the speed in 100ths of a second. Play around with this and see what you like best. 15 is a good place to start.

Insert images by selecting the add images- it will then create an “Open” dialog box.

Once you have chosen your images click next

And then finish, Choose to view your animation and make changes as necessary. Save it as a single gif file with a name and location you will remember!

Assignments

Assignment 7Final ProjectPresenting for Extra Credit