Assignments - Fall 2006 - ARTC 331 - Bowling Green State University
syllabus | schedule | assignments | Web Resources | ARTC courses
Turning in files
• Assignments are due in the Homework folder prior to the beginning of class.
• Revised project files are due exactly one week from the critique due date or they will receive a zero.
• When turning in assignments, use the following naming convention: username_project1, username_exercise1, etc.
Project: [1] [2] [3]       Exercise: [1] [2] [3] [4] [5] [6] [7] [8]       Blog: [1] [2] [3] [4] [5]       Final Assignment
Teachers Blog: MMexplorer's Blog
Student Porfolios:
Kaniz R Bokhari
Beth Anne Delph
Joshua Fleischer
Jonathan Flynn
Ryan Gardner
Jonathan Graef
Jim Harper
Tom Jech
Ginger Nelson
Scott Nolfi
Till Renta-guerrero
Marcos Sastre
Danielle Victor
Martel White
Bennett Zettl
Kim Young
Email addresses:
kbokhar's Blog
wingsofire's Blog
under rated's Blog
jaboran's Blog
Ryan's Blog
Jon's Blog
Pixel Addict's Blog
Jech the Czech
Skyday's Blog
Clattering Flood's Blog
Herr Till Renta's Blog
Hamburger's Blog
Danielle's Blog
Martel's Blog
BijutsuGakusei's Blog
Kim Young's Blog
Assignments Description Dates
Project 1 Art Portfolio
Online portfolio showcasing your BEST artwork in any medium. Portfolio MUST be online and all links working for critique.

This is the portfolio that your will hopefully use to get a job once you graduate. You should continue to link all your projects to this portfolio throughout the time you are at BGSU.

You should completely redo the portfolio you did in ARTC 201.


A) Minimum of 5 main sections, including a main page: index.html.
B) Linking on main page:
  • link(s) to artwork (as many categories as you need, i.e., photography, drawing, animation, etc).
  • one link to a brief bio/artist statement.
  • one link for contact info using: mailto or a contact.html page.
  • one link to online journal.
C) Linking on lower level pages:
  • the user should be able to get back to the main page from a lower level page without using the browser back button.
D) Small thumbnail images that link to larger views of each work.
E) Each larger work should have a title, date and medium.

Software References:
HomeSite ref guide (pdf) - PC
BB Edit ref guide (pdf) - MAC

HTML References:
HTML ref guide
W3C - World Wide Web Consortium
Barebones Guide to HTML
Beginner's Guide to HTML

CSS Guides:
CSS ref guide - syntax
Photoshop Redesign2: Mon. Sept 11
3 Pages working in HTML: Mon. Sept 18
Critique of site: Mon. Sept 25

Post online and turn in a copy of your files to HomeWork folder in a sub folder, labeled: username_p1

Revised Site: Mon. Oct 2

Turn in to HomeWork folder in a sub folder, labeled: username_p1_revised

Blog 1 Set up a new blog site for your comments related to the class
  1. Go to:
  2. Click Create Your Blog Now
  3. When you create your account, write down your username, password and DisplayName is a safe place. Use your BGSU email address. If you need to forward your bgsu email to the email client you currently use, please do this by accessing the BG Mail client before the next class period.
  4. You can Create a Blog - this will be your welcome blog.
  5. Name your Blog address ARTC-TTT (first three letters of your last name)
  6. Choose a template - you can change this later but it is not that easy to figure out their coding so pick something you can live with.
  7. We will need to change some settings:
  • Formatting: Change Timezone to UTC -05:00 US/Eastern - Save Settings
  • Comments: Who can comment? Only Members of this Blog
  • Comment Notification Address: Add your email
  • Members: Add Team Members
  • Add each person in the class and me:
Due: Mon. Aug 21 (in class)

Exercise 1/ Blog 2  Part1: Find three websites that you feel are an examples of good design:
1 commercial site (no flash)
1 artist portfolio site (no flash)
1 experimental or creative art site (not a portfolio) (no flash)
-- content is not important.

Part 2: Find 6 websites that are good references for learning HTML, JavaScript, and CSS
Do not select the first site that comes up in the search engine.
Compare a number of different sites to see which one seems easiest to use.
Find 2 HTML, 2 CSS and 2 JavaScript reference sites.
-- design is not important.

If you add the URLs to your Blog links, you must also list them in the body of your blog so we can add them to the class reference pages.

Here are some technical resources I found: Website Design Resources
Due: Wed. Aug 23 (before class)

Post the URLs on your Blog in an easy to read list. You can comment on what you found along your quest for good resources.


Commercial Site:
Name of site - URL

Artist Portfolio Site:
Name of site - URL


