IAT-235: 10 Help I Have Fallen

IAT-235: 10 Help I Have Fallen — A slide deck

Help! I've Fallen! And I Can't Get Up!

Lecture outline

This lecture is special. I will be answering most questions relating to your project or web concerns that you have encountered to this point.

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

Your tech support week

First half (Recap):

  • Project Questions
  • Semantics and HTML
  • Styling and CSS

Second half (Recap ++):

  • Advanced Questions
  • Grids and Responsiveness

Project Questions

Do we need to use the existing branding/logo for Vancouver? and how do we use their info without their brand?

No, you are not required to use their branding, and I would request that you do not.

How many pages (or content) do we need, and do more pages (or content) equal higher grade?

There is no minimum or maximum, but more pages do not equal a higher grade. Effective use of content will equal a higher grade.

How much real information should go on the site?

All of it should be real information.

Can we edit or make our own content?

Yes, but be mindful of your time and energy.

Should the website look like P02?

Maybe. Because you have developed aesthetics and may redevelop structure beyond P02's consideration, the final website should far exceed P02's design quality in that regard.

How Consistent Should the Offline/Online Materials Be

Highly consistent. Keep in mind the goal of this project is to direct people to the website using your 'offline' materials. If the website looks significantly different or does not make mention or reference the offline materials, then people will be confused with their connection.

IAT-235 — P04: Rubric

Any lingering project questions?

HTML Questions

For the love of chocolate Andrew, what do you mean by semantics?!?!

What would you expect if you saw:

<house>
<windowsill status="sunny">
<cat></cat>
</windowsill>
<bed type="human">
<dog></dog>
</bed>
<wall holes="5">
<mouse>
<cheese type="mozzarella"></cheese>
</mouse>
</wall>
</house>

How do we get a more detailed definition of elements?

For that I highly recommend HTML5 Doctor and the Mozilla Developer Network.

Different Elements, Different Meaning

With the help of HTML5 Doctor and your smarts, please answer the following questions:

  1. What are the differences between the section, article and div elements?
  2. How are the head and header elements defined differently?

When is using <br> okay?

The <br> element defines a line break in text. This only really makes semantic sense in a few occassions. Some examples:

  • In an address:
    352 Main Street<br>
    Vancouver, BC<br>
    V2V 2V2
  • In a poem:
    Another night deprived of slumber<br>
    Hours passing without number<br>
    My eyes trace round the room I lay...

The Ideal <table>

<table>
<thead> <!-- defines the 'headers' of our table -->
<tr> <!-- states that we have started a table row -->
<th>Course</th> <!-- this defines a table header cell -->
<th>Colour</th>
</tr>
<tbody> <!-- defines the 'body' of our table -->
<tr>
<td>IAT-102</td> <!-- a regular table cell -->
<td>Mauve</td>
</tr><tr>
<td>IAT-235</td>
<td>Fluorescent Green</td>
</tr>
</tbody>
</table>

Linking Pages

Unlike a link within the page, linking between pages involves knowing where files are and their names.

Consider this file structure:

  • other.html
  • pages
    • index.html
    • review.html
    • contact.html
<!-- From the index.html page -->
<a href="review.html">Review</a>
<a href="contact.html">Contact</a>
<a href="../other.html" target="_blank">Other</a>

<!-- From the other.html page -->
<a href="pages/index.html">Home</a>
<a href="pages/contact.html">Contact</a>

<iframes>

To be able to embed content in an iframe, the other site must allow you to embed content.

Our course site:

Trying to load google.com:

ID vs. Class

What is the difference?

IDs (#id):

  • Can only appear once per page
  • Each element can only have one
  • Should describe the context

A class (.class):

  • Can appear multiple times per page
  • Each element can have multiple
  • Should describe its purpose

HTML Separation

A good question from one of you was: Like we seperate our CSS into different files, can we seperate our HTML?

Sadly, no. Not without another (server-side) language.

Any lingering HTML questions?

CSS Questions

Why Use Normalize.css?

normalize.css ensures that all browsers will (by default) render our page fairly consistently without having applied any styling. It makes it easier to ensure consistent styling once you start adding your own.

Does the Order Matter?

Let's assume that we're loading up our stylesheets as follows in the HTML example below:

If the three files set the colour of .button as listed, what colour will the button be?

<link href="css/normalize.css" rel="stylesheet">
<link href="css/grid.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
.button { color: black; } /* normalize.css */
.button { color: blue; } /* grid.css */
.button { color: pink; } /* main.css */

Does the Order Matter?

If I am applying a number of properties to one selector, the order does not matter unless we are using vendor-prefixed properties or we apply the same property twice.

.button {
color: black;
font-size: 2rem;

/* Note we have set the color again here */
color: pink;
}

Ems and Rems and Text

As a general rule of thumb, setting your paragraphs to 1rem and scaling other things accordingly is better practice.

Ems (listen to their parent for size)

50 pixel font size

0.8em font-size
0.8em font-size
0.8em font-size
0.8em font-size

Rems (root-em, listen to the browser for size)

50 pixel font size

0.8rem font-size
0.8rem font-size
0.8rem font-size
0.8rem font-size

Units in CSS

As much as possible, we want to work with responsive units in our pages, but keep in mind that this is not a requirement, but a recommendation.

/* vh & vw units correspond to a percentage of the viewport height and width */
width: 50vw; /* 50% of viewport width */

/* % units correspond to a percentage of the parent's size */
width: 25%; /* 25% of the parent element's width */

The Box Model

content-box vs border-box

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Block, Inline, and Inline-block

Block elements break to the next line, can have a height and width, and by default are full-width.

Block One
Second Block

Inline elements stay in-line with other inline elements, and listen to their content for their sizing.

Inline One
Second Block

Inline-block elemetns stay in-line with other inline elements, can have a height and width, and listen to their content for their sizing.

Inline-block One
Second Inline-block

Centering Things

How you center inline elements and block elements differs:

I'm an inline element that needs centering
I'm a block element that needs centering
.center-inline-parent {
text-align: center;
}

.center-block {
margin: 0 auto;
}

Centering Things in a Flexbox

Centering things in a flexbox can be significantly easier.

Center me both horizontally and vertically please!
.flexbox {
display: flex;
align-items: center;
justify-content: center;
}

Any lingering CSS questions?

Advanced Questions

Backgrounds

Let's add some backgrounds to our box below!

Large Hover Effects

hover link

Transforms

CSS transforms — a good overview at CSS Tricks — provide functionality similar to that which you might find in other graphics rendering or manipulation programs.

hover link

Making Tables Responsive

This is sadly a more complex topic than we can cover today, but I would highly recommend the CSS Tricks article covering approaches to responsive data tables. It provides a variety of different approaches, the majority of which work purely with CSS and HTML.

Javascripting

Once the page has loaded, you can mess with it

To achieve effects like smooth-scrolling and dropdowns, we need to be able to alter the page once it has loaded.

// Javascript allows us to alter the page AFTER it loads
// Let us take a look at this slide-deck WITHOUT JavaScript

Wizard of Oz

Since we haven't taught you everything

As discussed, there are some things you won't be able to do with what we have taught you. Avoid over-extending yourself unless you feel comfortable, as we are more interested in seeing a series of functioning responsive pages over broken though slightly-shinier pages.

When in doubt, aim to get the process working as intended rather than making the functionality super-slick.

Any other advanced questions?

Grids Questions

Mobile First or Desktop First?

When working on our stylesheets, you can either start from the smallest size and work your way up (mobile first), or start at a large size and work your way down (desktop first). It is ultimately up to you which approach you take, but keep in mind that the site needs to respond to different sizes effectively.

Should We Code for Devices Separately?

No. A reminder that when building responsive websites we are not coding "for a device" but are instead coding for the content to best reorganize itself. One stylesheet should be sufficient for your entire website to be responsive.

Media Queries

You can make multiple declarations using and (examples below). More good explanation of media queries at CSS Tricks.

@media screen and (max-width: 30em) and (orientation:portrait) {
/* This CSS will only render on screens under a width of 30em in portrait orientation */
}

Any lingering grids or responsiveness questions?

Grids Recap

Let's revisit our grids tutorial

We will:

  • Revisit positioning content in the grid
  • Ensuring the grid reliably collapses

I Need Help

Sites to support you

Next week's lecture

  • The coding quiz
  • More HTML/CSS

The Coding Quiz

Some notes

  • You will have 1 hour
  • Only on HTML+CSS covered thus far
  • Laptops are required

There will be 3 questions:

  1. Debugging some problematic HTML+CSS
  2. Semantically marking up content
  3. Styling an item to specification

Announcing Tech Support Times

By end-of-day tomorrow I will send out an announcement detailing (a) how to prepare for the quiz, as well as (b) tech-support specific office hours. These are times during which I can help with code-specific questions or concerns. No critique is provided.

This week's MEGA-LAB

The low-down

  • Crits
  • Technical support

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Tuesdays from 3:00-3:50pm and Thursdays from 12:30-1:20pm at the Surrey campus mezzanine.
  • ac.ufs@h_werdna
1/1