1 MIT 5316 Web-Based Computing Lecture #2

2 Quiz Quiz #1 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? An image is 1200x1700 pixels and has a color depth of 1024, what is the uncompressed file size (in Megabytes) of this image?

3 Introduction Go through homework 1 solutions Go through homework 1 solutions About the text About the text Web Project Web Project Web project groups 3-4 students per group. Web project groups 3-4 students per group. Web teams should be formed by Web teams should be formed by

4 Theory of digitization Digital audio Digital audio How is audio converted into 1and 0? How is audio converted into 1and 0? Show example of PCM Show example of PCM What factors affect the quality and size of audio files? What factors affect the quality and size of audio files? Samples per second Samples per second Number of levels (bits) per sample Number of levels (bits) per sample

5 Theory of digitization Digital audio Digital audio Some file types include wav, au, ram, and MP3 Some file types include wav, au, ram, and MP3 Wav has no compression Wav has no compression AU has a little compression AU has a little compression MP3 has the most compression MP3 has the most compression RAM is real audio (requires a player) RAM is real audio (requires a player) Audio should be used sparingly Audio should be used sparingly Match quality to the source (like with color depth) Match quality to the source (like with color depth) Voice – low quality Voice – low quality Music – high quality Music – high quality Examples Examples

6 Theory of digitization Digital video Digital video The same criteria applies to DV as with a static graphic with one additional parameter. The same criteria applies to DV as with a static graphic with one additional parameter. Color DepthColor Depth SizeSize Frame rateFrame rate File typeFile type We have already talked about the first 2 We have already talked about the first 2 Frame rate – 30fps is required for true motion Frame rate – 30fps is required for true motion Sometimes less can be used depending on the material being captured. Sometimes less can be used depending on the material being captured.

7 Theory of digitization File types File types AVIAVI MOVMOV MPEGMPEG WMFWMF Which is best? Which is best? AVI – no compression AVI – no compression WMF – some compression WMF – some compression MOV – some compression MOV – some compression MPEG – best compression MPEG – best compression So why isn’t everything MPEG? So why isn’t everything MPEG? Cost. Cost. MPEG uses hardware to encode and compress, the others use software. MPEG uses hardware to encode and compress, the others use software.

8 Theory of digitization Video Samples Video Samples File Type File Type File Size File Size File Quality File Quality

9 Client - Server The client server model The client server model What’s different from previous applications? What’s different from previous applications? Not everything resides on one computer. Not everything resides on one computer. Availability of clients that are easily compatible Availability of clients that are easily compatible Open architecture does not require specific hardware software combinations Open architecture does not require specific hardware software combinations Allows explosive growth of the Internet. Allows explosive growth of the Internet. Sometimes web sites outpace browser technology (this should be avoided.) Sometimes web sites outpace browser technology (this should be avoided.)

10 Client - Server How are web servers set up? How are web servers set up? Server software is running on permanently connected Internet computer. Server software is running on permanently connected Internet computer. We must lease space from an ISP. We must lease space from an ISP. How much space? How much space? Not much! Not much! Why can’t we use our home PC’s? Why can’t we use our home PC’s? Because Internet address is not stable.Because Internet address is not stable.

11 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. 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 A free simple server program is Analog-X Windows XP has IIS built in, but is not installed by default Windows XP has IIS built in, but is not installed by default

12 Client - Server How do we make changes to web pages? How do we make changes to web pages? We must upload new files to write over existing files. We must upload new files to write over existing files. FTP is the software required to upload our files. FTP is the software required to upload our files. Windows explorer has ftp capability Windows explorer has ftp capability Defaults to anonymous login Defaults to anonymous login FTP basics (local and remote directories) FTP basics (local and remote directories) Files include HTML text files and other non-text web objects. Files include HTML text files and other non-text web objects. Some web page creation software integrates this function into the editor. Some web page creation software integrates this function into the editor. Frontpage Frontpage

13 Client - Server Server must have FTP server software running Server must have FTP server software running Sample file download Sample file download File Change and Save File Change and Save Sample file upload Sample file upload

14 Client - Server Domain names Domain names What is a domain name? What is a domain name? How do we get them? How do we get them? Who owns them? Who owns them? MTV story. MTV story. Moral of story get it now if not sooner. Moral of story get it now if not sooner. More addresses will become available. More addresses will become available.

