Web Programming @ MIPT, 2015-2016

Image merging

Advantages: single HTTP request, smaller size (in some cases)

• SVG
  • Stacking
  • <use>
  • FontCustom
• PNG, JPG
  • CSS sprites

PNG optimization

• pnglitch helps to understand how PNG works
• optipng - discards garbage and applies multiple brute force compression attempts with different parameters and with the best Zlib codec
• pngquant applies invisible lossy image changes to enable dramatically better compression; generates the best palette.
• npm install optipng pngquant
• Expected impact: 20-70%

SVG: drawing

• Inkscape - open source, GPL
• Adobe Illustrator - proprietary
• Tutorials (basics): 1, 2, 3
• "Trace bitmap" feature (e.g., Inkscape)

SVG optimization

• svgo
• npm install svgo
• Applies transformations, removes garbage
• Expected impact: 30-50%

JPEG optimization

• Easy tool: jpegtran: removes EXIF, some other garbage, applies lossless transformations
• Advanced techniques, such as described here:
  • Targeting 8 pixels grid
  • Simplification of colors
• Expected impact: 1-20%

Adobe Flash (.swf)

Animated PNG

• Modern alternative to GIF
• PNG format extension to allow GIF-like animation
• Fallback to first frame on not supporting engines
• Supported by all browsers except Chromium-derived and IE/Edge

webp

• Advanced image compression format optimized for web
• Official site
• Appeared in 2010, developed by Google
• Similar to JPEG, but supports more features, such as transparency, animation, etc.
• Claims to be much better, but in practice, not significantly
• Supported only by Chromium-derived browsers
• So the plan is to use APNG/webp for complex animations through srcset

<picture>

• Screens of different size and DPI get the same img
• The idea behind <picture> is to make web images responsive (Russian)

<picture>
  <source media="(min-width: 40em)"
    srcset="big.jpg 1x, big-hd.jpg 2x">
  <source
    srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.jpg" alt="">
</picture>

@media

• @media CSS query allows different rules for different media types: screen, printer, speech
• The complete list used to be bigger, but now the standard suggests using media features for finer control

			<link media="screen and (device-aspect-ratio: 16/9) and
  (width>600px) and (pointer) and (scripting)"
  rel="stylesheet" href="example.css">
		

Printer-friendly HTML

• @media print
• .no-print { display: none; }
• .no-page-break { page-break-inside: avoid; }
• .page-break { page-break-before: always; }
• body {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

<video>: mp4

• Official site
• Part of MPEG-4
• Proprietary, covered with patents and involves royalty payments
• Video codec: h.265, h.264
• Audio codec: differs, usually AAC and AC-3
• Supported by all major browsers

<video>: webm

• Official site
• Appeared in 2010, originally promoted by Google
• Open source (BSD license)
• Video codec: VP9 ( VP8 is the previous version, VP10 is upcoming)
• Audio codec: differs, usually Vorbis and Opus
• Supported by all major browsers except Safari and IE/Edge (Edge: in development)

<video>: which format to choose?

• Use <source>:

     <video width="1920" height="1080" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
  </video>

• Use ffmpeg - LGPL engine which supports both formats

Typography

• Good introduction
• Typical digital font is a complex system with vector or raster glyphs, layout scripts, hints, different zoom adaptations, etc. Complexity examples: 1, 2
• Fonts are divided into several categories called typefaces, e.g.
  Sans, Sans Serif, Monospace, Script, Display
• In CSS, typefaces correspond to font-family and @font-face

Lorem ipsum

• Default text placeholder: wiki
• There many online generators, e.g. 1, 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse metus neque, scelerisque quis odio nec, volutpat elementum lectus. Proin ut volutpat tellus. Aenean fermentum, felis et blandit congue, nibh mauris vehicula ante, dapibus vulputate ipsum velit vestibulum odio. Duis nec efficitur quam, nec congue orci. Curabitur eleifend massa orci, vel sagittis odio vulputate et. Proin dignissim faucibus purus at sodales. Duis ultrices nec lorem vitae pretium. Etiam nec euismod felis, non eleifend massa. Etiam scelerisque tincidunt nibh, nec auctor velit ornare nec. Etiam tincidunt, urna in luctus aliquam, quam dui elementum ex, quis pulvinar nisi velit vel leo. Cras pulvinar aliquet orci, in posuere velit finibus eget.

Font formats

• TrueType (.ttf)
• OpenType (.otf)
• Web Open Font Format (.woff, .woff2)
• SVG (.svg) - DIY way

woff2 is the defacto standard.

Accessing fonts

• Google Web Fonts (free)
• FontSquirrel (free)
• DaFont (free)
• TypeKit (shop) and many others
• Draw your own?

Choosing fonts

• See which others choose: 1, 2, 3, 4
• Helvetica is widely used everywhere - this is a last resort.
• For goodness sake don't use Comic Sans (if you want it badly, choose Comic Neue)
• A dose of Russian memes
• So you need a typeface, web version

Iconic fonts

• FontAwesome - most famous icon set

  					       <i class="fa fa-university"></i>

• Fontello - catalogue with many other open source sets

Web design

• General advice (Russian): 1, 2
• Develop the design with tools like Photoshop or Gimp or just a notebook and pencil - then implement it using HTML/CSS
• Use a modular grid, e.g. 960 grid (read the cool slides!)
• Develop several similar layouts for different devices - mobile, tablet, etc.
• Select colors with tools like Adobe Kuler or Paletton ( here is some list)
• Remember about the UX

Next steps

• Train ypur typography skills with the games
• Finish the course by making your project