Transcript MIT 5316 Lecture 2

MIT 5316
Web-Based Computing
Lecture #2
1
Quiz


Quiz #1
An image is 1200x1700 pixels and
has a color depth of 1024, what is
the uncompressed file size (in
Megabytes) of this image?
2
Introduction





Go through homework 1 solutions
About the text
Web Project
Web project groups 3-4 students per group.
Web teams should be formed by 1-29-08
3
Theory of digitization






Digital audio
How is audio converted into 1and 0?
Show example of PCM
What factors affect the quality and size
of audio files?
Samples per second
Number of levels (bits) per sample
4
Theory of digitization











Digital audio
Some file types include wav, au, ram, and MP3
Wav has no compression
AU has a little compression
MP3 has the most compression
RAM is real audio (requires a player)
Audio should be used sparingly
Match quality to the source (like with color depth)
Voice – low quality
Music – high quality
Examples
5
Theory of digitization


Digital video
The same criteria applies to DV as with a static
graphic with one additional parameter.
•
•
•
•



Color Depth
Size
Frame rate
File type
We have already talked about the first 2
Frame rate – 30fps is required for true motion
Sometimes less can be used depending on the
material being captured.
6
Theory of digitization

File types
•
•
•
•








AVI
MOV
MPEG
WMF
Which is best?
AVI – no compression
WMF – some compression
MOV – some compression
MPEG – best compression
So why isn’t everything MPEG?
Cost.
MPEG uses hardware to encode and compress,
the others use software.
7
Theory of digitization




Video Samples
File Type
File Size
File Quality
8
Client - Server







The client server model
What’s different from previous applications?
Not everything resides on one computer.
Availability of clients that are easily
compatible
Open architecture does not require specific
hardware software combinations
Allows explosive growth of the Internet.
Sometimes web sites outpace browser
technology (this should be avoided.)
9
Client - Server






How are web servers set up?
Server software is running on
permanently connected Internet
computer.
We must lease space from an ISP.
How much space?
Not much!
Why can’t we use our home PC’s?
• Because Internet address is not
stable.
10
Client - Server



If you have a work computer that is
permanently connected to the
internet and no firewall, you can set
up a web server.
A free simple server program is
Analog-X
Windows XP has IIS built in, but is
not installed by default
11
Client - Server









How do we make changes to web pages?
We must upload new files to write over existing
files.
FTP is the software required to upload our files.
Windows explorer has ftp capability
Defaults to anonymous login
FTP basics (local and remote directories)
Files include HTML text files and other non-text
web objects.
Some web page creation software integrates
this function into the editor.
Frontpage
12
Client - Server




Server must have FTP server
software running
Sample file download
File Change and Save
Sample file upload
13
Client - Server







Domain names
What is a domain name?
How do we get them?
Who owns them?
MTV story.
Moral of story get it now if not
sooner.
More addresses will become
available.
14
Web Site Planning






Planning your web site.
Planning is the most important
aspect.
Success has everything to do with
preparation.
Start with a storyboard
Don’t start with a html editor
Use storyboard to diagram your
proposal.
15
Web Site Planning

Draw Sample Storyboard
16
Web Site Planning






Storyboards give important
information.
How many pages will be required?
How do these pages link with each
other?
You don’t have to be an expert in
the particular field.
Determine contact information for
content experts.
Determine if anything is missing.
17
Web Site Planning







Storyboards will show your customer
exactly what to expect.
They can let you know if they need
more or less.
Offer them several different templates
(page layouts) and color schemes.
Don’t fret criticism- get as much input
as possible.
Make them sign off on design before
investing too much effort.
Saves time in the long run.
Prevents Johnny come Lately from
making major changes.
18
Web Site Planning





Don’t forget about continued
maintenance.
Stale pages and information is
extremely unprofessional.
Upon agreement – use your template as
the starting point for each new page.
Use the “save as” feature to rename
modified templates.
This will keep original template
unchanged.
19
Web Site Planning







Tips for a good template.
KISS principle.
Consistency of the interface.
Multiple navigational tools.
Key information should be right in
front.
Avoid scrollbars.
No animated GIFs
20
Web Site Planning






No black pages.
Simple backgrounds
Contrast your text and
background.
Not too much text.
Keep graphics small and quick
loading.
Template graphics will remain in
cache for quick access to related
pages.
21
Web Site Planning





Text
Background does not interrupt the text
Text is big enough to read, but not too
big
The hierarchy of information is
perfectly clear
Columns of text are narrower than in a
book to make reading easier on the
screen
22
Web Site Planning






Navigation
Navigation buttons and bars are easy to
understand and use
Navigation is consistent throughout web site
Navigation buttons and bars provide the
visitor with a clue as to where they are, what
page of the site they are currently on
Frames, if used, are not obtrusive
A large site has an index or site map
23
Web Site Planning









Links
Link colors coordinate with page colors
Links are underlined so they are instantly clear
to the visitor
Graphics
Buttons are not big and dorky
Every graphic has an alt label
Every graphic link has a matching text link
Graphics and backgrounds use browser-safe
colors
Animated graphics turn off by themselves
24
Web Page Design






General Design
Pages download quickly
First page and home page fit into 800 x 600
pixel space
All of the other pages have the immediate
visual impact within 800 x 580 pixels
Good use of graphic elements (photos,
subheads, pull quotes) to break up large areas
of text
Every web page in the site looks like it belongs
to the same site; there are repetitive elements
that carry throughout the pages
25
Bad Web Design Features







Backgrounds
Default gray color
Color combinations of text and
background that make the text hard to
read
Busy, distracting backgrounds that
make the text hard to read
Tables
Borders turned on in tables
Tables used as design elements,
especially with extra large (dorky)
borders
26
Bad Web Design Features










Text
Text that is too small to read
Text crowding against the left edge
Text that stretches all the way across the
page
Centered type over flush left body copy
Paragraphs of type in all caps
Paragraphs of type in bold
Paragraphs of type in italic
Paragraphs of type in all caps, bold, and
italic all at once
Underlined text that is not a link
27
Bad Web Design Features







Links
Default blue links
Blue link borders around graphics
Links that are not clear about where they
will take you
Links in body copy that distract readers
and lead them off to remote, useless pages
Text links that are not underlined so you
don't know they are links
Dead links (links that don't work anymore)
28
Bad Web Design Features







Graphics
Large graphic files that take forever to load
Meaningless or useless graphics
Thumbnail images that are nearly as large
as the full-sized images they link to
Graphics with no alt labels
Missing graphics, especially missing
graphics with no alt labels
Graphics that don't fit on the screen
(assuming a screen of 640x460 pixels)
29
Bad Web Design Features










Blinking and animations
Anything that blinks, especially text
Multiple things that blink
Rainbow rules (lines)
Rainbow rules that blink or animate
"Under construction" signs, especially of
little men working
Animated "under construction" signs
Animated pictures for e-mail
Animations that never stop
Multiple animations that never stop
30
Bad Web Design Features







Junk
Counters on pages--who cares
Junky advertising
Having to scroll sideways (640 x 460
pixels)
Too many little pictures of meaningless
awards on the first page
Frame scroll bars in the middle of a page
Multiple frame scroll bars in the middle of a
page
31
Bad Web Design Features





Navigation
Unclear navigation; over complex
navigation
Complicated frames, too many
frames, unnecessary scroll bars in
frames
Orphan pages (no links back to where
they came from, no identification)
Useless page titles that don't explain
what the page is about
32
Bad Web Design Features









General Design
Entry page or home page that does not fit within
standard browser window (640 x 460 pixels)
Frames that make you scroll sideways
No focal point on the page
Too many focal points on the page
Navigation buttons as the only visual interest,
especially when they're large (and dorky)
Cluttered, not enough alignment of elements
Lack of contrast (in color, text, to create hierarchy
of information, etc.)
Pages that look okay in one browser but not in
another
33
Next week



Next class we will look more in depth at
creating web pages with HTML.
Reading Assignment Chapters 1-5 in the text.
Homework assignment #2
• Due 1/29/08
• Develop a storyboard for your class project
website.
• Each page shown in the storyboard should have a
title and a purpose assigned to it.
• For each page provide a description that includes
any data that will be displayed.
• Turn in as printed hard copy.
• This is an individual Assignment
34