Introduction: Review Course Materials

Day 1 and 2

You absolutely need to make sure you are "up to speed" on HTML before you go any further in this class. This is a concentration-level class, so we expect you to build on your prior knowledge and to get good at this stuff.

You cannot make any sense of CSS (Cascading Style Sheets) if you do not understand HTML, so start out the Quarter right and review these materials right away please. These are selected lecture notes and study guides from the current version of one of the prerequisite classes for this class, 320 (also known as "IMM").

Look through the 320 site linked to above, and you will find materials on things like basic filesystems and permissions, the use of both command-line and GUI editors, common UNIX commands, and a wealth of other topics. We assume you already know these things because we assume that you took the prerequisite courses leading up to 409.

Information Architecture & Visual Organization

Day 1

Information Architecture
Organizing Information
Schemes and Structures
  1. Review: materials on information architecture
  2. Discuss: Grouping Things Visually
    • Contrast
    • Repetition
    • Alignment
    • Proximity
    and what's that spell?
  3. Lecture: Organizing Things
  4. Task: Form groups
    • post group webpage listing membership
    • post link to group webpage on your course webpage
  5. Task: Asset Inventory Exercise
    • create group exercise answer page for last section
    • post link on your group webpage
  6. Walk-through: Adding Style: A Step-By-Step Walk-Through and In-Class Exercise

Day 2

Background

Cascading Style Sheets (also known as CSS) allow us to separate presentation from content. This is how we can reuse the same content in different forms. CSS lets us apply different styles in different contexts, and CSS lets us change the "look and feel" of an entire website with just a few keystrokes. CSS saves a webmaster a lot of work if used properly, provides a great deal of flexibility in how all the pages of a site are displayed, and provides a great deal of flexibility in reusing content.

The "slides" I have posted online cover the core of how to make CSS code happen. We are going to "walk through" at least the first slide-set in class, so I can be available to answer the questions which inevitably arise from looking at this material. Do not let the mass of details worry you. The basics are actually not very difficult, once you get used to the notation used, and the coding practice you will go through in this class should help a lot.

Why are they called "Cascading"?

These are called "cascading" style sheets because you can apply more than one to the same document, and because each additional style sheet applied to a document can add to or over-ride the settings established in previously-applied stylesheets. For example, you can have a basic stylesheet which gets applied to all the pages at a website first to establish a site-wide "look and feel", and then an additional stylesheet for each "area" or "informational chunk" in your website.

Say you have divided the pages at your website into several "chunks": one set of pages about the various products sold at the site, and another set of pages with product support information. You could have one site-wide stykleshhet which is referenced first in all webpages, and thus is applied first to all pages requested. You could also have a second stylesheet specific to the product pages (say, setting a light yellow background for those pages) and you could apply a different second stylesheet to all the product support pages (say, setting a light orange background for those pages).

Interactive Design

Day 1

  1. Review:
  2. Discuss: links to sites about effective and usable design
  3. Supporting Materials: storyboard template
  4. Group Task: group project website lab time
Interaction Design
Navigation
Storyboards and Flowcharts
Usability

Intro to Javascript

General Programming Concepts Review

  • programs are just:
    • data structures
    • and algorithms to manipulate the data structures
  • algorithms are built up from control stuctures
  • control structures are just step-by-step instructions, telling the computer what to test for and what to do
  • there are only three basic control structures, and everything else is just a fancy variation on one of:
    1. sequence: do this, then do that, then do the other
    2. selection: if this is true, then do that, else do the other
    3. iteration:
      • leading test: while this is true, do that (it will run the test before it has entered the loop, so the condition may never become true and what is inside the loop may never happen)
      • trailing test: do this, until that is true (it will run the test after it has gone through the loop, so what is inside the loop is guaranteed to happen at least once)

Making sense? Good. That was your high-level review of general programming concepts. Now, let's briefly review a couple of high-level problem-solving ideas we have talked about.

Problem-Solving and Paradigms Review

Divide and Conquer: talk about breaking up what may seem like one large and monolithic problem into many smaller, more easily understandable and solvable problems.

Remind them about separation of concerns, relate to D-and-C, and relate to MVC paradigm and the HTML-CSS-Javascript trio.

