ah teaches web design & development (Being the Unicorn lecture)
Slide deck of 41 slides. Slide deck ontrolled by the previous and next buttons. The left arrow key can be used to move to the previous slide and right arrow key move to the next slide.
Being the Unicorn
Lecture outline
Portfolios... just portfolios. Lecture slides will be made available on the day of the lecture (October 31).
Setup
For today's critique session please:
- Make sure your website is uploaded to your filespace
- Open up Firefox or Chrome with your website
- Within the browser also open a tab with the validator (ah.link/validate)
- Within the browser also open a tab with the responsive viewer (ah.link/rv)
- Within the browser also open a tab with the colour viewer (ah.link/cbv)
- Open up Safari or Edge with your website
Once finished setting up, please work on completing a teamwork reflection.
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 to the computer with the next number (+1).
- 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 ah.link/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 they using non-semantic elements? <i> <b> <u>
Are ID's — <p id="name_of_this"> — for elements unique?
<!-- 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...
Ordering Headings
Are headings properly used?
-
h1Shoes-r-us-
h2In-storeh3Kid'sh3Men'sh3Women's
h2On Sale Now!
-
Or are they improperly used?
-
h2Not used-
h2Shoes-r-us-
h3Not usedh4Kid'sh4Men'sh4Women's
h3On Sale Now!
-
-
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"> <img src="kittens.jpg" alt="An orange and white kitten looking very sadly at the viewer">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">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...
Clear content
Are there concerns with any of the following, and if so why or why not?:
- Are labels for interactive elements specific?
- Do photos 'suit' the site, or do they feel like stock?
- Are icons understandable or supported with text?
- Do headings help you understand the structure?
You have...
Consistency
Do the elements used — buttons, images, headings, text, inputs, etc — feel like a cohesive set? Why so or why not?
You have...
Responsiveness Testing
Let's see how things are working responsively. Please head to ah.link/rv.
You have...
Colour Testing
Let's see how things are working without colour. Please head to ah.link/cbv.
You have...
Device Testing
Let's see what things look like on your own smartphone. Go to ah.link/339s for faster access.
You have...
This QR code will take you to the sites on your phone:
Browser Testing
Let's see what things look like in Safari (Mac) or Edge (Windows)
You have...
Progressive Enhancement
Let's disable Javascript and see what happens.
You have...
Critique complete
In a moment you will be permitted to return to your projects.
Please take some time to review the feedback you have received.
In preparation for lecture...
Please close up any laptops, cellphones, Apollo Neuros, iPads and other 'beep-boop' devices.
Becoming a Unicorn
Step 1: Apply waffle cone to forehead
What makes you different?
- Who do you want to work for?
- What 'makes you unique' (but employable)?
- How do you reconcile all these years of us telling you to be programmers, but designers, but artists, but content strategists, but makers, but animators, but sound designers, but cognitive scientists, but architects, but creators of virtual worlds, but game designers, but storytellers, but video editors, but photographers, but creative entities, but researchers, but ...?
Creating an Ethos
This week's labs
A(n) ethos is the understanding, characteristics and definition of oneself as a ____________.
Visuals
Who are you visually?
Let's look at a couple of examples:
Showcasing Your Work
Help us understand why it is good
Ensure your projects cover:
- What was the context?
- Who was involved and what was the task?
- What did you do?
- What was the outcome? (and why does it matter)
Step 1: Situation
- What are necessary details to explaining P2?
Step 2: Task
- What are necessary details to explaining P2?
- What was a challenge you encountered in P2?
Step 3: Action
- What are necessary details to explaining P2?
- What was a challenge you encountered in P2?
- What was an action you took to address that challenge P2?
Step 4: Result
- What are necessary details to explaining P2?
- What was a challenge you encountered in P2?
- What was an action you took to address that challenge P2?
- What was the result?
Let's consider
How would you explain them to our audiences?
Potential audiences of our portfolio
Why Should I Care?
Industry and learning
Portfolios are all about reflective practice, and learning well always involves self-reflection.
P3: What Do They Want?
How employers approach applications
How employers approach your application:
- Skimming the cover letter (5s): Well written and custom?
- Look at the resume (10s): Well designed, clear branding, good typsetting?
- Read the resume (20s): Have skills and experience relating to job?
- Look at web portfolio (30-60s): Want custom URL, non-templatey website
Care of "Burn Your Portfolio"
An Extreme Do-not-do Example
Let's head over to The Worst Portfolio Ever.
More coming soon!
This slide will be up shortly.
Sameyness
Make that framework less framework-y
"I'm sick of seeing the same damn buttons. I'm sick of seeing that same damn toolbar up top. It's driving me crazy.""Customize Twitter Bootstrap to Not Look Bootstrap-y" by Antonin Januska
Personality
Identifying how you want others to see you
How might you communicate that you are 'efficient' without using text?
Code Plagiarism
Be wary
You are allowed to use frameworks (ie. Bootstraps or Foundation web UI frameworks), JavaScript libraries to make working on the site easier, but the final design must be your own work. All materials must be cited.
When in doubt, ask the TA or instructor.
Self-Plagiarism
Be wary
If you have a pre-existing portfolio that you are revising or redesigning for this project you are required to provide a URL to the original by November 7. This just helps us ensure that there is no self-plagiarism occurring in the project.
Self-plagiarism will result in grade of zero. No exceptions.
Identifying employers
Remember every website has an audience, in this case your potential employer is your audience. Hence we'll be having you identify who you might want to work for in the future, to help you focus your site.
Keep it real
For the employers you look at and the job descriptions you find, please be realistic.
The next couple weeks
Just a reminder of what is coming up in IAT-339:
- Nov 7 — P3 critique, final reading reflection, explanation of coding quiz, CSS animation tutorial.
- Nov 14 — P3 critique, coding quiz, speed optimization.
- Nov 21 — P3 critique, 'debugging' day.
- Nov 28 — P3 final portfolio review.
If there are other code items you would like covered please do not hesitate to reach out and let me know.