Introduction to media for web based research
1 / 43

Introduction to Media for Web-based Research - PowerPoint PPT Presentation

  • Updated On :

Introduction to Media for Web-based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008 Outline Background Graphics and Images Video Color and Lighting The General Beast CRT LCD (Flat Panel) Background Screen formats are changing

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Introduction to Media for Web-based Research' - lotus

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
Introduction to media for web based research l.jpg

Introduction to Media for Web-based Research

John H. Krantz

Hanover College

Workshop on Web Research

Centre for Affective Sciences, May 2008

Outline l.jpg

  • Background

  • Graphics and Images

  • Video

  • Color and Lighting

The general beast l.jpg
The General Beast


LCD (Flat Panel)

Background l.jpg

  • Screen formats are changing

    • Original: 4 x 3 (Width is 4 to Height's 3)

    • New (driven by HDTV) is 16 x 9

Graphics vs images l.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.

Images or graphics on the screen l.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)

Graphic and image formats l.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

Graphics and image formats l.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.

Bitmapped vs jpeg file sizes l.jpg
Bitmapped vs. JPEG File Sizes

Both images are the same relative size.


.JPEG High Quality ~700kb

Imagej l.jpg

  • Free at:

  • 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!

Slide14 l.jpg

  • Freeware photo editor that rivals Photoshop

  • Works with Layers, allows reediting

  • Download:

Dynamic media l.jpg
Dynamic Media

  • Slideshows

    • Why

    • Presenting Using Redirects

  • Video

    • Background

    • Delivering in a Webpage

Why slideshows l.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

Code for redirect l.jpg
Code for redirect



<title>Image Sequence</title>

<META HTTP-EQUIV="refresh" CONTENT="3; URL=page01.html">

  • Number is number of seconds before redirect




    This will change in 3 seconds, about</p>

    <p align = "center">

    <img border="0" src="Bobby0000.jpg" width="512" height="384"></p>



Video l.jpg

  • YouTube has changed internet video

  • Flash video (FLV) has become the default standard.

  • Example 1; Example 2

Flash video l.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 (

Motion reproduction l.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)

Computer video l.jpg
Computer Video

  • Effect of update rate

    10 fps 15 fps 24 fps

Probably not enough for speech and subtle facialexpressions.

Flicker l.jpg

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

Pixel duration l.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

Differences in persistence l.jpg
Differences in Persistence

Fast motion will be less clean on an LCD screen

Questions to ask yourself l.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?

General video issues l.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

Techniques l.jpg

  • 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

Editing with quicktime pro l.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

How to deliver l.jpg
How to deliver

Progressive Download


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

Saving for web l.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

Chromatic issues l.jpg

Chromatic Issues

The Trichromatic Theory

Color Opponent Theory

Color Picker

The Color Gamut


Color Blindness

The cie color system l.jpg
The CIE Color System

  • A set of Equations that

    allow predictions of


  • Used in photo printing,

    TV and film.

  • Wyszecki & Stiles(1967)

  • The Color Gamut

    • The range of colors reproducible by any system

The effect of illuminance on gamut l.jpg
The Effect of Illuminance on Gamut

In Dark

With Lights on

With Lights on

and 30%



Another color study l.jpg
Another Color Study

Laugwitz, 2001

Illuminance l.jpg

  • 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

Color blindness l.jpg
Color Blindness


How to handle l.jpg
How to handle

  • Screening questions?

  • Large sample and random assignment

  • Pre-test on color blind