Download - Faculty . > Home

MIT 5316
Web-Based Computing
Lecture 1
1
Welcome
• Introduction
• Syllabus
2
Some of the topics we will cover.
•
•
•
•
•
•
•
•
•
•
•
•
•
•
History of the internet
Theory of Digitization
Computer Networking Basics
Client Server Model
Web site design
HTML
XHTML
JavaScript
VB Script
E business models
Database interfaces
SQL
Copyright Laws
Data security
3
History of the Internet
• Famous Quotes of computer industry visionaries
• “I think there is a world market for maybe 5
computers” Thomas Watson Chairman of IBM 1943
• “There is no reason anyone would want a computer
in their home” Ken Olson Chairman/founder DEC
computers 1977
4
History of the Internet
•
•
•
•
•
•
•
•
When did the Internet start?
1950’s first computers
60’s first internet
70’s more computers (networked mainframes)
80’s major break through (PC)
90’s friendly OS and browsers
00’s What is next?
Wireless web, WIFI, cell phones, PDAs.
5
The completed puzzle
•
•
•
•
•
Networking infrastructure
Many PCs
Cross platform and easy to use software
Public recognition/acceptance
Businesses recognize Internet potential
6
Theory of digitization
• Page objects
• What types of objects are found on web
pages?
• Text
• Graphics
• Audio
• Video
7
Theory of digitization
• How do we digitize these objects in the
computer?
• Everything in a computer is represented by
either a 1 or 0.
• This is referred to as binary encoding.
• Why 1 and 0?
• Computers consists of millions of individual
transistors which act as switches.
• These switches can be either on or off- hence
1 or 0
8
Theory of digitization
• The binary number system
• We are used to base 10
• Base 10 has 10 distinct digits, (0 1 2 3 4 5 6 7
8 9)
• all other numbers are a combination of those
digits.
• Binary (base 2) has only 2 digits (0 1)
therefore all number consist of those 2 digits.
• How do we count in binary?
• The same way we count in base 10!
9
Theory of digitization
•
•
•
•
•
•
Example
0
1
01
10
11
10
Theory of digitization
• So how do we convert a character, graphic, audio or
video into a binary number?
• Each has it’s own method
• Text uses ASCII (American standard code for
information interchange).
• Each keyboard character (including special
characters) has a distinct value
• Example
• Hello = 110,101,108,108,111 (base 10)
• Text loads extremely quick because it is relatively
small and easily decoded
• Convert each character to it’s binary equivalent
11
Theory of digitization
• Example
• Convert 73 into binary
• Convert 1100101 into decimal
12
Theory of digitization
•
•
•
•
•
•
•
•
•
Text
As simple as it sounds text can be a lot of work.
There are ways to input data that are easier.
Find out if there is already an electronic copy of the data
or information you need.
This may still require some formatting changes.
If no electronic copy exist there is the option of OCR.
OCR has advanced a great deal in the past 10 years.
It can auto correct and auto format complex scanned
documents that include images.
OCR works best when there are clean copies being
scanned.
13
Theory of digitization
• Graphics
• Graphics are extremely important to a successful web
site.
• The smaller the graphic’s file size the quicker it will load.
• This is because network throughput is fixed for each user.
• Important criteria for graphics that affect overall file size
(and therefore download time)
– Image dimension size in pixels
– Color depth
– File type
• Image screen size determines the number of pixels
needed to display the image.
• Height times width = total number of pixels.
• The bigger the image, the more pixels needed to
represent it.
14
Theory of digitization
• What is color depth?
• It is the size of the palette used to represent the
image.
• What are some typical palette sizes?
–
–
–
–
–
–
–
–
2 monochrome
4 EGA
16 Windows standard
256 Windows enhanced
16,000 High Color
16,700,000 True color
This laptop is set at 32 bit or 4 billion
And higher.
15
•
•
•
•
Theory of digitization
So how does color depth affect our images?
The higher the better they look.
What is the tradeoff?
Higher means a larger file size and slower
downloads.
• 1 bit, 2 bit, 4 bit, 8 bit, 16 bit, 24 bit.
• How do we optimize?
• Rule of thumb
– Reduce color depth until a change is noticed, then
back up one step.
16
Theory of digitization
• Color Depth Example
17
Theory of digitization
• File types
–
–
–
–
Bitmaps
Gifs
Tiffs
Jpegs
• Which is used the most? Why?
• BMP has no compression
• GIF is interlaced giving a motion effect (used in
animation)
• Tiffs are extremely HQ but with no compression
• Jpegs have good quality and excellent compression
• How does compression work?
• Why use compression (doesn’t it take longer?) It used
to!
18
Examples
• An image is 300x400 pixels and has a
color depth of 256, what is the
uncompressed file size of this image?
19
Theory of digitization
• Screen resolution refers to the monitor’s
display settings.
• What are common screen resolutions?
–
–
–
–
–
640x480
800x600
1024x768
1152x864
And higher
20
Theory of digitization
• How does screen resolution affect our
graphic’s size?
• The same graphic changes size when
viewed at different resolutions
21
Theory of digitization
• VGA Example
<- 640 ->
480
< 240
22
Theory of digitization
• SVGA Example
1024
768
< 240
23
Theory of digitization
• Monitor size also affects an images size.
• Monitor size does not affect the graphic’s
file size.
• With all these factors, how do we design
our images?
• Target the Lowest Common
Denominator.
24
Theory of digitization
• Discuss Web Project
• Students should start to form teams of 4.
25
Homework #1
1. Find and print 5 web sites that you feel are well designed and justify
you answer.
2. Find and print 5 web sites that are really awful and justify your
answer.
3. Find an 1600x1200 true color image and save it as a JPG, BMP,
Tiff and a GIF. List the exact file size of each.
4. Due 1/22/08 Answers must be typewritten and a hardcopy
submitted.
5. Reading Assignment Chapters 1, 2, and 3 in the text.
26