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

PBA Front-End Programming PowerPoint PPT Presentation

  • 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

PBA Front-End Programming

Visual Elements

Visual elements

Visual elements

  • Why do we actually need graphics on a website…?

Visual elements1

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 elements2

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 elements3

Visual elements

Visual elements4

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 elements5

Visual elements

Visual elements6

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 elements7

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 elements8

Visual elements

  • A chart can help present quantita-tive data to the user

  • Same considerations as for diagrams apply to charts

Visual elements9

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 elements10

Visual elements

  • Still quite a number of technical issues to consider when using graphics

    • Display capacity

    • Bandwith

    • File formats

    • Graphics technology

    • Graphics compression

Visual elements11

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 elements12

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 elements13

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 elements14

Visual elements

  • Gamma – degree of midtone contrast (?)

Visual elements15

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 elements16

Visual elements

Visual elements17

Visual elements

Visual elements18

Visual elements

Visual elements19

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 elements20

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 elements21

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 elements22

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 elements23

Visual elements

Not-so-good for GIF

Good for GIF

Visual elements24

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 elements25

Visual elements

  • http://en.wikipedia.org/wiki/File:Quality_comparison_jpg_vs_saveforweb.jpg

Visual elements26

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 elements27

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 elements28

Visual elements

Visual elements29

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 elements30

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 elements31

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 elements32

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 elements33

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 elements34

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 elements35

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 elements36

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 elements37

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 elements38

Visual elements

  • Login