1. 1 MIT 5316 Web-Based Computing Lecture 1

2. 2 Welcome Introduction Syllabus

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

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

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

6. 6 The completed puzzle Networking infrastructure Many PCs Cross platform and easy to use software Public recognition/acceptance Businesses recognize Internet potential

7. 7 Theory of digitization Page objects What types of objects are found on web pages? Text Graphics Audio Video

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

9. 9 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!

10. 10 Theory of digitization Example 0 1 01 10 11

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

12. 12 Theory of digitization Example Convert 73 into binary Convert 1100101 into decimal

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

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

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

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

17. 17 Theory of digitization Color Depth Example

18. 18 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!

19. 19 Examples An image is 300x400 pixels and has a color depth of 256, what is the uncompressed file size of this image?

20. 20 Theory of digitization Screen resolution refers to the monitor’s display settings. What are common screen resolutions? –640x480 –800x600 –1024x768 –1152x864 –And higher

21. 21 Theory of digitization How does screen resolution affect our graphic’s size? The same graphic changes size when viewed at different resolutions

22. 22 Theory of digitization VGA Example 480 < 240

23. 23 Theory of digitization SVGA Example 768 1024 < 240

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

25. 25 Theory of digitization Discuss Web Project Students should start to form teams of 4.

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