IAT-339: 04 Meet Your Toolkit

IAT-339: 04 Meet Your Toolkit — A slide deck

A toy Batman utility belt
Meet your toolkit

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

Bugs

When we encounter a point where what we expect to happen and what has actually happened don't match; we have encountered a bug. This usually means stepping back through what you did to determine what is not behaving as you expect it to.

Debugging

I recommend starting with:

  1. What is the code supposed to do? Why?
  2. What did the code do?
  3. If you can solve for the why the code did what it did, you have found your bug.

Debugging Sample #1

I have some weird stuff showing up in my content in the box below. What did I expect? What did it do? and why?

Some content that isn't particularly exciting, but has a problem...

/div>

Debugging Sample #2

All the text in the box below should be blue. What did I expect? What did it do? and why?

Some content that isn't particularly exciting, but has a problem...

Debugging Sample #3

There should be a second pink block in the box below. What did I expect? What did it do? and why?

Debugging Sample #4

Both columns in the box below should span 50% of the width of their parent. What did I expect? What did it do? and why?

This column spans 50% of the page.

This column spans 50% of the page.

Dev Environment

Adding to the toolkit

  • Coding application
  • FTP client
  • Developer's tools + validators
  • Photo editor/compressor

Save for Web

should be sized and compressed appropriately for web distribution. Some suggested tools:

IAT-339 — P02: Company

P02 Expectations

Please note:

  • Both team members must contribute code
  • Both team members must use git
  • Absolutely no HTML/CSS frameworks are permitted
  • Javascript libraries will be permitted with citations

Thinking in Pieces

How we don't make 42502394 distinct elements

In the planning for P02 this week you will be generating sitemaps. This is your opportunity to plan out exactly how many different templates you will be requiring, and plan accordingly.

A sitemap illustrating the steps in the process of building a website including all the pages involved

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

Enter Git

Your friend in code tracking

* Andrew does some doodling here... *

Break-time

Runaway! Runaway...

you in ten minutes. If you haven't already:

  1. GitKraken (Mac/PC)
  2. Sign-up for a GitHub account

P02

Commence the coding!

There are three items for this week for you to do. Please note the one that comes first...

  1. Setting up your dev environment
  2. Building out your sitemap
  3. Brand component coding

GitHub and Your Code

GitHub is a public, non-Canada-based service. As a result, should you have any concerns regarding publishing your code on such a service, please let me know and I will set you up with an alternative, private, in-Canada service for your project's code.

This week's labs

The low-down

  • More on Git
  • P02 Introduction

Next week

Devices and Their Fickle Owners

  • Reading Quiz
  • More on responsive vs adaptive
  • Web design patterns
  • CSS positioning/responsive images

Quiz

Things to note

  • You will have 30 minutes
  • You can complete it on a computer, or on paper
  • It will be open book
  • It will use any readings/lectures upto and including next week's
  • There will be 1-3 short answer questions.

Next reading

"Introduction / Responsible Design" from Responsible Responsive Design by Scott Jehl

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Tuesdays from 9-10am and Thursdays from 9-10am at the Surrey campus mezzanine.
  • ac.ufs@h.werdna
1/1