Antle teaches information design (Coding, coding, coding lecture)

Coding, coding, coding

Lecture outline

Time to work on HTML/CSS in the classroom.

Peer critique prep

In preparation for today's critiques, please:

  1. Place your bags/belongings at one of the tables in the middle.
  2. Load up your wireframes one laptop for your team.
  3. Set up the laptop at a numbered station.
  4. Make sure one teammate has a pen or pencil ready for peer critique.

Peer critique reminders

For today's peer critique, we will be providing you with a series of prompts to guide your critique. For each critique you provide please make sure to:

Leave your post-its at the project you are providing critique on.

Peer critique process

After each prompt, you will move to the next project (+1 from where you are). Please make sure to leave your critique on a post-it at the project.

Peer critique start

Please move +1 project.

Look through the desktop and mobile wireframes

What do you like? and what do you wish?

You have...

Look through the desktop and mobile wireframes

What questions do you have of the design?

You have...

Look through the desktop and mobile wireframes.

The project rubric looks for clear relationships and clusters of content. Do you feel the relationships and organization of content are clear? Why so or why not?

You have...

Look through the desktop and mobile wireframes.

The project rubric looks for understandable structure of content. Do you understand the structure of the site, and how you are meant to navigate through it? Why so or why not?

You have...

Look through the desktop and mobile wireframes.

The project rubric looks for multiple methods to access similar information. Can you access the detailed device pages through multiple methods? How so or how not?

You have...

Look through the desktop and mobile wireframes.

The project rubric looks for clear visual cues to interactivity. Is it clear what is interactive and what is not? Why so or why not?

You have...

Look through the desktop and mobile wireframes.

The project rubric looks for consistent visual treatment of headings, links, and buttons. Is the treatment of visual elements consistent between mobile and desktop wireframes? Why so or why not?

You have...

Look through the desktop and mobile wireframes.

The project rubric looks for effective reorganization of content between mobile and desktop sizing. Is the hierarchy of content consistent between desktop and mobile sizes? Why so or why not?

You have...

Look through the desktop and mobile wireframes.

The project rubric looks for effective use of grid structures. Is it clear what kind of grid structure these wireframes use? Why so or why not?

You have...

Look through the mobile wireframes.

The project rubric looks for appropriate text sizing. Does this text seem to be appropriately sized for mobile? Why so or why not?

You have...

Critique complete

Critiques for P2 are done.

Collect feedback

Please collect and reflect on the feedback that was left on your project.

Please make sure to complete a teamwork reflection (individually) before we wrap up the P2 critiques.

You have 20 minutes.

Room reset

Please help with resetting the room for lecture and code tutorial.

In preparation for lecture...

Please close up any laptops, cellphones, ROG Allies, Nokia Communicators and other 'beep-boop' devices.

A poster for the SFU Demshot challenge

ah.link/demshot

P3: HTML/CSS

HTML questions answered

I have pre-built examples/explanations of various HTML things available on CodePen at ah.link/more-html

Please use of the Discord tech support channel to request more tutorials.

When do I do something in HTML vs CSS?

HTML is for defining what our content is for the browser.

  • What is a paragraph?
  • What is a heading?
  • What is the navigation?

CSS is for defining what our content should look like in the browser.

  • What size font should our paragraph be?
  • How much space should be around the heading?
  • Should the navigation be fixed to the top of the page?

How do I learn all the elements?

Practice and memorization. For now you are welcome to look things up, but be mindful of less ideal resources. I recommend starting at the Mozilla Developer Network.

Basic HTML5 page

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic HTML5 page</title>
</head>
<body>
<!-- all visible content goes here -->
</body>
</html>

div vs section

When do I use each?

div is semantically meaningless. It is useful for adding structure that we can style using CSS.

section is a 'logical' section of content in our HTML. It is semantically meaningful and is usually used to associate a heading and related content.

Why use section?

Section allows for more semantically meaningful — and future friendly — websites. A section is a heading (h1, h2, h3...) 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>

ol and ul

The ordered list (ol) and un-ordered list (ul) list elements describe different kinds of lists. One to which there is a sequence, and the other to which there is no sequence. Both require you use the list item element (li) to define each item in the list.

<ul>
<li>Apples</li>
<li>Guava</li>
<li>Grapefruit</li>
<li>Durian</li>
</ul>

When to use figure?

If you have rich media (i.e. an image, audio or video) and need to associate a caption with it, use figure and 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>

Images

Placing an image on the page requires:

  • An image file
  • The pixel height and width of the image
  • Alt text that describes the function of the image
<img src="images/robot.jpg" height="640" width="480" alt="A blocky robot with a menacing expression and glowing red eyes">

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 -->

Semantic Elements

Are the following elements used, and are they used appropriately?

Less Basic HTML5 page

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Less Basic HTML5 page</title>
</head>
<body>
<header>
<h1>Less Basic HTML5 Page</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
<nav>
</header>
<!-- main content goes here -->
<footer></footer>
</body>
</html>

When should I use the target attribute?

When used with the a element, the target attribute allows us to open up links in another tab or window. I would recommend against using the attribute as it makes the decision for users as to where something should be opened.

If it is important that something opens in a new window or tab (i.e. when Figma opens up slides) then you can use it, but be careful.

<a href="grants-listing.html" target="_blank">Grants</a>
A series of mobile screens illustrating cumulative layout shift, where an image loads and bumps down the content

Care of Parachute Design

Screen readers

Let's "listen" to some content in the screen reader demo.

How do I publish my site?

With a server! (to be continued shortly)

Git story time

Let's talk about git.

Git tutorial

In preparation for today's git tutorial, please:

ah.link/tools
ah.link/v
Exercise #6

Live HTML demo

To help you with getting started on P3, I am going to do a live demo of thinking through structuring the HTML for P3, using one of your P2 projects as a starting point.

Next class

In our next class we will:

1/1