Students apply user-centered design principals, database structures and server side scripting to design and develop content for server-based dynamic delivery. Attention will be paid to design issues relating to the display of dynamic content on the screen and how that dynamic content will be delivered.

Instructor: John Keston
Meeting Times and Location:
Monday / Wednesday
Room P108, Pence Building, 2:00pm – 5:00pm

Syllabus:
IM4420 Dynamic Web Apps Spring 2010

Week 1 | Week 2 | Week 3 | Week 4 | Week 5 | Week 6
Week 7 | Week 8 | Week 9 | Week 10 | Week 11

http://en.wikipedia.org/wiki/Open_source
An article about the Free Software Foundation by John Keston

Download: PHP Problem Set 1
1. All PHP problems within a “set” are due by the beginning of class on the next day that the class meets.
2. Each solution must be available via links on the OLS or comparable hosting and copied to the drop off drive.
3. Solutions to each problem set will be given during demonstrations on the day that they are due.
4. Grades will be collected during the solution demonstrations by an assigned classmate.

Session 2: Today we’ll be watching Revolution OS. “Revolution OS is a 2001 documentary which traces the history of GNU, Linux, Free Software and the Open Source movement. It features several interviews with prominent people, including Richard Stallman, Michael Tiemann, Linus Torvalds, Larry Augustin, Eric S. Raymond, Bruce Perens, Frank Hecker and Brian Behlendorf. It was directed by J.T.S. Moore.” – Wikipedia

After watching the film we will have a brief discussion about it and then begin going over the requirements for our first assignment. Our first assignment involves researching Open Source applications that use PHP and MySQL. We will compare and contrast a minimum of two OS projects keeping in mind that we will be implementing one of the examples.

Dynamic Web Applications – Research Project
Due: Session 1, Week 3

Write a six page double spaced research paper comparing and contrasting two Open Source web application projects. Use the resources listed to browse existing projects. Make sure that at least one of the projects you select uses PHP and MySQL. A prominent example for us is aim.aiiresources.com, which uses the popular content management system (CMS) – Joomla. Take your time and browse many examples until you find two that capture your interests. Make sure that you answer each of the following questions in your research. We will discuss your papers in class on Session 1, week 3. Note: please do not include WordPress as one of your examples because we are using it for the first project.

1. Why did you select each of your projects? What was it that attracted you to each example?

2. What sort of features are available in each project and how can they be applied as solutions for typical web based needs?

3. What are the requirements for implementing each example? What technologies are involved? Is a database required, etc.?

4 . Address the history of each project. What are the current versions? How long have the projects been active and who makes up the community surrounding them?

5. How would you use these projects? What kind of businesses or organizations could make use of these projects and how?

Delivery: Post your research paper to the Dynamic Web Applications forum on aim.aiiresources.com, and turn in a stapled paper copy to me for grading.

Resources:
www.freshmeat.net – The webs largest index of mostly unix and cross-platform software
www.sourceforge.net - A complete database of Open Source projects.
www.opensourcecms.com – Try before you bu… install.
CMS Matrix

aim.aiiresources.com
www.audiocookbook.org
www.opensourcecms.com
www.cmsmatrix.org
www.thegoldenmean.com
bmwmcq.org.au
www.jazzclube.com

Session 2: Today I’ll be demonstrating the installation process of WordPress. Some of the tools we will look at for this process are SSH (Secure Shell), FTP, Dreamweaver, and phpMyAdmin (Web based MySQL database manager). I will demonstrate how to set the permissions and troubleshoot error messages that arise during the installation process. Be prepared by downloading the latest version of WordPress, and make sure that your hosting environment supports the minimum requirements (the OLS will work).

Dynamic Web Applications – Open Source Implementation Project
Due: Session 2, Week 5

The purpose of this project is to learn the ins and outs of the installation, implementation and customization of dynamic, web-based, Open Source applications. We will be implementing WordPress, which uses the LAMP (Linux, Apache, MySQL, PHP) architecture, on your own hosting environment or the OLS. After successfully implementing the software fully test the software and then customize it by changing the look and adding and removing features or functionality. Follow the outline below as a guideline for your procedure.

1. Evaluate The OS Project Requirements
   • Check and compare the version of the server software required (PHP, MySQL, etc.)
   • Make sure your hosting platform is compatible (XP vs Linux / Apache vs IIS, etc.)
2. Review the Installation Documentation (readme files, etc.)
3. Download and Decompress the Software
4. Upload the Software to the Server
5. Setup the Database if Required
6. Follow Installation Procedures
7. Test the Installation
   • User Areas
   • View Content
   • Check Functionality
   • Administrative Areas
   • Add Content
   • Edit Content
   • Delete Content
8. Add Live Content *
9. Change the Look/Feel (re-skin/theme)
10. Customize
• Add Features
• Change Features
• Remove Features

WordPress Specific Requirements:
1. Extend your implementation by installing 3-5 WordPress plugins that fit the topic of your project.
2. Create a custom theme (you may start by modifying an existing WordPress theme).
3. Use “Template Tags” to extend your theme.

* Decide on a topic for your content. You might invite others to contribute content, or write abstracts of relevant articles.

Download: PHP Problem Set 2
1. All PHP problems within a “set” are due by the beginning of class on the next day that the class meets.
2. Answers must be available via links on the OLS or comparable hosting and copied to the drop off drive.
3. Solutions to each problem set will be given during demonstrations on the day that they are due.
4. Grades will be collected during the solution demonstrations by an assigned classmate.

Ultimate Linux Reference Guide for Newbies

Session 2: Now that we all have a good start on the Open Source Implementation project it is time to start discussing our next and final project which involves either extending an application like WordPress by writing plugins or hacking the framework, or developing a dynamic web application of your own. There are many types of applications that are acceptable for this project. Here’s a list of a few examples to get you started.

1. E-Commerce – Developing a custom e-commerce system is an excellent asset for clients and employers.
2. Dynamic Content Management – The point is to allow the customer to edit their content without help from a developer.
3. Forums / Message Boards – These tools are important to community sites and organizations.
4. News / Blogging – News sites and blogs are a large part of the content on the internet and can be quite useful tools.
5. Calendar / Event Manager – Another example of useful tools for community sites, and others.

Other examples may also be acceptable. Consult with me about your ideas regularly. Once you have decided what sort of application you’ll be developing you need to start the planning stage. Start by writing a summary of what the application will do followed by a list of features. Try to think of all the details and requirements for each of the features. Make notes of web sites that have similar tools and resources that apply to what you are building. Later we will discuss the formal requirements for the planning stage, but I want you to start thinking about your projects right away.

Download: PHP Problem Set 3
1. All PHP problems within a “set” are due by the beginning of class on the next day that the class meets.
2. Answers must be available via links on the OLS or comparable hosting and copied to the drop off drive.
3. Solutions to each problem set will be given during demonstrations on the day that they are due.
4. Grades will be collected during the solution demonstrations by an assigned classmate.

This course is a conceptual introduction to audio production techniques. Students will understand to digitize sound and apply it to their work. Students will also learn how to produce appropriate audio effects and transitions.

Instructor: John Keston

Meeting Times and Location Section M2 (M/W):
Session 1 / Session 2
Room 009 5:00pm – 6:00pm
Room 010 6:00pm – 8:00pm

Meeting Times and Location Section M1 (T/R):
Room 009 8:00am – 9:00am
Room 229 9:00am – 11:00am

Syllabus:
CA2431 Audio Production M2 Summer 2010
CA2431 Audio Production M1 Summer 2010

Glossary of Terms: ca2431glossary.doc

Week 1 | Week 2 | Week 3 | Week 4 | Week 5 | Week 6
Week 7 | Week 8 | Week 9 | Week 10 | Week 11

1. Do you write from the ground up or use a framework?
1. If a framework, which one?
2. If not, plan ahead for an extended timeline
3. Consider security issues and cost of development cycle
2. What features will be required? Details regarding each feature are very important in the planning stage.
3. Is a database needed? Most often it will be needed, but in some cases it’s not necessary.
4. Illustrate the forms and other web pages in the application. This will help you discover features and structure.
5. Define the database schema. Think about how many tables will be needed and how the tables are joined.

Session 2: In class today we will be reviewing some SQL syntax, focusing on the DDL. I’ll be going over a few examples of CREATE TABLE statements and discussing the datatypes involved. In lab I’ll be looking at everyone’s progress so far. The Implementation Projects are due a week from today. At this stage you should be finished with steps 1 through 8 and working on steps 9 and 10. Manipulating the look/feel/design and adding/customizing features is the most time consuming aspect of this kind of development so make sure that you’re spending most of your time on these steps.

CREATE TABLE statement examples

Reading Assignments:
Explanation of Database Indexes
MySQL Documentation for the ENUM datatype
MySQL Documentation for Foreign Key Constraints

Template Tag Explanation Assignment:
In class on session 1 of week 5 please be prepared to describe the details about one of the template tags that you are using in your implementation project. Do research so that you can tell us what features the template tag has and what arguments are necessary to produce those behaviors.

Web Applications Final Project Plan Requirements
(In progress)

1. Title Page (include TOC, etc.)
2. Project Overview
3. Feature List (w/Brief Descriptions for each Feature)
4. Database Flowchart / Schema
5. Wireframes (make sure forms are included)

Also: Template Tag Explanation Assignment Due Today

Session 2: Today we will be presenting our Open Source Implementation Projects. Presenting your project is required and worth a minimum of one half of one grade point. As you present, discuss why you selected the software you used, how you customized the features and what you did to change the visual nature of the front end.

The following code example displays a tag cloud in your sidebar and then prevents tag with only one topic from being show in the cloud.

<?php
    $defaults = array('smallest' => 11, 'largest' => 27, 'unit' => 'px', 'number' => 100,
                      'format' => 'array', 'orderby' => 'name', 'order' => 'ASC');
    $tags_array = wp_tag_cloud($defaults);
    //print_r($tags_array);
    $needle = ' topics';
    foreach( $tags_array as $tag ) {
        if ( stristr($tag,$needle) ) {
            echo( $tag." " );
        }
    }
?>

WordPress Plugin Developer Resources:
Writing a WordPress Plugin
Your First WordPress Plugin (Video)

Session 2: Today we will analyze some examples that are further developed. We will look at a working version of these examples and then take a quick look at some of the source code, paying particular attention to new functions and techniques.

WordPress Plugin Exercise:
1. Write a WordPress plugin to display the “age” of a post
2. Display the days, hours, and minutes in a human readable form
3. Try using the template tag the_time()
4. Try also using the WordPress function human_time_diff()

Final Project Schedule:
Session 2, Week 7 – Final project concept presentations (explain to class your concept)
Session 1, Week 8 – Final project development plans due (paper copies of finished devplans)
Session 2, Week 8 – First of three progress reports (show code, get feedback, etc.)
Session 1, Week 9 – Second progress report
Session 1, Week 10 – Discuss take home final essay questions
Session 1, Week 10 – Third progress report
Week 11 – Final presentations

Session 2: Template engines are another tool to help build complex web based applications. Usually the purpose of a template engine is to help separate the presentation layer from the logic, or back-end. One example of an Open Source templates engine project is Smarty. Here’s a brief description from their website:

Although Smarty is known as a “Template Engine”, it would be more accurately described as a “Template/Presentation Framework.” That is, it provides the programmer and template designer with a wealth of tools to automate tasks commonly dealt with at the presentation layer of an application. I stress the word Framework because Smarty is not a simple tag-replacing template engine. Although it can be used for such a simple purpose, its focus is on quick and painless development and deployment of your application, while maintaining high-performance, scalability, security and future growth.

There are hundreds of AJAX resources and tutorials available online as well as books. Here’s a list of some of the more popular online resources available:
JQuery
MooTools
ajaxwith.com
The AJAX Revolution
Round-up of 30 AJAX Tutorials
AJAX, Get Started, Resources & Tutorials

Session 2: Steal This Film is a documentation of events during the Spring of 2006 regarding actions taken by the MPAA against the Swedish Bittorrent tracker site The Pirate Bay. The film highlights the futility of action by the MPAA and RIAA against file sharing, and also provides an insight into how the application Bittorrent works as well as torrent tracking database and search site tools. The film can be downloaded (without violation of any copyright laws) from stealthisfilm.com.

Creative Commons – This portal to free media provides a license to protect free content from being commercialized.
The Freesound Project – This excellent library offers over 1 terabyte of sounds (not songs) licensed under Creative Commons.
ccMixter – A community music site featuring remixes also licensed under Creative Commons.
archive.org – Internet digital library formed in 1996. Content includes film, music, images and more.
The Prelinger Archives – Over 1,000 public domain films from the worlds of government and advertising.

Session 2: Fine tuning the source code in your applications typically happens in the development stage, however sometimes (either due to a lack of planning, or unrealistic deadlines) the priority is to make it work and fix it later if there’s time and a budget. Today I’ll show you a couple examples of how I have fine tuned my project. Most of these examples do not change the functionality, but shorten the code or make it more efficient.

1. Web applications have a significant impact on the way we lead our lives today. Social networks like Twitter, Facebook, and Myspace along with e-commerce sites like eBay, Amazon and iTunes have changed the way our society operates. Beyond email and instant messaging, how have web applications effected your day to day activities? Are these effects on our lives positive or negative and in what way?

2. If you had the means to create any kind of web enabled, interactive application that doesn’t currently exist what would it do? How would it improve your personal life, workflow, art, or community?

3. Out of all the web applications we have looked at in this class, what do you find the most functional and well developed? What makes this application stand out? What purpose does it serve and how do organizations and individuals use this software?

4. What role do you think Open Source software and Open Content will play in the future? Will sites like Wikipedia play a role or are they too unreliable to be taken seriously? Will Open Source software be viable or are we better off using propriety software?

Session 2: Final project progress reports are scheduled for today.

Session 2: Final presentations. Take home final essay questions due.

What’s the difference between analog and digital recording? Analog recording translates the sound waves into an analog electronic signal which is then stored on magnetically sensitive tape. Digital recording samples the sound at intervals in time. The rate of these intervals is called the sampling rate and is indicated in Hertz or KiloHertz. The faster the rate, the higher the recording quality. The sampling bit depth indicates the resolution of the sample, or how the amplitude of the sampled sound wave is divided. CDs use 16 bit resolution and a sampling rate of 44.1Khz (KiloHertz). The information is then stored on some type of digital media such as a hard drive in a computer, a CD, or a DAT (Digital Audio Tape) cassette.

DSP or Digital Signal Processing is the manipulation digital audio without converting it to analog. There are many different types of DSP. Each type is essentially a different algorithm with a set of user adjustable parameters used to manipulate digital audio. Some examples of DSP include level or volume adjustments, equalization or filtering, panning, looping, delay or echo, reverberation, time compression or expansion, and pitch shifting.

Please bring a set of closed ear headphones and a CD which contains some audio to sample from for our in class exercise week 1, session 2. The assignment will involve basic Pro Tools techniques including sampling and signal processing.

Required Reading:
Recording Technology History
Digital Audio Basics
Reading:
Real World Digital Audio, Chapter 1 – Understanding Digital Sound

Files:
Sine wave files

Session 2: Today we will be sampling from a cd of your choice and then using DSP to loop and manipulate a small segment of a piece of digital audio from your CD. Use iTunes convert a track from your CD into a .wav file, then import the audio into Pro Tools. I will be demonstrating this process in the lab.

Once you’ve converted your track, use Pro Tools to select a reagion or loop of audio that you want to work with. Apply pitch shifting and at least two more kinds of processing in order to come up with a new and completely different sounding loop. When you’re happy with the results bounce the audio to a new file and copy the loop to the drop off drive in the “John Keston” folder under “ca2431″ in a directory named . We will listen to the loops in class on so make sure you have finished before Session 1, Week 2.

Pro Tools 7 Quick Keys for Macintosh

A note about Pro Tools Documents: Pro Tools documents are called sessions. Each session is a folder that contains the Pro Tools file with a .PTF extension, and various other files and folders necessary to open the session. These include the “Audio Files” folder that contains all of the imported and recorded sounds in your project. It is critical that you backup the entire Pro Tools session folder on an external volume to preserve your project for editing or re-rendering (bouncing).

