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

P5.js - Javascript version of Processing creative coding library.

P5.js - QuickStart

18

1

P5.js Coding Sandbox

Coding Sandbox

19

3

Various P5.js creative coding projects.

Creative coding projects

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 P5.js based game which incorporates scripting examples from the tutorial website.

 

Final Project