Transcript Lecture Three

Lecture 07
Developing E-Business Sites
Lecture Overview
• Multimedia
• HW and SW requirement
• Designing Multimedia
• Text
• Font
• Sound
• Digital music, MIDI, and MP3
Multimedia
• What is multimedia?
• Combinations of text, graphic art, sound,
animation, and video element
• Where to use multimedia?
• Business
• presentation, training, marketing, advertising, product
demo, databases, catalogues, and networked
communication
• Education, Home, and Public place
Requirements
• Hardware
• Speed of CPU, amount of memory (RAM), large
disk, zip disk, CD & DVD Drives, high resolution
monitors, sound cards, microphone, speakers,
video capture, compression and television, digital
cameras, scanners
• Software
• Text editing tools, painting and drawing tools,
animation tools, video tools, multimedia
authoring (icon-based and time-based tools)
Text in Multimedia
• Display purposes
• Concise text messages on the computer screen
• Keep it simple
• Focus on key idea
• Highlighting Techniques
•
•
•
•
Font style
Font size
Color
Special Effects
Choosing Font
• Serif, San Serif, and Script
• Serif and San serif are easier to read than
script font
• Serif is mostly used in body copy
• Times New Roman: Serif family
• San-serif font is better looking and works well
in titles or shorter text
• Arial: San-serif family
Serif vs. San Serif
• Serif
• San Serif
Small serif font
Small san-serif font
Large serif font
Large san-serif font
Contrast
• Use contrasting color and text weight
effectively
Good
White on Black Black on White Black on Yellow
Bad
Black on Gray
Blue on Black
• Avoid textured backgrounds
Purple on Red
Other considerations
• Weight: Bold and Italics
• to highlight ideas or concepts
• Surround headlines with plenty of white space
• Limit the number to TWO fonts
• Use consistent link colors
Make Intelligent Use of Images
• Not practical: file size
• Not desirable
• Search engines would never index the site
What does sound should do?
• Synchronize with another activity
• Text
• Video
• Graphic
• Interact users with sound
Critical Parameters
• Sampling rate
• The quality of a sound file can be increased by
increasing the sample rate
• Bits per Sample
• 8 bit or 16bit
• Number of Channels
• Mono vs. stereo
Digital Audio
• Digitize sound from various sources
• Microphone, music CD, etc.
• Every nth fraction of a second, a sample of
sound is taken and stored as digital
information in bits and bytes
• Waveform Sound (.wav)
• 8, 11, 22, 44 KHz
• Bits: 8 (256), 16 (65,236)
Quality
Quality
Frequency
Bits
Kb/Seconds
Poor
8 KHz
8
8
Telephone
11 KHz
8
11
Radio
22 KHz
8
22
Music CD
44 KHz
16
86
File Size
Monophonic Sound file size =
Sample rate * duration of recording in seconds
* Bit per sample * 1
Stereo Sound file size =
Sample rate * duration of recording in seconds
* Bit per sample * 2
MIDI
• Instruction method
• Use instruction that store information
• Instruction tells the sound card to recreate the
original music
• Much more compact that digital audio
• Load much more quickly on the Web
• Quality of MIDI
• Sound card
MP3
• Moving Picture Experts Group, Audio Layer
III
• A compressed digital music format
• Compression ratio (10:1)
• Freely available for anyone to develop a
decoder and player
MP3: Compression Ratio
• Audio Compression Technique
Quality
BitRate
Reduction
Telephone
8 kbps
96:1
FM Radio
56 kbps
24:1
Near CD
96 kbps
16:1
CD
112 kbps
14:1
Real Audio
• Traditional method:
• Sound file must be transferred before application
begin to play
• Real audio
• the Web browser opens up a connection to the site
• Save time
• the sound is transmitted over the Internet immediately
(stream of data)
• depends on the speed of network connection
Four stages of adding sound
• Capturing
• determine quality (telephone, radio, or CD)
• Editing
• Time and effect: CoolEdit2000
• Processing
• Most popular digital audio format: Waveform
• Other format: MIDI and MP3
• Publishing
• Traditional method or streaming method
Color Basics
• Color Depth
• The amount of data used to create color
• 8 bit data in each of 3 color: 24 bit color depth
• Dolor Dithering
• Color mixing
• Occur when screen (browser) does not support a
color
• Create non-dithering color
Image Formats
• Raster (Bitmapped) File Formats
• Bitmap, GIF, JPEG, PNG, TIFF,
• Vector Graphics
• EPS, PDF, WMF
Bitmap Graphics
• Bitmap consists of smaller colored pixels
• Quality of a bitmap graphics depend on the
size and number of pixels
Bitmap Graphics (continue..)
16 color
256 color
GIF File Format
• Graphics Interchange Format
• “.gif” extension
• The most common format for graphical
information on the Internet
• 8-bit definition-contains 256 colors
• Uses LZW compression method
• Transparent and interlaced
JPEG File Format
• Photographic Experts Group
• “.jpg” or “.jpeg” extension
• Lossy compression method
• Throw away data that is not typically noticed
• The person compressing the file has option of
specifying the degree of loss
JPEG vs. GIF
• JPEG
• Complex color patter
(millions of colors)
• E.g.:Colors blend and
fade into one another
• GIF
• 256 colors
• E.g.: flat color
JPEG & GIF (continue..)
• JPEG
• A greater degree of
compression
• GIF
• Dithering
JPEG & GIF (continue…)
• JPEG
• JPEG display line by
line, leaving empty
space where it hasn’t yet
downloaded.
• GIF
• GIF display first large
blocks appear, then
those blocks resolve into
more detail, and finally
each individual pixel
display
• GIF can be made
transparent
PNG File Format
• Portable Network Graphic format
• “.png” extension
• The best format for Web graphics
• Alpha and gamma channel
• Death of PNG
• Lack of browser compatibility
Optimizing image with GIF
• Color depth and palettes
• Transparency
• Dithering
Non-dithered GIF image
Dithered GIF image
Optimizing image with JPEG
• Relatively simple: choose resolution
Highest quality (large size)
Lowest quality (small size)
Vector Graphics
• Consists of geometric shapes
• Complexity of images determines its size
• Disadvantage
• Not realistic
• No standard format
• Advantage:
• Clear picture when enlarged
• Less disk space
• Displayed maximum resolution
2-D and 3-D Graphics
• 2-D graphics
• Raster or vector graphics
• 3-D graphics
• Height, width, and depth
• More complex solid modeling
• The fourth dimension
• Another dimension- “time”
Creating Image
• Bit Map (Painting)
• Each pixel is assigned a color
• Use drawing tools, brushes, color palette
• Microsoft Paint & Adobe Photoshop
• Use regular camera and scanner
• Use digital camera
• Other capturing tools
• Screen shot
• Snap shot
Editing Graphic Images
• Sofware
• Paint:Windows painting program
• Lview *:Freeware, views and convert many
formats
• Paintshop:Freeware, converts formats
• PrintScreen 95:Freeware, Screen capture
• CorelDRAW 6: Leading drawing package
• Adobe Photoshop: Leading painting package
Scanning and Manipulation
• Determine resolution
• as high as possible
• 72 dpi is better to capture more information
• Choose compression
• JPEG
• GIF
Color Scanners - Quality
• Color balance - neutral colors in neutral form
(black & white in color scan)
• Color accuracy - captured color should match
original
• HP PrecisionScan Pro - for scanning
• OCR - Optical character recognition
Color Scanners - OCR
• Printed text is converted into a machinereadable form
• Saves initial scanned document as a graphic
file
• Breaks down into individual lines
• Breaks the lines into individual charaters
• Confused character; “cl” and “d”
Digital Camera I
• Sensor
• The heart of digital cameras
• Resolution
• The number of pixels in a picture
• VGA (Video Graphic Array) and XGA (Extended
Graphics Array)
• Optics
• Lens and focus
Digital Camera II
• Exposure: shutter
• Compression
• Default file type: JPEG or TIFF
• Storage Card
• Compact Flash card, standard floppy disk,
memory stick, micro drive etc.
• LCD (Liquid Crystal Display)
• Preview and review
Digital Camera III
• Connectivity
• USB, TV video-out, Serial port
• Batteries
• Single use-AAA, Rechargeable AA, proprietary
batteries
• Miscellaneous
• Flash, special functions
Animation
• Technologies for creating animation
•
•
•
•
Animated GIF
DHTML
JAVA Applets
Director/Shockwave/Flash
Animated GIF
• Create a series of images to be viewed one
right after another
• Use something like GIFF construction set and
load and sequence each image
• Set up the timing and loop
• Example - Tudogs
• http://tudogs.com/anim.html
Animated GIF
• Simple but effective way to create small
animations
• Design the animation and determine its place
• Create the individual frames
• Import the individual frames into GIF
animation and create the single file
Animating GIF Image
• Design
• Analyze the moving contents into the image
• Determine which parts need to be redrawn in
every frame and which can remain constant
• Consideration
•
•
•
•
What is the visual topic?
What is the subject?
What is the purpose?
How long does this action go on?
Shockwave vs. Flash
• Two major plug-ins
• Original Purpose
• Director: CD-ROMs  web-centric (later version),
bitmap-centric
• Flash: web-oriented solution, vector-centric
•
•
•
•
Development Environments
Delivery and Interactivity
Pricing Matter
Future
Principles for Animation
•
•
•
•
•
•
Supplies
Theme/Story/Point
Plan
Download size and rendering speed
Audience
The right medium for your message
Digital Video
• Consists of a series of digital image
• Good Video(TV) require displaying 30 new
pictures per second with simultaneously
playing audio
• Desirable video: full screen video
• full screen
• 30 frames per second without loss any frame
Technical concerns
• Frame rate
• how fast, how smooth
• number of photographs per second that the video clip
displays
• typical motion picture: 24 fps
• Image size (Spatial Resolution)
• number of pixels in each frame
• related to file size
• Audio synchronization
• Compressions
Video Formats
• NTSC - used in United States
• 30 fps
• Stereo at 22 MHz
• PAL - Western Europe, South America
• 25 fps
• SECAM - Eastern Europe
• 25 fps
• HDTV - High definition TV
• 30 fps
Video Connections
• Composite Video
• VCR and TV
• S-Video
• 5-Pin DIN plug (Cameras)
• Deliver high quality video
• RGB
• 15 pin (Computer Monitors)
• Deliver 3 main colors over 3 separate cables
Video File Formats
• Quick Time for
Windows (.mov) format
• Created for Mac first
• 15 frames per second
• Optimal size is 160 by
120 pixels
• Users 16 bit color
• Supports Cinepak
compression
• Video for Windows
(.avi) format
•
•
•
•
Microsoft’s format
Most common format
15 frames per second
Optimal size is 320 by
240 pixels
• Supports several
compression techniques
Video Encoding
• Encoding Criteria
• What video format, frame rate, Window size, and
streaming method?
• Editing criteria
• What format I want to use?
• What is my deliver mechanism?
Compression
• Compression technique
•
•
•
•
Real time
Symmetric
Compression ratio
Lossy/Lossless compression
• Lossless: no more than 3:1
• Lossy: remove image information that is unlikely to be
noticed by the viewer
• Inter-frame
Compression Algorithms
• Compression algorithms - CODECS
(COder/DECoder)
• Decrease file size
• More efficient at playback
• File size increases as quality increases
CODEC Compression Scheme
• Temporal compression scheme
• Looks for information that is not necessary for
continuity by comparing the first frame with the
next frame
• Keeps information that does change
• Spatial compression scheme
• Looks for redundant information
• Deletes information that is common to the entire
file
CODECs Categories
• International standards
• Motion JPEG
• H.261
• MPEG Series
• Proprietary codecs
•
•
•
•
RLE
Indeo
Video 1
Cinepak
Motion JPEG & H.261
• Motion JPEG (MJPEG)
• A sequence of JPEG
images
• Each frame compressed
separately
• Synchronization
problem with higher
compression
• H.261
• Designed for video
conferencing and video
telephony via an ISDN
network
• Spread over LANs and
Internet
MPEG-1
• Standard for storage and retrieval of video and audio
• Deliver VHS quality video: 1.5MBPS
• Use 2 different frames
• I frame(complete picture): Intracode frame that is
independent of all other frame
• P-frame(change in picture): Predict s a future
frame based upon a previous I or P frame
• 30 Frames per second
• Audio 16 bit stereo at 44.1 kHz
MPEG-2
• Standard for digital television
• Used in Video-on-demand, satellite TV, and
DVD
• Bit rate: 15MBPS
• Support I, P, and B frame
• B-frame: Bi-directional predicted frame
MPEG-4
•
•
•
•
•
Standard for multimedia applications
Compression: up to 300:1
Compresses pixels in a continuous stream
2-D, 3-D, Audio, Text and Video
Virtual Reality Modeling Language
MPEG-7
• Standardized description of various types of
multimedia information
• Called “Multimedia Content Description Interface”
• Solution for search
• leads search quickly and efficiently
• Applications
• Digital libraries (image catalog, musical library)
• Multimedia directory service (yellow page)
• Broadcast media selection (radio/TV channel)
How MPEG Compression Works
I
B
B
P
B
B
I
Proprietary CODECs
• Microsoft RLE (Run Length Encoding)
• Compression algorithm
• Video 1
• Developed by Microsoft and Media Vision
• a poor quality
• file size small and run on older hardware
Proprietary CODECs
• Indeo Video
• developed by Intel
• 320x240 at 15fps
• 160x120 at 30fps
• Cinepak
• developed by SuperMac
• offer good compression
• require time for compression
Comparisons
Format
Advantages
Disadvantages
• low frame rate
• Inexpensive compression
• Frame rates are slow
• Quality cannot improved
• Better color resolution than Indio
• same problems as Indeo
• has same advantages as Indeo
• requires apple platform for
encoding
MPEG-1
• high resolution and frame
• CD quality audio
• may require extra HW
• High cost encoding
MPEG-2
• The highest resolution and frame
rate
• Large storage requirements
• Very high cost encoding
Intel Indio
Cinepak
Quick Time
System Requirements
• Video recording systems
• VCR, video camera
• Video capture systems
• built-in capture capability
• video capture card
• Video editing system
• software package: Adobe Premiere
• Video storage
• High speed connection
• High performance CPU
Graphic Board
• DMA (Direct Memory Access)
• Possible to handle the massive data streams
generated by digital video
• Matrox Marvel G400 TV
• External connection
• Incorporates not only the audio and video
connectors, but also the TV tuner and the sound
chip
Streaming Video
• Progressive streaming
• Download a compressed video file to your hard
drive via HTTP over the Internet
• Use standard web server
• Quality is better than real-time streaming
• Real-time streaming
• Don’t need to download the entire video before
playing
• Require a special streaming server
Outlines: Web Design
Introduction
Interface Design
Site Design
Page Design
Principles for design
• Know your message
• Decide topic sentence
• Draw the viewer's eyes to a particular place in
the image
• Keep it simple
• Keep balance
• Pay attention to your image’s composition
Web Performance
•
•
•
•
Less Size is more speed
Keep it simple
Reduce extra pixels by cropping the image
Use popular compression method
• JPEG or GIF file
• Recommendation: Use thumbnails
Pre-Process
What are your goal?
Know your audience
Web surfers
Novice and occasional user
Computer screen is not the printed page
Craft the look and feel
Make your design portable
Different web browser, OS, and computer platform
Designing low bandwidth
Interface Design
GUI
Comprises the interaction metaphors, images and concepts
Web pages should be more informative and elaborate
Web pages need
An informative title
The creator’s identity
A creation or revision date
At least one link to a local home page
Interface Design Strategies
Clear navigation
No dead-end page
Simplicity and consistency
User Centric Design
Other consideration
Navigation
Give users confidence that they can find what
they are looking for without wasting time
Graphic buttons (button bar)
Provide consistent and predictable set of
navigation buttons
Give the user a sense of your site’s organization
and make the logic
No Dead-End Page
Readers can link directly into pages
deep within your site. If there are no
links on a page, that page is a dead
end.
Simplicity and Consistency
Interface metaphor should be simple
Web site should be built on consistent pattern
Same basic layout, graphic theme, and hierarchy
of the site
Provides visual cues to the continuity of
information
Header menu graphic: create a consistent user
interface and corporate identity
User Centric Design
Design for interaction
Use the power of hypertext linking
Provide plenty of linking options and location
information
Use plenty of textual links
Don’t overload the user with too much
content
Design for Scanning
Design for Reading
Design for Location
Guide User Eyes
The user can traverse a page in a variety ways
In general, people reading text online skim
quickly as they scroll through the text
Paper-based reading pattern
User’s eyes move from left to right and back
again
Landscape-based display (TV)
User’s may scan information following a
clockwise pattern
Paper-based reading pattern
Landscape-based pattern
Other Considerations
Low bandwidth
Disabled users
Site Design
Determine organizational framework
At this stage, you will make the essential
decisions
What your audience wants from you
What you wish to say
How to arrange the content to best meet your
audience’s needs
The fundamental principle is meeting user’s
needs.
Site Design
Organizing information
Site Structure
Site Theme
Site Elements
Organizing Information: Five Basic
Steps
Step 1: Chunking information
Divide contents into logical units
Most users either save long documents to disk or print out
Help organize and present information in a uniform format.
Concise chunks of information are better suited to the computer
screen
Step 2: Hierarchy of importance
Establish a hierarchy of importance among the units
Five Basic Steps
Step 3: Relation
Use the hierarchy to structure relations among units
Step 4: Convey information
Build a site that closely follows your information structure
Step 5: Function
Analyze the functional success of your system
Avoid too shallow hierarchy and too deep or too many layers of
menu
Site Structure
Four essential structures
Sequences: the simplest way to organize
information
Grid: a good way to organize correlate variables,
such as a timeline versus historical information
Hierarchies: the best way to organize complex
bodies of information
Web: dynamically organize information
Site Structure
Web-linked site
Grid site
Complex
Educated
audiences
Hierarchical site
Sequence site
Simple
Basic
content
Linear narrative
Predictable structure
Nonlinear, hyper linked
Flexible, may be confusing
Site Design Themes
Source: Web Design Guide (Lynch and Horton 1999)
Site Elements: Home Pages
The top of the pages
the most visited page of the site
Ideal for put the most important news
Ideal for put a menu of links
The top of the home page is the best visual
metaphor
Positioning of the information does matter
Home Page Design Strategies
Menu Home pages
Menu-like lists of links dominated the design of most
early home pages
New-oriented home pages
New York Times, Wall Street Journal
Dynamic elements
Path-based home pages
Split audience immediately into interest groups and offer
them specific and relevant information
University’s Home page
Home Page Design Strategies
Graphic or Text
Primary layout decision: how heavily you will
use graphics on the page
Slow-loading but attractive graphics-based
home page and fast-loading but prosaic textbased home page
KODAK vs. W3C
Attractive Graphic Based Page
Source: Web Design Guide (Lynch and Horton 1999)
Text-based Home Page
Source: Web Design Guide (Lynch and Horton 1999)
Page Design
Visual Hierarchy
Consistency
Page Dimensions
Page Length
Page Grid
Headers and Footers
Advanced Table
Page Layout
General Design Consideration
Visual Hierarchy
Visual scanning of page structure over time
Rough visual scanning
Finer scanning
Source: Web Design Guide (Lynch and Horton 1999)
Start reading headers
Visual Hierarchy
Contrast is essential
Horizontal rules,
graphic bullets, icons,
and other visual
markers have
occasional used
Consistency
Allows readers to adapt quickly to your
design
Predict with confidence the location of
information and navigation controls across the
pages
If you choose a graphic theme, use it throughout
your web sites
Page Dimensions
Common mistake
The page is spreading the width of page graphics
beyond area
Most viewers can see on their 15 or 17 inch monitor
Source: Web Design Guide (Lynch and Horton 1999)
Page Dimension
Graphic Safe Areas
350 Pixels
600 Pixels
535 Pixels
670 Pixels
Letter size page: 535 X 670 Pixels
13-15” Screen (640 X 480)
Browser safe area (600 X 350)
Use blue dimensions to fill the
maximum safe area on most
screens
Use red dimensions for pages that
will print well
Page Length
Long web page require the user to remember too
much information
Users easily loose their sense of context when the
navigational buttons or links are not visible
Internal link
Determinants
The relation between page and screen size
The content of documents
Whether contents display on computer screen or print or
download for later reading
Content and Page Length
Divide page into chunks of no more than one to two
printed pages
Provide a link to a separate file
Shorter page for
Home page and menu or navigation page
Documentation to be read online
Pages with large graphics
Longer documentation for
Easier for users to download and print
Design for Screen
Divide into
vertically into
zones with
different
functions and
varying levels of
graphics and text
Visual and
functional zones
First Screen
-highest priority
item
-Most graphics
Above fold
Below fold
Second Screen
- Lower priority
item
- Less graphics
Source:http://www.ynhh.org/
Page Header and Footer
Page Header: Site identity
Title
Graphical information or textual information
Page Footer: Provenance
The origin of the page
Additional a set of link
Page Layout
Header, site title
Page title
Local links
Table width 535 pixels
132
372 pixels
Main text and
Graphic column
Gutter
Footer with
name,
Copyright,
revision date,
etc
365 graphic
Safe width
Graphic Safe Area: IE
Graphic safe area,
640 X 480 screens
Layout for print, maximum width = 535 pixels
Layout for screen, maximum width = 595 pixels
Maximum safe height = 295 pixels
General Consideration
Understand medium
Online based or print based
Include fixed page elements
Title
Use subtle colors
Minor elements or background: pastel shades of
colors
Graphical information