If you do not have access to an external volume you can backup your project on a network drive, however, this will probably fail due to long file names in your “Audio Files” folder. DO NOT rename these files! To work around this problem, first create an archive (.zip) of your session folder and then copy it to the network drive location. An easy way to create the .zip file on the Mac is to right+click the folder and choose “Compress my_session”. Remember that all students have access to the network drive, so only use this method if you have no alternative.

Our next assignment is to create sound effects. Stock sound effects are available in the LRC, but even with a vast library of recordings available, often recording your own sounds gives your productions more character. This assignment will have two parts. The first part is to create five sound effects by manipulating audio that you have available to you. Use DSP to modify the sounds so that they become something of your own. Keep the original sounds so that you can demonstrate how you changed what you started with.

Assignment 1: SFX Project Requirements

Search the sound effects available in the LRC.

Generally online resources are not acceptable for this project, but a new online resource called Freesound offers high quality sound effects uploaded by registered users. This online community licenses the content under Creative Commons, making the sounds legally available for most uses.

Reading:
Real World Digital Audio, Chapter 7 – Processing and Effects

Session 2: What are dynamic microphones and how do they differ from condenser mics? How do you choose the right mic for the right situation? How do microphone polar patterns effect he response of the mic? These are some of the questions we’ll be answering during lecture. After lecture we will be demonstrating the audio qualities of some of the different microphones that are available in the Cage by making some test recordings using the Pro Tools system. For your own purposes the DAT field recorder is available to check out from the Cage.

Knowing about the different types of microphones and how to use them is crucial to engineering high quality audio recordings. Dynamic microphones such as the Shure SM57 are very durable and excellent for recording loud signals such as close miked drums, guitar amps and so on. More sensitive condenser mics such as the Shure KSM32 or AKG c4000b are excellent for capturing the nuances in voices and quieter acoustic sounds.

Now that you have a basic understanding of microphones it’s time to start experimenting with them. This brings us to part two of our sound effects assignment. Record at least five unique sound effects using at least two different microphones. Be creative. You can use your own voice to create effects. Shutting doors, stomping on floors, breaking glass or hammering on pots and pans are a few examples of creating sound effects. Please have both parts of the assignment finished by the beginning of class on Session 1, Week 4 and we’ll listen to what you’ve created.

Reading:
Real World Digital Audio, Chapter 6 – Recording Instruments and Sound
Microphone Reading Assignment

For the DAT recorder buy a DAT tape and checkout the DAT field recorder with microphone(s). DAT tapes can be purchased at Guitar Center or the Supply Store.

Recording with the TASCAM DA-P1 DAT recorders (decks):
1. Insert DAT tape into the recorder and make sure the write protect tab is enabled (closed position)
2. Connect your microphone(s) to the XLR inputs in the DAT recorder
a. Use the left channel for mono recording
b. Use both channels for stereo recordings
3. Set the ANALOG INPUT switch to the MIC position
4. Set the INPUT switch to ANALOG
5. Enable the PHANTOM power when using condersor microphones
6. Press the RECORD button to arm the DAT deck for recording
7. Adjust the input levels until you have a strong signal without clipping
8. Press and HOLD the RECORD button and PLAY to start recording

Transfering your recording to Pro Tools via SPDIF and the MBox:
1. Connect the DIGITAL OUT from the DAT recorder to the SPDIF in on the MBox
2. Start a new session in Pro Tools
3. Create a new stereo or mono track for your recording
4. MBox 1 (light blue model): Under the “Setups” menu choose “Hardware Setup” and switch the inputs from “Analog” to “SPDIF”
5. MBox 2 (dark blue model): Change the track I/O to S/PDIF (L Mono) or S/PDIF (L/R Stereo). The I/O view can be enabled under View > Edit Window > I/O.
6. Press the “R” (record arm) button on your track
7. Press PLAY on the DAT recorder to monitor the input in Pro Tools
8. Press “Record” and then “Play” on the transport in Pro Tools to start transfering your recordings

Session 2: Let’s start working on our next assignment which involves multitracking. Please mix 5 or more tracks of audio in Pro Tools utilizing the techniques we discussed in class. Avoid clipping and keep noise to a minimum. When looping try to find “zero crossings” within the wave to avoid pops. Use equalization to “place” individual tracks within the mix. Use several sound sources, such as dialogue or vocals recorded with microphones, sound effects from the sound effects collection in the library, sounds effects (Foley) recorded with microphones and/or musical instruments. Follow the link below to download the project requirement details in MS Word format.

Assignment 2: Multitrack Project Requirements

Plugins/Inserts: So far we have been applying DSP with the Audio Suite menu in Pro Tools. This method manipulates the selected audio and creates a new waveform which replaces the original audio on the track. This technique is know as destructive editing. The advantage to apply effects this way is that the processing happens only once and does not continually tax the CPU of your computer. The disadvantage is that the processing is destructive; unless you undo or revert to the original, you cannot easily return to the previous state or adjust the effect once it’s applied. This is why it is much better to use non-destructive DSP plugins (or inserts) in your projects. Inserts are processed in real-time so that you can make adjustments to the effect as you listen to the track, temporarily disable (bipass) the effect, or remove the effect comletely without having to revert to the original audio.

TDM – Time Division Multiplexing
RTAS – Real-time Audio Suite

Reading:
What is a Software Plugin?
Video on how to create Aux Sends in Pro Tools

Finally, when working on projects with multiple tracks it is critical that you set up a master fader in order to be able to visualize how the tracks levels are interacting. Each additional track that plays simultaneously increases the overall levels of the project. A master fader will illustrate the combined levels in the project so you can avoid clipping while keeping your levels as high as possible to prevent excessive noise.

Finally let’s take a careful look at Equalization in Pro Tools. Equalization, or EQ, is critical when mixing multiple tracks of audio together. Layering sounds with similar frequencies can often cause a “muddy” mix unless each track is taylored with EQ to work well together. The following article has an excellent explanation of a few different types of eq filtering.

http://en.wikipedia.org/wiki/Equalization_filter

Session 2: Check out these links to other digital audio software programs. In this class we’ll be focusing on just a few examples (Sound Forge, Vegas, Pro Tools and Reason), but there are dozens of excellent and innovative applications for creating music, manipulating audio or generating new sounds never heard before.

Digital Audio Production Software
Pro Tools – www.avid.com
Sonar – www.cakewalk.com
CuBase – www.steinberg.net
Logic – www.apple.com/logic
Digital Performer – www.motu.com

Soft Synths
Reaktor – www.native-instruments.com
Absynth – www.native-instruments.com
B4 – www.native-instruments.com
Kontakt – www.native-instruments.com
Reason – www.propellerheads.se

Odd stuff
Ableton LIVE – www.ableton.com
Recycle – www.propellerheads.se

Writing Assignment: Write a one page paper on an audio production application that we will not necessarily use in this class. Discuss what makes the software unique and how you and professionals in the industry might use the software in projects. This paper will be due on Session 2 of Week 5.

Animation Listening Exercise

FYI: The entire Cowboy Bebop series is available in the library. Directed by Watanabe Shinichirou and music by Yoko Kanno (her music compositions are excellent, and make the series for me). Here’s a few links to peak your interest:

http://www.cowboybebop.org/english/ – The official Cowboy Bebop: The Movie site.
http://www.cowboybebop.org/english/door/interview/index.html – Interview with the director.
http://www.ex.org/4.5/16-interview_kanno1.html – An excellent interview with Kanno Yoko.

Session 2: Starting next week I’ll be demonstrating more techniques in both ProTools and Reason. Here are the requirements for the final Project options. The final project involves combining visual imagery with sound. One of the key competencies is synchronizing the sound with the visuals or vice versa. Typically if you are creating animation you will record the sound first. For video, you generally need to replace the existing sound. You piece can be an animatic created from storyboards, an interactive piece, video, or animation. Another acceptable method is to create a derivative work fropm footage in the public domain. A vast amount of archival footage can be viewed and downloaded from archive.org.

Option 1: Final Animatic Project
Description: The Final Animatic is a two minute visual piece without a second project and intended for longer more complicated animated sequences or visuals (video, interactive, etc.).
Due: Session 1, Week 11
Points: 50
1. Minimum length is 2:00. If working in groups of two 4:00.
2. A minimum of 8 panels if creating animatic (16 if paired) are required. Other visuals are acceptable including flash animation, slide shows, video, etc.
3. Use ProTools LE (with mBox) or ProTools 24 (in 007) to produce your audio.
4. Use foley techniques to records 50% of your Sound Effects.
5. A one page script is required which includes dialogue and, more importantly, sound design notes.
6. Compile your project in one of the following accepted formats: .mov, .mpeg, .avi, or .swf
7. A minimum of 10 tracks of audio in ProTools is required.
8. Include 2 screenshots of your ProTools work in progress with your project (command+shift+3 creates a screenshot on the desktop).
9 . Try to maintain the highest possible audio quality. For MP3s do not compress your audio any more than 44.1khz and 128Kbps. Wave files should be rendered as 44.1k 16bit.
10. Copy your project with screen shots to the student drive in room 009 before it is due.
11. Use mastering techniques to finalize your mix.
12. 5% of grade is awarded for presenting your work in class.

Option 2: Combined Final Animatic Project
Description: The Combined Final Animatic is a one minute visual piece and a second project without visuals. This is intended to satisfy those of you who wish to try your hand at some music or experimentation with Reason.
Due: Session 2, Week 11
Points: 50
1. Minimum length is 1:00. If working in groups of two 2:00.
2. A minimum of 6 panels if creating animatic (12 if paired) are required. Other visuals are acceptable including flash animation, slide shows, video, etc.
3. Use ProTools LE (with mBox) or ProTools 24 (in 007) to produce your audio.
4. Use foley techniques to records 50% of your Sound Effects.
5. A one page script is required which includes dialogue and, more importantly, sound design notes.
6. Compile your project in one of the following accepted formats: .mov, .mpeg, .avi, or .swf
7. A minimum of 10 tracks of audio in ProTools is required.
8. Include 2 screenshots of your ProTools work in progress with your project (command+shift+3 creates a screenshot on the desktop).
9. produce a 2nd non-visual audio piece, the minimum length for the 2nd project is 3 minutes (without visuals).
10 . Try to maintain the highest possible audio quality. For MP3s do not compress your audio any more than 44.1khz and 128Kbps. Wave files should be rendered as 44.1k 16bit.
11. Copy your project with screen shots to the student drive in room 009 before it is due.
12. Use mastering techniques to finalize your mix.
13. 5% of grade is awarded for presenting your projects in class.

If you’re in the animation program your “Animatic Project” may involve synchronizing lip movements with dialogue. This article is an excellent introduction to basic lip sync positions and techniques used to make an animated character appear to speak pre-recorded dialog.

Lip Sync Animation
Lip-Synching for Character Animation

If you are planning on using Flash there are several ways to make sure your sound is Synchronized properly. The best way is to enable “Stream” on the first keyframe of your sound layer. This may cuase Flash to drop frames, but the synchronization will be maintained. The following link has details on how to maintain the synchronization of audio in Flash.

What are some ways to synch audio in Flash?

Session 2: Today we’ll be taking the Audio Production Midterm Quiz. The quiz is worth 15 points toward your grade. Midterm grades are due this week. Please make sure all of you meet with me to make sure that all your projects are turned in properly.

This week I’ll be demonstrating how to use the equipment in the recording studio as well as discussing concepts such as Foley. Check out this website for a list of Foley articles and descriptions of some techniques. http://www.filmsound.org/foley/

Don’t forget to create at least 50% of your sound effects using Foley. The following reading assignments will help you get a clear idea about the process of Foley, and how you can create your own Foley for your project.

What is Foley?
Foley Artist Share Their Secrets
Interview with Dustin DuPilka

Reading:
Wikipedia MIDI Resources
Real World Digital Audio Chapter 8 MIDI: Notes, Rhythms, and Physical Control

Session 2: MIDI stands for Musical Instrument Digital Interface, but is used for much more than connecting instruments and computers. MIDI has far exceeded it’s expectations at it’s conception. Today we’ll discuss a little about the history of MIDI and how we can make use of this technology in our projects.

In class I’ll demonstrate how to manipulate MIDI information and interface Reason within ProTools. Today we’ll also meet in small groups for group lessons. Our group lesson will be on how to use automation in ProTools documents.

1. Open Reason and add a 14:2 channel mixer device to the rack (Create > Mixer).

2. Import a .mid file into Reason (File > Import > MIDI File). Use www.classicalarchives.com or www.creativecommons.org to find a MIDI file use can use for this exercise. Other sites, like mididb.com have many files available as well.
3. A Combinator is automatically created for each track in the MIDI file.

4. Create instruments for each of the Combinators by pressing “show devices”.

• Right+click on the black rectangle in the Combinator and select an output device
• Devices that produce pitched instrument sounds include: Subtractor, Maelstrom, Thor, NN-19, NN-XT
• These devices produce percussive sounds or loops: Redrum (drum computer) and Dr. Rex (loop player)
• Most other devices are processors of some sort (reverb, compression, etc.)
• The Matrix is a pattern sequencer

5. Try applying processing as axillary sends.

• Right+click on the mixer
• Choose a processor such as the RV7000 for reverb



• Turn up Aux 1 on the mixer for each track you’d like to process

6. Also try adjusting the tempo, transposing notes, and applying automation.
7. When you’re happy with your mix, render your document to an audio file named midi_exercise1.wav and copy it to the drop off under John Keston/ca2431/<your name>.

• Choose File > Export Song as Audio File
• Choose Reason WAVE File under Format
• Choose 44,100Hz and 16bit

Session 2: We’ll be covering audio compression today in our group lessons. Audio compression (not to be confused with file compression) is a way to automatically adjust the dynamics of sound. Mixing multiple tracks of audio can often become difficult when some of the audio has varying or inconsistent levels. Audio compression can help resolve these difficulties. It as also widely over-used, especially in the mastering process resulting in the “loudness wars“. Please look at the following articles regarding compression for more information:

http://en.wikipedia.org/wiki/Audio_level_compression
Compressor / Limiter (article with audio examples illustrating compression)
The Death of Dynamic Range (Atricle on the so called “Loudness Wars”)