Exercise 2 A) Design the pages of your portfolio site in Photoshop, use layers and Photoshop folders to keep links and other images separate. This is not the splash page (should you choose to have one), but the main menu / navigation / intro of your site.

B) Next, draw a hierarchy chart for the online portfolio (in Photoshop, Illustrator, etc. or scan in a drawing). A box should represent each different screen with a layout of links that lead the user to the different screens. Use arrows to connect the boxes. Set both files to 72 DPI.

Turn them both into the HomeWork folder, labeled: username_ex2A and username_ex2B
Due: Mon. Aug 28

Sample hierarchy chart
Exercise 3 Scan in all artwork and create a CONTACT SHEET in Photoshop. 72 DPI.

Turn into HW folder, labeled: username_ex3
Due: Wed. Sept 6
Exercise 4 Evaluate the websites the class selected by choosing 1-5 (1=best).
You may do it in three parts (one form for Commerial sites, one for Portfolios, and one form for Net-art sites OR you can evaluate them all in one sitting and send me one email.

DO NOT only do half a section and submit the form. The site you use to vote is here: Student Submitted Websites
Due: Wed. Sept 6
Blog 3 The Poetics of Interactivity by Margaret Morse.

Post comments about the article on your Blog online. Title your blog entry, Comments on The Poetics of Interactivity.

You should have at least 3 complete paragraphs (or more) discussing how you felt about some of the issues in the paper.
Due: Mon. Sept 18
Project 2a Net-Art site
Project 2 is a website that uses a traditional linear form, i.e., text from a book, to create a non-linear, narrative site. You will data mine and draw inspiration from the text of a book to create your site and eventually use the site to influence the re-organization of the original text and its pages.

You do NOT need to use every page or piece of information from the text given to you, but rather zero in on re-occurring themes in language and topics as inspiration for the structure of your Net-Art piece.


A) Must incorporate pieces of the text (given to you).
B) Must include ONE of each (or more):

  • Javascript creating Randomness
  • Animated Gif or Image Map
  • Form element, i.e., button, text box, etc.
  • Opening/Closing a pop-up window

C) Minimum 7 HTML pages.
D) Collaborating with the person who has the next chapter to create a link / transition from your site to their site. You are only responsible for linking to the person after you, the last person links to the first person.

NOTE: ImageReady may only be used for animated gifs and image maps, not entire site designs. You must code pages yourself and not rely on ImageReady or Draemweaver (or any other code writing program).

Post on your portfolio site and turn in HTML files and the images into the homework folder.
Critique: Mon. Oct 23

Post online and turn in a copy of your files to HW folder in a sub folder, labeled: username_p2

Revised Files: Mon. Oct 30

Turn in to HW folder in a sub folder, labeled: username_p2_revised


Project 2b Create an artist book from the original text you were give. Focus on the re-organization of the text originally used to inspire the Net-Art site.

Book-Making Instructions:

Flag Book, Flutter Book, Japanese Book, Pop-Up Book, Star Book, Tunnel Book

Bring book to class.
Due: Mon. Oct 30
Exercise 5 Erasure
This exercise is one way to data mine or search for patterns in your text by erasing or obscuring words and leaving behind some of the text to create a new story or context.

Main Entry: era • sure
: an act or instance of erasing, 1 a : to rub or scrape out (as written, painted, or engraved letters) b : to remove (recorded matter) from a magnetic medium; also: to remove recorded matter from <erase a videotape> c : to delete from a computer storage device
2 a : to remove from existence or memory as if by erasing b : to nullify the effect or force of <ref:>

For the Erasure exercise, select FIVE pages from the text you received for Project 2. There are many ways to select the pages, initially. For example, choose pages that are your favorite numbers, open the selection randomly, choose pages with common words or theme, through the pages in the air and pick the five on top or generate random numbers based on your pages.

Once you have your pages selected, you have TWO options: either scan straight into the computer or make a xerox copy of the pages. In the end, whether you erase, scrape, rub, etc. into the text on the computer, you still have to erase, scrape, rub, etc into the surface after you have printed the pages.

The idea is to end up with a layering effect, pieces of text in and out of focus. Multiple erasing techniques, include: painting over, whiting-out, crossing through, draw on, collage onto, burn, crumple, etc.

BE CREATIVE!!! Just remember there has to be something left for you to turn in. Also, some existence of text needs to be apparent.

How to choose which words to erase. Here are some suggestions:

• Erase all words that start with your initials, for myself: L M R
• Erase all words except those that end with your initials
• Count the words on your page and generator a random number, ex: result = 5, then erase every fifth word
• Throw darts at the page
• Spill something on it and let the random drops obscure portions

Endless possibilities, but you may want to write your method down because I will ask what procedure you followed.

