Web Brush Up course

Web Standards

Doctype Activity

Open Dreamweaver: Create 2 New Files; Select Trasitional for one and Strict for the other; Identify 2 ways to valide

What is the doctype for HTML?

Web Standards Rules

Web Standards Rules (.pdf)

Layout Translation Strategies

Design to Web Translations (.pdf)

Translation Activity

Translate a magazine article to a web layout.: Break into Pairs; Take an inventory of the mark up in this magazine article

Example of completed markup Here's my thought process.

Web Standards Mantra - Give it Meaning!

Semantic Markup (.pdf)

Practicing Web Standards

Download this Example of a wireframe: Create the Markup and CSS for this layout; Use proper folder structures; Code must validate; Follow Web Standards

Style Sheets

Style Sheets (.pdf)

Practicing CSS

Create a layout of your choice: Create the Markup and CSS for the layout; Experiment with lead ins, drop caps, text-indents, and line-height; Use proper folder structures; Code must validate; Follow Web Standards

Great Tools for Web Design

Community: Refresh Pittsburgh; Pittsburgh Flash Users Group
Blogs: Jeffery Zeldman; Samantha Warren; Jason Santa Maria; Smashing Magazine
Odd and Ends: Wireframing and Moodboards. A Practial approach; InDesign... That's right I sadi it.; SEO Guide form google; Google Grades their SEO

JavaScript

Source Code (.zip)

JavaScript Introduction

JavaScript Introduction (.pdf)

Activity 2.1 - JavaScript Worksheet

Answer the following questions. Email the answers to your instructor

Name 3 Server Languages.
Name 3 Client Side Languages.
What is the code to use an external javascript file?
What is an IDE? Name 3 IDE’s.
Where does javascript typically go?

Variables

JavaScript Syntax Slides (.pdf) Variables Slides (.pdf)

Activity 2.2 - Hello World

Create 5 variables and output them to the screen. Use innerHTML and target a div container.

Basic Interation

Language Basics Source Files (.zip) Language Basics (.pdf)

Activity 2.3 - Basic Interaction

Create a Multiple choice question with 4 possible answers. You can choose to use the provided graphics .zip or to create your own. Use the onClick event to call custom methods that alter the div id styles. View the example movie (.mov) for guidance on functionality and interaction.

correct: change the id to replace the image with a correct symbol
incorrect: change the id to replace the image with an incorrect symbol

InnerHTML

InerHTML is a property contaning all things in that targeted element

document.getElementById('divName').innerHTML

Shorthand Concatenation Operator (+=) - This is used to append

Example 1:

 var name = "josh"; name+"sager"; alert(name);   //name is still josh

Example 2:

 var name = "josh"; name+="sager"; alert(name);   //name is now joshsager

+= concatenates and stores where + just concatenates

Events (.pdf)

Activity 2.4a - Disjointed Interaction

Build an interface that adds data to a general comments box.

Activity 2.4b - Div Visibility

Build an interface that adds turns div's on and off

Functions and Arguments

Functions and Arguments (.pdf)

Activity 2.5 - Passing Arguments

Make a Mad libs.: Style the buttons; Style the H1
The alert output should contain the following:: My name is _____________, I am from ____________. My favorite color is _____________. Someday I hope to travel to _____________.

Forms

Basic Forms (.pdf)

Conditionals

Conditionals (.pdf)

Conditionals are also used for cross compatibility
Check for features Not for browser

Validation

Validation (.pdf)

Data Selection

Data Selection Slides(.pdf) - download slides

Objects

What is an object?
Storing values
retrieving values

Switch Statements

Multiple Choice Conditional
Writing a switch statement
- Setting up the cases
- break
- default case

Array Creation

Array Creation (.pdf)

Array Functions

Array Functions (.pdf)

Loops

Loops (.pdf) Loops - Demo Files (.zip)

ActionScript

Source Code

The Role of the Developer

The Role of the Developer (.pdf)

1.2 - The Role of the Developer

Answer the following questions.

What does MVC stand for?
List 5 basic programming concepts
What is the difference between a jr developer and a sr developer?
What does it mean to abstract functionality?
What are classes?

Development Tools

Development Tools (.pdf)

ActionScript Development

ActionScript Development (.pdf)

2.1 - ActionScript Development

Answer the following questions.

What is Runtime?
Name 2 of the 3 Client Runtimes.
What is compiling?
What does IDE stand for?
Name at least 2 ways to compile a swf?

ActionScript Basics