We will also talk about some of the hardware available for home studios. Professional quality audio is currently produced in inexpensive home studios around the world. Professional quality sound cards are available for as little as $129 (see http://www.m-audio.com/). With an inexpensive mixer and some reference monitors you can be on the way to building a “bedroom studio” of your own.

Session 2: How do you import movies into Pro Tools? How do you then display the movie? How do you get the audio from the QuickTime movie onto a track in Pro Tools? This is very important when producing audio for video. These are some of the things we’ll be going over today.

Final Project Milestone #1
Also, today I’ll be asking each of you to demonstrate that you are making progress on the final project. The following is a list of what I am expecting you to illustrate to me during our scheduled lab time today.

1. Show an example of the visuals that you are using for your final project.
2. Open and play a Pro Tools document that includes at least one track of audio.
3. Make sure that you have a master fader applied to your document.

The sound quality is fantastic, and the software with a decent computer could take the place of thousands of dollars worth of studio equipment (see www.propellerheads.se for more information). Although Reason has amazing capabilities, you shouldn’t rely on using it exclusively for your final projects. Reason does not allow you send MIDI to external devices, or directly record audio input. Today during the group lessons we’ll experiment with Reason and Rewire within Pro Tools.

Session 2: Mastering is something that ideally is done by a seasoned professional, however, it’s not always possible to afford to pay an experienced mastering engineer. We’ll discuss some of the basics of mastering in class, such as sequencing, sweetening, and loudness. For more information please see the article linked below.

Audio Mastering

In order to complete your final projects you will be required to mix down and render your audio to a two track master. This master will most likely be a .wav or .aiff file which can be transferred to either CD or DVD. This process used to be completely manual, but today we have the aid of computer automation allowing us to produce much more precise mixes in a fraction of the time.

Final Project Milestone #2
Also, today I’ll be asking each of you to illustrate your progress on the final project. The following is a list of what I am expecting you to show me during our scheduled lab time today.

1. Show an example of the visuals and sound combined for your final project.
2. Open and play a Pro Tools document that includes several tracks of audio for the final.
3. Show one example of automation in your document.
4. Demonstrate the use of inserts in your Pro Tools document.

Session 2: On the last day of class we will be continuing our final project presentations. Thanks for your participation. I hope you enjoyed the class as much as I did. Keep your ears open and have a great break!

Abstract of Major Ideas
The premise of Professor Stone’s article, Blurring Boundaries: Interactive Multimedia and Interdisciplinary Convergence, is that in order for interactive multimedia applications to progress, an interdisciplinary approach is necessary. By combining the expertise of students and/or professionals in visual communications, industrial design, interior design, computer human interaction (HCI) and cognitive engineering it is possible to improve interactive media applications from website interfaces to digital cameras and mobile phones beyond what is possible when only one discipline is involved.

In his paper Professor Stone uses two examples to illustrate his points. One example shows how an interdisciplinary group of students redesigned the interface of a consumer model digital camera. In this example the interface obscured the photographic image displayed on the LCD screen. Redesigning the menu system provided a better experience for the user by making more of the image visible.

Critical Evaluation of Major Ideas
Professor Stone has not only written about his ideas of “cross pollination” within interactive multimedia design, but also put them to use in the classroom. In his paper he describes the success of this experiment by presenting the work his students produced while working in a class comprised of forty percent visual communication students, forty percent industrial design students and twenty percent cognitive engineering students. After the course students were able to identify how different disciplines contribute to design problems and see the value offered by interdisciplinary collaboration.

I feel that Professor Stone’s arguments are valid. Getting the perspective of a wide audience is important because we are all integrated into an environment where we use interactive applications daily. ATMs, mobile phones, media players and laptop computers are all commonplace items. Redesigning these tools to work better and making them easier to use has broad, positive implications.

I do believe that the interdisciplinary approach is a good idea and can work well in a graduate school environment, but it might be more difficult to implement for undergraduate students. In order for the approach to be effective I feel that it is necessary for the parties involved to have a high level of expertise. This might not be as prevalent among undergraduates and could therefore lead to frustration among students involved in interdisciplinary group projects.

Implications for Design Education
The implications of Professor Stone’s ideas for design education are profound. Too often individual colleges at universities tend to focus on their field without reaching out regularly to other disciplines. Even departments within a college may lack active collaboration. Getting a visual communications instructor to collaborate or team teach with a computer science, or engineering instructor might be a difficult task in such environments, but the results are likely to benefit the students, instructors and the interactive media field at large.

Abstract of Major Ideas
Dr. Özcan has made a compelling connection between Chinese, Indonesian, Turkish, and European shadow play and today’s interactive media as an art form. He opens his paper by arguing that interactive media is not a modern phenomenon and suggests that traditional forms of shadow play amount to early examples of interactive media performances.

Some early examples of shadow play provided an outlet for audience members to participate by adding their own figures, therefore interacting with the media presented. Another technique might involve the artist improvising based on reactions from the audience thus facilitating an interactive response.

By illustrating the connection between these traditional art forms and modern interactive media technology, Dr. Özcan suggests that students might gain a new point of view as well as develop new ideas for interaction by combining current technology with traditional techniques.

Critical Evaluation of Major Ideas
Is not traditional shadow play an early form of technology? Sometimes we forget that all the modern and computerized tools and techniques we use in art and design have a basis in traditional methods. In some ways the interactive experiences of shadow play have more value than modern technology’s interactive media outlets. Dr. Özcan points out that the computerized interactive media experience is often individualized whereas shadow play involves artists and audience in a social activity. Perhaps this comparison will inspire artists to use technology to enhance social interaction, and steer us away from the detached and diluted discourse of social networking sites.

Contemporary examples of shadow play exist all around us. My music project, Keston and Westdal (unearthedmusic.com), often perform with imagery projected directly onto the stage or adjacent screens. The imagery is a mix of animated computer graphics and experimental video that we produced and edited specifically for this purpose. This is not an original concept, but one that adds a visual element to enhance the audience member’s experience. When the media is projected directly on to the performers we inadvertently interact with the images, creating shadows as we play our instruments.

Implications for Design Education
Dr. Özcan’s paper is an excellent example of how important an historical perspective is in the field of interactive media design. This perspective should not just include a history of electronic technology, but of the technologies used to produce traditional art forms as well. Dr. Özcan states that design students will benefit from creating projects without the aid of computers, and we should remember that interactive media is part of the world of audio-visual arts, and new technology can relate to tradition.

Students will refine dynamic scripting skills to develop complex interactivity and applications (applets). The course also examines client-side forms in conjunction with server-side scripting applications. Note: WDIM students must earn a C or better to pass this capstone course

Instructor: John Keston (Schedule)

Meeting Times and Location (M/W):
Session 1 / Session 2
Room P108 (The Pence Building on 8th and Hennepin) 11:00am – 2:00pm

Syllabus:
IM3420 Advanced Scripting Languages

Assignments / Projects:

Notice: All the code examples included in the class content for IM3420 Advanced Scripting Languages are what I refer to as skeletons. They are incomplete, some have bugs, and although they may run properly they are not intended for use in production. During the lectures and studio/lab sessions the examples will be developed further and fine tuned. You may use them as a starting point for your projects, but will be expected to improve on the examples and add functionality.

Week 1 | Week 2 | Week 3 | Week 4 | Week 5 | Week 6
Week 7 | Week 8 | Week 9 | Week 10 | Week 11

Recommended Text: “Beginning PHP5″ Published by WROX (Available at the bookstore)

Reading assignment:
1. Please read everything under variables
http://us2.php.net/manual/en/language.variables.php

2. Please read the following under Operators:
Arithmetic, Assignment, Comparison, Logical and String
http://us2.php.net/manual/en/language.operators.php

Session 2: Create an online guestbook in PHP on your student website. All PHP documents must be contained in your “public_html” directory or sub-directories within it on your OLS account. The guestbook form must have at least 10 fields (First Name, Last Name, Address, etc.) and display the results to the user on a following page. Use text fields, check boxes, radio buttons, select lists and one textarea.

Download: PHP Problem Set 1
1. All PHP problems within a “set” are due by the beginning of class on the next day that the class meets.
2. Answers must be available via links on the OLS or comparable hosting and copied to the drop off drive.
3. Solutions to each problem set will be given during demonstrations on the day that they are due.
4. Grades will be collected during the solution demonstrations by an assigned classmate.

<?
    $gb_file = fopen( "guests.txt", "a+" );
    if ( fwrite($gb_file, "$name\t$email\n") ) {
        $body  = "My message Text...\n";
        $body .= "$name\n";
        $body .= "$email\n";
        mail( "my_email@my_domain.edu","Guest Book Entry", $body );
        echo "Thanks!<br>\n";
    }
    else {
        echo "could not write file...<br>\n";
    }
?>

You must create a file in the same folder called “guests.txt” for this example to work. It is also necessary to set the permissions so that the file is “world writable”. The permissions can be set using an FTP client. If you’re unsure how to do this we can go over this in class on Session 1. To check your work, view guest.txt in the browser by going to http://<account_name>.aisites.com/guests.txt

Session 2: Now that your guestbook form is adding each new entry to the “guests.txt” file, create a new php document called “show_guests.php”. Write code in the script to loop through the guests.txt file and display the results in HTML. Make the email field a mailto link ( <a href=”mailto:test@test.com”>test@test.com</a> ). Here’s an example of a loop:

Example #1
<?
        $gb_file = file( 'guests.txt' );
        for( $x=0; $x < count($gb_file); ++$x ) {
                echo ( "line $x:" . $gb_file[$x] . "\n" );
        }
?>

Example #2
<?
    $gb_file = file( 'guests.txt' );
    while( list($line_nums, $lines) = each($gb_file) ) {
        echo( "line $line_nums:" . $lines . "\n" );
    }
?>

Download: PHP Problem Set 2
1. All PHP problems within a “set” are due by the beginning of class on the next day that the class meets.
2. Answers must be available via links on the OLS or comparable hosting and copied to the drop off drive.
3. Solutions to each problem set will be given during demonstrations on the day that they are due.
4. Grades will be collected during the solution demonstrations by an assigned classmate.

$comments = str_replace("\r\n","",$comments);

It’s easy enough to display the file line by line, but what if you want to have each field within the lines line up within an HTML table and include other formatting options, such as bolding, or a “mailto” link?

In order to do this you need to use the “explode” function to extract the individual fields into an array which we can then display in a dynamic web page. See the example below (show_guests.php):

<html>
<title>My Guests</title>
<head></head>
<body>
<table>
<tr><th>First Name</th><th>Last Name</th><th>Email</th></tr>
<?
    $gb_file = file( 'guests.txt' );
    foreach( $gb_file as $line ) {
        rtrim( $line );
        $field = explode( "\t", $line );
        echo( "<tr>\n" );
        echo( "<td>" . $field[0] . "</td>\n" );
        echo( "<td>" . $field[1] . "</td>\n" );
        echo( "<td><a href=\"mailto:$field[2]\">$field[2]</a></td>" );
        echo( "</tr>" );
    }
?>
</table>
</body>
</html>

Complete the guestbook project by adding your own personal design touch to the elements of the project, including the form (guestbook.html), the action (guestbook.php) and the show_guests.php script. Here’s a list of requirements for the project and how you’re expected to turn in the project:

1. The guest book form (guestbook.html) must have at least 10 fields for the user to input.
2. User input must contain arrays by using checkboxes or a select multiple list.
3. Use loops to gather information from the arrays.
4. The form action (guestbook.php) must send an email and write the fields to the “guests.txt” file.
5. The form action must strip harmful header injection attacks.
6. The guestbook.php script should provide feedback including thanking the user after they submit the form.
7. The show_guests.php script should display all the guests in a table lined up evenly.
8. Copy all your code to the drop off drive and a link to your project on OLS.
9. This project is due Session 1, Week 4.

Session 2: We talked about the dynamic links page project.To begin the links project create a directory called “links” inside your “php” directory. Inside the “links” fold create a form like the one below. The form should have a text field for the url, the category and the description.

To see a working model of the links project click here.

Download: PHP Problem Set 3
1. All PHP problems within a “set” are due by the beginning of class on the next day that the class meets.
2. Answers must be available via links on the OLS or comparable hosting and copied to the drop off drive.
3. Solutions to each problem set will be given during demonstrations on the day that they are due.
4. Grades will be collected during the solution demonstrations by an assigned classmate.

Write a PHP script to alphabetically display a list of categories found in the links.txt file using multi-dimensional associative arrays. This may sound hard, but it’s only 15 lines of code. Using associative arrays makes it possible to organize data such that very little code is needed to handle more complicated tasks. Here’s an example to help you along:

<?
  // include this at the very top of index.php
  // open the links file and insert into array
  $links_file = file( 'links.txt' );

  // loop through the file, line by line
  foreach ($links_file as $line ) {
    $line = rtrim( $line );
    $field = explode( "\t", $line );
    // make sure a category and link exist
    if ( $field[0] && $field[1] ) {
      // set the description to the link if absent
      if ( !$field[2] ) {
        $field[2] = $field[1];
      }
      // push each link into a hash of each category - this creates
      // a multidimensional associative array called $links_hash
      $links_hash["$field[0]"][]="<a href=\"$field[1]\">$field[2]</a>";
    }
  }
  // sort the hash by the key ("category")
  ksort ( $links_hash );
?>
<?
  // place this in the body of index.php
  // Display the Categories as links to anchors
  echo( "<b>Categories:</b><br />\n" );
  while ( list($key,$value) = each($links_hash) ) {
    echo( "<a href=\"#$key\">$key</a><br />\n" );
  }
  reset( $links_hash );
?>

Session 2: Here’s an example of code which will display all the links after they have been placed in the hash called $links_hash. This code must be placed in the same document AND after the code example from Session 1.

<?
  // add to body of index.php
  while( list($key, $value) = each ($links_hash) ) {
    echo( "<p><a href=\"#top\" name=\"$key\"><b>$key</b></a><br />\n" );
    sort ( $value );
    for ( $x=0; $x < count($value); ++$x ) {
      echo( "$value[$x]<br>\n" );
    }
  }
?>

Download: PHP Problem Set 4
1. All PHP problems within a “set” are due by the beginning of class on the next day that the class meets.
2. Answers must be available via links on the OLS or comparable hosting and copied to the drop off drive.
3. Solutions to each problem set will be given during demonstrations on the day that they are due.
4. Grades will be collected during the solution demonstrations by an assigned classmate.

<?
    import_request_variables("gP");
    // Check for a new category
    if ( $new_category ) {
        $category = $new_category;
    }

    // Make sure $url and $category exist before adding
    if ( $url && $category ) {
        $links_file = file ( 'links.txt' );
        for( $x=0; $x < count($links_file); ++$x ) {
            $field = explode( "\t", $links_file[$x] );
            $match = rtrim( $field[1] );
            // Check for duplicate links
            if ( $match == $url ) {
                header( "Location: index.php?message=duplicate link" );
                exit( );
            }
        }
        $links_file = fopen( 'links.txt', "a+" );
        if ( $description ) {
            $new_link = "$category\t$url\t$description\n";
        }
        else {
            $new_link = "$category\t$url\n";
        }
        fwrite( $links_file, $new_link );
        fclose( $links_file );
    }
    header( "Location: index.php" );
?>

Session 2: If you have gotten as far as getting the links added while avoiding duplicates and displaying the links organized by category, then it’s time to add the functionality to delete links. To do this you will need to search through your flat file and re-write the information without the link specified for deletion. Here’s an example of code which will accomplish this task:

<?
    // File: drop_link.php
    // Author: John Keston
    // Description: Drop a link from the the links flat file

    import_request_variables("gP");
    $message = "Link not found";

    if ( $drop_url ) {
        $links_file = file ( 'links.txt' );
        foreach( $links_file as $line ) {
            $field = explode( "\t", $line );
            $field[2] = rtrim( $field[2] );
            if ( !$field[2] ) {
                $field[1] = rtrim( $field[1] );
            }
            if ( $field[1] != $drop_url && $field[2] != $drop_url ) {
                $new_file[] = $line;
            }
            else {
                $message = "";
            }
            // Uncomment this line for troubleshooting
            // echo ( "<pre>|$drop_url|$field[1]|$field[2]|\n" );
        }
        $new_links = fopen( 'links.txt', "w+" );
        foreach( $new_file as $link ) {
            fwrite( $new_links, $link );
        }
        fclose( $new_links );
    }
    header( "Location: index.php?message=$message" );
?>

<select name="category">
<?
    while ( list($key,$value) = each($links_hash) ) {
        echo( "<option value=\"$key\">$key</option>\n" );
    }
    reset( $links_hash );
?>
</select>

To turn in the links project, on the drop off drive (Z:/John Keston/mm2421/<yourname>/links) place the following:

1. An Internet Shortcut to your “links” project
2. All the source code
3. The “links.txt” flat file
4. Add at least 5 categories with a total of at least 20 links to your page
5. Add some personal design choices to your links page

The next project is called the News Database project and involves making a web interface to a remote database. We’ll use MySQL which is the database platform, and “MySQL-Front” as our tool for managing the database. Add the following tables to the “aimstudent5″ database. Use a prefix of your first, middle, last initials and underscore (jck_) for each table. Add at least one user with username and password to the users table:

CREATE TABLE news_users (
    id          INT PRIMARY KEY AUTO_INCREMENT,
    username    VARCHAR(64)        NOT NULL UNIQUE,
    password    VARCHAR(64)        NOT NULL,
    first_name  VARCHAR(64)        NOT NULL,
    last_name   VARCHAR(64)        NOT NULL,
    email       VARCHAR(128),
    status      VARCHAR(32) DEFAULT 'enabled'
);

CREATE TABLE news_articles (
    id          INT PRIMARY KEY AUTO_INCREMENT,
    headline    VARCHAR(128)        NOT NULL,
    author      VARCHAR(128),
    body        TEXT                NOT NULL,
    create_date DATETIME            NOT NULL,
    modify_date DATETIME,
    user_id     INT                 NOT NULL,
    status      VARCHAR(32) DEFAULT 'enabled'
);

Session 2: The links project is due today. Next step is to write the code which authenticates the user and sets a session cookie so that we know who has authenticated and use their ID to track who’s creating the news stories. Place these examples in a sub-directory of your php directory called “news”. Next create a login form then create a php script called “auth_user.php” to compare what the user enters to the database.

1. The “Login” form:

<?
    ////////////////////////////////
    // Script Name: auth_user.php //
    ////////////////////////////////
    import_request_variables("gp");

    // Connect to a MySQL database
    $dbh = mysql_connect ("localhost", "jck362aii_jck", "abc123")
        or die ('I cannot connect to the database.');
    mysql_select_db ("jck362aii_news");

    // Build the database query
    $query = "SELECT * FROM news_users WHERE ";
    $query .= "username = '$username' AND ";
    $query .= "password = MD5('$password') AND ";
    $query .= "status = 'enabled'";
    // Execute the query and fetch the results
    $result = mysql_query($query);
    $row = mysql_fetch_array($result);
    // check for a match
    if ( $row ) {
        // Set a cookie and display the add news form
        setcookie( "user_id",$row['id'] );
        header( "Location: add_news.php" );
        exit();
    }
    // Return to login.php and displays auth failed message
    header( "Location: login.php?" .
            "message=Authorization failed. Please try again." );
?>

The “Add News” form:

<?
  $user_id = $_COOKIE['user_id'];
  if ( !$user_id ) {
    header( "Location: login.php?message=Login before adding news" );
    exit();
  }
?>

Now that we are authenticating the administrative users and creating a cookie, we need to send them to the news form so they can add a news story. Here’s an an example of code we can use to insert a record into the news table:

<?
  //////////////////////////////////
  // Script Name: insert_news.php //
  //////////////////////////////////

  import_request_variables("gP");
  $user_id = $_COOKIE["user_id"];
  if ( !$user_id ) {
    header( "Location: login.php?message=Login before adding news" );
    exit();
  }

  // Connect to a MySQL database
  $dbh=mysql_connect ("localhost", "mydb_account", "mydb_password")
      or die ('I cannot connect to the database.');
  mysql_select_db ("mydb_name");

  // Build the database query
  $query  = "INSERT INTO jck_news ";
  $query .= "(headline,author,body,create_date,user_id,status) ";
  $query .= "VALUES ";
  $query .= "('$headline','$author','$body',");
  $query .= "'$create_date',$user_id,'$status')";

  // Execute the query and check for validity
  if ( mysql_query($query) ) {
    header("Location: add_news.php?message=Thanks for your submission");
    exit();
  }
  echo( "insert failed: $query\n" );
