Hci 201 week 9 l.jpg
Advertisement
This presentation is the property of its rightful owner.
1 / 33

HCI 201 Week 9 PowerPoint PPT Presentation

HCI 201 Week 9 Forms Sound Animation 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

Download Presentation

HCI 201 Week 9

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Hci 201 week 9 l.jpg

HCI 201 Week 9

Forms

Sound

Animation


Agenda l.jpg

Agenda

  • Forms

    • Review

    • Using CGI

    • OnSubmit

    • OnReset

  • Sound

    • When to use it

    • Editing

    • Embedding

  • Animation

    • Animated Gifs


Form review l.jpg

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 review4 l.jpg

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.


Slide5 l.jpg

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.


Slide6 l.jpg

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 l.jpg

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


Form hosting services l.jpg

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 l.jpg

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 l.jpg

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.


Onsubmit l.jpg

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 l.jpg

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


Sound l.jpg

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?


Sound14 l.jpg

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


Slide15 l.jpg

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.


Sound16 l.jpg

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 l.jpg

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.


Sample rate l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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


Animated gifs23 l.jpg

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 gifs24 l.jpg

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


Slide27 l.jpg

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


Slide28 l.jpg

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


Slide29 l.jpg

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.


Slide30 l.jpg

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


Slide31 l.jpg

Once you have chosen your images click next


Slide32 l.jpg

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 l.jpg

Assignments

  • Assignment 7

  • Final Project

  • Presenting for Extra Credit


  • Login