ah teaches web design & development (Debugging Day lecture)

Debugging Day

Lecture outline

As the title suggests we'll spend this lecture helping you debug your final projects in addition to covering some speed optimization. Lecture slides will be made available on the day of the lecture (Dec 1).

Guest welcome

Please help me in welcoming our guests...

Peer critique prep

In preparation for today's critiques, please:

1. Select a numbered station for your project.
2. Write down your name on the post-it at the station.
3. Place your bags/belongings out of the way.
4. Load up your project website in Chrome.
5. Close off any other applications that may be running.
6. Have a pen or pencil ready.

Process

Please be clear what you were commenting on and why your critique is valid/important.

After each prompt you will:

• Return the website to the home or landing page.
• Write your name on your post-it.
• Leave the post-it at the project you are at.
• Move to the next project (+1 from where you are).

Peer critique start

Please move +1 project.

Process analysis

Read through the process analysis. Can you:

• Understand what the project was about?
• See why a particular process was undertaken?
• See what the thinking behind this process was?

You have...

Process analysis

Read through the process analysis. Can you:

• Do they clearly connect the images and the text?
• Identify this individual's contribution?
• See a reflection that ties back to what was said in the analysis?

You have...

Please open a blank tab overtop of the portfolio

First impressions

Briefly look at the landing page of the website. What do you understand this website is about? and why?

10 seconds

First impressions

Briefly look at the landing page of the website. Who would you say this individual is/what do they do? and why?

10 seconds

First impressions

Briefly look at the landing page of the website. Do you feel the visual language is unique? Why so, or why not?

30 seconds

Ethos

Step through the website. Do you believe this person can do what they claim to?

You have...

Visual identity

Step through the website. Does the visual language or identity presented communicate what this individual does? Why or why not?

You have...

Consistency

Step through the website. Is the visual language used through the portfolio site consistent?

You have...

Clear Interaction Cues

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

You have...

Responsiveness

Open up our responsive viewer at ah1.ca/rv to check responsiveness.

Does the website respond effectively to these different sizes?

Note: This will only work if the website has been uploaded.

You have...

Valid HTML and CSS

Open the validator at http://ah1.ca/validate

Run the website through the validator. Comment on any frequent concerns.

Validator password is:

Note: This will only work if the website has been uploaded.

You have...

HTML code review

Review the HTML for:

• Do the <img> elements have alt attributes describe the image (as if we did not see it), or describe its destination if it is within a <a>?
• Do the <img> elements have a height and width attribute set?
• Is there an <h1> element for the page? Is it the main title?
• Are the headings ordered appropriately? i.e. does it jump from <h1> to <h3> (which is not good)?
• Are <br> elements used only in addresses or poetry?
• Is it all <div>s, or are <section>s used logically?

You have...

CSS code review

Review the CSS for:

• Is a non-rem or em unit sizing used for fonts? or font-related properties (i.e. p { font-size: 16pt; margin: 10px; })
• Is a non-rem or em unit used for media queries? (i.e. @media (min-width: 640px) {})

You have...

Progressive Enhancement

Let's disable Javascript and see what happens.

You have...

P3 rubric adjustment

Portfolio sharing

Thank-you

TA evaluations for IAT-339 (Fall 2023)

TA: Mohammadreza Doroodian

We will hand out the evaluations and you will have 15 minutes to complete them.