Review

Review of the Web Design Process

1. Identify the types of users you need to communicate with
2. Identify what each user type needs to be able to do
3. Organize your content semantically
4. Begin creating visual hierarchies using type.
5. Compose appropriate layouts for your content
6. Create visual hierarchies for your content with type
7. Apply design principles to emphasize relationships between elements
8. Create mood and enhance your visual hierarchies and element relationships using color
9. Breath life into your design with behavioral feedback
10. Test, rinse & repeat!

Basic HTML

• Try creating a page for each of the pages on your sitemap
• Try linking the pages together using anchor tags we talked about above
• Add a link to the W3C HTML Validator at the bottom of each page you create
• Upload your pages to your TCNJ web account
• When you're finished, point your favorite web browser to your new pages to see how they look
• Try validating each page using the W3C Validator

Serving Pages on a Web Server

In order for the rest of the world to be able to see and interact with your web pages, you'll need to serve them through a web server with an internet address. It just so happens your TCNJ web accounts let you do this pretty easily.

FTP

FTP is an acronym for "File Transfer Protocol", and allows us to upload our web pages from our local computer to a web server.

Execise

• Fire up you FTP client
• Log into your TCNJ web account at beauty.tcnj.edu using your email username & password
• Find your local copy of your web page in the local filesystem pane of your FTP client
• Navigate to your home directory on your TCNJ web account filesystem in the remote server pane of the FTP client
• Double-click your web page to upload it to your TCNJ web account
• Open your web browser and point it to http://www.tcnj.edu/~username where username is your email username
• You should now see your web page listed on your TCNJ account

The Document Object Model

When the browser loads an HTML document, in creates an internal representation of the HTML in memory. This internal representation is called the Document Object Model, DOM for short.

This DOM allows us to reference specific HTML elemts in the page, associating styling information with Cascading Style Sheets, or events with Javascript.

Cascading Style Sheets

Cascading Style Sheets allow us to define how we want our HTML to appear on screen. The HTML gives our content structure, CSS presents it. Proper web design separates content (HTML) from presentation (CSS). Separating content and presentation gives us several benefits:

• helps us organize our projects - we can keep our HTML and CSS seperateand more accessible
• we can work on each separately, which is easier in a team environment
• simplifies the creation of swappable “Themes”

Including Styles

• Link external stylesheets using the <link> tag, e.g. <link rel="stylesheet" href="mystyles.css">
  • External stylesheets should be saved with the .css file extension, e.g. mystyle.css
• Embed them using the <style>...</style> tag
• Use them inline with the style="..." HTML element attribute

What does “Cascading” mean?

We can apply our styles in sequence, selectively overriding previously defined styles, by “cascading&rquo; a new style on top of it.

• set your base styles using linked stylesheets
• cascade override styles using the <style> tag
• avoid inline styles because they break our ability to separate content and presentation

CSS Selectors

• the wildcard, applies to all elements on the page, i.e * {...}
• tag names, applies only to that tag, i.e. h1 {...}
• ids, applies only to the element with that id assigned as an attribute, i.e. #myid {...}
• classes, applies to all elements with that class assigned as an attribute, i.e. .myclass {...}

CSS Rules

CSS rules are the collection of properties and values you are assigning to your CSS Selectors. For example, to apply a font-family to all elements on your page (in essence setting the default font family), try this:

* { font-family:Arial, Helvetica, sans-serif; }

You can find out more about CSS at the Mozilla Developer Network's Getting Starrted With CSS.

Typestyles

Type is the most basic mode of communication in web design – we use words to communicate first. Good design presents our ideas quickly & simply, making it easy for our audience to understand what we're communicating. Typestyles are specific letter forms that have been developed for presenting text on different media (stone, paper, computer screen, etc). A font is a packaged typestyle that includes additional specifications, including sizes, weights, styles (normal, italic, oblique) & spacing information.

Serif & Sans-Serif Fonts

There are two main font families used on the web:

• Serif
• Sans-Serif

Using Type with CSS

There are a number of properties you can use to control typestyles using CSS:

• font-family, i.e * {font-family: Arial, Helvetica, sans-serif;}
• font-size, i.e p {font-size:12px;}
• line-height, i.e h1 {line-height: 2em;}
• font-style, i.e .italics {font-style: italic;}
• font-weight, i.e .bold {font-weight: bold;}
• font-variant, i.e .small_caps {font-variant: small-caps;}

You can also set all of them at once using the font property, i.e. h1 {font:30px Times New Roman, serif;}.

You can find more details on CSS font properties at W3Schools.

Exercise

• Go to CSSDeck
• In the HTML pane, create a few html elements including an <h1>, a <p>, and an anchor tag <a>
• In the CSS pane, create a few CSS selectors (one for each of your HTML elements), and try changing the font-family, font-size and font-style for all of them & each individually.

Assignment 3

Reading

• Chapter 3 and Appendices A & B in Design for Hackers
• Create a slide in your Design Notebook and name it Typestyles and today's date. Based on your reading, explain the difference between serif and sans serif fonts and when it's better to use one instead of the other.
• Surf the web for a while, looking at the typestyle choices different sites have made. Pick one site that you feel make particularly good use of type and link to it in your Design Notebook entry for this week. How many type styles does it use? Are they serif, sans serif, or both? See if you can find out the actual type style used (try finding in on pp 308-309 in Design for Hackers)

Share your Design Document and email the l9nk to me at thomesoni@gmail.com. Here's more info on sharing Google Drive documents.

Design

Create a Type Treatment for Your Pages

After you have completed the reading assignment, revisit the HTML pages you created and create a type treatment for them.

• Create new HTML pages for the remaining pages from your site map (hint: copy and paste one of the pages you made in class, change the title).
• Make sure you create anchor tag links for each of the pages so you can navigate around your site.
• Pick a font or two (remember smaller text should probably be sans serif for reading on the web, headings could be a serif font, but choose carefully according to the guidelines in Appendix A in Design for Hackers
• Create a new stylesheet using your favorite text editor, or edit the stylesheet you created in class. Remeber to name it with the .css file extension like mystyle.css
• Using the various font properties, create a type treatment for your web pages.