Course Outline



LESSON

NUM DAYS

TOPIC

LINKS

1

1

This lesson engages students in a discussion of the web as social experience. Issues of social responsibility in web use are explored as well as the relative merits of the influence of the web on society, personal lives, and education.

Introduction

Web 2.0 Project Ideas

2

1

This section examines various Web 2.0 applications and their use in social web based search as well as shared media and data storage.

Web 2.0 Project Ideas

3

2

This section explores the concept that free web applications can serve as replacements for desktop applications. Three different web applications are considered.

Web 2.0 Project Ideas

4

1

Continuation of previous lesson.

Web 2.0 Project Ideas

5

1

An introduction to the use of basic html and css markup

HTML - Basic Markup

6

1

Exploring the concept of separating style from structure by keeping separate html and css files and making code more reusable.

HTML - Reusable Code

7

1

Explore image editing for the web using Photoshop or an image editor of choice.

Photoshop

Photoshop - Project 1

8

1

Using and styling tables in html

HTML - Tables

9

1

Using lists and nested lists for presenting information such as outlines in a web page.

HTML - Lists

10

1

Introduce the use of css as a page layout method. Consider spacing and placement as design elements.

HTML/CSS - Layout

11

1

Introduction to basic javascript. Adding interactivity to web pages.

Javascript

12

1

Introduction to javascript functions. Creating modular, reusable code and using javascript to learn fundamental programming concepts.

Javascript - Functions

13

2

This lesson introduces several web user interface elements combining javascript, html, css, and Photoshop.

Photoshop - Filters/Effects

Javascript - Rollover Buttons

Photoshop - Project 2

 

14

1

A number of javascript libraries provide an easy way to implement advanced functionality. Mootools provides an easy way creating web 2.0 style navigation called the accordion menu.

Javascript - Mootools

15

1

This lesson further explores the use of javascript library effects. One of the most commonly found effects on the web today is known as the lightbox slideshow which uses a combination of javascript libraries: prototype and scriptaculous. It allows for the automatic creation of an interactive slideshow based on javascript and html lists of images. Another powerful javascript library is called jquery. Here we implement a small sample which creates a slide puzzle from an image.

Javascript - Lightbox

Javascript - JQuery

16

2

Random numbers are used in game design and can also be used to add a dynamic element to web pages. This section explores javascript and the use of random numbers.

Javascript - Random Numbers

17

1

Adobe Flash (formerly Macromedia Flash) is a proprietary web animation platform. The introductory lesson demonstrates how to use stop action photography and Flash to create a flipbook effect.

Flash - Flipbook

18

1

An animation technique called tweening is explored in Adobe Flash.

Flash - Tweening

19

1

The movie clip is the basic unit of Flash animation which allows for reusability and scripting. This lesson is an introduction in the creation of movie clips.

Flash - Movie Clips

FINAL PROJECT

3

The class selects from one of two possible projects:

 

1) An html/css based project in which a multi-page website is planned and created using a student designed template.

 

2) A Flash based game which incorporates collision detection and scoring making use of the scripting examples in the tutorial website.

 

Final Project