IAT-235: 10 Help I Have Fallen

IAT-235: 10 Help I Have Fallen — A slide deck

Help! I've Fallen! And I Can't Get Up!

Lecture outline

This lecture is special. I will be answering most questions relating to your project or web concerns that you have encountered to this point.

Help! I've fallen, and I can't get up!

Your tech support week

First half:

  • Semantics and HTML
  • Styling and CSS
  • Grids and Responsiveness

Second half:

  • New Web-Design Things
  • Project questions
  • Debugging: How do I figure out the problem and fix it?
  • Advanced Interactions

For the love of chocolate Andrew, what do you mean by semantics?!?!

What would you expect if you saw:

<house>
<windowsill status="sunny">
<cat></cat>
</windowsill>
<bed type="human">
<dog></dog>
</bed>
<wall holes="5">
<mouse>
<cheese type="mozzarella"></cheese>
</mouse>
</wall>
</house>

How do we get a more detailed definition of tags?

For that I highly recommend HTML5 Doctor and the Mozilla Developer Network.

Different Elements, Different Meaning

With the help of HTML5 Doctor and your smarts, please answer the following questions:

  1. What are the differences between the section, article and div elements?
  2. How are the head and header elements defined differently?

When is using <br> okay?

The <br> element defines a line break in text. This only really makes semantic sense in a few occassions. Some examples:

  • In an address:
    352 Main Street<br>
    Vancouver, BC<br>
    V2V 2V2
  • In a poem:
    Another night deprived of slumber<br>
    Hours passing without number<br>
    My eyes trace round the room I lay...

ID vs. Class

What is the difference?

