course agenda

Course Outline

WNM 608: MS: Web Technology 1

Module 1 - Welcome to the Web

Notes

About this course and GRADING: Demo files & Projects explained

Lecture/Demo:

Demos: First template page | Mini site: two pages | Concepts: Doctype, Tags, Validation

Activity:

Review Domaine name, ISP and FTP, Tag based languages, Code styles, Tool set up

Assignment

1.Template Page & 2page Site 2.Upload to Server 3. Screenshots of Fire FTP, Firebug, Text Editor, Validation Badge

Module 2 - Structure & Directories

Lecture/Demo:

Color Site; Traversing Directories, Relative URLs vs Absolute URLs, Basic HTML tags

Activity:

Project 1: Recipes from My Friends sit; Project 2: Library, four page site with images and nested directories

Assignment

Mini site: Resources page, images & color

Module 3 - The Cascade & Web Typography

Lecture/Demo:

HTML 5: The Outline Algorithm, Structure and structural tags, Browsers, Intro to Web Standards

Activity:

Recipe Site outline, Outline of high level navigation page vs outline simple content page (recipe)

Assignment

Project 1: Gather Recipes for Recipes from My Friends site

Module 4 - CSS: Cascading Style Sheets

Progress Grading

Notes

Covers mechanics of CSS, selectors, classes, IDs, Styling Tags, psuedo selectors, font control

Lecture/Demo:

CSS Introduction

Activity:

Treatment of recipe with CSS

Assignment

Project 1: Recipes from My Friends, Design site

Module 5 - Page Layout and Float Theory

Course Evaluations for Week 5 (Fall/Spring Only)

Lecture/Demo:

Two Column Layouts, overflow, Size of Page, Resolution

Activity:

Recipe in a 2 column layout

Assignment

Project 1: Recipes from My Friends, redesign and begin production; Project 2: Demonstration Library

Module 6 - Data Tables

Lecture/Demo:

Tables, CSS & Tables (Border Collapse, Zebra Striping with CSS)

Activity:

Table of Measurements or Herbs

Assignment

Project 1: Recipes from my Friends, add Table of Measurements; Project 2: Demonstration Library

Module 7 - Site Structure, Page Types & Navigation

Midterm Grading

Lecture/Demo:

Site Structure, Page Types & Navigation

Assignment

Recipe Site DUE, Library DUE

Module 8 - Advanced Topics in CSS

Notes

Positioning, Multiple Background Images, CSS3 Effects, Liquid Layouts

Lecture/Demo:

Absolute positioning vs relative, Gradients, Parallax Backgrounds, CSS Transitions

Activity:

3 Col Layout with Animated Pill Buttons

Assignment

Personal Portfolio

Module 9 - Forms

Notes

Design Considerations, Differences between Forms for desktop and mobile, scripts, Get/Post, Adv. CSS, touch

Lecture/Demo:

Form, Action, Input, Password, Text Area, Check Boxes, Radio, Submit, Options List

Activity:

Fancy form page with lots of style!

Assignment

Portfolio: Gather Portfolio Pieces and Wire frame Site

Module 10 - JS: Review Basics

Notes

DOM, Variables, Function, Conditionals, Events, Event Handlers, Javascript Objects, get Element Byld(),set interval

Lecture/Demo:

Javascript

Activity:

Resize, Exquisite Corps, Timer, Toggle Buttons

Assignment

Portfolio: re-wireframe, begin design

Module 11 - Walking the DOM

Progress Grading (Spring/Fall Only)

Notes

Going Deeper into JS

Lecture/Demo:

DOM

Activity:

Style Changer, Text Scroller, Pop over mini modal

Assignment

Portfolio: Refine Design

Module 12 - Introduction to jQuery

Notes

Selectors & Wrappers, Toggling, Show/Hide transitions, Working with CSS, Adding and Subtracting Classes

Lecture/Demo:

jQuery

Activity:

Image Sorter, Content Expanders

Assignment

Portfolio: Code & Production

Module 13 - jQuery Unleashed

Notes

DOM Manipulation, att(), fadeInFadeOut, StringParsing,Trace Statements, AppendTo(), adding nodes, wildcard selectors, wrapped sets as arrays: Length

Lecture/Demo:

jQuery

Activity:

Image Gallery

Assignment

Portfolio: Code and Production, Update Library

Module 14 - jQuery UI

End of Semester Course Evaluations

Notes

The Library

Lecture/Demo:

Scrollers & Carousels, Accordians, Slider

Activity:

True Color Mixer Scrolling Page

Assignment

Portfolio: Code and Production, Update Library

Module 15 - Next Steps: Future Proof!

Final Grading

Lecture/Demo:

Learn to Learn Self Assessment of Mastery

Activity:

Presentations of Final Class Assignments