ah teaches information design: 06 Interwebs Annotation

ah teaches information design: 06 Interwebs Annotation — A slide deck

Interwebs Annotation

Lecture outline

Covered in this lecture:

  1. The web as information
  2. Semantic markup & HTML
  3. HTML fundamentals

Interwebs Annotation

Introducing markup and the web

Please close all laptops except for those in the back row.

P1 Grades

P1 grades will be released by tomorrow evening. Some of the major concerns that came up in grading:

  • Missing the why something was an advantage or disadvantage.
  • Why the design succeeded not supported (i.e. 'I think this is a good choice of...').
  • Concerns in consistency of the design's visual language.
  • The design swayed too heavily to being aesthetically pleasing (not sufficiently informational, aka. utility).
  • Citations were missing.

Q1 Grades

Q1 grades will be released by tomorrow evening. Some of the major concerns that came up in grading:

  • Missing the why when answering a question (when requested).
  • Providing a quote from a reading other than the one being talked about.
  • As Andrew says: "Just using a quote to make your point and answer the question."

If You Have Grade Concerns

  1. Review your letter grades and the project rubric.
  2. Send an email to Andrew indicating a specific concern with your grade.
  3. I will follow-up to arrange a time to meet and discuss the grade.

Your TAs are not permitted to address grading concerns, please email me directly.

P2: Notes

A couple of things to note:

  • Remember that there are to be no branded materials (logos, colours for 'branding', etc')
  • Images are not required. If you use them, be aware of what they do/say. Leaving a comment can be useful.
  • We are not grading you on the amount of transitions used.
  • The sitemap and the wireframes should "match up" as one document describes the other.

P2: Final Deliverables

You are delivering:

  • A finalized sitemap
  • 1 final set of wireframes (for desktop and mobile)

What pieces of information are present?

A brief online article about a kitten

The Document-Object Model (DOM)

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.

Hypertext Markup Language 5 (HTML5)

Not quite standard

"In 2022, HTML5 will be a proposed recommendation..."
Ian Hickson

Can I Use It?

A good resource is Can I use... which gives you a breakdown which browsers support what HTML5/CSS3 elements and to what degree.

According to your reading, what might semantic markup be?

It is just markup

Telling the computer the pieces

HTML elements are (most frequently) comprised of an opening, and closing tag — i.e. <p></p> — using triangle brackets and a forward-slash to denote that they are HTML elements and not content.

<h1>What is semantic markup?</h1>
<p>Semantic markup is the effective use of markup - such as HTML - to define the meaning of content in a document. <em>Not</em> the definition of its visual aesthetics.</p>

Understanding Elements

Let's visit the HTML5 Doctor for a prescription.

Let's Markup!

Time to practice

Puppies are cuter!
A dog wearing a bird mask
So much cuter, and less deadly

1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
2. Aliquam tincidunt mauris eu risus.
Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien.

Semantic Markup

Markup that helps us understand the content.

<!-- What would the following markup help us understand about a document? -->
A pair of glowsticks swirling around in the dark

Having coding concerns?

Let us know!

Let us know sooner rather than later that you are having concerns with coding. Also, there are absolutely no 'stupid' questions. Do not know? Please ask.

Web Toolkits

Prepped and ready to go

Available on Canvas in this week's module will be links to programs for your first 'web toolkits'. It contains:

Dev Tools

Your new best friend

Ever wanted to know what Google would look like with a red background? Right-click and 'Inspect Element' opens up the development tools to mess around with things in.

A messy computer desktop filled with different folder and file icons
It's time to clean up your act

Common Coding Errors

Since we will be starting some scripting this week, please keep an eye out for:

  • Typoess: This is handz downe teh most commmon prublem.
  • Forgetting brackets: Not ending or closing an element will lead to
  • Forgetting to save: The file won't be able to update if not saved.
  • Files and folders matter: The naming of files and folders (and where you put them) is very important.


You may...

REJOICE in the mighty power of HTML! ...er, or, see you in a couple minutes...

Setting up an environment

<!-- Let's open up your computer, we make a _work folder, a public_html folder -->
Our HTML & CSS Validator

This week's labs

The low-down

  • Coding tutorial
  • P02 critiques

Next week's reading

Selections from CSS3 for Web Designers (Cederholm).

Next week's lecture

how u rd?

  • Web content
  • Aesthetics
  • CSS Fundamentals

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Wednesdays from 11:00-11:50am and Fridays from 8:30-9:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna