ah teaches information design (Code review lecture)

Code review

Lecture outline

A week to sit down and discuss coding project submissions.

P3 audit

In preparation for our P3 critiques today, please open up your project's pages.github.sfu.ca/.. in Firefox or Chrome. Write your name on a post-it and attach it to the computer monitor.

In additional tabs, please open:

  1. The source code for the page (right-click and view source)
  2. A copy of the page in the responsive viewer — ah.link/rv
  3. The code validator — ah.link/v

Process

Please make sure to include your name as part of your comments and be clear what you were commenting on (in case people need to follow-up).

After each prompt you will:

Valid HTML and CSS

Open the tab with the validator and run the validator on your page.

Validator password is:

After starting the validator please head to the next project (to your right).

Semantic Elements

Are the following elements used appropriately?

If using <br>, do they define a line break?

<p class="address">
SFU Surrey<br>
12747 102 Avenue<br>
Surrey, BC
</p>

Are ID's — <p id="name_of_this"> — for elements uniqe?

<!-- ID attributes must not be the same -->
<h2 id="introduction">Introduction</h2>
<h2 id="kittens">Kittens</h2> <!-- If IDs are used as below, it is likely a good case for using a class -->
<section id="banner_style"></section>
<section id="banner_style"></section>

You have...

Semantic Elements

Part 2

Are the following elements used appropriately?

If using a <figure> is there a <figcaption>?

<figure>
<img src="robot.jpg" height="640" width="480" alt="A blocky robot with a menacing expression and glowing red eyes">
<figcaption>Be wary of robots like these</figcaption>
</figure>

Are <section> elements used, and do they contain a heading and related content?

<section>
<h2>Photos of dangerous robots</h2>
<img src="robot.jpg" height="640" width="480" alt="A blocky robot with a menacing expression and glowing red eyes">
</section>

You have...

Semantic Elements

Part 3

Are headings structured appropriately?

Do headings move up/down in structure appropriately?

<h1>Pet-site, a site about pets</h1>
<h2>Talking about cats</h2>
<h3>Buying cats</h3>
<h4>How much do they cost?</h4>
<h4>Where should I buy a cat?</h4>
<h3>Adopting cats</h3>
<h4>Where should I adopt a cat?</h4>
<h2>Talking about dogs</h2>

Is there an <h1> element? Do headings jump between levels? Is there a level lower than <h6>?

<h2>Pet-site, a site about pets</h2>
<h4>Talking about cats</h4>
<h3>Buying cats</h3>
<h5>How much do they cost?</h5>
<h7>Where should I buy a cat?</h7>
<h1>Adopting cats</h1>

You have...

Appropriate Alt Text

Do your images have appropriate alt-text?

If the image is inside a link, does the alt text describe where the link goes?

<a href="home.html">
<img src="banner-image.jpg" alt="Home page">
</a>
<!-- Because it is in a link, the alt attribute describes where the link goes -->

If it is an image on its own, does the alt text describe the image as if we did not see it?

<img src="sheep.jpg" alt="A white wool sheep grazing in a grassy field">
<!-- The alt attribute describes the content of the image -->

You have...

Responsive units

Do they use units responsive to the user's preferences?

Does any styling related to text content use pixels?

/* This is NOT okay */
p {
margin: 20px;
padding: 36px;
font-size: 20px;
}

Do any media queries use pixels?

/* This is NOT okay */
@media (width > 640px) {
.grid {
grid-template-columns: 1fr 1fr;
}
}

You have...

Responsive units

Part 2

Is there use of responsive units that may cause issues?

Does any styling related to text content use viewport (vw/vh) or percentage units (%)?

/* This is MAYBE okay */
p {
margin: 2vw; /* maybe okay */
padding: 5%; /* maybe okay */
font-size: 10%; /* NOT okay */
}

Does anything have fixed widths that we may need to be careful about?

/* This is MAYBE okay */
p {
min-width: 20rem; /* maybe okay */
}

@media (width < 30rem) {
.grid {
min-width: 35rem; /* NOT okay */
}
}

You have...

Ordering Headings

Are headings properly used?

  • h1 Shoes-r-us
    • h2 In-store
      • h3 Kid's
      • h3 Men's
      • h3 Women's
    • h2 On Sale Now!

Or are they improperly used?

  • h1 Not used
    • h2 Shoes-r-us
      • h3 Not used
        • h4 Kid's
        • h4 Men's
        • h4 Women's
      • h3 On Sale Now!

You have...

Responsiveness

When looking at the page in the responsive viewer — ah.link/rv — does the page effectively reorganize at different sizes?

Things to look out for:

You have...

Clear Interaction Cues

Can we tell what is a link and when we use the mouse to navigate to it, does it visually cue us?

You have...

Clear Interaction Cues

Part 2

When we use the keyboard to navigate to links do they visually cue us?

When using the keyboard:

You have...

Critique complete

We are done with critique for P3.

In preparation for lecture...

Please close up any laptops, cellphones, Whoops, Google Glasses and other 'beep-boop' devices.

339 Alumni Panel
P4: Design and Develop

P4 team formation

Please form teams for the final project and come to the front to let us know who is part of your team.

You have 10 minutes.

Git branching tutorial

Part 2

In preparation for today's git tutorial, please:

Remainder of today's class

I will need to meet with some of you to discuss your P3 submission. If your name is on the list you will need to stick around, otherwise we will have open support time with Mehru while I meet with those on the list.

1/1