IAT-339: 01 The Interwebs — A slide deck
Close All Laptops
In 'lecture-mode' I would request no laptop use. In 'tutorial-mode' you will have full access to the laptops!
A friendly how-to
TA for D101/D102
Reachable at: ac.ufs@rratuose
What you must include
Requirements for response:
- Your full name.
- The course number (IAT-339).
- Your lab number (i.e. D101, D102).
- Your student number.
- A clearly articulated question.
Please allow up to two business days for replies.
Warning: No email crits
It is unfair for both us and yourself if we begin to offer the option of providing critiques via email. If you are looking for feedback on some work, please arrange a meeting to do so.
What to expect
- Me talking
- A break
- Coding tutorials
What to expect
- Crits, crits and more crits
- Group crits
- Coding tutorials
- Coding exercises
- Super-awesome support
Readings are available entirely digitally.
Read these before the lecture, as we will be discussing ideas in them. If I sense that the reading has not been sufficiently completed, a quiz may be called.
There will be random unannounced checks for participation through the term. It is your responsibility to make sure you are in attendance and participating.
Worth 5% of your final grade.
Those terrifying things
There will be three quizzes in this course.
Two will cover the readings, and will either be announced or unannounced, pending how many of you do the readings. One will be on HTML/CSS, and will require that you propose solutions to a coding problem live in lecture.
20% of your final grade.
- Process — 10% (Individual)
- Company — 30% (Group)
- Portfolio — 30% (Individual)
30% group, 40% individual.
A quick note
Project 2 (Company) will be done in groups. As warning in advance, there will be no peer review or evaluation performed in this course, strong but your process and Git commits/involvement will be graded individually.
Remember, you are responsible for your own work.
Coding exercises are in-lab practice for the web-coding you are doing in the course. You are required to submit the first five week's of exercises, and then future weeks are optional - in case you would like further feedback on your coding practice.
Coding Exercise Rules
- You can use online resources, course materials, your TA, and lab-mates for support.
- You must cite any knowledge that is not yours in a comment in the code.
- If work has been copied without citation the entire coding task portion of the final grade is forfeit.
The Ever-changing Demands of the Web
Oh, how things change!
Our goal here is to give the theory, fundamentals of coding for web and an understanding of how to develop your skills beyond this course.
What we'll be doing (loosely)
- Course intro + web basics
- Translating design skill
- Style guides
- Github + debugging
- Responsive design
- Usability + accessibility
- Complex interactions
- Web ethics
- Web optimization
- Presentations + wrap-up
What we'll be doing (loosely)
- Your dev environment + HTML fundamentals
- CSS basics of styling + selectors
- CSS flexbox + media queries
- CSS positioning
- CSS animation
- Speed optimization
- Support week
Having coding concerns?
Let us know!
Let us know sooner rather than later if you are having concerns with coding. Also, there is absolutely no 'stupid' questions. Don't know? Ask.
This course has a zero tolerance policy for plagiarism on projects. If you are found presenting work that is not your own or resubmitting old work without notice, you will receive a failing grade on that project. No exceptions.
Late or Problematic Submissions
Late submissions receive 10% per day late.
Problematic submissions — i.e. we can't open the URL or the wrong files were submitted — receive an immediate 30% off plus late penalties on the resubmission.
What is an A?
An A is exceeding expectations. Our 'exceeded' expectations are set out in project rubrics.
When Serious Issues Arise
Get in touch with Andrew
I am amenable to coming up with agreements, but I have to know that a problem has arisen first. Come and see me if an issue comes up that may seriously impede your ability to work on the course.
IAT-235 & IAT-339
For those students who have taken IAT-235 since Spring 2014, you may find the first couple weeks a bit repetitive. For you, it may be worthwhile to work on the coding exercises in-lecture.
Prepped and ready to go
Available on Canvas are links to programs for your first 'web toolkits'. They should contain:
Google Chrome happens to be a relatively standards-compliant browser, and hence we have focused our interests on using it.
Atom, Sublime Text, TextWrangler, Notepad++, etc
We are working with code-only applications in this class, as you need to understand the code to be an effective web designer.
Illustrator or Photoshop Mock-ups are banned
You are not allowed to use any static mock-up tools for designing your pages. We are going to work purely in-browser or with interactive tools for when we start designing things.
Frameworks are banned
For P01/P02, you are required to generate your own code. In the final portfolio project, you will be allowed to work with existing frameworks should you so choose.
If you haven't read this, read it now please. You have five minutes.
- What is involved in 'embracing the web as its own medium'?
- What might be an example of 'adaptible being accessible'?
Working in a Fluid Medium
Scuba gear not required
As a web designer, this is your biggest challenge; maintaining and working with a fluid medium.
The Document-Object Model
Our standard in delivering HTML
This week you will be building your first HTML pages, this involves the DOM, which put simply is a collection of objects (ie. navigation, headings, paragraphs) that resemble the document it is modelling.
Both HTML and XML make use of the DOM to structure and assemble their content.
Reinforce the meaning of the content
Why dogs are awesome! There are many benefits to owning a pet: 1. They are good nannies 2. They can talk 3. They love to party
There are many benefits to owning a pet:
- They are good nannies
- They can talk
- They love to party
Be Wary of Old Resources
Not all resources are created equal, especially when it comes to web development. Pay attention to when a resource was last updated.
Getting you started on thinking about your first website! You will be designing websites for companies. This website will require the following content:
- company updates/events
- about the company
- how to contact the business
- a multi-product listing
- one product detailed view
- the entire process of purchasing a product
- appropriate means for the user to provide feedback on a product
The next couple weeks:
- Starting today: Task definition + brand components
- Starting Sept 15: User-flow sketches + brand direction
- Starting Sept 22: Wireframes + style guide
What is a Style Guide?
According to Robertson, what is a style guide?
Why We Style Guide
Style guides help us to:
- Document our design
- Test cross-browser
- Avoid duplicates
- Create a common language
- Work in teams
Mailchimp Style Guide
Let's take a look at the The MailChimp Style Guide.
Yelp Style Guide
Let's also take a look at the The Yelp Style Guide.
See you in five minutes.
Please make sure you have:
- Atom (or similar text editor)
- Google Chrome
Your new best friend
Ever want to see what a website is made of? (Of course!) Try right-clicking and selecting 'inspect element' when looking at Google.
It is just markup
Telling the computer the pieces
What are semantics?
This week's labs
- An introduction to one another
- P01 intro and work-time
- Coding exercise
- Bring writing utensils
Next week's lecture
Styling the Webs
Next week we're going to try really, really hard to think interactively as well as build ourselves some less hideous pages.
- Office hours — Tuesdays from 9-10am and Thursdays from 9-10am at the Surrey campus mezzanine.