Download
introduction to media for web based research n.
Skip this Video
Loading SlideShow in 5 Seconds..
Introduction to Media for Web-based Research PowerPoint Presentation
Download Presentation
Introduction to Media for Web-based Research

Introduction to Media for Web-based Research

315 Vues Download Presentation
Télécharger la présentation

Introduction to Media for Web-based Research

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Introduction to Media for Web-based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008

  2. Outline • Background • Graphics and Images • Video • Color and Lighting

  3. The General Beast CRT LCD (Flat Panel)

  4. Background • Screen formats are changing • Original: 4 x 3 (Width is 4 to Height's 3) • New (driven by HDTV) is 16 x 9

  5. Screen Formats

  6. Screen Formats

  7. Graphics vs. Images • Some definitions: mine for clarity here: • Graphics Def: computer generated or drawn by you. • Image: scanned, captured, take photograph or an graphic file not generated by you. • Difference: • In a graphic, you can directly manipulate the elements because you drew them – Sprites • In an image, you can manipulate pixels but not directly the elements. This has a great impact.

  8. Images or Graphics on the Screen • Pixels: smallest picture element • Pixels are not screen dots!!! • Several dots (at least three, one of each color) make up each pixel) • Bitmat: An array of information that contains the information for the image. • It is a 3 dimensional array • Width x Height x 24 (8 for each color) • So can be huge • (.bmp and .tif or .tiff are most common bitmaps)

  9. Graphic and Image Formats • Bitmap (bmp, PCT, Tiff) – big, not good for web • Graphic Interchange Format (Gif) can animate • 8 bits of color – palette or lookup table or LUT – no loss of spatial information • Can be some legal issues – make sure the generator legally can generate GIF’s • Generally best compression for simple graphics – bad for photos • Can generate transparent regions • Can Animate

  10. Graphics and Image Formats • JPG • Generally better for images and photos • Spatial not color compression, can distort image spatially and more loss with each save • Now can animate as well.

  11. Bitmapped vs. JPEG File Sizes Both images are the same relative size. 900kb .JPEG High Quality ~700kb

  12. ImageJ • Free at: http://rsb.info.nih.gov/ij/index.html • Overview • Java program • Interface a bit awkward because it is free • Expandable via plug-ins • Covers all basic editing and many advanced - very advanced • Scientific quality image editor • Used in many technical applications • Plugins!

  13. Gimp • Freeware photo editor that rivals Photoshop • Works with Layers, allows reediting • Download: http://gimp-win.sourceforge.net/stable.html

  14. Dynamic Media • Slideshows • Why • Presenting Using Redirects • Video • Background • Delivering in a Webpage

  15. Why Slideshows • Example 1; Example 2 • Indicate sequence of events • Carries sense of change • Sense of momentum in photo • Original Loftus Eye Witness testimony was done this way • How? • One easy way – use redirects

  16. Code for redirect <html> <head> <title>Image Sequence</title> <META HTTP-EQUIV="refresh" CONTENT="3; URL=page01.html"> • Number is number of seconds before redirect </head> <body> <p> This will change in 3 seconds, about</p> <p align = "center"> <img border="0" src="Bobby0000.jpg" width="512" height="384"></p> </body> </html>

  17. Video • YouTube has changed internet video • Flash video (FLV) has become the default standard. • Example 1; Example 2

  18. Flash Video • The format has evolved over time • It is getting better and files are getting smaller • Moving to an open source compression • But later videos formats have less reach • Create and Edit with Adobe Flash (http://www.adobe.com/products/flash/)

  19. Motion Reproduction • Frame rates of monitors far exceed what is needed for movement update • NTSC video: 30 updates per second • Movies: 24 updates per second • Most web video 10 to 15 but can be up to 30 frames/sec (and variable)

  20. Computer Video • Effect of update rate 10 fps 15 fps 24 fps Probably not enough for speech and subtle facialexpressions.

  21. Flicker • Critical threshold of flicker rates is about 60 Hz in the fovea • But gets higher for larger stimuli • Recommended flicker rates between 66 Hz and 120 Hz (Bridgeman, 1998) • Most monitors are adequate in this value • Notice difference between flicker and frame update rate. • Wagon wheel effect.

  22. Pixel Duration • Pixels are not on continuously during a frame • In part this is necessary for clean motion • Typical CRT phosphors last about 4 msec. (Bridgeman, 1998) • On LCD and other technologies, persistence is longer • Makes motion less clean but flicker less noticeable

  23. Differences in Persistence Fast motion will be less clean on an LCD screen

  24. Questions to Ask Yourself • Is video the only way to do this study? • How does lighting interact with the stimulus? • How do the variations in the human visual system interact with the stimulus? • If the video is interrupted how is the video degraded? • Does the increase in sample generality offset the loss of control?

  25. General Video Issues • Image size • Keep it small • 320 x 240 is not uncommon • Image color depth • Normally full color • Video Length • The shorter the better • People may not stay • Network more likely to cause problems

  26. Techniques • Option 1 • Buy Adobe Flash • Option 2 • Use .AVI, .MOV, .WMV, and .MPG format, whichever is convenient, and upload to YouTube or other service • Use other format and editors • Note reduced reach and, thus, loss of participants

  27. Editing: with QuickTime Pro • Inexpensive addition QuickTime Player • Basics • Opens MOV, mpg, avi, mp3, etc. • Get Movie Information on Movie Menu (ctrl-j in Windows) • Tracks: separate slices of information: played at same time as other tracks • Look under the Edit menu

  28. How to deliver Progressive Download Streaming Only stream is sent, it is never whole file Better for longer Also for security • Will play when enough has been downloaded • Okay for small • Or not large number of videos

  29. Saving for Web • Format: • You must compress • Uncompressed files will be very large • Lead very slow download • Recent algorithm • Duration • For same reason, keep videos short

  30. Chromatic Issues The Trichromatic Theory Color Opponent Theory Color Picker The Color Gamut Glare Color Blindness

  31. The CIE Color System • A set of Equations that allow predictions of matching. • Used in photo printing, TV and film. • Wyszecki & Stiles(1967) • The Color Gamut • The range of colors reproducible by any system

  32. The Effect of Illuminance on Gamut In Dark With Lights on With Lights on and 30% Luminance Level

  33. Illuminance: Example: Dark CRT LCD

  34. Illuminance: Direct Room Light CRT LCD

  35. One Color Study

  36. Another Color Study Laugwitz, 2001

  37. Illuminance • Agostini & Bruno (1996) • Accuracy of the perceived stimulus is affected by the amount of illuminance. • D. F. Neri (1990) • Combination of light and gamut changed chromaticity • Request close windows and turn off unnecessary light • Do not use subtle color differences

  38. Color Blindness Description

  39. Color Blindness

  40. Color Blindness

  41. Color Blindness

  42. How to handle • Screening questions? • Large sample and random assignment • Pre-test on color blind