?>

Session 2: Today let’s discuss how we can take frequently used code and put it into includes. Includes work like functions and are reusable chunks of code that we can link in our PHP documents, rather than re-writing things repeatedly.

connect_inc.php

<?
  // Connect to a MySQL database
  $dbh=mysql_connect ("localhost", "mydb_account", "mydb_password");
  mysql_select_db("mydb_name");
?>

Use the following line of code to include the connection script in a diferent PHP document:

include(“connect_inc.php”);

<html>
<head>
<title>Show Headlines</title>
</head>
<body>
<h3>News Stories</h3>
<b><font color="red"><? echo $message ?></font></b>
<table>
<tr><th>Headline</th><th>Author</th><th>Date</th>
<?
    /////////////////////////////////////
    // Script Name: show_headlines.php //
    /////////////////////////////////////

	include('connect_inc.php');

    $query  = "SELECT *,DATE_FORMAT(create_date,'%W, %M %D, %Y') ";
    $query .= "AS pretty_date ";
    $query .= " FROM news_articles WHERE status = 'enabled' ";
    $query .= "ORDER BY create_date DESC ";

    $results = mysql_query($query);
    while( $row = mysql_fetch_array($results) ) {
        // create alternating background colors
        ++$x;
        $bgcolor = "#ffffff";
        if ( $x % 2 ) {
            $bgcolor = "#cccccc";
        }
        // display the headlines in html table rows
        echo ("<tr bgcolor=\"$bgcolor\">\n");
        echo ("<td><a href=\"show_news.php?id=".$row[id]."\">");
        echo ("$row[headline]</a></td>\n");
        echo ("<td>$row[author]</td>\n");
        echo ("<td>$row[pretty_date]</td>\n");
        echo ("</tr>");
    }
?>
</table>
</html>

Challenge: Try to make the column header work as links to sort by that column. Also, clicking twice makes the sort direction change from ascending (ASC) to descending (DESC). Click here for an example.

Session 2: Now we need to write the script called “show_news.php” which will display the entire news story. The first part of the script is PHP and the latter part is mostly HTML. What’s happening is that we are selecting the information from the database and then displaying it in one step.

<?
  ////////////////////////////////
  // Script Name: show_news.php //
  ////////////////////////////////
  $message = "News story not available";
  import_request_variables("gP");
  if ( !is_numeric($id) ) {
    header( "Location: show_headlines.php?message=$message" );
    exit();
  }
  include('connect_inc.php');

  $query  = "SELECT * FROM jck_news ";
  $query .= "WHERE id = $id";
  $results = mysql_query($query);

  $row = mysql_fetch_array($results);
  if ( !$row ) {
    header( "Location: show_headlines.php?message=$message" );
    exit();
  }
?>
<html>
<head>
</head>
<body>
<h2><?= $row['headline'] ?></h2><b>
Author: <?= $row['author'] ?><br>
Date: <?= $row['create_date'] ?>
</b>
<p>
<?= $row['body'] ?>
</body>
</html>

Start by “re-purposing” the code that is in place for “show_headlines.php” creating a new script in the admin directory called “modify_news.php”. Include the code which checks the cookie so that the page is secure and add in forms with hidden variables and buttons to archive and delete the records.

<?
  // modify_news.php
  // Make sure that the user has authenticated
  $user_id = $_COOKIE["user_id"];
  if ( !$user_id ) {
    header( "Location: login.php?message=Please login before modifying news" );
    exit();
  }
?>
<html>
<title>Modify News</title>
<head></head>
<font color="red"><? echo $_GET[message] ?></font>
<table>
<tr>
<th>Headline</th><th>Author</th><th>Create Date</th><th>Status</th>
</tr>
<?
  include("connect_inc.php");
  $query  = "SELECT * FROM jck_news ";
  $query .= "ORDER BY status, create_date DESC";

  $results = mysql_query($query);
  while( $row = mysql_fetch_array($results) ) {
    echo ( "<tr><td><a href=\"update_form.php?id=$row[id].\">" .
           "$row[headline]</a></td>" .
           "<td>$row[author]</td><td>$row[create_date]</td>\n" .
           "<form method=\"post\" action=\"change_status.php\">" );
    $selected[$row[status]] = ' selected="selected"';
    echo ( "<td><select name=\"status\">" );
    echo ( "<option value=\"enabled\" $selected[enabled]>Enabled</option>\n" );
    echo ( "<option value=\"disabled\" $selected[disabled]>Disabled</option>\n" );
    echo ( "<option value=\"archived\" $selected[archived]>Archived</option>\n" );
    echo ( "</select></td>\n" );
    echo ( "<input type=\"hidden\" name=\"id\" value=\"$row[id]\">" );
    echo ( "<td><input type=\"submit\" value=\"Change Status\">" );
    echo ( "</td>\n</form>\n</tr>\n" );

    // clear the $selected hash
    unset( $selected );
  }
?>

Session 2: Here’s a good way to build the change_status.php script. Make sure that you remember to replace all the location paths and table names with the appropriate values. This script also uses a function. Functions are way to write code that you can reuse by calling the function.

<?
  // change_status.php
  // Make sure that the user has authenticated
  $user_id = $_COOKIE["user_id"];
  if ( !$user_id ) {
    header( "Location: login.php?" .
            "message=Please login before modifying news" );
    exit();
  }
  function update_status ($id, $status) {
    include ("connect.php");
    $query  = "UPDATE jck_news SET status='$status' ";
    $query .= "WHERE id = $id";
    return mysql_query($query);
  }
  if ( update_status($_POST[id], $_POST[status]) ) {
    $message = "Set news article $_POST[id] status to $_POST[status]";
    header ("Location: modify_news.php?message=$message" );
    exit();
  }
  else {
    $message = "Update Failed";
    header ("Location: modify_news.php?message=$message" );
    exit();
  }
?>

<?
  // update_form.php
  // Make sure that the user has authenticated
  $user_id = $_COOKIE["user_id"];
  if ( !$user_id ) {
    header( "Location: login.php?message=Please login before updating news" );
    exit();
  }
  if (!$_GET[id]) {
    header( "Location: modify_news.php?message=No such news article" );
    exit();
  }
  // Connect to database
  include ("connect.php");
  // Build query
  $query = "SELECT * FROM jck_news WHERE id = $_GET[id]";
  $result = mysql_query( $query );
  if (!$result) {
    header( "Location: modify_news.php?message=Query failed: $query" );
    exit();
  }
  $row = mysql_fetch_array( $result );
  $selected[$row[status]] = "SELECTED";
?>
<html>
<title>Update News Article</title>
<head></head>
<body>
<form action="update_news.php" method="post">
<input type="hidden" name="id" value="<? echo $row[id] ?>">
Headline:
<input type="text" name="headline" value="<? echo $row[headline] ?>"><br />
Author:
<input type="text" name="author" value="<? echo $row[author] ?>"><br />
Create Date:
<input type="text" name="headline" value="<? echo $row[create_date] ?>"><br />
Status:<br />
<select name="status">
<option value="enabled"<?= $selected[enabled] ?>>Enabled</option>
<option value="enabled"<?= $selected[disabled] ?>>Disabled</option>
<option value="enabled"<?= $selected[archived] ?>>Archived</option>
<br />
<textarea name="body"><? echo $row[body] ?></textarea><br />
<input type="submit" value="Update"><input type="reset" value="Reset">
</form>
</body>
</html>

Session 2: Finally we need the script which actually updates the record in the database. We will call this standalone PHP script update_news.php as it is called in the form action in update_form.php. Here’s the source for update_news.php:

<?
  // update_news.php
  // Make sure that the user has authenticated
  $user_id = $_COOKIE["user_id"];
  if ( !$user_id ) {
    header( "Location: login.php?message=Please login before updating news" );
    exit();
  }
  // Connect to database
  include ("connect.php");
  import_request_variables("gP");
  // Build query
  $query  = "UPDATE jck_news SET headline='$headline', ";
  $query .= "author='$author', create_date='$create_date', ";
  $query .= "modify_date=NOW(), body='$body', status='$status', ";
  $query .= "user_id=$user_id WHERE id=$id";

  if ( mysql_query($query) ) {
    header( "Location: modify_news.php?message=News article id: $id updated." );
    exit();
  }
  header( "Location: modify_news.php?message=Update failed: $query" );
?>

Session 2: The final quiz is today. Afterwards we will discuss the questions and then present the news projects.

Abstract of Major Ideas
In Mr. Tselentis’ paper Software ≠ Interactive Design, he proposes that when learning how to use software students fall into one of two different categories – either self-reliant or instructor-reliant. The instructor-reliant students need to become self-reliant; otherwise the class content is likely to revolve around learning the menus and toolbars of specific software.

This outcome is futile because the software is likely to either change significantly in the future or be replaced by another tool. Instilling self-confidence in the students helps them become more comfortable experimenting and playing with the applications. This in turn allows the curriculum to focus on the history, trends and theories relevant to the course.

Critical Evaluation of Major Ideas
In the graphic design and interactive media design fields, many institution’s courses focus heavily on teaching the ins and outs of computer applications such Photoshop, Illustrator, Flash, and Dreamweaver. To a degree the industry demands that graduates are proficient in these and other related platforms. However, the software tools are rapidly being changed or replaced to keep up with competitors and the demands of professionals in the industry. It follows then that students need to develop the skills required to adapt to the technology as it advances as quickly and efficiently as possible. It is not practical for an employer to send their employees out for re-training every time a new version of specific software is released. More often than not, employees are expected to learn how to use new and updated tools on their own in a self-reliant manner.

Implications for Design Education
Mr. Tselentis’ ideas on this matter have been in use by educators for many years. At the Art Institutes International Minnesota, course titles and descriptions do not contain any mention of specific software applications even though it is understood that they will be covered in the classroom. I have been teaching in the Interactive Media Design program at the Art Institutes for five years and have encountered the dichotomy of self and instructor reliant students that Mr. Tselentis describes. The structure of the class and lab/studio time, and the design of projects and assignments are meant to accommodate both types of software learners. Classes meet for a total of six hours a week. A minimum of two hours are set aside for lectures, discussions and demonstrations. The remaining three to four hours per weeks are dedicated to lab/studio time with the instructor and teaching assistant aiding students in groups or individually. Peer learning is encouraged and consistently helps motivate students toward becoming self-reliant software learners.

Abstract of Major Ideas
In his paper Hearing Type, Frank Armstrong describes an interesting analogy between music and both static and kinetic typography. He compares specific properties of music to typography including rhythm, melody, and harmony. Rhythm can be used to describe type in many ways, such as shape, strokes, and punctuation for both moving and static examples. Melody is the message or meaning of the type, while harmony describes the interaction of columns or lines of type to each other.

He also compares an individual glyph to a sound or tone, using the amplitude to describe the weight of a character, duration to the width of a series of glyphs, pitch to the vertical positioning of the type, and timbre to the color, texture and style of the type. Armstrong suggests that using such analogies can help students better understand both static and kinetic typography by providing a different perspective or frame of reference.

Critical Evaluation of Major Ideas
It isn’t difficult for one to visualize comparisons between audible tones in music and glyphs or phrases of type. Armstrong also brings up the example of sheet music to strengthen his point. Certainly sheet music is another form of typography and is used to produce music output as sound, just as type, when read, produces audible speech. Armstrong quotes musicians, typographers, graphic designers, and physicists who have made similar comparisons.

These analogies might be useful in the ways that Armstrong suggests. I know from teaching audio production that I frequently use visual analogues to describe sound, such as comparing bitmap imagery to digital audio. There seems to be a shortage of adjectives in the English language that are used exclusively to describe sound. When we describe the timbre of a sound we use words like warm, cool, crisp, bright, or dark. All these words are usually used to describe other things like temperature, color or texture.

I agree with Armstrong’s position. It’s often very useful to compare and contrast different art forms. I think it is also important to look carefully at what the differences are between these art forms as well as the likenesses, so that students are getting the whole story.

Implications for Design Education
Armstrong’s paper raises an interesting perspective within the field of typography. The essence is that music and type are both forms of language; therefore they have parallels that can be illustrated to give students and designers a new frame of reference that might provide inspiration. I would not discourage instructors from using similar analogies, but I would suggest that they also make it clear that typography is not literally sheet music (although it could be interpreted as such through the use of visual scores), just as spoken text is not necessarily musical.

Abstract of Major Ideas
Luis von Ahn’s internationally recognized postdoctoral work at Carnegie Mellon University’s Center for Algorithm Adaptation, Dissemination and Integration (ALADDIN) involves developing techniques to harness human computational power to solve problems that computers are currently not very good at solving. In his paper, Games with a Purpose, he describes how he has developed a few very simple online games that are fun and addicting for humans, but also provide valuable information for image search databases that would otherwise be extremely expensive to collect.

Dr. von Ahn describes how computers are very bad at recognizing the content within photographs and images. Image search databases do not return very accurate results because the text that is indexed to describe the images is simply gleaned from image captions or adjacent verbiage. Using his ESP game von Ahn has been able to collect massive amounts of data to help improve image search functionality. The game works by displaying an image to two anonymous players on the Internet. Each player enters words that they feel describe the image. When both players hit on an identical word, a match is made that is then collected and used as a search term for the image displayed. The ESP Game has collected over 10 million player generated labels since it was introduced on October 5, 2003.

