BTI220 notes – Thu Aug 8

Print media styles. Maybe an introduction to responsive layout. Exam preview. Last class sessions of the summer semester in BTI220.

.

Reminder – the programming assignment is due on Friday morning

Just a reminder…

The programming assignment is due on Friday August 9, 2013, at 7:00am ET. That’s the morning.

.

Introduction to print media styles

CSS rules on a carefully-designed HTML document enable the document to be printed in a print-friendly format.

Often you remove headers, footers, navigation menus, advertisements, and other content that isn’t suitable for a printed version.

Compare a simple example below, the ‘web’ and ‘print’ versions of the MDN HTML page:

mdn-web mdn-print

.

Read these two articles to learn more about the problem and solution approach.

MDN – Getting started with CSS – Media

Smashing Magazine – How To Set Up A Print Style Sheet

.

Programming code example 

You will recall the ‘original.html’ document that you worked on in Lab 4. The following code example includes a suggested collection of print-friendly style rules.

Responsive 1 – Print-friendly, see ‘styles-print.css’ in the zip file

Note the following about this code example:

  • In ‘original.html’, there are two ‘link’ elements for style sheets, each with a distinct media selector
  • The browser will attach one or the other (mutually exclusive), depending on the browser window width
  • So, for this example, the styles do not cascade (but other examples out there may, or would)
  • Also, compared to the version of ‘original.html’ included with Lab 4, a new ‘div’ was added to hold printer-only content (div class=forPrinter)

There are two rules for styling hyperlinks for print:

When a link appears in body text (i.e. not in a table) a string is added that renders the ‘href’ attribute; see the rule with the ‘a:link:after’ selector. Its ‘content’ consists of a string ” (“, which has an important whitespace separator.

When a link appears in a table, the string is a bit different. The ‘content’ includes a string “\a”, which is a line feed in CSS land. (Yeah, why didn’t they just use “\n”; well, they didn’t, because “a” is hex, and hex a (which is decimal 10) is a line feed in ASCII.)

.

Introduction to responsive layout

Now that you know something about the concept of different style sheets for different media (using the print-friendly example above), it’s time to consider mobile-friendly designs.

Similar to the task above, CSS rules on a carefully-designed HTML document enable the document to be printed in a mobile-friendly format.

Compare a simple example below, the ‘web’ and ‘print’ versions of the ‘Toronto’ page on Wikipedia:

w-web

w-mobile

.

Read these two articles to learn more about the problem and solution approach.

Web Style Guide, chapter 7, Document Design

A List Apart, Responsive Web Design

.

Programming code example 

You will recall the ‘original.html’ document that you worked on in Lab 4. The following code example includes a suggested ‘starter’ collection of mobile-friendly style rules.

Responsive 2 – Mobile-friendly style rules in ‘styles-mobile.css’ in the zip file

Firefox includes a “Responsive Design Mode” view on its developer tools menu. That view enables you to change the browser’s viewport to the dimensions of many of today’s popular mobile devices (iPhone, iPad, etc.). Use that.

.

Exam preview

Your professor hopes that you had a great experience, learned lots, and maybe developed an interest in, or passion for, web programming. The web is where the action is.

The exam will have the same format as the mid-course test – a written portion, and a practical portion. Full details will be published on Sunday, August 11.

In sequence, we covered these topics during the course. You should be prepared to “explain” and “do” any of them.

Internet architecture

  • Internet protocol basics
  • Internet application protocols and services
  • HTTP specifically, and an overview of how it works

JavaScript

  • So… just what is JavaScript?
  • Types
  • Syntax, operators, statements, etc.
  • Objects (including object, array, date, etc.)
  • Functions – which are objects
  • Regular expressions
  • Scope
  • Closure
  • Prototypal inheritance

HTML, and the HTML DOM

  • So… just what is HTML? What is the HTML DOM?
  • Document structure/overview
  • Important elements and using them
  • DOM tree
  • Node, and node types/kinds
  • Modifying the DOM (HTML structure and content) with JavaScript

CSS

  • So… just what is CSS?
  • Rules overview
  • Selectors overview and specifics
  • Declarations
  • Box model
  • Block elements, inline elements
  • Rule categories… normalization, layout, type, color/media
  • Type, introduction
  • Colour, introduction
  • Modifying the DOM (CSS formatting and appearance) with JavaScript

Web client programming topics

  • More DOM modification, continued (which, uh, is the major theme)
  • Events
  • Hyperlinks
  • Images basics
  • Navigation and menus
  • Layout basics
  • HTML Forms
  • Image galleries
  • Ajax, and simulating a call to a web service
  • Media other than images – audio, video, canvas
  • Adaptive and responsive layout for print and mobile targets

.

.

.

.

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: