pba front end programming
Skip this Video
Download Presentation
PBA Front-End Programming

Loading in 2 Seconds...

play fullscreen
1 / 40

PBA Front-End Programming - PowerPoint PPT Presentation

  • Uploaded on

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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'PBA Front-End Programming' - amora

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
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 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 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 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 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