teach

DIGM-242 update

Introduction
DIGM 242, Advanced Hybrid Interactivity for the Web, builds upon basic knowledge of XHTML, CSS, JavaScript, & Flash. Through a series of homework assignments and the completion of an interactive project, students in this course will come to better understand the functionality and integration of the various technologies available to developers working in today’s web environment. These will include: XHTML, CSS, JavaScript, Flash, PHP, MYSQL and XML. Group and individual instruction are used to provide a better understanding of the concepts, tools and social dynamics involved in the creation of effective and expressive interactive web media.

Week 01 / Overview
20% Attendance
20% Homework
60% Project
30% Creativity (Innovation/Aesthetics/Usability)
30% Functionality (Performance/Technology/Reliability)
30% Content (Completeness/Presentation/Functionality)
Digm 240 + 241 = Client Side Technologies (XHTML, CSS, JAVASCRIPT, FLASH, XML)
Digm 242 will incorporate Server Side Technologies (PHP, MYSQL)
Project Description 01: Students will create a web-based interactive exhibit based on the topic of their choice. This project must utilize several of the following technologies: XHTML, CSS, JavaScript, Flash, PHP, MYSQL and XML. Examples: http://www.secondstory.com
Project Description 02: Students will create a flash based game based on the PBS documentary called “Market to Market: To Buy a Fat Pig” This project will focus on Flash & advanced ActionScripting. Students will be required to write up a one-page proposal, the best of these will be selected for production and possibly assigned to a team of students. Once produced, these projects will be presented to PBS, and the selected project will win $2,000 and have their game posted on the PBS website (with full credit).
Assignment: Write up a proposal thoroughly describing your online exhibition. Tell me why you have selected this topic, and you will attempt to take advantage of the technologies available to you. Tell me how you will get, or create, the assets needed to complete the project. Include visuals (sketches are fine) if necessary. Due at midnight the night before next class: Submit URL via email to: mjm@malcolmmcatee.com subject: “digm242hwk01s###mjm” [replace ### with your class section number, replace mjm with your initials]

Week 02 / Information Architecture

Variables
PHP
JavaScript
ActionScript
Functions & Parameters
PHP
JavaScript
ActionScript
Reading:
5 Hat Racks of Information (L.A.T.C.H.) p. 84-85
Chunking p. 30-31
Framing p. 92-93
Storytelling p. 186-187
Example: http://www.moma.org/exhibitions/2004/tallbuildings/index_f.html
Assignments: Create a sitemap or flowchart for your proposal. What is the relationship between the organization of information and the visual layout of your project? Does organizing the information in a certain manner help to the user to learn more about the topic that you have selected? Due at midnight the night before next class: Submit URL via email to: mjm@malcolmmcatee.com subject: “digm242hwk02s###mjm” [replace ### with your class section number, replace mjm with your initials]

Week 03 / Client/Server Basics

Rational Grid Systems (2, 4, 5, 6, or 8 columns?)
PHP passing information to JavaScript or Flash
Storing & retrieving cookies
Download Week 3 Source
Reading:
Alignment. p. 22
Golden Ratio. p. 96
Fibonacci Sequence p. 94
Rule of thirds p. 168
Assignments: Based on you approved flow chart or site map, start creating a design specification for your project. This should include which aspects will run on the server, via PHP and which parts will run on the client via Flash/HTML/JavaScript. In addition to seperating client and server, also start to break down the functionality of how each side will do its part. Break your design into serveral “gray boxes” that make up the various pieces of your design. Email assignments no later than midnight before next class to: jeremy@drexel.edu

Week 04 / Backend Architecture

A simplified Model/View/Controller example (PHP)
Download Week 4 Source
Reading:
Legibility p. 124
Aesthetic-Usability Effect p. 18
Inverted Pyramid p. 116
Readability p. 162
Assignments: This week you will begin to flesh out the approved grey box diagram from the previous week. Start to add artwork, type, photographs and any other assets that you may have. Work in shades of grey. Create 2- 3 Versions. Does the type help to reinforce the message? Is your text legible and easy to understand? Due at midnight the night before next class: Submit URL via email to: mjm@malcolmmcatee.com subject: “digm242hwk04s###mjm” [replace ### with your class section number, replace mjm with your initials]

Week 05 / What is OOP?

Object Orient Programming (Flash & JavaScript)
Classes, instances, constructor, scope
Reading:
Color p. 38
Top-Down Lighting Bias p. 196
Mimicry p. 132
Signal to Noise Ratio. p. 182
Assignments: This week you will begin to develop color schemes & textures for the approved assignment from the previous week. Does the color and aesthetic help the user to engage with the content? Is it immersive?
Due at midnight the night before next class: Submit URL via email to: mjm@malcolmmcatee.com subject: “digm242hwk05s###mjm” [replace ### with your class section number, replace mjm with your initials]

Week 06 / Final Prototype Preparation

Review of topics covered so far
Sanity Check for everyone’s design phase completion
Assignments: All assets that you have created will be due before class next week. These assets will be a complete and thorough description of your project. The design phase of this project is over, you will spend the rest of the term building your project and integrating it with the appropriate technologies. Due at midnight the night before next class: Submit URL via email to: mjm@malcolmmcatee.com subject: “digm242hwk06s###mjm” [replace ### with your class section number, replace mjm with your initials]

Week 07 / Flash-PHP Communication

PHP->HTML is easy, how about Flash?
Example ActionScript to connect to PHP
Flash Xml Example
Week 08 / PHP-Database Communication
Production, LAB + Refine

Week 09 / Final Project Preparation

Assignments: Your final is due before class next week. Email URL to completed project to mjm@malcolmmcatee.com subject: digm242finals###mjm [replace ### with your class section number, replace mjm with your initials]

Week 10

Final Presentations