Building Better Tubes

Building Better Tubes

Lecture outline

Covered in this lecture:

  1. Web layout and navigation
  2. Web usability concerns
  3. CSS positioning

Full lecture slides will be available the day of the lecture.

Quiz Rules

  1. You will have only thirty minutes to complete the quiz. Keep an eye on the time due, as late submissions receive a zero.
  2. This quiz is open book, but not open laptop meaning you can draw on your notes as much as you like.
  3. Any words that are not your own must be cited using a proper format — for example (Author) or (Reading about ___). Any plagiarism will result in a grade of zero. No exceptions.
  4. Any talking, texting, messaging, paging, or secret-tiny bluetooth resulting in communications with friends or classmates will result in a grade of zero. No exceptions.
  5. Please answer any questions in full sentences.

HTML5 Question

Please use the following elements — <section>, <aside>, <nav>, <h1>, <p>, <a> — to suggest the most semantically appropriate structure for the content pictured above. Your answer should describe the structure of the entire pictured page using these elements.

For example:

  • <section>
    • <nav>
      • <a> Home
      • <a> About Me
      • <a> ...
  • <aside> ... etc

Quiz time

You have 30 minutes.

P2 Grades

P2 grades will be released by the end of the weekend, an email will accompany the release of grades with comments on common concerns that came up in grading.

P3: Final Part

As we were a little late in getting our feedback to you on P3 Part 3, we will be giving you an extra day to update your final P3 deliverables in case you want to fix up something you may have missed.

IAT-235 — P4: Web

Offline vs Online

How can the combination of offline and online information design help Vancouver residents learn about these 'drivers of change'?

P04 Final

For those who want to attend the Hubbub (Thursday, April 9th) we will have presentations available in lecture on April 9th (last class). Otherwise you will present in the labs.

Hubbub plan:

  • 9:00 — Registration
  • 9:30 — Showcase Opens
  • 10:00 — Welcome & Guest Speaker
  • 10:15 — Champions Announced & Student Pitches
  • 10:30 &mdahs; Showcase
  • 11:45 — Closing & Student Awards Announced
  • 12:30 — End

P4 Teams

You may form new teams for P4 if you would like. Please note that if you are not in lab this week, we will not help you join a team.

Team Contracts

The P4 conflict agreement

  1. Benefit of the doubt: Team member must be given 48 hours to respond via email with reasons for their behaviour. Clearly cite the contract.
  2. Request instructor support: A team member contacts Andrew with details of the problem, and how it has been dealt with thus far. Provide all evidence.
  3. Request for removal: The team contacts Andrew with details of the problem, and depending on the sitation, team member(s) are removed from the team.

Any questions?


One way to move things on the web

Some options:

  • static — the default, things occur as ordered in the HTML
  • relative — similar to static, but allows for further instructions through 'left', 'right', 'top', 'bottom' to move relative to its original position
  • absolute — positions relative to the last positioned parent through 'left', 'right', 'top', 'bottom'
  • fixed — positions relative to browser window and will not scroll (stays in view)

Positioning Demo

Oops, this code did not quite load. Please view it at


The order in which our CSS is read

Oops, this code did not quite load. Please view it at

Code Tutorial

Please prepare for this week's tutorial by downloading the starter files at

Next week's lecture

I've fallen, and I can't get up!

Next week is support week. For the lecture you will be given an opportunity to voice what you would like covered or re-covered. Please ask any and all pending questions on the online quiz available after lecture.

Next week's lecture

You choose!

We're covering what you are requesting. Now is a good time to ask about the stuff you see yourself needing to do (within reason).