400 likes | 556 Views
PBA Front-End Programming. Visual Elements. Visual elements. Why do we actually need graphics on a website…?. Visual elements. Just as for colors, a distinct graphic can be part of a corporate identity In general, we use graphics for Illustration Explanation Integration. Visual elements.
E N D
PBA Front-End Programming Visual Elements
Visual elements • Why do we actually need graphics on a website…?
Visual elements • Just as for colors, a distinct graphic can be part of a corporate identity • In general, we use graphics for • Illustration • Explanation • Integration
Visual elements • ”Many children on the African continent suffer from malnutrition, which can be attributed to poor living conditions, climate changes, civil unrest and population growth”
Visual elements • ”Many people find that Puppies are cute, and the prominent eyes, fluffy fur and their childish personalities and behavior support this percep-tion of Puppies”
Visual elements • An illustration can – obviously – convey emotions very effectively • Illustrations should of course be chosen in accordance with the general theme, style and tone of the website • DNA…?
Visual elements • A diagram can help explain complex concepts to the user • However, the complexity of the diagram need not be reduced (no dumbing-down…) • Be aware of physical limitations • Printed material: 300+ dpi (dots per inch) • PC Screen resolution: 80-100 dpi
Visual elements • A chart can help present quantita-tive data to the user • Same considerations as for diagrams apply to charts
Visual elements • General tips on using diagrams/charts: • Trust the reader’s intelligence • Respect the medium • Tell the truth as you see it • Do not bias your data • Be bold and substantial • …and test it!
Visual elements • Still quite a number of technical issues to consider when using graphics • Display capacity • Bandwith • File formats • Graphics technology • Graphics compression
Visual elements • Mainstream PC monitor anno 2011 • 24” size, 16:9 format (approx 20” x 12”) • 1920x1080 resolution • Approx 100 dpi • 24-bit color (16.7 mill hues) • Price: Cheap!
Visual elements • Other displays • Laptop: 12”-17”, around 120 dpi • Tablet: 7”-10”, around 150 dpi (iPad 132) • SmartPhones: 3”-5”, up to 300 dpi (!) • Upcoming resolutions • 2560x1600 (even in 10” tablets!) • QFHD/4K, about 10M pixels (later…)
Visual elements • No reason to rework e.g. a printed image with regards to colors – we can show all colors! • May need to rework resolution • Graphics for the web should be optimised for typical screen resolutions – current recommen-dation is 72 dpi (ppi)
Visual elements • Gamma – degree of midtone contrast (?)
Visual elements • What can we assume about bandwidth…? • Does ”eyerybody” have a broadband (2+ mbps) connection now…? • What about mobile broadband…? • Is the ”penetration” of high-speed access related to e.g. demographic factors?
Visual elements • The more graphics on a web page, the longer it takes to load (duh!?) • BUT • 0,01 sec vs. 0,1 sec, not so important • 1 sec vs. 10 secs, definitely important!
Visual elements • Even with broadband, care must be taken to optimise physical size of graphics • Efficient algorithms for compressing images exist – images can thus be stored as: • Uncompressed • Compressed without quality loss • Compressed with quality loss • Pixel-oriented graphics are called raster graphics
Visual elements • Uncompressed • Saved as ”raw” bitmap • Fixed number of bits per pixel (4-24) • Size only depends on image size • .bmp format (on Windows) • Should never be used on the Web!
Visual elements • Compressed without loss of quality • Several different algorithms (e.g. Lempel-Ziv-Welch, or just LZW) • Used in the GIF image format (and PNG) • GIF only supports 256 colors in an image, but the actual 256 colors can vary • GIF suitable for sharp-edge line art (logo), simple animations, low-res clips (animated GIF) • Not so well suited for high-quality images
Visual elements Not-so-good for GIF Good for GIF
Visual elements • Compressed with (possible) loss of quality • Most common file format is JPEG • Offers image quality vs. file size tradeoff • Compression highly dependent on image content and complexity, can be quite impressive • Can be used for….anything. But where is a non-perfect image acceptable? • Logo, probably not • Photo, probably ok
Visual elements • http://en.wikipedia.org/wiki/File:Quality_comparison_jpg_vs_saveforweb.jpg
Visual elements • Progressive JPEG • Loads successively better versions of the image • Useful for providing ”preview” of a large image • Helps on user impatience • NOTE: Not fully supported by all browsers
Visual elements • Be aware that JPEG is a no-way-back compression of images! • Keep the original material uncompressed, and create suitably compressed JPEG versions as needed
Visual elements • Vector graphics • Defining an image in terms of geometric shapes instead of pixels • No inherent resolution! • Image definition is purely logical (geometric)
Visual elements • Creating vector graphics • Mostly useful for creating complex diagrams, illustrations, etc. • Several professional programs for creating vector graphics exist (Abode Illustrator) • Most common file format is SVG (Scalable Vector Graphics), developed by W3C
Visual elements • Using vector graphics • Can be converted to e.g. JPEG in any desired quality, and then published • Adobe Flash supports vector graphics directly • Some browsers support SVG, but not all • Recommendation: Create source material as vector graphics, publish on the Web as raster graphics
Visual elements • Using video on a Website…why? • Some concepts lend themselves well to ”dynamic” visual presen-tation (complex instructions, sales presentations, etc.) • Users are used to video on the Web (Youtube) • Bandwidth is not really an issue anymore
Visual elements • Using video on a Website…why not? • Producing high-quality video is very costly and time-demanding • Users have higher and higher expectations concerning quality of content • Bandwidth is still an issue
Visual elements • Video uses a lot of bandwidth! • Almost all video formats use some sort of compression • Other factors • Resolution • Frame rate • Content • http://web.forret.com/tools/video_fps.asp
Visual elements • Examples of video bit rates (MPEG2) • Blu-Ray: 40 Mbit • 1080i: 25 Mbit • 720p: 18 Mbit • DVD: 10 Mbit • Standard TV, 576i: 3-4Mbit • 320x240: 0,5 Mbit • BUT, can be reduced with quality loss
Visual elements • Video compression is also very sensitive to content • Compression works by storing differences between subsequent frames • ”Car chase” – poor comp • ”TV speaker” – high comp
Visual elements • Tips on creating video for the Web • Shoot original video – full quality control • Use close-ups – better for low resolution • Use simple backgrounds – better compression • Steady camera – better compression • Avoid zooming and panning – bad for low resolution, bad for compression • Use hard cuts, avoid ”silly” effects – bad for compression