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 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.