Pba front end programming
This presentation is the property of its rightful owner.
Sponsored Links
1 / 40

PBA Front-End Programming PowerPoint PPT Presentation


  • 103 Views
  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

PBA Front-End Programming

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


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


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


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


Visual elements


Visual elements


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


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


Visual elements


  • Login