web interactivity

Course Name: Web Interactivity
Course Number: Art 88

Instructor's Name: Mike Enright
Contact: enright@menright.com

Meeting Time: Thursday 2:00 PM - 5:50 PM

Course Description

This course introduces the principles of interactive design for the Web. It focuses on developing a basic understanding of the design process, proper coding and styling of web pages, exploring concepts of interactivity, and designing projects for Internet delivery. Projects range from web ads and menu design to the production of fully functional web pages utilizing the latest technology.

Prerequisites: ART 84 or departmental permission Corequisite: ART 87 or departmental permission

Course Learning Outcomes

Upon successful completion the student will be able to:

Course Grade and Attendance Policy

Each week students will be expected to work on projects using the skills learned in class. Students will be expected to create their projects in class, and may do additional work outside of class in school labs or at home.

Determination of Final Grade

It is crucial that you attend every class. Three unexcused absences will result in failing the course. Excessive lateness will result in lowering of grade and can constitute an absence. Students must complete all class work and meet all assignment deadlines.

Materials and Supplies

Memory stick or portable drive

A good explanatory text: HTML5 & CSS3: Visual QuickStart Guide

Digital Arts Program Goals

General Education Goal
Communication: Use reading, writing, listening and speaking to find, interpret, and communicate information in various modes, including aesthetic, symbolic and graphic.

Assignments

Lesson J: Rebuild my Nav Bar

Today we will rebuild the nav area of my web site, which will show how to create a drop-down menu based on nested lists. Click here for an archive of all the elements you need to assemble the site. Pay close attention as we build this in class. When the instruction period is finished, you will be responsible for adding drop-down menus to both parts of Project 11 from last week; this will be Project 12.


Lesson I: Rebuild my Header

Today we will rebuild the header of my web site, which will show us something of gradient backgrounds, custom fonts, absolute positioning, and CSS animation. Click here for all the elements you need to assemble the site. When we are done building this in class, you will be responsible for creating your own header using a gradient background, absolute positioning, custom fonts, and a CSS animation. The recreation of my header and creation of your own will constitute Project 11.


Lesson H: Transitions and Transforms

Today in class I will reconstruct this page which shows how transitions and transforms can be integrated into a design. A zipped archive of the page can be downloaded here. The assignment will be to create a similar concert announcement that uses at least two transitions; in addition, create two transformed elements that also use transitions. We will call this Project 10.


Lesson G: Custom Fonts

Take a look at this example page. The page uses two custom fonts installed with the new CSS @font-face property. To download a zip archive of the page and the font folder that accompanies it, click here.

Your job (Project 9) will be to create a page using two custom fonts that you will download from fontsquirrel.com. Make sure one is a display font (a decorative font designed for large headers, posters, etc.) and one less decorative font for the copy text. Make it look like the example page, but with a little more style.

Here is a detailed tutorial on obtaining fonts from a font library like fontsquirrel and installing them in your page using CSS. I will also go over this entire process in class.


Lesson F: Styled Table and a Fake Table

Before you start find six images you will use in your tables. Each picture will come in two versions: first, a full-size version of the original image which is at least 1,000 pixels in its largest dimension. The second version of the same image should be resized as a thumbnail with a maximum dimension of 300 pixels in either the horizontal or vertical dimension (whichever side is largest). Store all images inside of a folder in your project folder.

We'll create two versions of a table in class. The first will look something like this and uses the HTML table tag to do its work. Style the table using various CSS rules to make it look good. This will be Project 7.

After the first table is completely styled, we'll produce a second version of the table, this time purely through CSS and without using the HTML table tag. We'll call this the fake table and it will be Project 8. Here's a version to evaluate; download either page to see the CSS that is being used.

After your tables are completed, attach Dreamweaver behaviors (see the Behaviors window) to each thumbnail so that a single click opens the larger version of the image in its own window. I will go over this procedure in class. Click here for an archive of both pages and the images I'm using.


Lesson E: Two-column Layout (no floats)

Projects 1-4 should all be on my computer by the end of today's class. These projects will make up your midterm grade.

The first thing we'll do in class is to create a two-column layout with some pictures (left column) and text (right column). We won't use the traditional approach of floating the left-column and instead turn both columns into inline-blocks. Here's an example of the page we'll build in class. We'll call this Project 5. Click here to download a zipped archive of this whole example folder.

Finally, I've put together a mini-project for anyone who finishes early. Take a look at this page; download the page to see the code that creates these variations. All of them are made by layering the CSS3 text-shadow property (like we layered a background image in Project 2). Your job is to make a new page that uses at least four of these text-shadow styles on some large display text. This will be Project 6.


Lesson D: Lists as Buttons / Finish the Bio

To start the class we will review button sprites. When we finish we will put in more work on the bio by creating styled links in the header and the footer. We will also format the resume page.

Here is an example of a horizontal button set; this link will lead you to an example of a vertical button set. All the CSS you need can be found in the heads of these two pages after you have downloaded them.

Project 4: create two unordered lists and turn one into a row of horizontal buttons and one into a stack of vertical buttons.

Finally, to finish the bio take the links currently in the nav section of your bio assignment and (using an unordered list) turn them into a horizontal row of buttons.


Lesson C: Background Image Layered

Today we will look at background-size keywords and background-image layering.

Example: four layered background images sequentially triggered by a button press. To see the code and get the images, download this zipped file.

Project 3: create a body background image that uses at least two layered images


Lesson B: Button Sprites

We will take a short tangent to look at button sprites, buttons that show the old rollover technique done entirely in CSS without any Javascript.

Example: take a look at this example of a button sprite. Download the page and open in Dreamweaver to see the code.

Project 2: create a button sprite

Here is a link to some button art you can use to follow me through this process.


Lesson A continued: Styling the Bio with CSS

I will be going over all this in class, but here's a short intro to CSS styles and where to put them.

The assignment is to take all four pages of the bio site and give each page a styled section at the top (using the <header> tag) and customized fonts and background (using the <body> tag). In addition, using the <img> tag and the float property, make the text flow around the images you have inserted.

CSS tutorials:

CSS Tutorial 1: Create a style for the <p> tags in the <head> of an html file.

CSS Tutorial 2: Create a style for the <body> tag in an external style sheet

CSS Tutorial 3: Use the float property to flow text around an image, and the margin property to give it some extra space.

The CSS Box Model: Shows how every html block (a <p>, an <h1>, an <img>, etc., has padding, a border, and a margin

Some good sites on CSS:
http://www.w3schools.com/css/default.asp

http://csszengarden.com/
http://www.alistapart.com/


Lesson A: Bio

In part A of the Bio assignment create a three page site about yourself featuring an index page, a page with some information about your life, info about your education or work experience, and info about where you live. All pages will feature an <h1> headline tag, several <p> tags in the content, and links to the other three local pages. For a more detailed description, click here For example pages, click here. We will call the bio Project 1.

Review tutorials:

Write some HTML: text tutorial or video tutorial

Prepare image for web: text tutorial or video tutorial Click here for the text tutorial image: kkp poster.jpg
Add the image to a page

Create a link: text tutorial or video tutorial

Turn an image into a link: video tutorial

See a video tutorial on how your site should be structured.

Web history links:

For images of Laika and Sputnick 1 and 2, click here.For an

An illustration showing all the computers connected to the very first version of the internet: click here

For a photo of the very first web server, click here.