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. |
|
|
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. |
|
|
3 |
2 |
This section explores the concept that free web applications can serve as replacements for desktop applications. Three different web applications are considered. |
|
|
4 |
1 |
Continuation of previous lesson. |
|
|
5 |
1 |
An introduction to the use of basic html and css markup |
|
|
6 |
1 |
Exploring the concept of separating style from structure by keeping separate html and css files and making code more reusable. |
|
|
7 |
1 |
Explore image editing for the web using Photoshop or an image editor of choice. |
|
|
8 |
1 |
Using and styling tables in html |
|
|
9 |
1 |
Using lists and nested lists for presenting information such as outlines in a web page. |
|
|
10 |
1 |
Introduce the use of css as a page layout method. Consider spacing and placement as design elements. |
|
|
11 |
1 |
Introduction to basic javascript. Adding interactivity to web pages. |
|
|
12 |
1 |
Introduction to javascript functions. Creating modular, reusable code and using javascript to learn fundamental programming concepts. |
|
|
13 |
2 |
This lesson introduces several web user interface elements combining javascript, html, css, and Photoshop. |
|
|
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. |
|
|
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. |
|
|
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. |
|
|
17 |
1 |
P5.js - Javascript version of Processing creative coding library. |
|
|
18 |
1 |
P5.js Coding Sandbox |
|
|
19 |
3 |
Various P5.js 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.
|