Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Computer vision wikipedia , lookup
List of 8-bit computer hardware palettes wikipedia , lookup
Stereoscopy wikipedia , lookup
Waveform graphics wikipedia , lookup
Spatial anti-aliasing wikipedia , lookup
Stereo display wikipedia , lookup
Image editing wikipedia , lookup
Indexed color wikipedia , lookup
Apple II graphics wikipedia , lookup
Portable Network Graphics wikipedia , lookup
Hold-And-Modify wikipedia , lookup
Multimedia on the Web Text and Images The Two Major Effects of Digitization Multimedia (VISTA) – Video – Image – Sound – Text – Animation Interactivity How the Computers Capture, Store, Transmit Multimedia All multimedia is converted into digital form called binary digits (bits) represented as 1’s and 0’s or on and off Each multimedia object has a code associated with it e.g. text is represented by an ASCII code Typical codes for images on the Web are JPEG, GIF, PNG Sound Codes are wav, midi, mp3 Video codes are mpeg, avi The Process of Displaying a Web Page Data and instructions from the server or host computer are sent to the local or client computer. The instructions are in a computer programming language called hypertext markup language (html) The browser interprets the instructions and causes the action. The Look of the Web Page on the Client Computer Depends on -The design of the web page The ability of the Web Page design software to convert the page to html The capability of the network to transmit the html instructions and data The capability of the browser to interpret the instructions The capability of the client computer to act on the instructions Typeface The most conventional scheme for using typefaces is to use a serif face such as Times New Roman or Georgia for body text and a sans serif face such as Verdana or Arial as a contrast for headlines. Serif typeface – Times New Roman – Georgia Sans Serif typeface – Verdana – Ariel Type Size Measured inch in Points = 72 points = 1 12 point is usually the minimum for reading 72 point is 6 times larger The Role of Bandwidth Bandwidth = Data rate = bits/second Low – telephone modem – 56kbps/sec High – cable, satellite, DSL = mb/sec Caution – what appears fast on your development computer may be unusable over the WWW Data Compression Bitmap images are very large file size Codecs (computer programs) compress abd decompress files to make them much smaller by: – Removing repetition – Pixel averaging – Dynamic range reduction Jpeg and Gif are the most common for Web pages Images Advantages of GIF files – GIF is the most widely supported graphics format on the Web – GIFs of diagrammatic images look better than JPEGs – Supports transparency and interlacing – Supports GIF animations Advantages of JPEG images – Huge compression ratios mean faster download speeds – JPEG produces excellent results for most photographs and complex images – JPEG supports full-color (24-bit, "true color") images Web Style Guide From the Yale Web Style Manual 2nd Edition Link Planning Web sites are developed by groups of people to meet the needs of other groups of people. Unfortunately, Web projects are often approached as a "technology problem," and projects are colored from the beginning by enthusiasms for particular Web techniques or browser plug-ins (Flash, digital media, XML, databases, etc.), not by real human or business needs. People are the key to successful Web projects. Although the people who will actually use your site will determine whether the project is a success, ironically, those very users are the people least likely to be present and involved when your site is designed and built. Build a Content Inventory Once you have an idea of your Web site's mission and general structure, you can begin to assess the content you will need to realize your plans. Building an inventory or database of existing and needed content will force you to take a hard look at your existing content resources and to make a detailed outline of your needs Content development is the hardest, most time-consuming part of any Web site development project. INTERFACE DESIGN USERS OF WEB DOCUMENTS don't just look at information, they interact with it in novel ways that have no precedents in paper document design. Page Design The spatial organization of graphics and text on the Web page can engage readers with graphic impact, direct their attention, prioritize the information they see, make their interactions with your Web site more enjoyable and efficient. Page length Determining the proper length for any Web page requires balancing four factors: – The relation between page and screen size – The content of your documents – Whether the reader is expected to browse the content online or to print or download the documents for later reading – The bandwidth available to your audience Page Length Researchers have noted the disorientation that results from scrolling on computer screens. The reader's loss of context is particularly troublesome when such basic navigational elements as document titles, site identifiers, and links to other site pages disappear off-screen while scrolling Page Length Guidelines In general, you should favor shorter Web pages for: – Home pages and menu or navigation pages elsewhere in your site – Documents to be browsed and read online – Pages with very large graphics MULTIMEDIA Web designers must always be considerate of the consumer. A happy customer will come back, but one who has been made to wait and is then offered goods that are irrelevant is likely to shop elsewhere. Because multimedia comes with a high price tag, it should be used sparingly and judiciously. Web multimedia strategies Simply because we can digitize hours' worth of analog video and stream it out over the Web doesn't mean that we should. Most people prefer to read the work in print. We digitize texts in order to use the strengths of computing, such as searching and linking, to enhance our understanding of the material. You can link to a pdf file of text This holds true for multimedia, too: we need to consider how best to use the computer and not simply translate analog video and audio content to the computer screen. The key to successful Web multimedia is to tailor your content for Web delivery. Image Attributes Images are made of picture elements or pixels Each pixel could be black or white (1 bit/pixel) Or Up to 4 billion colors (32 bits/pixel) The more pixels per inch of display the greater the resolution and the clearer the image. More pixels and more bits/pixel means larger files. With one bit per pixel, two colors may be represented => 1 or 0 2 bits => 4 colors 3 bits => 8 colors, etc 24 bits =2^24 = 16,777,216 colors 10 mega(million) pixel camera => 3000 by 3000 pixels If each pixel = 24 bits = 8 bytes => 8 x 10 mega = 80 megabytes Use compression => jpeg, gif and png are compression techniques to reduce file size- without sacrificing quality Save for the Web 82.58 KB This image is 100 by 100 pixels Increasing the physical size blurs the image because the resolution (pixels/inch does not change) Saved with only 16 colors – 4 bits Original (left) vs 256 color (right) 24 bit (16 million colors) Compare File Sizes KB -> kilo byte; byte -> 8 bits ; bit -> binary digit 18 KB 74 KB 213 KB Keep in Mind – •Images from digital cameras will need size reduced •Some images on web “thumbnails” and are approximately 100 by 100 pixels – enlarging makes them fuzzy Jpg ar Keep in mind – •Digital camera pictures must be reduced to fit on web page •Some web page images are “thumbnails”, approximately 100 by 100 pixels. Enlarging can make them fuzzy. •Jpeg is best for photographic images (millions of colors) •Jpeg does not do transparency •GIF are best for “cartoon” or line type images (only 256 colors) •GIF does transparency (and animation) •PNG does both millions of colors and transparency •There is a tradeoff between image quality and size and format •Use the smallest file size that still has desired quality on the web page •Resize images before inserting on the web page