![Page 1: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/1.jpg)
Introduction to Media for Web-based Research
John H. KrantzHanover College
Workshop on Web ResearchCentre for Affective Sciences, May 2008
![Page 2: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/2.jpg)
Outline
• Background• Graphics and Images• Video• Color and Lighting
![Page 3: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/3.jpg)
The General Beast
CRT LCD (Flat Panel)
![Page 4: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/4.jpg)
Background
• Screen formats are changing– Original: 4 x 3 (Width is 4 to Height's 3)
– New (driven by HDTV) is 16 x 9
![Page 5: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/5.jpg)
Screen Formats
![Page 6: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/6.jpg)
Screen Formats
![Page 7: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/7.jpg)
![Page 8: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/8.jpg)
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.
![Page 9: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/9.jpg)
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)
![Page 10: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/10.jpg)
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
![Page 11: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/11.jpg)
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.
![Page 12: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/12.jpg)
Bitmapped vs. JPEG File SizesBoth images are the same relative size.
900kb
.JPEG High Quality ~700kb
![Page 13: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/13.jpg)
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!
![Page 14: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/14.jpg)
Gimp
• Freeware photo editor that rivals Photoshop• Works with Layers, allows reediting
• Download: http://gimp-win.sourceforge.net/stable.html
![Page 15: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/15.jpg)
Dynamic Media
• Slideshows– Why– Presenting Using Redirects
• Video– Background– Delivering in a Webpage
![Page 16: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/16.jpg)
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
![Page 17: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/17.jpg)
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>
![Page 18: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/18.jpg)
Video
• YouTube has changed internet video• Flash video (FLV) has become the default
standard.• Example 1; Example 2
![Page 19: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/19.jpg)
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/)
![Page 20: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/20.jpg)
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)
![Page 21: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/21.jpg)
Computer Video
• Effect of update rate
10 fps 15 fps 24 fps
Probably not enough for speech and subtle facialexpressions.
![Page 22: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/22.jpg)
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.
![Page 23: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/23.jpg)
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
![Page 24: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/24.jpg)
Differences in Persistence
Fast motion will be less clean on an LCD screen
![Page 25: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/25.jpg)
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?
![Page 26: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/26.jpg)
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
![Page 27: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/27.jpg)
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
![Page 28: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/28.jpg)
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
![Page 29: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/29.jpg)
How to deliver
Progressive Download• Will play when enough has
been downloaded• Okay for small • Or not large number of
videos
Streaming• Only stream is sent, it is
never whole file• Better for longer• Also for security
![Page 30: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/30.jpg)
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
![Page 31: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/31.jpg)
Chromatic Issues
The Trichromatic TheoryColor Opponent Theory
Color PickerThe Color Gamut
GlareColor Blindness
![Page 32: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/32.jpg)
The CIE Color System
– A set of Equations that allow predictions ofmatching.
– Used in photo printing,TV and film.
– Wyszecki & Stiles(1967)
– The Color Gamut• The range of colors
reproducible by any system
![Page 33: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/33.jpg)
The Effect of Illuminance on Gamut
In DarkWith Lights onWith Lights on and 30% Luminance Level
![Page 34: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/34.jpg)
Illuminance: Example: Dark
CRT LCD
![Page 35: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/35.jpg)
Illuminance: Direct Room Light
CRT LCD
![Page 36: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/36.jpg)
One Color Study
0.00
20.00
40.00
60.00
80.00
100.00
120.00
140.00
160.00
180.00
200.00
Green
Sea Gre
enAqua
Light B
lue
Med
ium
Blue Blue
Dark
Blue
Periwink
le
Purple
Pinky
Purpl
ePink
Fuschia
Hot P
ink Red
Red O
range
Orange
Yellow O
rang
e
Yellow
Bright Y
ellow
Yellow G
reen
Bright G
reen
Color
Pe
rce
ive
d C
olo
r T
em
p
![Page 37: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/37.jpg)
Another Color Study
Laugwitz, 2001
![Page 38: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/38.jpg)
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
![Page 39: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/39.jpg)
Color BlindnessDescription
![Page 40: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/40.jpg)
Color Blindness
![Page 41: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/41.jpg)
Color Blindness
![Page 42: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/42.jpg)
Color Blindness
![Page 43: Introduction to Media for Web- based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d375503460f94a1078f/html5/thumbnails/43.jpg)
How to handle
• Screening questions?• Large sample and random assignment• Pre-test on color blind