Critical Evaluation of Major Ideas
With the power of computers advancing as rapidly as it has since the ’60s, we tend to take for granted tasks that are simple for us to do, but technically monumental for computers to handle. Dr. von Ahn has had the insight to look beyond the complex and obvious solutions to find simple and elegant ways to use human brainpower for a positive outcome. The game industry is one of the largest areas within interactive media. In his paper, Dr. von Ahn outlines several other ways simple games could be used to solve difficult problems utilizing the cognitive abilities of the online community. These include language translation, monitoring security cameras, improving web searches with human aids, and summarizing important documents.

I regularly use Luis von Ahn’s examples as teaching tools in my interactive media design classes. In Advanced Scripting Languages I use Dr. von Ahn’s reCAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) project as an example of how a web application can detect whether the input received in online forms is coming from a human being or a spambot (a spambot is software designed to collect e-mail addresses from the Internet in order to build mailing lists for sending unsolicited e-mail, also known as spam – en.wikipedia.org). Dr. von Ahn created the CAPTCHA technique and then redeveloped it under the new name reCAPTCHA. reCAPTCHA forces people to type in words that appear semi-scrambled when entering data into an online form. Computer based optical character recognition (OCR) is incapable of deciphering these words. One of the words is the security key, while the other was scanned from a book, but not recognized by OCR. By having a person enter both words they proving they are human and aiding the digitization of books for the Internet Archive (archive.org) at the same time.

Implications for Design Education
We can all learn from Luis von Ahn’s research. His CAPTCHA technique is commonly used and imitated on major sites like Yahoo, Myspace, and Google as well as millions of simple news blogs and personal sites. His ideas are simple, elegant and inspirational. Students in interactive media design are frequently bogged down by the complexity and difficulty of the technology involved in web applications. Examining Dr. von Ahn’s projects helps my students understand that the best answers are not always the most difficult ones.

