MULTIMEDIACLASSPPT7.ppt

Party Time is over!,Stay awake for todays lecture Valuable information,Webpage Layout and Webpage Design,Technical definitions: A webpage is a single HTML document A website is a collection of related WebPages Examples http:/www.kingsindia.net www.projectpuffin.org www.pmlodge.com,Good Website Design Tips,Have something valuable to offer provide something useful or interesting Dont distract with blinking, animated GIFs, autoloading sound, too much scrolling Dont use images on the background unless you know what your doing Put a lot of thought into the organization of your page Minimize clicking (no more than 3 clicks to get to a page),More Tips,Have a way to get to the home page on every page Include a menu on every page (in the same location on every page) Dont make your page too wide, user should NEVER have to do horizontal scrolling. Vertical scrolling should be kept to a minimum,More Tips,Use contrasting colors or simple backgrounds to make text easy to read Make text large enough to read Use ALL CAPITAL LETTERS sparingly, Never underline words that are not links Put contact info or a link to it on every page,More Tips,Test your links Remove dead links Include a “Last Modified” date Keep up to date, update your “Whats New” section frequently,More Tips,Have a consistency throughout your pages Colours Menu placement Layout Fonts Buttons Think about the layout, have white space, clean alignment and balance on your pages,Some things you will see on “Bad” Web Pages:,Navigation confusing, menus in different spots Ugly design: no color continuity or white space Scrolling horizontally to see whole page width Slow when loading Broken links Text hard to read Spelling mistakes Stale content Useless information Too many ads Blinking, animation,How to start your design:,Decide on where you want the menu, in general it should go along the left side or at the top, WHY? What will the navigation structure look like? What will the pages be besides the home page? Will there be submenus under the menus? (this will affect your folder layout) Pick a colour scheme you like Think about your banner: What should it focus on Will the menu be part of the banner? Think about the colours Make it about 800 pixels wide, dont make it too tall. Sketch it out on paper,Web Page Layout,Layout of web pages is very important Poor layout makes for - Difficult navigation Hard to locate information on page Visually unappealing,Tables, tables, tables!,Use tables to lay out your pages! Make the table borders invisible A 2x2 table works well,Areas of a Web Page,Menu,Header,Content,Logo,A 2 x 2 Layout,Table within a table,The outer table,The inner table,The inner table,Splash Page,The index.html file is called the “Splash Page” It is the key pagethe first page visitors usually see Must be visually attractive, informative, and easy to navigate,Organizing Information,Decide what info goes on each page Friends page Family page Personal page Hobbies page,Good Web Communication,Be Concise Limit choices use a hierarchical structure A hierarchy is a structured organization where some pages are at a higher level than others Hierarchy results in a site map with multiple levels,Site Map,A site map is designed to show the connections between pages A graphical site map uses lines to connect linked pages,Site Map,Design Theme,Choose a common layout for your website. The Splash Page will probably differ but interior pages should be the same Use tables to control placement throughout,Consistency in Design,Use the same font throughout! Use consistent graphics in website do not use ultra modern on one page and calligraphy on another Use color scheme that is consistent,Things to Remember, especially for Assignment,Keep the menu in the same place on every page. (either the top or the left, it is up to you) Should not have to scroll horizontally Keep the colours consistent on every page Keep the layout fairly consistent on every page Should always have a way to get home Long pages should have a “Back to Top” button,Decide on what web pages you will need.,Each web page is normally an html file, a file that has the extension .html or .htm .html .htm Very basic page, just has clickable links, images, sometimes forms The .html file is just a file with html codes that is displayed in a browser to make it look pretty for the client (IE, Safari, Firefox) CS1033 just covers .html & .htm pages,Cont.,Other extensions for web pages include: .shtml Server Side Includes: add some extra stuff from the server before displaying the page to the client” .php, .asp, .cgi extra stuff that is brought in also from the server, allows for use of data in a database on the server, more complex form manipulation. asp is a Microsoft technology,Chapter - 1,Who coined the term hypertext? Tim Berners-Lee proposed the_ Who create the Netscape program？ _ is the best example of a hypermedia application. Who invented the Hypertext Markup Language (HTML)? Who invented the Hypertext Transfer Protocol (HTTP)?,Which one is first popular web browser? URI stands for _ The current version of HTML is_ Cakewalk also called_ _ was the first popular GUI-based audio editor for digitized audio _a video editing tool by Apple; Macintosh only. _ is the most basic element of multimedia. What are the categorization of multimedia? _ is a text which contains links to other texts.,Chapter 2,_is the process of creating multimedia applications Which one is the example of scripting language metaphor? _ is the example of frames metaphor. _is the simplest and most frequently used video transition What are the types of dissolve? What are the most popular video formats?,PAL stands for _ SECAM stands for _ _ displays pixels on the screen. What are the popular authoring tools? What is the main purpose or objective of VRML? VRML files are called_ and have _extension. _describes the properties of node. What are the types of nodes? What are the types of texture?,Chapter - 1,Ted Nelson World Wide Web Jim Clark and Marc Andreessen World Wide Web Tim Berners-Lee Tim Berners-Lee Mosaic Uniform Resource Identifier HTML 5.0 Pro Audio Sound Edit Final Cut Pro Text Linear & Non-linear Hypertext,Chapter 2,Authoring Tool book Program Quest Cut Cross dissolve and Dither dissolve. NTSC, PAL, and SECAM Phase Alternating Line SEquential Color And Memory Video Card or Video Capture Card Adobe Premiere, Flash, Dreamweaver It is a standard for delivering 3D rendering on the net World, .wrl Fields Shape and Material Image ,Movie, Pixel,JPEG Compression Example,This example shows the effects of JPEG compression at various levels of quality. The first file is a GIF version of the original, requiring 258898 bytes of storage. The other files use “quality“ factors of 100 (best) down to 5 (nearly the worst) and therefore require space in the range 326321 down to 9438 bytes. http:/www.cs.sfu.ca/CourseCentral/365/mark/material/cgi-bin/whichjpeg.cgi,What is lossless compression?,Lossless compression is a method of reducing the size of computer files without losing any information. That means when you compress a file, it will take up less space, but when you decompress it, it will still have the exact same information.,Exercise,Question: Match the following images to the correct file format:,GIF PNG JPG,Review Questions,QUESTION: How many pixels is an image that is 800 pixels by 800 pixels? QUESTION : How many megapixels is that image? QUESTION : How many colours can you represent with 4 bit colour?,Review,QUESTION: Assume we have 3 images, all 3 images are 100 pixels by 100 pixels but they were each scan in with different dpi. (One was 10dpi, one was 50 dpi, one was 100dpi) Which of the following statements are true? All 3 images will have the same file size The image that was scanned in at 100dpi will print smaller than the one scanned in at 10dpi,Review,Question: How big will an image be in terms of bytes if it is uncompressed, true colour and 200 by 400 bytes? Question: What type of compression doesnt lose any of the original information about the image? Question: Which type(s) of file formats perform a lossless compression? Question JPGs will produce a smaller file size than PNG 24 for a photograph: TRUE OR FALSE,Review,Question: Name the most popular search engine website? What % of the market does it currently have? Question: What are the 3 components you must address to get your page a higher ranking? Question: Who started Yahoo, who started Google?,Question: How big will an image be in terms of bytes if it is uncompressed, true colour and 200 by 400 bytes? Question: What type of compression doesnt lose any of the original information about the image? Question: Which type(s) of file formats perform a lossless compression? Question: JPGs will produce a smaller file size than PNG 24 for a photograph: TRUE OR FALSE,