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:
Session 1 / Session 2
Room 013 3:00pm - 3:50pm
Room 231 4:00pm - 5:50pm

Syllabus: im4420syllabus.doc

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

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.

aim.aiiresources.com
www.audiocookbook.org
www.opensourcecms.com
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.

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.

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 M1 (T/R):
Session 1 / Session 2
Room 009 11:00am - 11:50am
Room 233 12:00pm - 1:50pm

Meeting Times and Location Section M2 (F):
Session 1 / Session 2
Room 009 8:00am - 8:50pm / 11:00am - 11:50am
Room 233 9:00am - 10:50pm / 12:00pm 1:50pm

Syllabus: ca2431syllabus.doc
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

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)

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." " );
        }
    }
?>

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.

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 MySpace and e-commerce sites like eBay, Amazon and iTunes have changed the way our society operates. Beyond email and IM, 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 could create any web 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 organisations or 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: Work day.

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 ProTools 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 ProTools. I will be demonstrating this process in the lab.

Once you’ve converted your track, use ProTools 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.

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 ProTools 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.

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 ProTools 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 ProTools
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 ProTools
8. Press “Record” and then “Play” on the transport in ProTools 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 ProTools 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 ProTools. 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 ProTools. 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
ProTools - www.digidesign.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.

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: 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.
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. Turn in your project on CD or DVD and include the screen shots.
12. Use mastering techniques to finalize your mix.
13. 5% of grade is awarded for presenting your projects in class.

Option 2: 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.
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. Turn in your project on CD or DVD and include the screen shots.
11. Use mastering techniques to finalize your mix.
12. 5% of grade is awarded for presenting your work 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

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

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.

Wikipedia MIDI Resources

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. 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.
2. Add a 14 channel mixer device in Reason (Create > Mixer).
3. Create instruments for each of the tracks in your MIDI file.

4. Assign the instruments to each track in the MIDI file (shown in demo).
5. You can create multiple instances of the same device, but do not assign the same instance to more than one track because conflicts can occur in the controller data.
6. Render your document to an audio file named midi_exercise1.wav and copy it to the drop off under John Keston/ca2431/<your name>.

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.

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.

Mastering FAQ

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.

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 (Friday):
Session 1 / Session 2
Room P112 (The Pence Building on 8th and Hennepin) 2:00pm - 7:50pm

Syllabus: im3420syllabus.doc

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)

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.

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

<?
    $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" );
    }
?>

$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.

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" );
    }
  }
?>

<?
    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>
<?
    /////////////////////////////////////