Multimedia Programming Techniques for Teachers

1
Multimedia Programming Techniques for Teachers

• Curriculum Designer Vincent Ng
• Total 24 hours
• Session 4/8

2
Objectives/Aims

• Perl exercises
• Web page designs
• Multimedia in Web pages

3
Agenda

• CGI with PerlScript Exercises
• Lab session/break
• Web page designs
• Video and sound in web pages

4
Continue the Exercise

• Writing a simple CGI to do an online quiz?
• Locate the script
• /cstyng/cgi-bin/ic/quiz.html
• Modify the questions and answers as in
  /cstyng/ait-e/lab1/newquiz.html

5
A Second Exercise

• Meta search engine
• Locate the script
• /cstyng/cgi-bin/ic/meta.cgi
• You can run the program with the same file also
• Modify the CGI program
• Add another search engine
• www.yahoo.com.hk
• Always include the keyword education in your
  search

6
Screen Size

• Is 640 x 480 a standard?
• Mac 580 x 315, PC 635 x 314
• No scroll at homepage at all
• www.useit.com/alertbox/9605.html
• Most people select options above the scroll line

7
Text for the Web

• People do not read web pages in the same way as
  they do a book.
• Emphasize the important up front.
• Focus on the links.
• Shorten the text.
• Format text effectively.
• Remove transitional rhetoric.

8
Text for the Web

• Use Blocks of sans serif text
• Avoid overstimulus.
• Break content into chunks.
• Change the tone.
• Beware of web cliches.
• Add meta-information.

9
Graphics and Color for the Web

• Reduce the size of the graphics or at least not
  bandwidth intensive.
• Keep illustration simple and have short and
  simple text descriptions if not self-explanatory.
• Rechunk a chart if it is too big.
• Provide a sentence between table and text and
  avoid scrolling when viewing a table.

10
Graphics and Color for the Web

• Remember, the more whitespace, the stronger the
  message.
• Choose a color scheme that makes reading text
  easy.

11
Graphics and Color for the Web

• Have a significant lightness difference between
  the information (text) and the background.
• Choose a neutral background color, like white,
  black, or gray if a lot of different-colored text
  is used.

12
Flash Animation

• Flash is not a standard but very popular
• Flash plug-in
• 200 millions downloaded from Macromedia
• Why not GIFs and DHTML?
• Vector based ? easier to scale and render
• Smaller file size ? download faster

13
Flash Interactivity

• Animation a mouse click away
• Database connectivity
• Editable form fields

14
When not to use Flash

• Informational vs entertaining
• Difficult to update
• Multimedia flash
• Bandwidth requirement
• Alternative when no flash plug-in
• Plug-in compatibility and browser support

15
Layering

• Develop multiple layers
• Flash animation can crash the whole system
• E.g. Transparent gradient that is looping and
  moving
• Separate loading
• Multiple movies for easier updates

16
Cognitive Design

• Brain capacity is limited, we need to help out
  users to get the whole picture of our Web pages
  quickly.
• Understand users' needs
• Make users happy
• Foreground, middleground, background

17
Foreground, Middleground, Background
18
(No Transcript)
19
Cognitive Design

• Foreground, middleground, background
• Limit the number of items in the foreground.
• Use blinking text in the foreground only when
  there is no conflict with other content.
• Use only one motion item per page where text is
  the primary communication method.
• Place descriptive text before memory-intensive
  graphics.

20
Cognitive Design

• Foreground, middleground, background
• Pause animation to allow reader to read the text.
• Marques must scroll in the direction of the
  language they are written in. English scrolls
  left to right, top to bottom.
• Use middleground to support foreground.
• Use small, colored graphics to show the
  organization of your site.

21
Cognitive Design

• Foreground, middleground, background
• Be prepared for different cultural
  interpretations.
• Group text into meaningful blocks to call
  attention to them quickly.
• Use nouns and verbs to focus on concrete action.
• Simple background to provide stability and
  strength.
• Use background graphics for branding.

22
Form Design

• HTML forms allow bi-directional interactivity on
  the Web.
• Always put the Submit button at the bottom or at
  the beginning of all information.
• Size the input field to reflect the expected size
  of the information.
• Keep input fields on the screen wide.

23
Form Design

• Put the input field comments in the same place
  for all data items. Do not mix right and left.
• Group related fields together.
• Limit user choices.

24
(No Transcript)
25
Sound and Video in Web

• Adding Background Sound
• Adding video via IMG
• Adding video via EMBED
• Media Player ActiveX Control

26
Adding Background Sound

• BGSOUND tag
• Microsoft Developer Network
• Loop
• Number of times or -1
• Balance
• Right and left speakers
• Volume
• Loudness, -10000 to 0

27
BGSOUND
ltBGSOUND ID "audio" SRC "jazzgos.mid" LOOP
"1"gtlt/BGSOUNDgt ltSCRIPT LANGUAGE
"JavaScript"gt function changeProperties()
var loop parseInt( audioForm.loopit.value )
audio.loop ( isNaN( loop ) ? 1 loop )
var vol parseInt(
audioForm.vol.value ) audio.volume (
isNaN( vol ) ? 0 vol ) lt/SCRIPTgt
ltFORM NAME "audioForm"gtltPgt Loop -1
loop forever ltINPUT NAME "loopit" TYPE
"text" VALUE "1"gtltBRgt Volume -10000
(low) to 0 (high) ltINPUT NAME "vol"
TYPE "text" VALUE "0"gtltBRgt ltINPUT TYPE
"button" VALUE "Set Properties"
ONCLICK "changeProperties()"gt lt/Pgtlt/FORMgt
28
Adding video via IMG

• Use the DYNSRC property
• Indicates the image is in fact a video clip
• ltIMG DYNSRC"pathfinder.mpeg" START"mouseover"
• WIDTH"180" HEIGHT"135" LOOP"-1"
• ALT"A spinning image of the Earth"gt

29
Adding video via EMBED

• User with more control
• A GUI is associated
• ltEMBED SRChumming.wav looptruegt
• ltEMBED SRChumming.mpeg looptruegt

30
Media Player ActiveX Control

• Wide access of different multimedia formats
• OBJECT element
• ltOBJECT ID"VideoPlayer" WIDTH200 HEIGHT225
• CLASSID"CLSID22d6f312-b0f6-11d0-94ab-0080c
  74c7e95"gt
• ltPARAM NAME"FileName" VALUE"pathfinder.mpe
  g"gt
• ltPARAM NAME"AutoStart" VALUE"true"gt
• ltPARAM NAME"ShowControls" VALUE"false"gt
• ltPARAM NAME"Loop" VALUE"true"gt
• lt/OBJECTgt

31
Practice Activities 1

• Tryout
• the Background Sound Example
• the IMG example
• the Embedded example
• the Media player
• Can you write an ASP script to play two video
  files alternatively when you invoke the page?

32
What you should know

• More Perl practices
• Mixing Multimedia in webpages

33
Feedback/Debrief

• Will you use Perl for your school?
• What sort of problems you encounter if multimedia
  is to be embedded in web pages?