ah teaches web design & development (The Utility Belt lecture)
The Utility Belt
Lecture outline
Approaches for debugging code and an introduction to git. Lecture slides will be made available on the day of the lecture (Oct 6).
Meet your toolkit
P1 audit
In preparation for our P1 critiques today, please open up your project in Firefox or Chrome. Write your name on a post-it and attach it to the computer monitor.
In an additional tab, please open:
- Our validator at ah1.ca/validate
- A responsivness viewer at ah1.ca/rv
P1 audit
To practice assessing some of the most common P1 concerns, we will be doing some critique during our class today. We will be reviewing:
- Valid HTML and CSS
- Use of semantic elements.
- Appropriate use of alt text.
- Associating
labelstoinputs. - Use of responsive units.
- Visually distinct styleguide.
- Consistency in the treatment of elements.
- Effective use of space.
- Clear interaction cues.
Process
Please make sure to include your names 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:
- Move over one computer to the right.
- If at the end of the row, move one row back.
- If at the back/right end class, move to the front left corner.
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:
You have...
Semantic Elements
Are the following elements used appropriately?
Are the <br> elements defining 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...
Appropriate Alt Text
Do your images have appropriate alt-text? Does it describe the content or the function of the image?
Does it describe its function or content?
<a href="home.html">
<img src="banner-image.jpg" alt="Home page">
</a> <img src="logo.jpg" alt="Shoes-r-us">Or not?
<a href="home.html">
<img src="banner-image.jpg" alt="A photo of shoes walking themselves across the street">
</a> <img src="logo.jpg" alt="logo">You have...
Labels Tied to Inputs
Are labels associated with inputs?
<label for="email">Email address:</label>
<input type="text" id="email" placeholder="name@email.com">Or not?
<label for="email">Email address:</label>
<input type="text" name="email" placeholder="name@email.com"> <input type="text" placeholder="email address">You have...
Use of responsive units
Look through the CSS and consider if the following cases may be okay, or cause for concern:
- Are pixel units used for font sizing, or text content padding or margins?
- Does anything have a
width/height, ormin-width/min-heightset in pixels? - Do the
@mediaqueries make use of pixels? - Are percentage or viewport units (
%/vh/vw) used for font sizing, or text content padding or margins?
Visually distinct
Does this style guide look like the template provided? How so, or how not?
You have...
Consistency
Does the treatment of the elements in the styleguide feel visually consistent? How so, or how not?
You have...
Effective use of space
Looking at the combined elements - the navigation and the product listing - do they make effective use of space in the responsiveness viewer? (ah1.ca/rv)
You have...
Clear Interaction Cues
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...
Critique complete
We are done with critique for P1.
Dev Environment
Adding to the toolkit
- Coding application
- FTP Client
File Structure
Keep things clear
Things to ensure:
- Use a descriptive naming convention: index.html, product-apple-detail.html
- Avoid naming based on generics: page01.html, page02.html, page523.html
- No spaces in file or folder names: use_underscores.html or use-dashes.html
- Think categorically: logo-siat.jpg, instead of siat.jpg
Dev Environment
Adding to the toolkit
- Coding application
- FTP client
- Developer's tools + validators
Dev Environment
Adding to the toolkit
- Coding application
- FTP client
- Developer's tools + validators
- Photo editor/compressor
Save for Web
Images should be sized and compressed appropriately for web distribution. We will talk more about resolutions in the coming weeks, but some suggested tools for compression:
P2 Expectations
While working on a team, please note:
- Both team members must contribute code.
- Both team members must use git.
Working as a Team
The horror, the HORROR!
Come to an agreement on:
- Naming conventions
- Work towards common code
- Maintaining files
- Both do the code
Dev Environment
Adding to the toolkit
- Coding application
- FTP client
- Developer's tools + validators
- Photo editor/compressor
- Git client
This drawing is explained in detail in the recorded lecture
git ready
In preparation for our tutorial today, please:
- Sign into github.sfu.ca.
- Download and install GitHub Desktop from desktop.github.com
- Open up VS Code