Refer to Wikipedia article.

  • whitespace
  • variables
  • arithmetic
  • objects
  • data structures
  • control structures (if/else, do/while, for/in)
  • functions and functions as objects
  • error handling

Refer to Javascript tutorials

Day 2

  1. Discuss: expectations for Group Midterm Project (min/max length, depth in various parts, etc)
  2. Review: Introductory materials on Javascript
  3. Demo: converting Characters to Character Entities
  4. Demo: iFrames
  5. Demo: ECMAScript email anchor replacement
  6. Class Exercises:
    1. class website tutorials:
      • Questions: how do we make Javascript tutorials materials blend in with the rest of the site better? can we describe a look and feel for tutorials here, in general? (hint: compare the iFrames and the ECMAScript email pages)
      • Class Activity: begin to build a mockup in class together, using HTML and CSS and Javascript
    2. group cookbook project:
      • Questions: what sort of informational chunks best fit our data to the cognitive map(s) a modern audience has of cookbooks?
      • Class Activity: separate two or three recipies from the whole and try out various markup schemes to add structural information.
      • Groups Activity: examine your work so far in determining your audience and your goals and objectives for your Group Design Project. begin to decide on a standard markup scheme to add the structure your group needs to the data. talk to the instructor about your initial ideas for a data organization scheme, and post about that to your group website.
  7. Code Review: Two approaches to getting all elements of a given class, and understanding the difference between nodes and their text contents.

Page Design

Day 1

Presentation Design
Web Gestalt
Browser considerations
JavaScript

Day 2

Group Presentations
Lab Time

A Bit of This and a Bit of That: CSS, PHP, & JavaScript

Day 1

Cascading Style Sheets
Selectors and Rules
Formatting & Positioning
Frames
iFrames

Day 2

Asynchronous loading
PHP and XBitHack for Modularization

Deeper Into Scripting

Day 1

Client-side Scripting: Javascript
MVC: The Document Object Model
Javascript: Review the Basics
JavaScript: Enhancing Interactivity

Day 2

JavaScript Libraries and AJAX
  • Doing more with less

    Software frameworks are very helpful. We have looked at the high level at some things you might want to do with JavaScript. We have looked at the low level at how to build things in JavaScript. Now we will look at how to save ourselves work using JavaScript.

    If you program enough in a particular language in a particular context, the same problems keep showing up. As a result you build the same code solutions over and over again. Code libraries help you avoid re-inventing the wheel over and over again.

  • Blocking/Synchronous vs Non-Blocking/Asynchronous Loading

    What is AJAX, anyway? Why should you care about Asynchronous JavaScript And XML?

  • Updating the Display on the World Wide Wait

    Make them talk about refreshing small parts of a Web page vs reloading the whole thing. What does that way of thinking make possible? What is an RIA?

  • APIs

    Take a quick look at some of these APIs made freely available which use AJAX to provide services to Web page displays:

Dynamic HTML and the Document Object Model

Day 1

Dynamic Pages
  • Dynamic Pages
  • Advanced Techniques
  • Cross Browser Compatability
  • Development Case Study: A sliding menu system
Dynamics in the Browser

Day 2

The Document Object Model
"Liquid Layout" Walkthrough

Servers & Forms

Day 1

Origins of Server-Side Scripting
PHP Hypertext Processor
Uses of Server-Side Scripting
  • Forms
  • Basic Forms and Vlidation
  • Forms and PHP
  • Forms Processing with CGI
  • The re-emergence of CGI & server-side code
Group Final Project design document presentation (group 1-3)

Day 2

Group Final Project design document presentation (group 4-6)
Lab Time

Servers

Day 1

  • PERL & CGI
  • Outputting HTML
  • Regular Expressions
  • Apache configuration
  • Server Side Includes & .htaccess
Group Final Project site mock-up presentation

Day 2

Practice Practical Exam
Why a Practical in this Class? So I can honestly say to the Professors teaching the downstream classes that you can:
  • work to a reasonably-detailed spec
  • build valid and well-formed HTML/XHTML
  • build valid CSS for styling and positioning
  • build basic JavaScript/ECMAScript functionality
You should be able to easily accomplish these tasks in almost two hours.

Accessability & Demos Begin

Day 1

Practical Exam

Day 2

Group Final Project functional demos