The Free Software Foundation Organizational Profile
The Free Software Foundation’s website, [http://www.gnu.org/] uses the acronym GNU for its domain, which is a recursive acronym. It stands for “GNU’s not Unix.” The Free Software Foundation (FSF) is a nonprofit foundation that receives the majority of its funding from individual donors. The FSF represents the Free Software movement on a global scale which is made evident by the thirty languages available for browsing their website, each just one click away.

The FSF is made up of a board of directors and has members from around the world within the global free software community. Among the board of directors is the founder of the GNU project, Richard Stallman, a leading figure of the Free Software movement who also founded the FSF. Stallman is a talented programmer whose projects include Emacs (a powerful and popular computer code editing tool) and GCC (a flexible compiler – a tool which converts computer code into an executable program). Both of these projects are part of GNU, which, along with many other components, are part of what is known as the GNU/Linux operating system, or more commonly, Linux. Stallman founded the FSF in 1985 to support the GNU project and promote the Free Software movement. Stallman is currently more involved in promoting the movement than he is writing software. He regularly gives speeches around the world and has published a book of essays called, Free Software, Free Society: Selected Essays of Richard M. Stallman.

One of the key concepts of the Free Software movement is how the term “free” is used. The FSF suggests that we think of “Free as in Freedom”. This does not mean free as in “free beer”, which although a disappointment to some, gives free software some major advantages over proprietary software (software that has closed source, and is marketed and sold, like Microsoft Office). The FSF’s website provides a few points to help us understand what they mean by “free as in freedom”, in relation to computer software.

• The freedom to run the program, for any purpose (freedom 0).
• The freedom to study how the program works, and adapt it to your needs (freedom 1). Access to the source code is a precondition for this.
• The freedom to redistribute copies so you can help your neighbor (freedom 2).
• The freedom to improve the program, and release your improvements to the public, so that the whole community benefits (freedom 3). Access to the source code is a precondition for this.
[http://www.gnu.org]

Notice that the phrase, “access to the source code is a precondition for this” is appended to both freedom one and freedom three. Open Source (a related software movement) also has this requirement, but it is a term rejected by Stallman and the FSF. Stallman argues that the Open Source movement makes concessions which undermine the goals of the Free Software movement. However, the two movements coexist peacefully and actually work together productively.

So, why are there two camps? Stallman believes that it has to do with a “fear of freedom.” The term “free” when looked at with all the ethical issues attached to it can make people become uneasy. Perhaps this is why the Open Source movement (founded in 1998 by John “maddog” Hall, Larry Augustin, Eric S. Raymond, Bruce Perens, and others) has become so popular.

Raymond is probably the single person most identified with the Open Source movement; he was and remains its self-described principal “theorist”, but does not claim to lead it in any exclusive sense. In contrast with the Free Software movement, which has always been essentially directed by Stallman, the Open Source movement is “steered” by a loose collegiums of elders that includes Raymond its other cofounders, and such notables as Linus Torvalds (the original developer of the Linux kernel), Larry Wall, and Guido Van Rossum.

The mission of the FSF is to educate people about, promote, protect, and encourage the development of Free Software. The FSF’s extensive website, [http://www.gnu.org/] is the primary tool used for these tasks. Hundreds, or perhaps thousands, of links are found on the site including a detailed history of the FSF, an endless collection of articles regarding their philosophy, well-organized resources for software developers, information on licenses like the GPL, complete GNU documentation, membership programs, and much more.

The FSF has programs not only to educate the general public about the Free Software movement, but for educators to get free software into schools and educate students on its use. There is even a link to an article on how to convince your school administrator to utilize free software. Many schools around the world are starting to get involved in using GNU/Linux and other free software in their programs. This is especially true in Europe and Canada where the anti-trust practices of Microsoft aren’t tolerated as readily as they are in the United States.

The leftist political views of the FSF are apparent. Stallman openly endorsed the DFL presidential candidate Dennis Kucinich. The promotional efforts of the FSF reflect their political persuasions and are largely a grassroots effort. It is unlikely that we will be seeing advertisements for GNU projects on television anytime soon. However, as large companies like IBM, Hewlett Packard, and Novell start to embrace Linux and Open Source, public awareness will increase. Recently IBM ran a television campaign that directly addressed their endorsement of Open Source software. The FSF has European and Indian branches to address the needs of software users and developers around the world and uses each branch to collect donations. Donations are rewarded with a membership benefits including an invitation to the annual meeting, email forwarding, and a CD-ROM membership card that contains a bootable version of GNU/Linux.

Tirelessly protecting and defending the rights of free software users and developers is a constant task for the FSF. A staggering array of legal issues face the software industry. Many of them effect the Free Software movement directly. The European Commission and European Parliament have mobilized to introduce software patents in Europe similar to debilitating patent laws in the United States. This legislation could lead to arbitrary patents on mathematical equations that could threaten the diversity of the software industry worldwide. Widespread opposition from both commercial and free software developers has done little to stop the Commission from moving forward with its plan. Many other legal issues are poised to redefine the software industry, including a variety of litigation involving Microsoft, SCO, and IBM.

Developing Free and Open Source Software
The FSF also plays a pivotal role in encouraging the widespread development of free software. One way that this is done is through the use of the GNU General Public License or GPL. According to the FSF the GPL is how more than half of all Free Software is licensed. This includes a wide variety of Open Source software. Although the FSF only approves of a short list of licenses including the GPL, Open Source software can be licensed under a wide array of licenses. Some of these are similar to the GPL, while others may have some restrictions.

The GPL is quite long and detailed, but one of the central themes is that any software improvements made to software released under it must also be released as free software. This means that if you release software under the GPL, you will not have to compete with developers who repackage your original work for profit, because this is illegal. Stallman calls this idea “Copyleft.” While patent-laws and copyrights are used to protect the profits of publishers and software corporations, the “Copyleft” principal within the GPL uses the legal system to protect the freedom of the software under it. Thus the GPL keeps free software free, preventing it from becoming proprietary software.

The Open Source Definition (OSD) is maintained by another nonprofit called the Open Source Initiative (OSI). Their website can be found at [http://www.opensource.org/]. The OSD is a set of guidelines that explain what it means for software to be Open Source. The first statement made in the OSD is that providing access to the source code is not enough for the software to qualify. Ten detailed requirements must be met. These requirements include free redistribution, antidiscrimination conditions, and license prerequisites.

Free and Open Source Software as an Approach to Global Action
Free and Open Source software represents an attractive alternative to the expensive, proprietary, and closed software we find ourselves using day to day. The commercial software industry profits from charging frequent upgrade fees and leading their customers to believe that there is no alternative to the software that they are using. Often critical security exploits in commercial software leave users struggling with spyware (annoying software that installs itself without the users consent and creates popup ads or collects personal data about the user), harmful viruses, or lost data. The Washington Times reported that worldwide virus and worm attacks cost business an estimated $83 billion in the month of February, 2004 alone. More serious attention paid to computer security exploits by commercial software manufacturers would significantly reduce these losses. In the Free and Open Source software development model, often hundreds of programmers worldwide are working on an individual project simultaneously. Usually security exploits are spotted and repaired before any significant amount of damage is done. The Free and Open Source community is concerned about its users because they are users themselves and are less motivated by profit.

Profit motivation in the software business has created billionaires, but has it created the best software? Those involved in the Free and Open Source community would argue that it has not and that their software has unique advantages over the commercial variety. First of all if users would like to add new features or change the software to suit their purposes, they are welcomed and encouraged to do so. The best that proprietary software offers is an online suggestion box. Second, improvements to the software are made rapidly and efficiently due to the sheer volume of developers involved in some projects. New versions of many Free and Open Source projects are released on a daily basis. The web browser Mozilla is an example of this; users can download a daily build which has all the upgrades and bug fixed from the previous day. Proprietary software releases happen much more infrequently. Sometimes users must wait a year or more for a new version, only to find that it costs up to hundreds of dollars to buy and still doesn’t include that one feature they were hoping for.

Another aspect of Free and Open Source software is the incredible number of projects freely available for users to install or demonstrate. Virtually any viable software concept one can imagine has already been developed and submitted to the GPL or some other public license and new projects get submitted on the hour. Vast databases that track these projects are available at [http://www.sourceforge.net] and [http://www.freshmeat.net]. SourceForge.net for example hosts a whopping 80,230 projects (166,397 as of January 8, 2008), most of them under one form of free software license or another. This number increases daily. Freshmeat.net hosts 32,773 projects (46,991 as of January 8, 2008). Sixty-four percent of these are under the GNU General Public License. Some of these projects are huge operations with hundreds of developers involved, all donating their time to enhance and improve the software they are dedicated to as contributors and users. Many more are one-person-projects that provide a very specific need to a niche of users. Whatever the case, the participation in the Free and Open Source software community is vast and enthusiastic.

Social Capital in the Free and Open Source Software Community
What motivates thousands of talented developers, whose time would fetch top dollar on commercial projects, to work for no pay on software that anyone can use, free of charge? Most often there is no monetary reward, but there is merit and recognition within the community and the satisfaction that the contributor has helped develop software that not only benefits them, but a global community of other computer users and developers.

While working for profit-motivated corporations, programmers are often required to sign noncompete and nondisclosure agreements. Nondisclosures ensure that all the creative concepts and code written to realize them is the property of the corporation. A noncompete may require that the employee not work in a similar field for a year or more after leaving the company. These policies may leave programmers, without a vested interest in the corporation, feeling used and under appreciated. Programming is about creative problem solving, and when programmers come up with particularly ingenious solutions the first thing many of them want to do is share it with people who will understand and appreciate what they have accomplished. The secrecy of closed source proprietary software does not give developers that satisfaction.

What the developers of Free and Open Source software are providing is social capital that is enriching a vibrant global community. This example of social capital is quite different from the examples that Carmen Sirianni and Lewis Friedland present in their piece Social Capital. The social capital examples they discuss are generally localized community associations such as churches or veterans groups where people meet face-to-face. These face-to-face meetings allow people to get to know each other and develop friendships and a desire to help each other voluntarily.

Most of the communication that happens within the Free and Open Source software community is not face-to-face. It is not even on traditional communications devices like the telephone. A majority of the communication within this community is via the Internet. Email, instant messaging, forums, and the like are the most typical way that Free and Open Source software users and developers interact. In-person communication is often an ideal situation, but not as always practical. The impracticality of face-to-face interaction is compounded when developers from many different countries are working on the same project. However, incredibly concise and efficient communication goes on within the community. One of the benefits to communication via the Internet is that in the case of email, forums, and even some chat software, archives of the messages are stored that can be referred back to at any time. Often when questions are answered in online forums, those answers can apply to hundreds or thousands of other users. Simple Internet searching can provide these answers to those who need them.

About the Author
John Keston has been working in the technology industry since 1987. He has been involved in the web development field as a programmer since 1995 and as an instructor since 2002. During his time in the field he has made use of a wide variety of Open Source software including GNU/Linux, MySQL, Perl, PHP, WordPress, Firefox, Audacity, and many others. John not only uses Open Source software for development, but as a teaching tool in the Interactive Media Design program at the Art Institutes International. A recent class project involved selecting an Open Source application, implementing it, and then modifying it to include a complete new set of features. The project is now used by the school’s registrar, administrators, and faculty to schedule classes and meetings within the facilities. After some more finishing touches, the project will be resubmitted to the GPL as a new branch for other schools to use freely.

Microsoft-California Class Action Settlement:
[http://www.microsoftcalsettlement.com/]

Sources:
[http://www.fsf.org/]
[http://www.gnu.org/]
[http://www.slashdot.org/]
[http://www.wikipedia.org/]
[http://www.washtimes.com/business/20040229-105349-9778r.htm]
Siriani, Carmen and Friedland, Lewis 1995. “Social Capital”, presented at the Social Capital session of the American Sociological Association, August.

Getting Started:

1. After getting a pass card from the Cage, login to the Mac with username: studio and password: studio.
1. You may need to turn on the projector to see the menus.
2. To change this under System Prefs > Display > Arrangment drag the menu bar icon to the preferred monitor.
2. Turn on the Digidesign 192 I/O and wait for it to completely finish its boot process.
3. Start Pro Tools once all the lights have stopped blinking on the 192 I/O.
4. Turn on the Mackie monitors with the button on the front of each speaker.
5. Start a new session in Pro Tools and save it on the Student Drive
6. Start a new track
1. Use tracks 1-8 for microphones in sequence
2. Plug the mics into corresponding inputs on the snake (i.e. 1 -> A1, etc.).
3. Set the “source” on the Control 24 to “mic” for tracks to record from mics.
4. Use the “gain” to adjust the input levels before recording
7. Important: when you are finished turn off the monitors before exiting Protools or shutting down the system.
8. Set the I/O on your tracks based on the following:
1. A1, A2, A3, A4, A5, A6, A7, A8 for mono mic input tracks (set source to “mic”)
2. A1-2 for analog input from the CD player (set source to “line”)
3. A3-4 for analog input from the DAT deck (set source to “line”)
4. A5-6 for analog input from the Yamaha keyboard (set source to “line”)
5. A7-8 for analog input from the internal Mac sound card (set source to “line”)

Instructor: John Keston

Meeting Times and Location:
Room P112 (The Pence Building on 8th and Hennepin) 2:00pm – 4:50pm

Syllabus: im1480syllabus.doc

Week 1 | Week 2 | Week 3 | Week 4 | Week 5 | Week 6
Week 7 | Week 8 | Week 9 | Week 10 | Week 11

We will start the class by using Dreamweaver to create a basic five page website. Dreamweaver is an HTML editor. It does not create Dreamweaver documents, it is used to help you build and edit HTML documents, allowing you to publish content on the World Wide Web.

Before getting started in Dreamweaver it’s important to understand a little about HTML and how websites operate. In this class you’re not expected to become HTML experts, but it’s important to have a good understanding of it when involved in virtually any technology field. Thursday I’ll demonstrate some of the basic functionality within Dreamweaver, and talk more about our first project, which is a five page website using links, images and tables.

Assignment 1: "Project Portal" Static Web Page
Due Session 1, Week 2 (10 points)

For the official assignment requirements, download the assignment sheet in MS Word format.

This assignment is an introduction to the most basic concepts of building a web page (i.e. hyperlinks, uploading files, creating directories, creating HTML pages in Dreamweaver). It is also the mechanism through which I will grade all of your subsequent assignments. First you will log in to your OLS account and create four new directories within your /htdocs directory. You will then build one web page with links to the new directories you created, and upload the page. This page will be the "project portal" for this class. You are free to use it for other classes too, just make sure to label your assigment links clearly.

Session 2: Today I’ll be demonstrating a couple of ways to produce the "Project Portal" assignment that we discussed last time. We will also start our duscussion on HTML, look at some functionality within the Dreamweaver application, and discuss the requirements for the next project shown below.

Dreamweaver Project – "The World" Website
Due Date – Session 2, Week 6
Total Points – 40

For the "The World" project requirements, download the assignment sheet in MS Word format.

Assignment Overview:
Using Dreamweaver create a 6 page website about a country other than the United States. Each page should include images specifically prepared for the web in either jpg, gif, or png format. Use tables to organized the information on each page. Include text content, hard links, relative links and an email link. Also use the properties panel to choose specific fonts, font sizes, font styles and colors.

Content Specifics:
Website size – 6 pages.
Images on each page must be formatted as jpg, gif or png.
Text content must be included on each page. Pages consisting entirely of images are unacceptable.
Must be fully navigable, create universal navigation to get the user from one page to any other page.
Completed project must be uploaded to your OLS account and accessible over the internet.

Competencies:
Proper image formatting
Use of tables for layout
Use of links: email, relative and absolute
Use of page titles
Proper file naming
Use of CSS to format content
Setting document properties for text, tables and images
File transfer
Usability concepts (information design / navigation)
Originality of design and content organization

Grading Standards:
Grading is based on the above requirements (i.e. following the instructions as given in the content area, technical area, and competencies). Presentations of the "Word Almanac" will be held in class on the due date. Not presenting will result in a 5% reduction in your grade for the project.

Check these links for information on countries:
http://www.cia.gov/cia/publications/factbook/
http://www.unicef.org/infobycountry/
http://en.wikipedia.org/

Check these links for tutorials and information:
http://hotwired.lycos.com/webmonkey/
http://www.macromedia.com/support/dreamweaver/
http://www.projectseven.com/tutorials/index.htm
http://www.siteownersdesign.com/design-tutorials/dreamweaver-mx-tutorial

Session 2: Let’s look carefully at tables and how they can improve the look of our web pages. Let’s also take a look at some basic HTML commands. It’s not the goal of this class to learn the HTML language, but a basic introduction will help you understand how your website works. It will also help you understand how to fix technical problems when they arise, such as bad links, broken images and alignment issues.

Topics Covered:
Tables
Table Attributes
Using Dreamweaver
Setting Properties
Web Dimensions

World Project Milestone 1 Due Session 2, Week 3
Have a mostly complete design of one page in XHTML
Dimensions, colors, fonts and typesetting should be adjusted
Complete navigation scheme should be applied to your design

Topic covered:
Image Processing
Image Dimensions
File / Asset Management

Session 2: Today we’ll look at some design issues and how to use CSS in Dreamweaver to place web graphics. I will also be looking at your designs for the World Project Milestone 1 due today. Those of you who have questions regarding site mangement, here’s a link to some tutorials which go over the details of setting up your site both locally and remotely:

http://www.macromedia.com/support/dreamweaver/manage.html

Topic covered:
CSS Floats
FTP / Site Mangement

To create the bouncing ball, start a new document in Flash MX. Select the oval tool and draw a circle. To constrain your ball to a perfect circle, hold down the shift key while dragging. You can also choose to select a fill color or gradient to make your ball a little more fancy. After your satisfied, from the Insert menu choose "Convert to Symbol". Make sure you name it and select graphic as the type.

Insert a key frame at frame 10 and another at frame 20 (for a slower bounce try inserting the key frames at 20 and 40). Select the middle key frame and shift+drag the ball to the bottom of the scene. Here you can also adjust the height property of the ball so that it appears to squash down a bit as it strikes the floor.

Now select the 1st key frame and in the properties panel choose "motion" under "Tween" and set the ease to -100. On the middle turn on the motion tween as well and set the ease equal to 100. Hit ctrl+enter to watch the animated ball bounce. When you’re finished please copy your assignment to the drop off drive for credit.

Flash Exercise – The Bouncing Ball
Due Date – 1st Class or Week 5
Total Points – 10

http://www.flashkit.com
http://www.macromedia.com
http://www.macromedia.com/support/flash/
http://www.actionscripts.org

Session 2: Today we’ll be discussing the main Flash project. Below is an outline of the requirements for the project. Please carefully review the assignment. Nest week we will be demonstrating each of the competencies required for this project.

Flash Project – Interactive Flash Animation: "Four Seasons" (4 scenes)
Due Date – 2nd Class of Week 7 (beginning of class)
Total Points – 45

Assignment Overview:
For the "The Four Seasons " project detailed requirements, download the assignment sheet in MS Word format. Using Flash as an interactive tool, you will create a 4 scene interactive animation based on the four seasons. You will create 4 animated landscapes or city scenes representing the seasons of the year. For example, one animated element during the winter scene could be snow falling.

Content Specifics:
Animation Length – 10 second minimum per scene.
Minimum of 4 unique landscape scenes.
Design can be a combination of raster and vector artwork.
Must be your original artwork, including any photos (vacation photos would work great).
Must be fully interactive, navigate to any scene from any scene.
Completed project must be uploaded to your OLS account to be on the WWW

Competencies:
Importing of Digital Images into Flash
Using vector tools within Flash
Using Symbols (Graphics, Movie Clips, & Buttons) within Flash
Use of Motion tween
Use of Motion guides
Use of Shape tweening
Use of Masks
Incorporation of ActionScripting for movie control (Stops & Navigation)
Publishing from Flash
Uploading Flash movies to the web

Overall Use of Flash (scenes, tweens, ActionScripting) – 20 points
Design – 15 points
Use of OLS – 10 points

Flash Samples:
http://analogik.com/multimedia_samorost.asp
2advanced
Adobe Flash Showcase

http://www.pjsattic.com/flash/seasons.htm

Session 2:

New Requirements for the Bouncing Ball Project:
Download the Bouncing Ball Project Requirements in MS Word format

To create the bouncing ball, start a new document in Flash MX. From the insert menu choose “New Symbol”. Call the symbol “Ball1″, check “Movie Clip” and set the registration to the center of the object. Inside the new symbol. Select the oval tool and draw a circle. To constrain your ball to a perfect circle, hold down the shift key while dragging. You can also choose to select a fill color or gradient to make you’re ball a little more fancy. At this stage your ball is a shape and need to be converted to a graphic in order for you to be able to apply motion tweens. Select your shape with the selection tool and from the Insert menu choose “Convert to Symbol”. Make sure you name it and select graphic as the type.

Insert a key frame at frame 20 and another at frame 40 (for a slower bounce try inserting the key frames at 30 and 60). Select the middle key frame and shift+drag the ball to the bottom of the scene. Here you can also adjust the height property of the ball so that it appears to squash down a bit as it strikes the floor.

Now select the 1st key frame and in the properties panel choose “motion” under “Tween” and set the ease to -100. On the middle turn on the motion tween as well and set the ease equal to 100. Hit ctrl+enter to watch the animated ball bounce. After you have added a shadow and sound, duplicate the movie clip and adjust the new movie clips timeline. When you have at least three new Ball movie clips drag them to the stage in the main timeline and test your movie. Publish your movie and put the appropriate files on the server to connect your project to your project portal.

Flash Exercise – The Bouncing Ball
Due Date – Session 1, Week 7
Total Points – 15

The following curriculum is out of sync, please ignore until later in the quarter:

Incorporation of ActionScripting for movie control including stops & navigation is probably the trickiest thing in Flash that we will be doing. However, just a couple of very short scripts are what is needed to accomplish this.

Stops are needed to prevent your movie from looping and give the user a chance to make a choice based on navigation options that have been presented in the piece. The ActionScript command "stop();" can be placed on a keyframe to accomplish this.

stop();

To create navigational behaviors, place ActionSricpts on buttons. Usually the "on" method is used to handle mouse click functionality, such as "release" for mouse button up actions. Apply the following example to navigate to the first frame in a different scene:

on (release) {
    gotoAndPlay("Scene 2",1);
}

1. Remember to convert to symbol (Modify/Convert to Symbol, or F8) before making motion tweens.
2. Use the scale checkbox in the frame properties (next to tween) to apply transform to motion tweens.
3. It’s a good idea to put each shape or symbol on it’s own layer if you before tweening.

Shape Tweens:
Excerpted from the Macromedia Flash MX Help File
1. Click a layer name to make it the current layer, and create or select a keyframe where you want the animation to start.

2. Create or place the artwork for the first frame of the sequence. For best results, the frame should contain only one item (a graphic object or broken-apart group, bitmap, instance, or text block).

3. Select the keyframe in the Timeline.

4. Choose Window > Properties.

5. In the Property inspector, select Shape from the Tween pop-up menu.

6. Drag the arrow next to the Easing value or enter a value to adjust the rate of change between tweened frames. (By default, the rate of change between tweened frames is constant. Easing creates a more natural appearance of transformation by gradually adjusting the rate of change.)

7. Choose an option for Blend: Distributive creates an animation in which the intermediate shapes are smoother and more irregular. Angular creates an animation that preserves apparent corners and straight lines in the intermediate shapes. Note: Angular is appropriate only for blending shapes with sharp corners and straight lines. If the shapes you choose do not have corners, Flash reverts to distributive shape tweening.

8. Create a second keyframe the desired number of frames after the first keyframe.

9. With the second keyframe selected, select the artwork you placed in the first keyframe and do one of the following: Modify the shape, color, or position of the artwork. Delete the artwork and place new artwork in the second keyframe.

Session 2: The last thing we’ll go over in Flash before moving on to our final project is a refresher on how to publish your Flash projects on the internet. Everyone has an account on the OLS which includes at least 5 megabytes of web space. To access your account you can use FTP client software such as RBrowserLite in the Mac labs. Documents you wish to publish on the web need to be copied into the "htdocs" directory, or subdirectories within it.

Make sure you get your project published to your website before Session 2 so we can view them on the web in class. If you’re not absolutely confident on how to do it, make an attempt during lab today and I’ll help any of you who need it.

1. Screen Design (Space, choice of color, readability, image placement, etc.)
2. Content (Who, What, Where, When)
3. Accessibility (Fast Load Times, Browser Compatibility, Easy to Read)
4. Navigation (Title Bar, Headers, Highlighted Navigation Links. Good navigation is like a roadmap, know where you are where you’ve been and where to go next.)
5. Media Use (Graphics help keep users attention and can enhance usability, poor use slows down sites and distract users, Sound, Animation, and Video)
6. Interactivity (e-commerce, feedback, discussions, chat, user customization)
7. Consistency (Page size/page layout, navigation buttons/ images, menus, etc. text – font, font size and color).

Full Webiste – Interactive Website with Flash Elements
Due Date – 1st Class of Week 11
Evaluations – 1st and 2nd Class of Week 11
(5% of final project grade)

Components:
Proposal 25 pts. Due week 8 Class 2
Mockups 10 points. Due 1st Class of Week 9
Beta Version 15 points. Due 1st Class of Week 10
Final site 50 points. Due 1st Class of Week 11
Total Points – 100

Assignment Overview:
Using Dreamweaver and Flash create an interactive website with a minimum of 10 content areas. Universal navigation, text content, images, sound, and motion graphics are required in your site. Sites will be evaluated based on the SCANMIC criteria.

Content Specifics:
- Choose a subject, product or service for your site.
– Content of site must be approved by me.
– Design must be your original work.
– Include at least 2 uses of audio (background/sound effects).
– Include a minimum of 8 photo stills.
– Use a maximum of 3 font styles.
– Incorporate self designed buttons, rollovers, and headers.
– A minimum of 10 pages or content areas are required.
– Content must include text as well as graphics (all image sites are unacceptable).
– Universal navigation is required so users can easily get around your site.
– Links to related websites outside of your project are required.
– Final project must be uploaded to your OLS or comparable account and available on the World Wide Web.

Competencies:
Project planning and organization.
Resource gathering.
Using Symbols (Graphics, Movie Clips, & Buttons) within Flash
incorporation of ActionScripting for movie control (Stops & Navigation)
Publishing from Flash
Uploading Flash movies to the web
Processing of Digital Images into a web format
Using Dreamweaver to create html documents
Creating tables within Dreamweaver
Creation of consistent navigation systems.
Creating relative links for navigation and hard links for linking outside your site
Linking to an email address
Targeting links to different areas
Publishing a website to the WWW

Grading Standards:
Completion of the project by the required deadline does not guarantee a passing grade. Your project must demonstrate the knowledge of the project competencies and a moderate level of design detail.

Schedule / Points Breakdown:
2nd Class of Week 8 – Paper copy of the proposal is due (25 points).
1st Class of Week 9 – Mockups required for feedback (10 points).
1st Class of Week 10 – Beta version due for review (15 points).
Week 11 – Final Project Due 1st Class of Week 11 (50 points).
Week 11 – Evaluations: Session 1 / Session 2 (5% of Final Project grade).

Session 2: A very important part of building interactive media projects is the planning stage. Let’s discuss each of the components required for our design documents (often called development plan) for your final project. Here’s a list of components generally included in this type of document:

1. Title page (Title, Author, Table of Contents, etc.)
2. Summary/Overview (A brief summary of what the project does and what it’s for, etc.)
3 . Feature Lists/Requirements (A list of the features with brief descriptions)
4 . Flow Charts (Represent each unique screen of the project with a shape connected via navigation)*
5 . Screen Schematics (Simple pages shown with wire frame boxes for nav buttons, and images. Also include notes describing the purpose of each screen.)
6. Proposal/Bid in hours (time per pages, etc.)

Seasons Project Milestone:
1. Have at least one type of tween in you project
2. Have two working examples of ActionScript navigation

Session 2: Please don’t forget to hand in your printed design documents today. Let’s continue working on our mockups. Mockups are fully designed layouts which we will later convert into templates for our websites. We should create a mimum of three uniques designs for one page. Out of the three designs we will choose the best and use it as a consistent template for the rest of the site.

Session 2: Let’s look at importing flash content into HTML documents.

Session 2: Today is the last chance to get my feedback on your final projects and work out any difficulties you may be having.

Session 2: Evaluations.

Recording to the Fostex FR-2LE
1. Install four AA batteries or connect the unit to an AC outlet using the power adapter.
2. Flip the power switch up and release it to turn on the unit.
3. If the compact flash card needs formatting follow these steps (all data on the card will be lost).
    a) Navigate in the menu to “Disk > Format”
    b) Use +/- to move to “FS/BIT Mode”
    c) Choose “BWF44/16″ for CD quality
    d) Set the “Track Mode” to either mono or stereo
    e) Choose “[EXECUTE]” and press MENU / ENTER
    f) Choose “[EXECUTE]” again and press MENU / ENTER again

4. Plug your Mic(s) into the Analog in XLR jacks on the left side of the unit.
5. If you are using a condenser microphone that requires phantom power in the menu go to “Setup > Phantom” and set it to “On”.
6. Press the grey “REC STBY” (record standby) button to prepare for recording and check your levels.
7. Use the “MIC TRIM” knobs to adjust your levels.
8. Press the red “REC” (record) button to start recording, “REC STBY” to pause, or “STOP/CANCEL” to stop.

Transferring Your Recording to a Computer
1. Connect a USB cable from the unit to a compter
2. In the MENU go to “USB Mode > USB Device Mode”
3. Drag and drop your recording to the hard drive on the computer
4. You can now import your recordings into Protools.

Students develop and refine basic programming skills. Emphasis is placed on programming concepts including logic, problem solving, process flow and flowcharting, syntax and structures, and debugging and troubleshooting. Students will acquire skills needed to design, develop, and produce practical interactive applications. (Course Prerequisite: IM1480 Fundamentals of Interactive Design) Note: WDIM students must earn a C or better to pass this capstone course.

Instructor: John Keston

Meeting Times and Location Section (M/W):
Session 1 / Session 2
M/W 2pm – 5pm (with appropriate breaks), Room P108, Pence building

Syllabus: IM2420 Fundamentals of Scripting
Textbook: HTML, XHTML & CSS (6th edition) Visual Quickstart Guide by Elizabeth Castro

Week 1 | Week 2 | Week 3 | Week 4 | Week 5 | Week 6
Week 7 | Week 8 | Week 9 | Week 10 | Week 11

1. Use a typeface other than the default.
2. Include some content besides day numbers (i.e. holidays, etc.).
3. Create borders without using the table border attribute.
4. Create navigation to get to every month from any month.
5. Use background images in some of the cells.
6. Use background colors to enhance your design.
7. Upload to the OLS or comparable hosting.
8. Place internet shortcut to your project on the dropoff drive under “John Keston:IM2420:<your name>:Calendar URL”.

This assignment is due Week 2, Session 2. Here are some tag definitions and example tags to work from. Remember to use the resources linked below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Basic Tags and Attributes</title>
Body Tag and Attributes:
<body bgcolor="#ffffff" background="image.jpg" link="#ff0000"
vlink="#cc6633" alink="#cccccc">All page content goes here</body>

HTML Comment:
<!-- Type your comments here -->

Headings, etc:
<h1>Heading</h1>
<h2>Subheading</h2>
<h3>Subheading</h3>
<h4>Subheading</h4>
<h5>Subheading</h5>
<h6>Subheading</h6>
<center>Centered Information</center>
<p>Paragraph</p>
<b>Bold</b>
<i>Italic</i>
<u>Underline</u> (Can be mistaken for a link)
<br />Line break

<!-- Typefaces are usually managed with styles -->
<font face="Arial, Helvetica, sans-serif" color="red" size="1">
Font Attributes</font>

Ordered Lists:
<ol type="1, A, a, I, i">
<li>list items</li>
<li>list items</li>
</ol>

Unordered Lists:
<ul type="circle, square, disc">
<li>list items</li>
<li>list items</li>
</ul>

Image Tag and Paths:
<img src="images/mugshot1.jpg" width="150" height="75" border="0"
 alt="Click Here to Contact Us" lowsrc="lowimage.gif">

Relative Link:
<a href="contact/contact_list.html">click here to view contacts</a>

Internal Link or Anchor:
<a name="linkname">Top of Page</a>
<!-- Page Content --->
<a href="#linkname">Click here to go to the top</a>

Absolute or Hard Link:
<a href="http://www.startribune.com/news">click here</a>

Table Tags and Attributes:
<table width="600" height="300" border="0" bgcolor="#FFFFFF"
cellspacing="1" cellpadding="1">
<tr>
<td align="left, right, center" valign="top, middle, bottom"
bgcolor="" colspan="" rowspan="">info</td>
<td align="left, right, center" valign="top, middle, bottom"
bgcolor="" colspan="" rowspan="">info</td>
</tr>
</table>

Required Reading:
Reading from Textbook: Introduction and Chapter 1 (pages 13-42), Skim chapters 2,3,4 (pages 43-79)
Online reading: Authoring: HTML Basics

Resources:
HTML Cheat Sheet (an excellent html resource)
www.webmonkey.com (a comprehensive web development resource)

Session 2: Today we will be looking more carefully at tables to organize information in a grid, like a calendar. We will also cover some techniques on how to trick tables into being more flexible like using bgcolor and cellspacing to create a border, or using “colspan” within your table data cells to merge cells without days in the beginning and end of months (i.e. <td colpsan="4">&nbsp;</td>). Try adding images and/or text for holidays or birthdays. Also, use “width” and “height” attributes to line up the calendar days. Here’s an example month:

<table width="100%" height="100%">
<tr>
<th width="14%">Sunday</th>
<th width="14%">Monday</th>
<th width="14%">Tuesday</th>
<th width="14%">Wednesday</th>
<th width="14%">Thursday</th>
<th width="14%">Friday</th>
<th width="14%">Saturday</th>
</tr>
<tr bgcolor="#999999" height="20%">
<td colspan="2"> </td>
<td valign="top">1</td>
<td valign="top">2</td>
<td valign="top">3</td>
<td valign="top">4</td>
<td valign="top">5</td>
</tr>
<tr bgcolor="#999999" valign="top" height="20%">
<td>5</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td>
</tr>
<tr bgcolor="#999999" valign="top" height="20%"><td>13</td><td>14</td><td>15</td>
<td>16</td><td>17</td><td>18</td><td>19</td>
</tr>
<tr bgcolor="#999999" valign="top" height="20%">
<td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td>
</tr>
<tr bgcolor="#999999" valign="top" height="20%">
<td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td colspan="2"> </td>
</tr>
</table>

Note: The use of HTML escape sequences such as &nbsp; allows you to place special characters into your HTML documents. Less than (“<") and greater than (">“) symbols would not be available without using an escape sequence. View the link below for a complete list of HTML escape sequences.

HTML Escape Sequences

Download: IM2420 Problem Set 1
1. All IM2420 problems are due by the beginning of class on the next day that the class meets.
2. Answers must be available via links on the OLS or comparable hosting and copied to the drop off drive.
3. Solutions to each problem set will be given during demonstrations on the day that they are due.
4. Grades will be collected during the solution demonstrations by an assigned classmate.

Stylesheets (technically Cascading Stylesheets), or CSS allow web developers much more control over the look of their web pages than with HTML alone. They make it possible to define styles globally for a site, eliminating the need for repetitive font tags, color tags, alignment attributes and so on. This creates better organization by separating form from structure. Sytlesheets are a critical tool for any web developer and make creating sites infinitely faster and easier, once you’ve learned how to use them.There are four ways to include styles in your HTML documents.

1. Local or Inline is right inside a tag and overrides other definitions. Example: <h1 style="color: orange; font-size: 18pt; font-family: Verdana, sans-serif">This is an INLINE style</h1>

This is an INLINE style

2. Global or Embedded. A better solution is to include the style definitions in a style tag otherwise known as by using the global (embedded) technique. Like this example:

<html>
<head>
<title>Style Demo Page 1</title>
<style type="text/css">
<!--
h1 { color: red; font-size: 24px; font-family: arial }
p { text-indent: 1cm; background: #eeeeee; font-family: courier }
td { font-family: arial }
b, i { color: green; font-size: 20px }
-->
</style>
</head>
<body>
<h1>TEST</h1>
<p>Hello World</p>
<table>
<tr><td>I'm in a TD tag with no font tag</td></tr>
</table>
<b>bold. <u>underline</u> within bold (no style)</b><br />
<i>italics</i>
</body>
</html>

3. Linked stylesheets are even better because they allow you to define the styles for an entire website once, then when you modify the stylesheet the changes take effect over the entire site, or wherever the stylesheet is linked. Here’s how you link a stylesheet:

<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" href="/im2420/my_styles.css" type="text/css">
</head>
<body>
<h1>TEST</h1>
</body>
</html>

and here’s what the stylesheet document (my_styles.css) looks like:

/* CSS Document */
h1 { color: red; font-size: 24px; font-family: arial }
p { text-indent: 1cm; background: #eeeeee; font-family: courier }
td { font-family: arial }
b, i { color: green; font-size: 20px }

4. Imported stylesheet go within a style tag, thus allowing you to include other global styles which will override what’s imported. In the following example the h1 definition will override the h1 definition found in my_styles.css:

<STYLE TYPE="text/css">
<!--
@import url(my_styles.css);
h1 { color: #FF00FF; font-family: impact }
textarea { text-transform: uppercase }
-->
</STYLE>

Click any of the following links to view the examples we looked at in class:
style_demo0.html
style_demo1.html
style_demo2.html
style_demo3.html

Reading assignment: Stylesheets are extremely powerful and critical to creating useable, consistent and accessible sites. Please take the time to read the following tutorial and checkout other resources so you can take advantage of these techniques in your projects (note: using stylesheets is a requirement in all subsequent projects).
Web Monkey Stylesheet Tutorial (Getting Started)
W3Schools CSS Reference
Brainjar CSS Positioning Tutorial
Selectutorial – CSS selectors

Session 2: By the end of lab today your calendars are due. A good set of guidelines to follow for web development are the SCANMIC Usability Criteria. Read the the reading assignment linked below to gain a full understanding of the SCANMIC principals. Here’s a quick outline of each of the criteria:

1. Screen Design (Space, choice of color, readability, image placement, etc.)
2. Content (Who, What, Where, When)
3. Accessibility (Fast Load Times, Browser Compatibility, Easy to Read)
4. Navigation (Title Bar, Headers, Highlighted Navigation Links. Good navigation is like a roadmap, know where you are where you’ve been and where to go next.)
5. Media Use (Graphics help keep users attention and can enhance usability, poor use slows down sites and distract users, Sound, Animation, and Video)
6. Interactivity (e-commerce, feedback, discussions, chat, user customization)
7. Consistency (Page size/page layout, navigation buttons/ images, menus, etc. text – font, font size and color).

Assignment: As a first project utilizing CSS let’s create single page with the layout, images and type all formatted with CSS. Write the content for your web page as a critique of a website that you consider a bad design. Create a one or two page web based evaluation of the website outlining how your example site does not adequately apply the usability points above. The site you evaluate must be accessible over the internet and shouldn’t be too high profile or contain inappropriate materials. Make sure you include links to the pages that you’re evaluating in your web document also include images to illustrate your points. Links to your evaluations will be due on the drop off drive by Session 1, Week 4.

SCANMIC Evaluation Project Requirements
1. Select a poorly designed “under the radar” website to evaluate.
2. Write a paragraph or two of content for each of the seven SCANMIC points.
3. Create anchors with navigation to each point from the top of the page.
4. Use a linked or imported custom CSS document to format the type and images.
5. Link your evaluation on the drop off drive by Session 1, Week 4.

Student Example:
http://www.daneray.com/fundsl/scanmic/scanmic.html

Reading Assignment (PDF):
Identifying Web Usability Criteria

Download: IM2420 Problem Set 2
1. All IM2420 problems are due by the beginning of class on the next day that the class meets.
2. Answers must be available via links on the OLS or comparable hosting and copied to the drop off drive.
3. Solutions to each problem set will be given during demonstrations on the day that they are due.
4. Grades will be collected during the solution demonstrations by an assigned classmate.

<a name="top">This is the top of the page</a>
.
.
.
<a href="#top">Go to the top of the page</a>

Link targeting is most commonly used to open the content of a link in a new browser window or tab. This can be achieved by using the “target” attribute and setting the value to blank (i.e. <a href="http://www.external-site.com" target="_blank">External Link</a>).

Targeting is also required to load content into specific frames. I do not recommend the use of frames, but it is still important to understand how they work. Jakob Neilsen, a prominent usability expert, cited “Using Frames” among the top ten mistakes in web design. However, there are rare instances of when frames (generally iframes are preferable) can help solve specific problems. This example shows how a basic frame set behaves.

Frame Attributes and Targeting:

<frameset rows="100,*,100" frameborder="yes,no">
<frame src="doc1.html" name="top" scrolling="yes,no,auto">
<frameset cols="*,*" frameborder="yes,no">
<frame src="doc2.html" name="middle_left" scrolling="yes,no,auto">
<frame src="doc3.html" name="middle_right" scrolling="yes,no,auto">
</frameset>
<frame src="doc4.html" name="bottom" scrolling="yes,no,auto">
</frameset>

Targeting Links:

<a href="link.html" target="name">    - Opens in a specific frame
<a href="link.html" target="_blank">  - Opens in a new window or tab
<a href="link.html" target="_self">   - Opens within its own frame
<a href="link.html" target="_top">    - Current browser window
<a href="link.html" target="_parent"> - Opens in its outer frameset

Session 2: Now we are going to take a closer look at CSS positioning. CSS can be used to format type, but also be used to position and style <div> layers or containers. Just like HTML tables, CSS positioning can be used to arrange content within the browser. CSS positioning also offers some advantages over the traditional table method; primarily that the content can be separated from the layout to provide better site maintenance and accessibility.

CSS vs Tables for Layout
CSS Zen Garden

For the next exercise the content has been provided in a word document. It includes some information about cycling collected from wikipedia. It’s your job to design a set of six pages using the text content provided. Create a consistent design scheme that incorporates images, navigation and type treatments using CSS styles and positioning. The use of tables for this exercise is not allowed. The requirements and a link to the content follows:

CSS Positioning Exercise
1. Organize the content provided into six pages
2. Create a consistent design scheme
3. Include navigation on each page to all the pages
4. Incorporate images into each page
5. Format type, images and the positioning of the content with CSS
6. Each piece of content (including images) should be contained in a <div> layer/container
7. Use of HTML tables is prohibited
8. Due before class on Session 2 of Week 5

Content for the CSS Positioning Exercise
Sample CSS Page Layouts – Step by step tutorial from Max Design
CSS Layout Techniques – Great tutorial on “no tables” layout
Student Example of CSS Positioning Exercise

Session 1: Today we will look at a variety of CSS layouts starting with a simple two column, fluid layout with a banner that spans both columns (see code example below). We will also examine 3 column layouts and static width layouts.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CSS Layout Example</title>
<style type="text/css">
<!--
#banner {
    margin: 10px auto 0px auto;
	width: 80%;
	border: #cccccc solid 1px;
	padding: 3px;
}
#container {
    padding: 3px;
    margin: 0px auto 0px auto;
	width: 80%;
	border: #cccccc solid;
	border-width: 0px 1px 1px 1px;
	clear: left;
	overflow: hidden;
}
#left_sidebar {
    padding: 3px;
	border: #cccccc solid;
	border-width: 0px 1px 0px 0px;
    float: left;
	width: 30%;
	margin-right: 5px;
}
#main_content {
    padding: 3px;
}
-->
</style>
</head>
<body>
<div id="banner">Content for id "banner" Goes Here</div>
<div id="container">
  <div id="left_sidebar">
  1. left_sidebar content<br />
  2. left_sidebar content<br />
  3. left_sidebar content<br />
  4. left_sidebar content<br />
  5. left_sidebar content<br />
  6. left_sidebar content<br />
  7. left_sidebar content
  </div>
  <div id="main_content">
Praesent ut nulla. Sed tellus magna, tempor sit amet, pulvinar eu,
dignissim sit amet, purus. Phasellus ultrices massa sed metus. Nulla
scelerisque, metus a ultricies blandit, nisi arcu lacinia orci, et
posuere urna lacus bibendum turpis. Maecenas nibh nulla, cursus in,
pulvinar eu, dictum quis, neque. Curabitur ac purus a ipsum ultrices
consequat. Aliquam sed velit sit amet diam mattis aliquet.
<br /><br />
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Sed bibendum molestie tortor. Sed ut nunc.
Maecenas purus felis, scelerisque id, egestas ut, pretium et, nulla.
Nunc nisl arcu, vulputate et, feugiat non, luctus eu, justo. Quisque
rhoncus. Mauris dapibus orci non dui. Mauris lobortis. Aenean
gravida pede a justo.
  </div>
</div>
</body>
</html>

Useful CSS navigation resource:
http://css.maxdesign.com.au/listamatic/

Technique to create tiled backgrounds:
How to Turn a Texture into a Seamlessly Tiled Background

Session 2: Today we will be covering the next assignment which involves creating an interactive XHTML form. There are several parts to this assignment that we will work on sequentially:

1. This week we will start by creating the form and layout using XHTML and CSS.
2. Next we will use some simple Javascript to help validate the input from the user.
3. Thirdly we will will use server side scripting to process the information and email it to ourselves.

Here’s a very basic tableless form formatted with CSS:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Form Demo</title>
<style type="text/css">
<!--
input {
	display: block;
	width: 150px;
	float: left;
	margin-bottom: 10px;
}
label {
	display: block;
	text-align: right;
	float: left;
	width: 80px;
	padding-right: 5px;
	margin-bottom: 10px;
}

br {
	clear: left;
}
-->
</style>
</head>
<body>
<form action="mailto:test@email.com" method="post">
  <label for="first_name">First Name:</label>
  <input id="first_name" name="first_name" type="text" />
  <br />
  <label for="last_name">Last Name:</label>
  <input id="last_name" name="last_name" type="text" />
  <br />
  <label for="email">Email:</label>
  <input id="Email" name="last_name" type="text" />
  <br />
</form>
</body>
</html>

The following resource illustrates how forms can be put into horizontal, vertical, columnar, and other formats using CSS with fieldset, label, and legend tags:

http://www.themaninblue.com/experiment/InForm/
CSS-Based Forms: Modern Solutions

Form Demo

Once we have looked carefully at the form I will demonstrate how to use Javascript to pre-validate the input from the user. Javascript validation is a useful way to prevent users from leaving out required information from the form. However, server-side validation is also necessary in case Javascript has been disabled in the browser.

Reading:
Introduction to Javascript

Also, if you are looking for more ideas on form layout. Have a look at this list hosted on Smashing Magazine:

CSS-Based Forms: Modern Solutions

Session 2: Today we will start looking at the server-side scripting necessary in order to make our Interactive Form project handle the data entered by users. The language we will be using to do this is PHP. One of the best resources for PHP is php.net.

Interactive Form Project Requirements:
Create an interactive form designed to collect information from users, validate that required information has been entered, process the information, and send an email to yourself containing the user input. The form must be designed well using XHTML and CSS positioning. No table layout is acceptable.

1. The form must contain a minimum of ten input fields.
2. Use of text fields, check boxes, radio buttons, select lists, and text areas are required.
3. Design the form with XHTML and CSS (no table layouts).
4. Validate required fields with both Javascript and PHP.
5. Process the user input on the server side using PHP.
6. Automatically email the formatted data to your email address.
7. Due on Session 2, Week 7.

In order to validate the information efficiently it is important to make sure that the form itself is a PHP document. PHP documents may be a combination of HTML, Javascript, CSS and PHP. In this case it is mostly XHTML, but take note of the PHP instructions dispersed throughout this example:

<form action="<?php echo $_SERVER[PHP_SELF] ?>" method="post" name="form_demo" onSubmit="return validate_form('Form Demo');">
  <h3>Personal Information</h3>
  <fieldset>
  <label class="field-first">First Name*
  <input type="text" name="first_name" value="<?php echo $_POST[first_name] ?>" />
  </label>
  <label class="field-last">Last Name*
  <input type="text" name="last_name" value="<?php echo $_POST[last_name] ?>" />
  </label>
  <label class="field-address">Home Address*
  <input type="text" name="address" value="<?php echo $_POST[address] ?>" />
  </label>
  <label class="field-city">City*
  <input type="text" name="city" value="<?php echo $_POST[city] ?>" />
  </label>
  <label class="field-state">State*
  <select name="state">
    <option value="MN">MN</option>
    <option value="WI">WI</option>
    <option value="IO">IO</option>
    <option value="IL">IL</option>
    <option value="MI">MI</option>
  </select>
  </label>
  <label class="field-postal">Postal Code*
  <input type="text" name="postal" value="<?php echo $_POST[postal] ?>" />
  </label>
  <br style="clear: left;" />
  <label class="field-email">Email*
  <input type="text" name="email" value="<?php echo $_POST[email] ?>" />
  </label>
  <label class="field-phone">Phone
  <input type="text" name="phone" value="<?php echo $_POST[phone] ?>" />
  </label>
  </fieldset>
  <h3>How often do you eat sushi?</h3>
  <fieldset>
  <label class="radioitem" for="radiobutton1"><input id="radiobutton1" type="radio" name="sushi" value="Raw fish? Gross!" />Raw fish? Gross!</label>
  <label class="radioitem" for="radiobutton2"><input id="radiobutton2" type="radio" name="sushi" value="" />Once in a while</label>
  <label class="radioitem" for="radiobutton3"><input id="radiobutton3" type="radio" name="sushi" value="" />Every payday</label>
  <label class="radioitem" for="radiobutton4"><input id="radiobutton4" type="radio" name="sushi" value="" />Breakfast, lunch, AND dinner</label>
  </fieldset>
  <h3>I have never tried...</h3>
  <fieldset>
  <label for="checkbox1" class="field-checkbox"><input id="checkbox1" type="checkbox" name="never[]" value="Spelunking" />Spelunking</label>
  <label for="checkbox2" class="field-checkbox"><input id="checkbox2" type="checkbox" name="never[]" value="Exotic Travel" />Exotic Travel</label>
  <label for="checkbox3" class="field-checkbox"><input id="checkbox3" type="checkbox" name="never[]" value="Scuba Diving" />Scuba Diving</label>
  </fieldset>
  <h3>Comments</h3>
  <fieldset>
  <label class="field-routine">What's your morning routine?<br /><textarea name="routine" cols="40" rows="5"></textarea></label>
  </fieldset>
  <h3>Send</h3>
  <fieldset>
  <label>Click "Send" to post your information</label>
  <input type="submit" name="submit" value="Send" />
  <input type="hidden" name="submitted" value="true" />
  </fieldset>
</form>

Session 2: The next step in completing our form project involves creating the logic necessary to process the data entered into the form by the user. The code I’ll be demonstrating today will perform several tasks using PHP.

1. We’ll use a PHP include in the form to perform the tasks
2. The first tasks performed will be to validate the data entered into the form
3. The data will be processed to prevent harmful header injection attacks
4. An email will be sent containing all the processed data from the form entry
5. Adequate feedback will be provided for the user as a response message

Take a look at this function that we will be using to validate form input for email addresses:

	function is_valid_email($email) {
		$result = true;
		$pattern = '/^([a-z0-9])(([-a-z0-9._])*([a-z0-9]))*\@([a-z0-9])' .
'(([a-z0-9-])*([a-z0-9]))+' . '(\.([a-z0-9])([-a-z0-9_-])?([a-z0-9])+)+$/i';
		if(!preg_match($pattern, $email)) {
			$result = false;
		}
		return $result;
	}

1. You are not reinventing the wheel
2. Browser compatibility in built into most frameworks
3. Large development and support communities surround the projects
4. Security exploits are quickly found and resolved by the developer community

Reading Assignment:
How jQuery Works
jQuery vs. MooTools

Sessione 2: Today we will be discussing the requirements for the next project as well as having a look at your form projects.

Javascript Framework Project:
In this project we will be using a Javascript framework called JQuery to add functionality beyond what is possible with XHTML and CSS alone. Due on session 2 of week 8.

1. Use JQuery to animate hidden content into view
2. Integrate JQuery animation techniques to text navigation
3. Apply one or more tutorials from http://docs.jquery.com/Tutorials under one of the following headings:
    a) General Tutorials
    b) Manipulation, Attributes, and CSS
    c) Traversing and Selectors
    d) Using jQuery with…

