web interactivity

Course Name: Web Interactivity
Course Number: Art 88

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

Meeting Time: Fri 10:00 AM - 1: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

Note: the exam period starts at 10 AM, and goes till 12. If you come later, no one will be there!

The endless semester has finally come to an end; we celebrate the birth of summer and the coming of the ritual barbecues. Here is the final exam; open it in any word processor, type in the answers, and then head for home.

Thank you all for a great class, and have a wonderful summer!


Today we will be working on unfinished Projects. Here is the updated assignment matrix, a list of all the work that I have on my hard drive. A white square means I do not have the assignment, or that the one I have is incomplete. It does NOT mean you didn't do it; it means I don't have it. Check your status on each Project and work on the ones you still owe.


Lesson M: More Javascript

In class we'll build this page using an external CSS file and an external Javascript file, Any click on a thumbnail changes the "display" property of a div from "none" to "block". The thumbnail click also sends the name of which large photo to show.

Any click on the div that contains the larger picture triggers another JS function that changes the display back to "none" and shows the thumbnails again.

Here is an archive that contains the HTML file, the CSS file, the JS file, and all the pictures. Download it so you can follow along while I build the page in class. This will be Project 16.


Lesson L: Intro to JavaScript

First we will build a page like this one so I can show you some basic Javascript. Click on this archive to download a similar file and its images, so you can have these examples right in front of you.

After that we will work on Project 15, a Javascript-based pic-swapping page. Here is an example, and here is an archive containing this page and its related picture files. Use your own pictures, please. You will need small and large versions of each file, and I strongly recommend you make all the thumbnails the same size and all the larger images the same size. You don't have to follow my design; you could have the thumbnails running along the bottom, for instance.


Lesson K: HTML5 Audio and Video Tags / DVD Menu

Today we will examine the new HTML 5 audio and video tags. Click here for an archive containing all the files you need to put a page together that includes an audio tag, a video tag, and an embedded YouTube video. Click here to see an example page. Do some styling on the page to make it look better than mine! This is Project 13.

In olden times (like five or six years ago) the only way to have a full-page image with semi-transparent buttons was to "slice and dice" the image in Photoshop and then build an elaborate table. With CSS3 we can do this with a lot less complexity. Your assignment (Project 14) will be to create a DVD-style menu page with a full-screen image underneath and some absolutely-positioned buttons on top. The page should look something like this. Use a custom font for the headline text. I will go over this in class before you begin.


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 applied to box-level elements. The assignment will be to create a child's birthday announcement that uses at least two transitions; in addition, create two transformed elements that also use transitions. We will call this Project 10.


NOTE: here is the assignment matrix for the first six projects that will make up your midterm grade. If any particular cell is filled with white, it means I don't have the assignment. Red means I have it, but it isn't complete. Any other color means I have the assignment. Remember, this doesn't mean you didn't do it, just that I don't have it.


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)

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: 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 3: create a button sprite

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


Lesson B: 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 2: create a body background image that uses at least two layered images


Lesson A continued: More Styling of the Bio

We continue to build styles into the bio. We will introduce text-relevant CSS and show refinements in the CSS box model like margins, padding, borders, floated images, text and box shadows, background images, centering, and styled links.


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.