IM4420 Dynamic Web Applications

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 304, Pence Building, 5:00pm – 8:00pm

Syllabus:
IM4420 Dynamic Web Apps

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

Session 1: Welcome to Dynamic Web Applications. The goal of this class is to learn about the scope of web based applications and the technology used to engineer these tools. We will start by researching and implementing Open Source applications and then move into developing our own applications using PHP, MySQL and other technologies available to us. Throughout this process we will be reviewing PHP, MySQL and Javascript while developing new techniques. Due to the upper level nature of this course, it is strongly suggested that you spend extra time reviewing the concepts taught in the prerequisite course, IM3420 Advanced Scripting Languages. The following reading assignments are an introduction to Open Source and the Free Software Foundation. On Session 2 we will be watching a film about the history of the OS movement.

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.

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: Save your paper as a MLA 7 Google Document and share it with me at jck362 [ at ] gmail [ dot ] com. Name the file IM4420_OSResearch_<lastname>.

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

Session 1: Today will we discuss your research so far and take a look at some examples of Open Source projects that are currently operational. Our focus for the implementation project is WordPress so most of our discussion will revolve around this popular, stable and flexible platform. Here’s a few of the other examples we will be examining.

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.

Session 1: In today’s class we will be discussing what you have written in your research papers, which are also due today. After that we will be attempting to implement examples of the Open Source project you selected for the implementation assignment. I will be checking everyone’s progress as you work. The goal is to get to a point where the installation allows your project to be functional at a default level, exactly like the demonstration on Session 2, week 2. Make sure you are prepared by knowing exactly which software you plan on working with and having all of the necessary login and password information for your web hosting servers and database available. It is also a good idea to complete steps 1, 2 and 3 in the outline for the implementation project (Session 2, week 2).

Netcraft (What’s that site running?)
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.

Session 1: Another aspect of using WordPress involves what are called Template Tags. We will discuss and demonstrate the use of template tags in class today. Also, planning a small scale dynamic web application can be tricky, but there are some ways to think ahead and make the process a little less daunting. Let’s use the example of a service list manager. A service list is a list of contacts for a business that require promotional material on a regular basis. Artists and record labels use service lists to inform the media about events, new releases, showings and other news. In order to create a dynamic web application to maintain a service list and record transactions a number of questions need to be answered.

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.

Session 1: Today we will use phpMyAdmin to start analyzing the WordPress database schema. How do the tables included interact? What sort of data is stored and how can we access it in ways distinct from the WordPress framework? How would we write a plugin to access data differently? These are some of the questions we’ll be going over as well as an exercise in using the DML to retrieve data from WordPress in our own format.

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

Session 1: PHP has become one of the most popular ways to do server side scripting for web applications. The reasons include that it’s Open Source, easy to learn, flexible, operates on most OSes, interfaces with most popular database platforms, very stable, portable, and get’s updated and improved regularly. But, as we have learned, development from the ground up can be daunting. So what if you have a custom project that needs to be fully developed without using an existing code base? There are ways to get a jump start on this process. “CodeIgnitor is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications.” (codeignitor.com) Let take a brief look at CodeIgnitor and then continue learning about plugin development for WordPress.

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.

Due on Week 7 Session 2
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()

Session 1: I have another example to show from the Service List Manager project. This tool is nearly complete, so I’ll also be discussing what sort of finishing touches that might be applied to this kind of application. Also, let’s continue looking at your source code examples. I would like everyone to show at least one example before week 10.

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.

Session 1: AJAX (Asynchronous Javascript and XML) is an excellent technique to extend the function of web based applications beyond the traditional methods. Without AJAX dynamic content is delivered to the browser by either displaying a new page or re-rendering the whole existing page. This approach has several limitations that are solved by using AJAX. For example, as new content becomes available for the page, portions of the screen can be changed without completely refreshing the browser. Advanced AJAX techniques are currently in use to create online applications that behave almost exactly like locally installed software. Google Spreadsheets are a good example of this. Google Spreadsheets work in a very similar fashion to Excel and allow importing and exporting in XLS or CSV format. Thus an online application can have the advantage of access on any computer with internet access and still behave like traditional, locally installed software.

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
Getting Started with AJAX in jQuery

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.

Session 1: As we near the end of the quarter, let’s continue to look at examples of source code from your projects. One other issue surrounding web applications and the web in general is how to find image, audio and other types of media to include in our works. We are all familiar with Corbis and the like for photography, but where can we go for free audio content, free images, film and so on? Here’s a list of resources for finding free media files to use in your own work:

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.

Session 1: Today we will be discussing and distributing the take home final essay questions. Although the curriculum in our program focuses heavily on the technical aspects of interactive media design and development, it is important to examine the purpose and direction of this technology. These final essay questions focus on the impact of web applications on you and your community as well as society at large. Draw on your experiences implementing Open Source applications, developing your own tools, and from the films and reading assignments in class to form your answers. Please write a minimum of one double spaced page per question. Due on Session 2 week 11.

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 1: Final work day. Early presentations will be accepted today as well.

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

IM3420 Advanced Scripting Languages

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 304 (Pence) 2:00pm – 5: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

Session 1: Make sure that you can login to your OLS account. Setup a site definition in Dreamweaver or use an FTP client to complete the php tutorial at: http://www.php.net/tut.php from “Your first PHP-enabled page” to “Dealing with forms”.

Recommended Text: “Beginning PHP5” Published by WROX

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.

Session 1: Now we will continue our discussion on some of the fundamentals of cgi (common gateway interface) scripting, commonly refered to as server side scripting. We’ll look at usefully troubleshooting techniques such as phpinfo() and using the echo statement to display variable values. In the lab make the guestbook form populate the guests.txt flat file Set the permissions to world writable and implement the following code:

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

Session 1: Some important pre-processing is required for text areas within forms, otherwise every time a user hits enter in a text field the flat file will contain the “return” and “new line” characters. This means our flat file will essentially be corrupt because the “new line” character is used to distinguished between one record and the next. The following function replaces the character that corrupts the flat file with an HTML break tag:

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

Session 1: Don’t forget that the “guestbook” project is due today. Create the link to the working guestbook area and copy the source files with the link file (this includes the form html document, the form’s action PHP, and the PHP script to display the guests) to the drop off drive (John Keston\mm2421\<student_name>).

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.

Session 1: What if you want to make sure that none of the links you’re adding to the links file are duplicates? You’re not going to want the same link in the same page twice and it may be difficult to remember every link that you’ve added. Here’s an example of how you can prevent duplicate links from being added to the flat file:

<?
    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&#91;$x&#93; );
            $match = rtrim( $field&#91;1&#93; );
            // 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&#91;2&#93; = rtrim( $field&#91;2&#93; );
            if ( !$field&#91;2&#93; ) {
                $field&#91;1&#93; = rtrim( $field&#91;1&#93; );
            }
            if ( $field&#91;1&#93; != $drop_url && $field&#91;2&#93; != $drop_url ) {
                $new_file&#91;&#93; = $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" );
?>

Session 1: The links project is due on Session 2, Week 6. This project and the guestbook project is what will determine your midterm grade, please add any finishing touches before Session 2. Most of you have this included already, but to add a dynamically generated drop down list of categories to the add link form use the following code. Make sure that you place the code within the form tags of the add link form:

<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 PHPMyAdmin as our tool for managing the database. Add the following tables to your student webspace database. 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." );
?>

Session 1: Once you have database authentication working create the add_news.php script which will check to make sure that the user_id cookie has been written and if so display the “Add News” form similar to what’s below. At the top of the form document insert the PHP code below to test for the cookie value.

The “Add News” form:

<?
  $user_id = $_COOKIE&#91;'user_id'&#93;;
  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&#91;"user_id"&#93;;
  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”);

Session 1: Now we can move on the the “front-end” of the application. This is where users can view news that has been inserted into the database. The first page will list all the news stories in the database as links and the links for each story will display the details of the story. Here’s the code for the list of stories (show_headlines.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.

News Project Milestone #1
1. Login with session authentication is working
2. check_auth.php verifies administrative user (add_news and insert_news)
3. Adding news articles is working
4. show_headlines.php is working

MySQL Documentation for the DATE_FORMAT function

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>

Session 1: Now our news project is nearly fully functional, but in order to remove or archive news articles we would have to access the database and “manually” remove records or change the status of those records. A better solution would be to create a page that allows the user to delete or archive news by pressing a button.

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&#91;"user_id"&#93;;
  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&#91;message&#93; ?></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&#91;id&#93;.\">" .
           "$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&#91;enabled&#93;>Enabled</option>\n" );
    echo ( "<option value=\"disabled\" $selected&#91;disabled&#93;>Disabled</option>\n" );
    echo ( "<option value=\"archived\" $selected&#91;archived&#93;>Archived</option>\n" );
    echo ( "</select></td>\n" );
    echo ( "<input type=\"hidden\" name=\"id\" value=\"$row&#91;id&#93;\">" );
    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&#91;"user_id"&#93;;
  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&#91;id&#93;, $_POST&#91;status&#93;) ) {
    $message = "Set news article $_POST&#91;id&#93; status to $_POST&#91;status&#93;";
    header ("Location: modify_news.php?message=$message" );
    exit();
  }
  else {
    $message = "Update Failed";
    header ("Location: modify_news.php?message=$message" );
    exit();
  }
