1 / 14

Creating Web Documents: Images, files, etc.

Creating Web Documents: Images, files, etc. Web graphics Paint Shop Pro for conversions File management, Ws-ftp demonstration (Return to HTML next week) Homework: Post project (may need to wait for server). Report (CourseInfo?) on viewing sites due 1 week. Report.

lilianna-valerian
Download Presentation

Creating Web Documents: Images, files, etc.

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Creating Web Documents: Images, files, etc. Web graphics Paint Shop Pro for conversions File management, Ws-ftp demonstration (Return to HTML next week) Homework: Post project (may need to wait for server). Report (CourseInfo?) on viewing sites due 1 week

  2. Report • Visit the same 2-3 Web pages from different platforms/access method/etc. Pick pages with images, sound, video, animation. • Report on differences! • Post on Courseinfo Discussion Forum • Please review, use spell-check, put in a tag for URLs and check if this works (you will need to turn on HTML under posting). • Feel free to respond (post reply) to postings by others.

  3. Vannevar Bush article • Comments?

  4. Best/Worst Sites projects • Remember to include name as or with mailto tag • Proofreading is appreciated • Gertrude Stein, e.e. cummings, others used all lower case artfully, but most of the rest of us need to use conventional cases & grammar. • Make differences from convention mean something.

  5. Color Display: Grid x Color Depth • Grid of pixels = picture elements • Higher resolution (more elements) means more detailed image. Typical is 72 pixels/inch • To minimize apparent stair-casing from grid, there is antialiasing = using intermediate colors to present smoother appearing boundary • Each pixel displays a color. Color from a palette • 2 colors (aka monotone) requires 1 bit = 1 unit of information: ON for 1 color, OFF for 1 color • 4 colors can be distinguished by 2 bits. Think of the number of patterns: 00, 01, 10, 11 • How many bits for 8 colors? (Check by writing out the patterns.) How many for 16? What is the pattern governing these patterns? So how many bits for 256 colors?

  6. “True color” • 24 bit = 8 bits for each of Red, Green, Blue • Additive model: red, green, blue add up to white light. This is not the color wheel. • What is the 6 character color code? Answer: 6 hexadecimal characters: 0,1 to 9, A, B, C, D, E, F (0 to 15). Each hex character = 4 bits, so two of them is 8 bits (256 levels). Also 16 times 16 is 256. • 6 hex characters = 3 times 2 times 4 = 24 bits = #RRGGBB, parameter for bgcolor and other tags.

  7. To be “Browser-safe” • First, assume that the display can only display 256 colors • Second, assume operating systems is reserving 40 colors for its own purpose • PhotoShop and Paint Shop Pro have features to help you decrease color depth and to view with browser. • Browser ‘dithers’(juxtaposes colors it has) to approximate colors outside the palette. You may choose NOT to do this and, instead, assume your audience has higher quality equipment (or will when your Web site is ready).

  8. Differences in displays • Screen resolution • Color depth (what the computer is capable of AND what the current setting is) • Gamma = degree of contrast • There are known differences between Mac and Windows. Keep this in mind for report.

  9. Color formats • GIF • 256 or fewer colors • Transparency • Interlacing • Compression based on runs of same color • Animated gifs • JPG • Lossy compression. Can specify levels. Works well for compressing images with areas of similar saturation of color (not diagrams or line drawings)

  10. HTML <img src="filename.gif" width="200" height="300"> • may distort (change aspect ratio) of image. Specifying at least one size will allow the rest of the loading of the page. It does NOT mean the image will load faster even if it makes the image appear smaller. • Consider changing size of image files in Photo Shop or PSP by combination of cropping, reducing size and reducing color depth.

  11. Photo Shop & PSP demos • Drawing • Find existing images (photographs, complex drawings) and • Change color depth • Save As gif, gif interlaced, gif with transparency, jpg with different compressions • Write simple HTML page and refer to images

  12. ftp • File transfer protocol • Find ws-ftp (or equivalent) online to download. • Need id and password. • Demonstration

  13. Procedure • Make folder(s) as subfolder of public_html. • project1, project2, project3 • If you name a file index.html, this file will be opened, if (assuming your id is jdoe), you browse to newmedia.purchase.edu/~jdoe/project1

  14. Homework • Experiment with Photo Shop and/or Paint Shop Pro for existing images • Do experiment viewing same sites on different platforms • Read in HTML book.

More Related