Preparing the Elements<br />Gathering and PreparingText, Numbers and Images<br />Linda C. Morosko, 2008 	The Web Wizard’s ...
Numbers<br />A couple of standards:<br />Spell out numbers up to nine (one, two, three…)<br />Use numerals for 10 and abov...
Preparing Numbers<br />Numbers are generally displayed in :<br />Tables<br />Graphs<br />Charts<br />Combination of the th...
Preparing Numbers<br />Tables<br />Best for items that need to be referenced and looked up individually<br />Graphs<br />A...
Preparing Images<br />Most sites contain images<br />Could be as small as a company logo<br />Banner ads across the top of...
Preparing Images<br />Image sources:<br />Adobe Illustrator – save the file as an Encapsulated Postscript file (.eps)<br /...
Preparing Images<br />Scanning<br />Use a flatbed scanner to digitize:<br />Photos<br />Sketches<br />Illustrations<br />B...
Preparing Images<br />Photography Tips<br />Light <br />Brightly lit subjects photograph better<br />Indirect lighting<br ...
Preparing Images<br />Web File Formats:<br />GIF – Graphics Interchange Format<br />Non-photographic images<br />Lossless<...
Preparing Images<br />Web File Formats:<br />JPG – Joint Photographics Experts Group<br />Photographs<br />Use when color ...
Preparing Images<br />Web File Formats:<br />PNG – Portable Network Graphics<br />Designed to replace the older and simple...
Compression<br />Definition:  <br />The image files do not contain ALL of the color and brightness information for each pi...
Compression<br />Lossless compression algorithm<br />Reduce file size with no loss in image quality<br />Generally, do not...
Compression<br />Lossy compression algorithm<br />Take advantage of the inherent limitations of the human eye and discard ...
Preparing Images<br />Thumbnails<br />Smaller versions of full picture<br />Use on main page to lessen page load<br />Use ...
Ownership, Permission and Copyright Issues<br />Copyright<br />You MUST identify author of every element used<br />No one ...
Resources<br />Linda C. Morosko, 2008 	The Web Wizard’s Guide to Web Design, James G. Lengel<br />Writing for the Web<br /...
Upcoming SlideShare
Loading in...5
×

Week 6 4 Preparing The Elements Numbers

229

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
229
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Week 6 4 Preparing The Elements Numbers"

  1. 1. Preparing the Elements<br />Gathering and PreparingText, Numbers and Images<br />Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel<br />
  2. 2. Numbers<br />A couple of standards:<br />Spell out numbers up to nine (one, two, three…)<br />Use numerals for 10 and above<br />Use comma separators (1,000)<br />Or country specific format<br />When using spreadsheets (MS-Excel):<br />Keep labels short<br />Eliminate blank rows and columns<br />Save as tab-delimited text file<br />Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel<br />
  3. 3. Preparing Numbers<br />Numbers are generally displayed in :<br />Tables<br />Graphs<br />Charts<br />Combination of the three<br />Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel<br />
  4. 4. Preparing Numbers<br />Tables<br />Best for items that need to be referenced and looked up individually<br />Graphs<br />A picture’s worth a thousand words<br />Great for showing trends over time, comparisons, distributions<br />Save graphs as images and then place them on a page<br />Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel<br />
  5. 5. Preparing Images<br />Most sites contain images<br />Could be as small as a company logo<br />Banner ads across the top of the screen<br />News photos<br />Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel<br />
  6. 6. Preparing Images<br />Image sources:<br />Adobe Illustrator – save the file as an Encapsulated Postscript file (.eps)<br />Photographs - they would need to be scanned (.jpg)<br />Pencil Sketches - they would need to be scanned (.jpg)<br />Illustration from the company’s website<br />Pictures from the company’s brochures/catalogs<br />Videotape – extract pictures<br />Photo of the company’s headquarters – on a sunny day<br />Any photo requested by the company<br />Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel<br />
  7. 7. Preparing Images<br />Scanning<br />Use a flatbed scanner to digitize:<br />Photos<br />Sketches<br />Illustrations<br />Books<br />Magazines<br />Small objects<br />Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel<br />
  8. 8. Preparing Images<br />Photography Tips<br />Light <br />Brightly lit subjects photograph better<br />Indirect lighting<br />Tight:<br />Fill frame with subject<br />Small groups <br />Sight:<br />Avoid distracting backgrounds<br />Write:<br />Don’t photograph text<br />Uptight:<br />Candid vs. posed<br />Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel<br />
  9. 9. Preparing Images<br />Web File Formats:<br />GIF – Graphics Interchange Format<br />Non-photographic images<br />Lossless<br />Images with lines and areas of solid color<br />Important to retain the lines of the image, the color is secondary<br />Think logos and clip-art<br />Only stores 8 bits pixel (256 colors)<br />Technically, must pay royalties when using GIF<br />Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel<br />
  10. 10. Preparing Images<br />Web File Formats:<br />JPG – Joint Photographics Experts Group<br />Photographs<br />Use when color is more important than the lines of the image<br />Lossy technique - Decompressed image not same as original<br />Exploits human vision characteristics<br />Small changes in brightness more easily perceived than small changes in color<br />Trade image size for image quality<br />Stores 24 bits per pixel (16 million color)<br />Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel<br />
  11. 11. Preparing Images<br />Web File Formats:<br />PNG – Portable Network Graphics<br />Designed to replace the older and simpler GIF format<br />Has great compression features (makes smaller file sizes)<br />Has strong transparency options<br />Lossless<br />Supports 48-bit true color<br />Format readable by all apps the same<br />Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel<br />
  12. 12. Compression<br />Definition: <br />The image files do not contain ALL of the color and brightness information for each pixel in the image.<br />Files are smaller than if uncompressed<br />An uncompressed 320 x 240 pixel image:<br />Contains 225,000 bytes uncompressed <br />Takes 33 seconds over 56K to download<br />Compressed<br />27,000 bytes compressed<br />3 seconds over 56K<br />Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel<br />
  13. 13. Compression<br />Lossless compression algorithm<br />Reduce file size with no loss in image quality<br />Generally, do not compress to as small a file as a lossy method<br />When image quality is valued above file size, lossless algorithms are typically chosen.<br />Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel<br />
  14. 14. Compression<br />Lossy compression algorithm<br />Take advantage of the inherent limitations of the human eye and discard information that cannot be seen. <br />Most lossy compression algorithms allow for variable levels of quality (compression) and as these levels are increased, file size is reduced. <br />At the highest compression levels, image deterioration becomes noticeable. This deterioration is known as compression artifacting.<br />Use when color is more important than detail<br />Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel<br />
  15. 15. Preparing Images<br />Thumbnails<br />Smaller versions of full picture<br />Use on main page to lessen page load<br />Use them as links to a larger picture<br />Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel<br />
  16. 16. Ownership, Permission and Copyright Issues<br />Copyright<br />You MUST identify author of every element used<br />No one can publish on the Web anything belonging to anyone else without their permission<br />No copyright registration or notice is required<br />Authors own their work automatically<br />Registration is a good idea for settling legal claims<br />“Fair use” exception – students in class settings, completing work seen only by a teacher and classmates, may use copyright works without permission<br />US Copyright Office: http://www.copyright.gov/<br />Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel<br />
  17. 17. Resources<br />Linda C. Morosko, 2008 The Web Wizard’s Guide to Web Design, James G. Lengel<br />Writing for the Web<br />http://www.useit.com/papers/webwriting/<br />Web Style Guide<br />http://webstyleguide.com/graphics/index.html<br />

×