Content Presentation

Course Introduction and Overview

• Dynamic Documents
• 2 way communication
• Fast Publishing
• multimedia - multiple formats, video, audio, text, 3D

• Planning
• Designing
• Building
• Testing & Launching

Workshop:

Bits, Bytes; Storage and Bandwidth; Pixels and Image Size; Web Site Planning and Management; Navigation Maps and Storyboards

Workshop Exercise:

Create a personal blog -

Reading:

About Face:
Chapter 1 - Goal-Directed Design

Recommended Reading:

Vannevar Bush As As We May Think http://www.theatlantic.com/doc/194507/bush

Assignment:

Project 1: Create a personal webpage

Content Presentation

Perception in Art and Design - Gestalt, Color and other theories of perception

Workshop:

Color depth; Pixel depth; Bitmap vs. Vector Images
Image preparation, embedding images in HMTL
Review: Illustrator, Photoshop, Dreamweaver

Workshop Exercise:

Creating a web page with media and text
Creating a home web page on the Emily Carr Server

Recommended Reading:

Art, Design and Gestalt Theory, Roy R. Behrens

Content Presentation

Interactive Design Process
- Waterfall Model
- User Centered Process (iterative)
- Agile Development

Information Architecture - Flowchart diagrams
Information Design - Wireframe diagrams

Workshop:

Links
Information design & hierarchies and navigation

Lab Exercise:

Hypermedia Poem

Reading:

The Garden of Forking Paths
by Jorge Luis Borges http://www.geocities.com/papanagnou/cover.htm
The Library of Babel http://www.sccs.swarthmore.edu/users/00/pwillen1/lit/babel.htm

Design :

Designing with Typography: http://dwt.pixelsparks.com/

Art & Design Hypermedia Poem Inspirations:

Fullerene Productions, American Beauty
Blindspot by Darcey Steinke
Olia Lialina - My Boyfriend Came Back From the War
Remix by Entropy8zuper: Her Boyfriend Came Back From the War
Remix My Boyfriend Came Back From the War 1998, Vadim Epstein
My Boyfriend Came Back From the War Remix Page
http://myboyfriendcamebackfromth.ewar.ru/
Abad Antoni 1 000 000http://aleph-arts.org/1.000.000/indexv.htm
Cosic Vuc No Land's Man http://www.ljudmila.org/%7evuk/
Lialina Olia Agatha http://www.c3.hu/collection/agatha/
Beloff Zoe Illusions  http://www.turbulence.org/Works/illusions/index.html
Please Change Beliefs by Jenny Holzer http://adaweb.com/project/holzer/cgi/pcb.cgi
History of Art for Airports by Vuk Cosak http://www.ljudmila.org/%7evuk/history/
Form Art Alexei Shulgin http://www.c3.hu/collection/form/

Assignment :

Project 2: Hypermedia Poem

Content Presentation:

Information Design and Architecture

Workshop:

Navigational Structures,
An overview of CSS. Separating content from presentation
CSS Formatting and Layout

Workshop Exercise:

Create Style for Project 1: DIVA 205 website

Reading:

http://www.alvit.de/handbook/

Assignment:

Content Presentation:

User Interface Design Principles

Workshop:

CSS: Visual Styles, Selectors and Properties

Workshop Exercise:

Format Style for Project 1: DIVA 205 website

Reading:

http://www.cyberstage.org/archive/cstage11/laurel11.html

Assignment :

Content Presentation:

Coding/Decoding: creating meaning with code
 

Workshop:

Flash overview, Layers, Symbols, Libraries and Timeline animation

Workshop Exercise:

Set up your Project 3: Animated Collage in Flash

Critique Project 2:

Hypermedia Poem

Collect Project 2 for grading

Reading:

Semiotics for Beginner by Daniel Chandler http://www.aber.ac.uk/media/Documents/S4B/sem08.html

Technical Resources :

www.Flashkit.com
www.Were-Here.com
www.Flashguru.co.uk
www.Flashmove.com
www.Flashmagazine.com
www.ActionScript.com
www.actionscript.org
http://webmonkey.com/

Art & Design Collage Inspirations:

A is for apple: http://www.aisforapple.net/
Myron Campbell The Fragile Circus http://www.notsosimpleton.com/TheFragileCircus/
Shirin Mohtashami (Kouladjie) http://www.photomontage.com/
Hackney Girl by blip station http://www.blipstation.com/  Hannah Hockh http://www.yellowbellywebdesign.com/hoch/gallery.html

Assignment :

Project 3: Animated Collage

Composition and Process

Workshop:

Building Complexity in Flash: Motion Tweening, Shape Tweening, Effects and Masks

Workshop Exercise:

Create animations for Project 3 in Flash

Reading:

Processor Art by Thor Magnusson
http://art.runme.org/1041468777-11748-0/pa_lowres.pdf
Words Made Flesh Cod Code Culture Imagination, Florian Cramer http://pzwart.wdka.hro.nl/mdr/research/fcramer/wordsmadeflesh/

Resources :

Oulipo http://www.nous.org.uk/oulipo.html
http://www.growndodo.com/wordplay/oulipo/index.html
http://www.bevrowe.info/Poems/QueneauRandom.htm
John Cage's Indeterminacy http://www.lcdf.org/indeterminacy/about.html
Brian Eno's Oblique Strategies
http://www.bbc.co.uk/dna/place-nireland/A635528
http://www.palace.net/~llama/oblique/oblique.html
Procedural Poetry http://www.beardofbees.com/gnoetry.html