ActionScript Basics (.pdf)

2.2a ActionScript Basics

Download the ActionScript Basics (.zip): Open the file and follow the directions.; Each section will require you to write code.

Display List

Display List (.pdf)

2.4 Display List

Create 5 overlapping and offsetting Red Sprite Circles.: Make each circle click-able; Set button mode to true; The clicked circle should move to the top of the stack

Email the .fla to your instructor. This activity is worth 5 points.

Create 5 overlapping and offsetting Blue Sprite Squares: Make each square click-able; Set button mode to true; The clicked square should be removed from the display list

Email the .fla to your instructor. This activity is worth 5 points.

Library Instances

Library Instances (.pdf)

2.5 Library Instances

Download Library Instances starting file
Dynamically pull all shapes from the library: Place each shape in correct spot using x and y properties; Set correct alpha properties for bottom shapes; Correctly set up linkage properties

Events and Listeners

Events and Listeners (.pdf)

Activity 4.1 - Events

Download starting file and follow the directions

Interaction

Interaction Slides (.pdf) Interaction Demo (.fla)

Activity 4.2 - Interaction

Download starting file and follow the directions

Programmatic Animation

Programmatic Animation (.pdf)

Activity 4.3 - Programmatic Animation

Download starting file and follow the directions
PDF of Direction for the programatic animation activity.

External Content

Images
XML
PHP + MySQL
Sandbox

Classes

Classes (.pdf)

3.1 Classes Worksheet

List the 4 access modifiers and what they do
What is an object?
What is a method?
What is a property?
What is an instance?

Email the answers to your instructor. This activity is worth 5 points.

Writing Classes

Writing a Class (.pdf)

3.2 Basic Class Creation

This is an in class assignment.

Develop 3 classes that trace out a message.: Instantiate a class through the runtime.; Instantiate a class using the Doc Class.; Instantiate a class using Flex Builder.

Show your instructor when this has been completed. This activity is worth 5 points.

Classes in Practice

Classes in Practice (.pdf)

Flex Builder and Flash Workflow

Activity 3.3 - Class Communication

Download the Development Specs (.pdf): Create a class file; Create a .fla; Compile the .fla though the Flash IDE
Downlod project folder structure diagram

Zip up all working Files. Email the .zip file to your instructor.

This activity is worth 10 points. Extra Credit for a triangle creation.

3.3b Preloader Class

Create a Preloader Class: Download the Preloader Class Starting file; Create a Preloader Class in a separate .as file.; Use Flex Builder to write the preloader class.; Instantiate the Preloader Class at runtime.; All additional graphics must be displayed dynamically from the library or drawn with code.; Remember design matters.
Preloader Features: It must display the percent loaded.; It must have a designed progress bar.

Zip up all working Files. Email the .zip to your instructor with a link to the project online. Don't forget to upload it to your web space.

CHALLENGE! Center class

Can you write a class that allows you to center any object passed as an argument?

Extra Credit will be awarded for zipped up proof of concepts emailed to your instructor.

Static Methods

Static Methods (.pdf)

3.4 Static Methods

Create a custom DateDisplay class using Flex Builder.: Create a static method for returning the date.
Flash Document: Call the static method in the .fla and output the response to a text box.
Design an interface to read out date information such as time, date, and month.: Presentation Matters

Zip up all working Files. Email the .zip to your instructor.

This activity is worth 10 points.

Flex

Introduction to Flex

Intro to Flex (.pdf)

Flex Builder

Flex Builder (.pdf)

Flex Basics

Flex Basics (.pdf)

Flex Basics Activity

Build a basic Flex App: Create a Slider to manipulate the alpha of an image; Create a Slider to manipulate the rotation of an image; Create an image; Place all items in a panel; Make the panel drag

How Does Flex Fit with ActionScript?

Flex + ActionScript Communication
mx:Script
inline
external
Writing functions

AS + Flex Communication

Write a function that communicates with flex components
Experiment with different events

Flickr Application

Build a Flickr Application in in Flex

Scale 9

Flex Themes
Scale 9 website
CSS

Flex and XML

Basic Rules of XML
Pointing Flex components to xml data

Tying Flex to XML Activity

Create a project that:: Loads in xml; Displays the content in a data grid

Data Grid + XML + Search

Create a project that:: Loads in xml; Displays the content in a data grid; Create inputs allow the user to search through the content; Display the search results

Custom Components and Class Files

Class Files
Writing Flex Class files
SWC files

Web Brush Up course - Beta