Graphics and Fonts Computer Science and Engineering ■ College of Engineering ■ The Ohio State University

Lecture 11

Colors in CSS Computer Science and Engineering ■ The Ohio State University

□ □

Colors used for fonts, borders, background RGB as decimal (0-255), percentage, or hex rgb (255,0,0) /*pure red*/ rgb (100%,0%,0%) #ff0000

□

HSL (Hue, Saturation, Light) ■Hue (0-360) is angle on color wheel: 0 is red, 120 green, 240 blue ■Saturation & light are both %'s hsl (0,100%,50%) /*full bright red*/

□

Alpha channel (transparency): 1 is opaque! rgba (255,0,0,0.5) hsla (0,100%,50%,1)

RGB Cube Computer Science and Engineering ■ The Ohio State University

http://www.flickr.com/photos/ethanhein/3103830956/

HSL Color Wheel (100% Sat.) Computer Science and Engineering ■ The Ohio State University

http://www.erinsowards.com/articles/2011/01/colors.php

HSL Grid for Red (ie 0,x,y) Computer Science and Engineering ■ The Ohio State University

(0,75%,88%)

(0,100%,50%)

(0,0%,25%)

Color Depth Computer Science and Engineering ■ The Ohio State University

□ "Depth" = # of bits in representation ■ 8 bits ➔ 256 different colors ■ 24 bits ➔ 16,777,216 different colors
 (eg 8 bits each for r,g,b) □ Alpha may be (incorrectly) included ■ rgba is a point in 4-dimensional space □ Problem: image color depth > display

color depth

■ Quantization: each pixel gets closest available color (leads to banding) ■ Dithering: add noise, which looks better!

Quantization vs Dithering Computer Science and Engineering ■ The Ohio State University

quantized original

dithered

Quantization vs Dithering Computer Science and Engineering ■ The Ohio State University

www.coffeecup.com/help/articles/dither-modes-in-animation-studio/

HTML Tag Attributes Computer Science and Engineering ■ The Ohio State University

□ src: location of image file □ width/height: ■ Area in window to reserve for image ■ Image is scaled to those dimensions ■ These attributes affect browser flow, regardless of when/if image is displayed □ alt: text to show if graphic can not be

displayed or seen (ie alternative) □ title: text to augment displayed graphic (eg tooltip)

Image Representation Computer Science and Engineering ■ The Ohio State University

□ Raster vs vector graphics ■ Raster: stored pixel-by-pixel ■ Vector: mathematical description □ Compression of raster images ■ Lossy: better compression, lower quality image ■ Lossless: largest file size, best quality

Major Formats Computer Science and Engineering ■ The Ohio State University

□

JPEG ■ ■ ■

□

PNG ■ ■ ■

□

Raster, lossless (often high) compression Variable depth, has transparency Good for icons and crisp lines

GIF ■ ■ ■

□

Raster, lossy compression 24 bit, no transparency Good for photos, gradual gradients

Raster graphics, lossy compression (oldest) 8 bit (ie very small files) Frame-based animation (please avoid!)

SVG ■

vector graphics (newest)

Scaling Images Computer Science and Engineering ■ The Ohio State University

□

Vector graphics scale perfectly

□

Raster images should be pre-scaled □ □

Width (height) attributes of image tag should match actual width (height) of image Why?

Alternative: CSS Computer Science and Engineering ■ The Ohio State University

.deleteButton { background: -webkit-linear-gradient(top, #be6868 0%, #941b17 50%, #880d07 50%, #be483c 100%); border: 3px solid #000; color: #fff; cursor: pointer; font-size: 15pt; padding: 10px 34px; text-shadow: 0 -1px 0 #000; border-radius: 13px; box-shadow: 0 1px 0 #454545; }

Recall: Blocks, Inline, and Flow Computer Science and Engineering ■ The Ohio State University

flow inline

body

paragraph heading horz rule

blocks

Floating: Remove From Flow Computer Science and Engineering ■ The Ohio State University

width

Floating: Overlays Block Computer Science and Engineering ■ The Ohio State University

Problem: Blocks Below Computer Science and Engineering ■ The Ohio State University

□ Floating element may be taller than

containing element □ Undesirable, eg for footer that should be below everything including floats

problem

Solution: clear Computer Science and Engineering ■ The Ohio State University

□ Styling for block element after float #footer { clear: left; } □ Requires that side to be clear of floats

id="footer"

CSS Units for Size Computer Science and Engineering ■ The Ohio State University

□ "Absolute" units (but browsers cheat) ■ in, cm, mm ■ pt (point) = 1/72 inch, pc (pica) = 12 pts □ Absolute (for a given resolution) ■ px (pixels) □ Relative to current font ■ em = width of 'm' in current font ■ ex = height of 'x' in current font □ Relative to parent (or ancestor) size ■ % □ Standard advice for fonts: ■ Prefer % (or em) for user-controlled scaling

Fonts: Concepts Computer Science and Engineering ■ The Ohio State University

□ Fonts are a key part of visual design ■ Serious, technical, whimsical, friendly… □ Font families (should be "typefaces") ■ Arial, Helvetica, Times, Courier, Palatino, Garamond, Verdana, Tahoma, Lucida,… □ Serif vs sans-serif □ Variable vs monospace letter spacing □ Line spacing and x-height ■ Larger x-height = easier to read ■ Larger x-height requires more line spacing

Font Families Computer Science and Engineering ■ The Ohio State University

□ De gustibus non est disputandum □ Still, some common opinions: □ Less is more: Use fewer fonts/sizes ■ Cohesive appearance □ Helvetica/Arial: clean but ubiquitous ■ They are identical / completely different □ Times is hard to read (on a monitor) ■ Better for print □ Comic Sans is for 12-year-olds and

owners of NBA basketball teams

Identical & Completely Different Computer Science and Engineering ■ The Ohio State University

Fallback Fonts Computer Science and Engineering ■ The Ohio State University

□ Not sure what fonts host OS will have □ CSS font-family: List alternatives in

decreasing order of preference

font-family: Helvetica, Arial,
 "Liberation Sans", sans-serif;

□ Always end with one of 5 generic fonts: ■sans-serif (Arial?) example ■serif (Times New Roman?) example example ■monospace (Courier New?) ■cursive (Comic Sans?) example ■fantasy (Impact?) example □ OS (and browser) determine which font

family each generic actually maps to

CSS3: Web Fonts @font-face Computer Science and Engineering ■ The Ohio State University

□ Looks like a selector, but is a "directive" @font-face { font-family: HandWriting; src: url('PAGSCapture.ttf'); } □ Font family then available in rest of CSS p { font-family: HandWriting; … } □ User agent dynamically downloads font □ Different syntaxes for font files ■.ttf, .otf, .eot, .woff, .svg, … □ Beware: copyright issues! ■See http://www.google.com/webfonts

Summary Computer Science and Engineering ■ The Ohio State University

□ Colors: RGB vs HSL □ Images ■ Formats jpeg, png, gif, svg ■ Tradeoffs of size, quality, features □ Floating elements ■ Removed from flow, layered on top □ Fonts ■ Fallback fonts to account for uncertainty ■ Web fonts for dynamic loading

Static Site Generation Computer Science and Engineering ■ College of Engineering ■ The Ohio State University

What is Static Site Generation? Computer Science and Engineering ■ The Ohio State University

□ Use a program to produce HTML pages ■ Analogous to compiling programs ■ Source code ! machine code □ Development cycle: ■ Write source ■ Compile ■ Test/inspect result □ Examples ■ Jekyll (used for "GitHub Pages") ■ Middleman ■ Lots more, see: staticsitegenerators.net

Picture Computer Science and Engineering ■ The Ohio State University

.md

.html

.erb . .css .scss source files

generated web site

Middleman: A Ruby Gem Computer Science and Engineering ■ The Ohio State University

□ Project is a directory (eg myproj) $ middleman init myproj ■Configuration files, README, Gemfile, etc □ Create source files in myproj/source ■Subdirectories for CSS, images, etc □ Compile all the source files $ bundle exec middleman build □ Result is placed in myproj/build □ Copy site to some visible location $ rsync -avz --del myproj/build ~/WWW □ Or preview locally (live reload, no build) $ bundle exec middleman server

Why Bother? Computer Science and Engineering ■ The Ohio State University

1. Code reuse and single-point-of-control

over change 2. Authoring of content in a language that is more human-friendly 3. Parameterized generation of markup and content Let's look at each of these benefits in turn…

Motivation #1: Visual Identity Computer Science and Engineering ■ The Ohio State University

□ Common headers & footers ■ Example: OSU web sites share nav bar ■ Example: course web site □ Duplication of code is EVIL ■ Corollary: cut-and-paste is EVIL ■ Destroys single-point-of-control over change □ Solution: ■ Put common HTML in one file (a "partial") ■ Every document includes that file

ERb: Embedded Ruby Computer Science and Engineering ■ The Ohio State University

□

General templating mechanism ■ ■

A string (usually contents of a file, "template") Escaped bits of ruby □ □ □

□

execute ruby code ("scriplet") replaced by result of expr is a comment

Example: a text file

This is some text. Current Time is !

□

Process using erb tool to generate result $ erb example.txt.erb

□

Naming convention: filename.outputlang.erb ■

□

Example index.html.erb

Many alternatives, eg HAML

Generation of Site Computer Science and Engineering ■ The Ohio State University

□ Source files in myproj/source $ ls source index.html.erb syll.html.erb meet.html.erb □ Compile $ bundle exec middleman build □ Result after building $ ls build index.html meet.html syll.html

Partials Computer Science and Engineering ■ The Ohio State University

□ A document fragment included in other

documents □ Include in erb using the partial function …

□ Partial's filename begins with '_' ■ie _navigation.erb … "Syllabus", :amount => 34 } %>

□ In partial: access variables Costs

Problem Computer Science and Engineering ■ The Ohio State University

Guarantee every page includes partial(s) Partials don't ensure consistent page structure across the site □ Want every page to look like: □ □

Meetings …

Solution: Layout Computer Science and Engineering ■ The Ohio State University

□ □ □

HTML formed from: Layout + template Layout is the overall structure of the HTML page File: layout.erb … etc

□ □

Template replaces layout's yield Layout is where you put site-wide styling

■Eg navigation bar, div's with CSS classes, footers

Page-Specific Data in Layout Computer Science and Engineering ■ The Ohio State University

□ Some layout content is page-specific ■ Example: in document's head □ Solution: Ruby variable current_page ■ Example: current_page.path □ Template contains "frontmatter" that sets

the value of current_page.data ■ In template (contact.html.erb) ;;; "title": "Contact Information" ;;;

■ In layout (layout.erb)

Generation of Site with Layouts Computer Science and Engineering ■ The Ohio State University

□ Layout in source/layouts/layouts.erb $ ls –F source index.html.erb meet.html.erb layouts/ syll.html.erb $ ls source/layouts _footer.erb _navigation.erb layout.erb □ Result after building $ ls build index.html meet.html syll.html

Motive #2: Improved Syntax Computer Science and Engineering ■ The Ohio State University

□ HTML tags make content hard to read ■ , , , etc □ Plain text is easier to read □ Some common conventions: ■ Blank lines between paragraphs ■ Underline titles with –'s or ='s ■ Emphasize *words*, _words_, **words** ■ Links in ( )'s ■ Unordered lists with bullets using * or ■ Numbered lists with 1., 2., 3.

Markdown Computer Science and Engineering ■ The Ohio State University

□ Formalizes these ASCII conventions ■ Filename extension: .md ■ Adds some less familiar ones (eg ```) □ Can generate corresponding HTML ■ Other target languages possible too ■ Examples: GitHub readme's, user-posted comments on web boards (StackOverflow) □ See Markdown's README.md ■ Regular view ■ Raw view □ Warning: many Markdown dialects

CSS Limitations Computer Science and Engineering ■ The Ohio State University

□ Literals are common h1 { background-color: #ff14a6; } h2 { color: #ff14a6; } □ Result: Lack of single-point-of-control □ Solution: SASS, allows variables $primary: #ff14a6; h1 { background-color: $primary; } h2 { color: $primary; } □ Preprocessor generates CSS from SASS

Motive #3: Content Generation Computer Science and Engineering ■ The Ohio State University

□ Iterate over an array to create content ■ Example: rows of a table ■ See course web site ■ Partial could be used for (every) row □ Placeholder text and images ■ Many versions of this "helper" are available lorem.paragraphs 2 lorem.date lorem.last_name lorem.image('300x400') #=> http://placehold.it/300x400

More Helper Functions Computer Science and Engineering ■ The Ohio State University

□ Links #=> About □ Assets 'example' %> '35', :class => 'logo' %>

Summary Computer Science and Engineering ■ The Ohio State University

□ ERb ■ Template for generating HTML ■ Scriplets and expressions □ Reuse of views with partials ■ Included with partial (eg