Langara Outlines

Marking Comments Abbreviations

Title
For Search Engine Optimization and Bookmark specificity, a best practice is to put the site name in the title, along with something page-specific. A page title like “article”, “contact” or “resume” does not provide a search engine much useful information. Bookmarks with titles like that are pretty much useless.
Validation
Either the HTML or the CSS, or both, did not validate. Remember to always validate your code: making your code as standards-compliant as possible is the best way to make sure it renders properly in as wide a range of browsers as possible.
Proximity
Adjust box model properties like margin and/or padding to bring related content closer together. Group elements so that there is less space between the related content pieces and more space between separate content.
Line-Length: long
Line-length: short
Contrast
Dark text on a dark background (or light text on a light background) will be difficult for a lot of people to read. It is always better to have too much contrast than too little. Remember also, that we have no control over how bright the monitor a user is seeing your page on. If the monitor is a little bit dark, then reading that text will be even harder.
Spelling or Grammar
Hierarchy
Underlining
Underlining anything that is not a link is usually not a good idea: people think that text is a link. Consider using borders instead (they will go wider than the underlining, and will therefore be less likely to be confused for links).
Semantics
To ensure SEO and accessibility start at h1 and go through the headings in order. You can always modify sizes via CSS. Do not start at h3 simply because the default size fits your design.
Image Sizes
Viewport
You did not include the VIEWPORT meta tag. This tells the browser not to scale the page down. This is important because otherwise the words in most webpages become unreadable.
As well, your media queries typically will not work without the viewport meta tag. The moral: always test your pages on phones and tablets as well as desktop. This problem is immediately visible when you check your work on actual devices. ( Everyone forgets that line of code from time to time … )
Stylesheet Order
If using a reset stylesheet, put it before your own styles. If using a grid stylesheet, put it between those two.
Justification
Be careful with justification in text. The narrower the paragraph, the more dangerous justification can be: it tends to introduce gaps in the text. In print, there are ways to compensate for that (manipulating tracking and kerning), but we do not have the same control on the web. As well, dyslexics apparently have more trouble reading justified text than left-aligned text. At the very least, you can disable justification as the line-length shortens (such as at phone width).
404s
You have broken page links. Check your paths.
Broken Images
You have broken links to images. Check your paths.
ALT
Some or all of your images are missing ALT attributes.
Deprecated Tags
You have used obsolete tags. Tags like CENTER, for example, have been removed from the language. As a rule (although there are exceptions), if a TAG only describes appearance, it is likely to have been deprecated.
Image Sizes
Either your images were not compressed properly, or they have not been sized properly.
Web Unsafe Fonts
Font or fonts chosen were not part of the standard “web stack”. Consult www.cssfontstack.com for examples of websafe fonts.
Text Touching Box Edges
Adjust margin or padding values to prevent text from getting too close to the edge of their boxes or to the edge of the browser window.
Standard
Langara Outlines

PUBL 1220 Outline (2017)

Publ 1220 Web Design Fundamentals
Credits: 6 Room: A247
Contact Info:
Kevin McMillan
Office A248
Currently without an office phone, but this will change.
Days & Times:
Summer Term: May 01 – June 10, 2017
Tuesday 130–520
Tuesday 600–720 (lab)
Thursday 1130–320
Thursday 400–520 (lab)
Friday 1130–420  (lab)
Office Hours
Tuesday 1130–130
Or by appointment.

SKIP to Class Content

This Section A class will cover HTML & CSS design, and serve as a foundation for the Advanced Web Design & Web Production I courses in the second half of the summer.

Like anything in life, this outline is subject to occasional changes.

Throughout the term, I will add links to additional supporting content.

Learning Outcomes

By the end of the class, the student should be able to:

  • write and publish standards-compliant html & css
  • produce web designs utilizing flexible grids
  • produce graphics with appropriate size & characteristics for web
  • register and set up their own domains
  • produce “mobile first” responsive layouts
  • integrate JavaScript into their designs

Textbooks & Costs

There is no textbook for this class. We will use primarily online sources in the course. Here are a few:

A Good Overview of HTML & CSS
MarkSheet HTML & CSS Tutorial

A Good Online Guide To HMTL & CSS:
Shay Howe: Learn to Code HTML & CSS
Shaw Howe: Learn to Code Advanced HTML & CSS

Lynda.Com Sublime Text Course:
Learning Sublime Text 2

Lynda.com Videos
HTML Essential Training
CSS Essential Training 1
CSS Essential Training 2

An Excellent CSS Reference
Codrops CSS Reference

HTML5 Cheat Sheet
http://websitesetup.org/html5-cheat-sheet/

Emmet Documentation & CheatSheet
Documentation
Cheatsheet

Students will, however, have to spend a small sum on registering a domain and hosting a site, which should come to less than $20. This will be discussed in greater detail in class.

Department Policies

The complete Publishing Department policies can be found on the studentshare server in COLLABORATIVE / PUBL / Student Access Files Administrative. Here is a brief summary.

Course Structure

The class schedule is detailed below.

Techniques learned in one assignment or exercise will always be the starting point for subsequent ones. Know, therefore, that there no lectures that can be easily missed.

It is your responsibility to make sure that you do not miss any announcements or course materials given in any class. Any additional announcements will be made via email to your mylangara accounts.

Every Friday lab period will begin with a short test, on material covered in previous weeks, as well as indicated readings.