Assignment:

Interactive Video: AV Presentation. Do not miss this or you will no be able to take out digital video cameras from AV.

Workshop:

AV Digital Video workshop; Importing, Editing, And Exporting Video for Web in iMovie.
Integrating multimedia into a webpage

Workshop Exercise:

capture, edit and prepare movie for Internet
Working with Video -importing your video and adding Flash elements to your video

Critique Project 3:

Flash Animated Collage

Collect Project 3 for grading

Reading:

Castro, Chapter 17

Video Editing with iMovie http://journalism.berkeley.edu/multimedia/tutorials/imovie/  Basic web video production - Flicktips at New Venue http://www.newvenue.com/flicktips/Apple iMovie Supporthttp://www.apple.com/support/imovie/

Assignment:

Project 4: Ecological Networks - Interactive Flash Animation

Assignment Inspirations :

Sustaining Creativity and Losing the Wild by Dr. Carol Gigliotti
http://www.carolgigliott.net/sustaincreativity.pdf
Gregory Bateson   Ste Steps Toward an Ecology of Mind
http://www.oikos.org/angelsfear.htm
Deep Ecology
http://en.wikipedia.org/wiki/Deep_ecology
http://www.deepecology.org/deepplatform.html
http://www.deepecology.org/deepmovement.html
http://www.webnb.btinternet.co.uk/deep.htm
Wade Davis - the ethnosphere http://www.npr.org/programs/re/archivesdate/2003/may/mali/davisinterview.html
http://webhome.idirect.com/~jsalvis/ReadingRoom/Ideas/IDEAS.htm

Narrative structures and interactive media

Workshop:

ActionScript Interactivity: buttons, mouse and keyboard events

Workshop Exercise:

Project 4 support - implement interactivity

Reading:

Expanding the Concept of Writing: Notes on Net Art, Digital Narrative and Viral Ethics
Mark Amerika Leonardo February 2004, Vol. 37, No. 1: 9-14.
Log in with eciad username and password [electronic library]
http://ezproxy.eciad.ca:2190/doi/pdf/10.1162/002409404772827987

Assignment:

Content Presentation

Interactivity , Interface, Metaphor

Workshop:

Introduction to ActionScript: interface, objects, classes, methods and properties

Workshop Exercise:

Project 4 support

Reading:

Strategies of Interactivity by Dieter Daniels http://www.medienkunstnetz.de/source-text/65/

Interactivity Inspirations:

Art :

Entropy8Zuper http://entropy8zuper.org/godlove/
Myron Campbell http://www.notsosimpleton.com/
Myron Campbell The flowering of forgotten gifts http://www.notsosimpleton.com/nfb/
DigitalThread http://digitalthread.com/webdesign
Interact 10 Ways
Andries Odendaal Light and Infromation http://www.interact10ways.com/usa/sumona.asp
The Barbarian Group Alex Chen Space http://www.interact10ways.com/usa/the_barbarian_group.asp
Leo Burnett Advertising Portfolio  http://www.leoburnett.ca/
Mark Napier Shredder http://potatoland.com/shredder/
Ulysses 101 Chris Mendis http://www.chemicalpictures.net/ulysses101/default.htm
David Clark Nethttp://www.chemicalpictures.net/netart.htm
World of awe Yael Kanarek , http://worldofawe.net/index.html
Entropy8zuper http://entropy8zuper.org/
Entropy8zuper Genesis http://entropy8zuper.org/godlove/fuxation/index.html
Bookchin Natalie The Intruder http://calarts.edu/%7ebookchin/intruder/
Simmons Gary Wakehttp://www.diacenter.org/simmons/index.html
Diller + Scofidio Refresh http://www.diacenter.org/dillerscofidio/grid.html
Brooks Sawad Lapses + Erasure http://www.thing.net/%7esawad/erase/
Friendchip Collection http://www.friendchip.com/

Sound

Vitiello Stephen Tetrasomia http://www.diacenter.org/vitiello/
Dakota - Young-Hae Chang http://www.yhchang.com/DAKOTA.html
Hiller Susan Dream Screenshttp://www.diacenter.org/hiller/index.html

Multimedia Poetry:

Why do you stay up so late?
Poem by Marvin Bell http://www.bornmagazine.org/projects/whystayup/
Bornmagazine [large collection multimedia poems] http://www.bornmagazine.org/

Design Work:

Tazo tea http://www.tazo.com/
Yugo Nakamura's website http://www.yugop.com/
Online Journal Mind http://data.a-icard.com/mind/
Sodaplay http://www.sodaplay.com/constructor/index.htm
The Russian avant-garde book http://www.moma.org/exhibitions/2002/russian/

Assignment:

Content Presentation

Interactive Audio 

Workshop:

ActionScript: Controlling Sound

Workshop Exercise:

Project 4 support integrate sound

Reading:

None

Art and Design:

Sound toys http://www.soundtoys.net/

Assignment :

None

Content Presentation

Interactive Animation

Workshop:

ActionScript: Controlling the Movie Clip

Workshop Exercise:

Project 4 support   con control the movie clip

Reading:

None

Assignment :

Student's Presentations and class critique

Project 1: DIVA 205 website and
Project 4: Visualizing Ecological Networks - Interactive Flash Animation