Think of the words as bits of information traveling through the internet. Information is not sent in its entirety at once, but is broken into packets that create the whole. What happens when some of the packets do not reach their destination or are corrupted? We end up with broken links, missing pictures, corrupted files, etc. As you erase into your pages, think about how you are altering the context of the information that is your text's existence.

Once a chunk of the text is erased on a page, string together the remaining words to create a new narrative or context. At this point, you may want to specifically select words to eliminate in order to fine tune the readability of what's left, the resulting text may seem nonsensical, but that is ok.


A) Choose 5 different pages from your text
B) Make copies or scan into the computer and erase away
C) Must print out and erase into the surface of the paper
You can work digitally, initially, but they must be printed and you must work into the surface of the print.

Turn in 5 PRINTS (minimum size of original text page).
Due: Wed. Oct 11


Flash Proj. 1 Flash Animation Project
Create a short animation using Flash. The theme is:

A funny thing happened to me on the way to school today.

The animation can be very stylized, cartoony, or a collage (or another creative style). Make the story a quick one-liner with a good ending.

Rules for character animation:
  • The main character should not be a realistic or stylized person (they can be a creatively different humanoid or an inanimate object)
  • No killing the character.
  • No toilet humor.
  • The story must have a conclusion.
  • You can have totally unreal situations happen in animation.

    Storytelling basics
    Stories have conflict and resolution.
    There should be a climatic moment where a choice needs to be made.
    The ending should conclude the story.


    You need a page with a title and a Play button on it.
    Your animation must be creatively drawn or created.
    You need to have at least three scenes (cuts).

    Sample Flash Animations:
    Animator vs. Animation
    Atom Films
    The Meatrix
    Channel Frederator
    8 Legged animations
    Sample Student work
    Part 1: Little Foot
    Part 2: The Yuyu
    30 Animations in 30 days (try 6 and 20)
    Ride the Fence
    Annie Almost
    Riton Ruse

    Post online and turn in FLA file into the homework folder.
  • Critique: Wed. Nov 13 for Critique

    Post online and turn in a copy of the FLA file to HW folder, labeled: username_anim

    Revised Files: Final Animations will be due Nov. 20 for a grade.
    Final Proj. Final Project using Flash
    Create a final project based on one of the following genres:

    1. Interactive Narrative Story.
  • The story must have several points where we need to make decisions.
  • The interface must employ a lot of the ActionScripting we have gone over in class.
  • 2. A visual game where the goal is to create an audio and visual experience.
  • The game should not resemble another established game.
  • There should be a variety of interactive elements in the game.
  • The game must employ a lot of the ActionScripting we have gone over in class.
  • 3. A exploratory environment where we uncover things by clicking and rolling over them.

  • The environment should be based on a theme and have multiple levels that we can explore.
  • There should be a variety of interactive elements in the environment.
  • The environment must employ a lot of the ActionScripting we have gone over in class.
  • Requirements and Grading:

  • You need a page with a title.
  • The visual aspects of the work will be factored into the grade (color, composition, drawing skills, graphic quality, etc.).
  • Functionality is expected. If some elements do not work, you will be graded down.
  • You should come up with an interesting concept to guide your work.
  • Extra credit will be given to final projects that are very ambitious in coding, complexity or levels of interaction or are very artfully done.

    Post online and turn in FLA file into the homework folder. Sample Flash Artworks:
    99 Rooms
    Consequences of Thought
    Strange Fruits
    The Servant
    Flash Meat
    Flash Hip Hop
    Animation Disco
  • Final Critique: Wed. Dec 6

    Post online and turn in a copy of the FLA file to HW folder, labeled: username_final

    Revised Files: Final Projects will be due on the portfolio website by 5pm Monday Dec 11 for a grade.
    Blog 4 1) Read the State-of-the-art interactivity? by Jeffrey Veen, including the blog comments/responses. For part one of your blog, write an entry expressing your opinions (based on the article) as if you were replying to Jeffrey's blog.

    2) Look at: Joshua Davis's Flash experiments at: What are your reactions to the type of work Joshua creates, especially with Flash? <his entire site here>

    Post 2 blog entries online using the titles: State-of-the-art Interactivity Comments and Josual Davis Comments.

    Due: Wed. Nov 13
    Blog 5 Make a final entry in your blog. Address the following questions:
    What did you find to be the most valuable things you learned in this class?
    Which assignment(s) did you find to be the most valuable? Would you eliminate or replace an exercise or assignment? Which one and why? Other comments:
    Due: Mon. Dec 11 by 5:00 pm
    FINAL Online Portfolio should be updated with links to ALL projects (exercises not required) for final grading.

    Post online and turn in ALL revamped portfolio files to the HW folder.

    Files NOT turned into the HW folder by the deadline will result in an F regardless of whether they are posted online or not.
    Due: Mon. Dec 11 by 5:00 pm