Notes for Class No. 7

Introduction to GitHub, CSS Media Queries, and Google Web Fonts

Tuesday, September 22, 2015

A video of this class is (or will be) posted at: http://echo360.uml.edu/heines201516/guiprogramming1.html

Handouts and Materials

Openings / Announcements / Reminders

Assignment No. 4 on GitHub is now posted

note that this assignment is due next Tuesday, September 29
as with all of the assignments, it looks simple, but there is more to it than meets the eye

Reminder to those of you who already have GitHub accounts: you may want to create another free account just for this course

Assignment No. 5 on Formatting Text is also now posted

Thank you to those of you who corrected your Piazza names

The quiz on selectors that I mentioned last week will be in our next class, Thursday, September 24th

Class Notes

Related reading for this class: Kelleher Git Video

Review from last class ...

Pseudo-Elements

:first-letter
:first-line

Paragraph Spacing

line spacing = “leading”
- CSS property is line-height
normal line height is 120% — why?
- “it’s not the percentage that’s inherited; it’s the calculated line height.” (near bottom of p. 129)
alignment: text-align
- left, right, justify, center

“ragged” vs. justified — readability considerations

indentation: text-indent
margins
- TRBL = “top right bottom left”

New material begins here ...

text formatting shorthand — the font property (p. 131)
- lets you combine the following properties into a single line
  - font-style
  - font-variant
  - font-weight
  - font-size
  - line-height
  - font-family
- example: font: italic bold small-caps 18px/150% Arial,Helvetica, sans-serif;
  - creates bold, italicized type in small caps, using 18px Arial (or Helvetica or sans-serif) with a line height of 150 percent
- rules:
  - you don’t have to include every one of these properties, but you must include the font size and font family
  - use a single space between each property value
  - use a comma only to separate fonts in a list like this: Arial, Helvetica, sans-serif
  - when specifying the line height, add a slash after the font size followed by the line-height value, like this: 1.5em/150% or 24px/37px
  - the last two properties must be font-size (or fontsize/line-height) followed by font-family, in that order
    - all the other properties may be written in any order
    - example: both of the following are the same
      font: italic bold small-caps 1.5em Arial; font: bold small-caps italic 1.5em Arial;
  - omitting a value from the list is the same as setting that value to normal

Lists

list-style-type

[figure source: CSS: The Missing Manual, by David Sawyer McFarland, Fig. 6-10, p. 134]

many other types available, including list-style-type: none

list-style-position
- outside
- inside
list-style-image
- url( path/graphicfile.ext )
using span instead of applying a style to an li tag

Note that when manipulating class names in JavaScript, the class name property is in camel case: className

this is called the “IDL” property name
IDL stands for the Object Management Group’s “Interface Definition Language”

This concludes our introduction to CSS

we will of course see more, but at this point you should have all the information you need to do Assignment No. 3
that assignment is due next Tuesday

Introduction to Git and GitHub — Assignment No. 4

As requested at the end of our last class, you were to do the following before this class, as we will use GitHub in a future assignment

install Git on your system from http://git-scm.com/ if you do not already have it installed
create a GitHub account at https://github.com/ if you do not already have one
- if you have a GitHub accound for your work, you might want to create another one just for this class
watch the screencast Introduction to GitHub and follow along by creating your own GitHub Pages site
- the GitHub repository created in the screencast is at https://github.com/curran/myPage
- the created page can be viewed at http://curran.github.io/myPage/
- note that these URLs are case-sensitive!
try to create a simple page in branch gh-pages that can be viewed from github.io

Problems and/or questions?

See details in Assignment No. 4 write-up

Google Web Fonts

Another interesting issue from student Bunlong Heng (in the 2013 offering of this class)

@font-face only works with some TTF fonts

Web fonts are more reliable

introduction to the Google web fonts API
- https://developers.google.com/fonts/?csw=1
quick start example
- https://developers.google.com/fonts/docs/getting_started#Quick_Start

Basic usage

find a font you like on the Google Fonts website — http://www.google.com/fonts
click the "quick use" button — the square with an arrow pointing to the right (the second button as of September 29, 2014)
copy the link code in Step 3 that you find there

<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'>
if you want to link to the font from within a CSS file, use the following format instead:
- @import url( //fonts.googleapis.com/css?family=Kit+One ) ;

use the font family in your code as normal
- font-family: 'Kite One', sans-serif;
- note that when a font name contains a space, that space is a + sign in a URL, but must be a space in the CSS font-family value

Introduction to Media Queries

A nice simple example of the use of a media query at:

https://jesseheines.com/compthinkinsound/ctis-home.jsp

The code in:

https://jesseheines.com/compthinkinsound/css/ctis-home.css

is as follows.

/* iPhone 5 reports max-width of 980 in both portrait and landscape modes */ @media (max-width: 980px) { body { margin: 0px ; } #home, #authors, #soundthinking { font-size: 18pt ; } nav { width: 150px ; } }

Another cool thing about this page is that regardless of how tall the page is, the left banner background always extends all the way to the bottom of the page

this is done with the technique described on pages 432-433 of the CSS3 textbook
here is the code in the CSS file:

nav { width: 150px ; margin-top: -1px ; background-color: RGB(1,83,141) ; position: fixed ; float: left ; height: 100% ; text-align: center ; background: url( /CompThinkInSound/images/solid_OUPblue_150x10.jpg ) repeat-y left top ; }

Yet another is that the footer always stays at the bottom of the page, regardless of its size

the technique for doing this is described on page 514 of the CSS3 textbook

UMass Lowell Dept. of Computer Science

91.461 GUI Programming I

Fall 2015 Semester, Section 201

Prof. Jesse M. Heines