15 Web Site Planning Planning your web site. Planning your web site. Planning is the most important aspect. Planning is the most important aspect. Success has everything to do with preparation. Success has everything to do with preparation. Start with a storyboard Start with a storyboard Don’t start with a html editor Don’t start with a html editor Use storyboard to diagram your proposal. Use storyboard to diagram your proposal.

16 Web Site Planning Draw Sample Storyboard Draw Sample Storyboard

17 Web Site Planning Storyboards give important information. Storyboards give important information. How many pages will be required? How many pages will be required? How do these pages link with each other? How do these pages link with each other? You don’t have to be an expert in the particular field. You don’t have to be an expert in the particular field. Determine contact information for content experts. Determine contact information for content experts. Determine if anything is missing. Determine if anything is missing.

18 Web Site Planning Storyboards will show your customer exactly what to expect. Storyboards will show your customer exactly what to expect. They can let you know if they need more or less. They can let you know if they need more or less. Offer them several different templates (page layouts) and color schemes. Offer them several different templates (page layouts) and color schemes. Don’t fret criticism- get as much input as possible. Don’t fret criticism- get as much input as possible. Make them sign off on design before investing too much effort. Make them sign off on design before investing too much effort. Saves time in the long run. Saves time in the long run. Prevents Johnny come Lately from making major changes. Prevents Johnny come Lately from making major changes.

19 Web Site Planning Don’t forget about continued maintenance. Don’t forget about continued maintenance. Stale pages and information is extremely unprofessional. Stale pages and information is extremely unprofessional. Upon agreement – use your template as the starting point for each new page. Upon agreement – use your template as the starting point for each new page. Use the “save as” feature to rename modified templates. Use the “save as” feature to rename modified templates. This will keep original template unchanged. This will keep original template unchanged.

20 Web Site Planning Tips for a good template. Tips for a good template. KISS principle. KISS principle. Consistency of the interface. Consistency of the interface. Multiple navigational tools. Multiple navigational tools. Key information should be right in front. Key information should be right in front. Avoid scrollbars. Avoid scrollbars. No animated GIFs No animated GIFs

21 Web Site Planning No black pages. No black pages. Simple backgrounds Simple backgrounds Contrast your text and background. Contrast your text and background. Not too much text. Not too much text. Keep graphics small and quick loading. Keep graphics small and quick loading. Template graphics will remain in cache for quick access to related pages. Template graphics will remain in cache for quick access to related pages.

22 Web Site Planning Text Text Background does not interrupt the text Background does not interrupt the text Text is big enough to read, but not too big Text is big enough to read, but not too big The hierarchy of information is perfectly clear The hierarchy of information is perfectly clear Columns of text are narrower than in a book to make reading easier on the screen Columns of text are narrower than in a book to make reading easier on the screen

23 Web Site Planning Navigation Navigation Navigation buttons and bars are easy to understand and use Navigation buttons and bars are easy to understand and use Navigation is consistent throughout web site 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 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 Frames, if used, are not obtrusive A large site has an index or site map A large site has an index or site map

24 Web Site Planning Links Links Link colors coordinate with page colors Link colors coordinate with page colors Links are underlined so they are instantly clear to the visitor Links are underlined so they are instantly clear to the visitor Graphics Graphics Buttons are not big and dorky Buttons are not big and dorky Every graphic has an alt label Every graphic has an alt label Every graphic link has a matching text link Every graphic link has a matching text link Graphics and backgrounds use browser-safe colors Graphics and backgrounds use browser-safe colors Animated graphics turn off by themselves Animated graphics turn off by themselves

25 Web Page Design General Design General Design Pages download quickly Pages download quickly First page and home page fit into 800 x 600 pixel space 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 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 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 Every web page in the site looks like it belongs to the same site; there are repetitive elements that carry throughout the pages

26 Bad Web Design Features Backgrounds Backgrounds Default gray color Default gray color Color combinations of text and background that make the text hard to read Color combinations of text and background that make the text hard to read Busy, distracting backgrounds that make the text hard to read Busy, distracting backgrounds that make the text hard to read Tables Tables Borders turned on in tables Borders turned on in tables Tables used as design elements, especially with extra large (dorky) borders Tables used as design elements, especially with extra large (dorky) borders

27 Bad Web Design Features Text Text Text that is too small to read Text that is too small to read Text crowding against the left edge Text crowding against the left edge Text that stretches all the way across the page Text that stretches all the way across the page Centered type over flush left body copy Centered type over flush left body copy Paragraphs of type in all caps Paragraphs of type in all caps Paragraphs of type in bold Paragraphs of type in bold Paragraphs of type in italic Paragraphs of type in italic Paragraphs of type in all caps, bold, and italic all at once Paragraphs of type in all caps, bold, and italic all at once Underlined text that is not a link Underlined text that is not a link

28 Bad Web Design Features Links Links Default blue links Default blue links Blue link borders around graphics Blue link borders around graphics Links that are not clear about where they will take you 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 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 Text links that are not underlined so you don't know they are links Dead links (links that don't work anymore) Dead links (links that don't work anymore)

29 Bad Web Design Features Graphics Graphics Large graphic files that take forever to load Large graphic files that take forever to load Meaningless or useless graphics Meaningless or useless graphics Thumbnail images that are nearly as large as the full-sized images they link to Thumbnail images that are nearly as large as the full-sized images they link to Graphics with no alt labels Graphics with no alt labels Missing graphics, especially missing 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) Graphics that don't fit on the screen (assuming a screen of 640x460 pixels)

30 Bad Web Design Features Blinking and animations Blinking and animations Anything that blinks, especially text Anything that blinks, especially text Multiple things that blink Multiple things that blink Rainbow rules (lines) Rainbow rules (lines) Rainbow rules that blink or animate Rainbow rules that blink or animate "Under construction" signs, especially of little men working "Under construction" signs, especially of little men working Animated "under construction" signs Animated "under construction" signs Animated pictures for Animated pictures for Animations that never stop Animations that never stop Multiple animations that never stop Multiple animations that never stop

31 Bad Web Design Features Junk Junk Counters on pages--who cares Counters on pages--who cares Junky advertising Junky advertising Having to scroll sideways (640 x 460 pixels) Having to scroll sideways (640 x 460 pixels) Too many little pictures of meaningless awards on the first page Too many little pictures of meaningless awards on the first page Frame scroll bars in the middle of a page Frame scroll bars in the middle of a page Multiple frame scroll bars in the middle of a page Multiple frame scroll bars in the middle of a page

32 Bad Web Design Features Navigation Navigation Unclear navigation; over complex navigation Unclear navigation; over complex navigation Complicated frames, too many frames, unnecessary scroll bars in frames Complicated frames, too many frames, unnecessary scroll bars in frames Orphan pages (no links back to where they came from, no identification) Orphan pages (no links back to where they came from, no identification) Useless page titles that don't explain what the page is about Useless page titles that don't explain what the page is about

33 Bad Web Design Features General Design General Design Entry page or home page that does not fit within standard browser window (640 x 460 pixels) Entry page or home page that does not fit within standard browser window (640 x 460 pixels) Frames that make you scroll sideways Frames that make you scroll sideways No focal point on the page No focal point on the page Too many focal points on the page Too many focal points on the page Navigation buttons as the only visual interest, especially when they're large (and dorky) Navigation buttons as the only visual interest, especially when they're large (and dorky) Cluttered, not enough alignment of elements Cluttered, not enough alignment of elements Lack of contrast (in color, text, to create hierarchy of information, etc.) Lack of contrast (in color, text, to create hierarchy of information, etc.) Pages that look okay in one browser but not in another Pages that look okay in one browser but not in another

34 Next week Next class we will look more in depth at creating web pages with HTML. Next class we will look more in depth at creating web pages with HTML. Reading Assignment Chapters 1-5 in the text. Reading Assignment Chapters 1-5 in the text. Homework assignment #2 Homework assignment #2 Due 1/29/08Due 1/29/08 Develop a storyboard for your class project website.Develop a storyboard for your class project website. Each page shown in the storyboard should have a title and a purpose assigned to it.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.For each page provide a description that includes any data that will be displayed. Turn in as printed hard copy.Turn in as printed hard copy. This is an individual AssignmentThis is an individual Assignment