?>

Session 1: The last step that we’ll take in the administrative area is building the functionality necessary to allow administrators to completely update a news article in the database via a web form. This will require two scripts the first script will be the form, prefilled, so that the administrator can edit the data, and the second (standalone) script will include the UPDATE query. Here’s the source for the first script:

<?
  // update_form.php
  // Make sure that the user has authenticated
  $user_id = $_COOKIE&#91;"user_id"&#93;;
  if ( !$user_id ) {
    header( "Location: login.php?message=Please login before updating news" ); 
    exit();
  }
  if (!$_GET&#91;id&#93;) {
    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&#91;id&#93;";
  $result = mysql_query( $query );
  if (!$result) {
    header( "Location: modify_news.php?message=Query failed: $query" ); 
    exit();
  }
  $row = mysql_fetch_array( $result );
  $selected&#91;$row&#91;status&#93;&#93; = "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&#91;id&#93; ?>">
Headline: 
<input type="text" name="headline" value="<? echo $row&#91;headline&#93; ?>"><br />
Author: 
<input type="text" name="author" value="<? echo $row&#91;author&#93; ?>"><br />
Create Date: 
<input type="text" name="headline" value="<? echo $row&#91;create_date&#93; ?>"><br />
Status:<br />
<select name="status">
<option value="enabled"<?= $selected&#91;enabled&#93; ?>>Enabled</option>
<option value="enabled"<?= $selected&#91;disabled&#93; ?>>Disabled</option>
<option value="enabled"<?= $selected&#91;archived&#93; ?>>Archived</option>
<br />
<textarea name="body"><? echo $row&#91;body&#93; ?></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&#91;"user_id"&#93;;
  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 1: Today we will be reviewing for the final quiz. Afterwards in the studio, let’s add some final touches to the news project. Early presentations of the news project are acceptable as well.

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

April 29th, 2004

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.

The course introduces students to the history, trends, terminology, and concepts in the field of interactive design. Through materials presented in the course, students become familiar with the roles and responsibilities of people working in the field, professional organizations, and significant organizations. Students are also introduced to the basic concepts and tools for developing interactive media applications.

Instructor: John Keston

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

Syllabus:
Please visit e-Companion to download the current syllabus

Recommended Texts:
Miller, B. (2010). Above the Fold: Understanding the Principles of Successful Web Site Design. Blue Ash: HOW Books.
McNeil, P. (2007). Web Designer’s Idea Book: The Ultimate Guide To Themes Trends & Styles In Website Design. Cincinnati: F+W Publications.

Required Reading:
Speaking in Styles: Fundamentals of CSS for Web Designers

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

Session 1: Welcome to Interactive Design I. Today we will start with introductions, review the syllabus, and discuss the goals of the class. Our first project will be a simple one page layout called the Project Portal. The document layout will use “normal flow” to present a short biography and links to all of your upcoming projects.

Important: Normal flow is a term used to describe how an HTML document behaves when none of the elements within the document have been given values for the CSS position or float attributes. In this case all block-level elements stack vertically from top to bottom in contrast to inline-level elements that stack horizontally from left to right.

We will begin the first project using a text editor to create a basic single page website. Before getting started it’s important to understand a little about HTML and how websites operate. Therefore we will build our sites by using a text editor like TextEdit, TextMate, Sublime Text, or Smultron. This technique allows for the possibility of mistakes to be made and in-turn you will learn about troubleshooting techniques.

Assignment 1: “Project Portal” Static Web Page
Due: Session 1, Week 3 (10 points)

Description:
This assignment is an introduction to the most basic concepts of building a web page (i.e. normal flow, hyperlinks, file management, creating sub-directories, and basic CSS). It is also the mechanism through which I will grade all of your subsequent assignments. start by creating a home directory titled “im1480”. Next, create four new directories within “im1480” labelled for each upcoming project. You will then build one web page with the filename “index.html” with links to the new directories you created. Upload the environment to the student webspace and place an internet shortcut on the Dropoff Drive as demonstrated in class.

Requirements:
1. Build an environment for your Project Portal and upcoming assignments
2. The environment should contain all of the subdirectories necessary
3. Create a single project portal page in the “im1480” directory called “index.html”
4. The project portal will include a header, biography, images, and an unordered list
5. The list will have links to all upcoming projects
6. Upload the environment to the student webspace
7. Place an internet shortcut on the Dropoff drive

Points Breakdown:
2 points are awarded for coding headers, lists, links, images, and divs within the document
4 points are awarded for illustrating normal flow layout, CSS styles, and basic typesetting
4 points are awarded for preparing readable, accessible, and well design content for the page

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 discussion on HTML5 and look at some functionality within the text editors and FTP applications.

Reading Assignment:
Speaking in Styles – Introduction and Chapter 1
Setting up your Student Webspace

Student Webspace Support:
For MyAiCampus support, call 1.866.642.2711 or email campus_support@aii.edu. Support is available Monday through Saturday, 7 AM to midnight, and Sunday 10 AM to midnight (Eastern).

Session 1: Today we will select students for the Google-Fu assignment. This participation assignment requires each student to research and comment about the content for a particular week of the class.

Assignment 2: “Google-Fu” Interactive Design Research Skills
Due: Before Session 2 of the Assigned Week (6 points)

Description:
Each student will be assigned one of nine weeks (2-10) from the class content. The student is required to research the content for their week using Google and find three current and relevant web-based articles about the subject(s) contained within their assigned week that are not already included in the class content. The link to each article and a 1-3 sentence description must be entered as a comment on the class website before session 2 of the assigned week.

Requirements:
1. Enter a single comment with three links and descriptions for the assigned week
2. Make sure the links are current, relevant, and not previously included in the course content
3. Enter your comment 24 hours before session 2 of the assigned week for approval

Points Breakdown:
1 point is awarded for each relevant link
1 point is awarded for an accurate description of the article

Following the discussion we will continue demonstrations for the “Project Portal” This will include creating a basic “normal flow” layout including a header, content area, and footer. We will also look at lists, links, images, and some basic CSS properties. A portion of class time will be available for studio work and feedback.

<!DOCTYPE html>
<html>
<head>
  <!-- this is an HTML comment -->
  <meta charset="UTF-8">
  <title>Title of the page goes here<title>
</head>
<body>
  <h1>h1 is the largest of the six header tags</h1>
  <p>All content is contained in the body tag</p>
</body>
</html>

Relevant Resources:
W3Schools CSS Tutorial
W3Schools HTML4 and HTML5 Tutorial

This weeks reading:
Speaking in Styles – Chapters 2, 3, and 4 (Pages 17 – 88)

Session 2: Today is the last day to get feedback on the “Project Portal”. We will also look at the “Google-Fu” research. Finally, in-class demonstrations will center on completing the layout, techniques, and requirements for the “Project Portal”. This will include a discussion regarding the anatomy of CSS rules and demonstration regarding “box model.”

Relevant resources:
Selectutorial – CSS selectors
W3 Schools – The CSS Box Model

Next week’s reading:
Speaking in Styles – Chapters 5 and 6 (Pages 89 – 175)
Brainjar CSS Positioning article

Session 1: After a brief presentation of the Project Portal assignments we will discuss the requirements for the Technical Exercise #1 Image Optimization. If time permits I will also demonstrate the techniques required to complete the exercise.

Technical Exercise 1: Image Optimization
Due: Session 1, Week 4 (3 points)
Download the Exercise Assets

Description:
Use Photoshop to optimize the provided raw images as JPEGs and display them within a single web document. Next, in the same document display some type converted to graphics using the transparent GIF format and the transparent PNG-24 format. Use a background color other than white and a typeface with plenty of curves to illustrate the advantage of alpha over index transparencies. Finally, experiment with an image of your own to create a 2 by 2 grid of 4 images that are manipulated by experimenting with the GIF color table in the “Save for Web” dialog box.

Requirements:
1. Create a single web page that documents the tasks listed below
2. Optimize the provided raw images into an appropriate web format
3. Display any type converted to graphics using both GIF and PNG-24 formats
4. Produce a grid of your own images manipulated via the GIF color table
5. Add the files and folders to your environment and upload to your student webspace
6. Upload your exercise and test your portal before class starts on session 1 week 4.

Points Breakdown:
1 point awarded for effectively optimizing the raw images into an appropriate web format
1 point awarded for using type converted to graphics to illustrate the advantage of alpha transparency
1 point awarded for creating a grid of experimental images by manipulating the GIF color table

Session 2: Today we will begin discussing the “World” CSS Positioning Project. This project is designed to allow students to focus on color, design, layout, type treatments, syntax, markup, and styles while learning about a country other than the one we live in.

Assignment 3: “World” CSS Position Project
Due: Session 2, Week 7 (25 points)

Description:
Design a web application featuring six content areas that are topics about the country you have selected. Create a consistent and appropriate design scheme that incorporates images, navigation and type treatments using HTML and CSS. Pay special attention to type, colors, layout, styles and positioning. In addition to developing your skills as a front-end web designer, this project will encourage students to discover new information another country.

Requirements:
1. Organize your content into six content areas or pages
2. Create a consistent design scheme and apply it to your template
3. Include universal navigation on each page to get to every content area
4. Incorporate optimized images appropriate for the content into each page
5. Format type, images, and the positioning of the content with CSS
6. Upload to the student webspace and test the link in your project portal
7. Due before class on session 2 of week 7 for presentations

Points Breakdown:
6 points will be awarded for designing an effective layout for the content and interface items
5 points will be awarded for a consistent and distinct universal navigation system
4 points will be awarded for placement, optimization, preparation, and choice of images
5 points will be awarded for carefully selected typefaces and type treatment
5 points will be awarded for the clarity of your presentation

World Project Resources:
Wikipedia.org
The CIA World Factbook
Getty Images Login Information

Reading:
Speaking in Styles – Chapters 7 and 8 (pages 176 – 223)

Session 1: This week we will begin our discussions about the World Project. I will also be assigning the Markup Exercise and demonstrating the start of the build process for the World Project template.

World Project Milestone #1
Due: Week 4, Session 2 (before class starts)
1. Be prepare to discuss your layout and design concept
2. Prepare a minimum of three sketches to illustrate your ideas
3. Prepare a color scheme using kuler.adobe.com

Relevant Resources:
CSS Reset
CSS Normalize

Session 2: Today we will continue demos regarding the World Project. Be prepared to demonstrate the points listed last session for the milestone. This milestone is required for the approval of your design concept. Also, we will discuss the requirements for the Markup exercise.

Relevant Resources:
Viewport Sized Typography
Can I use Viewport Units (vw, vh, vmin, vmax)?
Using vw and vh Measurements In Modern Site Design

Technical Exercise 2: Markup
Due: Session 2, Week 5 (4 points)

Description:
Build a single page that profiles the first computer or gaming console you remember using. If you cannot remember the exact model choose from something around the same time period. Browse VintageComputing.com, Wikipedia, or other sites to collect the content and resources for the page. You must cite the resources that you use in the page as links. Your layout must include page-jumps for navigating to specific content areas. It must also include a header, header images, content images, an aside, and a footer. Focus on the markup. Styling will be added later during the styling exercise.

Requirements:
1. Create a profiling the first computer or gaming console you remember using
2. Use available web resources to find the content for the page
3. Cite each image and source that you use inline, in the footer, or the aside
4. Use page jumps to navigate to content areas within the page
5. Break up the page into a header, main content, aside, and footer
6. Add the files and folders to your environment and upload to student webspace
7. Test the it loads correctly from your project portal by session 2 of week 5

Points Breakdown:
2 points will be awarded for organizing the content for the page
2 points will be awarded for properly coding the markup in html5 format

Session 1: Now that your designs have been approved it is time to continue working on the template for the World Project. Today’s demonstrations will be based on getting the markup started and some of the rudimentary styles in place.

World Project Milestone #2
Due: Week 5, Session 2 (before class starts)
1. Be prepared to show your work-in-progress on the template
2. Your markup must include areas for a header, navigation, aside, content, and footer
3. Have some rudimentary styles in place to illustrate how your design is developing

Session 2: Today I will be looking at your Markup Exercises and Milestone #2. We will also discuss the requirements for Technical Exercise 3: Styles. In-class demos that apply to the World project are also scheduled for today.

Relevant Resources:
Fluid Width Equal Height Columns
Best Practices for Modern Web Navigation

Technical Exercise 3: Styles
Due: Session 2, Week 6 (4 points)

Description:
Style the markup on the single page that you created for the Markup Exercise. Use CSS to adjust the layout, float the aside, float content images, place and adjust background images, choose and format type, build a navigation system, specify hover behaviors, and create a color scheme.

Requirements:
1. Use CSS to style your markup exercise
2. Float the aside and content areas to the left or right of each other
3. Design a navigation system with hover behaviors
4. Choose a distinct typeface and use the typesetting properties
5. Create an attractive color scheme
6. Add the files and folders to your environment and upload to your student webspace
7. Test that your exercise loads from your portal before class on session 2, week 6

Points Breakdown:
2 points will be awarded for designing an effective navigation system
1 point will be awarded for producing an inviting layout and color scheme
1 point will be awarded for capably handling the type setting

Session 1: Today we will continue demonstrating the techniques required to produce the World Project. I will also assign the requirements for World Project Milestone #3.

World Project Milestone #3
Due: Week 6, Session 2 (before class starts)
1. Be prepared to show your template for final feedback
2. Illustrate working navigation to multiple pages or content areas
3. Demonstrate how your markup and stylesheet differ from the in-class demos

Session 2: Please be prepared to show your World project for group critiques and feedback today as described in World Project Milestone #3. Afterward we will discuss the requirements for the Typesetting for the Web exercise. This exercise is intended to illustrate the alternatives to web-safe type as well as alternatives to rendering type as images. Placing type as images in web documents used to be the only way that non-web safe fonts could be included in navigation and content headers. Although many web designers still use this technique it is well known that it limits accessibility and does not contribute to SEO enhancements.

Technical Exercise 4: Typesetting for the Web
Due: Session 1, Week 7 (4 points)

Description:
Use the CSS3 @font-face rule to apply several open typefaces to a single web document. Create three headings and three paragraphs of place-holder text on the page. Use a minimum three open typefaces or fonts that you have a license to use for the headings and paragraphs. Experiment with the CSS properties line-height, and letter-spacing.

Requirements:
1. Use the CSS3 @font-face rule typeset three headlines and paragraphs
2. Download fonts from an open web resource or fonts that you are licensed to use
3. Use three or more typefaces for the headlines and paragraphs in the exercise
4. Apply several examples of the CSS properties line-height, and letter-spacing
5. Add the files and folders to your environment and upload to your student webspace
6. Test loading the exercise from your portal before class on session 1, week 7

Points Breakdown:
3 points will be awarded for applying each typeface
1 point will be awarded for using line-height effectively
1 point will be awarded for using letter-spacing effectively

Relevant Resources:
CSS Text Layout Properties
Open Font Library
Font Squirrel

Session 1: Today will be spent primarily of wrapping up the World Project before in class presentations on session 2 of week 7. Secondly, we will discuss the components required for the Final Web Application project. These include:

1. A project proposal (title, summary, and feature list)
2. Three design mockups of a single page
3. The complete and fully-functional web application

Session 2: Please be prepared to present your World project in class. If time permits we will also discuss the requirements for the Final Web Application component of the final project as shown below.

Assignment 5: Final Web Application (Component 3 – Webapp)
Due: Session 1, Week 15 (35 points)

Description:
Using the HTML5 web standards we have learned so far and other techniques that will be demonstrated throughout the semester, design and build an interactive web application with a minimum of five pages in primary navigation and four pages in secondary navigation. The content for the project may be of three possible categories:

1. Build the project for a real organization that is need of a webapp or webapp redesign.
2. Build the project for a real business that is need of a webapp or webapp redesign.
3. Create an informational webapp on a topic of your choice that you are passionate about.

Important: If your project is a business or organization ensure that it is one with which you are closely associated. Consult with me about your concept no later session 1 of week 9 so that I can approve your ideas. All content must be either generated by you, the organization/business, or cited to credit the original source.

Requirements:
1. Create a minimum of nine content areas for the webapp.
2. Primary and secondary navigation will allow visitors to get to all content areas.
3. Include a minimum of four of the following types of media: graphics, photos, video, sound, motion.
4. Images and text content must be your original artwork, unless cited correctly and the licenses allow for use.
5. The webapp must be fully interactive – navigate to any page from any page
6. Upload your environment to the student webspace before class on session 1 of week 15

Points Breakdown:
6 points will be awarded for designing an effective layout for the content and interface items
5 points will be awarded for a consistent and distinct primary/secondary navigation system
4 points will be awarded for placement, optimization, preparation, and choice of images
5 points will be awarded for the use of media (graphics, photos, video, sound, motion)
5 points will be awarded for developing meaningful and accessible content for the user experience
5 points will be awarded for carefully selected typefaces and type treatment
5 points will be awarded for the clarity of your presentation

Session 1: Today we will discuss the requirements for the Project Proposal component of the Final Web Application. The remaining time will be spent on individual consultations for finalizing your cycling project or Final Web Application concept approvals.

Assignment 5: Final Web Application (Component 1 – Project Proposal)
Due: Session 2, Week 8 (5% of final project grade)

Description:
Write a one page project proposal that includes a title, project summary, wireframe, and feature list. Use Google Docs, Word, or Illustrator to create the proposal. Export the proposal as a PDF file and submit before class starts on session 2 of week 8.

Requirements:
1. Start the proposal with a title page (include your name, project name, my name, class title, etc.)
2. Secondly write a project summary that describes the scope of the project in two to five paragraphs
3. Thirdly insert a list of project features and a brief description of each feature
4. Include at least one wireframe to illustrate the layout of your project
5. Copy the PDF of the to your folder on the Dropoff Drive before class on session 2 of week 8

Points Breakdown:
The proposal constitutes 5% of the grade for the Final Web Application

Session 2: Project Proposals are due today. We will also discuss the requirements for the Design Mockups component of the Final Web Application project. During the in-class demonstration we will look at adapting our template for the final project and creating some secondary navigation items under the primary navigation bar.

Relevant links:
Create a CSS3 Dropdown Menu
Another Simple CSS3 Dropdown Menu
CSS Menu Maker » Dropdown Menus

Assignment 5: Final Web Application (Component 2 – Design Mockups)
Due: Session 2, Week 9 (5% of final project grade)

Description:
Design three mockups of a single page for in-class critiques on session 2 of week 9. Mockups resemble the final web application’s interface and layout while wireframes are simplified boxes and text. Each mockup should include layout, color scheme, typesetting, graphics, and images. The mockups may differ from each other in the following ways: try different color schemes, select different typefaces and typesetting parameters, and experiment with the layout.

Requirements:
1. Design a minimum of three mockups for critique
2. Include distinct layout, color scheme, typesetting, graphics, and images for each mockup
3. Use Photoshop, Illustrator, or HTML/CSS to design the mockups
4. Render the mockups as either web graphics (PNG, PDF, GIF, JPEG) or HTML templates
6. Upload a the documents to the Dropoff Drive before class on session 2 of week 9

Points Breakdown:
The mockups constitute 5% of the grade for the Final Web Application

Session 1: Today’s inclass demonstrations will involve typical uses for CSS3 transitions and animations. CSS3 transitions and animations are an easy and generally accessible way to integrate motion into your designs. Most transitions are initiated via the hover pseudo class. Animations begin when the page loads. Uses include: navigation, thumbnail fades, image captions, sliders, etc.

Relevant links:
CSS3 Transitions of W3Schools
CSS3 Transition Tutorial
Lea Verou’s Prefix Free Widget
Trigger CSS3 Transitions on Click

Session 2: Today we will be critiquing your design mockups. Please be prepared to show your mockups to your assigned group members. I will visit each group and provide additional feedback.

Final Web Application Milestone #1
Due: Week 10, Session 1 (before class starts)
1. Be prepared to show your template work-in-progress
2. Demonstrate navigation with both primary and secondary items
3. Illustrate your ability with fluid layout, floats, asides, and typesetting

Session 1: This week we will look at several examples of Javascript image galleries. These galleries may take the form of a simple “lightbox,” or they may be implemented as responsive image sliders with slideshow, animation, and many other adjustable options. Also, please look a the following requirements for the next milestone.

Relevant Resources:
LightBox
Fancybox
Flexslider
An article with many jQuery Gallery Plugins

Final Web Application Milestone #2
Due: Week 10, Session 2 (before class starts)
1. Be prepared to show your template work-in-progress
2. Illustrate the use of a jQuery image gallery on a single page
3. Demonstrate your working navigation system linking to three or more pages

Session 2: Let’s continue demonstrations of Javascript image galleries. I will also be polling the class to find out if there are any other techniques that you would like to see demonstrated that have not yet been covered. Otherwise, please be prepared to show your final project work-in-progress for feedback.

Session 1: Final Project presentation and evaluations. Additional studio time will be available for students not presenting today.

Session 2: Final Project presentation and evaluations.

IM2420 Fundamemtals of Scripting Languages

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:
Session 1 / Session 2
M/W 11am – 2pm (with appropriate breaks), Room 342, LaSalle building

Syllabus: Please visit e-Companion to download the current syllabus

Textbook: HTML5 and CSS3 (7th 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

Session 1: CSS (Cascading Style Sheets) 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. CSS is a critical tool for any web designer and makes 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: Today we will discuss the requirements for the UX Evaluation Project as well as begin demonstrations that relate to the project.

Assignment 1: “User Experience” (UX) Evaluation Project
Due: Session 2, Week 3 (15 points)

Description:
Create single page with the layout, images and type all formatted using HTML5 and CSS. Write the content for your web page as an evaluation of a website that you consider has poor UXD. Evaluate the website outlining how your example site does not adequately apply the UX criteria (SCANMIC) defined in the reading materials. 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. A zip file of your evaluation web page must be uploaded by session 2 of week 3.

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 an imported CSS document to format the type and images.
5. Upload your evaluation to your student webspace by session 2 of Week 3.

Student Example:
SCANMIC Student Example

Reading Assignment (PDF):
Identifying Web Usability Criteria

Points Breakdown:
2 points are awarded for coding headers, anchors, images, and divs within the document
4 points are awarded for illustrating normal flow layout, CSS styles, and basic typesetting
4 points are awarded for writing and presenting an informed critique of the chosen site

Session 1: Today we will select students for the Google-Fu assignment. This participation assignment requires each student to research and comment about the content for a particular week of the class.

Assignment 2: “Google-Fu” Interactive Design Research Skills
Due: Before Session 2 of the Assigned Week (6 points)

Description:
Each student will be assigned one of nine weeks (2-10) from the class content. The student is required to research the content for their week using Google and find three current and relevant web-based articles about the subject(s) contained within their assigned week that are not already included in the class content. The link to each article and a 1-3 sentence description must be entered as a comment on the class website before session 2 of the assigned week.

Requirements:
1. Enter one comment with three links and descriptions for the assigned week
2. Make sure the links are current, relevant, and not previously included
3. Enter your comment 24 hours before session 2 of the assigned week for approval

Points Breakdown:
1 point is awarded for each relevant link
1 point is awarded for an accurate description of the article

Following the discussion about the assignment we will discuss the purpose, syntax, and techniques of CSS. For some of you this topic might be review and for others it may feel advanced. Please be familiar the following:

CSS Tutorial at W3Schools

After our discussion we will continue the demonstrations for the UX Evaluation Project. Topics covered will include list-based navigation, page jumps, and floating images.

Session 2: Today I would like to begin discussing JavaScript. This language is the most widely use scripting language for front-end development on the web. It is used in almost every modern web application for both desktop and mobile platforms. Some of the task JavaScript is used for include: client-side scripting, form validation, UI enhancements, HTML5 canvas animations, servers side scripting (Node.js). During our demonstration today we will implement several examples of JavaScript including the animated scrolling technique seen below (source: learningjquery.com). This script relies on jQuery, so we will also cover the process of including jQuery in our environments.

$(document).ready(function(){
	$(function() {
	    $('a[href*=#]:not([href=#])').click(function() {
	    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
	      var target = $(this.hash);
	      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
	      if (target.length) {
	        $('html,body').animate({
	          scrollTop: target.offset().top
	        }, 1000);
	        return false;
	      }
	    }
	  });
	});
});

Relevant Resources:
Official jQuery Site
W3Schools JavaScript Tutorial
Mozilla Developer Network JS Documentation

Session 1: During studio time today I will be giving final feedback sessions for your UX Evaluation Projects. The feedback sessions will occur in groups determined at the beginning of class. Each group will meet to critique each others project and then report their critiques to me for final feedback. This is the last opportunity to get feedback before the project presentations during our next meeting. Please be prepared by having the following milestone completed before class begins.

UX Evaluation Study Milestone
1. Finalize the color scheme, layout, typesetting, navigation, and interactivity for your project
2. Include a minimum of four optimized images that illustrate your points
3. Have written content in place for a minimum of four of the specified criteria

Session 2: Today we will present the UX Evaluation Projects. Following the presentation we will review the requirements for the next project: the JavaScript Calculator Web Application. This project is intended as an introduction to the basics of JavaScript. As we move on to projects that will use the jQuery framework to enhance user experience it is important that you have a basic understanding of the language on its own.

Assignment 2: Simple JS Calculator Web Application (10 Points)
Due: Session 1, Week 5 (Beginning of Class)

Description:
Build a simple calculator using HTML, CSS, and JavaScript. At a minimum the calculator must be able to do addition, subtraction, multiplication, and division. Use html forms to create a text field for the numbers, buttons for the functions and operators (+,-,*,/), and buttons to calculate and clear the text field. Add more functions such as percent, modulus, square root, and/or exponents. This exercise will help create an understanding of variables, expressions, assignment operators, logical operators, and functions. Use the Mozilla JavaScript Reference to look up the Math object and other functions and syntax.

Requirements:
1. Use HTML, CSS, and JavaScript to build a Calculator
2. The tool must give the correct answer for an expression of two numbers
3. Addition, subtraction, multiplication, and division are required operators
4. Add additional functions such as percent, modulus, or exponents
5. Do NOT use the eval() function (here’s why not)
6. Use CSS to style the calculator and enhance the user interface
7. Upload your project to the student webspace by session 1 of Week 5

Point Breakdown:
5 points are awarded for properly functioning features within the calculator application
5 points are awarded for user experience design considerations and the look & feel of the app

Session 1: Today we will begin demonstrations for the Simple JS Calculator Web Application assigned on week 3. During studio time you will be expected to prepare for the JS Calculator milestones described below under session 2.

Session 2: Today we will continue our discussion on JavaScript and demonstrate adding functionality to the JS Calculator Web Application. This will including looking at the JavaScript Math object.

Math is a built-in object that has properties and methods for mathematical constants and functions. Not a function object. Unlike the other global objects, Math is not a constructor. All properties and methods of Math are static. You refer to the constant pi as Math.PI and you call the sine function as Math.sin(x), where x is the method’s argument. Constants are defined with the full precision of real numbers in JavaScript. –MDN

During studio time please have the following milestones prepared for feedback.

Simple JS Calculator Web Application Milestones
1. Have your calculator UI constructed using HTML5 and CSS
2. A minimum of four JavaScript functions must be implemented
3. Several alternative functions must be in preparation

Session 1: Please be prepared to present the JS Calculator Web Application following studio time today. During studio time we will work on resolving any bugs present in your calculator code and validating user input.

Session 2: Today we will cover the first of our three exercises: CSS3 Transitions. CSS3 transitions are time-based effects and animations that have the advantage of being applied using the familiar technique of CSS rather than using complicated JavaScript behaviours. CSS3 transitions and animations are supported in most modern browsers including IE 10 (older versions of IE are not supported), Chrome, Safari, Firefox, and Opera.

.animated_box {
    background: black;
    border: 1px solid #000;
    -webkit-animation: rotRect 3s ease-in-out 3s infinite alternate;
    animation: rotRect 3s ease-in-out 3s infinite alternate;
}
@-webkit-keyframes rotRect {
    0%   {background: rgba(0,0,0,128); -webkit-transform: rotate(0deg); width: 10%;}
    25%  {background: rgba(64,64,64,100); -webkit-transform: rotate(45deg); width: 20%;}
    50%  {background: rgba(128,128,128,75); -webkit-transform: rotate(90deg); width: 10%;}
    75%  {background: rgba(192,192,192,25); -webkit-transform: rotate(135deg); width: 5%;}
    100% {background: rgba(255,255,255,0); -webkit-transform: rotate(180deg); width: 20%;}
}
@keyframes rotRect {
    0%   {background: rgba(0,0,0,128); transform: rotate(0deg); width: 10%;}
    25%  {background: rgba(64,64,64,100); transform: rotate(45deg); width: 20%;}
    50%  {background: rgba(128,128,128,75); transform: rotate(90deg); width: 10%;}
    75%  {background: rgba(192,192,192,25); transform: rotate(135deg); width: 5%;}
    100% {background: rgba(255,255,255,0); transform: rotate(180deg); width: 20%;}
}

Exercise 1: CSS3 Transitions
Due: Session 2, Week 6 (5 points)

Description:
Create single page with page-jump navigation to a minimum of five examples of CSS3 transitions and animations. Write a brief explanation of each effect below each example. A zip file of the environment and the examples must be uploaded by session 2 of week 6.

Requirements:
1. Build a single page with a minimum of five content areas.
2. Each content area must contain an example of a CSS transitions or animation.
3. Each example must be distinct (i.e. do not repeat a color transition).
4. Upload to your student webspace before class on session 2 of Week 5.

Points Breakdown:
1 point awarded per distinct and functional transition or animation

Relevant Resources:
W3Schools CSS3 Transitions
MDN: Using CSS3 Transitions
CSS: Animation Using CSS Transforms

Session 1: Today we will continue looking at CSS3 transitions. In addition we will discuss the requirements for the next exercise: jQuery Gallery. jQuery is a JavaScript library or framework that makes complicated tasks easier to create. It is often used to enhance the UX of web applications by providing advanced user interface tools including accordions, tooltips, easing, menu systems, ajax, and more.

More on CSS3 Transitions:
Transitions and Animations
Easing Functions Cheat Sheet

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. Used by over 60% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today. jQuery is free, open source software, licensed under the MIT License. –Wikipedia

Exercise 2: jQuery Gallery
Due: Session 2, Week 7 (5 points)

Description:
Use one of the many examples of jQuery images viewers to create a gallery of nine images. Build the application into a single page that includes a 3 x 3 grid of thumbnails used as interface items for exploring the gallery. Prepare the environment so that it will work with or without internet access. A zip file of the environment that includes all the necessary web files (images, JavaScript files, html files, etc.) must be uploaded by session 2 of week 7.

Requirements:
1. Build a single page with a 3 x 3 grid of thumbnail images.
2. Implement a jQuery image viewer so that each images enlarges on clicking the thumbnail.
3. Set up the images in a gallery so that navigation to the previous and next images is available.
4. Upload to your student webspace by session 2 of Week 7.

Points Breakdown:
3 points will be awarded for properly implementing a jQuery gallery plugin.
2 points will be awarded for creating an effective thumbnail interface.

Relevant Resources:
LightBox
Fancybox
Flexslider
An article with many jQuery Gallery Plugins

Session 2: Today we will be presenting the CSS3 Transitions Exercise. Following the presentations we will continue demonstrating how to implement jQuery gallery plugins.

Session 1: As we approach mid-term it is important to keep sight on the overall goals and outcomes expected for the class. The following is a list of the upcoming exercises and projects for the rest of the semester:

Exercise 3: jQuery UI (5 points)
Assignment 3: Interactive Form (15 points)
Assignment 4: Final Template (10 points)
Final Web Application (25 points)

The final template is a component of the Final Web Application. In addition you will be required to write a final project proposal and get approval for your proposal from me before starting on your template. The proposal will include a project summary, a feature list, screen schematics, mockups, and a bid (estimated hours broken out into design, content, development, and implementation).

Exercise 3: jQuery UI
Due: Session 2, Week 8 (5 points)

Description:
Implement a minimum of five examples of jQuery UI behaviors. Build the application into a single page that includes each example in a different area of the page. Prepare the environment so that it will work with or without internet access. A zip file of the environment that includes all the necessary web files (JavaScript files, css files, html files, etc.) must be uploaded by session 2 of week 8.

Requirements:
1. Implement five or more examples of jQuery UI behaviors.
2. Examples may include show, toggle, accordion, datepicker, slider, menu, and progressbar.
3. Set up the examples to work with or with internet access on a single html page.
4. Upload a zip of your gallery application to the D2L by session 2 of Week 7.

Points Breakdown:
4 points will be awarded for properly implementing five jQuery UI behaviors.
1 points will be awarded for implementing the examples on an html page.

Relevant Resources:
jQuery
jQuery UI

Session 2: Today we will look at your jQuery Gallery exercises. Following the presentations we will continue demonstrations for the jQuery UI exercise.

Session 1: Today we will discuss the requirements for the HTML5 Interactive Form project. This project is due session 1 of week 11. We will begin by looking at the markup and css necessary to create the form interface. HTML5 provides several new and useful features for form interaction. However, these features are not supported by all current browsers. Therefore fallback validation is required for the client side and server side of the application. In order to learn the server side scripting necessary, we will install MAMP on your Macbooks. Alternatively, if you have shared hosting available your interactive form can be implemented on a web server.

Assignment 3: HTML5 Interactive Form (15 Points)
Due: Session 1, Week 11 (Beginning of Class)

Description:
Using HTML5, CSS, Javascript, and PHP build an interactive form designed to collect information, validate user input, process form data, and email the results. Your form must include all of the following interface items: text fields, a text area, select lists, checkboxes, radio buttons, and a submit button. Use HTML5 validation, with Javascript and PHP fall-back. UX considerations such as placeholder text, feedback messages, adequate documentation, and input focus are also required. Finally, include a method to prevent bots from hijacking the form (reCAPTCHA). These techniques will be demonstrated during class.

Requirements:
1. Use HTML5, CSS, JavaScript, and PHP to build an interactive form
2. Your form must collect information and send it via email using PHP
3. The form must validate the user input using HTML5, Javascript, and PHP
4. Input methods must include: text fields, textarea, checkboxes, radio buttons, select lists, submit button
5. Use placeholder text, feedback, documentation, and input focus to improve the UX
6. Implement methods to prevent bots from hijacking the form
7. Upload a zip file of and shortcut to your project to the dropoff drive by session 1 of Week 11

Points Breakdown:
5 points are awarded for the look, feel, and design of the form (HTML5 and CSS)
5 points are awarded for handling the validation of the user input (HTML5, JS, PHP)
5 points are awarded for sending the data via email and preventing exploits (PHP)

Relevant Links:
HTML5 Forms: The Markup
Dive Into HTML5 » Forms

Session 2: Today the jQuery UI exercise is due. Please be prepared to share what you developed with the class. After the presentations we will continue the demonstrations for the HTML5 Interactive Form project.

Session 1: Now that we have examined HTML5 form validation as well as JavaScript client side form validation it is time to implement the PHP necessary to make the form function as expected. This requires setting up a development server on your computers or using shared hosting. To do this we will use MAMP.

Session 2: Today we will continue the interactive form demos.

Session 1: Today I’ll be demonstrating the optional features of the Interactive Form Project. These include:

1. Hosting the project on a live production server accessible via a public domain and url.
2. Using the reCAPTCHA API to prevent non-human interactions.
3. Fine tuning the layout, design, and functionality of your form.

reCAPTCHA is a free service to protect your website from spam and abuse. reCAPTCHA uses an advanced risk analysis engine and adaptive CAPTCHAs to keep automated software from engaging in abusive activities on your site. It does this while letting your valid users pass through with ease. reCAPTCHA offers more than just spam protection. Every time our CAPTCHAs are solved, that human effort helps digitize text, annotate images, and build machine learning datasets. This in turn helps preserve books, improve maps, and solve hard AI problems.

Relevant links:
Fun with HTML5 Forms
85 amazing HTML5 examples

Session 2: We will be have feedback and critiques on your Interactive Form projects today. Please be prepared to demonstrate your form in group critiques.

Session 1: Today we’ll critique your final projects. These critiques are a required component for you final project, so don’t miss the class. If you have an emergency and can’t be in class, let me know as soon as possible. If we have anytime after the critiques we can continue reviewing for the final exam.

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!

Here are archives of the examples shown in class that were stored on the WDIM drive during the course.

Summer 2011:
IM2420 Summer 2011 Examples

IM2490 Interactive Motion Scripting

An advanced course that applies motion graphics as an integrated interactive solution; students will script interaction, sequencing, and motion for interactive projects. Optimization is a critical consideration in the creation of the user-centered experience.

Instructor: John Keston
Meeting Times and Location:
M/W 2:00pm – 5:00pm Room P305 LaSalle Building

Syllabus:
IM2490 Interactive Motion Scripting Syllabus

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

Session 1: Today we will be covering the syllabus as well as reviewing the curriculum for the class. We will also introduce ourselves and establish the background and skill level of the class members. As the course description states in the the syllabus this class is “An advanced course that applies motion graphics as an integrated interactive solution; students will script interaction, sequencing, and motion for interactive projects.”

Although this description implies Flash and ActionScript development, the majority of our focus will be on covering the new JavaScript capabilities available through the use of frameworks such as jQuery, and functionality unique to JavaScript and HTML5.

To get started we will begin by reviewing some JavaScript basics. In class today we will cover the lessons starting at JS HOME and ending with JS Popup Boxes.
Eloquent Javascript

Session 2: Let us start today by browsing through some of the examples on Chrome Experiments. This site hosts a growing number of experiments built by developers using HTML5, JavaScript, Canvas, and SVG. Afterward we will continue looking at JavaScript and cover the lessons starting with JS Functions Intro and finishing with JS JSON.

Assignment 1: Simple JS Calculator Web Application (10 Points)
Due: Session 2, Week 2 (Beginning of Class)

Description:
Build a simple calculator using HTML, CSS, and JavaScript. At a minimum the calculator must be able to do addition, subtraction, multiplication, and division. Use html forms to create a text field for the numbers, buttons for the functions and operators (+,-,*,/), and buttons to calculate and clear the text field. Add more functions such as percent, modulus, square root, and/or exponents. This exercise will help create an understanding of variables, expressions, assignment operators, logical operators, and functions. Use the Mozilla JavaScript Reference to look up the Math object and other functions and syntax.

Requirements:
1. Use HTML, CSS, and JavaScript to build a Calculator
2. The tool must give the correct answer for an expression of two numbers
3. Addition, subtraction, multiplication, and division are required operators
4. Add additional functions such as percent, modulus, or exponents
5. Do NOT use the eval() function (here’s why not)
6. Use CSS to style the calculator and enhance the user interface
7. Upload a zip of your environment to the Dropoff Drive by session 1 of Week 5

Point Breakdown:
5 points are awarded for properly functioning features within the calculator application
5 points are awarded for user experience design considerations and the look & feel of the app

Here’s an incomplete example to get you started:

Session 1: Wikipedia describes HTML5 as “…a standard for structuring and presenting content on the World Wide Web. The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash and Microsoft Silverlight.” Although HTML5 is not considered “ready for prime time” it is being utilized by developers and organizations to push the envelope of what it possible in the browser as we saw last week on Chrome Experiments. HTML5 has several goals including consistent, defined error handling, and better-defined semantic roles for existing elements, but one of the most promising is the attempt to transform the browser into an application platform.

Let’s spend the lab time today covering as many chapters as we can on the w3schools HTML5 tutorial starting with HTML5 Home.

Assignment 2: “Google-Fu” Interactive Design Research Skills
Due: Before Session 2 of the Assigned Week (6 points)

Description:
Each student will be assigned one of nine weeks (2-10) from the class content. The student is required to research the content for their week using Google and find three current and relevant web-based articles about the subject(s) contained within their assigned week that are not already included in the class content. The link to each article and a 1-3 sentence description must be entered as a comment on the class website before session 2 of the assigned week.

Requirements:
1. Enter a single comment with three links and descriptions for the assigned week
2. Make sure the links are current, relevant, and not previously included in the course content
3. Enter your comment 24 hours before session 2 of the assigned week for approval

Points Breakdown:
1 point is awarded for each relevant link
1 point is awarded for an accurate description of the article

Session 2: Today we will learn how to tween or animate objects using HTML5, the <canvas> tag, and JavaScript. Let’s start by going through the Canvas tutorial on the Mozilla Developer Network (MDN).

Assignment 3: HTML5 and JS Animated Circle (10 Points)
Due: Session 2, Week 3 (Beginning of Class)
Using the setInterval() function, animate a circle on a 500 by 500 pixel canvas within an HTML5 document. Use the example code below as a starting point. Start by making the circle bounce back from the edges of the canvas. Next clear the canvas repeatedly so that the circle appears to be animated. Try enhancing the animation by cycling the colors of the circle, either randomly, or through a range. Adjust the bounce point so that part of the circle is not hidden.

Requirements:
1. Use HTML5 and JavaScript to animate a circle in a 500 by 500 pixel canvas
2. Clear the canvas so that the circle appears to animate
3. Cycle the colors and / or the size of the circle to enhance the animation
4. Adjust the bounce point so that part of the circle is not hidden
5. Experiment in other ways to make your exercise unique

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>HTML5 Bouncing Ball</title> 
<script type="text/javascript"> 
var ctx;
var dx = 5; var dy = 4;
var y = 250; var x = 250;
function draw(){
	ctx = myCanvas.getContext('2d');
	ctx.beginPath();  
	ctx.fillStyle = "#00bb00";
	ctx.arc(x,y,40,0,Math.PI*2,true);
	ctx.closePath();
	ctx.fill();
	if( x < 0 || x > 500) {
		dx = -dx;		
	}
	if( y < 0 || y > 500 ) {
		dy = -dy;
	}            
	x += dx;
	y += dy;
} 
// call a function repeatedly at a set interval
setInterval(draw,30); 
</script> 
</head> 
<body>               
<h1>HTML5 and JS Bouncy Ball</h1>
<div> 	
	<canvas id="myCanvas" width="500" height="500"></canvas>
</div>
</body> 
</html>

In comparison, here’s code to create a similar animation using Processing.org

float y = 50.0;
float x = 50.0;
float speedX = 1.0;
float speedY = 1.0;
float radius = 15.0;
int directionX = 1;
int directionY = -1.1;

void setup() {
  size(400,400);
  background(0);
  smooth();
  noStroke();
  ellipseMode(RADIUS);
}

void draw() {
  fill(0,12);
  rect(0,0,width,height);
  fill(255);
  ellipse(x,y,radius,radius);
  x += speedX * directionX;
  if ((x > height-radius) || (x < radius)) {
    directionX = -directionX;
  }
  y += speedY * directionY;
  if ((y > height-radius) || (y < radius)) {
    directionY = -directionY;
  }
}

Session 1: As we have seen, creating animation with pure JavaScript is promising, but can also be time consuming and cumbersome. Another way to unlock the animation potential of the HTML5 Canvas tag is by using a JS framework. Much less code is necessary when you have pre-written classes and objects to support common motion graphic techniques, like tweens, fades, color manipulation, and transitions. One well developed JavaScript framework for HTML5 vector graphics and animation is Raphaël.

However, the most advanced framework currently available is the Processing.js project. Let’s review some examples including a project of mine that I ported from Processing.org linked below.

Interactive Rectangles

Processing.js is based on Processing.org developed at MIT by Ben Fry and Casey Reas. The Processing language was developed to attract artists and designers to programming. It is easy to learn, yet powerful enough to create complex software like the GMS by John Keston. Here’s a list of notable Processing developers.

Robert Hodgin (flight404.com)
Jeremy Thorp (blprnt.com)
Jared Tarbell (complexification.net)
Daniel Shiffman (www.shiffman.net)
The Nature of Code by Daniel Shiffman
Ira Greenberg (www.iragreenberg.com)
Wes Grubbs (www.devedeset.com)
Ben Fry (benfry.com)
Casey Reas (reas.com)

Session 2: Let’s start today by viewing the results of the HTML5 and JS Animated Circle. Afterward let’s continue our look at Processing.js. After using sketch.processing.org to look at a few more examples, we will go over the requirements for the next exercise.

Assignment 3: HTML5 and Processing.js OOP Exercise (15 Points)
Due: Session 1, Week 5 (Beginning of Class)
Use HTML5, Processing.js and Object Oriented Programming techniques to create multiple animated shapes on a canvas that respond to mouse movement. Try to make the shapes chase the mouse pointer, rather than follow it directly. Try rotating shapes such as rectangles or triangles to reflect the position of the mouse.

Requirements:
1. Setup your HTML5 and Processing.js environment
2. Create a class with a constructor and methods to build and animate the objects
2. Use the setup() and draw() functions to animate five or more objects
3. Use mouseX and MouseY to cause the shapes to respond to mouse movement
4. Try rotating the shapes in response to the mouse movement
5. Try causing the shapes to gravitate toward the mouse rather than following it directly

Session 1: Based on the HTML5 and JavaScript Animated Circle exercise, we have seen that in order to make multiple instances of shapes on the canvas we need to duplicate many lines of code creating redundancies that make the code long and difficult to manage. This “brute force” technique might be acceptable for two or three shapes, but soon it becomes apparent that a better way must be possible. This is where Object Oriented Programming techniques are useful.

// Simple OOP example "Spot"

Spot sp; // Declare the object

void setup() {
  size(200,200)
  sp = new Spot(100,100,50); // Construct the object
}

void draw() {  
  background(0);
  sp.display();
}

class Spot { // Define the class
  float x,y,d; // x position, y position, diameter
  
  Spot(float xpos, float ypos, float diameter) { // Constructor for the object 
    x = xpos;
    y = ypos;
    d = diameter;
  } 
  void display() { // Method (function) to display the object
    ellipse(x,y,d,d);
  }
}

The example above creates a simple spot on the canvas as an object. Developing this example a little further allows for multiple instances of the object created in an array. Then properties such as the size, position, and speed of each spot can be adjusted to produce interesting results. Here’s an active version of the above script developed a little further.

OOP Animated Circles

More resources:
codepen.io
“CodePen is all about front end code inspiration and education through sharing. In the editor, enter HTML, CSS, and JavaScript and the combined result is displayed below. Save your Pen, share it, and explore others. This is extremely useful for showing off your work, troubleshooting, demonstrating bugs, or anything else you can think of.”

Here’s an example I made from last week’s demo:

Session 2: Today we will continue working on the HTML5 and Processing.js OOP exercise. I’ll be demonstrating some more examples of object oriented techniques using the Processing.js framework, including ways to interact with shapes rendered to the canvas.

  void travel() {
    translate(width/2, height/2);
    rotate(PI/(3*(mouseX/800)));
    x += (mouseX - x)/(s*40); 
  }

Also, let’s revisit an updated version of Bouncy Bubbles. This slightly more complex example of object oriented code gives us an opportunity explore the simulation of gravity and collisions.

// All Examples Written by Casey Reas and Ben Fry
// unless otherwise stated. UPDATE: by John Keston to include ball color and reset method.
int numBalls = 50;
float spring = 0.05;
float gravity = 0.2;
Ball[] balls = new Ball[numBalls];
 
void setup() {
  size(600, 400);
  //noStroke();
  smooth();
  for (int i = 0; i < numBalls; i++) {
    balls[i] = new Ball(random(width), random(height), random(20, 40), i, balls,random(255),random(50),random(100));
  }
}
void mouseClicked() {
  for (int i = 0; i < numBalls; i++) {
    balls[i].reset();
  }
}
// Or, add a new ball each time the mouse is clicked
/* void mouseClicked() {
  numBalls += 1;
  balls.add(new Ball(mouseX, mouseY, random(20, 40), numBalls, balls,random(255),random(50),random(100)));
} */
void draw()
{
  background(128);
  for (int i = 0; i < numBalls; i++) {
    balls[i].collide();
    balls[i].move();
    balls[i].display();
  }
}
 
class Ball {
  float x, y;
  float diameter;
  float vx = 0;
  float vy = 0;
  int r,g,b,id;
  Ball[] others;
 
  Ball(float xin, float yin, float din, int idin, Ball[] oin, int cr, int cg, int cb) {
    x = xin;
    y = yin;
    diameter = din;
    id = idin;
    r = cr;
    g = cg;
    b = cb;
    others = oin;
  } 
 
  void collide() {
    for (int i = id + 1; i < numBalls; i++) {
      float dx = others[i].x - x;
      float dy = others[i].y - y;
      float distance = sqrt(dx*dx + dy*dy);
      float minDist = others[i].diameter/2 + diameter/2;
      if (distance < minDist) {
        float angle = atan2(dy, dx);
        float targetX = x + cos(angle) * minDist;
        float targetY = y + sin(angle) * minDist;
        float ax = (targetX - others[i].x) * spring;
        float ay = (targetY - others[i].y) * spring;
        vx -= ax;
        vy -= ay;
        others[i].vx += ax;
        others[i].vy += ay;
      }
    }
  }
 
  void move() {
    vy += gravity;
    x += vx;
    y += vy;
    if (x + diameter/2 > width) {
      x = width - diameter/2;
      vx *= -0.9;
    }
    else if (x - diameter/2 < 0) {
      x = diameter/2;
      vx *= -0.9;
    }
    if (y + diameter/2 > height) {
      y = height - diameter/2;
      vy *= -0.9;
    }
    else if (y - diameter/2 < 0) {
      y = diameter/2;
      vy *= -0.9;
    }
  }
 
  void reset() {
    x = mouseX;
    y = mouseY;
  }
 
  void display() {
    fill(r,g,b,204);
    ellipse(x, y, diameter, diameter);
  }
}

Original example (Bouncy Bubbles) on Processing.js.

Session 1: Today we will review your HTML5 and Processing.js OOP exercise. Here’s the example I presented in class last week.

Primary Squares

Here’s a second example that we will look at as a precursor to experimenting with particle systems. In this example the particles are expanding rings that grow and intersect as they are added by the user, either by clicking or dragging on the canvas.

Intersecting Rings

// Define the Ring class. Notice that no constructor is
// needed because the start method is used to initiate
// the objects behavior.
class Ring {
    float x,y,diameter;
    boolean on = false;
    void start(float xpos, float ypos) {
        x = xpos;
        y = ypos;
        on = true;
        diameter = 1;
    }
    void grow() {
        if (on) {
            diameter += 0.5;
            if (diameter > 600) {
                on = false;
            }
        }
    }
    void display() {
        if (on) {
            noFill();
            strokeWeight(4);
            stroke(255,153);
            ellipse(x,y,diameter,diameter);
        }
    }
}

Ring[] rings;
int numRings = 100;
int currentRing = 0;

void setup() {
    background(0);
    size(800,400);
    smooth();rings = new Ring[numRings];
    for (int i=0; i < numRings; i++) {
        rings[i] = new Ring();
    }
}

void draw() {
    fill(0,5);
    rect(0,0,width,height);
    for (int i=0; i < numRings; i++) {
        rings[i].grow();
        rings[i].display();
    }
}

void mousePressed() {
    rings[currentRing].start(mouseX,mouseY);
    currentRing++;
    if (currentRing >= numRings) {
        currentRing = 0;
    }
}

void mouseDragged() {
    if (frameCount % 5 == 0) {
        rings[currentRing].start(mouseX,mouseY);
        currentRing++;
        if (currentRing >= numRings) {
            currentRing = 0;
        }
    }
}

Session 2: Today we will be looking closely at particle system examples such as Daniel Shiffmans Simple Particle System hosted on processing.org. Other examples include a smoke particle system, and

Assignment 4: HTML5 and Processing.js Particle System (20 Points)
Due: Session 2, Week 7 (Beginning of Class)
Use HTML5, and Processing.js to create a dynamic particle system. Your application must allow the user to enter the number of particles that they would like to render and interact with. Create several switchable modes of interaction, such as brownian motion, mouse pointer attraction / repulsion, and speed adjustments.

Requirements:
1. Setup your HTML5 and Processing.js environment
2. Create a class with a constructor and methods to build and animate the particles
3. Use HTML forms and JavaScript to dynamically adjust the number particles
4. Use HTML forms and JavaScript to dynamically adjust the behavior of the particles
5. Consider constraining the particles to the canvas by changing direction at the borders
6. Try creating trails on the particles that can be enabled or disabled
7. Add one or more of your own features, such as color manipulation, etc. to make your project unique

Session 1: Here’s an example of particle behavior to get you started on the Dynamic Particle System project (20 points) that was assigned in session 2 of week 5. This is example (linked below) was adapted from Daniel Shiffman’s Simple Particle example on Processing.org for use with Processing.js

Shiffman Particles

Session 2: Today we will continue looking at ways to manipulate our particle system through form fields, keyboard, and mouse interaction. We will add modes, color choices, and other student suggested features during the class demo.

Let’s also take a look at the Web Audio API. This system provides methods to allow sound to be played, recorded, analyzed, processed, and synthesized.

Session 1: Today we will look at a few more techniques for manipulating particles. New features include random colors, cycling colors, black with a white stroke (used to produce the image below), and bounce on/off.

Dynamic Particle System

Session 2: Let’s present your particle system projects today.

TUTORIALS:
http://www.w3schools.com/html5/
https://developer.mozilla.org/en/Canvas_tutorial
http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/
http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/

VIDEO:
http://vimeo.com/corbanbrook
http://vimeo.com/hapticdata

EXAMPLES:
http://9elements.com/io/?p=153
http://www.chromeexperiments.com/
http://www.chromeexperiments.com/detail/canvas-cycle/

FRAMEWORKS:
http://raphaeljs.com/
http://jquery.com

PROCESSING.JS:
http://processingjs.org/
http://sketch.processing.org/
http://annasob.wordpress.com/2010/05/04/sketch-processing-org/
https://aim.johnkeston.com/im2490/p5jsDemo/
http://hascanvas.com/

PROCESSING.ORG
http://processing.org/
http://www.shiffman.net/projects/
http://openprocessing.org/

WebGL:
http://learningwebgl.com/blog/
http://www.chromium.org/developers/demos-gpu-acceleration-and-webgl
http://en.wikipedia.org/wiki/WebGL

Please be prepared to describe your ideas for the final project on session 1, week 8.

Final Motion Scripting Application (30 Points)
Due: Week 11 (Beginning of Class)
Use HTML5, CSS, JavaScript, and one of the frameworks we have either used or discussed in class to create a motion based, interactive, front-end application. Your application must interact via user input, or an external data set such as audio, RSS feed, the Twitter API, etc. You may start by using a pre-existing tutorial, however, your project must differ from the tutorial significantly by changing and adding features to the application.

Requirements:
1. Use a combination of HTML5, CSS, and JavaScript to create a motion based, interactive application
2. Include interaction with users (forms, mouse, keyboard) and/or data sets like audio, or data feeds
3. If you start with a tutorial, make significant changes by including new features and changing others
4. Upload your project and environment to a web server and indicate the browser requirements
5. Place a link to your project and your source code on the drop off drive before class on the day it is due

Session 1: Today we will discuss your ideas for the final as well as examine some more techniques and examples that apply to the course materials. Specifically today let’s take a look at using P5.js. One of the main advantages of this new interpretation (in constrast to the processingjs.org port of Processing) is the inclusion of libraries that extend the functionality of the framework. One of these libraries handles sound by integrating the Web Audio API. It is also important to note that P5.js does not allow you to use the same syntax as the Processing language. P5.js syntax is much more similar to JavaScript and can be easily combined with standard JavaScript code.

Relevant Resources:
P5.js
Web Audio API
Working with Object in JavaScript

Session 2: Demonstrations that relate to topics that you have indicated you are researching for your final projects.

Session 1: For the next two weeks of class we will continue demonstrations that relate to topics that you have indicated you are researching for your final projects. One of these topics is sound visualizations. The Web Audio API finally works well across most modern browsers and support for it is built into P5.js. Below is a sound visualization that I created using P5.js and the Web Audio API. Today will review the resources and techniques necessary to create a project of this sort.

Ostraka Visualization

Session 2:

Final Project Milestone #1
1. Illustrate that you are able to setup a JavaScript environment that includes the framework code necessary.
2. Show me an example of using the console log to display a value from your script.

Session 1: Demonstrations

Session 2: Project milestone

Final Project Milestone #2
1. Demonstrate a minimum of two distinct, interactive features in your project
2. Explain how you intend to apply interactivity beyond the features currently enabled
3. If your project uses a data set be prepared to show some of the data Involved
4. If you started with a tutorial, explain how your project differs from the original

Session 1: Final presentations

Session 2: Final presentations