IDs (#id):

  • Can only appear once per page
  • Each element can only have one
  • Should describe the context

A class (.class):

  • Can appear multiple times per page
  • Each element can have multiple
  • Should describe its purpose

Linking Pages

Unlike a link within the page, linking between pages involves knowing where files are and their names.

Consider this file structure:

  • other.html
  • pages
    • index.html
    • review.html
    • contact.html
<!-- From the index.html page -->
<a href="review.html">Review</a>
<a href="contact.html">Contact</a>
<a href="../other.html" target="_blank">Other</a>

<!-- From the other.html page -->
<a href="pages/index.html">Home</a>
<a href="pages/contact.html">Contact</a>

Building Forms

There are some basic components required when we build a valid form. Please note that within this course the forms that you build will not in fact work as we need some back-end code to have our forms fully function.

<!-- We must declare a "method" and "action" attribute for our form to be valid -->
<form method="post" action="#">

<!-- The label element helps define different inputs using the ID of the input to build a relationship -->
<label for="input-name">Name:</label>
<input type="text" id="input-name" placeholder="Jane Doe">

<!-- The input element has different "types" which allow us to collect differnt input -->
<input type="checkbox" id="input-subscribe"></form>

Form Example



HTML Separation

A good question from one of you was: Like we seperate our CSS into different files, can we seperate our HTML?

Sadly, no. Not without another language.

Any lingering HTML questions?

CSS Support

Why Use Normalize.css?

Normalize.css ensures that all browsers will (by default) render our page fairly consistently without having applied any styling. It makes it easier to ensure consistent styling once you start adding your own.

Does the Order Matter?

Let's assume that we're loading up our stylesheets as follows in the HTML example below:

If the three files set the colour of .button as listed, what colour will the button be?

<link href="css/normalize.css" rel="stylesheet">
<link href="css/grid.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
.button { color: black; } /* normalize.css */
.button { color: blue; } /* grid.css */
.button { color: pink; } /* main.css */

Does the Order Matter?

If I am applying a number of properties to one selector, the order does not matter unless we are using vendor-prefixed properties or we apply the same property twice.

.button {
color: black;
font-size: 2rem;

/* Note we have set the color again here */
color: pink;
}

Specificity

The order in which things are read

  1. Inline styles: should never be used
  2. ID's: #home, #cool-stuff
  3. Classes, attributes & pseudo-classes: .home, [class], :hover
CSS specificity as illustrated by Star Wars characters

Smart CSS

You want to aim for CSS stylings that are scalable and modular. Here are some divisions suggested as a framework:

  1. Base rules: direct styling of elements for normalizing or defaults
  2. Layout: structural styling for the page (i.e. .grid, .grid-column)
  3. Modules: styling for different components (i.e. .nav-bar, .nav-button)
  4. State Rules: styling different states (i.e. .is-current, .is-opened)

Coding Conventions

When you get started on planning out elements

More things to ensure:

  • Use a purpose-oriented naming convention: .external-link (describe the content)
  • Avoid naming based on style: .blue-border
  • Use understandable names: #information-for-voters makes more sense then #section2
  • Agree with your teammates: You need to understand one another

CSS Sampler

nav { /* generic styling */ }
#nav-main { /* styling specific to the main navigation */ }
.nav-button { /* styling specific to one button */ }
.nav-button.is-current { /*stying specific to one button's state */ }

Pseudo-classes

define how we can use in our CSS to style elements differently when a user interacts with the given element.

  • :visited — when an element (link) has previously been opened by a user.
  • :hover — when a user has hovered over an element.
  • :focus — when a user has 'focused' or selected an element with the keyboard.
  • :active — when a user has an element 'activated' or pressed down.

Pseudo-Classes Example

A button demonstrating the different states possible:

Button

Ems and Rems and Text

A recap

As a general rule of thumb, setting your paragraphs to 1rem and scaling other things accordingly is better practice.

Ems

50 pixel font size

0.8em font-size
0.8em font-size
0.8em font-size
0.8em font-size

Rems (root-em)

50 pixel font size

0.8rem font-size
0.8rem font-size
0.8rem font-size
0.8rem font-size

Units in CSS

As much as possible, we want to work with responsive units in our pages, but keep in mind that this is not a requirement, but a recommendation.

/* vh & vw units correspond to a percentage of the viewport height and width */
width: 50vw; /* 50% of viewport width */

/* % units correspond to a percentage of the parent's size */
width: 25%; /* 25% of the parent element's width */

How do font embeds work?

Google Fonts is a good resource for free webfonts and FontSquirrel will let generate your own webfonts, but be careful about legality.

@font-face {
font-family: 'FontName';
src: url('FontName.eot');
src: local('FontName Regular'), local('FontName'),
url("FontName.woff") format("woff"),
url("FontName.otf") format("opentype"),
url("FontName.svg#grablau") format("svg");
}

Positioning and Layering

Here we have some image and text we want to make into a button.

Centering Things

How you center inline elements and block elements differs:

I'm an inline element that needs centering
I'm a block element that needs centering

Form Example



Any lingering CSS questions?

Grids and Responsiveness

Grids Recap

Let's revisit our grids tutorial

We will:

  • Revisit positioning content in the grid
  • Ensuring the grid reliably collapses

Media Queries

You can make multiple declarations using and (examples below). More good explanation of media queries at CSS Tricks.

@media screen and (max-width: 30em) and (orientation:portrait) {
/* This CSS will only render on screens under a width of 30em in portrait orientation */
}

Any lingering grids or responsiveness questions?

Break-time!

New Design Things

Backgrounds

Let's add some backgrounds to our box below!

Large Hover Effects

hover link

Transforms

CSS transforms — a good overview at CSS Tricks — provide functionality similar to that which you might find in other graphics rendering or manipulation programs.

hover link

Making Tables Responsive

This is sadly a more complex topic than we can cover today, but I would highly recommend the CSS Tricks article covering approaches to responsive data tables. It provides a variety of different approaches, the majority of which work purely with CSS and HTML.

Changing Shapes

Why is everything square?

There were two requests along this theme:

  1. How do I make lots of different shapes in CSS? In a somewhat hacky way...
  2. How can I create 'cards' similar to Google's material design? By leveraging our CSS vh/vw units.

When do I use vendor prefixes?

Vendor prefixes such as -moz-, -webkit- or -o- (Mozilla, Safari/Chrome, Opera) allow us to access CSS functionality not yet fully implemented in the browser. Remember that Can I Use? helps determine when you will need to use a prefix or not.

nav {
position: -webkit-sticky
position: sticky
}

Any new design 'things' questions?

Project Questions

Do we need to use the existing branding/logo for Vancouver? and how do we use their info without their brand?

No, please do not use their branding.

How many pages do we need, and do more pages equal higher grade?

There is no minimum or maximum, but more pages do not equal a higher grade. Effective use of content will equal a higher grade.

How much real information should go on the site?

All of it should be real information.

Can we edit or make our own content?

Yes, but be mindful of your time and energy.

Are icons/logos/fonts required?

No, but they may help to distinguish your project. Make sure to cite any materials that are not your own.

Do we need to implement infographics in our final product?

If your content calls for it, then yes. If not, then they are not required.

Should the website look like P02?

Yes and no. Because you have developed aesthetics and may redevelop structure beyond P02's consideration, the final website should far exceed P02's design quality in that regard.

The Offline 'Thing'

Think of this as an 'information' design problem. How do we 'inform' residents about voting, as well as give them a place to 'follow-up' as necessary.

How feasible does the offline component need to be?

The offline component must be produceable today; as-in, we would need to be able to make it today.

IAT-235 — P04: Rubric

Any lingering project questions?

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.did I expect? What did it do? andwhy?

<div><p>Some content that isn't particularly exciting, but has a problem...</p>/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

Why are the two columns escaping the box below?did I expect? What did it do? andwhy?

This column spans 50% of the page.

This column spans 50% of the page.

Debugging

CSS isn't rendering at all or image isn't showing up:

  1. Reload the page (command/ctrl+R)
  2. Check that the file is connected/loading by using the "network" pane in developer tools
  3. If the file is not showing up in the listing on load, it isn't linked properly
  4. If it shows up in the listing but doesn't load, check that there is something in the file

I don't see any immediate errors, but the CSS for an element isn't rendering:

  1. Reload the page (command/ctrl+R)
  2. Right-click + inspect element; take a look that the styles you've specified are being applied
  3. If the styles aren't being applied, check the selector or class in the CSS, then check the HTML
  4. If the styles are being applied but don't appear, check the HTML for an unclosed tag (or the like)

Any debugging questions?

Advanced Things

CSS Animation

Sadly, I don't think we have enough time to get into CSS animation in depth, so I recommend visiting Smashing Magazine's The Guide to CSS Animation Principles & Examples.

Faking It

Since we haven't taught you everything

As discussed, there are some things you won't be able to do with what we have taught you. Avoid over-extending yourself unless you feel comfortable, as we are more interested in seeing a series of functioning responsive pages over broken though slightly-shinier pages.

When in doubt, aim to get the process working as intended rather than making the functionality super-slick.

Javascripting

Once the page has loaded, you can mess with it

To achieve effects like smooth-scrolling and dropdowns, we need to be able to alter the page once it has loaded.

// Javascript allows us to alter the page AFTER it loads
// Let us take a look at this slide-deck WITHOUT JavaScript

I Need Help

Sites to support you

Next week's lecture

  • The coding quiz
  • More HTML/CSS

The Coding Quiz

Some notes

  • You will have 1 hour
  • Only on HTML+CSS covered thus far
  • Laptops are required

There will be 3 questions:

  1. Debugging some problematic HTML+CSS
  2. Semantically marking up content
  3. Styling an item to specification

This week's MEGA-LAB

The low-down

  • Crits
  • Technical support

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