http://wayfarerweb.com/animate-example.php

Session 2: After discussing the final project requirements we will look at your JQuery exercises.

Final Project Requirements:
The final project we are producing for this class involves creating a web application with a minimum of six content areas. The site content must be formatted using XHTML and CSS. It is also required that the site use behaviors included in the JQuery Javascript framework.

Final Web Application Content:
1. Portfolio sites are not acceptable
2. Create something that might be suited for your portfolio
3. Sites for organizations or businesses work well
4. Informational sites are also acceptable (FAQ, etc.)

Final Web Application Requirements:
1. You must include a minimum of 6 content areas
2. All content must be formatted with XHTML and CSS
3. It is required that the JQuery Javascript framework is used for animations, etc.
4. Use JQuery to animate hidden content into view
5. Apply one or more tutorials from http://docs.jquery.com/Tutorials under one of the following headings:
    a) General Tutorials
    b) Manipulation, Attributes, and CSS
    c) Traversing and Selectors
    d) Using jQuery with…
    e) Interface
6. You may use Flash if necessary, however, all Flash sites are unacceptable for this project

Final Web Application Evaluation:
1. All requirements must be met to achieve a passing grade on the final
2. The SCANMIC criteria will be used to evaluate the design and functionality

Mockup Milestone:
Two mockups of one page design are required for in class critiques on Session 2, Week 9
1. Create a minimum of two mockups of a single page that contains a typical amount of content
2. No mockups of splash pages!
3. Try changing navigation, typefaces, layout, color schemes and/or logos
4. Acceptable formats include: jpg, gif, png, pdf, html
5. Presenting your mockups in class earns you 5% of the points for the final project
6. Place your mockups in a folder under your name on the drop off drive before class on session 2, week 9 (next session).

