Bryant Cutler and Professor Ray Elder, Graphic Design
Proposal
Graphic design is a rapidly changing profession. While good design is still based on good typesetting and compositional skills, the advent of the personal computer has had a huge impact on the way that designers work. In no medium is this more apparent than in web design, the design of electronic documents for display on the Internet or on corporate intranets. Unlike any other design medium, web design is sharply bounded by technical details; good web designs are aesthetically pleasing, functional, standards-based, and require as little transmission bandwidth as possible.
These concerns are familiar to computer programmers, who regularly deal with technical standards, program functionality, and bandwidth limitations. Graphic designers, on the other hand, are just beginning to explore the capabilities of the web as a medium. Many designers now in school have extensive print design skills, and they are great at creating aesthetically pleasing web site, but they have no understanding at all of the concepts taught in introductory computer programming courses. These basic programming concepts are vital for designers working with developers or creating interactive sites which include so-called “DHTML” or Macromedia Flash content. My goal in this project was to create an accessible, easily modified, internet-deployable text on those introductory programming concepts that would be aesthetically polished enough to hold a designer’s interest. Instructors would be free to use this text as a beginning tutorial in motion graphics and web design courses.
Execution
I decided early on to use XML (eXtensible Markup Language) files as the source of the text. Because the presentation method was known to be Macromedia Flash, which has a built-in nonvalidating XML parser, I have not provided a DTD or XML schema for the file format. This, however, is a trivial task, as the XML files are scarcely more than flat files with a title, subtitle, text, and a reference to an illustration.
The files also include a hook for additional content, an “example” tag, which could be used to expand the original text with code examples. My original intention was that example tags would contain references to external Flash files, allowing instructors to augment each page of content with interactive widgets that further explain the concept. In my execution of the project, however, the concepts taught seem elementary enough that such toy widgets would be superfluous. Example code could be useful in explaining the concepts but I thought it would be best if individual instructors included their own example code, so that all the examples shown would be from the programming language their students were learning (examples in only ActionScript or PHP in the original text would probably not be replaced by instructors, which could confuse students who are learning another language).
Each “page” of the text is its own XML file. The main application, a Flash file created with ActionScript, dynamically loads and displays the XML files when requested by the user. Another XML file, config.xml, has a listing of the XML files available. It should be noted here that the functionality for skipping from chapter to chapter relies on my file naming convention, although this could easily be modified to accept arbitrary chapter and file names. An additional configuration file includes color values for the background RGB crossfader to work on – color schemes for the main file are modified solely through this colors.xml file.
The largest part of the creative work was the illustration of the concepts. Thirty-three graphics were created in all. Each graphic illustrates a key concept, often related to the text of the “definition” tag. The source files for the graphics, Macromedia Fireworks .png’s, are included with the project executable so that instructors can further customize the course. Alternatively, they could substitute their own example graphics, or simply change the reference in the XML file.
Experience
Working on this project has been a powerful learning experience for me. I learned all about Flash’s XML parser and drawing API, and have gained valuable experience working on the illustrations and text. While this project is really a foundation and a jumping-off point for instructors to modify, I hope that this basic tutorial will help web designers better grasp the vitally important basic concepts of computer programming. The project’s source files will be available to instructors through the Computer Science department at the beginning of Winter Semester, 2004.