HCI 201 Week 9

1. HCI 201 Week 9 Forms Sound Animation

2. Agenda • Forms • Review • Using CGI • OnSubmit • OnReset • Sound • When to use it • Editing • Embedding • Animation • Animated Gifs

3. 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.

4. 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.

5. 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.

6. 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

7. 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-bin • Security 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

8. 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/

9. 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.

10. 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 tags • Parent.location means a link (sets up basic format for linking to another page). • The thanksalot.html would be the page being linked to.

11. 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….>

12. onReset • Is also a JavaScript event handler • Can be used in the same way as OnSubmit • to redirect a user to another page • to popup an announcement • Or whatever you determine

13. 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?

14. 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

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

16. 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

17. 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 desktops • This means researching the technology your target audience is using. • Research can be done by purchasing the statistics, finding free statistics, or collecting your own.

18. 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

19. 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.

20. Compatibility • Different Browsers: • Netscape, IE • Different Media Players: • RealPlayer, WindowsMedia, Quicktime • Optimize for target audience • Your target audience will usually determine what is used.

21. 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.

22. Animated Gifs • As you may recall, a GIF is an image file format. • You can animate them • This 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

23. 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

24. 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

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

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

29. 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.

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

31. Once you have chosen your images click next

32. 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!

33. Assignments • Assignment 7 • Final Project • Presenting for Extra Credit