Interactive Design

Syllabus

Assignments:

Wordpress Collection Form
Web Space Purchasing Instructions
Assignment 1 - Image Gallery
Assignment 2 - Artist Website
      Lorem Ipsum Generator
Assignment 3 - Business Website
Assignment 4 - Personality Test
Assignment 5 - Data Visualization
      Sample Records - option & click to download
     Exercise Records - option & click to download
      Final Records - option & click to download
Assignment 6

Readings/Exercises

Week 1 - HTML Basics
- HTML Elements
- HTML Attributes
- Images

Week 2 - HTML Links
- HTML Tables
- HTML Formatting
- HTML Styling
- CSS
- Binary, Octal & Hexadecimal
- What the Hex? game - Play This!

Week 3 - CSS Tutorial
- Div
- Span
- Selectors- Class and ID
- CSS Backgrounds - CSS Fonts
- The Box Model
- Should you break the "Three-Click" Rule?

Week 4 - Web Style Guide Chapter 4 Interface Design(5 pages)
- Web Style Guide Chapter 7 Page Design(7 pages)
- Display
- Positioning
- Float Positioning
- Alignment
- CSS Quiz
- Web-safe Fonts

Week 5 - Tips for designing logos that don't suck
- Flowchart Basics
- LightBot - Beat this game.
- Javascript Introduction
- Javascript Where-to
- Javascript Syntax

Week 6 - Javascript Statements
- Javascript Variables
- Comments
- Operators
- Datatypes
- Functions
- Variables in Programming

Week 7 - HTML forms - radio buttons
- HTML select object - for dropdown lists
- Javascript Conditions
- Comparisons
- Javascript Scope
- Operators - review the increment operators
- All About Strings
- Conditional Exercises - do exercises 1-4
- Light-bot 2.0 - do the section on Conditionals

Week 8 - Arrays
- Array Tutorials
- For Loops
- While Loops
- Loops Tutorial
- the Math object
- The Canvas

Week 9 - HTML5 Canvas Tutorials
- Canvas Drawing Techniques
- DOM - The Document Object Model
- The DOM Node Tree
- The DOM parser - take special note of the section on 'Access Across Domains'
- Loading XML- This is a little dense, but the examples are good
Reminder: make sure you have your A Small Orange Webspace

Examples -Class 1 XML loader
-Class 2 XML loader
-Randomized boxes
-Gathering User Data
-Finding Mouse Position
-Finding Mouse Position part 2
-Screen Size
To see the code, right-click and 'view source'

Responsive Design -Intro to media queries
-CSS Media Queries
-Media queries for standard devices
Database Access (PHP)
-MySQL basics
-PHP basics
-Selecting Database Records in PHP