Session 2: Today we will be reviewing everyone’s mockups in class. This is a group participation project that will last most of the session due to the size of the class.

Session 2: Let try to continue to get a better understanding of how jQuery works and apply it to our finals.

Prototype Milestone
Today I would like to see a working prototype of your final project.

1. Include working navigation to a minimum of three pages
2. Demonstrate the use of CSS in your layout
3. Discuss how you intent to use Javascript behaviors in your site

Session 2: Take final exam. No late work will be accepted after this date. I hope you all enjoyed this class. Thanks, and have a good break!

This course is designed to introduce students to the world of computers through lecture and laboratory sessions. Lectures will introduce the conceptual framework of computer systems and how they work, as well as implications of computer technology in our contemporary environment. The laboratory sessions will provide hand skills on a specific computer system and will teach functions within a computer environment to complete projects.

Instructor: John Keston

Meeting Times and Location Section M2 (T/R):
Session 1 / Session 2
T/R 8am-11am (with appropriate breaks), Room 108, Pence Building.

Syllabus: GD1400 Computer Applications

Session 2: Email. What it is? When did it start (1965)? How has it evolved? Email / Online etiquette.

Email Assignment (5 points)
Due Session 2, Week 1
1. Setup a Gmail account.
2. Forward your OLS email to Gmail.
3. Choose a theme.
4. Add contacts.
5. Create labels.
6. Create an email filter.

Reading: http://en.wikipedia.org/wiki/Email

Sharing Part 1 – Email and Contacts (5 points)

Setup a Gmail account and add the email address jck362@gmail.com to your contacts. Send an email to jck362@gmail.com so I can add you as a contact as well. Add two or three other contacts as well. Use the OLS preferences page (http://stu.aii.edu) to forward your OLS emails to your Gmail account. Choose one of the available themes for your Gmail account. Create one or more labels and filter specific messages into your filter.

Sharing Part 2 – Text Documents (10 points)

Using Google Docs create a document that contains definitions for all of the computer terms in the assignment sheet. Use a search engine like Wikipedia, Google, or Yahoo to find short and concise definitions. Paste the definitions into your document. Once it is complete. Share the document with me (jck362@gmail.com) using the sharing option in Google Docs.

For complete instructions download the following word document:
GD1400 Sharing Exercise (15 points)

Session 2: Spreadsheet applications have been available since the dawn of the personal computer. VisiCalc (the Apple IIs killer app) is considered the first example of commercially available spreadsheet software for personal computers. Spreadsheets may contain rows and columns of data, or lists of contact information. It might include formulas to make calculations such as averages, or sums. They are often used for financial information because one change in the document can automatically trigger a recalculation of all the formulas with it. Other uses include grading students, compiling survey figures, sales data, invoices, budget plans, and expense reports. A recent development is the emergence of web-based spreadsheets, which allow for strong multi-user collaboration features.

For complete instructions download the following word document:
GD1400 Spreadsheet Exercise (15 points)

Session 2: Intro to Photoshop filters.

Image manipulation has become commonplace in our industry and society in general. Print, television and, interactive media all rely on techniques made possible with image processing applications like Photoshop. Photoshop is intended for processing bitmap images versus another type of imagery called vectors that we will be examining as well. In this assignment we will be using filters to create a grid of four filtered images in the spirit of Andy Warhol’s Marilyn portraits.

Warhol Assignment (15 points)
Due Session 2, Week 4

For complete instructions download the following word document:
GD1400 Warhol Assignment (Photoshop Filters)

Use a digital camera to shoot a minimum of twelve photographs. Choose a theme for your photos like buildings, people, animals, objects, or textures. Be creative. Shoot photos in both portrait and landscape modes. Process each photograph in Photoshop to prepare the images for use in a presentation. Crop and resize all you photo and use at least one example of each of the following techniques: convert to black and white (grayscale), convert to duotone (i.e. sepia tone), brightness/contrast, hue/saturation, and invert.

For complete instructions download the following Word document:
Photo Manipulation and Slideshow Presentation

Session 2: Use PowerPoint to create a twelve-panel slideshow presentation of your processed photographs. Each slide must include the photo, a title for the photo and a short description. Experiment with different layout techniques for each slide. Apply transitions between slides to learn how to apply transitions, and then never do it again. Transitions should be used sparingly so as not to distract your audience.

To keep things in perspective, the following article explains the dangers of using PowerPoint, or similar applications for presentations.
PowerPoint Is Evil By Edward Tufte

Bouncing Ball Example

For complete instructions download the following Word document:
Bouncing Ball Assignment (Adobe Flash)

Session 2: Today I’ll be demonstrating exactly how to create a bouncing ball in Flash. To create the bouncing ball, start a new document in Flash. Select the oval tool and draw a circle. To constrain your ball to a perfect circle, hold down the shift key while dragging. You can also choose to select a fill color or gradient to make your ball a little more fancy. After your satisfied, from the Insert menu choose “Convert to Symbol”. Make sure you name it and select graphic as the type.

Insert a key frame at frame 10 and another at frame 20 (for a slower bounce try inserting the key frames at 20 and 40). Select the middle key frame and shift+drag the ball to the bottom of the scene. Here you can also adjust the height property of the ball so that it appears to squash down a bit as it strikes the floor.

Now select the 1st key frame and in the properties panel choose “motion” under “Tween” and set the ease to -100. On the middle turn on the motion tween as well and set the ease equal to 100. Hit ctrl+enter to watch the animated ball bounce. When you’re finished please email a copy your assignment to jck362@gmail.com.

For complete instructions download the following Word document:
Shape Tween Logo Assignment (Adobe Flash)

Session 2: Adobe Illustrator can be used for more deliberate techniques. The principal difference between Photoshop and Illustrator is the concept of bitmap versus vector graphics. Vector graphics have a distinct advantage of bitmap images for logo designs because of the ability to print or display at any size without seeing any loss of detail, like you would with a bitmap image.

The next assignment involves creating a set of five vector based logos using Illustrator. For your first logo, use the same technique we used for the Flash logo, then save if from Flash as an Illustrator file and place it in your project. For the rest of the logos make them out of a group of letters and use a different font for each logo. Place all five logos in the same document one after another and align them on the page. Experiment with the kerning, tracking, and type treatments. Use transform and drawing tools to manipulate several of the logos. Use the create outlines function to convert the type into vector shapes. Ungroup your shape to manipulate individual letters using the white arrow tool, scale, and transform tool.

For complete instructions download the following Word document:
Illustrator Logos Project

Session 2: Today we will start working on our first project that involves using the web server space that we all have available through the school on the OLS system. The Internet is a vast and complex network that includes the World Wide Web. A simple way to imagine the Web is as a delivery platform. Postal services deliver physical packages to geographical locations. The Web delivers electronic packages to and from computers all over the world. These data packages are reassembled into files made up of text, images, video, sound, and interactive content. In the next project we will make some of our own content available on a web page including a thumbnail link to a full sized image, text, and links.

For complete instructions download the following Word document:
Assignment 9: Simple Web Page

For complete instructions download the following word document:
Assignment 10: Final Web Site

Session 2: Today I’ll be demonstrating how to design a web page using tables. As we begin designing the final web site, keep in mind areas of the screen needed for design elements, navigation, and content.

Final Project Milestone 1:
1. Demonstrate how to set document properties in Dreamweaver
2. Show an example of a table centered with content and background colors
3. All text content must be set to a typeface other than the default

Session 2: Today I’ll be reviewing how to upload your content to the OLS server. We will also be reviewing your projects to make sure you are meeting the second milestone requirements (listed below).

Final Project Milestone 2:
1. Have a minimum of two pages completed
2. Be prepared to illustrate your navigation functioning on two pages
3. Show two examples of your content uploaded to your OLS account

Session 2: Today is the third and last of our project milestones. It’s also the last opportunity to get feedback on your final project. For milestone number three we are expecting you to have all five of your pages uploaded to the OLS as well as your navigation and Flash animation all working properly.

Project Milestone 3:
1. It’s recommended that you have you site completed and ready for final feedback
2. All five pages of your final website must be uploaded to the OLS
3. Navigation must complete and work from each page to every other page
4. The Flash bouncing ball animation must function properly on the Animation page

Session 2: Final Web Site presentations continued.

IM2420 Fall Quarter 2009 Examples