Assignment Due Dates & Marks
Assignment 1: Resumé May 20 10%
Assignment 2: Own Domain May 27 10%
Assignment 3: Magazine Mockup June 09 30%
Lab Exercises  Ongoing 15%
Weekly Quizzes / Tests Fridays 15%
Midterm  May 27 20%

Assignment Descriptions Available Here

May 02: HTML & CSS Basics

Tuesday Lecture: HTML Basics

  • Overview of Summer PUBL web classes
  • Introduction to Sublime Text editor
  • Web Roles / Jobs: Designer, Developer, UX, Content Strategy, IA, Project Management, etc
  • HTML5 Document Structure
  • Basic HTML Tags: h1, h2, etc, p, ul, ol, dl, img, br, blockquote
  • Phrase Elements: b, i, strong, em, small, q
  • Attributes
  • Links: inside site, outside site, inside page
  • Paths
  • HTML Validation
  • SFTP

Tuesday Lab

Thursday Lecture: CSS Typography & Box Model

  • Cascading Style Sheets: Separation of Content & Presentation
  • CSS Selector & Declaration Syntax
  • Color Values: Hex, RGB, & RGBA
  • CSS Units of Measure
  • CSS Text Properties
  • CSS Font Stacks
  • CSS Validation
  • The Box Model: Margin, Padding, Border
  • Time Permitting: Responsive Images

Thursday Lab

Friday Lab

  • Quiz No 1: based on class work & Marksheet chapters 2-3
  • Work on Assignment One: Resumé

Readings For This Week:

Resources

CSS Inspiration

May 09: Floats / Layout / Hosted Fonts

Tuesday Lecture:

  • Hosted Fonts: Google
  • DIVs, SPANs
  • HTML5 Sectioning Elements: Article, Header, Footer, Nav, Section
  • Fela Kuti Text Exercise: Sectioning Elements
  • Classes, IDs, Tags
  • The Float Property
  • The Clear Property
  • The Clearfix Hack
  • Descendent Selectors

Tuesday Lab

Thursday Lecture

  • Chrome Developer Tools
  • List-Based Menus
  • Display Property
  • Background Properties
  • Basic Responsive Design

Thursday Lab

  • Finish exercises assigned Tuesday
  • Work on Assignment One: Resumé

Friday Lab

Readings For This Week:

Resources

Font Hosting Examples

Typography Resources

May 16: Responsive Web Design

Tuesday Lecture

  • Domains & Hosting
  • Grid Systems
  • Responsive Web Design
  • Mobile First

Tuesday Lab

Thursday Lecture

  • RWD continued: BOLT

Thursday Lab

Friday Lab

  • Quiz No 3
  • Fender Vs Gibson Exercise

Resources

May 23: More RWD + Icon Fonts

Tuesday Lecture

  • Mobile First
  • Approaches to Retina displays (and their ilk)
  • SVG
  • Icon Fonts
  • Emmet

Tuesday Lab

Thursday Lecture

  • Finish lab exercises
  • Work on Magazine Assignment

Friday Lab

  • Midterm Exam

Resources

May 30: Tables, Forms, JavaScript

Tuesday Lecture

  • Midterm Review
  • Transitions
  • Transforms

Tuesday Lab

Thursday Lecture

  • JavaScript / jQuery

Thursday Lab

  • try.jquery.com ( bring headphones )

Friday Lab

  • Quiz No 5
  • Start final assignment: Portfolio / Business Mock Up

Resources

June 06: Speed + Accessibility

Tuesday Lecture

  • More JavaScript: Menus
  • Accessibility
  • ARIA Roles

Tuesday Lab

  • Work on Portfolio Assignment

Thursday Class Time

  • Final Test

Thursday Lab

  • Work on Portfolio Assignment

Friday Lab

  • Portfolio Mock Up Due

Resources

 

Standard
Langara Outlines

WMDD4835 Outline (2017)

The final exam will take place in the last class session—not in the exam period as officially scheduled. The exact dates are:

  • Exam: April 03
  • Final Assignment: April 07
WMADD 4835 HTML / CSS 2
Credits: 3 Rooms: B014
Contact Info:
Kevin McMillan
Office A247b
604.323.5941
Days & Times:
Spring 2017
Mondays, Jan 09–April 03
8:30–11:30 (lecture)
11:30–1:30 (lab)
Office Hours
Monday 230–530 or by appointment

SKIP to Class Content

This class will cover HTML & CSS design and development, continuing on from the HTML / CSS 1 course of last semester.

Like anything in life, this outline is subject to occasional changes.

Throughout the term, I will add links to additional supporting content.

I want to make as much of your learning task-based, so nearly every week there will be problem-solving exercises to be completed in class or in the lab.

Learning Outcomes

Upon successful completion of this course, students will be able to

  • Use efficient HTML & CSS coding methods
  • Use CSS transitions & animations
  • Use JavaScript libraries such as jQuery
  • Use frameworks like Bootstrap
  • Use CSS Preprocessors
  • Rapidly prototype designs and code
  • Critique the code and designs of peers
  • Respond professionally to critiques of their code and designs
  • Use emerging methods of layout and interaction, while ensuring successful fallback for older devices and browsers

Textbook / Reference Material

We will use primarily online sources in the course. Here are a few:

A Good Online Guide To HMTL & CSS:
Shay Howe: Learn to Code HTML & CSS
Shaw Howe: Learn to Code Advanced HTML & CSS

Interactive jQuery Course
try.jquery.com

Lynda.com Videos
HTML5 Structure, Syntax, & Semantics
SASS Essential Training
jQuery for Web Designers
Bootstrap 3 Essential Training
Advanced Responsive Layouts With CSS Flexbox

An Excellent CSS Reference
CSS Reference.io

Another Excellent CSS Reference
Codrops CSS Reference

HTML5 Cheat Sheet
http://websitesetup.org/html5-cheat-sheet/

MarkSheet.io Tutorials
Chapter 8: Advanced CSS ( gradients, transitions, animations, transforms )
Chapter 9: SASS (variables, nesting, mixins, extends

Interactive FlexBox Froggy Game

Course Structure

The class schedule is detailed below.

Techniques learned in one assignment or exercise will always be the starting point for subsequent ones. Be assured, therefore, that no lectures that can be easily missed.

It is your responsibility to make sure that you do not miss any announcements or course materials given in any class. Any additional announcements will be made via email to your mylangara accounts.

Assessments
Main Assignment 30%
Quizzes 10%
Lab Exercises 20%
Midterm 20%
Final Exam 20%

Main Assignment Description

Note, also, that dates listed are approximate: topics may take more or less time in response to class progress.

Week 1: Jan 09 ( 4815 Review / Advanced Selectors )

  • 4815 Final Assignments & Exam Review
  • Advanced Selectors: Fela Kuti
  • IcoMoon.io

Lab / Class Files

Week 2: Jan 16 ( CSS Transforms & Transitions, Vendor Prefixes )

  • Video in HTML
  • CSS Transforms
  • CSS Transitions
  • Vendor Prefixes

Lab / Class Files

Links

Week 3: Jan 23 ( CSS Transitions & Animation )

  • Responsive Menu Patterns with Transitions & Animations
  • Using JS to change classes

Class / Lab Exercises

Links

Week 4: Jan 30 ( Responsible Responsive Design )

  • Test Number 1
  • Emerging Image Practices
  • SVG Data Embeds
  • CSS Background & Gradient Review
  • Advanced Media Queries
  • Making your own icon font

Lab Exercise

Homework

Week 5: Feb 06 (jQuery 1)

  • Test Number 2
  • Selectors
  • Traversal
  • Document Manipulation

References

Class Exercise

  • to be determined

Week 6: Feb 13 ( Reading Week )

No class: Reading Week

Week 7: Feb 20 ( jQuery 2 / SASS 1)

  • Events ( Mouse, Keyboard )
  • Conditions
  • Loops
  • jQuery Plugins
  • SASS Variables & Partials

Class Exercise

Links

Week 8: Feb 27  ( Midterm / SASS 2 )

  • Midterm will take 2 hours
  • Mixins / Math / Nesting / Functions

Week 9: March 06 ( Accessibility / Bootstrap 1)

  • ARIA Roles
  • Bootstrap Grid Classes
  • Bootstrap CSS Classes

Week 10: March 13 ( Bootstrap 2)

  • Bootstrap Navigation
  • Bootstrap Media
  • Bootstrap Form Styles
  • Bootstrap JavaScript

Class Exercise

  • to be determined

Week 11: Mar 20 ( FlexBox 1)

  • Display: Flex
  • Rows & Columns
  • Wrapping, Aligning, Reversing
  • Exceptions
  • Browser Support

Links

Lab Exercises

Week 12: Mar 27 ( Flexbox 2 )

Links

Midterm / Midterm Exercise

 Week 13: April 03 Work Day

  • FINAL EXAM
Standard
Langara Outlines

WMDD 4815 Outline (2017)

WMADD 4815 HTML / CSS 1
Credits: 3 Room: B014
Contact Info:
Kevin McMillan
Office A247b
604.323.5941
Days & Times:
Spring 2017
Wednesdays Jan 04–April 05
Section 1
Lecture: 8:30–11:30
Lab: 11:30–1:30

Section 2
Lecture: 2:30–5:30
Lab: 5:30–7:30

Office Hours
Monday 2:30–5:30
(or by appointment)

SKIP to Class Content

This class will cover HTML & CSS design and development, and serve as a prerequisite for the HTML / CSS 2 and Content Management Systems courses next semester.

Like anything in life, this outline is subject to occasional changes.

Throughout the term, I will add links to additional supporting content.

Official Print Outline ( pdf – note, the time listed in the PDF is for section 1 )

Learning Outcomes

Upon successful completion of this course, students will be able to

  • Understand HTML document structure & semantics. Produce economical and validated code.
  • Build complex layouts with fluid css grids.
  • Integrate media into designs. Use code-based methods when possible to conserve bandwidth, maintain resolution, and future-proof the design.
  • Choose appropriate graphics formats.
  • Use media queries to make designs adapt to device properties and capabilities.
  • Use progressive enhancement, designing for modern devices, while ensuring successful fallback to less capable devices and browsers

Textbook / Reference Material

There is no textbook for this class. We will use primarily online sources in the course.

Required reading for some of the early classes is found in
MarkSheet.io: A Free HTML/CSS Tutorial

Lynda.com Videos
Other topics are well-covered by Lynda.com videos.

How to login to Lynda.com using your Langara ID.

HTML Essential Training
CSS Fundamentals
Making Sense of the CSS Box Model
Up And Running With Sublime Text 2
Coding Faster With Emmet
Creating Optimized Web Graphics
CSS Selectors

An Excellent CSS Reference
CSS Reference.io

Another Excellent CSS Reference
Codrops CSS Reference

HTML5 Cheat Sheet
http://websitesetup.org/html5-cheat-sheet/

A Free Online HMTL & CSS Textbook:
Shay Howe: Learn to Code HTML & CSS
Shaw Howe: Learn to Code Advanced HTML & CSS

Course Structure

The class schedule is detailed below.

Techniques learned in one assignment or exercise will always be the starting point for subsequent ones. Be assured, therefore, that no lectures that can be easily missed.

It is your responsibility to make sure that you do not miss any announcements or course materials given in any class. Any additional announcements will be made via email to your mylangara accounts.

Assignments & Assessments
Assignment 1: Resumé 15%
Assignment 2: Magazine Mockup 20%
Major Lab Exercises 15%
Quizzes 15%
Midterm 15%
Final Exam 20%

Assignment Descriptions

Week 1: Jan 04 ( HTML Basics )

HTML Semantics / Sublime Text  Intro
h1-h6, p, ul, li, a, img
sftp
html validation

Lab / Class Files

Links

Resources

Required Reading

Required Viewing

Week 2: Jan 11 ( HTML Sectioning / CSS Typography 1)

HTML Sectioning Elements / CSS Typography
Font Properties, Color, Units of Measure,
The CSS Box Model
CSS Validation
Sublime Efficiencies Review

Links

Lab Exercises

Required Viewing

Required Reading

Next Week 8:30am: Our First Test

  • HTML: h1, h2, h3, h4, img, header, nav, article, a, ul, li, paths
  • CSS: how to specify fonts, css inheritance, box model, classes
  • SUBLIME TEXT: multiple cursors, tag wrap, split into lines

Week 3: Jan 18 ( Graphic Design & Typographic Principles )

Test Number 1
Alignment, Contrast, Proximity, Repetition, Readability

Lab Exercises

  • To be determined

Required Viewing

Tools: Color Theory Links & Palette Generators

  • Color Palette Generators & Color Theory Links

Week 4: Jan 25 ( Traditional CSS Layout Techniques )

Floats, Clears, Clearfix, Display Properties

Lab Exercises

Week 5: Feb 01 ( Responsive Web Design 1 )

Four Pillars of Responsive Web Design 
CSS Grids
Mobile First

Lab Exercise

Resources

Week 5: Feb 08 ( Responsive Web Design 2 )

Test Number Two
Thinking inside and outside the grid.

Lab Exercise

First Assignment ( resumé ) due by Monday, Feb 13 at 9am.

Week 7: Feb 15  ( READING WEEK )

No classes this week. College closed Monday, but open other days.

Week 8: Feb 22 ( Midterm / Self-Made Grids )

For the midterm, you will be given a layout to build within two hours.

The remaining time will be devoted to the learning how to make our own grids.

Class Exercise

Week 9: March 01 ( Graphics & Emmet )

File formats & usage,
Background Images,
CSS Gradients
Scalable Vector Graphics (SVG)
Icon Fonts

Smart & efficient authoring

Lab Exercise

Resources

Week 10: March 08

Forms / Tables

Final Exam Practice Exercise:
Build this layout. Make your own grid.

Week 11: March 15

Media
Video / Sound

Week 12: March 22

Work Day

Week 13: March 29: Final Exam Prep

Magazine Assignment Due. Please review this checklist before you stop working on it.

The exam will be like the midterm: you will be given a layout to build within a time period.

Files for Practice Exam: NYT MockUp

 

 

 

 

Standard
Langara Outlines

WMADD 4840 Outline

Your final assignment is due within one week of the last class, by midnight. The final exam will take place in the last class session—not in the exam period as officially scheduled. The exact dates are:

  • Exam: March 31
  • Final Assignment: April 7
WMADD 4835 Content Management Systems
Credits: 3 Room: B014
Contact Info:
Kevin McMillan
Office A247b
604.323.5941
Days & Times:
Spring 2017
Fridays, Jan 06 – April 03
12:30-320 (lecture)
3:30–5:20 (lab)

SKIP to Class Content

This class will cover Content Management Systems, specifically WordPress.

Like anything in life, this outline is subject to occasional changes.

Throughout the term, I will add links to additional supporting content.

I want to make as much of your learning task-based, so nearly every week there will be problem-solving exercises to be completed in class or in the lab.

Learning Outcomes

Upon successful completion of this course, students will be able to

  • install a Content Management System (CMS) framework on a production web server
  • configure a local testing environment with the same CMS
  • evaluate, install and configure appropriate CMS themes, modules, widgets, and plugins
  • create content, media, menu structures & content types
  • create and restore data and system backups
  • identify and implement appropriate security and anti-spam measures (user accounts, permissions, patches, etc.)
  • customize themes
  • write basic themes

Textbook / Reference Material

There is no textbook for this course: we will use primarily online sources:

Lynda.com Videos
Installing and Running WordPress: MAMP  (mac & windows )
Installing and Running WordPress: WAMP ( windows )
WordPress: Essential Training
WordPress: Building Themes From Scratch Using Underscores
WordPress: Developing Secure Sites

WordPress References
The WordPress Codex

WordPress Cheat Sheets
WP Mega Cheat Sheet
WP Developer Super Cheat Sheet

Course Structure

The class schedule is detailed below.

Techniques learned in one assignment or exercise will always be the starting point for subsequent ones. Be assured, therefore, that no lectures that can be easily missed.

It is your responsibility to make sure that you do not miss any announcements or course materials given in any class. Any additional announcements will be made via email to your mylangara accounts.

Assessments
Main Assignment: Theme Project 30%
Quizzes 15%
Lab Exercises 15%
Midterm 20%
Final 20%

Final Assignment Description (Revised March 2017)

Note, also, that dates listed can change in response to class progress. 

Week 1: Jan 06 ( Introduction to WordPress )

  • CMS vs Static Sites / WordPress.com vs WordPress.org models
  • Setup of Local Testing Environment: MAMP
  • WP Dashboard
  • WP Editing Area
  • Media / Galleries
  • Embeds
  • Posts
  • Permalinks

Weekly Videos

Resources

Lab Exercise

Week 2: Jan 13 ( Basic Content Types )

  • Posts vs Pages
  • Categories & Tags
  • Excerpts
  • Settings / Customizer
  • Menus
  • Site Backup

Lab Exercise

 

Weekly Videos

Week 3: Jan 20 ( Themes & Plugins)

  • A range of themes for business, portfolios, etc
  • JetPack
  • Common plugins

Lab Exercise

Weekly Videos

Week 4: Jan 27 ( Users / Comments / Security )

  • Test Number 1
  • User roles
  • Comments / Anti-Spam Measures
  • Other comment systems
  • Security pt 1

Lab Exercise

Weekly Videos

Week 5: Feb 03 ( Backup / Restoration / Duplication)

  • A Range of Backup Options
  • Backup Automation
  • Site Transfer
  • Site Restoration
  • Security pt 2

Resource

Weekly Videos

Week 6: Feb 10 (Midterm )

Resources

Week 7: Feb 17 ( Reading Week )

  • No classes this week. College closed Monday, but open other days.

Week 8: Feb 24  ( Child Themes )

  • Purpose of Child Themes
  • Functions.php
  • WordPress CSS

Weekly Videos

Resources

Week 9: Mar 02 ( Theme Writing )

  • The Loop
  • Basic Template Tags: content, author, category, tags, excerpt, post-thumbnail, etc
  • The WordPress Template Hierarchy
  • Menus

Weekly Videos

Resources

Week 10: Mar 09 ( Theme Writing 2 )

  • Test Number 2
  • Functions.php: scripts, fonts, theme-support
  • Starter Themes: Underscores
  • get_template_part

Week 11: Mar 16 ( Theme Writing 3 )

Week 12: Mar 23 ( Theme Writing 4 )

  • Multiple Loops
  • Custom Post Types

Resources

EXAM PREP / FINAL ASSIGNMENT PREP:

The following six-part exercise will help you prepare for the exam and the final assignment.

Week 13: Mar 30: Exam

 

Standard
Langara Outlines

Magazine Assignment Checklist

Please review this checklist before the Magazine assignment due date.

The description of the assignment is here.

Validation & Semantics

  • did you validate your html?
  • did you validate your css?
  • do your images have correct alt information?
  • are you setting up a hierarchy of meaning with appropriate heading levels?
  • are your sectioning tags (div, article, nav, footer, header) correctly used?

Graphics

  • have you chosen the correct format for your graphics?
  • are your graphic file sizes kept low?
  • are your graphic dimensions appropriate? Find your maximum needed image sizes, and then resize the images in Photoshop or another tool like the very useful XnConvert.
  • if using background graphics, do they hinder readability of text?
  • are file compression artifacts visible?
  • are all your image (and possibly text) sources accounted for?
  • were good images chosen? do they support the text?
  • is there variety in image treatments?

Graphic Design

  • does your design illustrate an understanding of the graphic design principles of contrast, alignment, proximity, and repetition?
  • is white space used effectively?
  • are there any cliché aspects to the design? for example, just because you can make a shadow in css doesn’t mean that you should make one.
  • are any design elements overdone? for example, if your heading is already bigger and in a different font, it probably doesn’t need to also be underlined and italicized.

Typography

  • is your text easy to read?
  • does your line-length get too long or too short at any point? For paragraph type, try to stay within 45 – 75 characters. At at the smallest breakpoints, you likely won’t even hit 45 characters, but definitely try to avoid paragraphs that have only a couple words per line.
  • did you specify “fallback” fonts, even for google-hosted fonts?
  • if using hosted fonts, did you download some that you’re not using?
  • do your typographic heading choices establish an obvious hierarchy of meaning?
  • does the “flavor” of the fonts you’ve chosen match your content?
  • did you spellcheck and grammar check all your written text?
  • if using wikipedia text, did you remove the footnote markers? ( eg [14] )
  • is there sufficient contrast between type color and the color of the background? For a good color contrast tester, use this excellent tool.

Responsive Design

  • did you use the viewport meta-tag?
  • does your design “break” at certain sizes?
  • did you test on a real device or two?
  • did you test on all of the browsers we have in the lab?
  • at any point, does your text get too long or two short?
  • at any point, do you have text (or other elements) sticking out of their containing elements?

Contact Form

  • is your contact form accessible?
  • does your contact form work? did you test it completely?
  • is your form nicely laid out, with care taken to honor the graphic design principles listed earlier in this checklist?

Pages / Links / Etc

  • did you test every page, and every link, and check that every image is showing up?
  • does your 404 help your user recover from the error?
  • is your navigation logical and consistent?
  • does your navigation include the typical things that would be in a magazine website?

Content

  • is this actually magazine-style content? there’s a difference between a magazine and a business website, for example.
  • is your “teaser” text likely to make someone want to read the article?

 

 

Standard
Langara Outlines

Langara PRM Teams 2016

Editorial Department

  • Lindsey Risto
  • Michelle Diaz
  • Joanna McDonald ( part time, if needed )

Media Department

  • Celina O’Connor
  • Erin Hughes
  • Jenelle Fajardo-Lavery
  • Anahita Jamali Rad ( part time )

Web Designers

  • Da Sol Yoo
  • Griselda Boquiren
  • Joanna McDonald

WordPress Designers

  • Marina Bender
  • Becca Van Dop
  • Julianna Sonntag
  • Nicole Yeh

QA

  • Vanessa Gosselin
  • Anahita Jamali Rad

Promotions

  • Michelle Diaz ( part time )
  • Celina O’Connor ( part time )
Standard
Langara Outlines

WMDD 4835 + 4840 Final Assignment

Your final assignment is due within one week of the last class, by midnight. The final exam will take place in the last class session—not in the exam period as officially scheduled. The exact dates are:

  • Exam: April 03
  • Final Assignment: April 07

It will be a website for a business—likely, but not necessarily, imaginary. The business type is up to you—but it could be a restaurant, other small business, or a festival of some sort. Feel free to discuss this with me.

If you taking WMDD4840, this will be a WordPress-based site for which you write the theme (presumably using Underscores).

If you are only taking 4835, this will be an HTML site.

You will hand in one site, not two.

The site could be another magazine site or a site that sells things over the Internet. It could be a small publisher like abookapart.com. If you choose to do something like abookapart, for example, you will need to make up your sample authors, book titles and covers.

If you know anyone who needs a website and you can convince them to let you build it, feel free to pitch the idea to me.

If you’re making up the material, all text will be written by you. Your images will be made by you, or you can use open-source or creative commons material.

Be creative in your looking for sources. For example, if you need pictures of authors, or satisfied customers, or members of the business, there are a number of UI sites providing free photos of potential users for mockups.

One such site is randomusers.me; another is uifaces.com. You can download images at either site, or with a little JavaScript you can have your site load random user data (picture, name, address, etc) from such sites (as in this example: temporarily broken, but I will fix). You don’t have to load random users for the assignment, but doing so is a good way to test how extensible your layout is: does it break if a name is long, for example?

The features of the site are up to you, but I want to see a site that is realistic and useful. If you made a restaurant site, as an example, I would like to see menus, reviews, directions, maybe a blog about food, pictures of dishes, a way to make reservations or to contact the manager, etc. If you have forms on the site, make sure that they are sent to you so I can test them, and make sure that their form submitted successfully messages fit in with your site design (rather than supplying a generic form from a host company or form handler, etc).

Most sites will need social components (perhaps for a restauarant’s Facebook page, but also sharing functionality). For the assignment, you don’t need to make such links work, but just have the icons as part of the UI. No need to go make a fake restaurant Facebook group, in other words.

I am not specifying particular coding methods. Just make sites that work.

You will be marked equally for design and development.

Things I want to see:

Portfolio-Ready Quality: Make sure that all text is concise, understandable, and consistent with the aims of the entire site. Get help with proofreading, if necessary. You don’t want spelling errors, grammar errors, or weak writing on a final assignment or portfolio piece. If you’re in doubt about how well-written a piece of text is, get classmates to look over it, or talk to me. Spellcheck. Grammar check. Do not leave this to the last minute. If you are applying for a job, and there are spelling or grammar errors in your portfolio, it will almost always destroy your chances of getting an interview.

Responsive Strategy: Does the site work regardless of device? Be sure to test your designs—using emulators, your crossbrowsertesting.com accounts, and (importantly) real devices.

UX: Is the site layout sensible? Is it consistent? Is there a hierarchy of content implicit in its organization? Does the UI of the site follow common conventions?

Design: Does the typography support the content? Does it contribute to the brand? Is it appropriate for the type of site? Is it easy to read at all screen widths?

Color: Does color add to or subtract from the message of the site?

Accessibility: Is your site accessible to as wide a range of people as possible? Are there barriers to people with weaker vision, for example?

Images: Do images help tell the story of the site? Are the images sized appropriately? Even though we often use images in exercises that are much bigger than they should be, do this assignment as a real, production site. The images must be open source. Here is a list of places you can find these kinds of images.

Alignments: A significant part of design is making sure things align. Make sure that this is taken care of. Few things make a graphic design look sloppier than bad alignment.

Code: Does the code validate? Is the code well-organized? Is it concise? Would it be easy to revise? Is the code commented? Is it semantic? Are class names logical and flexible? Would it be easy for new team members to understand how you’ve built the site?

Functionality: Is it easy to get in touch with the site owners? Would it be easy to share content? Are there reviews of the business? Is the product or service adequately described?

Extensibility: If the site owner needs to add a menu item, or another article, etc., will the site layout break, or is there room for the content to change?

Browser Support: the site should work well in IE11 and the latest two browser versions of the other browsers (see caniuse.com).

What You Must Hand In to StudentShare:

  • If you are taking WMDD 4840, a tested and working Duplicator archive + installer combination (handed into the 4840 handin folder). I will not have time to track you down if there are problems with either file. If I can’t mark it, you can probably guess what grade it will get.
  • If you are only taking WMDD4835, you just need to hand in the HTML site (in the 4835 handin folder).
  • An html page listing sources of all images, including URLs. All code must be written by you, apart from things like reset stylesheets or jQuery plugins, etc.
  • A screenshot of successful validation of your site’s css.
  • A screenshot of successful validation of the HTML of your index page.
  • Screenshots of your site front page in the latest two versions of Chrome, Firefox, Safari, IE, Edge, iOS, and Android. Use crossbrowsertesting.com to do this.

 

Standard
Langara Outlines

WMADD 4835 Outline

 

WMADD 4835 HTML / CSS 2
Credits: 3 Rooms: B014
Contact Info:
Kevin McMillan
Office A247b
604.323.5941
Days & Times:
Spring 2017
Mondays, Jan 09 – April 03
1:30-230 (A247 lecture)
2:30–4:30 (A247 lecture)
430-630 (A110 lab)
Office hours by appointment

SKIP to Class Content

This class will cover HTML & CSS design and development, continuing on from the HTML / CSS 1 course of last semester.

Like anything in life, this outline is subject to occasional changes.

Throughout the term, I will add links to additional supporting content.

I want to make as much of your learning task-based, so nearly every week there will be problem-solving exercises to be completed in class or in the lab.

Learning Outcomes

Upon successful completion of this course, students will be able to

  • Use efficient HTML & CSS coding methods
  • Use CSS transitions & animations
  • Use JavaScript libraries such as jQuery
  • Use frameworks like Bootstrap
  • Use CSS Preprocessors
  • Rapidly prototype designs and code
  • Critique the code and designs of peers
  • Respond professionally to critiques of their code and designs
  • Use emerging methods of layout and interaction, while ensuring successful fallback for older devices and browsers

Textbook / Reference Material

We will use primarily online sources in the course. Here are a few:

A Good Online Guide To HMTL & CSS:
Shay Howe: Learn to Code HTML & CSS
Shaw Howe: Learn to Code Advanced HTML & CSS

Interactive jQuery Course
try.jquery.com

Lynda.com Videos
HTML5 Structure, Syntax, & Semantics
SASS Essential Training
jQuery for Web Designers
Bootstrap 3 Essential Training
Advanced Responsive Layouts With CSS Flexbox

An Excellent CSS Reference
CSS Reference.io

Another Excellent CSS Reference
Codrops CSS Reference

HTML5 Cheat Sheet
http://websitesetup.org/html5-cheat-sheet/

Course Structure

The class schedule is detailed below.

Techniques learned in one assignment or exercise will always be the starting point for subsequent ones. Be assured, therefore, that no lectures that can be easily missed.

It is your responsibility to make sure that you do not miss any announcements or course materials given in any class. Any additional announcements will be made via email to your mylangara accounts.

Assessments
Main Assignment March 23 20%
Quizzes 20%
Lab Exercises 20%
Midterm 15%
Final 25%

There is one major assignment for the course. It will be completed in stages, with each stage representing part of the total mark for the assignment. Part of it will involve working with classmates, and part will be solo work. More details will come soon.

Note, also, that dates listed are approximate. For example, we are now a week ahead because we took the extra class time that was freed up by the Instructor change in other classes.

Week 1: Jan 09 ( 4815 Review / Advanced Selectors )

  • 4815 Final Assignments & Exam Review
  • Advanced Selectors: Fela Kuti

Lab / Class Files

Week 2: Jan 16 ( CSS Transforms & Transitions )

Lab / Class Files

Links

Week 3: Jan 23 ( CSS Animation )

  • CSS Positioning: Static, Relative, Absolute, Fixed, z-index
  • CSS Transforms
  • CSS Transitions

Links

Lab Exercise

Week 4: Jan 30 ( Transitions & Animation 2)

  • Test Number 1
  • CSS Transitions
  • CSS Animation
  • Changing Classes with JavaScript

Lab Exercise

Homework

  • for the class after reading week, please complete Levels 1-5 of try.jquery.com.

Week 5: Feb 06 (jQuery 1)

  • Test Number 2
  • Selectors
  • Filters
  • Traversal
  • Document Manipulation

References

Class Exercise

Week 6: Feb 13 ( Reading Week )

No class: Reading Week

Week 7: Feb 20 ( jQuery 2 )

  • Events ( Mouse, Keyboard )
  • Conditions
  • Loops
  • jQuery Plugins

Class Exercise

Week 8: Feb 27  ( Forms )

  • Test Number 3
  • Advanced Forms HTML 5
  • WP Post Edit / Dashboard Design
  • Form Validation

Links

Week 9: Mar 06 ( FlexBox )

  • Display: Flex
  • Rows & Columns
  • Wrapping, Aligning, Reversing
  • Exceptions
  • Browser Support

Links

Lab Exercise

Midterm / Midterm Exercise

Course content change: I am dropping SASS & Bootstrap. Mar 16 & 23 will be labs for you to work on the final assignment.

Week 10: Mar 13

  • Schedule Review & Course Change
  • Midterm Discussion & Remedy
  • Modernizr
  • HTML5 Shiv
  • Cross Browser Testing
  • Live Debug in Simulator
  • Final Assignment Discussion

Links

Week 11: Mar 20 ( Work Day )

Week 12: Mar 27 ( Work Day )

Week 13: April 03 Work Day

  • Final Site Due By Midnight
Standard
Langara Outlines

WMDD 4815 Assignments

Assignment One: HTML/CSS Resumé

For assignment one, I want you to make an HTML resumé.

This will be a single page. It will list:

  • your education
  • your employment history
  • your skills
  • your interests
  • your contact info
  • anything else you think is worth including

this could include a picture, or references, links to work you have online, etc

It will be responsive, meaning that it will look equally good on phone & tablet as it does on desktop.

The main concern here is that your text is exceptionally readable. Pay attention to

  • typographic hieararchy: is it easy to understand, at a glance, the structure of your content?
  • line length & line-height: at various breakpoints, is your text easily readable?
  • color: does color add to the resumé, or distract from it?

Make sure that your HTML & CSS pass validation.

Make sure that your page works in every browser we have in the lab, as well as on any modern phone or tablet.

When done, ftp your page to the following URL:

http://mylinux.langara.bc.ca/~YOUR-ID/resume

MARKING RUBRIC

Validated & Semantic Markup: 1
Responsive Effectiveness: 2
Typography: 2
Design: 5

Assignment Two: Responsive Magazine Design Mockup

For this assignment, I want you to produce a mockup of an online magazine site. This exercise will have four pages and be based on a grid system of your choice, or of your own devising.

The magazine focus is up to you. Make it realistic. If you like bicycles, make it a cycling magazine. If you like soccer or grass hockey, make it about that. If you like travel, consider making a travel magazine—this one might be an easier one to get great images for.

For images, you can use your own photographs, or images that you have acquired from copyright-free sources. Possible sources can include the following, or others. Just remember that you must list where images came from in your SOURCES page.

  • Unsplash: very high quality images. Copyright free: No restrictions on usage. Searchable.
  • Splitshire: totally free. Some good stuff. No restrictions on usage, other than “you can’t sell the images.”
  • Pixabay: Copyright Free, Attribution not required. Searchable. Photos, Vectors, Videos, Illustrations. Backgrounds. Textures. Lots to find here.
  • MorgueFile: Some good stuff, but a lot of the images can look a bit cliché stock photo.
  • Raumrot.com: Excellent curated Flickr selection. Some of the images have CC (Creative Commons) licensing terms (typically requiring attribution and an acknowledgement if you altered the image)—so if you use images from here, read the license details. Special Sets: groups of photos joined by theme.
  • Flickr: one of the oldest photo sharing sites on the web. Not all images are free to use, however. To understand the various  licensing terms, read this article and this one, too. Each image will have licensing information listed. To get a better understanding of whether the license allows your usage, click on the license term link.
  • Magdeleine.co: Licenses either Creative Commons, or Attribution Required. Useful search features.
  • NewOldStock: Vintage photos from public archives. No known copyright.
  • GratisPhotography: free of copyright. High resolution. Some high quality.
  • Jay Mantri: totally free license. Like UnSplash. Tumblr blog.
  • PickUp Image: free, no attribution required.
  • Picography: totally free.
  • LifeOfPix: Totally Public Domain. Any usage allowed.
  • Creative Commons Image Search

If you include images from copyrighted sources, you will get zero for the assignment.

The site must have

  • An index page that represents the landing page of this magazine website. The header of the site will have a logo.You will have “teaser” descriptions of articles on this page, possibly or likely accompanied by an image and other possible detail such as writer or category. You can invent this content.
  • One full article page. Give it a name of “story.html” and save it on the top level of the site.
    The article page must have at least five paragraphs, two headings, and two images.
  • A  404 page. Give it a name of “404.html” and save it on the top level of the site. Research good 404 pages to get some ideas of what you should include on that page.
  • A Contact page, with a form that works. Name: contact.html.
    For information on how to build a good form: Shay Howe Learn to Code HTML & CSS
    For a free form handler: FormSpree.io
  • A Sources page that lists the source of every image on the site, and the source of all the text. Include URLs for each resource not produced by you. This page will likely include a table that shows the image in one cell, and the URL in a cell beside it. Try to make this table responsive and as elegant as the rest of the site. Name: sources.html.
  • At least one menu. It can have links to pages that exist, and null links (#) for links that don’t exist.
  • Icon fonts for at least one menu.

Make the site beautiful, accessible, elegant, and responsive.

The site must have a search box in the header. Don’t worry about making that work: just make it show up.

The page MUST work well on any modern browser on desktop, smartphone or tablet. To test in more browsers than we have in the lab, use the crossbrowsertesting.com service. I will demonstrate in class, and give you a free account. 

Publish it at http://mylinux.langara.bc.ca/~YOUR_ID/magazine (as well as hand it into STUDENTSHARE)

Before publishing and handing the assignment in, please review this additional checklist.

MARKING RUBRIC

Validated & Semantic Markup: 2
Responsive Effectiveness: 2
Typography / Readability: 2
Index Page Design: 2
Article Page Design: 2
404 Page Design: 2
Contact Page Design: 2
Image Treatments / Design: 2

 

Standard